From 3c6e07117aa427c50acd0b5bbf26fc5324c51a34 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 30 Sep 2018 10:32:44 +0800
Subject: [PATCH 001/524] init the repo

---
 .gitignore    |  4 ++++
 .prettierrc   |  4 ++++
 README.md     |  3 +++
 package.json  | 33 +++++++++++++++++++++++++++++++++
 src/index.ts  |  0
 tsconfig.json | 12 ++++++++++++
 tslint.json   | 14 ++++++++++++++
 7 files changed, 70 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 .prettierrc
 create mode 100644 README.md
 create mode 100644 package.json
 create mode 100644 src/index.ts
 create mode 100644 tsconfig.json
 create mode 100644 tslint.json

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000..6ccc9d846d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+.vscode
+node_modules
+package-lock.json
+build
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000000..1502887d63
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000000..98c66522e2
--- /dev/null
+++ b/README.md
@@ -0,0 +1,3 @@
+# rrweb-snapshot
+
+Not ready yet
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000..c8c0d7d16a
--- /dev/null
+++ b/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "rrweb-snapshot",
+  "version": "0.1.0",
+  "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
+  "main": "index.js",
+  "scripts": {
+    "test": "mocha -r ts-node/register src/**/*.test.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rrweb-io/rrweb-snapshot.git"
+  },
+  "keywords": [
+    "rrweb",
+    "snapshot",
+    "DOM"
+  ],
+  "author": "yanzhen@smartx.com",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rrweb-io/rrweb-snapshot/issues"
+  },
+  "homepage": "https://github.com/rrweb-io/rrweb-snapshot#readme",
+  "devDependencies": {
+    "@types/chai": "^4.1.4",
+    "@types/mocha": "^5.2.5",
+    "chai": "^4.1.2",
+    "mocha": "^5.2.0",
+    "ts-node": "^7.0.1",
+    "tslint": "^4.5.1",
+    "typescript": "^3.0.3"
+  }
+}
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000..1aec14ff9d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "noImplicitAny": true,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "rootDir": "src",
+    "outDir": "build"
+  },
+  "compileOnSave": true
+}
\ No newline at end of file
diff --git a/tslint.json b/tslint.json
new file mode 100644
index 0000000000..c82ebf60b8
--- /dev/null
+++ b/tslint.json
@@ -0,0 +1,14 @@
+{
+  "defaultSeverity": "error",
+  "extends": ["tslint:recommended"],
+  "jsRules": {},
+  "rules": {
+    "no-any": true,
+    "quotemark": [true, "single"],
+    "ordered-imports": false,
+    "object-literal-sort-keys": false,
+    "no-unused-variable": true,
+    "object-literal-key-quotes": false
+  },
+  "rulesDirectory": []
+}
\ No newline at end of file

From 819cf3062ee14fa103a61b803f7702bb200611d5 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 30 Sep 2018 13:44:13 +0800
Subject: [PATCH 002/524] basic snapshot implementation

---
 src/index.ts  | 138 ++++++++++++++++++++++++++++++++++++++++++++++++++
 tsconfig.json |   5 +-
 tslint.json   |   3 +-
 3 files changed, 143 insertions(+), 3 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index e69de29bb2..4a003d2b99 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -0,0 +1,138 @@
+let _id = 1;
+
+function genId(): number {
+  return _id++;
+}
+
+enum NodeType {
+  Document,
+  DocumentType,
+  Element,
+  Text,
+  CDATA,
+  Comment,
+}
+
+type serializedNode =
+  | documentNode
+  | documentTypeNode
+  | elementNode
+  | textNode
+  | cdataNode
+  | commentNode;
+
+type documentNode = {
+  type: NodeType.Document;
+  childNodes: serializedNode[];
+};
+
+type documentTypeNode = {
+  type: NodeType.DocumentType;
+  name: string;
+  publicId: string;
+  systemId: string;
+};
+
+type attributes = {
+  [key: string]: string;
+};
+type elementNode = {
+  type: NodeType.Element;
+  tagName: string;
+  attributes: attributes;
+  childNodes: serializedNode[];
+};
+
+type textNode = {
+  type: NodeType.Text;
+  textContent: string;
+};
+
+type cdataNode = {
+  type: NodeType.CDATA;
+  textContent: '';
+};
+
+type commentNode = {
+  type: NodeType.Comment;
+  textContent: string;
+};
+
+function serializeNode(n: Node): serializedNode | false {
+  switch (n.nodeType) {
+    case n.DOCUMENT_NODE:
+      return {
+        type: NodeType.Document,
+        childNodes: [],
+      };
+    case n.DOCUMENT_TYPE_NODE:
+      return {
+        type: NodeType.DocumentType,
+        name: (n as DocumentType).name,
+        publicId: (n as DocumentType).publicId,
+        systemId: (n as DocumentType).systemId,
+      };
+    case n.ELEMENT_NODE:
+      const tagName = (n as HTMLElement).tagName.toLowerCase();
+      const attributes: attributes = {};
+      for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
+        attributes[name] = value;
+      }
+      return {
+        type: NodeType.Element,
+        tagName,
+        attributes,
+        childNodes: [],
+      };
+    case n.TEXT_NODE:
+      // 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 as Text).textContent;
+      if (parentTagName === 'SCRIPT') {
+        textContent = '';
+      }
+      return {
+        type: NodeType.Text,
+        textContent,
+      };
+    case n.CDATA_SECTION_NODE:
+      return {
+        type: NodeType.CDATA,
+        textContent: '',
+      };
+    case n.COMMENT_NODE:
+      return {
+        type: NodeType.Comment,
+        textContent: (n as Comment).textContent,
+      };
+    default:
+      return false;
+  }
+}
+
+type serializedNodeWithId = serializedNode & { id: number };
+
+function snapshot(n: Node): serializedNodeWithId | null {
+  const _serializedNode = serializeNode(n);
+  if (!_serializedNode) {
+    // TODO: dev only
+    console.warn(n, 'not serialized');
+    return null;
+  }
+  const serializedNode: serializedNodeWithId = Object.assign(_serializedNode, {
+    id: genId(),
+  });
+  if (
+    serializedNode.type === NodeType.Document ||
+    serializedNode.type === NodeType.Element
+  ) {
+    for (const childN of Array.from(n.childNodes)) {
+      serializedNode.childNodes.push(snapshot(childN));
+    }
+  }
+  return serializedNode;
+}
+
+export default snapshot;
diff --git a/tsconfig.json b/tsconfig.json
index 1aec14ff9d..ce1b7e3ca7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,8 @@
     "preserveConstEnums": true,
     "sourceMap": true,
     "rootDir": "src",
-    "outDir": "build"
+    "outDir": "build",
+    "lib": ["es6", "dom"]
   },
   "compileOnSave": true
-}
\ No newline at end of file
+}
diff --git a/tslint.json b/tslint.json
index c82ebf60b8..3a0c080195 100644
--- a/tslint.json
+++ b/tslint.json
@@ -8,7 +8,8 @@
     "ordered-imports": false,
     "object-literal-sort-keys": false,
     "no-unused-variable": true,
-    "object-literal-key-quotes": false
+    "object-literal-key-quotes": false,
+    "variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore"]
   },
   "rulesDirectory": []
 }
\ No newline at end of file

From 3edd364c3b40f5fd9e2b339eaea522c9493bf2f8 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 30 Sep 2018 15:26:00 +0800
Subject: [PATCH 003/524] basic rebuild implementation

---
 src/index.ts    | 140 ++----------------------------------------------
 src/rebuild.ts  |  46 ++++++++++++++++
 src/snapshot.ts |  89 ++++++++++++++++++++++++++++++
 src/types.ts    |  55 +++++++++++++++++++
 4 files changed, 193 insertions(+), 137 deletions(-)
 create mode 100644 src/rebuild.ts
 create mode 100644 src/snapshot.ts
 create mode 100644 src/types.ts

diff --git a/src/index.ts b/src/index.ts
index 4a003d2b99..758f2df991 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,138 +1,4 @@
-let _id = 1;
+import snapshot from './snapshot';
+import rebuild from './rebuild';
 
-function genId(): number {
-  return _id++;
-}
-
-enum NodeType {
-  Document,
-  DocumentType,
-  Element,
-  Text,
-  CDATA,
-  Comment,
-}
-
-type serializedNode =
-  | documentNode
-  | documentTypeNode
-  | elementNode
-  | textNode
-  | cdataNode
-  | commentNode;
-
-type documentNode = {
-  type: NodeType.Document;
-  childNodes: serializedNode[];
-};
-
-type documentTypeNode = {
-  type: NodeType.DocumentType;
-  name: string;
-  publicId: string;
-  systemId: string;
-};
-
-type attributes = {
-  [key: string]: string;
-};
-type elementNode = {
-  type: NodeType.Element;
-  tagName: string;
-  attributes: attributes;
-  childNodes: serializedNode[];
-};
-
-type textNode = {
-  type: NodeType.Text;
-  textContent: string;
-};
-
-type cdataNode = {
-  type: NodeType.CDATA;
-  textContent: '';
-};
-
-type commentNode = {
-  type: NodeType.Comment;
-  textContent: string;
-};
-
-function serializeNode(n: Node): serializedNode | false {
-  switch (n.nodeType) {
-    case n.DOCUMENT_NODE:
-      return {
-        type: NodeType.Document,
-        childNodes: [],
-      };
-    case n.DOCUMENT_TYPE_NODE:
-      return {
-        type: NodeType.DocumentType,
-        name: (n as DocumentType).name,
-        publicId: (n as DocumentType).publicId,
-        systemId: (n as DocumentType).systemId,
-      };
-    case n.ELEMENT_NODE:
-      const tagName = (n as HTMLElement).tagName.toLowerCase();
-      const attributes: attributes = {};
-      for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
-        attributes[name] = value;
-      }
-      return {
-        type: NodeType.Element,
-        tagName,
-        attributes,
-        childNodes: [],
-      };
-    case n.TEXT_NODE:
-      // 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 as Text).textContent;
-      if (parentTagName === 'SCRIPT') {
-        textContent = '';
-      }
-      return {
-        type: NodeType.Text,
-        textContent,
-      };
-    case n.CDATA_SECTION_NODE:
-      return {
-        type: NodeType.CDATA,
-        textContent: '',
-      };
-    case n.COMMENT_NODE:
-      return {
-        type: NodeType.Comment,
-        textContent: (n as Comment).textContent,
-      };
-    default:
-      return false;
-  }
-}
-
-type serializedNodeWithId = serializedNode & { id: number };
-
-function snapshot(n: Node): serializedNodeWithId | null {
-  const _serializedNode = serializeNode(n);
-  if (!_serializedNode) {
-    // TODO: dev only
-    console.warn(n, 'not serialized');
-    return null;
-  }
-  const serializedNode: serializedNodeWithId = Object.assign(_serializedNode, {
-    id: genId(),
-  });
-  if (
-    serializedNode.type === NodeType.Document ||
-    serializedNode.type === NodeType.Element
-  ) {
-    for (const childN of Array.from(n.childNodes)) {
-      serializedNode.childNodes.push(snapshot(childN));
-    }
-  }
-  return serializedNode;
-}
-
-export default snapshot;
+export { snapshot, rebuild };
diff --git a/src/rebuild.ts b/src/rebuild.ts
new file mode 100644
index 0000000000..1d581e4527
--- /dev/null
+++ b/src/rebuild.ts
@@ -0,0 +1,46 @@
+import { serializedNodeWithId, NodeType } from './types';
+
+function buildNode(n: serializedNodeWithId): Node | null {
+  switch (n.type) {
+    case NodeType.Document:
+      return document.implementation.createDocument(null, '', null);
+    case NodeType.DocumentType:
+      return document.implementation.createDocumentType(
+        n.name,
+        n.publicId,
+        n.systemId,
+      );
+    case NodeType.Element:
+      const node = document.createElement(n.tagName);
+      for (const name in n.attributes) {
+        if (n.attributes.hasOwnProperty(name)) {
+          node.setAttribute(name, n.attributes[name]);
+        }
+      }
+      return node;
+    case NodeType.Text:
+      return document.createTextNode(n.textContent);
+    case NodeType.CDATA:
+      return document.createCDATASection(n.textContent);
+    case NodeType.Comment:
+      return document.createComment(n.textContent);
+    default:
+      return null;
+  }
+}
+
+function rebuild(n: serializedNodeWithId): Node | null {
+  const root = buildNode(n);
+  if (!root) {
+    return null;
+  }
+  if (n.type === NodeType.Document || n.type === NodeType.Element) {
+    for (const childN of n.childNodes) {
+      const childNode = rebuild(childN);
+      root.appendChild(childNode);
+    }
+  }
+  return root;
+}
+
+export default rebuild;
diff --git a/src/snapshot.ts b/src/snapshot.ts
new file mode 100644
index 0000000000..ce805da52e
--- /dev/null
+++ b/src/snapshot.ts
@@ -0,0 +1,89 @@
+import {
+  serializedNode,
+  serializedNodeWithId,
+  NodeType,
+  attributes,
+} from './types';
+
+let _id = 1;
+
+function genId(): number {
+  return _id++;
+}
+
+function serializeNode(n: Node): serializedNode | false {
+  switch (n.nodeType) {
+    case n.DOCUMENT_NODE:
+      return {
+        type: NodeType.Document,
+        childNodes: [],
+      };
+    case n.DOCUMENT_TYPE_NODE:
+      return {
+        type: NodeType.DocumentType,
+        name: (n as DocumentType).name,
+        publicId: (n as DocumentType).publicId,
+        systemId: (n as DocumentType).systemId,
+      };
+    case n.ELEMENT_NODE:
+      const tagName = (n as HTMLElement).tagName.toLowerCase();
+      const attributes: attributes = {};
+      for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
+        attributes[name] = value;
+      }
+      return {
+        type: NodeType.Element,
+        tagName,
+        attributes,
+        childNodes: [],
+      };
+    case n.TEXT_NODE:
+      // 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 as Text).textContent;
+      if (parentTagName === 'SCRIPT') {
+        textContent = '';
+      }
+      return {
+        type: NodeType.Text,
+        textContent,
+      };
+    case n.CDATA_SECTION_NODE:
+      return {
+        type: NodeType.CDATA,
+        textContent: '',
+      };
+    case n.COMMENT_NODE:
+      return {
+        type: NodeType.Comment,
+        textContent: (n as Comment).textContent,
+      };
+    default:
+      return false;
+  }
+}
+
+function snapshot(n: Node): serializedNodeWithId | null {
+  const _serializedNode = serializeNode(n);
+  if (!_serializedNode) {
+    // TODO: dev only
+    console.warn(n, 'not serialized');
+    return null;
+  }
+  const serializedNode: serializedNodeWithId = Object.assign(_serializedNode, {
+    id: genId(),
+  });
+  if (
+    serializedNode.type === NodeType.Document ||
+    serializedNode.type === NodeType.Element
+  ) {
+    for (const childN of Array.from(n.childNodes)) {
+      serializedNode.childNodes.push(snapshot(childN));
+    }
+  }
+  return serializedNode;
+}
+
+export default snapshot;
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000000..25fc9962d6
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,55 @@
+export enum NodeType {
+  Document,
+  DocumentType,
+  Element,
+  Text,
+  CDATA,
+  Comment,
+}
+
+export type documentNode = {
+  type: NodeType.Document;
+  childNodes: serializedNodeWithId[];
+};
+
+export type documentTypeNode = {
+  type: NodeType.DocumentType;
+  name: string;
+  publicId: string;
+  systemId: string;
+};
+
+export type attributes = {
+  [key: string]: string;
+};
+export type elementNode = {
+  type: NodeType.Element;
+  tagName: string;
+  attributes: attributes;
+  childNodes: serializedNodeWithId[];
+};
+
+export type textNode = {
+  type: NodeType.Text;
+  textContent: string;
+};
+
+export type cdataNode = {
+  type: NodeType.CDATA;
+  textContent: '';
+};
+
+export type commentNode = {
+  type: NodeType.Comment;
+  textContent: string;
+};
+
+export type serializedNode =
+  | documentNode
+  | documentTypeNode
+  | elementNode
+  | textNode
+  | cdataNode
+  | commentNode;
+
+export type serializedNodeWithId = serializedNode & { id: number };

From 7d1cf132661d0c758af38479c660d111b3d7eea8 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 30 Sep 2018 16:20:53 +0800
Subject: [PATCH 004/524] setup tests

---
 .prettierrc                  |  4 +--
 index.d.ts                   |  4 +++
 package.json                 |  6 +++-
 src/rebuild.ts               |  6 +++-
 test/html/about-mozilla.html | 57 +++++++++++++++++++++++++++++
 test/html/basic.html         | 15 ++++++++
 test/index.ts                | 70 ++++++++++++++++++++++++++++++++++++
 tsconfig.json                |  4 ++-
 tslint.json                  | 10 ++++--
 9 files changed, 169 insertions(+), 7 deletions(-)
 create mode 100644 index.d.ts
 create mode 100644 test/html/about-mozilla.html
 create mode 100644 test/html/basic.html
 create mode 100644 test/index.ts

diff --git a/.prettierrc b/.prettierrc
index 1502887d63..a20502b7f0 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,4 @@
 {
   "singleQuote": true,
-  "trailingComma": "es5"
-}
\ No newline at end of file
+  "trailingComma": "all"
+}
diff --git a/index.d.ts b/index.d.ts
new file mode 100644
index 0000000000..f7f2dbfa0c
--- /dev/null
+++ b/index.d.ts
@@ -0,0 +1,4 @@
+declare module 'mocha-jsdom' {
+  function mochaDom(options: any): void;
+  export = mochaDom;
+}
diff --git a/package.json b/package.json
index c8c0d7d16a..2c62a4c911 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "main": "index.js",
   "scripts": {
-    "test": "mocha -r ts-node/register src/**/*.test.ts"
+    "test": "TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts"
   },
   "repository": {
     "type": "git",
@@ -23,9 +23,13 @@
   "homepage": "https://github.com/rrweb-io/rrweb-snapshot#readme",
   "devDependencies": {
     "@types/chai": "^4.1.4",
+    "@types/jsdom": "^11.12.0",
     "@types/mocha": "^5.2.5",
+    "@types/node": "^10.11.3",
     "chai": "^4.1.2",
+    "jsdom": "^12.1.0",
     "mocha": "^5.2.0",
+    "mocha-jsdom": "^2.0.0",
     "ts-node": "^7.0.1",
     "tslint": "^4.5.1",
     "typescript": "^3.0.3"
diff --git a/src/rebuild.ts b/src/rebuild.ts
index 1d581e4527..3dee602629 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -14,7 +14,11 @@ function buildNode(n: serializedNodeWithId): Node | null {
       const node = document.createElement(n.tagName);
       for (const name in n.attributes) {
         if (n.attributes.hasOwnProperty(name)) {
-          node.setAttribute(name, n.attributes[name]);
+          try {
+            node.setAttribute(name, n.attributes[name]);
+          } catch (error) {
+            // skip invalid attribute
+          }
         }
       }
       return node;
diff --git a/test/html/about-mozilla.html b/test/html/about-mozilla.html
new file mode 100644
index 0000000000..f353c48233
--- /dev/null
+++ b/test/html/about-mozilla.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>The Book of Mozilla, 11:9</title>
+  <style type="text/css">
+    html {
+      background: maroon;
+      color: white;
+      font-style: italic;
+    }
+
+    #moztext {
+      margin-top: 15%;
+      font-size: 1.1em;
+      font-family: serif;
+      text-align: center;
+      line-height: 1.5;
+    }
+
+    #from {
+      font-size: 1.95em;
+      font-family: serif;
+      text-align: right;
+    }
+
+    em {
+      font-size: 1.3em;
+      line-height: 0;
+    }
+
+    a {
+      text-decoration: none;
+      color: white;
+    }
+  </style>
+</head>
+
+<body>
+
+  <p id="moztext">
+    Mammon slept. And the <em>beast reborn</em> spread over the earth and its numbers
+    grew legion. And they proclaimed the times and <em>sacrificed</em> crops unto the
+    fire, with the <em>cunning of foxes</em>. And they built a new world in their own
+    image as promised by the <em><a href="http://www.mozilla.org/about/mozilla-manifesto.html">
+        sacred words</a></em>, and <em><a href="http://wiki.mozilla.org/About:mozilla">spoke
+      </a></em> of the beast with their children. Mammon awoke, and lo! it was
+    <em>naught</em> but a follower.
+  </p>
+
+  <p id="from">
+    from <strong>The Book of Mozilla,</strong> 11:9<br /><small>(10th Edition)</small>
+  </p>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/test/html/basic.html b/test/html/basic.html
new file mode 100644
index 0000000000..95fac2bede
--- /dev/null
+++ b/test/html/basic.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+
+<body>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/test/index.ts b/test/index.ts
new file mode 100644
index 0000000000..a9fba36956
--- /dev/null
+++ b/test/index.ts
@@ -0,0 +1,70 @@
+import 'mocha';
+import mochaDom = require('mocha-jsdom');
+import { expect } from 'chai';
+import * as fs from 'fs';
+import * as path from 'path';
+import { JSDOM } from 'jsdom';
+import { snapshot, rebuild } from '../src';
+
+const htmlFolder = path.join(__dirname, 'html');
+const htmls = fs.readdirSync(htmlFolder).map(filePath => {
+  return {
+    filePath,
+    content: fs.readFileSync(path.resolve(htmlFolder, filePath), 'utf-8'),
+  };
+});
+
+describe('integration tests', () => {
+  mochaDom({ url: 'http://localhost' });
+
+  it('will snapshot document type', () => {
+    const raw = '<html></html>';
+    const dom = new JSDOM(raw);
+    const snap = snapshot(dom.window.document);
+    expect(snap).to.deep.equal({
+      type: 0,
+      childNodes: [
+        {
+          type: 2,
+          tagName: 'html',
+          attributes: {},
+          childNodes: [
+            {
+              type: 2,
+              tagName: 'head',
+              attributes: {},
+              childNodes: [],
+              id: 3,
+            },
+            {
+              type: 2,
+              tagName: 'body',
+              attributes: {},
+              childNodes: [],
+              id: 4,
+            },
+          ],
+          id: 2,
+        },
+      ],
+      id: 1,
+    });
+  });
+
+  it('will not throw error with invalid attribute', () => {
+    const raw = `<html foo='bar' ''></html>`;
+    const dom = new JSDOM(raw);
+    expect(() => rebuild(snapshot(dom.window.document))).not.to.throw();
+  });
+
+  for (const html of htmls) {
+    it('[html file]:' + html.filePath, () => {
+      const dom = new JSDOM(html.content);
+      const snap = snapshot(dom.window.document);
+      const rebuildDom = rebuild(snap);
+      expect((rebuildDom as Document).documentElement.outerHTML).to.equal(
+        dom.window.document.documentElement.outerHTML,
+      );
+    });
+  }
+});
diff --git a/tsconfig.json b/tsconfig.json
index ce1b7e3ca7..06b323aa91 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,5 +9,7 @@
     "outDir": "build",
     "lib": ["es6", "dom"]
   },
-  "compileOnSave": true
+  "compileOnSave": true,
+  "exclude": ["test"],
+  "include": ["index.d.ts"]
 }
diff --git a/tslint.json b/tslint.json
index 3a0c080195..a153081c53 100644
--- a/tslint.json
+++ b/tslint.json
@@ -9,7 +9,13 @@
     "object-literal-sort-keys": false,
     "no-unused-variable": true,
     "object-literal-key-quotes": false,
-    "variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore"]
+    "variable-name": [
+      true,
+      "ban-keywords",
+      "check-format",
+      "allow-leading-underscore"
+    ],
+    "arrow-parens": false
   },
   "rulesDirectory": []
-}
\ No newline at end of file
+}

From 05e4103f7a6f9918fcaa71a1e1a0e2e09eae697d Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 30 Sep 2018 17:38:44 +0800
Subject: [PATCH 005/524] replace script tag with noscript and inline the
 states of form field components

---
 src/rebuild.ts             |  13 +++-
 src/snapshot.ts            |  35 +++++++++-
 src/types.ts               |   2 +-
 test/html/with-script.html |  18 +++++
 test/index.ts              |  70 --------------------
 test/integration.ts        | 132 +++++++++++++++++++++++++++++++++++++
 6 files changed, 195 insertions(+), 75 deletions(-)
 create mode 100644 test/html/with-script.html
 delete mode 100644 test/index.ts
 create mode 100644 test/integration.ts

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 3dee602629..f6be61ca7e 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -11,11 +11,20 @@ function buildNode(n: serializedNodeWithId): Node | null {
         n.systemId,
       );
     case NodeType.Element:
-      const node = document.createElement(n.tagName);
+      const tagName = n.tagName === 'script' ? 'noscript' : n.tagName;
+      const node = document.createElement(tagName);
       for (const name in n.attributes) {
         if (n.attributes.hasOwnProperty(name)) {
+          let value = n.attributes[name];
+          value = typeof value === 'boolean' ? '' : value;
+          // textarea hack
+          if (n.tagName === 'textarea' && name === 'value') {
+            const child = document.createTextNode(value);
+            node.appendChild(child);
+            continue;
+          }
           try {
-            node.setAttribute(name, n.attributes[name]);
+            node.setAttribute(name, value);
           } catch (error) {
             // skip invalid attribute
           }
diff --git a/src/snapshot.ts b/src/snapshot.ts
index ce805da52e..c6f4eb6010 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -11,6 +11,10 @@ function genId(): number {
   return _id++;
 }
 
+function resetId() {
+  _id = 1;
+}
+
 function serializeNode(n: Node): serializedNode | false {
   switch (n.nodeType) {
     case n.DOCUMENT_NODE:
@@ -31,6 +35,28 @@ function serializeNode(n: Node): serializedNode | false {
       for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
         attributes[name] = value;
       }
+      if (
+        tagName === 'input' ||
+        tagName === 'textarea' ||
+        tagName === 'select'
+      ) {
+        const value = (n as HTMLInputElement | HTMLTextAreaElement).value;
+        if (
+          attributes.type !== 'radio' &&
+          attributes.type !== 'checkbox' &&
+          value
+        ) {
+          attributes.value = value;
+        } else if ((n as HTMLInputElement).checked) {
+          attributes.checked = (n as HTMLInputElement).checked;
+        }
+      }
+      if (tagName === 'option') {
+        const selectValue = (n as HTMLOptionElement).parentElement;
+        if (attributes.value === (selectValue as HTMLSelectElement).value) {
+          attributes.selected = (n as HTMLOptionElement).selected;
+        }
+      }
       return {
         type: NodeType.Element,
         tagName,
@@ -65,7 +91,7 @@ function serializeNode(n: Node): serializedNode | false {
   }
 }
 
-function snapshot(n: Node): serializedNodeWithId | null {
+function _snapshot(n: Node): serializedNodeWithId | null {
   const _serializedNode = serializeNode(n);
   if (!_serializedNode) {
     // TODO: dev only
@@ -80,10 +106,15 @@ function snapshot(n: Node): serializedNodeWithId | null {
     serializedNode.type === NodeType.Element
   ) {
     for (const childN of Array.from(n.childNodes)) {
-      serializedNode.childNodes.push(snapshot(childN));
+      serializedNode.childNodes.push(_snapshot(childN));
     }
   }
   return serializedNode;
 }
 
+function snapshot(n: Node): serializedNodeWithId | null {
+  resetId();
+  return _snapshot(n);
+}
+
 export default snapshot;
diff --git a/src/types.ts b/src/types.ts
index 25fc9962d6..17fc0e42c0 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -20,7 +20,7 @@ export type documentTypeNode = {
 };
 
 export type attributes = {
-  [key: string]: string;
+  [key: string]: string | boolean;
 };
 export type elementNode = {
   type: NodeType.Element;
diff --git a/test/html/with-script.html b/test/html/with-script.html
new file mode 100644
index 0000000000..e3598090ea
--- /dev/null
+++ b/test/html/with-script.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>with script</title>
+</head>
+
+<body>
+  <script src="a.js"></script>
+  <script>
+    console.log(1)
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/test/index.ts b/test/index.ts
deleted file mode 100644
index a9fba36956..0000000000
--- a/test/index.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import 'mocha';
-import mochaDom = require('mocha-jsdom');
-import { expect } from 'chai';
-import * as fs from 'fs';
-import * as path from 'path';
-import { JSDOM } from 'jsdom';
-import { snapshot, rebuild } from '../src';
-
-const htmlFolder = path.join(__dirname, 'html');
-const htmls = fs.readdirSync(htmlFolder).map(filePath => {
-  return {
-    filePath,
-    content: fs.readFileSync(path.resolve(htmlFolder, filePath), 'utf-8'),
-  };
-});
-
-describe('integration tests', () => {
-  mochaDom({ url: 'http://localhost' });
-
-  it('will snapshot document type', () => {
-    const raw = '<html></html>';
-    const dom = new JSDOM(raw);
-    const snap = snapshot(dom.window.document);
-    expect(snap).to.deep.equal({
-      type: 0,
-      childNodes: [
-        {
-          type: 2,
-          tagName: 'html',
-          attributes: {},
-          childNodes: [
-            {
-              type: 2,
-              tagName: 'head',
-              attributes: {},
-              childNodes: [],
-              id: 3,
-            },
-            {
-              type: 2,
-              tagName: 'body',
-              attributes: {},
-              childNodes: [],
-              id: 4,
-            },
-          ],
-          id: 2,
-        },
-      ],
-      id: 1,
-    });
-  });
-
-  it('will not throw error with invalid attribute', () => {
-    const raw = `<html foo='bar' ''></html>`;
-    const dom = new JSDOM(raw);
-    expect(() => rebuild(snapshot(dom.window.document))).not.to.throw();
-  });
-
-  for (const html of htmls) {
-    it('[html file]:' + html.filePath, () => {
-      const dom = new JSDOM(html.content);
-      const snap = snapshot(dom.window.document);
-      const rebuildDom = rebuild(snap);
-      expect((rebuildDom as Document).documentElement.outerHTML).to.equal(
-        dom.window.document.documentElement.outerHTML,
-      );
-    });
-  }
-});
diff --git a/test/integration.ts b/test/integration.ts
new file mode 100644
index 0000000000..00375d0dba
--- /dev/null
+++ b/test/integration.ts
@@ -0,0 +1,132 @@
+import 'mocha';
+import mochaDom = require('mocha-jsdom');
+import { expect } from 'chai';
+import * as fs from 'fs';
+import * as path from 'path';
+import { JSDOM } from 'jsdom';
+import { snapshot, rebuild } from '../src';
+
+const htmlFolder = path.join(__dirname, 'html');
+const htmls = fs.readdirSync(htmlFolder).map(filePath => {
+  return {
+    filePath,
+    content: fs.readFileSync(path.resolve(htmlFolder, filePath), 'utf-8'),
+  };
+});
+
+describe('integration tests', () => {
+  mochaDom({ url: 'http://localhost' });
+
+  for (const html of htmls) {
+    it('[html file]:' + html.filePath, () => {
+      const dom = new JSDOM(html.content);
+      const snap = snapshot(dom.window.document);
+      const rebuildDom = rebuild(snap);
+      const htmlStr = dom.window.document.documentElement.outerHTML
+        .replace(/<script>(.|\n)*?<\/script>/g, '<script></script>')
+        .replace(/<script(.*?)>/g, '<noscript$1>')
+        .replace(/<\/script>/g, '</noscript>');
+      expect((rebuildDom as Document).documentElement.outerHTML).to.equal(
+        htmlStr,
+      );
+    });
+  }
+
+  it('will snapshot document type', () => {
+    const raw = '<html></html>';
+    const dom = new JSDOM(raw);
+    const snap = snapshot(dom.window.document);
+    expect(snap).to.deep.equal({
+      type: 0,
+      childNodes: [
+        {
+          type: 2,
+          tagName: 'html',
+          attributes: {},
+          childNodes: [
+            {
+              type: 2,
+              tagName: 'head',
+              attributes: {},
+              childNodes: [],
+              id: 3,
+            },
+            {
+              type: 2,
+              tagName: 'body',
+              attributes: {},
+              childNodes: [],
+              id: 4,
+            },
+          ],
+          id: 2,
+        },
+      ],
+      id: 1,
+    });
+  });
+
+  it('will not throw error with invalid attribute', () => {
+    const raw = `<html foo='bar' ''></html>`;
+    const dom = new JSDOM(raw);
+    expect(() => rebuild(snapshot(dom.window.document))).not.to.throw();
+  });
+
+  it('will inline text input value', () => {
+    const raw = '<input type="text">';
+    const dom = new JSDOM(raw);
+    dom.window.document.querySelector('input').value = '1';
+    const rebuildDom = rebuild(snapshot(dom.window.document));
+    expect((rebuildDom as Document).querySelector('input').outerHTML).to.equal(
+      '<input type="text" value="1">',
+    );
+  });
+
+  it('will inline radio input value', () => {
+    const raw = '<input type="radio">';
+    const dom = new JSDOM(raw);
+    dom.window.document.querySelector('input').checked = true;
+    const rebuildDom = rebuild(snapshot(dom.window.document));
+    expect((rebuildDom as Document).querySelector('input').outerHTML).to.equal(
+      '<input type="radio" checked="">',
+    );
+  });
+
+  it('will inline checkbox input value', () => {
+    const raw = '<input type="checkbox">';
+    const dom = new JSDOM(raw);
+    dom.window.document.querySelector('input').checked = true;
+    const rebuildDom = rebuild(snapshot(dom.window.document));
+    expect((rebuildDom as Document).querySelector('input').outerHTML).to.equal(
+      '<input type="checkbox" checked="">',
+    );
+  });
+
+  it('will inline textarea value into text node', () => {
+    const raw = '<textarea name="" id="" cols="30" rows="10"></textarea>';
+    const dom = new JSDOM(raw);
+    dom.window.document.querySelector('textarea').value = '1234';
+    const rebuildDom = rebuild(snapshot(dom.window.document));
+    expect(
+      (rebuildDom as Document).querySelector('textarea').outerHTML,
+    ).to.equal('<textarea name="" id="" cols="30" rows="10">1234</textarea>');
+  });
+
+  it('will inline options state', () => {
+    const raw = `
+<select name="" id="">
+  <option value="1">1</option>
+  <option value="2">2</option>
+</select>
+    `;
+    const dom = new JSDOM(raw);
+    dom.window.document.querySelector('select').value = '2';
+    const rebuildDom = rebuild(snapshot(dom.window.document));
+    expect((rebuildDom as Document).querySelector('select').outerHTML).to.equal(
+      `<select name="" id="" value="2">
+  <option value="1">1</option>
+  <option value="2" selected="">2</option>
+</select>`,
+    );
+  });
+});

From bd325870e7753a3d658c1aaa1db5244357510560 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 3 Oct 2018 12:08:46 +0800
Subject: [PATCH 006/524] refactor test infra so most test cases could be
 implemented by pure HTML

---
 test/css/style.css               |   6 ++
 test/html/form-fields.html       |  79 ++++++++++++++++++++++
 test/html/invalid-attribute.html |   9 +++
 test/html/with-script.html       |  21 +++++-
 test/integration.ts              | 108 +++++++++----------------------
 5 files changed, 146 insertions(+), 77 deletions(-)
 create mode 100644 test/css/style.css
 create mode 100644 test/html/form-fields.html
 create mode 100644 test/html/invalid-attribute.html

diff --git a/test/css/style.css b/test/css/style.css
new file mode 100644
index 0000000000..70b063e64a
--- /dev/null
+++ b/test/css/style.css
@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+}
+p {
+  color: red;
+}
diff --git a/test/html/form-fields.html b/test/html/form-fields.html
new file mode 100644
index 0000000000..6eef35449e
--- /dev/null
+++ b/test/html/form-fields.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>form fields</title>
+</head>
+
+<body>
+  <form>
+    <label for="text">
+      <input type="text">
+    </label>
+    <label for="radio">
+      <input type="radio">
+    </label>
+    <label for="checkbox">
+      <input type="checkbox">
+    </label>
+    <label for="textarea">
+      <textarea name="" id="" cols="30" rows="10"></textarea>
+    </label>
+    <label for="select">
+      <select name="" id="">
+        <option value="1">1</option>
+        <option value="2">2</option>
+      </select>
+    </label>
+  </form>
+</body>
+<script>
+  document.querySelector('input[type="text"]').value = '1';
+  document.querySelector('input[type="radio"]').checked = true;
+  document.querySelector('input[type="checkbox"]').checked = true;
+  document.querySelector('textarea').value = '1234';
+  document.querySelector('select').value = '2';
+</script>
+
+</html>
+
+<!-- TEST_DIVIDER -->
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>form fields</title>
+</head>
+
+<body>
+  <form>
+    <label for="text">
+      <input type="text" value="1">
+    </label>
+    <label for="radio">
+      <input type="radio" checked="">
+    </label>
+    <label for="checkbox">
+      <input type="checkbox" checked="">
+    </label>
+    <label for="textarea">
+      <textarea name="" id="" cols="30" rows="10">1234</textarea>
+    </label>
+    <label for="select">
+      <select name="" id="" value="2">
+        <option value="1">1</option>
+        <option value="2" selected>2</option>
+      </select>
+    </label>
+  </form>
+</body>
+<noscript></noscript>
+
+</html>
\ No newline at end of file
diff --git a/test/html/invalid-attribute.html b/test/html/invalid-attribute.html
new file mode 100644
index 0000000000..6fa84ad4c0
--- /dev/null
+++ b/test/html/invalid-attribute.html
@@ -0,0 +1,9 @@
+<html foo='bar' ''>
+
+</html>
+
+<!-- TEST_DIVIDER -->
+
+<html foo='bar'>
+
+</html>
\ No newline at end of file
diff --git a/test/html/with-script.html b/test/html/with-script.html
index e3598090ea..3dd8ca93e9 100644
--- a/test/html/with-script.html
+++ b/test/html/with-script.html
@@ -11,8 +11,27 @@
 <body>
   <script src="a.js"></script>
   <script>
-    console.log(1)
+    var a = 1 + 1;
   </script>
 </body>
 
+</html>
+
+<!-- TEST_DIVIDER -->
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>with script</title>
+</head>
+
+<body>
+  <noscript src="a.js"></noscript>
+  <noscript></noscript>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/test/integration.ts b/test/integration.ts
index 00375d0dba..4f9917c87c 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -8,9 +8,19 @@ import { snapshot, rebuild } from '../src';
 
 const htmlFolder = path.join(__dirname, 'html');
 const htmls = fs.readdirSync(htmlFolder).map(filePath => {
+  const raw = fs.readFileSync(path.resolve(htmlFolder, filePath), 'utf-8');
+  if (/<!-- TEST_DIVIDER -->/.test(raw)) {
+    const [src, dest] = raw.split('<!-- TEST_DIVIDER -->');
+    return {
+      filePath,
+      src,
+      dest,
+    };
+  }
   return {
     filePath,
-    content: fs.readFileSync(path.resolve(htmlFolder, filePath), 'utf-8'),
+    src: raw,
+    dest: raw,
   };
 });
 
@@ -18,17 +28,27 @@ describe('integration tests', () => {
   mochaDom({ url: 'http://localhost' });
 
   for (const html of htmls) {
-    it('[html file]:' + html.filePath, () => {
-      const dom = new JSDOM(html.content);
-      const snap = snapshot(dom.window.document);
-      const rebuildDom = rebuild(snap);
-      const htmlStr = dom.window.document.documentElement.outerHTML
-        .replace(/<script>(.|\n)*?<\/script>/g, '<script></script>')
-        .replace(/<script(.*?)>/g, '<noscript$1>')
-        .replace(/<\/script>/g, '</noscript>');
-      expect((rebuildDom as Document).documentElement.outerHTML).to.equal(
-        htmlStr,
-      );
+    it('[html file]: ' + html.filePath, done => {
+      const srcDom = new JSDOM(html.src, { runScripts: 'dangerously' });
+      const destDom = new JSDOM(html.dest);
+      srcDom.window.document.addEventListener('DOMContentLoaded', () => {
+        const snap = snapshot(srcDom.window.document);
+        const rebuildDom = rebuild(snap);
+        const htmlStr = destDom.window.document.documentElement.outerHTML.replace(
+          /\n\n/g,
+          '',
+        );
+        const rebuildStr = (rebuildDom as Document).documentElement.outerHTML.replace(
+          /\n\n/g,
+          '',
+        );
+        try {
+          expect(rebuildStr).to.equal(htmlStr);
+          done();
+        } catch (error) {
+          done(error);
+        }
+      });
     });
   }
 
@@ -65,68 +85,4 @@ describe('integration tests', () => {
       id: 1,
     });
   });
-
-  it('will not throw error with invalid attribute', () => {
-    const raw = `<html foo='bar' ''></html>`;
-    const dom = new JSDOM(raw);
-    expect(() => rebuild(snapshot(dom.window.document))).not.to.throw();
-  });
-
-  it('will inline text input value', () => {
-    const raw = '<input type="text">';
-    const dom = new JSDOM(raw);
-    dom.window.document.querySelector('input').value = '1';
-    const rebuildDom = rebuild(snapshot(dom.window.document));
-    expect((rebuildDom as Document).querySelector('input').outerHTML).to.equal(
-      '<input type="text" value="1">',
-    );
-  });
-
-  it('will inline radio input value', () => {
-    const raw = '<input type="radio">';
-    const dom = new JSDOM(raw);
-    dom.window.document.querySelector('input').checked = true;
-    const rebuildDom = rebuild(snapshot(dom.window.document));
-    expect((rebuildDom as Document).querySelector('input').outerHTML).to.equal(
-      '<input type="radio" checked="">',
-    );
-  });
-
-  it('will inline checkbox input value', () => {
-    const raw = '<input type="checkbox">';
-    const dom = new JSDOM(raw);
-    dom.window.document.querySelector('input').checked = true;
-    const rebuildDom = rebuild(snapshot(dom.window.document));
-    expect((rebuildDom as Document).querySelector('input').outerHTML).to.equal(
-      '<input type="checkbox" checked="">',
-    );
-  });
-
-  it('will inline textarea value into text node', () => {
-    const raw = '<textarea name="" id="" cols="30" rows="10"></textarea>';
-    const dom = new JSDOM(raw);
-    dom.window.document.querySelector('textarea').value = '1234';
-    const rebuildDom = rebuild(snapshot(dom.window.document));
-    expect(
-      (rebuildDom as Document).querySelector('textarea').outerHTML,
-    ).to.equal('<textarea name="" id="" cols="30" rows="10">1234</textarea>');
-  });
-
-  it('will inline options state', () => {
-    const raw = `
-<select name="" id="">
-  <option value="1">1</option>
-  <option value="2">2</option>
-</select>
-    `;
-    const dom = new JSDOM(raw);
-    dom.window.document.querySelector('select').value = '2';
-    const rebuildDom = rebuild(snapshot(dom.window.document));
-    expect((rebuildDom as Document).querySelector('select').outerHTML).to.equal(
-      `<select name="" id="" value="2">
-  <option value="1">1</option>
-  <option value="2" selected="">2</option>
-</select>`,
-    );
-  });
 });

From c24e0c6a2fb64729371f744aefc90db2348a2668 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 5 Oct 2018 22:26:18 +0800
Subject: [PATCH 007/524] refactor the test infra: use puppeteer instead of
 jsdom to get rid of some hack implementations

---
 index.d.ts                      |   6 +-
 package.json                    |  11 ++-
 rollup.config.js                |  10 +++
 test/html/with-script.html      |   4 +-
 test/html/with-style-sheet.html |  16 ++++
 test/integration.ts             | 145 ++++++++++++++++++--------------
 test/js/a.js                    |   1 +
 test/server.ts                  |   0
 tsconfig.json                   |   2 +-
 9 files changed, 124 insertions(+), 71 deletions(-)
 create mode 100644 rollup.config.js
 create mode 100644 test/html/with-style-sheet.html
 create mode 100644 test/js/a.js
 create mode 100644 test/server.ts

diff --git a/index.d.ts b/index.d.ts
index f7f2dbfa0c..cbe3deb631 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,4 +1,4 @@
-declare module 'mocha-jsdom' {
-  function mochaDom(options: any): void;
-  export = mochaDom;
+declare module 'rollup-plugin-typescript' {
+  function typescript(): any;
+  export = typescript;
 }
diff --git a/package.json b/package.json
index 2c62a4c911..5944a8df19 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "main": "index.js",
   "scripts": {
-    "test": "TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts"
+    "test": "TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
+    "compile": "rollup --config"
   },
   "repository": {
     "type": "git",
@@ -23,14 +24,16 @@
   "homepage": "https://github.com/rrweb-io/rrweb-snapshot#readme",
   "devDependencies": {
     "@types/chai": "^4.1.4",
-    "@types/jsdom": "^11.12.0",
     "@types/mocha": "^5.2.5",
     "@types/node": "^10.11.3",
+    "@types/puppeteer": "^1.8.0",
     "chai": "^4.1.2",
-    "jsdom": "^12.1.0",
     "mocha": "^5.2.0",
-    "mocha-jsdom": "^2.0.0",
+    "puppeteer": "^1.9.0",
+    "rollup": "^0.66.4",
+    "rollup-plugin-typescript": "^1.0.0",
     "ts-node": "^7.0.1",
+    "tslib": "^1.9.3",
     "tslint": "^4.5.1",
     "typescript": "^3.0.3"
   }
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 0000000000..d50804666a
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,10 @@
+import typescript from 'rollup-plugin-typescript';
+
+export default {
+  input: './src/index.ts',
+  plugins: [typescript()],
+  output: {
+    name: 'rrweb',
+    format: 'iife',
+  },
+};
diff --git a/test/html/with-script.html b/test/html/with-script.html
index 3dd8ca93e9..5ef140a7ed 100644
--- a/test/html/with-script.html
+++ b/test/html/with-script.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-  <script src="a.js"></script>
+  <script src="http://localhost:3030/js/a.js"></script>
   <script>
     var a = 1 + 1;
   </script>
@@ -30,7 +30,7 @@
 </head>
 
 <body>
-  <noscript src="a.js"></noscript>
+  <noscript src="http://localhost:3030/js/a.js"></noscript>
   <noscript></noscript>
 </body>
 
diff --git a/test/html/with-style-sheet.html b/test/html/with-style-sheet.html
new file mode 100644
index 0000000000..43e0cb01e2
--- /dev/null
+++ b/test/html/with-style-sheet.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>with style sheet</title>
+  <link rel="stylesheet" href="http://localhost:3030/css/style.css">
+</head>
+
+<body>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/test/integration.ts b/test/integration.ts
index 4f9917c87c..cdd4139f1b 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -1,10 +1,12 @@
-import 'mocha';
-import mochaDom = require('mocha-jsdom');
-import { expect } from 'chai';
 import * as fs from 'fs';
 import * as path from 'path';
-import { JSDOM } from 'jsdom';
-import { snapshot, rebuild } from '../src';
+import * as http from 'http';
+import * as url from 'url';
+import 'mocha';
+import * as puppeteer from 'puppeteer';
+import * as rollup from 'rollup';
+import typescript = require('rollup-plugin-typescript');
+import { expect } from 'chai';
 
 const htmlFolder = path.join(__dirname, 'html');
 const htmls = fs.readdirSync(htmlFolder).map(filePath => {
@@ -24,65 +26,86 @@ const htmls = fs.readdirSync(htmlFolder).map(filePath => {
   };
 });
 
-describe('integration tests', () => {
-  mochaDom({ url: 'http://localhost' });
+interface IMimeType {
+  [key: string]: string;
+}
 
-  for (const html of htmls) {
-    it('[html file]: ' + html.filePath, done => {
-      const srcDom = new JSDOM(html.src, { runScripts: 'dangerously' });
-      const destDom = new JSDOM(html.dest);
-      srcDom.window.document.addEventListener('DOMContentLoaded', () => {
-        const snap = snapshot(srcDom.window.document);
-        const rebuildDom = rebuild(snap);
-        const htmlStr = destDom.window.document.documentElement.outerHTML.replace(
-          /\n\n/g,
-          '',
-        );
-        const rebuildStr = (rebuildDom as Document).documentElement.outerHTML.replace(
-          /\n\n/g,
-          '',
-        );
-        try {
-          expect(rebuildStr).to.equal(htmlStr);
-          done();
-        } catch (error) {
-          done(error);
-        }
-      });
+const server = () =>
+  new Promise(resolve => {
+    const mimeType: IMimeType = {
+      '.html': 'text/html',
+      '.js': 'text/javascript',
+      '.css': 'text/css',
+    };
+    const s = http.createServer((req, res) => {
+      const parsedUrl = url.parse(req.url);
+      const sanitizePath = path
+        .normalize(parsedUrl.pathname)
+        .replace(/^(\.\.[\/\\])+/, '');
+      let pathname = path.join(__dirname, sanitizePath);
+      try {
+        const data = fs.readFileSync(pathname);
+        const ext = path.parse(pathname).ext;
+        res.setHeader('Content-type', mimeType[ext] || 'text/plain');
+        res.setHeader('Access-Control-Allow-Origin', '*');
+        res.setHeader('Access-Control-Allow-Methods', 'GET');
+        res.setHeader('Access-Control-Allow-Headers', 'Content-type');
+        res.end(data);
+      } catch (error) {
+        res.end();
+      }
     });
-  }
+    s.listen(3030).on('listening', () => {
+      resolve(s);
+    });
+  });
 
-  it('will snapshot document type', () => {
-    const raw = '<html></html>';
-    const dom = new JSDOM(raw);
-    const snap = snapshot(dom.window.document);
-    expect(snap).to.deep.equal({
-      type: 0,
-      childNodes: [
-        {
-          type: 2,
-          tagName: 'html',
-          attributes: {},
-          childNodes: [
-            {
-              type: 2,
-              tagName: 'head',
-              attributes: {},
-              childNodes: [],
-              id: 3,
-            },
-            {
-              type: 2,
-              tagName: 'body',
-              attributes: {},
-              childNodes: [],
-              id: 4,
-            },
-          ],
-          id: 2,
-        },
-      ],
-      id: 1,
+describe('integration tests', () => {
+  before(async () => {
+    this.server = await server();
+    this.browser = await puppeteer.launch({
+      headless: false,
+      executablePath: '/home/yanzhen/Desktop/chrome-linux/chrome',
+    });
+
+    const bundle = await rollup.rollup({
+      input: path.resolve(__dirname, '../src/index.ts'),
+      plugins: [typescript()],
     });
+    const { code } = await bundle.generate({
+      name: 'rrweb',
+      format: 'iife',
+    });
+    this.code = code;
+  });
+
+  after(() => {
+    this.browser.close();
+    this.server.close();
   });
+
+  for (const html of htmls) {
+    it('[html file]: ' + html.filePath, async () => {
+      const page: puppeteer.Page = await this.browser.newPage();
+      await page.goto(`http://localhost:3030/html/${html.filePath}`);
+      await page.setContent(html.src);
+      page.once('load', async () => {
+        await page.evaluate(() => {
+          const x = new XMLSerializer();
+          return x.serializeToString(document);
+        });
+        const rebuildHtml = (await page.evaluate(`${this.code}
+          const x = new XMLSerializer();
+          const snap = rrweb.snapshot(document);
+          x.serializeToString(rrweb.rebuild(snap));
+        `)).replace(/\n\n/g, '');
+        await page.goto(`data:text/html,${html.dest}`);
+        const destHtml = (await page.evaluate(() => {
+          const x = new XMLSerializer();
+          return x.serializeToString(document);
+        })).replace(/\n\n/g, '');
+        expect(rebuildHtml).to.equal(destHtml);
+      });
+    }).timeout(5000);
+  }
 });
diff --git a/test/js/a.js b/test/js/a.js
new file mode 100644
index 0000000000..7a776f910f
--- /dev/null
+++ b/test/js/a.js
@@ -0,0 +1 @@
+var a = 1 + 1;
diff --git a/test/server.ts b/test/server.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/tsconfig.json b/tsconfig.json
index 06b323aa91..6378ca69d7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,5 +11,5 @@
   },
   "compileOnSave": true,
   "exclude": ["test"],
-  "include": ["index.d.ts"]
+  "include": ["src", "index.d.ts"]
 }

From 8b82981b621d8b11763876e988251d644b1b082a Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 5 Oct 2018 23:06:51 +0800
Subject: [PATCH 008/524] try to inline linked stylesheet when in same origin

---
 src/rebuild.ts                  | 20 +++++++++++---
 src/snapshot.ts                 | 38 ++++++++++++++++++++++-----
 src/types.ts                    |  4 +++
 test/html/cors-style-sheet.html | 16 ++++++++++++
 test/html/with-style-sheet.html | 19 ++++++++++++++
 test/integration.ts             | 46 +++++++++++++++++----------------
 6 files changed, 110 insertions(+), 33 deletions(-)
 create mode 100644 test/html/cors-style-sheet.html

diff --git a/src/rebuild.ts b/src/rebuild.ts
index f6be61ca7e..bcf1f681ba 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -1,4 +1,15 @@
-import { serializedNodeWithId, NodeType } from './types';
+import { serializedNodeWithId, NodeType, tagMap, elementNode } from './types';
+
+const tagMap: tagMap = {
+  script: 'noscript',
+};
+function getTagName(n: elementNode): string {
+  let tagName = tagMap[n.tagName] ? tagMap[n.tagName] : n.tagName;
+  if (tagName === 'link' && n.attributes._cssText) {
+    tagName = 'style';
+  }
+  return tagName;
+}
 
 function buildNode(n: serializedNodeWithId): Node | null {
   switch (n.type) {
@@ -11,14 +22,15 @@ function buildNode(n: serializedNodeWithId): Node | null {
         n.systemId,
       );
     case NodeType.Element:
-      const tagName = n.tagName === 'script' ? 'noscript' : n.tagName;
+      const tagName = getTagName(n);
       const node = document.createElement(tagName);
       for (const name in n.attributes) {
         if (n.attributes.hasOwnProperty(name)) {
           let value = n.attributes[name];
           value = typeof value === 'boolean' ? '' : value;
-          // textarea hack
-          if (n.tagName === 'textarea' && name === 'value') {
+          const isTextarea = tagName === 'textarea' && name === 'value';
+          const isRemoteCss = tagName === 'style' && name === '_cssText';
+          if (isTextarea || isRemoteCss) {
             const child = document.createTextNode(value);
             node.appendChild(child);
             continue;
diff --git a/src/snapshot.ts b/src/snapshot.ts
index c6f4eb6010..c5af9f58b7 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -15,7 +15,18 @@ function resetId() {
   _id = 1;
 }
 
-function serializeNode(n: Node): serializedNode | false {
+function getCssRulesString(s: CSSStyleSheet): string | null {
+  try {
+    const rules = s.rules || s.cssRules;
+    return rules
+      ? Array.from(rules).reduce((prev, cur) => (prev += cur.cssText), '')
+      : null;
+  } catch (error) {
+    return null;
+  }
+}
+
+function serializeNode(n: Node, doc: Document): serializedNode | false {
   switch (n.nodeType) {
     case n.DOCUMENT_NODE:
       return {
@@ -31,10 +42,23 @@ function serializeNode(n: Node): serializedNode | false {
       };
     case n.ELEMENT_NODE:
       const tagName = (n as HTMLElement).tagName.toLowerCase();
-      const attributes: attributes = {};
+      let attributes: attributes = {};
       for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
         attributes[name] = value;
       }
+      // remote css
+      if (tagName === 'link' && attributes.hasOwnProperty('href')) {
+        const stylesheet = Array.from(doc.styleSheets).find(
+          s => s.href === attributes.href,
+        );
+        const cssText = getCssRulesString(stylesheet as CSSStyleSheet);
+        if (cssText) {
+          attributes = {
+            _cssText: cssText,
+          };
+        }
+      }
+      // form fields
       if (
         tagName === 'input' ||
         tagName === 'textarea' ||
@@ -91,8 +115,8 @@ function serializeNode(n: Node): serializedNode | false {
   }
 }
 
-function _snapshot(n: Node): serializedNodeWithId | null {
-  const _serializedNode = serializeNode(n);
+function _snapshot(n: Node, doc: Document): serializedNodeWithId | null {
+  const _serializedNode = serializeNode(n, doc);
   if (!_serializedNode) {
     // TODO: dev only
     console.warn(n, 'not serialized');
@@ -106,15 +130,15 @@ function _snapshot(n: Node): serializedNodeWithId | null {
     serializedNode.type === NodeType.Element
   ) {
     for (const childN of Array.from(n.childNodes)) {
-      serializedNode.childNodes.push(_snapshot(childN));
+      serializedNode.childNodes.push(_snapshot(childN, doc));
     }
   }
   return serializedNode;
 }
 
-function snapshot(n: Node): serializedNodeWithId | null {
+function snapshot(n: Document): serializedNodeWithId | null {
   resetId();
-  return _snapshot(n);
+  return _snapshot(n, n);
 }
 
 export default snapshot;
diff --git a/src/types.ts b/src/types.ts
index 17fc0e42c0..ea19a1989f 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -53,3 +53,7 @@ export type serializedNode =
   | commentNode;
 
 export type serializedNodeWithId = serializedNode & { id: number };
+
+export type tagMap = {
+  [key: string]: string;
+};
diff --git a/test/html/cors-style-sheet.html b/test/html/cors-style-sheet.html
new file mode 100644
index 0000000000..06dddaa262
--- /dev/null
+++ b/test/html/cors-style-sheet.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>with style sheet</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pure@2.85.0/index.css">
+</head>
+
+<body>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/test/html/with-style-sheet.html b/test/html/with-style-sheet.html
index 43e0cb01e2..14f09d38f9 100644
--- a/test/html/with-style-sheet.html
+++ b/test/html/with-style-sheet.html
@@ -13,4 +13,23 @@
 
 </body>
 
+</html>
+
+<!-- TEST_DIVIDER -->
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>with style sheet</title>
+  <style>body { margin: 0px; }p { color: red; }</style>
+</head>
+
+<body>
+
+</body>
+
 </html>
\ No newline at end of file
diff --git a/test/integration.ts b/test/integration.ts
index cdd4139f1b..40f9cc035f 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -64,7 +64,7 @@ describe('integration tests', () => {
   before(async () => {
     this.server = await server();
     this.browser = await puppeteer.launch({
-      headless: false,
+      // headless: false,
       executablePath: '/home/yanzhen/Desktop/chrome-linux/chrome',
     });
 
@@ -79,33 +79,35 @@ describe('integration tests', () => {
     this.code = code;
   });
 
-  after(() => {
-    this.browser.close();
-    this.server.close();
+  after(async () => {
+    await this.browser.close();
+    await this.server.close();
   });
 
-  for (const html of htmls) {
+  for (const html of htmls.slice(0, 10)) {
     it('[html file]: ' + html.filePath, async () => {
       const page: puppeteer.Page = await this.browser.newPage();
-      await page.goto(`http://localhost:3030/html/${html.filePath}`);
+      // console for debug
+      // tslint:disable-next-line: no-console
+      page.on('console', msg => console.log(msg.text()));
+      await page.goto(`http://localhost:3030/html`);
       await page.setContent(html.src);
-      page.once('load', async () => {
-        await page.evaluate(() => {
-          const x = new XMLSerializer();
-          return x.serializeToString(document);
-        });
-        const rebuildHtml = (await page.evaluate(`${this.code}
-          const x = new XMLSerializer();
-          const snap = rrweb.snapshot(document);
-          x.serializeToString(rrweb.rebuild(snap));
-        `)).replace(/\n\n/g, '');
-        await page.goto(`data:text/html,${html.dest}`);
-        const destHtml = (await page.evaluate(() => {
-          const x = new XMLSerializer();
-          return x.serializeToString(document);
-        })).replace(/\n\n/g, '');
-        expect(rebuildHtml).to.equal(destHtml);
+      await page.evaluate(() => {
+        const x = new XMLSerializer();
+        return x.serializeToString(document);
       });
+      const rebuildHtml = (await page.evaluate(`${this.code}
+        const x = new XMLSerializer();
+        const snap = rrweb.snapshot(document);
+        x.serializeToString(rrweb.rebuild(snap));
+      `)).replace(/\n\n/g, '');
+      await page.goto(`http://localhost:3030/html`);
+      await page.setContent(html.dest);
+      const destHtml = (await page.evaluate(() => {
+        const x = new XMLSerializer();
+        return x.serializeToString(document);
+      })).replace(/\n\n/g, '');
+      expect(rebuildHtml).to.equal(destHtml);
     }).timeout(5000);
   }
 });

From bfe431e99ab87cfe58050cacec0f804abd5a8cb9 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 6 Oct 2018 10:13:33 +0800
Subject: [PATCH 009/524] add iframe tests and update urls in test file

---
 src/snapshot.ts                 |  8 ++++----
 test/html/iframe-inner.html     |  1 +
 test/html/iframe.html           | 12 ++++++++++++
 test/html/with-script.html      |  4 ++--
 test/html/with-style-sheet.html |  2 +-
 5 files changed, 20 insertions(+), 7 deletions(-)
 create mode 100644 test/html/iframe-inner.html
 create mode 100644 test/html/iframe.html

diff --git a/src/snapshot.ts b/src/snapshot.ts
index c5af9f58b7..0501f499eb 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -47,10 +47,10 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
         attributes[name] = value;
       }
       // remote css
-      if (tagName === 'link' && attributes.hasOwnProperty('href')) {
-        const stylesheet = Array.from(doc.styleSheets).find(
-          s => s.href === attributes.href,
-        );
+      if (tagName === 'link') {
+        const stylesheet = Array.from(doc.styleSheets).find(s => {
+          return s.href === (n as HTMLLinkElement).href;
+        });
         const cssText = getCssRulesString(stylesheet as CSSStyleSheet);
         if (cssText) {
           attributes = {
diff --git a/test/html/iframe-inner.html b/test/html/iframe-inner.html
new file mode 100644
index 0000000000..2ef778d9d8
--- /dev/null
+++ b/test/html/iframe-inner.html
@@ -0,0 +1 @@
+<button>inner iframe button</button>
diff --git a/test/html/iframe.html b/test/html/iframe.html
new file mode 100644
index 0000000000..8b45139ed4
--- /dev/null
+++ b/test/html/iframe.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>iframe</title>
+</head>
+<body>
+  <iframe src="/html/iframe-inner.html" width="100" height="50"></iframe>
+</body>
+</html>
diff --git a/test/html/with-script.html b/test/html/with-script.html
index 5ef140a7ed..d727133827 100644
--- a/test/html/with-script.html
+++ b/test/html/with-script.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-  <script src="http://localhost:3030/js/a.js"></script>
+  <script src="/js/a.js"></script>
   <script>
     var a = 1 + 1;
   </script>
@@ -30,7 +30,7 @@
 </head>
 
 <body>
-  <noscript src="http://localhost:3030/js/a.js"></noscript>
+  <noscript src="/js/a.js"></noscript>
   <noscript></noscript>
 </body>
 
diff --git a/test/html/with-style-sheet.html b/test/html/with-style-sheet.html
index 14f09d38f9..9fc5bdad20 100644
--- a/test/html/with-style-sheet.html
+++ b/test/html/with-style-sheet.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>with style sheet</title>
-  <link rel="stylesheet" href="http://localhost:3030/css/style.css">
+  <link rel="stylesheet" href="/css/style.css">
 </head>
 
 <body>

From b536f1206470403d571d9ba530b6ed6f82590d48 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 6 Oct 2018 22:27:49 +0800
Subject: [PATCH 010/524] update declaration file

---
 index.d.ts     | 8 ++++----
 package.json   | 2 +-
 test.d.ts      | 4 ++++
 test/server.ts | 0
 tsconfig.json  | 2 +-
 5 files changed, 10 insertions(+), 6 deletions(-)
 create mode 100644 test.d.ts
 delete mode 100644 test/server.ts

diff --git a/index.d.ts b/index.d.ts
index cbe3deb631..e1d96cb4b1 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,4 +1,4 @@
-declare module 'rollup-plugin-typescript' {
-  function typescript(): any;
-  export = typescript;
-}
+import { serializedNodeWithId } from './src/types';
+
+export function snapshot(n: Document): serializedNodeWithId | null;
+export function rebuild(n: serializedNodeWithId): Node | null;
diff --git a/package.json b/package.json
index 5944a8df19..a4d87dcf36 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "main": "index.js",
   "scripts": {
-    "test": "TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
+    "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
     "compile": "rollup --config"
   },
   "repository": {
diff --git a/test.d.ts b/test.d.ts
new file mode 100644
index 0000000000..cbe3deb631
--- /dev/null
+++ b/test.d.ts
@@ -0,0 +1,4 @@
+declare module 'rollup-plugin-typescript' {
+  function typescript(): any;
+  export = typescript;
+}
diff --git a/test/server.ts b/test/server.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/tsconfig.json b/tsconfig.json
index 6378ca69d7..f82e02cd85 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,5 +11,5 @@
   },
   "compileOnSave": true,
   "exclude": ["test"],
-  "include": ["src", "index.d.ts"]
+  "include": ["src", "test.d.ts"]
 }

From 4a1137748c6d9508896fe84f252e64400ba38b54 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 8 Oct 2018 10:28:34 +0800
Subject: [PATCH 011/524] bump 0.2.0

---
 README.md    | 8 +++++++-
 package.json | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 98c66522e2..d61b9f71d6 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,9 @@
 # rrweb-snapshot
 
-Not ready yet
+Snapshot the DOM into a stateful and serializable data structure.
+Also provide the ability to rebuild the DOM via snapshot.
+
+## TODO
+
+- [ ] Replace any url in css rules into absolute path.
+- [ ] Select a suitable build strategy.
diff --git a/package.json b/package.json
index a4d87dcf36..73c0b112e9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "main": "index.js",
   "scripts": {

From 978e12b089683c3454433898d5cbcebd0bf8b458 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 8 Oct 2018 11:20:48 +0800
Subject: [PATCH 012/524] add strict null check and fix codes

---
 index.d.ts      | 1 +
 src/index.ts    | 1 +
 src/rebuild.ts  | 6 +++++-
 src/snapshot.ts | 9 ++++++---
 tsconfig.json   | 1 +
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index e1d96cb4b1..bb15b0beaf 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,4 +1,5 @@
 import { serializedNodeWithId } from './src/types';
+export * from './src/types';
 
 export function snapshot(n: Document): serializedNodeWithId | null;
 export function rebuild(n: serializedNodeWithId): Node | null;
diff --git a/src/index.ts b/src/index.ts
index 758f2df991..6b8e1450e4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
 import snapshot from './snapshot';
 import rebuild from './rebuild';
+export * from './types';
 
 export { snapshot, rebuild };
diff --git a/src/rebuild.ts b/src/rebuild.ts
index bcf1f681ba..fce1fb36b5 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -62,7 +62,11 @@ function rebuild(n: serializedNodeWithId): Node | null {
   if (n.type === NodeType.Document || n.type === NodeType.Element) {
     for (const childN of n.childNodes) {
       const childNode = rebuild(childN);
-      root.appendChild(childNode);
+      if (!childNode) {
+        console.warn('Failed to rebuild', childN);
+      } else {
+        root.appendChild(childNode);
+      }
     }
   }
   return root;
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 0501f499eb..913210a49c 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -98,7 +98,7 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
       }
       return {
         type: NodeType.Text,
-        textContent,
+        textContent: textContent || '',
       };
     case n.CDATA_SECTION_NODE:
       return {
@@ -108,7 +108,7 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
     case n.COMMENT_NODE:
       return {
         type: NodeType.Comment,
-        textContent: (n as Comment).textContent,
+        textContent: (n as Comment).textContent || '',
       };
     default:
       return false;
@@ -130,7 +130,10 @@ function _snapshot(n: Node, doc: Document): serializedNodeWithId | null {
     serializedNode.type === NodeType.Element
   ) {
     for (const childN of Array.from(n.childNodes)) {
-      serializedNode.childNodes.push(_snapshot(childN, doc));
+      const serializedChildNode = _snapshot(childN, doc);
+      if (serializedChildNode) {
+        serializedNode.childNodes.push(serializedChildNode);
+      }
     }
   }
   return serializedNode;
diff --git a/tsconfig.json b/tsconfig.json
index f82e02cd85..d58ee54673 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,7 @@
   "compilerOptions": {
     "module": "commonjs",
     "noImplicitAny": true,
+    "strictNullChecks": true,
     "removeComments": true,
     "preserveConstEnums": true,
     "sourceMap": true,

From f143eee54a70a441685051a666f9e5d23c0c2534 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 8 Oct 2018 15:35:03 +0800
Subject: [PATCH 013/524] return id node map when snapshot

---
 index.d.ts          |  4 ++--
 src/snapshot.ts     | 29 ++++++++++++++++++++++++-----
 src/types.ts        |  8 ++++++++
 test/integration.ts |  6 +++---
 4 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index bb15b0beaf..fa9eae71ae 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,5 +1,5 @@
-import { serializedNodeWithId } from './src/types';
+import { serializedNodeWithId, idNodeMap } from './src/types';
 export * from './src/types';
 
-export function snapshot(n: Document): serializedNodeWithId | null;
+export function snapshot(n: Document): [serializedNodeWithId | null, idNodeMap];
 export function rebuild(n: serializedNodeWithId): Node | null;
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 913210a49c..15642b7fa8 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -3,6 +3,8 @@ import {
   serializedNodeWithId,
   NodeType,
   attributes,
+  INode,
+  idNodeMap,
 } from './types';
 
 let _id = 1;
@@ -115,22 +117,38 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
   }
 }
 
-function _snapshot(n: Node, doc: Document): serializedNodeWithId | null {
+function serializeNodeWithId(
+  n: Node,
+  doc: Document,
+): serializedNodeWithId | null {
   const _serializedNode = serializeNode(n, doc);
   if (!_serializedNode) {
     // TODO: dev only
     console.warn(n, 'not serialized');
     return null;
   }
-  const serializedNode: serializedNodeWithId = Object.assign(_serializedNode, {
+  return Object.assign(_serializedNode, {
     id: genId(),
   });
+}
+
+function _snapshot(
+  n: Node,
+  doc: Document,
+  map: idNodeMap,
+): serializedNodeWithId | null {
+  const serializedNode = serializeNodeWithId(n, doc);
+  if (!serializedNode) {
+    return null;
+  }
+  (n as INode).__sn = serializedNode;
+  map[serializedNode.id] = n as INode;
   if (
     serializedNode.type === NodeType.Document ||
     serializedNode.type === NodeType.Element
   ) {
     for (const childN of Array.from(n.childNodes)) {
-      const serializedChildNode = _snapshot(childN, doc);
+      const serializedChildNode = _snapshot(childN, doc, map);
       if (serializedChildNode) {
         serializedNode.childNodes.push(serializedChildNode);
       }
@@ -139,9 +157,10 @@ function _snapshot(n: Node, doc: Document): serializedNodeWithId | null {
   return serializedNode;
 }
 
-function snapshot(n: Document): serializedNodeWithId | null {
+function snapshot(n: Document): [serializedNodeWithId | null, idNodeMap] {
   resetId();
-  return _snapshot(n, n);
+  const idNodeMap: idNodeMap = {};
+  return [_snapshot(n, n, idNodeMap), idNodeMap];
 }
 
 export default snapshot;
diff --git a/src/types.ts b/src/types.ts
index ea19a1989f..6fbe58e286 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -57,3 +57,11 @@ export type serializedNodeWithId = serializedNode & { id: number };
 export type tagMap = {
   [key: string]: string;
 };
+
+export interface INode extends Node {
+  __sn: serializedNodeWithId;
+}
+
+export type idNodeMap = {
+  [key: number]: INode;
+};
diff --git a/test/integration.ts b/test/integration.ts
index 40f9cc035f..a6ed7da5f1 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -38,9 +38,9 @@ const server = () =>
       '.css': 'text/css',
     };
     const s = http.createServer((req, res) => {
-      const parsedUrl = url.parse(req.url);
+      const parsedUrl = url.parse(req.url!);
       const sanitizePath = path
-        .normalize(parsedUrl.pathname)
+        .normalize(parsedUrl.pathname!)
         .replace(/^(\.\.[\/\\])+/, '');
       let pathname = path.join(__dirname, sanitizePath);
       try {
@@ -98,7 +98,7 @@ describe('integration tests', () => {
       });
       const rebuildHtml = (await page.evaluate(`${this.code}
         const x = new XMLSerializer();
-        const snap = rrweb.snapshot(document);
+        const [snap] = rrweb.snapshot(document);
         x.serializeToString(rrweb.rebuild(snap));
       `)).replace(/\n\n/g, '');
       await page.goto(`http://localhost:3030/html`);

From d59ba817cb2f30d0d05a780d384262acb93286bc Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 9 Oct 2018 10:51:30 +0800
Subject: [PATCH 014/524] export serializeNodeWithId so rrweb could serialize
 newly added nodes

---
 index.d.ts      |  5 +++++
 src/index.ts    |  4 ++--
 src/snapshot.ts | 12 +++++++-----
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index fa9eae71ae..85dc9653bf 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -3,3 +3,8 @@ export * from './src/types';
 
 export function snapshot(n: Document): [serializedNodeWithId | null, idNodeMap];
 export function rebuild(n: serializedNodeWithId): Node | null;
+export function serializeNodeWithId(
+  n: Node,
+  doc: Document,
+  map: idNodeMap,
+): serializedNodeWithId | null;
diff --git a/src/index.ts b/src/index.ts
index 6b8e1450e4..fd9694655a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
-import snapshot from './snapshot';
+import snapshot, { serializeNodeWithId } from './snapshot';
 import rebuild from './rebuild';
 export * from './types';
 
-export { snapshot, rebuild };
+export { snapshot, serializeNodeWithId, rebuild };
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 15642b7fa8..04eddcf3a3 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -117,9 +117,10 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
   }
 }
 
-function serializeNodeWithId(
+export function serializeNodeWithId(
   n: Node,
   doc: Document,
+  map: idNodeMap,
 ): serializedNodeWithId | null {
   const _serializedNode = serializeNode(n, doc);
   if (!_serializedNode) {
@@ -127,9 +128,12 @@ function serializeNodeWithId(
     console.warn(n, 'not serialized');
     return null;
   }
-  return Object.assign(_serializedNode, {
+  const serializedNode = Object.assign(_serializedNode, {
     id: genId(),
   });
+  (n as INode).__sn = serializedNode;
+  map[serializedNode.id] = n as INode;
+  return serializedNode;
 }
 
 function _snapshot(
@@ -137,12 +141,10 @@ function _snapshot(
   doc: Document,
   map: idNodeMap,
 ): serializedNodeWithId | null {
-  const serializedNode = serializeNodeWithId(n, doc);
+  const serializedNode = serializeNodeWithId(n, doc, map);
   if (!serializedNode) {
     return null;
   }
-  (n as INode).__sn = serializedNode;
-  map[serializedNode.id] = n as INode;
   if (
     serializedNode.type === NodeType.Document ||
     serializedNode.type === NodeType.Element

From b3fdc44fc757f08bf4d5e77b08f452cd9ac45c3c Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 11 Oct 2018 16:44:38 +0800
Subject: [PATCH 015/524] update the bundle config

---
 .gitignore       |  1 +
 package.json     | 10 +++++++---
 rollup.config.js | 19 +++++++++++++++----
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/.gitignore b/.gitignore
index 6ccc9d846d..f35f48b860 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 node_modules
 package-lock.json
 build
+dist
diff --git a/package.json b/package.json
index 73c0b112e9..0c399ca927 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,12 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "module": "dist/module.js",
   "scripts": {
     "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
-    "compile": "rollup --config"
+    "bundle": "rollup --config"
   },
   "repository": {
     "type": "git",
@@ -16,6 +17,9 @@
     "snapshot",
     "DOM"
   ],
+  "files": [
+    "dist"
+  ],
   "author": "yanzhen@smartx.com",
   "license": "MIT",
   "bugs": {
diff --git a/rollup.config.js b/rollup.config.js
index d50804666a..dc2cd261f5 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -3,8 +3,19 @@ import typescript from 'rollup-plugin-typescript';
 export default {
   input: './src/index.ts',
   plugins: [typescript()],
-  output: {
-    name: 'rrweb',
-    format: 'iife',
-  },
+  output: [
+    {
+      format: 'cjs',
+      file: './dist/index.js',
+    },
+    {
+      format: 'esm',
+      file: './dist/module.js',
+    },
+    {
+      name: 'rrwebSnapshot',
+      format: 'iife',
+      file: './dist/browser.js',
+    },
+  ],
 };

From 1ddb0a334336e8337930a181f7e6c6916a2948b1 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 12 Oct 2018 12:43:16 +0800
Subject: [PATCH 016/524] return id node map when rebuild

---
 index.d.ts                      |  2 +-
 src/rebuild.ts                  | 20 +++++++++++++++++---
 test/css/style.css              |  3 +++
 test/html/with-style-sheet.html |  2 +-
 test/integration.ts             |  2 +-
 5 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 85dc9653bf..0bc43523fd 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -2,7 +2,7 @@ import { serializedNodeWithId, idNodeMap } from './src/types';
 export * from './src/types';
 
 export function snapshot(n: Document): [serializedNodeWithId | null, idNodeMap];
-export function rebuild(n: serializedNodeWithId): Node | null;
+export function rebuild(n: serializedNodeWithId): [Node | null, idNodeMap];
 export function serializeNodeWithId(
   n: Node,
   doc: Document,
diff --git a/src/rebuild.ts b/src/rebuild.ts
index fce1fb36b5..1302926284 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -1,4 +1,11 @@
-import { serializedNodeWithId, NodeType, tagMap, elementNode } from './types';
+import {
+  serializedNodeWithId,
+  NodeType,
+  tagMap,
+  elementNode,
+  idNodeMap,
+  INode,
+} from './types';
 
 const tagMap: tagMap = {
   script: 'noscript',
@@ -54,14 +61,16 @@ function buildNode(n: serializedNodeWithId): Node | null {
   }
 }
 
-function rebuild(n: serializedNodeWithId): Node | null {
+function _rebuild(n: serializedNodeWithId, map: idNodeMap): Node | null {
   const root = buildNode(n);
   if (!root) {
     return null;
   }
+  (root as INode).__sn = n;
+  map[n.id] = root as INode;
   if (n.type === NodeType.Document || n.type === NodeType.Element) {
     for (const childN of n.childNodes) {
-      const childNode = rebuild(childN);
+      const childNode = _rebuild(childN, map);
       if (!childNode) {
         console.warn('Failed to rebuild', childN);
       } else {
@@ -72,4 +81,9 @@ function rebuild(n: serializedNodeWithId): Node | null {
   return root;
 }
 
+function rebuild(n: serializedNodeWithId): [Node | null, idNodeMap] {
+  const idNodeMap: idNodeMap = {};
+  return [_rebuild(n, idNodeMap), idNodeMap];
+}
+
 export default rebuild;
diff --git a/test/css/style.css b/test/css/style.css
index 70b063e64a..f1be9954d9 100644
--- a/test/css/style.css
+++ b/test/css/style.css
@@ -4,3 +4,6 @@ body {
 p {
   color: red;
 }
+body > p {
+  color: yellow;
+}
diff --git a/test/html/with-style-sheet.html b/test/html/with-style-sheet.html
index 9fc5bdad20..9ba3c5e4d2 100644
--- a/test/html/with-style-sheet.html
+++ b/test/html/with-style-sheet.html
@@ -25,7 +25,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>with style sheet</title>
-  <style>body { margin: 0px; }p { color: red; }</style>
+  <style>body { margin: 0px; }p { color: red; }body > p { color: yellow; }</style>
 </head>
 
 <body>
diff --git a/test/integration.ts b/test/integration.ts
index a6ed7da5f1..13647cc8ad 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -99,7 +99,7 @@ describe('integration tests', () => {
       const rebuildHtml = (await page.evaluate(`${this.code}
         const x = new XMLSerializer();
         const [snap] = rrweb.snapshot(document);
-        x.serializeToString(rrweb.rebuild(snap));
+        x.serializeToString(rrweb.rebuild(snap)[0]);
       `)).replace(/\n\n/g, '');
       await page.goto(`http://localhost:3030/html`);
       await page.setContent(html.dest);

From ffc2b01796c2c54c72d6ffad27bd0d1153bcc821 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 12 Oct 2018 15:56:02 +0800
Subject: [PATCH 017/524] add data attribute to element when rebuild

---
 index.d.ts     |  2 +-
 src/rebuild.ts | 23 ++++++-----------------
 2 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 0bc43523fd..85dc9653bf 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -2,7 +2,7 @@ import { serializedNodeWithId, idNodeMap } from './src/types';
 export * from './src/types';
 
 export function snapshot(n: Document): [serializedNodeWithId | null, idNodeMap];
-export function rebuild(n: serializedNodeWithId): [Node | null, idNodeMap];
+export function rebuild(n: serializedNodeWithId): Node | null;
 export function serializeNodeWithId(
   n: Node,
   doc: Document,
diff --git a/src/rebuild.ts b/src/rebuild.ts
index 1302926284..223e3be894 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -1,11 +1,4 @@
-import {
-  serializedNodeWithId,
-  NodeType,
-  tagMap,
-  elementNode,
-  idNodeMap,
-  INode,
-} from './types';
+import { serializedNodeWithId, NodeType, tagMap, elementNode } from './types';
 
 const tagMap: tagMap = {
   script: 'noscript',
@@ -61,16 +54,17 @@ function buildNode(n: serializedNodeWithId): Node | null {
   }
 }
 
-function _rebuild(n: serializedNodeWithId, map: idNodeMap): Node | null {
+function rebuild(n: serializedNodeWithId): Node | null {
   const root = buildNode(n);
   if (!root) {
     return null;
   }
-  (root as INode).__sn = n;
-  map[n.id] = root as INode;
+  if (n.type === NodeType.Element) {
+    (root as HTMLElement).setAttribute('data-rrid', String(n.id));
+  }
   if (n.type === NodeType.Document || n.type === NodeType.Element) {
     for (const childN of n.childNodes) {
-      const childNode = _rebuild(childN, map);
+      const childNode = rebuild(childN);
       if (!childNode) {
         console.warn('Failed to rebuild', childN);
       } else {
@@ -81,9 +75,4 @@ function _rebuild(n: serializedNodeWithId, map: idNodeMap): Node | null {
   return root;
 }
 
-function rebuild(n: serializedNodeWithId): [Node | null, idNodeMap] {
-  const idNodeMap: idNodeMap = {};
-  return [_rebuild(n, idNodeMap), idNodeMap];
-}
-
 export default rebuild;

From 3e5c0adcdc3d5e2bc6f0656410ca0c0c9ee13f77 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 12 Oct 2018 16:28:06 +0800
Subject: [PATCH 018/524] use jest-snapshot to apply the snapshot testing

---
 package.json                           |   1 +
 test.d.ts                              |  17 ++++
 test/__snapshots__/integration.ts.snap | 133 +++++++++++++++++++++++++
 test/html/form-fields.html             |  38 -------
 test/html/invalid-attribute.html       |   6 --
 test/html/with-script.html             |  19 ----
 test/html/with-style-sheet.html        |  19 ----
 test/integration.ts                    |  44 ++++----
 8 files changed, 172 insertions(+), 105 deletions(-)
 create mode 100644 test/__snapshots__/integration.ts.snap

diff --git a/package.json b/package.json
index 0c399ca927..119a44c056 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "@types/node": "^10.11.3",
     "@types/puppeteer": "^1.8.0",
     "chai": "^4.1.2",
+    "jest-snapshot": "^23.6.0",
     "mocha": "^5.2.0",
     "puppeteer": "^1.9.0",
     "rollup": "^0.66.4",
diff --git a/test.d.ts b/test.d.ts
index cbe3deb631..a3b614eedb 100644
--- a/test.d.ts
+++ b/test.d.ts
@@ -2,3 +2,20 @@ declare module 'rollup-plugin-typescript' {
   function typescript(): any;
   export = typescript;
 }
+
+declare module 'jest-snapshot' {
+  export class SnapshotState {
+    constructor(testFile: string, options: any);
+
+    save(): any;
+  }
+  type matchResult = {
+    pass: boolean;
+    report(): string;
+  };
+  export function toMatchSnapshot(
+    received: any,
+    propertyMatchers?: any,
+    testName?: string,
+  ): matchResult;
+}
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
new file mode 100644
index 0000000000..6aba1b5e53
--- /dev/null
+++ b/test/__snapshots__/integration.ts.snap
@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[html file]: about-mozilla.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
+  <title data-rrid=\\"6\\">The Book of Mozilla, 11:9</title>
+  <style type=\\"text/css\\" data-rrid=\\"9\\">
+    html {
+      background: maroon;
+      color: white;
+      font-style: italic;
+    }    #moztext {
+      margin-top: 15%;
+      font-size: 1.1em;
+      font-family: serif;
+      text-align: center;
+      line-height: 1.5;
+    }    #from {
+      font-size: 1.95em;
+      font-family: serif;
+      text-align: right;
+    }    em {
+      font-size: 1.3em;
+      line-height: 0;
+    }    a {
+      text-decoration: none;
+      color: white;
+    }
+  </style>
+</head><body data-rrid=\\"13\\">  <p id=\\"moztext\\" data-rrid=\\"15\\">
+    Mammon slept. And the <em data-rrid=\\"17\\">beast reborn</em> spread over the earth and its numbers
+    grew legion. And they proclaimed the times and <em data-rrid=\\"20\\">sacrificed</em> crops unto the
+    fire, with the <em data-rrid=\\"23\\">cunning of foxes</em>. And they built a new world in their own
+    image as promised by the <em data-rrid=\\"26\\"><a href=\\"http://www.mozilla.org/about/mozilla-manifesto.html\\" data-rrid=\\"27\\">
+        sacred words</a></em>, and <em data-rrid=\\"30\\"><a href=\\"http://wiki.mozilla.org/About:mozilla\\" data-rrid=\\"31\\">spoke
+      </a></em> of the beast with their children. Mammon awoke, and lo! it was
+    <em data-rrid=\\"34\\">naught</em> but a follower.
+  </p>  <p id=\\"from\\" data-rrid=\\"38\\">
+    from <strong data-rrid=\\"40\\">The Book of Mozilla,</strong> 11:9<br data-rrid=\\"43\\" /><small data-rrid=\\"44\\">(10th Edition)</small>
+  </p></body></html>"
+`;
+
+exports[`[html file]: basic.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
+  <meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
+  <title data-rrid=\\"12\\">Document</title>
+</head><body data-rrid=\\"16\\"></body></html>"
+`;
+
+exports[`[html file]: cors-style-sheet.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
+  <meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
+  <title data-rrid=\\"12\\">with style sheet</title>
+  <link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/pure@2.85.0/index.css\\" data-rrid=\\"15\\" />
+</head><body data-rrid=\\"18\\"></body></html>"
+`;
+
+exports[`[html file]: form-fields.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
+  <meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
+  <title data-rrid=\\"12\\">form fields</title>
+</head><body data-rrid=\\"16\\">
+  <form data-rrid=\\"18\\">
+    <label for=\\"text\\" data-rrid=\\"20\\">
+      <input type=\\"text\\" value=\\"1\\" data-rrid=\\"22\\" />
+    </label>
+    <label for=\\"radio\\" data-rrid=\\"25\\">
+      <input type=\\"radio\\" checked=\\"\\" data-rrid=\\"27\\" />
+    </label>
+    <label for=\\"checkbox\\" data-rrid=\\"30\\">
+      <input type=\\"checkbox\\" checked=\\"\\" data-rrid=\\"32\\" />
+    </label>
+    <label for=\\"textarea\\" data-rrid=\\"35\\">
+      <textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\" data-rrid=\\"37\\">1234</textarea>
+    </label>
+    <label for=\\"select\\" data-rrid=\\"40\\">
+      <select name=\\"\\" id=\\"\\" value=\\"2\\" data-rrid=\\"42\\">
+        <option value=\\"1\\" data-rrid=\\"44\\">1</option>
+        <option value=\\"2\\" selected=\\"\\" data-rrid=\\"47\\">2</option>
+      </select>
+    </label>
+  </form><noscript data-rrid=\\"53\\"></noscript>
+</body></html>"
+`;
+
+exports[`[html file]: iframe.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
+  <meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
+  <title data-rrid=\\"12\\">iframe</title>
+</head>
+<body data-rrid=\\"16\\">
+  <iframe src=\\"/html/iframe-inner.html\\" width=\\"100\\" height=\\"50\\" data-rrid=\\"18\\"></iframe>
+</body></html>"
+`;
+
+exports[`[html file]: iframe-inner.html 1`] = `
+"<html xmlns=\\"http://www.w3.org/1999/xhtml\\" data-rrid=\\"2\\"><head data-rrid=\\"3\\"></head><body data-rrid=\\"4\\"><button data-rrid=\\"5\\">inner iframe button</button>
+</body></html>"
+`;
+
+exports[`[html file]: invalid-attribute.html 1`] = `
+"<html xmlns=\\"http://www.w3.org/1999/xhtml\\" foo=\\"bar\\" data-rrid=\\"2\\"><head data-rrid=\\"3\\"></head><body data-rrid=\\"4\\">
+</body></html>"
+`;
+
+exports[`[html file]: with-script.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
+  <meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
+  <title data-rrid=\\"12\\">with script</title>
+</head><body data-rrid=\\"16\\">
+  <noscript src=\\"/js/a.js\\" data-rrid=\\"18\\"></noscript>
+  <noscript data-rrid=\\"20\\"></noscript></body></html>"
+`;
+
+exports[`[html file]: with-style-sheet.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
+  <meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
+  <title data-rrid=\\"12\\">with style sheet</title>
+  <style data-rrid=\\"15\\">body { margin: 0px; }p { color: red; }body &gt; p { color: yellow; }</style>
+</head><body data-rrid=\\"18\\">
+</body></html>"
+`;
diff --git a/test/html/form-fields.html b/test/html/form-fields.html
index 6eef35449e..50778d603b 100644
--- a/test/html/form-fields.html
+++ b/test/html/form-fields.html
@@ -39,41 +39,3 @@
 </script>
 
 </html>
-
-<!-- TEST_DIVIDER -->
-
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>form fields</title>
-</head>
-
-<body>
-  <form>
-    <label for="text">
-      <input type="text" value="1">
-    </label>
-    <label for="radio">
-      <input type="radio" checked="">
-    </label>
-    <label for="checkbox">
-      <input type="checkbox" checked="">
-    </label>
-    <label for="textarea">
-      <textarea name="" id="" cols="30" rows="10">1234</textarea>
-    </label>
-    <label for="select">
-      <select name="" id="" value="2">
-        <option value="1">1</option>
-        <option value="2" selected>2</option>
-      </select>
-    </label>
-  </form>
-</body>
-<noscript></noscript>
-
-</html>
\ No newline at end of file
diff --git a/test/html/invalid-attribute.html b/test/html/invalid-attribute.html
index 6fa84ad4c0..e2428e2888 100644
--- a/test/html/invalid-attribute.html
+++ b/test/html/invalid-attribute.html
@@ -1,9 +1,3 @@
 <html foo='bar' ''>
 
 </html>
-
-<!-- TEST_DIVIDER -->
-
-<html foo='bar'>
-
-</html>
\ No newline at end of file
diff --git a/test/html/with-script.html b/test/html/with-script.html
index d727133827..b4812e96b2 100644
--- a/test/html/with-script.html
+++ b/test/html/with-script.html
@@ -16,22 +16,3 @@
 </body>
 
 </html>
-
-<!-- TEST_DIVIDER -->
-
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>with script</title>
-</head>
-
-<body>
-  <noscript src="/js/a.js"></noscript>
-  <noscript></noscript>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/test/html/with-style-sheet.html b/test/html/with-style-sheet.html
index 9ba3c5e4d2..2083dae96f 100644
--- a/test/html/with-style-sheet.html
+++ b/test/html/with-style-sheet.html
@@ -14,22 +14,3 @@
 </body>
 
 </html>
-
-<!-- TEST_DIVIDER -->
-
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>with style sheet</title>
-  <style>body { margin: 0px; }p { color: red; }body > p { color: yellow; }</style>
-</head>
-
-<body>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/test/integration.ts b/test/integration.ts
index 13647cc8ad..861c6580f1 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -6,23 +6,15 @@ import 'mocha';
 import * as puppeteer from 'puppeteer';
 import * as rollup from 'rollup';
 import typescript = require('rollup-plugin-typescript');
-import { expect } from 'chai';
+import { assert } from 'chai';
+import { SnapshotState, toMatchSnapshot } from 'jest-snapshot';
 
 const htmlFolder = path.join(__dirname, 'html');
 const htmls = fs.readdirSync(htmlFolder).map(filePath => {
   const raw = fs.readFileSync(path.resolve(htmlFolder, filePath), 'utf-8');
-  if (/<!-- TEST_DIVIDER -->/.test(raw)) {
-    const [src, dest] = raw.split('<!-- TEST_DIVIDER -->');
-    return {
-      filePath,
-      src,
-      dest,
-    };
-  }
   return {
     filePath,
     src: raw,
-    dest: raw,
   };
 });
 
@@ -60,6 +52,20 @@ const server = () =>
     });
   });
 
+function matchSnapshot(actual: string, testFile: string, testTitle: string) {
+  const snapshotState = new SnapshotState(testFile, {
+    updateSnapshot: process.env.SNAPSHOT_UPDATE ? 'all' : 'new',
+  });
+
+  const matcher = toMatchSnapshot.bind({
+    snapshotState,
+    currentTestName: testTitle,
+  });
+  const result = matcher(actual);
+  snapshotState.save();
+  return result;
+}
+
 describe('integration tests', () => {
   before(async () => {
     this.server = await server();
@@ -85,29 +91,21 @@ describe('integration tests', () => {
   });
 
   for (const html of htmls.slice(0, 10)) {
-    it('[html file]: ' + html.filePath, async () => {
+    const title = '[html file]: ' + html.filePath;
+    it(title, async () => {
       const page: puppeteer.Page = await this.browser.newPage();
       // console for debug
       // tslint:disable-next-line: no-console
       page.on('console', msg => console.log(msg.text()));
       await page.goto(`http://localhost:3030/html`);
       await page.setContent(html.src);
-      await page.evaluate(() => {
-        const x = new XMLSerializer();
-        return x.serializeToString(document);
-      });
       const rebuildHtml = (await page.evaluate(`${this.code}
         const x = new XMLSerializer();
         const [snap] = rrweb.snapshot(document);
-        x.serializeToString(rrweb.rebuild(snap)[0]);
+        x.serializeToString(rrweb.rebuild(snap));
       `)).replace(/\n\n/g, '');
-      await page.goto(`http://localhost:3030/html`);
-      await page.setContent(html.dest);
-      const destHtml = (await page.evaluate(() => {
-        const x = new XMLSerializer();
-        return x.serializeToString(document);
-      })).replace(/\n\n/g, '');
-      expect(rebuildHtml).to.equal(destHtml);
+      const result = matchSnapshot(rebuildHtml, __filename, title);
+      assert(result.pass, result.pass ? '' : result.report());
     }).timeout(5000);
   }
 });

From eef6a6e3899e7dc79c2502ade0931f09e4483d8b Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 16 Oct 2018 12:11:00 +0800
Subject: [PATCH 019/524] change relative path into absolute path

---
 README.md                              |  5 ----
 src/snapshot.ts                        | 38 ++++++++++++++++++++++++--
 test/__snapshots__/integration.ts.snap | 18 ++++++++++--
 test/css/style.css                     |  2 ++
 test/html/with-relative-res.html       | 13 +++++++++
 5 files changed, 66 insertions(+), 10 deletions(-)
 create mode 100644 test/html/with-relative-res.html

diff --git a/README.md b/README.md
index d61b9f71d6..854d85b921 100644
--- a/README.md
+++ b/README.md
@@ -2,8 +2,3 @@
 
 Snapshot the DOM into a stateful and serializable data structure.
 Also provide the ability to rebuild the DOM via snapshot.
-
-## TODO
-
-- [ ] Replace any url in css rules into absolute path.
-- [ ] Select a suitable build strategy.
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 04eddcf3a3..e4527e9297 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -28,6 +28,35 @@ function getCssRulesString(s: CSSStyleSheet): string | null {
   }
 }
 
+const URL_IN_CSS_REF = /url\((['"])([^'"]*)\1\)/gm;
+function absoluteToStylesheet(cssText: string, href: string): string {
+  return cssText.replace(URL_IN_CSS_REF, (_1, _2, filePath) => {
+    const stack = href.split('/');
+    const parts = filePath.split('/');
+    stack.pop();
+    for (const part of parts) {
+      if (part === '.') {
+        continue;
+      } else if (part === '..') {
+        stack.pop();
+      } else {
+        stack.push(part);
+      }
+    }
+    return `url('${stack.join('/')}')`;
+  });
+}
+
+const RELATIVE_PATH = /^(\.\.|\.|)\//;
+function absoluteToDoc(doc: Document, attributeValue: string): string {
+  if (!RELATIVE_PATH.test(attributeValue)) {
+    return attributeValue;
+  }
+  const a: HTMLAnchorElement = document.createElement('a');
+  a.href = attributeValue;
+  return a.href;
+}
+
 function serializeNode(n: Node, doc: Document): serializedNode | false {
   switch (n.nodeType) {
     case n.DOCUMENT_NODE:
@@ -46,7 +75,12 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
       const tagName = (n as HTMLElement).tagName.toLowerCase();
       let attributes: attributes = {};
       for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
-        attributes[name] = value;
+        // relative path in attribute
+        if (name === 'src' || name === 'href') {
+          attributes[name] = absoluteToDoc(doc, value);
+        } else {
+          attributes[name] = value;
+        }
       }
       // remote css
       if (tagName === 'link') {
@@ -56,7 +90,7 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
         const cssText = getCssRulesString(stylesheet as CSSStyleSheet);
         if (cssText) {
           attributes = {
-            _cssText: cssText,
+            _cssText: absoluteToStylesheet(cssText, stylesheet!.href!),
           };
         }
       }
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 6aba1b5e53..45ae353eca 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -96,7 +96,7 @@ exports[`[html file]: iframe.html 1`] = `
   <title data-rrid=\\"12\\">iframe</title>
 </head>
 <body data-rrid=\\"16\\">
-  <iframe src=\\"/html/iframe-inner.html\\" width=\\"100\\" height=\\"50\\" data-rrid=\\"18\\"></iframe>
+  <iframe src=\\"http://localhost:3030/html/iframe-inner.html\\" width=\\"100\\" height=\\"50\\" data-rrid=\\"18\\"></iframe>
 </body></html>"
 `;
 
@@ -110,6 +110,18 @@ exports[`[html file]: invalid-attribute.html 1`] = `
 </body></html>"
 `;
 
+exports[`[html file]: with-relative-res.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
+  <meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
+  <title data-rrid=\\"12\\">Document</title>
+</head>
+<body data-rrid=\\"16\\">
+  <a href=\\"http://localhost:3030/basic.html\\" data-rrid=\\"18\\"></a>
+  <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"\\" data-rrid=\\"20\\" /></body></html>"
+`;
+
 exports[`[html file]: with-script.html 1`] = `
 "<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
   <meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
@@ -117,7 +129,7 @@ exports[`[html file]: with-script.html 1`] = `
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
   <title data-rrid=\\"12\\">with script</title>
 </head><body data-rrid=\\"16\\">
-  <noscript src=\\"/js/a.js\\" data-rrid=\\"18\\"></noscript>
+  <noscript src=\\"http://localhost:3030/js/a.js\\" data-rrid=\\"18\\"></noscript>
   <noscript data-rrid=\\"20\\"></noscript></body></html>"
 `;
 
@@ -127,7 +139,7 @@ exports[`[html file]: with-style-sheet.html 1`] = `
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
   <title data-rrid=\\"12\\">with style sheet</title>
-  <style data-rrid=\\"15\\">body { margin: 0px; }p { color: red; }body &gt; p { color: yellow; }</style>
+  <style data-rrid=\\"15\\">body { margin: 0px; background: url('http://localhost:3030/a.jpg'); }p { color: red; background: url('http://localhost:3030/css/b.jpg'); }body &gt; p { color: yellow; }</style>
 </head><body data-rrid=\\"18\\">
 </body></html>"
 `;
diff --git a/test/css/style.css b/test/css/style.css
index f1be9954d9..fe10f55d70 100644
--- a/test/css/style.css
+++ b/test/css/style.css
@@ -1,8 +1,10 @@
 body {
   margin: 0;
+  background: url('../a.jpg');
 }
 p {
   color: red;
+  background: url('./b.jpg');
 }
 body > p {
   color: yellow;
diff --git a/test/html/with-relative-res.html b/test/html/with-relative-res.html
new file mode 100644
index 0000000000..9e75f035c1
--- /dev/null
+++ b/test/html/with-relative-res.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+  <a href="./basic.html"></a>
+  <img src="./a.jpg" alt="" srcset="">
+</body>
+</html>
\ No newline at end of file

From 0eedab53eb1cc484ffeda8ae435e290c3df7cc28 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 16 Oct 2018 12:12:31 +0800
Subject: [PATCH 020/524] bump 0.3.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 119a44c056..da1d93dc2a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "main": "dist/index.js",
   "module": "dist/module.js",

From e461136f7101cc03337cb8ce26195098274b2eef Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 16 Oct 2018 15:18:07 +0800
Subject: [PATCH 021/524] impl the extra child data attribute to align id map

---
 src/rebuild.ts                         | 9 +++++++++
 src/snapshot.ts                        | 4 ++--
 test/__snapshots__/integration.ts.snap | 8 ++++----
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 223e3be894..4e61283e48 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -24,6 +24,7 @@ function buildNode(n: serializedNodeWithId): Node | null {
     case NodeType.Element:
       const tagName = getTagName(n);
       const node = document.createElement(tagName);
+      const extraChildIndexes: number[] = [];
       for (const name in n.attributes) {
         if (n.attributes.hasOwnProperty(name)) {
           let value = n.attributes[name];
@@ -32,6 +33,8 @@ function buildNode(n: serializedNodeWithId): Node | null {
           const isRemoteCss = tagName === 'style' && name === '_cssText';
           if (isTextarea || isRemoteCss) {
             const child = document.createTextNode(value);
+            // identify the extra child DOM we added when rebuild
+            extraChildIndexes.push(node.childNodes.length);
             node.appendChild(child);
             continue;
           }
@@ -42,6 +45,12 @@ function buildNode(n: serializedNodeWithId): Node | null {
           }
         }
       }
+      if (extraChildIndexes.length) {
+        node.setAttribute(
+          'data-extra-child-index',
+          JSON.stringify(extraChildIndexes),
+        );
+      }
       return node;
     case NodeType.Text:
       return document.createTextNode(n.textContent);
diff --git a/src/snapshot.ts b/src/snapshot.ts
index e4527e9297..fa3aea8cb3 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -52,7 +52,7 @@ function absoluteToDoc(doc: Document, attributeValue: string): string {
   if (!RELATIVE_PATH.test(attributeValue)) {
     return attributeValue;
   }
-  const a: HTMLAnchorElement = document.createElement('a');
+  const a: HTMLAnchorElement = doc.createElement('a');
   a.href = attributeValue;
   return a.href;
 }
@@ -130,7 +130,7 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
         n.parentNode && (n.parentNode as HTMLElement).tagName;
       let textContent = (n as Text).textContent;
       if (parentTagName === 'SCRIPT') {
-        textContent = '';
+        textContent = 'SCRIPT_PLACEHOLDER';
       }
       return {
         type: NodeType.Text,
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 45ae353eca..87f1446e87 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -76,7 +76,7 @@ exports[`[html file]: form-fields.html 1`] = `
       <input type=\\"checkbox\\" checked=\\"\\" data-rrid=\\"32\\" />
     </label>
     <label for=\\"textarea\\" data-rrid=\\"35\\">
-      <textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\" data-rrid=\\"37\\">1234</textarea>
+      <textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\" data-extra-child-index=\\"[0]\\" data-rrid=\\"37\\">1234</textarea>
     </label>
     <label for=\\"select\\" data-rrid=\\"40\\">
       <select name=\\"\\" id=\\"\\" value=\\"2\\" data-rrid=\\"42\\">
@@ -84,7 +84,7 @@ exports[`[html file]: form-fields.html 1`] = `
         <option value=\\"2\\" selected=\\"\\" data-rrid=\\"47\\">2</option>
       </select>
     </label>
-  </form><noscript data-rrid=\\"53\\"></noscript>
+  </form><noscript data-rrid=\\"53\\">SCRIPT_PLACEHOLDER</noscript>
 </body></html>"
 `;
 
@@ -130,7 +130,7 @@ exports[`[html file]: with-script.html 1`] = `
   <title data-rrid=\\"12\\">with script</title>
 </head><body data-rrid=\\"16\\">
   <noscript src=\\"http://localhost:3030/js/a.js\\" data-rrid=\\"18\\"></noscript>
-  <noscript data-rrid=\\"20\\"></noscript></body></html>"
+  <noscript data-rrid=\\"20\\">SCRIPT_PLACEHOLDER</noscript></body></html>"
 `;
 
 exports[`[html file]: with-style-sheet.html 1`] = `
@@ -139,7 +139,7 @@ exports[`[html file]: with-style-sheet.html 1`] = `
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
   <title data-rrid=\\"12\\">with style sheet</title>
-  <style data-rrid=\\"15\\">body { margin: 0px; background: url('http://localhost:3030/a.jpg'); }p { color: red; background: url('http://localhost:3030/css/b.jpg'); }body &gt; p { color: yellow; }</style>
+  <style data-extra-child-index=\\"[0]\\" data-rrid=\\"15\\">body { margin: 0px; background: url('http://localhost:3030/a.jpg'); }p { color: red; background: url('http://localhost:3030/css/b.jpg'); }body &gt; p { color: yellow; }</style>
 </head><body data-rrid=\\"18\\">
 </body></html>"
 `;

From 71932ee530bc7e9fe6117c597cb139618f62d089 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 16 Oct 2018 17:53:35 +0800
Subject: [PATCH 022/524] update README and add travis

---
 .travis.yml         | 14 ++++++++++++++
 README.md           | 32 ++++++++++++++++++++++++++++++++
 test/integration.ts |  1 -
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 .travis.yml

diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000000..55653dd1d7
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,14 @@
+language: node_js
+
+node_js:
+  - 10
+
+cache:
+  directories:
+    - 'node_modules'
+
+install:
+  - npm install
+
+script:
+  - npm test
diff --git a/README.md b/README.md
index 854d85b921..1dcd2adac9 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,36 @@
 # rrweb-snapshot
 
+[![Build Status](https://travis-ci.org/rrweb-io/rrweb-snapshot.svg?branch=master)](https://travis-ci.org/rrweb-io/rrweb-snapshot)
+
 Snapshot the DOM into a stateful and serializable data structure.
 Also provide the ability to rebuild the DOM via snapshot.
+
+## API
+
+This module export 3 methods:
+
+### snapshot
+
+`snapshot` will traverse the DOM and return a stateful and serializable data structure which can represent the current DOM **view**.
+
+There are serveral things will be done during snapshot:
+
+1. Inline some DOM states into HTML attributes, e.g, HTMLInputElement's value.
+2. Turn script tags into noscript tags to avoid scripts being executed.
+3. Try to inline stylesheets to make sure local stylesheets can be used.
+4. Make relative paths in href, src, css to be absolute paths.
+5. Give a id to each Node, and return the id node map when snapshot finished.
+
+#### rebuild
+
+`rebuild` will build the DOM according to the taken snapshot.
+
+There are serveral things will be done during rebuild:
+
+1. Add data-rrid attribute if Node is an Element.
+2. Create some extra DOM node like text node to place inline css and some states.
+3. Add data-extra-child-index attribute if Node has some extra child DOM.
+
+#### serializeNodeWithId
+
+`serializeNodeWithId` can serialize a node into snapshot format with id.
diff --git a/test/integration.ts b/test/integration.ts
index 861c6580f1..700469f2ea 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -71,7 +71,6 @@ describe('integration tests', () => {
     this.server = await server();
     this.browser = await puppeteer.launch({
       // headless: false,
-      executablePath: '/home/yanzhen/Desktop/chrome-linux/chrome',
     });
 
     const bundle = await rollup.rollup({

From fade2df5d46fc974570eb8d34730dcf1b85d1ebb Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 16 Oct 2018 18:00:24 +0800
Subject: [PATCH 023/524] bump 0.4.0

---
 .travis.yml  | 4 ----
 package.json | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 55653dd1d7..26cef21f03 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -3,10 +3,6 @@ language: node_js
 node_js:
   - 10
 
-cache:
-  directories:
-    - 'node_modules'
-
 install:
   - npm install
 
diff --git a/package.json b/package.json
index da1d93dc2a..57db3613bc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "main": "dist/index.js",
   "module": "dist/module.js",

From 72beb51110a8782b66354dee22c5332d67d61c07 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 16 Oct 2018 18:09:51 +0800
Subject: [PATCH 024/524] fix npm package files and bump version

---
 package.json | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 57db3613bc..6f32f4e480 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "main": "dist/index.js",
   "module": "dist/module.js",
@@ -18,7 +18,9 @@
     "DOM"
   ],
   "files": [
-    "dist"
+    "dist",
+    "index.d.ts",
+    "src/types.ts"
   ],
   "author": "yanzhen@smartx.com",
   "license": "MIT",

From 2eed038e6b3c63d022ea751f742c5fd03b67b40d Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 17 Oct 2018 12:06:18 +0800
Subject: [PATCH 025/524] init repo

---
 .gitignore        |  7 +++++
 .prettierrc       |  4 +++
 README.md         | 70 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      | 21 ++++++++++++++
 public/global.css | 61 +++++++++++++++++++++++++++++++++++++++++
 public/index.html | 16 +++++++++++
 rollup.config.js  | 43 +++++++++++++++++++++++++++++
 src/App.html      | 17 ++++++++++++
 src/Player.html   | 17 ++++++++++++
 src/main.js       | 10 +++++++
 10 files changed, 266 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 .prettierrc
 create mode 100644 README.md
 create mode 100644 package.json
 create mode 100644 public/global.css
 create mode 100644 public/index.html
 create mode 100644 rollup.config.js
 create mode 100644 src/App.html
 create mode 100644 src/Player.html
 create mode 100644 src/main.js

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000..49acba0037
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,7 @@
+.DS_Store
+node_modules
+public/bundle.*
+package-lock.json
+yarn.lock
+
+.vscode
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000000..a20502b7f0
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000000..3e411bf696
--- /dev/null
+++ b/README.md
@@ -0,0 +1,70 @@
+*Psst — looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
+
+---
+
+# svelte app
+
+This is a project template for [Svelte](https://svelte.technology) apps. It lives at https://github.com/sveltejs/template.
+
+To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
+
+```bash
+npm install -g degit # you only need to do this once
+
+degit sveltejs/template svelte-app
+cd svelte-app
+```
+
+*Note that you will need to have [Node.js](https://nodejs.org) installed.*
+
+
+## Get started
+
+Install the dependencies...
+
+```bash
+cd svelte-app
+npm install
+```
+
+...then start [Rollup](https://rollupjs.org):
+
+```bash
+npm run dev
+```
+
+Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+
+
+## Deploying to the web
+
+### With [now](https://zeit.co/now)
+
+Install `now` if you haven't already:
+
+```bash
+npm install -g now
+```
+
+Then, from within your project folder:
+
+```bash
+now
+```
+
+As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
+
+### With [surge](https://surge.sh/)
+
+Install `surge` if you haven't already:
+
+```bash
+npm install -g surge
+```
+
+Then, from within your project folder:
+
+```bash
+npm run build
+surge public
+```
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000..b07af65f87
--- /dev/null
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "rrweb-player",
+  "version": "0.1.0",
+  "devDependencies": {
+    "npm-run-all": "^4.1.3",
+    "rollup": "^0.66.2",
+    "rollup-plugin-commonjs": "^9.1.8",
+    "rollup-plugin-node-resolve": "^3.4.0",
+    "rollup-plugin-svelte": "^4.3.1",
+    "rollup-plugin-terser": "^3.0.0",
+    "sirv-cli": "^0.2.2",
+    "svelte": "^2.13.5"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "autobuild": "rollup -c -w",
+    "dev": "run-p start:dev autobuild",
+    "start": "sirv public",
+    "start:dev": "sirv public --dev"
+  }
+}
\ No newline at end of file
diff --git a/public/global.css b/public/global.css
new file mode 100644
index 0000000000..9d682a3961
--- /dev/null
+++ b/public/global.css
@@ -0,0 +1,61 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+input[type="range"] {
+	height: 0;
+}
+
+button {
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000000..6bb5adc070
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset='utf8'>
+	<meta name='viewport' content='width=device-width'>
+
+	<title>Svelte app</title>
+
+	<link rel='stylesheet' href='global.css'>
+	<link rel='stylesheet' href='bundle.css'>
+</head>
+
+<body>
+	<script src='bundle.js'></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 0000000000..d9aa427843
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,43 @@
+import svelte from 'rollup-plugin-svelte';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import { terser } from 'rollup-plugin-terser';
+
+const production = !process.env.ROLLUP_WATCH;
+
+export default {
+	input: 'src/main.js',
+	output: {
+		sourcemap: true,
+		format: 'iife',
+		name: 'app',
+		file: 'public/bundle.js'
+	},
+	plugins: [
+		svelte({
+			// opt in to v3 behaviour today
+			skipIntroByDefault: true,
+			nestedTransitions: true,
+
+			// enable run-time checks when not in production
+			dev: !production,
+			// we'll extract any component CSS out into
+			// a separate file — better for performance
+			css: css => {
+				css.write('public/bundle.css');
+			}
+		}),
+
+		// If you have external dependencies installed from
+		// npm, you'll most likely need these plugins. In
+		// some cases you'll need additional configuration —
+		// consult the documentation for details:
+		// https://github.com/rollup/rollup-plugin-commonjs
+		resolve(),
+		commonjs(),
+
+		// If we're building for production (npm run build
+		// instead of npm run dev), minify
+		production && terser()
+	]
+};
diff --git a/src/App.html b/src/App.html
new file mode 100644
index 0000000000..140cf9d3c4
--- /dev/null
+++ b/src/App.html
@@ -0,0 +1,17 @@
+<h1>
+	rrweb player playground
+</h1>
+<Player />
+
+<style>
+</style>
+
+<script>
+	import Player from './Player.html';
+
+	export default {
+		components: {
+			Player
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/src/Player.html b/src/Player.html
new file mode 100644
index 0000000000..719e03a7b0
--- /dev/null
+++ b/src/Player.html
@@ -0,0 +1,17 @@
+<div class="rr-player">
+  rrplayer
+</div>
+
+<style>
+  .rr-player {
+    border: 1px solid indianred;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {}
+    }
+  }
+</script>
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000000..c804ceec1e
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,10 @@
+import App from './App.html';
+
+const app = new App({
+	target: document.body,
+	data: {
+		name: 'world'
+	}
+});
+
+export default app;
\ No newline at end of file

From 904cc493dbac611bd194aa31a4407052211fc16f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 17 Oct 2018 14:14:44 +0800
Subject: [PATCH 026/524] add eslint

---
 .eslintrc.json  | 13 +++++++++++++
 package.json    |  5 ++++-
 src/App.html    | 15 +++++++--------
 src/Player.html | 24 +++++++++++++++++++-----
 src/main.js     | 10 +++++-----
 src/util.js     |  7 +++++++
 6 files changed, 55 insertions(+), 19 deletions(-)
 create mode 100644 .eslintrc.json
 create mode 100644 src/util.js

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000000..b066720dc3
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,13 @@
+{
+  "extends": "google",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "sourceType": "module"
+  },
+  "rules": {
+    "require-jsdoc": "off",
+    "arrow-parens": "off",
+    "object-curly-spacing": "off"
+  },
+  "plugins": ["html"]
+}
diff --git a/package.json b/package.json
index b07af65f87..75368a6ae0 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,9 @@
   "name": "rrweb-player",
   "version": "0.1.0",
   "devDependencies": {
+    "eslint": "^5.7.0",
+    "eslint-config-google": "^0.11.0",
+    "eslint-plugin-html": "^4.0.6",
     "npm-run-all": "^4.1.3",
     "rollup": "^0.66.2",
     "rollup-plugin-commonjs": "^9.1.8",
@@ -18,4 +21,4 @@
     "start": "sirv public",
     "start:dev": "sirv public --dev"
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.html b/src/App.html
index 140cf9d3c4..73363aecbe 100644
--- a/src/App.html
+++ b/src/App.html
@@ -1,5 +1,5 @@
 <h1>
-	rrweb player playground
+  rrweb player playground
 </h1>
 <Player />
 
@@ -7,11 +7,10 @@ <h1>
 </style>
 
 <script>
-	import Player from './Player.html';
-
-	export default {
-		components: {
-			Player
-		}
-	}
+  import Player from './Player.html';
+  export default {
+    components: {
+      Player,
+    },
+  };
 </script>
\ No newline at end of file
diff --git a/src/Player.html b/src/Player.html
index 719e03a7b0..edabdbb1ce 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -1,4 +1,4 @@
-<div class="rr-player">
+<div class="rr-player" { style }>
   rrplayer
 </div>
 
@@ -9,9 +9,23 @@
 </style>
 
 <script>
+  import { inlineCss } from '../util.js';
+
   export default {
     data() {
-      return {}
-    }
-  }
-</script>
+      return {
+        width: 1024,
+        height: 576,
+      };
+    },
+    computed: {
+      style({ width, height }) {
+        return inlineCss({
+          width: `${width}px`,
+          height: `${height}px`,
+        });
+      },
+    },
+  };
+
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index c804ceec1e..9263290175 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,10 +1,10 @@
 import App from './App.html';
 
 const app = new App({
-	target: document.body,
-	data: {
-		name: 'world'
-	}
+  target: document.body,
+  data: {
+    name: 'world',
+  },
 });
 
-export default app;
\ No newline at end of file
+export default app;
diff --git a/src/util.js b/src/util.js
new file mode 100644
index 0000000000..da07ec1932
--- /dev/null
+++ b/src/util.js
@@ -0,0 +1,7 @@
+export function inlineCss(cssObj) {
+  let style = '';
+  Object.keys(cssObj).forEach(key => {
+    style += `${key}: ${cssObj[key]};`;
+  });
+  return style;
+}

From f97c829a7dbbc412b48e2f8720637765ec2f1f7e Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 17 Oct 2018 15:45:02 +0800
Subject: [PATCH 027/524] attach the scaled iframe into player

---
 .gitignore       |  1 +
 package.json     |  3 +++
 rollup.config.js | 62 ++++++++++++++++++++++----------------------
 src/App.html     |  3 ++-
 src/Player.html  | 67 +++++++++++++++++++++++++++++++++++++++++++++---
 src/main.js      |  7 ++++-
 6 files changed, 106 insertions(+), 37 deletions(-)

diff --git a/.gitignore b/.gitignore
index 49acba0037..7be014c58f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ package-lock.json
 yarn.lock
 
 .vscode
+temp
diff --git a/package.json b/package.json
index 75368a6ae0..c3d94cf6f2 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,9 @@
     "sirv-cli": "^0.2.2",
     "svelte": "^2.13.5"
   },
+  "dependencies": {
+    "rrweb": "file:../rrweb"
+  },
   "scripts": {
     "build": "rollup -c",
     "autobuild": "rollup -c -w",
diff --git a/rollup.config.js b/rollup.config.js
index d9aa427843..e48c8da129 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -6,38 +6,38 @@ import { terser } from 'rollup-plugin-terser';
 const production = !process.env.ROLLUP_WATCH;
 
 export default {
-	input: 'src/main.js',
-	output: {
-		sourcemap: true,
-		format: 'iife',
-		name: 'app',
-		file: 'public/bundle.js'
-	},
-	plugins: [
-		svelte({
-			// opt in to v3 behaviour today
-			skipIntroByDefault: true,
-			nestedTransitions: true,
+  input: 'src/main.js',
+  output: {
+    sourcemap: true,
+    format: 'iife',
+    name: 'app',
+    file: 'public/bundle.js',
+  },
+  plugins: [
+    svelte({
+      // opt in to v3 behaviour today
+      skipIntroByDefault: true,
+      nestedTransitions: true,
 
-			// enable run-time checks when not in production
-			dev: !production,
-			// we'll extract any component CSS out into
-			// a separate file — better for performance
-			css: css => {
-				css.write('public/bundle.css');
-			}
-		}),
+      // enable run-time checks when not in production
+      dev: !production,
+      // we'll extract any component CSS out into
+      // a separate file — better for performance
+      css: css => {
+        css.write('public/bundle.css');
+      },
+    }),
 
-		// If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration —
-		// consult the documentation for details:
-		// https://github.com/rollup/rollup-plugin-commonjs
-		resolve(),
-		commonjs(),
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration —
+    // consult the documentation for details:
+    // https://github.com/rollup/rollup-plugin-commonjs
+    resolve(),
+    commonjs(),
 
-		// If we're building for production (npm run build
-		// instead of npm run dev), minify
-		production && terser()
-	]
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser(),
+  ],
 };
diff --git a/src/App.html b/src/App.html
index 73363aecbe..c54fde621a 100644
--- a/src/App.html
+++ b/src/App.html
@@ -1,13 +1,14 @@
 <h1>
   rrweb player playground
 </h1>
-<Player />
+<Player {events} />
 
 <style>
 </style>
 
 <script>
   import Player from './Player.html';
+
   export default {
     components: {
       Player,
diff --git a/src/Player.html b/src/Player.html
index edabdbb1ce..1d5a561759 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -1,21 +1,60 @@
-<div class="rr-player" { style }>
-  rrplayer
+<div class="rr-player">
+  <div class="rr-player__frame" ref:frame { style }></div>
 </div>
 
 <style>
   .rr-player {
-    border: 1px solid indianred;
+    border: 3px solid indianred;
+    float: left;
+    clear: both;
+  }
+
+  .rr-player__frame {
+    overflow: hidden;
+  }
+
+  :global(.replayer-wrapper) {
+    float: left;
+    clear: both;
+    transform-origin: top left;
+    left: 50%;
+    top: 50%;
+    border: 2px solid grey;
+  }
+
+  /* get from rrweb */
+  :global(.replayer-wrapper) {
+    position: relative;
+  }
+
+  :global(.replayer-mouse) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+  }
+
+  :global(.replayer-mouse::after) {
+    content: '';
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    background: thistle;
+    transform: translate(-10px, -10px);
+    opacity: 0.5;
   }
 </style>
 
 <script>
-  import { inlineCss } from '../util.js';
+  import { Replayer } from 'rrweb';
+  import { inlineCss } from './util.js';
 
   export default {
     data() {
       return {
         width: 1024,
         height: 576,
+        events: [],
       };
     },
     computed: {
@@ -26,6 +65,26 @@
         });
       },
     },
+    methods: {
+      updateScale(el, frameDimension) {
+        const { width, height } = this.get();
+        const widthScale = width / frameDimension.width;
+        const heightScale = height / frameDimension.height;
+        el.style.transform =
+          `scale(${Math.min(widthScale, heightScale, 1)})` +
+          'translate(-50%, -50%)';
+      },
+    },
+    oncreate(p) {
+      const { events } = this.get();
+      const replayer = new Replayer(events, {
+        speed: 1,
+        root: this.refs.frame,
+        onResize: (dimension) => this.updateScale(replayer.wrapper, dimension),
+      });
+      replayer.play();
+    },
   };
 
+
 </script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 9263290175..e69387f863 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,14 @@
 import App from './App.html';
 
+const events =
+  // prettier-ignore
+  // eslint-disable-next-line
+  [{"type":0,"data":{"href":"http://127.0.0.1:5500/checkout-demo/index.html?"},"timestamp":1539674870305},{"type":1,"data":{"width":1173,"height":711},"timestamp":1539674870317},{"type":2,"data":{"node":{"type":0,"childNodes":[{"type":1,"name":"html","publicId":"","systemId":"","id":2},{"type":5,"textContent":" saved from url=(0052)https://getbootstrap.com/docs/4.1/examples/checkout/ ","id":3},{"type":2,"tagName":"html","attributes":{"lang":"en"},"childNodes":[{"type":2,"tagName":"head","attributes":{},"childNodes":[{"type":3,"textContent":"\n  ","id":6},{"type":2,"tagName":"meta","attributes":{"http-equiv":"Content-Type","content":"text/html; charset=UTF-8"},"childNodes":[],"id":7},{"type":3,"textContent":"\n\n  ","id":8},{"type":2,"tagName":"meta","attributes":{"name":"viewport","content":"width=device-width, initial-scale=1, shrink-to-fit=no"},"childNodes":[],"id":9},{"type":3,"textContent":"\n  ","id":10},{"type":2,"tagName":"meta","attributes":{"name":"description","content":""},"childNodes":[],"id":11},{"type":3,"textContent":"\n  ","id":12},{"type":2,"tagName":"meta","attributes":{"name":"author","content":""},"childNodes":[],"id":13},{"type":3,"textContent":"\n  ","id":14},{"type":2,"tagName":"link","attributes":{"rel":"icon","href":"https://getbootstrap.com/favicon.ico"},"childNodes":[],"id":15},{"type":3,"textContent":"\n\n  ","id":16},{"type":2,"tagName":"title","attributes":{},"childNodes":[{"type":3,"textContent":"Checkout example for Bootstrap","id":18}],"id":17},{"type":3,"textContent":"\n\n  ","id":19},{"type":5,"textContent":" Bootstrap core CSS ","id":20},{"type":3,"textContent":"\n  ","id":21},{"type":2,"tagName":"link","attributes":{"_cssText":":root { --blue:#007bff; --indigo:#6610f2; --purple:#6f42c1; --pink:#e83e8c; --red:#dc3545; --orange:#fd7e14; --yellow:#ffc107; --green:#28a745; --teal:#20c997; --cyan:#17a2b8; --white:#fff; --gray:#6c757d; --gray-dark:#343a40; --primary:#007bff; --secondary:#6c757d; --success:#28a745; --info:#17a2b8; --warning:#ffc107; --danger:#dc3545; --light:#f8f9fa; --dark:#343a40; --breakpoint-xs:0; --breakpoint-sm:576px; --breakpoint-md:768px; --breakpoint-lg:992px; --breakpoint-xl:1200px; --font-family-sans-serif:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"; --font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace; }*, ::after, ::before { box-sizing: border-box; }html { font-family: sans-serif; line-height: 1.15; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }body { margin: 0px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: rgb(33, 37, 41); text-align: left; background-color: rgb(255, 255, 255); }[tabindex=\"-1\"]:focus { outline: 0px !important; }hr { box-sizing: content-box; height: 0px; overflow: visible; }h1, h2, h3, h4, h5, h6 { margin-top: 0px; margin-bottom: 0.5rem; }p { margin-top: 0px; margin-bottom: 1rem; }abbr[data-original-title], abbr[title] { text-decoration: underline dotted; cursor: help; border-bottom: 0px; }address { margin-bottom: 1rem; font-style: normal; line-height: inherit; }dl, ol, ul { margin-top: 0px; margin-bottom: 1rem; }ol ol, ol ul, ul ol, ul ul { margin-bottom: 0px; }dt { font-weight: 700; }dd { margin-bottom: 0.5rem; margin-left: 0px; }blockquote { margin: 0px 0px 1rem; }dfn { font-style: italic; }b, strong { font-weight: bolder; }small { font-size: 80%; }sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }sub { bottom: -0.25em; }sup { top: -0.5em; }a { color: rgb(0, 123, 255); text-decoration: none; background-color: transparent; }a:hover { color: rgb(0, 86, 179); text-decoration: underline; }a:not([href]):not([tabindex]) { color: inherit; text-decoration: none; }a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover { color: inherit; text-decoration: none; }a:not([href]):not([tabindex]):focus { outline: 0px; }code, kbd, pre, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; font-size: 1em; }pre { margin-top: 0px; margin-bottom: 1rem; overflow: auto; }figure { margin: 0px 0px 1rem; }img { vertical-align: middle; border-style: none; }svg { overflow: hidden; vertical-align: middle; }table { border-collapse: collapse; }caption { padding-top: 0.75rem; padding-bottom: 0.75rem; color: rgb(108, 117, 125); text-align: left; caption-side: bottom; }th { text-align: inherit; }label { display: inline-block; margin-bottom: 0.5rem; }button { border-radius: 0px; }button:focus { outline: -webkit-focus-ring-color auto 5px; }button, input, optgroup, select, textarea { margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit; }button, input { overflow: visible; }button, select { text-transform: none; }[type=\"reset\"], [type=\"submit\"], button, html [type=\"button\"] { -webkit-appearance: button; }input[type=\"checkbox\"], input[type=\"radio\"] { box-sizing: border-box; padding: 0px; }input[type=\"date\"], input[type=\"datetime-local\"], input[type=\"month\"], input[type=\"time\"] { -webkit-appearance: listbox; }textarea { overflow: auto; resize: vertical; }fieldset { min-width: 0px; padding: 0px; margin: 0px; border: 0px; }legend { display: block; width: 100%; max-width: 100%; padding: 0px; margin-bottom: 0.5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; }progress { vertical-align: baseline; }[type=\"number\"]::-webkit-inner-spin-button, [type=\"number\"]::-webkit-outer-spin-button { height: auto; }[type=\"search\"] { outline-offset: -2px; -webkit-appearance: none; }[type=\"search\"]::-webkit-search-cancel-button, [type=\"search\"]::-webkit-search-decoration { -webkit-appearance: none; }::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }output { display: inline-block; }summary { display: list-item; cursor: pointer; }template { display: none; }[hidden] { display: none !important; }.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5rem; font-family: inherit; font-weight: 500; line-height: 1.2; color: inherit; }.h1, h1 { font-size: 2.5rem; }.h2, h2 { font-size: 2rem; }.h3, h3 { font-size: 1.75rem; }.h4, h4 { font-size: 1.5rem; }.h5, h5 { font-size: 1.25rem; }.h6, h6 { font-size: 1rem; }.lead { font-size: 1.25rem; font-weight: 300; }.display-1 { font-size: 6rem; font-weight: 300; line-height: 1.2; }.display-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2; }.display-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2; }.display-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; }hr { margin-top: 1rem; margin-bottom: 1rem; border-width: 1px 0px 0px; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0.1); }.small, small { font-size: 80%; font-weight: 400; }.mark, mark { padding: 0.2em; background-color: rgb(252, 248, 227); }.list-unstyled { padding-left: 0px; list-style: none; }.list-inline { padding-left: 0px; list-style: none; }.list-inline-item { display: inline-block; }.list-inline-item:not(:last-child) { margin-right: 0.5rem; }.initialism { font-size: 90%; text-transform: uppercase; }.blockquote { margin-bottom: 1rem; font-size: 1.25rem; }.blockquote-footer { display: block; font-size: 80%; color: rgb(108, 117, 125); }.blockquote-footer::before { content: \"— \"; }.img-fluid { max-width: 100%; height: auto; }.img-thumbnail { padding: 0.25rem; background-color: rgb(255, 255, 255); border: 1px solid rgb(222, 226, 230); border-radius: 0.25rem; max-width: 100%; height: auto; }.figure { display: inline-block; }.figure-img { margin-bottom: 0.5rem; line-height: 1; }.figure-caption { font-size: 90%; color: rgb(108, 117, 125); }code { font-size: 87.5%; color: rgb(232, 62, 140); word-break: break-word; }a > code { color: inherit; }kbd { padding: 0.2rem 0.4rem; font-size: 87.5%; color: rgb(255, 255, 255); background-color: rgb(33, 37, 41); border-radius: 0.2rem; }kbd kbd { padding: 0px; font-size: 100%; font-weight: 700; }pre { display: block; font-size: 87.5%; color: rgb(33, 37, 41); }pre code { font-size: inherit; color: inherit; word-break: normal; }.pre-scrollable { max-height: 340px; overflow-y: scroll; }.container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }@media (min-width: 576px) {\n  .container { max-width: 540px; }\n}@media (min-width: 768px) {\n  .container { max-width: 720px; }\n}@media (min-width: 992px) {\n  .container { max-width: 960px; }\n}@media (min-width: 1200px) {\n  .container { max-width: 1140px; }\n}.container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }.no-gutters { margin-right: 0px; margin-left: 0px; }.no-gutters > .col, .no-gutters > [class*=\"col-\"] { padding-right: 0px; padding-left: 0px; }.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; }.col { flex-basis: 0px; flex-grow: 1; max-width: 100%; }.col-auto { flex: 0 0 auto; width: auto; max-width: none; }.col-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }.col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }.col-3 { flex: 0 0 25%; max-width: 25%; }.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }.col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }.col-6 { flex: 0 0 50%; max-width: 50%; }.col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }.col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }.col-9 { flex: 0 0 75%; max-width: 75%; }.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }.col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }.col-12 { flex: 0 0 100%; max-width: 100%; }.order-first { order: -1; }.order-last { order: 13; }.order-0 { order: 0; }.order-1 { order: 1; }.order-2 { order: 2; }.order-3 { order: 3; }.order-4 { order: 4; }.order-5 { order: 5; }.order-6 { order: 6; }.order-7 { order: 7; }.order-8 { order: 8; }.order-9 { order: 9; }.order-10 { order: 10; }.order-11 { order: 11; }.order-12 { order: 12; }.offset-1 { margin-left: 8.33333%; }.offset-2 { margin-left: 16.6667%; }.offset-3 { margin-left: 25%; }.offset-4 { margin-left: 33.3333%; }.offset-5 { margin-left: 41.6667%; }.offset-6 { margin-left: 50%; }.offset-7 { margin-left: 58.3333%; }.offset-8 { margin-left: 66.6667%; }.offset-9 { margin-left: 75%; }.offset-10 { margin-left: 83.3333%; }.offset-11 { margin-left: 91.6667%; }@media (min-width: 576px) {\n  .col-sm { flex-basis: 0px; flex-grow: 1; max-width: 100%; }\n  .col-sm-auto { flex: 0 0 auto; width: auto; max-width: none; }\n  .col-sm-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }\n  .col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }\n  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }\n  .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }\n  .col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }\n  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }\n  .col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }\n  .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }\n  .col-sm-9 { flex: 0 0 75%; max-width: 75%; }\n  .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }\n  .col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }\n  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }\n  .order-sm-first { order: -1; }\n  .order-sm-last { order: 13; }\n  .order-sm-0 { order: 0; }\n  .order-sm-1 { order: 1; }\n  .order-sm-2 { order: 2; }\n  .order-sm-3 { order: 3; }\n  .order-sm-4 { order: 4; }\n  .order-sm-5 { order: 5; }\n  .order-sm-6 { order: 6; }\n  .order-sm-7 { order: 7; }\n  .order-sm-8 { order: 8; }\n  .order-sm-9 { order: 9; }\n  .order-sm-10 { order: 10; }\n  .order-sm-11 { order: 11; }\n  .order-sm-12 { order: 12; }\n  .offset-sm-0 { margin-left: 0px; }\n  .offset-sm-1 { margin-left: 8.33333%; }\n  .offset-sm-2 { margin-left: 16.6667%; }\n  .offset-sm-3 { margin-left: 25%; }\n  .offset-sm-4 { margin-left: 33.3333%; }\n  .offset-sm-5 { margin-left: 41.6667%; }\n  .offset-sm-6 { margin-left: 50%; }\n  .offset-sm-7 { margin-left: 58.3333%; }\n  .offset-sm-8 { margin-left: 66.6667%; }\n  .offset-sm-9 { margin-left: 75%; }\n  .offset-sm-10 { margin-left: 83.3333%; }\n  .offset-sm-11 { margin-left: 91.6667%; }\n}@media (min-width: 768px) {\n  .col-md { flex-basis: 0px; flex-grow: 1; max-width: 100%; }\n  .col-md-auto { flex: 0 0 auto; width: auto; max-width: none; }\n  .col-md-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }\n  .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }\n  .col-md-3 { flex: 0 0 25%; max-width: 25%; }\n  .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }\n  .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }\n  .col-md-6 { flex: 0 0 50%; max-width: 50%; }\n  .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }\n  .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }\n  .col-md-9 { flex: 0 0 75%; max-width: 75%; }\n  .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }\n  .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }\n  .col-md-12 { flex: 0 0 100%; max-width: 100%; }\n  .order-md-first { order: -1; }\n  .order-md-last { order: 13; }\n  .order-md-0 { order: 0; }\n  .order-md-1 { order: 1; }\n  .order-md-2 { order: 2; }\n  .order-md-3 { order: 3; }\n  .order-md-4 { order: 4; }\n  .order-md-5 { order: 5; }\n  .order-md-6 { order: 6; }\n  .order-md-7 { order: 7; }\n  .order-md-8 { order: 8; }\n  .order-md-9 { order: 9; }\n  .order-md-10 { order: 10; }\n  .order-md-11 { order: 11; }\n  .order-md-12 { order: 12; }\n  .offset-md-0 { margin-left: 0px; }\n  .offset-md-1 { margin-left: 8.33333%; }\n  .offset-md-2 { margin-left: 16.6667%; }\n  .offset-md-3 { margin-left: 25%; }\n  .offset-md-4 { margin-left: 33.3333%; }\n  .offset-md-5 { margin-left: 41.6667%; }\n  .offset-md-6 { margin-left: 50%; }\n  .offset-md-7 { margin-left: 58.3333%; }\n  .offset-md-8 { margin-left: 66.6667%; }\n  .offset-md-9 { margin-left: 75%; }\n  .offset-md-10 { margin-left: 83.3333%; }\n  .offset-md-11 { margin-left: 91.6667%; }\n}@media (min-width: 992px) {\n  .col-lg { flex-basis: 0px; flex-grow: 1; max-width: 100%; }\n  .col-lg-auto { flex: 0 0 auto; width: auto; max-width: none; }\n  .col-lg-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }\n  .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }\n  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }\n  .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }\n  .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }\n  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }\n  .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }\n  .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }\n  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }\n  .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }\n  .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }\n  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }\n  .order-lg-first { order: -1; }\n  .order-lg-last { order: 13; }\n  .order-lg-0 { order: 0; }\n  .order-lg-1 { order: 1; }\n  .order-lg-2 { order: 2; }\n  .order-lg-3 { order: 3; }\n  .order-lg-4 { order: 4; }\n  .order-lg-5 { order: 5; }\n  .order-lg-6 { order: 6; }\n  .order-lg-7 { order: 7; }\n  .order-lg-8 { order: 8; }\n  .order-lg-9 { order: 9; }\n  .order-lg-10 { order: 10; }\n  .order-lg-11 { order: 11; }\n  .order-lg-12 { order: 12; }\n  .offset-lg-0 { margin-left: 0px; }\n  .offset-lg-1 { margin-left: 8.33333%; }\n  .offset-lg-2 { margin-left: 16.6667%; }\n  .offset-lg-3 { margin-left: 25%; }\n  .offset-lg-4 { margin-left: 33.3333%; }\n  .offset-lg-5 { margin-left: 41.6667%; }\n  .offset-lg-6 { margin-left: 50%; }\n  .offset-lg-7 { margin-left: 58.3333%; }\n  .offset-lg-8 { margin-left: 66.6667%; }\n  .offset-lg-9 { margin-left: 75%; }\n  .offset-lg-10 { margin-left: 83.3333%; }\n  .offset-lg-11 { margin-left: 91.6667%; }\n}@media (min-width: 1200px) {\n  .col-xl { flex-basis: 0px; flex-grow: 1; max-width: 100%; }\n  .col-xl-auto { flex: 0 0 auto; width: auto; max-width: none; }\n  .col-xl-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }\n  .col-xl-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }\n  .col-xl-3 { flex: 0 0 25%; max-width: 25%; }\n  .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }\n  .col-xl-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }\n  .col-xl-6 { flex: 0 0 50%; max-width: 50%; }\n  .col-xl-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }\n  .col-xl-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }\n  .col-xl-9 { flex: 0 0 75%; max-width: 75%; }\n  .col-xl-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }\n  .col-xl-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }\n  .col-xl-12 { flex: 0 0 100%; max-width: 100%; }\n  .order-xl-first { order: -1; }\n  .order-xl-last { order: 13; }\n  .order-xl-0 { order: 0; }\n  .order-xl-1 { order: 1; }\n  .order-xl-2 { order: 2; }\n  .order-xl-3 { order: 3; }\n  .order-xl-4 { order: 4; }\n  .order-xl-5 { order: 5; }\n  .order-xl-6 { order: 6; }\n  .order-xl-7 { order: 7; }\n  .order-xl-8 { order: 8; }\n  .order-xl-9 { order: 9; }\n  .order-xl-10 { order: 10; }\n  .order-xl-11 { order: 11; }\n  .order-xl-12 { order: 12; }\n  .offset-xl-0 { margin-left: 0px; }\n  .offset-xl-1 { margin-left: 8.33333%; }\n  .offset-xl-2 { margin-left: 16.6667%; }\n  .offset-xl-3 { margin-left: 25%; }\n  .offset-xl-4 { margin-left: 33.3333%; }\n  .offset-xl-5 { margin-left: 41.6667%; }\n  .offset-xl-6 { margin-left: 50%; }\n  .offset-xl-7 { margin-left: 58.3333%; }\n  .offset-xl-8 { margin-left: 66.6667%; }\n  .offset-xl-9 { margin-left: 75%; }\n  .offset-xl-10 { margin-left: 83.3333%; }\n  .offset-xl-11 { margin-left: 91.6667%; }\n}.table { width: 100%; margin-bottom: 1rem; background-color: transparent; }.table td, .table th { padding: 0.75rem; vertical-align: top; border-top: 1px solid rgb(222, 226, 230); }.table thead th { vertical-align: bottom; border-bottom: 2px solid rgb(222, 226, 230); }.table tbody + tbody { border-top: 2px solid rgb(222, 226, 230); }.table .table { background-color: rgb(255, 255, 255); }.table-sm td, .table-sm th { padding: 0.3rem; }.table-bordered { border: 1px solid rgb(222, 226, 230); }.table-bordered td, .table-bordered th { border: 1px solid rgb(222, 226, 230); }.table-bordered thead td, .table-bordered thead th { border-bottom-width: 2px; }.table-borderless tbody + tbody, .table-borderless td, .table-borderless th, .table-borderless thead th { border: 0px; }.table-striped tbody tr:nth-of-type(2n+1) { background-color: rgba(0, 0, 0, 0.05); }.table-hover tbody tr:hover { background-color: rgba(0, 0, 0, 0.075); }.table-primary, .table-primary > td, .table-primary > th { background-color: rgb(184, 218, 255); }.table-hover .table-primary:hover { background-color: rgb(159, 205, 255); }.table-hover .table-primary:hover > td, .table-hover .table-primary:hover > th { background-color: rgb(159, 205, 255); }.table-secondary, .table-secondary > td, .table-secondary > th { background-color: rgb(214, 216, 219); }.table-hover .table-secondary:hover { background-color: rgb(200, 203, 207); }.table-hover .table-secondary:hover > td, .table-hover .table-secondary:hover > th { background-color: rgb(200, 203, 207); }.table-success, .table-success > td, .table-success > th { background-color: rgb(195, 230, 203); }.table-hover .table-success:hover { background-color: rgb(177, 223, 187); }.table-hover .table-success:hover > td, .table-hover .table-success:hover > th { background-color: rgb(177, 223, 187); }.table-info, .table-info > td, .table-info > th { background-color: rgb(190, 229, 235); }.table-hover .table-info:hover { background-color: rgb(171, 221, 229); }.table-hover .table-info:hover > td, .table-hover .table-info:hover > th { background-color: rgb(171, 221, 229); }.table-warning, .table-warning > td, .table-warning > th { background-color: rgb(255, 238, 186); }.table-hover .table-warning:hover { background-color: rgb(255, 232, 161); }.table-hover .table-warning:hover > td, .table-hover .table-warning:hover > th { background-color: rgb(255, 232, 161); }.table-danger, .table-danger > td, .table-danger > th { background-color: rgb(245, 198, 203); }.table-hover .table-danger:hover { background-color: rgb(241, 176, 183); }.table-hover .table-danger:hover > td, .table-hover .table-danger:hover > th { background-color: rgb(241, 176, 183); }.table-light, .table-light > td, .table-light > th { background-color: rgb(253, 253, 254); }.table-hover .table-light:hover { background-color: rgb(236, 236, 246); }.table-hover .table-light:hover > td, .table-hover .table-light:hover > th { background-color: rgb(236, 236, 246); }.table-dark, .table-dark > td, .table-dark > th { background-color: rgb(198, 200, 202); }.table-hover .table-dark:hover { background-color: rgb(185, 187, 190); }.table-hover .table-dark:hover > td, .table-hover .table-dark:hover > th { background-color: rgb(185, 187, 190); }.table-active, .table-active > td, .table-active > th { background-color: rgba(0, 0, 0, 0.075); }.table-hover .table-active:hover { background-color: rgba(0, 0, 0, 0.075); }.table-hover .table-active:hover > td, .table-hover .table-active:hover > th { background-color: rgba(0, 0, 0, 0.075); }.table .thead-dark th { color: rgb(255, 255, 255); background-color: rgb(33, 37, 41); border-color: rgb(50, 56, 62); }.table .thead-light th { color: rgb(73, 80, 87); background-color: rgb(233, 236, 239); border-color: rgb(222, 226, 230); }.table-dark { color: rgb(255, 255, 255); background-color: rgb(33, 37, 41); }.table-dark td, .table-dark th, .table-dark thead th { border-color: rgb(50, 56, 62); }.table-dark.table-bordered { border: 0px; }.table-dark.table-striped tbody tr:nth-of-type(2n+1) { background-color: rgba(255, 255, 255, 0.05); }.table-dark.table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.075); }@media (max-width: 575.98px) {\n  .table-responsive-sm { display: block; width: 100%; overflow-x: auto; }\n  .table-responsive-sm > .table-bordered { border: 0px; }\n}@media (max-width: 767.98px) {\n  .table-responsive-md { display: block; width: 100%; overflow-x: auto; }\n  .table-responsive-md > .table-bordered { border: 0px; }\n}@media (max-width: 991.98px) {\n  .table-responsive-lg { display: block; width: 100%; overflow-x: auto; }\n  .table-responsive-lg > .table-bordered { border: 0px; }\n}@media (max-width: 1199.98px) {\n  .table-responsive-xl { display: block; width: 100%; overflow-x: auto; }\n  .table-responsive-xl > .table-bordered { border: 0px; }\n}.table-responsive { display: block; width: 100%; overflow-x: auto; }.table-responsive > .table-bordered { border: 0px; }.form-control { display: block; width: 100%; height: calc(2.25rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgb(206, 212, 218); border-radius: 0.25rem; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; }@media not all {\n  .form-control { transition: none 0s ease 0s; }\n}.form-control:focus { color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); border-color: rgb(128, 189, 255); outline: 0px; box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.form-control::-webkit-input-placeholder { color: rgb(108, 117, 125); opacity: 1; }.form-control::placeholder { color: rgb(108, 117, 125); opacity: 1; }.form-control:disabled, .form-control[readonly] { background-color: rgb(233, 236, 239); opacity: 1; }.form-control-file, .form-control-range { display: block; width: 100%; }.col-form-label { padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); margin-bottom: 0px; font-size: inherit; line-height: 1.5; }.col-form-label-lg { padding-top: calc(0.5rem + 1px); padding-bottom: calc(0.5rem + 1px); font-size: 1.25rem; line-height: 1.5; }.col-form-label-sm { padding-top: calc(0.25rem + 1px); padding-bottom: calc(0.25rem + 1px); font-size: 0.875rem; line-height: 1.5; }.form-control-plaintext { display: block; width: 100%; padding-top: 0.375rem; padding-bottom: 0.375rem; margin-bottom: 0px; line-height: 1.5; color: rgb(33, 37, 41); background-color: transparent; border-style: solid; border-color: transparent; border-image: initial; border-width: 1px 0px; }.form-control-plaintext.form-control-lg, .form-control-plaintext.form-control-sm { padding-right: 0px; padding-left: 0px; }.form-control-sm { height: calc(1.8125rem + 2px); padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }.form-control-lg { height: calc(2.875rem + 2px); padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; }select.form-control[multiple], select.form-control[size] { height: auto; }textarea.form-control { height: auto; }.form-group { margin-bottom: 1rem; }.form-text { display: block; margin-top: 0.25rem; }.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }.form-row > .col, .form-row > [class*=\"col-\"] { padding-right: 5px; padding-left: 5px; }.form-check { position: relative; display: block; padding-left: 1.25rem; }.form-check-input { position: absolute; margin-top: 0.3rem; margin-left: -1.25rem; }.form-check-input:disabled ~ .form-check-label { color: rgb(108, 117, 125); }.form-check-label { margin-bottom: 0px; }.form-check-inline { display: inline-flex; align-items: center; padding-left: 0px; margin-right: 0.75rem; }.form-check-inline .form-check-input { position: static; margin-top: 0px; margin-right: 0.3125rem; margin-left: 0px; }.valid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 80%; color: rgb(40, 167, 69); }.valid-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; font-size: 0.875rem; line-height: 1.5; color: rgb(255, 255, 255); background-color: rgba(40, 167, 69, 0.9); border-radius: 0.25rem; }.custom-select.is-valid, .form-control.is-valid, .was-validated .custom-select:valid, .was-validated .form-control:valid { border-color: rgb(40, 167, 69); }.custom-select.is-valid:focus, .form-control.is-valid:focus, .was-validated .custom-select:valid:focus, .was-validated .form-control:valid:focus { border-color: rgb(40, 167, 69); box-shadow: rgba(40, 167, 69, 0.25) 0px 0px 0px 0.2rem; }.custom-select.is-valid ~ .valid-feedback, .custom-select.is-valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback, .form-control.is-valid ~ .valid-tooltip, .was-validated .custom-select:valid ~ .valid-feedback, .was-validated .custom-select:valid ~ .valid-tooltip, .was-validated .form-control:valid ~ .valid-feedback, .was-validated .form-control:valid ~ .valid-tooltip { display: block; }.form-control-file.is-valid ~ .valid-feedback, .form-control-file.is-valid ~ .valid-tooltip, .was-validated .form-control-file:valid ~ .valid-feedback, .was-validated .form-control-file:valid ~ .valid-tooltip { display: block; }.form-check-input.is-valid ~ .form-check-label, .was-validated .form-check-input:valid ~ .form-check-label { color: rgb(40, 167, 69); }.form-check-input.is-valid ~ .valid-feedback, .form-check-input.is-valid ~ .valid-tooltip, .was-validated .form-check-input:valid ~ .valid-feedback, .was-validated .form-check-input:valid ~ .valid-tooltip { display: block; }.custom-control-input.is-valid ~ .custom-control-label, .was-validated .custom-control-input:valid ~ .custom-control-label { color: rgb(40, 167, 69); }.custom-control-input.is-valid ~ .custom-control-label::before, .was-validated .custom-control-input:valid ~ .custom-control-label::before { background-color: rgb(113, 221, 138); }.custom-control-input.is-valid ~ .valid-feedback, .custom-control-input.is-valid ~ .valid-tooltip, .was-validated .custom-control-input:valid ~ .valid-feedback, .was-validated .custom-control-input:valid ~ .valid-tooltip { display: block; }.custom-control-input.is-valid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:valid:checked ~ .custom-control-label::before { background-color: rgb(52, 206, 87); }.custom-control-input.is-valid:focus ~ .custom-control-label::before, .was-validated .custom-control-input:valid:focus ~ .custom-control-label::before { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(40, 167, 69, 0.25) 0px 0px 0px 0.2rem; }.custom-file-input.is-valid ~ .custom-file-label, .was-validated .custom-file-input:valid ~ .custom-file-label { border-color: rgb(40, 167, 69); }.custom-file-input.is-valid ~ .custom-file-label::after, .was-validated .custom-file-input:valid ~ .custom-file-label::after { border-color: inherit; }.custom-file-input.is-valid ~ .valid-feedback, .custom-file-input.is-valid ~ .valid-tooltip, .was-validated .custom-file-input:valid ~ .valid-feedback, .was-validated .custom-file-input:valid ~ .valid-tooltip { display: block; }.custom-file-input.is-valid:focus ~ .custom-file-label, .was-validated .custom-file-input:valid:focus ~ .custom-file-label { box-shadow: rgba(40, 167, 69, 0.25) 0px 0px 0px 0.2rem; }.invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 80%; color: rgb(220, 53, 69); }.invalid-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; font-size: 0.875rem; line-height: 1.5; color: rgb(255, 255, 255); background-color: rgba(220, 53, 69, 0.9); border-radius: 0.25rem; }.custom-select.is-invalid, .form-control.is-invalid, .was-validated .custom-select:invalid, .was-validated .form-control:invalid { border-color: rgb(220, 53, 69); }.custom-select.is-invalid:focus, .form-control.is-invalid:focus, .was-validated .custom-select:invalid:focus, .was-validated .form-control:invalid:focus { border-color: rgb(220, 53, 69); box-shadow: rgba(220, 53, 69, 0.25) 0px 0px 0px 0.2rem; }.custom-select.is-invalid ~ .invalid-feedback, .custom-select.is-invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback, .form-control.is-invalid ~ .invalid-tooltip, .was-validated .custom-select:invalid ~ .invalid-feedback, .was-validated .custom-select:invalid ~ .invalid-tooltip, .was-validated .form-control:invalid ~ .invalid-feedback, .was-validated .form-control:invalid ~ .invalid-tooltip { display: block; }.form-control-file.is-invalid ~ .invalid-feedback, .form-control-file.is-invalid ~ .invalid-tooltip, .was-validated .form-control-file:invalid ~ .invalid-feedback, .was-validated .form-control-file:invalid ~ .invalid-tooltip { display: block; }.form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label { color: rgb(220, 53, 69); }.form-check-input.is-invalid ~ .invalid-feedback, .form-check-input.is-invalid ~ .invalid-tooltip, .was-validated .form-check-input:invalid ~ .invalid-feedback, .was-validated .form-check-input:invalid ~ .invalid-tooltip { display: block; }.custom-control-input.is-invalid ~ .custom-control-label, .was-validated .custom-control-input:invalid ~ .custom-control-label { color: rgb(220, 53, 69); }.custom-control-input.is-invalid ~ .custom-control-label::before, .was-validated .custom-control-input:invalid ~ .custom-control-label::before { background-color: rgb(239, 162, 169); }.custom-control-input.is-invalid ~ .invalid-feedback, .custom-control-input.is-invalid ~ .invalid-tooltip, .was-validated .custom-control-input:invalid ~ .invalid-feedback, .was-validated .custom-control-input:invalid ~ .invalid-tooltip { display: block; }.custom-control-input.is-invalid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before { background-color: rgb(228, 96, 109); }.custom-control-input.is-invalid:focus ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(220, 53, 69, 0.25) 0px 0px 0px 0.2rem; }.custom-file-input.is-invalid ~ .custom-file-label, .was-validated .custom-file-input:invalid ~ .custom-file-label { border-color: rgb(220, 53, 69); }.custom-file-input.is-invalid ~ .custom-file-label::after, .was-validated .custom-file-input:invalid ~ .custom-file-label::after { border-color: inherit; }.custom-file-input.is-invalid ~ .invalid-feedback, .custom-file-input.is-invalid ~ .invalid-tooltip, .was-validated .custom-file-input:invalid ~ .invalid-feedback, .was-validated .custom-file-input:invalid ~ .invalid-tooltip { display: block; }.custom-file-input.is-invalid:focus ~ .custom-file-label, .was-validated .custom-file-input:invalid:focus ~ .custom-file-label { box-shadow: rgba(220, 53, 69, 0.25) 0px 0px 0px 0.2rem; }.form-inline { display: flex; flex-flow: row wrap; align-items: center; }.form-inline .form-check { width: 100%; }@media (min-width: 576px) {\n  .form-inline label { display: flex; align-items: center; justify-content: center; margin-bottom: 0px; }\n  .form-inline .form-group { display: flex; flex: 0 0 auto; flex-flow: row wrap; align-items: center; margin-bottom: 0px; }\n  .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }\n  .form-inline .form-control-plaintext { display: inline-block; }\n  .form-inline .custom-select, .form-inline .input-group { width: auto; }\n  .form-inline .form-check { display: flex; align-items: center; justify-content: center; width: auto; padding-left: 0px; }\n  .form-inline .form-check-input { position: relative; margin-top: 0px; margin-right: 0.25rem; margin-left: 0px; }\n  .form-inline .custom-control { align-items: center; justify-content: center; }\n  .form-inline .custom-control-label { margin-bottom: 0px; }\n}.btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; user-select: none; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; }@media not all {\n  .btn { transition: none 0s ease 0s; }\n}.btn:focus, .btn:hover { text-decoration: none; }.btn.focus, .btn:focus { outline: 0px; box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.btn.disabled, .btn:disabled { opacity: 0.65; }.btn:not(:disabled):not(.disabled) { cursor: pointer; }a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; }.btn-primary { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.btn-primary:hover { color: rgb(255, 255, 255); background-color: rgb(0, 105, 217); border-color: rgb(0, 98, 204); }.btn-primary.focus, .btn-primary:focus { box-shadow: rgba(0, 123, 255, 0.5) 0px 0px 0px 0.2rem; }.btn-primary.disabled, .btn-primary:disabled { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(0, 98, 204); border-color: rgb(0, 92, 191); }.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus { box-shadow: rgba(0, 123, 255, 0.5) 0px 0px 0px 0.2rem; }.btn-secondary { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); border-color: rgb(108, 117, 125); }.btn-secondary:hover { color: rgb(255, 255, 255); background-color: rgb(90, 98, 104); border-color: rgb(84, 91, 98); }.btn-secondary.focus, .btn-secondary:focus { box-shadow: rgba(108, 117, 125, 0.5) 0px 0px 0px 0.2rem; }.btn-secondary.disabled, .btn-secondary:disabled { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); border-color: rgb(108, 117, 125); }.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(84, 91, 98); border-color: rgb(78, 85, 91); }.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus { box-shadow: rgba(108, 117, 125, 0.5) 0px 0px 0px 0.2rem; }.btn-success { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69); }.btn-success:hover { color: rgb(255, 255, 255); background-color: rgb(33, 136, 56); border-color: rgb(30, 126, 52); }.btn-success.focus, .btn-success:focus { box-shadow: rgba(40, 167, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-success.disabled, .btn-success:disabled { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69); }.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(30, 126, 52); border-color: rgb(28, 116, 48); }.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show > .btn-success.dropdown-toggle:focus { box-shadow: rgba(40, 167, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-info { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); border-color: rgb(23, 162, 184); }.btn-info:hover { color: rgb(255, 255, 255); background-color: rgb(19, 132, 150); border-color: rgb(17, 122, 139); }.btn-info.focus, .btn-info:focus { box-shadow: rgba(23, 162, 184, 0.5) 0px 0px 0px 0.2rem; }.btn-info.disabled, .btn-info:disabled { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); border-color: rgb(23, 162, 184); }.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show > .btn-info.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(17, 122, 139); border-color: rgb(16, 112, 127); }.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, .show > .btn-info.dropdown-toggle:focus { box-shadow: rgba(23, 162, 184, 0.5) 0px 0px 0px 0.2rem; }.btn-warning { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); border-color: rgb(255, 193, 7); }.btn-warning:hover { color: rgb(33, 37, 41); background-color: rgb(224, 168, 0); border-color: rgb(211, 158, 0); }.btn-warning.focus, .btn-warning:focus { box-shadow: rgba(255, 193, 7, 0.5) 0px 0px 0px 0.2rem; }.btn-warning.disabled, .btn-warning:disabled { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); border-color: rgb(255, 193, 7); }.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show > .btn-warning.dropdown-toggle { color: rgb(33, 37, 41); background-color: rgb(211, 158, 0); border-color: rgb(198, 149, 0); }.btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus, .show > .btn-warning.dropdown-toggle:focus { box-shadow: rgba(255, 193, 7, 0.5) 0px 0px 0px 0.2rem; }.btn-danger { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); border-color: rgb(220, 53, 69); }.btn-danger:hover { color: rgb(255, 255, 255); background-color: rgb(200, 35, 51); border-color: rgb(189, 33, 48); }.btn-danger.focus, .btn-danger:focus { box-shadow: rgba(220, 53, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-danger.disabled, .btn-danger:disabled { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); border-color: rgb(220, 53, 69); }.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(189, 33, 48); border-color: rgb(178, 31, 45); }.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-danger.dropdown-toggle:focus { box-shadow: rgba(220, 53, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-light { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); border-color: rgb(248, 249, 250); }.btn-light:hover { color: rgb(33, 37, 41); background-color: rgb(226, 230, 234); border-color: rgb(218, 224, 229); }.btn-light.focus, .btn-light:focus { box-shadow: rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem; }.btn-light.disabled, .btn-light:disabled { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); border-color: rgb(248, 249, 250); }.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle { color: rgb(33, 37, 41); background-color: rgb(218, 224, 229); border-color: rgb(211, 217, 223); }.btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus, .show > .btn-light.dropdown-toggle:focus { box-shadow: rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem; }.btn-dark { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); border-color: rgb(52, 58, 64); }.btn-dark:hover { color: rgb(255, 255, 255); background-color: rgb(35, 39, 43); border-color: rgb(29, 33, 36); }.btn-dark.focus, .btn-dark:focus { box-shadow: rgba(52, 58, 64, 0.5) 0px 0px 0px 0.2rem; }.btn-dark.disabled, .btn-dark:disabled { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); border-color: rgb(52, 58, 64); }.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, .show > .btn-dark.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(29, 33, 36); border-color: rgb(23, 26, 29); }.btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-dark.dropdown-toggle:focus { box-shadow: rgba(52, 58, 64, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-primary { color: rgb(0, 123, 255); background-color: transparent; background-image: none; border-color: rgb(0, 123, 255); }.btn-outline-primary:hover { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.btn-outline-primary.focus, .btn-outline-primary:focus { box-shadow: rgba(0, 123, 255, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-primary.disabled, .btn-outline-primary:disabled { color: rgb(0, 123, 255); background-color: transparent; }.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: rgba(0, 123, 255, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-secondary { color: rgb(108, 117, 125); background-color: transparent; background-image: none; border-color: rgb(108, 117, 125); }.btn-outline-secondary:hover { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); border-color: rgb(108, 117, 125); }.btn-outline-secondary.focus, .btn-outline-secondary:focus { box-shadow: rgba(108, 117, 125, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-secondary.disabled, .btn-outline-secondary:disabled { color: rgb(108, 117, 125); background-color: transparent; }.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show > .btn-outline-secondary.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); border-color: rgb(108, 117, 125); }.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus { box-shadow: rgba(108, 117, 125, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-success { color: rgb(40, 167, 69); background-color: transparent; background-image: none; border-color: rgb(40, 167, 69); }.btn-outline-success:hover { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69); }.btn-outline-success.focus, .btn-outline-success:focus { box-shadow: rgba(40, 167, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-success.disabled, .btn-outline-success:disabled { color: rgb(40, 167, 69); background-color: transparent; }.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, .show > .btn-outline-success.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69); }.btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-success.dropdown-toggle:focus { box-shadow: rgba(40, 167, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-info { color: rgb(23, 162, 184); background-color: transparent; background-image: none; border-color: rgb(23, 162, 184); }.btn-outline-info:hover { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); border-color: rgb(23, 162, 184); }.btn-outline-info.focus, .btn-outline-info:focus { box-shadow: rgba(23, 162, 184, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-info.disabled, .btn-outline-info:disabled { color: rgb(23, 162, 184); background-color: transparent; }.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, .show > .btn-outline-info.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); border-color: rgb(23, 162, 184); }.btn-outline-info:not(:disabled):not(.disabled).active:focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-info.dropdown-toggle:focus { box-shadow: rgba(23, 162, 184, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-warning { color: rgb(255, 193, 7); background-color: transparent; background-image: none; border-color: rgb(255, 193, 7); }.btn-outline-warning:hover { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); border-color: rgb(255, 193, 7); }.btn-outline-warning.focus, .btn-outline-warning:focus { box-shadow: rgba(255, 193, 7, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-warning.disabled, .btn-outline-warning:disabled { color: rgb(255, 193, 7); background-color: transparent; }.btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active, .show > .btn-outline-warning.dropdown-toggle { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); border-color: rgb(255, 193, 7); }.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-warning.dropdown-toggle:focus { box-shadow: rgba(255, 193, 7, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-danger { color: rgb(220, 53, 69); background-color: transparent; background-image: none; border-color: rgb(220, 53, 69); }.btn-outline-danger:hover { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); border-color: rgb(220, 53, 69); }.btn-outline-danger.focus, .btn-outline-danger:focus { box-shadow: rgba(220, 53, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-danger.disabled, .btn-outline-danger:disabled { color: rgb(220, 53, 69); background-color: transparent; }.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, .show > .btn-outline-danger.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); border-color: rgb(220, 53, 69); }.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-danger.dropdown-toggle:focus { box-shadow: rgba(220, 53, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-light { color: rgb(248, 249, 250); background-color: transparent; background-image: none; border-color: rgb(248, 249, 250); }.btn-outline-light:hover { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); border-color: rgb(248, 249, 250); }.btn-outline-light.focus, .btn-outline-light:focus { box-shadow: rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-light.disabled, .btn-outline-light:disabled { color: rgb(248, 249, 250); background-color: transparent; }.btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, .show > .btn-outline-light.dropdown-toggle { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); border-color: rgb(248, 249, 250); }.btn-outline-light:not(:disabled):not(.disabled).active:focus, .btn-outline-light:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-light.dropdown-toggle:focus { box-shadow: rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-dark { color: rgb(52, 58, 64); background-color: transparent; background-image: none; border-color: rgb(52, 58, 64); }.btn-outline-dark:hover { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); border-color: rgb(52, 58, 64); }.btn-outline-dark.focus, .btn-outline-dark:focus { box-shadow: rgba(52, 58, 64, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-dark.disabled, .btn-outline-dark:disabled { color: rgb(52, 58, 64); background-color: transparent; }.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, .show > .btn-outline-dark.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); border-color: rgb(52, 58, 64); }.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-dark.dropdown-toggle:focus { box-shadow: rgba(52, 58, 64, 0.5) 0px 0px 0px 0.2rem; }.btn-link { font-weight: 400; color: rgb(0, 123, 255); background-color: transparent; }.btn-link:hover { color: rgb(0, 86, 179); text-decoration: underline; background-color: transparent; border-color: transparent; }.btn-link.focus, .btn-link:focus { text-decoration: underline; border-color: transparent; box-shadow: none; }.btn-link.disabled, .btn-link:disabled { color: rgb(108, 117, 125); pointer-events: none; }.btn-group-lg > .btn, .btn-lg { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; }.btn-group-sm > .btn, .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }.btn-block { display: block; width: 100%; }.btn-block + .btn-block { margin-top: 0.5rem; }input[type=\"button\"].btn-block, input[type=\"reset\"].btn-block, input[type=\"submit\"].btn-block { width: 100%; }.fade { transition: opacity 0.15s linear 0s; }@media not all {\n  .fade { transition: none 0s ease 0s; }\n}.fade:not(.show) { opacity: 0; }.collapse:not(.show) { display: none; }.collapsing { position: relative; height: 0px; overflow: hidden; transition: height 0.35s ease 0s; }@media not all {\n  .collapsing { transition: none 0s ease 0s; }\n}.dropdown, .dropleft, .dropright, .dropup { position: relative; }.dropdown-toggle::after { display: inline-block; width: 0px; height: 0px; margin-left: 0.255em; vertical-align: 0.255em; content: \"\"; border-width: 0.3em 0.3em 0px; border-top-style: solid; border-top-color: initial; border-right-style: solid; border-right-color: transparent; border-bottom-style: initial; border-bottom-color: initial; border-left-style: solid; border-left-color: transparent; }.dropdown-toggle:empty::after { margin-left: 0px; }.dropdown-menu { position: absolute; top: 100%; left: 0px; z-index: 1000; display: none; float: left; min-width: 10rem; padding: 0.5rem 0px; margin: 0.125rem 0px 0px; font-size: 1rem; color: rgb(33, 37, 41); text-align: left; list-style: none; background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; }.dropdown-menu-right { right: 0px; left: auto; }.dropup .dropdown-menu { top: auto; bottom: 100%; margin-top: 0px; margin-bottom: 0.125rem; }.dropup .dropdown-toggle::after { display: inline-block; width: 0px; height: 0px; margin-left: 0.255em; vertical-align: 0.255em; content: \"\"; border-width: 0px 0.3em 0.3em; border-top-style: initial; border-top-color: initial; border-right-style: solid; border-right-color: transparent; border-bottom-style: solid; border-bottom-color: initial; border-left-style: solid; border-left-color: transparent; }.dropup .dropdown-toggle:empty::after { margin-left: 0px; }.dropright .dropdown-menu { top: 0px; right: auto; left: 100%; margin-top: 0px; margin-left: 0.125rem; }.dropright .dropdown-toggle::after { display: inline-block; width: 0px; height: 0px; margin-left: 0.255em; vertical-align: 0.255em; content: \"\"; border-width: 0.3em 0px 0.3em 0.3em; border-top-style: solid; border-top-color: transparent; border-right-style: initial; border-right-color: initial; border-bottom-style: solid; border-bottom-color: transparent; border-left-style: solid; border-left-color: initial; }.dropright .dropdown-toggle:empty::after { margin-left: 0px; }.dropright .dropdown-toggle::after { vertical-align: 0px; }.dropleft .dropdown-menu { top: 0px; right: 100%; left: auto; margin-top: 0px; margin-right: 0.125rem; }.dropleft .dropdown-toggle::after { display: inline-block; width: 0px; height: 0px; margin-left: 0.255em; vertical-align: 0.255em; content: \"\"; }.dropleft .dropdown-toggle::after { display: none; }.dropleft .dropdown-toggle::before { display: inline-block; width: 0px; height: 0px; margin-right: 0.255em; vertical-align: 0.255em; content: \"\"; border-top: 0.3em solid transparent; border-right: 0.3em solid; border-bottom: 0.3em solid transparent; }.dropleft .dropdown-toggle:empty::after { margin-left: 0px; }.dropleft .dropdown-toggle::before { vertical-align: 0px; }.dropdown-menu[x-placement^=\"bottom\"], .dropdown-menu[x-placement^=\"left\"], .dropdown-menu[x-placement^=\"right\"], .dropdown-menu[x-placement^=\"top\"] { right: auto; bottom: auto; }.dropdown-divider { height: 0px; margin: 0.5rem 0px; overflow: hidden; border-top: 1px solid rgb(233, 236, 239); }.dropdown-item { display: block; width: 100%; padding: 0.25rem 1.5rem; clear: both; font-weight: 400; color: rgb(33, 37, 41); text-align: inherit; white-space: nowrap; background-color: transparent; border: 0px; }.dropdown-item:focus, .dropdown-item:hover { color: rgb(22, 24, 27); text-decoration: none; background-color: rgb(248, 249, 250); }.dropdown-item.active, .dropdown-item:active { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(0, 123, 255); }.dropdown-item.disabled, .dropdown-item:disabled { color: rgb(108, 117, 125); background-color: transparent; }.dropdown-menu.show { display: block; }.dropdown-header { display: block; padding: 0.5rem 1.5rem; margin-bottom: 0px; font-size: 0.875rem; color: rgb(108, 117, 125); white-space: nowrap; }.dropdown-item-text { display: block; padding: 0.25rem 1.5rem; color: rgb(33, 37, 41); }.btn-group, .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; }.btn-group-vertical > .btn, .btn-group > .btn { position: relative; flex: 0 1 auto; }.btn-group-vertical > .btn:hover, .btn-group > .btn:hover { z-index: 1; }.btn-group-vertical > .btn.active, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn:focus, .btn-group > .btn.active, .btn-group > .btn:active, .btn-group > .btn:focus { z-index: 1; }.btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group, .btn-group-vertical .btn + .btn, .btn-group-vertical .btn + .btn-group, .btn-group-vertical .btn-group + .btn, .btn-group-vertical .btn-group + .btn-group { margin-left: -1px; }.btn-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-start; }.btn-toolbar .input-group { width: auto; }.btn-group > .btn:first-child { margin-left: 0px; }.btn-group > .btn-group:not(:last-child) > .btn, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }.btn-group > .btn-group:not(:first-child) > .btn, .btn-group > .btn:not(:first-child) { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }.dropdown-toggle-split { padding-right: 0.5625rem; padding-left: 0.5625rem; }.dropdown-toggle-split::after, .dropright .dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after { margin-left: 0px; }.dropleft .dropdown-toggle-split::before { margin-right: 0px; }.btn-group-sm > .btn + .dropdown-toggle-split, .btn-sm + .dropdown-toggle-split { padding-right: 0.375rem; padding-left: 0.375rem; }.btn-group-lg > .btn + .dropdown-toggle-split, .btn-lg + .dropdown-toggle-split { padding-right: 0.75rem; padding-left: 0.75rem; }.btn-group-vertical { flex-direction: column; align-items: flex-start; justify-content: center; }.btn-group-vertical .btn, .btn-group-vertical .btn-group { width: 100%; }.btn-group-vertical > .btn + .btn, .btn-group-vertical > .btn + .btn-group, .btn-group-vertical > .btn-group + .btn, .btn-group-vertical > .btn-group + .btn-group { margin-top: -1px; margin-left: 0px; }.btn-group-vertical > .btn-group:not(:last-child) > .btn, .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle) { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; }.btn-group-vertical > .btn-group:not(:first-child) > .btn, .btn-group-vertical > .btn:not(:first-child) { border-top-left-radius: 0px; border-top-right-radius: 0px; }.btn-group-toggle > .btn, .btn-group-toggle > .btn-group > .btn { margin-bottom: 0px; }.btn-group-toggle > .btn input[type=\"checkbox\"], .btn-group-toggle > .btn input[type=\"radio\"], .btn-group-toggle > .btn-group > .btn input[type=\"checkbox\"], .btn-group-toggle > .btn-group > .btn input[type=\"radio\"] { position: absolute; clip: rect(0px, 0px, 0px, 0px); pointer-events: none; }.input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }.input-group > .custom-file, .input-group > .custom-select, .input-group > .form-control { position: relative; flex: 1 1 auto; width: 1%; margin-bottom: 0px; }.input-group > .custom-file + .custom-file, .input-group > .custom-file + .custom-select, .input-group > .custom-file + .form-control, .input-group > .custom-select + .custom-file, .input-group > .custom-select + .custom-select, .input-group > .custom-select + .form-control, .input-group > .form-control + .custom-file, .input-group > .form-control + .custom-select, .input-group > .form-control + .form-control { margin-left: -1px; }.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label, .input-group > .custom-select:focus, .input-group > .form-control:focus { z-index: 3; }.input-group > .custom-file .custom-file-input:focus { z-index: 4; }.input-group > .custom-select:not(:last-child), .input-group > .form-control:not(:last-child) { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }.input-group > .custom-select:not(:first-child), .input-group > .form-control:not(:first-child) { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }.input-group > .custom-file { display: flex; align-items: center; }.input-group > .custom-file:not(:last-child) .custom-file-label, .input-group > .custom-file:not(:last-child) .custom-file-label::after { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }.input-group > .custom-file:not(:first-child) .custom-file-label { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }.input-group-append, .input-group-prepend { display: flex; }.input-group-append .btn, .input-group-prepend .btn { position: relative; z-index: 2; }.input-group-append .btn + .btn, .input-group-append .btn + .input-group-text, .input-group-append .input-group-text + .btn, .input-group-append .input-group-text + .input-group-text, .input-group-prepend .btn + .btn, .input-group-prepend .btn + .input-group-text, .input-group-prepend .input-group-text + .btn, .input-group-prepend .input-group-text + .input-group-text { margin-left: -1px; }.input-group-prepend { margin-right: -1px; }.input-group-append { margin-left: -1px; }.input-group-text { display: flex; align-items: center; padding: 0.375rem 0.75rem; margin-bottom: 0px; font-size: 1rem; font-weight: 400; line-height: 1.5; color: rgb(73, 80, 87); text-align: center; white-space: nowrap; background-color: rgb(233, 236, 239); border: 1px solid rgb(206, 212, 218); border-radius: 0.25rem; }.input-group-text input[type=\"checkbox\"], .input-group-text input[type=\"radio\"] { margin-top: 0px; }.input-group-lg > .form-control, .input-group-lg > .input-group-append > .btn, .input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-prepend > .btn, .input-group-lg > .input-group-prepend > .input-group-text { height: calc(2.875rem + 2px); padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; }.input-group-sm > .form-control, .input-group-sm > .input-group-append > .btn, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-prepend > .input-group-text { height: calc(1.8125rem + 2px); padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child), .input-group > .input-group-append:not(:last-child) > .btn, .input-group > .input-group-append:not(:last-child) > .input-group-text, .input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }.input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child), .input-group > .input-group-prepend:not(:first-child) > .btn, .input-group > .input-group-prepend:not(:first-child) > .input-group-text { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }.custom-control { position: relative; display: block; min-height: 1.5rem; padding-left: 1.5rem; }.custom-control-inline { display: inline-flex; margin-right: 1rem; }.custom-control-input { position: absolute; z-index: -1; opacity: 0; }.custom-control-input:checked ~ .custom-control-label::before { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); }.custom-control-input:focus ~ .custom-control-label::before { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.custom-control-input:active ~ .custom-control-label::before { color: rgb(255, 255, 255); background-color: rgb(179, 215, 255); }.custom-control-input:disabled ~ .custom-control-label { color: rgb(108, 117, 125); }.custom-control-input:disabled ~ .custom-control-label::before { background-color: rgb(233, 236, 239); }.custom-control-label { position: relative; margin-bottom: 0px; }.custom-control-label::before { position: absolute; top: 0.25rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; pointer-events: none; content: \"\"; user-select: none; background-color: rgb(222, 226, 230); }.custom-control-label::after { position: absolute; top: 0.25rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; content: \"\"; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; }.custom-checkbox .custom-control-label::before { border-radius: 0.25rem; }.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: rgb(0, 123, 255); }.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E\"); }.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: rgb(0, 123, 255); }.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E\"); }.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(0, 123, 255, 0.5); }.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { background-color: rgba(0, 123, 255, 0.5); }.custom-radio .custom-control-label::before { border-radius: 50%; }.custom-radio .custom-control-input:checked ~ .custom-control-label::before { background-color: rgb(0, 123, 255); }.custom-radio .custom-control-input:checked ~ .custom-control-label::after { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E\"); }.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(0, 123, 255, 0.5); }.custom-select { display: inline-block; width: 100%; height: calc(2.25rem + 2px); padding: 0.375rem 1.75rem 0.375rem 0.75rem; line-height: 1.5; color: rgb(73, 80, 87); vertical-align: middle; background: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E\") right 0.75rem center / 8px 10px no-repeat rgb(255, 255, 255); border: 1px solid rgb(206, 212, 218); border-radius: 0.25rem; -webkit-appearance: none; }.custom-select:focus { border-color: rgb(128, 189, 255); outline: 0px; box-shadow: rgba(128, 189, 255, 0.5) 0px 0px 0px 0.2rem; }.custom-select[multiple], .custom-select[size]:not([size=\"1\"]) { height: auto; padding-right: 0.75rem; background-image: none; }.custom-select:disabled { color: rgb(108, 117, 125); background-color: rgb(233, 236, 239); }.custom-select-sm { height: calc(1.8125rem + 2px); padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 75%; }.custom-select-lg { height: calc(2.875rem + 2px); padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 125%; }.custom-file { position: relative; display: inline-block; width: 100%; height: calc(2.25rem + 2px); margin-bottom: 0px; }.custom-file-input { position: relative; z-index: 2; width: 100%; height: calc(2.25rem + 2px); margin: 0px; opacity: 0; }.custom-file-input:focus ~ .custom-file-label { border-color: rgb(128, 189, 255); box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.custom-file-input:focus ~ .custom-file-label::after { border-color: rgb(128, 189, 255); }.custom-file-input:disabled ~ .custom-file-label { background-color: rgb(233, 236, 239); }.custom-file-input:lang(en) ~ .custom-file-label::after { content: \"Browse\"; }.custom-file-label { position: absolute; top: 0px; right: 0px; left: 0px; z-index: 1; height: calc(2.25rem + 2px); padding: 0.375rem 0.75rem; line-height: 1.5; color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); border: 1px solid rgb(206, 212, 218); border-radius: 0.25rem; }.custom-file-label::after { position: absolute; top: 0px; right: 0px; bottom: 0px; z-index: 3; display: block; height: 2.25rem; padding: 0.375rem 0.75rem; line-height: 1.5; color: rgb(73, 80, 87); content: \"Browse\"; background-color: rgb(233, 236, 239); border-left: 1px solid rgb(206, 212, 218); border-radius: 0px 0.25rem 0.25rem 0px; }.custom-range { width: 100%; padding-left: 0px; background-color: transparent; -webkit-appearance: none; }.custom-range:focus { outline: 0px; }.custom-range:focus::-webkit-slider-thumb { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.custom-range::-webkit-slider-thumb { width: 1rem; height: 1rem; margin-top: -0.25rem; background-color: rgb(0, 123, 255); border: 0px; border-radius: 1rem; transition: background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; -webkit-appearance: none; }@media not all {\n  .custom-range::-webkit-slider-thumb { transition: none 0s ease 0s; }\n}.custom-range::-webkit-slider-thumb:active { background-color: rgb(179, 215, 255); }.custom-range::-webkit-slider-runnable-track { width: 100%; height: 0.5rem; color: transparent; cursor: pointer; background-color: rgb(222, 226, 230); border-color: transparent; border-radius: 1rem; }@media not all {\n}@media not all {\n}.custom-control-label::before, .custom-file-label, .custom-select { transition: background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; }@media not all {\n  .custom-control-label::before, .custom-file-label, .custom-select { transition: none 0s ease 0s; }\n}.nav { display: flex; flex-wrap: wrap; padding-left: 0px; margin-bottom: 0px; list-style: none; }.nav-link { display: block; padding: 0.5rem 1rem; }.nav-link:focus, .nav-link:hover { text-decoration: none; }.nav-link.disabled { color: rgb(108, 117, 125); }.nav-tabs { border-bottom: 1px solid rgb(222, 226, 230); }.nav-tabs .nav-item { margin-bottom: -1px; }.nav-tabs .nav-link { border: 1px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { border-color: rgb(233, 236, 239) rgb(233, 236, 239) rgb(222, 226, 230); }.nav-tabs .nav-link.disabled { color: rgb(108, 117, 125); background-color: transparent; border-color: transparent; }.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); border-color: rgb(222, 226, 230) rgb(222, 226, 230) rgb(255, 255, 255); }.nav-tabs .dropdown-menu { margin-top: -1px; border-top-left-radius: 0px; border-top-right-radius: 0px; }.nav-pills .nav-link { border-radius: 0.25rem; }.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); }.nav-fill .nav-item { flex: 1 1 auto; text-align: center; }.nav-justified .nav-item { flex-basis: 0px; flex-grow: 1; text-align: center; }.tab-content > .tab-pane { display: none; }.tab-content > .active { display: block; }.navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; }.navbar > .container, .navbar > .container-fluid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }.navbar-brand { display: inline-block; padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 1rem; font-size: 1.25rem; line-height: inherit; white-space: nowrap; }.navbar-brand:focus, .navbar-brand:hover { text-decoration: none; }.navbar-nav { display: flex; flex-direction: column; padding-left: 0px; margin-bottom: 0px; list-style: none; }.navbar-nav .nav-link { padding-right: 0px; padding-left: 0px; }.navbar-nav .dropdown-menu { position: static; float: none; }.navbar-text { display: inline-block; padding-top: 0.5rem; padding-bottom: 0.5rem; }.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; }.navbar-toggler { padding: 0.25rem 0.75rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; }.navbar-toggler:focus, .navbar-toggler:hover { text-decoration: none; }.navbar-toggler:not(:disabled):not(.disabled) { cursor: pointer; }.navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; content: \"\"; background: center center / 100% 100% no-repeat; }@media (max-width: 575.98px) {\n  .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { padding-right: 0px; padding-left: 0px; }\n}@media (min-width: 576px) {\n  .navbar-expand-sm { flex-flow: row nowrap; justify-content: flex-start; }\n  .navbar-expand-sm .navbar-nav { flex-direction: row; }\n  .navbar-expand-sm .navbar-nav .dropdown-menu { position: absolute; }\n  .navbar-expand-sm .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }\n  .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { flex-wrap: nowrap; }\n  .navbar-expand-sm .navbar-collapse { flex-basis: auto; display: flex !important; }\n  .navbar-expand-sm .navbar-toggler { display: none; }\n}@media (max-width: 767.98px) {\n  .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { padding-right: 0px; padding-left: 0px; }\n}@media (min-width: 768px) {\n  .navbar-expand-md { flex-flow: row nowrap; justify-content: flex-start; }\n  .navbar-expand-md .navbar-nav { flex-direction: row; }\n  .navbar-expand-md .navbar-nav .dropdown-menu { position: absolute; }\n  .navbar-expand-md .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }\n  .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { flex-wrap: nowrap; }\n  .navbar-expand-md .navbar-collapse { flex-basis: auto; display: flex !important; }\n  .navbar-expand-md .navbar-toggler { display: none; }\n}@media (max-width: 991.98px) {\n  .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { padding-right: 0px; padding-left: 0px; }\n}@media (min-width: 992px) {\n  .navbar-expand-lg { flex-flow: row nowrap; justify-content: flex-start; }\n  .navbar-expand-lg .navbar-nav { flex-direction: row; }\n  .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; }\n  .navbar-expand-lg .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }\n  .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { flex-wrap: nowrap; }\n  .navbar-expand-lg .navbar-collapse { flex-basis: auto; display: flex !important; }\n  .navbar-expand-lg .navbar-toggler { display: none; }\n}@media (max-width: 1199.98px) {\n  .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { padding-right: 0px; padding-left: 0px; }\n}@media (min-width: 1200px) {\n  .navbar-expand-xl { flex-flow: row nowrap; justify-content: flex-start; }\n  .navbar-expand-xl .navbar-nav { flex-direction: row; }\n  .navbar-expand-xl .navbar-nav .dropdown-menu { position: absolute; }\n  .navbar-expand-xl .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }\n  .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { flex-wrap: nowrap; }\n  .navbar-expand-xl .navbar-collapse { flex-basis: auto; display: flex !important; }\n  .navbar-expand-xl .navbar-toggler { display: none; }\n}.navbar-expand { flex-flow: row nowrap; justify-content: flex-start; }.navbar-expand > .container, .navbar-expand > .container-fluid { padding-right: 0px; padding-left: 0px; }.navbar-expand .navbar-nav { flex-direction: row; }.navbar-expand .navbar-nav .dropdown-menu { position: absolute; }.navbar-expand .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }.navbar-expand > .container, .navbar-expand > .container-fluid { flex-wrap: nowrap; }.navbar-expand .navbar-collapse { flex-basis: auto; display: flex !important; }.navbar-expand .navbar-toggler { display: none; }.navbar-light .navbar-brand { color: rgba(0, 0, 0, 0.9); }.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover { color: rgba(0, 0, 0, 0.9); }.navbar-light .navbar-nav .nav-link { color: rgba(0, 0, 0, 0.5); }.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { color: rgba(0, 0, 0, 0.7); }.navbar-light .navbar-nav .nav-link.disabled { color: rgba(0, 0, 0, 0.3); }.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link { color: rgba(0, 0, 0, 0.9); }.navbar-light .navbar-toggler { color: rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.1); }.navbar-light .navbar-toggler-icon { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E\"); }.navbar-light .navbar-text { color: rgba(0, 0, 0, 0.5); }.navbar-light .navbar-text a { color: rgba(0, 0, 0, 0.9); }.navbar-light .navbar-text a:focus, .navbar-light .navbar-text a:hover { color: rgba(0, 0, 0, 0.9); }.navbar-dark .navbar-brand { color: rgb(255, 255, 255); }.navbar-dark .navbar-brand:focus, .navbar-dark .navbar-brand:hover { color: rgb(255, 255, 255); }.navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.5); }.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover { color: rgba(255, 255, 255, 0.75); }.navbar-dark .navbar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.25); }.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link { color: rgb(255, 255, 255); }.navbar-dark .navbar-toggler { color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.1); }.navbar-dark .navbar-toggler-icon { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E\"); }.navbar-dark .navbar-text { color: rgba(255, 255, 255, 0.5); }.navbar-dark .navbar-text a { color: rgb(255, 255, 255); }.navbar-dark .navbar-text a:focus, .navbar-dark .navbar-text a:hover { color: rgb(255, 255, 255); }.card { position: relative; display: flex; flex-direction: column; min-width: 0px; word-wrap: break-word; background-color: rgb(255, 255, 255); background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem; }.card > hr { margin-right: 0px; margin-left: 0px; }.card > .list-group:first-child .list-group-item:first-child { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }.card > .list-group:last-child .list-group-item:last-child { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }.card-body { flex: 1 1 auto; padding: 1.25rem; }.card-title { margin-bottom: 0.75rem; }.card-subtitle { margin-top: -0.375rem; margin-bottom: 0px; }.card-text:last-child { margin-bottom: 0px; }.card-link:hover { text-decoration: none; }.card-link + .card-link { margin-left: 1.25rem; }.card-header { padding: 0.75rem 1.25rem; margin-bottom: 0px; background-color: rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.125); }.card-header:first-child { border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0px 0px; }.card-header + .list-group .list-group-item:first-child { border-top: 0px; }.card-footer { padding: 0.75rem 1.25rem; background-color: rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(0, 0, 0, 0.125); }.card-footer:last-child { border-radius: 0px 0px calc(0.25rem - 1px) calc(0.25rem - 1px); }.card-header-tabs { margin-right: -0.625rem; margin-bottom: -0.75rem; margin-left: -0.625rem; border-bottom: 0px; }.card-header-pills { margin-right: -0.625rem; margin-left: -0.625rem; }.card-img-overlay { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; padding: 1.25rem; }.card-img { width: 100%; border-radius: calc(0.25rem - 1px); }.card-img-top { width: 100%; border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); }.card-img-bottom { width: 100%; border-bottom-right-radius: calc(0.25rem - 1px); border-bottom-left-radius: calc(0.25rem - 1px); }.card-deck { display: flex; flex-direction: column; }.card-deck .card { margin-bottom: 15px; }@media (min-width: 576px) {\n  .card-deck { flex-flow: row wrap; margin-right: -15px; margin-left: -15px; }\n  .card-deck .card { display: flex; flex: 1 0 0%; flex-direction: column; margin-right: 15px; margin-bottom: 0px; margin-left: 15px; }\n}.card-group { display: flex; flex-direction: column; }.card-group > .card { margin-bottom: 15px; }@media (min-width: 576px) {\n  .card-group { flex-flow: row wrap; }\n  .card-group > .card { flex: 1 0 0%; margin-bottom: 0px; }\n  .card-group > .card + .card { margin-left: 0px; border-left: 0px; }\n  .card-group > .card:first-child { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }\n  .card-group > .card:first-child .card-header, .card-group > .card:first-child .card-img-top { border-top-right-radius: 0px; }\n  .card-group > .card:first-child .card-footer, .card-group > .card:first-child .card-img-bottom { border-bottom-right-radius: 0px; }\n  .card-group > .card:last-child { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }\n  .card-group > .card:last-child .card-header, .card-group > .card:last-child .card-img-top { border-top-left-radius: 0px; }\n  .card-group > .card:last-child .card-footer, .card-group > .card:last-child .card-img-bottom { border-bottom-left-radius: 0px; }\n  .card-group > .card:only-child { border-radius: 0.25rem; }\n  .card-group > .card:only-child .card-header, .card-group > .card:only-child .card-img-top { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }\n  .card-group > .card:only-child .card-footer, .card-group > .card:only-child .card-img-bottom { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }\n  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) { border-radius: 0px; }\n  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-footer, .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-header, .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom, .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-top { border-radius: 0px; }\n}.card-columns .card { margin-bottom: 0.75rem; }@media (min-width: 576px) {\n  .card-columns { column-count: 3; column-gap: 1.25rem; orphans: 1; widows: 1; }\n  .card-columns .card { display: inline-block; width: 100%; }\n}.accordion .card:not(:first-of-type):not(:last-of-type) { border-bottom: 0px; border-radius: 0px; }.accordion .card:not(:first-of-type) .card-header:first-child { border-radius: 0px; }.accordion .card:first-of-type { border-bottom: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; }.accordion .card:last-of-type { border-top-left-radius: 0px; border-top-right-radius: 0px; }.breadcrumb { display: flex; flex-wrap: wrap; padding: 0.75rem 1rem; margin-bottom: 1rem; list-style: none; background-color: rgb(233, 236, 239); border-radius: 0.25rem; }.breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; }.breadcrumb-item + .breadcrumb-item::before { display: inline-block; padding-right: 0.5rem; color: rgb(108, 117, 125); content: \"/\"; }.breadcrumb-item + .breadcrumb-item:hover::before { text-decoration: underline; }.breadcrumb-item + .breadcrumb-item:hover::before { text-decoration: none; }.breadcrumb-item.active { color: rgb(108, 117, 125); }.pagination { display: flex; padding-left: 0px; list-style: none; border-radius: 0.25rem; }.page-link { position: relative; display: block; padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; color: rgb(0, 123, 255); background-color: rgb(255, 255, 255); border: 1px solid rgb(222, 226, 230); }.page-link:hover { z-index: 2; color: rgb(0, 86, 179); text-decoration: none; background-color: rgb(233, 236, 239); border-color: rgb(222, 226, 230); }.page-link:focus { z-index: 2; outline: 0px; box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.page-link:not(:disabled):not(.disabled) { cursor: pointer; }.page-item:first-child .page-link { margin-left: 0px; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }.page-item:last-child .page-link { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }.page-item.active .page-link { z-index: 1; color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.page-item.disabled .page-link { color: rgb(108, 117, 125); pointer-events: none; cursor: auto; background-color: rgb(255, 255, 255); border-color: rgb(222, 226, 230); }.pagination-lg .page-link { padding: 0.75rem 1.5rem; font-size: 1.25rem; line-height: 1.5; }.pagination-lg .page-item:first-child .page-link { border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; }.pagination-lg .page-item:last-child .page-link { border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; }.pagination-sm .page-link { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; }.pagination-sm .page-item:first-child .page-link { border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; }.pagination-sm .page-item:last-child .page-link { border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; }.badge { display: inline-block; padding: 0.25em 0.4em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; }.badge:empty { display: none; }.btn .badge { position: relative; top: -1px; }.badge-pill { padding-right: 0.6em; padding-left: 0.6em; border-radius: 10rem; }.badge-primary { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); }.badge-primary[href]:focus, .badge-primary[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(0, 98, 204); }.badge-secondary { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); }.badge-secondary[href]:focus, .badge-secondary[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(84, 91, 98); }.badge-success { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); }.badge-success[href]:focus, .badge-success[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(30, 126, 52); }.badge-info { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); }.badge-info[href]:focus, .badge-info[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(17, 122, 139); }.badge-warning { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); }.badge-warning[href]:focus, .badge-warning[href]:hover { color: rgb(33, 37, 41); text-decoration: none; background-color: rgb(211, 158, 0); }.badge-danger { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); }.badge-danger[href]:focus, .badge-danger[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(189, 33, 48); }.badge-light { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); }.badge-light[href]:focus, .badge-light[href]:hover { color: rgb(33, 37, 41); text-decoration: none; background-color: rgb(218, 224, 229); }.badge-dark { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); }.badge-dark[href]:focus, .badge-dark[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(29, 33, 36); }.jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; background-color: rgb(233, 236, 239); border-radius: 0.3rem; }@media (min-width: 576px) {\n  .jumbotron { padding: 4rem 2rem; }\n}.jumbotron-fluid { padding-right: 0px; padding-left: 0px; border-radius: 0px; }.alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; }.alert-heading { color: inherit; }.alert-link { font-weight: 700; }.alert-dismissible { padding-right: 4rem; }.alert-dismissible .close { position: absolute; top: 0px; right: 0px; padding: 0.75rem 1.25rem; color: inherit; }.alert-primary { color: rgb(0, 64, 133); background-color: rgb(204, 229, 255); border-color: rgb(184, 218, 255); }.alert-primary hr { border-top-color: rgb(159, 205, 255); }.alert-primary .alert-link { color: rgb(0, 39, 82); }.alert-secondary { color: rgb(56, 61, 65); background-color: rgb(226, 227, 229); border-color: rgb(214, 216, 219); }.alert-secondary hr { border-top-color: rgb(200, 203, 207); }.alert-secondary .alert-link { color: rgb(32, 35, 38); }.alert-success { color: rgb(21, 87, 36); background-color: rgb(212, 237, 218); border-color: rgb(195, 230, 203); }.alert-success hr { border-top-color: rgb(177, 223, 187); }.alert-success .alert-link { color: rgb(11, 46, 19); }.alert-info { color: rgb(12, 84, 96); background-color: rgb(209, 236, 241); border-color: rgb(190, 229, 235); }.alert-info hr { border-top-color: rgb(171, 221, 229); }.alert-info .alert-link { color: rgb(6, 44, 51); }.alert-warning { color: rgb(133, 100, 4); background-color: rgb(255, 243, 205); border-color: rgb(255, 238, 186); }.alert-warning hr { border-top-color: rgb(255, 232, 161); }.alert-warning .alert-link { color: rgb(83, 63, 3); }.alert-danger { color: rgb(114, 28, 36); background-color: rgb(248, 215, 218); border-color: rgb(245, 198, 203); }.alert-danger hr { border-top-color: rgb(241, 176, 183); }.alert-danger .alert-link { color: rgb(73, 18, 23); }.alert-light { color: rgb(129, 129, 130); background-color: rgb(254, 254, 254); border-color: rgb(253, 253, 254); }.alert-light hr { border-top-color: rgb(236, 236, 246); }.alert-light .alert-link { color: rgb(104, 104, 104); }.alert-dark { color: rgb(27, 30, 33); background-color: rgb(214, 216, 217); border-color: rgb(198, 200, 202); }.alert-dark hr { border-top-color: rgb(185, 187, 190); }.alert-dark .alert-link { color: rgb(4, 5, 5); }@-webkit-keyframes progress-bar-stripes { \n  0% { background-position: 1rem 0px; }\n  100% { background-position: 0px 0px; }\n}@keyframes progress-bar-stripes { \n  0% { background-position: 1rem 0px; }\n  100% { background-position: 0px 0px; }\n}.progress { display: flex; height: 1rem; overflow: hidden; font-size: 0.75rem; background-color: rgb(233, 236, 239); border-radius: 0.25rem; }.progress-bar { display: flex; flex-direction: column; justify-content: center; color: rgb(255, 255, 255); text-align: center; white-space: nowrap; background-color: rgb(0, 123, 255); transition: width 0.6s ease 0s; }@media not all {\n  .progress-bar { transition: none 0s ease 0s; }\n}.progress-bar-striped { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem; }.progress-bar-animated { animation: progress-bar-stripes 1s linear 0s infinite normal none running; }.media { display: flex; align-items: flex-start; }.media-body { flex: 1 1 0%; }.list-group { display: flex; flex-direction: column; padding-left: 0px; margin-bottom: 0px; }.list-group-item-action { width: 100%; color: rgb(73, 80, 87); text-align: inherit; }.list-group-item-action:focus, .list-group-item-action:hover { color: rgb(73, 80, 87); text-decoration: none; background-color: rgb(248, 249, 250); }.list-group-item-action:active { color: rgb(33, 37, 41); background-color: rgb(233, 236, 239); }.list-group-item { position: relative; display: block; padding: 0.75rem 1.25rem; margin-bottom: -1px; background-color: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.125); }.list-group-item:first-child { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }.list-group-item:last-child { margin-bottom: 0px; border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }.list-group-item:focus, .list-group-item:hover { z-index: 1; text-decoration: none; }.list-group-item.disabled, .list-group-item:disabled { color: rgb(108, 117, 125); background-color: rgb(255, 255, 255); }.list-group-item.active { z-index: 2; color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.list-group-flush .list-group-item { border-right: 0px; border-left: 0px; border-radius: 0px; }.list-group-flush:first-child .list-group-item:first-child { border-top: 0px; }.list-group-flush:last-child .list-group-item:last-child { border-bottom: 0px; }.list-group-item-primary { color: rgb(0, 64, 133); background-color: rgb(184, 218, 255); }.list-group-item-primary.list-group-item-action:focus, .list-group-item-primary.list-group-item-action:hover { color: rgb(0, 64, 133); background-color: rgb(159, 205, 255); }.list-group-item-primary.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(0, 64, 133); border-color: rgb(0, 64, 133); }.list-group-item-secondary { color: rgb(56, 61, 65); background-color: rgb(214, 216, 219); }.list-group-item-secondary.list-group-item-action:focus, .list-group-item-secondary.list-group-item-action:hover { color: rgb(56, 61, 65); background-color: rgb(200, 203, 207); }.list-group-item-secondary.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(56, 61, 65); border-color: rgb(56, 61, 65); }.list-group-item-success { color: rgb(21, 87, 36); background-color: rgb(195, 230, 203); }.list-group-item-success.list-group-item-action:focus, .list-group-item-success.list-group-item-action:hover { color: rgb(21, 87, 36); background-color: rgb(177, 223, 187); }.list-group-item-success.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(21, 87, 36); border-color: rgb(21, 87, 36); }.list-group-item-info { color: rgb(12, 84, 96); background-color: rgb(190, 229, 235); }.list-group-item-info.list-group-item-action:focus, .list-group-item-info.list-group-item-action:hover { color: rgb(12, 84, 96); background-color: rgb(171, 221, 229); }.list-group-item-info.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(12, 84, 96); border-color: rgb(12, 84, 96); }.list-group-item-warning { color: rgb(133, 100, 4); background-color: rgb(255, 238, 186); }.list-group-item-warning.list-group-item-action:focus, .list-group-item-warning.list-group-item-action:hover { color: rgb(133, 100, 4); background-color: rgb(255, 232, 161); }.list-group-item-warning.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(133, 100, 4); border-color: rgb(133, 100, 4); }.list-group-item-danger { color: rgb(114, 28, 36); background-color: rgb(245, 198, 203); }.list-group-item-danger.list-group-item-action:focus, .list-group-item-danger.list-group-item-action:hover { color: rgb(114, 28, 36); background-color: rgb(241, 176, 183); }.list-group-item-danger.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(114, 28, 36); border-color: rgb(114, 28, 36); }.list-group-item-light { color: rgb(129, 129, 130); background-color: rgb(253, 253, 254); }.list-group-item-light.list-group-item-action:focus, .list-group-item-light.list-group-item-action:hover { color: rgb(129, 129, 130); background-color: rgb(236, 236, 246); }.list-group-item-light.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(129, 129, 130); border-color: rgb(129, 129, 130); }.list-group-item-dark { color: rgb(27, 30, 33); background-color: rgb(198, 200, 202); }.list-group-item-dark.list-group-item-action:focus, .list-group-item-dark.list-group-item-action:hover { color: rgb(27, 30, 33); background-color: rgb(185, 187, 190); }.list-group-item-dark.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(27, 30, 33); border-color: rgb(27, 30, 33); }.close { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: rgb(0, 0, 0); text-shadow: rgb(255, 255, 255) 0px 1px 0px; opacity: 0.5; }.close:not(:disabled):not(.disabled) { cursor: pointer; }.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover { color: rgb(0, 0, 0); text-decoration: none; opacity: 0.75; }button.close { padding: 0px; background-color: transparent; border: 0px; -webkit-appearance: none; }.modal-open { overflow: hidden; }.modal-open .modal { overflow: hidden auto; }.modal { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 1050; display: none; overflow: hidden; outline: 0px; }.modal-dialog { position: relative; width: auto; margin: 0.5rem; pointer-events: none; }.modal.fade .modal-dialog { transition: transform 0.3s ease-out 0s, -webkit-transform 0.3s ease-out 0s; transform: translate(0px, -25%); }@media not all {\n  .modal.fade .modal-dialog { transition: none 0s ease 0s; }\n}.modal.show .modal-dialog { transform: translate(0px, 0px); }.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); }.modal-dialog-centered::before { display: block; height: calc(100vh - 1rem); content: \"\"; }.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; outline: 0px; }.modal-backdrop { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 1040; background-color: rgb(0, 0, 0); }.modal-backdrop.fade { opacity: 0; }.modal-backdrop.show { opacity: 0.5; }.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem; border-bottom: 1px solid rgb(233, 236, 239); border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; }.modal-header .close { padding: 1rem; margin: -1rem -1rem -1rem auto; }.modal-title { margin-bottom: 0px; line-height: 1.5; }.modal-body { position: relative; flex: 1 1 auto; padding: 1rem; }.modal-footer { display: flex; align-items: center; justify-content: flex-end; padding: 1rem; border-top: 1px solid rgb(233, 236, 239); }.modal-footer > :not(:first-child) { margin-left: 0.25rem; }.modal-footer > :not(:last-child) { margin-right: 0.25rem; }.modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; }@media (min-width: 576px) {\n  .modal-dialog { max-width: 500px; margin: 1.75rem auto; }\n  .modal-dialog-centered { min-height: calc(100% - 3.5rem); }\n  .modal-dialog-centered::before { height: calc(100vh - 3.5rem); }\n  .modal-sm { max-width: 300px; }\n}@media (min-width: 992px) {\n  .modal-lg { max-width: 800px; }\n}.tooltip { position: absolute; z-index: 1070; display: block; margin: 0px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; font-style: normal; font-weight: 400; line-height: 1.5; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; white-space: normal; line-break: auto; font-size: 0.875rem; word-wrap: break-word; opacity: 0; }.tooltip.show { opacity: 0.9; }.tooltip .arrow { position: absolute; display: block; width: 0.8rem; height: 0.4rem; }.tooltip .arrow::before { position: absolute; content: \"\"; border-color: transparent; border-style: solid; }.bs-tooltip-auto[x-placement^=\"top\"], .bs-tooltip-top { padding: 0.4rem 0px; }.bs-tooltip-auto[x-placement^=\"top\"] .arrow, .bs-tooltip-top .arrow { bottom: 0px; }.bs-tooltip-auto[x-placement^=\"top\"] .arrow::before, .bs-tooltip-top .arrow::before { top: 0px; border-width: 0.4rem 0.4rem 0px; border-top-color: rgb(0, 0, 0); }.bs-tooltip-auto[x-placement^=\"right\"], .bs-tooltip-right { padding: 0px 0.4rem; }.bs-tooltip-auto[x-placement^=\"right\"] .arrow, .bs-tooltip-right .arrow { left: 0px; width: 0.4rem; height: 0.8rem; }.bs-tooltip-auto[x-placement^=\"right\"] .arrow::before, .bs-tooltip-right .arrow::before { right: 0px; border-width: 0.4rem 0.4rem 0.4rem 0px; border-right-color: rgb(0, 0, 0); }.bs-tooltip-auto[x-placement^=\"bottom\"], .bs-tooltip-bottom { padding: 0.4rem 0px; }.bs-tooltip-auto[x-placement^=\"bottom\"] .arrow, .bs-tooltip-bottom .arrow { top: 0px; }.bs-tooltip-auto[x-placement^=\"bottom\"] .arrow::before, .bs-tooltip-bottom .arrow::before { bottom: 0px; border-width: 0px 0.4rem 0.4rem; border-bottom-color: rgb(0, 0, 0); }.bs-tooltip-auto[x-placement^=\"left\"], .bs-tooltip-left { padding: 0px 0.4rem; }.bs-tooltip-auto[x-placement^=\"left\"] .arrow, .bs-tooltip-left .arrow { right: 0px; width: 0.4rem; height: 0.8rem; }.bs-tooltip-auto[x-placement^=\"left\"] .arrow::before, .bs-tooltip-left .arrow::before { left: 0px; border-width: 0.4rem 0px 0.4rem 0.4rem; border-left-color: rgb(0, 0, 0); }.tooltip-inner { max-width: 200px; padding: 0.25rem 0.5rem; color: rgb(255, 255, 255); text-align: center; background-color: rgb(0, 0, 0); border-radius: 0.25rem; }.popover { position: absolute; top: 0px; left: 0px; z-index: 1060; display: block; max-width: 276px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; font-style: normal; font-weight: 400; line-height: 1.5; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; white-space: normal; line-break: auto; font-size: 0.875rem; word-wrap: break-word; background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; }.popover .arrow { position: absolute; display: block; width: 1rem; height: 0.5rem; margin: 0px 0.3rem; }.popover .arrow::after, .popover .arrow::before { position: absolute; display: block; content: \"\"; border-color: transparent; border-style: solid; }.bs-popover-auto[x-placement^=\"top\"], .bs-popover-top { margin-bottom: 0.5rem; }.bs-popover-auto[x-placement^=\"top\"] .arrow, .bs-popover-top .arrow { bottom: calc((0.5rem + 1px) * -1); }.bs-popover-auto[x-placement^=\"top\"] .arrow::after, .bs-popover-auto[x-placement^=\"top\"] .arrow::before, .bs-popover-top .arrow::after, .bs-popover-top .arrow::before { border-width: 0.5rem 0.5rem 0px; }.bs-popover-auto[x-placement^=\"top\"] .arrow::before, .bs-popover-top .arrow::before { bottom: 0px; border-top-color: rgba(0, 0, 0, 0.25); }.bs-popover-auto[x-placement^=\"top\"] .arrow::after, .bs-popover-top .arrow::after { bottom: 1px; border-top-color: rgb(255, 255, 255); }.bs-popover-auto[x-placement^=\"right\"], .bs-popover-right { margin-left: 0.5rem; }.bs-popover-auto[x-placement^=\"right\"] .arrow, .bs-popover-right .arrow { left: calc((0.5rem + 1px) * -1); width: 0.5rem; height: 1rem; margin: 0.3rem 0px; }.bs-popover-auto[x-placement^=\"right\"] .arrow::after, .bs-popover-auto[x-placement^=\"right\"] .arrow::before, .bs-popover-right .arrow::after, .bs-popover-right .arrow::before { border-width: 0.5rem 0.5rem 0.5rem 0px; }.bs-popover-auto[x-placement^=\"right\"] .arrow::before, .bs-popover-right .arrow::before { left: 0px; border-right-color: rgba(0, 0, 0, 0.25); }.bs-popover-auto[x-placement^=\"right\"] .arrow::after, .bs-popover-right .arrow::after { left: 1px; border-right-color: rgb(255, 255, 255); }.bs-popover-auto[x-placement^=\"bottom\"], .bs-popover-bottom { margin-top: 0.5rem; }.bs-popover-auto[x-placement^=\"bottom\"] .arrow, .bs-popover-bottom .arrow { top: calc((0.5rem + 1px) * -1); }.bs-popover-auto[x-placement^=\"bottom\"] .arrow::after, .bs-popover-auto[x-placement^=\"bottom\"] .arrow::before, .bs-popover-bottom .arrow::after, .bs-popover-bottom .arrow::before { border-width: 0px 0.5rem 0.5rem; }.bs-popover-auto[x-placement^=\"bottom\"] .arrow::before, .bs-popover-bottom .arrow::before { top: 0px; border-bottom-color: rgba(0, 0, 0, 0.25); }.bs-popover-auto[x-placement^=\"bottom\"] .arrow::after, .bs-popover-bottom .arrow::after { top: 1px; border-bottom-color: rgb(255, 255, 255); }.bs-popover-auto[x-placement^=\"bottom\"] .popover-header::before, .bs-popover-bottom .popover-header::before { position: absolute; top: 0px; left: 50%; display: block; width: 1rem; margin-left: -0.5rem; content: \"\"; border-bottom: 1px solid rgb(247, 247, 247); }.bs-popover-auto[x-placement^=\"left\"], .bs-popover-left { margin-right: 0.5rem; }.bs-popover-auto[x-placement^=\"left\"] .arrow, .bs-popover-left .arrow { right: calc((0.5rem + 1px) * -1); width: 0.5rem; height: 1rem; margin: 0.3rem 0px; }.bs-popover-auto[x-placement^=\"left\"] .arrow::after, .bs-popover-auto[x-placement^=\"left\"] .arrow::before, .bs-popover-left .arrow::after, .bs-popover-left .arrow::before { border-width: 0.5rem 0px 0.5rem 0.5rem; }.bs-popover-auto[x-placement^=\"left\"] .arrow::before, .bs-popover-left .arrow::before { right: 0px; border-left-color: rgba(0, 0, 0, 0.25); }.bs-popover-auto[x-placement^=\"left\"] .arrow::after, .bs-popover-left .arrow::after { right: 1px; border-left-color: rgb(255, 255, 255); }.popover-header { padding: 0.5rem 0.75rem; margin-bottom: 0px; font-size: 1rem; color: inherit; background-color: rgb(247, 247, 247); border-bottom: 1px solid rgb(235, 235, 235); border-top-left-radius: calc(0.3rem - 1px); border-top-right-radius: calc(0.3rem - 1px); }.popover-header:empty { display: none; }.popover-body { padding: 0.5rem 0.75rem; color: rgb(33, 37, 41); }.carousel { position: relative; }.carousel-inner { position: relative; width: 100%; overflow: hidden; }.carousel-item { position: relative; display: none; align-items: center; width: 100%; backface-visibility: hidden; perspective: 1000px; }.carousel-item-next, .carousel-item-prev, .carousel-item.active { display: block; transition: transform 0.6s ease 0s, -webkit-transform 0.6s ease 0s; }@media not all {\n  .carousel-item-next, .carousel-item-prev, .carousel-item.active { transition: none 0s ease 0s; }\n}.carousel-item-next, .carousel-item-prev { position: absolute; top: 0px; }.carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { transform: translateX(0px); }@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {\n  .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { transform: translate3d(0px, 0px, 0px); }\n}.active.carousel-item-right, .carousel-item-next { transform: translateX(100%); }@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {\n  .active.carousel-item-right, .carousel-item-next { transform: translate3d(100%, 0px, 0px); }\n}.active.carousel-item-left, .carousel-item-prev { transform: translateX(-100%); }@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {\n  .active.carousel-item-left, .carousel-item-prev { transform: translate3d(-100%, 0px, 0px); }\n}.carousel-fade .carousel-item { opacity: 0; transition-duration: 0.6s; transition-property: opacity; }.carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right, .carousel-fade .carousel-item.active { opacity: 1; }.carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right { opacity: 0; }.carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-prev, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item.active { transform: translateX(0px); }@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {\n  .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-prev, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item.active { transform: translate3d(0px, 0px, 0px); }\n}.carousel-control-next, .carousel-control-prev { position: absolute; top: 0px; bottom: 0px; display: flex; align-items: center; justify-content: center; width: 15%; color: rgb(255, 255, 255); text-align: center; opacity: 0.5; }.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover { color: rgb(255, 255, 255); text-decoration: none; outline: 0px; opacity: 0.9; }.carousel-control-prev { left: 0px; }.carousel-control-next { right: 0px; }.carousel-control-next-icon, .carousel-control-prev-icon { display: inline-block; width: 20px; height: 20px; background: center center / 100% 100% no-repeat transparent; }.carousel-control-prev-icon { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E\"); }.carousel-control-next-icon { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E\"); }.carousel-indicators { position: absolute; right: 0px; bottom: 10px; left: 0px; z-index: 15; display: flex; justify-content: center; padding-left: 0px; margin-right: 15%; margin-left: 15%; list-style: none; }.carousel-indicators li { position: relative; flex: 0 1 auto; width: 30px; height: 3px; margin-right: 3px; margin-left: 3px; text-indent: -999px; cursor: pointer; background-color: rgba(255, 255, 255, 0.5); }.carousel-indicators li::before { position: absolute; top: -10px; left: 0px; display: inline-block; width: 100%; height: 10px; content: \"\"; }.carousel-indicators li::after { position: absolute; bottom: -10px; left: 0px; display: inline-block; width: 100%; height: 10px; content: \"\"; }.carousel-indicators .active { background-color: rgb(255, 255, 255); }.carousel-caption { position: absolute; right: 15%; bottom: 20px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: rgb(255, 255, 255); text-align: center; }.align-baseline { vertical-align: baseline !important; }.align-top { vertical-align: top !important; }.align-middle { vertical-align: middle !important; }.align-bottom { vertical-align: bottom !important; }.align-text-bottom { vertical-align: text-bottom !important; }.align-text-top { vertical-align: text-top !important; }.bg-primary { background-color: rgb(0, 123, 255) !important; }a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover { background-color: rgb(0, 98, 204) !important; }.bg-secondary { background-color: rgb(108, 117, 125) !important; }a.bg-secondary:focus, a.bg-secondary:hover, button.bg-secondary:focus, button.bg-secondary:hover { background-color: rgb(84, 91, 98) !important; }.bg-success { background-color: rgb(40, 167, 69) !important; }a.bg-success:focus, a.bg-success:hover, button.bg-success:focus, button.bg-success:hover { background-color: rgb(30, 126, 52) !important; }.bg-info { background-color: rgb(23, 162, 184) !important; }a.bg-info:focus, a.bg-info:hover, button.bg-info:focus, button.bg-info:hover { background-color: rgb(17, 122, 139) !important; }.bg-warning { background-color: rgb(255, 193, 7) !important; }a.bg-warning:focus, a.bg-warning:hover, button.bg-warning:focus, button.bg-warning:hover { background-color: rgb(211, 158, 0) !important; }.bg-danger { background-color: rgb(220, 53, 69) !important; }a.bg-danger:focus, a.bg-danger:hover, button.bg-danger:focus, button.bg-danger:hover { background-color: rgb(189, 33, 48) !important; }.bg-light { background-color: rgb(248, 249, 250) !important; }a.bg-light:focus, a.bg-light:hover, button.bg-light:focus, button.bg-light:hover { background-color: rgb(218, 224, 229) !important; }.bg-dark { background-color: rgb(52, 58, 64) !important; }a.bg-dark:focus, a.bg-dark:hover, button.bg-dark:focus, button.bg-dark:hover { background-color: rgb(29, 33, 36) !important; }.bg-white { background-color: rgb(255, 255, 255) !important; }.bg-transparent { background-color: transparent !important; }.border { border: 1px solid rgb(222, 226, 230) !important; }.border-top { border-top: 1px solid rgb(222, 226, 230) !important; }.border-right { border-right: 1px solid rgb(222, 226, 230) !important; }.border-bottom { border-bottom: 1px solid rgb(222, 226, 230) !important; }.border-left { border-left: 1px solid rgb(222, 226, 230) !important; }.border-0 { border: 0px !important; }.border-top-0 { border-top: 0px !important; }.border-right-0 { border-right: 0px !important; }.border-bottom-0 { border-bottom: 0px !important; }.border-left-0 { border-left: 0px !important; }.border-primary { border-color: rgb(0, 123, 255) !important; }.border-secondary { border-color: rgb(108, 117, 125) !important; }.border-success { border-color: rgb(40, 167, 69) !important; }.border-info { border-color: rgb(23, 162, 184) !important; }.border-warning { border-color: rgb(255, 193, 7) !important; }.border-danger { border-color: rgb(220, 53, 69) !important; }.border-light { border-color: rgb(248, 249, 250) !important; }.border-dark { border-color: rgb(52, 58, 64) !important; }.border-white { border-color: rgb(255, 255, 255) !important; }.rounded { border-radius: 0.25rem !important; }.rounded-top { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }.rounded-right { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }.rounded-bottom { border-bottom-right-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }.rounded-left { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }.rounded-circle { border-radius: 50% !important; }.rounded-0 { border-radius: 0px !important; }.clearfix::after { display: block; clear: both; content: \"\"; }.d-none { display: none !important; }.d-inline { display: inline !important; }.d-inline-block { display: inline-block !important; }.d-block { display: block !important; }.d-table { display: table !important; }.d-table-row { display: table-row !important; }.d-table-cell { display: table-cell !important; }.d-flex { display: flex !important; }.d-inline-flex { display: inline-flex !important; }@media (min-width: 576px) {\n  .d-sm-none { display: none !important; }\n  .d-sm-inline { display: inline !important; }\n  .d-sm-inline-block { display: inline-block !important; }\n  .d-sm-block { display: block !important; }\n  .d-sm-table { display: table !important; }\n  .d-sm-table-row { display: table-row !important; }\n  .d-sm-table-cell { display: table-cell !important; }\n  .d-sm-flex { display: flex !important; }\n  .d-sm-inline-flex { display: inline-flex !important; }\n}@media (min-width: 768px) {\n  .d-md-none { display: none !important; }\n  .d-md-inline { display: inline !important; }\n  .d-md-inline-block { display: inline-block !important; }\n  .d-md-block { display: block !important; }\n  .d-md-table { display: table !important; }\n  .d-md-table-row { display: table-row !important; }\n  .d-md-table-cell { display: table-cell !important; }\n  .d-md-flex { display: flex !important; }\n  .d-md-inline-flex { display: inline-flex !important; }\n}@media (min-width: 992px) {\n  .d-lg-none { display: none !important; }\n  .d-lg-inline { display: inline !important; }\n  .d-lg-inline-block { display: inline-block !important; }\n  .d-lg-block { display: block !important; }\n  .d-lg-table { display: table !important; }\n  .d-lg-table-row { display: table-row !important; }\n  .d-lg-table-cell { display: table-cell !important; }\n  .d-lg-flex { display: flex !important; }\n  .d-lg-inline-flex { display: inline-flex !important; }\n}@media (min-width: 1200px) {\n  .d-xl-none { display: none !important; }\n  .d-xl-inline { display: inline !important; }\n  .d-xl-inline-block { display: inline-block !important; }\n  .d-xl-block { display: block !important; }\n  .d-xl-table { display: table !important; }\n  .d-xl-table-row { display: table-row !important; }\n  .d-xl-table-cell { display: table-cell !important; }\n  .d-xl-flex { display: flex !important; }\n  .d-xl-inline-flex { display: inline-flex !important; }\n}@media print {\n  .d-print-none { display: none !important; }\n  .d-print-inline { display: inline !important; }\n  .d-print-inline-block { display: inline-block !important; }\n  .d-print-block { display: block !important; }\n  .d-print-table { display: table !important; }\n  .d-print-table-row { display: table-row !important; }\n  .d-print-table-cell { display: table-cell !important; }\n  .d-print-flex { display: flex !important; }\n  .d-print-inline-flex { display: inline-flex !important; }\n}.embed-responsive { position: relative; display: block; width: 100%; padding: 0px; overflow: hidden; }.embed-responsive::before { display: block; content: \"\"; }.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video { position: absolute; top: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; border: 0px; }.embed-responsive-21by9::before { padding-top: 42.8571%; }.embed-responsive-16by9::before { padding-top: 56.25%; }.embed-responsive-4by3::before { padding-top: 75%; }.embed-responsive-1by1::before { padding-top: 100%; }.flex-row { flex-direction: row !important; }.flex-column { flex-direction: column !important; }.flex-row-reverse { flex-direction: row-reverse !important; }.flex-column-reverse { flex-direction: column-reverse !important; }.flex-wrap { flex-wrap: wrap !important; }.flex-nowrap { flex-wrap: nowrap !important; }.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }.flex-fill { flex: 1 1 auto !important; }.flex-grow-0 { flex-grow: 0 !important; }.flex-grow-1 { flex-grow: 1 !important; }.flex-shrink-0 { flex-shrink: 0 !important; }.flex-shrink-1 { flex-shrink: 1 !important; }.justify-content-start { justify-content: flex-start !important; }.justify-content-end { justify-content: flex-end !important; }.justify-content-center { justify-content: center !important; }.justify-content-between { justify-content: space-between !important; }.justify-content-around { justify-content: space-around !important; }.align-items-start { align-items: flex-start !important; }.align-items-end { align-items: flex-end !important; }.align-items-center { align-items: center !important; }.align-items-baseline { align-items: baseline !important; }.align-items-stretch { align-items: stretch !important; }.align-content-start { align-content: flex-start !important; }.align-content-end { align-content: flex-end !important; }.align-content-center { align-content: center !important; }.align-content-between { align-content: space-between !important; }.align-content-around { align-content: space-around !important; }.align-content-stretch { align-content: stretch !important; }.align-self-auto { align-self: auto !important; }.align-self-start { align-self: flex-start !important; }.align-self-end { align-self: flex-end !important; }.align-self-center { align-self: center !important; }.align-self-baseline { align-self: baseline !important; }.align-self-stretch { align-self: stretch !important; }@media (min-width: 576px) {\n  .flex-sm-row { flex-direction: row !important; }\n  .flex-sm-column { flex-direction: column !important; }\n  .flex-sm-row-reverse { flex-direction: row-reverse !important; }\n  .flex-sm-column-reverse { flex-direction: column-reverse !important; }\n  .flex-sm-wrap { flex-wrap: wrap !important; }\n  .flex-sm-nowrap { flex-wrap: nowrap !important; }\n  .flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; }\n  .flex-sm-fill { flex: 1 1 auto !important; }\n  .flex-sm-grow-0 { flex-grow: 0 !important; }\n  .flex-sm-grow-1 { flex-grow: 1 !important; }\n  .flex-sm-shrink-0 { flex-shrink: 0 !important; }\n  .flex-sm-shrink-1 { flex-shrink: 1 !important; }\n  .justify-content-sm-start { justify-content: flex-start !important; }\n  .justify-content-sm-end { justify-content: flex-end !important; }\n  .justify-content-sm-center { justify-content: center !important; }\n  .justify-content-sm-between { justify-content: space-between !important; }\n  .justify-content-sm-around { justify-content: space-around !important; }\n  .align-items-sm-start { align-items: flex-start !important; }\n  .align-items-sm-end { align-items: flex-end !important; }\n  .align-items-sm-center { align-items: center !important; }\n  .align-items-sm-baseline { align-items: baseline !important; }\n  .align-items-sm-stretch { align-items: stretch !important; }\n  .align-content-sm-start { align-content: flex-start !important; }\n  .align-content-sm-end { align-content: flex-end !important; }\n  .align-content-sm-center { align-content: center !important; }\n  .align-content-sm-between { align-content: space-between !important; }\n  .align-content-sm-around { align-content: space-around !important; }\n  .align-content-sm-stretch { align-content: stretch !important; }\n  .align-self-sm-auto { align-self: auto !important; }\n  .align-self-sm-start { align-self: flex-start !important; }\n  .align-self-sm-end { align-self: flex-end !important; }\n  .align-self-sm-center { align-self: center !important; }\n  .align-self-sm-baseline { align-self: baseline !important; }\n  .align-self-sm-stretch { align-self: stretch !important; }\n}@media (min-width: 768px) {\n  .flex-md-row { flex-direction: row !important; }\n  .flex-md-column { flex-direction: column !important; }\n  .flex-md-row-reverse { flex-direction: row-reverse !important; }\n  .flex-md-column-reverse { flex-direction: column-reverse !important; }\n  .flex-md-wrap { flex-wrap: wrap !important; }\n  .flex-md-nowrap { flex-wrap: nowrap !important; }\n  .flex-md-wrap-reverse { flex-wrap: wrap-reverse !important; }\n  .flex-md-fill { flex: 1 1 auto !important; }\n  .flex-md-grow-0 { flex-grow: 0 !important; }\n  .flex-md-grow-1 { flex-grow: 1 !important; }\n  .flex-md-shrink-0 { flex-shrink: 0 !important; }\n  .flex-md-shrink-1 { flex-shrink: 1 !important; }\n  .justify-content-md-start { justify-content: flex-start !important; }\n  .justify-content-md-end { justify-content: flex-end !important; }\n  .justify-content-md-center { justify-content: center !important; }\n  .justify-content-md-between { justify-content: space-between !important; }\n  .justify-content-md-around { justify-content: space-around !important; }\n  .align-items-md-start { align-items: flex-start !important; }\n  .align-items-md-end { align-items: flex-end !important; }\n  .align-items-md-center { align-items: center !important; }\n  .align-items-md-baseline { align-items: baseline !important; }\n  .align-items-md-stretch { align-items: stretch !important; }\n  .align-content-md-start { align-content: flex-start !important; }\n  .align-content-md-end { align-content: flex-end !important; }\n  .align-content-md-center { align-content: center !important; }\n  .align-content-md-between { align-content: space-between !important; }\n  .align-content-md-around { align-content: space-around !important; }\n  .align-content-md-stretch { align-content: stretch !important; }\n  .align-self-md-auto { align-self: auto !important; }\n  .align-self-md-start { align-self: flex-start !important; }\n  .align-self-md-end { align-self: flex-end !important; }\n  .align-self-md-center { align-self: center !important; }\n  .align-self-md-baseline { align-self: baseline !important; }\n  .align-self-md-stretch { align-self: stretch !important; }\n}@media (min-width: 992px) {\n  .flex-lg-row { flex-direction: row !important; }\n  .flex-lg-column { flex-direction: column !important; }\n  .flex-lg-row-reverse { flex-direction: row-reverse !important; }\n  .flex-lg-column-reverse { flex-direction: column-reverse !important; }\n  .flex-lg-wrap { flex-wrap: wrap !important; }\n  .flex-lg-nowrap { flex-wrap: nowrap !important; }\n  .flex-lg-wrap-reverse { flex-wrap: wrap-reverse !important; }\n  .flex-lg-fill { flex: 1 1 auto !important; }\n  .flex-lg-grow-0 { flex-grow: 0 !important; }\n  .flex-lg-grow-1 { flex-grow: 1 !important; }\n  .flex-lg-shrink-0 { flex-shrink: 0 !important; }\n  .flex-lg-shrink-1 { flex-shrink: 1 !important; }\n  .justify-content-lg-start { justify-content: flex-start !important; }\n  .justify-content-lg-end { justify-content: flex-end !important; }\n  .justify-content-lg-center { justify-content: center !important; }\n  .justify-content-lg-between { justify-content: space-between !important; }\n  .justify-content-lg-around { justify-content: space-around !important; }\n  .align-items-lg-start { align-items: flex-start !important; }\n  .align-items-lg-end { align-items: flex-end !important; }\n  .align-items-lg-center { align-items: center !important; }\n  .align-items-lg-baseline { align-items: baseline !important; }\n  .align-items-lg-stretch { align-items: stretch !important; }\n  .align-content-lg-start { align-content: flex-start !important; }\n  .align-content-lg-end { align-content: flex-end !important; }\n  .align-content-lg-center { align-content: center !important; }\n  .align-content-lg-between { align-content: space-between !important; }\n  .align-content-lg-around { align-content: space-around !important; }\n  .align-content-lg-stretch { align-content: stretch !important; }\n  .align-self-lg-auto { align-self: auto !important; }\n  .align-self-lg-start { align-self: flex-start !important; }\n  .align-self-lg-end { align-self: flex-end !important; }\n  .align-self-lg-center { align-self: center !important; }\n  .align-self-lg-baseline { align-self: baseline !important; }\n  .align-self-lg-stretch { align-self: stretch !important; }\n}@media (min-width: 1200px) {\n  .flex-xl-row { flex-direction: row !important; }\n  .flex-xl-column { flex-direction: column !important; }\n  .flex-xl-row-reverse { flex-direction: row-reverse !important; }\n  .flex-xl-column-reverse { flex-direction: column-reverse !important; }\n  .flex-xl-wrap { flex-wrap: wrap !important; }\n  .flex-xl-nowrap { flex-wrap: nowrap !important; }\n  .flex-xl-wrap-reverse { flex-wrap: wrap-reverse !important; }\n  .flex-xl-fill { flex: 1 1 auto !important; }\n  .flex-xl-grow-0 { flex-grow: 0 !important; }\n  .flex-xl-grow-1 { flex-grow: 1 !important; }\n  .flex-xl-shrink-0 { flex-shrink: 0 !important; }\n  .flex-xl-shrink-1 { flex-shrink: 1 !important; }\n  .justify-content-xl-start { justify-content: flex-start !important; }\n  .justify-content-xl-end { justify-content: flex-end !important; }\n  .justify-content-xl-center { justify-content: center !important; }\n  .justify-content-xl-between { justify-content: space-between !important; }\n  .justify-content-xl-around { justify-content: space-around !important; }\n  .align-items-xl-start { align-items: flex-start !important; }\n  .align-items-xl-end { align-items: flex-end !important; }\n  .align-items-xl-center { align-items: center !important; }\n  .align-items-xl-baseline { align-items: baseline !important; }\n  .align-items-xl-stretch { align-items: stretch !important; }\n  .align-content-xl-start { align-content: flex-start !important; }\n  .align-content-xl-end { align-content: flex-end !important; }\n  .align-content-xl-center { align-content: center !important; }\n  .align-content-xl-between { align-content: space-between !important; }\n  .align-content-xl-around { align-content: space-around !important; }\n  .align-content-xl-stretch { align-content: stretch !important; }\n  .align-self-xl-auto { align-self: auto !important; }\n  .align-self-xl-start { align-self: flex-start !important; }\n  .align-self-xl-end { align-self: flex-end !important; }\n  .align-self-xl-center { align-self: center !important; }\n  .align-self-xl-baseline { align-self: baseline !important; }\n  .align-self-xl-stretch { align-self: stretch !important; }\n}.float-left { float: left !important; }.float-right { float: right !important; }.float-none { float: none !important; }@media (min-width: 576px) {\n  .float-sm-left { float: left !important; }\n  .float-sm-right { float: right !important; }\n  .float-sm-none { float: none !important; }\n}@media (min-width: 768px) {\n  .float-md-left { float: left !important; }\n  .float-md-right { float: right !important; }\n  .float-md-none { float: none !important; }\n}@media (min-width: 992px) {\n  .float-lg-left { float: left !important; }\n  .float-lg-right { float: right !important; }\n  .float-lg-none { float: none !important; }\n}@media (min-width: 1200px) {\n  .float-xl-left { float: left !important; }\n  .float-xl-right { float: right !important; }\n  .float-xl-none { float: none !important; }\n}.position-static { position: static !important; }.position-relative { position: relative !important; }.position-absolute { position: absolute !important; }.position-fixed { position: fixed !important; }.position-sticky { position: sticky !important; }.fixed-top { position: fixed; top: 0px; right: 0px; left: 0px; z-index: 1030; }.fixed-bottom { position: fixed; right: 0px; bottom: 0px; left: 0px; z-index: 1030; }@supports ((position:-webkit-sticky) or (position:sticky)) {\n  .sticky-top { position: sticky; top: 0px; z-index: 1020; }\n}.sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }.sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }.shadow-sm { box-shadow: rgba(0, 0, 0, 0.075) 0px 0.125rem 0.25rem !important; }.shadow { box-shadow: rgba(0, 0, 0, 0.15) 0px 0.5rem 1rem !important; }.shadow-lg { box-shadow: rgba(0, 0, 0, 0.176) 0px 1rem 3rem !important; }.shadow-none { box-shadow: none !important; }.w-25 { width: 25% !important; }.w-50 { width: 50% !important; }.w-75 { width: 75% !important; }.w-100 { width: 100% !important; }.w-auto { width: auto !important; }.h-25 { height: 25% !important; }.h-50 { height: 50% !important; }.h-75 { height: 75% !important; }.h-100 { height: 100% !important; }.h-auto { height: auto !important; }.mw-100 { max-width: 100% !important; }.mh-100 { max-height: 100% !important; }.m-0 { margin: 0px !important; }.mt-0, .my-0 { margin-top: 0px !important; }.mr-0, .mx-0 { margin-right: 0px !important; }.mb-0, .my-0 { margin-bottom: 0px !important; }.ml-0, .mx-0 { margin-left: 0px !important; }.m-1 { margin: 0.25rem !important; }.mt-1, .my-1 { margin-top: 0.25rem !important; }.mr-1, .mx-1 { margin-right: 0.25rem !important; }.mb-1, .my-1 { margin-bottom: 0.25rem !important; }.ml-1, .mx-1 { margin-left: 0.25rem !important; }.m-2 { margin: 0.5rem !important; }.mt-2, .my-2 { margin-top: 0.5rem !important; }.mr-2, .mx-2 { margin-right: 0.5rem !important; }.mb-2, .my-2 { margin-bottom: 0.5rem !important; }.ml-2, .mx-2 { margin-left: 0.5rem !important; }.m-3 { margin: 1rem !important; }.mt-3, .my-3 { margin-top: 1rem !important; }.mr-3, .mx-3 { margin-right: 1rem !important; }.mb-3, .my-3 { margin-bottom: 1rem !important; }.ml-3, .mx-3 { margin-left: 1rem !important; }.m-4 { margin: 1.5rem !important; }.mt-4, .my-4 { margin-top: 1.5rem !important; }.mr-4, .mx-4 { margin-right: 1.5rem !important; }.mb-4, .my-4 { margin-bottom: 1.5rem !important; }.ml-4, .mx-4 { margin-left: 1.5rem !important; }.m-5 { margin: 3rem !important; }.mt-5, .my-5 { margin-top: 3rem !important; }.mr-5, .mx-5 { margin-right: 3rem !important; }.mb-5, .my-5 { margin-bottom: 3rem !important; }.ml-5, .mx-5 { margin-left: 3rem !important; }.p-0 { padding: 0px !important; }.pt-0, .py-0 { padding-top: 0px !important; }.pr-0, .px-0 { padding-right: 0px !important; }.pb-0, .py-0 { padding-bottom: 0px !important; }.pl-0, .px-0 { padding-left: 0px !important; }.p-1 { padding: 0.25rem !important; }.pt-1, .py-1 { padding-top: 0.25rem !important; }.pr-1, .px-1 { padding-right: 0.25rem !important; }.pb-1, .py-1 { padding-bottom: 0.25rem !important; }.pl-1, .px-1 { padding-left: 0.25rem !important; }.p-2 { padding: 0.5rem !important; }.pt-2, .py-2 { padding-top: 0.5rem !important; }.pr-2, .px-2 { padding-right: 0.5rem !important; }.pb-2, .py-2 { padding-bottom: 0.5rem !important; }.pl-2, .px-2 { padding-left: 0.5rem !important; }.p-3 { padding: 1rem !important; }.pt-3, .py-3 { padding-top: 1rem !important; }.pr-3, .px-3 { padding-right: 1rem !important; }.pb-3, .py-3 { padding-bottom: 1rem !important; }.pl-3, .px-3 { padding-left: 1rem !important; }.p-4 { padding: 1.5rem !important; }.pt-4, .py-4 { padding-top: 1.5rem !important; }.pr-4, .px-4 { padding-right: 1.5rem !important; }.pb-4, .py-4 { padding-bottom: 1.5rem !important; }.pl-4, .px-4 { padding-left: 1.5rem !important; }.p-5 { padding: 3rem !important; }.pt-5, .py-5 { padding-top: 3rem !important; }.pr-5, .px-5 { padding-right: 3rem !important; }.pb-5, .py-5 { padding-bottom: 3rem !important; }.pl-5, .px-5 { padding-left: 3rem !important; }.m-auto { margin: auto !important; }.mt-auto, .my-auto { margin-top: auto !important; }.mr-auto, .mx-auto { margin-right: auto !important; }.mb-auto, .my-auto { margin-bottom: auto !important; }.ml-auto, .mx-auto { margin-left: auto !important; }@media (min-width: 576px) {\n  .m-sm-0 { margin: 0px !important; }\n  .mt-sm-0, .my-sm-0 { margin-top: 0px !important; }\n  .mr-sm-0, .mx-sm-0 { margin-right: 0px !important; }\n  .mb-sm-0, .my-sm-0 { margin-bottom: 0px !important; }\n  .ml-sm-0, .mx-sm-0 { margin-left: 0px !important; }\n  .m-sm-1 { margin: 0.25rem !important; }\n  .mt-sm-1, .my-sm-1 { margin-top: 0.25rem !important; }\n  .mr-sm-1, .mx-sm-1 { margin-right: 0.25rem !important; }\n  .mb-sm-1, .my-sm-1 { margin-bottom: 0.25rem !important; }\n  .ml-sm-1, .mx-sm-1 { margin-left: 0.25rem !important; }\n  .m-sm-2 { margin: 0.5rem !important; }\n  .mt-sm-2, .my-sm-2 { margin-top: 0.5rem !important; }\n  .mr-sm-2, .mx-sm-2 { margin-right: 0.5rem !important; }\n  .mb-sm-2, .my-sm-2 { margin-bottom: 0.5rem !important; }\n  .ml-sm-2, .mx-sm-2 { margin-left: 0.5rem !important; }\n  .m-sm-3 { margin: 1rem !important; }\n  .mt-sm-3, .my-sm-3 { margin-top: 1rem !important; }\n  .mr-sm-3, .mx-sm-3 { margin-right: 1rem !important; }\n  .mb-sm-3, .my-sm-3 { margin-bottom: 1rem !important; }\n  .ml-sm-3, .mx-sm-3 { margin-left: 1rem !important; }\n  .m-sm-4 { margin: 1.5rem !important; }\n  .mt-sm-4, .my-sm-4 { margin-top: 1.5rem !important; }\n  .mr-sm-4, .mx-sm-4 { margin-right: 1.5rem !important; }\n  .mb-sm-4, .my-sm-4 { margin-bottom: 1.5rem !important; }\n  .ml-sm-4, .mx-sm-4 { margin-left: 1.5rem !important; }\n  .m-sm-5 { margin: 3rem !important; }\n  .mt-sm-5, .my-sm-5 { margin-top: 3rem !important; }\n  .mr-sm-5, .mx-sm-5 { margin-right: 3rem !important; }\n  .mb-sm-5, .my-sm-5 { margin-bottom: 3rem !important; }\n  .ml-sm-5, .mx-sm-5 { margin-left: 3rem !important; }\n  .p-sm-0 { padding: 0px !important; }\n  .pt-sm-0, .py-sm-0 { padding-top: 0px !important; }\n  .pr-sm-0, .px-sm-0 { padding-right: 0px !important; }\n  .pb-sm-0, .py-sm-0 { padding-bottom: 0px !important; }\n  .pl-sm-0, .px-sm-0 { padding-left: 0px !important; }\n  .p-sm-1 { padding: 0.25rem !important; }\n  .pt-sm-1, .py-sm-1 { padding-top: 0.25rem !important; }\n  .pr-sm-1, .px-sm-1 { padding-right: 0.25rem !important; }\n  .pb-sm-1, .py-sm-1 { padding-bottom: 0.25rem !important; }\n  .pl-sm-1, .px-sm-1 { padding-left: 0.25rem !important; }\n  .p-sm-2 { padding: 0.5rem !important; }\n  .pt-sm-2, .py-sm-2 { padding-top: 0.5rem !important; }\n  .pr-sm-2, .px-sm-2 { padding-right: 0.5rem !important; }\n  .pb-sm-2, .py-sm-2 { padding-bottom: 0.5rem !important; }\n  .pl-sm-2, .px-sm-2 { padding-left: 0.5rem !important; }\n  .p-sm-3 { padding: 1rem !important; }\n  .pt-sm-3, .py-sm-3 { padding-top: 1rem !important; }\n  .pr-sm-3, .px-sm-3 { padding-right: 1rem !important; }\n  .pb-sm-3, .py-sm-3 { padding-bottom: 1rem !important; }\n  .pl-sm-3, .px-sm-3 { padding-left: 1rem !important; }\n  .p-sm-4 { padding: 1.5rem !important; }\n  .pt-sm-4, .py-sm-4 { padding-top: 1.5rem !important; }\n  .pr-sm-4, .px-sm-4 { padding-right: 1.5rem !important; }\n  .pb-sm-4, .py-sm-4 { padding-bottom: 1.5rem !important; }\n  .pl-sm-4, .px-sm-4 { padding-left: 1.5rem !important; }\n  .p-sm-5 { padding: 3rem !important; }\n  .pt-sm-5, .py-sm-5 { padding-top: 3rem !important; }\n  .pr-sm-5, .px-sm-5 { padding-right: 3rem !important; }\n  .pb-sm-5, .py-sm-5 { padding-bottom: 3rem !important; }\n  .pl-sm-5, .px-sm-5 { padding-left: 3rem !important; }\n  .m-sm-auto { margin: auto !important; }\n  .mt-sm-auto, .my-sm-auto { margin-top: auto !important; }\n  .mr-sm-auto, .mx-sm-auto { margin-right: auto !important; }\n  .mb-sm-auto, .my-sm-auto { margin-bottom: auto !important; }\n  .ml-sm-auto, .mx-sm-auto { margin-left: auto !important; }\n}@media (min-width: 768px) {\n  .m-md-0 { margin: 0px !important; }\n  .mt-md-0, .my-md-0 { margin-top: 0px !important; }\n  .mr-md-0, .mx-md-0 { margin-right: 0px !important; }\n  .mb-md-0, .my-md-0 { margin-bottom: 0px !important; }\n  .ml-md-0, .mx-md-0 { margin-left: 0px !important; }\n  .m-md-1 { margin: 0.25rem !important; }\n  .mt-md-1, .my-md-1 { margin-top: 0.25rem !important; }\n  .mr-md-1, .mx-md-1 { margin-right: 0.25rem !important; }\n  .mb-md-1, .my-md-1 { margin-bottom: 0.25rem !important; }\n  .ml-md-1, .mx-md-1 { margin-left: 0.25rem !important; }\n  .m-md-2 { margin: 0.5rem !important; }\n  .mt-md-2, .my-md-2 { margin-top: 0.5rem !important; }\n  .mr-md-2, .mx-md-2 { margin-right: 0.5rem !important; }\n  .mb-md-2, .my-md-2 { margin-bottom: 0.5rem !important; }\n  .ml-md-2, .mx-md-2 { margin-left: 0.5rem !important; }\n  .m-md-3 { margin: 1rem !important; }\n  .mt-md-3, .my-md-3 { margin-top: 1rem !important; }\n  .mr-md-3, .mx-md-3 { margin-right: 1rem !important; }\n  .mb-md-3, .my-md-3 { margin-bottom: 1rem !important; }\n  .ml-md-3, .mx-md-3 { margin-left: 1rem !important; }\n  .m-md-4 { margin: 1.5rem !important; }\n  .mt-md-4, .my-md-4 { margin-top: 1.5rem !important; }\n  .mr-md-4, .mx-md-4 { margin-right: 1.5rem !important; }\n  .mb-md-4, .my-md-4 { margin-bottom: 1.5rem !important; }\n  .ml-md-4, .mx-md-4 { margin-left: 1.5rem !important; }\n  .m-md-5 { margin: 3rem !important; }\n  .mt-md-5, .my-md-5 { margin-top: 3rem !important; }\n  .mr-md-5, .mx-md-5 { margin-right: 3rem !important; }\n  .mb-md-5, .my-md-5 { margin-bottom: 3rem !important; }\n  .ml-md-5, .mx-md-5 { margin-left: 3rem !important; }\n  .p-md-0 { padding: 0px !important; }\n  .pt-md-0, .py-md-0 { padding-top: 0px !important; }\n  .pr-md-0, .px-md-0 { padding-right: 0px !important; }\n  .pb-md-0, .py-md-0 { padding-bottom: 0px !important; }\n  .pl-md-0, .px-md-0 { padding-left: 0px !important; }\n  .p-md-1 { padding: 0.25rem !important; }\n  .pt-md-1, .py-md-1 { padding-top: 0.25rem !important; }\n  .pr-md-1, .px-md-1 { padding-right: 0.25rem !important; }\n  .pb-md-1, .py-md-1 { padding-bottom: 0.25rem !important; }\n  .pl-md-1, .px-md-1 { padding-left: 0.25rem !important; }\n  .p-md-2 { padding: 0.5rem !important; }\n  .pt-md-2, .py-md-2 { padding-top: 0.5rem !important; }\n  .pr-md-2, .px-md-2 { padding-right: 0.5rem !important; }\n  .pb-md-2, .py-md-2 { padding-bottom: 0.5rem !important; }\n  .pl-md-2, .px-md-2 { padding-left: 0.5rem !important; }\n  .p-md-3 { padding: 1rem !important; }\n  .pt-md-3, .py-md-3 { padding-top: 1rem !important; }\n  .pr-md-3, .px-md-3 { padding-right: 1rem !important; }\n  .pb-md-3, .py-md-3 { padding-bottom: 1rem !important; }\n  .pl-md-3, .px-md-3 { padding-left: 1rem !important; }\n  .p-md-4 { padding: 1.5rem !important; }\n  .pt-md-4, .py-md-4 { padding-top: 1.5rem !important; }\n  .pr-md-4, .px-md-4 { padding-right: 1.5rem !important; }\n  .pb-md-4, .py-md-4 { padding-bottom: 1.5rem !important; }\n  .pl-md-4, .px-md-4 { padding-left: 1.5rem !important; }\n  .p-md-5 { padding: 3rem !important; }\n  .pt-md-5, .py-md-5 { padding-top: 3rem !important; }\n  .pr-md-5, .px-md-5 { padding-right: 3rem !important; }\n  .pb-md-5, .py-md-5 { padding-bottom: 3rem !important; }\n  .pl-md-5, .px-md-5 { padding-left: 3rem !important; }\n  .m-md-auto { margin: auto !important; }\n  .mt-md-auto, .my-md-auto { margin-top: auto !important; }\n  .mr-md-auto, .mx-md-auto { margin-right: auto !important; }\n  .mb-md-auto, .my-md-auto { margin-bottom: auto !important; }\n  .ml-md-auto, .mx-md-auto { margin-left: auto !important; }\n}@media (min-width: 992px) {\n  .m-lg-0 { margin: 0px !important; }\n  .mt-lg-0, .my-lg-0 { margin-top: 0px !important; }\n  .mr-lg-0, .mx-lg-0 { margin-right: 0px !important; }\n  .mb-lg-0, .my-lg-0 { margin-bottom: 0px !important; }\n  .ml-lg-0, .mx-lg-0 { margin-left: 0px !important; }\n  .m-lg-1 { margin: 0.25rem !important; }\n  .mt-lg-1, .my-lg-1 { margin-top: 0.25rem !important; }\n  .mr-lg-1, .mx-lg-1 { margin-right: 0.25rem !important; }\n  .mb-lg-1, .my-lg-1 { margin-bottom: 0.25rem !important; }\n  .ml-lg-1, .mx-lg-1 { margin-left: 0.25rem !important; }\n  .m-lg-2 { margin: 0.5rem !important; }\n  .mt-lg-2, .my-lg-2 { margin-top: 0.5rem !important; }\n  .mr-lg-2, .mx-lg-2 { margin-right: 0.5rem !important; }\n  .mb-lg-2, .my-lg-2 { margin-bottom: 0.5rem !important; }\n  .ml-lg-2, .mx-lg-2 { margin-left: 0.5rem !important; }\n  .m-lg-3 { margin: 1rem !important; }\n  .mt-lg-3, .my-lg-3 { margin-top: 1rem !important; }\n  .mr-lg-3, .mx-lg-3 { margin-right: 1rem !important; }\n  .mb-lg-3, .my-lg-3 { margin-bottom: 1rem !important; }\n  .ml-lg-3, .mx-lg-3 { margin-left: 1rem !important; }\n  .m-lg-4 { margin: 1.5rem !important; }\n  .mt-lg-4, .my-lg-4 { margin-top: 1.5rem !important; }\n  .mr-lg-4, .mx-lg-4 { margin-right: 1.5rem !important; }\n  .mb-lg-4, .my-lg-4 { margin-bottom: 1.5rem !important; }\n  .ml-lg-4, .mx-lg-4 { margin-left: 1.5rem !important; }\n  .m-lg-5 { margin: 3rem !important; }\n  .mt-lg-5, .my-lg-5 { margin-top: 3rem !important; }\n  .mr-lg-5, .mx-lg-5 { margin-right: 3rem !important; }\n  .mb-lg-5, .my-lg-5 { margin-bottom: 3rem !important; }\n  .ml-lg-5, .mx-lg-5 { margin-left: 3rem !important; }\n  .p-lg-0 { padding: 0px !important; }\n  .pt-lg-0, .py-lg-0 { padding-top: 0px !important; }\n  .pr-lg-0, .px-lg-0 { padding-right: 0px !important; }\n  .pb-lg-0, .py-lg-0 { padding-bottom: 0px !important; }\n  .pl-lg-0, .px-lg-0 { padding-left: 0px !important; }\n  .p-lg-1 { padding: 0.25rem !important; }\n  .pt-lg-1, .py-lg-1 { padding-top: 0.25rem !important; }\n  .pr-lg-1, .px-lg-1 { padding-right: 0.25rem !important; }\n  .pb-lg-1, .py-lg-1 { padding-bottom: 0.25rem !important; }\n  .pl-lg-1, .px-lg-1 { padding-left: 0.25rem !important; }\n  .p-lg-2 { padding: 0.5rem !important; }\n  .pt-lg-2, .py-lg-2 { padding-top: 0.5rem !important; }\n  .pr-lg-2, .px-lg-2 { padding-right: 0.5rem !important; }\n  .pb-lg-2, .py-lg-2 { padding-bottom: 0.5rem !important; }\n  .pl-lg-2, .px-lg-2 { padding-left: 0.5rem !important; }\n  .p-lg-3 { padding: 1rem !important; }\n  .pt-lg-3, .py-lg-3 { padding-top: 1rem !important; }\n  .pr-lg-3, .px-lg-3 { padding-right: 1rem !important; }\n  .pb-lg-3, .py-lg-3 { padding-bottom: 1rem !important; }\n  .pl-lg-3, .px-lg-3 { padding-left: 1rem !important; }\n  .p-lg-4 { padding: 1.5rem !important; }\n  .pt-lg-4, .py-lg-4 { padding-top: 1.5rem !important; }\n  .pr-lg-4, .px-lg-4 { padding-right: 1.5rem !important; }\n  .pb-lg-4, .py-lg-4 { padding-bottom: 1.5rem !important; }\n  .pl-lg-4, .px-lg-4 { padding-left: 1.5rem !important; }\n  .p-lg-5 { padding: 3rem !important; }\n  .pt-lg-5, .py-lg-5 { padding-top: 3rem !important; }\n  .pr-lg-5, .px-lg-5 { padding-right: 3rem !important; }\n  .pb-lg-5, .py-lg-5 { padding-bottom: 3rem !important; }\n  .pl-lg-5, .px-lg-5 { padding-left: 3rem !important; }\n  .m-lg-auto { margin: auto !important; }\n  .mt-lg-auto, .my-lg-auto { margin-top: auto !important; }\n  .mr-lg-auto, .mx-lg-auto { margin-right: auto !important; }\n  .mb-lg-auto, .my-lg-auto { margin-bottom: auto !important; }\n  .ml-lg-auto, .mx-lg-auto { margin-left: auto !important; }\n}@media (min-width: 1200px) {\n  .m-xl-0 { margin: 0px !important; }\n  .mt-xl-0, .my-xl-0 { margin-top: 0px !important; }\n  .mr-xl-0, .mx-xl-0 { margin-right: 0px !important; }\n  .mb-xl-0, .my-xl-0 { margin-bottom: 0px !important; }\n  .ml-xl-0, .mx-xl-0 { margin-left: 0px !important; }\n  .m-xl-1 { margin: 0.25rem !important; }\n  .mt-xl-1, .my-xl-1 { margin-top: 0.25rem !important; }\n  .mr-xl-1, .mx-xl-1 { margin-right: 0.25rem !important; }\n  .mb-xl-1, .my-xl-1 { margin-bottom: 0.25rem !important; }\n  .ml-xl-1, .mx-xl-1 { margin-left: 0.25rem !important; }\n  .m-xl-2 { margin: 0.5rem !important; }\n  .mt-xl-2, .my-xl-2 { margin-top: 0.5rem !important; }\n  .mr-xl-2, .mx-xl-2 { margin-right: 0.5rem !important; }\n  .mb-xl-2, .my-xl-2 { margin-bottom: 0.5rem !important; }\n  .ml-xl-2, .mx-xl-2 { margin-left: 0.5rem !important; }\n  .m-xl-3 { margin: 1rem !important; }\n  .mt-xl-3, .my-xl-3 { margin-top: 1rem !important; }\n  .mr-xl-3, .mx-xl-3 { margin-right: 1rem !important; }\n  .mb-xl-3, .my-xl-3 { margin-bottom: 1rem !important; }\n  .ml-xl-3, .mx-xl-3 { margin-left: 1rem !important; }\n  .m-xl-4 { margin: 1.5rem !important; }\n  .mt-xl-4, .my-xl-4 { margin-top: 1.5rem !important; }\n  .mr-xl-4, .mx-xl-4 { margin-right: 1.5rem !important; }\n  .mb-xl-4, .my-xl-4 { margin-bottom: 1.5rem !important; }\n  .ml-xl-4, .mx-xl-4 { margin-left: 1.5rem !important; }\n  .m-xl-5 { margin: 3rem !important; }\n  .mt-xl-5, .my-xl-5 { margin-top: 3rem !important; }\n  .mr-xl-5, .mx-xl-5 { margin-right: 3rem !important; }\n  .mb-xl-5, .my-xl-5 { margin-bottom: 3rem !important; }\n  .ml-xl-5, .mx-xl-5 { margin-left: 3rem !important; }\n  .p-xl-0 { padding: 0px !important; }\n  .pt-xl-0, .py-xl-0 { padding-top: 0px !important; }\n  .pr-xl-0, .px-xl-0 { padding-right: 0px !important; }\n  .pb-xl-0, .py-xl-0 { padding-bottom: 0px !important; }\n  .pl-xl-0, .px-xl-0 { padding-left: 0px !important; }\n  .p-xl-1 { padding: 0.25rem !important; }\n  .pt-xl-1, .py-xl-1 { padding-top: 0.25rem !important; }\n  .pr-xl-1, .px-xl-1 { padding-right: 0.25rem !important; }\n  .pb-xl-1, .py-xl-1 { padding-bottom: 0.25rem !important; }\n  .pl-xl-1, .px-xl-1 { padding-left: 0.25rem !important; }\n  .p-xl-2 { padding: 0.5rem !important; }\n  .pt-xl-2, .py-xl-2 { padding-top: 0.5rem !important; }\n  .pr-xl-2, .px-xl-2 { padding-right: 0.5rem !important; }\n  .pb-xl-2, .py-xl-2 { padding-bottom: 0.5rem !important; }\n  .pl-xl-2, .px-xl-2 { padding-left: 0.5rem !important; }\n  .p-xl-3 { padding: 1rem !important; }\n  .pt-xl-3, .py-xl-3 { padding-top: 1rem !important; }\n  .pr-xl-3, .px-xl-3 { padding-right: 1rem !important; }\n  .pb-xl-3, .py-xl-3 { padding-bottom: 1rem !important; }\n  .pl-xl-3, .px-xl-3 { padding-left: 1rem !important; }\n  .p-xl-4 { padding: 1.5rem !important; }\n  .pt-xl-4, .py-xl-4 { padding-top: 1.5rem !important; }\n  .pr-xl-4, .px-xl-4 { padding-right: 1.5rem !important; }\n  .pb-xl-4, .py-xl-4 { padding-bottom: 1.5rem !important; }\n  .pl-xl-4, .px-xl-4 { padding-left: 1.5rem !important; }\n  .p-xl-5 { padding: 3rem !important; }\n  .pt-xl-5, .py-xl-5 { padding-top: 3rem !important; }\n  .pr-xl-5, .px-xl-5 { padding-right: 3rem !important; }\n  .pb-xl-5, .py-xl-5 { padding-bottom: 3rem !important; }\n  .pl-xl-5, .px-xl-5 { padding-left: 3rem !important; }\n  .m-xl-auto { margin: auto !important; }\n  .mt-xl-auto, .my-xl-auto { margin-top: auto !important; }\n  .mr-xl-auto, .mx-xl-auto { margin-right: auto !important; }\n  .mb-xl-auto, .my-xl-auto { margin-bottom: auto !important; }\n  .ml-xl-auto, .mx-xl-auto { margin-left: auto !important; }\n}.text-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; }.text-justify { text-align: justify !important; }.text-nowrap { white-space: nowrap !important; }.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.text-left { text-align: left !important; }.text-right { text-align: right !important; }.text-center { text-align: center !important; }@media (min-width: 576px) {\n  .text-sm-left { text-align: left !important; }\n  .text-sm-right { text-align: right !important; }\n  .text-sm-center { text-align: center !important; }\n}@media (min-width: 768px) {\n  .text-md-left { text-align: left !important; }\n  .text-md-right { text-align: right !important; }\n  .text-md-center { text-align: center !important; }\n}@media (min-width: 992px) {\n  .text-lg-left { text-align: left !important; }\n  .text-lg-right { text-align: right !important; }\n  .text-lg-center { text-align: center !important; }\n}@media (min-width: 1200px) {\n  .text-xl-left { text-align: left !important; }\n  .text-xl-right { text-align: right !important; }\n  .text-xl-center { text-align: center !important; }\n}.text-lowercase { text-transform: lowercase !important; }.text-uppercase { text-transform: uppercase !important; }.text-capitalize { text-transform: capitalize !important; }.font-weight-light { font-weight: 300 !important; }.font-weight-normal { font-weight: 400 !important; }.font-weight-bold { font-weight: 700 !important; }.font-italic { font-style: italic !important; }.text-white { color: rgb(255, 255, 255) !important; }.text-primary { color: rgb(0, 123, 255) !important; }a.text-primary:focus, a.text-primary:hover { color: rgb(0, 98, 204) !important; }.text-secondary { color: rgb(108, 117, 125) !important; }a.text-secondary:focus, a.text-secondary:hover { color: rgb(84, 91, 98) !important; }.text-success { color: rgb(40, 167, 69) !important; }a.text-success:focus, a.text-success:hover { color: rgb(30, 126, 52) !important; }.text-info { color: rgb(23, 162, 184) !important; }a.text-info:focus, a.text-info:hover { color: rgb(17, 122, 139) !important; }.text-warning { color: rgb(255, 193, 7) !important; }a.text-warning:focus, a.text-warning:hover { color: rgb(211, 158, 0) !important; }.text-danger { color: rgb(220, 53, 69) !important; }a.text-danger:focus, a.text-danger:hover { color: rgb(189, 33, 48) !important; }.text-light { color: rgb(248, 249, 250) !important; }a.text-light:focus, a.text-light:hover { color: rgb(218, 224, 229) !important; }.text-dark { color: rgb(52, 58, 64) !important; }a.text-dark:focus, a.text-dark:hover { color: rgb(29, 33, 36) !important; }.text-body { color: rgb(33, 37, 41) !important; }.text-muted { color: rgb(108, 117, 125) !important; }.text-black-50 { color: rgba(0, 0, 0, 0.5) !important; }.text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }.text-hide { font: 0px/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0px; }.visible { visibility: visible !important; }.invisible { visibility: hidden !important; }@media print {\n  *, ::after, ::before { text-shadow: none !important; box-shadow: none !important; }\n  a:not(.btn) { text-decoration: underline; }\n  abbr[title]::after { content: \" (\" attr(title) \")\"; }\n  pre { white-space: pre-wrap !important; }\n  blockquote, pre { border: 1px solid rgb(173, 181, 189); break-inside: avoid; }\n  thead { display: table-header-group; }\n  img, tr { break-inside: avoid; }\n  h2, h3, p { orphans: 3; widows: 3; }\n  h2, h3 { break-after: avoid; }\n  @page { size: a3; }\n  body { min-width: 992px !important; }\n  .container { min-width: 992px !important; }\n  .navbar { display: none; }\n  .badge { border: 1px solid rgb(0, 0, 0); }\n  .table { border-collapse: collapse !important; }\n  .table td, .table th { background-color: rgb(255, 255, 255) !important; }\n  .table-bordered td, .table-bordered th { border: 1px solid rgb(222, 226, 230) !important; }\n  .table-dark { color: inherit; }\n  .table-dark tbody + tbody, .table-dark td, .table-dark th, .table-dark thead th { border-color: rgb(222, 226, 230); }\n  .table .thead-dark th { color: inherit; border-color: rgb(222, 226, 230); }\n}"},"childNodes":[],"id":22},{"type":3,"textContent":"\n\n  ","id":23},{"type":5,"textContent":" Custom styles for this template ","id":24},{"type":3,"textContent":"\n  ","id":25},{"type":2,"tagName":"link","attributes":{"_cssText":".container { max-width: 960px; }.lh-condensed { line-height: 1.25; }"},"childNodes":[],"id":26},{"type":3,"textContent":"\n","id":27}],"id":5},{"type":3,"textContent":"\n\n","id":28},{"type":2,"tagName":"body","attributes":{"class":"bg-light"},"childNodes":[{"type":3,"textContent":"\n\n  ","id":30},{"type":2,"tagName":"div","attributes":{"class":"container"},"childNodes":[{"type":3,"textContent":"\n    ","id":32},{"type":2,"tagName":"div","attributes":{"class":"py-5 text-center"},"childNodes":[{"type":3,"textContent":"\n      ","id":34},{"type":2,"tagName":"img","attributes":{"class":"d-block mx-auto mb-4","src":"http://127.0.0.1:5500/checkout-demo/index_files/bootstrap-solid.svg","alt":"","width":"72","height":"72"},"childNodes":[],"id":35},{"type":3,"textContent":"\n      ","id":36},{"type":2,"tagName":"h2","attributes":{},"childNodes":[{"type":3,"textContent":"Checkout form","id":38}],"id":37},{"type":3,"textContent":"\n      ","id":39},{"type":2,"tagName":"p","attributes":{"class":"lead"},"childNodes":[{"type":3,"textContent":"Below is an example form built entirely with Bootstrap's form controls. Each required form group\n        has\n        a validation state that can be triggered by attempting to submit the form without completing it.","id":41}],"id":40},{"type":3,"textContent":"\n    ","id":42}],"id":33},{"type":3,"textContent":"\n\n    ","id":43},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n      ","id":45},{"type":2,"tagName":"div","attributes":{"class":"col-md-4 order-md-2 mb-4"},"childNodes":[{"type":3,"textContent":"\n        ","id":47},{"type":2,"tagName":"h4","attributes":{"class":"d-flex justify-content-between align-items-center mb-3"},"childNodes":[{"type":3,"textContent":"\n          ","id":49},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Your cart","id":51}],"id":50},{"type":3,"textContent":"\n          ","id":52},{"type":2,"tagName":"span","attributes":{"class":"badge badge-secondary badge-pill"},"childNodes":[{"type":3,"textContent":"3","id":54}],"id":53},{"type":3,"textContent":"\n        ","id":55}],"id":48},{"type":3,"textContent":"\n        ","id":56},{"type":2,"tagName":"ul","attributes":{"class":"list-group mb-3"},"childNodes":[{"type":3,"textContent":"\n          ","id":58},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between lh-condensed"},"childNodes":[{"type":3,"textContent":"\n            ","id":60},{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"\n              ","id":62},{"type":2,"tagName":"h6","attributes":{"class":"my-0"},"childNodes":[{"type":3,"textContent":"Product name","id":64}],"id":63},{"type":3,"textContent":"\n              ","id":65},{"type":2,"tagName":"small","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Brief description","id":67}],"id":66},{"type":3,"textContent":"\n            ","id":68}],"id":61},{"type":3,"textContent":"\n            ","id":69},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"$12","id":71}],"id":70},{"type":3,"textContent":"\n          ","id":72}],"id":59},{"type":3,"textContent":"\n          ","id":73},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between lh-condensed"},"childNodes":[{"type":3,"textContent":"\n            ","id":75},{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"\n              ","id":77},{"type":2,"tagName":"h6","attributes":{"class":"my-0"},"childNodes":[{"type":3,"textContent":"Second product","id":79}],"id":78},{"type":3,"textContent":"\n              ","id":80},{"type":2,"tagName":"small","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Brief description","id":82}],"id":81},{"type":3,"textContent":"\n            ","id":83}],"id":76},{"type":3,"textContent":"\n            ","id":84},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"$8","id":86}],"id":85},{"type":3,"textContent":"\n          ","id":87}],"id":74},{"type":3,"textContent":"\n          ","id":88},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between lh-condensed"},"childNodes":[{"type":3,"textContent":"\n            ","id":90},{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"\n              ","id":92},{"type":2,"tagName":"h6","attributes":{"class":"my-0"},"childNodes":[{"type":3,"textContent":"Third item","id":94}],"id":93},{"type":3,"textContent":"\n              ","id":95},{"type":2,"tagName":"small","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Brief description","id":97}],"id":96},{"type":3,"textContent":"\n            ","id":98}],"id":91},{"type":3,"textContent":"\n            ","id":99},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"$5","id":101}],"id":100},{"type":3,"textContent":"\n          ","id":102}],"id":89},{"type":3,"textContent":"\n          ","id":103},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between bg-light"},"childNodes":[{"type":3,"textContent":"\n            ","id":105},{"type":2,"tagName":"div","attributes":{"class":"text-success"},"childNodes":[{"type":3,"textContent":"\n              ","id":107},{"type":2,"tagName":"h6","attributes":{"class":"my-0"},"childNodes":[{"type":3,"textContent":"Promo code","id":109}],"id":108},{"type":3,"textContent":"\n              ","id":110},{"type":2,"tagName":"small","attributes":{},"childNodes":[{"type":3,"textContent":"EXAMPLECODE","id":112}],"id":111},{"type":3,"textContent":"\n            ","id":113}],"id":106},{"type":3,"textContent":"\n            ","id":114},{"type":2,"tagName":"span","attributes":{"class":"text-success"},"childNodes":[{"type":3,"textContent":"-$5","id":116}],"id":115},{"type":3,"textContent":"\n          ","id":117}],"id":104},{"type":3,"textContent":"\n          ","id":118},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between"},"childNodes":[{"type":3,"textContent":"\n            ","id":120},{"type":2,"tagName":"span","attributes":{},"childNodes":[{"type":3,"textContent":"Total (USD)","id":122}],"id":121},{"type":3,"textContent":"\n            ","id":123},{"type":2,"tagName":"strong","attributes":{},"childNodes":[{"type":3,"textContent":"$20","id":125}],"id":124},{"type":3,"textContent":"\n          ","id":126}],"id":119},{"type":3,"textContent":"\n        ","id":127}],"id":57},{"type":3,"textContent":"\n\n        ","id":128},{"type":2,"tagName":"form","attributes":{"class":"card p-2"},"childNodes":[{"type":3,"textContent":"\n          ","id":130},{"type":2,"tagName":"div","attributes":{"class":"input-group"},"childNodes":[{"type":3,"textContent":"\n            ","id":132},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","placeholder":"Promo code"},"childNodes":[],"id":133},{"type":3,"textContent":"\n            ","id":134},{"type":2,"tagName":"div","attributes":{"class":"input-group-append"},"childNodes":[{"type":3,"textContent":"\n              ","id":136},{"type":2,"tagName":"button","attributes":{"type":"submit","class":"btn btn-secondary"},"childNodes":[{"type":3,"textContent":"Redeem","id":138}],"id":137},{"type":3,"textContent":"\n            ","id":139}],"id":135},{"type":3,"textContent":"\n          ","id":140}],"id":131},{"type":3,"textContent":"\n        ","id":141}],"id":129},{"type":3,"textContent":"\n      ","id":142}],"id":46},{"type":3,"textContent":"\n      ","id":143},{"type":2,"tagName":"div","attributes":{"class":"col-md-8 order-md-1"},"childNodes":[{"type":3,"textContent":"\n        ","id":145},{"type":2,"tagName":"h4","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"Billing address","id":147}],"id":146},{"type":3,"textContent":"\n        ","id":148},{"type":2,"tagName":"form","attributes":{"class":"needs-validation","novalidate":""},"childNodes":[{"type":3,"textContent":"\n          ","id":150},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n            ","id":152},{"type":2,"tagName":"div","attributes":{"class":"col-md-6 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":154},{"type":2,"tagName":"label","attributes":{"for":"firstName"},"childNodes":[{"type":3,"textContent":"First name","id":156}],"id":155},{"type":3,"textContent":"\n              ","id":157},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"firstName","placeholder":"","value":"","required":""},"childNodes":[],"id":158},{"type":3,"textContent":"\n              ","id":159},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Valid first name is required.\n              ","id":161}],"id":160},{"type":3,"textContent":"\n            ","id":162}],"id":153},{"type":3,"textContent":"\n            ","id":163},{"type":2,"tagName":"div","attributes":{"class":"col-md-6 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":165},{"type":2,"tagName":"label","attributes":{"for":"lastName"},"childNodes":[{"type":3,"textContent":"Last name","id":167}],"id":166},{"type":3,"textContent":"\n              ","id":168},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"lastName","placeholder":"","value":"","required":""},"childNodes":[],"id":169},{"type":3,"textContent":"\n              ","id":170},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Valid last name is required.\n              ","id":172}],"id":171},{"type":3,"textContent":"\n            ","id":173}],"id":164},{"type":3,"textContent":"\n          ","id":174}],"id":151},{"type":3,"textContent":"\n\n          ","id":175},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":177},{"type":2,"tagName":"label","attributes":{"for":"username"},"childNodes":[{"type":3,"textContent":"Username","id":179}],"id":178},{"type":3,"textContent":"\n            ","id":180},{"type":2,"tagName":"div","attributes":{"class":"input-group"},"childNodes":[{"type":3,"textContent":"\n              ","id":182},{"type":2,"tagName":"div","attributes":{"class":"input-group-prepend"},"childNodes":[{"type":3,"textContent":"\n                ","id":184},{"type":2,"tagName":"span","attributes":{"class":"input-group-text"},"childNodes":[{"type":3,"textContent":"@","id":186}],"id":185},{"type":3,"textContent":"\n              ","id":187}],"id":183},{"type":3,"textContent":"\n              ","id":188},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"username","placeholder":"Username","required":""},"childNodes":[],"id":189},{"type":3,"textContent":"\n              ","id":190},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback","style":"width: 100%;"},"childNodes":[{"type":3,"textContent":"\n                Your username is required.\n              ","id":192}],"id":191},{"type":3,"textContent":"\n            ","id":193}],"id":181},{"type":3,"textContent":"\n          ","id":194}],"id":176},{"type":3,"textContent":"\n\n          ","id":195},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":197},{"type":2,"tagName":"label","attributes":{"for":"email"},"childNodes":[{"type":3,"textContent":"Email ","id":199},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"(Optional)","id":201}],"id":200}],"id":198},{"type":3,"textContent":"\n            ","id":202},{"type":2,"tagName":"input","attributes":{"type":"email","class":"form-control","id":"email","placeholder":"you@example.com"},"childNodes":[],"id":203},{"type":3,"textContent":"\n            ","id":204},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n              Please enter a valid email address for shipping updates.\n            ","id":206}],"id":205},{"type":3,"textContent":"\n          ","id":207}],"id":196},{"type":3,"textContent":"\n\n          ","id":208},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":210},{"type":2,"tagName":"label","attributes":{"for":"address"},"childNodes":[{"type":3,"textContent":"Address","id":212}],"id":211},{"type":3,"textContent":"\n            ","id":213},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"address","placeholder":"1234 Main St","required":""},"childNodes":[],"id":214},{"type":3,"textContent":"\n            ","id":215},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n              Please enter your shipping address.\n            ","id":217}],"id":216},{"type":3,"textContent":"\n          ","id":218}],"id":209},{"type":3,"textContent":"\n\n          ","id":219},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":221},{"type":2,"tagName":"label","attributes":{"for":"address2"},"childNodes":[{"type":3,"textContent":"Address 2 ","id":223},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"(Optional)","id":225}],"id":224}],"id":222},{"type":3,"textContent":"\n            ","id":226},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"address2","placeholder":"Apartment or suite"},"childNodes":[],"id":227},{"type":3,"textContent":"\n          ","id":228}],"id":220},{"type":3,"textContent":"\n\n          ","id":229},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n            ","id":231},{"type":2,"tagName":"div","attributes":{"class":"col-md-5 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":233},{"type":2,"tagName":"label","attributes":{"for":"country"},"childNodes":[{"type":3,"textContent":"Country","id":235}],"id":234},{"type":3,"textContent":"\n              ","id":236},{"type":2,"tagName":"select","attributes":{"class":"custom-select d-block w-100","id":"country","required":""},"childNodes":[{"type":3,"textContent":"\n                ","id":238},{"type":2,"tagName":"option","attributes":{"value":"","selected":true},"childNodes":[{"type":3,"textContent":"Choose...","id":240}],"id":239},{"type":3,"textContent":"\n                ","id":241},{"type":2,"tagName":"option","attributes":{},"childNodes":[{"type":3,"textContent":"United States","id":243}],"id":242},{"type":3,"textContent":"\n              ","id":244}],"id":237},{"type":3,"textContent":"\n              ","id":245},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Please select a valid country.\n              ","id":247}],"id":246},{"type":3,"textContent":"\n            ","id":248}],"id":232},{"type":3,"textContent":"\n            ","id":249},{"type":2,"tagName":"div","attributes":{"class":"col-md-4 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":251},{"type":2,"tagName":"label","attributes":{"for":"state"},"childNodes":[{"type":3,"textContent":"State","id":253}],"id":252},{"type":3,"textContent":"\n              ","id":254},{"type":2,"tagName":"select","attributes":{"class":"custom-select d-block w-100","id":"state","required":""},"childNodes":[{"type":3,"textContent":"\n                ","id":256},{"type":2,"tagName":"option","attributes":{"value":"","selected":true},"childNodes":[{"type":3,"textContent":"Choose...","id":258}],"id":257},{"type":3,"textContent":"\n                ","id":259},{"type":2,"tagName":"option","attributes":{},"childNodes":[{"type":3,"textContent":"California","id":261}],"id":260},{"type":3,"textContent":"\n              ","id":262}],"id":255},{"type":3,"textContent":"\n              ","id":263},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Please provide a valid state.\n              ","id":265}],"id":264},{"type":3,"textContent":"\n            ","id":266}],"id":250},{"type":3,"textContent":"\n            ","id":267},{"type":2,"tagName":"div","attributes":{"class":"col-md-3 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":269},{"type":2,"tagName":"label","attributes":{"for":"zip"},"childNodes":[{"type":3,"textContent":"Zip","id":271}],"id":270},{"type":3,"textContent":"\n              ","id":272},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"zip","placeholder":"","required":""},"childNodes":[],"id":273},{"type":3,"textContent":"\n              ","id":274},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Zip code required.\n              ","id":276}],"id":275},{"type":3,"textContent":"\n            ","id":277}],"id":268},{"type":3,"textContent":"\n          ","id":278}],"id":230},{"type":3,"textContent":"\n          ","id":279},{"type":2,"tagName":"hr","attributes":{"class":"mb-4"},"childNodes":[],"id":280},{"type":3,"textContent":"\n          ","id":281},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-checkbox"},"childNodes":[{"type":3,"textContent":"\n            ","id":283},{"type":2,"tagName":"input","attributes":{"type":"checkbox","class":"custom-control-input","id":"same-address"},"childNodes":[],"id":284},{"type":3,"textContent":"\n            ","id":285},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"same-address"},"childNodes":[{"type":3,"textContent":"Shipping address is the same as my billing address","id":287}],"id":286},{"type":3,"textContent":"\n          ","id":288}],"id":282},{"type":3,"textContent":"\n          ","id":289},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-checkbox"},"childNodes":[{"type":3,"textContent":"\n            ","id":291},{"type":2,"tagName":"input","attributes":{"type":"checkbox","class":"custom-control-input","id":"save-info"},"childNodes":[],"id":292},{"type":3,"textContent":"\n            ","id":293},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"save-info"},"childNodes":[{"type":3,"textContent":"Save this information for next time","id":295}],"id":294},{"type":3,"textContent":"\n          ","id":296}],"id":290},{"type":3,"textContent":"\n          ","id":297},{"type":2,"tagName":"hr","attributes":{"class":"mb-4"},"childNodes":[],"id":298},{"type":3,"textContent":"\n\n          ","id":299},{"type":2,"tagName":"h4","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"Payment","id":301}],"id":300},{"type":3,"textContent":"\n\n          ","id":302},{"type":2,"tagName":"div","attributes":{"class":"d-block my-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":304},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-radio"},"childNodes":[{"type":3,"textContent":"\n              ","id":306},{"type":2,"tagName":"input","attributes":{"id":"credit","name":"paymentMethod","type":"radio","class":"custom-control-input","checked":true,"required":""},"childNodes":[],"id":307},{"type":3,"textContent":"\n              ","id":308},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"credit"},"childNodes":[{"type":3,"textContent":"Credit card","id":310}],"id":309},{"type":3,"textContent":"\n            ","id":311}],"id":305},{"type":3,"textContent":"\n            ","id":312},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-radio"},"childNodes":[{"type":3,"textContent":"\n              ","id":314},{"type":2,"tagName":"input","attributes":{"id":"debit","name":"paymentMethod","type":"radio","class":"custom-control-input","required":""},"childNodes":[],"id":315},{"type":3,"textContent":"\n              ","id":316},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"debit"},"childNodes":[{"type":3,"textContent":"Debit card","id":318}],"id":317},{"type":3,"textContent":"\n            ","id":319}],"id":313},{"type":3,"textContent":"\n            ","id":320},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-radio"},"childNodes":[{"type":3,"textContent":"\n              ","id":322},{"type":2,"tagName":"input","attributes":{"id":"paypal","name":"paymentMethod","type":"radio","class":"custom-control-input","required":""},"childNodes":[],"id":323},{"type":3,"textContent":"\n              ","id":324},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"paypal"},"childNodes":[{"type":3,"textContent":"PayPal","id":326}],"id":325},{"type":3,"textContent":"\n            ","id":327}],"id":321},{"type":3,"textContent":"\n          ","id":328}],"id":303},{"type":3,"textContent":"\n          ","id":329},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n            ","id":331},{"type":2,"tagName":"div","attributes":{"class":"col-md-6 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":333},{"type":2,"tagName":"label","attributes":{"for":"cc-name"},"childNodes":[{"type":3,"textContent":"Name on card","id":335}],"id":334},{"type":3,"textContent":"\n              ","id":336},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"cc-name","placeholder":"","required":""},"childNodes":[],"id":337},{"type":3,"textContent":"\n              ","id":338},{"type":2,"tagName":"small","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Full name as displayed on card","id":340}],"id":339},{"type":3,"textContent":"\n              ","id":341},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Name on card is required\n              ","id":343}],"id":342},{"type":3,"textContent":"\n            ","id":344}],"id":332},{"type":3,"textContent":"\n            ","id":345},{"type":2,"tagName":"div","attributes":{"class":"col-md-6 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":347},{"type":2,"tagName":"label","attributes":{"for":"cc-number"},"childNodes":[{"type":3,"textContent":"Credit card number","id":349}],"id":348},{"type":3,"textContent":"\n              ","id":350},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"cc-number","placeholder":"","required":""},"childNodes":[],"id":351},{"type":3,"textContent":"\n              ","id":352},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Credit card number is required\n              ","id":354}],"id":353},{"type":3,"textContent":"\n            ","id":355}],"id":346},{"type":3,"textContent":"\n          ","id":356}],"id":330},{"type":3,"textContent":"\n          ","id":357},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n            ","id":359},{"type":2,"tagName":"div","attributes":{"class":"col-md-3 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":361},{"type":2,"tagName":"label","attributes":{"for":"cc-expiration"},"childNodes":[{"type":3,"textContent":"Expiration","id":363}],"id":362},{"type":3,"textContent":"\n              ","id":364},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"cc-expiration","placeholder":"","required":""},"childNodes":[],"id":365},{"type":3,"textContent":"\n              ","id":366},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Expiration date required\n              ","id":368}],"id":367},{"type":3,"textContent":"\n            ","id":369}],"id":360},{"type":3,"textContent":"\n            ","id":370},{"type":2,"tagName":"div","attributes":{"class":"col-md-3 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":372},{"type":2,"tagName":"label","attributes":{"for":"cc-cvv"},"childNodes":[{"type":3,"textContent":"CVV","id":374}],"id":373},{"type":3,"textContent":"\n              ","id":375},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"cc-cvv","placeholder":"","required":""},"childNodes":[],"id":376},{"type":3,"textContent":"\n              ","id":377},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Security code required\n              ","id":379}],"id":378},{"type":3,"textContent":"\n            ","id":380}],"id":371},{"type":3,"textContent":"\n          ","id":381}],"id":358},{"type":3,"textContent":"\n          ","id":382},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":384},{"type":2,"tagName":"label","attributes":{"for":"email"},"childNodes":[{"type":3,"textContent":"textarea ","id":386},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"(Optional)","id":388}],"id":387}],"id":385},{"type":3,"textContent":"\n            ","id":389},{"type":2,"tagName":"textarea","attributes":{"name":"","id":"","cols":"30","rows":"10"},"childNodes":[],"id":390},{"type":3,"textContent":"\n          ","id":391}],"id":383},{"type":3,"textContent":"\n          ","id":392},{"type":2,"tagName":"hr","attributes":{"class":"mb-4"},"childNodes":[],"id":393},{"type":3,"textContent":"\n          ","id":394},{"type":2,"tagName":"button","attributes":{"class":"btn btn-primary btn-lg btn-block","type":"submit"},"childNodes":[{"type":3,"textContent":"Continue to checkout","id":396}],"id":395},{"type":3,"textContent":"\n        ","id":397}],"id":149},{"type":3,"textContent":"\n      ","id":398}],"id":144},{"type":3,"textContent":"\n    ","id":399}],"id":44},{"type":3,"textContent":"\n\n    ","id":400},{"type":2,"tagName":"footer","attributes":{"class":"my-5 pt-5 text-muted text-center text-small"},"childNodes":[{"type":3,"textContent":"\n      ","id":402},{"type":2,"tagName":"p","attributes":{"class":"mb-1"},"childNodes":[{"type":3,"textContent":"© 2017-2018 Company Name","id":404}],"id":403},{"type":3,"textContent":"\n      ","id":405},{"type":2,"tagName":"ul","attributes":{"class":"list-inline"},"childNodes":[{"type":3,"textContent":"\n        ","id":407},{"type":2,"tagName":"li","attributes":{"class":"list-inline-item"},"childNodes":[{"type":2,"tagName":"a","attributes":{"href":"https://getbootstrap.com/docs/4.1/examples/checkout/#"},"childNodes":[{"type":3,"textContent":"Privacy","id":410}],"id":409}],"id":408},{"type":3,"textContent":"\n        ","id":411},{"type":2,"tagName":"li","attributes":{"class":"list-inline-item"},"childNodes":[{"type":2,"tagName":"a","attributes":{"href":"https://getbootstrap.com/docs/4.1/examples/checkout/#"},"childNodes":[{"type":3,"textContent":"Terms","id":414}],"id":413}],"id":412},{"type":3,"textContent":"\n        ","id":415},{"type":2,"tagName":"li","attributes":{"class":"list-inline-item"},"childNodes":[{"type":2,"tagName":"a","attributes":{"href":"https://getbootstrap.com/docs/4.1/examples/checkout/#"},"childNodes":[{"type":3,"textContent":"Support","id":418}],"id":417}],"id":416},{"type":3,"textContent":"\n      ","id":419}],"id":406},{"type":3,"textContent":"\n    ","id":420}],"id":401},{"type":3,"textContent":"\n  ","id":421}],"id":31},{"type":3,"textContent":"\n\n  ","id":422},{"type":5,"textContent":" Bootstrap core JavaScript\n    ================================================== ","id":423},{"type":3,"textContent":"\n  ","id":424},{"type":5,"textContent":" Placed at the end of the document so the pages load faster ","id":425},{"type":3,"textContent":"\n  ","id":426},{"type":2,"tagName":"script","attributes":{"src":"http://127.0.0.1:5500/checkout-demo/index_files/jquery-3.3.1.slim.min.js","integrity":"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo","crossorigin":"anonymous"},"childNodes":[],"id":427},{"type":3,"textContent":"\n  ","id":428},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":430}],"id":429},{"type":3,"textContent":"\n  ","id":431},{"type":2,"tagName":"script","attributes":{"src":"http://127.0.0.1:5500/checkout-demo/index_files/popper.min.js"},"childNodes":[],"id":432},{"type":3,"textContent":"\n  ","id":433},{"type":2,"tagName":"script","attributes":{"src":"http://127.0.0.1:5500/checkout-demo/index_files/bootstrap.min.js"},"childNodes":[],"id":434},{"type":3,"textContent":"\n  ","id":435},{"type":2,"tagName":"script","attributes":{"src":"http://127.0.0.1:5500/checkout-demo/index_files/holder.min.js"},"childNodes":[],"id":436},{"type":3,"textContent":"\n  ","id":437},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":439}],"id":438},{"type":3,"textContent":"\n\n  ","id":440},{"type":5,"textContent":" logrocket ","id":441},{"type":3,"textContent":"\n\n  ","id":442},{"type":5,"textContent":" <script src=\"../reverse-engineer/LogRocket.js\"></script>\n  <script>\n    LogRocket.init('bqsqi3/serenity');\n  </script> ","id":443},{"type":3,"textContent":"\n\n  ","id":444},{"type":5,"textContent":" fundebug ","id":445},{"type":3,"textContent":"\n\n  ","id":446},{"type":5,"textContent":" <script src=\"https://js.fundebug.cn/fundebug.1.2.3.min.js\"\n  apikey=\"2e96393d0884f5ef28b95645008da9926cb6750dae6b2a4c7a2403fac4d889ab\" silentVideo=false></script>\n   ","id":447},{"type":3,"textContent":"\n\n  ","id":448},{"type":5,"textContent":" fullstory ","id":449},{"type":3,"textContent":"\n\n  ","id":450},{"type":5,"textContent":" <script>\n    window['_fs_debug'] = false;\n    window['_fs_host'] = 'fullstory.com';\n    window['_fs_org'] = 'EYQ69';\n    window['_fs_namespace'] = 'FS';\n    (function (m, n, e, t, l, o, g, y) {\n      if (e in m) { if (m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window[\"_fs_namespace\"].'); } return; }\n      g = m[e] = function (a, b) { g.q ? g.q.push([a, b]) : g._api(a, b); }; g.q = [];\n      o = n.createElement(t); o.async = 1; o.src = 'https://' + _fs_host + '/s/fs.js';\n      y = n.getElementsByTagName(t)[0]; y.parentNode.insertBefore(o, y);\n      g.identify = function (i, v) { g(l, { uid: i }); if (v) g(l, v) }; g.setUserVars = function (v) { g(l, v) }; g.event = function (i, v) { g('event', { n: i, p: v }) };\n      g.shutdown = function () { g(\"rec\", !1) }; g.restart = function () { g(\"rec\", !0) };\n      g.consent = function (a) { g(\"consent\", !arguments.length || a) };\n      g.identifyAccount = function (i, v) { o = 'account'; v = v || {}; v.acctId = i; g(o, v) };\n      g.clearUserCookie = function () { };\n    })(window, document, window['_fs_namespace'], 'script', 'user');\n  </script> ","id":451},{"type":3,"textContent":"\n\n  ","id":452},{"type":2,"tagName":"script","attributes":{"src":"http://127.0.0.1:5500/src/record.js"},"childNodes":[],"id":453},{"type":3,"textContent":"\n  ","id":454},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":456}],"id":455},{"type":3,"textContent":"\n\n","id":457},{"type":5,"textContent":" Code injected by live-server ","id":458},{"type":3,"textContent":"\n","id":459},{"type":2,"tagName":"script","attributes":{"type":"text/javascript"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":461}],"id":460},{"type":3,"textContent":"\n\n","id":462}],"id":29}],"id":4}],"id":1},"initialOffset":{"left":0,"top":583}},"timestamp":1539674870338},{"type":3,"data":{"source":3,"id":1,"x":0,"y":582},"timestamp":1539674871058},{"type":3,"data":{"source":3,"id":1,"x":0,"y":528},"timestamp":1539674871158},{"type":3,"data":{"source":3,"id":1,"x":0,"y":375},"timestamp":1539674871258},{"type":3,"data":{"source":3,"id":1,"x":0,"y":318},"timestamp":1539674871358},{"type":3,"data":{"source":3,"id":1,"x":0,"y":317},"timestamp":1539674871523},{"type":3,"data":{"source":3,"id":1,"x":0,"y":275},"timestamp":1539674871624},{"type":3,"data":{"source":3,"id":1,"x":0,"y":148},"timestamp":1539674871724},{"type":3,"data":{"source":3,"id":1,"x":0,"y":59},"timestamp":1539674871824},{"type":3,"data":{"source":3,"id":1,"x":0,"y":53},"timestamp":1539674871923},{"type":3,"data":{"source":3,"id":1,"x":0,"y":54},"timestamp":1539674872190},{"type":3,"data":{"source":1,"positions":[{"x":1065,"y":237,"timeOffset":0}]},"timestamp":1539674872291},{"type":3,"data":{"source":3,"id":1,"x":0,"y":156},"timestamp":1539674872291},{"type":3,"data":{"source":3,"id":1,"x":0,"y":468},"timestamp":1539674872392},{"type":3,"data":{"source":3,"id":1,"x":0,"y":477},"timestamp":1539674872492},{"type":3,"data":{"source":3,"id":1,"x":0,"y":478},"timestamp":1539674872641},{"type":3,"data":{"source":3,"id":1,"x":0,"y":527},"timestamp":1539674872741},{"type":3,"data":{"source":1,"positions":[{"x":1064,"y":239,"timeOffset":-467}]},"timestamp":1539674872792},{"type":3,"data":{"source":3,"id":1,"x":0,"y":699},"timestamp":1539674872841},{"type":3,"data":{"source":3,"id":1,"x":0,"y":742},"timestamp":1539674872942},{"type":3,"data":{"source":1,"positions":[{"x":1064,"y":239,"timeOffset":-417},{"x":1065,"y":239,"timeOffset":-384},{"x":1066,"y":239,"timeOffset":-336},{"x":1066,"y":238,"timeOffset":-116},{"x":1066,"y":236,"timeOffset":-85},{"x":1068,"y":229,"timeOffset":-35},{"x":1077,"y":205,"timeOffset":-2}]},"timestamp":1539674873292},{"type":3,"data":{"source":1,"positions":[{"x":1088,"y":163,"timeOffset":-470},{"x":1098,"y":115,"timeOffset":-437},{"x":1104,"y":80,"timeOffset":-403},{"x":1104,"y":50,"timeOffset":-370},{"x":1104,"y":43,"timeOffset":-336},{"x":1104,"y":42,"timeOffset":-237},{"x":1104,"y":32,"timeOffset":-203},{"x":1105,"y":11,"timeOffset":-170}]},"timestamp":1539674873793}];
+
 const app = new App({
   target: document.body,
   data: {
-    name: 'world',
+    events,
   },
 });
 

From e99bd3245f07340143e022cdadb7675657e0e6ea Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 17 Oct 2018 19:10:45 +0800
Subject: [PATCH 028/524] add player controller

---
 src/App.html        |   3 --
 src/Controller.html | 108 +++++++++++++++++++++++++++++++++++++++++
 src/Player.html     | 114 +++++++++++++++++++++++++-------------------
 src/util.js         |   7 ---
 src/utils.js        |  33 +++++++++++++
 5 files changed, 206 insertions(+), 59 deletions(-)
 create mode 100644 src/Controller.html
 delete mode 100644 src/util.js
 create mode 100644 src/utils.js

diff --git a/src/App.html b/src/App.html
index c54fde621a..f19586f42b 100644
--- a/src/App.html
+++ b/src/App.html
@@ -1,6 +1,3 @@
-<h1>
-  rrweb player playground
-</h1>
 <Player {events} />
 
 <style>
diff --git a/src/Controller.html b/src/Controller.html
new file mode 100644
index 0000000000..6a62eb1e3a
--- /dev/null
+++ b/src/Controller.html
@@ -0,0 +1,108 @@
+<div class="rr-controller">
+  <div class="rr-timeline">
+    <span class="rr-timeline__time">{formatTime(currentTime)}</span>
+    <div class="rr-progress">
+      <div class="rr-progress__step" ref:step style="width: {percentage}"></div>
+      <div class="rr-progress__handler" ref:handler style="left: {percentage}"></div>
+    </div>
+    <span class="rr-timeline__time">{formatTime(meta.totalTime)}</span>
+  </div>
+  <button>pause</button>
+</div>
+
+<script>
+  import { formatTime } from './utils.js';
+
+  export default {
+    data() {
+      return {
+        currentTime: 0,
+      };
+    },
+    computed: {
+      meta({ replayer }) {
+        return replayer.getMetaData();
+      },
+      percentage({ currentTime, meta }) {
+        return `${100 * currentTime / meta.totalTime}%`;
+      },
+    },
+    helpers: {
+      formatTime,
+    },
+    methods: {
+      loopTimer() {
+        const now = performance.now();
+        const self = this;
+
+        function update(step) {
+          let { currentTime, meta } = self.get();
+          currentTime = Math.floor(step - now);
+          self.set({ currentTime });
+
+          if (currentTime < meta.totalTime) {
+            requestAnimationFrame(update);
+          }
+        }
+
+        requestAnimationFrame(update);
+      },
+    },
+    onupdate({ changed, current }) {
+      if (changed.replayer) {
+        this.loopTimer();
+        current.replayer.play();
+      }
+    },
+  };
+</script>
+
+<style>
+  .rr-controller {
+    width: 100%;
+    height: 80px;
+    background: rgba(0, 0, 0, .5);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    padding: 10px;
+  }
+
+  .rr-timeline {
+    width: 80%;
+    display: flex;
+    align-items: center
+  }
+
+  .rr-timeline__time {
+    padding: 0 20px;
+    color: white;
+  }
+
+  .rr-progress {
+    width: 100%;
+    height: 4px;
+    background: white;
+    position: relative;
+    border-radius: 3px;
+  }
+
+  .rr-progress__step {
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: orange
+  }
+
+  .rr-progress__handler {
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    position: absolute;
+    top: 2px;
+    transform: translate(-50%, -50%);
+    background: orange;
+  }
+</style>
\ No newline at end of file
diff --git a/src/Player.html b/src/Player.html
index 1d5a561759..b47fe52ab6 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -1,60 +1,24 @@
 <div class="rr-player">
   <div class="rr-player__frame" ref:frame { style }></div>
+  {#if replayer}
+  <Controller { replayer } />
+  {/if}
 </div>
 
-<style>
-  .rr-player {
-    border: 3px solid indianred;
-    float: left;
-    clear: both;
-  }
-
-  .rr-player__frame {
-    overflow: hidden;
-  }
-
-  :global(.replayer-wrapper) {
-    float: left;
-    clear: both;
-    transform-origin: top left;
-    left: 50%;
-    top: 50%;
-    border: 2px solid grey;
-  }
-
-  /* get from rrweb */
-  :global(.replayer-wrapper) {
-    position: relative;
-  }
-
-  :global(.replayer-mouse) {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-  }
-
-  :global(.replayer-mouse::after) {
-    content: '';
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    border-radius: 10px;
-    background: thistle;
-    transform: translate(-10px, -10px);
-    opacity: 0.5;
-  }
-</style>
-
 <script>
   import { Replayer } from 'rrweb';
-  import { inlineCss } from './util.js';
+  import { inlineCss } from './utils.js';
 
   export default {
+    components: {
+      Controller: './Controller.html',
+    },
     data() {
       return {
         width: 1024,
         height: 576,
         events: [],
+        replayer: null,
       };
     },
     computed: {
@@ -68,8 +32,8 @@
     methods: {
       updateScale(el, frameDimension) {
         const { width, height } = this.get();
-        const widthScale = width / frameDimension.width;
-        const heightScale = height / frameDimension.height;
+        const widthScale = (width - 20) / frameDimension.width;
+        const heightScale = (height - 20) / frameDimension.height;
         el.style.transform =
           `scale(${Math.min(widthScale, heightScale, 1)})` +
           'translate(-50%, -50%)';
@@ -80,11 +44,63 @@
       const replayer = new Replayer(events, {
         speed: 1,
         root: this.refs.frame,
-        onResize: (dimension) => this.updateScale(replayer.wrapper, dimension),
       });
-      replayer.play();
+      replayer.on('resize', (dimension) =>
+        this.updateScale(replayer.wrapper, dimension)
+      );
+      this.set({
+        replayer,
+      });
     },
   };
 
 
-</script>
\ No newline at end of file
+</script>
+
+<style>
+  .rr-player {
+    background: white;
+    float: left;
+    clear: both;
+  }
+
+  .rr-player__frame {
+    overflow: hidden;
+  }
+
+  :global(.replayer-wrapper) {
+    float: left;
+    clear: both;
+    transform-origin: top left;
+    left: calc(50% - 10px);
+    top: calc(50% - 10px);
+    margin: 10px;
+    box-shadow: 0 3px 28px rgba(0, 0, 0, 0.25), 0 1px 10px rgba(0, 0, 0, 0.22);
+  }
+
+  :global(.replayer-wrapper > iframe) {
+    border: none;
+  }
+
+  /* get from rrweb */
+  :global(.replayer-wrapper) {
+    position: relative;
+  }
+
+  :global(.replayer-mouse) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+  }
+
+  :global(.replayer-mouse::after) {
+    content: '';
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    background: thistle;
+    transform: translate(-10px, -10px);
+    opacity: 0.5;
+  }
+</style>
\ No newline at end of file
diff --git a/src/util.js b/src/util.js
deleted file mode 100644
index da07ec1932..0000000000
--- a/src/util.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export function inlineCss(cssObj) {
-  let style = '';
-  Object.keys(cssObj).forEach(key => {
-    style += `${key}: ${cssObj[key]};`;
-  });
-  return style;
-}
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000000..b19c460383
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,33 @@
+export function inlineCss(cssObj) {
+  let style = '';
+  Object.keys(cssObj).forEach(key => {
+    style += `${key}: ${cssObj[key]};`;
+  });
+  return style;
+}
+
+function padZero(num, len = 2) {
+  const threshold = Math.pow(10, len - 1);
+  if (num < threshold) {
+    num = String(num);
+    while (String(threshold).length > num.length) {
+      num = '0' + num;
+    }
+  }
+  return num;
+}
+
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+export function formatTime(ms) {
+  const hour = Math.floor(ms / HOUR);
+  ms = ms % HOUR;
+  const minute = Math.floor(ms / MINUTE);
+  ms = ms % MINUTE;
+  const second = Math.floor(ms / SECOND);
+  if (hour) {
+    return `${padZero(hour)}:${padZero(minute)}:${padZero(minute)}`;
+  }
+  return `${padZero(hour)}:${padZero(second)}`;
+}

From 0f7fa678712637b66bbe735f88503d7e26bb5e4c Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 18 Oct 2018 15:21:51 +0800
Subject: [PATCH 029/524] impl controller play, pause and speed

---
 src/Controller.html | 62 ++++++++++++++++++++++++++++++++++++++-------
 src/main.js         |  2 +-
 2 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/src/Controller.html b/src/Controller.html
index 6a62eb1e3a..fae075420c 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -7,7 +7,14 @@
     </div>
     <span class="rr-timeline__time">{formatTime(meta.totalTime)}</span>
   </div>
-  <button>pause</button>
+  <div class="rr-controller__btns">
+    <button on:click="toggle()">
+      {isPlaying ? 'pause' : 'play'}
+    </button>
+    {#each [1, 2, 4, 8] as s}
+    <button class:active="s === speed" on:click="set({ speed: s })">{s}x</button>
+    {/each}
+  </div>
 </div>
 
 <script>
@@ -17,6 +24,8 @@
     data() {
       return {
         currentTime: 0,
+        isPlaying: false,
+        speed: 1,
       };
     },
     computed: {
@@ -24,7 +33,8 @@
         return replayer.getMetaData();
       },
       percentage({ currentTime, meta }) {
-        return `${100 * currentTime / meta.totalTime}%`;
+        const percent = Math.min(1, currentTime / meta.totalTime);
+        return `${100 * percent}%`;
       },
     },
     helpers: {
@@ -33,25 +43,55 @@
     methods: {
       loopTimer() {
         const now = performance.now();
+        let lastStep = now;
         const self = this;
 
         function update(step) {
-          let { currentTime, meta } = self.get();
-          currentTime = Math.floor(step - now);
-          self.set({ currentTime });
+          let { currentTime, meta, isPlaying, speed } = self.get();
+          if (!isPlaying) {
+            return;
+          }
+
+          const stepDiff = Math.floor(step - lastStep);
+          lastStep = step;
+          currentTime += speed * stepDiff;
+          self.set({
+            currentTime: Math.min(currentTime, meta.totalTime),
+          });
 
           if (currentTime < meta.totalTime) {
             requestAnimationFrame(update);
+          } else {
+            self.set({ isPlaying: false, currentTime: 0 });
           }
         }
 
         requestAnimationFrame(update);
       },
-    },
-    onupdate({ changed, current }) {
-      if (changed.replayer) {
+      play() {
+        const { replayer } = this.get();
+        // replayer.play();
         this.loopTimer();
-        current.replayer.play();
+      },
+      pause() {
+        const { replayer } = this.get();
+        replayer.pause();
+      },
+      toggle() {
+        const { isPlaying } = this.get();
+        this.set({ isPlaying: !isPlaying });
+        if (isPlaying) {
+          this.pause();
+        } else {
+          this.play();
+        }
+      },
+    },
+    onupdate({ changed, current, previous }) {
+      if (current.replayer && !previous) {
+        // auto play
+        this.set({ isPlaying: true });
+        this.play();
       }
     },
   };
@@ -105,4 +145,8 @@
     transform: translate(-50%, -50%);
     background: orange;
   }
+
+  .rr-controller__btns button.active {
+    color: orange;
+  }
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index e69387f863..09822892cc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,7 +3,7 @@ import App from './App.html';
 const events =
   // prettier-ignore
   // eslint-disable-next-line
-  [{"type":0,"data":{"href":"http://127.0.0.1:5500/checkout-demo/index.html?"},"timestamp":1539674870305},{"type":1,"data":{"width":1173,"height":711},"timestamp":1539674870317},{"type":2,"data":{"node":{"type":0,"childNodes":[{"type":1,"name":"html","publicId":"","systemId":"","id":2},{"type":5,"textContent":" saved from url=(0052)https://getbootstrap.com/docs/4.1/examples/checkout/ ","id":3},{"type":2,"tagName":"html","attributes":{"lang":"en"},"childNodes":[{"type":2,"tagName":"head","attributes":{},"childNodes":[{"type":3,"textContent":"\n  ","id":6},{"type":2,"tagName":"meta","attributes":{"http-equiv":"Content-Type","content":"text/html; charset=UTF-8"},"childNodes":[],"id":7},{"type":3,"textContent":"\n\n  ","id":8},{"type":2,"tagName":"meta","attributes":{"name":"viewport","content":"width=device-width, initial-scale=1, shrink-to-fit=no"},"childNodes":[],"id":9},{"type":3,"textContent":"\n  ","id":10},{"type":2,"tagName":"meta","attributes":{"name":"description","content":""},"childNodes":[],"id":11},{"type":3,"textContent":"\n  ","id":12},{"type":2,"tagName":"meta","attributes":{"name":"author","content":""},"childNodes":[],"id":13},{"type":3,"textContent":"\n  ","id":14},{"type":2,"tagName":"link","attributes":{"rel":"icon","href":"https://getbootstrap.com/favicon.ico"},"childNodes":[],"id":15},{"type":3,"textContent":"\n\n  ","id":16},{"type":2,"tagName":"title","attributes":{},"childNodes":[{"type":3,"textContent":"Checkout example for Bootstrap","id":18}],"id":17},{"type":3,"textContent":"\n\n  ","id":19},{"type":5,"textContent":" Bootstrap core CSS ","id":20},{"type":3,"textContent":"\n  ","id":21},{"type":2,"tagName":"link","attributes":{"_cssText":":root { --blue:#007bff; --indigo:#6610f2; --purple:#6f42c1; --pink:#e83e8c; --red:#dc3545; --orange:#fd7e14; --yellow:#ffc107; --green:#28a745; --teal:#20c997; --cyan:#17a2b8; --white:#fff; --gray:#6c757d; --gray-dark:#343a40; --primary:#007bff; --secondary:#6c757d; --success:#28a745; --info:#17a2b8; --warning:#ffc107; --danger:#dc3545; --light:#f8f9fa; --dark:#343a40; --breakpoint-xs:0; --breakpoint-sm:576px; --breakpoint-md:768px; --breakpoint-lg:992px; --breakpoint-xl:1200px; --font-family-sans-serif:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"; --font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace; }*, ::after, ::before { box-sizing: border-box; }html { font-family: sans-serif; line-height: 1.15; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }body { margin: 0px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: rgb(33, 37, 41); text-align: left; background-color: rgb(255, 255, 255); }[tabindex=\"-1\"]:focus { outline: 0px !important; }hr { box-sizing: content-box; height: 0px; overflow: visible; }h1, h2, h3, h4, h5, h6 { margin-top: 0px; margin-bottom: 0.5rem; }p { margin-top: 0px; margin-bottom: 1rem; }abbr[data-original-title], abbr[title] { text-decoration: underline dotted; cursor: help; border-bottom: 0px; }address { margin-bottom: 1rem; font-style: normal; line-height: inherit; }dl, ol, ul { margin-top: 0px; margin-bottom: 1rem; }ol ol, ol ul, ul ol, ul ul { margin-bottom: 0px; }dt { font-weight: 700; }dd { margin-bottom: 0.5rem; margin-left: 0px; }blockquote { margin: 0px 0px 1rem; }dfn { font-style: italic; }b, strong { font-weight: bolder; }small { font-size: 80%; }sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }sub { bottom: -0.25em; }sup { top: -0.5em; }a { color: rgb(0, 123, 255); text-decoration: none; background-color: transparent; }a:hover { color: rgb(0, 86, 179); text-decoration: underline; }a:not([href]):not([tabindex]) { color: inherit; text-decoration: none; }a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover { color: inherit; text-decoration: none; }a:not([href]):not([tabindex]):focus { outline: 0px; }code, kbd, pre, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; font-size: 1em; }pre { margin-top: 0px; margin-bottom: 1rem; overflow: auto; }figure { margin: 0px 0px 1rem; }img { vertical-align: middle; border-style: none; }svg { overflow: hidden; vertical-align: middle; }table { border-collapse: collapse; }caption { padding-top: 0.75rem; padding-bottom: 0.75rem; color: rgb(108, 117, 125); text-align: left; caption-side: bottom; }th { text-align: inherit; }label { display: inline-block; margin-bottom: 0.5rem; }button { border-radius: 0px; }button:focus { outline: -webkit-focus-ring-color auto 5px; }button, input, optgroup, select, textarea { margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit; }button, input { overflow: visible; }button, select { text-transform: none; }[type=\"reset\"], [type=\"submit\"], button, html [type=\"button\"] { -webkit-appearance: button; }input[type=\"checkbox\"], input[type=\"radio\"] { box-sizing: border-box; padding: 0px; }input[type=\"date\"], input[type=\"datetime-local\"], input[type=\"month\"], input[type=\"time\"] { -webkit-appearance: listbox; }textarea { overflow: auto; resize: vertical; }fieldset { min-width: 0px; padding: 0px; margin: 0px; border: 0px; }legend { display: block; width: 100%; max-width: 100%; padding: 0px; margin-bottom: 0.5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; }progress { vertical-align: baseline; }[type=\"number\"]::-webkit-inner-spin-button, [type=\"number\"]::-webkit-outer-spin-button { height: auto; }[type=\"search\"] { outline-offset: -2px; -webkit-appearance: none; }[type=\"search\"]::-webkit-search-cancel-button, [type=\"search\"]::-webkit-search-decoration { -webkit-appearance: none; }::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }output { display: inline-block; }summary { display: list-item; cursor: pointer; }template { display: none; }[hidden] { display: none !important; }.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5rem; font-family: inherit; font-weight: 500; line-height: 1.2; color: inherit; }.h1, h1 { font-size: 2.5rem; }.h2, h2 { font-size: 2rem; }.h3, h3 { font-size: 1.75rem; }.h4, h4 { font-size: 1.5rem; }.h5, h5 { font-size: 1.25rem; }.h6, h6 { font-size: 1rem; }.lead { font-size: 1.25rem; font-weight: 300; }.display-1 { font-size: 6rem; font-weight: 300; line-height: 1.2; }.display-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2; }.display-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2; }.display-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; }hr { margin-top: 1rem; margin-bottom: 1rem; border-width: 1px 0px 0px; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0.1); }.small, small { font-size: 80%; font-weight: 400; }.mark, mark { padding: 0.2em; background-color: rgb(252, 248, 227); }.list-unstyled { padding-left: 0px; list-style: none; }.list-inline { padding-left: 0px; list-style: none; }.list-inline-item { display: inline-block; }.list-inline-item:not(:last-child) { margin-right: 0.5rem; }.initialism { font-size: 90%; text-transform: uppercase; }.blockquote { margin-bottom: 1rem; font-size: 1.25rem; }.blockquote-footer { display: block; font-size: 80%; color: rgb(108, 117, 125); }.blockquote-footer::before { content: \"— \"; }.img-fluid { max-width: 100%; height: auto; }.img-thumbnail { padding: 0.25rem; background-color: rgb(255, 255, 255); border: 1px solid rgb(222, 226, 230); border-radius: 0.25rem; max-width: 100%; height: auto; }.figure { display: inline-block; }.figure-img { margin-bottom: 0.5rem; line-height: 1; }.figure-caption { font-size: 90%; color: rgb(108, 117, 125); }code { font-size: 87.5%; color: rgb(232, 62, 140); word-break: break-word; }a > code { color: inherit; }kbd { padding: 0.2rem 0.4rem; font-size: 87.5%; color: rgb(255, 255, 255); background-color: rgb(33, 37, 41); border-radius: 0.2rem; }kbd kbd { padding: 0px; font-size: 100%; font-weight: 700; }pre { display: block; font-size: 87.5%; color: rgb(33, 37, 41); }pre code { font-size: inherit; color: inherit; word-break: normal; }.pre-scrollable { max-height: 340px; overflow-y: scroll; }.container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }@media (min-width: 576px) {\n  .container { max-width: 540px; }\n}@media (min-width: 768px) {\n  .container { max-width: 720px; }\n}@media (min-width: 992px) {\n  .container { max-width: 960px; }\n}@media (min-width: 1200px) {\n  .container { max-width: 1140px; }\n}.container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }.no-gutters { margin-right: 0px; margin-left: 0px; }.no-gutters > .col, .no-gutters > [class*=\"col-\"] { padding-right: 0px; padding-left: 0px; }.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; }.col { flex-basis: 0px; flex-grow: 1; max-width: 100%; }.col-auto { flex: 0 0 auto; width: auto; max-width: none; }.col-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }.col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }.col-3 { flex: 0 0 25%; max-width: 25%; }.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }.col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }.col-6 { flex: 0 0 50%; max-width: 50%; }.col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }.col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }.col-9 { flex: 0 0 75%; max-width: 75%; }.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }.col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }.col-12 { flex: 0 0 100%; max-width: 100%; }.order-first { order: -1; }.order-last { order: 13; }.order-0 { order: 0; }.order-1 { order: 1; }.order-2 { order: 2; }.order-3 { order: 3; }.order-4 { order: 4; }.order-5 { order: 5; }.order-6 { order: 6; }.order-7 { order: 7; }.order-8 { order: 8; }.order-9 { order: 9; }.order-10 { order: 10; }.order-11 { order: 11; }.order-12 { order: 12; }.offset-1 { margin-left: 8.33333%; }.offset-2 { margin-left: 16.6667%; }.offset-3 { margin-left: 25%; }.offset-4 { margin-left: 33.3333%; }.offset-5 { margin-left: 41.6667%; }.offset-6 { margin-left: 50%; }.offset-7 { margin-left: 58.3333%; }.offset-8 { margin-left: 66.6667%; }.offset-9 { margin-left: 75%; }.offset-10 { margin-left: 83.3333%; }.offset-11 { margin-left: 91.6667%; }@media (min-width: 576px) {\n  .col-sm { flex-basis: 0px; flex-grow: 1; max-width: 100%; }\n  .col-sm-auto { flex: 0 0 auto; width: auto; max-width: none; }\n  .col-sm-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }\n  .col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }\n  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }\n  .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }\n  .col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }\n  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }\n  .col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }\n  .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }\n  .col-sm-9 { flex: 0 0 75%; max-width: 75%; }\n  .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }\n  .col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }\n  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }\n  .order-sm-first { order: -1; }\n  .order-sm-last { order: 13; }\n  .order-sm-0 { order: 0; }\n  .order-sm-1 { order: 1; }\n  .order-sm-2 { order: 2; }\n  .order-sm-3 { order: 3; }\n  .order-sm-4 { order: 4; }\n  .order-sm-5 { order: 5; }\n  .order-sm-6 { order: 6; }\n  .order-sm-7 { order: 7; }\n  .order-sm-8 { order: 8; }\n  .order-sm-9 { order: 9; }\n  .order-sm-10 { order: 10; }\n  .order-sm-11 { order: 11; }\n  .order-sm-12 { order: 12; }\n  .offset-sm-0 { margin-left: 0px; }\n  .offset-sm-1 { margin-left: 8.33333%; }\n  .offset-sm-2 { margin-left: 16.6667%; }\n  .offset-sm-3 { margin-left: 25%; }\n  .offset-sm-4 { margin-left: 33.3333%; }\n  .offset-sm-5 { margin-left: 41.6667%; }\n  .offset-sm-6 { margin-left: 50%; }\n  .offset-sm-7 { margin-left: 58.3333%; }\n  .offset-sm-8 { margin-left: 66.6667%; }\n  .offset-sm-9 { margin-left: 75%; }\n  .offset-sm-10 { margin-left: 83.3333%; }\n  .offset-sm-11 { margin-left: 91.6667%; }\n}@media (min-width: 768px) {\n  .col-md { flex-basis: 0px; flex-grow: 1; max-width: 100%; }\n  .col-md-auto { flex: 0 0 auto; width: auto; max-width: none; }\n  .col-md-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }\n  .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }\n  .col-md-3 { flex: 0 0 25%; max-width: 25%; }\n  .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }\n  .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }\n  .col-md-6 { flex: 0 0 50%; max-width: 50%; }\n  .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }\n  .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }\n  .col-md-9 { flex: 0 0 75%; max-width: 75%; }\n  .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }\n  .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }\n  .col-md-12 { flex: 0 0 100%; max-width: 100%; }\n  .order-md-first { order: -1; }\n  .order-md-last { order: 13; }\n  .order-md-0 { order: 0; }\n  .order-md-1 { order: 1; }\n  .order-md-2 { order: 2; }\n  .order-md-3 { order: 3; }\n  .order-md-4 { order: 4; }\n  .order-md-5 { order: 5; }\n  .order-md-6 { order: 6; }\n  .order-md-7 { order: 7; }\n  .order-md-8 { order: 8; }\n  .order-md-9 { order: 9; }\n  .order-md-10 { order: 10; }\n  .order-md-11 { order: 11; }\n  .order-md-12 { order: 12; }\n  .offset-md-0 { margin-left: 0px; }\n  .offset-md-1 { margin-left: 8.33333%; }\n  .offset-md-2 { margin-left: 16.6667%; }\n  .offset-md-3 { margin-left: 25%; }\n  .offset-md-4 { margin-left: 33.3333%; }\n  .offset-md-5 { margin-left: 41.6667%; }\n  .offset-md-6 { margin-left: 50%; }\n  .offset-md-7 { margin-left: 58.3333%; }\n  .offset-md-8 { margin-left: 66.6667%; }\n  .offset-md-9 { margin-left: 75%; }\n  .offset-md-10 { margin-left: 83.3333%; }\n  .offset-md-11 { margin-left: 91.6667%; }\n}@media (min-width: 992px) {\n  .col-lg { flex-basis: 0px; flex-grow: 1; max-width: 100%; }\n  .col-lg-auto { flex: 0 0 auto; width: auto; max-width: none; }\n  .col-lg-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }\n  .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }\n  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }\n  .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }\n  .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }\n  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }\n  .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }\n  .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }\n  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }\n  .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }\n  .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }\n  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }\n  .order-lg-first { order: -1; }\n  .order-lg-last { order: 13; }\n  .order-lg-0 { order: 0; }\n  .order-lg-1 { order: 1; }\n  .order-lg-2 { order: 2; }\n  .order-lg-3 { order: 3; }\n  .order-lg-4 { order: 4; }\n  .order-lg-5 { order: 5; }\n  .order-lg-6 { order: 6; }\n  .order-lg-7 { order: 7; }\n  .order-lg-8 { order: 8; }\n  .order-lg-9 { order: 9; }\n  .order-lg-10 { order: 10; }\n  .order-lg-11 { order: 11; }\n  .order-lg-12 { order: 12; }\n  .offset-lg-0 { margin-left: 0px; }\n  .offset-lg-1 { margin-left: 8.33333%; }\n  .offset-lg-2 { margin-left: 16.6667%; }\n  .offset-lg-3 { margin-left: 25%; }\n  .offset-lg-4 { margin-left: 33.3333%; }\n  .offset-lg-5 { margin-left: 41.6667%; }\n  .offset-lg-6 { margin-left: 50%; }\n  .offset-lg-7 { margin-left: 58.3333%; }\n  .offset-lg-8 { margin-left: 66.6667%; }\n  .offset-lg-9 { margin-left: 75%; }\n  .offset-lg-10 { margin-left: 83.3333%; }\n  .offset-lg-11 { margin-left: 91.6667%; }\n}@media (min-width: 1200px) {\n  .col-xl { flex-basis: 0px; flex-grow: 1; max-width: 100%; }\n  .col-xl-auto { flex: 0 0 auto; width: auto; max-width: none; }\n  .col-xl-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }\n  .col-xl-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }\n  .col-xl-3 { flex: 0 0 25%; max-width: 25%; }\n  .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }\n  .col-xl-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }\n  .col-xl-6 { flex: 0 0 50%; max-width: 50%; }\n  .col-xl-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }\n  .col-xl-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }\n  .col-xl-9 { flex: 0 0 75%; max-width: 75%; }\n  .col-xl-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }\n  .col-xl-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }\n  .col-xl-12 { flex: 0 0 100%; max-width: 100%; }\n  .order-xl-first { order: -1; }\n  .order-xl-last { order: 13; }\n  .order-xl-0 { order: 0; }\n  .order-xl-1 { order: 1; }\n  .order-xl-2 { order: 2; }\n  .order-xl-3 { order: 3; }\n  .order-xl-4 { order: 4; }\n  .order-xl-5 { order: 5; }\n  .order-xl-6 { order: 6; }\n  .order-xl-7 { order: 7; }\n  .order-xl-8 { order: 8; }\n  .order-xl-9 { order: 9; }\n  .order-xl-10 { order: 10; }\n  .order-xl-11 { order: 11; }\n  .order-xl-12 { order: 12; }\n  .offset-xl-0 { margin-left: 0px; }\n  .offset-xl-1 { margin-left: 8.33333%; }\n  .offset-xl-2 { margin-left: 16.6667%; }\n  .offset-xl-3 { margin-left: 25%; }\n  .offset-xl-4 { margin-left: 33.3333%; }\n  .offset-xl-5 { margin-left: 41.6667%; }\n  .offset-xl-6 { margin-left: 50%; }\n  .offset-xl-7 { margin-left: 58.3333%; }\n  .offset-xl-8 { margin-left: 66.6667%; }\n  .offset-xl-9 { margin-left: 75%; }\n  .offset-xl-10 { margin-left: 83.3333%; }\n  .offset-xl-11 { margin-left: 91.6667%; }\n}.table { width: 100%; margin-bottom: 1rem; background-color: transparent; }.table td, .table th { padding: 0.75rem; vertical-align: top; border-top: 1px solid rgb(222, 226, 230); }.table thead th { vertical-align: bottom; border-bottom: 2px solid rgb(222, 226, 230); }.table tbody + tbody { border-top: 2px solid rgb(222, 226, 230); }.table .table { background-color: rgb(255, 255, 255); }.table-sm td, .table-sm th { padding: 0.3rem; }.table-bordered { border: 1px solid rgb(222, 226, 230); }.table-bordered td, .table-bordered th { border: 1px solid rgb(222, 226, 230); }.table-bordered thead td, .table-bordered thead th { border-bottom-width: 2px; }.table-borderless tbody + tbody, .table-borderless td, .table-borderless th, .table-borderless thead th { border: 0px; }.table-striped tbody tr:nth-of-type(2n+1) { background-color: rgba(0, 0, 0, 0.05); }.table-hover tbody tr:hover { background-color: rgba(0, 0, 0, 0.075); }.table-primary, .table-primary > td, .table-primary > th { background-color: rgb(184, 218, 255); }.table-hover .table-primary:hover { background-color: rgb(159, 205, 255); }.table-hover .table-primary:hover > td, .table-hover .table-primary:hover > th { background-color: rgb(159, 205, 255); }.table-secondary, .table-secondary > td, .table-secondary > th { background-color: rgb(214, 216, 219); }.table-hover .table-secondary:hover { background-color: rgb(200, 203, 207); }.table-hover .table-secondary:hover > td, .table-hover .table-secondary:hover > th { background-color: rgb(200, 203, 207); }.table-success, .table-success > td, .table-success > th { background-color: rgb(195, 230, 203); }.table-hover .table-success:hover { background-color: rgb(177, 223, 187); }.table-hover .table-success:hover > td, .table-hover .table-success:hover > th { background-color: rgb(177, 223, 187); }.table-info, .table-info > td, .table-info > th { background-color: rgb(190, 229, 235); }.table-hover .table-info:hover { background-color: rgb(171, 221, 229); }.table-hover .table-info:hover > td, .table-hover .table-info:hover > th { background-color: rgb(171, 221, 229); }.table-warning, .table-warning > td, .table-warning > th { background-color: rgb(255, 238, 186); }.table-hover .table-warning:hover { background-color: rgb(255, 232, 161); }.table-hover .table-warning:hover > td, .table-hover .table-warning:hover > th { background-color: rgb(255, 232, 161); }.table-danger, .table-danger > td, .table-danger > th { background-color: rgb(245, 198, 203); }.table-hover .table-danger:hover { background-color: rgb(241, 176, 183); }.table-hover .table-danger:hover > td, .table-hover .table-danger:hover > th { background-color: rgb(241, 176, 183); }.table-light, .table-light > td, .table-light > th { background-color: rgb(253, 253, 254); }.table-hover .table-light:hover { background-color: rgb(236, 236, 246); }.table-hover .table-light:hover > td, .table-hover .table-light:hover > th { background-color: rgb(236, 236, 246); }.table-dark, .table-dark > td, .table-dark > th { background-color: rgb(198, 200, 202); }.table-hover .table-dark:hover { background-color: rgb(185, 187, 190); }.table-hover .table-dark:hover > td, .table-hover .table-dark:hover > th { background-color: rgb(185, 187, 190); }.table-active, .table-active > td, .table-active > th { background-color: rgba(0, 0, 0, 0.075); }.table-hover .table-active:hover { background-color: rgba(0, 0, 0, 0.075); }.table-hover .table-active:hover > td, .table-hover .table-active:hover > th { background-color: rgba(0, 0, 0, 0.075); }.table .thead-dark th { color: rgb(255, 255, 255); background-color: rgb(33, 37, 41); border-color: rgb(50, 56, 62); }.table .thead-light th { color: rgb(73, 80, 87); background-color: rgb(233, 236, 239); border-color: rgb(222, 226, 230); }.table-dark { color: rgb(255, 255, 255); background-color: rgb(33, 37, 41); }.table-dark td, .table-dark th, .table-dark thead th { border-color: rgb(50, 56, 62); }.table-dark.table-bordered { border: 0px; }.table-dark.table-striped tbody tr:nth-of-type(2n+1) { background-color: rgba(255, 255, 255, 0.05); }.table-dark.table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.075); }@media (max-width: 575.98px) {\n  .table-responsive-sm { display: block; width: 100%; overflow-x: auto; }\n  .table-responsive-sm > .table-bordered { border: 0px; }\n}@media (max-width: 767.98px) {\n  .table-responsive-md { display: block; width: 100%; overflow-x: auto; }\n  .table-responsive-md > .table-bordered { border: 0px; }\n}@media (max-width: 991.98px) {\n  .table-responsive-lg { display: block; width: 100%; overflow-x: auto; }\n  .table-responsive-lg > .table-bordered { border: 0px; }\n}@media (max-width: 1199.98px) {\n  .table-responsive-xl { display: block; width: 100%; overflow-x: auto; }\n  .table-responsive-xl > .table-bordered { border: 0px; }\n}.table-responsive { display: block; width: 100%; overflow-x: auto; }.table-responsive > .table-bordered { border: 0px; }.form-control { display: block; width: 100%; height: calc(2.25rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgb(206, 212, 218); border-radius: 0.25rem; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; }@media not all {\n  .form-control { transition: none 0s ease 0s; }\n}.form-control:focus { color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); border-color: rgb(128, 189, 255); outline: 0px; box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.form-control::-webkit-input-placeholder { color: rgb(108, 117, 125); opacity: 1; }.form-control::placeholder { color: rgb(108, 117, 125); opacity: 1; }.form-control:disabled, .form-control[readonly] { background-color: rgb(233, 236, 239); opacity: 1; }.form-control-file, .form-control-range { display: block; width: 100%; }.col-form-label { padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); margin-bottom: 0px; font-size: inherit; line-height: 1.5; }.col-form-label-lg { padding-top: calc(0.5rem + 1px); padding-bottom: calc(0.5rem + 1px); font-size: 1.25rem; line-height: 1.5; }.col-form-label-sm { padding-top: calc(0.25rem + 1px); padding-bottom: calc(0.25rem + 1px); font-size: 0.875rem; line-height: 1.5; }.form-control-plaintext { display: block; width: 100%; padding-top: 0.375rem; padding-bottom: 0.375rem; margin-bottom: 0px; line-height: 1.5; color: rgb(33, 37, 41); background-color: transparent; border-style: solid; border-color: transparent; border-image: initial; border-width: 1px 0px; }.form-control-plaintext.form-control-lg, .form-control-plaintext.form-control-sm { padding-right: 0px; padding-left: 0px; }.form-control-sm { height: calc(1.8125rem + 2px); padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }.form-control-lg { height: calc(2.875rem + 2px); padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; }select.form-control[multiple], select.form-control[size] { height: auto; }textarea.form-control { height: auto; }.form-group { margin-bottom: 1rem; }.form-text { display: block; margin-top: 0.25rem; }.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }.form-row > .col, .form-row > [class*=\"col-\"] { padding-right: 5px; padding-left: 5px; }.form-check { position: relative; display: block; padding-left: 1.25rem; }.form-check-input { position: absolute; margin-top: 0.3rem; margin-left: -1.25rem; }.form-check-input:disabled ~ .form-check-label { color: rgb(108, 117, 125); }.form-check-label { margin-bottom: 0px; }.form-check-inline { display: inline-flex; align-items: center; padding-left: 0px; margin-right: 0.75rem; }.form-check-inline .form-check-input { position: static; margin-top: 0px; margin-right: 0.3125rem; margin-left: 0px; }.valid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 80%; color: rgb(40, 167, 69); }.valid-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; font-size: 0.875rem; line-height: 1.5; color: rgb(255, 255, 255); background-color: rgba(40, 167, 69, 0.9); border-radius: 0.25rem; }.custom-select.is-valid, .form-control.is-valid, .was-validated .custom-select:valid, .was-validated .form-control:valid { border-color: rgb(40, 167, 69); }.custom-select.is-valid:focus, .form-control.is-valid:focus, .was-validated .custom-select:valid:focus, .was-validated .form-control:valid:focus { border-color: rgb(40, 167, 69); box-shadow: rgba(40, 167, 69, 0.25) 0px 0px 0px 0.2rem; }.custom-select.is-valid ~ .valid-feedback, .custom-select.is-valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback, .form-control.is-valid ~ .valid-tooltip, .was-validated .custom-select:valid ~ .valid-feedback, .was-validated .custom-select:valid ~ .valid-tooltip, .was-validated .form-control:valid ~ .valid-feedback, .was-validated .form-control:valid ~ .valid-tooltip { display: block; }.form-control-file.is-valid ~ .valid-feedback, .form-control-file.is-valid ~ .valid-tooltip, .was-validated .form-control-file:valid ~ .valid-feedback, .was-validated .form-control-file:valid ~ .valid-tooltip { display: block; }.form-check-input.is-valid ~ .form-check-label, .was-validated .form-check-input:valid ~ .form-check-label { color: rgb(40, 167, 69); }.form-check-input.is-valid ~ .valid-feedback, .form-check-input.is-valid ~ .valid-tooltip, .was-validated .form-check-input:valid ~ .valid-feedback, .was-validated .form-check-input:valid ~ .valid-tooltip { display: block; }.custom-control-input.is-valid ~ .custom-control-label, .was-validated .custom-control-input:valid ~ .custom-control-label { color: rgb(40, 167, 69); }.custom-control-input.is-valid ~ .custom-control-label::before, .was-validated .custom-control-input:valid ~ .custom-control-label::before { background-color: rgb(113, 221, 138); }.custom-control-input.is-valid ~ .valid-feedback, .custom-control-input.is-valid ~ .valid-tooltip, .was-validated .custom-control-input:valid ~ .valid-feedback, .was-validated .custom-control-input:valid ~ .valid-tooltip { display: block; }.custom-control-input.is-valid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:valid:checked ~ .custom-control-label::before { background-color: rgb(52, 206, 87); }.custom-control-input.is-valid:focus ~ .custom-control-label::before, .was-validated .custom-control-input:valid:focus ~ .custom-control-label::before { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(40, 167, 69, 0.25) 0px 0px 0px 0.2rem; }.custom-file-input.is-valid ~ .custom-file-label, .was-validated .custom-file-input:valid ~ .custom-file-label { border-color: rgb(40, 167, 69); }.custom-file-input.is-valid ~ .custom-file-label::after, .was-validated .custom-file-input:valid ~ .custom-file-label::after { border-color: inherit; }.custom-file-input.is-valid ~ .valid-feedback, .custom-file-input.is-valid ~ .valid-tooltip, .was-validated .custom-file-input:valid ~ .valid-feedback, .was-validated .custom-file-input:valid ~ .valid-tooltip { display: block; }.custom-file-input.is-valid:focus ~ .custom-file-label, .was-validated .custom-file-input:valid:focus ~ .custom-file-label { box-shadow: rgba(40, 167, 69, 0.25) 0px 0px 0px 0.2rem; }.invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 80%; color: rgb(220, 53, 69); }.invalid-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; font-size: 0.875rem; line-height: 1.5; color: rgb(255, 255, 255); background-color: rgba(220, 53, 69, 0.9); border-radius: 0.25rem; }.custom-select.is-invalid, .form-control.is-invalid, .was-validated .custom-select:invalid, .was-validated .form-control:invalid { border-color: rgb(220, 53, 69); }.custom-select.is-invalid:focus, .form-control.is-invalid:focus, .was-validated .custom-select:invalid:focus, .was-validated .form-control:invalid:focus { border-color: rgb(220, 53, 69); box-shadow: rgba(220, 53, 69, 0.25) 0px 0px 0px 0.2rem; }.custom-select.is-invalid ~ .invalid-feedback, .custom-select.is-invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback, .form-control.is-invalid ~ .invalid-tooltip, .was-validated .custom-select:invalid ~ .invalid-feedback, .was-validated .custom-select:invalid ~ .invalid-tooltip, .was-validated .form-control:invalid ~ .invalid-feedback, .was-validated .form-control:invalid ~ .invalid-tooltip { display: block; }.form-control-file.is-invalid ~ .invalid-feedback, .form-control-file.is-invalid ~ .invalid-tooltip, .was-validated .form-control-file:invalid ~ .invalid-feedback, .was-validated .form-control-file:invalid ~ .invalid-tooltip { display: block; }.form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label { color: rgb(220, 53, 69); }.form-check-input.is-invalid ~ .invalid-feedback, .form-check-input.is-invalid ~ .invalid-tooltip, .was-validated .form-check-input:invalid ~ .invalid-feedback, .was-validated .form-check-input:invalid ~ .invalid-tooltip { display: block; }.custom-control-input.is-invalid ~ .custom-control-label, .was-validated .custom-control-input:invalid ~ .custom-control-label { color: rgb(220, 53, 69); }.custom-control-input.is-invalid ~ .custom-control-label::before, .was-validated .custom-control-input:invalid ~ .custom-control-label::before { background-color: rgb(239, 162, 169); }.custom-control-input.is-invalid ~ .invalid-feedback, .custom-control-input.is-invalid ~ .invalid-tooltip, .was-validated .custom-control-input:invalid ~ .invalid-feedback, .was-validated .custom-control-input:invalid ~ .invalid-tooltip { display: block; }.custom-control-input.is-invalid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before { background-color: rgb(228, 96, 109); }.custom-control-input.is-invalid:focus ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(220, 53, 69, 0.25) 0px 0px 0px 0.2rem; }.custom-file-input.is-invalid ~ .custom-file-label, .was-validated .custom-file-input:invalid ~ .custom-file-label { border-color: rgb(220, 53, 69); }.custom-file-input.is-invalid ~ .custom-file-label::after, .was-validated .custom-file-input:invalid ~ .custom-file-label::after { border-color: inherit; }.custom-file-input.is-invalid ~ .invalid-feedback, .custom-file-input.is-invalid ~ .invalid-tooltip, .was-validated .custom-file-input:invalid ~ .invalid-feedback, .was-validated .custom-file-input:invalid ~ .invalid-tooltip { display: block; }.custom-file-input.is-invalid:focus ~ .custom-file-label, .was-validated .custom-file-input:invalid:focus ~ .custom-file-label { box-shadow: rgba(220, 53, 69, 0.25) 0px 0px 0px 0.2rem; }.form-inline { display: flex; flex-flow: row wrap; align-items: center; }.form-inline .form-check { width: 100%; }@media (min-width: 576px) {\n  .form-inline label { display: flex; align-items: center; justify-content: center; margin-bottom: 0px; }\n  .form-inline .form-group { display: flex; flex: 0 0 auto; flex-flow: row wrap; align-items: center; margin-bottom: 0px; }\n  .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }\n  .form-inline .form-control-plaintext { display: inline-block; }\n  .form-inline .custom-select, .form-inline .input-group { width: auto; }\n  .form-inline .form-check { display: flex; align-items: center; justify-content: center; width: auto; padding-left: 0px; }\n  .form-inline .form-check-input { position: relative; margin-top: 0px; margin-right: 0.25rem; margin-left: 0px; }\n  .form-inline .custom-control { align-items: center; justify-content: center; }\n  .form-inline .custom-control-label { margin-bottom: 0px; }\n}.btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; user-select: none; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; }@media not all {\n  .btn { transition: none 0s ease 0s; }\n}.btn:focus, .btn:hover { text-decoration: none; }.btn.focus, .btn:focus { outline: 0px; box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.btn.disabled, .btn:disabled { opacity: 0.65; }.btn:not(:disabled):not(.disabled) { cursor: pointer; }a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; }.btn-primary { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.btn-primary:hover { color: rgb(255, 255, 255); background-color: rgb(0, 105, 217); border-color: rgb(0, 98, 204); }.btn-primary.focus, .btn-primary:focus { box-shadow: rgba(0, 123, 255, 0.5) 0px 0px 0px 0.2rem; }.btn-primary.disabled, .btn-primary:disabled { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(0, 98, 204); border-color: rgb(0, 92, 191); }.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus { box-shadow: rgba(0, 123, 255, 0.5) 0px 0px 0px 0.2rem; }.btn-secondary { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); border-color: rgb(108, 117, 125); }.btn-secondary:hover { color: rgb(255, 255, 255); background-color: rgb(90, 98, 104); border-color: rgb(84, 91, 98); }.btn-secondary.focus, .btn-secondary:focus { box-shadow: rgba(108, 117, 125, 0.5) 0px 0px 0px 0.2rem; }.btn-secondary.disabled, .btn-secondary:disabled { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); border-color: rgb(108, 117, 125); }.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(84, 91, 98); border-color: rgb(78, 85, 91); }.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus { box-shadow: rgba(108, 117, 125, 0.5) 0px 0px 0px 0.2rem; }.btn-success { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69); }.btn-success:hover { color: rgb(255, 255, 255); background-color: rgb(33, 136, 56); border-color: rgb(30, 126, 52); }.btn-success.focus, .btn-success:focus { box-shadow: rgba(40, 167, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-success.disabled, .btn-success:disabled { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69); }.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(30, 126, 52); border-color: rgb(28, 116, 48); }.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show > .btn-success.dropdown-toggle:focus { box-shadow: rgba(40, 167, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-info { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); border-color: rgb(23, 162, 184); }.btn-info:hover { color: rgb(255, 255, 255); background-color: rgb(19, 132, 150); border-color: rgb(17, 122, 139); }.btn-info.focus, .btn-info:focus { box-shadow: rgba(23, 162, 184, 0.5) 0px 0px 0px 0.2rem; }.btn-info.disabled, .btn-info:disabled { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); border-color: rgb(23, 162, 184); }.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show > .btn-info.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(17, 122, 139); border-color: rgb(16, 112, 127); }.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, .show > .btn-info.dropdown-toggle:focus { box-shadow: rgba(23, 162, 184, 0.5) 0px 0px 0px 0.2rem; }.btn-warning { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); border-color: rgb(255, 193, 7); }.btn-warning:hover { color: rgb(33, 37, 41); background-color: rgb(224, 168, 0); border-color: rgb(211, 158, 0); }.btn-warning.focus, .btn-warning:focus { box-shadow: rgba(255, 193, 7, 0.5) 0px 0px 0px 0.2rem; }.btn-warning.disabled, .btn-warning:disabled { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); border-color: rgb(255, 193, 7); }.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show > .btn-warning.dropdown-toggle { color: rgb(33, 37, 41); background-color: rgb(211, 158, 0); border-color: rgb(198, 149, 0); }.btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus, .show > .btn-warning.dropdown-toggle:focus { box-shadow: rgba(255, 193, 7, 0.5) 0px 0px 0px 0.2rem; }.btn-danger { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); border-color: rgb(220, 53, 69); }.btn-danger:hover { color: rgb(255, 255, 255); background-color: rgb(200, 35, 51); border-color: rgb(189, 33, 48); }.btn-danger.focus, .btn-danger:focus { box-shadow: rgba(220, 53, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-danger.disabled, .btn-danger:disabled { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); border-color: rgb(220, 53, 69); }.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(189, 33, 48); border-color: rgb(178, 31, 45); }.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-danger.dropdown-toggle:focus { box-shadow: rgba(220, 53, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-light { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); border-color: rgb(248, 249, 250); }.btn-light:hover { color: rgb(33, 37, 41); background-color: rgb(226, 230, 234); border-color: rgb(218, 224, 229); }.btn-light.focus, .btn-light:focus { box-shadow: rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem; }.btn-light.disabled, .btn-light:disabled { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); border-color: rgb(248, 249, 250); }.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle { color: rgb(33, 37, 41); background-color: rgb(218, 224, 229); border-color: rgb(211, 217, 223); }.btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus, .show > .btn-light.dropdown-toggle:focus { box-shadow: rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem; }.btn-dark { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); border-color: rgb(52, 58, 64); }.btn-dark:hover { color: rgb(255, 255, 255); background-color: rgb(35, 39, 43); border-color: rgb(29, 33, 36); }.btn-dark.focus, .btn-dark:focus { box-shadow: rgba(52, 58, 64, 0.5) 0px 0px 0px 0.2rem; }.btn-dark.disabled, .btn-dark:disabled { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); border-color: rgb(52, 58, 64); }.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, .show > .btn-dark.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(29, 33, 36); border-color: rgb(23, 26, 29); }.btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-dark.dropdown-toggle:focus { box-shadow: rgba(52, 58, 64, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-primary { color: rgb(0, 123, 255); background-color: transparent; background-image: none; border-color: rgb(0, 123, 255); }.btn-outline-primary:hover { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.btn-outline-primary.focus, .btn-outline-primary:focus { box-shadow: rgba(0, 123, 255, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-primary.disabled, .btn-outline-primary:disabled { color: rgb(0, 123, 255); background-color: transparent; }.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: rgba(0, 123, 255, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-secondary { color: rgb(108, 117, 125); background-color: transparent; background-image: none; border-color: rgb(108, 117, 125); }.btn-outline-secondary:hover { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); border-color: rgb(108, 117, 125); }.btn-outline-secondary.focus, .btn-outline-secondary:focus { box-shadow: rgba(108, 117, 125, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-secondary.disabled, .btn-outline-secondary:disabled { color: rgb(108, 117, 125); background-color: transparent; }.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show > .btn-outline-secondary.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); border-color: rgb(108, 117, 125); }.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus { box-shadow: rgba(108, 117, 125, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-success { color: rgb(40, 167, 69); background-color: transparent; background-image: none; border-color: rgb(40, 167, 69); }.btn-outline-success:hover { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69); }.btn-outline-success.focus, .btn-outline-success:focus { box-shadow: rgba(40, 167, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-success.disabled, .btn-outline-success:disabled { color: rgb(40, 167, 69); background-color: transparent; }.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, .show > .btn-outline-success.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69); }.btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-success.dropdown-toggle:focus { box-shadow: rgba(40, 167, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-info { color: rgb(23, 162, 184); background-color: transparent; background-image: none; border-color: rgb(23, 162, 184); }.btn-outline-info:hover { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); border-color: rgb(23, 162, 184); }.btn-outline-info.focus, .btn-outline-info:focus { box-shadow: rgba(23, 162, 184, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-info.disabled, .btn-outline-info:disabled { color: rgb(23, 162, 184); background-color: transparent; }.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, .show > .btn-outline-info.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); border-color: rgb(23, 162, 184); }.btn-outline-info:not(:disabled):not(.disabled).active:focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-info.dropdown-toggle:focus { box-shadow: rgba(23, 162, 184, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-warning { color: rgb(255, 193, 7); background-color: transparent; background-image: none; border-color: rgb(255, 193, 7); }.btn-outline-warning:hover { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); border-color: rgb(255, 193, 7); }.btn-outline-warning.focus, .btn-outline-warning:focus { box-shadow: rgba(255, 193, 7, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-warning.disabled, .btn-outline-warning:disabled { color: rgb(255, 193, 7); background-color: transparent; }.btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active, .show > .btn-outline-warning.dropdown-toggle { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); border-color: rgb(255, 193, 7); }.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-warning.dropdown-toggle:focus { box-shadow: rgba(255, 193, 7, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-danger { color: rgb(220, 53, 69); background-color: transparent; background-image: none; border-color: rgb(220, 53, 69); }.btn-outline-danger:hover { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); border-color: rgb(220, 53, 69); }.btn-outline-danger.focus, .btn-outline-danger:focus { box-shadow: rgba(220, 53, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-danger.disabled, .btn-outline-danger:disabled { color: rgb(220, 53, 69); background-color: transparent; }.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, .show > .btn-outline-danger.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); border-color: rgb(220, 53, 69); }.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-danger.dropdown-toggle:focus { box-shadow: rgba(220, 53, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-light { color: rgb(248, 249, 250); background-color: transparent; background-image: none; border-color: rgb(248, 249, 250); }.btn-outline-light:hover { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); border-color: rgb(248, 249, 250); }.btn-outline-light.focus, .btn-outline-light:focus { box-shadow: rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-light.disabled, .btn-outline-light:disabled { color: rgb(248, 249, 250); background-color: transparent; }.btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, .show > .btn-outline-light.dropdown-toggle { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); border-color: rgb(248, 249, 250); }.btn-outline-light:not(:disabled):not(.disabled).active:focus, .btn-outline-light:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-light.dropdown-toggle:focus { box-shadow: rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-dark { color: rgb(52, 58, 64); background-color: transparent; background-image: none; border-color: rgb(52, 58, 64); }.btn-outline-dark:hover { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); border-color: rgb(52, 58, 64); }.btn-outline-dark.focus, .btn-outline-dark:focus { box-shadow: rgba(52, 58, 64, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-dark.disabled, .btn-outline-dark:disabled { color: rgb(52, 58, 64); background-color: transparent; }.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, .show > .btn-outline-dark.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); border-color: rgb(52, 58, 64); }.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-dark.dropdown-toggle:focus { box-shadow: rgba(52, 58, 64, 0.5) 0px 0px 0px 0.2rem; }.btn-link { font-weight: 400; color: rgb(0, 123, 255); background-color: transparent; }.btn-link:hover { color: rgb(0, 86, 179); text-decoration: underline; background-color: transparent; border-color: transparent; }.btn-link.focus, .btn-link:focus { text-decoration: underline; border-color: transparent; box-shadow: none; }.btn-link.disabled, .btn-link:disabled { color: rgb(108, 117, 125); pointer-events: none; }.btn-group-lg > .btn, .btn-lg { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; }.btn-group-sm > .btn, .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }.btn-block { display: block; width: 100%; }.btn-block + .btn-block { margin-top: 0.5rem; }input[type=\"button\"].btn-block, input[type=\"reset\"].btn-block, input[type=\"submit\"].btn-block { width: 100%; }.fade { transition: opacity 0.15s linear 0s; }@media not all {\n  .fade { transition: none 0s ease 0s; }\n}.fade:not(.show) { opacity: 0; }.collapse:not(.show) { display: none; }.collapsing { position: relative; height: 0px; overflow: hidden; transition: height 0.35s ease 0s; }@media not all {\n  .collapsing { transition: none 0s ease 0s; }\n}.dropdown, .dropleft, .dropright, .dropup { position: relative; }.dropdown-toggle::after { display: inline-block; width: 0px; height: 0px; margin-left: 0.255em; vertical-align: 0.255em; content: \"\"; border-width: 0.3em 0.3em 0px; border-top-style: solid; border-top-color: initial; border-right-style: solid; border-right-color: transparent; border-bottom-style: initial; border-bottom-color: initial; border-left-style: solid; border-left-color: transparent; }.dropdown-toggle:empty::after { margin-left: 0px; }.dropdown-menu { position: absolute; top: 100%; left: 0px; z-index: 1000; display: none; float: left; min-width: 10rem; padding: 0.5rem 0px; margin: 0.125rem 0px 0px; font-size: 1rem; color: rgb(33, 37, 41); text-align: left; list-style: none; background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; }.dropdown-menu-right { right: 0px; left: auto; }.dropup .dropdown-menu { top: auto; bottom: 100%; margin-top: 0px; margin-bottom: 0.125rem; }.dropup .dropdown-toggle::after { display: inline-block; width: 0px; height: 0px; margin-left: 0.255em; vertical-align: 0.255em; content: \"\"; border-width: 0px 0.3em 0.3em; border-top-style: initial; border-top-color: initial; border-right-style: solid; border-right-color: transparent; border-bottom-style: solid; border-bottom-color: initial; border-left-style: solid; border-left-color: transparent; }.dropup .dropdown-toggle:empty::after { margin-left: 0px; }.dropright .dropdown-menu { top: 0px; right: auto; left: 100%; margin-top: 0px; margin-left: 0.125rem; }.dropright .dropdown-toggle::after { display: inline-block; width: 0px; height: 0px; margin-left: 0.255em; vertical-align: 0.255em; content: \"\"; border-width: 0.3em 0px 0.3em 0.3em; border-top-style: solid; border-top-color: transparent; border-right-style: initial; border-right-color: initial; border-bottom-style: solid; border-bottom-color: transparent; border-left-style: solid; border-left-color: initial; }.dropright .dropdown-toggle:empty::after { margin-left: 0px; }.dropright .dropdown-toggle::after { vertical-align: 0px; }.dropleft .dropdown-menu { top: 0px; right: 100%; left: auto; margin-top: 0px; margin-right: 0.125rem; }.dropleft .dropdown-toggle::after { display: inline-block; width: 0px; height: 0px; margin-left: 0.255em; vertical-align: 0.255em; content: \"\"; }.dropleft .dropdown-toggle::after { display: none; }.dropleft .dropdown-toggle::before { display: inline-block; width: 0px; height: 0px; margin-right: 0.255em; vertical-align: 0.255em; content: \"\"; border-top: 0.3em solid transparent; border-right: 0.3em solid; border-bottom: 0.3em solid transparent; }.dropleft .dropdown-toggle:empty::after { margin-left: 0px; }.dropleft .dropdown-toggle::before { vertical-align: 0px; }.dropdown-menu[x-placement^=\"bottom\"], .dropdown-menu[x-placement^=\"left\"], .dropdown-menu[x-placement^=\"right\"], .dropdown-menu[x-placement^=\"top\"] { right: auto; bottom: auto; }.dropdown-divider { height: 0px; margin: 0.5rem 0px; overflow: hidden; border-top: 1px solid rgb(233, 236, 239); }.dropdown-item { display: block; width: 100%; padding: 0.25rem 1.5rem; clear: both; font-weight: 400; color: rgb(33, 37, 41); text-align: inherit; white-space: nowrap; background-color: transparent; border: 0px; }.dropdown-item:focus, .dropdown-item:hover { color: rgb(22, 24, 27); text-decoration: none; background-color: rgb(248, 249, 250); }.dropdown-item.active, .dropdown-item:active { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(0, 123, 255); }.dropdown-item.disabled, .dropdown-item:disabled { color: rgb(108, 117, 125); background-color: transparent; }.dropdown-menu.show { display: block; }.dropdown-header { display: block; padding: 0.5rem 1.5rem; margin-bottom: 0px; font-size: 0.875rem; color: rgb(108, 117, 125); white-space: nowrap; }.dropdown-item-text { display: block; padding: 0.25rem 1.5rem; color: rgb(33, 37, 41); }.btn-group, .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; }.btn-group-vertical > .btn, .btn-group > .btn { position: relative; flex: 0 1 auto; }.btn-group-vertical > .btn:hover, .btn-group > .btn:hover { z-index: 1; }.btn-group-vertical > .btn.active, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn:focus, .btn-group > .btn.active, .btn-group > .btn:active, .btn-group > .btn:focus { z-index: 1; }.btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group, .btn-group-vertical .btn + .btn, .btn-group-vertical .btn + .btn-group, .btn-group-vertical .btn-group + .btn, .btn-group-vertical .btn-group + .btn-group { margin-left: -1px; }.btn-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-start; }.btn-toolbar .input-group { width: auto; }.btn-group > .btn:first-child { margin-left: 0px; }.btn-group > .btn-group:not(:last-child) > .btn, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }.btn-group > .btn-group:not(:first-child) > .btn, .btn-group > .btn:not(:first-child) { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }.dropdown-toggle-split { padding-right: 0.5625rem; padding-left: 0.5625rem; }.dropdown-toggle-split::after, .dropright .dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after { margin-left: 0px; }.dropleft .dropdown-toggle-split::before { margin-right: 0px; }.btn-group-sm > .btn + .dropdown-toggle-split, .btn-sm + .dropdown-toggle-split { padding-right: 0.375rem; padding-left: 0.375rem; }.btn-group-lg > .btn + .dropdown-toggle-split, .btn-lg + .dropdown-toggle-split { padding-right: 0.75rem; padding-left: 0.75rem; }.btn-group-vertical { flex-direction: column; align-items: flex-start; justify-content: center; }.btn-group-vertical .btn, .btn-group-vertical .btn-group { width: 100%; }.btn-group-vertical > .btn + .btn, .btn-group-vertical > .btn + .btn-group, .btn-group-vertical > .btn-group + .btn, .btn-group-vertical > .btn-group + .btn-group { margin-top: -1px; margin-left: 0px; }.btn-group-vertical > .btn-group:not(:last-child) > .btn, .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle) { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; }.btn-group-vertical > .btn-group:not(:first-child) > .btn, .btn-group-vertical > .btn:not(:first-child) { border-top-left-radius: 0px; border-top-right-radius: 0px; }.btn-group-toggle > .btn, .btn-group-toggle > .btn-group > .btn { margin-bottom: 0px; }.btn-group-toggle > .btn input[type=\"checkbox\"], .btn-group-toggle > .btn input[type=\"radio\"], .btn-group-toggle > .btn-group > .btn input[type=\"checkbox\"], .btn-group-toggle > .btn-group > .btn input[type=\"radio\"] { position: absolute; clip: rect(0px, 0px, 0px, 0px); pointer-events: none; }.input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }.input-group > .custom-file, .input-group > .custom-select, .input-group > .form-control { position: relative; flex: 1 1 auto; width: 1%; margin-bottom: 0px; }.input-group > .custom-file + .custom-file, .input-group > .custom-file + .custom-select, .input-group > .custom-file + .form-control, .input-group > .custom-select + .custom-file, .input-group > .custom-select + .custom-select, .input-group > .custom-select + .form-control, .input-group > .form-control + .custom-file, .input-group > .form-control + .custom-select, .input-group > .form-control + .form-control { margin-left: -1px; }.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label, .input-group > .custom-select:focus, .input-group > .form-control:focus { z-index: 3; }.input-group > .custom-file .custom-file-input:focus { z-index: 4; }.input-group > .custom-select:not(:last-child), .input-group > .form-control:not(:last-child) { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }.input-group > .custom-select:not(:first-child), .input-group > .form-control:not(:first-child) { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }.input-group > .custom-file { display: flex; align-items: center; }.input-group > .custom-file:not(:last-child) .custom-file-label, .input-group > .custom-file:not(:last-child) .custom-file-label::after { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }.input-group > .custom-file:not(:first-child) .custom-file-label { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }.input-group-append, .input-group-prepend { display: flex; }.input-group-append .btn, .input-group-prepend .btn { position: relative; z-index: 2; }.input-group-append .btn + .btn, .input-group-append .btn + .input-group-text, .input-group-append .input-group-text + .btn, .input-group-append .input-group-text + .input-group-text, .input-group-prepend .btn + .btn, .input-group-prepend .btn + .input-group-text, .input-group-prepend .input-group-text + .btn, .input-group-prepend .input-group-text + .input-group-text { margin-left: -1px; }.input-group-prepend { margin-right: -1px; }.input-group-append { margin-left: -1px; }.input-group-text { display: flex; align-items: center; padding: 0.375rem 0.75rem; margin-bottom: 0px; font-size: 1rem; font-weight: 400; line-height: 1.5; color: rgb(73, 80, 87); text-align: center; white-space: nowrap; background-color: rgb(233, 236, 239); border: 1px solid rgb(206, 212, 218); border-radius: 0.25rem; }.input-group-text input[type=\"checkbox\"], .input-group-text input[type=\"radio\"] { margin-top: 0px; }.input-group-lg > .form-control, .input-group-lg > .input-group-append > .btn, .input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-prepend > .btn, .input-group-lg > .input-group-prepend > .input-group-text { height: calc(2.875rem + 2px); padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; }.input-group-sm > .form-control, .input-group-sm > .input-group-append > .btn, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-prepend > .input-group-text { height: calc(1.8125rem + 2px); padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child), .input-group > .input-group-append:not(:last-child) > .btn, .input-group > .input-group-append:not(:last-child) > .input-group-text, .input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }.input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child), .input-group > .input-group-prepend:not(:first-child) > .btn, .input-group > .input-group-prepend:not(:first-child) > .input-group-text { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }.custom-control { position: relative; display: block; min-height: 1.5rem; padding-left: 1.5rem; }.custom-control-inline { display: inline-flex; margin-right: 1rem; }.custom-control-input { position: absolute; z-index: -1; opacity: 0; }.custom-control-input:checked ~ .custom-control-label::before { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); }.custom-control-input:focus ~ .custom-control-label::before { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.custom-control-input:active ~ .custom-control-label::before { color: rgb(255, 255, 255); background-color: rgb(179, 215, 255); }.custom-control-input:disabled ~ .custom-control-label { color: rgb(108, 117, 125); }.custom-control-input:disabled ~ .custom-control-label::before { background-color: rgb(233, 236, 239); }.custom-control-label { position: relative; margin-bottom: 0px; }.custom-control-label::before { position: absolute; top: 0.25rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; pointer-events: none; content: \"\"; user-select: none; background-color: rgb(222, 226, 230); }.custom-control-label::after { position: absolute; top: 0.25rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; content: \"\"; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; }.custom-checkbox .custom-control-label::before { border-radius: 0.25rem; }.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: rgb(0, 123, 255); }.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E\"); }.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: rgb(0, 123, 255); }.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E\"); }.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(0, 123, 255, 0.5); }.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { background-color: rgba(0, 123, 255, 0.5); }.custom-radio .custom-control-label::before { border-radius: 50%; }.custom-radio .custom-control-input:checked ~ .custom-control-label::before { background-color: rgb(0, 123, 255); }.custom-radio .custom-control-input:checked ~ .custom-control-label::after { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E\"); }.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(0, 123, 255, 0.5); }.custom-select { display: inline-block; width: 100%; height: calc(2.25rem + 2px); padding: 0.375rem 1.75rem 0.375rem 0.75rem; line-height: 1.5; color: rgb(73, 80, 87); vertical-align: middle; background: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E\") right 0.75rem center / 8px 10px no-repeat rgb(255, 255, 255); border: 1px solid rgb(206, 212, 218); border-radius: 0.25rem; -webkit-appearance: none; }.custom-select:focus { border-color: rgb(128, 189, 255); outline: 0px; box-shadow: rgba(128, 189, 255, 0.5) 0px 0px 0px 0.2rem; }.custom-select[multiple], .custom-select[size]:not([size=\"1\"]) { height: auto; padding-right: 0.75rem; background-image: none; }.custom-select:disabled { color: rgb(108, 117, 125); background-color: rgb(233, 236, 239); }.custom-select-sm { height: calc(1.8125rem + 2px); padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 75%; }.custom-select-lg { height: calc(2.875rem + 2px); padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 125%; }.custom-file { position: relative; display: inline-block; width: 100%; height: calc(2.25rem + 2px); margin-bottom: 0px; }.custom-file-input { position: relative; z-index: 2; width: 100%; height: calc(2.25rem + 2px); margin: 0px; opacity: 0; }.custom-file-input:focus ~ .custom-file-label { border-color: rgb(128, 189, 255); box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.custom-file-input:focus ~ .custom-file-label::after { border-color: rgb(128, 189, 255); }.custom-file-input:disabled ~ .custom-file-label { background-color: rgb(233, 236, 239); }.custom-file-input:lang(en) ~ .custom-file-label::after { content: \"Browse\"; }.custom-file-label { position: absolute; top: 0px; right: 0px; left: 0px; z-index: 1; height: calc(2.25rem + 2px); padding: 0.375rem 0.75rem; line-height: 1.5; color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); border: 1px solid rgb(206, 212, 218); border-radius: 0.25rem; }.custom-file-label::after { position: absolute; top: 0px; right: 0px; bottom: 0px; z-index: 3; display: block; height: 2.25rem; padding: 0.375rem 0.75rem; line-height: 1.5; color: rgb(73, 80, 87); content: \"Browse\"; background-color: rgb(233, 236, 239); border-left: 1px solid rgb(206, 212, 218); border-radius: 0px 0.25rem 0.25rem 0px; }.custom-range { width: 100%; padding-left: 0px; background-color: transparent; -webkit-appearance: none; }.custom-range:focus { outline: 0px; }.custom-range:focus::-webkit-slider-thumb { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.custom-range::-webkit-slider-thumb { width: 1rem; height: 1rem; margin-top: -0.25rem; background-color: rgb(0, 123, 255); border: 0px; border-radius: 1rem; transition: background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; -webkit-appearance: none; }@media not all {\n  .custom-range::-webkit-slider-thumb { transition: none 0s ease 0s; }\n}.custom-range::-webkit-slider-thumb:active { background-color: rgb(179, 215, 255); }.custom-range::-webkit-slider-runnable-track { width: 100%; height: 0.5rem; color: transparent; cursor: pointer; background-color: rgb(222, 226, 230); border-color: transparent; border-radius: 1rem; }@media not all {\n}@media not all {\n}.custom-control-label::before, .custom-file-label, .custom-select { transition: background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; }@media not all {\n  .custom-control-label::before, .custom-file-label, .custom-select { transition: none 0s ease 0s; }\n}.nav { display: flex; flex-wrap: wrap; padding-left: 0px; margin-bottom: 0px; list-style: none; }.nav-link { display: block; padding: 0.5rem 1rem; }.nav-link:focus, .nav-link:hover { text-decoration: none; }.nav-link.disabled { color: rgb(108, 117, 125); }.nav-tabs { border-bottom: 1px solid rgb(222, 226, 230); }.nav-tabs .nav-item { margin-bottom: -1px; }.nav-tabs .nav-link { border: 1px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { border-color: rgb(233, 236, 239) rgb(233, 236, 239) rgb(222, 226, 230); }.nav-tabs .nav-link.disabled { color: rgb(108, 117, 125); background-color: transparent; border-color: transparent; }.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); border-color: rgb(222, 226, 230) rgb(222, 226, 230) rgb(255, 255, 255); }.nav-tabs .dropdown-menu { margin-top: -1px; border-top-left-radius: 0px; border-top-right-radius: 0px; }.nav-pills .nav-link { border-radius: 0.25rem; }.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); }.nav-fill .nav-item { flex: 1 1 auto; text-align: center; }.nav-justified .nav-item { flex-basis: 0px; flex-grow: 1; text-align: center; }.tab-content > .tab-pane { display: none; }.tab-content > .active { display: block; }.navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; }.navbar > .container, .navbar > .container-fluid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }.navbar-brand { display: inline-block; padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 1rem; font-size: 1.25rem; line-height: inherit; white-space: nowrap; }.navbar-brand:focus, .navbar-brand:hover { text-decoration: none; }.navbar-nav { display: flex; flex-direction: column; padding-left: 0px; margin-bottom: 0px; list-style: none; }.navbar-nav .nav-link { padding-right: 0px; padding-left: 0px; }.navbar-nav .dropdown-menu { position: static; float: none; }.navbar-text { display: inline-block; padding-top: 0.5rem; padding-bottom: 0.5rem; }.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; }.navbar-toggler { padding: 0.25rem 0.75rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; }.navbar-toggler:focus, .navbar-toggler:hover { text-decoration: none; }.navbar-toggler:not(:disabled):not(.disabled) { cursor: pointer; }.navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; content: \"\"; background: center center / 100% 100% no-repeat; }@media (max-width: 575.98px) {\n  .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { padding-right: 0px; padding-left: 0px; }\n}@media (min-width: 576px) {\n  .navbar-expand-sm { flex-flow: row nowrap; justify-content: flex-start; }\n  .navbar-expand-sm .navbar-nav { flex-direction: row; }\n  .navbar-expand-sm .navbar-nav .dropdown-menu { position: absolute; }\n  .navbar-expand-sm .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }\n  .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { flex-wrap: nowrap; }\n  .navbar-expand-sm .navbar-collapse { flex-basis: auto; display: flex !important; }\n  .navbar-expand-sm .navbar-toggler { display: none; }\n}@media (max-width: 767.98px) {\n  .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { padding-right: 0px; padding-left: 0px; }\n}@media (min-width: 768px) {\n  .navbar-expand-md { flex-flow: row nowrap; justify-content: flex-start; }\n  .navbar-expand-md .navbar-nav { flex-direction: row; }\n  .navbar-expand-md .navbar-nav .dropdown-menu { position: absolute; }\n  .navbar-expand-md .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }\n  .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { flex-wrap: nowrap; }\n  .navbar-expand-md .navbar-collapse { flex-basis: auto; display: flex !important; }\n  .navbar-expand-md .navbar-toggler { display: none; }\n}@media (max-width: 991.98px) {\n  .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { padding-right: 0px; padding-left: 0px; }\n}@media (min-width: 992px) {\n  .navbar-expand-lg { flex-flow: row nowrap; justify-content: flex-start; }\n  .navbar-expand-lg .navbar-nav { flex-direction: row; }\n  .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; }\n  .navbar-expand-lg .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }\n  .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { flex-wrap: nowrap; }\n  .navbar-expand-lg .navbar-collapse { flex-basis: auto; display: flex !important; }\n  .navbar-expand-lg .navbar-toggler { display: none; }\n}@media (max-width: 1199.98px) {\n  .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { padding-right: 0px; padding-left: 0px; }\n}@media (min-width: 1200px) {\n  .navbar-expand-xl { flex-flow: row nowrap; justify-content: flex-start; }\n  .navbar-expand-xl .navbar-nav { flex-direction: row; }\n  .navbar-expand-xl .navbar-nav .dropdown-menu { position: absolute; }\n  .navbar-expand-xl .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }\n  .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { flex-wrap: nowrap; }\n  .navbar-expand-xl .navbar-collapse { flex-basis: auto; display: flex !important; }\n  .navbar-expand-xl .navbar-toggler { display: none; }\n}.navbar-expand { flex-flow: row nowrap; justify-content: flex-start; }.navbar-expand > .container, .navbar-expand > .container-fluid { padding-right: 0px; padding-left: 0px; }.navbar-expand .navbar-nav { flex-direction: row; }.navbar-expand .navbar-nav .dropdown-menu { position: absolute; }.navbar-expand .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }.navbar-expand > .container, .navbar-expand > .container-fluid { flex-wrap: nowrap; }.navbar-expand .navbar-collapse { flex-basis: auto; display: flex !important; }.navbar-expand .navbar-toggler { display: none; }.navbar-light .navbar-brand { color: rgba(0, 0, 0, 0.9); }.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover { color: rgba(0, 0, 0, 0.9); }.navbar-light .navbar-nav .nav-link { color: rgba(0, 0, 0, 0.5); }.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { color: rgba(0, 0, 0, 0.7); }.navbar-light .navbar-nav .nav-link.disabled { color: rgba(0, 0, 0, 0.3); }.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link { color: rgba(0, 0, 0, 0.9); }.navbar-light .navbar-toggler { color: rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.1); }.navbar-light .navbar-toggler-icon { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E\"); }.navbar-light .navbar-text { color: rgba(0, 0, 0, 0.5); }.navbar-light .navbar-text a { color: rgba(0, 0, 0, 0.9); }.navbar-light .navbar-text a:focus, .navbar-light .navbar-text a:hover { color: rgba(0, 0, 0, 0.9); }.navbar-dark .navbar-brand { color: rgb(255, 255, 255); }.navbar-dark .navbar-brand:focus, .navbar-dark .navbar-brand:hover { color: rgb(255, 255, 255); }.navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.5); }.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover { color: rgba(255, 255, 255, 0.75); }.navbar-dark .navbar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.25); }.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link { color: rgb(255, 255, 255); }.navbar-dark .navbar-toggler { color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.1); }.navbar-dark .navbar-toggler-icon { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E\"); }.navbar-dark .navbar-text { color: rgba(255, 255, 255, 0.5); }.navbar-dark .navbar-text a { color: rgb(255, 255, 255); }.navbar-dark .navbar-text a:focus, .navbar-dark .navbar-text a:hover { color: rgb(255, 255, 255); }.card { position: relative; display: flex; flex-direction: column; min-width: 0px; word-wrap: break-word; background-color: rgb(255, 255, 255); background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem; }.card > hr { margin-right: 0px; margin-left: 0px; }.card > .list-group:first-child .list-group-item:first-child { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }.card > .list-group:last-child .list-group-item:last-child { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }.card-body { flex: 1 1 auto; padding: 1.25rem; }.card-title { margin-bottom: 0.75rem; }.card-subtitle { margin-top: -0.375rem; margin-bottom: 0px; }.card-text:last-child { margin-bottom: 0px; }.card-link:hover { text-decoration: none; }.card-link + .card-link { margin-left: 1.25rem; }.card-header { padding: 0.75rem 1.25rem; margin-bottom: 0px; background-color: rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.125); }.card-header:first-child { border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0px 0px; }.card-header + .list-group .list-group-item:first-child { border-top: 0px; }.card-footer { padding: 0.75rem 1.25rem; background-color: rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(0, 0, 0, 0.125); }.card-footer:last-child { border-radius: 0px 0px calc(0.25rem - 1px) calc(0.25rem - 1px); }.card-header-tabs { margin-right: -0.625rem; margin-bottom: -0.75rem; margin-left: -0.625rem; border-bottom: 0px; }.card-header-pills { margin-right: -0.625rem; margin-left: -0.625rem; }.card-img-overlay { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; padding: 1.25rem; }.card-img { width: 100%; border-radius: calc(0.25rem - 1px); }.card-img-top { width: 100%; border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); }.card-img-bottom { width: 100%; border-bottom-right-radius: calc(0.25rem - 1px); border-bottom-left-radius: calc(0.25rem - 1px); }.card-deck { display: flex; flex-direction: column; }.card-deck .card { margin-bottom: 15px; }@media (min-width: 576px) {\n  .card-deck { flex-flow: row wrap; margin-right: -15px; margin-left: -15px; }\n  .card-deck .card { display: flex; flex: 1 0 0%; flex-direction: column; margin-right: 15px; margin-bottom: 0px; margin-left: 15px; }\n}.card-group { display: flex; flex-direction: column; }.card-group > .card { margin-bottom: 15px; }@media (min-width: 576px) {\n  .card-group { flex-flow: row wrap; }\n  .card-group > .card { flex: 1 0 0%; margin-bottom: 0px; }\n  .card-group > .card + .card { margin-left: 0px; border-left: 0px; }\n  .card-group > .card:first-child { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }\n  .card-group > .card:first-child .card-header, .card-group > .card:first-child .card-img-top { border-top-right-radius: 0px; }\n  .card-group > .card:first-child .card-footer, .card-group > .card:first-child .card-img-bottom { border-bottom-right-radius: 0px; }\n  .card-group > .card:last-child { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }\n  .card-group > .card:last-child .card-header, .card-group > .card:last-child .card-img-top { border-top-left-radius: 0px; }\n  .card-group > .card:last-child .card-footer, .card-group > .card:last-child .card-img-bottom { border-bottom-left-radius: 0px; }\n  .card-group > .card:only-child { border-radius: 0.25rem; }\n  .card-group > .card:only-child .card-header, .card-group > .card:only-child .card-img-top { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }\n  .card-group > .card:only-child .card-footer, .card-group > .card:only-child .card-img-bottom { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }\n  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) { border-radius: 0px; }\n  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-footer, .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-header, .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom, .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-top { border-radius: 0px; }\n}.card-columns .card { margin-bottom: 0.75rem; }@media (min-width: 576px) {\n  .card-columns { column-count: 3; column-gap: 1.25rem; orphans: 1; widows: 1; }\n  .card-columns .card { display: inline-block; width: 100%; }\n}.accordion .card:not(:first-of-type):not(:last-of-type) { border-bottom: 0px; border-radius: 0px; }.accordion .card:not(:first-of-type) .card-header:first-child { border-radius: 0px; }.accordion .card:first-of-type { border-bottom: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; }.accordion .card:last-of-type { border-top-left-radius: 0px; border-top-right-radius: 0px; }.breadcrumb { display: flex; flex-wrap: wrap; padding: 0.75rem 1rem; margin-bottom: 1rem; list-style: none; background-color: rgb(233, 236, 239); border-radius: 0.25rem; }.breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; }.breadcrumb-item + .breadcrumb-item::before { display: inline-block; padding-right: 0.5rem; color: rgb(108, 117, 125); content: \"/\"; }.breadcrumb-item + .breadcrumb-item:hover::before { text-decoration: underline; }.breadcrumb-item + .breadcrumb-item:hover::before { text-decoration: none; }.breadcrumb-item.active { color: rgb(108, 117, 125); }.pagination { display: flex; padding-left: 0px; list-style: none; border-radius: 0.25rem; }.page-link { position: relative; display: block; padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; color: rgb(0, 123, 255); background-color: rgb(255, 255, 255); border: 1px solid rgb(222, 226, 230); }.page-link:hover { z-index: 2; color: rgb(0, 86, 179); text-decoration: none; background-color: rgb(233, 236, 239); border-color: rgb(222, 226, 230); }.page-link:focus { z-index: 2; outline: 0px; box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.page-link:not(:disabled):not(.disabled) { cursor: pointer; }.page-item:first-child .page-link { margin-left: 0px; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }.page-item:last-child .page-link { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }.page-item.active .page-link { z-index: 1; color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.page-item.disabled .page-link { color: rgb(108, 117, 125); pointer-events: none; cursor: auto; background-color: rgb(255, 255, 255); border-color: rgb(222, 226, 230); }.pagination-lg .page-link { padding: 0.75rem 1.5rem; font-size: 1.25rem; line-height: 1.5; }.pagination-lg .page-item:first-child .page-link { border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; }.pagination-lg .page-item:last-child .page-link { border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; }.pagination-sm .page-link { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; }.pagination-sm .page-item:first-child .page-link { border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; }.pagination-sm .page-item:last-child .page-link { border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; }.badge { display: inline-block; padding: 0.25em 0.4em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; }.badge:empty { display: none; }.btn .badge { position: relative; top: -1px; }.badge-pill { padding-right: 0.6em; padding-left: 0.6em; border-radius: 10rem; }.badge-primary { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); }.badge-primary[href]:focus, .badge-primary[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(0, 98, 204); }.badge-secondary { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); }.badge-secondary[href]:focus, .badge-secondary[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(84, 91, 98); }.badge-success { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); }.badge-success[href]:focus, .badge-success[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(30, 126, 52); }.badge-info { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); }.badge-info[href]:focus, .badge-info[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(17, 122, 139); }.badge-warning { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); }.badge-warning[href]:focus, .badge-warning[href]:hover { color: rgb(33, 37, 41); text-decoration: none; background-color: rgb(211, 158, 0); }.badge-danger { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); }.badge-danger[href]:focus, .badge-danger[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(189, 33, 48); }.badge-light { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); }.badge-light[href]:focus, .badge-light[href]:hover { color: rgb(33, 37, 41); text-decoration: none; background-color: rgb(218, 224, 229); }.badge-dark { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); }.badge-dark[href]:focus, .badge-dark[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(29, 33, 36); }.jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; background-color: rgb(233, 236, 239); border-radius: 0.3rem; }@media (min-width: 576px) {\n  .jumbotron { padding: 4rem 2rem; }\n}.jumbotron-fluid { padding-right: 0px; padding-left: 0px; border-radius: 0px; }.alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; }.alert-heading { color: inherit; }.alert-link { font-weight: 700; }.alert-dismissible { padding-right: 4rem; }.alert-dismissible .close { position: absolute; top: 0px; right: 0px; padding: 0.75rem 1.25rem; color: inherit; }.alert-primary { color: rgb(0, 64, 133); background-color: rgb(204, 229, 255); border-color: rgb(184, 218, 255); }.alert-primary hr { border-top-color: rgb(159, 205, 255); }.alert-primary .alert-link { color: rgb(0, 39, 82); }.alert-secondary { color: rgb(56, 61, 65); background-color: rgb(226, 227, 229); border-color: rgb(214, 216, 219); }.alert-secondary hr { border-top-color: rgb(200, 203, 207); }.alert-secondary .alert-link { color: rgb(32, 35, 38); }.alert-success { color: rgb(21, 87, 36); background-color: rgb(212, 237, 218); border-color: rgb(195, 230, 203); }.alert-success hr { border-top-color: rgb(177, 223, 187); }.alert-success .alert-link { color: rgb(11, 46, 19); }.alert-info { color: rgb(12, 84, 96); background-color: rgb(209, 236, 241); border-color: rgb(190, 229, 235); }.alert-info hr { border-top-color: rgb(171, 221, 229); }.alert-info .alert-link { color: rgb(6, 44, 51); }.alert-warning { color: rgb(133, 100, 4); background-color: rgb(255, 243, 205); border-color: rgb(255, 238, 186); }.alert-warning hr { border-top-color: rgb(255, 232, 161); }.alert-warning .alert-link { color: rgb(83, 63, 3); }.alert-danger { color: rgb(114, 28, 36); background-color: rgb(248, 215, 218); border-color: rgb(245, 198, 203); }.alert-danger hr { border-top-color: rgb(241, 176, 183); }.alert-danger .alert-link { color: rgb(73, 18, 23); }.alert-light { color: rgb(129, 129, 130); background-color: rgb(254, 254, 254); border-color: rgb(253, 253, 254); }.alert-light hr { border-top-color: rgb(236, 236, 246); }.alert-light .alert-link { color: rgb(104, 104, 104); }.alert-dark { color: rgb(27, 30, 33); background-color: rgb(214, 216, 217); border-color: rgb(198, 200, 202); }.alert-dark hr { border-top-color: rgb(185, 187, 190); }.alert-dark .alert-link { color: rgb(4, 5, 5); }@-webkit-keyframes progress-bar-stripes { \n  0% { background-position: 1rem 0px; }\n  100% { background-position: 0px 0px; }\n}@keyframes progress-bar-stripes { \n  0% { background-position: 1rem 0px; }\n  100% { background-position: 0px 0px; }\n}.progress { display: flex; height: 1rem; overflow: hidden; font-size: 0.75rem; background-color: rgb(233, 236, 239); border-radius: 0.25rem; }.progress-bar { display: flex; flex-direction: column; justify-content: center; color: rgb(255, 255, 255); text-align: center; white-space: nowrap; background-color: rgb(0, 123, 255); transition: width 0.6s ease 0s; }@media not all {\n  .progress-bar { transition: none 0s ease 0s; }\n}.progress-bar-striped { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem; }.progress-bar-animated { animation: progress-bar-stripes 1s linear 0s infinite normal none running; }.media { display: flex; align-items: flex-start; }.media-body { flex: 1 1 0%; }.list-group { display: flex; flex-direction: column; padding-left: 0px; margin-bottom: 0px; }.list-group-item-action { width: 100%; color: rgb(73, 80, 87); text-align: inherit; }.list-group-item-action:focus, .list-group-item-action:hover { color: rgb(73, 80, 87); text-decoration: none; background-color: rgb(248, 249, 250); }.list-group-item-action:active { color: rgb(33, 37, 41); background-color: rgb(233, 236, 239); }.list-group-item { position: relative; display: block; padding: 0.75rem 1.25rem; margin-bottom: -1px; background-color: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.125); }.list-group-item:first-child { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }.list-group-item:last-child { margin-bottom: 0px; border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }.list-group-item:focus, .list-group-item:hover { z-index: 1; text-decoration: none; }.list-group-item.disabled, .list-group-item:disabled { color: rgb(108, 117, 125); background-color: rgb(255, 255, 255); }.list-group-item.active { z-index: 2; color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.list-group-flush .list-group-item { border-right: 0px; border-left: 0px; border-radius: 0px; }.list-group-flush:first-child .list-group-item:first-child { border-top: 0px; }.list-group-flush:last-child .list-group-item:last-child { border-bottom: 0px; }.list-group-item-primary { color: rgb(0, 64, 133); background-color: rgb(184, 218, 255); }.list-group-item-primary.list-group-item-action:focus, .list-group-item-primary.list-group-item-action:hover { color: rgb(0, 64, 133); background-color: rgb(159, 205, 255); }.list-group-item-primary.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(0, 64, 133); border-color: rgb(0, 64, 133); }.list-group-item-secondary { color: rgb(56, 61, 65); background-color: rgb(214, 216, 219); }.list-group-item-secondary.list-group-item-action:focus, .list-group-item-secondary.list-group-item-action:hover { color: rgb(56, 61, 65); background-color: rgb(200, 203, 207); }.list-group-item-secondary.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(56, 61, 65); border-color: rgb(56, 61, 65); }.list-group-item-success { color: rgb(21, 87, 36); background-color: rgb(195, 230, 203); }.list-group-item-success.list-group-item-action:focus, .list-group-item-success.list-group-item-action:hover { color: rgb(21, 87, 36); background-color: rgb(177, 223, 187); }.list-group-item-success.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(21, 87, 36); border-color: rgb(21, 87, 36); }.list-group-item-info { color: rgb(12, 84, 96); background-color: rgb(190, 229, 235); }.list-group-item-info.list-group-item-action:focus, .list-group-item-info.list-group-item-action:hover { color: rgb(12, 84, 96); background-color: rgb(171, 221, 229); }.list-group-item-info.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(12, 84, 96); border-color: rgb(12, 84, 96); }.list-group-item-warning { color: rgb(133, 100, 4); background-color: rgb(255, 238, 186); }.list-group-item-warning.list-group-item-action:focus, .list-group-item-warning.list-group-item-action:hover { color: rgb(133, 100, 4); background-color: rgb(255, 232, 161); }.list-group-item-warning.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(133, 100, 4); border-color: rgb(133, 100, 4); }.list-group-item-danger { color: rgb(114, 28, 36); background-color: rgb(245, 198, 203); }.list-group-item-danger.list-group-item-action:focus, .list-group-item-danger.list-group-item-action:hover { color: rgb(114, 28, 36); background-color: rgb(241, 176, 183); }.list-group-item-danger.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(114, 28, 36); border-color: rgb(114, 28, 36); }.list-group-item-light { color: rgb(129, 129, 130); background-color: rgb(253, 253, 254); }.list-group-item-light.list-group-item-action:focus, .list-group-item-light.list-group-item-action:hover { color: rgb(129, 129, 130); background-color: rgb(236, 236, 246); }.list-group-item-light.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(129, 129, 130); border-color: rgb(129, 129, 130); }.list-group-item-dark { color: rgb(27, 30, 33); background-color: rgb(198, 200, 202); }.list-group-item-dark.list-group-item-action:focus, .list-group-item-dark.list-group-item-action:hover { color: rgb(27, 30, 33); background-color: rgb(185, 187, 190); }.list-group-item-dark.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(27, 30, 33); border-color: rgb(27, 30, 33); }.close { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: rgb(0, 0, 0); text-shadow: rgb(255, 255, 255) 0px 1px 0px; opacity: 0.5; }.close:not(:disabled):not(.disabled) { cursor: pointer; }.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover { color: rgb(0, 0, 0); text-decoration: none; opacity: 0.75; }button.close { padding: 0px; background-color: transparent; border: 0px; -webkit-appearance: none; }.modal-open { overflow: hidden; }.modal-open .modal { overflow: hidden auto; }.modal { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 1050; display: none; overflow: hidden; outline: 0px; }.modal-dialog { position: relative; width: auto; margin: 0.5rem; pointer-events: none; }.modal.fade .modal-dialog { transition: transform 0.3s ease-out 0s, -webkit-transform 0.3s ease-out 0s; transform: translate(0px, -25%); }@media not all {\n  .modal.fade .modal-dialog { transition: none 0s ease 0s; }\n}.modal.show .modal-dialog { transform: translate(0px, 0px); }.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); }.modal-dialog-centered::before { display: block; height: calc(100vh - 1rem); content: \"\"; }.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; outline: 0px; }.modal-backdrop { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 1040; background-color: rgb(0, 0, 0); }.modal-backdrop.fade { opacity: 0; }.modal-backdrop.show { opacity: 0.5; }.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem; border-bottom: 1px solid rgb(233, 236, 239); border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; }.modal-header .close { padding: 1rem; margin: -1rem -1rem -1rem auto; }.modal-title { margin-bottom: 0px; line-height: 1.5; }.modal-body { position: relative; flex: 1 1 auto; padding: 1rem; }.modal-footer { display: flex; align-items: center; justify-content: flex-end; padding: 1rem; border-top: 1px solid rgb(233, 236, 239); }.modal-footer > :not(:first-child) { margin-left: 0.25rem; }.modal-footer > :not(:last-child) { margin-right: 0.25rem; }.modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; }@media (min-width: 576px) {\n  .modal-dialog { max-width: 500px; margin: 1.75rem auto; }\n  .modal-dialog-centered { min-height: calc(100% - 3.5rem); }\n  .modal-dialog-centered::before { height: calc(100vh - 3.5rem); }\n  .modal-sm { max-width: 300px; }\n}@media (min-width: 992px) {\n  .modal-lg { max-width: 800px; }\n}.tooltip { position: absolute; z-index: 1070; display: block; margin: 0px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; font-style: normal; font-weight: 400; line-height: 1.5; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; white-space: normal; line-break: auto; font-size: 0.875rem; word-wrap: break-word; opacity: 0; }.tooltip.show { opacity: 0.9; }.tooltip .arrow { position: absolute; display: block; width: 0.8rem; height: 0.4rem; }.tooltip .arrow::before { position: absolute; content: \"\"; border-color: transparent; border-style: solid; }.bs-tooltip-auto[x-placement^=\"top\"], .bs-tooltip-top { padding: 0.4rem 0px; }.bs-tooltip-auto[x-placement^=\"top\"] .arrow, .bs-tooltip-top .arrow { bottom: 0px; }.bs-tooltip-auto[x-placement^=\"top\"] .arrow::before, .bs-tooltip-top .arrow::before { top: 0px; border-width: 0.4rem 0.4rem 0px; border-top-color: rgb(0, 0, 0); }.bs-tooltip-auto[x-placement^=\"right\"], .bs-tooltip-right { padding: 0px 0.4rem; }.bs-tooltip-auto[x-placement^=\"right\"] .arrow, .bs-tooltip-right .arrow { left: 0px; width: 0.4rem; height: 0.8rem; }.bs-tooltip-auto[x-placement^=\"right\"] .arrow::before, .bs-tooltip-right .arrow::before { right: 0px; border-width: 0.4rem 0.4rem 0.4rem 0px; border-right-color: rgb(0, 0, 0); }.bs-tooltip-auto[x-placement^=\"bottom\"], .bs-tooltip-bottom { padding: 0.4rem 0px; }.bs-tooltip-auto[x-placement^=\"bottom\"] .arrow, .bs-tooltip-bottom .arrow { top: 0px; }.bs-tooltip-auto[x-placement^=\"bottom\"] .arrow::before, .bs-tooltip-bottom .arrow::before { bottom: 0px; border-width: 0px 0.4rem 0.4rem; border-bottom-color: rgb(0, 0, 0); }.bs-tooltip-auto[x-placement^=\"left\"], .bs-tooltip-left { padding: 0px 0.4rem; }.bs-tooltip-auto[x-placement^=\"left\"] .arrow, .bs-tooltip-left .arrow { right: 0px; width: 0.4rem; height: 0.8rem; }.bs-tooltip-auto[x-placement^=\"left\"] .arrow::before, .bs-tooltip-left .arrow::before { left: 0px; border-width: 0.4rem 0px 0.4rem 0.4rem; border-left-color: rgb(0, 0, 0); }.tooltip-inner { max-width: 200px; padding: 0.25rem 0.5rem; color: rgb(255, 255, 255); text-align: center; background-color: rgb(0, 0, 0); border-radius: 0.25rem; }.popover { position: absolute; top: 0px; left: 0px; z-index: 1060; display: block; max-width: 276px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; font-style: normal; font-weight: 400; line-height: 1.5; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; white-space: normal; line-break: auto; font-size: 0.875rem; word-wrap: break-word; background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; }.popover .arrow { position: absolute; display: block; width: 1rem; height: 0.5rem; margin: 0px 0.3rem; }.popover .arrow::after, .popover .arrow::before { position: absolute; display: block; content: \"\"; border-color: transparent; border-style: solid; }.bs-popover-auto[x-placement^=\"top\"], .bs-popover-top { margin-bottom: 0.5rem; }.bs-popover-auto[x-placement^=\"top\"] .arrow, .bs-popover-top .arrow { bottom: calc((0.5rem + 1px) * -1); }.bs-popover-auto[x-placement^=\"top\"] .arrow::after, .bs-popover-auto[x-placement^=\"top\"] .arrow::before, .bs-popover-top .arrow::after, .bs-popover-top .arrow::before { border-width: 0.5rem 0.5rem 0px; }.bs-popover-auto[x-placement^=\"top\"] .arrow::before, .bs-popover-top .arrow::before { bottom: 0px; border-top-color: rgba(0, 0, 0, 0.25); }.bs-popover-auto[x-placement^=\"top\"] .arrow::after, .bs-popover-top .arrow::after { bottom: 1px; border-top-color: rgb(255, 255, 255); }.bs-popover-auto[x-placement^=\"right\"], .bs-popover-right { margin-left: 0.5rem; }.bs-popover-auto[x-placement^=\"right\"] .arrow, .bs-popover-right .arrow { left: calc((0.5rem + 1px) * -1); width: 0.5rem; height: 1rem; margin: 0.3rem 0px; }.bs-popover-auto[x-placement^=\"right\"] .arrow::after, .bs-popover-auto[x-placement^=\"right\"] .arrow::before, .bs-popover-right .arrow::after, .bs-popover-right .arrow::before { border-width: 0.5rem 0.5rem 0.5rem 0px; }.bs-popover-auto[x-placement^=\"right\"] .arrow::before, .bs-popover-right .arrow::before { left: 0px; border-right-color: rgba(0, 0, 0, 0.25); }.bs-popover-auto[x-placement^=\"right\"] .arrow::after, .bs-popover-right .arrow::after { left: 1px; border-right-color: rgb(255, 255, 255); }.bs-popover-auto[x-placement^=\"bottom\"], .bs-popover-bottom { margin-top: 0.5rem; }.bs-popover-auto[x-placement^=\"bottom\"] .arrow, .bs-popover-bottom .arrow { top: calc((0.5rem + 1px) * -1); }.bs-popover-auto[x-placement^=\"bottom\"] .arrow::after, .bs-popover-auto[x-placement^=\"bottom\"] .arrow::before, .bs-popover-bottom .arrow::after, .bs-popover-bottom .arrow::before { border-width: 0px 0.5rem 0.5rem; }.bs-popover-auto[x-placement^=\"bottom\"] .arrow::before, .bs-popover-bottom .arrow::before { top: 0px; border-bottom-color: rgba(0, 0, 0, 0.25); }.bs-popover-auto[x-placement^=\"bottom\"] .arrow::after, .bs-popover-bottom .arrow::after { top: 1px; border-bottom-color: rgb(255, 255, 255); }.bs-popover-auto[x-placement^=\"bottom\"] .popover-header::before, .bs-popover-bottom .popover-header::before { position: absolute; top: 0px; left: 50%; display: block; width: 1rem; margin-left: -0.5rem; content: \"\"; border-bottom: 1px solid rgb(247, 247, 247); }.bs-popover-auto[x-placement^=\"left\"], .bs-popover-left { margin-right: 0.5rem; }.bs-popover-auto[x-placement^=\"left\"] .arrow, .bs-popover-left .arrow { right: calc((0.5rem + 1px) * -1); width: 0.5rem; height: 1rem; margin: 0.3rem 0px; }.bs-popover-auto[x-placement^=\"left\"] .arrow::after, .bs-popover-auto[x-placement^=\"left\"] .arrow::before, .bs-popover-left .arrow::after, .bs-popover-left .arrow::before { border-width: 0.5rem 0px 0.5rem 0.5rem; }.bs-popover-auto[x-placement^=\"left\"] .arrow::before, .bs-popover-left .arrow::before { right: 0px; border-left-color: rgba(0, 0, 0, 0.25); }.bs-popover-auto[x-placement^=\"left\"] .arrow::after, .bs-popover-left .arrow::after { right: 1px; border-left-color: rgb(255, 255, 255); }.popover-header { padding: 0.5rem 0.75rem; margin-bottom: 0px; font-size: 1rem; color: inherit; background-color: rgb(247, 247, 247); border-bottom: 1px solid rgb(235, 235, 235); border-top-left-radius: calc(0.3rem - 1px); border-top-right-radius: calc(0.3rem - 1px); }.popover-header:empty { display: none; }.popover-body { padding: 0.5rem 0.75rem; color: rgb(33, 37, 41); }.carousel { position: relative; }.carousel-inner { position: relative; width: 100%; overflow: hidden; }.carousel-item { position: relative; display: none; align-items: center; width: 100%; backface-visibility: hidden; perspective: 1000px; }.carousel-item-next, .carousel-item-prev, .carousel-item.active { display: block; transition: transform 0.6s ease 0s, -webkit-transform 0.6s ease 0s; }@media not all {\n  .carousel-item-next, .carousel-item-prev, .carousel-item.active { transition: none 0s ease 0s; }\n}.carousel-item-next, .carousel-item-prev { position: absolute; top: 0px; }.carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { transform: translateX(0px); }@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {\n  .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { transform: translate3d(0px, 0px, 0px); }\n}.active.carousel-item-right, .carousel-item-next { transform: translateX(100%); }@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {\n  .active.carousel-item-right, .carousel-item-next { transform: translate3d(100%, 0px, 0px); }\n}.active.carousel-item-left, .carousel-item-prev { transform: translateX(-100%); }@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {\n  .active.carousel-item-left, .carousel-item-prev { transform: translate3d(-100%, 0px, 0px); }\n}.carousel-fade .carousel-item { opacity: 0; transition-duration: 0.6s; transition-property: opacity; }.carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right, .carousel-fade .carousel-item.active { opacity: 1; }.carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right { opacity: 0; }.carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-prev, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item.active { transform: translateX(0px); }@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {\n  .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-prev, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item.active { transform: translate3d(0px, 0px, 0px); }\n}.carousel-control-next, .carousel-control-prev { position: absolute; top: 0px; bottom: 0px; display: flex; align-items: center; justify-content: center; width: 15%; color: rgb(255, 255, 255); text-align: center; opacity: 0.5; }.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover { color: rgb(255, 255, 255); text-decoration: none; outline: 0px; opacity: 0.9; }.carousel-control-prev { left: 0px; }.carousel-control-next { right: 0px; }.carousel-control-next-icon, .carousel-control-prev-icon { display: inline-block; width: 20px; height: 20px; background: center center / 100% 100% no-repeat transparent; }.carousel-control-prev-icon { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E\"); }.carousel-control-next-icon { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E\"); }.carousel-indicators { position: absolute; right: 0px; bottom: 10px; left: 0px; z-index: 15; display: flex; justify-content: center; padding-left: 0px; margin-right: 15%; margin-left: 15%; list-style: none; }.carousel-indicators li { position: relative; flex: 0 1 auto; width: 30px; height: 3px; margin-right: 3px; margin-left: 3px; text-indent: -999px; cursor: pointer; background-color: rgba(255, 255, 255, 0.5); }.carousel-indicators li::before { position: absolute; top: -10px; left: 0px; display: inline-block; width: 100%; height: 10px; content: \"\"; }.carousel-indicators li::after { position: absolute; bottom: -10px; left: 0px; display: inline-block; width: 100%; height: 10px; content: \"\"; }.carousel-indicators .active { background-color: rgb(255, 255, 255); }.carousel-caption { position: absolute; right: 15%; bottom: 20px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: rgb(255, 255, 255); text-align: center; }.align-baseline { vertical-align: baseline !important; }.align-top { vertical-align: top !important; }.align-middle { vertical-align: middle !important; }.align-bottom { vertical-align: bottom !important; }.align-text-bottom { vertical-align: text-bottom !important; }.align-text-top { vertical-align: text-top !important; }.bg-primary { background-color: rgb(0, 123, 255) !important; }a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover { background-color: rgb(0, 98, 204) !important; }.bg-secondary { background-color: rgb(108, 117, 125) !important; }a.bg-secondary:focus, a.bg-secondary:hover, button.bg-secondary:focus, button.bg-secondary:hover { background-color: rgb(84, 91, 98) !important; }.bg-success { background-color: rgb(40, 167, 69) !important; }a.bg-success:focus, a.bg-success:hover, button.bg-success:focus, button.bg-success:hover { background-color: rgb(30, 126, 52) !important; }.bg-info { background-color: rgb(23, 162, 184) !important; }a.bg-info:focus, a.bg-info:hover, button.bg-info:focus, button.bg-info:hover { background-color: rgb(17, 122, 139) !important; }.bg-warning { background-color: rgb(255, 193, 7) !important; }a.bg-warning:focus, a.bg-warning:hover, button.bg-warning:focus, button.bg-warning:hover { background-color: rgb(211, 158, 0) !important; }.bg-danger { background-color: rgb(220, 53, 69) !important; }a.bg-danger:focus, a.bg-danger:hover, button.bg-danger:focus, button.bg-danger:hover { background-color: rgb(189, 33, 48) !important; }.bg-light { background-color: rgb(248, 249, 250) !important; }a.bg-light:focus, a.bg-light:hover, button.bg-light:focus, button.bg-light:hover { background-color: rgb(218, 224, 229) !important; }.bg-dark { background-color: rgb(52, 58, 64) !important; }a.bg-dark:focus, a.bg-dark:hover, button.bg-dark:focus, button.bg-dark:hover { background-color: rgb(29, 33, 36) !important; }.bg-white { background-color: rgb(255, 255, 255) !important; }.bg-transparent { background-color: transparent !important; }.border { border: 1px solid rgb(222, 226, 230) !important; }.border-top { border-top: 1px solid rgb(222, 226, 230) !important; }.border-right { border-right: 1px solid rgb(222, 226, 230) !important; }.border-bottom { border-bottom: 1px solid rgb(222, 226, 230) !important; }.border-left { border-left: 1px solid rgb(222, 226, 230) !important; }.border-0 { border: 0px !important; }.border-top-0 { border-top: 0px !important; }.border-right-0 { border-right: 0px !important; }.border-bottom-0 { border-bottom: 0px !important; }.border-left-0 { border-left: 0px !important; }.border-primary { border-color: rgb(0, 123, 255) !important; }.border-secondary { border-color: rgb(108, 117, 125) !important; }.border-success { border-color: rgb(40, 167, 69) !important; }.border-info { border-color: rgb(23, 162, 184) !important; }.border-warning { border-color: rgb(255, 193, 7) !important; }.border-danger { border-color: rgb(220, 53, 69) !important; }.border-light { border-color: rgb(248, 249, 250) !important; }.border-dark { border-color: rgb(52, 58, 64) !important; }.border-white { border-color: rgb(255, 255, 255) !important; }.rounded { border-radius: 0.25rem !important; }.rounded-top { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }.rounded-right { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }.rounded-bottom { border-bottom-right-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }.rounded-left { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }.rounded-circle { border-radius: 50% !important; }.rounded-0 { border-radius: 0px !important; }.clearfix::after { display: block; clear: both; content: \"\"; }.d-none { display: none !important; }.d-inline { display: inline !important; }.d-inline-block { display: inline-block !important; }.d-block { display: block !important; }.d-table { display: table !important; }.d-table-row { display: table-row !important; }.d-table-cell { display: table-cell !important; }.d-flex { display: flex !important; }.d-inline-flex { display: inline-flex !important; }@media (min-width: 576px) {\n  .d-sm-none { display: none !important; }\n  .d-sm-inline { display: inline !important; }\n  .d-sm-inline-block { display: inline-block !important; }\n  .d-sm-block { display: block !important; }\n  .d-sm-table { display: table !important; }\n  .d-sm-table-row { display: table-row !important; }\n  .d-sm-table-cell { display: table-cell !important; }\n  .d-sm-flex { display: flex !important; }\n  .d-sm-inline-flex { display: inline-flex !important; }\n}@media (min-width: 768px) {\n  .d-md-none { display: none !important; }\n  .d-md-inline { display: inline !important; }\n  .d-md-inline-block { display: inline-block !important; }\n  .d-md-block { display: block !important; }\n  .d-md-table { display: table !important; }\n  .d-md-table-row { display: table-row !important; }\n  .d-md-table-cell { display: table-cell !important; }\n  .d-md-flex { display: flex !important; }\n  .d-md-inline-flex { display: inline-flex !important; }\n}@media (min-width: 992px) {\n  .d-lg-none { display: none !important; }\n  .d-lg-inline { display: inline !important; }\n  .d-lg-inline-block { display: inline-block !important; }\n  .d-lg-block { display: block !important; }\n  .d-lg-table { display: table !important; }\n  .d-lg-table-row { display: table-row !important; }\n  .d-lg-table-cell { display: table-cell !important; }\n  .d-lg-flex { display: flex !important; }\n  .d-lg-inline-flex { display: inline-flex !important; }\n}@media (min-width: 1200px) {\n  .d-xl-none { display: none !important; }\n  .d-xl-inline { display: inline !important; }\n  .d-xl-inline-block { display: inline-block !important; }\n  .d-xl-block { display: block !important; }\n  .d-xl-table { display: table !important; }\n  .d-xl-table-row { display: table-row !important; }\n  .d-xl-table-cell { display: table-cell !important; }\n  .d-xl-flex { display: flex !important; }\n  .d-xl-inline-flex { display: inline-flex !important; }\n}@media print {\n  .d-print-none { display: none !important; }\n  .d-print-inline { display: inline !important; }\n  .d-print-inline-block { display: inline-block !important; }\n  .d-print-block { display: block !important; }\n  .d-print-table { display: table !important; }\n  .d-print-table-row { display: table-row !important; }\n  .d-print-table-cell { display: table-cell !important; }\n  .d-print-flex { display: flex !important; }\n  .d-print-inline-flex { display: inline-flex !important; }\n}.embed-responsive { position: relative; display: block; width: 100%; padding: 0px; overflow: hidden; }.embed-responsive::before { display: block; content: \"\"; }.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video { position: absolute; top: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; border: 0px; }.embed-responsive-21by9::before { padding-top: 42.8571%; }.embed-responsive-16by9::before { padding-top: 56.25%; }.embed-responsive-4by3::before { padding-top: 75%; }.embed-responsive-1by1::before { padding-top: 100%; }.flex-row { flex-direction: row !important; }.flex-column { flex-direction: column !important; }.flex-row-reverse { flex-direction: row-reverse !important; }.flex-column-reverse { flex-direction: column-reverse !important; }.flex-wrap { flex-wrap: wrap !important; }.flex-nowrap { flex-wrap: nowrap !important; }.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }.flex-fill { flex: 1 1 auto !important; }.flex-grow-0 { flex-grow: 0 !important; }.flex-grow-1 { flex-grow: 1 !important; }.flex-shrink-0 { flex-shrink: 0 !important; }.flex-shrink-1 { flex-shrink: 1 !important; }.justify-content-start { justify-content: flex-start !important; }.justify-content-end { justify-content: flex-end !important; }.justify-content-center { justify-content: center !important; }.justify-content-between { justify-content: space-between !important; }.justify-content-around { justify-content: space-around !important; }.align-items-start { align-items: flex-start !important; }.align-items-end { align-items: flex-end !important; }.align-items-center { align-items: center !important; }.align-items-baseline { align-items: baseline !important; }.align-items-stretch { align-items: stretch !important; }.align-content-start { align-content: flex-start !important; }.align-content-end { align-content: flex-end !important; }.align-content-center { align-content: center !important; }.align-content-between { align-content: space-between !important; }.align-content-around { align-content: space-around !important; }.align-content-stretch { align-content: stretch !important; }.align-self-auto { align-self: auto !important; }.align-self-start { align-self: flex-start !important; }.align-self-end { align-self: flex-end !important; }.align-self-center { align-self: center !important; }.align-self-baseline { align-self: baseline !important; }.align-self-stretch { align-self: stretch !important; }@media (min-width: 576px) {\n  .flex-sm-row { flex-direction: row !important; }\n  .flex-sm-column { flex-direction: column !important; }\n  .flex-sm-row-reverse { flex-direction: row-reverse !important; }\n  .flex-sm-column-reverse { flex-direction: column-reverse !important; }\n  .flex-sm-wrap { flex-wrap: wrap !important; }\n  .flex-sm-nowrap { flex-wrap: nowrap !important; }\n  .flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; }\n  .flex-sm-fill { flex: 1 1 auto !important; }\n  .flex-sm-grow-0 { flex-grow: 0 !important; }\n  .flex-sm-grow-1 { flex-grow: 1 !important; }\n  .flex-sm-shrink-0 { flex-shrink: 0 !important; }\n  .flex-sm-shrink-1 { flex-shrink: 1 !important; }\n  .justify-content-sm-start { justify-content: flex-start !important; }\n  .justify-content-sm-end { justify-content: flex-end !important; }\n  .justify-content-sm-center { justify-content: center !important; }\n  .justify-content-sm-between { justify-content: space-between !important; }\n  .justify-content-sm-around { justify-content: space-around !important; }\n  .align-items-sm-start { align-items: flex-start !important; }\n  .align-items-sm-end { align-items: flex-end !important; }\n  .align-items-sm-center { align-items: center !important; }\n  .align-items-sm-baseline { align-items: baseline !important; }\n  .align-items-sm-stretch { align-items: stretch !important; }\n  .align-content-sm-start { align-content: flex-start !important; }\n  .align-content-sm-end { align-content: flex-end !important; }\n  .align-content-sm-center { align-content: center !important; }\n  .align-content-sm-between { align-content: space-between !important; }\n  .align-content-sm-around { align-content: space-around !important; }\n  .align-content-sm-stretch { align-content: stretch !important; }\n  .align-self-sm-auto { align-self: auto !important; }\n  .align-self-sm-start { align-self: flex-start !important; }\n  .align-self-sm-end { align-self: flex-end !important; }\n  .align-self-sm-center { align-self: center !important; }\n  .align-self-sm-baseline { align-self: baseline !important; }\n  .align-self-sm-stretch { align-self: stretch !important; }\n}@media (min-width: 768px) {\n  .flex-md-row { flex-direction: row !important; }\n  .flex-md-column { flex-direction: column !important; }\n  .flex-md-row-reverse { flex-direction: row-reverse !important; }\n  .flex-md-column-reverse { flex-direction: column-reverse !important; }\n  .flex-md-wrap { flex-wrap: wrap !important; }\n  .flex-md-nowrap { flex-wrap: nowrap !important; }\n  .flex-md-wrap-reverse { flex-wrap: wrap-reverse !important; }\n  .flex-md-fill { flex: 1 1 auto !important; }\n  .flex-md-grow-0 { flex-grow: 0 !important; }\n  .flex-md-grow-1 { flex-grow: 1 !important; }\n  .flex-md-shrink-0 { flex-shrink: 0 !important; }\n  .flex-md-shrink-1 { flex-shrink: 1 !important; }\n  .justify-content-md-start { justify-content: flex-start !important; }\n  .justify-content-md-end { justify-content: flex-end !important; }\n  .justify-content-md-center { justify-content: center !important; }\n  .justify-content-md-between { justify-content: space-between !important; }\n  .justify-content-md-around { justify-content: space-around !important; }\n  .align-items-md-start { align-items: flex-start !important; }\n  .align-items-md-end { align-items: flex-end !important; }\n  .align-items-md-center { align-items: center !important; }\n  .align-items-md-baseline { align-items: baseline !important; }\n  .align-items-md-stretch { align-items: stretch !important; }\n  .align-content-md-start { align-content: flex-start !important; }\n  .align-content-md-end { align-content: flex-end !important; }\n  .align-content-md-center { align-content: center !important; }\n  .align-content-md-between { align-content: space-between !important; }\n  .align-content-md-around { align-content: space-around !important; }\n  .align-content-md-stretch { align-content: stretch !important; }\n  .align-self-md-auto { align-self: auto !important; }\n  .align-self-md-start { align-self: flex-start !important; }\n  .align-self-md-end { align-self: flex-end !important; }\n  .align-self-md-center { align-self: center !important; }\n  .align-self-md-baseline { align-self: baseline !important; }\n  .align-self-md-stretch { align-self: stretch !important; }\n}@media (min-width: 992px) {\n  .flex-lg-row { flex-direction: row !important; }\n  .flex-lg-column { flex-direction: column !important; }\n  .flex-lg-row-reverse { flex-direction: row-reverse !important; }\n  .flex-lg-column-reverse { flex-direction: column-reverse !important; }\n  .flex-lg-wrap { flex-wrap: wrap !important; }\n  .flex-lg-nowrap { flex-wrap: nowrap !important; }\n  .flex-lg-wrap-reverse { flex-wrap: wrap-reverse !important; }\n  .flex-lg-fill { flex: 1 1 auto !important; }\n  .flex-lg-grow-0 { flex-grow: 0 !important; }\n  .flex-lg-grow-1 { flex-grow: 1 !important; }\n  .flex-lg-shrink-0 { flex-shrink: 0 !important; }\n  .flex-lg-shrink-1 { flex-shrink: 1 !important; }\n  .justify-content-lg-start { justify-content: flex-start !important; }\n  .justify-content-lg-end { justify-content: flex-end !important; }\n  .justify-content-lg-center { justify-content: center !important; }\n  .justify-content-lg-between { justify-content: space-between !important; }\n  .justify-content-lg-around { justify-content: space-around !important; }\n  .align-items-lg-start { align-items: flex-start !important; }\n  .align-items-lg-end { align-items: flex-end !important; }\n  .align-items-lg-center { align-items: center !important; }\n  .align-items-lg-baseline { align-items: baseline !important; }\n  .align-items-lg-stretch { align-items: stretch !important; }\n  .align-content-lg-start { align-content: flex-start !important; }\n  .align-content-lg-end { align-content: flex-end !important; }\n  .align-content-lg-center { align-content: center !important; }\n  .align-content-lg-between { align-content: space-between !important; }\n  .align-content-lg-around { align-content: space-around !important; }\n  .align-content-lg-stretch { align-content: stretch !important; }\n  .align-self-lg-auto { align-self: auto !important; }\n  .align-self-lg-start { align-self: flex-start !important; }\n  .align-self-lg-end { align-self: flex-end !important; }\n  .align-self-lg-center { align-self: center !important; }\n  .align-self-lg-baseline { align-self: baseline !important; }\n  .align-self-lg-stretch { align-self: stretch !important; }\n}@media (min-width: 1200px) {\n  .flex-xl-row { flex-direction: row !important; }\n  .flex-xl-column { flex-direction: column !important; }\n  .flex-xl-row-reverse { flex-direction: row-reverse !important; }\n  .flex-xl-column-reverse { flex-direction: column-reverse !important; }\n  .flex-xl-wrap { flex-wrap: wrap !important; }\n  .flex-xl-nowrap { flex-wrap: nowrap !important; }\n  .flex-xl-wrap-reverse { flex-wrap: wrap-reverse !important; }\n  .flex-xl-fill { flex: 1 1 auto !important; }\n  .flex-xl-grow-0 { flex-grow: 0 !important; }\n  .flex-xl-grow-1 { flex-grow: 1 !important; }\n  .flex-xl-shrink-0 { flex-shrink: 0 !important; }\n  .flex-xl-shrink-1 { flex-shrink: 1 !important; }\n  .justify-content-xl-start { justify-content: flex-start !important; }\n  .justify-content-xl-end { justify-content: flex-end !important; }\n  .justify-content-xl-center { justify-content: center !important; }\n  .justify-content-xl-between { justify-content: space-between !important; }\n  .justify-content-xl-around { justify-content: space-around !important; }\n  .align-items-xl-start { align-items: flex-start !important; }\n  .align-items-xl-end { align-items: flex-end !important; }\n  .align-items-xl-center { align-items: center !important; }\n  .align-items-xl-baseline { align-items: baseline !important; }\n  .align-items-xl-stretch { align-items: stretch !important; }\n  .align-content-xl-start { align-content: flex-start !important; }\n  .align-content-xl-end { align-content: flex-end !important; }\n  .align-content-xl-center { align-content: center !important; }\n  .align-content-xl-between { align-content: space-between !important; }\n  .align-content-xl-around { align-content: space-around !important; }\n  .align-content-xl-stretch { align-content: stretch !important; }\n  .align-self-xl-auto { align-self: auto !important; }\n  .align-self-xl-start { align-self: flex-start !important; }\n  .align-self-xl-end { align-self: flex-end !important; }\n  .align-self-xl-center { align-self: center !important; }\n  .align-self-xl-baseline { align-self: baseline !important; }\n  .align-self-xl-stretch { align-self: stretch !important; }\n}.float-left { float: left !important; }.float-right { float: right !important; }.float-none { float: none !important; }@media (min-width: 576px) {\n  .float-sm-left { float: left !important; }\n  .float-sm-right { float: right !important; }\n  .float-sm-none { float: none !important; }\n}@media (min-width: 768px) {\n  .float-md-left { float: left !important; }\n  .float-md-right { float: right !important; }\n  .float-md-none { float: none !important; }\n}@media (min-width: 992px) {\n  .float-lg-left { float: left !important; }\n  .float-lg-right { float: right !important; }\n  .float-lg-none { float: none !important; }\n}@media (min-width: 1200px) {\n  .float-xl-left { float: left !important; }\n  .float-xl-right { float: right !important; }\n  .float-xl-none { float: none !important; }\n}.position-static { position: static !important; }.position-relative { position: relative !important; }.position-absolute { position: absolute !important; }.position-fixed { position: fixed !important; }.position-sticky { position: sticky !important; }.fixed-top { position: fixed; top: 0px; right: 0px; left: 0px; z-index: 1030; }.fixed-bottom { position: fixed; right: 0px; bottom: 0px; left: 0px; z-index: 1030; }@supports ((position:-webkit-sticky) or (position:sticky)) {\n  .sticky-top { position: sticky; top: 0px; z-index: 1020; }\n}.sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }.sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }.shadow-sm { box-shadow: rgba(0, 0, 0, 0.075) 0px 0.125rem 0.25rem !important; }.shadow { box-shadow: rgba(0, 0, 0, 0.15) 0px 0.5rem 1rem !important; }.shadow-lg { box-shadow: rgba(0, 0, 0, 0.176) 0px 1rem 3rem !important; }.shadow-none { box-shadow: none !important; }.w-25 { width: 25% !important; }.w-50 { width: 50% !important; }.w-75 { width: 75% !important; }.w-100 { width: 100% !important; }.w-auto { width: auto !important; }.h-25 { height: 25% !important; }.h-50 { height: 50% !important; }.h-75 { height: 75% !important; }.h-100 { height: 100% !important; }.h-auto { height: auto !important; }.mw-100 { max-width: 100% !important; }.mh-100 { max-height: 100% !important; }.m-0 { margin: 0px !important; }.mt-0, .my-0 { margin-top: 0px !important; }.mr-0, .mx-0 { margin-right: 0px !important; }.mb-0, .my-0 { margin-bottom: 0px !important; }.ml-0, .mx-0 { margin-left: 0px !important; }.m-1 { margin: 0.25rem !important; }.mt-1, .my-1 { margin-top: 0.25rem !important; }.mr-1, .mx-1 { margin-right: 0.25rem !important; }.mb-1, .my-1 { margin-bottom: 0.25rem !important; }.ml-1, .mx-1 { margin-left: 0.25rem !important; }.m-2 { margin: 0.5rem !important; }.mt-2, .my-2 { margin-top: 0.5rem !important; }.mr-2, .mx-2 { margin-right: 0.5rem !important; }.mb-2, .my-2 { margin-bottom: 0.5rem !important; }.ml-2, .mx-2 { margin-left: 0.5rem !important; }.m-3 { margin: 1rem !important; }.mt-3, .my-3 { margin-top: 1rem !important; }.mr-3, .mx-3 { margin-right: 1rem !important; }.mb-3, .my-3 { margin-bottom: 1rem !important; }.ml-3, .mx-3 { margin-left: 1rem !important; }.m-4 { margin: 1.5rem !important; }.mt-4, .my-4 { margin-top: 1.5rem !important; }.mr-4, .mx-4 { margin-right: 1.5rem !important; }.mb-4, .my-4 { margin-bottom: 1.5rem !important; }.ml-4, .mx-4 { margin-left: 1.5rem !important; }.m-5 { margin: 3rem !important; }.mt-5, .my-5 { margin-top: 3rem !important; }.mr-5, .mx-5 { margin-right: 3rem !important; }.mb-5, .my-5 { margin-bottom: 3rem !important; }.ml-5, .mx-5 { margin-left: 3rem !important; }.p-0 { padding: 0px !important; }.pt-0, .py-0 { padding-top: 0px !important; }.pr-0, .px-0 { padding-right: 0px !important; }.pb-0, .py-0 { padding-bottom: 0px !important; }.pl-0, .px-0 { padding-left: 0px !important; }.p-1 { padding: 0.25rem !important; }.pt-1, .py-1 { padding-top: 0.25rem !important; }.pr-1, .px-1 { padding-right: 0.25rem !important; }.pb-1, .py-1 { padding-bottom: 0.25rem !important; }.pl-1, .px-1 { padding-left: 0.25rem !important; }.p-2 { padding: 0.5rem !important; }.pt-2, .py-2 { padding-top: 0.5rem !important; }.pr-2, .px-2 { padding-right: 0.5rem !important; }.pb-2, .py-2 { padding-bottom: 0.5rem !important; }.pl-2, .px-2 { padding-left: 0.5rem !important; }.p-3 { padding: 1rem !important; }.pt-3, .py-3 { padding-top: 1rem !important; }.pr-3, .px-3 { padding-right: 1rem !important; }.pb-3, .py-3 { padding-bottom: 1rem !important; }.pl-3, .px-3 { padding-left: 1rem !important; }.p-4 { padding: 1.5rem !important; }.pt-4, .py-4 { padding-top: 1.5rem !important; }.pr-4, .px-4 { padding-right: 1.5rem !important; }.pb-4, .py-4 { padding-bottom: 1.5rem !important; }.pl-4, .px-4 { padding-left: 1.5rem !important; }.p-5 { padding: 3rem !important; }.pt-5, .py-5 { padding-top: 3rem !important; }.pr-5, .px-5 { padding-right: 3rem !important; }.pb-5, .py-5 { padding-bottom: 3rem !important; }.pl-5, .px-5 { padding-left: 3rem !important; }.m-auto { margin: auto !important; }.mt-auto, .my-auto { margin-top: auto !important; }.mr-auto, .mx-auto { margin-right: auto !important; }.mb-auto, .my-auto { margin-bottom: auto !important; }.ml-auto, .mx-auto { margin-left: auto !important; }@media (min-width: 576px) {\n  .m-sm-0 { margin: 0px !important; }\n  .mt-sm-0, .my-sm-0 { margin-top: 0px !important; }\n  .mr-sm-0, .mx-sm-0 { margin-right: 0px !important; }\n  .mb-sm-0, .my-sm-0 { margin-bottom: 0px !important; }\n  .ml-sm-0, .mx-sm-0 { margin-left: 0px !important; }\n  .m-sm-1 { margin: 0.25rem !important; }\n  .mt-sm-1, .my-sm-1 { margin-top: 0.25rem !important; }\n  .mr-sm-1, .mx-sm-1 { margin-right: 0.25rem !important; }\n  .mb-sm-1, .my-sm-1 { margin-bottom: 0.25rem !important; }\n  .ml-sm-1, .mx-sm-1 { margin-left: 0.25rem !important; }\n  .m-sm-2 { margin: 0.5rem !important; }\n  .mt-sm-2, .my-sm-2 { margin-top: 0.5rem !important; }\n  .mr-sm-2, .mx-sm-2 { margin-right: 0.5rem !important; }\n  .mb-sm-2, .my-sm-2 { margin-bottom: 0.5rem !important; }\n  .ml-sm-2, .mx-sm-2 { margin-left: 0.5rem !important; }\n  .m-sm-3 { margin: 1rem !important; }\n  .mt-sm-3, .my-sm-3 { margin-top: 1rem !important; }\n  .mr-sm-3, .mx-sm-3 { margin-right: 1rem !important; }\n  .mb-sm-3, .my-sm-3 { margin-bottom: 1rem !important; }\n  .ml-sm-3, .mx-sm-3 { margin-left: 1rem !important; }\n  .m-sm-4 { margin: 1.5rem !important; }\n  .mt-sm-4, .my-sm-4 { margin-top: 1.5rem !important; }\n  .mr-sm-4, .mx-sm-4 { margin-right: 1.5rem !important; }\n  .mb-sm-4, .my-sm-4 { margin-bottom: 1.5rem !important; }\n  .ml-sm-4, .mx-sm-4 { margin-left: 1.5rem !important; }\n  .m-sm-5 { margin: 3rem !important; }\n  .mt-sm-5, .my-sm-5 { margin-top: 3rem !important; }\n  .mr-sm-5, .mx-sm-5 { margin-right: 3rem !important; }\n  .mb-sm-5, .my-sm-5 { margin-bottom: 3rem !important; }\n  .ml-sm-5, .mx-sm-5 { margin-left: 3rem !important; }\n  .p-sm-0 { padding: 0px !important; }\n  .pt-sm-0, .py-sm-0 { padding-top: 0px !important; }\n  .pr-sm-0, .px-sm-0 { padding-right: 0px !important; }\n  .pb-sm-0, .py-sm-0 { padding-bottom: 0px !important; }\n  .pl-sm-0, .px-sm-0 { padding-left: 0px !important; }\n  .p-sm-1 { padding: 0.25rem !important; }\n  .pt-sm-1, .py-sm-1 { padding-top: 0.25rem !important; }\n  .pr-sm-1, .px-sm-1 { padding-right: 0.25rem !important; }\n  .pb-sm-1, .py-sm-1 { padding-bottom: 0.25rem !important; }\n  .pl-sm-1, .px-sm-1 { padding-left: 0.25rem !important; }\n  .p-sm-2 { padding: 0.5rem !important; }\n  .pt-sm-2, .py-sm-2 { padding-top: 0.5rem !important; }\n  .pr-sm-2, .px-sm-2 { padding-right: 0.5rem !important; }\n  .pb-sm-2, .py-sm-2 { padding-bottom: 0.5rem !important; }\n  .pl-sm-2, .px-sm-2 { padding-left: 0.5rem !important; }\n  .p-sm-3 { padding: 1rem !important; }\n  .pt-sm-3, .py-sm-3 { padding-top: 1rem !important; }\n  .pr-sm-3, .px-sm-3 { padding-right: 1rem !important; }\n  .pb-sm-3, .py-sm-3 { padding-bottom: 1rem !important; }\n  .pl-sm-3, .px-sm-3 { padding-left: 1rem !important; }\n  .p-sm-4 { padding: 1.5rem !important; }\n  .pt-sm-4, .py-sm-4 { padding-top: 1.5rem !important; }\n  .pr-sm-4, .px-sm-4 { padding-right: 1.5rem !important; }\n  .pb-sm-4, .py-sm-4 { padding-bottom: 1.5rem !important; }\n  .pl-sm-4, .px-sm-4 { padding-left: 1.5rem !important; }\n  .p-sm-5 { padding: 3rem !important; }\n  .pt-sm-5, .py-sm-5 { padding-top: 3rem !important; }\n  .pr-sm-5, .px-sm-5 { padding-right: 3rem !important; }\n  .pb-sm-5, .py-sm-5 { padding-bottom: 3rem !important; }\n  .pl-sm-5, .px-sm-5 { padding-left: 3rem !important; }\n  .m-sm-auto { margin: auto !important; }\n  .mt-sm-auto, .my-sm-auto { margin-top: auto !important; }\n  .mr-sm-auto, .mx-sm-auto { margin-right: auto !important; }\n  .mb-sm-auto, .my-sm-auto { margin-bottom: auto !important; }\n  .ml-sm-auto, .mx-sm-auto { margin-left: auto !important; }\n}@media (min-width: 768px) {\n  .m-md-0 { margin: 0px !important; }\n  .mt-md-0, .my-md-0 { margin-top: 0px !important; }\n  .mr-md-0, .mx-md-0 { margin-right: 0px !important; }\n  .mb-md-0, .my-md-0 { margin-bottom: 0px !important; }\n  .ml-md-0, .mx-md-0 { margin-left: 0px !important; }\n  .m-md-1 { margin: 0.25rem !important; }\n  .mt-md-1, .my-md-1 { margin-top: 0.25rem !important; }\n  .mr-md-1, .mx-md-1 { margin-right: 0.25rem !important; }\n  .mb-md-1, .my-md-1 { margin-bottom: 0.25rem !important; }\n  .ml-md-1, .mx-md-1 { margin-left: 0.25rem !important; }\n  .m-md-2 { margin: 0.5rem !important; }\n  .mt-md-2, .my-md-2 { margin-top: 0.5rem !important; }\n  .mr-md-2, .mx-md-2 { margin-right: 0.5rem !important; }\n  .mb-md-2, .my-md-2 { margin-bottom: 0.5rem !important; }\n  .ml-md-2, .mx-md-2 { margin-left: 0.5rem !important; }\n  .m-md-3 { margin: 1rem !important; }\n  .mt-md-3, .my-md-3 { margin-top: 1rem !important; }\n  .mr-md-3, .mx-md-3 { margin-right: 1rem !important; }\n  .mb-md-3, .my-md-3 { margin-bottom: 1rem !important; }\n  .ml-md-3, .mx-md-3 { margin-left: 1rem !important; }\n  .m-md-4 { margin: 1.5rem !important; }\n  .mt-md-4, .my-md-4 { margin-top: 1.5rem !important; }\n  .mr-md-4, .mx-md-4 { margin-right: 1.5rem !important; }\n  .mb-md-4, .my-md-4 { margin-bottom: 1.5rem !important; }\n  .ml-md-4, .mx-md-4 { margin-left: 1.5rem !important; }\n  .m-md-5 { margin: 3rem !important; }\n  .mt-md-5, .my-md-5 { margin-top: 3rem !important; }\n  .mr-md-5, .mx-md-5 { margin-right: 3rem !important; }\n  .mb-md-5, .my-md-5 { margin-bottom: 3rem !important; }\n  .ml-md-5, .mx-md-5 { margin-left: 3rem !important; }\n  .p-md-0 { padding: 0px !important; }\n  .pt-md-0, .py-md-0 { padding-top: 0px !important; }\n  .pr-md-0, .px-md-0 { padding-right: 0px !important; }\n  .pb-md-0, .py-md-0 { padding-bottom: 0px !important; }\n  .pl-md-0, .px-md-0 { padding-left: 0px !important; }\n  .p-md-1 { padding: 0.25rem !important; }\n  .pt-md-1, .py-md-1 { padding-top: 0.25rem !important; }\n  .pr-md-1, .px-md-1 { padding-right: 0.25rem !important; }\n  .pb-md-1, .py-md-1 { padding-bottom: 0.25rem !important; }\n  .pl-md-1, .px-md-1 { padding-left: 0.25rem !important; }\n  .p-md-2 { padding: 0.5rem !important; }\n  .pt-md-2, .py-md-2 { padding-top: 0.5rem !important; }\n  .pr-md-2, .px-md-2 { padding-right: 0.5rem !important; }\n  .pb-md-2, .py-md-2 { padding-bottom: 0.5rem !important; }\n  .pl-md-2, .px-md-2 { padding-left: 0.5rem !important; }\n  .p-md-3 { padding: 1rem !important; }\n  .pt-md-3, .py-md-3 { padding-top: 1rem !important; }\n  .pr-md-3, .px-md-3 { padding-right: 1rem !important; }\n  .pb-md-3, .py-md-3 { padding-bottom: 1rem !important; }\n  .pl-md-3, .px-md-3 { padding-left: 1rem !important; }\n  .p-md-4 { padding: 1.5rem !important; }\n  .pt-md-4, .py-md-4 { padding-top: 1.5rem !important; }\n  .pr-md-4, .px-md-4 { padding-right: 1.5rem !important; }\n  .pb-md-4, .py-md-4 { padding-bottom: 1.5rem !important; }\n  .pl-md-4, .px-md-4 { padding-left: 1.5rem !important; }\n  .p-md-5 { padding: 3rem !important; }\n  .pt-md-5, .py-md-5 { padding-top: 3rem !important; }\n  .pr-md-5, .px-md-5 { padding-right: 3rem !important; }\n  .pb-md-5, .py-md-5 { padding-bottom: 3rem !important; }\n  .pl-md-5, .px-md-5 { padding-left: 3rem !important; }\n  .m-md-auto { margin: auto !important; }\n  .mt-md-auto, .my-md-auto { margin-top: auto !important; }\n  .mr-md-auto, .mx-md-auto { margin-right: auto !important; }\n  .mb-md-auto, .my-md-auto { margin-bottom: auto !important; }\n  .ml-md-auto, .mx-md-auto { margin-left: auto !important; }\n}@media (min-width: 992px) {\n  .m-lg-0 { margin: 0px !important; }\n  .mt-lg-0, .my-lg-0 { margin-top: 0px !important; }\n  .mr-lg-0, .mx-lg-0 { margin-right: 0px !important; }\n  .mb-lg-0, .my-lg-0 { margin-bottom: 0px !important; }\n  .ml-lg-0, .mx-lg-0 { margin-left: 0px !important; }\n  .m-lg-1 { margin: 0.25rem !important; }\n  .mt-lg-1, .my-lg-1 { margin-top: 0.25rem !important; }\n  .mr-lg-1, .mx-lg-1 { margin-right: 0.25rem !important; }\n  .mb-lg-1, .my-lg-1 { margin-bottom: 0.25rem !important; }\n  .ml-lg-1, .mx-lg-1 { margin-left: 0.25rem !important; }\n  .m-lg-2 { margin: 0.5rem !important; }\n  .mt-lg-2, .my-lg-2 { margin-top: 0.5rem !important; }\n  .mr-lg-2, .mx-lg-2 { margin-right: 0.5rem !important; }\n  .mb-lg-2, .my-lg-2 { margin-bottom: 0.5rem !important; }\n  .ml-lg-2, .mx-lg-2 { margin-left: 0.5rem !important; }\n  .m-lg-3 { margin: 1rem !important; }\n  .mt-lg-3, .my-lg-3 { margin-top: 1rem !important; }\n  .mr-lg-3, .mx-lg-3 { margin-right: 1rem !important; }\n  .mb-lg-3, .my-lg-3 { margin-bottom: 1rem !important; }\n  .ml-lg-3, .mx-lg-3 { margin-left: 1rem !important; }\n  .m-lg-4 { margin: 1.5rem !important; }\n  .mt-lg-4, .my-lg-4 { margin-top: 1.5rem !important; }\n  .mr-lg-4, .mx-lg-4 { margin-right: 1.5rem !important; }\n  .mb-lg-4, .my-lg-4 { margin-bottom: 1.5rem !important; }\n  .ml-lg-4, .mx-lg-4 { margin-left: 1.5rem !important; }\n  .m-lg-5 { margin: 3rem !important; }\n  .mt-lg-5, .my-lg-5 { margin-top: 3rem !important; }\n  .mr-lg-5, .mx-lg-5 { margin-right: 3rem !important; }\n  .mb-lg-5, .my-lg-5 { margin-bottom: 3rem !important; }\n  .ml-lg-5, .mx-lg-5 { margin-left: 3rem !important; }\n  .p-lg-0 { padding: 0px !important; }\n  .pt-lg-0, .py-lg-0 { padding-top: 0px !important; }\n  .pr-lg-0, .px-lg-0 { padding-right: 0px !important; }\n  .pb-lg-0, .py-lg-0 { padding-bottom: 0px !important; }\n  .pl-lg-0, .px-lg-0 { padding-left: 0px !important; }\n  .p-lg-1 { padding: 0.25rem !important; }\n  .pt-lg-1, .py-lg-1 { padding-top: 0.25rem !important; }\n  .pr-lg-1, .px-lg-1 { padding-right: 0.25rem !important; }\n  .pb-lg-1, .py-lg-1 { padding-bottom: 0.25rem !important; }\n  .pl-lg-1, .px-lg-1 { padding-left: 0.25rem !important; }\n  .p-lg-2 { padding: 0.5rem !important; }\n  .pt-lg-2, .py-lg-2 { padding-top: 0.5rem !important; }\n  .pr-lg-2, .px-lg-2 { padding-right: 0.5rem !important; }\n  .pb-lg-2, .py-lg-2 { padding-bottom: 0.5rem !important; }\n  .pl-lg-2, .px-lg-2 { padding-left: 0.5rem !important; }\n  .p-lg-3 { padding: 1rem !important; }\n  .pt-lg-3, .py-lg-3 { padding-top: 1rem !important; }\n  .pr-lg-3, .px-lg-3 { padding-right: 1rem !important; }\n  .pb-lg-3, .py-lg-3 { padding-bottom: 1rem !important; }\n  .pl-lg-3, .px-lg-3 { padding-left: 1rem !important; }\n  .p-lg-4 { padding: 1.5rem !important; }\n  .pt-lg-4, .py-lg-4 { padding-top: 1.5rem !important; }\n  .pr-lg-4, .px-lg-4 { padding-right: 1.5rem !important; }\n  .pb-lg-4, .py-lg-4 { padding-bottom: 1.5rem !important; }\n  .pl-lg-4, .px-lg-4 { padding-left: 1.5rem !important; }\n  .p-lg-5 { padding: 3rem !important; }\n  .pt-lg-5, .py-lg-5 { padding-top: 3rem !important; }\n  .pr-lg-5, .px-lg-5 { padding-right: 3rem !important; }\n  .pb-lg-5, .py-lg-5 { padding-bottom: 3rem !important; }\n  .pl-lg-5, .px-lg-5 { padding-left: 3rem !important; }\n  .m-lg-auto { margin: auto !important; }\n  .mt-lg-auto, .my-lg-auto { margin-top: auto !important; }\n  .mr-lg-auto, .mx-lg-auto { margin-right: auto !important; }\n  .mb-lg-auto, .my-lg-auto { margin-bottom: auto !important; }\n  .ml-lg-auto, .mx-lg-auto { margin-left: auto !important; }\n}@media (min-width: 1200px) {\n  .m-xl-0 { margin: 0px !important; }\n  .mt-xl-0, .my-xl-0 { margin-top: 0px !important; }\n  .mr-xl-0, .mx-xl-0 { margin-right: 0px !important; }\n  .mb-xl-0, .my-xl-0 { margin-bottom: 0px !important; }\n  .ml-xl-0, .mx-xl-0 { margin-left: 0px !important; }\n  .m-xl-1 { margin: 0.25rem !important; }\n  .mt-xl-1, .my-xl-1 { margin-top: 0.25rem !important; }\n  .mr-xl-1, .mx-xl-1 { margin-right: 0.25rem !important; }\n  .mb-xl-1, .my-xl-1 { margin-bottom: 0.25rem !important; }\n  .ml-xl-1, .mx-xl-1 { margin-left: 0.25rem !important; }\n  .m-xl-2 { margin: 0.5rem !important; }\n  .mt-xl-2, .my-xl-2 { margin-top: 0.5rem !important; }\n  .mr-xl-2, .mx-xl-2 { margin-right: 0.5rem !important; }\n  .mb-xl-2, .my-xl-2 { margin-bottom: 0.5rem !important; }\n  .ml-xl-2, .mx-xl-2 { margin-left: 0.5rem !important; }\n  .m-xl-3 { margin: 1rem !important; }\n  .mt-xl-3, .my-xl-3 { margin-top: 1rem !important; }\n  .mr-xl-3, .mx-xl-3 { margin-right: 1rem !important; }\n  .mb-xl-3, .my-xl-3 { margin-bottom: 1rem !important; }\n  .ml-xl-3, .mx-xl-3 { margin-left: 1rem !important; }\n  .m-xl-4 { margin: 1.5rem !important; }\n  .mt-xl-4, .my-xl-4 { margin-top: 1.5rem !important; }\n  .mr-xl-4, .mx-xl-4 { margin-right: 1.5rem !important; }\n  .mb-xl-4, .my-xl-4 { margin-bottom: 1.5rem !important; }\n  .ml-xl-4, .mx-xl-4 { margin-left: 1.5rem !important; }\n  .m-xl-5 { margin: 3rem !important; }\n  .mt-xl-5, .my-xl-5 { margin-top: 3rem !important; }\n  .mr-xl-5, .mx-xl-5 { margin-right: 3rem !important; }\n  .mb-xl-5, .my-xl-5 { margin-bottom: 3rem !important; }\n  .ml-xl-5, .mx-xl-5 { margin-left: 3rem !important; }\n  .p-xl-0 { padding: 0px !important; }\n  .pt-xl-0, .py-xl-0 { padding-top: 0px !important; }\n  .pr-xl-0, .px-xl-0 { padding-right: 0px !important; }\n  .pb-xl-0, .py-xl-0 { padding-bottom: 0px !important; }\n  .pl-xl-0, .px-xl-0 { padding-left: 0px !important; }\n  .p-xl-1 { padding: 0.25rem !important; }\n  .pt-xl-1, .py-xl-1 { padding-top: 0.25rem !important; }\n  .pr-xl-1, .px-xl-1 { padding-right: 0.25rem !important; }\n  .pb-xl-1, .py-xl-1 { padding-bottom: 0.25rem !important; }\n  .pl-xl-1, .px-xl-1 { padding-left: 0.25rem !important; }\n  .p-xl-2 { padding: 0.5rem !important; }\n  .pt-xl-2, .py-xl-2 { padding-top: 0.5rem !important; }\n  .pr-xl-2, .px-xl-2 { padding-right: 0.5rem !important; }\n  .pb-xl-2, .py-xl-2 { padding-bottom: 0.5rem !important; }\n  .pl-xl-2, .px-xl-2 { padding-left: 0.5rem !important; }\n  .p-xl-3 { padding: 1rem !important; }\n  .pt-xl-3, .py-xl-3 { padding-top: 1rem !important; }\n  .pr-xl-3, .px-xl-3 { padding-right: 1rem !important; }\n  .pb-xl-3, .py-xl-3 { padding-bottom: 1rem !important; }\n  .pl-xl-3, .px-xl-3 { padding-left: 1rem !important; }\n  .p-xl-4 { padding: 1.5rem !important; }\n  .pt-xl-4, .py-xl-4 { padding-top: 1.5rem !important; }\n  .pr-xl-4, .px-xl-4 { padding-right: 1.5rem !important; }\n  .pb-xl-4, .py-xl-4 { padding-bottom: 1.5rem !important; }\n  .pl-xl-4, .px-xl-4 { padding-left: 1.5rem !important; }\n  .p-xl-5 { padding: 3rem !important; }\n  .pt-xl-5, .py-xl-5 { padding-top: 3rem !important; }\n  .pr-xl-5, .px-xl-5 { padding-right: 3rem !important; }\n  .pb-xl-5, .py-xl-5 { padding-bottom: 3rem !important; }\n  .pl-xl-5, .px-xl-5 { padding-left: 3rem !important; }\n  .m-xl-auto { margin: auto !important; }\n  .mt-xl-auto, .my-xl-auto { margin-top: auto !important; }\n  .mr-xl-auto, .mx-xl-auto { margin-right: auto !important; }\n  .mb-xl-auto, .my-xl-auto { margin-bottom: auto !important; }\n  .ml-xl-auto, .mx-xl-auto { margin-left: auto !important; }\n}.text-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; }.text-justify { text-align: justify !important; }.text-nowrap { white-space: nowrap !important; }.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.text-left { text-align: left !important; }.text-right { text-align: right !important; }.text-center { text-align: center !important; }@media (min-width: 576px) {\n  .text-sm-left { text-align: left !important; }\n  .text-sm-right { text-align: right !important; }\n  .text-sm-center { text-align: center !important; }\n}@media (min-width: 768px) {\n  .text-md-left { text-align: left !important; }\n  .text-md-right { text-align: right !important; }\n  .text-md-center { text-align: center !important; }\n}@media (min-width: 992px) {\n  .text-lg-left { text-align: left !important; }\n  .text-lg-right { text-align: right !important; }\n  .text-lg-center { text-align: center !important; }\n}@media (min-width: 1200px) {\n  .text-xl-left { text-align: left !important; }\n  .text-xl-right { text-align: right !important; }\n  .text-xl-center { text-align: center !important; }\n}.text-lowercase { text-transform: lowercase !important; }.text-uppercase { text-transform: uppercase !important; }.text-capitalize { text-transform: capitalize !important; }.font-weight-light { font-weight: 300 !important; }.font-weight-normal { font-weight: 400 !important; }.font-weight-bold { font-weight: 700 !important; }.font-italic { font-style: italic !important; }.text-white { color: rgb(255, 255, 255) !important; }.text-primary { color: rgb(0, 123, 255) !important; }a.text-primary:focus, a.text-primary:hover { color: rgb(0, 98, 204) !important; }.text-secondary { color: rgb(108, 117, 125) !important; }a.text-secondary:focus, a.text-secondary:hover { color: rgb(84, 91, 98) !important; }.text-success { color: rgb(40, 167, 69) !important; }a.text-success:focus, a.text-success:hover { color: rgb(30, 126, 52) !important; }.text-info { color: rgb(23, 162, 184) !important; }a.text-info:focus, a.text-info:hover { color: rgb(17, 122, 139) !important; }.text-warning { color: rgb(255, 193, 7) !important; }a.text-warning:focus, a.text-warning:hover { color: rgb(211, 158, 0) !important; }.text-danger { color: rgb(220, 53, 69) !important; }a.text-danger:focus, a.text-danger:hover { color: rgb(189, 33, 48) !important; }.text-light { color: rgb(248, 249, 250) !important; }a.text-light:focus, a.text-light:hover { color: rgb(218, 224, 229) !important; }.text-dark { color: rgb(52, 58, 64) !important; }a.text-dark:focus, a.text-dark:hover { color: rgb(29, 33, 36) !important; }.text-body { color: rgb(33, 37, 41) !important; }.text-muted { color: rgb(108, 117, 125) !important; }.text-black-50 { color: rgba(0, 0, 0, 0.5) !important; }.text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }.text-hide { font: 0px/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0px; }.visible { visibility: visible !important; }.invisible { visibility: hidden !important; }@media print {\n  *, ::after, ::before { text-shadow: none !important; box-shadow: none !important; }\n  a:not(.btn) { text-decoration: underline; }\n  abbr[title]::after { content: \" (\" attr(title) \")\"; }\n  pre { white-space: pre-wrap !important; }\n  blockquote, pre { border: 1px solid rgb(173, 181, 189); break-inside: avoid; }\n  thead { display: table-header-group; }\n  img, tr { break-inside: avoid; }\n  h2, h3, p { orphans: 3; widows: 3; }\n  h2, h3 { break-after: avoid; }\n  @page { size: a3; }\n  body { min-width: 992px !important; }\n  .container { min-width: 992px !important; }\n  .navbar { display: none; }\n  .badge { border: 1px solid rgb(0, 0, 0); }\n  .table { border-collapse: collapse !important; }\n  .table td, .table th { background-color: rgb(255, 255, 255) !important; }\n  .table-bordered td, .table-bordered th { border: 1px solid rgb(222, 226, 230) !important; }\n  .table-dark { color: inherit; }\n  .table-dark tbody + tbody, .table-dark td, .table-dark th, .table-dark thead th { border-color: rgb(222, 226, 230); }\n  .table .thead-dark th { color: inherit; border-color: rgb(222, 226, 230); }\n}"},"childNodes":[],"id":22},{"type":3,"textContent":"\n\n  ","id":23},{"type":5,"textContent":" Custom styles for this template ","id":24},{"type":3,"textContent":"\n  ","id":25},{"type":2,"tagName":"link","attributes":{"_cssText":".container { max-width: 960px; }.lh-condensed { line-height: 1.25; }"},"childNodes":[],"id":26},{"type":3,"textContent":"\n","id":27}],"id":5},{"type":3,"textContent":"\n\n","id":28},{"type":2,"tagName":"body","attributes":{"class":"bg-light"},"childNodes":[{"type":3,"textContent":"\n\n  ","id":30},{"type":2,"tagName":"div","attributes":{"class":"container"},"childNodes":[{"type":3,"textContent":"\n    ","id":32},{"type":2,"tagName":"div","attributes":{"class":"py-5 text-center"},"childNodes":[{"type":3,"textContent":"\n      ","id":34},{"type":2,"tagName":"img","attributes":{"class":"d-block mx-auto mb-4","src":"http://127.0.0.1:5500/checkout-demo/index_files/bootstrap-solid.svg","alt":"","width":"72","height":"72"},"childNodes":[],"id":35},{"type":3,"textContent":"\n      ","id":36},{"type":2,"tagName":"h2","attributes":{},"childNodes":[{"type":3,"textContent":"Checkout form","id":38}],"id":37},{"type":3,"textContent":"\n      ","id":39},{"type":2,"tagName":"p","attributes":{"class":"lead"},"childNodes":[{"type":3,"textContent":"Below is an example form built entirely with Bootstrap's form controls. Each required form group\n        has\n        a validation state that can be triggered by attempting to submit the form without completing it.","id":41}],"id":40},{"type":3,"textContent":"\n    ","id":42}],"id":33},{"type":3,"textContent":"\n\n    ","id":43},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n      ","id":45},{"type":2,"tagName":"div","attributes":{"class":"col-md-4 order-md-2 mb-4"},"childNodes":[{"type":3,"textContent":"\n        ","id":47},{"type":2,"tagName":"h4","attributes":{"class":"d-flex justify-content-between align-items-center mb-3"},"childNodes":[{"type":3,"textContent":"\n          ","id":49},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Your cart","id":51}],"id":50},{"type":3,"textContent":"\n          ","id":52},{"type":2,"tagName":"span","attributes":{"class":"badge badge-secondary badge-pill"},"childNodes":[{"type":3,"textContent":"3","id":54}],"id":53},{"type":3,"textContent":"\n        ","id":55}],"id":48},{"type":3,"textContent":"\n        ","id":56},{"type":2,"tagName":"ul","attributes":{"class":"list-group mb-3"},"childNodes":[{"type":3,"textContent":"\n          ","id":58},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between lh-condensed"},"childNodes":[{"type":3,"textContent":"\n            ","id":60},{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"\n              ","id":62},{"type":2,"tagName":"h6","attributes":{"class":"my-0"},"childNodes":[{"type":3,"textContent":"Product name","id":64}],"id":63},{"type":3,"textContent":"\n              ","id":65},{"type":2,"tagName":"small","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Brief description","id":67}],"id":66},{"type":3,"textContent":"\n            ","id":68}],"id":61},{"type":3,"textContent":"\n            ","id":69},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"$12","id":71}],"id":70},{"type":3,"textContent":"\n          ","id":72}],"id":59},{"type":3,"textContent":"\n          ","id":73},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between lh-condensed"},"childNodes":[{"type":3,"textContent":"\n            ","id":75},{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"\n              ","id":77},{"type":2,"tagName":"h6","attributes":{"class":"my-0"},"childNodes":[{"type":3,"textContent":"Second product","id":79}],"id":78},{"type":3,"textContent":"\n              ","id":80},{"type":2,"tagName":"small","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Brief description","id":82}],"id":81},{"type":3,"textContent":"\n            ","id":83}],"id":76},{"type":3,"textContent":"\n            ","id":84},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"$8","id":86}],"id":85},{"type":3,"textContent":"\n          ","id":87}],"id":74},{"type":3,"textContent":"\n          ","id":88},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between lh-condensed"},"childNodes":[{"type":3,"textContent":"\n            ","id":90},{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"\n              ","id":92},{"type":2,"tagName":"h6","attributes":{"class":"my-0"},"childNodes":[{"type":3,"textContent":"Third item","id":94}],"id":93},{"type":3,"textContent":"\n              ","id":95},{"type":2,"tagName":"small","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Brief description","id":97}],"id":96},{"type":3,"textContent":"\n            ","id":98}],"id":91},{"type":3,"textContent":"\n            ","id":99},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"$5","id":101}],"id":100},{"type":3,"textContent":"\n          ","id":102}],"id":89},{"type":3,"textContent":"\n          ","id":103},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between bg-light"},"childNodes":[{"type":3,"textContent":"\n            ","id":105},{"type":2,"tagName":"div","attributes":{"class":"text-success"},"childNodes":[{"type":3,"textContent":"\n              ","id":107},{"type":2,"tagName":"h6","attributes":{"class":"my-0"},"childNodes":[{"type":3,"textContent":"Promo code","id":109}],"id":108},{"type":3,"textContent":"\n              ","id":110},{"type":2,"tagName":"small","attributes":{},"childNodes":[{"type":3,"textContent":"EXAMPLECODE","id":112}],"id":111},{"type":3,"textContent":"\n            ","id":113}],"id":106},{"type":3,"textContent":"\n            ","id":114},{"type":2,"tagName":"span","attributes":{"class":"text-success"},"childNodes":[{"type":3,"textContent":"-$5","id":116}],"id":115},{"type":3,"textContent":"\n          ","id":117}],"id":104},{"type":3,"textContent":"\n          ","id":118},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between"},"childNodes":[{"type":3,"textContent":"\n            ","id":120},{"type":2,"tagName":"span","attributes":{},"childNodes":[{"type":3,"textContent":"Total (USD)","id":122}],"id":121},{"type":3,"textContent":"\n            ","id":123},{"type":2,"tagName":"strong","attributes":{},"childNodes":[{"type":3,"textContent":"$20","id":125}],"id":124},{"type":3,"textContent":"\n          ","id":126}],"id":119},{"type":3,"textContent":"\n        ","id":127}],"id":57},{"type":3,"textContent":"\n\n        ","id":128},{"type":2,"tagName":"form","attributes":{"class":"card p-2"},"childNodes":[{"type":3,"textContent":"\n          ","id":130},{"type":2,"tagName":"div","attributes":{"class":"input-group"},"childNodes":[{"type":3,"textContent":"\n            ","id":132},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","placeholder":"Promo code"},"childNodes":[],"id":133},{"type":3,"textContent":"\n            ","id":134},{"type":2,"tagName":"div","attributes":{"class":"input-group-append"},"childNodes":[{"type":3,"textContent":"\n              ","id":136},{"type":2,"tagName":"button","attributes":{"type":"submit","class":"btn btn-secondary"},"childNodes":[{"type":3,"textContent":"Redeem","id":138}],"id":137},{"type":3,"textContent":"\n            ","id":139}],"id":135},{"type":3,"textContent":"\n          ","id":140}],"id":131},{"type":3,"textContent":"\n        ","id":141}],"id":129},{"type":3,"textContent":"\n      ","id":142}],"id":46},{"type":3,"textContent":"\n      ","id":143},{"type":2,"tagName":"div","attributes":{"class":"col-md-8 order-md-1"},"childNodes":[{"type":3,"textContent":"\n        ","id":145},{"type":2,"tagName":"h4","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"Billing address","id":147}],"id":146},{"type":3,"textContent":"\n        ","id":148},{"type":2,"tagName":"form","attributes":{"class":"needs-validation","novalidate":""},"childNodes":[{"type":3,"textContent":"\n          ","id":150},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n            ","id":152},{"type":2,"tagName":"div","attributes":{"class":"col-md-6 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":154},{"type":2,"tagName":"label","attributes":{"for":"firstName"},"childNodes":[{"type":3,"textContent":"First name","id":156}],"id":155},{"type":3,"textContent":"\n              ","id":157},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"firstName","placeholder":"","value":"","required":""},"childNodes":[],"id":158},{"type":3,"textContent":"\n              ","id":159},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Valid first name is required.\n              ","id":161}],"id":160},{"type":3,"textContent":"\n            ","id":162}],"id":153},{"type":3,"textContent":"\n            ","id":163},{"type":2,"tagName":"div","attributes":{"class":"col-md-6 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":165},{"type":2,"tagName":"label","attributes":{"for":"lastName"},"childNodes":[{"type":3,"textContent":"Last name","id":167}],"id":166},{"type":3,"textContent":"\n              ","id":168},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"lastName","placeholder":"","value":"","required":""},"childNodes":[],"id":169},{"type":3,"textContent":"\n              ","id":170},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Valid last name is required.\n              ","id":172}],"id":171},{"type":3,"textContent":"\n            ","id":173}],"id":164},{"type":3,"textContent":"\n          ","id":174}],"id":151},{"type":3,"textContent":"\n\n          ","id":175},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":177},{"type":2,"tagName":"label","attributes":{"for":"username"},"childNodes":[{"type":3,"textContent":"Username","id":179}],"id":178},{"type":3,"textContent":"\n            ","id":180},{"type":2,"tagName":"div","attributes":{"class":"input-group"},"childNodes":[{"type":3,"textContent":"\n              ","id":182},{"type":2,"tagName":"div","attributes":{"class":"input-group-prepend"},"childNodes":[{"type":3,"textContent":"\n                ","id":184},{"type":2,"tagName":"span","attributes":{"class":"input-group-text"},"childNodes":[{"type":3,"textContent":"@","id":186}],"id":185},{"type":3,"textContent":"\n              ","id":187}],"id":183},{"type":3,"textContent":"\n              ","id":188},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"username","placeholder":"Username","required":""},"childNodes":[],"id":189},{"type":3,"textContent":"\n              ","id":190},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback","style":"width: 100%;"},"childNodes":[{"type":3,"textContent":"\n                Your username is required.\n              ","id":192}],"id":191},{"type":3,"textContent":"\n            ","id":193}],"id":181},{"type":3,"textContent":"\n          ","id":194}],"id":176},{"type":3,"textContent":"\n\n          ","id":195},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":197},{"type":2,"tagName":"label","attributes":{"for":"email"},"childNodes":[{"type":3,"textContent":"Email ","id":199},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"(Optional)","id":201}],"id":200}],"id":198},{"type":3,"textContent":"\n            ","id":202},{"type":2,"tagName":"input","attributes":{"type":"email","class":"form-control","id":"email","placeholder":"you@example.com"},"childNodes":[],"id":203},{"type":3,"textContent":"\n            ","id":204},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n              Please enter a valid email address for shipping updates.\n            ","id":206}],"id":205},{"type":3,"textContent":"\n          ","id":207}],"id":196},{"type":3,"textContent":"\n\n          ","id":208},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":210},{"type":2,"tagName":"label","attributes":{"for":"address"},"childNodes":[{"type":3,"textContent":"Address","id":212}],"id":211},{"type":3,"textContent":"\n            ","id":213},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"address","placeholder":"1234 Main St","required":""},"childNodes":[],"id":214},{"type":3,"textContent":"\n            ","id":215},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n              Please enter your shipping address.\n            ","id":217}],"id":216},{"type":3,"textContent":"\n          ","id":218}],"id":209},{"type":3,"textContent":"\n\n          ","id":219},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":221},{"type":2,"tagName":"label","attributes":{"for":"address2"},"childNodes":[{"type":3,"textContent":"Address 2 ","id":223},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"(Optional)","id":225}],"id":224}],"id":222},{"type":3,"textContent":"\n            ","id":226},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"address2","placeholder":"Apartment or suite"},"childNodes":[],"id":227},{"type":3,"textContent":"\n          ","id":228}],"id":220},{"type":3,"textContent":"\n\n          ","id":229},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n            ","id":231},{"type":2,"tagName":"div","attributes":{"class":"col-md-5 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":233},{"type":2,"tagName":"label","attributes":{"for":"country"},"childNodes":[{"type":3,"textContent":"Country","id":235}],"id":234},{"type":3,"textContent":"\n              ","id":236},{"type":2,"tagName":"select","attributes":{"class":"custom-select d-block w-100","id":"country","required":""},"childNodes":[{"type":3,"textContent":"\n                ","id":238},{"type":2,"tagName":"option","attributes":{"value":"","selected":true},"childNodes":[{"type":3,"textContent":"Choose...","id":240}],"id":239},{"type":3,"textContent":"\n                ","id":241},{"type":2,"tagName":"option","attributes":{},"childNodes":[{"type":3,"textContent":"United States","id":243}],"id":242},{"type":3,"textContent":"\n              ","id":244}],"id":237},{"type":3,"textContent":"\n              ","id":245},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Please select a valid country.\n              ","id":247}],"id":246},{"type":3,"textContent":"\n            ","id":248}],"id":232},{"type":3,"textContent":"\n            ","id":249},{"type":2,"tagName":"div","attributes":{"class":"col-md-4 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":251},{"type":2,"tagName":"label","attributes":{"for":"state"},"childNodes":[{"type":3,"textContent":"State","id":253}],"id":252},{"type":3,"textContent":"\n              ","id":254},{"type":2,"tagName":"select","attributes":{"class":"custom-select d-block w-100","id":"state","required":""},"childNodes":[{"type":3,"textContent":"\n                ","id":256},{"type":2,"tagName":"option","attributes":{"value":"","selected":true},"childNodes":[{"type":3,"textContent":"Choose...","id":258}],"id":257},{"type":3,"textContent":"\n                ","id":259},{"type":2,"tagName":"option","attributes":{},"childNodes":[{"type":3,"textContent":"California","id":261}],"id":260},{"type":3,"textContent":"\n              ","id":262}],"id":255},{"type":3,"textContent":"\n              ","id":263},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Please provide a valid state.\n              ","id":265}],"id":264},{"type":3,"textContent":"\n            ","id":266}],"id":250},{"type":3,"textContent":"\n            ","id":267},{"type":2,"tagName":"div","attributes":{"class":"col-md-3 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":269},{"type":2,"tagName":"label","attributes":{"for":"zip"},"childNodes":[{"type":3,"textContent":"Zip","id":271}],"id":270},{"type":3,"textContent":"\n              ","id":272},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"zip","placeholder":"","required":""},"childNodes":[],"id":273},{"type":3,"textContent":"\n              ","id":274},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Zip code required.\n              ","id":276}],"id":275},{"type":3,"textContent":"\n            ","id":277}],"id":268},{"type":3,"textContent":"\n          ","id":278}],"id":230},{"type":3,"textContent":"\n          ","id":279},{"type":2,"tagName":"hr","attributes":{"class":"mb-4"},"childNodes":[],"id":280},{"type":3,"textContent":"\n          ","id":281},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-checkbox"},"childNodes":[{"type":3,"textContent":"\n            ","id":283},{"type":2,"tagName":"input","attributes":{"type":"checkbox","class":"custom-control-input","id":"same-address"},"childNodes":[],"id":284},{"type":3,"textContent":"\n            ","id":285},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"same-address"},"childNodes":[{"type":3,"textContent":"Shipping address is the same as my billing address","id":287}],"id":286},{"type":3,"textContent":"\n          ","id":288}],"id":282},{"type":3,"textContent":"\n          ","id":289},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-checkbox"},"childNodes":[{"type":3,"textContent":"\n            ","id":291},{"type":2,"tagName":"input","attributes":{"type":"checkbox","class":"custom-control-input","id":"save-info"},"childNodes":[],"id":292},{"type":3,"textContent":"\n            ","id":293},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"save-info"},"childNodes":[{"type":3,"textContent":"Save this information for next time","id":295}],"id":294},{"type":3,"textContent":"\n          ","id":296}],"id":290},{"type":3,"textContent":"\n          ","id":297},{"type":2,"tagName":"hr","attributes":{"class":"mb-4"},"childNodes":[],"id":298},{"type":3,"textContent":"\n\n          ","id":299},{"type":2,"tagName":"h4","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"Payment","id":301}],"id":300},{"type":3,"textContent":"\n\n          ","id":302},{"type":2,"tagName":"div","attributes":{"class":"d-block my-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":304},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-radio"},"childNodes":[{"type":3,"textContent":"\n              ","id":306},{"type":2,"tagName":"input","attributes":{"id":"credit","name":"paymentMethod","type":"radio","class":"custom-control-input","checked":true,"required":""},"childNodes":[],"id":307},{"type":3,"textContent":"\n              ","id":308},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"credit"},"childNodes":[{"type":3,"textContent":"Credit card","id":310}],"id":309},{"type":3,"textContent":"\n            ","id":311}],"id":305},{"type":3,"textContent":"\n            ","id":312},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-radio"},"childNodes":[{"type":3,"textContent":"\n              ","id":314},{"type":2,"tagName":"input","attributes":{"id":"debit","name":"paymentMethod","type":"radio","class":"custom-control-input","required":""},"childNodes":[],"id":315},{"type":3,"textContent":"\n              ","id":316},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"debit"},"childNodes":[{"type":3,"textContent":"Debit card","id":318}],"id":317},{"type":3,"textContent":"\n            ","id":319}],"id":313},{"type":3,"textContent":"\n            ","id":320},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-radio"},"childNodes":[{"type":3,"textContent":"\n              ","id":322},{"type":2,"tagName":"input","attributes":{"id":"paypal","name":"paymentMethod","type":"radio","class":"custom-control-input","required":""},"childNodes":[],"id":323},{"type":3,"textContent":"\n              ","id":324},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"paypal"},"childNodes":[{"type":3,"textContent":"PayPal","id":326}],"id":325},{"type":3,"textContent":"\n            ","id":327}],"id":321},{"type":3,"textContent":"\n          ","id":328}],"id":303},{"type":3,"textContent":"\n          ","id":329},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n            ","id":331},{"type":2,"tagName":"div","attributes":{"class":"col-md-6 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":333},{"type":2,"tagName":"label","attributes":{"for":"cc-name"},"childNodes":[{"type":3,"textContent":"Name on card","id":335}],"id":334},{"type":3,"textContent":"\n              ","id":336},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"cc-name","placeholder":"","required":""},"childNodes":[],"id":337},{"type":3,"textContent":"\n              ","id":338},{"type":2,"tagName":"small","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Full name as displayed on card","id":340}],"id":339},{"type":3,"textContent":"\n              ","id":341},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Name on card is required\n              ","id":343}],"id":342},{"type":3,"textContent":"\n            ","id":344}],"id":332},{"type":3,"textContent":"\n            ","id":345},{"type":2,"tagName":"div","attributes":{"class":"col-md-6 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":347},{"type":2,"tagName":"label","attributes":{"for":"cc-number"},"childNodes":[{"type":3,"textContent":"Credit card number","id":349}],"id":348},{"type":3,"textContent":"\n              ","id":350},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"cc-number","placeholder":"","required":""},"childNodes":[],"id":351},{"type":3,"textContent":"\n              ","id":352},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Credit card number is required\n              ","id":354}],"id":353},{"type":3,"textContent":"\n            ","id":355}],"id":346},{"type":3,"textContent":"\n          ","id":356}],"id":330},{"type":3,"textContent":"\n          ","id":357},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n            ","id":359},{"type":2,"tagName":"div","attributes":{"class":"col-md-3 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":361},{"type":2,"tagName":"label","attributes":{"for":"cc-expiration"},"childNodes":[{"type":3,"textContent":"Expiration","id":363}],"id":362},{"type":3,"textContent":"\n              ","id":364},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"cc-expiration","placeholder":"","required":""},"childNodes":[],"id":365},{"type":3,"textContent":"\n              ","id":366},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Expiration date required\n              ","id":368}],"id":367},{"type":3,"textContent":"\n            ","id":369}],"id":360},{"type":3,"textContent":"\n            ","id":370},{"type":2,"tagName":"div","attributes":{"class":"col-md-3 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":372},{"type":2,"tagName":"label","attributes":{"for":"cc-cvv"},"childNodes":[{"type":3,"textContent":"CVV","id":374}],"id":373},{"type":3,"textContent":"\n              ","id":375},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"cc-cvv","placeholder":"","required":""},"childNodes":[],"id":376},{"type":3,"textContent":"\n              ","id":377},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Security code required\n              ","id":379}],"id":378},{"type":3,"textContent":"\n            ","id":380}],"id":371},{"type":3,"textContent":"\n          ","id":381}],"id":358},{"type":3,"textContent":"\n          ","id":382},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":384},{"type":2,"tagName":"label","attributes":{"for":"email"},"childNodes":[{"type":3,"textContent":"textarea ","id":386},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"(Optional)","id":388}],"id":387}],"id":385},{"type":3,"textContent":"\n            ","id":389},{"type":2,"tagName":"textarea","attributes":{"name":"","id":"","cols":"30","rows":"10"},"childNodes":[],"id":390},{"type":3,"textContent":"\n          ","id":391}],"id":383},{"type":3,"textContent":"\n          ","id":392},{"type":2,"tagName":"hr","attributes":{"class":"mb-4"},"childNodes":[],"id":393},{"type":3,"textContent":"\n          ","id":394},{"type":2,"tagName":"button","attributes":{"class":"btn btn-primary btn-lg btn-block","type":"submit"},"childNodes":[{"type":3,"textContent":"Continue to checkout","id":396}],"id":395},{"type":3,"textContent":"\n        ","id":397}],"id":149},{"type":3,"textContent":"\n      ","id":398}],"id":144},{"type":3,"textContent":"\n    ","id":399}],"id":44},{"type":3,"textContent":"\n\n    ","id":400},{"type":2,"tagName":"footer","attributes":{"class":"my-5 pt-5 text-muted text-center text-small"},"childNodes":[{"type":3,"textContent":"\n      ","id":402},{"type":2,"tagName":"p","attributes":{"class":"mb-1"},"childNodes":[{"type":3,"textContent":"© 2017-2018 Company Name","id":404}],"id":403},{"type":3,"textContent":"\n      ","id":405},{"type":2,"tagName":"ul","attributes":{"class":"list-inline"},"childNodes":[{"type":3,"textContent":"\n        ","id":407},{"type":2,"tagName":"li","attributes":{"class":"list-inline-item"},"childNodes":[{"type":2,"tagName":"a","attributes":{"href":"https://getbootstrap.com/docs/4.1/examples/checkout/#"},"childNodes":[{"type":3,"textContent":"Privacy","id":410}],"id":409}],"id":408},{"type":3,"textContent":"\n        ","id":411},{"type":2,"tagName":"li","attributes":{"class":"list-inline-item"},"childNodes":[{"type":2,"tagName":"a","attributes":{"href":"https://getbootstrap.com/docs/4.1/examples/checkout/#"},"childNodes":[{"type":3,"textContent":"Terms","id":414}],"id":413}],"id":412},{"type":3,"textContent":"\n        ","id":415},{"type":2,"tagName":"li","attributes":{"class":"list-inline-item"},"childNodes":[{"type":2,"tagName":"a","attributes":{"href":"https://getbootstrap.com/docs/4.1/examples/checkout/#"},"childNodes":[{"type":3,"textContent":"Support","id":418}],"id":417}],"id":416},{"type":3,"textContent":"\n      ","id":419}],"id":406},{"type":3,"textContent":"\n    ","id":420}],"id":401},{"type":3,"textContent":"\n  ","id":421}],"id":31},{"type":3,"textContent":"\n\n  ","id":422},{"type":5,"textContent":" Bootstrap core JavaScript\n    ================================================== ","id":423},{"type":3,"textContent":"\n  ","id":424},{"type":5,"textContent":" Placed at the end of the document so the pages load faster ","id":425},{"type":3,"textContent":"\n  ","id":426},{"type":2,"tagName":"script","attributes":{"src":"http://127.0.0.1:5500/checkout-demo/index_files/jquery-3.3.1.slim.min.js","integrity":"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo","crossorigin":"anonymous"},"childNodes":[],"id":427},{"type":3,"textContent":"\n  ","id":428},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":430}],"id":429},{"type":3,"textContent":"\n  ","id":431},{"type":2,"tagName":"script","attributes":{"src":"http://127.0.0.1:5500/checkout-demo/index_files/popper.min.js"},"childNodes":[],"id":432},{"type":3,"textContent":"\n  ","id":433},{"type":2,"tagName":"script","attributes":{"src":"http://127.0.0.1:5500/checkout-demo/index_files/bootstrap.min.js"},"childNodes":[],"id":434},{"type":3,"textContent":"\n  ","id":435},{"type":2,"tagName":"script","attributes":{"src":"http://127.0.0.1:5500/checkout-demo/index_files/holder.min.js"},"childNodes":[],"id":436},{"type":3,"textContent":"\n  ","id":437},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":439}],"id":438},{"type":3,"textContent":"\n\n  ","id":440},{"type":5,"textContent":" logrocket ","id":441},{"type":3,"textContent":"\n\n  ","id":442},{"type":5,"textContent":" <script src=\"../reverse-engineer/LogRocket.js\"></script>\n  <script>\n    LogRocket.init('bqsqi3/serenity');\n  </script> ","id":443},{"type":3,"textContent":"\n\n  ","id":444},{"type":5,"textContent":" fundebug ","id":445},{"type":3,"textContent":"\n\n  ","id":446},{"type":5,"textContent":" <script src=\"https://js.fundebug.cn/fundebug.1.2.3.min.js\"\n  apikey=\"2e96393d0884f5ef28b95645008da9926cb6750dae6b2a4c7a2403fac4d889ab\" silentVideo=false></script>\n   ","id":447},{"type":3,"textContent":"\n\n  ","id":448},{"type":5,"textContent":" fullstory ","id":449},{"type":3,"textContent":"\n\n  ","id":450},{"type":5,"textContent":" <script>\n    window['_fs_debug'] = false;\n    window['_fs_host'] = 'fullstory.com';\n    window['_fs_org'] = 'EYQ69';\n    window['_fs_namespace'] = 'FS';\n    (function (m, n, e, t, l, o, g, y) {\n      if (e in m) { if (m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window[\"_fs_namespace\"].'); } return; }\n      g = m[e] = function (a, b) { g.q ? g.q.push([a, b]) : g._api(a, b); }; g.q = [];\n      o = n.createElement(t); o.async = 1; o.src = 'https://' + _fs_host + '/s/fs.js';\n      y = n.getElementsByTagName(t)[0]; y.parentNode.insertBefore(o, y);\n      g.identify = function (i, v) { g(l, { uid: i }); if (v) g(l, v) }; g.setUserVars = function (v) { g(l, v) }; g.event = function (i, v) { g('event', { n: i, p: v }) };\n      g.shutdown = function () { g(\"rec\", !1) }; g.restart = function () { g(\"rec\", !0) };\n      g.consent = function (a) { g(\"consent\", !arguments.length || a) };\n      g.identifyAccount = function (i, v) { o = 'account'; v = v || {}; v.acctId = i; g(o, v) };\n      g.clearUserCookie = function () { };\n    })(window, document, window['_fs_namespace'], 'script', 'user');\n  </script> ","id":451},{"type":3,"textContent":"\n\n  ","id":452},{"type":2,"tagName":"script","attributes":{"src":"http://127.0.0.1:5500/src/record.js"},"childNodes":[],"id":453},{"type":3,"textContent":"\n  ","id":454},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":456}],"id":455},{"type":3,"textContent":"\n\n","id":457},{"type":5,"textContent":" Code injected by live-server ","id":458},{"type":3,"textContent":"\n","id":459},{"type":2,"tagName":"script","attributes":{"type":"text/javascript"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":461}],"id":460},{"type":3,"textContent":"\n\n","id":462}],"id":29}],"id":4}],"id":1},"initialOffset":{"left":0,"top":583}},"timestamp":1539674870338},{"type":3,"data":{"source":3,"id":1,"x":0,"y":582},"timestamp":1539674871058},{"type":3,"data":{"source":3,"id":1,"x":0,"y":528},"timestamp":1539674871158},{"type":3,"data":{"source":3,"id":1,"x":0,"y":375},"timestamp":1539674871258},{"type":3,"data":{"source":3,"id":1,"x":0,"y":318},"timestamp":1539674871358},{"type":3,"data":{"source":3,"id":1,"x":0,"y":317},"timestamp":1539674871523},{"type":3,"data":{"source":3,"id":1,"x":0,"y":275},"timestamp":1539674871624},{"type":3,"data":{"source":3,"id":1,"x":0,"y":148},"timestamp":1539674871724},{"type":3,"data":{"source":3,"id":1,"x":0,"y":59},"timestamp":1539674871824},{"type":3,"data":{"source":3,"id":1,"x":0,"y":53},"timestamp":1539674871923},{"type":3,"data":{"source":3,"id":1,"x":0,"y":54},"timestamp":1539674872190},{"type":3,"data":{"source":1,"positions":[{"x":1065,"y":237,"timeOffset":0}]},"timestamp":1539674872291},{"type":3,"data":{"source":3,"id":1,"x":0,"y":156},"timestamp":1539674872291},{"type":3,"data":{"source":3,"id":1,"x":0,"y":468},"timestamp":1539674872392},{"type":3,"data":{"source":3,"id":1,"x":0,"y":477},"timestamp":1539674872492},{"type":3,"data":{"source":3,"id":1,"x":0,"y":478},"timestamp":1539674872641},{"type":3,"data":{"source":3,"id":1,"x":0,"y":527},"timestamp":1539674872741},{"type":3,"data":{"source":1,"positions":[{"x":1064,"y":239,"timeOffset":-467}]},"timestamp":1539674872792},{"type":3,"data":{"source":3,"id":1,"x":0,"y":699},"timestamp":1539674872841},{"type":3,"data":{"source":3,"id":1,"x":0,"y":742},"timestamp":1539674872942},{"type":3,"data":{"source":1,"positions":[{"x":1064,"y":239,"timeOffset":-417},{"x":1065,"y":239,"timeOffset":-384},{"x":1066,"y":239,"timeOffset":-336},{"x":1066,"y":238,"timeOffset":-116},{"x":1066,"y":236,"timeOffset":-85},{"x":1068,"y":229,"timeOffset":-35},{"x":1077,"y":205,"timeOffset":-2}]},"timestamp":1539674873292},{"type":3,"data":{"source":1,"positions":[{"x":1088,"y":163,"timeOffset":-470},{"x":1098,"y":115,"timeOffset":-437},{"x":1104,"y":80,"timeOffset":-403},{"x":1104,"y":50,"timeOffset":-370},{"x":1104,"y":43,"timeOffset":-336},{"x":1104,"y":42,"timeOffset":-237},{"x":1104,"y":32,"timeOffset":-203},{"x":1105,"y":11,"timeOffset":-170}]},"timestamp":1539674873793}];
+  [{"type":0,"data":{"href":"http://localhost:5500/checkout-demo/"},"timestamp":1539774745277},{"type":1,"data":{"width":1600,"height":711},"timestamp":1539774745283},{"type":2,"data":{"node":{"type":0,"childNodes":[{"type":1,"name":"html","publicId":"","systemId":"","id":2},{"type":5,"textContent":" saved from url=(0052)https://getbootstrap.com/docs/4.1/examples/checkout/ ","id":3},{"type":2,"tagName":"html","attributes":{"lang":"en"},"childNodes":[{"type":2,"tagName":"head","attributes":{},"childNodes":[{"type":3,"textContent":"\n  ","id":6},{"type":2,"tagName":"meta","attributes":{"http-equiv":"Content-Type","content":"text/html; charset=UTF-8"},"childNodes":[],"id":7},{"type":3,"textContent":"\n\n  ","id":8},{"type":2,"tagName":"meta","attributes":{"name":"viewport","content":"width=device-width, initial-scale=1, shrink-to-fit=no"},"childNodes":[],"id":9},{"type":3,"textContent":"\n  ","id":10},{"type":2,"tagName":"meta","attributes":{"name":"description","content":""},"childNodes":[],"id":11},{"type":3,"textContent":"\n  ","id":12},{"type":2,"tagName":"meta","attributes":{"name":"author","content":""},"childNodes":[],"id":13},{"type":3,"textContent":"\n  ","id":14},{"type":2,"tagName":"link","attributes":{"rel":"icon","href":"https://getbootstrap.com/favicon.ico"},"childNodes":[],"id":15},{"type":3,"textContent":"\n\n  ","id":16},{"type":2,"tagName":"title","attributes":{},"childNodes":[{"type":3,"textContent":"Checkout example for Bootstrap","id":18}],"id":17},{"type":3,"textContent":"\n\n  ","id":19},{"type":5,"textContent":" Bootstrap core CSS ","id":20},{"type":3,"textContent":"\n  ","id":21},{"type":2,"tagName":"link","attributes":{"_cssText":":root { --blue:#007bff; --indigo:#6610f2; --purple:#6f42c1; --pink:#e83e8c; --red:#dc3545; --orange:#fd7e14; --yellow:#ffc107; --green:#28a745; --teal:#20c997; --cyan:#17a2b8; --white:#fff; --gray:#6c757d; --gray-dark:#343a40; --primary:#007bff; --secondary:#6c757d; --success:#28a745; --info:#17a2b8; --warning:#ffc107; --danger:#dc3545; --light:#f8f9fa; --dark:#343a40; --breakpoint-xs:0; --breakpoint-sm:576px; --breakpoint-md:768px; --breakpoint-lg:992px; --breakpoint-xl:1200px; --font-family-sans-serif:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"; --font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace; }*, ::after, ::before { box-sizing: border-box; }html { font-family: sans-serif; line-height: 1.15; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }body { margin: 0px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: rgb(33, 37, 41); text-align: left; background-color: rgb(255, 255, 255); }[tabindex=\"-1\"]:focus { outline: 0px !important; }hr { box-sizing: content-box; height: 0px; overflow: visible; }h1, h2, h3, h4, h5, h6 { margin-top: 0px; margin-bottom: 0.5rem; }p { margin-top: 0px; margin-bottom: 1rem; }abbr[data-original-title], abbr[title] { text-decoration: underline dotted; cursor: help; border-bottom: 0px; }address { margin-bottom: 1rem; font-style: normal; line-height: inherit; }dl, ol, ul { margin-top: 0px; margin-bottom: 1rem; }ol ol, ol ul, ul ol, ul ul { margin-bottom: 0px; }dt { font-weight: 700; }dd { margin-bottom: 0.5rem; margin-left: 0px; }blockquote { margin: 0px 0px 1rem; }dfn { font-style: italic; }b, strong { font-weight: bolder; }small { font-size: 80%; }sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }sub { bottom: -0.25em; }sup { top: -0.5em; }a { color: rgb(0, 123, 255); text-decoration: none; background-color: transparent; }a:hover { color: rgb(0, 86, 179); text-decoration: underline; }a:not([href]):not([tabindex]) { color: inherit; text-decoration: none; }a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover { color: inherit; text-decoration: none; }a:not([href]):not([tabindex]):focus { outline: 0px; }code, kbd, pre, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; font-size: 1em; }pre { margin-top: 0px; margin-bottom: 1rem; overflow: auto; }figure { margin: 0px 0px 1rem; }img { vertical-align: middle; border-style: none; }svg { overflow: hidden; vertical-align: middle; }table { border-collapse: collapse; }caption { padding-top: 0.75rem; padding-bottom: 0.75rem; color: rgb(108, 117, 125); text-align: left; caption-side: bottom; }th { text-align: inherit; }label { display: inline-block; margin-bottom: 0.5rem; }button { border-radius: 0px; }button:focus { outline: -webkit-focus-ring-color auto 5px; }button, input, optgroup, select, textarea { margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit; }button, input { overflow: visible; }button, select { text-transform: none; }[type=\"reset\"], [type=\"submit\"], button, html [type=\"button\"] { -webkit-appearance: button; }input[type=\"checkbox\"], input[type=\"radio\"] { box-sizing: border-box; padding: 0px; }input[type=\"date\"], input[type=\"datetime-local\"], input[type=\"month\"], input[type=\"time\"] { -webkit-appearance: listbox; }textarea { overflow: auto; resize: vertical; }fieldset { min-width: 0px; padding: 0px; margin: 0px; border: 0px; }legend { display: block; width: 100%; max-width: 100%; padding: 0px; margin-bottom: 0.5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; }progress { vertical-align: baseline; }[type=\"number\"]::-webkit-inner-spin-button, [type=\"number\"]::-webkit-outer-spin-button { height: auto; }[type=\"search\"] { outline-offset: -2px; -webkit-appearance: none; }[type=\"search\"]::-webkit-search-cancel-button, [type=\"search\"]::-webkit-search-decoration { -webkit-appearance: none; }::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }output { display: inline-block; }summary { display: list-item; cursor: pointer; }template { display: none; }[hidden] { display: none !important; }.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5rem; font-family: inherit; font-weight: 500; line-height: 1.2; color: inherit; }.h1, h1 { font-size: 2.5rem; }.h2, h2 { font-size: 2rem; }.h3, h3 { font-size: 1.75rem; }.h4, h4 { font-size: 1.5rem; }.h5, h5 { font-size: 1.25rem; }.h6, h6 { font-size: 1rem; }.lead { font-size: 1.25rem; font-weight: 300; }.display-1 { font-size: 6rem; font-weight: 300; line-height: 1.2; }.display-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2; }.display-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2; }.display-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; }hr { margin-top: 1rem; margin-bottom: 1rem; border-width: 1px 0px 0px; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0.1); }.small, small { font-size: 80%; font-weight: 400; }.mark, mark { padding: 0.2em; background-color: rgb(252, 248, 227); }.list-unstyled { padding-left: 0px; list-style: none; }.list-inline { padding-left: 0px; list-style: none; }.list-inline-item { display: inline-block; }.list-inline-item:not(:last-child) { margin-right: 0.5rem; }.initialism { font-size: 90%; text-transform: uppercase; }.blockquote { margin-bottom: 1rem; font-size: 1.25rem; }.blockquote-footer { display: block; font-size: 80%; color: rgb(108, 117, 125); }.blockquote-footer::before { content: \"— \"; }.img-fluid { max-width: 100%; height: auto; }.img-thumbnail { padding: 0.25rem; background-color: rgb(255, 255, 255); border: 1px solid rgb(222, 226, 230); border-radius: 0.25rem; max-width: 100%; height: auto; }.figure { display: inline-block; }.figure-img { margin-bottom: 0.5rem; line-height: 1; }.figure-caption { font-size: 90%; color: rgb(108, 117, 125); }code { font-size: 87.5%; color: rgb(232, 62, 140); word-break: break-word; }a > code { color: inherit; }kbd { padding: 0.2rem 0.4rem; font-size: 87.5%; color: rgb(255, 255, 255); background-color: rgb(33, 37, 41); border-radius: 0.2rem; }kbd kbd { padding: 0px; font-size: 100%; font-weight: 700; }pre { display: block; font-size: 87.5%; color: rgb(33, 37, 41); }pre code { font-size: inherit; color: inherit; word-break: normal; }.pre-scrollable { max-height: 340px; overflow-y: scroll; }.container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }@media (min-width: 576px) {\n  .container { max-width: 540px; }\n}@media (min-width: 768px) {\n  .container { max-width: 720px; }\n}@media (min-width: 992px) {\n  .container { max-width: 960px; }\n}@media (min-width: 1200px) {\n  .container { max-width: 1140px; }\n}.container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }.no-gutters { margin-right: 0px; margin-left: 0px; }.no-gutters > .col, .no-gutters > [class*=\"col-\"] { padding-right: 0px; padding-left: 0px; }.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; }.col { flex-basis: 0px; flex-grow: 1; max-width: 100%; }.col-auto { flex: 0 0 auto; width: auto; max-width: none; }.col-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }.col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }.col-3 { flex: 0 0 25%; max-width: 25%; }.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }.col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }.col-6 { flex: 0 0 50%; max-width: 50%; }.col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }.col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }.col-9 { flex: 0 0 75%; max-width: 75%; }.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }.col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }.col-12 { flex: 0 0 100%; max-width: 100%; }.order-first { order: -1; }.order-last { order: 13; }.order-0 { order: 0; }.order-1 { order: 1; }.order-2 { order: 2; }.order-3 { order: 3; }.order-4 { order: 4; }.order-5 { order: 5; }.order-6 { order: 6; }.order-7 { order: 7; }.order-8 { order: 8; }.order-9 { order: 9; }.order-10 { order: 10; }.order-11 { order: 11; }.order-12 { order: 12; }.offset-1 { margin-left: 8.33333%; }.offset-2 { margin-left: 16.6667%; }.offset-3 { margin-left: 25%; }.offset-4 { margin-left: 33.3333%; }.offset-5 { margin-left: 41.6667%; }.offset-6 { margin-left: 50%; }.offset-7 { margin-left: 58.3333%; }.offset-8 { margin-left: 66.6667%; }.offset-9 { margin-left: 75%; }.offset-10 { margin-left: 83.3333%; }.offset-11 { margin-left: 91.6667%; }@media (min-width: 576px) {\n  .col-sm { flex-basis: 0px; flex-grow: 1; max-width: 100%; }\n  .col-sm-auto { flex: 0 0 auto; width: auto; max-width: none; }\n  .col-sm-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }\n  .col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }\n  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }\n  .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }\n  .col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }\n  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }\n  .col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }\n  .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }\n  .col-sm-9 { flex: 0 0 75%; max-width: 75%; }\n  .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }\n  .col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }\n  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }\n  .order-sm-first { order: -1; }\n  .order-sm-last { order: 13; }\n  .order-sm-0 { order: 0; }\n  .order-sm-1 { order: 1; }\n  .order-sm-2 { order: 2; }\n  .order-sm-3 { order: 3; }\n  .order-sm-4 { order: 4; }\n  .order-sm-5 { order: 5; }\n  .order-sm-6 { order: 6; }\n  .order-sm-7 { order: 7; }\n  .order-sm-8 { order: 8; }\n  .order-sm-9 { order: 9; }\n  .order-sm-10 { order: 10; }\n  .order-sm-11 { order: 11; }\n  .order-sm-12 { order: 12; }\n  .offset-sm-0 { margin-left: 0px; }\n  .offset-sm-1 { margin-left: 8.33333%; }\n  .offset-sm-2 { margin-left: 16.6667%; }\n  .offset-sm-3 { margin-left: 25%; }\n  .offset-sm-4 { margin-left: 33.3333%; }\n  .offset-sm-5 { margin-left: 41.6667%; }\n  .offset-sm-6 { margin-left: 50%; }\n  .offset-sm-7 { margin-left: 58.3333%; }\n  .offset-sm-8 { margin-left: 66.6667%; }\n  .offset-sm-9 { margin-left: 75%; }\n  .offset-sm-10 { margin-left: 83.3333%; }\n  .offset-sm-11 { margin-left: 91.6667%; }\n}@media (min-width: 768px) {\n  .col-md { flex-basis: 0px; flex-grow: 1; max-width: 100%; }\n  .col-md-auto { flex: 0 0 auto; width: auto; max-width: none; }\n  .col-md-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }\n  .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }\n  .col-md-3 { flex: 0 0 25%; max-width: 25%; }\n  .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }\n  .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }\n  .col-md-6 { flex: 0 0 50%; max-width: 50%; }\n  .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }\n  .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }\n  .col-md-9 { flex: 0 0 75%; max-width: 75%; }\n  .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }\n  .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }\n  .col-md-12 { flex: 0 0 100%; max-width: 100%; }\n  .order-md-first { order: -1; }\n  .order-md-last { order: 13; }\n  .order-md-0 { order: 0; }\n  .order-md-1 { order: 1; }\n  .order-md-2 { order: 2; }\n  .order-md-3 { order: 3; }\n  .order-md-4 { order: 4; }\n  .order-md-5 { order: 5; }\n  .order-md-6 { order: 6; }\n  .order-md-7 { order: 7; }\n  .order-md-8 { order: 8; }\n  .order-md-9 { order: 9; }\n  .order-md-10 { order: 10; }\n  .order-md-11 { order: 11; }\n  .order-md-12 { order: 12; }\n  .offset-md-0 { margin-left: 0px; }\n  .offset-md-1 { margin-left: 8.33333%; }\n  .offset-md-2 { margin-left: 16.6667%; }\n  .offset-md-3 { margin-left: 25%; }\n  .offset-md-4 { margin-left: 33.3333%; }\n  .offset-md-5 { margin-left: 41.6667%; }\n  .offset-md-6 { margin-left: 50%; }\n  .offset-md-7 { margin-left: 58.3333%; }\n  .offset-md-8 { margin-left: 66.6667%; }\n  .offset-md-9 { margin-left: 75%; }\n  .offset-md-10 { margin-left: 83.3333%; }\n  .offset-md-11 { margin-left: 91.6667%; }\n}@media (min-width: 992px) {\n  .col-lg { flex-basis: 0px; flex-grow: 1; max-width: 100%; }\n  .col-lg-auto { flex: 0 0 auto; width: auto; max-width: none; }\n  .col-lg-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }\n  .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }\n  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }\n  .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }\n  .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }\n  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }\n  .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }\n  .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }\n  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }\n  .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }\n  .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }\n  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }\n  .order-lg-first { order: -1; }\n  .order-lg-last { order: 13; }\n  .order-lg-0 { order: 0; }\n  .order-lg-1 { order: 1; }\n  .order-lg-2 { order: 2; }\n  .order-lg-3 { order: 3; }\n  .order-lg-4 { order: 4; }\n  .order-lg-5 { order: 5; }\n  .order-lg-6 { order: 6; }\n  .order-lg-7 { order: 7; }\n  .order-lg-8 { order: 8; }\n  .order-lg-9 { order: 9; }\n  .order-lg-10 { order: 10; }\n  .order-lg-11 { order: 11; }\n  .order-lg-12 { order: 12; }\n  .offset-lg-0 { margin-left: 0px; }\n  .offset-lg-1 { margin-left: 8.33333%; }\n  .offset-lg-2 { margin-left: 16.6667%; }\n  .offset-lg-3 { margin-left: 25%; }\n  .offset-lg-4 { margin-left: 33.3333%; }\n  .offset-lg-5 { margin-left: 41.6667%; }\n  .offset-lg-6 { margin-left: 50%; }\n  .offset-lg-7 { margin-left: 58.3333%; }\n  .offset-lg-8 { margin-left: 66.6667%; }\n  .offset-lg-9 { margin-left: 75%; }\n  .offset-lg-10 { margin-left: 83.3333%; }\n  .offset-lg-11 { margin-left: 91.6667%; }\n}@media (min-width: 1200px) {\n  .col-xl { flex-basis: 0px; flex-grow: 1; max-width: 100%; }\n  .col-xl-auto { flex: 0 0 auto; width: auto; max-width: none; }\n  .col-xl-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }\n  .col-xl-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }\n  .col-xl-3 { flex: 0 0 25%; max-width: 25%; }\n  .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }\n  .col-xl-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }\n  .col-xl-6 { flex: 0 0 50%; max-width: 50%; }\n  .col-xl-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }\n  .col-xl-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }\n  .col-xl-9 { flex: 0 0 75%; max-width: 75%; }\n  .col-xl-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }\n  .col-xl-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }\n  .col-xl-12 { flex: 0 0 100%; max-width: 100%; }\n  .order-xl-first { order: -1; }\n  .order-xl-last { order: 13; }\n  .order-xl-0 { order: 0; }\n  .order-xl-1 { order: 1; }\n  .order-xl-2 { order: 2; }\n  .order-xl-3 { order: 3; }\n  .order-xl-4 { order: 4; }\n  .order-xl-5 { order: 5; }\n  .order-xl-6 { order: 6; }\n  .order-xl-7 { order: 7; }\n  .order-xl-8 { order: 8; }\n  .order-xl-9 { order: 9; }\n  .order-xl-10 { order: 10; }\n  .order-xl-11 { order: 11; }\n  .order-xl-12 { order: 12; }\n  .offset-xl-0 { margin-left: 0px; }\n  .offset-xl-1 { margin-left: 8.33333%; }\n  .offset-xl-2 { margin-left: 16.6667%; }\n  .offset-xl-3 { margin-left: 25%; }\n  .offset-xl-4 { margin-left: 33.3333%; }\n  .offset-xl-5 { margin-left: 41.6667%; }\n  .offset-xl-6 { margin-left: 50%; }\n  .offset-xl-7 { margin-left: 58.3333%; }\n  .offset-xl-8 { margin-left: 66.6667%; }\n  .offset-xl-9 { margin-left: 75%; }\n  .offset-xl-10 { margin-left: 83.3333%; }\n  .offset-xl-11 { margin-left: 91.6667%; }\n}.table { width: 100%; margin-bottom: 1rem; background-color: transparent; }.table td, .table th { padding: 0.75rem; vertical-align: top; border-top: 1px solid rgb(222, 226, 230); }.table thead th { vertical-align: bottom; border-bottom: 2px solid rgb(222, 226, 230); }.table tbody + tbody { border-top: 2px solid rgb(222, 226, 230); }.table .table { background-color: rgb(255, 255, 255); }.table-sm td, .table-sm th { padding: 0.3rem; }.table-bordered { border: 1px solid rgb(222, 226, 230); }.table-bordered td, .table-bordered th { border: 1px solid rgb(222, 226, 230); }.table-bordered thead td, .table-bordered thead th { border-bottom-width: 2px; }.table-borderless tbody + tbody, .table-borderless td, .table-borderless th, .table-borderless thead th { border: 0px; }.table-striped tbody tr:nth-of-type(2n+1) { background-color: rgba(0, 0, 0, 0.05); }.table-hover tbody tr:hover { background-color: rgba(0, 0, 0, 0.075); }.table-primary, .table-primary > td, .table-primary > th { background-color: rgb(184, 218, 255); }.table-hover .table-primary:hover { background-color: rgb(159, 205, 255); }.table-hover .table-primary:hover > td, .table-hover .table-primary:hover > th { background-color: rgb(159, 205, 255); }.table-secondary, .table-secondary > td, .table-secondary > th { background-color: rgb(214, 216, 219); }.table-hover .table-secondary:hover { background-color: rgb(200, 203, 207); }.table-hover .table-secondary:hover > td, .table-hover .table-secondary:hover > th { background-color: rgb(200, 203, 207); }.table-success, .table-success > td, .table-success > th { background-color: rgb(195, 230, 203); }.table-hover .table-success:hover { background-color: rgb(177, 223, 187); }.table-hover .table-success:hover > td, .table-hover .table-success:hover > th { background-color: rgb(177, 223, 187); }.table-info, .table-info > td, .table-info > th { background-color: rgb(190, 229, 235); }.table-hover .table-info:hover { background-color: rgb(171, 221, 229); }.table-hover .table-info:hover > td, .table-hover .table-info:hover > th { background-color: rgb(171, 221, 229); }.table-warning, .table-warning > td, .table-warning > th { background-color: rgb(255, 238, 186); }.table-hover .table-warning:hover { background-color: rgb(255, 232, 161); }.table-hover .table-warning:hover > td, .table-hover .table-warning:hover > th { background-color: rgb(255, 232, 161); }.table-danger, .table-danger > td, .table-danger > th { background-color: rgb(245, 198, 203); }.table-hover .table-danger:hover { background-color: rgb(241, 176, 183); }.table-hover .table-danger:hover > td, .table-hover .table-danger:hover > th { background-color: rgb(241, 176, 183); }.table-light, .table-light > td, .table-light > th { background-color: rgb(253, 253, 254); }.table-hover .table-light:hover { background-color: rgb(236, 236, 246); }.table-hover .table-light:hover > td, .table-hover .table-light:hover > th { background-color: rgb(236, 236, 246); }.table-dark, .table-dark > td, .table-dark > th { background-color: rgb(198, 200, 202); }.table-hover .table-dark:hover { background-color: rgb(185, 187, 190); }.table-hover .table-dark:hover > td, .table-hover .table-dark:hover > th { background-color: rgb(185, 187, 190); }.table-active, .table-active > td, .table-active > th { background-color: rgba(0, 0, 0, 0.075); }.table-hover .table-active:hover { background-color: rgba(0, 0, 0, 0.075); }.table-hover .table-active:hover > td, .table-hover .table-active:hover > th { background-color: rgba(0, 0, 0, 0.075); }.table .thead-dark th { color: rgb(255, 255, 255); background-color: rgb(33, 37, 41); border-color: rgb(50, 56, 62); }.table .thead-light th { color: rgb(73, 80, 87); background-color: rgb(233, 236, 239); border-color: rgb(222, 226, 230); }.table-dark { color: rgb(255, 255, 255); background-color: rgb(33, 37, 41); }.table-dark td, .table-dark th, .table-dark thead th { border-color: rgb(50, 56, 62); }.table-dark.table-bordered { border: 0px; }.table-dark.table-striped tbody tr:nth-of-type(2n+1) { background-color: rgba(255, 255, 255, 0.05); }.table-dark.table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.075); }@media (max-width: 575.98px) {\n  .table-responsive-sm { display: block; width: 100%; overflow-x: auto; }\n  .table-responsive-sm > .table-bordered { border: 0px; }\n}@media (max-width: 767.98px) {\n  .table-responsive-md { display: block; width: 100%; overflow-x: auto; }\n  .table-responsive-md > .table-bordered { border: 0px; }\n}@media (max-width: 991.98px) {\n  .table-responsive-lg { display: block; width: 100%; overflow-x: auto; }\n  .table-responsive-lg > .table-bordered { border: 0px; }\n}@media (max-width: 1199.98px) {\n  .table-responsive-xl { display: block; width: 100%; overflow-x: auto; }\n  .table-responsive-xl > .table-bordered { border: 0px; }\n}.table-responsive { display: block; width: 100%; overflow-x: auto; }.table-responsive > .table-bordered { border: 0px; }.form-control { display: block; width: 100%; height: calc(2.25rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgb(206, 212, 218); border-radius: 0.25rem; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; }@media not all {\n  .form-control { transition: none 0s ease 0s; }\n}.form-control:focus { color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); border-color: rgb(128, 189, 255); outline: 0px; box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.form-control::-webkit-input-placeholder { color: rgb(108, 117, 125); opacity: 1; }.form-control::placeholder { color: rgb(108, 117, 125); opacity: 1; }.form-control:disabled, .form-control[readonly] { background-color: rgb(233, 236, 239); opacity: 1; }.form-control-file, .form-control-range { display: block; width: 100%; }.col-form-label { padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); margin-bottom: 0px; font-size: inherit; line-height: 1.5; }.col-form-label-lg { padding-top: calc(0.5rem + 1px); padding-bottom: calc(0.5rem + 1px); font-size: 1.25rem; line-height: 1.5; }.col-form-label-sm { padding-top: calc(0.25rem + 1px); padding-bottom: calc(0.25rem + 1px); font-size: 0.875rem; line-height: 1.5; }.form-control-plaintext { display: block; width: 100%; padding-top: 0.375rem; padding-bottom: 0.375rem; margin-bottom: 0px; line-height: 1.5; color: rgb(33, 37, 41); background-color: transparent; border-style: solid; border-color: transparent; border-image: initial; border-width: 1px 0px; }.form-control-plaintext.form-control-lg, .form-control-plaintext.form-control-sm { padding-right: 0px; padding-left: 0px; }.form-control-sm { height: calc(1.8125rem + 2px); padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }.form-control-lg { height: calc(2.875rem + 2px); padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; }select.form-control[multiple], select.form-control[size] { height: auto; }textarea.form-control { height: auto; }.form-group { margin-bottom: 1rem; }.form-text { display: block; margin-top: 0.25rem; }.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }.form-row > .col, .form-row > [class*=\"col-\"] { padding-right: 5px; padding-left: 5px; }.form-check { position: relative; display: block; padding-left: 1.25rem; }.form-check-input { position: absolute; margin-top: 0.3rem; margin-left: -1.25rem; }.form-check-input:disabled ~ .form-check-label { color: rgb(108, 117, 125); }.form-check-label { margin-bottom: 0px; }.form-check-inline { display: inline-flex; align-items: center; padding-left: 0px; margin-right: 0.75rem; }.form-check-inline .form-check-input { position: static; margin-top: 0px; margin-right: 0.3125rem; margin-left: 0px; }.valid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 80%; color: rgb(40, 167, 69); }.valid-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; font-size: 0.875rem; line-height: 1.5; color: rgb(255, 255, 255); background-color: rgba(40, 167, 69, 0.9); border-radius: 0.25rem; }.custom-select.is-valid, .form-control.is-valid, .was-validated .custom-select:valid, .was-validated .form-control:valid { border-color: rgb(40, 167, 69); }.custom-select.is-valid:focus, .form-control.is-valid:focus, .was-validated .custom-select:valid:focus, .was-validated .form-control:valid:focus { border-color: rgb(40, 167, 69); box-shadow: rgba(40, 167, 69, 0.25) 0px 0px 0px 0.2rem; }.custom-select.is-valid ~ .valid-feedback, .custom-select.is-valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback, .form-control.is-valid ~ .valid-tooltip, .was-validated .custom-select:valid ~ .valid-feedback, .was-validated .custom-select:valid ~ .valid-tooltip, .was-validated .form-control:valid ~ .valid-feedback, .was-validated .form-control:valid ~ .valid-tooltip { display: block; }.form-control-file.is-valid ~ .valid-feedback, .form-control-file.is-valid ~ .valid-tooltip, .was-validated .form-control-file:valid ~ .valid-feedback, .was-validated .form-control-file:valid ~ .valid-tooltip { display: block; }.form-check-input.is-valid ~ .form-check-label, .was-validated .form-check-input:valid ~ .form-check-label { color: rgb(40, 167, 69); }.form-check-input.is-valid ~ .valid-feedback, .form-check-input.is-valid ~ .valid-tooltip, .was-validated .form-check-input:valid ~ .valid-feedback, .was-validated .form-check-input:valid ~ .valid-tooltip { display: block; }.custom-control-input.is-valid ~ .custom-control-label, .was-validated .custom-control-input:valid ~ .custom-control-label { color: rgb(40, 167, 69); }.custom-control-input.is-valid ~ .custom-control-label::before, .was-validated .custom-control-input:valid ~ .custom-control-label::before { background-color: rgb(113, 221, 138); }.custom-control-input.is-valid ~ .valid-feedback, .custom-control-input.is-valid ~ .valid-tooltip, .was-validated .custom-control-input:valid ~ .valid-feedback, .was-validated .custom-control-input:valid ~ .valid-tooltip { display: block; }.custom-control-input.is-valid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:valid:checked ~ .custom-control-label::before { background-color: rgb(52, 206, 87); }.custom-control-input.is-valid:focus ~ .custom-control-label::before, .was-validated .custom-control-input:valid:focus ~ .custom-control-label::before { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(40, 167, 69, 0.25) 0px 0px 0px 0.2rem; }.custom-file-input.is-valid ~ .custom-file-label, .was-validated .custom-file-input:valid ~ .custom-file-label { border-color: rgb(40, 167, 69); }.custom-file-input.is-valid ~ .custom-file-label::after, .was-validated .custom-file-input:valid ~ .custom-file-label::after { border-color: inherit; }.custom-file-input.is-valid ~ .valid-feedback, .custom-file-input.is-valid ~ .valid-tooltip, .was-validated .custom-file-input:valid ~ .valid-feedback, .was-validated .custom-file-input:valid ~ .valid-tooltip { display: block; }.custom-file-input.is-valid:focus ~ .custom-file-label, .was-validated .custom-file-input:valid:focus ~ .custom-file-label { box-shadow: rgba(40, 167, 69, 0.25) 0px 0px 0px 0.2rem; }.invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 80%; color: rgb(220, 53, 69); }.invalid-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; font-size: 0.875rem; line-height: 1.5; color: rgb(255, 255, 255); background-color: rgba(220, 53, 69, 0.9); border-radius: 0.25rem; }.custom-select.is-invalid, .form-control.is-invalid, .was-validated .custom-select:invalid, .was-validated .form-control:invalid { border-color: rgb(220, 53, 69); }.custom-select.is-invalid:focus, .form-control.is-invalid:focus, .was-validated .custom-select:invalid:focus, .was-validated .form-control:invalid:focus { border-color: rgb(220, 53, 69); box-shadow: rgba(220, 53, 69, 0.25) 0px 0px 0px 0.2rem; }.custom-select.is-invalid ~ .invalid-feedback, .custom-select.is-invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback, .form-control.is-invalid ~ .invalid-tooltip, .was-validated .custom-select:invalid ~ .invalid-feedback, .was-validated .custom-select:invalid ~ .invalid-tooltip, .was-validated .form-control:invalid ~ .invalid-feedback, .was-validated .form-control:invalid ~ .invalid-tooltip { display: block; }.form-control-file.is-invalid ~ .invalid-feedback, .form-control-file.is-invalid ~ .invalid-tooltip, .was-validated .form-control-file:invalid ~ .invalid-feedback, .was-validated .form-control-file:invalid ~ .invalid-tooltip { display: block; }.form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label { color: rgb(220, 53, 69); }.form-check-input.is-invalid ~ .invalid-feedback, .form-check-input.is-invalid ~ .invalid-tooltip, .was-validated .form-check-input:invalid ~ .invalid-feedback, .was-validated .form-check-input:invalid ~ .invalid-tooltip { display: block; }.custom-control-input.is-invalid ~ .custom-control-label, .was-validated .custom-control-input:invalid ~ .custom-control-label { color: rgb(220, 53, 69); }.custom-control-input.is-invalid ~ .custom-control-label::before, .was-validated .custom-control-input:invalid ~ .custom-control-label::before { background-color: rgb(239, 162, 169); }.custom-control-input.is-invalid ~ .invalid-feedback, .custom-control-input.is-invalid ~ .invalid-tooltip, .was-validated .custom-control-input:invalid ~ .invalid-feedback, .was-validated .custom-control-input:invalid ~ .invalid-tooltip { display: block; }.custom-control-input.is-invalid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before { background-color: rgb(228, 96, 109); }.custom-control-input.is-invalid:focus ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(220, 53, 69, 0.25) 0px 0px 0px 0.2rem; }.custom-file-input.is-invalid ~ .custom-file-label, .was-validated .custom-file-input:invalid ~ .custom-file-label { border-color: rgb(220, 53, 69); }.custom-file-input.is-invalid ~ .custom-file-label::after, .was-validated .custom-file-input:invalid ~ .custom-file-label::after { border-color: inherit; }.custom-file-input.is-invalid ~ .invalid-feedback, .custom-file-input.is-invalid ~ .invalid-tooltip, .was-validated .custom-file-input:invalid ~ .invalid-feedback, .was-validated .custom-file-input:invalid ~ .invalid-tooltip { display: block; }.custom-file-input.is-invalid:focus ~ .custom-file-label, .was-validated .custom-file-input:invalid:focus ~ .custom-file-label { box-shadow: rgba(220, 53, 69, 0.25) 0px 0px 0px 0.2rem; }.form-inline { display: flex; flex-flow: row wrap; align-items: center; }.form-inline .form-check { width: 100%; }@media (min-width: 576px) {\n  .form-inline label { display: flex; align-items: center; justify-content: center; margin-bottom: 0px; }\n  .form-inline .form-group { display: flex; flex: 0 0 auto; flex-flow: row wrap; align-items: center; margin-bottom: 0px; }\n  .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }\n  .form-inline .form-control-plaintext { display: inline-block; }\n  .form-inline .custom-select, .form-inline .input-group { width: auto; }\n  .form-inline .form-check { display: flex; align-items: center; justify-content: center; width: auto; padding-left: 0px; }\n  .form-inline .form-check-input { position: relative; margin-top: 0px; margin-right: 0.25rem; margin-left: 0px; }\n  .form-inline .custom-control { align-items: center; justify-content: center; }\n  .form-inline .custom-control-label { margin-bottom: 0px; }\n}.btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; user-select: none; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; }@media not all {\n  .btn { transition: none 0s ease 0s; }\n}.btn:focus, .btn:hover { text-decoration: none; }.btn.focus, .btn:focus { outline: 0px; box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.btn.disabled, .btn:disabled { opacity: 0.65; }.btn:not(:disabled):not(.disabled) { cursor: pointer; }a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; }.btn-primary { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.btn-primary:hover { color: rgb(255, 255, 255); background-color: rgb(0, 105, 217); border-color: rgb(0, 98, 204); }.btn-primary.focus, .btn-primary:focus { box-shadow: rgba(0, 123, 255, 0.5) 0px 0px 0px 0.2rem; }.btn-primary.disabled, .btn-primary:disabled { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(0, 98, 204); border-color: rgb(0, 92, 191); }.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus { box-shadow: rgba(0, 123, 255, 0.5) 0px 0px 0px 0.2rem; }.btn-secondary { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); border-color: rgb(108, 117, 125); }.btn-secondary:hover { color: rgb(255, 255, 255); background-color: rgb(90, 98, 104); border-color: rgb(84, 91, 98); }.btn-secondary.focus, .btn-secondary:focus { box-shadow: rgba(108, 117, 125, 0.5) 0px 0px 0px 0.2rem; }.btn-secondary.disabled, .btn-secondary:disabled { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); border-color: rgb(108, 117, 125); }.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(84, 91, 98); border-color: rgb(78, 85, 91); }.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus { box-shadow: rgba(108, 117, 125, 0.5) 0px 0px 0px 0.2rem; }.btn-success { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69); }.btn-success:hover { color: rgb(255, 255, 255); background-color: rgb(33, 136, 56); border-color: rgb(30, 126, 52); }.btn-success.focus, .btn-success:focus { box-shadow: rgba(40, 167, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-success.disabled, .btn-success:disabled { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69); }.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(30, 126, 52); border-color: rgb(28, 116, 48); }.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show > .btn-success.dropdown-toggle:focus { box-shadow: rgba(40, 167, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-info { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); border-color: rgb(23, 162, 184); }.btn-info:hover { color: rgb(255, 255, 255); background-color: rgb(19, 132, 150); border-color: rgb(17, 122, 139); }.btn-info.focus, .btn-info:focus { box-shadow: rgba(23, 162, 184, 0.5) 0px 0px 0px 0.2rem; }.btn-info.disabled, .btn-info:disabled { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); border-color: rgb(23, 162, 184); }.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show > .btn-info.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(17, 122, 139); border-color: rgb(16, 112, 127); }.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, .show > .btn-info.dropdown-toggle:focus { box-shadow: rgba(23, 162, 184, 0.5) 0px 0px 0px 0.2rem; }.btn-warning { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); border-color: rgb(255, 193, 7); }.btn-warning:hover { color: rgb(33, 37, 41); background-color: rgb(224, 168, 0); border-color: rgb(211, 158, 0); }.btn-warning.focus, .btn-warning:focus { box-shadow: rgba(255, 193, 7, 0.5) 0px 0px 0px 0.2rem; }.btn-warning.disabled, .btn-warning:disabled { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); border-color: rgb(255, 193, 7); }.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show > .btn-warning.dropdown-toggle { color: rgb(33, 37, 41); background-color: rgb(211, 158, 0); border-color: rgb(198, 149, 0); }.btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus, .show > .btn-warning.dropdown-toggle:focus { box-shadow: rgba(255, 193, 7, 0.5) 0px 0px 0px 0.2rem; }.btn-danger { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); border-color: rgb(220, 53, 69); }.btn-danger:hover { color: rgb(255, 255, 255); background-color: rgb(200, 35, 51); border-color: rgb(189, 33, 48); }.btn-danger.focus, .btn-danger:focus { box-shadow: rgba(220, 53, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-danger.disabled, .btn-danger:disabled { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); border-color: rgb(220, 53, 69); }.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(189, 33, 48); border-color: rgb(178, 31, 45); }.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-danger.dropdown-toggle:focus { box-shadow: rgba(220, 53, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-light { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); border-color: rgb(248, 249, 250); }.btn-light:hover { color: rgb(33, 37, 41); background-color: rgb(226, 230, 234); border-color: rgb(218, 224, 229); }.btn-light.focus, .btn-light:focus { box-shadow: rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem; }.btn-light.disabled, .btn-light:disabled { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); border-color: rgb(248, 249, 250); }.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle { color: rgb(33, 37, 41); background-color: rgb(218, 224, 229); border-color: rgb(211, 217, 223); }.btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus, .show > .btn-light.dropdown-toggle:focus { box-shadow: rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem; }.btn-dark { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); border-color: rgb(52, 58, 64); }.btn-dark:hover { color: rgb(255, 255, 255); background-color: rgb(35, 39, 43); border-color: rgb(29, 33, 36); }.btn-dark.focus, .btn-dark:focus { box-shadow: rgba(52, 58, 64, 0.5) 0px 0px 0px 0.2rem; }.btn-dark.disabled, .btn-dark:disabled { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); border-color: rgb(52, 58, 64); }.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, .show > .btn-dark.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(29, 33, 36); border-color: rgb(23, 26, 29); }.btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-dark.dropdown-toggle:focus { box-shadow: rgba(52, 58, 64, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-primary { color: rgb(0, 123, 255); background-color: transparent; background-image: none; border-color: rgb(0, 123, 255); }.btn-outline-primary:hover { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.btn-outline-primary.focus, .btn-outline-primary:focus { box-shadow: rgba(0, 123, 255, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-primary.disabled, .btn-outline-primary:disabled { color: rgb(0, 123, 255); background-color: transparent; }.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: rgba(0, 123, 255, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-secondary { color: rgb(108, 117, 125); background-color: transparent; background-image: none; border-color: rgb(108, 117, 125); }.btn-outline-secondary:hover { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); border-color: rgb(108, 117, 125); }.btn-outline-secondary.focus, .btn-outline-secondary:focus { box-shadow: rgba(108, 117, 125, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-secondary.disabled, .btn-outline-secondary:disabled { color: rgb(108, 117, 125); background-color: transparent; }.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show > .btn-outline-secondary.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); border-color: rgb(108, 117, 125); }.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus { box-shadow: rgba(108, 117, 125, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-success { color: rgb(40, 167, 69); background-color: transparent; background-image: none; border-color: rgb(40, 167, 69); }.btn-outline-success:hover { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69); }.btn-outline-success.focus, .btn-outline-success:focus { box-shadow: rgba(40, 167, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-success.disabled, .btn-outline-success:disabled { color: rgb(40, 167, 69); background-color: transparent; }.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, .show > .btn-outline-success.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69); }.btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-success.dropdown-toggle:focus { box-shadow: rgba(40, 167, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-info { color: rgb(23, 162, 184); background-color: transparent; background-image: none; border-color: rgb(23, 162, 184); }.btn-outline-info:hover { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); border-color: rgb(23, 162, 184); }.btn-outline-info.focus, .btn-outline-info:focus { box-shadow: rgba(23, 162, 184, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-info.disabled, .btn-outline-info:disabled { color: rgb(23, 162, 184); background-color: transparent; }.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, .show > .btn-outline-info.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); border-color: rgb(23, 162, 184); }.btn-outline-info:not(:disabled):not(.disabled).active:focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-info.dropdown-toggle:focus { box-shadow: rgba(23, 162, 184, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-warning { color: rgb(255, 193, 7); background-color: transparent; background-image: none; border-color: rgb(255, 193, 7); }.btn-outline-warning:hover { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); border-color: rgb(255, 193, 7); }.btn-outline-warning.focus, .btn-outline-warning:focus { box-shadow: rgba(255, 193, 7, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-warning.disabled, .btn-outline-warning:disabled { color: rgb(255, 193, 7); background-color: transparent; }.btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active, .show > .btn-outline-warning.dropdown-toggle { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); border-color: rgb(255, 193, 7); }.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-warning.dropdown-toggle:focus { box-shadow: rgba(255, 193, 7, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-danger { color: rgb(220, 53, 69); background-color: transparent; background-image: none; border-color: rgb(220, 53, 69); }.btn-outline-danger:hover { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); border-color: rgb(220, 53, 69); }.btn-outline-danger.focus, .btn-outline-danger:focus { box-shadow: rgba(220, 53, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-danger.disabled, .btn-outline-danger:disabled { color: rgb(220, 53, 69); background-color: transparent; }.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, .show > .btn-outline-danger.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); border-color: rgb(220, 53, 69); }.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-danger.dropdown-toggle:focus { box-shadow: rgba(220, 53, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-light { color: rgb(248, 249, 250); background-color: transparent; background-image: none; border-color: rgb(248, 249, 250); }.btn-outline-light:hover { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); border-color: rgb(248, 249, 250); }.btn-outline-light.focus, .btn-outline-light:focus { box-shadow: rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-light.disabled, .btn-outline-light:disabled { color: rgb(248, 249, 250); background-color: transparent; }.btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, .show > .btn-outline-light.dropdown-toggle { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); border-color: rgb(248, 249, 250); }.btn-outline-light:not(:disabled):not(.disabled).active:focus, .btn-outline-light:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-light.dropdown-toggle:focus { box-shadow: rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-dark { color: rgb(52, 58, 64); background-color: transparent; background-image: none; border-color: rgb(52, 58, 64); }.btn-outline-dark:hover { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); border-color: rgb(52, 58, 64); }.btn-outline-dark.focus, .btn-outline-dark:focus { box-shadow: rgba(52, 58, 64, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-dark.disabled, .btn-outline-dark:disabled { color: rgb(52, 58, 64); background-color: transparent; }.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, .show > .btn-outline-dark.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); border-color: rgb(52, 58, 64); }.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-dark.dropdown-toggle:focus { box-shadow: rgba(52, 58, 64, 0.5) 0px 0px 0px 0.2rem; }.btn-link { font-weight: 400; color: rgb(0, 123, 255); background-color: transparent; }.btn-link:hover { color: rgb(0, 86, 179); text-decoration: underline; background-color: transparent; border-color: transparent; }.btn-link.focus, .btn-link:focus { text-decoration: underline; border-color: transparent; box-shadow: none; }.btn-link.disabled, .btn-link:disabled { color: rgb(108, 117, 125); pointer-events: none; }.btn-group-lg > .btn, .btn-lg { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; }.btn-group-sm > .btn, .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }.btn-block { display: block; width: 100%; }.btn-block + .btn-block { margin-top: 0.5rem; }input[type=\"button\"].btn-block, input[type=\"reset\"].btn-block, input[type=\"submit\"].btn-block { width: 100%; }.fade { transition: opacity 0.15s linear 0s; }@media not all {\n  .fade { transition: none 0s ease 0s; }\n}.fade:not(.show) { opacity: 0; }.collapse:not(.show) { display: none; }.collapsing { position: relative; height: 0px; overflow: hidden; transition: height 0.35s ease 0s; }@media not all {\n  .collapsing { transition: none 0s ease 0s; }\n}.dropdown, .dropleft, .dropright, .dropup { position: relative; }.dropdown-toggle::after { display: inline-block; width: 0px; height: 0px; margin-left: 0.255em; vertical-align: 0.255em; content: \"\"; border-width: 0.3em 0.3em 0px; border-top-style: solid; border-top-color: initial; border-right-style: solid; border-right-color: transparent; border-bottom-style: initial; border-bottom-color: initial; border-left-style: solid; border-left-color: transparent; }.dropdown-toggle:empty::after { margin-left: 0px; }.dropdown-menu { position: absolute; top: 100%; left: 0px; z-index: 1000; display: none; float: left; min-width: 10rem; padding: 0.5rem 0px; margin: 0.125rem 0px 0px; font-size: 1rem; color: rgb(33, 37, 41); text-align: left; list-style: none; background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; }.dropdown-menu-right { right: 0px; left: auto; }.dropup .dropdown-menu { top: auto; bottom: 100%; margin-top: 0px; margin-bottom: 0.125rem; }.dropup .dropdown-toggle::after { display: inline-block; width: 0px; height: 0px; margin-left: 0.255em; vertical-align: 0.255em; content: \"\"; border-width: 0px 0.3em 0.3em; border-top-style: initial; border-top-color: initial; border-right-style: solid; border-right-color: transparent; border-bottom-style: solid; border-bottom-color: initial; border-left-style: solid; border-left-color: transparent; }.dropup .dropdown-toggle:empty::after { margin-left: 0px; }.dropright .dropdown-menu { top: 0px; right: auto; left: 100%; margin-top: 0px; margin-left: 0.125rem; }.dropright .dropdown-toggle::after { display: inline-block; width: 0px; height: 0px; margin-left: 0.255em; vertical-align: 0.255em; content: \"\"; border-width: 0.3em 0px 0.3em 0.3em; border-top-style: solid; border-top-color: transparent; border-right-style: initial; border-right-color: initial; border-bottom-style: solid; border-bottom-color: transparent; border-left-style: solid; border-left-color: initial; }.dropright .dropdown-toggle:empty::after { margin-left: 0px; }.dropright .dropdown-toggle::after { vertical-align: 0px; }.dropleft .dropdown-menu { top: 0px; right: 100%; left: auto; margin-top: 0px; margin-right: 0.125rem; }.dropleft .dropdown-toggle::after { display: inline-block; width: 0px; height: 0px; margin-left: 0.255em; vertical-align: 0.255em; content: \"\"; }.dropleft .dropdown-toggle::after { display: none; }.dropleft .dropdown-toggle::before { display: inline-block; width: 0px; height: 0px; margin-right: 0.255em; vertical-align: 0.255em; content: \"\"; border-top: 0.3em solid transparent; border-right: 0.3em solid; border-bottom: 0.3em solid transparent; }.dropleft .dropdown-toggle:empty::after { margin-left: 0px; }.dropleft .dropdown-toggle::before { vertical-align: 0px; }.dropdown-menu[x-placement^=\"bottom\"], .dropdown-menu[x-placement^=\"left\"], .dropdown-menu[x-placement^=\"right\"], .dropdown-menu[x-placement^=\"top\"] { right: auto; bottom: auto; }.dropdown-divider { height: 0px; margin: 0.5rem 0px; overflow: hidden; border-top: 1px solid rgb(233, 236, 239); }.dropdown-item { display: block; width: 100%; padding: 0.25rem 1.5rem; clear: both; font-weight: 400; color: rgb(33, 37, 41); text-align: inherit; white-space: nowrap; background-color: transparent; border: 0px; }.dropdown-item:focus, .dropdown-item:hover { color: rgb(22, 24, 27); text-decoration: none; background-color: rgb(248, 249, 250); }.dropdown-item.active, .dropdown-item:active { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(0, 123, 255); }.dropdown-item.disabled, .dropdown-item:disabled { color: rgb(108, 117, 125); background-color: transparent; }.dropdown-menu.show { display: block; }.dropdown-header { display: block; padding: 0.5rem 1.5rem; margin-bottom: 0px; font-size: 0.875rem; color: rgb(108, 117, 125); white-space: nowrap; }.dropdown-item-text { display: block; padding: 0.25rem 1.5rem; color: rgb(33, 37, 41); }.btn-group, .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; }.btn-group-vertical > .btn, .btn-group > .btn { position: relative; flex: 0 1 auto; }.btn-group-vertical > .btn:hover, .btn-group > .btn:hover { z-index: 1; }.btn-group-vertical > .btn.active, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn:focus, .btn-group > .btn.active, .btn-group > .btn:active, .btn-group > .btn:focus { z-index: 1; }.btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group, .btn-group-vertical .btn + .btn, .btn-group-vertical .btn + .btn-group, .btn-group-vertical .btn-group + .btn, .btn-group-vertical .btn-group + .btn-group { margin-left: -1px; }.btn-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-start; }.btn-toolbar .input-group { width: auto; }.btn-group > .btn:first-child { margin-left: 0px; }.btn-group > .btn-group:not(:last-child) > .btn, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }.btn-group > .btn-group:not(:first-child) > .btn, .btn-group > .btn:not(:first-child) { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }.dropdown-toggle-split { padding-right: 0.5625rem; padding-left: 0.5625rem; }.dropdown-toggle-split::after, .dropright .dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after { margin-left: 0px; }.dropleft .dropdown-toggle-split::before { margin-right: 0px; }.btn-group-sm > .btn + .dropdown-toggle-split, .btn-sm + .dropdown-toggle-split { padding-right: 0.375rem; padding-left: 0.375rem; }.btn-group-lg > .btn + .dropdown-toggle-split, .btn-lg + .dropdown-toggle-split { padding-right: 0.75rem; padding-left: 0.75rem; }.btn-group-vertical { flex-direction: column; align-items: flex-start; justify-content: center; }.btn-group-vertical .btn, .btn-group-vertical .btn-group { width: 100%; }.btn-group-vertical > .btn + .btn, .btn-group-vertical > .btn + .btn-group, .btn-group-vertical > .btn-group + .btn, .btn-group-vertical > .btn-group + .btn-group { margin-top: -1px; margin-left: 0px; }.btn-group-vertical > .btn-group:not(:last-child) > .btn, .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle) { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; }.btn-group-vertical > .btn-group:not(:first-child) > .btn, .btn-group-vertical > .btn:not(:first-child) { border-top-left-radius: 0px; border-top-right-radius: 0px; }.btn-group-toggle > .btn, .btn-group-toggle > .btn-group > .btn { margin-bottom: 0px; }.btn-group-toggle > .btn input[type=\"checkbox\"], .btn-group-toggle > .btn input[type=\"radio\"], .btn-group-toggle > .btn-group > .btn input[type=\"checkbox\"], .btn-group-toggle > .btn-group > .btn input[type=\"radio\"] { position: absolute; clip: rect(0px, 0px, 0px, 0px); pointer-events: none; }.input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }.input-group > .custom-file, .input-group > .custom-select, .input-group > .form-control { position: relative; flex: 1 1 auto; width: 1%; margin-bottom: 0px; }.input-group > .custom-file + .custom-file, .input-group > .custom-file + .custom-select, .input-group > .custom-file + .form-control, .input-group > .custom-select + .custom-file, .input-group > .custom-select + .custom-select, .input-group > .custom-select + .form-control, .input-group > .form-control + .custom-file, .input-group > .form-control + .custom-select, .input-group > .form-control + .form-control { margin-left: -1px; }.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label, .input-group > .custom-select:focus, .input-group > .form-control:focus { z-index: 3; }.input-group > .custom-file .custom-file-input:focus { z-index: 4; }.input-group > .custom-select:not(:last-child), .input-group > .form-control:not(:last-child) { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }.input-group > .custom-select:not(:first-child), .input-group > .form-control:not(:first-child) { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }.input-group > .custom-file { display: flex; align-items: center; }.input-group > .custom-file:not(:last-child) .custom-file-label, .input-group > .custom-file:not(:last-child) .custom-file-label::after { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }.input-group > .custom-file:not(:first-child) .custom-file-label { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }.input-group-append, .input-group-prepend { display: flex; }.input-group-append .btn, .input-group-prepend .btn { position: relative; z-index: 2; }.input-group-append .btn + .btn, .input-group-append .btn + .input-group-text, .input-group-append .input-group-text + .btn, .input-group-append .input-group-text + .input-group-text, .input-group-prepend .btn + .btn, .input-group-prepend .btn + .input-group-text, .input-group-prepend .input-group-text + .btn, .input-group-prepend .input-group-text + .input-group-text { margin-left: -1px; }.input-group-prepend { margin-right: -1px; }.input-group-append { margin-left: -1px; }.input-group-text { display: flex; align-items: center; padding: 0.375rem 0.75rem; margin-bottom: 0px; font-size: 1rem; font-weight: 400; line-height: 1.5; color: rgb(73, 80, 87); text-align: center; white-space: nowrap; background-color: rgb(233, 236, 239); border: 1px solid rgb(206, 212, 218); border-radius: 0.25rem; }.input-group-text input[type=\"checkbox\"], .input-group-text input[type=\"radio\"] { margin-top: 0px; }.input-group-lg > .form-control, .input-group-lg > .input-group-append > .btn, .input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-prepend > .btn, .input-group-lg > .input-group-prepend > .input-group-text { height: calc(2.875rem + 2px); padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; }.input-group-sm > .form-control, .input-group-sm > .input-group-append > .btn, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-prepend > .input-group-text { height: calc(1.8125rem + 2px); padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child), .input-group > .input-group-append:not(:last-child) > .btn, .input-group > .input-group-append:not(:last-child) > .input-group-text, .input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }.input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child), .input-group > .input-group-prepend:not(:first-child) > .btn, .input-group > .input-group-prepend:not(:first-child) > .input-group-text { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }.custom-control { position: relative; display: block; min-height: 1.5rem; padding-left: 1.5rem; }.custom-control-inline { display: inline-flex; margin-right: 1rem; }.custom-control-input { position: absolute; z-index: -1; opacity: 0; }.custom-control-input:checked ~ .custom-control-label::before { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); }.custom-control-input:focus ~ .custom-control-label::before { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.custom-control-input:active ~ .custom-control-label::before { color: rgb(255, 255, 255); background-color: rgb(179, 215, 255); }.custom-control-input:disabled ~ .custom-control-label { color: rgb(108, 117, 125); }.custom-control-input:disabled ~ .custom-control-label::before { background-color: rgb(233, 236, 239); }.custom-control-label { position: relative; margin-bottom: 0px; }.custom-control-label::before { position: absolute; top: 0.25rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; pointer-events: none; content: \"\"; user-select: none; background-color: rgb(222, 226, 230); }.custom-control-label::after { position: absolute; top: 0.25rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; content: \"\"; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; }.custom-checkbox .custom-control-label::before { border-radius: 0.25rem; }.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: rgb(0, 123, 255); }.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E\"); }.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: rgb(0, 123, 255); }.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E\"); }.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(0, 123, 255, 0.5); }.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { background-color: rgba(0, 123, 255, 0.5); }.custom-radio .custom-control-label::before { border-radius: 50%; }.custom-radio .custom-control-input:checked ~ .custom-control-label::before { background-color: rgb(0, 123, 255); }.custom-radio .custom-control-input:checked ~ .custom-control-label::after { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E\"); }.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(0, 123, 255, 0.5); }.custom-select { display: inline-block; width: 100%; height: calc(2.25rem + 2px); padding: 0.375rem 1.75rem 0.375rem 0.75rem; line-height: 1.5; color: rgb(73, 80, 87); vertical-align: middle; background: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E\") right 0.75rem center / 8px 10px no-repeat rgb(255, 255, 255); border: 1px solid rgb(206, 212, 218); border-radius: 0.25rem; -webkit-appearance: none; }.custom-select:focus { border-color: rgb(128, 189, 255); outline: 0px; box-shadow: rgba(128, 189, 255, 0.5) 0px 0px 0px 0.2rem; }.custom-select[multiple], .custom-select[size]:not([size=\"1\"]) { height: auto; padding-right: 0.75rem; background-image: none; }.custom-select:disabled { color: rgb(108, 117, 125); background-color: rgb(233, 236, 239); }.custom-select-sm { height: calc(1.8125rem + 2px); padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 75%; }.custom-select-lg { height: calc(2.875rem + 2px); padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 125%; }.custom-file { position: relative; display: inline-block; width: 100%; height: calc(2.25rem + 2px); margin-bottom: 0px; }.custom-file-input { position: relative; z-index: 2; width: 100%; height: calc(2.25rem + 2px); margin: 0px; opacity: 0; }.custom-file-input:focus ~ .custom-file-label { border-color: rgb(128, 189, 255); box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.custom-file-input:focus ~ .custom-file-label::after { border-color: rgb(128, 189, 255); }.custom-file-input:disabled ~ .custom-file-label { background-color: rgb(233, 236, 239); }.custom-file-input:lang(en) ~ .custom-file-label::after { content: \"Browse\"; }.custom-file-label { position: absolute; top: 0px; right: 0px; left: 0px; z-index: 1; height: calc(2.25rem + 2px); padding: 0.375rem 0.75rem; line-height: 1.5; color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); border: 1px solid rgb(206, 212, 218); border-radius: 0.25rem; }.custom-file-label::after { position: absolute; top: 0px; right: 0px; bottom: 0px; z-index: 3; display: block; height: 2.25rem; padding: 0.375rem 0.75rem; line-height: 1.5; color: rgb(73, 80, 87); content: \"Browse\"; background-color: rgb(233, 236, 239); border-left: 1px solid rgb(206, 212, 218); border-radius: 0px 0.25rem 0.25rem 0px; }.custom-range { width: 100%; padding-left: 0px; background-color: transparent; -webkit-appearance: none; }.custom-range:focus { outline: 0px; }.custom-range:focus::-webkit-slider-thumb { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.custom-range::-webkit-slider-thumb { width: 1rem; height: 1rem; margin-top: -0.25rem; background-color: rgb(0, 123, 255); border: 0px; border-radius: 1rem; transition: background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; -webkit-appearance: none; }@media not all {\n  .custom-range::-webkit-slider-thumb { transition: none 0s ease 0s; }\n}.custom-range::-webkit-slider-thumb:active { background-color: rgb(179, 215, 255); }.custom-range::-webkit-slider-runnable-track { width: 100%; height: 0.5rem; color: transparent; cursor: pointer; background-color: rgb(222, 226, 230); border-color: transparent; border-radius: 1rem; }@media not all {\n}@media not all {\n}.custom-control-label::before, .custom-file-label, .custom-select { transition: background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; }@media not all {\n  .custom-control-label::before, .custom-file-label, .custom-select { transition: none 0s ease 0s; }\n}.nav { display: flex; flex-wrap: wrap; padding-left: 0px; margin-bottom: 0px; list-style: none; }.nav-link { display: block; padding: 0.5rem 1rem; }.nav-link:focus, .nav-link:hover { text-decoration: none; }.nav-link.disabled { color: rgb(108, 117, 125); }.nav-tabs { border-bottom: 1px solid rgb(222, 226, 230); }.nav-tabs .nav-item { margin-bottom: -1px; }.nav-tabs .nav-link { border: 1px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { border-color: rgb(233, 236, 239) rgb(233, 236, 239) rgb(222, 226, 230); }.nav-tabs .nav-link.disabled { color: rgb(108, 117, 125); background-color: transparent; border-color: transparent; }.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); border-color: rgb(222, 226, 230) rgb(222, 226, 230) rgb(255, 255, 255); }.nav-tabs .dropdown-menu { margin-top: -1px; border-top-left-radius: 0px; border-top-right-radius: 0px; }.nav-pills .nav-link { border-radius: 0.25rem; }.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); }.nav-fill .nav-item { flex: 1 1 auto; text-align: center; }.nav-justified .nav-item { flex-basis: 0px; flex-grow: 1; text-align: center; }.tab-content > .tab-pane { display: none; }.tab-content > .active { display: block; }.navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; }.navbar > .container, .navbar > .container-fluid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }.navbar-brand { display: inline-block; padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 1rem; font-size: 1.25rem; line-height: inherit; white-space: nowrap; }.navbar-brand:focus, .navbar-brand:hover { text-decoration: none; }.navbar-nav { display: flex; flex-direction: column; padding-left: 0px; margin-bottom: 0px; list-style: none; }.navbar-nav .nav-link { padding-right: 0px; padding-left: 0px; }.navbar-nav .dropdown-menu { position: static; float: none; }.navbar-text { display: inline-block; padding-top: 0.5rem; padding-bottom: 0.5rem; }.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; }.navbar-toggler { padding: 0.25rem 0.75rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; }.navbar-toggler:focus, .navbar-toggler:hover { text-decoration: none; }.navbar-toggler:not(:disabled):not(.disabled) { cursor: pointer; }.navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; content: \"\"; background: center center / 100% 100% no-repeat; }@media (max-width: 575.98px) {\n  .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { padding-right: 0px; padding-left: 0px; }\n}@media (min-width: 576px) {\n  .navbar-expand-sm { flex-flow: row nowrap; justify-content: flex-start; }\n  .navbar-expand-sm .navbar-nav { flex-direction: row; }\n  .navbar-expand-sm .navbar-nav .dropdown-menu { position: absolute; }\n  .navbar-expand-sm .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }\n  .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { flex-wrap: nowrap; }\n  .navbar-expand-sm .navbar-collapse { flex-basis: auto; display: flex !important; }\n  .navbar-expand-sm .navbar-toggler { display: none; }\n}@media (max-width: 767.98px) {\n  .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { padding-right: 0px; padding-left: 0px; }\n}@media (min-width: 768px) {\n  .navbar-expand-md { flex-flow: row nowrap; justify-content: flex-start; }\n  .navbar-expand-md .navbar-nav { flex-direction: row; }\n  .navbar-expand-md .navbar-nav .dropdown-menu { position: absolute; }\n  .navbar-expand-md .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }\n  .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { flex-wrap: nowrap; }\n  .navbar-expand-md .navbar-collapse { flex-basis: auto; display: flex !important; }\n  .navbar-expand-md .navbar-toggler { display: none; }\n}@media (max-width: 991.98px) {\n  .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { padding-right: 0px; padding-left: 0px; }\n}@media (min-width: 992px) {\n  .navbar-expand-lg { flex-flow: row nowrap; justify-content: flex-start; }\n  .navbar-expand-lg .navbar-nav { flex-direction: row; }\n  .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; }\n  .navbar-expand-lg .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }\n  .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { flex-wrap: nowrap; }\n  .navbar-expand-lg .navbar-collapse { flex-basis: auto; display: flex !important; }\n  .navbar-expand-lg .navbar-toggler { display: none; }\n}@media (max-width: 1199.98px) {\n  .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { padding-right: 0px; padding-left: 0px; }\n}@media (min-width: 1200px) {\n  .navbar-expand-xl { flex-flow: row nowrap; justify-content: flex-start; }\n  .navbar-expand-xl .navbar-nav { flex-direction: row; }\n  .navbar-expand-xl .navbar-nav .dropdown-menu { position: absolute; }\n  .navbar-expand-xl .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }\n  .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { flex-wrap: nowrap; }\n  .navbar-expand-xl .navbar-collapse { flex-basis: auto; display: flex !important; }\n  .navbar-expand-xl .navbar-toggler { display: none; }\n}.navbar-expand { flex-flow: row nowrap; justify-content: flex-start; }.navbar-expand > .container, .navbar-expand > .container-fluid { padding-right: 0px; padding-left: 0px; }.navbar-expand .navbar-nav { flex-direction: row; }.navbar-expand .navbar-nav .dropdown-menu { position: absolute; }.navbar-expand .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }.navbar-expand > .container, .navbar-expand > .container-fluid { flex-wrap: nowrap; }.navbar-expand .navbar-collapse { flex-basis: auto; display: flex !important; }.navbar-expand .navbar-toggler { display: none; }.navbar-light .navbar-brand { color: rgba(0, 0, 0, 0.9); }.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover { color: rgba(0, 0, 0, 0.9); }.navbar-light .navbar-nav .nav-link { color: rgba(0, 0, 0, 0.5); }.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { color: rgba(0, 0, 0, 0.7); }.navbar-light .navbar-nav .nav-link.disabled { color: rgba(0, 0, 0, 0.3); }.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link { color: rgba(0, 0, 0, 0.9); }.navbar-light .navbar-toggler { color: rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.1); }.navbar-light .navbar-toggler-icon { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E\"); }.navbar-light .navbar-text { color: rgba(0, 0, 0, 0.5); }.navbar-light .navbar-text a { color: rgba(0, 0, 0, 0.9); }.navbar-light .navbar-text a:focus, .navbar-light .navbar-text a:hover { color: rgba(0, 0, 0, 0.9); }.navbar-dark .navbar-brand { color: rgb(255, 255, 255); }.navbar-dark .navbar-brand:focus, .navbar-dark .navbar-brand:hover { color: rgb(255, 255, 255); }.navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.5); }.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover { color: rgba(255, 255, 255, 0.75); }.navbar-dark .navbar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.25); }.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link { color: rgb(255, 255, 255); }.navbar-dark .navbar-toggler { color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.1); }.navbar-dark .navbar-toggler-icon { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E\"); }.navbar-dark .navbar-text { color: rgba(255, 255, 255, 0.5); }.navbar-dark .navbar-text a { color: rgb(255, 255, 255); }.navbar-dark .navbar-text a:focus, .navbar-dark .navbar-text a:hover { color: rgb(255, 255, 255); }.card { position: relative; display: flex; flex-direction: column; min-width: 0px; word-wrap: break-word; background-color: rgb(255, 255, 255); background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem; }.card > hr { margin-right: 0px; margin-left: 0px; }.card > .list-group:first-child .list-group-item:first-child { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }.card > .list-group:last-child .list-group-item:last-child { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }.card-body { flex: 1 1 auto; padding: 1.25rem; }.card-title { margin-bottom: 0.75rem; }.card-subtitle { margin-top: -0.375rem; margin-bottom: 0px; }.card-text:last-child { margin-bottom: 0px; }.card-link:hover { text-decoration: none; }.card-link + .card-link { margin-left: 1.25rem; }.card-header { padding: 0.75rem 1.25rem; margin-bottom: 0px; background-color: rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.125); }.card-header:first-child { border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0px 0px; }.card-header + .list-group .list-group-item:first-child { border-top: 0px; }.card-footer { padding: 0.75rem 1.25rem; background-color: rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(0, 0, 0, 0.125); }.card-footer:last-child { border-radius: 0px 0px calc(0.25rem - 1px) calc(0.25rem - 1px); }.card-header-tabs { margin-right: -0.625rem; margin-bottom: -0.75rem; margin-left: -0.625rem; border-bottom: 0px; }.card-header-pills { margin-right: -0.625rem; margin-left: -0.625rem; }.card-img-overlay { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; padding: 1.25rem; }.card-img { width: 100%; border-radius: calc(0.25rem - 1px); }.card-img-top { width: 100%; border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); }.card-img-bottom { width: 100%; border-bottom-right-radius: calc(0.25rem - 1px); border-bottom-left-radius: calc(0.25rem - 1px); }.card-deck { display: flex; flex-direction: column; }.card-deck .card { margin-bottom: 15px; }@media (min-width: 576px) {\n  .card-deck { flex-flow: row wrap; margin-right: -15px; margin-left: -15px; }\n  .card-deck .card { display: flex; flex: 1 0 0%; flex-direction: column; margin-right: 15px; margin-bottom: 0px; margin-left: 15px; }\n}.card-group { display: flex; flex-direction: column; }.card-group > .card { margin-bottom: 15px; }@media (min-width: 576px) {\n  .card-group { flex-flow: row wrap; }\n  .card-group > .card { flex: 1 0 0%; margin-bottom: 0px; }\n  .card-group > .card + .card { margin-left: 0px; border-left: 0px; }\n  .card-group > .card:first-child { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }\n  .card-group > .card:first-child .card-header, .card-group > .card:first-child .card-img-top { border-top-right-radius: 0px; }\n  .card-group > .card:first-child .card-footer, .card-group > .card:first-child .card-img-bottom { border-bottom-right-radius: 0px; }\n  .card-group > .card:last-child { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }\n  .card-group > .card:last-child .card-header, .card-group > .card:last-child .card-img-top { border-top-left-radius: 0px; }\n  .card-group > .card:last-child .card-footer, .card-group > .card:last-child .card-img-bottom { border-bottom-left-radius: 0px; }\n  .card-group > .card:only-child { border-radius: 0.25rem; }\n  .card-group > .card:only-child .card-header, .card-group > .card:only-child .card-img-top { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }\n  .card-group > .card:only-child .card-footer, .card-group > .card:only-child .card-img-bottom { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }\n  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) { border-radius: 0px; }\n  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-footer, .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-header, .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom, .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-top { border-radius: 0px; }\n}.card-columns .card { margin-bottom: 0.75rem; }@media (min-width: 576px) {\n  .card-columns { column-count: 3; column-gap: 1.25rem; orphans: 1; widows: 1; }\n  .card-columns .card { display: inline-block; width: 100%; }\n}.accordion .card:not(:first-of-type):not(:last-of-type) { border-bottom: 0px; border-radius: 0px; }.accordion .card:not(:first-of-type) .card-header:first-child { border-radius: 0px; }.accordion .card:first-of-type { border-bottom: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; }.accordion .card:last-of-type { border-top-left-radius: 0px; border-top-right-radius: 0px; }.breadcrumb { display: flex; flex-wrap: wrap; padding: 0.75rem 1rem; margin-bottom: 1rem; list-style: none; background-color: rgb(233, 236, 239); border-radius: 0.25rem; }.breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; }.breadcrumb-item + .breadcrumb-item::before { display: inline-block; padding-right: 0.5rem; color: rgb(108, 117, 125); content: \"/\"; }.breadcrumb-item + .breadcrumb-item:hover::before { text-decoration: underline; }.breadcrumb-item + .breadcrumb-item:hover::before { text-decoration: none; }.breadcrumb-item.active { color: rgb(108, 117, 125); }.pagination { display: flex; padding-left: 0px; list-style: none; border-radius: 0.25rem; }.page-link { position: relative; display: block; padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; color: rgb(0, 123, 255); background-color: rgb(255, 255, 255); border: 1px solid rgb(222, 226, 230); }.page-link:hover { z-index: 2; color: rgb(0, 86, 179); text-decoration: none; background-color: rgb(233, 236, 239); border-color: rgb(222, 226, 230); }.page-link:focus { z-index: 2; outline: 0px; box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.page-link:not(:disabled):not(.disabled) { cursor: pointer; }.page-item:first-child .page-link { margin-left: 0px; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }.page-item:last-child .page-link { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }.page-item.active .page-link { z-index: 1; color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.page-item.disabled .page-link { color: rgb(108, 117, 125); pointer-events: none; cursor: auto; background-color: rgb(255, 255, 255); border-color: rgb(222, 226, 230); }.pagination-lg .page-link { padding: 0.75rem 1.5rem; font-size: 1.25rem; line-height: 1.5; }.pagination-lg .page-item:first-child .page-link { border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; }.pagination-lg .page-item:last-child .page-link { border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; }.pagination-sm .page-link { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; }.pagination-sm .page-item:first-child .page-link { border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; }.pagination-sm .page-item:last-child .page-link { border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; }.badge { display: inline-block; padding: 0.25em 0.4em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; }.badge:empty { display: none; }.btn .badge { position: relative; top: -1px; }.badge-pill { padding-right: 0.6em; padding-left: 0.6em; border-radius: 10rem; }.badge-primary { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); }.badge-primary[href]:focus, .badge-primary[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(0, 98, 204); }.badge-secondary { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); }.badge-secondary[href]:focus, .badge-secondary[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(84, 91, 98); }.badge-success { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); }.badge-success[href]:focus, .badge-success[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(30, 126, 52); }.badge-info { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); }.badge-info[href]:focus, .badge-info[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(17, 122, 139); }.badge-warning { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); }.badge-warning[href]:focus, .badge-warning[href]:hover { color: rgb(33, 37, 41); text-decoration: none; background-color: rgb(211, 158, 0); }.badge-danger { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); }.badge-danger[href]:focus, .badge-danger[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(189, 33, 48); }.badge-light { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); }.badge-light[href]:focus, .badge-light[href]:hover { color: rgb(33, 37, 41); text-decoration: none; background-color: rgb(218, 224, 229); }.badge-dark { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); }.badge-dark[href]:focus, .badge-dark[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(29, 33, 36); }.jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; background-color: rgb(233, 236, 239); border-radius: 0.3rem; }@media (min-width: 576px) {\n  .jumbotron { padding: 4rem 2rem; }\n}.jumbotron-fluid { padding-right: 0px; padding-left: 0px; border-radius: 0px; }.alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; }.alert-heading { color: inherit; }.alert-link { font-weight: 700; }.alert-dismissible { padding-right: 4rem; }.alert-dismissible .close { position: absolute; top: 0px; right: 0px; padding: 0.75rem 1.25rem; color: inherit; }.alert-primary { color: rgb(0, 64, 133); background-color: rgb(204, 229, 255); border-color: rgb(184, 218, 255); }.alert-primary hr { border-top-color: rgb(159, 205, 255); }.alert-primary .alert-link { color: rgb(0, 39, 82); }.alert-secondary { color: rgb(56, 61, 65); background-color: rgb(226, 227, 229); border-color: rgb(214, 216, 219); }.alert-secondary hr { border-top-color: rgb(200, 203, 207); }.alert-secondary .alert-link { color: rgb(32, 35, 38); }.alert-success { color: rgb(21, 87, 36); background-color: rgb(212, 237, 218); border-color: rgb(195, 230, 203); }.alert-success hr { border-top-color: rgb(177, 223, 187); }.alert-success .alert-link { color: rgb(11, 46, 19); }.alert-info { color: rgb(12, 84, 96); background-color: rgb(209, 236, 241); border-color: rgb(190, 229, 235); }.alert-info hr { border-top-color: rgb(171, 221, 229); }.alert-info .alert-link { color: rgb(6, 44, 51); }.alert-warning { color: rgb(133, 100, 4); background-color: rgb(255, 243, 205); border-color: rgb(255, 238, 186); }.alert-warning hr { border-top-color: rgb(255, 232, 161); }.alert-warning .alert-link { color: rgb(83, 63, 3); }.alert-danger { color: rgb(114, 28, 36); background-color: rgb(248, 215, 218); border-color: rgb(245, 198, 203); }.alert-danger hr { border-top-color: rgb(241, 176, 183); }.alert-danger .alert-link { color: rgb(73, 18, 23); }.alert-light { color: rgb(129, 129, 130); background-color: rgb(254, 254, 254); border-color: rgb(253, 253, 254); }.alert-light hr { border-top-color: rgb(236, 236, 246); }.alert-light .alert-link { color: rgb(104, 104, 104); }.alert-dark { color: rgb(27, 30, 33); background-color: rgb(214, 216, 217); border-color: rgb(198, 200, 202); }.alert-dark hr { border-top-color: rgb(185, 187, 190); }.alert-dark .alert-link { color: rgb(4, 5, 5); }@-webkit-keyframes progress-bar-stripes { \n  0% { background-position: 1rem 0px; }\n  100% { background-position: 0px 0px; }\n}@keyframes progress-bar-stripes { \n  0% { background-position: 1rem 0px; }\n  100% { background-position: 0px 0px; }\n}.progress { display: flex; height: 1rem; overflow: hidden; font-size: 0.75rem; background-color: rgb(233, 236, 239); border-radius: 0.25rem; }.progress-bar { display: flex; flex-direction: column; justify-content: center; color: rgb(255, 255, 255); text-align: center; white-space: nowrap; background-color: rgb(0, 123, 255); transition: width 0.6s ease 0s; }@media not all {\n  .progress-bar { transition: none 0s ease 0s; }\n}.progress-bar-striped { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem; }.progress-bar-animated { animation: progress-bar-stripes 1s linear 0s infinite normal none running; }.media { display: flex; align-items: flex-start; }.media-body { flex: 1 1 0%; }.list-group { display: flex; flex-direction: column; padding-left: 0px; margin-bottom: 0px; }.list-group-item-action { width: 100%; color: rgb(73, 80, 87); text-align: inherit; }.list-group-item-action:focus, .list-group-item-action:hover { color: rgb(73, 80, 87); text-decoration: none; background-color: rgb(248, 249, 250); }.list-group-item-action:active { color: rgb(33, 37, 41); background-color: rgb(233, 236, 239); }.list-group-item { position: relative; display: block; padding: 0.75rem 1.25rem; margin-bottom: -1px; background-color: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.125); }.list-group-item:first-child { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }.list-group-item:last-child { margin-bottom: 0px; border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }.list-group-item:focus, .list-group-item:hover { z-index: 1; text-decoration: none; }.list-group-item.disabled, .list-group-item:disabled { color: rgb(108, 117, 125); background-color: rgb(255, 255, 255); }.list-group-item.active { z-index: 2; color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.list-group-flush .list-group-item { border-right: 0px; border-left: 0px; border-radius: 0px; }.list-group-flush:first-child .list-group-item:first-child { border-top: 0px; }.list-group-flush:last-child .list-group-item:last-child { border-bottom: 0px; }.list-group-item-primary { color: rgb(0, 64, 133); background-color: rgb(184, 218, 255); }.list-group-item-primary.list-group-item-action:focus, .list-group-item-primary.list-group-item-action:hover { color: rgb(0, 64, 133); background-color: rgb(159, 205, 255); }.list-group-item-primary.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(0, 64, 133); border-color: rgb(0, 64, 133); }.list-group-item-secondary { color: rgb(56, 61, 65); background-color: rgb(214, 216, 219); }.list-group-item-secondary.list-group-item-action:focus, .list-group-item-secondary.list-group-item-action:hover { color: rgb(56, 61, 65); background-color: rgb(200, 203, 207); }.list-group-item-secondary.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(56, 61, 65); border-color: rgb(56, 61, 65); }.list-group-item-success { color: rgb(21, 87, 36); background-color: rgb(195, 230, 203); }.list-group-item-success.list-group-item-action:focus, .list-group-item-success.list-group-item-action:hover { color: rgb(21, 87, 36); background-color: rgb(177, 223, 187); }.list-group-item-success.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(21, 87, 36); border-color: rgb(21, 87, 36); }.list-group-item-info { color: rgb(12, 84, 96); background-color: rgb(190, 229, 235); }.list-group-item-info.list-group-item-action:focus, .list-group-item-info.list-group-item-action:hover { color: rgb(12, 84, 96); background-color: rgb(171, 221, 229); }.list-group-item-info.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(12, 84, 96); border-color: rgb(12, 84, 96); }.list-group-item-warning { color: rgb(133, 100, 4); background-color: rgb(255, 238, 186); }.list-group-item-warning.list-group-item-action:focus, .list-group-item-warning.list-group-item-action:hover { color: rgb(133, 100, 4); background-color: rgb(255, 232, 161); }.list-group-item-warning.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(133, 100, 4); border-color: rgb(133, 100, 4); }.list-group-item-danger { color: rgb(114, 28, 36); background-color: rgb(245, 198, 203); }.list-group-item-danger.list-group-item-action:focus, .list-group-item-danger.list-group-item-action:hover { color: rgb(114, 28, 36); background-color: rgb(241, 176, 183); }.list-group-item-danger.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(114, 28, 36); border-color: rgb(114, 28, 36); }.list-group-item-light { color: rgb(129, 129, 130); background-color: rgb(253, 253, 254); }.list-group-item-light.list-group-item-action:focus, .list-group-item-light.list-group-item-action:hover { color: rgb(129, 129, 130); background-color: rgb(236, 236, 246); }.list-group-item-light.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(129, 129, 130); border-color: rgb(129, 129, 130); }.list-group-item-dark { color: rgb(27, 30, 33); background-color: rgb(198, 200, 202); }.list-group-item-dark.list-group-item-action:focus, .list-group-item-dark.list-group-item-action:hover { color: rgb(27, 30, 33); background-color: rgb(185, 187, 190); }.list-group-item-dark.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(27, 30, 33); border-color: rgb(27, 30, 33); }.close { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: rgb(0, 0, 0); text-shadow: rgb(255, 255, 255) 0px 1px 0px; opacity: 0.5; }.close:not(:disabled):not(.disabled) { cursor: pointer; }.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover { color: rgb(0, 0, 0); text-decoration: none; opacity: 0.75; }button.close { padding: 0px; background-color: transparent; border: 0px; -webkit-appearance: none; }.modal-open { overflow: hidden; }.modal-open .modal { overflow: hidden auto; }.modal { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 1050; display: none; overflow: hidden; outline: 0px; }.modal-dialog { position: relative; width: auto; margin: 0.5rem; pointer-events: none; }.modal.fade .modal-dialog { transition: transform 0.3s ease-out 0s, -webkit-transform 0.3s ease-out 0s; transform: translate(0px, -25%); }@media not all {\n  .modal.fade .modal-dialog { transition: none 0s ease 0s; }\n}.modal.show .modal-dialog { transform: translate(0px, 0px); }.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); }.modal-dialog-centered::before { display: block; height: calc(100vh - 1rem); content: \"\"; }.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; outline: 0px; }.modal-backdrop { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 1040; background-color: rgb(0, 0, 0); }.modal-backdrop.fade { opacity: 0; }.modal-backdrop.show { opacity: 0.5; }.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem; border-bottom: 1px solid rgb(233, 236, 239); border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; }.modal-header .close { padding: 1rem; margin: -1rem -1rem -1rem auto; }.modal-title { margin-bottom: 0px; line-height: 1.5; }.modal-body { position: relative; flex: 1 1 auto; padding: 1rem; }.modal-footer { display: flex; align-items: center; justify-content: flex-end; padding: 1rem; border-top: 1px solid rgb(233, 236, 239); }.modal-footer > :not(:first-child) { margin-left: 0.25rem; }.modal-footer > :not(:last-child) { margin-right: 0.25rem; }.modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; }@media (min-width: 576px) {\n  .modal-dialog { max-width: 500px; margin: 1.75rem auto; }\n  .modal-dialog-centered { min-height: calc(100% - 3.5rem); }\n  .modal-dialog-centered::before { height: calc(100vh - 3.5rem); }\n  .modal-sm { max-width: 300px; }\n}@media (min-width: 992px) {\n  .modal-lg { max-width: 800px; }\n}.tooltip { position: absolute; z-index: 1070; display: block; margin: 0px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; font-style: normal; font-weight: 400; line-height: 1.5; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; white-space: normal; line-break: auto; font-size: 0.875rem; word-wrap: break-word; opacity: 0; }.tooltip.show { opacity: 0.9; }.tooltip .arrow { position: absolute; display: block; width: 0.8rem; height: 0.4rem; }.tooltip .arrow::before { position: absolute; content: \"\"; border-color: transparent; border-style: solid; }.bs-tooltip-auto[x-placement^=\"top\"], .bs-tooltip-top { padding: 0.4rem 0px; }.bs-tooltip-auto[x-placement^=\"top\"] .arrow, .bs-tooltip-top .arrow { bottom: 0px; }.bs-tooltip-auto[x-placement^=\"top\"] .arrow::before, .bs-tooltip-top .arrow::before { top: 0px; border-width: 0.4rem 0.4rem 0px; border-top-color: rgb(0, 0, 0); }.bs-tooltip-auto[x-placement^=\"right\"], .bs-tooltip-right { padding: 0px 0.4rem; }.bs-tooltip-auto[x-placement^=\"right\"] .arrow, .bs-tooltip-right .arrow { left: 0px; width: 0.4rem; height: 0.8rem; }.bs-tooltip-auto[x-placement^=\"right\"] .arrow::before, .bs-tooltip-right .arrow::before { right: 0px; border-width: 0.4rem 0.4rem 0.4rem 0px; border-right-color: rgb(0, 0, 0); }.bs-tooltip-auto[x-placement^=\"bottom\"], .bs-tooltip-bottom { padding: 0.4rem 0px; }.bs-tooltip-auto[x-placement^=\"bottom\"] .arrow, .bs-tooltip-bottom .arrow { top: 0px; }.bs-tooltip-auto[x-placement^=\"bottom\"] .arrow::before, .bs-tooltip-bottom .arrow::before { bottom: 0px; border-width: 0px 0.4rem 0.4rem; border-bottom-color: rgb(0, 0, 0); }.bs-tooltip-auto[x-placement^=\"left\"], .bs-tooltip-left { padding: 0px 0.4rem; }.bs-tooltip-auto[x-placement^=\"left\"] .arrow, .bs-tooltip-left .arrow { right: 0px; width: 0.4rem; height: 0.8rem; }.bs-tooltip-auto[x-placement^=\"left\"] .arrow::before, .bs-tooltip-left .arrow::before { left: 0px; border-width: 0.4rem 0px 0.4rem 0.4rem; border-left-color: rgb(0, 0, 0); }.tooltip-inner { max-width: 200px; padding: 0.25rem 0.5rem; color: rgb(255, 255, 255); text-align: center; background-color: rgb(0, 0, 0); border-radius: 0.25rem; }.popover { position: absolute; top: 0px; left: 0px; z-index: 1060; display: block; max-width: 276px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; font-style: normal; font-weight: 400; line-height: 1.5; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; white-space: normal; line-break: auto; font-size: 0.875rem; word-wrap: break-word; background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; }.popover .arrow { position: absolute; display: block; width: 1rem; height: 0.5rem; margin: 0px 0.3rem; }.popover .arrow::after, .popover .arrow::before { position: absolute; display: block; content: \"\"; border-color: transparent; border-style: solid; }.bs-popover-auto[x-placement^=\"top\"], .bs-popover-top { margin-bottom: 0.5rem; }.bs-popover-auto[x-placement^=\"top\"] .arrow, .bs-popover-top .arrow { bottom: calc((0.5rem + 1px) * -1); }.bs-popover-auto[x-placement^=\"top\"] .arrow::after, .bs-popover-auto[x-placement^=\"top\"] .arrow::before, .bs-popover-top .arrow::after, .bs-popover-top .arrow::before { border-width: 0.5rem 0.5rem 0px; }.bs-popover-auto[x-placement^=\"top\"] .arrow::before, .bs-popover-top .arrow::before { bottom: 0px; border-top-color: rgba(0, 0, 0, 0.25); }.bs-popover-auto[x-placement^=\"top\"] .arrow::after, .bs-popover-top .arrow::after { bottom: 1px; border-top-color: rgb(255, 255, 255); }.bs-popover-auto[x-placement^=\"right\"], .bs-popover-right { margin-left: 0.5rem; }.bs-popover-auto[x-placement^=\"right\"] .arrow, .bs-popover-right .arrow { left: calc((0.5rem + 1px) * -1); width: 0.5rem; height: 1rem; margin: 0.3rem 0px; }.bs-popover-auto[x-placement^=\"right\"] .arrow::after, .bs-popover-auto[x-placement^=\"right\"] .arrow::before, .bs-popover-right .arrow::after, .bs-popover-right .arrow::before { border-width: 0.5rem 0.5rem 0.5rem 0px; }.bs-popover-auto[x-placement^=\"right\"] .arrow::before, .bs-popover-right .arrow::before { left: 0px; border-right-color: rgba(0, 0, 0, 0.25); }.bs-popover-auto[x-placement^=\"right\"] .arrow::after, .bs-popover-right .arrow::after { left: 1px; border-right-color: rgb(255, 255, 255); }.bs-popover-auto[x-placement^=\"bottom\"], .bs-popover-bottom { margin-top: 0.5rem; }.bs-popover-auto[x-placement^=\"bottom\"] .arrow, .bs-popover-bottom .arrow { top: calc((0.5rem + 1px) * -1); }.bs-popover-auto[x-placement^=\"bottom\"] .arrow::after, .bs-popover-auto[x-placement^=\"bottom\"] .arrow::before, .bs-popover-bottom .arrow::after, .bs-popover-bottom .arrow::before { border-width: 0px 0.5rem 0.5rem; }.bs-popover-auto[x-placement^=\"bottom\"] .arrow::before, .bs-popover-bottom .arrow::before { top: 0px; border-bottom-color: rgba(0, 0, 0, 0.25); }.bs-popover-auto[x-placement^=\"bottom\"] .arrow::after, .bs-popover-bottom .arrow::after { top: 1px; border-bottom-color: rgb(255, 255, 255); }.bs-popover-auto[x-placement^=\"bottom\"] .popover-header::before, .bs-popover-bottom .popover-header::before { position: absolute; top: 0px; left: 50%; display: block; width: 1rem; margin-left: -0.5rem; content: \"\"; border-bottom: 1px solid rgb(247, 247, 247); }.bs-popover-auto[x-placement^=\"left\"], .bs-popover-left { margin-right: 0.5rem; }.bs-popover-auto[x-placement^=\"left\"] .arrow, .bs-popover-left .arrow { right: calc((0.5rem + 1px) * -1); width: 0.5rem; height: 1rem; margin: 0.3rem 0px; }.bs-popover-auto[x-placement^=\"left\"] .arrow::after, .bs-popover-auto[x-placement^=\"left\"] .arrow::before, .bs-popover-left .arrow::after, .bs-popover-left .arrow::before { border-width: 0.5rem 0px 0.5rem 0.5rem; }.bs-popover-auto[x-placement^=\"left\"] .arrow::before, .bs-popover-left .arrow::before { right: 0px; border-left-color: rgba(0, 0, 0, 0.25); }.bs-popover-auto[x-placement^=\"left\"] .arrow::after, .bs-popover-left .arrow::after { right: 1px; border-left-color: rgb(255, 255, 255); }.popover-header { padding: 0.5rem 0.75rem; margin-bottom: 0px; font-size: 1rem; color: inherit; background-color: rgb(247, 247, 247); border-bottom: 1px solid rgb(235, 235, 235); border-top-left-radius: calc(0.3rem - 1px); border-top-right-radius: calc(0.3rem - 1px); }.popover-header:empty { display: none; }.popover-body { padding: 0.5rem 0.75rem; color: rgb(33, 37, 41); }.carousel { position: relative; }.carousel-inner { position: relative; width: 100%; overflow: hidden; }.carousel-item { position: relative; display: none; align-items: center; width: 100%; backface-visibility: hidden; perspective: 1000px; }.carousel-item-next, .carousel-item-prev, .carousel-item.active { display: block; transition: transform 0.6s ease 0s, -webkit-transform 0.6s ease 0s; }@media not all {\n  .carousel-item-next, .carousel-item-prev, .carousel-item.active { transition: none 0s ease 0s; }\n}.carousel-item-next, .carousel-item-prev { position: absolute; top: 0px; }.carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { transform: translateX(0px); }@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {\n  .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { transform: translate3d(0px, 0px, 0px); }\n}.active.carousel-item-right, .carousel-item-next { transform: translateX(100%); }@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {\n  .active.carousel-item-right, .carousel-item-next { transform: translate3d(100%, 0px, 0px); }\n}.active.carousel-item-left, .carousel-item-prev { transform: translateX(-100%); }@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {\n  .active.carousel-item-left, .carousel-item-prev { transform: translate3d(-100%, 0px, 0px); }\n}.carousel-fade .carousel-item { opacity: 0; transition-duration: 0.6s; transition-property: opacity; }.carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right, .carousel-fade .carousel-item.active { opacity: 1; }.carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right { opacity: 0; }.carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-prev, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item.active { transform: translateX(0px); }@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {\n  .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-prev, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item.active { transform: translate3d(0px, 0px, 0px); }\n}.carousel-control-next, .carousel-control-prev { position: absolute; top: 0px; bottom: 0px; display: flex; align-items: center; justify-content: center; width: 15%; color: rgb(255, 255, 255); text-align: center; opacity: 0.5; }.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover { color: rgb(255, 255, 255); text-decoration: none; outline: 0px; opacity: 0.9; }.carousel-control-prev { left: 0px; }.carousel-control-next { right: 0px; }.carousel-control-next-icon, .carousel-control-prev-icon { display: inline-block; width: 20px; height: 20px; background: center center / 100% 100% no-repeat transparent; }.carousel-control-prev-icon { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E\"); }.carousel-control-next-icon { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E\"); }.carousel-indicators { position: absolute; right: 0px; bottom: 10px; left: 0px; z-index: 15; display: flex; justify-content: center; padding-left: 0px; margin-right: 15%; margin-left: 15%; list-style: none; }.carousel-indicators li { position: relative; flex: 0 1 auto; width: 30px; height: 3px; margin-right: 3px; margin-left: 3px; text-indent: -999px; cursor: pointer; background-color: rgba(255, 255, 255, 0.5); }.carousel-indicators li::before { position: absolute; top: -10px; left: 0px; display: inline-block; width: 100%; height: 10px; content: \"\"; }.carousel-indicators li::after { position: absolute; bottom: -10px; left: 0px; display: inline-block; width: 100%; height: 10px; content: \"\"; }.carousel-indicators .active { background-color: rgb(255, 255, 255); }.carousel-caption { position: absolute; right: 15%; bottom: 20px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: rgb(255, 255, 255); text-align: center; }.align-baseline { vertical-align: baseline !important; }.align-top { vertical-align: top !important; }.align-middle { vertical-align: middle !important; }.align-bottom { vertical-align: bottom !important; }.align-text-bottom { vertical-align: text-bottom !important; }.align-text-top { vertical-align: text-top !important; }.bg-primary { background-color: rgb(0, 123, 255) !important; }a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover { background-color: rgb(0, 98, 204) !important; }.bg-secondary { background-color: rgb(108, 117, 125) !important; }a.bg-secondary:focus, a.bg-secondary:hover, button.bg-secondary:focus, button.bg-secondary:hover { background-color: rgb(84, 91, 98) !important; }.bg-success { background-color: rgb(40, 167, 69) !important; }a.bg-success:focus, a.bg-success:hover, button.bg-success:focus, button.bg-success:hover { background-color: rgb(30, 126, 52) !important; }.bg-info { background-color: rgb(23, 162, 184) !important; }a.bg-info:focus, a.bg-info:hover, button.bg-info:focus, button.bg-info:hover { background-color: rgb(17, 122, 139) !important; }.bg-warning { background-color: rgb(255, 193, 7) !important; }a.bg-warning:focus, a.bg-warning:hover, button.bg-warning:focus, button.bg-warning:hover { background-color: rgb(211, 158, 0) !important; }.bg-danger { background-color: rgb(220, 53, 69) !important; }a.bg-danger:focus, a.bg-danger:hover, button.bg-danger:focus, button.bg-danger:hover { background-color: rgb(189, 33, 48) !important; }.bg-light { background-color: rgb(248, 249, 250) !important; }a.bg-light:focus, a.bg-light:hover, button.bg-light:focus, button.bg-light:hover { background-color: rgb(218, 224, 229) !important; }.bg-dark { background-color: rgb(52, 58, 64) !important; }a.bg-dark:focus, a.bg-dark:hover, button.bg-dark:focus, button.bg-dark:hover { background-color: rgb(29, 33, 36) !important; }.bg-white { background-color: rgb(255, 255, 255) !important; }.bg-transparent { background-color: transparent !important; }.border { border: 1px solid rgb(222, 226, 230) !important; }.border-top { border-top: 1px solid rgb(222, 226, 230) !important; }.border-right { border-right: 1px solid rgb(222, 226, 230) !important; }.border-bottom { border-bottom: 1px solid rgb(222, 226, 230) !important; }.border-left { border-left: 1px solid rgb(222, 226, 230) !important; }.border-0 { border: 0px !important; }.border-top-0 { border-top: 0px !important; }.border-right-0 { border-right: 0px !important; }.border-bottom-0 { border-bottom: 0px !important; }.border-left-0 { border-left: 0px !important; }.border-primary { border-color: rgb(0, 123, 255) !important; }.border-secondary { border-color: rgb(108, 117, 125) !important; }.border-success { border-color: rgb(40, 167, 69) !important; }.border-info { border-color: rgb(23, 162, 184) !important; }.border-warning { border-color: rgb(255, 193, 7) !important; }.border-danger { border-color: rgb(220, 53, 69) !important; }.border-light { border-color: rgb(248, 249, 250) !important; }.border-dark { border-color: rgb(52, 58, 64) !important; }.border-white { border-color: rgb(255, 255, 255) !important; }.rounded { border-radius: 0.25rem !important; }.rounded-top { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }.rounded-right { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }.rounded-bottom { border-bottom-right-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }.rounded-left { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }.rounded-circle { border-radius: 50% !important; }.rounded-0 { border-radius: 0px !important; }.clearfix::after { display: block; clear: both; content: \"\"; }.d-none { display: none !important; }.d-inline { display: inline !important; }.d-inline-block { display: inline-block !important; }.d-block { display: block !important; }.d-table { display: table !important; }.d-table-row { display: table-row !important; }.d-table-cell { display: table-cell !important; }.d-flex { display: flex !important; }.d-inline-flex { display: inline-flex !important; }@media (min-width: 576px) {\n  .d-sm-none { display: none !important; }\n  .d-sm-inline { display: inline !important; }\n  .d-sm-inline-block { display: inline-block !important; }\n  .d-sm-block { display: block !important; }\n  .d-sm-table { display: table !important; }\n  .d-sm-table-row { display: table-row !important; }\n  .d-sm-table-cell { display: table-cell !important; }\n  .d-sm-flex { display: flex !important; }\n  .d-sm-inline-flex { display: inline-flex !important; }\n}@media (min-width: 768px) {\n  .d-md-none { display: none !important; }\n  .d-md-inline { display: inline !important; }\n  .d-md-inline-block { display: inline-block !important; }\n  .d-md-block { display: block !important; }\n  .d-md-table { display: table !important; }\n  .d-md-table-row { display: table-row !important; }\n  .d-md-table-cell { display: table-cell !important; }\n  .d-md-flex { display: flex !important; }\n  .d-md-inline-flex { display: inline-flex !important; }\n}@media (min-width: 992px) {\n  .d-lg-none { display: none !important; }\n  .d-lg-inline { display: inline !important; }\n  .d-lg-inline-block { display: inline-block !important; }\n  .d-lg-block { display: block !important; }\n  .d-lg-table { display: table !important; }\n  .d-lg-table-row { display: table-row !important; }\n  .d-lg-table-cell { display: table-cell !important; }\n  .d-lg-flex { display: flex !important; }\n  .d-lg-inline-flex { display: inline-flex !important; }\n}@media (min-width: 1200px) {\n  .d-xl-none { display: none !important; }\n  .d-xl-inline { display: inline !important; }\n  .d-xl-inline-block { display: inline-block !important; }\n  .d-xl-block { display: block !important; }\n  .d-xl-table { display: table !important; }\n  .d-xl-table-row { display: table-row !important; }\n  .d-xl-table-cell { display: table-cell !important; }\n  .d-xl-flex { display: flex !important; }\n  .d-xl-inline-flex { display: inline-flex !important; }\n}@media print {\n  .d-print-none { display: none !important; }\n  .d-print-inline { display: inline !important; }\n  .d-print-inline-block { display: inline-block !important; }\n  .d-print-block { display: block !important; }\n  .d-print-table { display: table !important; }\n  .d-print-table-row { display: table-row !important; }\n  .d-print-table-cell { display: table-cell !important; }\n  .d-print-flex { display: flex !important; }\n  .d-print-inline-flex { display: inline-flex !important; }\n}.embed-responsive { position: relative; display: block; width: 100%; padding: 0px; overflow: hidden; }.embed-responsive::before { display: block; content: \"\"; }.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video { position: absolute; top: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; border: 0px; }.embed-responsive-21by9::before { padding-top: 42.8571%; }.embed-responsive-16by9::before { padding-top: 56.25%; }.embed-responsive-4by3::before { padding-top: 75%; }.embed-responsive-1by1::before { padding-top: 100%; }.flex-row { flex-direction: row !important; }.flex-column { flex-direction: column !important; }.flex-row-reverse { flex-direction: row-reverse !important; }.flex-column-reverse { flex-direction: column-reverse !important; }.flex-wrap { flex-wrap: wrap !important; }.flex-nowrap { flex-wrap: nowrap !important; }.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }.flex-fill { flex: 1 1 auto !important; }.flex-grow-0 { flex-grow: 0 !important; }.flex-grow-1 { flex-grow: 1 !important; }.flex-shrink-0 { flex-shrink: 0 !important; }.flex-shrink-1 { flex-shrink: 1 !important; }.justify-content-start { justify-content: flex-start !important; }.justify-content-end { justify-content: flex-end !important; }.justify-content-center { justify-content: center !important; }.justify-content-between { justify-content: space-between !important; }.justify-content-around { justify-content: space-around !important; }.align-items-start { align-items: flex-start !important; }.align-items-end { align-items: flex-end !important; }.align-items-center { align-items: center !important; }.align-items-baseline { align-items: baseline !important; }.align-items-stretch { align-items: stretch !important; }.align-content-start { align-content: flex-start !important; }.align-content-end { align-content: flex-end !important; }.align-content-center { align-content: center !important; }.align-content-between { align-content: space-between !important; }.align-content-around { align-content: space-around !important; }.align-content-stretch { align-content: stretch !important; }.align-self-auto { align-self: auto !important; }.align-self-start { align-self: flex-start !important; }.align-self-end { align-self: flex-end !important; }.align-self-center { align-self: center !important; }.align-self-baseline { align-self: baseline !important; }.align-self-stretch { align-self: stretch !important; }@media (min-width: 576px) {\n  .flex-sm-row { flex-direction: row !important; }\n  .flex-sm-column { flex-direction: column !important; }\n  .flex-sm-row-reverse { flex-direction: row-reverse !important; }\n  .flex-sm-column-reverse { flex-direction: column-reverse !important; }\n  .flex-sm-wrap { flex-wrap: wrap !important; }\n  .flex-sm-nowrap { flex-wrap: nowrap !important; }\n  .flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; }\n  .flex-sm-fill { flex: 1 1 auto !important; }\n  .flex-sm-grow-0 { flex-grow: 0 !important; }\n  .flex-sm-grow-1 { flex-grow: 1 !important; }\n  .flex-sm-shrink-0 { flex-shrink: 0 !important; }\n  .flex-sm-shrink-1 { flex-shrink: 1 !important; }\n  .justify-content-sm-start { justify-content: flex-start !important; }\n  .justify-content-sm-end { justify-content: flex-end !important; }\n  .justify-content-sm-center { justify-content: center !important; }\n  .justify-content-sm-between { justify-content: space-between !important; }\n  .justify-content-sm-around { justify-content: space-around !important; }\n  .align-items-sm-start { align-items: flex-start !important; }\n  .align-items-sm-end { align-items: flex-end !important; }\n  .align-items-sm-center { align-items: center !important; }\n  .align-items-sm-baseline { align-items: baseline !important; }\n  .align-items-sm-stretch { align-items: stretch !important; }\n  .align-content-sm-start { align-content: flex-start !important; }\n  .align-content-sm-end { align-content: flex-end !important; }\n  .align-content-sm-center { align-content: center !important; }\n  .align-content-sm-between { align-content: space-between !important; }\n  .align-content-sm-around { align-content: space-around !important; }\n  .align-content-sm-stretch { align-content: stretch !important; }\n  .align-self-sm-auto { align-self: auto !important; }\n  .align-self-sm-start { align-self: flex-start !important; }\n  .align-self-sm-end { align-self: flex-end !important; }\n  .align-self-sm-center { align-self: center !important; }\n  .align-self-sm-baseline { align-self: baseline !important; }\n  .align-self-sm-stretch { align-self: stretch !important; }\n}@media (min-width: 768px) {\n  .flex-md-row { flex-direction: row !important; }\n  .flex-md-column { flex-direction: column !important; }\n  .flex-md-row-reverse { flex-direction: row-reverse !important; }\n  .flex-md-column-reverse { flex-direction: column-reverse !important; }\n  .flex-md-wrap { flex-wrap: wrap !important; }\n  .flex-md-nowrap { flex-wrap: nowrap !important; }\n  .flex-md-wrap-reverse { flex-wrap: wrap-reverse !important; }\n  .flex-md-fill { flex: 1 1 auto !important; }\n  .flex-md-grow-0 { flex-grow: 0 !important; }\n  .flex-md-grow-1 { flex-grow: 1 !important; }\n  .flex-md-shrink-0 { flex-shrink: 0 !important; }\n  .flex-md-shrink-1 { flex-shrink: 1 !important; }\n  .justify-content-md-start { justify-content: flex-start !important; }\n  .justify-content-md-end { justify-content: flex-end !important; }\n  .justify-content-md-center { justify-content: center !important; }\n  .justify-content-md-between { justify-content: space-between !important; }\n  .justify-content-md-around { justify-content: space-around !important; }\n  .align-items-md-start { align-items: flex-start !important; }\n  .align-items-md-end { align-items: flex-end !important; }\n  .align-items-md-center { align-items: center !important; }\n  .align-items-md-baseline { align-items: baseline !important; }\n  .align-items-md-stretch { align-items: stretch !important; }\n  .align-content-md-start { align-content: flex-start !important; }\n  .align-content-md-end { align-content: flex-end !important; }\n  .align-content-md-center { align-content: center !important; }\n  .align-content-md-between { align-content: space-between !important; }\n  .align-content-md-around { align-content: space-around !important; }\n  .align-content-md-stretch { align-content: stretch !important; }\n  .align-self-md-auto { align-self: auto !important; }\n  .align-self-md-start { align-self: flex-start !important; }\n  .align-self-md-end { align-self: flex-end !important; }\n  .align-self-md-center { align-self: center !important; }\n  .align-self-md-baseline { align-self: baseline !important; }\n  .align-self-md-stretch { align-self: stretch !important; }\n}@media (min-width: 992px) {\n  .flex-lg-row { flex-direction: row !important; }\n  .flex-lg-column { flex-direction: column !important; }\n  .flex-lg-row-reverse { flex-direction: row-reverse !important; }\n  .flex-lg-column-reverse { flex-direction: column-reverse !important; }\n  .flex-lg-wrap { flex-wrap: wrap !important; }\n  .flex-lg-nowrap { flex-wrap: nowrap !important; }\n  .flex-lg-wrap-reverse { flex-wrap: wrap-reverse !important; }\n  .flex-lg-fill { flex: 1 1 auto !important; }\n  .flex-lg-grow-0 { flex-grow: 0 !important; }\n  .flex-lg-grow-1 { flex-grow: 1 !important; }\n  .flex-lg-shrink-0 { flex-shrink: 0 !important; }\n  .flex-lg-shrink-1 { flex-shrink: 1 !important; }\n  .justify-content-lg-start { justify-content: flex-start !important; }\n  .justify-content-lg-end { justify-content: flex-end !important; }\n  .justify-content-lg-center { justify-content: center !important; }\n  .justify-content-lg-between { justify-content: space-between !important; }\n  .justify-content-lg-around { justify-content: space-around !important; }\n  .align-items-lg-start { align-items: flex-start !important; }\n  .align-items-lg-end { align-items: flex-end !important; }\n  .align-items-lg-center { align-items: center !important; }\n  .align-items-lg-baseline { align-items: baseline !important; }\n  .align-items-lg-stretch { align-items: stretch !important; }\n  .align-content-lg-start { align-content: flex-start !important; }\n  .align-content-lg-end { align-content: flex-end !important; }\n  .align-content-lg-center { align-content: center !important; }\n  .align-content-lg-between { align-content: space-between !important; }\n  .align-content-lg-around { align-content: space-around !important; }\n  .align-content-lg-stretch { align-content: stretch !important; }\n  .align-self-lg-auto { align-self: auto !important; }\n  .align-self-lg-start { align-self: flex-start !important; }\n  .align-self-lg-end { align-self: flex-end !important; }\n  .align-self-lg-center { align-self: center !important; }\n  .align-self-lg-baseline { align-self: baseline !important; }\n  .align-self-lg-stretch { align-self: stretch !important; }\n}@media (min-width: 1200px) {\n  .flex-xl-row { flex-direction: row !important; }\n  .flex-xl-column { flex-direction: column !important; }\n  .flex-xl-row-reverse { flex-direction: row-reverse !important; }\n  .flex-xl-column-reverse { flex-direction: column-reverse !important; }\n  .flex-xl-wrap { flex-wrap: wrap !important; }\n  .flex-xl-nowrap { flex-wrap: nowrap !important; }\n  .flex-xl-wrap-reverse { flex-wrap: wrap-reverse !important; }\n  .flex-xl-fill { flex: 1 1 auto !important; }\n  .flex-xl-grow-0 { flex-grow: 0 !important; }\n  .flex-xl-grow-1 { flex-grow: 1 !important; }\n  .flex-xl-shrink-0 { flex-shrink: 0 !important; }\n  .flex-xl-shrink-1 { flex-shrink: 1 !important; }\n  .justify-content-xl-start { justify-content: flex-start !important; }\n  .justify-content-xl-end { justify-content: flex-end !important; }\n  .justify-content-xl-center { justify-content: center !important; }\n  .justify-content-xl-between { justify-content: space-between !important; }\n  .justify-content-xl-around { justify-content: space-around !important; }\n  .align-items-xl-start { align-items: flex-start !important; }\n  .align-items-xl-end { align-items: flex-end !important; }\n  .align-items-xl-center { align-items: center !important; }\n  .align-items-xl-baseline { align-items: baseline !important; }\n  .align-items-xl-stretch { align-items: stretch !important; }\n  .align-content-xl-start { align-content: flex-start !important; }\n  .align-content-xl-end { align-content: flex-end !important; }\n  .align-content-xl-center { align-content: center !important; }\n  .align-content-xl-between { align-content: space-between !important; }\n  .align-content-xl-around { align-content: space-around !important; }\n  .align-content-xl-stretch { align-content: stretch !important; }\n  .align-self-xl-auto { align-self: auto !important; }\n  .align-self-xl-start { align-self: flex-start !important; }\n  .align-self-xl-end { align-self: flex-end !important; }\n  .align-self-xl-center { align-self: center !important; }\n  .align-self-xl-baseline { align-self: baseline !important; }\n  .align-self-xl-stretch { align-self: stretch !important; }\n}.float-left { float: left !important; }.float-right { float: right !important; }.float-none { float: none !important; }@media (min-width: 576px) {\n  .float-sm-left { float: left !important; }\n  .float-sm-right { float: right !important; }\n  .float-sm-none { float: none !important; }\n}@media (min-width: 768px) {\n  .float-md-left { float: left !important; }\n  .float-md-right { float: right !important; }\n  .float-md-none { float: none !important; }\n}@media (min-width: 992px) {\n  .float-lg-left { float: left !important; }\n  .float-lg-right { float: right !important; }\n  .float-lg-none { float: none !important; }\n}@media (min-width: 1200px) {\n  .float-xl-left { float: left !important; }\n  .float-xl-right { float: right !important; }\n  .float-xl-none { float: none !important; }\n}.position-static { position: static !important; }.position-relative { position: relative !important; }.position-absolute { position: absolute !important; }.position-fixed { position: fixed !important; }.position-sticky { position: sticky !important; }.fixed-top { position: fixed; top: 0px; right: 0px; left: 0px; z-index: 1030; }.fixed-bottom { position: fixed; right: 0px; bottom: 0px; left: 0px; z-index: 1030; }@supports ((position:-webkit-sticky) or (position:sticky)) {\n  .sticky-top { position: sticky; top: 0px; z-index: 1020; }\n}.sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }.sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }.shadow-sm { box-shadow: rgba(0, 0, 0, 0.075) 0px 0.125rem 0.25rem !important; }.shadow { box-shadow: rgba(0, 0, 0, 0.15) 0px 0.5rem 1rem !important; }.shadow-lg { box-shadow: rgba(0, 0, 0, 0.176) 0px 1rem 3rem !important; }.shadow-none { box-shadow: none !important; }.w-25 { width: 25% !important; }.w-50 { width: 50% !important; }.w-75 { width: 75% !important; }.w-100 { width: 100% !important; }.w-auto { width: auto !important; }.h-25 { height: 25% !important; }.h-50 { height: 50% !important; }.h-75 { height: 75% !important; }.h-100 { height: 100% !important; }.h-auto { height: auto !important; }.mw-100 { max-width: 100% !important; }.mh-100 { max-height: 100% !important; }.m-0 { margin: 0px !important; }.mt-0, .my-0 { margin-top: 0px !important; }.mr-0, .mx-0 { margin-right: 0px !important; }.mb-0, .my-0 { margin-bottom: 0px !important; }.ml-0, .mx-0 { margin-left: 0px !important; }.m-1 { margin: 0.25rem !important; }.mt-1, .my-1 { margin-top: 0.25rem !important; }.mr-1, .mx-1 { margin-right: 0.25rem !important; }.mb-1, .my-1 { margin-bottom: 0.25rem !important; }.ml-1, .mx-1 { margin-left: 0.25rem !important; }.m-2 { margin: 0.5rem !important; }.mt-2, .my-2 { margin-top: 0.5rem !important; }.mr-2, .mx-2 { margin-right: 0.5rem !important; }.mb-2, .my-2 { margin-bottom: 0.5rem !important; }.ml-2, .mx-2 { margin-left: 0.5rem !important; }.m-3 { margin: 1rem !important; }.mt-3, .my-3 { margin-top: 1rem !important; }.mr-3, .mx-3 { margin-right: 1rem !important; }.mb-3, .my-3 { margin-bottom: 1rem !important; }.ml-3, .mx-3 { margin-left: 1rem !important; }.m-4 { margin: 1.5rem !important; }.mt-4, .my-4 { margin-top: 1.5rem !important; }.mr-4, .mx-4 { margin-right: 1.5rem !important; }.mb-4, .my-4 { margin-bottom: 1.5rem !important; }.ml-4, .mx-4 { margin-left: 1.5rem !important; }.m-5 { margin: 3rem !important; }.mt-5, .my-5 { margin-top: 3rem !important; }.mr-5, .mx-5 { margin-right: 3rem !important; }.mb-5, .my-5 { margin-bottom: 3rem !important; }.ml-5, .mx-5 { margin-left: 3rem !important; }.p-0 { padding: 0px !important; }.pt-0, .py-0 { padding-top: 0px !important; }.pr-0, .px-0 { padding-right: 0px !important; }.pb-0, .py-0 { padding-bottom: 0px !important; }.pl-0, .px-0 { padding-left: 0px !important; }.p-1 { padding: 0.25rem !important; }.pt-1, .py-1 { padding-top: 0.25rem !important; }.pr-1, .px-1 { padding-right: 0.25rem !important; }.pb-1, .py-1 { padding-bottom: 0.25rem !important; }.pl-1, .px-1 { padding-left: 0.25rem !important; }.p-2 { padding: 0.5rem !important; }.pt-2, .py-2 { padding-top: 0.5rem !important; }.pr-2, .px-2 { padding-right: 0.5rem !important; }.pb-2, .py-2 { padding-bottom: 0.5rem !important; }.pl-2, .px-2 { padding-left: 0.5rem !important; }.p-3 { padding: 1rem !important; }.pt-3, .py-3 { padding-top: 1rem !important; }.pr-3, .px-3 { padding-right: 1rem !important; }.pb-3, .py-3 { padding-bottom: 1rem !important; }.pl-3, .px-3 { padding-left: 1rem !important; }.p-4 { padding: 1.5rem !important; }.pt-4, .py-4 { padding-top: 1.5rem !important; }.pr-4, .px-4 { padding-right: 1.5rem !important; }.pb-4, .py-4 { padding-bottom: 1.5rem !important; }.pl-4, .px-4 { padding-left: 1.5rem !important; }.p-5 { padding: 3rem !important; }.pt-5, .py-5 { padding-top: 3rem !important; }.pr-5, .px-5 { padding-right: 3rem !important; }.pb-5, .py-5 { padding-bottom: 3rem !important; }.pl-5, .px-5 { padding-left: 3rem !important; }.m-auto { margin: auto !important; }.mt-auto, .my-auto { margin-top: auto !important; }.mr-auto, .mx-auto { margin-right: auto !important; }.mb-auto, .my-auto { margin-bottom: auto !important; }.ml-auto, .mx-auto { margin-left: auto !important; }@media (min-width: 576px) {\n  .m-sm-0 { margin: 0px !important; }\n  .mt-sm-0, .my-sm-0 { margin-top: 0px !important; }\n  .mr-sm-0, .mx-sm-0 { margin-right: 0px !important; }\n  .mb-sm-0, .my-sm-0 { margin-bottom: 0px !important; }\n  .ml-sm-0, .mx-sm-0 { margin-left: 0px !important; }\n  .m-sm-1 { margin: 0.25rem !important; }\n  .mt-sm-1, .my-sm-1 { margin-top: 0.25rem !important; }\n  .mr-sm-1, .mx-sm-1 { margin-right: 0.25rem !important; }\n  .mb-sm-1, .my-sm-1 { margin-bottom: 0.25rem !important; }\n  .ml-sm-1, .mx-sm-1 { margin-left: 0.25rem !important; }\n  .m-sm-2 { margin: 0.5rem !important; }\n  .mt-sm-2, .my-sm-2 { margin-top: 0.5rem !important; }\n  .mr-sm-2, .mx-sm-2 { margin-right: 0.5rem !important; }\n  .mb-sm-2, .my-sm-2 { margin-bottom: 0.5rem !important; }\n  .ml-sm-2, .mx-sm-2 { margin-left: 0.5rem !important; }\n  .m-sm-3 { margin: 1rem !important; }\n  .mt-sm-3, .my-sm-3 { margin-top: 1rem !important; }\n  .mr-sm-3, .mx-sm-3 { margin-right: 1rem !important; }\n  .mb-sm-3, .my-sm-3 { margin-bottom: 1rem !important; }\n  .ml-sm-3, .mx-sm-3 { margin-left: 1rem !important; }\n  .m-sm-4 { margin: 1.5rem !important; }\n  .mt-sm-4, .my-sm-4 { margin-top: 1.5rem !important; }\n  .mr-sm-4, .mx-sm-4 { margin-right: 1.5rem !important; }\n  .mb-sm-4, .my-sm-4 { margin-bottom: 1.5rem !important; }\n  .ml-sm-4, .mx-sm-4 { margin-left: 1.5rem !important; }\n  .m-sm-5 { margin: 3rem !important; }\n  .mt-sm-5, .my-sm-5 { margin-top: 3rem !important; }\n  .mr-sm-5, .mx-sm-5 { margin-right: 3rem !important; }\n  .mb-sm-5, .my-sm-5 { margin-bottom: 3rem !important; }\n  .ml-sm-5, .mx-sm-5 { margin-left: 3rem !important; }\n  .p-sm-0 { padding: 0px !important; }\n  .pt-sm-0, .py-sm-0 { padding-top: 0px !important; }\n  .pr-sm-0, .px-sm-0 { padding-right: 0px !important; }\n  .pb-sm-0, .py-sm-0 { padding-bottom: 0px !important; }\n  .pl-sm-0, .px-sm-0 { padding-left: 0px !important; }\n  .p-sm-1 { padding: 0.25rem !important; }\n  .pt-sm-1, .py-sm-1 { padding-top: 0.25rem !important; }\n  .pr-sm-1, .px-sm-1 { padding-right: 0.25rem !important; }\n  .pb-sm-1, .py-sm-1 { padding-bottom: 0.25rem !important; }\n  .pl-sm-1, .px-sm-1 { padding-left: 0.25rem !important; }\n  .p-sm-2 { padding: 0.5rem !important; }\n  .pt-sm-2, .py-sm-2 { padding-top: 0.5rem !important; }\n  .pr-sm-2, .px-sm-2 { padding-right: 0.5rem !important; }\n  .pb-sm-2, .py-sm-2 { padding-bottom: 0.5rem !important; }\n  .pl-sm-2, .px-sm-2 { padding-left: 0.5rem !important; }\n  .p-sm-3 { padding: 1rem !important; }\n  .pt-sm-3, .py-sm-3 { padding-top: 1rem !important; }\n  .pr-sm-3, .px-sm-3 { padding-right: 1rem !important; }\n  .pb-sm-3, .py-sm-3 { padding-bottom: 1rem !important; }\n  .pl-sm-3, .px-sm-3 { padding-left: 1rem !important; }\n  .p-sm-4 { padding: 1.5rem !important; }\n  .pt-sm-4, .py-sm-4 { padding-top: 1.5rem !important; }\n  .pr-sm-4, .px-sm-4 { padding-right: 1.5rem !important; }\n  .pb-sm-4, .py-sm-4 { padding-bottom: 1.5rem !important; }\n  .pl-sm-4, .px-sm-4 { padding-left: 1.5rem !important; }\n  .p-sm-5 { padding: 3rem !important; }\n  .pt-sm-5, .py-sm-5 { padding-top: 3rem !important; }\n  .pr-sm-5, .px-sm-5 { padding-right: 3rem !important; }\n  .pb-sm-5, .py-sm-5 { padding-bottom: 3rem !important; }\n  .pl-sm-5, .px-sm-5 { padding-left: 3rem !important; }\n  .m-sm-auto { margin: auto !important; }\n  .mt-sm-auto, .my-sm-auto { margin-top: auto !important; }\n  .mr-sm-auto, .mx-sm-auto { margin-right: auto !important; }\n  .mb-sm-auto, .my-sm-auto { margin-bottom: auto !important; }\n  .ml-sm-auto, .mx-sm-auto { margin-left: auto !important; }\n}@media (min-width: 768px) {\n  .m-md-0 { margin: 0px !important; }\n  .mt-md-0, .my-md-0 { margin-top: 0px !important; }\n  .mr-md-0, .mx-md-0 { margin-right: 0px !important; }\n  .mb-md-0, .my-md-0 { margin-bottom: 0px !important; }\n  .ml-md-0, .mx-md-0 { margin-left: 0px !important; }\n  .m-md-1 { margin: 0.25rem !important; }\n  .mt-md-1, .my-md-1 { margin-top: 0.25rem !important; }\n  .mr-md-1, .mx-md-1 { margin-right: 0.25rem !important; }\n  .mb-md-1, .my-md-1 { margin-bottom: 0.25rem !important; }\n  .ml-md-1, .mx-md-1 { margin-left: 0.25rem !important; }\n  .m-md-2 { margin: 0.5rem !important; }\n  .mt-md-2, .my-md-2 { margin-top: 0.5rem !important; }\n  .mr-md-2, .mx-md-2 { margin-right: 0.5rem !important; }\n  .mb-md-2, .my-md-2 { margin-bottom: 0.5rem !important; }\n  .ml-md-2, .mx-md-2 { margin-left: 0.5rem !important; }\n  .m-md-3 { margin: 1rem !important; }\n  .mt-md-3, .my-md-3 { margin-top: 1rem !important; }\n  .mr-md-3, .mx-md-3 { margin-right: 1rem !important; }\n  .mb-md-3, .my-md-3 { margin-bottom: 1rem !important; }\n  .ml-md-3, .mx-md-3 { margin-left: 1rem !important; }\n  .m-md-4 { margin: 1.5rem !important; }\n  .mt-md-4, .my-md-4 { margin-top: 1.5rem !important; }\n  .mr-md-4, .mx-md-4 { margin-right: 1.5rem !important; }\n  .mb-md-4, .my-md-4 { margin-bottom: 1.5rem !important; }\n  .ml-md-4, .mx-md-4 { margin-left: 1.5rem !important; }\n  .m-md-5 { margin: 3rem !important; }\n  .mt-md-5, .my-md-5 { margin-top: 3rem !important; }\n  .mr-md-5, .mx-md-5 { margin-right: 3rem !important; }\n  .mb-md-5, .my-md-5 { margin-bottom: 3rem !important; }\n  .ml-md-5, .mx-md-5 { margin-left: 3rem !important; }\n  .p-md-0 { padding: 0px !important; }\n  .pt-md-0, .py-md-0 { padding-top: 0px !important; }\n  .pr-md-0, .px-md-0 { padding-right: 0px !important; }\n  .pb-md-0, .py-md-0 { padding-bottom: 0px !important; }\n  .pl-md-0, .px-md-0 { padding-left: 0px !important; }\n  .p-md-1 { padding: 0.25rem !important; }\n  .pt-md-1, .py-md-1 { padding-top: 0.25rem !important; }\n  .pr-md-1, .px-md-1 { padding-right: 0.25rem !important; }\n  .pb-md-1, .py-md-1 { padding-bottom: 0.25rem !important; }\n  .pl-md-1, .px-md-1 { padding-left: 0.25rem !important; }\n  .p-md-2 { padding: 0.5rem !important; }\n  .pt-md-2, .py-md-2 { padding-top: 0.5rem !important; }\n  .pr-md-2, .px-md-2 { padding-right: 0.5rem !important; }\n  .pb-md-2, .py-md-2 { padding-bottom: 0.5rem !important; }\n  .pl-md-2, .px-md-2 { padding-left: 0.5rem !important; }\n  .p-md-3 { padding: 1rem !important; }\n  .pt-md-3, .py-md-3 { padding-top: 1rem !important; }\n  .pr-md-3, .px-md-3 { padding-right: 1rem !important; }\n  .pb-md-3, .py-md-3 { padding-bottom: 1rem !important; }\n  .pl-md-3, .px-md-3 { padding-left: 1rem !important; }\n  .p-md-4 { padding: 1.5rem !important; }\n  .pt-md-4, .py-md-4 { padding-top: 1.5rem !important; }\n  .pr-md-4, .px-md-4 { padding-right: 1.5rem !important; }\n  .pb-md-4, .py-md-4 { padding-bottom: 1.5rem !important; }\n  .pl-md-4, .px-md-4 { padding-left: 1.5rem !important; }\n  .p-md-5 { padding: 3rem !important; }\n  .pt-md-5, .py-md-5 { padding-top: 3rem !important; }\n  .pr-md-5, .px-md-5 { padding-right: 3rem !important; }\n  .pb-md-5, .py-md-5 { padding-bottom: 3rem !important; }\n  .pl-md-5, .px-md-5 { padding-left: 3rem !important; }\n  .m-md-auto { margin: auto !important; }\n  .mt-md-auto, .my-md-auto { margin-top: auto !important; }\n  .mr-md-auto, .mx-md-auto { margin-right: auto !important; }\n  .mb-md-auto, .my-md-auto { margin-bottom: auto !important; }\n  .ml-md-auto, .mx-md-auto { margin-left: auto !important; }\n}@media (min-width: 992px) {\n  .m-lg-0 { margin: 0px !important; }\n  .mt-lg-0, .my-lg-0 { margin-top: 0px !important; }\n  .mr-lg-0, .mx-lg-0 { margin-right: 0px !important; }\n  .mb-lg-0, .my-lg-0 { margin-bottom: 0px !important; }\n  .ml-lg-0, .mx-lg-0 { margin-left: 0px !important; }\n  .m-lg-1 { margin: 0.25rem !important; }\n  .mt-lg-1, .my-lg-1 { margin-top: 0.25rem !important; }\n  .mr-lg-1, .mx-lg-1 { margin-right: 0.25rem !important; }\n  .mb-lg-1, .my-lg-1 { margin-bottom: 0.25rem !important; }\n  .ml-lg-1, .mx-lg-1 { margin-left: 0.25rem !important; }\n  .m-lg-2 { margin: 0.5rem !important; }\n  .mt-lg-2, .my-lg-2 { margin-top: 0.5rem !important; }\n  .mr-lg-2, .mx-lg-2 { margin-right: 0.5rem !important; }\n  .mb-lg-2, .my-lg-2 { margin-bottom: 0.5rem !important; }\n  .ml-lg-2, .mx-lg-2 { margin-left: 0.5rem !important; }\n  .m-lg-3 { margin: 1rem !important; }\n  .mt-lg-3, .my-lg-3 { margin-top: 1rem !important; }\n  .mr-lg-3, .mx-lg-3 { margin-right: 1rem !important; }\n  .mb-lg-3, .my-lg-3 { margin-bottom: 1rem !important; }\n  .ml-lg-3, .mx-lg-3 { margin-left: 1rem !important; }\n  .m-lg-4 { margin: 1.5rem !important; }\n  .mt-lg-4, .my-lg-4 { margin-top: 1.5rem !important; }\n  .mr-lg-4, .mx-lg-4 { margin-right: 1.5rem !important; }\n  .mb-lg-4, .my-lg-4 { margin-bottom: 1.5rem !important; }\n  .ml-lg-4, .mx-lg-4 { margin-left: 1.5rem !important; }\n  .m-lg-5 { margin: 3rem !important; }\n  .mt-lg-5, .my-lg-5 { margin-top: 3rem !important; }\n  .mr-lg-5, .mx-lg-5 { margin-right: 3rem !important; }\n  .mb-lg-5, .my-lg-5 { margin-bottom: 3rem !important; }\n  .ml-lg-5, .mx-lg-5 { margin-left: 3rem !important; }\n  .p-lg-0 { padding: 0px !important; }\n  .pt-lg-0, .py-lg-0 { padding-top: 0px !important; }\n  .pr-lg-0, .px-lg-0 { padding-right: 0px !important; }\n  .pb-lg-0, .py-lg-0 { padding-bottom: 0px !important; }\n  .pl-lg-0, .px-lg-0 { padding-left: 0px !important; }\n  .p-lg-1 { padding: 0.25rem !important; }\n  .pt-lg-1, .py-lg-1 { padding-top: 0.25rem !important; }\n  .pr-lg-1, .px-lg-1 { padding-right: 0.25rem !important; }\n  .pb-lg-1, .py-lg-1 { padding-bottom: 0.25rem !important; }\n  .pl-lg-1, .px-lg-1 { padding-left: 0.25rem !important; }\n  .p-lg-2 { padding: 0.5rem !important; }\n  .pt-lg-2, .py-lg-2 { padding-top: 0.5rem !important; }\n  .pr-lg-2, .px-lg-2 { padding-right: 0.5rem !important; }\n  .pb-lg-2, .py-lg-2 { padding-bottom: 0.5rem !important; }\n  .pl-lg-2, .px-lg-2 { padding-left: 0.5rem !important; }\n  .p-lg-3 { padding: 1rem !important; }\n  .pt-lg-3, .py-lg-3 { padding-top: 1rem !important; }\n  .pr-lg-3, .px-lg-3 { padding-right: 1rem !important; }\n  .pb-lg-3, .py-lg-3 { padding-bottom: 1rem !important; }\n  .pl-lg-3, .px-lg-3 { padding-left: 1rem !important; }\n  .p-lg-4 { padding: 1.5rem !important; }\n  .pt-lg-4, .py-lg-4 { padding-top: 1.5rem !important; }\n  .pr-lg-4, .px-lg-4 { padding-right: 1.5rem !important; }\n  .pb-lg-4, .py-lg-4 { padding-bottom: 1.5rem !important; }\n  .pl-lg-4, .px-lg-4 { padding-left: 1.5rem !important; }\n  .p-lg-5 { padding: 3rem !important; }\n  .pt-lg-5, .py-lg-5 { padding-top: 3rem !important; }\n  .pr-lg-5, .px-lg-5 { padding-right: 3rem !important; }\n  .pb-lg-5, .py-lg-5 { padding-bottom: 3rem !important; }\n  .pl-lg-5, .px-lg-5 { padding-left: 3rem !important; }\n  .m-lg-auto { margin: auto !important; }\n  .mt-lg-auto, .my-lg-auto { margin-top: auto !important; }\n  .mr-lg-auto, .mx-lg-auto { margin-right: auto !important; }\n  .mb-lg-auto, .my-lg-auto { margin-bottom: auto !important; }\n  .ml-lg-auto, .mx-lg-auto { margin-left: auto !important; }\n}@media (min-width: 1200px) {\n  .m-xl-0 { margin: 0px !important; }\n  .mt-xl-0, .my-xl-0 { margin-top: 0px !important; }\n  .mr-xl-0, .mx-xl-0 { margin-right: 0px !important; }\n  .mb-xl-0, .my-xl-0 { margin-bottom: 0px !important; }\n  .ml-xl-0, .mx-xl-0 { margin-left: 0px !important; }\n  .m-xl-1 { margin: 0.25rem !important; }\n  .mt-xl-1, .my-xl-1 { margin-top: 0.25rem !important; }\n  .mr-xl-1, .mx-xl-1 { margin-right: 0.25rem !important; }\n  .mb-xl-1, .my-xl-1 { margin-bottom: 0.25rem !important; }\n  .ml-xl-1, .mx-xl-1 { margin-left: 0.25rem !important; }\n  .m-xl-2 { margin: 0.5rem !important; }\n  .mt-xl-2, .my-xl-2 { margin-top: 0.5rem !important; }\n  .mr-xl-2, .mx-xl-2 { margin-right: 0.5rem !important; }\n  .mb-xl-2, .my-xl-2 { margin-bottom: 0.5rem !important; }\n  .ml-xl-2, .mx-xl-2 { margin-left: 0.5rem !important; }\n  .m-xl-3 { margin: 1rem !important; }\n  .mt-xl-3, .my-xl-3 { margin-top: 1rem !important; }\n  .mr-xl-3, .mx-xl-3 { margin-right: 1rem !important; }\n  .mb-xl-3, .my-xl-3 { margin-bottom: 1rem !important; }\n  .ml-xl-3, .mx-xl-3 { margin-left: 1rem !important; }\n  .m-xl-4 { margin: 1.5rem !important; }\n  .mt-xl-4, .my-xl-4 { margin-top: 1.5rem !important; }\n  .mr-xl-4, .mx-xl-4 { margin-right: 1.5rem !important; }\n  .mb-xl-4, .my-xl-4 { margin-bottom: 1.5rem !important; }\n  .ml-xl-4, .mx-xl-4 { margin-left: 1.5rem !important; }\n  .m-xl-5 { margin: 3rem !important; }\n  .mt-xl-5, .my-xl-5 { margin-top: 3rem !important; }\n  .mr-xl-5, .mx-xl-5 { margin-right: 3rem !important; }\n  .mb-xl-5, .my-xl-5 { margin-bottom: 3rem !important; }\n  .ml-xl-5, .mx-xl-5 { margin-left: 3rem !important; }\n  .p-xl-0 { padding: 0px !important; }\n  .pt-xl-0, .py-xl-0 { padding-top: 0px !important; }\n  .pr-xl-0, .px-xl-0 { padding-right: 0px !important; }\n  .pb-xl-0, .py-xl-0 { padding-bottom: 0px !important; }\n  .pl-xl-0, .px-xl-0 { padding-left: 0px !important; }\n  .p-xl-1 { padding: 0.25rem !important; }\n  .pt-xl-1, .py-xl-1 { padding-top: 0.25rem !important; }\n  .pr-xl-1, .px-xl-1 { padding-right: 0.25rem !important; }\n  .pb-xl-1, .py-xl-1 { padding-bottom: 0.25rem !important; }\n  .pl-xl-1, .px-xl-1 { padding-left: 0.25rem !important; }\n  .p-xl-2 { padding: 0.5rem !important; }\n  .pt-xl-2, .py-xl-2 { padding-top: 0.5rem !important; }\n  .pr-xl-2, .px-xl-2 { padding-right: 0.5rem !important; }\n  .pb-xl-2, .py-xl-2 { padding-bottom: 0.5rem !important; }\n  .pl-xl-2, .px-xl-2 { padding-left: 0.5rem !important; }\n  .p-xl-3 { padding: 1rem !important; }\n  .pt-xl-3, .py-xl-3 { padding-top: 1rem !important; }\n  .pr-xl-3, .px-xl-3 { padding-right: 1rem !important; }\n  .pb-xl-3, .py-xl-3 { padding-bottom: 1rem !important; }\n  .pl-xl-3, .px-xl-3 { padding-left: 1rem !important; }\n  .p-xl-4 { padding: 1.5rem !important; }\n  .pt-xl-4, .py-xl-4 { padding-top: 1.5rem !important; }\n  .pr-xl-4, .px-xl-4 { padding-right: 1.5rem !important; }\n  .pb-xl-4, .py-xl-4 { padding-bottom: 1.5rem !important; }\n  .pl-xl-4, .px-xl-4 { padding-left: 1.5rem !important; }\n  .p-xl-5 { padding: 3rem !important; }\n  .pt-xl-5, .py-xl-5 { padding-top: 3rem !important; }\n  .pr-xl-5, .px-xl-5 { padding-right: 3rem !important; }\n  .pb-xl-5, .py-xl-5 { padding-bottom: 3rem !important; }\n  .pl-xl-5, .px-xl-5 { padding-left: 3rem !important; }\n  .m-xl-auto { margin: auto !important; }\n  .mt-xl-auto, .my-xl-auto { margin-top: auto !important; }\n  .mr-xl-auto, .mx-xl-auto { margin-right: auto !important; }\n  .mb-xl-auto, .my-xl-auto { margin-bottom: auto !important; }\n  .ml-xl-auto, .mx-xl-auto { margin-left: auto !important; }\n}.text-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; }.text-justify { text-align: justify !important; }.text-nowrap { white-space: nowrap !important; }.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.text-left { text-align: left !important; }.text-right { text-align: right !important; }.text-center { text-align: center !important; }@media (min-width: 576px) {\n  .text-sm-left { text-align: left !important; }\n  .text-sm-right { text-align: right !important; }\n  .text-sm-center { text-align: center !important; }\n}@media (min-width: 768px) {\n  .text-md-left { text-align: left !important; }\n  .text-md-right { text-align: right !important; }\n  .text-md-center { text-align: center !important; }\n}@media (min-width: 992px) {\n  .text-lg-left { text-align: left !important; }\n  .text-lg-right { text-align: right !important; }\n  .text-lg-center { text-align: center !important; }\n}@media (min-width: 1200px) {\n  .text-xl-left { text-align: left !important; }\n  .text-xl-right { text-align: right !important; }\n  .text-xl-center { text-align: center !important; }\n}.text-lowercase { text-transform: lowercase !important; }.text-uppercase { text-transform: uppercase !important; }.text-capitalize { text-transform: capitalize !important; }.font-weight-light { font-weight: 300 !important; }.font-weight-normal { font-weight: 400 !important; }.font-weight-bold { font-weight: 700 !important; }.font-italic { font-style: italic !important; }.text-white { color: rgb(255, 255, 255) !important; }.text-primary { color: rgb(0, 123, 255) !important; }a.text-primary:focus, a.text-primary:hover { color: rgb(0, 98, 204) !important; }.text-secondary { color: rgb(108, 117, 125) !important; }a.text-secondary:focus, a.text-secondary:hover { color: rgb(84, 91, 98) !important; }.text-success { color: rgb(40, 167, 69) !important; }a.text-success:focus, a.text-success:hover { color: rgb(30, 126, 52) !important; }.text-info { color: rgb(23, 162, 184) !important; }a.text-info:focus, a.text-info:hover { color: rgb(17, 122, 139) !important; }.text-warning { color: rgb(255, 193, 7) !important; }a.text-warning:focus, a.text-warning:hover { color: rgb(211, 158, 0) !important; }.text-danger { color: rgb(220, 53, 69) !important; }a.text-danger:focus, a.text-danger:hover { color: rgb(189, 33, 48) !important; }.text-light { color: rgb(248, 249, 250) !important; }a.text-light:focus, a.text-light:hover { color: rgb(218, 224, 229) !important; }.text-dark { color: rgb(52, 58, 64) !important; }a.text-dark:focus, a.text-dark:hover { color: rgb(29, 33, 36) !important; }.text-body { color: rgb(33, 37, 41) !important; }.text-muted { color: rgb(108, 117, 125) !important; }.text-black-50 { color: rgba(0, 0, 0, 0.5) !important; }.text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }.text-hide { font: 0px/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0px; }.visible { visibility: visible !important; }.invisible { visibility: hidden !important; }@media print {\n  *, ::after, ::before { text-shadow: none !important; box-shadow: none !important; }\n  a:not(.btn) { text-decoration: underline; }\n  abbr[title]::after { content: \" (\" attr(title) \")\"; }\n  pre { white-space: pre-wrap !important; }\n  blockquote, pre { border: 1px solid rgb(173, 181, 189); break-inside: avoid; }\n  thead { display: table-header-group; }\n  img, tr { break-inside: avoid; }\n  h2, h3, p { orphans: 3; widows: 3; }\n  h2, h3 { break-after: avoid; }\n  @page { size: a3; }\n  body { min-width: 992px !important; }\n  .container { min-width: 992px !important; }\n  .navbar { display: none; }\n  .badge { border: 1px solid rgb(0, 0, 0); }\n  .table { border-collapse: collapse !important; }\n  .table td, .table th { background-color: rgb(255, 255, 255) !important; }\n  .table-bordered td, .table-bordered th { border: 1px solid rgb(222, 226, 230) !important; }\n  .table-dark { color: inherit; }\n  .table-dark tbody + tbody, .table-dark td, .table-dark th, .table-dark thead th { border-color: rgb(222, 226, 230); }\n  .table .thead-dark th { color: inherit; border-color: rgb(222, 226, 230); }\n}"},"childNodes":[],"id":22},{"type":3,"textContent":"\n\n  ","id":23},{"type":5,"textContent":" Custom styles for this template ","id":24},{"type":3,"textContent":"\n  ","id":25},{"type":2,"tagName":"link","attributes":{"_cssText":".container { max-width: 960px; }.lh-condensed { line-height: 1.25; }"},"childNodes":[],"id":26},{"type":3,"textContent":"\n","id":27}],"id":5},{"type":3,"textContent":"\n\n","id":28},{"type":2,"tagName":"body","attributes":{"class":"bg-light"},"childNodes":[{"type":3,"textContent":"\n\n  ","id":30},{"type":2,"tagName":"div","attributes":{"class":"container"},"childNodes":[{"type":3,"textContent":"\n    ","id":32},{"type":2,"tagName":"div","attributes":{"class":"py-5 text-center"},"childNodes":[{"type":3,"textContent":"\n      ","id":34},{"type":2,"tagName":"img","attributes":{"class":"d-block mx-auto mb-4","src":"http://localhost:5500/checkout-demo/index_files/bootstrap-solid.svg","alt":"","width":"72","height":"72"},"childNodes":[],"id":35},{"type":3,"textContent":"\n      ","id":36},{"type":2,"tagName":"h2","attributes":{},"childNodes":[{"type":3,"textContent":"Checkout form","id":38}],"id":37},{"type":3,"textContent":"\n      ","id":39},{"type":2,"tagName":"p","attributes":{"class":"lead"},"childNodes":[{"type":3,"textContent":"Below is an example form built entirely with Bootstrap's form controls. Each required form group\n        has\n        a validation state that can be triggered by attempting to submit the form without completing it.","id":41}],"id":40},{"type":3,"textContent":"\n    ","id":42}],"id":33},{"type":3,"textContent":"\n\n    ","id":43},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n      ","id":45},{"type":2,"tagName":"div","attributes":{"class":"col-md-4 order-md-2 mb-4"},"childNodes":[{"type":3,"textContent":"\n        ","id":47},{"type":2,"tagName":"h4","attributes":{"class":"d-flex justify-content-between align-items-center mb-3"},"childNodes":[{"type":3,"textContent":"\n          ","id":49},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Your cart","id":51}],"id":50},{"type":3,"textContent":"\n          ","id":52},{"type":2,"tagName":"span","attributes":{"class":"badge badge-secondary badge-pill"},"childNodes":[{"type":3,"textContent":"3","id":54}],"id":53},{"type":3,"textContent":"\n        ","id":55}],"id":48},{"type":3,"textContent":"\n        ","id":56},{"type":2,"tagName":"ul","attributes":{"class":"list-group mb-3"},"childNodes":[{"type":3,"textContent":"\n          ","id":58},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between lh-condensed"},"childNodes":[{"type":3,"textContent":"\n            ","id":60},{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"\n              ","id":62},{"type":2,"tagName":"h6","attributes":{"class":"my-0"},"childNodes":[{"type":3,"textContent":"Product name","id":64}],"id":63},{"type":3,"textContent":"\n              ","id":65},{"type":2,"tagName":"small","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Brief description","id":67}],"id":66},{"type":3,"textContent":"\n            ","id":68}],"id":61},{"type":3,"textContent":"\n            ","id":69},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"$12","id":71}],"id":70},{"type":3,"textContent":"\n          ","id":72}],"id":59},{"type":3,"textContent":"\n          ","id":73},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between lh-condensed"},"childNodes":[{"type":3,"textContent":"\n            ","id":75},{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"\n              ","id":77},{"type":2,"tagName":"h6","attributes":{"class":"my-0"},"childNodes":[{"type":3,"textContent":"Second product","id":79}],"id":78},{"type":3,"textContent":"\n              ","id":80},{"type":2,"tagName":"small","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Brief description","id":82}],"id":81},{"type":3,"textContent":"\n            ","id":83}],"id":76},{"type":3,"textContent":"\n            ","id":84},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"$8","id":86}],"id":85},{"type":3,"textContent":"\n          ","id":87}],"id":74},{"type":3,"textContent":"\n          ","id":88},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between lh-condensed"},"childNodes":[{"type":3,"textContent":"\n            ","id":90},{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"\n              ","id":92},{"type":2,"tagName":"h6","attributes":{"class":"my-0"},"childNodes":[{"type":3,"textContent":"Third item","id":94}],"id":93},{"type":3,"textContent":"\n              ","id":95},{"type":2,"tagName":"small","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Brief description","id":97}],"id":96},{"type":3,"textContent":"\n            ","id":98}],"id":91},{"type":3,"textContent":"\n            ","id":99},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"$5","id":101}],"id":100},{"type":3,"textContent":"\n          ","id":102}],"id":89},{"type":3,"textContent":"\n          ","id":103},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between bg-light"},"childNodes":[{"type":3,"textContent":"\n            ","id":105},{"type":2,"tagName":"div","attributes":{"class":"text-success"},"childNodes":[{"type":3,"textContent":"\n              ","id":107},{"type":2,"tagName":"h6","attributes":{"class":"my-0"},"childNodes":[{"type":3,"textContent":"Promo code","id":109}],"id":108},{"type":3,"textContent":"\n              ","id":110},{"type":2,"tagName":"small","attributes":{},"childNodes":[{"type":3,"textContent":"EXAMPLECODE","id":112}],"id":111},{"type":3,"textContent":"\n            ","id":113}],"id":106},{"type":3,"textContent":"\n            ","id":114},{"type":2,"tagName":"span","attributes":{"class":"text-success"},"childNodes":[{"type":3,"textContent":"-$5","id":116}],"id":115},{"type":3,"textContent":"\n          ","id":117}],"id":104},{"type":3,"textContent":"\n          ","id":118},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between"},"childNodes":[{"type":3,"textContent":"\n            ","id":120},{"type":2,"tagName":"span","attributes":{},"childNodes":[{"type":3,"textContent":"Total (USD)","id":122}],"id":121},{"type":3,"textContent":"\n            ","id":123},{"type":2,"tagName":"strong","attributes":{},"childNodes":[{"type":3,"textContent":"$20","id":125}],"id":124},{"type":3,"textContent":"\n          ","id":126}],"id":119},{"type":3,"textContent":"\n        ","id":127}],"id":57},{"type":3,"textContent":"\n\n        ","id":128},{"type":2,"tagName":"form","attributes":{"class":"card p-2"},"childNodes":[{"type":3,"textContent":"\n          ","id":130},{"type":2,"tagName":"div","attributes":{"class":"input-group"},"childNodes":[{"type":3,"textContent":"\n            ","id":132},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","placeholder":"Promo code"},"childNodes":[],"id":133},{"type":3,"textContent":"\n            ","id":134},{"type":2,"tagName":"div","attributes":{"class":"input-group-append"},"childNodes":[{"type":3,"textContent":"\n              ","id":136},{"type":2,"tagName":"button","attributes":{"type":"submit","class":"btn btn-secondary"},"childNodes":[{"type":3,"textContent":"Redeem","id":138}],"id":137},{"type":3,"textContent":"\n            ","id":139}],"id":135},{"type":3,"textContent":"\n          ","id":140}],"id":131},{"type":3,"textContent":"\n        ","id":141}],"id":129},{"type":3,"textContent":"\n      ","id":142}],"id":46},{"type":3,"textContent":"\n      ","id":143},{"type":2,"tagName":"div","attributes":{"class":"col-md-8 order-md-1"},"childNodes":[{"type":3,"textContent":"\n        ","id":145},{"type":2,"tagName":"h4","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"Billing address","id":147}],"id":146},{"type":3,"textContent":"\n        ","id":148},{"type":2,"tagName":"form","attributes":{"class":"needs-validation","novalidate":""},"childNodes":[{"type":3,"textContent":"\n          ","id":150},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n            ","id":152},{"type":2,"tagName":"div","attributes":{"class":"col-md-6 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":154},{"type":2,"tagName":"label","attributes":{"for":"firstName"},"childNodes":[{"type":3,"textContent":"First name","id":156}],"id":155},{"type":3,"textContent":"\n              ","id":157},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"firstName","placeholder":"","value":"","required":""},"childNodes":[],"id":158},{"type":3,"textContent":"\n              ","id":159},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Valid first name is required.\n              ","id":161}],"id":160},{"type":3,"textContent":"\n            ","id":162}],"id":153},{"type":3,"textContent":"\n            ","id":163},{"type":2,"tagName":"div","attributes":{"class":"col-md-6 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":165},{"type":2,"tagName":"label","attributes":{"for":"lastName"},"childNodes":[{"type":3,"textContent":"Last name","id":167}],"id":166},{"type":3,"textContent":"\n              ","id":168},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"lastName","placeholder":"","value":"","required":""},"childNodes":[],"id":169},{"type":3,"textContent":"\n              ","id":170},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Valid last name is required.\n              ","id":172}],"id":171},{"type":3,"textContent":"\n            ","id":173}],"id":164},{"type":3,"textContent":"\n          ","id":174}],"id":151},{"type":3,"textContent":"\n\n          ","id":175},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":177},{"type":2,"tagName":"label","attributes":{"for":"username"},"childNodes":[{"type":3,"textContent":"Username","id":179}],"id":178},{"type":3,"textContent":"\n            ","id":180},{"type":2,"tagName":"div","attributes":{"class":"input-group"},"childNodes":[{"type":3,"textContent":"\n              ","id":182},{"type":2,"tagName":"div","attributes":{"class":"input-group-prepend"},"childNodes":[{"type":3,"textContent":"\n                ","id":184},{"type":2,"tagName":"span","attributes":{"class":"input-group-text"},"childNodes":[{"type":3,"textContent":"@","id":186}],"id":185},{"type":3,"textContent":"\n              ","id":187}],"id":183},{"type":3,"textContent":"\n              ","id":188},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"username","placeholder":"Username","required":""},"childNodes":[],"id":189},{"type":3,"textContent":"\n              ","id":190},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback","style":"width: 100%;"},"childNodes":[{"type":3,"textContent":"\n                Your username is required.\n              ","id":192}],"id":191},{"type":3,"textContent":"\n            ","id":193}],"id":181},{"type":3,"textContent":"\n          ","id":194}],"id":176},{"type":3,"textContent":"\n\n          ","id":195},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":197},{"type":2,"tagName":"label","attributes":{"for":"email"},"childNodes":[{"type":3,"textContent":"Email ","id":199},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"(Optional)","id":201}],"id":200}],"id":198},{"type":3,"textContent":"\n            ","id":202},{"type":2,"tagName":"input","attributes":{"type":"email","class":"form-control","id":"email","placeholder":"you@example.com"},"childNodes":[],"id":203},{"type":3,"textContent":"\n            ","id":204},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n              Please enter a valid email address for shipping updates.\n            ","id":206}],"id":205},{"type":3,"textContent":"\n          ","id":207}],"id":196},{"type":3,"textContent":"\n\n          ","id":208},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":210},{"type":2,"tagName":"label","attributes":{"for":"address"},"childNodes":[{"type":3,"textContent":"Address","id":212}],"id":211},{"type":3,"textContent":"\n            ","id":213},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"address","placeholder":"1234 Main St","required":""},"childNodes":[],"id":214},{"type":3,"textContent":"\n            ","id":215},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n              Please enter your shipping address.\n            ","id":217}],"id":216},{"type":3,"textContent":"\n          ","id":218}],"id":209},{"type":3,"textContent":"\n\n          ","id":219},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":221},{"type":2,"tagName":"label","attributes":{"for":"address2"},"childNodes":[{"type":3,"textContent":"Address 2 ","id":223},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"(Optional)","id":225}],"id":224}],"id":222},{"type":3,"textContent":"\n            ","id":226},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"address2","placeholder":"Apartment or suite"},"childNodes":[],"id":227},{"type":3,"textContent":"\n          ","id":228}],"id":220},{"type":3,"textContent":"\n\n          ","id":229},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n            ","id":231},{"type":2,"tagName":"div","attributes":{"class":"col-md-5 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":233},{"type":2,"tagName":"label","attributes":{"for":"country"},"childNodes":[{"type":3,"textContent":"Country","id":235}],"id":234},{"type":3,"textContent":"\n              ","id":236},{"type":2,"tagName":"select","attributes":{"class":"custom-select d-block w-100","id":"country","required":""},"childNodes":[{"type":3,"textContent":"\n                ","id":238},{"type":2,"tagName":"option","attributes":{"value":"","selected":true},"childNodes":[{"type":3,"textContent":"Choose...","id":240}],"id":239},{"type":3,"textContent":"\n                ","id":241},{"type":2,"tagName":"option","attributes":{},"childNodes":[{"type":3,"textContent":"United States","id":243}],"id":242},{"type":3,"textContent":"\n              ","id":244}],"id":237},{"type":3,"textContent":"\n              ","id":245},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Please select a valid country.\n              ","id":247}],"id":246},{"type":3,"textContent":"\n            ","id":248}],"id":232},{"type":3,"textContent":"\n            ","id":249},{"type":2,"tagName":"div","attributes":{"class":"col-md-4 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":251},{"type":2,"tagName":"label","attributes":{"for":"state"},"childNodes":[{"type":3,"textContent":"State","id":253}],"id":252},{"type":3,"textContent":"\n              ","id":254},{"type":2,"tagName":"select","attributes":{"class":"custom-select d-block w-100","id":"state","required":""},"childNodes":[{"type":3,"textContent":"\n                ","id":256},{"type":2,"tagName":"option","attributes":{"value":"","selected":true},"childNodes":[{"type":3,"textContent":"Choose...","id":258}],"id":257},{"type":3,"textContent":"\n                ","id":259},{"type":2,"tagName":"option","attributes":{},"childNodes":[{"type":3,"textContent":"California","id":261}],"id":260},{"type":3,"textContent":"\n              ","id":262}],"id":255},{"type":3,"textContent":"\n              ","id":263},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Please provide a valid state.\n              ","id":265}],"id":264},{"type":3,"textContent":"\n            ","id":266}],"id":250},{"type":3,"textContent":"\n            ","id":267},{"type":2,"tagName":"div","attributes":{"class":"col-md-3 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":269},{"type":2,"tagName":"label","attributes":{"for":"zip"},"childNodes":[{"type":3,"textContent":"Zip","id":271}],"id":270},{"type":3,"textContent":"\n              ","id":272},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"zip","placeholder":"","required":""},"childNodes":[],"id":273},{"type":3,"textContent":"\n              ","id":274},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Zip code required.\n              ","id":276}],"id":275},{"type":3,"textContent":"\n            ","id":277}],"id":268},{"type":3,"textContent":"\n          ","id":278}],"id":230},{"type":3,"textContent":"\n          ","id":279},{"type":2,"tagName":"hr","attributes":{"class":"mb-4"},"childNodes":[],"id":280},{"type":3,"textContent":"\n          ","id":281},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-checkbox"},"childNodes":[{"type":3,"textContent":"\n            ","id":283},{"type":2,"tagName":"input","attributes":{"type":"checkbox","class":"custom-control-input","id":"same-address"},"childNodes":[],"id":284},{"type":3,"textContent":"\n            ","id":285},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"same-address"},"childNodes":[{"type":3,"textContent":"Shipping address is the same as my billing address","id":287}],"id":286},{"type":3,"textContent":"\n          ","id":288}],"id":282},{"type":3,"textContent":"\n          ","id":289},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-checkbox"},"childNodes":[{"type":3,"textContent":"\n            ","id":291},{"type":2,"tagName":"input","attributes":{"type":"checkbox","class":"custom-control-input","id":"save-info"},"childNodes":[],"id":292},{"type":3,"textContent":"\n            ","id":293},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"save-info"},"childNodes":[{"type":3,"textContent":"Save this information for next time","id":295}],"id":294},{"type":3,"textContent":"\n          ","id":296}],"id":290},{"type":3,"textContent":"\n          ","id":297},{"type":2,"tagName":"hr","attributes":{"class":"mb-4"},"childNodes":[],"id":298},{"type":3,"textContent":"\n\n          ","id":299},{"type":2,"tagName":"h4","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"Payment","id":301}],"id":300},{"type":3,"textContent":"\n\n          ","id":302},{"type":2,"tagName":"div","attributes":{"class":"d-block my-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":304},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-radio"},"childNodes":[{"type":3,"textContent":"\n              ","id":306},{"type":2,"tagName":"input","attributes":{"id":"credit","name":"paymentMethod","type":"radio","class":"custom-control-input","checked":true,"required":""},"childNodes":[],"id":307},{"type":3,"textContent":"\n              ","id":308},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"credit"},"childNodes":[{"type":3,"textContent":"Credit card","id":310}],"id":309},{"type":3,"textContent":"\n            ","id":311}],"id":305},{"type":3,"textContent":"\n            ","id":312},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-radio"},"childNodes":[{"type":3,"textContent":"\n              ","id":314},{"type":2,"tagName":"input","attributes":{"id":"debit","name":"paymentMethod","type":"radio","class":"custom-control-input","required":""},"childNodes":[],"id":315},{"type":3,"textContent":"\n              ","id":316},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"debit"},"childNodes":[{"type":3,"textContent":"Debit card","id":318}],"id":317},{"type":3,"textContent":"\n            ","id":319}],"id":313},{"type":3,"textContent":"\n            ","id":320},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-radio"},"childNodes":[{"type":3,"textContent":"\n              ","id":322},{"type":2,"tagName":"input","attributes":{"id":"paypal","name":"paymentMethod","type":"radio","class":"custom-control-input","required":""},"childNodes":[],"id":323},{"type":3,"textContent":"\n              ","id":324},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"paypal"},"childNodes":[{"type":3,"textContent":"PayPal","id":326}],"id":325},{"type":3,"textContent":"\n            ","id":327}],"id":321},{"type":3,"textContent":"\n          ","id":328}],"id":303},{"type":3,"textContent":"\n          ","id":329},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n            ","id":331},{"type":2,"tagName":"div","attributes":{"class":"col-md-6 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":333},{"type":2,"tagName":"label","attributes":{"for":"cc-name"},"childNodes":[{"type":3,"textContent":"Name on card","id":335}],"id":334},{"type":3,"textContent":"\n              ","id":336},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"cc-name","placeholder":"","required":""},"childNodes":[],"id":337},{"type":3,"textContent":"\n              ","id":338},{"type":2,"tagName":"small","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Full name as displayed on card","id":340}],"id":339},{"type":3,"textContent":"\n              ","id":341},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Name on card is required\n              ","id":343}],"id":342},{"type":3,"textContent":"\n            ","id":344}],"id":332},{"type":3,"textContent":"\n            ","id":345},{"type":2,"tagName":"div","attributes":{"class":"col-md-6 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":347},{"type":2,"tagName":"label","attributes":{"for":"cc-number"},"childNodes":[{"type":3,"textContent":"Credit card number","id":349}],"id":348},{"type":3,"textContent":"\n              ","id":350},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"cc-number","placeholder":"","required":""},"childNodes":[],"id":351},{"type":3,"textContent":"\n              ","id":352},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Credit card number is required\n              ","id":354}],"id":353},{"type":3,"textContent":"\n            ","id":355}],"id":346},{"type":3,"textContent":"\n          ","id":356}],"id":330},{"type":3,"textContent":"\n          ","id":357},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n            ","id":359},{"type":2,"tagName":"div","attributes":{"class":"col-md-3 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":361},{"type":2,"tagName":"label","attributes":{"for":"cc-expiration"},"childNodes":[{"type":3,"textContent":"Expiration","id":363}],"id":362},{"type":3,"textContent":"\n              ","id":364},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"cc-expiration","placeholder":"","required":""},"childNodes":[],"id":365},{"type":3,"textContent":"\n              ","id":366},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Expiration date required\n              ","id":368}],"id":367},{"type":3,"textContent":"\n            ","id":369}],"id":360},{"type":3,"textContent":"\n            ","id":370},{"type":2,"tagName":"div","attributes":{"class":"col-md-3 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":372},{"type":2,"tagName":"label","attributes":{"for":"cc-cvv"},"childNodes":[{"type":3,"textContent":"CVV","id":374}],"id":373},{"type":3,"textContent":"\n              ","id":375},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"cc-cvv","placeholder":"","required":""},"childNodes":[],"id":376},{"type":3,"textContent":"\n              ","id":377},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Security code required\n              ","id":379}],"id":378},{"type":3,"textContent":"\n            ","id":380}],"id":371},{"type":3,"textContent":"\n          ","id":381}],"id":358},{"type":3,"textContent":"\n          ","id":382},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":384},{"type":2,"tagName":"label","attributes":{"for":"email"},"childNodes":[{"type":3,"textContent":"textarea ","id":386},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"(Optional)","id":388}],"id":387}],"id":385},{"type":3,"textContent":"\n            ","id":389},{"type":2,"tagName":"textarea","attributes":{"name":"","id":"","cols":"30","rows":"10"},"childNodes":[],"id":390},{"type":3,"textContent":"\n          ","id":391}],"id":383},{"type":3,"textContent":"\n          ","id":392},{"type":2,"tagName":"hr","attributes":{"class":"mb-4"},"childNodes":[],"id":393},{"type":3,"textContent":"\n          ","id":394},{"type":2,"tagName":"button","attributes":{"class":"btn btn-primary btn-lg btn-block","type":"submit"},"childNodes":[{"type":3,"textContent":"Continue to checkout","id":396}],"id":395},{"type":3,"textContent":"\n        ","id":397}],"id":149},{"type":3,"textContent":"\n      ","id":398}],"id":144},{"type":3,"textContent":"\n    ","id":399}],"id":44},{"type":3,"textContent":"\n\n    ","id":400},{"type":2,"tagName":"footer","attributes":{"class":"my-5 pt-5 text-muted text-center text-small"},"childNodes":[{"type":3,"textContent":"\n      ","id":402},{"type":2,"tagName":"p","attributes":{"class":"mb-1"},"childNodes":[{"type":3,"textContent":"© 2017-2018 Company Name","id":404}],"id":403},{"type":3,"textContent":"\n      ","id":405},{"type":2,"tagName":"ul","attributes":{"class":"list-inline"},"childNodes":[{"type":3,"textContent":"\n        ","id":407},{"type":2,"tagName":"li","attributes":{"class":"list-inline-item"},"childNodes":[{"type":2,"tagName":"a","attributes":{"href":"https://getbootstrap.com/docs/4.1/examples/checkout/#"},"childNodes":[{"type":3,"textContent":"Privacy","id":410}],"id":409}],"id":408},{"type":3,"textContent":"\n        ","id":411},{"type":2,"tagName":"li","attributes":{"class":"list-inline-item"},"childNodes":[{"type":2,"tagName":"a","attributes":{"href":"https://getbootstrap.com/docs/4.1/examples/checkout/#"},"childNodes":[{"type":3,"textContent":"Terms","id":414}],"id":413}],"id":412},{"type":3,"textContent":"\n        ","id":415},{"type":2,"tagName":"li","attributes":{"class":"list-inline-item"},"childNodes":[{"type":2,"tagName":"a","attributes":{"href":"https://getbootstrap.com/docs/4.1/examples/checkout/#"},"childNodes":[{"type":3,"textContent":"Support","id":418}],"id":417}],"id":416},{"type":3,"textContent":"\n      ","id":419}],"id":406},{"type":3,"textContent":"\n    ","id":420}],"id":401},{"type":3,"textContent":"\n  ","id":421}],"id":31},{"type":3,"textContent":"\n\n  ","id":422},{"type":5,"textContent":" Bootstrap core JavaScript\n    ================================================== ","id":423},{"type":3,"textContent":"\n  ","id":424},{"type":5,"textContent":" Placed at the end of the document so the pages load faster ","id":425},{"type":3,"textContent":"\n  ","id":426},{"type":2,"tagName":"script","attributes":{"src":"http://localhost:5500/checkout-demo/index_files/jquery-3.3.1.slim.min.js","integrity":"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo","crossorigin":"anonymous"},"childNodes":[],"id":427},{"type":3,"textContent":"\n  ","id":428},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":430}],"id":429},{"type":3,"textContent":"\n  ","id":431},{"type":2,"tagName":"script","attributes":{"src":"http://localhost:5500/checkout-demo/index_files/popper.min.js"},"childNodes":[],"id":432},{"type":3,"textContent":"\n  ","id":433},{"type":2,"tagName":"script","attributes":{"src":"http://localhost:5500/checkout-demo/index_files/bootstrap.min.js"},"childNodes":[],"id":434},{"type":3,"textContent":"\n  ","id":435},{"type":2,"tagName":"script","attributes":{"src":"http://localhost:5500/checkout-demo/index_files/holder.min.js"},"childNodes":[],"id":436},{"type":3,"textContent":"\n  ","id":437},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":439}],"id":438},{"type":3,"textContent":"\n\n  ","id":440},{"type":5,"textContent":" logrocket ","id":441},{"type":3,"textContent":"\n\n  ","id":442},{"type":5,"textContent":" <script src=\"../reverse-engineer/LogRocket.js\"></script>\n  <script>\n    LogRocket.init('bqsqi3/serenity');\n  </script> ","id":443},{"type":3,"textContent":"\n\n  ","id":444},{"type":5,"textContent":" fundebug ","id":445},{"type":3,"textContent":"\n\n  ","id":446},{"type":5,"textContent":" <script src=\"https://js.fundebug.cn/fundebug.1.2.3.min.js\"\n  apikey=\"2e96393d0884f5ef28b95645008da9926cb6750dae6b2a4c7a2403fac4d889ab\" silentVideo=false></script>\n   ","id":447},{"type":3,"textContent":"\n\n  ","id":448},{"type":5,"textContent":" fullstory ","id":449},{"type":3,"textContent":"\n\n  ","id":450},{"type":5,"textContent":" <script>\n    window['_fs_debug'] = false;\n    window['_fs_host'] = 'fullstory.com';\n    window['_fs_org'] = 'EYQ69';\n    window['_fs_namespace'] = 'FS';\n    (function (m, n, e, t, l, o, g, y) {\n      if (e in m) { if (m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window[\"_fs_namespace\"].'); } return; }\n      g = m[e] = function (a, b) { g.q ? g.q.push([a, b]) : g._api(a, b); }; g.q = [];\n      o = n.createElement(t); o.async = 1; o.src = 'https://' + _fs_host + '/s/fs.js';\n      y = n.getElementsByTagName(t)[0]; y.parentNode.insertBefore(o, y);\n      g.identify = function (i, v) { g(l, { uid: i }); if (v) g(l, v) }; g.setUserVars = function (v) { g(l, v) }; g.event = function (i, v) { g('event', { n: i, p: v }) };\n      g.shutdown = function () { g(\"rec\", !1) }; g.restart = function () { g(\"rec\", !0) };\n      g.consent = function (a) { g(\"consent\", !arguments.length || a) };\n      g.identifyAccount = function (i, v) { o = 'account'; v = v || {}; v.acctId = i; g(o, v) };\n      g.clearUserCookie = function () { };\n    })(window, document, window['_fs_namespace'], 'script', 'user');\n  </script> ","id":451},{"type":3,"textContent":"\n\n  ","id":452},{"type":2,"tagName":"script","attributes":{"src":"http://localhost:5500/src/record.js"},"childNodes":[],"id":453},{"type":3,"textContent":"\n  ","id":454},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":456}],"id":455},{"type":3,"textContent":"\n\n","id":457},{"type":5,"textContent":" Code injected by live-server ","id":458},{"type":3,"textContent":"\n","id":459},{"type":2,"tagName":"script","attributes":{"type":"text/javascript"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":461}],"id":460},{"type":3,"textContent":"\n\n","id":462}],"id":29}],"id":4}],"id":1},"initialOffset":{"left":0,"top":0}},"timestamp":1539774745304},{"type":3,"data":{"source":1,"positions":[{"x":301,"y":156,"timeOffset":-1}]},"timestamp":1539774745307},{"type":3,"data":{"source":1,"positions":[{"x":297,"y":159,"timeOffset":-477},{"x":294,"y":160,"timeOffset":-427},{"x":291,"y":162,"timeOffset":-393},{"x":286,"y":166,"timeOffset":-359},{"x":281,"y":169,"timeOffset":-327},{"x":278,"y":172,"timeOffset":-294},{"x":278,"y":175,"timeOffset":-260},{"x":278,"y":179,"timeOffset":-227},{"x":277,"y":185,"timeOffset":-193},{"x":277,"y":192,"timeOffset":-160},{"x":277,"y":197,"timeOffset":-126},{"x":277,"y":199,"timeOffset":-93},{"x":277,"y":202,"timeOffset":-60}]},"timestamp":1539774745807},{"type":3,"data":{"source":1,"positions":[{"x":278,"y":204,"timeOffset":-361},{"x":278,"y":204,"timeOffset":-311},{"x":277,"y":206,"timeOffset":-228}]},"timestamp":1539774746308},{"type":3,"data":{"source":1,"positions":[{"x":277,"y":207,"timeOffset":0}]},"timestamp":1539774747114},{"type":3,"data":{"source":2,"type":1,"id":29,"x":279,"y":280},"timestamp":1539774747448},{"type":3,"data":{"source":2,"type":0,"id":29,"x":279,"y":280},"timestamp":1539774747576},{"type":3,"data":{"source":2,"type":2,"id":29,"x":279,"y":280},"timestamp":1539774747576},{"type":3,"data":{"source":1,"positions":[{"x":274,"y":212,"timeOffset":-466},{"x":273,"y":221,"timeOffset":-433},{"x":272,"y":233,"timeOffset":-400},{"x":272,"y":245,"timeOffset":-367},{"x":272,"y":255,"timeOffset":-334},{"x":276,"y":263,"timeOffset":-300},{"x":277,"y":270,"timeOffset":-266},{"x":279,"y":274,"timeOffset":-233},{"x":279,"y":278,"timeOffset":-184}]},"timestamp":1539774747614},{"type":3,"data":{"source":1,"positions":[{"x":279,"y":280,"timeOffset":0}]},"timestamp":1539774748546},{"type":3,"data":{"source":4,"width":1147,"height":711},"timestamp":1539774748563},{"type":3,"data":{"source":1,"positions":[{"x":279,"y":285,"timeOffset":0}]},"timestamp":1539774749479},{"type":3,"data":{"source":1,"positions":[{"x":270,"y":304,"timeOffset":-468},{"x":265,"y":326,"timeOffset":-435},{"x":264,"y":336,"timeOffset":-401},{"x":262,"y":348,"timeOffset":-368},{"x":263,"y":356,"timeOffset":-334},{"x":263,"y":367,"timeOffset":-301},{"x":263,"y":373,"timeOffset":-267},{"x":263,"y":379,"timeOffset":-234},{"x":263,"y":384,"timeOffset":-201},{"x":262,"y":388,"timeOffset":-167},{"x":262,"y":393,"timeOffset":-133},{"x":261,"y":402,"timeOffset":-101},{"x":261,"y":405,"timeOffset":-68},{"x":261,"y":408,"timeOffset":-18}]},"timestamp":1539774749980},{"type":3,"data":{"source":2,"type":1,"id":158,"x":261,"y":410},"timestamp":1539774750089},{"type":3,"data":{"source":2,"type":5,"id":158},"timestamp":1539774750094},{"type":3,"data":{"source":2,"type":0,"id":158,"x":261,"y":410},"timestamp":1539774750208},{"type":3,"data":{"source":2,"type":2,"id":158,"x":261,"y":410},"timestamp":1539774750208},{"type":3,"data":{"source":1,"positions":[{"x":261,"y":410,"timeOffset":-486}]},"timestamp":1539774750481},{"type":3,"data":{"source":5,"text":"y","isChecked":false,"id":158},"timestamp":1539774750928},{"type":3,"data":{"source":5,"text":"ya","isChecked":false,"id":158},"timestamp":1539774751039},{"type":3,"data":{"source":5,"text":"yan","isChecked":false,"id":158},"timestamp":1539774751151},{"type":3,"data":{"source":5,"text":"yanz","isChecked":false,"id":158},"timestamp":1539774751264},{"type":3,"data":{"source":5,"text":"yanzh","isChecked":false,"id":158},"timestamp":1539774751342},{"type":3,"data":{"source":5,"text":"yanzhe","isChecked":false,"id":158},"timestamp":1539774751449},{"type":3,"data":{"source":5,"text":"yanzhen","isChecked":false,"id":158},"timestamp":1539774751551},{"type":3,"data":{"source":1,"positions":[{"x":265,"y":411,"timeOffset":0}]},"timestamp":1539774752128},{"type":3,"data":{"source":1,"positions":[{"x":317,"y":392,"timeOffset":-466},{"x":337,"y":357,"timeOffset":-433},{"x":342,"y":336,"timeOffset":-399},{"x":367,"y":319,"timeOffset":-366},{"x":406,"y":323,"timeOffset":-333},{"x":409,"y":336,"timeOffset":-300},{"x":409,"y":352,"timeOffset":-266},{"x":411,"y":363,"timeOffset":-233},{"x":419,"y":367,"timeOffset":-200},{"x":424,"y":373,"timeOffset":-166},{"x":430,"y":381,"timeOffset":-133},{"x":438,"y":384,"timeOffset":-100},{"x":443,"y":385,"timeOffset":-67},{"x":449,"y":388,"timeOffset":-33},{"x":451,"y":389,"timeOffset":0}]},"timestamp":1539774752629},{"type":3,"data":{"source":2,"type":1,"id":169,"x":453,"y":393},"timestamp":1539774752826},{"type":3,"data":{"source":2,"type":6,"id":158},"timestamp":1539774752829},{"type":3,"data":{"source":2,"type":5,"id":169},"timestamp":1539774752830},{"type":3,"data":{"source":2,"type":0,"id":169,"x":454,"y":396},"timestamp":1539774752896},{"type":3,"data":{"source":2,"type":2,"id":169,"x":454,"y":396},"timestamp":1539774752896},{"type":3,"data":{"source":1,"positions":[{"x":453,"y":391,"timeOffset":-466},{"x":453,"y":393,"timeOffset":-400},{"x":453,"y":393,"timeOffset":-367},{"x":453,"y":394,"timeOffset":-249},{"x":458,"y":397,"timeOffset":-215},{"x":468,"y":401,"timeOffset":-183}]},"timestamp":1539774753128},{"type":3,"data":{"source":5,"text":"y","isChecked":false,"id":169},"timestamp":1539774753790},{"type":3,"data":{"source":5,"text":"yu","isChecked":false,"id":169},"timestamp":1539774753836},{"type":3,"data":{"source":1,"positions":[{"x":465,"y":400,"timeOffset":0}]},"timestamp":1539774754611},{"type":3,"data":{"source":1,"positions":[{"x":447,"y":397,"timeOffset":-466},{"x":433,"y":394,"timeOffset":-433},{"x":373,"y":421,"timeOffset":-400},{"x":334,"y":442,"timeOffset":-367},{"x":322,"y":446,"timeOffset":-317},{"x":319,"y":450,"timeOffset":-266},{"x":308,"y":470,"timeOffset":-233},{"x":301,"y":481,"timeOffset":-200},{"x":300,"y":483,"timeOffset":-134},{"x":295,"y":490,"timeOffset":-100},{"x":293,"y":492,"timeOffset":-67}]},"timestamp":1539774755111},{"type":3,"data":{"source":2,"type":1,"id":189,"x":293,"y":492},"timestamp":1539774755137},{"type":3,"data":{"source":2,"type":6,"id":169},"timestamp":1539774755146},{"type":3,"data":{"source":2,"type":5,"id":189},"timestamp":1539774755147},{"type":3,"data":{"source":2,"type":0,"id":189,"x":293,"y":492},"timestamp":1539774755223},{"type":3,"data":{"source":2,"type":2,"id":189,"x":293,"y":492},"timestamp":1539774755223},{"type":3,"data":{"source":5,"text":"a","isChecked":false,"id":189},"timestamp":1539774755812},{"type":3,"data":{"source":5,"text":"ad","isChecked":false,"id":189},"timestamp":1539774755915},{"type":3,"data":{"source":5,"text":"adm","isChecked":false,"id":189},"timestamp":1539774756048},{"type":3,"data":{"source":5,"text":"admi","isChecked":false,"id":189},"timestamp":1539774756090},{"type":3,"data":{"source":5,"text":"admin","isChecked":false,"id":189},"timestamp":1539774756241},{"type":3,"data":{"source":1,"positions":[{"x":311,"y":510,"timeOffset":0}]},"timestamp":1539774756827},{"type":3,"data":{"source":3,"id":1,"x":0,"y":1},"timestamp":1539774757177},{"type":3,"data":{"source":3,"id":1,"x":0,"y":90},"timestamp":1539774757278},{"type":3,"data":{"source":1,"positions":[{"x":449,"y":606,"timeOffset":-468},{"x":515,"y":642,"timeOffset":-435},{"x":514,"y":627,"timeOffset":-369},{"x":410,"y":510,"timeOffset":-336},{"x":401,"y":498,"timeOffset":-269},{"x":398,"y":502,"timeOffset":-219},{"x":388,"y":506,"timeOffset":-186},{"x":385,"y":506,"timeOffset":-119},{"x":384,"y":506,"timeOffset":-68},{"x":380,"y":507,"timeOffset":-18}]},"timestamp":1539774757329},{"type":3,"data":{"source":3,"id":1,"x":0,"y":212},"timestamp":1539774757378},{"type":3,"data":{"source":1,"positions":[{"x":378,"y":506,"timeOffset":-486},{"x":373,"y":498,"timeOffset":-452},{"x":368,"y":488,"timeOffset":-420},{"x":353,"y":476,"timeOffset":-387},{"x":329,"y":458,"timeOffset":-353},{"x":320,"y":433,"timeOffset":-320},{"x":312,"y":395,"timeOffset":-287},{"x":303,"y":379,"timeOffset":-254},{"x":297,"y":369,"timeOffset":-221},{"x":294,"y":364,"timeOffset":-187}]},"timestamp":1539774757830},{"type":3,"data":{"source":2,"type":1,"id":203,"x":293,"y":363},"timestamp":1539774757849},{"type":3,"data":{"source":2,"type":6,"id":189},"timestamp":1539774757853},{"type":3,"data":{"source":2,"type":5,"id":203},"timestamp":1539774757855},{"type":3,"data":{"source":2,"type":0,"id":203,"x":293,"y":363},"timestamp":1539774757972},{"type":3,"data":{"source":2,"type":2,"id":203,"x":293,"y":363},"timestamp":1539774757972},{"type":3,"data":{"source":5,"text":"y","isChecked":false,"id":203},"timestamp":1539774758877},{"type":3,"data":{"source":5,"text":"ya","isChecked":false,"id":203},"timestamp":1539774758966},{"type":3,"data":{"source":5,"text":"yan","isChecked":false,"id":203},"timestamp":1539774759091},{"type":3,"data":{"source":5,"text":"yanz","isChecked":false,"id":203},"timestamp":1539774759222},{"type":3,"data":{"source":5,"text":"yanzh","isChecked":false,"id":203},"timestamp":1539774759318},{"type":3,"data":{"source":5,"text":"yanzhe","isChecked":false,"id":203},"timestamp":1539774759412},{"type":3,"data":{"source":5,"text":"yanzhen","isChecked":false,"id":203},"timestamp":1539774759522},{"type":3,"data":{"source":5,"text":"yanzhen@","isChecked":false,"id":203},"timestamp":1539774760043},{"type":3,"data":{"source":5,"text":"yanzhen@smartx.com","isChecked":false,"id":203},"timestamp":1539774760767},{"type":3,"data":{"source":1,"positions":[{"x":315,"y":364,"timeOffset":0}]},"timestamp":1539774761476},{"type":3,"data":{"source":1,"positions":[{"x":346,"y":366,"timeOffset":-469},{"x":342,"y":391,"timeOffset":-434},{"x":323,"y":422,"timeOffset":-401},{"x":318,"y":435,"timeOffset":-369},{"x":312,"y":443,"timeOffset":-336},{"x":308,"y":445,"timeOffset":-301},{"x":304,"y":448,"timeOffset":-252},{"x":302,"y":449,"timeOffset":-118},{"x":300,"y":451,"timeOffset":-85},{"x":300,"y":452,"timeOffset":-19}]},"timestamp":1539774761977},{"type":3,"data":{"source":2,"type":1,"id":214,"x":300,"y":452},"timestamp":1539774762010},{"type":3,"data":{"source":2,"type":6,"id":203},"timestamp":1539774762011},{"type":3,"data":{"source":2,"type":5,"id":214},"timestamp":1539774762012},{"type":3,"data":{"source":2,"type":0,"id":214,"x":300,"y":452},"timestamp":1539774762129},{"type":3,"data":{"source":2,"type":2,"id":214,"x":300,"y":452},"timestamp":1539774762129},{"type":3,"data":{"source":1,"positions":[{"x":300,"y":451,"timeOffset":0}]},"timestamp":1539774762509},{"type":3,"data":{"source":1,"positions":[{"x":302,"y":445,"timeOffset":-470},{"x":298,"y":445,"timeOffset":-369},{"x":291,"y":459,"timeOffset":-336},{"x":280,"y":514,"timeOffset":-269},{"x":280,"y":566,"timeOffset":-236},{"x":271,"y":572,"timeOffset":-170},{"x":221,"y":516,"timeOffset":-140},{"x":147,"y":458,"timeOffset":-103},{"x":145,"y":455,"timeOffset":-70},{"x":145,"y":452,"timeOffset":-37}]},"timestamp":1539774763011},{"type":3,"data":{"source":1,"positions":[{"x":146,"y":451,"timeOffset":-487},{"x":146,"y":451,"timeOffset":-404},{"x":147,"y":463,"timeOffset":-371},{"x":148,"y":473,"timeOffset":-338}]},"timestamp":1539774763512},{"type":3,"data":{"source":5,"text":"beijing","isChecked":false,"id":214},"timestamp":1539774763528},{"type":3,"data":{"source":1,"positions":[{"x":147,"y":490,"timeOffset":-470},{"x":147,"y":491,"timeOffset":-339},{"x":148,"y":499,"timeOffset":-305},{"x":149,"y":515,"timeOffset":-272},{"x":149,"y":527,"timeOffset":-238},{"x":149,"y":529,"timeOffset":-205},{"x":149,"y":532,"timeOffset":-173},{"x":149,"y":533,"timeOffset":-89},{"x":149,"y":535,"timeOffset":-55},{"x":149,"y":539,"timeOffset":-22}]},"timestamp":1539774764013},{"type":3,"data":{"source":2,"type":1,"id":227,"x":148,"y":544},"timestamp":1539774764073},{"type":3,"data":{"source":2,"type":6,"id":214},"timestamp":1539774764076},{"type":3,"data":{"source":2,"type":5,"id":227},"timestamp":1539774764078},{"type":3,"data":{"source":2,"type":0,"id":227,"x":148,"y":544},"timestamp":1539774764200},{"type":3,"data":{"source":2,"type":2,"id":227,"x":148,"y":544},"timestamp":1539774764200},{"type":3,"data":{"source":1,"positions":[{"x":148,"y":542,"timeOffset":-490},{"x":148,"y":544,"timeOffset":-441},{"x":149,"y":544,"timeOffset":-240},{"x":154,"y":542,"timeOffset":-206},{"x":161,"y":538,"timeOffset":-174},{"x":163,"y":535,"timeOffset":-123}]},"timestamp":1539774764514},{"type":3,"data":{"source":5,"text":"s","isChecked":false,"id":227},"timestamp":1539774765407},{"type":3,"data":{"source":5,"text":"sh","isChecked":false,"id":227},"timestamp":1539774765506},{"type":3,"data":{"source":5,"text":"she","isChecked":false,"id":227},"timestamp":1539774765628},{"type":3,"data":{"source":5,"text":"shen","isChecked":false,"id":227},"timestamp":1539774765722},{"type":3,"data":{"source":5,"text":"shenz","isChecked":false,"id":227},"timestamp":1539774765850},{"type":3,"data":{"source":5,"text":"shenzh","isChecked":false,"id":227},"timestamp":1539774765924},{"type":3,"data":{"source":5,"text":"shenzhn","isChecked":false,"id":227},"timestamp":1539774766130},{"type":3,"data":{"source":5,"text":"shenzh","isChecked":false,"id":227},"timestamp":1539774766706},{"type":3,"data":{"source":5,"text":"shenzhe","isChecked":false,"id":227},"timestamp":1539774766873},{"type":3,"data":{"source":5,"text":"shenzhen","isChecked":false,"id":227},"timestamp":1539774766960},{"type":3,"data":{"source":1,"positions":[{"x":166,"y":532,"timeOffset":0}]},"timestamp":1539774767574},{"type":3,"data":{"source":1,"positions":[{"x":179,"y":526,"timeOffset":-467},{"x":178,"y":526,"timeOffset":-385},{"x":159,"y":531,"timeOffset":-351},{"x":144,"y":537,"timeOffset":-318},{"x":128,"y":539,"timeOffset":-284},{"x":77,"y":546,"timeOffset":-251},{"x":30,"y":555,"timeOffset":-218},{"x":29,"y":556,"timeOffset":-101},{"x":59,"y":552,"timeOffset":-67},{"x":74,"y":549,"timeOffset":-35}]},"timestamp":1539774768074},{"type":3,"data":{"source":2,"type":1,"id":29,"x":74,"y":549},"timestamp":1539774768088},{"type":3,"data":{"source":2,"type":6,"id":227},"timestamp":1539774768091},{"type":3,"data":{"source":2,"type":0,"id":29,"x":74,"y":549},"timestamp":1539774768159},{"type":3,"data":{"source":2,"type":2,"id":29,"x":74,"y":549},"timestamp":1539774768159},{"type":3,"data":{"source":3,"id":1,"x":0,"y":213},"timestamp":1539774768356},{"type":3,"data":{"source":3,"id":1,"x":0,"y":286},"timestamp":1539774768457},{"type":3,"data":{"source":3,"id":1,"x":0,"y":421},"timestamp":1539774768557},{"type":3,"data":{"source":1,"positions":[{"x":75,"y":549,"timeOffset":-273},{"x":78,"y":549,"timeOffset":-171},{"x":85,"y":546,"timeOffset":-137},{"x":96,"y":544,"timeOffset":-105},{"x":116,"y":543,"timeOffset":-71},{"x":135,"y":537,"timeOffset":-38},{"x":155,"y":530,"timeOffset":0}]},"timestamp":1539774768578},{"type":3,"data":{"source":3,"id":1,"x":0,"y":424},"timestamp":1539774768657},{"type":3,"data":{"source":1,"positions":[{"x":210,"y":507,"timeOffset":-472},{"x":278,"y":478,"timeOffset":-439},{"x":321,"y":459,"timeOffset":-406},{"x":347,"y":440,"timeOffset":-372},{"x":367,"y":416,"timeOffset":-339},{"x":378,"y":407,"timeOffset":-305},{"x":384,"y":400,"timeOffset":-272},{"x":386,"y":397,"timeOffset":-239},{"x":386,"y":396,"timeOffset":-189},{"x":385,"y":395,"timeOffset":-155},{"x":369,"y":401,"timeOffset":-122},{"x":341,"y":415,"timeOffset":-89},{"x":326,"y":419,"timeOffset":-55}]},"timestamp":1539774769078},{"type":3,"data":{"source":2,"type":1,"id":237,"x":319,"y":422},"timestamp":1539774769208},{"type":3,"data":{"source":2,"type":5,"id":237},"timestamp":1539774769210},{"type":3,"data":{"source":1,"positions":[{"x":322,"y":420,"timeOffset":-489}]},"timestamp":1539774769578},{"type":3,"data":{"source":5,"text":"United States","isChecked":false,"id":237},"timestamp":1539774769903},{"type":3,"data":{"source":2,"type":0,"id":237,"x":0,"y":0},"timestamp":1539774769903},{"type":3,"data":{"source":2,"type":2,"id":237,"x":0,"y":0},"timestamp":1539774769903},{"type":3,"data":{"source":1,"positions":[{"x":303,"y":458,"timeOffset":-158},{"x":307,"y":457,"timeOffset":-124},{"x":326,"y":450,"timeOffset":-90},{"x":356,"y":437,"timeOffset":-57},{"x":393,"y":425,"timeOffset":-24}]},"timestamp":1539774770080},{"type":3,"data":{"source":2,"type":1,"id":255,"x":451,"y":413},"timestamp":1539774770264},{"type":3,"data":{"source":2,"type":6,"id":237},"timestamp":1539774770265},{"type":3,"data":{"source":2,"type":5,"id":255},"timestamp":1539774770267},{"type":3,"data":{"source":1,"positions":[{"x":415,"y":423,"timeOffset":-492},{"x":424,"y":420,"timeOffset":-458},{"x":436,"y":418,"timeOffset":-425},{"x":447,"y":414,"timeOffset":-391}]},"timestamp":1539774770580},{"type":3,"data":{"source":5,"text":"California","isChecked":false,"id":255},"timestamp":1539774770855},{"type":3,"data":{"source":2,"type":0,"id":255,"x":0,"y":0},"timestamp":1539774770855},{"type":3,"data":{"source":2,"type":2,"id":255,"x":0,"y":0},"timestamp":1539774770855},{"type":3,"data":{"source":1,"positions":[{"x":444,"y":466,"timeOffset":-206},{"x":447,"y":466,"timeOffset":-175},{"x":462,"y":463,"timeOffset":-142},{"x":490,"y":460,"timeOffset":-109},{"x":517,"y":455,"timeOffset":-75},{"x":544,"y":449,"timeOffset":-41},{"x":564,"y":442,"timeOffset":-8}]},"timestamp":1539774771080},{"type":3,"data":{"source":2,"type":1,"id":273,"x":623,"y":417},"timestamp":1539774771320},{"type":3,"data":{"source":2,"type":6,"id":255},"timestamp":1539774771321},{"type":3,"data":{"source":2,"type":5,"id":273},"timestamp":1539774771324},{"type":3,"data":{"source":2,"type":0,"id":273,"x":623,"y":417},"timestamp":1539774771432},{"type":3,"data":{"source":2,"type":2,"id":273,"x":623,"y":417},"timestamp":1539774771432},{"type":3,"data":{"source":1,"positions":[{"x":585,"y":433,"timeOffset":-475},{"x":603,"y":426,"timeOffset":-441},{"x":613,"y":423,"timeOffset":-408},{"x":619,"y":420,"timeOffset":-374},{"x":623,"y":417,"timeOffset":-341}]},"timestamp":1539774771580},{"type":3,"data":{"source":1,"positions":[{"x":627,"y":415,"timeOffset":-458}]},"timestamp":1539774772080},{"type":3,"data":{"source":5,"text":"1","isChecked":false,"id":273},"timestamp":1539774772151},{"type":3,"data":{"source":5,"text":"10","isChecked":false,"id":273},"timestamp":1539774772349},{"type":3,"data":{"source":5,"text":"100","isChecked":false,"id":273},"timestamp":1539774772521},{"type":3,"data":{"source":5,"text":"1000","isChecked":false,"id":273},"timestamp":1539774773008},{"type":3,"data":{"source":5,"text":"10000","isChecked":false,"id":273},"timestamp":1539774773176},{"type":3,"data":{"source":5,"text":"100000","isChecked":false,"id":273},"timestamp":1539774773539},{"type":3,"data":{"source":1,"positions":[{"x":627,"y":415,"timeOffset":0}]},"timestamp":1539774774170},{"type":3,"data":{"source":2,"type":1,"id":286,"x":320,"y":508},"timestamp":1539774774582},{"type":3,"data":{"source":2,"type":6,"id":273},"timestamp":1539774774584},{"type":3,"data":{"source":2,"type":0,"id":286,"x":320,"y":508},"timestamp":1539774774654},{"type":3,"data":{"source":2,"type":2,"id":286,"x":320,"y":508},"timestamp":1539774774654},{"type":3,"data":{"source":2,"type":5,"id":284},"timestamp":1539774774657},{"type":3,"data":{"source":2,"type":2,"id":284,"x":320,"y":508},"timestamp":1539774774657},{"type":3,"data":{"source":5,"text":"on","isChecked":true,"id":284},"timestamp":1539774774657},{"type":3,"data":{"source":1,"positions":[{"x":617,"y":385,"timeOffset":-464},{"x":552,"y":369,"timeOffset":-432},{"x":473,"y":409,"timeOffset":-398},{"x":414,"y":457,"timeOffset":-365},{"x":392,"y":490,"timeOffset":-331},{"x":385,"y":498,"timeOffset":-299},{"x":362,"y":502,"timeOffset":-265},{"x":332,"y":507,"timeOffset":-232},{"x":320,"y":508,"timeOffset":-199}]},"timestamp":1539774774670},{"type":3,"data":{"source":1,"positions":[{"x":318,"y":509,"timeOffset":-131},{"x":310,"y":511,"timeOffset":-98},{"x":299,"y":518,"timeOffset":-65},{"x":291,"y":523,"timeOffset":-32}]},"timestamp":1539774775169},{"type":3,"data":{"source":2,"type":1,"id":294,"x":286,"y":527},"timestamp":1539774775272},{"type":3,"data":{"source":2,"type":6,"id":284},"timestamp":1539774775273},{"type":3,"data":{"source":2,"type":0,"id":294,"x":286,"y":527},"timestamp":1539774775359},{"type":3,"data":{"source":2,"type":2,"id":294,"x":286,"y":527},"timestamp":1539774775359},{"type":3,"data":{"source":2,"type":5,"id":292},"timestamp":1539774775379},{"type":3,"data":{"source":2,"type":2,"id":292,"x":286,"y":527},"timestamp":1539774775379},{"type":3,"data":{"source":5,"text":"on","isChecked":true,"id":292},"timestamp":1539774775380},{"type":3,"data":{"source":3,"id":1,"x":0,"y":425},"timestamp":1539774775638},{"type":3,"data":{"source":1,"positions":[{"x":287,"y":526,"timeOffset":-499},{"x":282,"y":529,"timeOffset":-213},{"x":273,"y":540,"timeOffset":-181},{"x":269,"y":547,"timeOffset":-148},{"x":269,"y":549,"timeOffset":-99},{"x":269,"y":553,"timeOffset":-66},{"x":269,"y":555,"timeOffset":-31}]},"timestamp":1539774775669},{"type":3,"data":{"source":3,"id":1,"x":0,"y":499},"timestamp":1539774775738},{"type":3,"data":{"source":3,"id":1,"x":0,"y":652},"timestamp":1539774775838},{"type":3,"data":{"source":3,"id":1,"x":0,"y":689},"timestamp":1539774775938},{"type":3,"data":{"source":1,"positions":[{"x":267,"y":556,"timeOffset":-449},{"x":265,"y":556,"timeOffset":-416},{"x":259,"y":559,"timeOffset":-382},{"x":244,"y":559,"timeOffset":-349},{"x":225,"y":559,"timeOffset":-316},{"x":219,"y":559,"timeOffset":-282},{"x":217,"y":559,"timeOffset":-233},{"x":212,"y":552,"timeOffset":-199},{"x":203,"y":540,"timeOffset":-167},{"x":194,"y":525,"timeOffset":-134},{"x":187,"y":501,"timeOffset":-101},{"x":181,"y":469,"timeOffset":-67},{"x":177,"y":452,"timeOffset":-34}]},"timestamp":1539774776170},{"type":3,"data":{"source":2,"type":1,"id":325,"x":168,"y":419},"timestamp":1539774776495},{"type":3,"data":{"source":2,"type":6,"id":292},"timestamp":1539774776497},{"type":3,"data":{"source":2,"type":0,"id":325,"x":168,"y":419},"timestamp":1539774776590},{"type":3,"data":{"source":2,"type":2,"id":325,"x":168,"y":419},"timestamp":1539774776590},{"type":3,"data":{"source":2,"type":5,"id":323},"timestamp":1539774776594},{"type":3,"data":{"source":2,"type":2,"id":323,"x":168,"y":419},"timestamp":1539774776595},{"type":3,"data":{"source":5,"text":"on","isChecked":true,"id":323},"timestamp":1539774776596},{"type":3,"data":{"source":5,"text":"on","isChecked":false,"id":307},"timestamp":1539774776596},{"type":3,"data":{"source":5,"text":"on","isChecked":false,"id":315},"timestamp":1539774776596},{"type":3,"data":{"source":1,"positions":[{"x":176,"y":449,"timeOffset":-483},{"x":176,"y":447,"timeOffset":-450},{"x":176,"y":441,"timeOffset":-417},{"x":176,"y":430,"timeOffset":-384},{"x":173,"y":425,"timeOffset":-351},{"x":172,"y":424,"timeOffset":-317},{"x":170,"y":422,"timeOffset":-284},{"x":168,"y":419,"timeOffset":-234},{"x":167,"y":418,"timeOffset":-48},{"x":167,"y":408,"timeOffset":-16}]},"timestamp":1539774776670},{"type":3,"data":{"source":2,"type":1,"id":317,"x":166,"y":388},"timestamp":1539774776816},{"type":3,"data":{"source":2,"type":6,"id":323},"timestamp":1539774776818},{"type":3,"data":{"source":2,"type":0,"id":317,"x":166,"y":388},"timestamp":1539774776904},{"type":3,"data":{"source":2,"type":2,"id":317,"x":166,"y":388},"timestamp":1539774776905},{"type":3,"data":{"source":2,"type":5,"id":315},"timestamp":1539774776908},{"type":3,"data":{"source":2,"type":2,"id":315,"x":166,"y":388},"timestamp":1539774776908},{"type":3,"data":{"source":5,"text":"on","isChecked":true,"id":315},"timestamp":1539774776910},{"type":3,"data":{"source":5,"text":"on","isChecked":false,"id":323},"timestamp":1539774776910},{"type":3,"data":{"source":1,"positions":[{"x":167,"y":395,"timeOffset":-483},{"x":166,"y":389,"timeOffset":-450},{"x":168,"y":387,"timeOffset":-183},{"x":179,"y":390,"timeOffset":-151},{"x":208,"y":400,"timeOffset":-116},{"x":236,"y":403,"timeOffset":-84},{"x":267,"y":406,"timeOffset":-52},{"x":284,"y":408,"timeOffset":-19}]},"timestamp":1539774777171},{"type":3,"data":{"source":3,"id":1,"x":0,"y":690},"timestamp":1539774777237},{"type":3,"data":{"source":3,"id":1,"x":0,"y":733},"timestamp":1539774777338},{"type":3,"data":{"source":3,"id":1,"x":0,"y":793},"timestamp":1539774777438},{"type":3,"data":{"source":3,"id":1,"x":0,"y":795},"timestamp":1539774777539},{"type":3,"data":{"source":1,"positions":[{"x":287,"y":408,"timeOffset":-485},{"x":289,"y":409,"timeOffset":-434},{"x":289,"y":413,"timeOffset":-400},{"x":289,"y":416,"timeOffset":-351},{"x":288,"y":417,"timeOffset":-318},{"x":288,"y":417,"timeOffset":-284},{"x":287,"y":418,"timeOffset":-201},{"x":286,"y":418,"timeOffset":-169}]},"timestamp":1539774777671},{"type":3,"data":{"source":3,"id":1,"x":0,"y":796},"timestamp":1539774777869},{"type":3,"data":{"source":3,"id":1,"x":0,"y":836},"timestamp":1539774777970},{"type":3,"data":{"source":3,"id":1,"x":0,"y":972},"timestamp":1539774778071},{"type":3,"data":{"source":1,"positions":[{"x":287,"y":422,"timeOffset":-385},{"x":299,"y":438,"timeOffset":-351},{"x":312,"y":456,"timeOffset":-318},{"x":318,"y":465,"timeOffset":-285},{"x":320,"y":466,"timeOffset":-218},{"x":321,"y":466,"timeOffset":-184}]},"timestamp":1539774778171},{"type":3,"data":{"source":3,"id":1,"x":0,"y":1007},"timestamp":1539774778171},{"type":3,"data":{"source":2,"type":1,"id":390,"x":322,"y":467},"timestamp":1539774778312},{"type":3,"data":{"source":2,"type":6,"id":315},"timestamp":1539774778313},{"type":3,"data":{"source":2,"type":5,"id":390},"timestamp":1539774778315},{"type":3,"data":{"source":2,"type":0,"id":390,"x":322,"y":467},"timestamp":1539774778423},{"type":3,"data":{"source":2,"type":2,"id":390,"x":322,"y":467},"timestamp":1539774778423},{"type":3,"data":{"source":1,"positions":[{"x":322,"y":467,"timeOffset":-486},{"x":324,"y":464,"timeOffset":-136},{"x":331,"y":448,"timeOffset":-103}]},"timestamp":1539774778672},{"type":3,"data":{"source":5,"text":"h","isChecked":false,"id":390},"timestamp":1539774779696},{"type":3,"data":{"source":5,"text":"he","isChecked":false,"id":390},"timestamp":1539774779875},{"type":3,"data":{"source":5,"text":"hel","isChecked":false,"id":390},"timestamp":1539774780010},{"type":3,"data":{"source":5,"text":"hell","isChecked":false,"id":390},"timestamp":1539774780179},{"type":3,"data":{"source":5,"text":"hello","isChecked":false,"id":390},"timestamp":1539774780363},{"type":3,"data":{"source":5,"text":"hello ","isChecked":false,"id":390},"timestamp":1539774780501},{"type":3,"data":{"source":5,"text":"hello w","isChecked":false,"id":390},"timestamp":1539774780690},{"type":3,"data":{"source":5,"text":"hello wo","isChecked":false,"id":390},"timestamp":1539774780810},{"type":3,"data":{"source":5,"text":"hello wor","isChecked":false,"id":390},"timestamp":1539774780914},{"type":3,"data":{"source":5,"text":"hello worl","isChecked":false,"id":390},"timestamp":1539774781245},{"type":3,"data":{"source":5,"text":"hello world","isChecked":false,"id":390},"timestamp":1539774781381},{"type":3,"data":{"source":1,"positions":[{"x":332,"y":448,"timeOffset":0}]},"timestamp":1539774781919},{"type":3,"data":{"source":1,"positions":[{"x":333,"y":457,"timeOffset":-400},{"x":397,"y":511,"timeOffset":-368},{"x":533,"y":567,"timeOffset":-334},{"x":577,"y":603,"timeOffset":-300},{"x":581,"y":605,"timeOffset":-134},{"x":581,"y":599,"timeOffset":-100},{"x":566,"y":592,"timeOffset":-68},{"x":554,"y":586,"timeOffset":-34}]},"timestamp":1539774782419},{"type":3,"data":{"source":1,"positions":[{"x":552,"y":583,"timeOffset":-450},{"x":548,"y":578,"timeOffset":-418},{"x":547,"y":577,"timeOffset":-334},{"x":545,"y":575,"timeOffset":-301},{"x":542,"y":572,"timeOffset":-267},{"x":540,"y":572,"timeOffset":-234},{"x":539,"y":572,"timeOffset":-167},{"x":537,"y":571,"timeOffset":-134},{"x":536,"y":571,"timeOffset":-84},{"x":535,"y":571,"timeOffset":-51},{"x":531,"y":570,"timeOffset":-16}]},"timestamp":1539774782919},{"type":3,"data":{"source":1,"positions":[{"x":530,"y":569,"timeOffset":-483},{"x":528,"y":567,"timeOffset":-233},{"x":527,"y":567,"timeOffset":-201}]},"timestamp":1539774783419},{"type":3,"data":{"source":2,"type":1,"id":390,"x":526,"y":567},"timestamp":1539774783464},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 245px;"}}],"removes":[],"adds":[]},"timestamp":1539774783550},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 244px;"}}],"removes":[],"adds":[]},"timestamp":1539774783567},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 240px;"}}],"removes":[],"adds":[]},"timestamp":1539774783586},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 234px;"}}],"removes":[],"adds":[]},"timestamp":1539774783603},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 228px;"}}],"removes":[],"adds":[]},"timestamp":1539774783618},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 220px;"}}],"removes":[],"adds":[]},"timestamp":1539774783636},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 214px;"}}],"removes":[],"adds":[]},"timestamp":1539774783653},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 206px;"}}],"removes":[],"adds":[]},"timestamp":1539774783669},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 193px;"}}],"removes":[],"adds":[]},"timestamp":1539774783686},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 181px;"}}],"removes":[],"adds":[]},"timestamp":1539774783703},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 170px;"}}],"removes":[],"adds":[]},"timestamp":1539774783719},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 158px;"}}],"removes":[],"adds":[]},"timestamp":1539774783737},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 153px;"}}],"removes":[],"adds":[]},"timestamp":1539774783752},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 151px;"}}],"removes":[],"adds":[]},"timestamp":1539774783770},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 148px;"}}],"removes":[],"adds":[]},"timestamp":1539774783786},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 147px;"}}],"removes":[],"adds":[]},"timestamp":1539774783803},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 146px;"}}],"removes":[],"adds":[]},"timestamp":1539774783868},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 145px;"}}],"removes":[],"adds":[]},"timestamp":1539774783885},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 142px;"}}],"removes":[],"adds":[]},"timestamp":1539774783902},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 138px;"}}],"removes":[],"adds":[]},"timestamp":1539774783919},{"type":3,"data":{"source":1,"positions":[{"x":525,"y":566,"timeOffset":-374},{"x":526,"y":561,"timeOffset":-338},{"x":529,"y":549,"timeOffset":-306},{"x":529,"y":535,"timeOffset":-272},{"x":529,"y":514,"timeOffset":-238},{"x":529,"y":491,"timeOffset":-206},{"x":526,"y":474,"timeOffset":-172},{"x":525,"y":469,"timeOffset":-138},{"x":523,"y":467,"timeOffset":-56},{"x":523,"y":463,"timeOffset":-22}]},"timestamp":1539774783924},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 132px;"}}],"removes":[],"adds":[]},"timestamp":1539774783937},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 126px;"}}],"removes":[],"adds":[]},"timestamp":1539774783952},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 123px;"}}],"removes":[],"adds":[]},"timestamp":1539774783969},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 121px;"}}],"removes":[],"adds":[]},"timestamp":1539774783986},{"type":3,"data":{"source":2,"type":0,"id":390,"x":521,"y":442},"timestamp":1539774784166},{"type":3,"data":{"source":2,"type":2,"id":390,"x":521,"y":442},"timestamp":1539774784166},{"type":3,"data":{"source":1,"positions":[{"x":523,"y":453,"timeOffset":-487},{"x":522,"y":444,"timeOffset":-455},{"x":519,"y":443,"timeOffset":-207},{"x":518,"y":447,"timeOffset":-174},{"x":517,"y":458,"timeOffset":-141},{"x":513,"y":476,"timeOffset":-107},{"x":506,"y":490,"timeOffset":-74},{"x":503,"y":496,"timeOffset":-40},{"x":501,"y":500,"timeOffset":-6}]},"timestamp":1539774784424},{"type":3,"data":{"source":2,"type":1,"id":395,"x":491,"y":518},"timestamp":1539774784656},{"type":3,"data":{"source":2,"type":6,"id":390},"timestamp":1539774784660},{"type":3,"data":{"source":2,"type":5,"id":395},"timestamp":1539774784662},{"type":3,"data":{"source":2,"type":0,"id":395,"x":491,"y":518},"timestamp":1539774784743},{"type":3,"data":{"source":2,"type":2,"id":395,"x":491,"y":518},"timestamp":1539774784743},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":149,"attributes":{"class":"needs-validation was-validated"}}],"removes":[],"adds":[]},"timestamp":1539774784747},{"type":3,"data":{"source":1,"positions":[{"x":500,"y":503,"timeOffset":-475},{"x":497,"y":507,"timeOffset":-441},{"x":493,"y":511,"timeOffset":-406},{"x":492,"y":514,"timeOffset":-357},{"x":491,"y":518,"timeOffset":-324}]},"timestamp":1539774784925},{"type":3,"data":{"source":3,"id":1,"x":0,"y":1006},"timestamp":1539774785383},{"type":3,"data":{"source":1,"positions":[{"x":492,"y":519,"timeOffset":-425},{"x":502,"y":516,"timeOffset":-392},{"x":518,"y":515,"timeOffset":-357},{"x":541,"y":511,"timeOffset":-325},{"x":570,"y":506,"timeOffset":-291},{"x":612,"y":494,"timeOffset":-259},{"x":638,"y":489,"timeOffset":-225},{"x":648,"y":485,"timeOffset":-193},{"x":652,"y":484,"timeOffset":-159}]},"timestamp":1539774785425},{"type":3,"data":{"source":3,"id":1,"x":0,"y":914},"timestamp":1539774785483},{"type":3,"data":{"source":3,"id":1,"x":0,"y":649},"timestamp":1539774785584},{"type":3,"data":{"source":3,"id":1,"x":0,"y":618},"timestamp":1539774785684},{"type":3,"data":{"source":3,"id":1,"x":0,"y":375},"timestamp":1539774785784},{"type":3,"data":{"source":3,"id":1,"x":0,"y":265},"timestamp":1539774785885},{"type":3,"data":{"source":1,"positions":[{"x":653,"y":483,"timeOffset":-476},{"x":656,"y":482,"timeOffset":-359},{"x":662,"y":489,"timeOffset":-325},{"x":661,"y":488,"timeOffset":-207},{"x":660,"y":487,"timeOffset":-26}]},"timestamp":1539774785926},{"type":3,"data":{"source":3,"id":1,"x":0,"y":264},"timestamp":1539774786032},{"type":3,"data":{"source":3,"id":1,"x":0,"y":231},"timestamp":1539774786132},{"type":3,"data":{"source":3,"id":1,"x":0,"y":52},"timestamp":1539774786232},{"type":3,"data":{"source":3,"id":1,"x":0,"y":0},"timestamp":1539774786331},{"type":3,"data":{"source":1,"positions":[{"x":661,"y":489,"timeOffset":-292},{"x":656,"y":485,"timeOffset":-259}]},"timestamp":1539774786426},{"type":3,"data":{"source":3,"id":1,"x":0,"y":1},"timestamp":1539774787283},{"type":3,"data":{"source":3,"id":1,"x":0,"y":43},"timestamp":1539774787384},{"type":3,"data":{"source":3,"id":1,"x":0,"y":103},"timestamp":1539774787484},{"type":3,"data":{"source":1,"positions":[{"x":656,"y":489,"timeOffset":0}]},"timestamp":1539774787582},{"type":3,"data":{"source":3,"id":1,"x":0,"y":106},"timestamp":1539774787584},{"type":3,"data":{"source":1,"positions":[{"x":675,"y":503,"timeOffset":-466},{"x":699,"y":517,"timeOffset":-434},{"x":718,"y":532,"timeOffset":-400},{"x":729,"y":547,"timeOffset":-367},{"x":745,"y":569,"timeOffset":-334},{"x":758,"y":585,"timeOffset":-300},{"x":760,"y":588,"timeOffset":-267},{"x":761,"y":589,"timeOffset":-167},{"x":763,"y":594,"timeOffset":-16}]},"timestamp":1539774788082},{"type":3,"data":{"source":2,"type":1,"id":133,"x":766,"y":603},"timestamp":1539774788159},{"type":3,"data":{"source":2,"type":6,"id":395},"timestamp":1539774788160},{"type":3,"data":{"source":2,"type":5,"id":133},"timestamp":1539774788162},{"type":3,"data":{"source":2,"type":0,"id":133,"x":766,"y":603},"timestamp":1539774788279},{"type":3,"data":{"source":2,"type":2,"id":133,"x":766,"y":603},"timestamp":1539774788279},{"type":3,"data":{"source":1,"positions":[{"x":766,"y":602,"timeOffset":-483},{"x":771,"y":598,"timeOffset":-201}]},"timestamp":1539774788582},{"type":3,"data":{"source":5,"text":"c","isChecked":false,"id":133},"timestamp":1539774788860},{"type":3,"data":{"source":5,"text":"co","isChecked":false,"id":133},"timestamp":1539774789178},{"type":3,"data":{"source":5,"text":"cod","isChecked":false,"id":133},"timestamp":1539774789265},{"type":3,"data":{"source":5,"text":"code","isChecked":false,"id":133},"timestamp":1539774789317},{"type":3,"data":{"source":1,"positions":[{"x":778,"y":596,"timeOffset":0}]},"timestamp":1539774790048},{"type":3,"data":{"source":1,"positions":[{"x":797,"y":586,"timeOffset":-466},{"x":825,"y":567,"timeOffset":-433},{"x":868,"y":538,"timeOffset":-399},{"x":922,"y":502,"timeOffset":-366},{"x":967,"y":483,"timeOffset":-332},{"x":994,"y":468,"timeOffset":-300},{"x":998,"y":466,"timeOffset":-233},{"x":1007,"y":464,"timeOffset":-199},{"x":1015,"y":462,"timeOffset":-167},{"x":1021,"y":462,"timeOffset":-133},{"x":1032,"y":460,"timeOffset":-99},{"x":1039,"y":459,"timeOffset":-65},{"x":1042,"y":457,"timeOffset":-33},{"x":1045,"y":457,"timeOffset":0}]},"timestamp":1539774790548},{"type":3,"data":{"source":1,"positions":[{"x":1047,"y":457,"timeOffset":-466},{"x":1050,"y":455,"timeOffset":-332},{"x":1051,"y":454,"timeOffset":-282},{"x":1052,"y":453,"timeOffset":-217},{"x":1060,"y":449,"timeOffset":-182},{"x":1077,"y":443,"timeOffset":-150},{"x":1101,"y":429,"timeOffset":-116},{"x":1130,"y":414,"timeOffset":-82}]},"timestamp":1539774791048},{"type":3,"data":{"source":2,"type":6,"id":133},"timestamp":1539774791137}];
 
 const app = new App({
   target: document.body,

From 43b2290f5f83b8ed845ebba020c5c7c5b203bdb8 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 18 Oct 2018 16:13:59 +0800
Subject: [PATCH 030/524] export reset id function

---
 index.d.ts      | 1 +
 package.json    | 2 +-
 src/index.ts    | 4 ++--
 src/snapshot.ts | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 85dc9653bf..bfd03d9696 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -8,3 +8,4 @@ export function serializeNodeWithId(
   doc: Document,
   map: idNodeMap,
 ): serializedNodeWithId | null;
+export function resetId(): void;
diff --git a/package.json b/package.json
index 6f32f4e480..6f56531c19 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "main": "dist/index.js",
   "module": "dist/module.js",
diff --git a/src/index.ts b/src/index.ts
index fd9694655a..cba7b4996f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
-import snapshot, { serializeNodeWithId } from './snapshot';
+import snapshot, { serializeNodeWithId, resetId } from './snapshot';
 import rebuild from './rebuild';
 export * from './types';
 
-export { snapshot, serializeNodeWithId, rebuild };
+export { snapshot, serializeNodeWithId, resetId, rebuild };
diff --git a/src/snapshot.ts b/src/snapshot.ts
index fa3aea8cb3..c948fa14e1 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -13,7 +13,7 @@ function genId(): number {
   return _id++;
 }
 
-function resetId() {
+export function resetId() {
   _id = 1;
 }
 

From 416c1eec9ae602274e79de74416809250b4ca4dc Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 18 Oct 2018 19:42:01 +0800
Subject: [PATCH 031/524] fix style content url normalizer and add some tests

---
 package.json          |  2 +-
 src/snapshot.ts       | 22 +++++++++++++++++++++-
 test/snapshot.test.ts | 31 +++++++++++++++++++++++++++++++
 3 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 test/snapshot.test.ts

diff --git a/package.json b/package.json
index 6f56531c19..04fde37f22 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "main": "dist/index.js",
   "module": "dist/module.js",
diff --git a/src/snapshot.ts b/src/snapshot.ts
index c948fa14e1..5674e86d6d 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -28,9 +28,29 @@ function getCssRulesString(s: CSSStyleSheet): string | null {
   }
 }
 
+function extractOrigin(url: string): string {
+  let origin;
+  if (url.indexOf('//') > -1) {
+    origin = url
+      .split('/')
+      .slice(0, 3)
+      .join('/');
+  } else {
+    origin = url.split('/')[0];
+  }
+  origin = origin.split('?')[0];
+  return origin;
+}
+
 const URL_IN_CSS_REF = /url\((['"])([^'"]*)\1\)/gm;
-function absoluteToStylesheet(cssText: string, href: string): string {
+export function absoluteToStylesheet(cssText: string, href: string): string {
   return cssText.replace(URL_IN_CSS_REF, (_1, _2, filePath) => {
+    if (!/^[./]/.test(filePath)) {
+      return `url('${filePath}')`;
+    }
+    if (filePath[0] === '/') {
+      return `url('${extractOrigin(href) + filePath}')`;
+    }
     const stack = href.split('/');
     const parts = filePath.split('/');
     stack.pop();
diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts
new file mode 100644
index 0000000000..0720f1205e
--- /dev/null
+++ b/test/snapshot.test.ts
@@ -0,0 +1,31 @@
+import 'mocha';
+import { expect } from 'chai';
+import { absoluteToStylesheet } from '../src/snapshot';
+
+describe('absolute url to stylesheet', () => {
+  const href = 'http://localhost/css/style.css';
+
+  it('can handle same level path', () => {
+    expect(absoluteToStylesheet('url("./a.jpg")', href)).to.equal(
+      `url('http://localhost/css/a.jpg')`,
+    );
+  });
+
+  it('can handle parent level path', () => {
+    expect(absoluteToStylesheet('url("../a.jpg")', href)).to.equal(
+      `url('http://localhost/a.jpg')`,
+    );
+  });
+
+  it('can handle absolute path', () => {
+    expect(absoluteToStylesheet('url("/a.jpg")', href)).to.equal(
+      `url('http://localhost/a.jpg')`,
+    );
+  });
+
+  it('can handle external path', () => {
+    expect(
+      absoluteToStylesheet('url("http://localhost/a.jpg")', href),
+    ).to.equal(`url('http://localhost/a.jpg')`);
+  });
+});

From 202a6746360fb5835e2f1345bf7a7e8d4adf9f3e Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 21 Oct 2018 22:32:31 +0800
Subject: [PATCH 032/524] use document object from params instead of the one in
 the current scope

---
 index.d.ts          |  2 +-
 src/rebuild.ts      | 22 +++++++++++-----------
 test/integration.ts |  2 +-
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index bfd03d9696..9f2eda37e5 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -2,7 +2,7 @@ import { serializedNodeWithId, idNodeMap } from './src/types';
 export * from './src/types';
 
 export function snapshot(n: Document): [serializedNodeWithId | null, idNodeMap];
-export function rebuild(n: serializedNodeWithId): Node | null;
+export function rebuild(n: serializedNodeWithId, doc: Document): Node | null;
 export function serializeNodeWithId(
   n: Node,
   doc: Document,
diff --git a/src/rebuild.ts b/src/rebuild.ts
index 4e61283e48..c53cf72b73 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -11,19 +11,19 @@ function getTagName(n: elementNode): string {
   return tagName;
 }
 
-function buildNode(n: serializedNodeWithId): Node | null {
+function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
   switch (n.type) {
     case NodeType.Document:
-      return document.implementation.createDocument(null, '', null);
+      return doc.implementation.createDocument(null, '', null);
     case NodeType.DocumentType:
-      return document.implementation.createDocumentType(
+      return doc.implementation.createDocumentType(
         n.name,
         n.publicId,
         n.systemId,
       );
     case NodeType.Element:
       const tagName = getTagName(n);
-      const node = document.createElement(tagName);
+      const node = doc.createElement(tagName);
       const extraChildIndexes: number[] = [];
       for (const name in n.attributes) {
         if (n.attributes.hasOwnProperty(name)) {
@@ -32,7 +32,7 @@ function buildNode(n: serializedNodeWithId): Node | null {
           const isTextarea = tagName === 'textarea' && name === 'value';
           const isRemoteCss = tagName === 'style' && name === '_cssText';
           if (isTextarea || isRemoteCss) {
-            const child = document.createTextNode(value);
+            const child = doc.createTextNode(value);
             // identify the extra child DOM we added when rebuild
             extraChildIndexes.push(node.childNodes.length);
             node.appendChild(child);
@@ -53,18 +53,18 @@ function buildNode(n: serializedNodeWithId): Node | null {
       }
       return node;
     case NodeType.Text:
-      return document.createTextNode(n.textContent);
+      return doc.createTextNode(n.textContent);
     case NodeType.CDATA:
-      return document.createCDATASection(n.textContent);
+      return doc.createCDATASection(n.textContent);
     case NodeType.Comment:
-      return document.createComment(n.textContent);
+      return doc.createComment(n.textContent);
     default:
       return null;
   }
 }
 
-function rebuild(n: serializedNodeWithId): Node | null {
-  const root = buildNode(n);
+function rebuild(n: serializedNodeWithId, doc: Document): Node | null {
+  const root = buildNode(n, doc);
   if (!root) {
     return null;
   }
@@ -73,7 +73,7 @@ function rebuild(n: serializedNodeWithId): Node | null {
   }
   if (n.type === NodeType.Document || n.type === NodeType.Element) {
     for (const childN of n.childNodes) {
-      const childNode = rebuild(childN);
+      const childNode = rebuild(childN, doc);
       if (!childNode) {
         console.warn('Failed to rebuild', childN);
       } else {
diff --git a/test/integration.ts b/test/integration.ts
index 700469f2ea..d2a74aca06 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -101,7 +101,7 @@ describe('integration tests', () => {
       const rebuildHtml = (await page.evaluate(`${this.code}
         const x = new XMLSerializer();
         const [snap] = rrweb.snapshot(document);
-        x.serializeToString(rrweb.rebuild(snap));
+        x.serializeToString(rrweb.rebuild(snap, document));
       `)).replace(/\n\n/g, '');
       const result = matchSnapshot(rebuildHtml, __filename, title);
       assert(result.pass, result.pass ? '' : result.report());

From 508bbdfc2686dbee9ef14ae6491cdcf784d58ad2 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 22 Oct 2018 10:34:23 +0800
Subject: [PATCH 033/524] refactor rebuild implementation which mount DOM onto
 the target document object

---
 index.d.ts                             |  12 +-
 package.json                           |   2 +-
 src/index.ts                           |   4 +-
 src/rebuild.ts                         | 156 +++++++++++++++++++++----
 src/snapshot.ts                        |  16 +--
 test/__snapshots__/integration.ts.snap | 154 ++++++++++++------------
 test/integration.ts                    |   3 +-
 7 files changed, 230 insertions(+), 117 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 9f2eda37e5..21a0700040 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,11 +1,19 @@
-import { serializedNodeWithId, idNodeMap } from './src/types';
+import { serializedNodeWithId, idNodeMap, INode } from './src/types';
 export * from './src/types';
 
 export function snapshot(n: Document): [serializedNodeWithId | null, idNodeMap];
-export function rebuild(n: serializedNodeWithId, doc: Document): Node | null;
+export function rebuild(
+  n: serializedNodeWithId,
+  doc: Document,
+): [Node | null, idNodeMap];
 export function serializeNodeWithId(
   n: Node,
   doc: Document,
   map: idNodeMap,
 ): serializedNodeWithId | null;
 export function resetId(): void;
+export function buildNodeWithSN(
+  n: serializedNodeWithId,
+  doc: Document,
+  map: idNodeMap,
+): INode | null;
diff --git a/package.json b/package.json
index 04fde37f22..e0eceea0bd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.4.4",
+  "version": "0.5.1",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "main": "dist/index.js",
   "module": "dist/module.js",
diff --git a/src/index.ts b/src/index.ts
index cba7b4996f..f3238ea290 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
 import snapshot, { serializeNodeWithId, resetId } from './snapshot';
-import rebuild from './rebuild';
+import rebuild, { buildNodeWithSN } from './rebuild';
 export * from './types';
 
-export { snapshot, serializeNodeWithId, resetId, rebuild };
+export { snapshot, serializeNodeWithId, resetId, rebuild, buildNodeWithSN };
diff --git a/src/rebuild.ts b/src/rebuild.ts
index c53cf72b73..c995b6cc6e 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -1,4 +1,108 @@
-import { serializedNodeWithId, NodeType, tagMap, elementNode } from './types';
+import {
+  serializedNodeWithId,
+  NodeType,
+  tagMap,
+  elementNode,
+  idNodeMap,
+  INode,
+} from './types';
+
+// TODO: need a more accurate list
+const svgTags = [
+  'altGlyph',
+  'altGlyphDef',
+  'altGlyphItem',
+  'animate',
+  'animateColor',
+  'animateMotion',
+  'animateTransform',
+  'animation',
+  'circle',
+  'clipPath',
+  'color-profile',
+  'cursor',
+  'defs',
+  'desc',
+  'discard',
+  'ellipse',
+  'feBlend',
+  'feColorMatrix',
+  'feComponentTransfer',
+  'feComposite',
+  'feConvolveMatrix',
+  'feDiffuseLighting',
+  'feDisplacementMap',
+  'feDistantLight',
+  'feDropShadow',
+  'feFlood',
+  'feFuncA',
+  'feFuncB',
+  'feFuncG',
+  'feFuncR',
+  'feGaussianBlur',
+  'feImage',
+  'feMerge',
+  'feMergeNode',
+  'feMorphology',
+  'feOffset',
+  'fePointLight',
+  'feSpecularLighting',
+  'feSpotLight',
+  'feTile',
+  'feTurbulence',
+  'filter',
+  'font',
+  'font-face',
+  'font-face-format',
+  'font-face-name',
+  'font-face-src',
+  'font-face-uri',
+  'foreignObject',
+  'g',
+  'glyph',
+  'glyphRef',
+  'handler',
+  'hatch',
+  'hatchpath',
+  'hkern',
+  'image',
+  'line',
+  'linearGradient',
+  'listener',
+  'marker',
+  'mask',
+  'mesh',
+  'meshgradient',
+  'meshpatch',
+  'meshrow',
+  'metadata',
+  'missing-glyph',
+  'mpath',
+  'path',
+  'pattern',
+  'polygon',
+  'polyline',
+  'prefetch',
+  'radialGradient',
+  'rect',
+  'set',
+  'solidColor',
+  'solidcolor',
+  'stop',
+  'svg',
+  'switch',
+  'symbol',
+  'tbreak',
+  'text',
+  'textArea',
+  'textPath',
+  'tref',
+  'tspan',
+  'unknown',
+  'use',
+  'view',
+  'vkern',
+];
 
 const tagMap: tagMap = {
   script: 'noscript',
@@ -23,8 +127,12 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
       );
     case NodeType.Element:
       const tagName = getTagName(n);
-      const node = doc.createElement(tagName);
-      const extraChildIndexes: number[] = [];
+      let node: Element;
+      if (svgTags.indexOf(tagName) < 0) {
+        node = doc.createElement(tagName);
+      } else {
+        node = doc.createElementNS('http://www.w3.org/2000/svg', tagName);
+      }
       for (const name in n.attributes) {
         if (n.attributes.hasOwnProperty(name)) {
           let value = n.attributes[name];
@@ -33,10 +141,7 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
           const isRemoteCss = tagName === 'style' && name === '_cssText';
           if (isTextarea || isRemoteCss) {
             const child = doc.createTextNode(value);
-            // identify the extra child DOM we added when rebuild
-            extraChildIndexes.push(node.childNodes.length);
             node.appendChild(child);
-            continue;
           }
           try {
             node.setAttribute(name, value);
@@ -45,12 +150,6 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
           }
         }
       }
-      if (extraChildIndexes.length) {
-        node.setAttribute(
-          'data-extra-child-index',
-          JSON.stringify(extraChildIndexes),
-        );
-      }
       return node;
     case NodeType.Text:
       return doc.createTextNode(n.textContent);
@@ -63,25 +162,42 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
   }
 }
 
-function rebuild(n: serializedNodeWithId, doc: Document): Node | null {
-  const root = buildNode(n, doc);
-  if (!root) {
+export function buildNodeWithSN(
+  n: serializedNodeWithId,
+  doc: Document,
+  map: idNodeMap,
+): INode | null {
+  let node = buildNode(n, doc);
+  if (!node) {
     return null;
   }
-  if (n.type === NodeType.Element) {
-    (root as HTMLElement).setAttribute('data-rrid', String(n.id));
+  // use target document as root document
+  if (n.type === NodeType.Document) {
+    doc.open();
+    node = doc;
   }
+
+  (node as INode).__sn = n;
+  map[n.id] = node as INode;
   if (n.type === NodeType.Document || n.type === NodeType.Element) {
     for (const childN of n.childNodes) {
-      const childNode = rebuild(childN, doc);
+      const childNode = buildNodeWithSN(childN, doc, map);
       if (!childNode) {
         console.warn('Failed to rebuild', childN);
       } else {
-        root.appendChild(childNode);
+        node.appendChild(childNode);
       }
     }
   }
-  return root;
+  return node as INode;
+}
+
+function rebuild(
+  n: serializedNodeWithId,
+  doc: Document,
+): [Node | null, idNodeMap] {
+  const idNodeMap: idNodeMap = {};
+  return [buildNodeWithSN(n, doc, idNodeMap), idNodeMap];
 }
 
 export default rebuild;
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 5674e86d6d..d141b35bb2 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -187,24 +187,12 @@ export function serializeNodeWithId(
   });
   (n as INode).__sn = serializedNode;
   map[serializedNode.id] = n as INode;
-  return serializedNode;
-}
-
-function _snapshot(
-  n: Node,
-  doc: Document,
-  map: idNodeMap,
-): serializedNodeWithId | null {
-  const serializedNode = serializeNodeWithId(n, doc, map);
-  if (!serializedNode) {
-    return null;
-  }
   if (
     serializedNode.type === NodeType.Document ||
     serializedNode.type === NodeType.Element
   ) {
     for (const childN of Array.from(n.childNodes)) {
-      const serializedChildNode = _snapshot(childN, doc, map);
+      const serializedChildNode = serializeNodeWithId(childN, doc, map);
       if (serializedChildNode) {
         serializedNode.childNodes.push(serializedChildNode);
       }
@@ -216,7 +204,7 @@ function _snapshot(
 function snapshot(n: Document): [serializedNodeWithId | null, idNodeMap] {
   resetId();
   const idNodeMap: idNodeMap = {};
-  return [_snapshot(n, n, idNodeMap), idNodeMap];
+  return [serializeNodeWithId(n, n, idNodeMap), idNodeMap];
 }
 
 export default snapshot;
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 87f1446e87..f221300322 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`[html file]: about-mozilla.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
-  <title data-rrid=\\"6\\">The Book of Mozilla, 11:9</title>
-  <style type=\\"text/css\\" data-rrid=\\"9\\">
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head>
+  <title>The Book of Mozilla, 11:9</title>
+  <style type=\\"text/css\\">
     html {
       background: maroon;
       color: white;
@@ -26,120 +26,120 @@ exports[`[html file]: about-mozilla.html 1`] = `
       color: white;
     }
   </style>
-</head><body data-rrid=\\"13\\">  <p id=\\"moztext\\" data-rrid=\\"15\\">
-    Mammon slept. And the <em data-rrid=\\"17\\">beast reborn</em> spread over the earth and its numbers
-    grew legion. And they proclaimed the times and <em data-rrid=\\"20\\">sacrificed</em> crops unto the
-    fire, with the <em data-rrid=\\"23\\">cunning of foxes</em>. And they built a new world in their own
-    image as promised by the <em data-rrid=\\"26\\"><a href=\\"http://www.mozilla.org/about/mozilla-manifesto.html\\" data-rrid=\\"27\\">
-        sacred words</a></em>, and <em data-rrid=\\"30\\"><a href=\\"http://wiki.mozilla.org/About:mozilla\\" data-rrid=\\"31\\">spoke
+</head><body>  <p id=\\"moztext\\">
+    Mammon slept. And the <em>beast reborn</em> spread over the earth and its numbers
+    grew legion. And they proclaimed the times and <em>sacrificed</em> crops unto the
+    fire, with the <em>cunning of foxes</em>. And they built a new world in their own
+    image as promised by the <em><a href=\\"http://www.mozilla.org/about/mozilla-manifesto.html\\">
+        sacred words</a></em>, and <em><a href=\\"http://wiki.mozilla.org/About:mozilla\\">spoke
       </a></em> of the beast with their children. Mammon awoke, and lo! it was
-    <em data-rrid=\\"34\\">naught</em> but a follower.
-  </p>  <p id=\\"from\\" data-rrid=\\"38\\">
-    from <strong data-rrid=\\"40\\">The Book of Mozilla,</strong> 11:9<br data-rrid=\\"43\\" /><small data-rrid=\\"44\\">(10th Edition)</small>
+    <em>naught</em> but a follower.
+  </p>  <p id=\\"from\\">
+    from <strong>The Book of Mozilla,</strong> 11:9<br /><small>(10th Edition)</small>
   </p></body></html>"
 `;
 
 exports[`[html file]: basic.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
-  <meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
-  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
-  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
-  <title data-rrid=\\"12\\">Document</title>
-</head><body data-rrid=\\"16\\"></body></html>"
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+  <meta charset=\\"UTF-8\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+  <title>Document</title>
+</head><body></body></html>"
 `;
 
 exports[`[html file]: cors-style-sheet.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
-  <meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
-  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
-  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
-  <title data-rrid=\\"12\\">with style sheet</title>
-  <link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/pure@2.85.0/index.css\\" data-rrid=\\"15\\" />
-</head><body data-rrid=\\"18\\"></body></html>"
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+  <meta charset=\\"UTF-8\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+  <title>with style sheet</title>
+  <link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/pure@2.85.0/index.css\\" />
+</head><body></body></html>"
 `;
 
 exports[`[html file]: form-fields.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
-  <meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
-  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
-  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
-  <title data-rrid=\\"12\\">form fields</title>
-</head><body data-rrid=\\"16\\">
-  <form data-rrid=\\"18\\">
-    <label for=\\"text\\" data-rrid=\\"20\\">
-      <input type=\\"text\\" value=\\"1\\" data-rrid=\\"22\\" />
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+  <meta charset=\\"UTF-8\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+  <title>form fields</title>
+</head><body>
+  <form>
+    <label for=\\"text\\">
+      <input type=\\"text\\" value=\\"1\\" />
     </label>
-    <label for=\\"radio\\" data-rrid=\\"25\\">
-      <input type=\\"radio\\" checked=\\"\\" data-rrid=\\"27\\" />
+    <label for=\\"radio\\">
+      <input type=\\"radio\\" checked=\\"\\" />
     </label>
-    <label for=\\"checkbox\\" data-rrid=\\"30\\">
-      <input type=\\"checkbox\\" checked=\\"\\" data-rrid=\\"32\\" />
+    <label for=\\"checkbox\\">
+      <input type=\\"checkbox\\" checked=\\"\\" />
     </label>
-    <label for=\\"textarea\\" data-rrid=\\"35\\">
-      <textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\" data-extra-child-index=\\"[0]\\" data-rrid=\\"37\\">1234</textarea>
+    <label for=\\"textarea\\">
+      <textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\" value=\\"1234\\">1234</textarea>
     </label>
-    <label for=\\"select\\" data-rrid=\\"40\\">
-      <select name=\\"\\" id=\\"\\" value=\\"2\\" data-rrid=\\"42\\">
-        <option value=\\"1\\" data-rrid=\\"44\\">1</option>
-        <option value=\\"2\\" selected=\\"\\" data-rrid=\\"47\\">2</option>
+    <label for=\\"select\\">
+      <select name=\\"\\" id=\\"\\" value=\\"2\\">
+        <option value=\\"1\\">1</option>
+        <option value=\\"2\\" selected=\\"\\">2</option>
       </select>
     </label>
-  </form><noscript data-rrid=\\"53\\">SCRIPT_PLACEHOLDER</noscript>
+  </form><noscript>SCRIPT_PLACEHOLDER</noscript>
 </body></html>"
 `;
 
 exports[`[html file]: iframe.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
-  <meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
-  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
-  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
-  <title data-rrid=\\"12\\">iframe</title>
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+  <meta charset=\\"UTF-8\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+  <title>iframe</title>
 </head>
-<body data-rrid=\\"16\\">
-  <iframe src=\\"http://localhost:3030/html/iframe-inner.html\\" width=\\"100\\" height=\\"50\\" data-rrid=\\"18\\"></iframe>
+<body>
+  <iframe src=\\"http://localhost:3030/html/iframe-inner.html\\" width=\\"100\\" height=\\"50\\"></iframe>
 </body></html>"
 `;
 
 exports[`[html file]: iframe-inner.html 1`] = `
-"<html xmlns=\\"http://www.w3.org/1999/xhtml\\" data-rrid=\\"2\\"><head data-rrid=\\"3\\"></head><body data-rrid=\\"4\\"><button data-rrid=\\"5\\">inner iframe button</button>
+"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body><button>inner iframe button</button>
 </body></html>"
 `;
 
 exports[`[html file]: invalid-attribute.html 1`] = `
-"<html xmlns=\\"http://www.w3.org/1999/xhtml\\" foo=\\"bar\\" data-rrid=\\"2\\"><head data-rrid=\\"3\\"></head><body data-rrid=\\"4\\">
+"<html xmlns=\\"http://www.w3.org/1999/xhtml\\" foo=\\"bar\\"><head></head><body>
 </body></html>"
 `;
 
 exports[`[html file]: with-relative-res.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
-  <meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
-  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
-  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
-  <title data-rrid=\\"12\\">Document</title>
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+  <meta charset=\\"UTF-8\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+  <title>Document</title>
 </head>
-<body data-rrid=\\"16\\">
-  <a href=\\"http://localhost:3030/basic.html\\" data-rrid=\\"18\\"></a>
-  <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"\\" data-rrid=\\"20\\" /></body></html>"
+<body>
+  <a href=\\"http://localhost:3030/basic.html\\"></a>
+  <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"\\" /></body></html>"
 `;
 
 exports[`[html file]: with-script.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
-  <meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
-  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
-  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
-  <title data-rrid=\\"12\\">with script</title>
-</head><body data-rrid=\\"16\\">
-  <noscript src=\\"http://localhost:3030/js/a.js\\" data-rrid=\\"18\\"></noscript>
-  <noscript data-rrid=\\"20\\">SCRIPT_PLACEHOLDER</noscript></body></html>"
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+  <meta charset=\\"UTF-8\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+  <title>with script</title>
+</head><body>
+  <noscript src=\\"http://localhost:3030/js/a.js\\"></noscript>
+  <noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
 `;
 
 exports[`[html file]: with-style-sheet.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\" data-rrid=\\"3\\"><head data-rrid=\\"4\\">
-  <meta charset=\\"UTF-8\\" data-rrid=\\"6\\" />
-  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
-  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
-  <title data-rrid=\\"12\\">with style sheet</title>
-  <style data-extra-child-index=\\"[0]\\" data-rrid=\\"15\\">body { margin: 0px; background: url('http://localhost:3030/a.jpg'); }p { color: red; background: url('http://localhost:3030/css/b.jpg'); }body &gt; p { color: yellow; }</style>
-</head><body data-rrid=\\"18\\">
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+  <meta charset=\\"UTF-8\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+  <title>with style sheet</title>
+  <style _csstext=\\"body { margin: 0px; background: url('http://localhost:3030/a.jpg'); }p { color: red; background: url('http://localhost:3030/css/b.jpg'); }body &gt; p { color: yellow; }\\">body { margin: 0px; background: url('http://localhost:3030/a.jpg'); }p { color: red; background: url('http://localhost:3030/css/b.jpg'); }body &gt; p { color: yellow; }</style>
+</head><body>
 </body></html>"
 `;
diff --git a/test/integration.ts b/test/integration.ts
index d2a74aca06..f668b62594 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -70,6 +70,7 @@ describe('integration tests', () => {
   before(async () => {
     this.server = await server();
     this.browser = await puppeteer.launch({
+      executablePath: '/home/yanzhen/Desktop/chrome-linux/chrome',
       // headless: false,
     });
 
@@ -101,7 +102,7 @@ describe('integration tests', () => {
       const rebuildHtml = (await page.evaluate(`${this.code}
         const x = new XMLSerializer();
         const [snap] = rrweb.snapshot(document);
-        x.serializeToString(rrweb.rebuild(snap, document));
+        x.serializeToString(rrweb.rebuild(snap, document)[0]);
       `)).replace(/\n\n/g, '');
       const result = matchSnapshot(rebuildHtml, __filename, title);
       assert(result.pass, result.pass ? '' : result.report());

From 5934cc71f2c794116ff5a3a573ef3210bad191d4 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 22 Oct 2018 10:36:40 +0800
Subject: [PATCH 034/524] bump 0.5.2

---
 README.md    | 6 +++++-
 package.json | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 1dcd2adac9..9c46dd60eb 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ Also provide the ability to rebuild the DOM via snapshot.
 
 ## API
 
-This module export 3 methods:
+This module export following methods:
 
 ### snapshot
 
@@ -34,3 +34,7 @@ There are serveral things will be done during rebuild:
 #### serializeNodeWithId
 
 `serializeNodeWithId` can serialize a node into snapshot format with id.
+
+#### buildNodeWithSN
+
+`buildNodeWithSN` will build DOM from serialized node and store serialized information in `__sn` property.
diff --git a/package.json b/package.json
index e0eceea0bd..982d4b1ef6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "main": "dist/index.js",
   "module": "dist/module.js",

From e5dba6a98604df1555ae46335c65b9cd1df8d9cb Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 22 Oct 2018 10:50:57 +0800
Subject: [PATCH 035/524] remove local test code

---
 test/integration.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/integration.ts b/test/integration.ts
index f668b62594..8c71101f6a 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -70,7 +70,6 @@ describe('integration tests', () => {
   before(async () => {
     this.server = await server();
     this.browser = await puppeteer.launch({
-      executablePath: '/home/yanzhen/Desktop/chrome-linux/chrome',
       // headless: false,
     });
 

From 2a50fff366fe1d5eccce368ad0889c29fa3e5593 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 22 Oct 2018 23:03:10 +0800
Subject: [PATCH 036/524] allow skip child when serialize node and rebuild node

---
 index.d.ts      | 2 ++
 src/rebuild.ts  | 6 +++++-
 src/snapshot.ts | 6 ++++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 21a0700040..27eec30331 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -10,10 +10,12 @@ export function serializeNodeWithId(
   n: Node,
   doc: Document,
   map: idNodeMap,
+  skipChild?: boolean,
 ): serializedNodeWithId | null;
 export function resetId(): void;
 export function buildNodeWithSN(
   n: serializedNodeWithId,
   doc: Document,
   map: idNodeMap,
+  skipChild?: boolean,
 ): INode | null;
diff --git a/src/rebuild.ts b/src/rebuild.ts
index c995b6cc6e..476ae2516d 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -166,6 +166,7 @@ export function buildNodeWithSN(
   n: serializedNodeWithId,
   doc: Document,
   map: idNodeMap,
+  skipChild = false,
 ): INode | null {
   let node = buildNode(n, doc);
   if (!node) {
@@ -179,7 +180,10 @@ export function buildNodeWithSN(
 
   (node as INode).__sn = n;
   map[n.id] = node as INode;
-  if (n.type === NodeType.Document || n.type === NodeType.Element) {
+  if (
+    (n.type === NodeType.Document || n.type === NodeType.Element) &&
+    !skipChild
+  ) {
     for (const childN of n.childNodes) {
       const childNode = buildNodeWithSN(childN, doc, map);
       if (!childNode) {
diff --git a/src/snapshot.ts b/src/snapshot.ts
index d141b35bb2..42ceaf6ec6 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -175,6 +175,7 @@ export function serializeNodeWithId(
   n: Node,
   doc: Document,
   map: idNodeMap,
+  skipChild = false,
 ): serializedNodeWithId | null {
   const _serializedNode = serializeNode(n, doc);
   if (!_serializedNode) {
@@ -188,8 +189,9 @@ export function serializeNodeWithId(
   (n as INode).__sn = serializedNode;
   map[serializedNode.id] = n as INode;
   if (
-    serializedNode.type === NodeType.Document ||
-    serializedNode.type === NodeType.Element
+    (serializedNode.type === NodeType.Document ||
+      serializedNode.type === NodeType.Element) &&
+    !skipChild
   ) {
     for (const childN of Array.from(n.childNodes)) {
       const serializedChildNode = serializeNodeWithId(childN, doc, map);

From 689c788669a1e1a17aee7cbb9e100afdefea6ff8 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 22 Oct 2018 23:05:21 +0800
Subject: [PATCH 037/524] bump 0.5.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 982d4b1ef6..578cbc5151 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "main": "dist/index.js",
   "module": "dist/module.js",

From 33b58c771781cf09c8942a5c569b4dcbafbed511 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 23 Oct 2018 18:59:29 +0800
Subject: [PATCH 038/524] add speed setter and option for display controller or
 not

---
 src/App.html        | 14 --------------
 src/Controller.html | 19 ++++++++++++++++---
 src/Player.html     |  3 ++-
 src/main.js         | 15 ---------------
 4 files changed, 18 insertions(+), 33 deletions(-)
 delete mode 100644 src/App.html
 delete mode 100644 src/main.js

diff --git a/src/App.html b/src/App.html
deleted file mode 100644
index f19586f42b..0000000000
--- a/src/App.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<Player {events} />
-
-<style>
-</style>
-
-<script>
-  import Player from './Player.html';
-
-  export default {
-    components: {
-      Player,
-    },
-  };
-</script>
\ No newline at end of file
diff --git a/src/Controller.html b/src/Controller.html
index fae075420c..2ec2bd37b1 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -1,3 +1,4 @@
+{#if showController}
 <div class="rr-controller">
   <div class="rr-timeline">
     <span class="rr-timeline__time">{formatTime(currentTime)}</span>
@@ -12,10 +13,11 @@
       {isPlaying ? 'pause' : 'play'}
     </button>
     {#each [1, 2, 4, 8] as s}
-    <button class:active="s === speed" on:click="set({ speed: s })">{s}x</button>
+    <button class:active="s === speed" on:click="setSpeed(s)">{s}x</button>
     {/each}
   </div>
 </div>
+{/if}
 
 <script>
   import { formatTime } from './utils.js';
@@ -69,8 +71,8 @@
         requestAnimationFrame(update);
       },
       play() {
-        const { replayer } = this.get();
-        // replayer.play();
+        const { replayer, currentTime } = this.get();
+        replayer.play(currentTime);
         this.loopTimer();
       },
       pause() {
@@ -86,6 +88,11 @@
           this.play();
         }
       },
+      setSpeed(speed) {
+        const { replayer } = this.get();
+        replayer.setConfig({ speed });
+        this.set({ speed });
+      },
     },
     onupdate({ changed, current, previous }) {
       if (current.replayer && !previous) {
@@ -94,6 +101,12 @@
         this.play();
       }
     },
+    ondestroy() {
+      const { isPlaying } = this.get();
+      if (isPlaying) {
+        this.pause();
+      }
+    },
   };
 </script>
 
diff --git a/src/Player.html b/src/Player.html
index b47fe52ab6..412f2fbf0b 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -1,7 +1,7 @@
 <div class="rr-player">
   <div class="rr-player__frame" ref:frame { style }></div>
   {#if replayer}
-  <Controller { replayer } />
+  <Controller { replayer } {showController} />
   {/if}
 </div>
 
@@ -15,6 +15,7 @@
     },
     data() {
       return {
+        showController: true,
         width: 1024,
         height: 576,
         events: [],
diff --git a/src/main.js b/src/main.js
deleted file mode 100644
index 09822892cc..0000000000
--- a/src/main.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import App from './App.html';
-
-const events =
-  // prettier-ignore
-  // eslint-disable-next-line
-  [{"type":0,"data":{"href":"http://localhost:5500/checkout-demo/"},"timestamp":1539774745277},{"type":1,"data":{"width":1600,"height":711},"timestamp":1539774745283},{"type":2,"data":{"node":{"type":0,"childNodes":[{"type":1,"name":"html","publicId":"","systemId":"","id":2},{"type":5,"textContent":" saved from url=(0052)https://getbootstrap.com/docs/4.1/examples/checkout/ ","id":3},{"type":2,"tagName":"html","attributes":{"lang":"en"},"childNodes":[{"type":2,"tagName":"head","attributes":{},"childNodes":[{"type":3,"textContent":"\n  ","id":6},{"type":2,"tagName":"meta","attributes":{"http-equiv":"Content-Type","content":"text/html; charset=UTF-8"},"childNodes":[],"id":7},{"type":3,"textContent":"\n\n  ","id":8},{"type":2,"tagName":"meta","attributes":{"name":"viewport","content":"width=device-width, initial-scale=1, shrink-to-fit=no"},"childNodes":[],"id":9},{"type":3,"textContent":"\n  ","id":10},{"type":2,"tagName":"meta","attributes":{"name":"description","content":""},"childNodes":[],"id":11},{"type":3,"textContent":"\n  ","id":12},{"type":2,"tagName":"meta","attributes":{"name":"author","content":""},"childNodes":[],"id":13},{"type":3,"textContent":"\n  ","id":14},{"type":2,"tagName":"link","attributes":{"rel":"icon","href":"https://getbootstrap.com/favicon.ico"},"childNodes":[],"id":15},{"type":3,"textContent":"\n\n  ","id":16},{"type":2,"tagName":"title","attributes":{},"childNodes":[{"type":3,"textContent":"Checkout example for Bootstrap","id":18}],"id":17},{"type":3,"textContent":"\n\n  ","id":19},{"type":5,"textContent":" Bootstrap core CSS ","id":20},{"type":3,"textContent":"\n  ","id":21},{"type":2,"tagName":"link","attributes":{"_cssText":":root { --blue:#007bff; --indigo:#6610f2; --purple:#6f42c1; --pink:#e83e8c; --red:#dc3545; --orange:#fd7e14; --yellow:#ffc107; --green:#28a745; --teal:#20c997; --cyan:#17a2b8; --white:#fff; --gray:#6c757d; --gray-dark:#343a40; --primary:#007bff; --secondary:#6c757d; --success:#28a745; --info:#17a2b8; --warning:#ffc107; --danger:#dc3545; --light:#f8f9fa; --dark:#343a40; --breakpoint-xs:0; --breakpoint-sm:576px; --breakpoint-md:768px; --breakpoint-lg:992px; --breakpoint-xl:1200px; --font-family-sans-serif:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"; --font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace; }*, ::after, ::before { box-sizing: border-box; }html { font-family: sans-serif; line-height: 1.15; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }body { margin: 0px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: rgb(33, 37, 41); text-align: left; background-color: rgb(255, 255, 255); }[tabindex=\"-1\"]:focus { outline: 0px !important; }hr { box-sizing: content-box; height: 0px; overflow: visible; }h1, h2, h3, h4, h5, h6 { margin-top: 0px; margin-bottom: 0.5rem; }p { margin-top: 0px; margin-bottom: 1rem; }abbr[data-original-title], abbr[title] { text-decoration: underline dotted; cursor: help; border-bottom: 0px; }address { margin-bottom: 1rem; font-style: normal; line-height: inherit; }dl, ol, ul { margin-top: 0px; margin-bottom: 1rem; }ol ol, ol ul, ul ol, ul ul { margin-bottom: 0px; }dt { font-weight: 700; }dd { margin-bottom: 0.5rem; margin-left: 0px; }blockquote { margin: 0px 0px 1rem; }dfn { font-style: italic; }b, strong { font-weight: bolder; }small { font-size: 80%; }sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }sub { bottom: -0.25em; }sup { top: -0.5em; }a { color: rgb(0, 123, 255); text-decoration: none; background-color: transparent; }a:hover { color: rgb(0, 86, 179); text-decoration: underline; }a:not([href]):not([tabindex]) { color: inherit; text-decoration: none; }a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover { color: inherit; text-decoration: none; }a:not([href]):not([tabindex]):focus { outline: 0px; }code, kbd, pre, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; font-size: 1em; }pre { margin-top: 0px; margin-bottom: 1rem; overflow: auto; }figure { margin: 0px 0px 1rem; }img { vertical-align: middle; border-style: none; }svg { overflow: hidden; vertical-align: middle; }table { border-collapse: collapse; }caption { padding-top: 0.75rem; padding-bottom: 0.75rem; color: rgb(108, 117, 125); text-align: left; caption-side: bottom; }th { text-align: inherit; }label { display: inline-block; margin-bottom: 0.5rem; }button { border-radius: 0px; }button:focus { outline: -webkit-focus-ring-color auto 5px; }button, input, optgroup, select, textarea { margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit; }button, input { overflow: visible; }button, select { text-transform: none; }[type=\"reset\"], [type=\"submit\"], button, html [type=\"button\"] { -webkit-appearance: button; }input[type=\"checkbox\"], input[type=\"radio\"] { box-sizing: border-box; padding: 0px; }input[type=\"date\"], input[type=\"datetime-local\"], input[type=\"month\"], input[type=\"time\"] { -webkit-appearance: listbox; }textarea { overflow: auto; resize: vertical; }fieldset { min-width: 0px; padding: 0px; margin: 0px; border: 0px; }legend { display: block; width: 100%; max-width: 100%; padding: 0px; margin-bottom: 0.5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; }progress { vertical-align: baseline; }[type=\"number\"]::-webkit-inner-spin-button, [type=\"number\"]::-webkit-outer-spin-button { height: auto; }[type=\"search\"] { outline-offset: -2px; -webkit-appearance: none; }[type=\"search\"]::-webkit-search-cancel-button, [type=\"search\"]::-webkit-search-decoration { -webkit-appearance: none; }::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }output { display: inline-block; }summary { display: list-item; cursor: pointer; }template { display: none; }[hidden] { display: none !important; }.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5rem; font-family: inherit; font-weight: 500; line-height: 1.2; color: inherit; }.h1, h1 { font-size: 2.5rem; }.h2, h2 { font-size: 2rem; }.h3, h3 { font-size: 1.75rem; }.h4, h4 { font-size: 1.5rem; }.h5, h5 { font-size: 1.25rem; }.h6, h6 { font-size: 1rem; }.lead { font-size: 1.25rem; font-weight: 300; }.display-1 { font-size: 6rem; font-weight: 300; line-height: 1.2; }.display-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2; }.display-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2; }.display-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; }hr { margin-top: 1rem; margin-bottom: 1rem; border-width: 1px 0px 0px; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0.1); }.small, small { font-size: 80%; font-weight: 400; }.mark, mark { padding: 0.2em; background-color: rgb(252, 248, 227); }.list-unstyled { padding-left: 0px; list-style: none; }.list-inline { padding-left: 0px; list-style: none; }.list-inline-item { display: inline-block; }.list-inline-item:not(:last-child) { margin-right: 0.5rem; }.initialism { font-size: 90%; text-transform: uppercase; }.blockquote { margin-bottom: 1rem; font-size: 1.25rem; }.blockquote-footer { display: block; font-size: 80%; color: rgb(108, 117, 125); }.blockquote-footer::before { content: \"— \"; }.img-fluid { max-width: 100%; height: auto; }.img-thumbnail { padding: 0.25rem; background-color: rgb(255, 255, 255); border: 1px solid rgb(222, 226, 230); border-radius: 0.25rem; max-width: 100%; height: auto; }.figure { display: inline-block; }.figure-img { margin-bottom: 0.5rem; line-height: 1; }.figure-caption { font-size: 90%; color: rgb(108, 117, 125); }code { font-size: 87.5%; color: rgb(232, 62, 140); word-break: break-word; }a > code { color: inherit; }kbd { padding: 0.2rem 0.4rem; font-size: 87.5%; color: rgb(255, 255, 255); background-color: rgb(33, 37, 41); border-radius: 0.2rem; }kbd kbd { padding: 0px; font-size: 100%; font-weight: 700; }pre { display: block; font-size: 87.5%; color: rgb(33, 37, 41); }pre code { font-size: inherit; color: inherit; word-break: normal; }.pre-scrollable { max-height: 340px; overflow-y: scroll; }.container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }@media (min-width: 576px) {\n  .container { max-width: 540px; }\n}@media (min-width: 768px) {\n  .container { max-width: 720px; }\n}@media (min-width: 992px) {\n  .container { max-width: 960px; }\n}@media (min-width: 1200px) {\n  .container { max-width: 1140px; }\n}.container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }.no-gutters { margin-right: 0px; margin-left: 0px; }.no-gutters > .col, .no-gutters > [class*=\"col-\"] { padding-right: 0px; padding-left: 0px; }.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; }.col { flex-basis: 0px; flex-grow: 1; max-width: 100%; }.col-auto { flex: 0 0 auto; width: auto; max-width: none; }.col-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }.col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }.col-3 { flex: 0 0 25%; max-width: 25%; }.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }.col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }.col-6 { flex: 0 0 50%; max-width: 50%; }.col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }.col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }.col-9 { flex: 0 0 75%; max-width: 75%; }.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }.col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }.col-12 { flex: 0 0 100%; max-width: 100%; }.order-first { order: -1; }.order-last { order: 13; }.order-0 { order: 0; }.order-1 { order: 1; }.order-2 { order: 2; }.order-3 { order: 3; }.order-4 { order: 4; }.order-5 { order: 5; }.order-6 { order: 6; }.order-7 { order: 7; }.order-8 { order: 8; }.order-9 { order: 9; }.order-10 { order: 10; }.order-11 { order: 11; }.order-12 { order: 12; }.offset-1 { margin-left: 8.33333%; }.offset-2 { margin-left: 16.6667%; }.offset-3 { margin-left: 25%; }.offset-4 { margin-left: 33.3333%; }.offset-5 { margin-left: 41.6667%; }.offset-6 { margin-left: 50%; }.offset-7 { margin-left: 58.3333%; }.offset-8 { margin-left: 66.6667%; }.offset-9 { margin-left: 75%; }.offset-10 { margin-left: 83.3333%; }.offset-11 { margin-left: 91.6667%; }@media (min-width: 576px) {\n  .col-sm { flex-basis: 0px; flex-grow: 1; max-width: 100%; }\n  .col-sm-auto { flex: 0 0 auto; width: auto; max-width: none; }\n  .col-sm-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }\n  .col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }\n  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }\n  .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }\n  .col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }\n  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }\n  .col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }\n  .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }\n  .col-sm-9 { flex: 0 0 75%; max-width: 75%; }\n  .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }\n  .col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }\n  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }\n  .order-sm-first { order: -1; }\n  .order-sm-last { order: 13; }\n  .order-sm-0 { order: 0; }\n  .order-sm-1 { order: 1; }\n  .order-sm-2 { order: 2; }\n  .order-sm-3 { order: 3; }\n  .order-sm-4 { order: 4; }\n  .order-sm-5 { order: 5; }\n  .order-sm-6 { order: 6; }\n  .order-sm-7 { order: 7; }\n  .order-sm-8 { order: 8; }\n  .order-sm-9 { order: 9; }\n  .order-sm-10 { order: 10; }\n  .order-sm-11 { order: 11; }\n  .order-sm-12 { order: 12; }\n  .offset-sm-0 { margin-left: 0px; }\n  .offset-sm-1 { margin-left: 8.33333%; }\n  .offset-sm-2 { margin-left: 16.6667%; }\n  .offset-sm-3 { margin-left: 25%; }\n  .offset-sm-4 { margin-left: 33.3333%; }\n  .offset-sm-5 { margin-left: 41.6667%; }\n  .offset-sm-6 { margin-left: 50%; }\n  .offset-sm-7 { margin-left: 58.3333%; }\n  .offset-sm-8 { margin-left: 66.6667%; }\n  .offset-sm-9 { margin-left: 75%; }\n  .offset-sm-10 { margin-left: 83.3333%; }\n  .offset-sm-11 { margin-left: 91.6667%; }\n}@media (min-width: 768px) {\n  .col-md { flex-basis: 0px; flex-grow: 1; max-width: 100%; }\n  .col-md-auto { flex: 0 0 auto; width: auto; max-width: none; }\n  .col-md-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }\n  .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }\n  .col-md-3 { flex: 0 0 25%; max-width: 25%; }\n  .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }\n  .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }\n  .col-md-6 { flex: 0 0 50%; max-width: 50%; }\n  .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }\n  .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }\n  .col-md-9 { flex: 0 0 75%; max-width: 75%; }\n  .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }\n  .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }\n  .col-md-12 { flex: 0 0 100%; max-width: 100%; }\n  .order-md-first { order: -1; }\n  .order-md-last { order: 13; }\n  .order-md-0 { order: 0; }\n  .order-md-1 { order: 1; }\n  .order-md-2 { order: 2; }\n  .order-md-3 { order: 3; }\n  .order-md-4 { order: 4; }\n  .order-md-5 { order: 5; }\n  .order-md-6 { order: 6; }\n  .order-md-7 { order: 7; }\n  .order-md-8 { order: 8; }\n  .order-md-9 { order: 9; }\n  .order-md-10 { order: 10; }\n  .order-md-11 { order: 11; }\n  .order-md-12 { order: 12; }\n  .offset-md-0 { margin-left: 0px; }\n  .offset-md-1 { margin-left: 8.33333%; }\n  .offset-md-2 { margin-left: 16.6667%; }\n  .offset-md-3 { margin-left: 25%; }\n  .offset-md-4 { margin-left: 33.3333%; }\n  .offset-md-5 { margin-left: 41.6667%; }\n  .offset-md-6 { margin-left: 50%; }\n  .offset-md-7 { margin-left: 58.3333%; }\n  .offset-md-8 { margin-left: 66.6667%; }\n  .offset-md-9 { margin-left: 75%; }\n  .offset-md-10 { margin-left: 83.3333%; }\n  .offset-md-11 { margin-left: 91.6667%; }\n}@media (min-width: 992px) {\n  .col-lg { flex-basis: 0px; flex-grow: 1; max-width: 100%; }\n  .col-lg-auto { flex: 0 0 auto; width: auto; max-width: none; }\n  .col-lg-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }\n  .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }\n  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }\n  .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }\n  .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }\n  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }\n  .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }\n  .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }\n  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }\n  .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }\n  .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }\n  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }\n  .order-lg-first { order: -1; }\n  .order-lg-last { order: 13; }\n  .order-lg-0 { order: 0; }\n  .order-lg-1 { order: 1; }\n  .order-lg-2 { order: 2; }\n  .order-lg-3 { order: 3; }\n  .order-lg-4 { order: 4; }\n  .order-lg-5 { order: 5; }\n  .order-lg-6 { order: 6; }\n  .order-lg-7 { order: 7; }\n  .order-lg-8 { order: 8; }\n  .order-lg-9 { order: 9; }\n  .order-lg-10 { order: 10; }\n  .order-lg-11 { order: 11; }\n  .order-lg-12 { order: 12; }\n  .offset-lg-0 { margin-left: 0px; }\n  .offset-lg-1 { margin-left: 8.33333%; }\n  .offset-lg-2 { margin-left: 16.6667%; }\n  .offset-lg-3 { margin-left: 25%; }\n  .offset-lg-4 { margin-left: 33.3333%; }\n  .offset-lg-5 { margin-left: 41.6667%; }\n  .offset-lg-6 { margin-left: 50%; }\n  .offset-lg-7 { margin-left: 58.3333%; }\n  .offset-lg-8 { margin-left: 66.6667%; }\n  .offset-lg-9 { margin-left: 75%; }\n  .offset-lg-10 { margin-left: 83.3333%; }\n  .offset-lg-11 { margin-left: 91.6667%; }\n}@media (min-width: 1200px) {\n  .col-xl { flex-basis: 0px; flex-grow: 1; max-width: 100%; }\n  .col-xl-auto { flex: 0 0 auto; width: auto; max-width: none; }\n  .col-xl-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }\n  .col-xl-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }\n  .col-xl-3 { flex: 0 0 25%; max-width: 25%; }\n  .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }\n  .col-xl-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }\n  .col-xl-6 { flex: 0 0 50%; max-width: 50%; }\n  .col-xl-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }\n  .col-xl-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }\n  .col-xl-9 { flex: 0 0 75%; max-width: 75%; }\n  .col-xl-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }\n  .col-xl-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }\n  .col-xl-12 { flex: 0 0 100%; max-width: 100%; }\n  .order-xl-first { order: -1; }\n  .order-xl-last { order: 13; }\n  .order-xl-0 { order: 0; }\n  .order-xl-1 { order: 1; }\n  .order-xl-2 { order: 2; }\n  .order-xl-3 { order: 3; }\n  .order-xl-4 { order: 4; }\n  .order-xl-5 { order: 5; }\n  .order-xl-6 { order: 6; }\n  .order-xl-7 { order: 7; }\n  .order-xl-8 { order: 8; }\n  .order-xl-9 { order: 9; }\n  .order-xl-10 { order: 10; }\n  .order-xl-11 { order: 11; }\n  .order-xl-12 { order: 12; }\n  .offset-xl-0 { margin-left: 0px; }\n  .offset-xl-1 { margin-left: 8.33333%; }\n  .offset-xl-2 { margin-left: 16.6667%; }\n  .offset-xl-3 { margin-left: 25%; }\n  .offset-xl-4 { margin-left: 33.3333%; }\n  .offset-xl-5 { margin-left: 41.6667%; }\n  .offset-xl-6 { margin-left: 50%; }\n  .offset-xl-7 { margin-left: 58.3333%; }\n  .offset-xl-8 { margin-left: 66.6667%; }\n  .offset-xl-9 { margin-left: 75%; }\n  .offset-xl-10 { margin-left: 83.3333%; }\n  .offset-xl-11 { margin-left: 91.6667%; }\n}.table { width: 100%; margin-bottom: 1rem; background-color: transparent; }.table td, .table th { padding: 0.75rem; vertical-align: top; border-top: 1px solid rgb(222, 226, 230); }.table thead th { vertical-align: bottom; border-bottom: 2px solid rgb(222, 226, 230); }.table tbody + tbody { border-top: 2px solid rgb(222, 226, 230); }.table .table { background-color: rgb(255, 255, 255); }.table-sm td, .table-sm th { padding: 0.3rem; }.table-bordered { border: 1px solid rgb(222, 226, 230); }.table-bordered td, .table-bordered th { border: 1px solid rgb(222, 226, 230); }.table-bordered thead td, .table-bordered thead th { border-bottom-width: 2px; }.table-borderless tbody + tbody, .table-borderless td, .table-borderless th, .table-borderless thead th { border: 0px; }.table-striped tbody tr:nth-of-type(2n+1) { background-color: rgba(0, 0, 0, 0.05); }.table-hover tbody tr:hover { background-color: rgba(0, 0, 0, 0.075); }.table-primary, .table-primary > td, .table-primary > th { background-color: rgb(184, 218, 255); }.table-hover .table-primary:hover { background-color: rgb(159, 205, 255); }.table-hover .table-primary:hover > td, .table-hover .table-primary:hover > th { background-color: rgb(159, 205, 255); }.table-secondary, .table-secondary > td, .table-secondary > th { background-color: rgb(214, 216, 219); }.table-hover .table-secondary:hover { background-color: rgb(200, 203, 207); }.table-hover .table-secondary:hover > td, .table-hover .table-secondary:hover > th { background-color: rgb(200, 203, 207); }.table-success, .table-success > td, .table-success > th { background-color: rgb(195, 230, 203); }.table-hover .table-success:hover { background-color: rgb(177, 223, 187); }.table-hover .table-success:hover > td, .table-hover .table-success:hover > th { background-color: rgb(177, 223, 187); }.table-info, .table-info > td, .table-info > th { background-color: rgb(190, 229, 235); }.table-hover .table-info:hover { background-color: rgb(171, 221, 229); }.table-hover .table-info:hover > td, .table-hover .table-info:hover > th { background-color: rgb(171, 221, 229); }.table-warning, .table-warning > td, .table-warning > th { background-color: rgb(255, 238, 186); }.table-hover .table-warning:hover { background-color: rgb(255, 232, 161); }.table-hover .table-warning:hover > td, .table-hover .table-warning:hover > th { background-color: rgb(255, 232, 161); }.table-danger, .table-danger > td, .table-danger > th { background-color: rgb(245, 198, 203); }.table-hover .table-danger:hover { background-color: rgb(241, 176, 183); }.table-hover .table-danger:hover > td, .table-hover .table-danger:hover > th { background-color: rgb(241, 176, 183); }.table-light, .table-light > td, .table-light > th { background-color: rgb(253, 253, 254); }.table-hover .table-light:hover { background-color: rgb(236, 236, 246); }.table-hover .table-light:hover > td, .table-hover .table-light:hover > th { background-color: rgb(236, 236, 246); }.table-dark, .table-dark > td, .table-dark > th { background-color: rgb(198, 200, 202); }.table-hover .table-dark:hover { background-color: rgb(185, 187, 190); }.table-hover .table-dark:hover > td, .table-hover .table-dark:hover > th { background-color: rgb(185, 187, 190); }.table-active, .table-active > td, .table-active > th { background-color: rgba(0, 0, 0, 0.075); }.table-hover .table-active:hover { background-color: rgba(0, 0, 0, 0.075); }.table-hover .table-active:hover > td, .table-hover .table-active:hover > th { background-color: rgba(0, 0, 0, 0.075); }.table .thead-dark th { color: rgb(255, 255, 255); background-color: rgb(33, 37, 41); border-color: rgb(50, 56, 62); }.table .thead-light th { color: rgb(73, 80, 87); background-color: rgb(233, 236, 239); border-color: rgb(222, 226, 230); }.table-dark { color: rgb(255, 255, 255); background-color: rgb(33, 37, 41); }.table-dark td, .table-dark th, .table-dark thead th { border-color: rgb(50, 56, 62); }.table-dark.table-bordered { border: 0px; }.table-dark.table-striped tbody tr:nth-of-type(2n+1) { background-color: rgba(255, 255, 255, 0.05); }.table-dark.table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.075); }@media (max-width: 575.98px) {\n  .table-responsive-sm { display: block; width: 100%; overflow-x: auto; }\n  .table-responsive-sm > .table-bordered { border: 0px; }\n}@media (max-width: 767.98px) {\n  .table-responsive-md { display: block; width: 100%; overflow-x: auto; }\n  .table-responsive-md > .table-bordered { border: 0px; }\n}@media (max-width: 991.98px) {\n  .table-responsive-lg { display: block; width: 100%; overflow-x: auto; }\n  .table-responsive-lg > .table-bordered { border: 0px; }\n}@media (max-width: 1199.98px) {\n  .table-responsive-xl { display: block; width: 100%; overflow-x: auto; }\n  .table-responsive-xl > .table-bordered { border: 0px; }\n}.table-responsive { display: block; width: 100%; overflow-x: auto; }.table-responsive > .table-bordered { border: 0px; }.form-control { display: block; width: 100%; height: calc(2.25rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgb(206, 212, 218); border-radius: 0.25rem; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; }@media not all {\n  .form-control { transition: none 0s ease 0s; }\n}.form-control:focus { color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); border-color: rgb(128, 189, 255); outline: 0px; box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.form-control::-webkit-input-placeholder { color: rgb(108, 117, 125); opacity: 1; }.form-control::placeholder { color: rgb(108, 117, 125); opacity: 1; }.form-control:disabled, .form-control[readonly] { background-color: rgb(233, 236, 239); opacity: 1; }.form-control-file, .form-control-range { display: block; width: 100%; }.col-form-label { padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); margin-bottom: 0px; font-size: inherit; line-height: 1.5; }.col-form-label-lg { padding-top: calc(0.5rem + 1px); padding-bottom: calc(0.5rem + 1px); font-size: 1.25rem; line-height: 1.5; }.col-form-label-sm { padding-top: calc(0.25rem + 1px); padding-bottom: calc(0.25rem + 1px); font-size: 0.875rem; line-height: 1.5; }.form-control-plaintext { display: block; width: 100%; padding-top: 0.375rem; padding-bottom: 0.375rem; margin-bottom: 0px; line-height: 1.5; color: rgb(33, 37, 41); background-color: transparent; border-style: solid; border-color: transparent; border-image: initial; border-width: 1px 0px; }.form-control-plaintext.form-control-lg, .form-control-plaintext.form-control-sm { padding-right: 0px; padding-left: 0px; }.form-control-sm { height: calc(1.8125rem + 2px); padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }.form-control-lg { height: calc(2.875rem + 2px); padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; }select.form-control[multiple], select.form-control[size] { height: auto; }textarea.form-control { height: auto; }.form-group { margin-bottom: 1rem; }.form-text { display: block; margin-top: 0.25rem; }.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }.form-row > .col, .form-row > [class*=\"col-\"] { padding-right: 5px; padding-left: 5px; }.form-check { position: relative; display: block; padding-left: 1.25rem; }.form-check-input { position: absolute; margin-top: 0.3rem; margin-left: -1.25rem; }.form-check-input:disabled ~ .form-check-label { color: rgb(108, 117, 125); }.form-check-label { margin-bottom: 0px; }.form-check-inline { display: inline-flex; align-items: center; padding-left: 0px; margin-right: 0.75rem; }.form-check-inline .form-check-input { position: static; margin-top: 0px; margin-right: 0.3125rem; margin-left: 0px; }.valid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 80%; color: rgb(40, 167, 69); }.valid-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; font-size: 0.875rem; line-height: 1.5; color: rgb(255, 255, 255); background-color: rgba(40, 167, 69, 0.9); border-radius: 0.25rem; }.custom-select.is-valid, .form-control.is-valid, .was-validated .custom-select:valid, .was-validated .form-control:valid { border-color: rgb(40, 167, 69); }.custom-select.is-valid:focus, .form-control.is-valid:focus, .was-validated .custom-select:valid:focus, .was-validated .form-control:valid:focus { border-color: rgb(40, 167, 69); box-shadow: rgba(40, 167, 69, 0.25) 0px 0px 0px 0.2rem; }.custom-select.is-valid ~ .valid-feedback, .custom-select.is-valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback, .form-control.is-valid ~ .valid-tooltip, .was-validated .custom-select:valid ~ .valid-feedback, .was-validated .custom-select:valid ~ .valid-tooltip, .was-validated .form-control:valid ~ .valid-feedback, .was-validated .form-control:valid ~ .valid-tooltip { display: block; }.form-control-file.is-valid ~ .valid-feedback, .form-control-file.is-valid ~ .valid-tooltip, .was-validated .form-control-file:valid ~ .valid-feedback, .was-validated .form-control-file:valid ~ .valid-tooltip { display: block; }.form-check-input.is-valid ~ .form-check-label, .was-validated .form-check-input:valid ~ .form-check-label { color: rgb(40, 167, 69); }.form-check-input.is-valid ~ .valid-feedback, .form-check-input.is-valid ~ .valid-tooltip, .was-validated .form-check-input:valid ~ .valid-feedback, .was-validated .form-check-input:valid ~ .valid-tooltip { display: block; }.custom-control-input.is-valid ~ .custom-control-label, .was-validated .custom-control-input:valid ~ .custom-control-label { color: rgb(40, 167, 69); }.custom-control-input.is-valid ~ .custom-control-label::before, .was-validated .custom-control-input:valid ~ .custom-control-label::before { background-color: rgb(113, 221, 138); }.custom-control-input.is-valid ~ .valid-feedback, .custom-control-input.is-valid ~ .valid-tooltip, .was-validated .custom-control-input:valid ~ .valid-feedback, .was-validated .custom-control-input:valid ~ .valid-tooltip { display: block; }.custom-control-input.is-valid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:valid:checked ~ .custom-control-label::before { background-color: rgb(52, 206, 87); }.custom-control-input.is-valid:focus ~ .custom-control-label::before, .was-validated .custom-control-input:valid:focus ~ .custom-control-label::before { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(40, 167, 69, 0.25) 0px 0px 0px 0.2rem; }.custom-file-input.is-valid ~ .custom-file-label, .was-validated .custom-file-input:valid ~ .custom-file-label { border-color: rgb(40, 167, 69); }.custom-file-input.is-valid ~ .custom-file-label::after, .was-validated .custom-file-input:valid ~ .custom-file-label::after { border-color: inherit; }.custom-file-input.is-valid ~ .valid-feedback, .custom-file-input.is-valid ~ .valid-tooltip, .was-validated .custom-file-input:valid ~ .valid-feedback, .was-validated .custom-file-input:valid ~ .valid-tooltip { display: block; }.custom-file-input.is-valid:focus ~ .custom-file-label, .was-validated .custom-file-input:valid:focus ~ .custom-file-label { box-shadow: rgba(40, 167, 69, 0.25) 0px 0px 0px 0.2rem; }.invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 80%; color: rgb(220, 53, 69); }.invalid-tooltip { position: absolute; top: 100%; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; font-size: 0.875rem; line-height: 1.5; color: rgb(255, 255, 255); background-color: rgba(220, 53, 69, 0.9); border-radius: 0.25rem; }.custom-select.is-invalid, .form-control.is-invalid, .was-validated .custom-select:invalid, .was-validated .form-control:invalid { border-color: rgb(220, 53, 69); }.custom-select.is-invalid:focus, .form-control.is-invalid:focus, .was-validated .custom-select:invalid:focus, .was-validated .form-control:invalid:focus { border-color: rgb(220, 53, 69); box-shadow: rgba(220, 53, 69, 0.25) 0px 0px 0px 0.2rem; }.custom-select.is-invalid ~ .invalid-feedback, .custom-select.is-invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback, .form-control.is-invalid ~ .invalid-tooltip, .was-validated .custom-select:invalid ~ .invalid-feedback, .was-validated .custom-select:invalid ~ .invalid-tooltip, .was-validated .form-control:invalid ~ .invalid-feedback, .was-validated .form-control:invalid ~ .invalid-tooltip { display: block; }.form-control-file.is-invalid ~ .invalid-feedback, .form-control-file.is-invalid ~ .invalid-tooltip, .was-validated .form-control-file:invalid ~ .invalid-feedback, .was-validated .form-control-file:invalid ~ .invalid-tooltip { display: block; }.form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label { color: rgb(220, 53, 69); }.form-check-input.is-invalid ~ .invalid-feedback, .form-check-input.is-invalid ~ .invalid-tooltip, .was-validated .form-check-input:invalid ~ .invalid-feedback, .was-validated .form-check-input:invalid ~ .invalid-tooltip { display: block; }.custom-control-input.is-invalid ~ .custom-control-label, .was-validated .custom-control-input:invalid ~ .custom-control-label { color: rgb(220, 53, 69); }.custom-control-input.is-invalid ~ .custom-control-label::before, .was-validated .custom-control-input:invalid ~ .custom-control-label::before { background-color: rgb(239, 162, 169); }.custom-control-input.is-invalid ~ .invalid-feedback, .custom-control-input.is-invalid ~ .invalid-tooltip, .was-validated .custom-control-input:invalid ~ .invalid-feedback, .was-validated .custom-control-input:invalid ~ .invalid-tooltip { display: block; }.custom-control-input.is-invalid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before { background-color: rgb(228, 96, 109); }.custom-control-input.is-invalid:focus ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(220, 53, 69, 0.25) 0px 0px 0px 0.2rem; }.custom-file-input.is-invalid ~ .custom-file-label, .was-validated .custom-file-input:invalid ~ .custom-file-label { border-color: rgb(220, 53, 69); }.custom-file-input.is-invalid ~ .custom-file-label::after, .was-validated .custom-file-input:invalid ~ .custom-file-label::after { border-color: inherit; }.custom-file-input.is-invalid ~ .invalid-feedback, .custom-file-input.is-invalid ~ .invalid-tooltip, .was-validated .custom-file-input:invalid ~ .invalid-feedback, .was-validated .custom-file-input:invalid ~ .invalid-tooltip { display: block; }.custom-file-input.is-invalid:focus ~ .custom-file-label, .was-validated .custom-file-input:invalid:focus ~ .custom-file-label { box-shadow: rgba(220, 53, 69, 0.25) 0px 0px 0px 0.2rem; }.form-inline { display: flex; flex-flow: row wrap; align-items: center; }.form-inline .form-check { width: 100%; }@media (min-width: 576px) {\n  .form-inline label { display: flex; align-items: center; justify-content: center; margin-bottom: 0px; }\n  .form-inline .form-group { display: flex; flex: 0 0 auto; flex-flow: row wrap; align-items: center; margin-bottom: 0px; }\n  .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }\n  .form-inline .form-control-plaintext { display: inline-block; }\n  .form-inline .custom-select, .form-inline .input-group { width: auto; }\n  .form-inline .form-check { display: flex; align-items: center; justify-content: center; width: auto; padding-left: 0px; }\n  .form-inline .form-check-input { position: relative; margin-top: 0px; margin-right: 0.25rem; margin-left: 0px; }\n  .form-inline .custom-control { align-items: center; justify-content: center; }\n  .form-inline .custom-control-label { margin-bottom: 0px; }\n}.btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; user-select: none; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; }@media not all {\n  .btn { transition: none 0s ease 0s; }\n}.btn:focus, .btn:hover { text-decoration: none; }.btn.focus, .btn:focus { outline: 0px; box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.btn.disabled, .btn:disabled { opacity: 0.65; }.btn:not(:disabled):not(.disabled) { cursor: pointer; }a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; }.btn-primary { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.btn-primary:hover { color: rgb(255, 255, 255); background-color: rgb(0, 105, 217); border-color: rgb(0, 98, 204); }.btn-primary.focus, .btn-primary:focus { box-shadow: rgba(0, 123, 255, 0.5) 0px 0px 0px 0.2rem; }.btn-primary.disabled, .btn-primary:disabled { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(0, 98, 204); border-color: rgb(0, 92, 191); }.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus { box-shadow: rgba(0, 123, 255, 0.5) 0px 0px 0px 0.2rem; }.btn-secondary { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); border-color: rgb(108, 117, 125); }.btn-secondary:hover { color: rgb(255, 255, 255); background-color: rgb(90, 98, 104); border-color: rgb(84, 91, 98); }.btn-secondary.focus, .btn-secondary:focus { box-shadow: rgba(108, 117, 125, 0.5) 0px 0px 0px 0.2rem; }.btn-secondary.disabled, .btn-secondary:disabled { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); border-color: rgb(108, 117, 125); }.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(84, 91, 98); border-color: rgb(78, 85, 91); }.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus { box-shadow: rgba(108, 117, 125, 0.5) 0px 0px 0px 0.2rem; }.btn-success { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69); }.btn-success:hover { color: rgb(255, 255, 255); background-color: rgb(33, 136, 56); border-color: rgb(30, 126, 52); }.btn-success.focus, .btn-success:focus { box-shadow: rgba(40, 167, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-success.disabled, .btn-success:disabled { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69); }.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(30, 126, 52); border-color: rgb(28, 116, 48); }.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show > .btn-success.dropdown-toggle:focus { box-shadow: rgba(40, 167, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-info { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); border-color: rgb(23, 162, 184); }.btn-info:hover { color: rgb(255, 255, 255); background-color: rgb(19, 132, 150); border-color: rgb(17, 122, 139); }.btn-info.focus, .btn-info:focus { box-shadow: rgba(23, 162, 184, 0.5) 0px 0px 0px 0.2rem; }.btn-info.disabled, .btn-info:disabled { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); border-color: rgb(23, 162, 184); }.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show > .btn-info.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(17, 122, 139); border-color: rgb(16, 112, 127); }.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, .show > .btn-info.dropdown-toggle:focus { box-shadow: rgba(23, 162, 184, 0.5) 0px 0px 0px 0.2rem; }.btn-warning { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); border-color: rgb(255, 193, 7); }.btn-warning:hover { color: rgb(33, 37, 41); background-color: rgb(224, 168, 0); border-color: rgb(211, 158, 0); }.btn-warning.focus, .btn-warning:focus { box-shadow: rgba(255, 193, 7, 0.5) 0px 0px 0px 0.2rem; }.btn-warning.disabled, .btn-warning:disabled { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); border-color: rgb(255, 193, 7); }.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show > .btn-warning.dropdown-toggle { color: rgb(33, 37, 41); background-color: rgb(211, 158, 0); border-color: rgb(198, 149, 0); }.btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus, .show > .btn-warning.dropdown-toggle:focus { box-shadow: rgba(255, 193, 7, 0.5) 0px 0px 0px 0.2rem; }.btn-danger { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); border-color: rgb(220, 53, 69); }.btn-danger:hover { color: rgb(255, 255, 255); background-color: rgb(200, 35, 51); border-color: rgb(189, 33, 48); }.btn-danger.focus, .btn-danger:focus { box-shadow: rgba(220, 53, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-danger.disabled, .btn-danger:disabled { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); border-color: rgb(220, 53, 69); }.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(189, 33, 48); border-color: rgb(178, 31, 45); }.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-danger.dropdown-toggle:focus { box-shadow: rgba(220, 53, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-light { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); border-color: rgb(248, 249, 250); }.btn-light:hover { color: rgb(33, 37, 41); background-color: rgb(226, 230, 234); border-color: rgb(218, 224, 229); }.btn-light.focus, .btn-light:focus { box-shadow: rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem; }.btn-light.disabled, .btn-light:disabled { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); border-color: rgb(248, 249, 250); }.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle { color: rgb(33, 37, 41); background-color: rgb(218, 224, 229); border-color: rgb(211, 217, 223); }.btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus, .show > .btn-light.dropdown-toggle:focus { box-shadow: rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem; }.btn-dark { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); border-color: rgb(52, 58, 64); }.btn-dark:hover { color: rgb(255, 255, 255); background-color: rgb(35, 39, 43); border-color: rgb(29, 33, 36); }.btn-dark.focus, .btn-dark:focus { box-shadow: rgba(52, 58, 64, 0.5) 0px 0px 0px 0.2rem; }.btn-dark.disabled, .btn-dark:disabled { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); border-color: rgb(52, 58, 64); }.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, .show > .btn-dark.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(29, 33, 36); border-color: rgb(23, 26, 29); }.btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-dark.dropdown-toggle:focus { box-shadow: rgba(52, 58, 64, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-primary { color: rgb(0, 123, 255); background-color: transparent; background-image: none; border-color: rgb(0, 123, 255); }.btn-outline-primary:hover { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.btn-outline-primary.focus, .btn-outline-primary:focus { box-shadow: rgba(0, 123, 255, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-primary.disabled, .btn-outline-primary:disabled { color: rgb(0, 123, 255); background-color: transparent; }.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: rgba(0, 123, 255, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-secondary { color: rgb(108, 117, 125); background-color: transparent; background-image: none; border-color: rgb(108, 117, 125); }.btn-outline-secondary:hover { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); border-color: rgb(108, 117, 125); }.btn-outline-secondary.focus, .btn-outline-secondary:focus { box-shadow: rgba(108, 117, 125, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-secondary.disabled, .btn-outline-secondary:disabled { color: rgb(108, 117, 125); background-color: transparent; }.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show > .btn-outline-secondary.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); border-color: rgb(108, 117, 125); }.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus { box-shadow: rgba(108, 117, 125, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-success { color: rgb(40, 167, 69); background-color: transparent; background-image: none; border-color: rgb(40, 167, 69); }.btn-outline-success:hover { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69); }.btn-outline-success.focus, .btn-outline-success:focus { box-shadow: rgba(40, 167, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-success.disabled, .btn-outline-success:disabled { color: rgb(40, 167, 69); background-color: transparent; }.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, .show > .btn-outline-success.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); border-color: rgb(40, 167, 69); }.btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-success.dropdown-toggle:focus { box-shadow: rgba(40, 167, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-info { color: rgb(23, 162, 184); background-color: transparent; background-image: none; border-color: rgb(23, 162, 184); }.btn-outline-info:hover { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); border-color: rgb(23, 162, 184); }.btn-outline-info.focus, .btn-outline-info:focus { box-shadow: rgba(23, 162, 184, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-info.disabled, .btn-outline-info:disabled { color: rgb(23, 162, 184); background-color: transparent; }.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, .show > .btn-outline-info.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); border-color: rgb(23, 162, 184); }.btn-outline-info:not(:disabled):not(.disabled).active:focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-info.dropdown-toggle:focus { box-shadow: rgba(23, 162, 184, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-warning { color: rgb(255, 193, 7); background-color: transparent; background-image: none; border-color: rgb(255, 193, 7); }.btn-outline-warning:hover { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); border-color: rgb(255, 193, 7); }.btn-outline-warning.focus, .btn-outline-warning:focus { box-shadow: rgba(255, 193, 7, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-warning.disabled, .btn-outline-warning:disabled { color: rgb(255, 193, 7); background-color: transparent; }.btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active, .show > .btn-outline-warning.dropdown-toggle { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); border-color: rgb(255, 193, 7); }.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-warning.dropdown-toggle:focus { box-shadow: rgba(255, 193, 7, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-danger { color: rgb(220, 53, 69); background-color: transparent; background-image: none; border-color: rgb(220, 53, 69); }.btn-outline-danger:hover { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); border-color: rgb(220, 53, 69); }.btn-outline-danger.focus, .btn-outline-danger:focus { box-shadow: rgba(220, 53, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-danger.disabled, .btn-outline-danger:disabled { color: rgb(220, 53, 69); background-color: transparent; }.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, .show > .btn-outline-danger.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); border-color: rgb(220, 53, 69); }.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-danger.dropdown-toggle:focus { box-shadow: rgba(220, 53, 69, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-light { color: rgb(248, 249, 250); background-color: transparent; background-image: none; border-color: rgb(248, 249, 250); }.btn-outline-light:hover { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); border-color: rgb(248, 249, 250); }.btn-outline-light.focus, .btn-outline-light:focus { box-shadow: rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-light.disabled, .btn-outline-light:disabled { color: rgb(248, 249, 250); background-color: transparent; }.btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, .show > .btn-outline-light.dropdown-toggle { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); border-color: rgb(248, 249, 250); }.btn-outline-light:not(:disabled):not(.disabled).active:focus, .btn-outline-light:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-light.dropdown-toggle:focus { box-shadow: rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-dark { color: rgb(52, 58, 64); background-color: transparent; background-image: none; border-color: rgb(52, 58, 64); }.btn-outline-dark:hover { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); border-color: rgb(52, 58, 64); }.btn-outline-dark.focus, .btn-outline-dark:focus { box-shadow: rgba(52, 58, 64, 0.5) 0px 0px 0px 0.2rem; }.btn-outline-dark.disabled, .btn-outline-dark:disabled { color: rgb(52, 58, 64); background-color: transparent; }.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, .show > .btn-outline-dark.dropdown-toggle { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); border-color: rgb(52, 58, 64); }.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-dark.dropdown-toggle:focus { box-shadow: rgba(52, 58, 64, 0.5) 0px 0px 0px 0.2rem; }.btn-link { font-weight: 400; color: rgb(0, 123, 255); background-color: transparent; }.btn-link:hover { color: rgb(0, 86, 179); text-decoration: underline; background-color: transparent; border-color: transparent; }.btn-link.focus, .btn-link:focus { text-decoration: underline; border-color: transparent; box-shadow: none; }.btn-link.disabled, .btn-link:disabled { color: rgb(108, 117, 125); pointer-events: none; }.btn-group-lg > .btn, .btn-lg { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; }.btn-group-sm > .btn, .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }.btn-block { display: block; width: 100%; }.btn-block + .btn-block { margin-top: 0.5rem; }input[type=\"button\"].btn-block, input[type=\"reset\"].btn-block, input[type=\"submit\"].btn-block { width: 100%; }.fade { transition: opacity 0.15s linear 0s; }@media not all {\n  .fade { transition: none 0s ease 0s; }\n}.fade:not(.show) { opacity: 0; }.collapse:not(.show) { display: none; }.collapsing { position: relative; height: 0px; overflow: hidden; transition: height 0.35s ease 0s; }@media not all {\n  .collapsing { transition: none 0s ease 0s; }\n}.dropdown, .dropleft, .dropright, .dropup { position: relative; }.dropdown-toggle::after { display: inline-block; width: 0px; height: 0px; margin-left: 0.255em; vertical-align: 0.255em; content: \"\"; border-width: 0.3em 0.3em 0px; border-top-style: solid; border-top-color: initial; border-right-style: solid; border-right-color: transparent; border-bottom-style: initial; border-bottom-color: initial; border-left-style: solid; border-left-color: transparent; }.dropdown-toggle:empty::after { margin-left: 0px; }.dropdown-menu { position: absolute; top: 100%; left: 0px; z-index: 1000; display: none; float: left; min-width: 10rem; padding: 0.5rem 0px; margin: 0.125rem 0px 0px; font-size: 1rem; color: rgb(33, 37, 41); text-align: left; list-style: none; background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; }.dropdown-menu-right { right: 0px; left: auto; }.dropup .dropdown-menu { top: auto; bottom: 100%; margin-top: 0px; margin-bottom: 0.125rem; }.dropup .dropdown-toggle::after { display: inline-block; width: 0px; height: 0px; margin-left: 0.255em; vertical-align: 0.255em; content: \"\"; border-width: 0px 0.3em 0.3em; border-top-style: initial; border-top-color: initial; border-right-style: solid; border-right-color: transparent; border-bottom-style: solid; border-bottom-color: initial; border-left-style: solid; border-left-color: transparent; }.dropup .dropdown-toggle:empty::after { margin-left: 0px; }.dropright .dropdown-menu { top: 0px; right: auto; left: 100%; margin-top: 0px; margin-left: 0.125rem; }.dropright .dropdown-toggle::after { display: inline-block; width: 0px; height: 0px; margin-left: 0.255em; vertical-align: 0.255em; content: \"\"; border-width: 0.3em 0px 0.3em 0.3em; border-top-style: solid; border-top-color: transparent; border-right-style: initial; border-right-color: initial; border-bottom-style: solid; border-bottom-color: transparent; border-left-style: solid; border-left-color: initial; }.dropright .dropdown-toggle:empty::after { margin-left: 0px; }.dropright .dropdown-toggle::after { vertical-align: 0px; }.dropleft .dropdown-menu { top: 0px; right: 100%; left: auto; margin-top: 0px; margin-right: 0.125rem; }.dropleft .dropdown-toggle::after { display: inline-block; width: 0px; height: 0px; margin-left: 0.255em; vertical-align: 0.255em; content: \"\"; }.dropleft .dropdown-toggle::after { display: none; }.dropleft .dropdown-toggle::before { display: inline-block; width: 0px; height: 0px; margin-right: 0.255em; vertical-align: 0.255em; content: \"\"; border-top: 0.3em solid transparent; border-right: 0.3em solid; border-bottom: 0.3em solid transparent; }.dropleft .dropdown-toggle:empty::after { margin-left: 0px; }.dropleft .dropdown-toggle::before { vertical-align: 0px; }.dropdown-menu[x-placement^=\"bottom\"], .dropdown-menu[x-placement^=\"left\"], .dropdown-menu[x-placement^=\"right\"], .dropdown-menu[x-placement^=\"top\"] { right: auto; bottom: auto; }.dropdown-divider { height: 0px; margin: 0.5rem 0px; overflow: hidden; border-top: 1px solid rgb(233, 236, 239); }.dropdown-item { display: block; width: 100%; padding: 0.25rem 1.5rem; clear: both; font-weight: 400; color: rgb(33, 37, 41); text-align: inherit; white-space: nowrap; background-color: transparent; border: 0px; }.dropdown-item:focus, .dropdown-item:hover { color: rgb(22, 24, 27); text-decoration: none; background-color: rgb(248, 249, 250); }.dropdown-item.active, .dropdown-item:active { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(0, 123, 255); }.dropdown-item.disabled, .dropdown-item:disabled { color: rgb(108, 117, 125); background-color: transparent; }.dropdown-menu.show { display: block; }.dropdown-header { display: block; padding: 0.5rem 1.5rem; margin-bottom: 0px; font-size: 0.875rem; color: rgb(108, 117, 125); white-space: nowrap; }.dropdown-item-text { display: block; padding: 0.25rem 1.5rem; color: rgb(33, 37, 41); }.btn-group, .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; }.btn-group-vertical > .btn, .btn-group > .btn { position: relative; flex: 0 1 auto; }.btn-group-vertical > .btn:hover, .btn-group > .btn:hover { z-index: 1; }.btn-group-vertical > .btn.active, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn:focus, .btn-group > .btn.active, .btn-group > .btn:active, .btn-group > .btn:focus { z-index: 1; }.btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group, .btn-group-vertical .btn + .btn, .btn-group-vertical .btn + .btn-group, .btn-group-vertical .btn-group + .btn, .btn-group-vertical .btn-group + .btn-group { margin-left: -1px; }.btn-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-start; }.btn-toolbar .input-group { width: auto; }.btn-group > .btn:first-child { margin-left: 0px; }.btn-group > .btn-group:not(:last-child) > .btn, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }.btn-group > .btn-group:not(:first-child) > .btn, .btn-group > .btn:not(:first-child) { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }.dropdown-toggle-split { padding-right: 0.5625rem; padding-left: 0.5625rem; }.dropdown-toggle-split::after, .dropright .dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after { margin-left: 0px; }.dropleft .dropdown-toggle-split::before { margin-right: 0px; }.btn-group-sm > .btn + .dropdown-toggle-split, .btn-sm + .dropdown-toggle-split { padding-right: 0.375rem; padding-left: 0.375rem; }.btn-group-lg > .btn + .dropdown-toggle-split, .btn-lg + .dropdown-toggle-split { padding-right: 0.75rem; padding-left: 0.75rem; }.btn-group-vertical { flex-direction: column; align-items: flex-start; justify-content: center; }.btn-group-vertical .btn, .btn-group-vertical .btn-group { width: 100%; }.btn-group-vertical > .btn + .btn, .btn-group-vertical > .btn + .btn-group, .btn-group-vertical > .btn-group + .btn, .btn-group-vertical > .btn-group + .btn-group { margin-top: -1px; margin-left: 0px; }.btn-group-vertical > .btn-group:not(:last-child) > .btn, .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle) { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; }.btn-group-vertical > .btn-group:not(:first-child) > .btn, .btn-group-vertical > .btn:not(:first-child) { border-top-left-radius: 0px; border-top-right-radius: 0px; }.btn-group-toggle > .btn, .btn-group-toggle > .btn-group > .btn { margin-bottom: 0px; }.btn-group-toggle > .btn input[type=\"checkbox\"], .btn-group-toggle > .btn input[type=\"radio\"], .btn-group-toggle > .btn-group > .btn input[type=\"checkbox\"], .btn-group-toggle > .btn-group > .btn input[type=\"radio\"] { position: absolute; clip: rect(0px, 0px, 0px, 0px); pointer-events: none; }.input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }.input-group > .custom-file, .input-group > .custom-select, .input-group > .form-control { position: relative; flex: 1 1 auto; width: 1%; margin-bottom: 0px; }.input-group > .custom-file + .custom-file, .input-group > .custom-file + .custom-select, .input-group > .custom-file + .form-control, .input-group > .custom-select + .custom-file, .input-group > .custom-select + .custom-select, .input-group > .custom-select + .form-control, .input-group > .form-control + .custom-file, .input-group > .form-control + .custom-select, .input-group > .form-control + .form-control { margin-left: -1px; }.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label, .input-group > .custom-select:focus, .input-group > .form-control:focus { z-index: 3; }.input-group > .custom-file .custom-file-input:focus { z-index: 4; }.input-group > .custom-select:not(:last-child), .input-group > .form-control:not(:last-child) { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }.input-group > .custom-select:not(:first-child), .input-group > .form-control:not(:first-child) { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }.input-group > .custom-file { display: flex; align-items: center; }.input-group > .custom-file:not(:last-child) .custom-file-label, .input-group > .custom-file:not(:last-child) .custom-file-label::after { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }.input-group > .custom-file:not(:first-child) .custom-file-label { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }.input-group-append, .input-group-prepend { display: flex; }.input-group-append .btn, .input-group-prepend .btn { position: relative; z-index: 2; }.input-group-append .btn + .btn, .input-group-append .btn + .input-group-text, .input-group-append .input-group-text + .btn, .input-group-append .input-group-text + .input-group-text, .input-group-prepend .btn + .btn, .input-group-prepend .btn + .input-group-text, .input-group-prepend .input-group-text + .btn, .input-group-prepend .input-group-text + .input-group-text { margin-left: -1px; }.input-group-prepend { margin-right: -1px; }.input-group-append { margin-left: -1px; }.input-group-text { display: flex; align-items: center; padding: 0.375rem 0.75rem; margin-bottom: 0px; font-size: 1rem; font-weight: 400; line-height: 1.5; color: rgb(73, 80, 87); text-align: center; white-space: nowrap; background-color: rgb(233, 236, 239); border: 1px solid rgb(206, 212, 218); border-radius: 0.25rem; }.input-group-text input[type=\"checkbox\"], .input-group-text input[type=\"radio\"] { margin-top: 0px; }.input-group-lg > .form-control, .input-group-lg > .input-group-append > .btn, .input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-prepend > .btn, .input-group-lg > .input-group-prepend > .input-group-text { height: calc(2.875rem + 2px); padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; }.input-group-sm > .form-control, .input-group-sm > .input-group-append > .btn, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-prepend > .input-group-text { height: calc(1.8125rem + 2px); padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child), .input-group > .input-group-append:not(:last-child) > .btn, .input-group > .input-group-append:not(:last-child) > .input-group-text, .input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }.input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child), .input-group > .input-group-prepend:not(:first-child) > .btn, .input-group > .input-group-prepend:not(:first-child) > .input-group-text { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }.custom-control { position: relative; display: block; min-height: 1.5rem; padding-left: 1.5rem; }.custom-control-inline { display: inline-flex; margin-right: 1rem; }.custom-control-input { position: absolute; z-index: -1; opacity: 0; }.custom-control-input:checked ~ .custom-control-label::before { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); }.custom-control-input:focus ~ .custom-control-label::before { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.custom-control-input:active ~ .custom-control-label::before { color: rgb(255, 255, 255); background-color: rgb(179, 215, 255); }.custom-control-input:disabled ~ .custom-control-label { color: rgb(108, 117, 125); }.custom-control-input:disabled ~ .custom-control-label::before { background-color: rgb(233, 236, 239); }.custom-control-label { position: relative; margin-bottom: 0px; }.custom-control-label::before { position: absolute; top: 0.25rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; pointer-events: none; content: \"\"; user-select: none; background-color: rgb(222, 226, 230); }.custom-control-label::after { position: absolute; top: 0.25rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; content: \"\"; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; }.custom-checkbox .custom-control-label::before { border-radius: 0.25rem; }.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: rgb(0, 123, 255); }.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E\"); }.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: rgb(0, 123, 255); }.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E\"); }.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(0, 123, 255, 0.5); }.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { background-color: rgba(0, 123, 255, 0.5); }.custom-radio .custom-control-label::before { border-radius: 50%; }.custom-radio .custom-control-input:checked ~ .custom-control-label::before { background-color: rgb(0, 123, 255); }.custom-radio .custom-control-input:checked ~ .custom-control-label::after { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E\"); }.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(0, 123, 255, 0.5); }.custom-select { display: inline-block; width: 100%; height: calc(2.25rem + 2px); padding: 0.375rem 1.75rem 0.375rem 0.75rem; line-height: 1.5; color: rgb(73, 80, 87); vertical-align: middle; background: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E\") right 0.75rem center / 8px 10px no-repeat rgb(255, 255, 255); border: 1px solid rgb(206, 212, 218); border-radius: 0.25rem; -webkit-appearance: none; }.custom-select:focus { border-color: rgb(128, 189, 255); outline: 0px; box-shadow: rgba(128, 189, 255, 0.5) 0px 0px 0px 0.2rem; }.custom-select[multiple], .custom-select[size]:not([size=\"1\"]) { height: auto; padding-right: 0.75rem; background-image: none; }.custom-select:disabled { color: rgb(108, 117, 125); background-color: rgb(233, 236, 239); }.custom-select-sm { height: calc(1.8125rem + 2px); padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 75%; }.custom-select-lg { height: calc(2.875rem + 2px); padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 125%; }.custom-file { position: relative; display: inline-block; width: 100%; height: calc(2.25rem + 2px); margin-bottom: 0px; }.custom-file-input { position: relative; z-index: 2; width: 100%; height: calc(2.25rem + 2px); margin: 0px; opacity: 0; }.custom-file-input:focus ~ .custom-file-label { border-color: rgb(128, 189, 255); box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.custom-file-input:focus ~ .custom-file-label::after { border-color: rgb(128, 189, 255); }.custom-file-input:disabled ~ .custom-file-label { background-color: rgb(233, 236, 239); }.custom-file-input:lang(en) ~ .custom-file-label::after { content: \"Browse\"; }.custom-file-label { position: absolute; top: 0px; right: 0px; left: 0px; z-index: 1; height: calc(2.25rem + 2px); padding: 0.375rem 0.75rem; line-height: 1.5; color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); border: 1px solid rgb(206, 212, 218); border-radius: 0.25rem; }.custom-file-label::after { position: absolute; top: 0px; right: 0px; bottom: 0px; z-index: 3; display: block; height: 2.25rem; padding: 0.375rem 0.75rem; line-height: 1.5; color: rgb(73, 80, 87); content: \"Browse\"; background-color: rgb(233, 236, 239); border-left: 1px solid rgb(206, 212, 218); border-radius: 0px 0.25rem 0.25rem 0px; }.custom-range { width: 100%; padding-left: 0px; background-color: transparent; -webkit-appearance: none; }.custom-range:focus { outline: 0px; }.custom-range:focus::-webkit-slider-thumb { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.custom-range::-webkit-slider-thumb { width: 1rem; height: 1rem; margin-top: -0.25rem; background-color: rgb(0, 123, 255); border: 0px; border-radius: 1rem; transition: background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; -webkit-appearance: none; }@media not all {\n  .custom-range::-webkit-slider-thumb { transition: none 0s ease 0s; }\n}.custom-range::-webkit-slider-thumb:active { background-color: rgb(179, 215, 255); }.custom-range::-webkit-slider-runnable-track { width: 100%; height: 0.5rem; color: transparent; cursor: pointer; background-color: rgb(222, 226, 230); border-color: transparent; border-radius: 1rem; }@media not all {\n}@media not all {\n}.custom-control-label::before, .custom-file-label, .custom-select { transition: background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; }@media not all {\n  .custom-control-label::before, .custom-file-label, .custom-select { transition: none 0s ease 0s; }\n}.nav { display: flex; flex-wrap: wrap; padding-left: 0px; margin-bottom: 0px; list-style: none; }.nav-link { display: block; padding: 0.5rem 1rem; }.nav-link:focus, .nav-link:hover { text-decoration: none; }.nav-link.disabled { color: rgb(108, 117, 125); }.nav-tabs { border-bottom: 1px solid rgb(222, 226, 230); }.nav-tabs .nav-item { margin-bottom: -1px; }.nav-tabs .nav-link { border: 1px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { border-color: rgb(233, 236, 239) rgb(233, 236, 239) rgb(222, 226, 230); }.nav-tabs .nav-link.disabled { color: rgb(108, 117, 125); background-color: transparent; border-color: transparent; }.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: rgb(73, 80, 87); background-color: rgb(255, 255, 255); border-color: rgb(222, 226, 230) rgb(222, 226, 230) rgb(255, 255, 255); }.nav-tabs .dropdown-menu { margin-top: -1px; border-top-left-radius: 0px; border-top-right-radius: 0px; }.nav-pills .nav-link { border-radius: 0.25rem; }.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); }.nav-fill .nav-item { flex: 1 1 auto; text-align: center; }.nav-justified .nav-item { flex-basis: 0px; flex-grow: 1; text-align: center; }.tab-content > .tab-pane { display: none; }.tab-content > .active { display: block; }.navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; }.navbar > .container, .navbar > .container-fluid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }.navbar-brand { display: inline-block; padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 1rem; font-size: 1.25rem; line-height: inherit; white-space: nowrap; }.navbar-brand:focus, .navbar-brand:hover { text-decoration: none; }.navbar-nav { display: flex; flex-direction: column; padding-left: 0px; margin-bottom: 0px; list-style: none; }.navbar-nav .nav-link { padding-right: 0px; padding-left: 0px; }.navbar-nav .dropdown-menu { position: static; float: none; }.navbar-text { display: inline-block; padding-top: 0.5rem; padding-bottom: 0.5rem; }.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; }.navbar-toggler { padding: 0.25rem 0.75rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; }.navbar-toggler:focus, .navbar-toggler:hover { text-decoration: none; }.navbar-toggler:not(:disabled):not(.disabled) { cursor: pointer; }.navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; content: \"\"; background: center center / 100% 100% no-repeat; }@media (max-width: 575.98px) {\n  .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { padding-right: 0px; padding-left: 0px; }\n}@media (min-width: 576px) {\n  .navbar-expand-sm { flex-flow: row nowrap; justify-content: flex-start; }\n  .navbar-expand-sm .navbar-nav { flex-direction: row; }\n  .navbar-expand-sm .navbar-nav .dropdown-menu { position: absolute; }\n  .navbar-expand-sm .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }\n  .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { flex-wrap: nowrap; }\n  .navbar-expand-sm .navbar-collapse { flex-basis: auto; display: flex !important; }\n  .navbar-expand-sm .navbar-toggler { display: none; }\n}@media (max-width: 767.98px) {\n  .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { padding-right: 0px; padding-left: 0px; }\n}@media (min-width: 768px) {\n  .navbar-expand-md { flex-flow: row nowrap; justify-content: flex-start; }\n  .navbar-expand-md .navbar-nav { flex-direction: row; }\n  .navbar-expand-md .navbar-nav .dropdown-menu { position: absolute; }\n  .navbar-expand-md .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }\n  .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { flex-wrap: nowrap; }\n  .navbar-expand-md .navbar-collapse { flex-basis: auto; display: flex !important; }\n  .navbar-expand-md .navbar-toggler { display: none; }\n}@media (max-width: 991.98px) {\n  .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { padding-right: 0px; padding-left: 0px; }\n}@media (min-width: 992px) {\n  .navbar-expand-lg { flex-flow: row nowrap; justify-content: flex-start; }\n  .navbar-expand-lg .navbar-nav { flex-direction: row; }\n  .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; }\n  .navbar-expand-lg .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }\n  .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { flex-wrap: nowrap; }\n  .navbar-expand-lg .navbar-collapse { flex-basis: auto; display: flex !important; }\n  .navbar-expand-lg .navbar-toggler { display: none; }\n}@media (max-width: 1199.98px) {\n  .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { padding-right: 0px; padding-left: 0px; }\n}@media (min-width: 1200px) {\n  .navbar-expand-xl { flex-flow: row nowrap; justify-content: flex-start; }\n  .navbar-expand-xl .navbar-nav { flex-direction: row; }\n  .navbar-expand-xl .navbar-nav .dropdown-menu { position: absolute; }\n  .navbar-expand-xl .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }\n  .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { flex-wrap: nowrap; }\n  .navbar-expand-xl .navbar-collapse { flex-basis: auto; display: flex !important; }\n  .navbar-expand-xl .navbar-toggler { display: none; }\n}.navbar-expand { flex-flow: row nowrap; justify-content: flex-start; }.navbar-expand > .container, .navbar-expand > .container-fluid { padding-right: 0px; padding-left: 0px; }.navbar-expand .navbar-nav { flex-direction: row; }.navbar-expand .navbar-nav .dropdown-menu { position: absolute; }.navbar-expand .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }.navbar-expand > .container, .navbar-expand > .container-fluid { flex-wrap: nowrap; }.navbar-expand .navbar-collapse { flex-basis: auto; display: flex !important; }.navbar-expand .navbar-toggler { display: none; }.navbar-light .navbar-brand { color: rgba(0, 0, 0, 0.9); }.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover { color: rgba(0, 0, 0, 0.9); }.navbar-light .navbar-nav .nav-link { color: rgba(0, 0, 0, 0.5); }.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { color: rgba(0, 0, 0, 0.7); }.navbar-light .navbar-nav .nav-link.disabled { color: rgba(0, 0, 0, 0.3); }.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link { color: rgba(0, 0, 0, 0.9); }.navbar-light .navbar-toggler { color: rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.1); }.navbar-light .navbar-toggler-icon { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E\"); }.navbar-light .navbar-text { color: rgba(0, 0, 0, 0.5); }.navbar-light .navbar-text a { color: rgba(0, 0, 0, 0.9); }.navbar-light .navbar-text a:focus, .navbar-light .navbar-text a:hover { color: rgba(0, 0, 0, 0.9); }.navbar-dark .navbar-brand { color: rgb(255, 255, 255); }.navbar-dark .navbar-brand:focus, .navbar-dark .navbar-brand:hover { color: rgb(255, 255, 255); }.navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.5); }.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover { color: rgba(255, 255, 255, 0.75); }.navbar-dark .navbar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.25); }.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link { color: rgb(255, 255, 255); }.navbar-dark .navbar-toggler { color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.1); }.navbar-dark .navbar-toggler-icon { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E\"); }.navbar-dark .navbar-text { color: rgba(255, 255, 255, 0.5); }.navbar-dark .navbar-text a { color: rgb(255, 255, 255); }.navbar-dark .navbar-text a:focus, .navbar-dark .navbar-text a:hover { color: rgb(255, 255, 255); }.card { position: relative; display: flex; flex-direction: column; min-width: 0px; word-wrap: break-word; background-color: rgb(255, 255, 255); background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem; }.card > hr { margin-right: 0px; margin-left: 0px; }.card > .list-group:first-child .list-group-item:first-child { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }.card > .list-group:last-child .list-group-item:last-child { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }.card-body { flex: 1 1 auto; padding: 1.25rem; }.card-title { margin-bottom: 0.75rem; }.card-subtitle { margin-top: -0.375rem; margin-bottom: 0px; }.card-text:last-child { margin-bottom: 0px; }.card-link:hover { text-decoration: none; }.card-link + .card-link { margin-left: 1.25rem; }.card-header { padding: 0.75rem 1.25rem; margin-bottom: 0px; background-color: rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.125); }.card-header:first-child { border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0px 0px; }.card-header + .list-group .list-group-item:first-child { border-top: 0px; }.card-footer { padding: 0.75rem 1.25rem; background-color: rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(0, 0, 0, 0.125); }.card-footer:last-child { border-radius: 0px 0px calc(0.25rem - 1px) calc(0.25rem - 1px); }.card-header-tabs { margin-right: -0.625rem; margin-bottom: -0.75rem; margin-left: -0.625rem; border-bottom: 0px; }.card-header-pills { margin-right: -0.625rem; margin-left: -0.625rem; }.card-img-overlay { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; padding: 1.25rem; }.card-img { width: 100%; border-radius: calc(0.25rem - 1px); }.card-img-top { width: 100%; border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); }.card-img-bottom { width: 100%; border-bottom-right-radius: calc(0.25rem - 1px); border-bottom-left-radius: calc(0.25rem - 1px); }.card-deck { display: flex; flex-direction: column; }.card-deck .card { margin-bottom: 15px; }@media (min-width: 576px) {\n  .card-deck { flex-flow: row wrap; margin-right: -15px; margin-left: -15px; }\n  .card-deck .card { display: flex; flex: 1 0 0%; flex-direction: column; margin-right: 15px; margin-bottom: 0px; margin-left: 15px; }\n}.card-group { display: flex; flex-direction: column; }.card-group > .card { margin-bottom: 15px; }@media (min-width: 576px) {\n  .card-group { flex-flow: row wrap; }\n  .card-group > .card { flex: 1 0 0%; margin-bottom: 0px; }\n  .card-group > .card + .card { margin-left: 0px; border-left: 0px; }\n  .card-group > .card:first-child { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }\n  .card-group > .card:first-child .card-header, .card-group > .card:first-child .card-img-top { border-top-right-radius: 0px; }\n  .card-group > .card:first-child .card-footer, .card-group > .card:first-child .card-img-bottom { border-bottom-right-radius: 0px; }\n  .card-group > .card:last-child { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }\n  .card-group > .card:last-child .card-header, .card-group > .card:last-child .card-img-top { border-top-left-radius: 0px; }\n  .card-group > .card:last-child .card-footer, .card-group > .card:last-child .card-img-bottom { border-bottom-left-radius: 0px; }\n  .card-group > .card:only-child { border-radius: 0.25rem; }\n  .card-group > .card:only-child .card-header, .card-group > .card:only-child .card-img-top { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }\n  .card-group > .card:only-child .card-footer, .card-group > .card:only-child .card-img-bottom { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }\n  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) { border-radius: 0px; }\n  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-footer, .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-header, .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom, .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-top { border-radius: 0px; }\n}.card-columns .card { margin-bottom: 0.75rem; }@media (min-width: 576px) {\n  .card-columns { column-count: 3; column-gap: 1.25rem; orphans: 1; widows: 1; }\n  .card-columns .card { display: inline-block; width: 100%; }\n}.accordion .card:not(:first-of-type):not(:last-of-type) { border-bottom: 0px; border-radius: 0px; }.accordion .card:not(:first-of-type) .card-header:first-child { border-radius: 0px; }.accordion .card:first-of-type { border-bottom: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; }.accordion .card:last-of-type { border-top-left-radius: 0px; border-top-right-radius: 0px; }.breadcrumb { display: flex; flex-wrap: wrap; padding: 0.75rem 1rem; margin-bottom: 1rem; list-style: none; background-color: rgb(233, 236, 239); border-radius: 0.25rem; }.breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; }.breadcrumb-item + .breadcrumb-item::before { display: inline-block; padding-right: 0.5rem; color: rgb(108, 117, 125); content: \"/\"; }.breadcrumb-item + .breadcrumb-item:hover::before { text-decoration: underline; }.breadcrumb-item + .breadcrumb-item:hover::before { text-decoration: none; }.breadcrumb-item.active { color: rgb(108, 117, 125); }.pagination { display: flex; padding-left: 0px; list-style: none; border-radius: 0.25rem; }.page-link { position: relative; display: block; padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; color: rgb(0, 123, 255); background-color: rgb(255, 255, 255); border: 1px solid rgb(222, 226, 230); }.page-link:hover { z-index: 2; color: rgb(0, 86, 179); text-decoration: none; background-color: rgb(233, 236, 239); border-color: rgb(222, 226, 230); }.page-link:focus { z-index: 2; outline: 0px; box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; }.page-link:not(:disabled):not(.disabled) { cursor: pointer; }.page-item:first-child .page-link { margin-left: 0px; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }.page-item:last-child .page-link { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }.page-item.active .page-link { z-index: 1; color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.page-item.disabled .page-link { color: rgb(108, 117, 125); pointer-events: none; cursor: auto; background-color: rgb(255, 255, 255); border-color: rgb(222, 226, 230); }.pagination-lg .page-link { padding: 0.75rem 1.5rem; font-size: 1.25rem; line-height: 1.5; }.pagination-lg .page-item:first-child .page-link { border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; }.pagination-lg .page-item:last-child .page-link { border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; }.pagination-sm .page-link { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; }.pagination-sm .page-item:first-child .page-link { border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; }.pagination-sm .page-item:last-child .page-link { border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; }.badge { display: inline-block; padding: 0.25em 0.4em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; }.badge:empty { display: none; }.btn .badge { position: relative; top: -1px; }.badge-pill { padding-right: 0.6em; padding-left: 0.6em; border-radius: 10rem; }.badge-primary { color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); }.badge-primary[href]:focus, .badge-primary[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(0, 98, 204); }.badge-secondary { color: rgb(255, 255, 255); background-color: rgb(108, 117, 125); }.badge-secondary[href]:focus, .badge-secondary[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(84, 91, 98); }.badge-success { color: rgb(255, 255, 255); background-color: rgb(40, 167, 69); }.badge-success[href]:focus, .badge-success[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(30, 126, 52); }.badge-info { color: rgb(255, 255, 255); background-color: rgb(23, 162, 184); }.badge-info[href]:focus, .badge-info[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(17, 122, 139); }.badge-warning { color: rgb(33, 37, 41); background-color: rgb(255, 193, 7); }.badge-warning[href]:focus, .badge-warning[href]:hover { color: rgb(33, 37, 41); text-decoration: none; background-color: rgb(211, 158, 0); }.badge-danger { color: rgb(255, 255, 255); background-color: rgb(220, 53, 69); }.badge-danger[href]:focus, .badge-danger[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(189, 33, 48); }.badge-light { color: rgb(33, 37, 41); background-color: rgb(248, 249, 250); }.badge-light[href]:focus, .badge-light[href]:hover { color: rgb(33, 37, 41); text-decoration: none; background-color: rgb(218, 224, 229); }.badge-dark { color: rgb(255, 255, 255); background-color: rgb(52, 58, 64); }.badge-dark[href]:focus, .badge-dark[href]:hover { color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(29, 33, 36); }.jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; background-color: rgb(233, 236, 239); border-radius: 0.3rem; }@media (min-width: 576px) {\n  .jumbotron { padding: 4rem 2rem; }\n}.jumbotron-fluid { padding-right: 0px; padding-left: 0px; border-radius: 0px; }.alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; }.alert-heading { color: inherit; }.alert-link { font-weight: 700; }.alert-dismissible { padding-right: 4rem; }.alert-dismissible .close { position: absolute; top: 0px; right: 0px; padding: 0.75rem 1.25rem; color: inherit; }.alert-primary { color: rgb(0, 64, 133); background-color: rgb(204, 229, 255); border-color: rgb(184, 218, 255); }.alert-primary hr { border-top-color: rgb(159, 205, 255); }.alert-primary .alert-link { color: rgb(0, 39, 82); }.alert-secondary { color: rgb(56, 61, 65); background-color: rgb(226, 227, 229); border-color: rgb(214, 216, 219); }.alert-secondary hr { border-top-color: rgb(200, 203, 207); }.alert-secondary .alert-link { color: rgb(32, 35, 38); }.alert-success { color: rgb(21, 87, 36); background-color: rgb(212, 237, 218); border-color: rgb(195, 230, 203); }.alert-success hr { border-top-color: rgb(177, 223, 187); }.alert-success .alert-link { color: rgb(11, 46, 19); }.alert-info { color: rgb(12, 84, 96); background-color: rgb(209, 236, 241); border-color: rgb(190, 229, 235); }.alert-info hr { border-top-color: rgb(171, 221, 229); }.alert-info .alert-link { color: rgb(6, 44, 51); }.alert-warning { color: rgb(133, 100, 4); background-color: rgb(255, 243, 205); border-color: rgb(255, 238, 186); }.alert-warning hr { border-top-color: rgb(255, 232, 161); }.alert-warning .alert-link { color: rgb(83, 63, 3); }.alert-danger { color: rgb(114, 28, 36); background-color: rgb(248, 215, 218); border-color: rgb(245, 198, 203); }.alert-danger hr { border-top-color: rgb(241, 176, 183); }.alert-danger .alert-link { color: rgb(73, 18, 23); }.alert-light { color: rgb(129, 129, 130); background-color: rgb(254, 254, 254); border-color: rgb(253, 253, 254); }.alert-light hr { border-top-color: rgb(236, 236, 246); }.alert-light .alert-link { color: rgb(104, 104, 104); }.alert-dark { color: rgb(27, 30, 33); background-color: rgb(214, 216, 217); border-color: rgb(198, 200, 202); }.alert-dark hr { border-top-color: rgb(185, 187, 190); }.alert-dark .alert-link { color: rgb(4, 5, 5); }@-webkit-keyframes progress-bar-stripes { \n  0% { background-position: 1rem 0px; }\n  100% { background-position: 0px 0px; }\n}@keyframes progress-bar-stripes { \n  0% { background-position: 1rem 0px; }\n  100% { background-position: 0px 0px; }\n}.progress { display: flex; height: 1rem; overflow: hidden; font-size: 0.75rem; background-color: rgb(233, 236, 239); border-radius: 0.25rem; }.progress-bar { display: flex; flex-direction: column; justify-content: center; color: rgb(255, 255, 255); text-align: center; white-space: nowrap; background-color: rgb(0, 123, 255); transition: width 0.6s ease 0s; }@media not all {\n  .progress-bar { transition: none 0s ease 0s; }\n}.progress-bar-striped { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem; }.progress-bar-animated { animation: progress-bar-stripes 1s linear 0s infinite normal none running; }.media { display: flex; align-items: flex-start; }.media-body { flex: 1 1 0%; }.list-group { display: flex; flex-direction: column; padding-left: 0px; margin-bottom: 0px; }.list-group-item-action { width: 100%; color: rgb(73, 80, 87); text-align: inherit; }.list-group-item-action:focus, .list-group-item-action:hover { color: rgb(73, 80, 87); text-decoration: none; background-color: rgb(248, 249, 250); }.list-group-item-action:active { color: rgb(33, 37, 41); background-color: rgb(233, 236, 239); }.list-group-item { position: relative; display: block; padding: 0.75rem 1.25rem; margin-bottom: -1px; background-color: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.125); }.list-group-item:first-child { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }.list-group-item:last-child { margin-bottom: 0px; border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }.list-group-item:focus, .list-group-item:hover { z-index: 1; text-decoration: none; }.list-group-item.disabled, .list-group-item:disabled { color: rgb(108, 117, 125); background-color: rgb(255, 255, 255); }.list-group-item.active { z-index: 2; color: rgb(255, 255, 255); background-color: rgb(0, 123, 255); border-color: rgb(0, 123, 255); }.list-group-flush .list-group-item { border-right: 0px; border-left: 0px; border-radius: 0px; }.list-group-flush:first-child .list-group-item:first-child { border-top: 0px; }.list-group-flush:last-child .list-group-item:last-child { border-bottom: 0px; }.list-group-item-primary { color: rgb(0, 64, 133); background-color: rgb(184, 218, 255); }.list-group-item-primary.list-group-item-action:focus, .list-group-item-primary.list-group-item-action:hover { color: rgb(0, 64, 133); background-color: rgb(159, 205, 255); }.list-group-item-primary.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(0, 64, 133); border-color: rgb(0, 64, 133); }.list-group-item-secondary { color: rgb(56, 61, 65); background-color: rgb(214, 216, 219); }.list-group-item-secondary.list-group-item-action:focus, .list-group-item-secondary.list-group-item-action:hover { color: rgb(56, 61, 65); background-color: rgb(200, 203, 207); }.list-group-item-secondary.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(56, 61, 65); border-color: rgb(56, 61, 65); }.list-group-item-success { color: rgb(21, 87, 36); background-color: rgb(195, 230, 203); }.list-group-item-success.list-group-item-action:focus, .list-group-item-success.list-group-item-action:hover { color: rgb(21, 87, 36); background-color: rgb(177, 223, 187); }.list-group-item-success.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(21, 87, 36); border-color: rgb(21, 87, 36); }.list-group-item-info { color: rgb(12, 84, 96); background-color: rgb(190, 229, 235); }.list-group-item-info.list-group-item-action:focus, .list-group-item-info.list-group-item-action:hover { color: rgb(12, 84, 96); background-color: rgb(171, 221, 229); }.list-group-item-info.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(12, 84, 96); border-color: rgb(12, 84, 96); }.list-group-item-warning { color: rgb(133, 100, 4); background-color: rgb(255, 238, 186); }.list-group-item-warning.list-group-item-action:focus, .list-group-item-warning.list-group-item-action:hover { color: rgb(133, 100, 4); background-color: rgb(255, 232, 161); }.list-group-item-warning.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(133, 100, 4); border-color: rgb(133, 100, 4); }.list-group-item-danger { color: rgb(114, 28, 36); background-color: rgb(245, 198, 203); }.list-group-item-danger.list-group-item-action:focus, .list-group-item-danger.list-group-item-action:hover { color: rgb(114, 28, 36); background-color: rgb(241, 176, 183); }.list-group-item-danger.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(114, 28, 36); border-color: rgb(114, 28, 36); }.list-group-item-light { color: rgb(129, 129, 130); background-color: rgb(253, 253, 254); }.list-group-item-light.list-group-item-action:focus, .list-group-item-light.list-group-item-action:hover { color: rgb(129, 129, 130); background-color: rgb(236, 236, 246); }.list-group-item-light.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(129, 129, 130); border-color: rgb(129, 129, 130); }.list-group-item-dark { color: rgb(27, 30, 33); background-color: rgb(198, 200, 202); }.list-group-item-dark.list-group-item-action:focus, .list-group-item-dark.list-group-item-action:hover { color: rgb(27, 30, 33); background-color: rgb(185, 187, 190); }.list-group-item-dark.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(27, 30, 33); border-color: rgb(27, 30, 33); }.close { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: rgb(0, 0, 0); text-shadow: rgb(255, 255, 255) 0px 1px 0px; opacity: 0.5; }.close:not(:disabled):not(.disabled) { cursor: pointer; }.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover { color: rgb(0, 0, 0); text-decoration: none; opacity: 0.75; }button.close { padding: 0px; background-color: transparent; border: 0px; -webkit-appearance: none; }.modal-open { overflow: hidden; }.modal-open .modal { overflow: hidden auto; }.modal { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 1050; display: none; overflow: hidden; outline: 0px; }.modal-dialog { position: relative; width: auto; margin: 0.5rem; pointer-events: none; }.modal.fade .modal-dialog { transition: transform 0.3s ease-out 0s, -webkit-transform 0.3s ease-out 0s; transform: translate(0px, -25%); }@media not all {\n  .modal.fade .modal-dialog { transition: none 0s ease 0s; }\n}.modal.show .modal-dialog { transform: translate(0px, 0px); }.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); }.modal-dialog-centered::before { display: block; height: calc(100vh - 1rem); content: \"\"; }.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; outline: 0px; }.modal-backdrop { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 1040; background-color: rgb(0, 0, 0); }.modal-backdrop.fade { opacity: 0; }.modal-backdrop.show { opacity: 0.5; }.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem; border-bottom: 1px solid rgb(233, 236, 239); border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; }.modal-header .close { padding: 1rem; margin: -1rem -1rem -1rem auto; }.modal-title { margin-bottom: 0px; line-height: 1.5; }.modal-body { position: relative; flex: 1 1 auto; padding: 1rem; }.modal-footer { display: flex; align-items: center; justify-content: flex-end; padding: 1rem; border-top: 1px solid rgb(233, 236, 239); }.modal-footer > :not(:first-child) { margin-left: 0.25rem; }.modal-footer > :not(:last-child) { margin-right: 0.25rem; }.modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; }@media (min-width: 576px) {\n  .modal-dialog { max-width: 500px; margin: 1.75rem auto; }\n  .modal-dialog-centered { min-height: calc(100% - 3.5rem); }\n  .modal-dialog-centered::before { height: calc(100vh - 3.5rem); }\n  .modal-sm { max-width: 300px; }\n}@media (min-width: 992px) {\n  .modal-lg { max-width: 800px; }\n}.tooltip { position: absolute; z-index: 1070; display: block; margin: 0px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; font-style: normal; font-weight: 400; line-height: 1.5; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; white-space: normal; line-break: auto; font-size: 0.875rem; word-wrap: break-word; opacity: 0; }.tooltip.show { opacity: 0.9; }.tooltip .arrow { position: absolute; display: block; width: 0.8rem; height: 0.4rem; }.tooltip .arrow::before { position: absolute; content: \"\"; border-color: transparent; border-style: solid; }.bs-tooltip-auto[x-placement^=\"top\"], .bs-tooltip-top { padding: 0.4rem 0px; }.bs-tooltip-auto[x-placement^=\"top\"] .arrow, .bs-tooltip-top .arrow { bottom: 0px; }.bs-tooltip-auto[x-placement^=\"top\"] .arrow::before, .bs-tooltip-top .arrow::before { top: 0px; border-width: 0.4rem 0.4rem 0px; border-top-color: rgb(0, 0, 0); }.bs-tooltip-auto[x-placement^=\"right\"], .bs-tooltip-right { padding: 0px 0.4rem; }.bs-tooltip-auto[x-placement^=\"right\"] .arrow, .bs-tooltip-right .arrow { left: 0px; width: 0.4rem; height: 0.8rem; }.bs-tooltip-auto[x-placement^=\"right\"] .arrow::before, .bs-tooltip-right .arrow::before { right: 0px; border-width: 0.4rem 0.4rem 0.4rem 0px; border-right-color: rgb(0, 0, 0); }.bs-tooltip-auto[x-placement^=\"bottom\"], .bs-tooltip-bottom { padding: 0.4rem 0px; }.bs-tooltip-auto[x-placement^=\"bottom\"] .arrow, .bs-tooltip-bottom .arrow { top: 0px; }.bs-tooltip-auto[x-placement^=\"bottom\"] .arrow::before, .bs-tooltip-bottom .arrow::before { bottom: 0px; border-width: 0px 0.4rem 0.4rem; border-bottom-color: rgb(0, 0, 0); }.bs-tooltip-auto[x-placement^=\"left\"], .bs-tooltip-left { padding: 0px 0.4rem; }.bs-tooltip-auto[x-placement^=\"left\"] .arrow, .bs-tooltip-left .arrow { right: 0px; width: 0.4rem; height: 0.8rem; }.bs-tooltip-auto[x-placement^=\"left\"] .arrow::before, .bs-tooltip-left .arrow::before { left: 0px; border-width: 0.4rem 0px 0.4rem 0.4rem; border-left-color: rgb(0, 0, 0); }.tooltip-inner { max-width: 200px; padding: 0.25rem 0.5rem; color: rgb(255, 255, 255); text-align: center; background-color: rgb(0, 0, 0); border-radius: 0.25rem; }.popover { position: absolute; top: 0px; left: 0px; z-index: 1060; display: block; max-width: 276px; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; font-style: normal; font-weight: 400; line-height: 1.5; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; white-space: normal; line-break: auto; font-size: 0.875rem; word-wrap: break-word; background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; }.popover .arrow { position: absolute; display: block; width: 1rem; height: 0.5rem; margin: 0px 0.3rem; }.popover .arrow::after, .popover .arrow::before { position: absolute; display: block; content: \"\"; border-color: transparent; border-style: solid; }.bs-popover-auto[x-placement^=\"top\"], .bs-popover-top { margin-bottom: 0.5rem; }.bs-popover-auto[x-placement^=\"top\"] .arrow, .bs-popover-top .arrow { bottom: calc((0.5rem + 1px) * -1); }.bs-popover-auto[x-placement^=\"top\"] .arrow::after, .bs-popover-auto[x-placement^=\"top\"] .arrow::before, .bs-popover-top .arrow::after, .bs-popover-top .arrow::before { border-width: 0.5rem 0.5rem 0px; }.bs-popover-auto[x-placement^=\"top\"] .arrow::before, .bs-popover-top .arrow::before { bottom: 0px; border-top-color: rgba(0, 0, 0, 0.25); }.bs-popover-auto[x-placement^=\"top\"] .arrow::after, .bs-popover-top .arrow::after { bottom: 1px; border-top-color: rgb(255, 255, 255); }.bs-popover-auto[x-placement^=\"right\"], .bs-popover-right { margin-left: 0.5rem; }.bs-popover-auto[x-placement^=\"right\"] .arrow, .bs-popover-right .arrow { left: calc((0.5rem + 1px) * -1); width: 0.5rem; height: 1rem; margin: 0.3rem 0px; }.bs-popover-auto[x-placement^=\"right\"] .arrow::after, .bs-popover-auto[x-placement^=\"right\"] .arrow::before, .bs-popover-right .arrow::after, .bs-popover-right .arrow::before { border-width: 0.5rem 0.5rem 0.5rem 0px; }.bs-popover-auto[x-placement^=\"right\"] .arrow::before, .bs-popover-right .arrow::before { left: 0px; border-right-color: rgba(0, 0, 0, 0.25); }.bs-popover-auto[x-placement^=\"right\"] .arrow::after, .bs-popover-right .arrow::after { left: 1px; border-right-color: rgb(255, 255, 255); }.bs-popover-auto[x-placement^=\"bottom\"], .bs-popover-bottom { margin-top: 0.5rem; }.bs-popover-auto[x-placement^=\"bottom\"] .arrow, .bs-popover-bottom .arrow { top: calc((0.5rem + 1px) * -1); }.bs-popover-auto[x-placement^=\"bottom\"] .arrow::after, .bs-popover-auto[x-placement^=\"bottom\"] .arrow::before, .bs-popover-bottom .arrow::after, .bs-popover-bottom .arrow::before { border-width: 0px 0.5rem 0.5rem; }.bs-popover-auto[x-placement^=\"bottom\"] .arrow::before, .bs-popover-bottom .arrow::before { top: 0px; border-bottom-color: rgba(0, 0, 0, 0.25); }.bs-popover-auto[x-placement^=\"bottom\"] .arrow::after, .bs-popover-bottom .arrow::after { top: 1px; border-bottom-color: rgb(255, 255, 255); }.bs-popover-auto[x-placement^=\"bottom\"] .popover-header::before, .bs-popover-bottom .popover-header::before { position: absolute; top: 0px; left: 50%; display: block; width: 1rem; margin-left: -0.5rem; content: \"\"; border-bottom: 1px solid rgb(247, 247, 247); }.bs-popover-auto[x-placement^=\"left\"], .bs-popover-left { margin-right: 0.5rem; }.bs-popover-auto[x-placement^=\"left\"] .arrow, .bs-popover-left .arrow { right: calc((0.5rem + 1px) * -1); width: 0.5rem; height: 1rem; margin: 0.3rem 0px; }.bs-popover-auto[x-placement^=\"left\"] .arrow::after, .bs-popover-auto[x-placement^=\"left\"] .arrow::before, .bs-popover-left .arrow::after, .bs-popover-left .arrow::before { border-width: 0.5rem 0px 0.5rem 0.5rem; }.bs-popover-auto[x-placement^=\"left\"] .arrow::before, .bs-popover-left .arrow::before { right: 0px; border-left-color: rgba(0, 0, 0, 0.25); }.bs-popover-auto[x-placement^=\"left\"] .arrow::after, .bs-popover-left .arrow::after { right: 1px; border-left-color: rgb(255, 255, 255); }.popover-header { padding: 0.5rem 0.75rem; margin-bottom: 0px; font-size: 1rem; color: inherit; background-color: rgb(247, 247, 247); border-bottom: 1px solid rgb(235, 235, 235); border-top-left-radius: calc(0.3rem - 1px); border-top-right-radius: calc(0.3rem - 1px); }.popover-header:empty { display: none; }.popover-body { padding: 0.5rem 0.75rem; color: rgb(33, 37, 41); }.carousel { position: relative; }.carousel-inner { position: relative; width: 100%; overflow: hidden; }.carousel-item { position: relative; display: none; align-items: center; width: 100%; backface-visibility: hidden; perspective: 1000px; }.carousel-item-next, .carousel-item-prev, .carousel-item.active { display: block; transition: transform 0.6s ease 0s, -webkit-transform 0.6s ease 0s; }@media not all {\n  .carousel-item-next, .carousel-item-prev, .carousel-item.active { transition: none 0s ease 0s; }\n}.carousel-item-next, .carousel-item-prev { position: absolute; top: 0px; }.carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { transform: translateX(0px); }@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {\n  .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { transform: translate3d(0px, 0px, 0px); }\n}.active.carousel-item-right, .carousel-item-next { transform: translateX(100%); }@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {\n  .active.carousel-item-right, .carousel-item-next { transform: translate3d(100%, 0px, 0px); }\n}.active.carousel-item-left, .carousel-item-prev { transform: translateX(-100%); }@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {\n  .active.carousel-item-left, .carousel-item-prev { transform: translate3d(-100%, 0px, 0px); }\n}.carousel-fade .carousel-item { opacity: 0; transition-duration: 0.6s; transition-property: opacity; }.carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right, .carousel-fade .carousel-item.active { opacity: 1; }.carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right { opacity: 0; }.carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-prev, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item.active { transform: translateX(0px); }@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {\n  .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-prev, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item.active { transform: translate3d(0px, 0px, 0px); }\n}.carousel-control-next, .carousel-control-prev { position: absolute; top: 0px; bottom: 0px; display: flex; align-items: center; justify-content: center; width: 15%; color: rgb(255, 255, 255); text-align: center; opacity: 0.5; }.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover { color: rgb(255, 255, 255); text-decoration: none; outline: 0px; opacity: 0.9; }.carousel-control-prev { left: 0px; }.carousel-control-next { right: 0px; }.carousel-control-next-icon, .carousel-control-prev-icon { display: inline-block; width: 20px; height: 20px; background: center center / 100% 100% no-repeat transparent; }.carousel-control-prev-icon { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E\"); }.carousel-control-next-icon { background-image: url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E\"); }.carousel-indicators { position: absolute; right: 0px; bottom: 10px; left: 0px; z-index: 15; display: flex; justify-content: center; padding-left: 0px; margin-right: 15%; margin-left: 15%; list-style: none; }.carousel-indicators li { position: relative; flex: 0 1 auto; width: 30px; height: 3px; margin-right: 3px; margin-left: 3px; text-indent: -999px; cursor: pointer; background-color: rgba(255, 255, 255, 0.5); }.carousel-indicators li::before { position: absolute; top: -10px; left: 0px; display: inline-block; width: 100%; height: 10px; content: \"\"; }.carousel-indicators li::after { position: absolute; bottom: -10px; left: 0px; display: inline-block; width: 100%; height: 10px; content: \"\"; }.carousel-indicators .active { background-color: rgb(255, 255, 255); }.carousel-caption { position: absolute; right: 15%; bottom: 20px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: rgb(255, 255, 255); text-align: center; }.align-baseline { vertical-align: baseline !important; }.align-top { vertical-align: top !important; }.align-middle { vertical-align: middle !important; }.align-bottom { vertical-align: bottom !important; }.align-text-bottom { vertical-align: text-bottom !important; }.align-text-top { vertical-align: text-top !important; }.bg-primary { background-color: rgb(0, 123, 255) !important; }a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover { background-color: rgb(0, 98, 204) !important; }.bg-secondary { background-color: rgb(108, 117, 125) !important; }a.bg-secondary:focus, a.bg-secondary:hover, button.bg-secondary:focus, button.bg-secondary:hover { background-color: rgb(84, 91, 98) !important; }.bg-success { background-color: rgb(40, 167, 69) !important; }a.bg-success:focus, a.bg-success:hover, button.bg-success:focus, button.bg-success:hover { background-color: rgb(30, 126, 52) !important; }.bg-info { background-color: rgb(23, 162, 184) !important; }a.bg-info:focus, a.bg-info:hover, button.bg-info:focus, button.bg-info:hover { background-color: rgb(17, 122, 139) !important; }.bg-warning { background-color: rgb(255, 193, 7) !important; }a.bg-warning:focus, a.bg-warning:hover, button.bg-warning:focus, button.bg-warning:hover { background-color: rgb(211, 158, 0) !important; }.bg-danger { background-color: rgb(220, 53, 69) !important; }a.bg-danger:focus, a.bg-danger:hover, button.bg-danger:focus, button.bg-danger:hover { background-color: rgb(189, 33, 48) !important; }.bg-light { background-color: rgb(248, 249, 250) !important; }a.bg-light:focus, a.bg-light:hover, button.bg-light:focus, button.bg-light:hover { background-color: rgb(218, 224, 229) !important; }.bg-dark { background-color: rgb(52, 58, 64) !important; }a.bg-dark:focus, a.bg-dark:hover, button.bg-dark:focus, button.bg-dark:hover { background-color: rgb(29, 33, 36) !important; }.bg-white { background-color: rgb(255, 255, 255) !important; }.bg-transparent { background-color: transparent !important; }.border { border: 1px solid rgb(222, 226, 230) !important; }.border-top { border-top: 1px solid rgb(222, 226, 230) !important; }.border-right { border-right: 1px solid rgb(222, 226, 230) !important; }.border-bottom { border-bottom: 1px solid rgb(222, 226, 230) !important; }.border-left { border-left: 1px solid rgb(222, 226, 230) !important; }.border-0 { border: 0px !important; }.border-top-0 { border-top: 0px !important; }.border-right-0 { border-right: 0px !important; }.border-bottom-0 { border-bottom: 0px !important; }.border-left-0 { border-left: 0px !important; }.border-primary { border-color: rgb(0, 123, 255) !important; }.border-secondary { border-color: rgb(108, 117, 125) !important; }.border-success { border-color: rgb(40, 167, 69) !important; }.border-info { border-color: rgb(23, 162, 184) !important; }.border-warning { border-color: rgb(255, 193, 7) !important; }.border-danger { border-color: rgb(220, 53, 69) !important; }.border-light { border-color: rgb(248, 249, 250) !important; }.border-dark { border-color: rgb(52, 58, 64) !important; }.border-white { border-color: rgb(255, 255, 255) !important; }.rounded { border-radius: 0.25rem !important; }.rounded-top { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }.rounded-right { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }.rounded-bottom { border-bottom-right-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }.rounded-left { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }.rounded-circle { border-radius: 50% !important; }.rounded-0 { border-radius: 0px !important; }.clearfix::after { display: block; clear: both; content: \"\"; }.d-none { display: none !important; }.d-inline { display: inline !important; }.d-inline-block { display: inline-block !important; }.d-block { display: block !important; }.d-table { display: table !important; }.d-table-row { display: table-row !important; }.d-table-cell { display: table-cell !important; }.d-flex { display: flex !important; }.d-inline-flex { display: inline-flex !important; }@media (min-width: 576px) {\n  .d-sm-none { display: none !important; }\n  .d-sm-inline { display: inline !important; }\n  .d-sm-inline-block { display: inline-block !important; }\n  .d-sm-block { display: block !important; }\n  .d-sm-table { display: table !important; }\n  .d-sm-table-row { display: table-row !important; }\n  .d-sm-table-cell { display: table-cell !important; }\n  .d-sm-flex { display: flex !important; }\n  .d-sm-inline-flex { display: inline-flex !important; }\n}@media (min-width: 768px) {\n  .d-md-none { display: none !important; }\n  .d-md-inline { display: inline !important; }\n  .d-md-inline-block { display: inline-block !important; }\n  .d-md-block { display: block !important; }\n  .d-md-table { display: table !important; }\n  .d-md-table-row { display: table-row !important; }\n  .d-md-table-cell { display: table-cell !important; }\n  .d-md-flex { display: flex !important; }\n  .d-md-inline-flex { display: inline-flex !important; }\n}@media (min-width: 992px) {\n  .d-lg-none { display: none !important; }\n  .d-lg-inline { display: inline !important; }\n  .d-lg-inline-block { display: inline-block !important; }\n  .d-lg-block { display: block !important; }\n  .d-lg-table { display: table !important; }\n  .d-lg-table-row { display: table-row !important; }\n  .d-lg-table-cell { display: table-cell !important; }\n  .d-lg-flex { display: flex !important; }\n  .d-lg-inline-flex { display: inline-flex !important; }\n}@media (min-width: 1200px) {\n  .d-xl-none { display: none !important; }\n  .d-xl-inline { display: inline !important; }\n  .d-xl-inline-block { display: inline-block !important; }\n  .d-xl-block { display: block !important; }\n  .d-xl-table { display: table !important; }\n  .d-xl-table-row { display: table-row !important; }\n  .d-xl-table-cell { display: table-cell !important; }\n  .d-xl-flex { display: flex !important; }\n  .d-xl-inline-flex { display: inline-flex !important; }\n}@media print {\n  .d-print-none { display: none !important; }\n  .d-print-inline { display: inline !important; }\n  .d-print-inline-block { display: inline-block !important; }\n  .d-print-block { display: block !important; }\n  .d-print-table { display: table !important; }\n  .d-print-table-row { display: table-row !important; }\n  .d-print-table-cell { display: table-cell !important; }\n  .d-print-flex { display: flex !important; }\n  .d-print-inline-flex { display: inline-flex !important; }\n}.embed-responsive { position: relative; display: block; width: 100%; padding: 0px; overflow: hidden; }.embed-responsive::before { display: block; content: \"\"; }.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video { position: absolute; top: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; border: 0px; }.embed-responsive-21by9::before { padding-top: 42.8571%; }.embed-responsive-16by9::before { padding-top: 56.25%; }.embed-responsive-4by3::before { padding-top: 75%; }.embed-responsive-1by1::before { padding-top: 100%; }.flex-row { flex-direction: row !important; }.flex-column { flex-direction: column !important; }.flex-row-reverse { flex-direction: row-reverse !important; }.flex-column-reverse { flex-direction: column-reverse !important; }.flex-wrap { flex-wrap: wrap !important; }.flex-nowrap { flex-wrap: nowrap !important; }.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }.flex-fill { flex: 1 1 auto !important; }.flex-grow-0 { flex-grow: 0 !important; }.flex-grow-1 { flex-grow: 1 !important; }.flex-shrink-0 { flex-shrink: 0 !important; }.flex-shrink-1 { flex-shrink: 1 !important; }.justify-content-start { justify-content: flex-start !important; }.justify-content-end { justify-content: flex-end !important; }.justify-content-center { justify-content: center !important; }.justify-content-between { justify-content: space-between !important; }.justify-content-around { justify-content: space-around !important; }.align-items-start { align-items: flex-start !important; }.align-items-end { align-items: flex-end !important; }.align-items-center { align-items: center !important; }.align-items-baseline { align-items: baseline !important; }.align-items-stretch { align-items: stretch !important; }.align-content-start { align-content: flex-start !important; }.align-content-end { align-content: flex-end !important; }.align-content-center { align-content: center !important; }.align-content-between { align-content: space-between !important; }.align-content-around { align-content: space-around !important; }.align-content-stretch { align-content: stretch !important; }.align-self-auto { align-self: auto !important; }.align-self-start { align-self: flex-start !important; }.align-self-end { align-self: flex-end !important; }.align-self-center { align-self: center !important; }.align-self-baseline { align-self: baseline !important; }.align-self-stretch { align-self: stretch !important; }@media (min-width: 576px) {\n  .flex-sm-row { flex-direction: row !important; }\n  .flex-sm-column { flex-direction: column !important; }\n  .flex-sm-row-reverse { flex-direction: row-reverse !important; }\n  .flex-sm-column-reverse { flex-direction: column-reverse !important; }\n  .flex-sm-wrap { flex-wrap: wrap !important; }\n  .flex-sm-nowrap { flex-wrap: nowrap !important; }\n  .flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; }\n  .flex-sm-fill { flex: 1 1 auto !important; }\n  .flex-sm-grow-0 { flex-grow: 0 !important; }\n  .flex-sm-grow-1 { flex-grow: 1 !important; }\n  .flex-sm-shrink-0 { flex-shrink: 0 !important; }\n  .flex-sm-shrink-1 { flex-shrink: 1 !important; }\n  .justify-content-sm-start { justify-content: flex-start !important; }\n  .justify-content-sm-end { justify-content: flex-end !important; }\n  .justify-content-sm-center { justify-content: center !important; }\n  .justify-content-sm-between { justify-content: space-between !important; }\n  .justify-content-sm-around { justify-content: space-around !important; }\n  .align-items-sm-start { align-items: flex-start !important; }\n  .align-items-sm-end { align-items: flex-end !important; }\n  .align-items-sm-center { align-items: center !important; }\n  .align-items-sm-baseline { align-items: baseline !important; }\n  .align-items-sm-stretch { align-items: stretch !important; }\n  .align-content-sm-start { align-content: flex-start !important; }\n  .align-content-sm-end { align-content: flex-end !important; }\n  .align-content-sm-center { align-content: center !important; }\n  .align-content-sm-between { align-content: space-between !important; }\n  .align-content-sm-around { align-content: space-around !important; }\n  .align-content-sm-stretch { align-content: stretch !important; }\n  .align-self-sm-auto { align-self: auto !important; }\n  .align-self-sm-start { align-self: flex-start !important; }\n  .align-self-sm-end { align-self: flex-end !important; }\n  .align-self-sm-center { align-self: center !important; }\n  .align-self-sm-baseline { align-self: baseline !important; }\n  .align-self-sm-stretch { align-self: stretch !important; }\n}@media (min-width: 768px) {\n  .flex-md-row { flex-direction: row !important; }\n  .flex-md-column { flex-direction: column !important; }\n  .flex-md-row-reverse { flex-direction: row-reverse !important; }\n  .flex-md-column-reverse { flex-direction: column-reverse !important; }\n  .flex-md-wrap { flex-wrap: wrap !important; }\n  .flex-md-nowrap { flex-wrap: nowrap !important; }\n  .flex-md-wrap-reverse { flex-wrap: wrap-reverse !important; }\n  .flex-md-fill { flex: 1 1 auto !important; }\n  .flex-md-grow-0 { flex-grow: 0 !important; }\n  .flex-md-grow-1 { flex-grow: 1 !important; }\n  .flex-md-shrink-0 { flex-shrink: 0 !important; }\n  .flex-md-shrink-1 { flex-shrink: 1 !important; }\n  .justify-content-md-start { justify-content: flex-start !important; }\n  .justify-content-md-end { justify-content: flex-end !important; }\n  .justify-content-md-center { justify-content: center !important; }\n  .justify-content-md-between { justify-content: space-between !important; }\n  .justify-content-md-around { justify-content: space-around !important; }\n  .align-items-md-start { align-items: flex-start !important; }\n  .align-items-md-end { align-items: flex-end !important; }\n  .align-items-md-center { align-items: center !important; }\n  .align-items-md-baseline { align-items: baseline !important; }\n  .align-items-md-stretch { align-items: stretch !important; }\n  .align-content-md-start { align-content: flex-start !important; }\n  .align-content-md-end { align-content: flex-end !important; }\n  .align-content-md-center { align-content: center !important; }\n  .align-content-md-between { align-content: space-between !important; }\n  .align-content-md-around { align-content: space-around !important; }\n  .align-content-md-stretch { align-content: stretch !important; }\n  .align-self-md-auto { align-self: auto !important; }\n  .align-self-md-start { align-self: flex-start !important; }\n  .align-self-md-end { align-self: flex-end !important; }\n  .align-self-md-center { align-self: center !important; }\n  .align-self-md-baseline { align-self: baseline !important; }\n  .align-self-md-stretch { align-self: stretch !important; }\n}@media (min-width: 992px) {\n  .flex-lg-row { flex-direction: row !important; }\n  .flex-lg-column { flex-direction: column !important; }\n  .flex-lg-row-reverse { flex-direction: row-reverse !important; }\n  .flex-lg-column-reverse { flex-direction: column-reverse !important; }\n  .flex-lg-wrap { flex-wrap: wrap !important; }\n  .flex-lg-nowrap { flex-wrap: nowrap !important; }\n  .flex-lg-wrap-reverse { flex-wrap: wrap-reverse !important; }\n  .flex-lg-fill { flex: 1 1 auto !important; }\n  .flex-lg-grow-0 { flex-grow: 0 !important; }\n  .flex-lg-grow-1 { flex-grow: 1 !important; }\n  .flex-lg-shrink-0 { flex-shrink: 0 !important; }\n  .flex-lg-shrink-1 { flex-shrink: 1 !important; }\n  .justify-content-lg-start { justify-content: flex-start !important; }\n  .justify-content-lg-end { justify-content: flex-end !important; }\n  .justify-content-lg-center { justify-content: center !important; }\n  .justify-content-lg-between { justify-content: space-between !important; }\n  .justify-content-lg-around { justify-content: space-around !important; }\n  .align-items-lg-start { align-items: flex-start !important; }\n  .align-items-lg-end { align-items: flex-end !important; }\n  .align-items-lg-center { align-items: center !important; }\n  .align-items-lg-baseline { align-items: baseline !important; }\n  .align-items-lg-stretch { align-items: stretch !important; }\n  .align-content-lg-start { align-content: flex-start !important; }\n  .align-content-lg-end { align-content: flex-end !important; }\n  .align-content-lg-center { align-content: center !important; }\n  .align-content-lg-between { align-content: space-between !important; }\n  .align-content-lg-around { align-content: space-around !important; }\n  .align-content-lg-stretch { align-content: stretch !important; }\n  .align-self-lg-auto { align-self: auto !important; }\n  .align-self-lg-start { align-self: flex-start !important; }\n  .align-self-lg-end { align-self: flex-end !important; }\n  .align-self-lg-center { align-self: center !important; }\n  .align-self-lg-baseline { align-self: baseline !important; }\n  .align-self-lg-stretch { align-self: stretch !important; }\n}@media (min-width: 1200px) {\n  .flex-xl-row { flex-direction: row !important; }\n  .flex-xl-column { flex-direction: column !important; }\n  .flex-xl-row-reverse { flex-direction: row-reverse !important; }\n  .flex-xl-column-reverse { flex-direction: column-reverse !important; }\n  .flex-xl-wrap { flex-wrap: wrap !important; }\n  .flex-xl-nowrap { flex-wrap: nowrap !important; }\n  .flex-xl-wrap-reverse { flex-wrap: wrap-reverse !important; }\n  .flex-xl-fill { flex: 1 1 auto !important; }\n  .flex-xl-grow-0 { flex-grow: 0 !important; }\n  .flex-xl-grow-1 { flex-grow: 1 !important; }\n  .flex-xl-shrink-0 { flex-shrink: 0 !important; }\n  .flex-xl-shrink-1 { flex-shrink: 1 !important; }\n  .justify-content-xl-start { justify-content: flex-start !important; }\n  .justify-content-xl-end { justify-content: flex-end !important; }\n  .justify-content-xl-center { justify-content: center !important; }\n  .justify-content-xl-between { justify-content: space-between !important; }\n  .justify-content-xl-around { justify-content: space-around !important; }\n  .align-items-xl-start { align-items: flex-start !important; }\n  .align-items-xl-end { align-items: flex-end !important; }\n  .align-items-xl-center { align-items: center !important; }\n  .align-items-xl-baseline { align-items: baseline !important; }\n  .align-items-xl-stretch { align-items: stretch !important; }\n  .align-content-xl-start { align-content: flex-start !important; }\n  .align-content-xl-end { align-content: flex-end !important; }\n  .align-content-xl-center { align-content: center !important; }\n  .align-content-xl-between { align-content: space-between !important; }\n  .align-content-xl-around { align-content: space-around !important; }\n  .align-content-xl-stretch { align-content: stretch !important; }\n  .align-self-xl-auto { align-self: auto !important; }\n  .align-self-xl-start { align-self: flex-start !important; }\n  .align-self-xl-end { align-self: flex-end !important; }\n  .align-self-xl-center { align-self: center !important; }\n  .align-self-xl-baseline { align-self: baseline !important; }\n  .align-self-xl-stretch { align-self: stretch !important; }\n}.float-left { float: left !important; }.float-right { float: right !important; }.float-none { float: none !important; }@media (min-width: 576px) {\n  .float-sm-left { float: left !important; }\n  .float-sm-right { float: right !important; }\n  .float-sm-none { float: none !important; }\n}@media (min-width: 768px) {\n  .float-md-left { float: left !important; }\n  .float-md-right { float: right !important; }\n  .float-md-none { float: none !important; }\n}@media (min-width: 992px) {\n  .float-lg-left { float: left !important; }\n  .float-lg-right { float: right !important; }\n  .float-lg-none { float: none !important; }\n}@media (min-width: 1200px) {\n  .float-xl-left { float: left !important; }\n  .float-xl-right { float: right !important; }\n  .float-xl-none { float: none !important; }\n}.position-static { position: static !important; }.position-relative { position: relative !important; }.position-absolute { position: absolute !important; }.position-fixed { position: fixed !important; }.position-sticky { position: sticky !important; }.fixed-top { position: fixed; top: 0px; right: 0px; left: 0px; z-index: 1030; }.fixed-bottom { position: fixed; right: 0px; bottom: 0px; left: 0px; z-index: 1030; }@supports ((position:-webkit-sticky) or (position:sticky)) {\n  .sticky-top { position: sticky; top: 0px; z-index: 1020; }\n}.sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }.sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }.shadow-sm { box-shadow: rgba(0, 0, 0, 0.075) 0px 0.125rem 0.25rem !important; }.shadow { box-shadow: rgba(0, 0, 0, 0.15) 0px 0.5rem 1rem !important; }.shadow-lg { box-shadow: rgba(0, 0, 0, 0.176) 0px 1rem 3rem !important; }.shadow-none { box-shadow: none !important; }.w-25 { width: 25% !important; }.w-50 { width: 50% !important; }.w-75 { width: 75% !important; }.w-100 { width: 100% !important; }.w-auto { width: auto !important; }.h-25 { height: 25% !important; }.h-50 { height: 50% !important; }.h-75 { height: 75% !important; }.h-100 { height: 100% !important; }.h-auto { height: auto !important; }.mw-100 { max-width: 100% !important; }.mh-100 { max-height: 100% !important; }.m-0 { margin: 0px !important; }.mt-0, .my-0 { margin-top: 0px !important; }.mr-0, .mx-0 { margin-right: 0px !important; }.mb-0, .my-0 { margin-bottom: 0px !important; }.ml-0, .mx-0 { margin-left: 0px !important; }.m-1 { margin: 0.25rem !important; }.mt-1, .my-1 { margin-top: 0.25rem !important; }.mr-1, .mx-1 { margin-right: 0.25rem !important; }.mb-1, .my-1 { margin-bottom: 0.25rem !important; }.ml-1, .mx-1 { margin-left: 0.25rem !important; }.m-2 { margin: 0.5rem !important; }.mt-2, .my-2 { margin-top: 0.5rem !important; }.mr-2, .mx-2 { margin-right: 0.5rem !important; }.mb-2, .my-2 { margin-bottom: 0.5rem !important; }.ml-2, .mx-2 { margin-left: 0.5rem !important; }.m-3 { margin: 1rem !important; }.mt-3, .my-3 { margin-top: 1rem !important; }.mr-3, .mx-3 { margin-right: 1rem !important; }.mb-3, .my-3 { margin-bottom: 1rem !important; }.ml-3, .mx-3 { margin-left: 1rem !important; }.m-4 { margin: 1.5rem !important; }.mt-4, .my-4 { margin-top: 1.5rem !important; }.mr-4, .mx-4 { margin-right: 1.5rem !important; }.mb-4, .my-4 { margin-bottom: 1.5rem !important; }.ml-4, .mx-4 { margin-left: 1.5rem !important; }.m-5 { margin: 3rem !important; }.mt-5, .my-5 { margin-top: 3rem !important; }.mr-5, .mx-5 { margin-right: 3rem !important; }.mb-5, .my-5 { margin-bottom: 3rem !important; }.ml-5, .mx-5 { margin-left: 3rem !important; }.p-0 { padding: 0px !important; }.pt-0, .py-0 { padding-top: 0px !important; }.pr-0, .px-0 { padding-right: 0px !important; }.pb-0, .py-0 { padding-bottom: 0px !important; }.pl-0, .px-0 { padding-left: 0px !important; }.p-1 { padding: 0.25rem !important; }.pt-1, .py-1 { padding-top: 0.25rem !important; }.pr-1, .px-1 { padding-right: 0.25rem !important; }.pb-1, .py-1 { padding-bottom: 0.25rem !important; }.pl-1, .px-1 { padding-left: 0.25rem !important; }.p-2 { padding: 0.5rem !important; }.pt-2, .py-2 { padding-top: 0.5rem !important; }.pr-2, .px-2 { padding-right: 0.5rem !important; }.pb-2, .py-2 { padding-bottom: 0.5rem !important; }.pl-2, .px-2 { padding-left: 0.5rem !important; }.p-3 { padding: 1rem !important; }.pt-3, .py-3 { padding-top: 1rem !important; }.pr-3, .px-3 { padding-right: 1rem !important; }.pb-3, .py-3 { padding-bottom: 1rem !important; }.pl-3, .px-3 { padding-left: 1rem !important; }.p-4 { padding: 1.5rem !important; }.pt-4, .py-4 { padding-top: 1.5rem !important; }.pr-4, .px-4 { padding-right: 1.5rem !important; }.pb-4, .py-4 { padding-bottom: 1.5rem !important; }.pl-4, .px-4 { padding-left: 1.5rem !important; }.p-5 { padding: 3rem !important; }.pt-5, .py-5 { padding-top: 3rem !important; }.pr-5, .px-5 { padding-right: 3rem !important; }.pb-5, .py-5 { padding-bottom: 3rem !important; }.pl-5, .px-5 { padding-left: 3rem !important; }.m-auto { margin: auto !important; }.mt-auto, .my-auto { margin-top: auto !important; }.mr-auto, .mx-auto { margin-right: auto !important; }.mb-auto, .my-auto { margin-bottom: auto !important; }.ml-auto, .mx-auto { margin-left: auto !important; }@media (min-width: 576px) {\n  .m-sm-0 { margin: 0px !important; }\n  .mt-sm-0, .my-sm-0 { margin-top: 0px !important; }\n  .mr-sm-0, .mx-sm-0 { margin-right: 0px !important; }\n  .mb-sm-0, .my-sm-0 { margin-bottom: 0px !important; }\n  .ml-sm-0, .mx-sm-0 { margin-left: 0px !important; }\n  .m-sm-1 { margin: 0.25rem !important; }\n  .mt-sm-1, .my-sm-1 { margin-top: 0.25rem !important; }\n  .mr-sm-1, .mx-sm-1 { margin-right: 0.25rem !important; }\n  .mb-sm-1, .my-sm-1 { margin-bottom: 0.25rem !important; }\n  .ml-sm-1, .mx-sm-1 { margin-left: 0.25rem !important; }\n  .m-sm-2 { margin: 0.5rem !important; }\n  .mt-sm-2, .my-sm-2 { margin-top: 0.5rem !important; }\n  .mr-sm-2, .mx-sm-2 { margin-right: 0.5rem !important; }\n  .mb-sm-2, .my-sm-2 { margin-bottom: 0.5rem !important; }\n  .ml-sm-2, .mx-sm-2 { margin-left: 0.5rem !important; }\n  .m-sm-3 { margin: 1rem !important; }\n  .mt-sm-3, .my-sm-3 { margin-top: 1rem !important; }\n  .mr-sm-3, .mx-sm-3 { margin-right: 1rem !important; }\n  .mb-sm-3, .my-sm-3 { margin-bottom: 1rem !important; }\n  .ml-sm-3, .mx-sm-3 { margin-left: 1rem !important; }\n  .m-sm-4 { margin: 1.5rem !important; }\n  .mt-sm-4, .my-sm-4 { margin-top: 1.5rem !important; }\n  .mr-sm-4, .mx-sm-4 { margin-right: 1.5rem !important; }\n  .mb-sm-4, .my-sm-4 { margin-bottom: 1.5rem !important; }\n  .ml-sm-4, .mx-sm-4 { margin-left: 1.5rem !important; }\n  .m-sm-5 { margin: 3rem !important; }\n  .mt-sm-5, .my-sm-5 { margin-top: 3rem !important; }\n  .mr-sm-5, .mx-sm-5 { margin-right: 3rem !important; }\n  .mb-sm-5, .my-sm-5 { margin-bottom: 3rem !important; }\n  .ml-sm-5, .mx-sm-5 { margin-left: 3rem !important; }\n  .p-sm-0 { padding: 0px !important; }\n  .pt-sm-0, .py-sm-0 { padding-top: 0px !important; }\n  .pr-sm-0, .px-sm-0 { padding-right: 0px !important; }\n  .pb-sm-0, .py-sm-0 { padding-bottom: 0px !important; }\n  .pl-sm-0, .px-sm-0 { padding-left: 0px !important; }\n  .p-sm-1 { padding: 0.25rem !important; }\n  .pt-sm-1, .py-sm-1 { padding-top: 0.25rem !important; }\n  .pr-sm-1, .px-sm-1 { padding-right: 0.25rem !important; }\n  .pb-sm-1, .py-sm-1 { padding-bottom: 0.25rem !important; }\n  .pl-sm-1, .px-sm-1 { padding-left: 0.25rem !important; }\n  .p-sm-2 { padding: 0.5rem !important; }\n  .pt-sm-2, .py-sm-2 { padding-top: 0.5rem !important; }\n  .pr-sm-2, .px-sm-2 { padding-right: 0.5rem !important; }\n  .pb-sm-2, .py-sm-2 { padding-bottom: 0.5rem !important; }\n  .pl-sm-2, .px-sm-2 { padding-left: 0.5rem !important; }\n  .p-sm-3 { padding: 1rem !important; }\n  .pt-sm-3, .py-sm-3 { padding-top: 1rem !important; }\n  .pr-sm-3, .px-sm-3 { padding-right: 1rem !important; }\n  .pb-sm-3, .py-sm-3 { padding-bottom: 1rem !important; }\n  .pl-sm-3, .px-sm-3 { padding-left: 1rem !important; }\n  .p-sm-4 { padding: 1.5rem !important; }\n  .pt-sm-4, .py-sm-4 { padding-top: 1.5rem !important; }\n  .pr-sm-4, .px-sm-4 { padding-right: 1.5rem !important; }\n  .pb-sm-4, .py-sm-4 { padding-bottom: 1.5rem !important; }\n  .pl-sm-4, .px-sm-4 { padding-left: 1.5rem !important; }\n  .p-sm-5 { padding: 3rem !important; }\n  .pt-sm-5, .py-sm-5 { padding-top: 3rem !important; }\n  .pr-sm-5, .px-sm-5 { padding-right: 3rem !important; }\n  .pb-sm-5, .py-sm-5 { padding-bottom: 3rem !important; }\n  .pl-sm-5, .px-sm-5 { padding-left: 3rem !important; }\n  .m-sm-auto { margin: auto !important; }\n  .mt-sm-auto, .my-sm-auto { margin-top: auto !important; }\n  .mr-sm-auto, .mx-sm-auto { margin-right: auto !important; }\n  .mb-sm-auto, .my-sm-auto { margin-bottom: auto !important; }\n  .ml-sm-auto, .mx-sm-auto { margin-left: auto !important; }\n}@media (min-width: 768px) {\n  .m-md-0 { margin: 0px !important; }\n  .mt-md-0, .my-md-0 { margin-top: 0px !important; }\n  .mr-md-0, .mx-md-0 { margin-right: 0px !important; }\n  .mb-md-0, .my-md-0 { margin-bottom: 0px !important; }\n  .ml-md-0, .mx-md-0 { margin-left: 0px !important; }\n  .m-md-1 { margin: 0.25rem !important; }\n  .mt-md-1, .my-md-1 { margin-top: 0.25rem !important; }\n  .mr-md-1, .mx-md-1 { margin-right: 0.25rem !important; }\n  .mb-md-1, .my-md-1 { margin-bottom: 0.25rem !important; }\n  .ml-md-1, .mx-md-1 { margin-left: 0.25rem !important; }\n  .m-md-2 { margin: 0.5rem !important; }\n  .mt-md-2, .my-md-2 { margin-top: 0.5rem !important; }\n  .mr-md-2, .mx-md-2 { margin-right: 0.5rem !important; }\n  .mb-md-2, .my-md-2 { margin-bottom: 0.5rem !important; }\n  .ml-md-2, .mx-md-2 { margin-left: 0.5rem !important; }\n  .m-md-3 { margin: 1rem !important; }\n  .mt-md-3, .my-md-3 { margin-top: 1rem !important; }\n  .mr-md-3, .mx-md-3 { margin-right: 1rem !important; }\n  .mb-md-3, .my-md-3 { margin-bottom: 1rem !important; }\n  .ml-md-3, .mx-md-3 { margin-left: 1rem !important; }\n  .m-md-4 { margin: 1.5rem !important; }\n  .mt-md-4, .my-md-4 { margin-top: 1.5rem !important; }\n  .mr-md-4, .mx-md-4 { margin-right: 1.5rem !important; }\n  .mb-md-4, .my-md-4 { margin-bottom: 1.5rem !important; }\n  .ml-md-4, .mx-md-4 { margin-left: 1.5rem !important; }\n  .m-md-5 { margin: 3rem !important; }\n  .mt-md-5, .my-md-5 { margin-top: 3rem !important; }\n  .mr-md-5, .mx-md-5 { margin-right: 3rem !important; }\n  .mb-md-5, .my-md-5 { margin-bottom: 3rem !important; }\n  .ml-md-5, .mx-md-5 { margin-left: 3rem !important; }\n  .p-md-0 { padding: 0px !important; }\n  .pt-md-0, .py-md-0 { padding-top: 0px !important; }\n  .pr-md-0, .px-md-0 { padding-right: 0px !important; }\n  .pb-md-0, .py-md-0 { padding-bottom: 0px !important; }\n  .pl-md-0, .px-md-0 { padding-left: 0px !important; }\n  .p-md-1 { padding: 0.25rem !important; }\n  .pt-md-1, .py-md-1 { padding-top: 0.25rem !important; }\n  .pr-md-1, .px-md-1 { padding-right: 0.25rem !important; }\n  .pb-md-1, .py-md-1 { padding-bottom: 0.25rem !important; }\n  .pl-md-1, .px-md-1 { padding-left: 0.25rem !important; }\n  .p-md-2 { padding: 0.5rem !important; }\n  .pt-md-2, .py-md-2 { padding-top: 0.5rem !important; }\n  .pr-md-2, .px-md-2 { padding-right: 0.5rem !important; }\n  .pb-md-2, .py-md-2 { padding-bottom: 0.5rem !important; }\n  .pl-md-2, .px-md-2 { padding-left: 0.5rem !important; }\n  .p-md-3 { padding: 1rem !important; }\n  .pt-md-3, .py-md-3 { padding-top: 1rem !important; }\n  .pr-md-3, .px-md-3 { padding-right: 1rem !important; }\n  .pb-md-3, .py-md-3 { padding-bottom: 1rem !important; }\n  .pl-md-3, .px-md-3 { padding-left: 1rem !important; }\n  .p-md-4 { padding: 1.5rem !important; }\n  .pt-md-4, .py-md-4 { padding-top: 1.5rem !important; }\n  .pr-md-4, .px-md-4 { padding-right: 1.5rem !important; }\n  .pb-md-4, .py-md-4 { padding-bottom: 1.5rem !important; }\n  .pl-md-4, .px-md-4 { padding-left: 1.5rem !important; }\n  .p-md-5 { padding: 3rem !important; }\n  .pt-md-5, .py-md-5 { padding-top: 3rem !important; }\n  .pr-md-5, .px-md-5 { padding-right: 3rem !important; }\n  .pb-md-5, .py-md-5 { padding-bottom: 3rem !important; }\n  .pl-md-5, .px-md-5 { padding-left: 3rem !important; }\n  .m-md-auto { margin: auto !important; }\n  .mt-md-auto, .my-md-auto { margin-top: auto !important; }\n  .mr-md-auto, .mx-md-auto { margin-right: auto !important; }\n  .mb-md-auto, .my-md-auto { margin-bottom: auto !important; }\n  .ml-md-auto, .mx-md-auto { margin-left: auto !important; }\n}@media (min-width: 992px) {\n  .m-lg-0 { margin: 0px !important; }\n  .mt-lg-0, .my-lg-0 { margin-top: 0px !important; }\n  .mr-lg-0, .mx-lg-0 { margin-right: 0px !important; }\n  .mb-lg-0, .my-lg-0 { margin-bottom: 0px !important; }\n  .ml-lg-0, .mx-lg-0 { margin-left: 0px !important; }\n  .m-lg-1 { margin: 0.25rem !important; }\n  .mt-lg-1, .my-lg-1 { margin-top: 0.25rem !important; }\n  .mr-lg-1, .mx-lg-1 { margin-right: 0.25rem !important; }\n  .mb-lg-1, .my-lg-1 { margin-bottom: 0.25rem !important; }\n  .ml-lg-1, .mx-lg-1 { margin-left: 0.25rem !important; }\n  .m-lg-2 { margin: 0.5rem !important; }\n  .mt-lg-2, .my-lg-2 { margin-top: 0.5rem !important; }\n  .mr-lg-2, .mx-lg-2 { margin-right: 0.5rem !important; }\n  .mb-lg-2, .my-lg-2 { margin-bottom: 0.5rem !important; }\n  .ml-lg-2, .mx-lg-2 { margin-left: 0.5rem !important; }\n  .m-lg-3 { margin: 1rem !important; }\n  .mt-lg-3, .my-lg-3 { margin-top: 1rem !important; }\n  .mr-lg-3, .mx-lg-3 { margin-right: 1rem !important; }\n  .mb-lg-3, .my-lg-3 { margin-bottom: 1rem !important; }\n  .ml-lg-3, .mx-lg-3 { margin-left: 1rem !important; }\n  .m-lg-4 { margin: 1.5rem !important; }\n  .mt-lg-4, .my-lg-4 { margin-top: 1.5rem !important; }\n  .mr-lg-4, .mx-lg-4 { margin-right: 1.5rem !important; }\n  .mb-lg-4, .my-lg-4 { margin-bottom: 1.5rem !important; }\n  .ml-lg-4, .mx-lg-4 { margin-left: 1.5rem !important; }\n  .m-lg-5 { margin: 3rem !important; }\n  .mt-lg-5, .my-lg-5 { margin-top: 3rem !important; }\n  .mr-lg-5, .mx-lg-5 { margin-right: 3rem !important; }\n  .mb-lg-5, .my-lg-5 { margin-bottom: 3rem !important; }\n  .ml-lg-5, .mx-lg-5 { margin-left: 3rem !important; }\n  .p-lg-0 { padding: 0px !important; }\n  .pt-lg-0, .py-lg-0 { padding-top: 0px !important; }\n  .pr-lg-0, .px-lg-0 { padding-right: 0px !important; }\n  .pb-lg-0, .py-lg-0 { padding-bottom: 0px !important; }\n  .pl-lg-0, .px-lg-0 { padding-left: 0px !important; }\n  .p-lg-1 { padding: 0.25rem !important; }\n  .pt-lg-1, .py-lg-1 { padding-top: 0.25rem !important; }\n  .pr-lg-1, .px-lg-1 { padding-right: 0.25rem !important; }\n  .pb-lg-1, .py-lg-1 { padding-bottom: 0.25rem !important; }\n  .pl-lg-1, .px-lg-1 { padding-left: 0.25rem !important; }\n  .p-lg-2 { padding: 0.5rem !important; }\n  .pt-lg-2, .py-lg-2 { padding-top: 0.5rem !important; }\n  .pr-lg-2, .px-lg-2 { padding-right: 0.5rem !important; }\n  .pb-lg-2, .py-lg-2 { padding-bottom: 0.5rem !important; }\n  .pl-lg-2, .px-lg-2 { padding-left: 0.5rem !important; }\n  .p-lg-3 { padding: 1rem !important; }\n  .pt-lg-3, .py-lg-3 { padding-top: 1rem !important; }\n  .pr-lg-3, .px-lg-3 { padding-right: 1rem !important; }\n  .pb-lg-3, .py-lg-3 { padding-bottom: 1rem !important; }\n  .pl-lg-3, .px-lg-3 { padding-left: 1rem !important; }\n  .p-lg-4 { padding: 1.5rem !important; }\n  .pt-lg-4, .py-lg-4 { padding-top: 1.5rem !important; }\n  .pr-lg-4, .px-lg-4 { padding-right: 1.5rem !important; }\n  .pb-lg-4, .py-lg-4 { padding-bottom: 1.5rem !important; }\n  .pl-lg-4, .px-lg-4 { padding-left: 1.5rem !important; }\n  .p-lg-5 { padding: 3rem !important; }\n  .pt-lg-5, .py-lg-5 { padding-top: 3rem !important; }\n  .pr-lg-5, .px-lg-5 { padding-right: 3rem !important; }\n  .pb-lg-5, .py-lg-5 { padding-bottom: 3rem !important; }\n  .pl-lg-5, .px-lg-5 { padding-left: 3rem !important; }\n  .m-lg-auto { margin: auto !important; }\n  .mt-lg-auto, .my-lg-auto { margin-top: auto !important; }\n  .mr-lg-auto, .mx-lg-auto { margin-right: auto !important; }\n  .mb-lg-auto, .my-lg-auto { margin-bottom: auto !important; }\n  .ml-lg-auto, .mx-lg-auto { margin-left: auto !important; }\n}@media (min-width: 1200px) {\n  .m-xl-0 { margin: 0px !important; }\n  .mt-xl-0, .my-xl-0 { margin-top: 0px !important; }\n  .mr-xl-0, .mx-xl-0 { margin-right: 0px !important; }\n  .mb-xl-0, .my-xl-0 { margin-bottom: 0px !important; }\n  .ml-xl-0, .mx-xl-0 { margin-left: 0px !important; }\n  .m-xl-1 { margin: 0.25rem !important; }\n  .mt-xl-1, .my-xl-1 { margin-top: 0.25rem !important; }\n  .mr-xl-1, .mx-xl-1 { margin-right: 0.25rem !important; }\n  .mb-xl-1, .my-xl-1 { margin-bottom: 0.25rem !important; }\n  .ml-xl-1, .mx-xl-1 { margin-left: 0.25rem !important; }\n  .m-xl-2 { margin: 0.5rem !important; }\n  .mt-xl-2, .my-xl-2 { margin-top: 0.5rem !important; }\n  .mr-xl-2, .mx-xl-2 { margin-right: 0.5rem !important; }\n  .mb-xl-2, .my-xl-2 { margin-bottom: 0.5rem !important; }\n  .ml-xl-2, .mx-xl-2 { margin-left: 0.5rem !important; }\n  .m-xl-3 { margin: 1rem !important; }\n  .mt-xl-3, .my-xl-3 { margin-top: 1rem !important; }\n  .mr-xl-3, .mx-xl-3 { margin-right: 1rem !important; }\n  .mb-xl-3, .my-xl-3 { margin-bottom: 1rem !important; }\n  .ml-xl-3, .mx-xl-3 { margin-left: 1rem !important; }\n  .m-xl-4 { margin: 1.5rem !important; }\n  .mt-xl-4, .my-xl-4 { margin-top: 1.5rem !important; }\n  .mr-xl-4, .mx-xl-4 { margin-right: 1.5rem !important; }\n  .mb-xl-4, .my-xl-4 { margin-bottom: 1.5rem !important; }\n  .ml-xl-4, .mx-xl-4 { margin-left: 1.5rem !important; }\n  .m-xl-5 { margin: 3rem !important; }\n  .mt-xl-5, .my-xl-5 { margin-top: 3rem !important; }\n  .mr-xl-5, .mx-xl-5 { margin-right: 3rem !important; }\n  .mb-xl-5, .my-xl-5 { margin-bottom: 3rem !important; }\n  .ml-xl-5, .mx-xl-5 { margin-left: 3rem !important; }\n  .p-xl-0 { padding: 0px !important; }\n  .pt-xl-0, .py-xl-0 { padding-top: 0px !important; }\n  .pr-xl-0, .px-xl-0 { padding-right: 0px !important; }\n  .pb-xl-0, .py-xl-0 { padding-bottom: 0px !important; }\n  .pl-xl-0, .px-xl-0 { padding-left: 0px !important; }\n  .p-xl-1 { padding: 0.25rem !important; }\n  .pt-xl-1, .py-xl-1 { padding-top: 0.25rem !important; }\n  .pr-xl-1, .px-xl-1 { padding-right: 0.25rem !important; }\n  .pb-xl-1, .py-xl-1 { padding-bottom: 0.25rem !important; }\n  .pl-xl-1, .px-xl-1 { padding-left: 0.25rem !important; }\n  .p-xl-2 { padding: 0.5rem !important; }\n  .pt-xl-2, .py-xl-2 { padding-top: 0.5rem !important; }\n  .pr-xl-2, .px-xl-2 { padding-right: 0.5rem !important; }\n  .pb-xl-2, .py-xl-2 { padding-bottom: 0.5rem !important; }\n  .pl-xl-2, .px-xl-2 { padding-left: 0.5rem !important; }\n  .p-xl-3 { padding: 1rem !important; }\n  .pt-xl-3, .py-xl-3 { padding-top: 1rem !important; }\n  .pr-xl-3, .px-xl-3 { padding-right: 1rem !important; }\n  .pb-xl-3, .py-xl-3 { padding-bottom: 1rem !important; }\n  .pl-xl-3, .px-xl-3 { padding-left: 1rem !important; }\n  .p-xl-4 { padding: 1.5rem !important; }\n  .pt-xl-4, .py-xl-4 { padding-top: 1.5rem !important; }\n  .pr-xl-4, .px-xl-4 { padding-right: 1.5rem !important; }\n  .pb-xl-4, .py-xl-4 { padding-bottom: 1.5rem !important; }\n  .pl-xl-4, .px-xl-4 { padding-left: 1.5rem !important; }\n  .p-xl-5 { padding: 3rem !important; }\n  .pt-xl-5, .py-xl-5 { padding-top: 3rem !important; }\n  .pr-xl-5, .px-xl-5 { padding-right: 3rem !important; }\n  .pb-xl-5, .py-xl-5 { padding-bottom: 3rem !important; }\n  .pl-xl-5, .px-xl-5 { padding-left: 3rem !important; }\n  .m-xl-auto { margin: auto !important; }\n  .mt-xl-auto, .my-xl-auto { margin-top: auto !important; }\n  .mr-xl-auto, .mx-xl-auto { margin-right: auto !important; }\n  .mb-xl-auto, .my-xl-auto { margin-bottom: auto !important; }\n  .ml-xl-auto, .mx-xl-auto { margin-left: auto !important; }\n}.text-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; }.text-justify { text-align: justify !important; }.text-nowrap { white-space: nowrap !important; }.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.text-left { text-align: left !important; }.text-right { text-align: right !important; }.text-center { text-align: center !important; }@media (min-width: 576px) {\n  .text-sm-left { text-align: left !important; }\n  .text-sm-right { text-align: right !important; }\n  .text-sm-center { text-align: center !important; }\n}@media (min-width: 768px) {\n  .text-md-left { text-align: left !important; }\n  .text-md-right { text-align: right !important; }\n  .text-md-center { text-align: center !important; }\n}@media (min-width: 992px) {\n  .text-lg-left { text-align: left !important; }\n  .text-lg-right { text-align: right !important; }\n  .text-lg-center { text-align: center !important; }\n}@media (min-width: 1200px) {\n  .text-xl-left { text-align: left !important; }\n  .text-xl-right { text-align: right !important; }\n  .text-xl-center { text-align: center !important; }\n}.text-lowercase { text-transform: lowercase !important; }.text-uppercase { text-transform: uppercase !important; }.text-capitalize { text-transform: capitalize !important; }.font-weight-light { font-weight: 300 !important; }.font-weight-normal { font-weight: 400 !important; }.font-weight-bold { font-weight: 700 !important; }.font-italic { font-style: italic !important; }.text-white { color: rgb(255, 255, 255) !important; }.text-primary { color: rgb(0, 123, 255) !important; }a.text-primary:focus, a.text-primary:hover { color: rgb(0, 98, 204) !important; }.text-secondary { color: rgb(108, 117, 125) !important; }a.text-secondary:focus, a.text-secondary:hover { color: rgb(84, 91, 98) !important; }.text-success { color: rgb(40, 167, 69) !important; }a.text-success:focus, a.text-success:hover { color: rgb(30, 126, 52) !important; }.text-info { color: rgb(23, 162, 184) !important; }a.text-info:focus, a.text-info:hover { color: rgb(17, 122, 139) !important; }.text-warning { color: rgb(255, 193, 7) !important; }a.text-warning:focus, a.text-warning:hover { color: rgb(211, 158, 0) !important; }.text-danger { color: rgb(220, 53, 69) !important; }a.text-danger:focus, a.text-danger:hover { color: rgb(189, 33, 48) !important; }.text-light { color: rgb(248, 249, 250) !important; }a.text-light:focus, a.text-light:hover { color: rgb(218, 224, 229) !important; }.text-dark { color: rgb(52, 58, 64) !important; }a.text-dark:focus, a.text-dark:hover { color: rgb(29, 33, 36) !important; }.text-body { color: rgb(33, 37, 41) !important; }.text-muted { color: rgb(108, 117, 125) !important; }.text-black-50 { color: rgba(0, 0, 0, 0.5) !important; }.text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }.text-hide { font: 0px/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0px; }.visible { visibility: visible !important; }.invisible { visibility: hidden !important; }@media print {\n  *, ::after, ::before { text-shadow: none !important; box-shadow: none !important; }\n  a:not(.btn) { text-decoration: underline; }\n  abbr[title]::after { content: \" (\" attr(title) \")\"; }\n  pre { white-space: pre-wrap !important; }\n  blockquote, pre { border: 1px solid rgb(173, 181, 189); break-inside: avoid; }\n  thead { display: table-header-group; }\n  img, tr { break-inside: avoid; }\n  h2, h3, p { orphans: 3; widows: 3; }\n  h2, h3 { break-after: avoid; }\n  @page { size: a3; }\n  body { min-width: 992px !important; }\n  .container { min-width: 992px !important; }\n  .navbar { display: none; }\n  .badge { border: 1px solid rgb(0, 0, 0); }\n  .table { border-collapse: collapse !important; }\n  .table td, .table th { background-color: rgb(255, 255, 255) !important; }\n  .table-bordered td, .table-bordered th { border: 1px solid rgb(222, 226, 230) !important; }\n  .table-dark { color: inherit; }\n  .table-dark tbody + tbody, .table-dark td, .table-dark th, .table-dark thead th { border-color: rgb(222, 226, 230); }\n  .table .thead-dark th { color: inherit; border-color: rgb(222, 226, 230); }\n}"},"childNodes":[],"id":22},{"type":3,"textContent":"\n\n  ","id":23},{"type":5,"textContent":" Custom styles for this template ","id":24},{"type":3,"textContent":"\n  ","id":25},{"type":2,"tagName":"link","attributes":{"_cssText":".container { max-width: 960px; }.lh-condensed { line-height: 1.25; }"},"childNodes":[],"id":26},{"type":3,"textContent":"\n","id":27}],"id":5},{"type":3,"textContent":"\n\n","id":28},{"type":2,"tagName":"body","attributes":{"class":"bg-light"},"childNodes":[{"type":3,"textContent":"\n\n  ","id":30},{"type":2,"tagName":"div","attributes":{"class":"container"},"childNodes":[{"type":3,"textContent":"\n    ","id":32},{"type":2,"tagName":"div","attributes":{"class":"py-5 text-center"},"childNodes":[{"type":3,"textContent":"\n      ","id":34},{"type":2,"tagName":"img","attributes":{"class":"d-block mx-auto mb-4","src":"http://localhost:5500/checkout-demo/index_files/bootstrap-solid.svg","alt":"","width":"72","height":"72"},"childNodes":[],"id":35},{"type":3,"textContent":"\n      ","id":36},{"type":2,"tagName":"h2","attributes":{},"childNodes":[{"type":3,"textContent":"Checkout form","id":38}],"id":37},{"type":3,"textContent":"\n      ","id":39},{"type":2,"tagName":"p","attributes":{"class":"lead"},"childNodes":[{"type":3,"textContent":"Below is an example form built entirely with Bootstrap's form controls. Each required form group\n        has\n        a validation state that can be triggered by attempting to submit the form without completing it.","id":41}],"id":40},{"type":3,"textContent":"\n    ","id":42}],"id":33},{"type":3,"textContent":"\n\n    ","id":43},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n      ","id":45},{"type":2,"tagName":"div","attributes":{"class":"col-md-4 order-md-2 mb-4"},"childNodes":[{"type":3,"textContent":"\n        ","id":47},{"type":2,"tagName":"h4","attributes":{"class":"d-flex justify-content-between align-items-center mb-3"},"childNodes":[{"type":3,"textContent":"\n          ","id":49},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Your cart","id":51}],"id":50},{"type":3,"textContent":"\n          ","id":52},{"type":2,"tagName":"span","attributes":{"class":"badge badge-secondary badge-pill"},"childNodes":[{"type":3,"textContent":"3","id":54}],"id":53},{"type":3,"textContent":"\n        ","id":55}],"id":48},{"type":3,"textContent":"\n        ","id":56},{"type":2,"tagName":"ul","attributes":{"class":"list-group mb-3"},"childNodes":[{"type":3,"textContent":"\n          ","id":58},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between lh-condensed"},"childNodes":[{"type":3,"textContent":"\n            ","id":60},{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"\n              ","id":62},{"type":2,"tagName":"h6","attributes":{"class":"my-0"},"childNodes":[{"type":3,"textContent":"Product name","id":64}],"id":63},{"type":3,"textContent":"\n              ","id":65},{"type":2,"tagName":"small","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Brief description","id":67}],"id":66},{"type":3,"textContent":"\n            ","id":68}],"id":61},{"type":3,"textContent":"\n            ","id":69},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"$12","id":71}],"id":70},{"type":3,"textContent":"\n          ","id":72}],"id":59},{"type":3,"textContent":"\n          ","id":73},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between lh-condensed"},"childNodes":[{"type":3,"textContent":"\n            ","id":75},{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"\n              ","id":77},{"type":2,"tagName":"h6","attributes":{"class":"my-0"},"childNodes":[{"type":3,"textContent":"Second product","id":79}],"id":78},{"type":3,"textContent":"\n              ","id":80},{"type":2,"tagName":"small","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Brief description","id":82}],"id":81},{"type":3,"textContent":"\n            ","id":83}],"id":76},{"type":3,"textContent":"\n            ","id":84},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"$8","id":86}],"id":85},{"type":3,"textContent":"\n          ","id":87}],"id":74},{"type":3,"textContent":"\n          ","id":88},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between lh-condensed"},"childNodes":[{"type":3,"textContent":"\n            ","id":90},{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"\n              ","id":92},{"type":2,"tagName":"h6","attributes":{"class":"my-0"},"childNodes":[{"type":3,"textContent":"Third item","id":94}],"id":93},{"type":3,"textContent":"\n              ","id":95},{"type":2,"tagName":"small","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Brief description","id":97}],"id":96},{"type":3,"textContent":"\n            ","id":98}],"id":91},{"type":3,"textContent":"\n            ","id":99},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"$5","id":101}],"id":100},{"type":3,"textContent":"\n          ","id":102}],"id":89},{"type":3,"textContent":"\n          ","id":103},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between bg-light"},"childNodes":[{"type":3,"textContent":"\n            ","id":105},{"type":2,"tagName":"div","attributes":{"class":"text-success"},"childNodes":[{"type":3,"textContent":"\n              ","id":107},{"type":2,"tagName":"h6","attributes":{"class":"my-0"},"childNodes":[{"type":3,"textContent":"Promo code","id":109}],"id":108},{"type":3,"textContent":"\n              ","id":110},{"type":2,"tagName":"small","attributes":{},"childNodes":[{"type":3,"textContent":"EXAMPLECODE","id":112}],"id":111},{"type":3,"textContent":"\n            ","id":113}],"id":106},{"type":3,"textContent":"\n            ","id":114},{"type":2,"tagName":"span","attributes":{"class":"text-success"},"childNodes":[{"type":3,"textContent":"-$5","id":116}],"id":115},{"type":3,"textContent":"\n          ","id":117}],"id":104},{"type":3,"textContent":"\n          ","id":118},{"type":2,"tagName":"li","attributes":{"class":"list-group-item d-flex justify-content-between"},"childNodes":[{"type":3,"textContent":"\n            ","id":120},{"type":2,"tagName":"span","attributes":{},"childNodes":[{"type":3,"textContent":"Total (USD)","id":122}],"id":121},{"type":3,"textContent":"\n            ","id":123},{"type":2,"tagName":"strong","attributes":{},"childNodes":[{"type":3,"textContent":"$20","id":125}],"id":124},{"type":3,"textContent":"\n          ","id":126}],"id":119},{"type":3,"textContent":"\n        ","id":127}],"id":57},{"type":3,"textContent":"\n\n        ","id":128},{"type":2,"tagName":"form","attributes":{"class":"card p-2"},"childNodes":[{"type":3,"textContent":"\n          ","id":130},{"type":2,"tagName":"div","attributes":{"class":"input-group"},"childNodes":[{"type":3,"textContent":"\n            ","id":132},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","placeholder":"Promo code"},"childNodes":[],"id":133},{"type":3,"textContent":"\n            ","id":134},{"type":2,"tagName":"div","attributes":{"class":"input-group-append"},"childNodes":[{"type":3,"textContent":"\n              ","id":136},{"type":2,"tagName":"button","attributes":{"type":"submit","class":"btn btn-secondary"},"childNodes":[{"type":3,"textContent":"Redeem","id":138}],"id":137},{"type":3,"textContent":"\n            ","id":139}],"id":135},{"type":3,"textContent":"\n          ","id":140}],"id":131},{"type":3,"textContent":"\n        ","id":141}],"id":129},{"type":3,"textContent":"\n      ","id":142}],"id":46},{"type":3,"textContent":"\n      ","id":143},{"type":2,"tagName":"div","attributes":{"class":"col-md-8 order-md-1"},"childNodes":[{"type":3,"textContent":"\n        ","id":145},{"type":2,"tagName":"h4","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"Billing address","id":147}],"id":146},{"type":3,"textContent":"\n        ","id":148},{"type":2,"tagName":"form","attributes":{"class":"needs-validation","novalidate":""},"childNodes":[{"type":3,"textContent":"\n          ","id":150},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n            ","id":152},{"type":2,"tagName":"div","attributes":{"class":"col-md-6 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":154},{"type":2,"tagName":"label","attributes":{"for":"firstName"},"childNodes":[{"type":3,"textContent":"First name","id":156}],"id":155},{"type":3,"textContent":"\n              ","id":157},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"firstName","placeholder":"","value":"","required":""},"childNodes":[],"id":158},{"type":3,"textContent":"\n              ","id":159},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Valid first name is required.\n              ","id":161}],"id":160},{"type":3,"textContent":"\n            ","id":162}],"id":153},{"type":3,"textContent":"\n            ","id":163},{"type":2,"tagName":"div","attributes":{"class":"col-md-6 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":165},{"type":2,"tagName":"label","attributes":{"for":"lastName"},"childNodes":[{"type":3,"textContent":"Last name","id":167}],"id":166},{"type":3,"textContent":"\n              ","id":168},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"lastName","placeholder":"","value":"","required":""},"childNodes":[],"id":169},{"type":3,"textContent":"\n              ","id":170},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Valid last name is required.\n              ","id":172}],"id":171},{"type":3,"textContent":"\n            ","id":173}],"id":164},{"type":3,"textContent":"\n          ","id":174}],"id":151},{"type":3,"textContent":"\n\n          ","id":175},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":177},{"type":2,"tagName":"label","attributes":{"for":"username"},"childNodes":[{"type":3,"textContent":"Username","id":179}],"id":178},{"type":3,"textContent":"\n            ","id":180},{"type":2,"tagName":"div","attributes":{"class":"input-group"},"childNodes":[{"type":3,"textContent":"\n              ","id":182},{"type":2,"tagName":"div","attributes":{"class":"input-group-prepend"},"childNodes":[{"type":3,"textContent":"\n                ","id":184},{"type":2,"tagName":"span","attributes":{"class":"input-group-text"},"childNodes":[{"type":3,"textContent":"@","id":186}],"id":185},{"type":3,"textContent":"\n              ","id":187}],"id":183},{"type":3,"textContent":"\n              ","id":188},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"username","placeholder":"Username","required":""},"childNodes":[],"id":189},{"type":3,"textContent":"\n              ","id":190},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback","style":"width: 100%;"},"childNodes":[{"type":3,"textContent":"\n                Your username is required.\n              ","id":192}],"id":191},{"type":3,"textContent":"\n            ","id":193}],"id":181},{"type":3,"textContent":"\n          ","id":194}],"id":176},{"type":3,"textContent":"\n\n          ","id":195},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":197},{"type":2,"tagName":"label","attributes":{"for":"email"},"childNodes":[{"type":3,"textContent":"Email ","id":199},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"(Optional)","id":201}],"id":200}],"id":198},{"type":3,"textContent":"\n            ","id":202},{"type":2,"tagName":"input","attributes":{"type":"email","class":"form-control","id":"email","placeholder":"you@example.com"},"childNodes":[],"id":203},{"type":3,"textContent":"\n            ","id":204},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n              Please enter a valid email address for shipping updates.\n            ","id":206}],"id":205},{"type":3,"textContent":"\n          ","id":207}],"id":196},{"type":3,"textContent":"\n\n          ","id":208},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":210},{"type":2,"tagName":"label","attributes":{"for":"address"},"childNodes":[{"type":3,"textContent":"Address","id":212}],"id":211},{"type":3,"textContent":"\n            ","id":213},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"address","placeholder":"1234 Main St","required":""},"childNodes":[],"id":214},{"type":3,"textContent":"\n            ","id":215},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n              Please enter your shipping address.\n            ","id":217}],"id":216},{"type":3,"textContent":"\n          ","id":218}],"id":209},{"type":3,"textContent":"\n\n          ","id":219},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":221},{"type":2,"tagName":"label","attributes":{"for":"address2"},"childNodes":[{"type":3,"textContent":"Address 2 ","id":223},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"(Optional)","id":225}],"id":224}],"id":222},{"type":3,"textContent":"\n            ","id":226},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"address2","placeholder":"Apartment or suite"},"childNodes":[],"id":227},{"type":3,"textContent":"\n          ","id":228}],"id":220},{"type":3,"textContent":"\n\n          ","id":229},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n            ","id":231},{"type":2,"tagName":"div","attributes":{"class":"col-md-5 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":233},{"type":2,"tagName":"label","attributes":{"for":"country"},"childNodes":[{"type":3,"textContent":"Country","id":235}],"id":234},{"type":3,"textContent":"\n              ","id":236},{"type":2,"tagName":"select","attributes":{"class":"custom-select d-block w-100","id":"country","required":""},"childNodes":[{"type":3,"textContent":"\n                ","id":238},{"type":2,"tagName":"option","attributes":{"value":"","selected":true},"childNodes":[{"type":3,"textContent":"Choose...","id":240}],"id":239},{"type":3,"textContent":"\n                ","id":241},{"type":2,"tagName":"option","attributes":{},"childNodes":[{"type":3,"textContent":"United States","id":243}],"id":242},{"type":3,"textContent":"\n              ","id":244}],"id":237},{"type":3,"textContent":"\n              ","id":245},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Please select a valid country.\n              ","id":247}],"id":246},{"type":3,"textContent":"\n            ","id":248}],"id":232},{"type":3,"textContent":"\n            ","id":249},{"type":2,"tagName":"div","attributes":{"class":"col-md-4 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":251},{"type":2,"tagName":"label","attributes":{"for":"state"},"childNodes":[{"type":3,"textContent":"State","id":253}],"id":252},{"type":3,"textContent":"\n              ","id":254},{"type":2,"tagName":"select","attributes":{"class":"custom-select d-block w-100","id":"state","required":""},"childNodes":[{"type":3,"textContent":"\n                ","id":256},{"type":2,"tagName":"option","attributes":{"value":"","selected":true},"childNodes":[{"type":3,"textContent":"Choose...","id":258}],"id":257},{"type":3,"textContent":"\n                ","id":259},{"type":2,"tagName":"option","attributes":{},"childNodes":[{"type":3,"textContent":"California","id":261}],"id":260},{"type":3,"textContent":"\n              ","id":262}],"id":255},{"type":3,"textContent":"\n              ","id":263},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Please provide a valid state.\n              ","id":265}],"id":264},{"type":3,"textContent":"\n            ","id":266}],"id":250},{"type":3,"textContent":"\n            ","id":267},{"type":2,"tagName":"div","attributes":{"class":"col-md-3 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":269},{"type":2,"tagName":"label","attributes":{"for":"zip"},"childNodes":[{"type":3,"textContent":"Zip","id":271}],"id":270},{"type":3,"textContent":"\n              ","id":272},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"zip","placeholder":"","required":""},"childNodes":[],"id":273},{"type":3,"textContent":"\n              ","id":274},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Zip code required.\n              ","id":276}],"id":275},{"type":3,"textContent":"\n            ","id":277}],"id":268},{"type":3,"textContent":"\n          ","id":278}],"id":230},{"type":3,"textContent":"\n          ","id":279},{"type":2,"tagName":"hr","attributes":{"class":"mb-4"},"childNodes":[],"id":280},{"type":3,"textContent":"\n          ","id":281},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-checkbox"},"childNodes":[{"type":3,"textContent":"\n            ","id":283},{"type":2,"tagName":"input","attributes":{"type":"checkbox","class":"custom-control-input","id":"same-address"},"childNodes":[],"id":284},{"type":3,"textContent":"\n            ","id":285},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"same-address"},"childNodes":[{"type":3,"textContent":"Shipping address is the same as my billing address","id":287}],"id":286},{"type":3,"textContent":"\n          ","id":288}],"id":282},{"type":3,"textContent":"\n          ","id":289},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-checkbox"},"childNodes":[{"type":3,"textContent":"\n            ","id":291},{"type":2,"tagName":"input","attributes":{"type":"checkbox","class":"custom-control-input","id":"save-info"},"childNodes":[],"id":292},{"type":3,"textContent":"\n            ","id":293},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"save-info"},"childNodes":[{"type":3,"textContent":"Save this information for next time","id":295}],"id":294},{"type":3,"textContent":"\n          ","id":296}],"id":290},{"type":3,"textContent":"\n          ","id":297},{"type":2,"tagName":"hr","attributes":{"class":"mb-4"},"childNodes":[],"id":298},{"type":3,"textContent":"\n\n          ","id":299},{"type":2,"tagName":"h4","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"Payment","id":301}],"id":300},{"type":3,"textContent":"\n\n          ","id":302},{"type":2,"tagName":"div","attributes":{"class":"d-block my-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":304},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-radio"},"childNodes":[{"type":3,"textContent":"\n              ","id":306},{"type":2,"tagName":"input","attributes":{"id":"credit","name":"paymentMethod","type":"radio","class":"custom-control-input","checked":true,"required":""},"childNodes":[],"id":307},{"type":3,"textContent":"\n              ","id":308},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"credit"},"childNodes":[{"type":3,"textContent":"Credit card","id":310}],"id":309},{"type":3,"textContent":"\n            ","id":311}],"id":305},{"type":3,"textContent":"\n            ","id":312},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-radio"},"childNodes":[{"type":3,"textContent":"\n              ","id":314},{"type":2,"tagName":"input","attributes":{"id":"debit","name":"paymentMethod","type":"radio","class":"custom-control-input","required":""},"childNodes":[],"id":315},{"type":3,"textContent":"\n              ","id":316},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"debit"},"childNodes":[{"type":3,"textContent":"Debit card","id":318}],"id":317},{"type":3,"textContent":"\n            ","id":319}],"id":313},{"type":3,"textContent":"\n            ","id":320},{"type":2,"tagName":"div","attributes":{"class":"custom-control custom-radio"},"childNodes":[{"type":3,"textContent":"\n              ","id":322},{"type":2,"tagName":"input","attributes":{"id":"paypal","name":"paymentMethod","type":"radio","class":"custom-control-input","required":""},"childNodes":[],"id":323},{"type":3,"textContent":"\n              ","id":324},{"type":2,"tagName":"label","attributes":{"class":"custom-control-label","for":"paypal"},"childNodes":[{"type":3,"textContent":"PayPal","id":326}],"id":325},{"type":3,"textContent":"\n            ","id":327}],"id":321},{"type":3,"textContent":"\n          ","id":328}],"id":303},{"type":3,"textContent":"\n          ","id":329},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n            ","id":331},{"type":2,"tagName":"div","attributes":{"class":"col-md-6 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":333},{"type":2,"tagName":"label","attributes":{"for":"cc-name"},"childNodes":[{"type":3,"textContent":"Name on card","id":335}],"id":334},{"type":3,"textContent":"\n              ","id":336},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"cc-name","placeholder":"","required":""},"childNodes":[],"id":337},{"type":3,"textContent":"\n              ","id":338},{"type":2,"tagName":"small","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"Full name as displayed on card","id":340}],"id":339},{"type":3,"textContent":"\n              ","id":341},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Name on card is required\n              ","id":343}],"id":342},{"type":3,"textContent":"\n            ","id":344}],"id":332},{"type":3,"textContent":"\n            ","id":345},{"type":2,"tagName":"div","attributes":{"class":"col-md-6 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":347},{"type":2,"tagName":"label","attributes":{"for":"cc-number"},"childNodes":[{"type":3,"textContent":"Credit card number","id":349}],"id":348},{"type":3,"textContent":"\n              ","id":350},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"cc-number","placeholder":"","required":""},"childNodes":[],"id":351},{"type":3,"textContent":"\n              ","id":352},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Credit card number is required\n              ","id":354}],"id":353},{"type":3,"textContent":"\n            ","id":355}],"id":346},{"type":3,"textContent":"\n          ","id":356}],"id":330},{"type":3,"textContent":"\n          ","id":357},{"type":2,"tagName":"div","attributes":{"class":"row"},"childNodes":[{"type":3,"textContent":"\n            ","id":359},{"type":2,"tagName":"div","attributes":{"class":"col-md-3 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":361},{"type":2,"tagName":"label","attributes":{"for":"cc-expiration"},"childNodes":[{"type":3,"textContent":"Expiration","id":363}],"id":362},{"type":3,"textContent":"\n              ","id":364},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"cc-expiration","placeholder":"","required":""},"childNodes":[],"id":365},{"type":3,"textContent":"\n              ","id":366},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Expiration date required\n              ","id":368}],"id":367},{"type":3,"textContent":"\n            ","id":369}],"id":360},{"type":3,"textContent":"\n            ","id":370},{"type":2,"tagName":"div","attributes":{"class":"col-md-3 mb-3"},"childNodes":[{"type":3,"textContent":"\n              ","id":372},{"type":2,"tagName":"label","attributes":{"for":"cc-cvv"},"childNodes":[{"type":3,"textContent":"CVV","id":374}],"id":373},{"type":3,"textContent":"\n              ","id":375},{"type":2,"tagName":"input","attributes":{"type":"text","class":"form-control","id":"cc-cvv","placeholder":"","required":""},"childNodes":[],"id":376},{"type":3,"textContent":"\n              ","id":377},{"type":2,"tagName":"div","attributes":{"class":"invalid-feedback"},"childNodes":[{"type":3,"textContent":"\n                Security code required\n              ","id":379}],"id":378},{"type":3,"textContent":"\n            ","id":380}],"id":371},{"type":3,"textContent":"\n          ","id":381}],"id":358},{"type":3,"textContent":"\n          ","id":382},{"type":2,"tagName":"div","attributes":{"class":"mb-3"},"childNodes":[{"type":3,"textContent":"\n            ","id":384},{"type":2,"tagName":"label","attributes":{"for":"email"},"childNodes":[{"type":3,"textContent":"textarea ","id":386},{"type":2,"tagName":"span","attributes":{"class":"text-muted"},"childNodes":[{"type":3,"textContent":"(Optional)","id":388}],"id":387}],"id":385},{"type":3,"textContent":"\n            ","id":389},{"type":2,"tagName":"textarea","attributes":{"name":"","id":"","cols":"30","rows":"10"},"childNodes":[],"id":390},{"type":3,"textContent":"\n          ","id":391}],"id":383},{"type":3,"textContent":"\n          ","id":392},{"type":2,"tagName":"hr","attributes":{"class":"mb-4"},"childNodes":[],"id":393},{"type":3,"textContent":"\n          ","id":394},{"type":2,"tagName":"button","attributes":{"class":"btn btn-primary btn-lg btn-block","type":"submit"},"childNodes":[{"type":3,"textContent":"Continue to checkout","id":396}],"id":395},{"type":3,"textContent":"\n        ","id":397}],"id":149},{"type":3,"textContent":"\n      ","id":398}],"id":144},{"type":3,"textContent":"\n    ","id":399}],"id":44},{"type":3,"textContent":"\n\n    ","id":400},{"type":2,"tagName":"footer","attributes":{"class":"my-5 pt-5 text-muted text-center text-small"},"childNodes":[{"type":3,"textContent":"\n      ","id":402},{"type":2,"tagName":"p","attributes":{"class":"mb-1"},"childNodes":[{"type":3,"textContent":"© 2017-2018 Company Name","id":404}],"id":403},{"type":3,"textContent":"\n      ","id":405},{"type":2,"tagName":"ul","attributes":{"class":"list-inline"},"childNodes":[{"type":3,"textContent":"\n        ","id":407},{"type":2,"tagName":"li","attributes":{"class":"list-inline-item"},"childNodes":[{"type":2,"tagName":"a","attributes":{"href":"https://getbootstrap.com/docs/4.1/examples/checkout/#"},"childNodes":[{"type":3,"textContent":"Privacy","id":410}],"id":409}],"id":408},{"type":3,"textContent":"\n        ","id":411},{"type":2,"tagName":"li","attributes":{"class":"list-inline-item"},"childNodes":[{"type":2,"tagName":"a","attributes":{"href":"https://getbootstrap.com/docs/4.1/examples/checkout/#"},"childNodes":[{"type":3,"textContent":"Terms","id":414}],"id":413}],"id":412},{"type":3,"textContent":"\n        ","id":415},{"type":2,"tagName":"li","attributes":{"class":"list-inline-item"},"childNodes":[{"type":2,"tagName":"a","attributes":{"href":"https://getbootstrap.com/docs/4.1/examples/checkout/#"},"childNodes":[{"type":3,"textContent":"Support","id":418}],"id":417}],"id":416},{"type":3,"textContent":"\n      ","id":419}],"id":406},{"type":3,"textContent":"\n    ","id":420}],"id":401},{"type":3,"textContent":"\n  ","id":421}],"id":31},{"type":3,"textContent":"\n\n  ","id":422},{"type":5,"textContent":" Bootstrap core JavaScript\n    ================================================== ","id":423},{"type":3,"textContent":"\n  ","id":424},{"type":5,"textContent":" Placed at the end of the document so the pages load faster ","id":425},{"type":3,"textContent":"\n  ","id":426},{"type":2,"tagName":"script","attributes":{"src":"http://localhost:5500/checkout-demo/index_files/jquery-3.3.1.slim.min.js","integrity":"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo","crossorigin":"anonymous"},"childNodes":[],"id":427},{"type":3,"textContent":"\n  ","id":428},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":430}],"id":429},{"type":3,"textContent":"\n  ","id":431},{"type":2,"tagName":"script","attributes":{"src":"http://localhost:5500/checkout-demo/index_files/popper.min.js"},"childNodes":[],"id":432},{"type":3,"textContent":"\n  ","id":433},{"type":2,"tagName":"script","attributes":{"src":"http://localhost:5500/checkout-demo/index_files/bootstrap.min.js"},"childNodes":[],"id":434},{"type":3,"textContent":"\n  ","id":435},{"type":2,"tagName":"script","attributes":{"src":"http://localhost:5500/checkout-demo/index_files/holder.min.js"},"childNodes":[],"id":436},{"type":3,"textContent":"\n  ","id":437},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":439}],"id":438},{"type":3,"textContent":"\n\n  ","id":440},{"type":5,"textContent":" logrocket ","id":441},{"type":3,"textContent":"\n\n  ","id":442},{"type":5,"textContent":" <script src=\"../reverse-engineer/LogRocket.js\"></script>\n  <script>\n    LogRocket.init('bqsqi3/serenity');\n  </script> ","id":443},{"type":3,"textContent":"\n\n  ","id":444},{"type":5,"textContent":" fundebug ","id":445},{"type":3,"textContent":"\n\n  ","id":446},{"type":5,"textContent":" <script src=\"https://js.fundebug.cn/fundebug.1.2.3.min.js\"\n  apikey=\"2e96393d0884f5ef28b95645008da9926cb6750dae6b2a4c7a2403fac4d889ab\" silentVideo=false></script>\n   ","id":447},{"type":3,"textContent":"\n\n  ","id":448},{"type":5,"textContent":" fullstory ","id":449},{"type":3,"textContent":"\n\n  ","id":450},{"type":5,"textContent":" <script>\n    window['_fs_debug'] = false;\n    window['_fs_host'] = 'fullstory.com';\n    window['_fs_org'] = 'EYQ69';\n    window['_fs_namespace'] = 'FS';\n    (function (m, n, e, t, l, o, g, y) {\n      if (e in m) { if (m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window[\"_fs_namespace\"].'); } return; }\n      g = m[e] = function (a, b) { g.q ? g.q.push([a, b]) : g._api(a, b); }; g.q = [];\n      o = n.createElement(t); o.async = 1; o.src = 'https://' + _fs_host + '/s/fs.js';\n      y = n.getElementsByTagName(t)[0]; y.parentNode.insertBefore(o, y);\n      g.identify = function (i, v) { g(l, { uid: i }); if (v) g(l, v) }; g.setUserVars = function (v) { g(l, v) }; g.event = function (i, v) { g('event', { n: i, p: v }) };\n      g.shutdown = function () { g(\"rec\", !1) }; g.restart = function () { g(\"rec\", !0) };\n      g.consent = function (a) { g(\"consent\", !arguments.length || a) };\n      g.identifyAccount = function (i, v) { o = 'account'; v = v || {}; v.acctId = i; g(o, v) };\n      g.clearUserCookie = function () { };\n    })(window, document, window['_fs_namespace'], 'script', 'user');\n  </script> ","id":451},{"type":3,"textContent":"\n\n  ","id":452},{"type":2,"tagName":"script","attributes":{"src":"http://localhost:5500/src/record.js"},"childNodes":[],"id":453},{"type":3,"textContent":"\n  ","id":454},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":456}],"id":455},{"type":3,"textContent":"\n\n","id":457},{"type":5,"textContent":" Code injected by live-server ","id":458},{"type":3,"textContent":"\n","id":459},{"type":2,"tagName":"script","attributes":{"type":"text/javascript"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":461}],"id":460},{"type":3,"textContent":"\n\n","id":462}],"id":29}],"id":4}],"id":1},"initialOffset":{"left":0,"top":0}},"timestamp":1539774745304},{"type":3,"data":{"source":1,"positions":[{"x":301,"y":156,"timeOffset":-1}]},"timestamp":1539774745307},{"type":3,"data":{"source":1,"positions":[{"x":297,"y":159,"timeOffset":-477},{"x":294,"y":160,"timeOffset":-427},{"x":291,"y":162,"timeOffset":-393},{"x":286,"y":166,"timeOffset":-359},{"x":281,"y":169,"timeOffset":-327},{"x":278,"y":172,"timeOffset":-294},{"x":278,"y":175,"timeOffset":-260},{"x":278,"y":179,"timeOffset":-227},{"x":277,"y":185,"timeOffset":-193},{"x":277,"y":192,"timeOffset":-160},{"x":277,"y":197,"timeOffset":-126},{"x":277,"y":199,"timeOffset":-93},{"x":277,"y":202,"timeOffset":-60}]},"timestamp":1539774745807},{"type":3,"data":{"source":1,"positions":[{"x":278,"y":204,"timeOffset":-361},{"x":278,"y":204,"timeOffset":-311},{"x":277,"y":206,"timeOffset":-228}]},"timestamp":1539774746308},{"type":3,"data":{"source":1,"positions":[{"x":277,"y":207,"timeOffset":0}]},"timestamp":1539774747114},{"type":3,"data":{"source":2,"type":1,"id":29,"x":279,"y":280},"timestamp":1539774747448},{"type":3,"data":{"source":2,"type":0,"id":29,"x":279,"y":280},"timestamp":1539774747576},{"type":3,"data":{"source":2,"type":2,"id":29,"x":279,"y":280},"timestamp":1539774747576},{"type":3,"data":{"source":1,"positions":[{"x":274,"y":212,"timeOffset":-466},{"x":273,"y":221,"timeOffset":-433},{"x":272,"y":233,"timeOffset":-400},{"x":272,"y":245,"timeOffset":-367},{"x":272,"y":255,"timeOffset":-334},{"x":276,"y":263,"timeOffset":-300},{"x":277,"y":270,"timeOffset":-266},{"x":279,"y":274,"timeOffset":-233},{"x":279,"y":278,"timeOffset":-184}]},"timestamp":1539774747614},{"type":3,"data":{"source":1,"positions":[{"x":279,"y":280,"timeOffset":0}]},"timestamp":1539774748546},{"type":3,"data":{"source":4,"width":1147,"height":711},"timestamp":1539774748563},{"type":3,"data":{"source":1,"positions":[{"x":279,"y":285,"timeOffset":0}]},"timestamp":1539774749479},{"type":3,"data":{"source":1,"positions":[{"x":270,"y":304,"timeOffset":-468},{"x":265,"y":326,"timeOffset":-435},{"x":264,"y":336,"timeOffset":-401},{"x":262,"y":348,"timeOffset":-368},{"x":263,"y":356,"timeOffset":-334},{"x":263,"y":367,"timeOffset":-301},{"x":263,"y":373,"timeOffset":-267},{"x":263,"y":379,"timeOffset":-234},{"x":263,"y":384,"timeOffset":-201},{"x":262,"y":388,"timeOffset":-167},{"x":262,"y":393,"timeOffset":-133},{"x":261,"y":402,"timeOffset":-101},{"x":261,"y":405,"timeOffset":-68},{"x":261,"y":408,"timeOffset":-18}]},"timestamp":1539774749980},{"type":3,"data":{"source":2,"type":1,"id":158,"x":261,"y":410},"timestamp":1539774750089},{"type":3,"data":{"source":2,"type":5,"id":158},"timestamp":1539774750094},{"type":3,"data":{"source":2,"type":0,"id":158,"x":261,"y":410},"timestamp":1539774750208},{"type":3,"data":{"source":2,"type":2,"id":158,"x":261,"y":410},"timestamp":1539774750208},{"type":3,"data":{"source":1,"positions":[{"x":261,"y":410,"timeOffset":-486}]},"timestamp":1539774750481},{"type":3,"data":{"source":5,"text":"y","isChecked":false,"id":158},"timestamp":1539774750928},{"type":3,"data":{"source":5,"text":"ya","isChecked":false,"id":158},"timestamp":1539774751039},{"type":3,"data":{"source":5,"text":"yan","isChecked":false,"id":158},"timestamp":1539774751151},{"type":3,"data":{"source":5,"text":"yanz","isChecked":false,"id":158},"timestamp":1539774751264},{"type":3,"data":{"source":5,"text":"yanzh","isChecked":false,"id":158},"timestamp":1539774751342},{"type":3,"data":{"source":5,"text":"yanzhe","isChecked":false,"id":158},"timestamp":1539774751449},{"type":3,"data":{"source":5,"text":"yanzhen","isChecked":false,"id":158},"timestamp":1539774751551},{"type":3,"data":{"source":1,"positions":[{"x":265,"y":411,"timeOffset":0}]},"timestamp":1539774752128},{"type":3,"data":{"source":1,"positions":[{"x":317,"y":392,"timeOffset":-466},{"x":337,"y":357,"timeOffset":-433},{"x":342,"y":336,"timeOffset":-399},{"x":367,"y":319,"timeOffset":-366},{"x":406,"y":323,"timeOffset":-333},{"x":409,"y":336,"timeOffset":-300},{"x":409,"y":352,"timeOffset":-266},{"x":411,"y":363,"timeOffset":-233},{"x":419,"y":367,"timeOffset":-200},{"x":424,"y":373,"timeOffset":-166},{"x":430,"y":381,"timeOffset":-133},{"x":438,"y":384,"timeOffset":-100},{"x":443,"y":385,"timeOffset":-67},{"x":449,"y":388,"timeOffset":-33},{"x":451,"y":389,"timeOffset":0}]},"timestamp":1539774752629},{"type":3,"data":{"source":2,"type":1,"id":169,"x":453,"y":393},"timestamp":1539774752826},{"type":3,"data":{"source":2,"type":6,"id":158},"timestamp":1539774752829},{"type":3,"data":{"source":2,"type":5,"id":169},"timestamp":1539774752830},{"type":3,"data":{"source":2,"type":0,"id":169,"x":454,"y":396},"timestamp":1539774752896},{"type":3,"data":{"source":2,"type":2,"id":169,"x":454,"y":396},"timestamp":1539774752896},{"type":3,"data":{"source":1,"positions":[{"x":453,"y":391,"timeOffset":-466},{"x":453,"y":393,"timeOffset":-400},{"x":453,"y":393,"timeOffset":-367},{"x":453,"y":394,"timeOffset":-249},{"x":458,"y":397,"timeOffset":-215},{"x":468,"y":401,"timeOffset":-183}]},"timestamp":1539774753128},{"type":3,"data":{"source":5,"text":"y","isChecked":false,"id":169},"timestamp":1539774753790},{"type":3,"data":{"source":5,"text":"yu","isChecked":false,"id":169},"timestamp":1539774753836},{"type":3,"data":{"source":1,"positions":[{"x":465,"y":400,"timeOffset":0}]},"timestamp":1539774754611},{"type":3,"data":{"source":1,"positions":[{"x":447,"y":397,"timeOffset":-466},{"x":433,"y":394,"timeOffset":-433},{"x":373,"y":421,"timeOffset":-400},{"x":334,"y":442,"timeOffset":-367},{"x":322,"y":446,"timeOffset":-317},{"x":319,"y":450,"timeOffset":-266},{"x":308,"y":470,"timeOffset":-233},{"x":301,"y":481,"timeOffset":-200},{"x":300,"y":483,"timeOffset":-134},{"x":295,"y":490,"timeOffset":-100},{"x":293,"y":492,"timeOffset":-67}]},"timestamp":1539774755111},{"type":3,"data":{"source":2,"type":1,"id":189,"x":293,"y":492},"timestamp":1539774755137},{"type":3,"data":{"source":2,"type":6,"id":169},"timestamp":1539774755146},{"type":3,"data":{"source":2,"type":5,"id":189},"timestamp":1539774755147},{"type":3,"data":{"source":2,"type":0,"id":189,"x":293,"y":492},"timestamp":1539774755223},{"type":3,"data":{"source":2,"type":2,"id":189,"x":293,"y":492},"timestamp":1539774755223},{"type":3,"data":{"source":5,"text":"a","isChecked":false,"id":189},"timestamp":1539774755812},{"type":3,"data":{"source":5,"text":"ad","isChecked":false,"id":189},"timestamp":1539774755915},{"type":3,"data":{"source":5,"text":"adm","isChecked":false,"id":189},"timestamp":1539774756048},{"type":3,"data":{"source":5,"text":"admi","isChecked":false,"id":189},"timestamp":1539774756090},{"type":3,"data":{"source":5,"text":"admin","isChecked":false,"id":189},"timestamp":1539774756241},{"type":3,"data":{"source":1,"positions":[{"x":311,"y":510,"timeOffset":0}]},"timestamp":1539774756827},{"type":3,"data":{"source":3,"id":1,"x":0,"y":1},"timestamp":1539774757177},{"type":3,"data":{"source":3,"id":1,"x":0,"y":90},"timestamp":1539774757278},{"type":3,"data":{"source":1,"positions":[{"x":449,"y":606,"timeOffset":-468},{"x":515,"y":642,"timeOffset":-435},{"x":514,"y":627,"timeOffset":-369},{"x":410,"y":510,"timeOffset":-336},{"x":401,"y":498,"timeOffset":-269},{"x":398,"y":502,"timeOffset":-219},{"x":388,"y":506,"timeOffset":-186},{"x":385,"y":506,"timeOffset":-119},{"x":384,"y":506,"timeOffset":-68},{"x":380,"y":507,"timeOffset":-18}]},"timestamp":1539774757329},{"type":3,"data":{"source":3,"id":1,"x":0,"y":212},"timestamp":1539774757378},{"type":3,"data":{"source":1,"positions":[{"x":378,"y":506,"timeOffset":-486},{"x":373,"y":498,"timeOffset":-452},{"x":368,"y":488,"timeOffset":-420},{"x":353,"y":476,"timeOffset":-387},{"x":329,"y":458,"timeOffset":-353},{"x":320,"y":433,"timeOffset":-320},{"x":312,"y":395,"timeOffset":-287},{"x":303,"y":379,"timeOffset":-254},{"x":297,"y":369,"timeOffset":-221},{"x":294,"y":364,"timeOffset":-187}]},"timestamp":1539774757830},{"type":3,"data":{"source":2,"type":1,"id":203,"x":293,"y":363},"timestamp":1539774757849},{"type":3,"data":{"source":2,"type":6,"id":189},"timestamp":1539774757853},{"type":3,"data":{"source":2,"type":5,"id":203},"timestamp":1539774757855},{"type":3,"data":{"source":2,"type":0,"id":203,"x":293,"y":363},"timestamp":1539774757972},{"type":3,"data":{"source":2,"type":2,"id":203,"x":293,"y":363},"timestamp":1539774757972},{"type":3,"data":{"source":5,"text":"y","isChecked":false,"id":203},"timestamp":1539774758877},{"type":3,"data":{"source":5,"text":"ya","isChecked":false,"id":203},"timestamp":1539774758966},{"type":3,"data":{"source":5,"text":"yan","isChecked":false,"id":203},"timestamp":1539774759091},{"type":3,"data":{"source":5,"text":"yanz","isChecked":false,"id":203},"timestamp":1539774759222},{"type":3,"data":{"source":5,"text":"yanzh","isChecked":false,"id":203},"timestamp":1539774759318},{"type":3,"data":{"source":5,"text":"yanzhe","isChecked":false,"id":203},"timestamp":1539774759412},{"type":3,"data":{"source":5,"text":"yanzhen","isChecked":false,"id":203},"timestamp":1539774759522},{"type":3,"data":{"source":5,"text":"yanzhen@","isChecked":false,"id":203},"timestamp":1539774760043},{"type":3,"data":{"source":5,"text":"yanzhen@smartx.com","isChecked":false,"id":203},"timestamp":1539774760767},{"type":3,"data":{"source":1,"positions":[{"x":315,"y":364,"timeOffset":0}]},"timestamp":1539774761476},{"type":3,"data":{"source":1,"positions":[{"x":346,"y":366,"timeOffset":-469},{"x":342,"y":391,"timeOffset":-434},{"x":323,"y":422,"timeOffset":-401},{"x":318,"y":435,"timeOffset":-369},{"x":312,"y":443,"timeOffset":-336},{"x":308,"y":445,"timeOffset":-301},{"x":304,"y":448,"timeOffset":-252},{"x":302,"y":449,"timeOffset":-118},{"x":300,"y":451,"timeOffset":-85},{"x":300,"y":452,"timeOffset":-19}]},"timestamp":1539774761977},{"type":3,"data":{"source":2,"type":1,"id":214,"x":300,"y":452},"timestamp":1539774762010},{"type":3,"data":{"source":2,"type":6,"id":203},"timestamp":1539774762011},{"type":3,"data":{"source":2,"type":5,"id":214},"timestamp":1539774762012},{"type":3,"data":{"source":2,"type":0,"id":214,"x":300,"y":452},"timestamp":1539774762129},{"type":3,"data":{"source":2,"type":2,"id":214,"x":300,"y":452},"timestamp":1539774762129},{"type":3,"data":{"source":1,"positions":[{"x":300,"y":451,"timeOffset":0}]},"timestamp":1539774762509},{"type":3,"data":{"source":1,"positions":[{"x":302,"y":445,"timeOffset":-470},{"x":298,"y":445,"timeOffset":-369},{"x":291,"y":459,"timeOffset":-336},{"x":280,"y":514,"timeOffset":-269},{"x":280,"y":566,"timeOffset":-236},{"x":271,"y":572,"timeOffset":-170},{"x":221,"y":516,"timeOffset":-140},{"x":147,"y":458,"timeOffset":-103},{"x":145,"y":455,"timeOffset":-70},{"x":145,"y":452,"timeOffset":-37}]},"timestamp":1539774763011},{"type":3,"data":{"source":1,"positions":[{"x":146,"y":451,"timeOffset":-487},{"x":146,"y":451,"timeOffset":-404},{"x":147,"y":463,"timeOffset":-371},{"x":148,"y":473,"timeOffset":-338}]},"timestamp":1539774763512},{"type":3,"data":{"source":5,"text":"beijing","isChecked":false,"id":214},"timestamp":1539774763528},{"type":3,"data":{"source":1,"positions":[{"x":147,"y":490,"timeOffset":-470},{"x":147,"y":491,"timeOffset":-339},{"x":148,"y":499,"timeOffset":-305},{"x":149,"y":515,"timeOffset":-272},{"x":149,"y":527,"timeOffset":-238},{"x":149,"y":529,"timeOffset":-205},{"x":149,"y":532,"timeOffset":-173},{"x":149,"y":533,"timeOffset":-89},{"x":149,"y":535,"timeOffset":-55},{"x":149,"y":539,"timeOffset":-22}]},"timestamp":1539774764013},{"type":3,"data":{"source":2,"type":1,"id":227,"x":148,"y":544},"timestamp":1539774764073},{"type":3,"data":{"source":2,"type":6,"id":214},"timestamp":1539774764076},{"type":3,"data":{"source":2,"type":5,"id":227},"timestamp":1539774764078},{"type":3,"data":{"source":2,"type":0,"id":227,"x":148,"y":544},"timestamp":1539774764200},{"type":3,"data":{"source":2,"type":2,"id":227,"x":148,"y":544},"timestamp":1539774764200},{"type":3,"data":{"source":1,"positions":[{"x":148,"y":542,"timeOffset":-490},{"x":148,"y":544,"timeOffset":-441},{"x":149,"y":544,"timeOffset":-240},{"x":154,"y":542,"timeOffset":-206},{"x":161,"y":538,"timeOffset":-174},{"x":163,"y":535,"timeOffset":-123}]},"timestamp":1539774764514},{"type":3,"data":{"source":5,"text":"s","isChecked":false,"id":227},"timestamp":1539774765407},{"type":3,"data":{"source":5,"text":"sh","isChecked":false,"id":227},"timestamp":1539774765506},{"type":3,"data":{"source":5,"text":"she","isChecked":false,"id":227},"timestamp":1539774765628},{"type":3,"data":{"source":5,"text":"shen","isChecked":false,"id":227},"timestamp":1539774765722},{"type":3,"data":{"source":5,"text":"shenz","isChecked":false,"id":227},"timestamp":1539774765850},{"type":3,"data":{"source":5,"text":"shenzh","isChecked":false,"id":227},"timestamp":1539774765924},{"type":3,"data":{"source":5,"text":"shenzhn","isChecked":false,"id":227},"timestamp":1539774766130},{"type":3,"data":{"source":5,"text":"shenzh","isChecked":false,"id":227},"timestamp":1539774766706},{"type":3,"data":{"source":5,"text":"shenzhe","isChecked":false,"id":227},"timestamp":1539774766873},{"type":3,"data":{"source":5,"text":"shenzhen","isChecked":false,"id":227},"timestamp":1539774766960},{"type":3,"data":{"source":1,"positions":[{"x":166,"y":532,"timeOffset":0}]},"timestamp":1539774767574},{"type":3,"data":{"source":1,"positions":[{"x":179,"y":526,"timeOffset":-467},{"x":178,"y":526,"timeOffset":-385},{"x":159,"y":531,"timeOffset":-351},{"x":144,"y":537,"timeOffset":-318},{"x":128,"y":539,"timeOffset":-284},{"x":77,"y":546,"timeOffset":-251},{"x":30,"y":555,"timeOffset":-218},{"x":29,"y":556,"timeOffset":-101},{"x":59,"y":552,"timeOffset":-67},{"x":74,"y":549,"timeOffset":-35}]},"timestamp":1539774768074},{"type":3,"data":{"source":2,"type":1,"id":29,"x":74,"y":549},"timestamp":1539774768088},{"type":3,"data":{"source":2,"type":6,"id":227},"timestamp":1539774768091},{"type":3,"data":{"source":2,"type":0,"id":29,"x":74,"y":549},"timestamp":1539774768159},{"type":3,"data":{"source":2,"type":2,"id":29,"x":74,"y":549},"timestamp":1539774768159},{"type":3,"data":{"source":3,"id":1,"x":0,"y":213},"timestamp":1539774768356},{"type":3,"data":{"source":3,"id":1,"x":0,"y":286},"timestamp":1539774768457},{"type":3,"data":{"source":3,"id":1,"x":0,"y":421},"timestamp":1539774768557},{"type":3,"data":{"source":1,"positions":[{"x":75,"y":549,"timeOffset":-273},{"x":78,"y":549,"timeOffset":-171},{"x":85,"y":546,"timeOffset":-137},{"x":96,"y":544,"timeOffset":-105},{"x":116,"y":543,"timeOffset":-71},{"x":135,"y":537,"timeOffset":-38},{"x":155,"y":530,"timeOffset":0}]},"timestamp":1539774768578},{"type":3,"data":{"source":3,"id":1,"x":0,"y":424},"timestamp":1539774768657},{"type":3,"data":{"source":1,"positions":[{"x":210,"y":507,"timeOffset":-472},{"x":278,"y":478,"timeOffset":-439},{"x":321,"y":459,"timeOffset":-406},{"x":347,"y":440,"timeOffset":-372},{"x":367,"y":416,"timeOffset":-339},{"x":378,"y":407,"timeOffset":-305},{"x":384,"y":400,"timeOffset":-272},{"x":386,"y":397,"timeOffset":-239},{"x":386,"y":396,"timeOffset":-189},{"x":385,"y":395,"timeOffset":-155},{"x":369,"y":401,"timeOffset":-122},{"x":341,"y":415,"timeOffset":-89},{"x":326,"y":419,"timeOffset":-55}]},"timestamp":1539774769078},{"type":3,"data":{"source":2,"type":1,"id":237,"x":319,"y":422},"timestamp":1539774769208},{"type":3,"data":{"source":2,"type":5,"id":237},"timestamp":1539774769210},{"type":3,"data":{"source":1,"positions":[{"x":322,"y":420,"timeOffset":-489}]},"timestamp":1539774769578},{"type":3,"data":{"source":5,"text":"United States","isChecked":false,"id":237},"timestamp":1539774769903},{"type":3,"data":{"source":2,"type":0,"id":237,"x":0,"y":0},"timestamp":1539774769903},{"type":3,"data":{"source":2,"type":2,"id":237,"x":0,"y":0},"timestamp":1539774769903},{"type":3,"data":{"source":1,"positions":[{"x":303,"y":458,"timeOffset":-158},{"x":307,"y":457,"timeOffset":-124},{"x":326,"y":450,"timeOffset":-90},{"x":356,"y":437,"timeOffset":-57},{"x":393,"y":425,"timeOffset":-24}]},"timestamp":1539774770080},{"type":3,"data":{"source":2,"type":1,"id":255,"x":451,"y":413},"timestamp":1539774770264},{"type":3,"data":{"source":2,"type":6,"id":237},"timestamp":1539774770265},{"type":3,"data":{"source":2,"type":5,"id":255},"timestamp":1539774770267},{"type":3,"data":{"source":1,"positions":[{"x":415,"y":423,"timeOffset":-492},{"x":424,"y":420,"timeOffset":-458},{"x":436,"y":418,"timeOffset":-425},{"x":447,"y":414,"timeOffset":-391}]},"timestamp":1539774770580},{"type":3,"data":{"source":5,"text":"California","isChecked":false,"id":255},"timestamp":1539774770855},{"type":3,"data":{"source":2,"type":0,"id":255,"x":0,"y":0},"timestamp":1539774770855},{"type":3,"data":{"source":2,"type":2,"id":255,"x":0,"y":0},"timestamp":1539774770855},{"type":3,"data":{"source":1,"positions":[{"x":444,"y":466,"timeOffset":-206},{"x":447,"y":466,"timeOffset":-175},{"x":462,"y":463,"timeOffset":-142},{"x":490,"y":460,"timeOffset":-109},{"x":517,"y":455,"timeOffset":-75},{"x":544,"y":449,"timeOffset":-41},{"x":564,"y":442,"timeOffset":-8}]},"timestamp":1539774771080},{"type":3,"data":{"source":2,"type":1,"id":273,"x":623,"y":417},"timestamp":1539774771320},{"type":3,"data":{"source":2,"type":6,"id":255},"timestamp":1539774771321},{"type":3,"data":{"source":2,"type":5,"id":273},"timestamp":1539774771324},{"type":3,"data":{"source":2,"type":0,"id":273,"x":623,"y":417},"timestamp":1539774771432},{"type":3,"data":{"source":2,"type":2,"id":273,"x":623,"y":417},"timestamp":1539774771432},{"type":3,"data":{"source":1,"positions":[{"x":585,"y":433,"timeOffset":-475},{"x":603,"y":426,"timeOffset":-441},{"x":613,"y":423,"timeOffset":-408},{"x":619,"y":420,"timeOffset":-374},{"x":623,"y":417,"timeOffset":-341}]},"timestamp":1539774771580},{"type":3,"data":{"source":1,"positions":[{"x":627,"y":415,"timeOffset":-458}]},"timestamp":1539774772080},{"type":3,"data":{"source":5,"text":"1","isChecked":false,"id":273},"timestamp":1539774772151},{"type":3,"data":{"source":5,"text":"10","isChecked":false,"id":273},"timestamp":1539774772349},{"type":3,"data":{"source":5,"text":"100","isChecked":false,"id":273},"timestamp":1539774772521},{"type":3,"data":{"source":5,"text":"1000","isChecked":false,"id":273},"timestamp":1539774773008},{"type":3,"data":{"source":5,"text":"10000","isChecked":false,"id":273},"timestamp":1539774773176},{"type":3,"data":{"source":5,"text":"100000","isChecked":false,"id":273},"timestamp":1539774773539},{"type":3,"data":{"source":1,"positions":[{"x":627,"y":415,"timeOffset":0}]},"timestamp":1539774774170},{"type":3,"data":{"source":2,"type":1,"id":286,"x":320,"y":508},"timestamp":1539774774582},{"type":3,"data":{"source":2,"type":6,"id":273},"timestamp":1539774774584},{"type":3,"data":{"source":2,"type":0,"id":286,"x":320,"y":508},"timestamp":1539774774654},{"type":3,"data":{"source":2,"type":2,"id":286,"x":320,"y":508},"timestamp":1539774774654},{"type":3,"data":{"source":2,"type":5,"id":284},"timestamp":1539774774657},{"type":3,"data":{"source":2,"type":2,"id":284,"x":320,"y":508},"timestamp":1539774774657},{"type":3,"data":{"source":5,"text":"on","isChecked":true,"id":284},"timestamp":1539774774657},{"type":3,"data":{"source":1,"positions":[{"x":617,"y":385,"timeOffset":-464},{"x":552,"y":369,"timeOffset":-432},{"x":473,"y":409,"timeOffset":-398},{"x":414,"y":457,"timeOffset":-365},{"x":392,"y":490,"timeOffset":-331},{"x":385,"y":498,"timeOffset":-299},{"x":362,"y":502,"timeOffset":-265},{"x":332,"y":507,"timeOffset":-232},{"x":320,"y":508,"timeOffset":-199}]},"timestamp":1539774774670},{"type":3,"data":{"source":1,"positions":[{"x":318,"y":509,"timeOffset":-131},{"x":310,"y":511,"timeOffset":-98},{"x":299,"y":518,"timeOffset":-65},{"x":291,"y":523,"timeOffset":-32}]},"timestamp":1539774775169},{"type":3,"data":{"source":2,"type":1,"id":294,"x":286,"y":527},"timestamp":1539774775272},{"type":3,"data":{"source":2,"type":6,"id":284},"timestamp":1539774775273},{"type":3,"data":{"source":2,"type":0,"id":294,"x":286,"y":527},"timestamp":1539774775359},{"type":3,"data":{"source":2,"type":2,"id":294,"x":286,"y":527},"timestamp":1539774775359},{"type":3,"data":{"source":2,"type":5,"id":292},"timestamp":1539774775379},{"type":3,"data":{"source":2,"type":2,"id":292,"x":286,"y":527},"timestamp":1539774775379},{"type":3,"data":{"source":5,"text":"on","isChecked":true,"id":292},"timestamp":1539774775380},{"type":3,"data":{"source":3,"id":1,"x":0,"y":425},"timestamp":1539774775638},{"type":3,"data":{"source":1,"positions":[{"x":287,"y":526,"timeOffset":-499},{"x":282,"y":529,"timeOffset":-213},{"x":273,"y":540,"timeOffset":-181},{"x":269,"y":547,"timeOffset":-148},{"x":269,"y":549,"timeOffset":-99},{"x":269,"y":553,"timeOffset":-66},{"x":269,"y":555,"timeOffset":-31}]},"timestamp":1539774775669},{"type":3,"data":{"source":3,"id":1,"x":0,"y":499},"timestamp":1539774775738},{"type":3,"data":{"source":3,"id":1,"x":0,"y":652},"timestamp":1539774775838},{"type":3,"data":{"source":3,"id":1,"x":0,"y":689},"timestamp":1539774775938},{"type":3,"data":{"source":1,"positions":[{"x":267,"y":556,"timeOffset":-449},{"x":265,"y":556,"timeOffset":-416},{"x":259,"y":559,"timeOffset":-382},{"x":244,"y":559,"timeOffset":-349},{"x":225,"y":559,"timeOffset":-316},{"x":219,"y":559,"timeOffset":-282},{"x":217,"y":559,"timeOffset":-233},{"x":212,"y":552,"timeOffset":-199},{"x":203,"y":540,"timeOffset":-167},{"x":194,"y":525,"timeOffset":-134},{"x":187,"y":501,"timeOffset":-101},{"x":181,"y":469,"timeOffset":-67},{"x":177,"y":452,"timeOffset":-34}]},"timestamp":1539774776170},{"type":3,"data":{"source":2,"type":1,"id":325,"x":168,"y":419},"timestamp":1539774776495},{"type":3,"data":{"source":2,"type":6,"id":292},"timestamp":1539774776497},{"type":3,"data":{"source":2,"type":0,"id":325,"x":168,"y":419},"timestamp":1539774776590},{"type":3,"data":{"source":2,"type":2,"id":325,"x":168,"y":419},"timestamp":1539774776590},{"type":3,"data":{"source":2,"type":5,"id":323},"timestamp":1539774776594},{"type":3,"data":{"source":2,"type":2,"id":323,"x":168,"y":419},"timestamp":1539774776595},{"type":3,"data":{"source":5,"text":"on","isChecked":true,"id":323},"timestamp":1539774776596},{"type":3,"data":{"source":5,"text":"on","isChecked":false,"id":307},"timestamp":1539774776596},{"type":3,"data":{"source":5,"text":"on","isChecked":false,"id":315},"timestamp":1539774776596},{"type":3,"data":{"source":1,"positions":[{"x":176,"y":449,"timeOffset":-483},{"x":176,"y":447,"timeOffset":-450},{"x":176,"y":441,"timeOffset":-417},{"x":176,"y":430,"timeOffset":-384},{"x":173,"y":425,"timeOffset":-351},{"x":172,"y":424,"timeOffset":-317},{"x":170,"y":422,"timeOffset":-284},{"x":168,"y":419,"timeOffset":-234},{"x":167,"y":418,"timeOffset":-48},{"x":167,"y":408,"timeOffset":-16}]},"timestamp":1539774776670},{"type":3,"data":{"source":2,"type":1,"id":317,"x":166,"y":388},"timestamp":1539774776816},{"type":3,"data":{"source":2,"type":6,"id":323},"timestamp":1539774776818},{"type":3,"data":{"source":2,"type":0,"id":317,"x":166,"y":388},"timestamp":1539774776904},{"type":3,"data":{"source":2,"type":2,"id":317,"x":166,"y":388},"timestamp":1539774776905},{"type":3,"data":{"source":2,"type":5,"id":315},"timestamp":1539774776908},{"type":3,"data":{"source":2,"type":2,"id":315,"x":166,"y":388},"timestamp":1539774776908},{"type":3,"data":{"source":5,"text":"on","isChecked":true,"id":315},"timestamp":1539774776910},{"type":3,"data":{"source":5,"text":"on","isChecked":false,"id":323},"timestamp":1539774776910},{"type":3,"data":{"source":1,"positions":[{"x":167,"y":395,"timeOffset":-483},{"x":166,"y":389,"timeOffset":-450},{"x":168,"y":387,"timeOffset":-183},{"x":179,"y":390,"timeOffset":-151},{"x":208,"y":400,"timeOffset":-116},{"x":236,"y":403,"timeOffset":-84},{"x":267,"y":406,"timeOffset":-52},{"x":284,"y":408,"timeOffset":-19}]},"timestamp":1539774777171},{"type":3,"data":{"source":3,"id":1,"x":0,"y":690},"timestamp":1539774777237},{"type":3,"data":{"source":3,"id":1,"x":0,"y":733},"timestamp":1539774777338},{"type":3,"data":{"source":3,"id":1,"x":0,"y":793},"timestamp":1539774777438},{"type":3,"data":{"source":3,"id":1,"x":0,"y":795},"timestamp":1539774777539},{"type":3,"data":{"source":1,"positions":[{"x":287,"y":408,"timeOffset":-485},{"x":289,"y":409,"timeOffset":-434},{"x":289,"y":413,"timeOffset":-400},{"x":289,"y":416,"timeOffset":-351},{"x":288,"y":417,"timeOffset":-318},{"x":288,"y":417,"timeOffset":-284},{"x":287,"y":418,"timeOffset":-201},{"x":286,"y":418,"timeOffset":-169}]},"timestamp":1539774777671},{"type":3,"data":{"source":3,"id":1,"x":0,"y":796},"timestamp":1539774777869},{"type":3,"data":{"source":3,"id":1,"x":0,"y":836},"timestamp":1539774777970},{"type":3,"data":{"source":3,"id":1,"x":0,"y":972},"timestamp":1539774778071},{"type":3,"data":{"source":1,"positions":[{"x":287,"y":422,"timeOffset":-385},{"x":299,"y":438,"timeOffset":-351},{"x":312,"y":456,"timeOffset":-318},{"x":318,"y":465,"timeOffset":-285},{"x":320,"y":466,"timeOffset":-218},{"x":321,"y":466,"timeOffset":-184}]},"timestamp":1539774778171},{"type":3,"data":{"source":3,"id":1,"x":0,"y":1007},"timestamp":1539774778171},{"type":3,"data":{"source":2,"type":1,"id":390,"x":322,"y":467},"timestamp":1539774778312},{"type":3,"data":{"source":2,"type":6,"id":315},"timestamp":1539774778313},{"type":3,"data":{"source":2,"type":5,"id":390},"timestamp":1539774778315},{"type":3,"data":{"source":2,"type":0,"id":390,"x":322,"y":467},"timestamp":1539774778423},{"type":3,"data":{"source":2,"type":2,"id":390,"x":322,"y":467},"timestamp":1539774778423},{"type":3,"data":{"source":1,"positions":[{"x":322,"y":467,"timeOffset":-486},{"x":324,"y":464,"timeOffset":-136},{"x":331,"y":448,"timeOffset":-103}]},"timestamp":1539774778672},{"type":3,"data":{"source":5,"text":"h","isChecked":false,"id":390},"timestamp":1539774779696},{"type":3,"data":{"source":5,"text":"he","isChecked":false,"id":390},"timestamp":1539774779875},{"type":3,"data":{"source":5,"text":"hel","isChecked":false,"id":390},"timestamp":1539774780010},{"type":3,"data":{"source":5,"text":"hell","isChecked":false,"id":390},"timestamp":1539774780179},{"type":3,"data":{"source":5,"text":"hello","isChecked":false,"id":390},"timestamp":1539774780363},{"type":3,"data":{"source":5,"text":"hello ","isChecked":false,"id":390},"timestamp":1539774780501},{"type":3,"data":{"source":5,"text":"hello w","isChecked":false,"id":390},"timestamp":1539774780690},{"type":3,"data":{"source":5,"text":"hello wo","isChecked":false,"id":390},"timestamp":1539774780810},{"type":3,"data":{"source":5,"text":"hello wor","isChecked":false,"id":390},"timestamp":1539774780914},{"type":3,"data":{"source":5,"text":"hello worl","isChecked":false,"id":390},"timestamp":1539774781245},{"type":3,"data":{"source":5,"text":"hello world","isChecked":false,"id":390},"timestamp":1539774781381},{"type":3,"data":{"source":1,"positions":[{"x":332,"y":448,"timeOffset":0}]},"timestamp":1539774781919},{"type":3,"data":{"source":1,"positions":[{"x":333,"y":457,"timeOffset":-400},{"x":397,"y":511,"timeOffset":-368},{"x":533,"y":567,"timeOffset":-334},{"x":577,"y":603,"timeOffset":-300},{"x":581,"y":605,"timeOffset":-134},{"x":581,"y":599,"timeOffset":-100},{"x":566,"y":592,"timeOffset":-68},{"x":554,"y":586,"timeOffset":-34}]},"timestamp":1539774782419},{"type":3,"data":{"source":1,"positions":[{"x":552,"y":583,"timeOffset":-450},{"x":548,"y":578,"timeOffset":-418},{"x":547,"y":577,"timeOffset":-334},{"x":545,"y":575,"timeOffset":-301},{"x":542,"y":572,"timeOffset":-267},{"x":540,"y":572,"timeOffset":-234},{"x":539,"y":572,"timeOffset":-167},{"x":537,"y":571,"timeOffset":-134},{"x":536,"y":571,"timeOffset":-84},{"x":535,"y":571,"timeOffset":-51},{"x":531,"y":570,"timeOffset":-16}]},"timestamp":1539774782919},{"type":3,"data":{"source":1,"positions":[{"x":530,"y":569,"timeOffset":-483},{"x":528,"y":567,"timeOffset":-233},{"x":527,"y":567,"timeOffset":-201}]},"timestamp":1539774783419},{"type":3,"data":{"source":2,"type":1,"id":390,"x":526,"y":567},"timestamp":1539774783464},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 245px;"}}],"removes":[],"adds":[]},"timestamp":1539774783550},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 244px;"}}],"removes":[],"adds":[]},"timestamp":1539774783567},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 240px;"}}],"removes":[],"adds":[]},"timestamp":1539774783586},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 234px;"}}],"removes":[],"adds":[]},"timestamp":1539774783603},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 228px;"}}],"removes":[],"adds":[]},"timestamp":1539774783618},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 220px;"}}],"removes":[],"adds":[]},"timestamp":1539774783636},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 214px;"}}],"removes":[],"adds":[]},"timestamp":1539774783653},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 206px;"}}],"removes":[],"adds":[]},"timestamp":1539774783669},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 193px;"}}],"removes":[],"adds":[]},"timestamp":1539774783686},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 181px;"}}],"removes":[],"adds":[]},"timestamp":1539774783703},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 170px;"}}],"removes":[],"adds":[]},"timestamp":1539774783719},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 158px;"}}],"removes":[],"adds":[]},"timestamp":1539774783737},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 153px;"}}],"removes":[],"adds":[]},"timestamp":1539774783752},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 151px;"}}],"removes":[],"adds":[]},"timestamp":1539774783770},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 148px;"}}],"removes":[],"adds":[]},"timestamp":1539774783786},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 147px;"}}],"removes":[],"adds":[]},"timestamp":1539774783803},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 146px;"}}],"removes":[],"adds":[]},"timestamp":1539774783868},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 145px;"}}],"removes":[],"adds":[]},"timestamp":1539774783885},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 142px;"}}],"removes":[],"adds":[]},"timestamp":1539774783902},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 138px;"}}],"removes":[],"adds":[]},"timestamp":1539774783919},{"type":3,"data":{"source":1,"positions":[{"x":525,"y":566,"timeOffset":-374},{"x":526,"y":561,"timeOffset":-338},{"x":529,"y":549,"timeOffset":-306},{"x":529,"y":535,"timeOffset":-272},{"x":529,"y":514,"timeOffset":-238},{"x":529,"y":491,"timeOffset":-206},{"x":526,"y":474,"timeOffset":-172},{"x":525,"y":469,"timeOffset":-138},{"x":523,"y":467,"timeOffset":-56},{"x":523,"y":463,"timeOffset":-22}]},"timestamp":1539774783924},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 132px;"}}],"removes":[],"adds":[]},"timestamp":1539774783937},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 126px;"}}],"removes":[],"adds":[]},"timestamp":1539774783952},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 123px;"}}],"removes":[],"adds":[]},"timestamp":1539774783969},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":390,"attributes":{"style":"margin-top: 0px; margin-bottom: 0px; height: 121px;"}}],"removes":[],"adds":[]},"timestamp":1539774783986},{"type":3,"data":{"source":2,"type":0,"id":390,"x":521,"y":442},"timestamp":1539774784166},{"type":3,"data":{"source":2,"type":2,"id":390,"x":521,"y":442},"timestamp":1539774784166},{"type":3,"data":{"source":1,"positions":[{"x":523,"y":453,"timeOffset":-487},{"x":522,"y":444,"timeOffset":-455},{"x":519,"y":443,"timeOffset":-207},{"x":518,"y":447,"timeOffset":-174},{"x":517,"y":458,"timeOffset":-141},{"x":513,"y":476,"timeOffset":-107},{"x":506,"y":490,"timeOffset":-74},{"x":503,"y":496,"timeOffset":-40},{"x":501,"y":500,"timeOffset":-6}]},"timestamp":1539774784424},{"type":3,"data":{"source":2,"type":1,"id":395,"x":491,"y":518},"timestamp":1539774784656},{"type":3,"data":{"source":2,"type":6,"id":390},"timestamp":1539774784660},{"type":3,"data":{"source":2,"type":5,"id":395},"timestamp":1539774784662},{"type":3,"data":{"source":2,"type":0,"id":395,"x":491,"y":518},"timestamp":1539774784743},{"type":3,"data":{"source":2,"type":2,"id":395,"x":491,"y":518},"timestamp":1539774784743},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":149,"attributes":{"class":"needs-validation was-validated"}}],"removes":[],"adds":[]},"timestamp":1539774784747},{"type":3,"data":{"source":1,"positions":[{"x":500,"y":503,"timeOffset":-475},{"x":497,"y":507,"timeOffset":-441},{"x":493,"y":511,"timeOffset":-406},{"x":492,"y":514,"timeOffset":-357},{"x":491,"y":518,"timeOffset":-324}]},"timestamp":1539774784925},{"type":3,"data":{"source":3,"id":1,"x":0,"y":1006},"timestamp":1539774785383},{"type":3,"data":{"source":1,"positions":[{"x":492,"y":519,"timeOffset":-425},{"x":502,"y":516,"timeOffset":-392},{"x":518,"y":515,"timeOffset":-357},{"x":541,"y":511,"timeOffset":-325},{"x":570,"y":506,"timeOffset":-291},{"x":612,"y":494,"timeOffset":-259},{"x":638,"y":489,"timeOffset":-225},{"x":648,"y":485,"timeOffset":-193},{"x":652,"y":484,"timeOffset":-159}]},"timestamp":1539774785425},{"type":3,"data":{"source":3,"id":1,"x":0,"y":914},"timestamp":1539774785483},{"type":3,"data":{"source":3,"id":1,"x":0,"y":649},"timestamp":1539774785584},{"type":3,"data":{"source":3,"id":1,"x":0,"y":618},"timestamp":1539774785684},{"type":3,"data":{"source":3,"id":1,"x":0,"y":375},"timestamp":1539774785784},{"type":3,"data":{"source":3,"id":1,"x":0,"y":265},"timestamp":1539774785885},{"type":3,"data":{"source":1,"positions":[{"x":653,"y":483,"timeOffset":-476},{"x":656,"y":482,"timeOffset":-359},{"x":662,"y":489,"timeOffset":-325},{"x":661,"y":488,"timeOffset":-207},{"x":660,"y":487,"timeOffset":-26}]},"timestamp":1539774785926},{"type":3,"data":{"source":3,"id":1,"x":0,"y":264},"timestamp":1539774786032},{"type":3,"data":{"source":3,"id":1,"x":0,"y":231},"timestamp":1539774786132},{"type":3,"data":{"source":3,"id":1,"x":0,"y":52},"timestamp":1539774786232},{"type":3,"data":{"source":3,"id":1,"x":0,"y":0},"timestamp":1539774786331},{"type":3,"data":{"source":1,"positions":[{"x":661,"y":489,"timeOffset":-292},{"x":656,"y":485,"timeOffset":-259}]},"timestamp":1539774786426},{"type":3,"data":{"source":3,"id":1,"x":0,"y":1},"timestamp":1539774787283},{"type":3,"data":{"source":3,"id":1,"x":0,"y":43},"timestamp":1539774787384},{"type":3,"data":{"source":3,"id":1,"x":0,"y":103},"timestamp":1539774787484},{"type":3,"data":{"source":1,"positions":[{"x":656,"y":489,"timeOffset":0}]},"timestamp":1539774787582},{"type":3,"data":{"source":3,"id":1,"x":0,"y":106},"timestamp":1539774787584},{"type":3,"data":{"source":1,"positions":[{"x":675,"y":503,"timeOffset":-466},{"x":699,"y":517,"timeOffset":-434},{"x":718,"y":532,"timeOffset":-400},{"x":729,"y":547,"timeOffset":-367},{"x":745,"y":569,"timeOffset":-334},{"x":758,"y":585,"timeOffset":-300},{"x":760,"y":588,"timeOffset":-267},{"x":761,"y":589,"timeOffset":-167},{"x":763,"y":594,"timeOffset":-16}]},"timestamp":1539774788082},{"type":3,"data":{"source":2,"type":1,"id":133,"x":766,"y":603},"timestamp":1539774788159},{"type":3,"data":{"source":2,"type":6,"id":395},"timestamp":1539774788160},{"type":3,"data":{"source":2,"type":5,"id":133},"timestamp":1539774788162},{"type":3,"data":{"source":2,"type":0,"id":133,"x":766,"y":603},"timestamp":1539774788279},{"type":3,"data":{"source":2,"type":2,"id":133,"x":766,"y":603},"timestamp":1539774788279},{"type":3,"data":{"source":1,"positions":[{"x":766,"y":602,"timeOffset":-483},{"x":771,"y":598,"timeOffset":-201}]},"timestamp":1539774788582},{"type":3,"data":{"source":5,"text":"c","isChecked":false,"id":133},"timestamp":1539774788860},{"type":3,"data":{"source":5,"text":"co","isChecked":false,"id":133},"timestamp":1539774789178},{"type":3,"data":{"source":5,"text":"cod","isChecked":false,"id":133},"timestamp":1539774789265},{"type":3,"data":{"source":5,"text":"code","isChecked":false,"id":133},"timestamp":1539774789317},{"type":3,"data":{"source":1,"positions":[{"x":778,"y":596,"timeOffset":0}]},"timestamp":1539774790048},{"type":3,"data":{"source":1,"positions":[{"x":797,"y":586,"timeOffset":-466},{"x":825,"y":567,"timeOffset":-433},{"x":868,"y":538,"timeOffset":-399},{"x":922,"y":502,"timeOffset":-366},{"x":967,"y":483,"timeOffset":-332},{"x":994,"y":468,"timeOffset":-300},{"x":998,"y":466,"timeOffset":-233},{"x":1007,"y":464,"timeOffset":-199},{"x":1015,"y":462,"timeOffset":-167},{"x":1021,"y":462,"timeOffset":-133},{"x":1032,"y":460,"timeOffset":-99},{"x":1039,"y":459,"timeOffset":-65},{"x":1042,"y":457,"timeOffset":-33},{"x":1045,"y":457,"timeOffset":0}]},"timestamp":1539774790548},{"type":3,"data":{"source":1,"positions":[{"x":1047,"y":457,"timeOffset":-466},{"x":1050,"y":455,"timeOffset":-332},{"x":1051,"y":454,"timeOffset":-282},{"x":1052,"y":453,"timeOffset":-217},{"x":1060,"y":449,"timeOffset":-182},{"x":1077,"y":443,"timeOffset":-150},{"x":1101,"y":429,"timeOffset":-116},{"x":1130,"y":414,"timeOffset":-82}]},"timestamp":1539774791048},{"type":3,"data":{"source":2,"type":6,"id":133},"timestamp":1539774791137}];
-
-const app = new App({
-  target: document.body,
-  data: {
-    events,
-  },
-});
-
-export default app;

From 0d2479f5f186ff5367d4d15e86ff329daab4bbda Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 23 Oct 2018 19:00:21 +0800
Subject: [PATCH 039/524] bundle player as an component

---
 .eslintrc.json    |  5 +++--
 .gitignore        |  2 ++
 package.json      | 24 ++++++++++++++++++++++--
 public/index.html | 23 +++++++++++++++++------
 rollup.config.js  | 20 +++++++++++---------
 5 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index b066720dc3..263f8d87ac 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,13 +1,14 @@
 {
   "extends": "google",
   "parserOptions": {
-    "ecmaVersion": 7,
+    "ecmaVersion": 8,
     "sourceType": "module"
   },
   "rules": {
     "require-jsdoc": "off",
     "arrow-parens": "off",
-    "object-curly-spacing": "off"
+    "object-curly-spacing": "off",
+    "indent": "off"
   },
   "plugins": ["html"]
 }
diff --git a/.gitignore b/.gitignore
index 7be014c58f..33f3a2b468 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,5 @@ yarn.lock
 
 .vscode
 temp
+
+dist
diff --git a/package.json b/package.json
index c3d94cf6f2..cdf5d8ccec 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "devDependencies": {
     "eslint": "^5.7.0",
     "eslint-config-google": "^0.11.0",
@@ -19,9 +19,29 @@
   },
   "scripts": {
     "build": "rollup -c",
+    "prepublishOnly": "npm run build",
     "autobuild": "rollup -c -w",
     "dev": "run-p start:dev autobuild",
     "start": "sirv public",
     "start:dev": "sirv public --dev"
-  }
+  },
+  "description": "rrweb's replayer UI",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rrweb-io/rrweb-player.git"
+  },
+  "keywords": [
+    "rrweb"
+  ],
+  "author": "yanzhen@smartx.com",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rrweb-io/rrweb-player/issues"
+  },
+  "homepage": "https://github.com/rrweb-io/rrweb-player#readme"
 }
diff --git a/public/index.html b/public/index.html
index 6bb5adc070..cf5165fb5f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,16 +1,27 @@
 <!doctype html>
 <html>
+
 <head>
-	<meta charset='utf8'>
-	<meta name='viewport' content='width=device-width'>
+  <meta charset='utf8'>
+  <meta name='viewport' content='width=device-width'>
 
-	<title>Svelte app</title>
+  <title>dev panel</title>
 
-	<link rel='stylesheet' href='global.css'>
-	<link rel='stylesheet' href='bundle.css'>
+  <link rel='stylesheet' href='./global.css'>
+  <link rel="stylesheet" href="./bundle.css">
 </head>
 
 <body>
-	<script src='bundle.js'></script>
+  <script src="./bundle.js"></script>
+  <script src="./bundle.events.js"></script>
+  <script>
+    const player = new rrwebPlayer({
+      target: document.body,
+      data: {
+        events,
+      },
+    });
+  </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/rollup.config.js b/rollup.config.js
index e48c8da129..85fe0bfeed 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -2,19 +2,20 @@ import svelte from 'rollup-plugin-svelte';
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import { terser } from 'rollup-plugin-terser';
+import pkg from './package.json';
 
 const production = !process.env.ROLLUP_WATCH;
 
-export default {
-  input: 'src/main.js',
-  output: {
-    sourcemap: true,
-    format: 'iife',
-    name: 'app',
-    file: 'public/bundle.js',
-  },
+export default [
+  { file: pkg.module, format: 'es' },
+  { file: pkg.main, format: 'iife', name: 'rrwebPlayer' },
+  { file: 'public/bundle.js', format: 'iife', name: 'rrwebPlayer' },
+].map(output => ({
+  input: 'src/Player.html',
+  output,
   plugins: [
     svelte({
+      cascade: false,
       // opt in to v3 behaviour today
       skipIntroByDefault: true,
       nestedTransitions: true,
@@ -24,6 +25,7 @@ export default {
       // we'll extract any component CSS out into
       // a separate file — better for performance
       css: css => {
+        css.write('dist/style.css');
         css.write('public/bundle.css');
       },
     }),
@@ -40,4 +42,4 @@ export default {
     // instead of npm run dev), minify
     production && terser(),
   ],
-};
+}));

From 7f806128ede15407a64ed56dbabf70e9ee2b2165 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 31 Oct 2018 19:02:26 +0800
Subject: [PATCH 040/524] add hover class to :hover related css rules

---
 src/snapshot.ts                        | 30 +++++++++++++++++-
 test/__snapshots__/integration.ts.snap | 23 ++++++++++++++
 test/html/hover.html                   | 31 +++++++++++++++++++
 test/snapshot.test.ts                  | 42 +++++++++++++++++++++++++-
 4 files changed, 124 insertions(+), 2 deletions(-)
 create mode 100644 test/html/hover.html

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 42ceaf6ec6..bb4ed16776 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -17,11 +17,36 @@ export function resetId() {
   _id = 1;
 }
 
+const CSS_RULE = /(([#|\.]{0,1}[a-z0-9\[\]=:]+[\s|,]*)+)\s(\{[\s\S]?[^}]*})/;
+const CSS_RULE_GLOBAL = /(([#|\.]{0,1}[a-z0-9\[\]=:]+[\s|,]*)+)\s(\{[\s\S]?[^}]*})/g;
+const HOVER_SELECTOR = /([^\\]):hover/g;
+export function addHoverClass(cssText: string): string {
+  const matches = cssText.match(CSS_RULE_GLOBAL) || [];
+  for (const match of matches) {
+    const [, selectorText = '', , rules = ''] = match.match(CSS_RULE) || [];
+    const selectors = selectorText
+      .split(',')
+      .map(selector => selector.trim())
+      .map(selector => {
+        if (HOVER_SELECTOR.test(selector)) {
+          const newSelector = selector.replace(HOVER_SELECTOR, '$1.\\:hover');
+          selector += `, ${newSelector}`;
+        }
+        return selector;
+      });
+    cssText = cssText.replace(match, selectors.join(', ') + ' ' + rules);
+  }
+  return cssText;
+}
+
 function getCssRulesString(s: CSSStyleSheet): string | null {
   try {
     const rules = s.rules || s.cssRules;
     return rules
-      ? Array.from(rules).reduce((prev, cur) => (prev += cur.cssText), '')
+      ? Array.from(rules).reduce(
+          (prev, cur) => (prev += addHoverClass(cur.cssText)),
+          '',
+        )
       : null;
   } catch (error) {
     return null;
@@ -152,6 +177,9 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
       if (parentTagName === 'SCRIPT') {
         textContent = 'SCRIPT_PLACEHOLDER';
       }
+      if (parentTagName === 'STYLE') {
+        textContent = addHoverClass(textContent || '');
+      }
       return {
         type: NodeType.Text,
         textContent: textContent || '',
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index f221300322..4658b966fc 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -88,6 +88,29 @@ exports[`[html file]: form-fields.html 1`] = `
 </body></html>"
 `;
 
+exports[`[html file]: hover.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+  <meta charset=\\"UTF-8\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+  <title>hover selector</title>
+  <style>    div:hover, div.\\\\:hover {
+      background: orange;
+    }    div:hover::after, div.\\\\:hover::after {
+      position: absolute;
+      left: 0;
+      top: 100%;
+      content: 'dropdown';
+      width: 100px;
+      height: 200px;
+      background: lightblue;
+    }
+  </style>
+</head><body>
+  <div>hover me</div>
+</body></html>"
+`;
+
 exports[`[html file]: iframe.html 1`] = `
 "<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
diff --git a/test/html/hover.html b/test/html/hover.html
new file mode 100644
index 0000000000..e6df2126a1
--- /dev/null
+++ b/test/html/hover.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>hover selector</title>
+  <style>
+
+    div:hover {
+      background: orange;
+    }
+
+    div:hover::after {
+      position: absolute;
+      left: 0;
+      top: 100%;
+      content: 'dropdown';
+      width: 100px;
+      height: 200px;
+      background: lightblue;
+    }
+  </style>
+</head>
+
+<body>
+  <div>hover me</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts
index 0720f1205e..c5e1222624 100644
--- a/test/snapshot.test.ts
+++ b/test/snapshot.test.ts
@@ -1,6 +1,6 @@
 import 'mocha';
 import { expect } from 'chai';
-import { absoluteToStylesheet } from '../src/snapshot';
+import { absoluteToStylesheet, addHoverClass } from '../src/snapshot';
 
 describe('absolute url to stylesheet', () => {
   const href = 'http://localhost/css/style.css';
@@ -29,3 +29,43 @@ describe('absolute url to stylesheet', () => {
     ).to.equal(`url('http://localhost/a.jpg')`);
   });
 });
+
+describe('add hover class to hover selector related rules', () => {
+  it('will do nothing to css text without :hover', () => {
+    const cssText = 'body { color: white }';
+    expect(addHoverClass(cssText)).to.equal(cssText);
+  });
+
+  it('can add hover class to css text', () => {
+    const cssText = '.a:hover { color: white }';
+    expect(addHoverClass(cssText)).to.equal(
+      '.a:hover, .a.\\:hover { color: white }',
+    );
+  });
+
+  it('can add hover class when there is multi selector', () => {
+    const cssText = '.a, .b:hover, .c { color: white }';
+    expect(addHoverClass(cssText)).to.equal(
+      '.a, .b:hover, .b.\\:hover, .c { color: white }',
+    );
+  });
+
+  it('can add hover class when :hover is not the end of selector', () => {
+    const cssText = 'div:hover::after { color: white }';
+    expect(addHoverClass(cssText)).to.equal(
+      'div:hover::after, div.\\:hover::after { color: white }',
+    );
+  });
+
+  it('can add hover class when the selector has multi :hover', () => {
+    const cssText = 'a:hover b:hover { color: white }';
+    expect(addHoverClass(cssText)).to.equal(
+      'a:hover b:hover, a.\\:hover b.\\:hover { color: white }',
+    );
+  });
+
+  it('will ignore :hover in css value', () => {
+    const cssText = '.a::after { content: ":hover" }';
+    expect(addHoverClass(cssText)).to.equal(cssText);
+  });
+});

From 65236bf3d1112d31d8c0b30d384f430b43f87b87 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 31 Oct 2018 19:04:43 +0800
Subject: [PATCH 041/524] bump 0.5.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 578cbc5151..af347d58fc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "main": "dist/index.js",
   "module": "dist/module.js",

From 5904050cd28b3e7c6be0cb962bf3c7139fc6b93c Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 31 Oct 2018 19:07:27 +0800
Subject: [PATCH 042/524] departed 0.5.4 and bump 0.5.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index af347d58fc..6bb8aee296 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "main": "dist/index.js",
   "module": "dist/module.js",

From 216d03dae3e451bee7a3ae9db5ea5e27eb1d0932 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 1 Nov 2018 11:36:25 +0800
Subject: [PATCH 043/524] Fix the regexp performance issue

Also move the addHoverClass implementation into the rebuild stage.
So if there is still some corner case we have not handled, it will
only affect the replayer part of rrweb.
---
 src/rebuild.ts        | 23 ++++++++++++++++++++++-
 src/snapshot.ts       | 31 ++-----------------------------
 src/types.ts          |  1 +
 test/integration.ts   |  1 +
 test/rebuild.test.ts  | 43 +++++++++++++++++++++++++++++++++++++++++++
 test/snapshot.test.ts | 42 +-----------------------------------------
 6 files changed, 70 insertions(+), 71 deletions(-)
 create mode 100644 test/rebuild.test.ts

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 476ae2516d..e4e79b286c 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -115,6 +115,22 @@ function getTagName(n: elementNode): string {
   return tagName;
 }
 
+const CSS_SELECTOR = /([^\r\n,{}]+)(,(?=[^}]*{)|\s*{)/g;
+const HOVER_SELECTOR = /([^\\]):hover/g;
+export function addHoverClass(cssText: string): string {
+  return cssText.replace(CSS_SELECTOR, (match, p1: string, p2: string) => {
+    if (HOVER_SELECTOR.test(p1)) {
+      const newSelector = p1.replace(HOVER_SELECTOR, '$1.\\:hover');
+      return `${p1.replace(/\s*$/, '')}, ${newSelector.replace(
+        /^\s*/,
+        '',
+      )}${p2}`;
+    } else {
+      return match;
+    }
+  });
+}
+
 function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
   switch (n.type) {
     case NodeType.Document:
@@ -139,6 +155,9 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
           value = typeof value === 'boolean' ? '' : value;
           const isTextarea = tagName === 'textarea' && name === 'value';
           const isRemoteCss = tagName === 'style' && name === '_cssText';
+          if (isRemoteCss) {
+            value = addHoverClass(value);
+          }
           if (isTextarea || isRemoteCss) {
             const child = doc.createTextNode(value);
             node.appendChild(child);
@@ -152,7 +171,9 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
       }
       return node;
     case NodeType.Text:
-      return doc.createTextNode(n.textContent);
+      return doc.createTextNode(
+        n.isStyle ? addHoverClass(n.textContent) : n.textContent,
+      );
     case NodeType.CDATA:
       return doc.createCDATASection(n.textContent);
     case NodeType.Comment:
diff --git a/src/snapshot.ts b/src/snapshot.ts
index bb4ed16776..f1376ae7e7 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -17,36 +17,11 @@ export function resetId() {
   _id = 1;
 }
 
-const CSS_RULE = /(([#|\.]{0,1}[a-z0-9\[\]=:]+[\s|,]*)+)\s(\{[\s\S]?[^}]*})/;
-const CSS_RULE_GLOBAL = /(([#|\.]{0,1}[a-z0-9\[\]=:]+[\s|,]*)+)\s(\{[\s\S]?[^}]*})/g;
-const HOVER_SELECTOR = /([^\\]):hover/g;
-export function addHoverClass(cssText: string): string {
-  const matches = cssText.match(CSS_RULE_GLOBAL) || [];
-  for (const match of matches) {
-    const [, selectorText = '', , rules = ''] = match.match(CSS_RULE) || [];
-    const selectors = selectorText
-      .split(',')
-      .map(selector => selector.trim())
-      .map(selector => {
-        if (HOVER_SELECTOR.test(selector)) {
-          const newSelector = selector.replace(HOVER_SELECTOR, '$1.\\:hover');
-          selector += `, ${newSelector}`;
-        }
-        return selector;
-      });
-    cssText = cssText.replace(match, selectors.join(', ') + ' ' + rules);
-  }
-  return cssText;
-}
-
 function getCssRulesString(s: CSSStyleSheet): string | null {
   try {
     const rules = s.rules || s.cssRules;
     return rules
-      ? Array.from(rules).reduce(
-          (prev, cur) => (prev += addHoverClass(cur.cssText)),
-          '',
-        )
+      ? Array.from(rules).reduce((prev, cur) => (prev += cur.cssText), '')
       : null;
   } catch (error) {
     return null;
@@ -177,12 +152,10 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
       if (parentTagName === 'SCRIPT') {
         textContent = 'SCRIPT_PLACEHOLDER';
       }
-      if (parentTagName === 'STYLE') {
-        textContent = addHoverClass(textContent || '');
-      }
       return {
         type: NodeType.Text,
         textContent: textContent || '',
+        isStyle: parentTagName === 'STYLE' ? true : undefined,
       };
     case n.CDATA_SECTION_NODE:
       return {
diff --git a/src/types.ts b/src/types.ts
index 6fbe58e286..62d6af8b8c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -32,6 +32,7 @@ export type elementNode = {
 export type textNode = {
   type: NodeType.Text;
   textContent: string;
+  isStyle?: true;
 };
 
 export type cdataNode = {
diff --git a/test/integration.ts b/test/integration.ts
index 8c71101f6a..f668b62594 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -70,6 +70,7 @@ describe('integration tests', () => {
   before(async () => {
     this.server = await server();
     this.browser = await puppeteer.launch({
+      executablePath: '/home/yanzhen/Desktop/chrome-linux/chrome',
       // headless: false,
     });
 
diff --git a/test/rebuild.test.ts b/test/rebuild.test.ts
new file mode 100644
index 0000000000..d93bf64af2
--- /dev/null
+++ b/test/rebuild.test.ts
@@ -0,0 +1,43 @@
+import 'mocha';
+import { expect } from 'chai';
+import { addHoverClass } from '../src/rebuild';
+
+describe('add hover class to hover selector related rules', () => {
+  it('will do nothing to css text without :hover', () => {
+    const cssText = 'body { color: white }';
+    expect(addHoverClass(cssText)).to.equal(cssText);
+  });
+
+  it('can add hover class to css text', () => {
+    const cssText = '.a:hover { color: white }';
+    expect(addHoverClass(cssText)).to.equal(
+      '.a:hover, .a.\\:hover { color: white }',
+    );
+  });
+
+  it('can add hover class when there is multi selector', () => {
+    const cssText = '.a, .b:hover, .c { color: white }';
+    expect(addHoverClass(cssText)).to.equal(
+      '.a, .b:hover, .b.\\:hover, .c { color: white }',
+    );
+  });
+
+  it('can add hover class when :hover is not the end of selector', () => {
+    const cssText = 'div:hover::after { color: white }';
+    expect(addHoverClass(cssText)).to.equal(
+      'div:hover::after, div.\\:hover::after { color: white }',
+    );
+  });
+
+  it('can add hover class when the selector has multi :hover', () => {
+    const cssText = 'a:hover b:hover { color: white }';
+    expect(addHoverClass(cssText)).to.equal(
+      'a:hover b:hover, a.\\:hover b.\\:hover { color: white }',
+    );
+  });
+
+  it('will ignore :hover in css value', () => {
+    const cssText = '.a::after { content: ":hover" }';
+    expect(addHoverClass(cssText)).to.equal(cssText);
+  });
+});
diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts
index c5e1222624..0720f1205e 100644
--- a/test/snapshot.test.ts
+++ b/test/snapshot.test.ts
@@ -1,6 +1,6 @@
 import 'mocha';
 import { expect } from 'chai';
-import { absoluteToStylesheet, addHoverClass } from '../src/snapshot';
+import { absoluteToStylesheet } from '../src/snapshot';
 
 describe('absolute url to stylesheet', () => {
   const href = 'http://localhost/css/style.css';
@@ -29,43 +29,3 @@ describe('absolute url to stylesheet', () => {
     ).to.equal(`url('http://localhost/a.jpg')`);
   });
 });
-
-describe('add hover class to hover selector related rules', () => {
-  it('will do nothing to css text without :hover', () => {
-    const cssText = 'body { color: white }';
-    expect(addHoverClass(cssText)).to.equal(cssText);
-  });
-
-  it('can add hover class to css text', () => {
-    const cssText = '.a:hover { color: white }';
-    expect(addHoverClass(cssText)).to.equal(
-      '.a:hover, .a.\\:hover { color: white }',
-    );
-  });
-
-  it('can add hover class when there is multi selector', () => {
-    const cssText = '.a, .b:hover, .c { color: white }';
-    expect(addHoverClass(cssText)).to.equal(
-      '.a, .b:hover, .b.\\:hover, .c { color: white }',
-    );
-  });
-
-  it('can add hover class when :hover is not the end of selector', () => {
-    const cssText = 'div:hover::after { color: white }';
-    expect(addHoverClass(cssText)).to.equal(
-      'div:hover::after, div.\\:hover::after { color: white }',
-    );
-  });
-
-  it('can add hover class when the selector has multi :hover', () => {
-    const cssText = 'a:hover b:hover { color: white }';
-    expect(addHoverClass(cssText)).to.equal(
-      'a:hover b:hover, a.\\:hover b.\\:hover { color: white }',
-    );
-  });
-
-  it('will ignore :hover in css value', () => {
-    const cssText = '.a::after { content: ":hover" }';
-    expect(addHoverClass(cssText)).to.equal(cssText);
-  });
-});

From cb3c842a12093af4c664646cc7ad519de1ccf1aa Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 1 Nov 2018 13:29:23 +0800
Subject: [PATCH 044/524] bump 0.5.6

---
 package.json        | 2 +-
 test/integration.ts | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 6bb8aee296..c7afd7aa63 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "main": "dist/index.js",
   "module": "dist/module.js",
diff --git a/test/integration.ts b/test/integration.ts
index f668b62594..8c71101f6a 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -70,7 +70,6 @@ describe('integration tests', () => {
   before(async () => {
     this.server = await server();
     this.browser = await puppeteer.launch({
-      executablePath: '/home/yanzhen/Desktop/chrome-linux/chrome',
       // headless: false,
     });
 

From 8f1d9d5ca9d74e0e94151590aacd724427dd4007 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 2 Nov 2018 11:07:56 +0800
Subject: [PATCH 045/524] update rrweb and use the resume method with better
 performance

---
 public/index.html   | 22 +++++++++++++++++-----
 src/Controller.html |  6 +++++-
 src/utils.js        |  2 +-
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index cf5165fb5f..0596bb61ed 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,12 +15,24 @@
   <script src="./bundle.js"></script>
   <script src="./bundle.events.js"></script>
   <script>
-    const player = new rrwebPlayer({
-      target: document.body,
-      data: {
-        events,
-      },
+    const queryObj = {
+      sessionId: 'e2c7cfe8-d868-4f11-b561-5a969da26334',
+    };
+    let query = '';
+    Object.keys(queryObj).forEach(key => {
+      query += `${key}=${queryObj[key]}&`;
     });
+    fetch(`http://192.168.17.205:9090/api/events?${query}`)
+      .then(res => res.json())
+      .then(data => {
+        // eslint-disable-next-line
+        new rrwebPlayer({
+          target: document.body,
+          data: {
+            events: data.events,
+          },
+        });
+      });
   </script>
 </body>
 
diff --git a/src/Controller.html b/src/Controller.html
index 2ec2bd37b1..1c55cf26bb 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -72,7 +72,11 @@
       },
       play() {
         const { replayer, currentTime } = this.get();
-        replayer.play(currentTime);
+        if (currentTime > 0) {
+          replayer.resume(currentTime);
+        } else {
+          replayer.play(currentTime);
+        }
         this.loopTimer();
       },
       pause() {
diff --git a/src/utils.js b/src/utils.js
index b19c460383..22adf05c5f 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -29,5 +29,5 @@ export function formatTime(ms) {
   if (hour) {
     return `${padZero(hour)}:${padZero(minute)}:${padZero(minute)}`;
   }
-  return `${padZero(hour)}:${padZero(second)}`;
+  return `${padZero(minute)}:${padZero(second)}`;
 }

From 9471d4dd01c97a133f60d06ee0a45f14395d1bbc Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 5 Nov 2018 18:09:43 +0800
Subject: [PATCH 046/524] improve style of the player

---
 src/Controller.html | 48 +++++++++++++++++++++++++++++++++++++--------
 src/Player.html     | 24 +++++++++++++++++------
 2 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/src/Controller.html b/src/Controller.html
index 1c55cf26bb..ae172c703d 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -10,7 +10,17 @@
   </div>
   <div class="rr-controller__btns">
     <button on:click="toggle()">
-      {isPlaying ? 'pause' : 'play'}
+      {#if isPlaying}
+      <svg t="1541411313529" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+        <path d="M682.65984 128q53.00224 0 90.50112 37.49888t37.49888 90.50112l0 512q0 53.00224-37.49888 90.50112t-90.50112 37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224 37.49888-90.50112t90.50112-37.49888zM341.34016 128q53.00224 0 90.50112 37.49888t37.49888 90.50112l0 512q0 53.00224-37.49888 90.50112t-90.50112 37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224 37.49888-90.50112t90.50112-37.49888zM341.34016 213.34016q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 512q0 17.67424 12.4928 30.16704t30.16704 12.4928 30.16704-12.4928 12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928zM682.65984 213.34016q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 512q0 17.67424 12.4928 30.16704t30.16704 12.4928 30.16704-12.4928 12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928z"></path>
+      </svg>
+      {:else}
+      <svg t="1541410561137" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+        <path d="M170.65984 896l0-768 640 384zM644.66944 512l-388.66944-233.32864 0 466.65728z"></path>
+      </svg>
+      {/if}
     </button>
     {#each [1, 2, 4, 8] as s}
     <button class:active="s === speed" on:click="setSpeed(s)">{s}x</button>
@@ -118,12 +128,12 @@
   .rr-controller {
     width: 100%;
     height: 80px;
-    background: rgba(0, 0, 0, .5);
+    background: #fff;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
-    padding: 10px;
+    border-radius: 0 0 5px 5px;
   }
 
   .rr-timeline {
@@ -134,13 +144,13 @@
 
   .rr-timeline__time {
     padding: 0 20px;
-    color: white;
+    color: #11103e;
   }
 
   .rr-progress {
     width: 100%;
     height: 4px;
-    background: white;
+    background: #eee;
     position: relative;
     border-radius: 3px;
   }
@@ -150,7 +160,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    background: orange
+    background: #E0E1FE;
   }
 
   .rr-progress__handler {
@@ -160,10 +170,32 @@
     position: absolute;
     top: 2px;
     transform: translate(-50%, -50%);
-    background: orange;
+    background: rgb(73, 80, 246);
+  }
+
+  .rr-controller__btns {
+    display: flex;
+  }
+
+  .rr-controller__btns button {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  .rr-controller__btns button:active {
+    background: #E0E1FE;
   }
 
   .rr-controller__btns button.active {
-    color: orange;
+    color: #fff;
+    background: rgb(73, 80, 246);
   }
 </style>
\ No newline at end of file
diff --git a/src/Player.html b/src/Player.html
index 412f2fbf0b..8a19198693 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -33,8 +33,8 @@
     methods: {
       updateScale(el, frameDimension) {
         const { width, height } = this.get();
-        const widthScale = (width - 20) / frameDimension.width;
-        const heightScale = (height - 20) / frameDimension.height;
+        const widthScale = width / frameDimension.width;
+        const heightScale = height / frameDimension.height;
         el.style.transform =
           `scale(${Math.min(widthScale, heightScale, 1)})` +
           'translate(-50%, -50%)';
@@ -60,9 +60,23 @@
 
 <style>
   .rr-player {
+    position: relative;
     background: white;
     float: left;
     clear: both;
+    border-radius: 5px;
+  }
+
+  .rr-player::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    box-shadow: 0 24px 48px rgba(17, 16, 62, 0.12);
+    mix-blend-mode: multiply;
+    z-index: -1;
   }
 
   .rr-player__frame {
@@ -73,10 +87,8 @@
     float: left;
     clear: both;
     transform-origin: top left;
-    left: calc(50% - 10px);
-    top: calc(50% - 10px);
-    margin: 10px;
-    box-shadow: 0 3px 28px rgba(0, 0, 0, 0.25), 0 1px 10px rgba(0, 0, 0, 0.22);
+    left: 50%;
+    top: 50%;
   }
 
   :global(.replayer-wrapper > iframe) {

From 8157b38f99e661eb3e1f13c42034fa92637d5e20 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 13 Nov 2018 16:09:57 +0800
Subject: [PATCH 047/524] check is svg when serialization

---
 src/rebuild.ts  | 103 ++----------------------------------------------
 src/snapshot.ts |   5 +++
 src/types.ts    |   1 +
 3 files changed, 9 insertions(+), 100 deletions(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index e4e79b286c..9a04500041 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -7,103 +7,6 @@ import {
   INode,
 } from './types';
 
-// TODO: need a more accurate list
-const svgTags = [
-  'altGlyph',
-  'altGlyphDef',
-  'altGlyphItem',
-  'animate',
-  'animateColor',
-  'animateMotion',
-  'animateTransform',
-  'animation',
-  'circle',
-  'clipPath',
-  'color-profile',
-  'cursor',
-  'defs',
-  'desc',
-  'discard',
-  'ellipse',
-  'feBlend',
-  'feColorMatrix',
-  'feComponentTransfer',
-  'feComposite',
-  'feConvolveMatrix',
-  'feDiffuseLighting',
-  'feDisplacementMap',
-  'feDistantLight',
-  'feDropShadow',
-  'feFlood',
-  'feFuncA',
-  'feFuncB',
-  'feFuncG',
-  'feFuncR',
-  'feGaussianBlur',
-  'feImage',
-  'feMerge',
-  'feMergeNode',
-  'feMorphology',
-  'feOffset',
-  'fePointLight',
-  'feSpecularLighting',
-  'feSpotLight',
-  'feTile',
-  'feTurbulence',
-  'filter',
-  'font',
-  'font-face',
-  'font-face-format',
-  'font-face-name',
-  'font-face-src',
-  'font-face-uri',
-  'foreignObject',
-  'g',
-  'glyph',
-  'glyphRef',
-  'handler',
-  'hatch',
-  'hatchpath',
-  'hkern',
-  'image',
-  'line',
-  'linearGradient',
-  'listener',
-  'marker',
-  'mask',
-  'mesh',
-  'meshgradient',
-  'meshpatch',
-  'meshrow',
-  'metadata',
-  'missing-glyph',
-  'mpath',
-  'path',
-  'pattern',
-  'polygon',
-  'polyline',
-  'prefetch',
-  'radialGradient',
-  'rect',
-  'set',
-  'solidColor',
-  'solidcolor',
-  'stop',
-  'svg',
-  'switch',
-  'symbol',
-  'tbreak',
-  'text',
-  'textArea',
-  'textPath',
-  'tref',
-  'tspan',
-  'unknown',
-  'use',
-  'view',
-  'vkern',
-];
-
 const tagMap: tagMap = {
   script: 'noscript',
 };
@@ -144,10 +47,10 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
     case NodeType.Element:
       const tagName = getTagName(n);
       let node: Element;
-      if (svgTags.indexOf(tagName) < 0) {
-        node = doc.createElement(tagName);
-      } else {
+      if (n.isSVG) {
         node = doc.createElementNS('http://www.w3.org/2000/svg', tagName);
+      } else {
+        node = doc.createElement(tagName);
       }
       for (const name in n.attributes) {
         if (n.attributes.hasOwnProperty(name)) {
diff --git a/src/snapshot.ts b/src/snapshot.ts
index f1376ae7e7..a062305516 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -77,6 +77,10 @@ function absoluteToDoc(doc: Document, attributeValue: string): string {
   return a.href;
 }
 
+function isSVGElement(el: Element): boolean {
+  return el.tagName === 'svg' || el instanceof SVGElement;
+}
+
 function serializeNode(n: Node, doc: Document): serializedNode | false {
   switch (n.nodeType) {
     case n.DOCUMENT_NODE:
@@ -142,6 +146,7 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
         tagName,
         attributes,
         childNodes: [],
+        isSVG: isSVGElement(n as Element) || undefined,
       };
     case n.TEXT_NODE:
       // The parent node may not be a html element which has a tagName attribute.
diff --git a/src/types.ts b/src/types.ts
index 62d6af8b8c..21fa2de308 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -27,6 +27,7 @@ export type elementNode = {
   tagName: string;
   attributes: attributes;
   childNodes: serializedNodeWithId[];
+  isSVG?: true;
 };
 
 export type textNode = {

From 275551befb001baa21495d8d1a903115b0761ae5 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 13 Nov 2018 16:13:42 +0800
Subject: [PATCH 048/524] bump 0.6.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c7afd7aa63..0004aa6752 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.5.6",
+  "version": "0.6.0",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "main": "dist/index.js",
   "module": "dist/module.js",

From 4287fb4810e4c7710fafc8055cd9df0f3ef21bb7 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 13 Nov 2018 19:10:34 +0800
Subject: [PATCH 049/524] update bundle config

---
 .gitignore       |  2 ++
 package.json     |  9 ++++--
 rollup.config.js | 82 +++++++++++++++++++++++++++++++++++++-----------
 3 files changed, 72 insertions(+), 21 deletions(-)

diff --git a/.gitignore b/.gitignore
index f35f48b860..2c597d0358 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,5 @@ node_modules
 package-lock.json
 build
 dist
+es
+lib
diff --git a/package.json b/package.json
index 0004aa6752..cb7d0b8c34 100644
--- a/package.json
+++ b/package.json
@@ -2,8 +2,6 @@
   "name": "rrweb-snapshot",
   "version": "0.6.0",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
-  "main": "dist/index.js",
-  "module": "dist/module.js",
   "scripts": {
     "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
     "bundle": "rollup --config"
@@ -17,8 +15,14 @@
     "snapshot",
     "DOM"
   ],
+  "main": "lib/rrweb-snapshot.js",
+  "module": "es/rrweb-snapshot.js",
+  "unpkg": "dist/rrweb-snapshot.js",
+  "typings": "./index.d.ts",
   "files": [
     "dist",
+    "lib",
+    "es",
     "index.d.ts",
     "src/types.ts"
   ],
@@ -38,6 +42,7 @@
     "mocha": "^5.2.0",
     "puppeteer": "^1.9.0",
     "rollup": "^0.66.4",
+    "rollup-plugin-terser": "^3.0.0",
     "rollup-plugin-typescript": "^1.0.0",
     "ts-node": "^7.0.1",
     "tslib": "^1.9.3",
diff --git a/rollup.config.js b/rollup.config.js
index dc2cd261f5..e40d7537a7 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,21 +1,65 @@
 import typescript from 'rollup-plugin-typescript';
+import { terser } from 'rollup-plugin-terser';
+import pkg from './package.json';
 
-export default {
-  input: './src/index.ts',
-  plugins: [typescript()],
-  output: [
-    {
-      format: 'cjs',
-      file: './dist/index.js',
-    },
-    {
-      format: 'esm',
-      file: './dist/module.js',
-    },
-    {
-      name: 'rrwebSnapshot',
-      format: 'iife',
-      file: './dist/browser.js',
-    },
-  ],
-};
+function toMinPath(path) {
+  return path.replace(/\.js$/, '.min.js');
+}
+
+export default [
+  // browser
+  {
+    input: './src/index.ts',
+    plugins: [typescript()],
+    output: [
+      {
+        name: 'rrwebSnapshot',
+        format: 'umd',
+        file: pkg.unpkg,
+      },
+    ],
+  },
+  {
+    input: './src/index.ts',
+    plugins: [typescript(), terser()],
+    output: [
+      {
+        name: 'rrwebSnapshot',
+        format: 'umd',
+        file: toMinPath(pkg.unpkg),
+      },
+    ],
+  },
+  // CommonJS
+  {
+    input: './src/index.ts',
+    plugins: [typescript()],
+    output: [
+      {
+        format: 'cjs',
+        file: pkg.main,
+      },
+    ],
+  },
+  // ES module
+  {
+    input: './src/index.ts',
+    plugins: [typescript()],
+    output: [
+      {
+        format: 'esm',
+        file: pkg.module,
+      },
+    ],
+  },
+  {
+    input: './src/index.ts',
+    plugins: [typescript(), terser()],
+    output: [
+      {
+        format: 'esm',
+        file: toMinPath(pkg.module),
+      },
+    ],
+  },
+];

From c617d2a49f8a9397d7bfd262a517cdaac1480611 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 13 Nov 2018 19:11:39 +0800
Subject: [PATCH 050/524] Release 0.6.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index cb7d0b8c34..53f321110f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From d186a06edf8a0b2a77433e17b25c8586be8b5120 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 23 Nov 2018 22:46:42 +0800
Subject: [PATCH 051/524] update bundle format and add sourcemap

---
 rollup.config.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/rollup.config.js b/rollup.config.js
index e40d7537a7..942cc62f63 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -14,7 +14,7 @@ export default [
     output: [
       {
         name: 'rrwebSnapshot',
-        format: 'umd',
+        format: 'iife',
         file: pkg.unpkg,
       },
     ],
@@ -25,8 +25,9 @@ export default [
     output: [
       {
         name: 'rrwebSnapshot',
-        format: 'umd',
+        format: 'iife',
         file: toMinPath(pkg.unpkg),
+        sourcemap: true,
       },
     ],
   },
@@ -59,6 +60,7 @@ export default [
       {
         format: 'esm',
         file: toMinPath(pkg.module),
+        sourcemap: true,
       },
     ],
   },

From 49c1ba0a1fee88d6ba0ab2ff2748736fb980fa81 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 23 Nov 2018 22:47:19 +0800
Subject: [PATCH 052/524] absolute relative path in inline stylesheet

---
 src/snapshot.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index a062305516..fb77281346 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -154,13 +154,17 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
       const parentTagName =
         n.parentNode && (n.parentNode as HTMLElement).tagName;
       let textContent = (n as Text).textContent;
+      const isStyle = parentTagName === 'STYLE' ? true : undefined;
+      if (isStyle && textContent) {
+        textContent = absoluteToStylesheet(textContent, location.href);
+      }
       if (parentTagName === 'SCRIPT') {
         textContent = 'SCRIPT_PLACEHOLDER';
       }
       return {
         type: NodeType.Text,
         textContent: textContent || '',
-        isStyle: parentTagName === 'STYLE' ? true : undefined,
+        isStyle,
       };
     case n.CDATA_SECTION_NODE:
       return {

From 9de02491fbcc8f3dd868acb222ff8d832db4e8c2 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 23 Nov 2018 22:47:43 +0800
Subject: [PATCH 053/524] Release 0.6.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 53f321110f..ed592f9c19 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 124959a67d78455aad1cdb06c52c274df41ccc4b Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 23 Nov 2018 22:57:22 +0800
Subject: [PATCH 054/524] fix css url regexp

---
 src/snapshot.ts       |  2 +-
 test/snapshot.test.ts | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index fb77281346..3acbdb5b64 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -42,7 +42,7 @@ function extractOrigin(url: string): string {
   return origin;
 }
 
-const URL_IN_CSS_REF = /url\((['"])([^'"]*)\1\)/gm;
+const URL_IN_CSS_REF = /url\((['"]|)([^'"]*)\1\)/gm;
 export function absoluteToStylesheet(cssText: string, href: string): string {
   return cssText.replace(URL_IN_CSS_REF, (_1, _2, filePath) => {
     if (!/^[./]/.test(filePath)) {
diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts
index 0720f1205e..227535e942 100644
--- a/test/snapshot.test.ts
+++ b/test/snapshot.test.ts
@@ -28,4 +28,16 @@ describe('absolute url to stylesheet', () => {
       absoluteToStylesheet('url("http://localhost/a.jpg")', href),
     ).to.equal(`url('http://localhost/a.jpg')`);
   });
+
+  it('can handle single quote path', () => {
+    expect(absoluteToStylesheet(`url('./a.jpg')`, href)).to.equal(
+      `url('http://localhost/css/a.jpg')`,
+    );
+  });
+
+  it('can handle no quote path', () => {
+    expect(absoluteToStylesheet('url(./a.jpg)', href)).to.equal(
+      `url('http://localhost/css/a.jpg')`,
+    );
+  });
 });

From d1987f2c05f484b43d619daa8fa3cc248b4e884e Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 23 Nov 2018 23:08:23 +0800
Subject: [PATCH 055/524] Release 0.6.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ed592f9c19..ae24918952 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From c856fb5ea941a31162687a55a85751c14dce0522 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 23 Nov 2018 23:12:37 +0800
Subject: [PATCH 056/524] Release 0.6.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ae24918952..39c9996aaa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 66e8d4318ce5eef0c01fb0163482f81564b1c5f2 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 23 Nov 2018 23:36:19 +0800
Subject: [PATCH 057/524] fix absolute to doc

---
 src/snapshot.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 3acbdb5b64..1423f6d932 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -67,11 +67,7 @@ export function absoluteToStylesheet(cssText: string, href: string): string {
   });
 }
 
-const RELATIVE_PATH = /^(\.\.|\.|)\//;
 function absoluteToDoc(doc: Document, attributeValue: string): string {
-  if (!RELATIVE_PATH.test(attributeValue)) {
-    return attributeValue;
-  }
   const a: HTMLAnchorElement = doc.createElement('a');
   a.href = attributeValue;
   return a.href;

From aca8207db960492ab9f333f4ae2ce4302710dd0c Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 23 Nov 2018 23:36:30 +0800
Subject: [PATCH 058/524] Release 0.6.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 39c9996aaa..4b1ac00b3a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From f73bad21e53bf6efe7515ab45e62b297c7362eb9 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 26 Nov 2018 17:42:52 +0800
Subject: [PATCH 059/524] complately update relative path regexp

---
 package.json          | 2 +-
 src/snapshot.ts       | 3 ++-
 test/snapshot.test.ts | 6 ++++++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 4b1ac00b3a..acdea765b9 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "chai": "^4.1.2",
     "jest-snapshot": "^23.6.0",
     "mocha": "^5.2.0",
-    "puppeteer": "^1.9.0",
+    "puppeteer": "^1.10.0",
     "rollup": "^0.66.4",
     "rollup-plugin-terser": "^3.0.0",
     "rollup-plugin-typescript": "^1.0.0",
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 1423f6d932..4b4708d848 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -43,9 +43,10 @@ function extractOrigin(url: string): string {
 }
 
 const URL_IN_CSS_REF = /url\((['"]|)([^'"]*)\1\)/gm;
+const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/;
 export function absoluteToStylesheet(cssText: string, href: string): string {
   return cssText.replace(URL_IN_CSS_REF, (_1, _2, filePath) => {
-    if (!/^[./]/.test(filePath)) {
+    if (!RELATIVE_PATH.test(filePath)) {
       return `url('${filePath}')`;
     }
     if (filePath[0] === '/') {
diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts
index 227535e942..125428970e 100644
--- a/test/snapshot.test.ts
+++ b/test/snapshot.test.ts
@@ -5,6 +5,12 @@ import { absoluteToStylesheet } from '../src/snapshot';
 describe('absolute url to stylesheet', () => {
   const href = 'http://localhost/css/style.css';
 
+  it('cam handle relative path', () => {
+    expect(absoluteToStylesheet('url(a.jpg)', href)).to.equal(
+      `url('http://localhost/css/a.jpg')`,
+    );
+  });
+
   it('can handle same level path', () => {
     expect(absoluteToStylesheet('url("./a.jpg")', href)).to.equal(
       `url('http://localhost/css/a.jpg')`,

From b8bb590de3daa092cbbfbc29eca57a647bc028b3 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 26 Nov 2018 17:43:07 +0800
Subject: [PATCH 060/524] Release 0.6.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index acdea765b9..01999a703f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From e13f9bb0aaf7324192790732ff094342c692b62d Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 27 Nov 2018 13:36:09 +0800
Subject: [PATCH 061/524] add release-it config

---
 .release-it.json | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 .release-it.json

diff --git a/.release-it.json b/.release-it.json
new file mode 100644
index 0000000000..4aff103773
--- /dev/null
+++ b/.release-it.json
@@ -0,0 +1,4 @@
+{
+  "non-interactive": true,
+  "buildCommand": "npm run bundle"
+}

From 4a228c30782bfd4121674842f467e9b19c5a632b Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 27 Nov 2018 13:40:46 +0800
Subject: [PATCH 062/524] add release-it cli config


From e198ea494e6e5b06e9313dc5377596aa44af60a1 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 27 Nov 2018 14:39:13 +0800
Subject: [PATCH 063/524] ignore iframe src attribute

---
 src/rebuild.ts                         | 3 +++
 test/__snapshots__/integration.ts.snap | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 9a04500041..2bba890e1f 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -65,6 +65,9 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
             const child = doc.createTextNode(value);
             node.appendChild(child);
           }
+          if (tagName === 'iframe' && name === 'src') {
+            continue;
+          }
           try {
             node.setAttribute(name, value);
           } catch (error) {
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 4658b966fc..2e9cac5b94 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -119,7 +119,7 @@ exports[`[html file]: iframe.html 1`] = `
   <title>iframe</title>
 </head>
 <body>
-  <iframe src=\\"http://localhost:3030/html/iframe-inner.html\\" width=\\"100\\" height=\\"50\\"></iframe>
+  <iframe width=\\"100\\" height=\\"50\\"></iframe>
 </body></html>"
 `;
 

From cac660ce61673cbd279798e3e999443a996e66ec Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 27 Nov 2018 14:39:22 +0800
Subject: [PATCH 064/524] Release 0.6.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 01999a703f..e098598aee 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From e55b91759009b8a80741284a1235a33c9afcd5cc Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 27 Nov 2018 15:22:06 +0800
Subject: [PATCH 065/524] remove _cssText attribute from style element

---
 src/rebuild.ts      | 1 +
 test/integration.ts | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 2bba890e1f..2256c40ecc 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -64,6 +64,7 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
           if (isTextarea || isRemoteCss) {
             const child = doc.createTextNode(value);
             node.appendChild(child);
+            continue;
           }
           if (tagName === 'iframe' && name === 'src') {
             continue;
diff --git a/test/integration.ts b/test/integration.ts
index 8c71101f6a..387b7ee749 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -89,7 +89,7 @@ describe('integration tests', () => {
     await this.server.close();
   });
 
-  for (const html of htmls.slice(0, 10)) {
+  for (const html of htmls) {
     const title = '[html file]: ' + html.filePath;
     it(title, async () => {
       const page: puppeteer.Page = await this.browser.newPage();

From 6b1eb9579b8794ba208c45628155cb9952b82054 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 27 Nov 2018 15:22:15 +0800
Subject: [PATCH 066/524] Release 0.6.8

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e098598aee..42838f2ce1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 5d3d27f9f75e9f24d9243d0aad6942a8fc104b86 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 27 Nov 2018 17:55:20 +0800
Subject: [PATCH 067/524] add rollup postcss plugin and import style from rrweb

---
 package.json     |  1 +
 rollup.config.js |  3 +++
 src/Player.html  | 23 +----------------------
 3 files changed, 5 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index cdf5d8ccec..a20bf023bb 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "rollup": "^0.66.2",
     "rollup-plugin-commonjs": "^9.1.8",
     "rollup-plugin-node-resolve": "^3.4.0",
+    "rollup-plugin-postcss": "^1.6.3",
     "rollup-plugin-svelte": "^4.3.1",
     "rollup-plugin-terser": "^3.0.0",
     "sirv-cli": "^0.2.2",
diff --git a/rollup.config.js b/rollup.config.js
index 85fe0bfeed..b664fcb725 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -2,6 +2,7 @@ import svelte from 'rollup-plugin-svelte';
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import { terser } from 'rollup-plugin-terser';
+import postcss from 'rollup-plugin-postcss';
 import pkg from './package.json';
 
 const production = !process.env.ROLLUP_WATCH;
@@ -38,6 +39,8 @@ export default [
     resolve(),
     commonjs(),
 
+    postcss(),
+
     // If we're building for production (npm run build
     // instead of npm run dev), minify
     production && terser(),
diff --git a/src/Player.html b/src/Player.html
index 8a19198693..0252a9ff7f 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -7,6 +7,7 @@
 
 <script>
   import { Replayer } from 'rrweb';
+  import 'rrweb/dist/rrweb.min.css';
   import { inlineCss } from './utils.js';
 
   export default {
@@ -94,26 +95,4 @@
   :global(.replayer-wrapper > iframe) {
     border: none;
   }
-
-  /* get from rrweb */
-  :global(.replayer-wrapper) {
-    position: relative;
-  }
-
-  :global(.replayer-mouse) {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-  }
-
-  :global(.replayer-mouse::after) {
-    content: '';
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    border-radius: 10px;
-    background: thistle;
-    transform: translate(-10px, -10px);
-    opacity: 0.5;
-  }
 </style>
\ No newline at end of file

From ab79af115af02239977d27957849acddd0a0f411 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 30 Nov 2018 22:59:29 +0800
Subject: [PATCH 068/524] update the test snapshot

---
 test/__snapshots__/integration.ts.snap | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 2e9cac5b94..68cc0b9789 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -76,7 +76,7 @@ exports[`[html file]: form-fields.html 1`] = `
       <input type=\\"checkbox\\" checked=\\"\\" />
     </label>
     <label for=\\"textarea\\">
-      <textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\" value=\\"1234\\">1234</textarea>
+      <textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\">1234</textarea>
     </label>
     <label for=\\"select\\">
       <select name=\\"\\" id=\\"\\" value=\\"2\\">
@@ -162,7 +162,7 @@ exports[`[html file]: with-style-sheet.html 1`] = `
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
   <title>with style sheet</title>
-  <style _csstext=\\"body { margin: 0px; background: url('http://localhost:3030/a.jpg'); }p { color: red; background: url('http://localhost:3030/css/b.jpg'); }body &gt; p { color: yellow; }\\">body { margin: 0px; background: url('http://localhost:3030/a.jpg'); }p { color: red; background: url('http://localhost:3030/css/b.jpg'); }body &gt; p { color: yellow; }</style>
+  <style>body { margin: 0px; background: url('http://localhost:3030/a.jpg'); }p { color: red; background: url('http://localhost:3030/css/b.jpg'); }body &gt; p { color: yellow; }</style>
 </head><body>
 </body></html>"
 `;

From 39373ec1da3bd2d02db0e0d82f91ca5981f955fa Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 30 Nov 2018 23:04:09 +0800
Subject: [PATCH 069/524] update README

---
 README.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 9c46dd60eb..765210fd35 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 [![Build Status](https://travis-ci.org/rrweb-io/rrweb-snapshot.svg?branch=master)](https://travis-ci.org/rrweb-io/rrweb-snapshot)
 
 Snapshot the DOM into a stateful and serializable data structure.
-Also provide the ability to rebuild the DOM via snapshot.
+Also, provide the ability to rebuild the DOM via snapshot.
 
 ## API
 
@@ -13,22 +13,22 @@ This module export following methods:
 
 `snapshot` will traverse the DOM and return a stateful and serializable data structure which can represent the current DOM **view**.
 
-There are serveral things will be done during snapshot:
+There are several things will be done during snapshot:
 
 1. Inline some DOM states into HTML attributes, e.g, HTMLInputElement's value.
-2. Turn script tags into noscript tags to avoid scripts being executed.
+2. Turn script tags into `noscript` tags to avoid scripts being executed.
 3. Try to inline stylesheets to make sure local stylesheets can be used.
-4. Make relative paths in href, src, css to be absolute paths.
-5. Give a id to each Node, and return the id node map when snapshot finished.
+4. Make relative paths in href, src, CSS to be absolute paths.
+5. Give an id to each Node, and return the id node map when snapshot finished.
 
 #### rebuild
 
 `rebuild` will build the DOM according to the taken snapshot.
 
-There are serveral things will be done during rebuild:
+There are several things will be done during rebuild:
 
-1. Add data-rrid attribute if Node is an Element.
-2. Create some extra DOM node like text node to place inline css and some states.
+1. Add data-rrid attribute if the Node is an Element.
+2. Create some extra DOM node like text node to place inline CSS and some states.
 3. Add data-extra-child-index attribute if Node has some extra child DOM.
 
 #### serializeNodeWithId

From d8c5ae5ae6b20fe8ec620f8fd83720975dcf5a93 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 2 Dec 2018 23:06:36 +0800
Subject: [PATCH 070/524] handle block element

---
 src/rebuild.ts                         | 12 +++++++++++-
 src/snapshot.ts                        | 14 ++++++++++++-
 src/types.ts                           |  1 +
 test/__snapshots__/integration.ts.snap | 25 ++++++++++++++++++++++++
 test/html/block-element.html           | 27 ++++++++++++++++++++++++++
 5 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 test/html/block-element.html

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 2256c40ecc..563e7867af 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -53,7 +53,8 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
         node = doc.createElement(tagName);
       }
       for (const name in n.attributes) {
-        if (n.attributes.hasOwnProperty(name)) {
+        // attribute names start with rr_ are internal attributes added by rrweb
+        if (n.attributes.hasOwnProperty(name) && !name.startsWith('rr_')) {
           let value = n.attributes[name];
           value = typeof value === 'boolean' ? '' : value;
           const isTextarea = tagName === 'textarea' && name === 'value';
@@ -74,6 +75,15 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
           } catch (error) {
             // skip invalid attribute
           }
+        } else {
+          // handle internal attributes
+          if (n.attributes.rr_width) {
+            (node as HTMLElement).style.width = n.attributes.rr_width as string;
+          }
+          if (n.attributes.rr_height) {
+            (node as HTMLElement).style.height = n.attributes
+              .rr_height as string;
+          }
         }
       }
       return node;
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 4b4708d848..1edd5acc69 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -78,6 +78,7 @@ function isSVGElement(el: Element): boolean {
   return el.tagName === 'svg' || el instanceof SVGElement;
 }
 
+const BLOCK_CLASS = 'rr-block';
 function serializeNode(n: Node, doc: Document): serializedNode | false {
   switch (n.nodeType) {
     case n.DOCUMENT_NODE:
@@ -93,6 +94,7 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
         systemId: (n as DocumentType).systemId,
       };
     case n.ELEMENT_NODE:
+      const needBlock = (n as HTMLElement).classList.contains(BLOCK_CLASS);
       const tagName = (n as HTMLElement).tagName.toLowerCase();
       let attributes: attributes = {};
       for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
@@ -138,12 +140,18 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
           attributes.selected = (n as HTMLOptionElement).selected;
         }
       }
+      if (needBlock) {
+        const { width, height } = (n as HTMLElement).getBoundingClientRect();
+        attributes.rr_width = `${width}px`;
+        attributes.rr_height = `${height}px`;
+      }
       return {
         type: NodeType.Element,
         tagName,
         attributes,
         childNodes: [],
         isSVG: isSVGElement(n as Element) || undefined,
+        needBlock,
       };
     case n.TEXT_NODE:
       // The parent node may not be a html element which has a tagName attribute.
@@ -195,10 +203,14 @@ export function serializeNodeWithId(
   });
   (n as INode).__sn = serializedNode;
   map[serializedNode.id] = n as INode;
+  let recordChild = !skipChild;
+  if (serializedNode.type === NodeType.Element) {
+    recordChild = recordChild && !serializedNode.needBlock;
+  }
   if (
     (serializedNode.type === NodeType.Document ||
       serializedNode.type === NodeType.Element) &&
-    !skipChild
+    recordChild
   ) {
     for (const childN of Array.from(n.childNodes)) {
       const serializedChildNode = serializeNodeWithId(childN, doc, map);
diff --git a/src/types.ts b/src/types.ts
index 21fa2de308..2bdbd74c18 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -28,6 +28,7 @@ export type elementNode = {
   attributes: attributes;
   childNodes: serializedNodeWithId[];
   isSVG?: true;
+  needBlock?: boolean;
 };
 
 export type textNode = {
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 68cc0b9789..7d0575fcef 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -48,6 +48,31 @@ exports[`[html file]: basic.html 1`] = `
 </head><body></body></html>"
 `;
 
+exports[`[html file]: block-element.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+    <meta charset=\\"UTF-8\\" />
+    <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+    <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+    <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>record 2</div>
+    <div class=\\"rr-block small\\" style=\\"width: 50px; height: 100px;\\"></div>
+    <div class=\\"rr-block\\" style=\\"height: 200px; width: 100px\\"></div>
+  </body></html>"
+`;
+
 exports[`[html file]: cors-style-sheet.html 1`] = `
 "<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
diff --git a/test/html/block-element.html b/test/html/block-element.html
new file mode 100644
index 0000000000..f9671d2a0b
--- /dev/null
+++ b/test/html/block-element.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Document</title>
+    <style>
+      .big {
+        width: 50px;
+        height: 50px;
+      }
+      .small {
+        width: 50px;
+        height: 100px;
+        float: left;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="rr-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>
+  </body>
+</html>

From 4ae036137259b97c5a20f91f99a643b5572994a2 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 2 Dec 2018 23:06:59 +0800
Subject: [PATCH 071/524] Release 0.6.9

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 42838f2ce1..31fb59bbed 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From b7b38c3a2b97c4ddc073904b7032ec918a03230f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 2 Dec 2018 23:15:48 +0800
Subject: [PATCH 072/524] delete not needed props

---
 src/snapshot.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 1edd5acc69..cf05834592 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -206,6 +206,8 @@ export function serializeNodeWithId(
   let recordChild = !skipChild;
   if (serializedNode.type === NodeType.Element) {
     recordChild = recordChild && !serializedNode.needBlock;
+    // this property was not needed in replay side
+    delete serializedNode.needBlock;
   }
   if (
     (serializedNode.type === NodeType.Document ||

From abaa5d935c0663b07abbe24fd4c5983af7a0faed Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 2 Dec 2018 23:15:56 +0800
Subject: [PATCH 073/524] Release 0.6.10

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 31fb59bbed..bbee5165da 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.6.9",
+  "version": "0.6.10",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From b9130e85551cd52209d62e5c7fd698c7b1c9c529 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 6 Dec 2018 18:05:36 +0800
Subject: [PATCH 074/524] update rreb and refactor toggle

---
 public/global.css   | 68 ++++++++-------------------------------------
 public/index.html   | 66 +++++++++++++++++++++----------------------
 src/Controller.html | 61 +++++++++++++++++++++++++++++++---------
 src/utils.js        |  2 +-
 4 files changed, 92 insertions(+), 105 deletions(-)

diff --git a/public/global.css b/public/global.css
index 9d682a3961..9b30ce9470 100644
--- a/public/global.css
+++ b/public/global.css
@@ -1,61 +1,15 @@
-html, body {
-	position: relative;
-	width: 100%;
-	height: 100%;
-}
-
+html,
 body {
-	color: #333;
-	margin: 0;
-	padding: 8px;
-	box-sizing: border-box;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-}
-
-a {
-	color: rgb(0,100,200);
-	text-decoration: none;
-}
-
-a:hover {
-	text-decoration: underline;
-}
-
-a:visited {
-	color: rgb(0,80,160);
-}
-
-label {
-	display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
 }
 
-input, button, select, textarea {
-	font-family: inherit;
-	font-size: inherit;
-	padding: 0.4em;
-	margin: 0 0 0.5em 0;
-	box-sizing: border-box;
-	border: 1px solid #ccc;
-	border-radius: 2px;
-}
-
-input:disabled {
-	color: #ccc;
-}
-
-input[type="range"] {
-	height: 0;
-}
-
-button {
-	background-color: #f4f4f4;
-	outline: none;
-}
-
-button:active {
-	background-color: #ddd;
+body {
+  margin: 0;
+  padding: 28px;
+  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
 }
-
-button:focus {
-	border-color: #666;
-}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 0596bb61ed..c5cf42de33 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,39 +1,37 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf8" />
+    <meta name="viewport" content="width=device-width" />
 
-<head>
-  <meta charset='utf8'>
-  <meta name='viewport' content='width=device-width'>
+    <title>dev panel</title>
 
-  <title>dev panel</title>
+    <link rel="stylesheet" href="./global.css" />
+    <link rel="stylesheet" href="./bundle.css" />
+  </head>
 
-  <link rel='stylesheet' href='./global.css'>
-  <link rel="stylesheet" href="./bundle.css">
-</head>
-
-<body>
-  <script src="./bundle.js"></script>
-  <script src="./bundle.events.js"></script>
-  <script>
-    const queryObj = {
-      sessionId: 'e2c7cfe8-d868-4f11-b561-5a969da26334',
-    };
-    let query = '';
-    Object.keys(queryObj).forEach(key => {
-      query += `${key}=${queryObj[key]}&`;
-    });
-    fetch(`http://192.168.17.205:9090/api/events?${query}`)
-      .then(res => res.json())
-      .then(data => {
-        // eslint-disable-next-line
-        new rrwebPlayer({
-          target: document.body,
-          data: {
-            events: data.events,
-          },
-        });
+  <body>
+    <script src="./bundle.js"></script>
+    <script src="./bundle.events.js"></script>
+    <script>
+      const queryObj = {
+        sessionId: '8874be03-bf8f-411e-862a-64ea7f950026',
+      };
+      let query = '';
+      Object.keys(queryObj).forEach(key => {
+        query += `${key}=${queryObj[key]}&`;
       });
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+      fetch(`http://192.168.17.205:9090/api/events?${query}`)
+        .then(res => res.json())
+        .then(data => {
+          // eslint-disable-next-line
+          new rrwebPlayer({
+            target: document.body,
+            data: {
+              events: data.events,
+            },
+          });
+        });
+    </script>
+  </body>
+</html>
diff --git a/src/Controller.html b/src/Controller.html
index ae172c703d..df6f5fccbe 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -4,21 +4,47 @@
     <span class="rr-timeline__time">{formatTime(currentTime)}</span>
     <div class="rr-progress">
       <div class="rr-progress__step" ref:step style="width: {percentage}"></div>
-      <div class="rr-progress__handler" ref:handler style="left: {percentage}"></div>
+      <div
+        class="rr-progress__handler"
+        ref:handler
+        style="left: {percentage}"
+      ></div>
     </div>
     <span class="rr-timeline__time">{formatTime(meta.totalTime)}</span>
   </div>
   <div class="rr-controller__btns">
     <button on:click="toggle()">
       {#if isPlaying}
-      <svg t="1541411313529" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
-        <path d="M682.65984 128q53.00224 0 90.50112 37.49888t37.49888 90.50112l0 512q0 53.00224-37.49888 90.50112t-90.50112 37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224 37.49888-90.50112t90.50112-37.49888zM341.34016 128q53.00224 0 90.50112 37.49888t37.49888 90.50112l0 512q0 53.00224-37.49888 90.50112t-90.50112 37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224 37.49888-90.50112t90.50112-37.49888zM341.34016 213.34016q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 512q0 17.67424 12.4928 30.16704t30.16704 12.4928 30.16704-12.4928 12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928zM682.65984 213.34016q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 512q0 17.67424 12.4928 30.16704t30.16704 12.4928 30.16704-12.4928 12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928z"></path>
+      <svg
+        t="1541411313529"
+        class="icon"
+        style=""
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        width="16"
+        height="16"
+      >
+        <path
+          d="M682.65984 128q53.00224 0 90.50112 37.49888t37.49888 90.50112l0 512q0 53.00224-37.49888 90.50112t-90.50112 37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224 37.49888-90.50112t90.50112-37.49888zM341.34016 128q53.00224 0 90.50112 37.49888t37.49888 90.50112l0 512q0 53.00224-37.49888 90.50112t-90.50112 37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224 37.49888-90.50112t90.50112-37.49888zM341.34016 213.34016q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 512q0 17.67424 12.4928 30.16704t30.16704 12.4928 30.16704-12.4928 12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928zM682.65984 213.34016q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 512q0 17.67424 12.4928 30.16704t30.16704 12.4928 30.16704-12.4928 12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928z"
+        ></path>
       </svg>
       {:else}
-      <svg t="1541410561137" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
-        <path d="M170.65984 896l0-768 640 384zM644.66944 512l-388.66944-233.32864 0 466.65728z"></path>
+      <svg
+        t="1541410561137"
+        class="icon"
+        style=""
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        width="16"
+        height="16"
+      >
+        <path
+          d="M170.65984 896l0-768 640 384zM644.66944 512l-388.66944-233.32864 0 466.65728z"
+        ></path>
       </svg>
       {/if}
     </button>
@@ -87,7 +113,6 @@
         } else {
           replayer.play(currentTime);
         }
-        this.loopTimer();
       },
       pause() {
         const { replayer } = this.get();
@@ -95,7 +120,6 @@
       },
       toggle() {
         const { isPlaying } = this.get();
-        this.set({ isPlaying: !isPlaying });
         if (isPlaying) {
           this.pause();
         } else {
@@ -113,6 +137,17 @@
         // auto play
         this.set({ isPlaying: true });
         this.play();
+        current.replayer.on('pause', () => {
+          this.set({ isPlaying: false });
+        });
+        current.replayer.on('resume', () => {
+          this.set({ isPlaying: true });
+        });
+      }
+      if (changed.isPlaying) {
+        if (current.isPlaying) {
+          this.loopTimer();
+        }
       }
     },
     ondestroy() {
@@ -139,7 +174,7 @@
   .rr-timeline {
     width: 80%;
     display: flex;
-    align-items: center
+    align-items: center;
   }
 
   .rr-timeline__time {
@@ -160,7 +195,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    background: #E0E1FE;
+    background: #e0e1fe;
   }
 
   .rr-progress__handler {
@@ -191,11 +226,11 @@
   }
 
   .rr-controller__btns button:active {
-    background: #E0E1FE;
+    background: #e0e1fe;
   }
 
   .rr-controller__btns button.active {
     color: #fff;
     background: rgb(73, 80, 246);
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/utils.js b/src/utils.js
index 22adf05c5f..8b47b5587a 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -25,7 +25,7 @@ export function formatTime(ms) {
   ms = ms % HOUR;
   const minute = Math.floor(ms / MINUTE);
   ms = ms % MINUTE;
-  const second = Math.floor(ms / SECOND);
+  const second = Math.round(ms / SECOND);
   if (hour) {
     return `${padZero(hour)}:${padZero(minute)}:${padZero(minute)}`;
   }

From 8f78a3bfb61f1b5ee72bab7f01a116923a99358d Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 7 Dec 2018 17:18:32 +0800
Subject: [PATCH 075/524] fix auto play

---
 package.json        |  2 +-
 src/Controller.html |  7 +++++--
 src/Player.html     | 12 ------------
 3 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index a20bf023bb..ea647f9fad 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.13.5"
   },
   "dependencies": {
-    "rrweb": "file:../rrweb"
+    "rrweb": "^0.6.5"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/src/Controller.html b/src/Controller.html
index df6f5fccbe..3d395ea65f 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -111,6 +111,7 @@
         if (currentTime > 0) {
           replayer.resume(currentTime);
         } else {
+          this.set({ isPlaying: true });
           replayer.play(currentTime);
         }
       },
@@ -135,8 +136,10 @@
     onupdate({ changed, current, previous }) {
       if (current.replayer && !previous) {
         // auto play
-        this.set({ isPlaying: true });
-        this.play();
+        setTimeout(() => {
+          this.set({ isPlaying: true });
+        }, 0);
+        current.replayer.play(0);
         current.replayer.on('pause', () => {
           this.set({ isPlaying: false });
         });
diff --git a/src/Player.html b/src/Player.html
index 0252a9ff7f..2c3e0a901d 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -64,20 +64,8 @@
     position: relative;
     background: white;
     float: left;
-    clear: both;
     border-radius: 5px;
-  }
-
-  .rr-player::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
     box-shadow: 0 24px 48px rgba(17, 16, 62, 0.12);
-    mix-blend-mode: multiply;
-    z-index: -1;
   }
 
   .rr-player__frame {

From 61e6e16d5b1ea64f3734950983cb7895f66b613c Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 10 Dec 2018 10:23:26 +0800
Subject: [PATCH 076/524] fix autoplay check

---
 src/Controller.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Controller.html b/src/Controller.html
index 3d395ea65f..b203062585 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -87,6 +87,7 @@
         function update(step) {
           let { currentTime, meta, isPlaying, speed } = self.get();
           if (!isPlaying) {
+            self.timer = null;
             return;
           }
 
@@ -100,11 +101,12 @@
           if (currentTime < meta.totalTime) {
             requestAnimationFrame(update);
           } else {
+            self.timer = null;
             self.set({ isPlaying: false, currentTime: 0 });
           }
         }
 
-        requestAnimationFrame(update);
+        this.timer = requestAnimationFrame(update);
       },
       play() {
         const { replayer, currentTime } = this.get();
@@ -148,7 +150,7 @@
         });
       }
       if (changed.isPlaying) {
-        if (current.isPlaying) {
+        if (current.isPlaying && !this.timer) {
           this.loopTimer();
         }
       }

From a792e5a1b86367f20a6f473b9dcad52813397508 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 12 Dec 2018 13:56:03 +0800
Subject: [PATCH 077/524] add release-it config file and publish to npm

---
 .release-it.json | 4 ++++
 package.json     | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 .release-it.json

diff --git a/.release-it.json b/.release-it.json
new file mode 100644
index 0000000000..1c32fadbb1
--- /dev/null
+++ b/.release-it.json
@@ -0,0 +1,4 @@
+{
+  "non-interactive": true,
+  "buildCommand": "npm run build"
+}
diff --git a/package.json b/package.json
index ea647f9fad..571ade1e94 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "devDependencies": {
     "eslint": "^5.7.0",
     "eslint-config-google": "^0.11.0",

From b0b4249c45e3b182b4ff2dc374f0cebac8530530 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 12 Dec 2018 13:56:12 +0800
Subject: [PATCH 078/524] Release 0.3.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 571ade1e94..409114c933 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "devDependencies": {
     "eslint": "^5.7.0",
     "eslint-config-google": "^0.11.0",

From b29fb5c69769b7be3d60dd9d2c10477124805f8a Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 14 Dec 2018 14:13:54 +0800
Subject: [PATCH 079/524] add events js to repo for develop usage

---
 public/events.js  |  2 ++
 public/index.html | 25 +++++++------------------
 2 files changed, 9 insertions(+), 18 deletions(-)
 create mode 100644 public/events.js

diff --git a/public/events.js b/public/events.js
new file mode 100644
index 0000000000..1ba14b5843
--- /dev/null
+++ b/public/events.js
@@ -0,0 +1,2 @@
+// prettier-ignore
+const events = [{"type":4,"data":{"href":"https://demoit.app/e/react#ReactHooks.js","width":1166,"height":705},"timestamp":1544756766750,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":2,"data":{"node":{"type":0,"childNodes":[{"type":1,"name":"html","publicId":"","systemId":"","id":2},{"type":2,"tagName":"html","attributes":{"lang":"en","class":"gr__demoit_app"},"childNodes":[{"type":2,"tagName":"head","attributes":{},"childNodes":[{"type":3,"textContent":"\n  ","id":5},{"type":2,"tagName":"meta","attributes":{"charset":"UTF-8"},"childNodes":[],"id":6},{"type":3,"textContent":"\n  ","id":7},{"type":2,"tagName":"title","attributes":{},"childNodes":[{"type":3,"textContent":"demoit","id":9}],"id":8},{"type":3,"textContent":"\n  ","id":10},{"type":2,"tagName":"link","attributes":{"_cssText":"@font-face { font-family: \"Fira Mono\"; font-style: normal; font-weight: 400; src: local(\"Fira Mono Regular\"), local(\"FiraMono-Regular\"), url('https://demoit.app/static/demoit/font/FiraMono.woff2') format(\"woff2\"); unicode-range: U+460-52F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }.CodeMirror { font-family: \"PT Mono\", monospace; height: 300px; color: black; direction: ltr; }.CodeMirror-lines { padding: 4px 0px; }.CodeMirror pre { padding: 0px 4px; }.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background-color: white; }.CodeMirror-gutters { border-right: 1px solid rgb(221, 221, 221); background-color: rgb(247, 247, 247); white-space: nowrap; }.CodeMirror-linenumber { padding: 0px 3px 0px 5px; min-width: 20px; text-align: right; color: rgb(153, 153, 153); white-space: nowrap; }.CodeMirror-guttermarker { color: black; }.CodeMirror-guttermarker-subtle { color: rgb(153, 153, 153); }.CodeMirror-cursor { border-left: 1px solid black; border-right: 0px; width: 0px; }.CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver; }.cm-fat-cursor .CodeMirror-cursor { width: auto; background: rgb(119, 238, 119); border: 0px !important; }.cm-fat-cursor div.CodeMirror-cursors { z-index: 1; }.cm-fat-cursor-mark { background-color: rgba(20, 255, 20, 0.5); animation: blink 1.06s steps(1, end) 0s infinite normal none running; }.cm-animate-fat-cursor { width: auto; border: 0px; animation: blink 1.06s steps(1, end) 0s infinite normal none running; background-color: rgb(119, 238, 119); }@-webkit-keyframes blink { \n  50% { background-color: transparent; }\n}@keyframes blink { \n  50% { background-color: transparent; }\n}.cm-tab { display: inline-block; text-decoration: inherit; }.CodeMirror-rulers { position: absolute; left: 0px; right: 0px; top: -50px; bottom: -20px; overflow: hidden; }.CodeMirror-ruler { border-left: 1px solid rgb(204, 204, 204); top: 0px; bottom: 0px; position: absolute; }.cm-s-default .cm-header { color: blue; }.cm-s-default .cm-quote { color: rgb(0, 153, 0); }.cm-negative { color: rgb(221, 68, 68); }.cm-positive { color: rgb(34, 153, 34); }.cm-header, .cm-strong { font-weight: bold; }.cm-em { font-style: italic; }.cm-link { text-decoration: underline; }.cm-strikethrough { text-decoration: line-through; }.cm-s-default .cm-keyword { color: rgb(119, 0, 136); }.cm-s-default .cm-atom { color: rgb(34, 17, 153); }.cm-s-default .cm-number { color: rgb(17, 102, 68); }.cm-s-default .cm-def { color: rgb(0, 0, 255); }.cm-s-default .cm-variable-2 { color: rgb(0, 85, 170); }.cm-s-default .cm-variable-3, .cm-s-default .cm-type { color: rgb(0, 136, 85); }.cm-s-default .cm-comment { color: rgb(170, 85, 0); }.cm-s-default .cm-string { color: rgb(170, 17, 17); }.cm-s-default .cm-string-2 { color: rgb(255, 85, 0); }.cm-s-default .cm-meta { color: rgb(85, 85, 85); }.cm-s-default .cm-qualifier { color: rgb(85, 85, 85); }.cm-s-default .cm-builtin { color: rgb(51, 0, 170); }.cm-s-default .cm-bracket { color: rgb(153, 153, 119); }.cm-s-default .cm-tag { color: rgb(17, 119, 0); }.cm-s-default .cm-attribute { color: rgb(0, 0, 204); }.cm-s-default .cm-hr { color: rgb(153, 153, 153); }.cm-s-default .cm-link { color: rgb(0, 0, 204); }.cm-s-default .cm-error { color: red; }.cm-invalidchar { color: red; }.CodeMirror-composing { border-bottom: 2px solid; }div.CodeMirror span.CodeMirror-matchingbracket { color: rgb(0, 187, 0); }div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgb(170, 34, 34); }.CodeMirror-matchingtag { background: rgba(255, 150, 0, 0.3); }.CodeMirror-activeline-background { background: rgb(232, 242, 255); }.CodeMirror { position: relative; overflow: hidden; background: white; }.CodeMirror-scroll { margin-bottom: -30px; margin-right: -30px; padding-bottom: 30px; height: 100%; outline: 0px; position: relative; overflow: scroll !important; }.CodeMirror-sizer { position: relative; border-right: 30px solid transparent; }.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { position: absolute; z-index: 6; display: none; }.CodeMirror-vscrollbar { right: 0px; top: 0px; overflow: hidden scroll; }.CodeMirror-hscrollbar { bottom: 0px; left: 0px; overflow: scroll hidden; }.CodeMirror-scrollbar-filler { right: 0px; bottom: 0px; }.CodeMirror-gutter-filler { left: 0px; bottom: 0px; }.CodeMirror-gutters { position: absolute; left: 0px; top: 0px; min-height: 100%; z-index: 3; }.CodeMirror-gutter { white-space: normal; height: 100%; display: inline-block; vertical-align: top; margin-bottom: -30px; }.CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: none !important; border: none !important; }.CodeMirror-gutter-background { position: absolute; top: 0px; bottom: 0px; z-index: 4; }.CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }.CodeMirror-gutter-wrapper ::selection { background-color: transparent; }.CodeMirror-lines { cursor: text; min-height: 1px; }.CodeMirror pre { border-radius: 0px; border-width: 0px; background: transparent; font-family: inherit; font-size: inherit; margin: 0px; white-space: pre; overflow-wrap: normal; line-height: inherit; color: inherit; z-index: 2; position: relative; overflow: visible; -webkit-tap-highlight-color: transparent; font-variant-ligatures: contextual; }.CodeMirror-wrap pre { overflow-wrap: break-word; white-space: pre-wrap; word-break: normal; }.CodeMirror-linebackground { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 0; }.CodeMirror-linewidget { position: relative; z-index: 2; padding: 0.1px; }.CodeMirror-rtl pre { direction: rtl; }.CodeMirror-code { outline: 0px; }.CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber { box-sizing: content-box; }.CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden; }.CodeMirror-cursor { position: absolute; pointer-events: none; }.CodeMirror-measure pre { position: static; }div.CodeMirror-cursors { visibility: hidden; position: relative; z-index: 3; }div.CodeMirror-dragcursors { visibility: visible; }.CodeMirror-focused div.CodeMirror-cursors { visibility: visible; }.CodeMirror-selected { background: rgb(217, 217, 217); }.CodeMirror-focused .CodeMirror-selected { background: rgb(215, 212, 240); }.CodeMirror-crosshair { cursor: crosshair; }.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: rgb(215, 212, 240); }.cm-searching { background-color: rgba(255, 255, 0, 0.4); }.cm-force-border { padding-right: 0.1px; }@media print {\n  .CodeMirror div.CodeMirror-cursors { visibility: hidden; }\n}.cm-tab-wrap-hack::after { content: \"\"; }span.CodeMirror-selectedtext { background: 0px center; }html { box-sizing: border-box; width: 100%; height: 100%; }*, ::before, ::after { box-sizing: inherit; }body { margin: 0px; padding: 0px; width: 100%; height: 100%; font-family: \"Fira Mono\", monospace; font-size: 14px; line-height: 14px; background: rgb(255, 255, 255); color: rgb(0, 0, 0); }.right { float: right; }svg { fill: currentcolor; }.centered { height: 100%; display: flex; align-items: center; justify-content: center; }.mt1 { margin-top: 1em !important; }.app { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 8000; }.app.dark { background: rgb(32, 48, 58); color: rgb(254, 254, 254); }.app .layout { height: calc(100% - 8px); transition: height 200ms ease-out 0s; }.gutter.gutter-horizontal { cursor: ew-resize; float: left; height: 100%; background: rgb(234, 234, 234); }.gutter.gutter-vertical { cursor: ns-resize; width: 100%; background: rgb(234, 234, 234); }.dark .gutter.gutter-horizontal, .dark .gutter.gutter-vertical { background: rgb(46, 65, 76); }.editor-section { vertical-align: top; height: 100%; }.CodeMirror { height: 100%; transition: opacity 300ms ease 0s; opacity: 1; }.CodeMirror-lines { padding: 1em; }.CodeMirror-selected { background-color: rgb(255, 255, 255) !important; }.output { padding: 1em; position: relative; overflow: auto; }.console { position: relative; overflow: auto; }.console p { margin: 0px; padding: 0.5em; white-space: pre-wrap; }.js-code-editor { height: 100%; width: 100%; overflow: auto; line-height: 1.3em; float: left; z-index: 90; }.status-bar { width: 100%; height: 8px; background: rgb(204, 204, 204); cursor: pointer; transition: height 200ms ease-out 0s; overflow: hidden; }.dark .status-bar { background: rgb(0, 0, 0); }.status-bar > div { display: none; }.status-bar a { display: inline-block; color: rgb(0, 0, 0); text-decoration: none; padding: 8px; cursor: pointer; }.dark .status-bar a { color: rgb(165, 165, 165); }.status-bar a:hover { color: rgb(76, 0, 0); }.dark .status-bar a:hover { color: rgb(123, 109, 109); }.status-bar a.active { font-weight: bold; }.status-bar a svg { transform: translateY(3px); }.popup { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 8100; color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.8); transition: opacity 200ms ease 0s, width 200ms ease-out 0s; opacity: 0; }.popup section { position: absolute; min-width: 600px; max-width: 90%; max-height: 90%; overflow-y: auto; padding: 1em; background: rgb(46, 46, 46); border-radius: 0.2em; box-shadow: rgb(0, 0, 0) 0px 0px 5px 3px; top: 50%; left: 50%; transform: translate(-50%, -50%); }.popup section.multiple-pages { padding: 0px; }.popup .close { background: 0px center; color: rgb(255, 255, 255); border: 0px; position: absolute; top: 0.4em; right: 0.5em; cursor: pointer; outline: 0px; }.popup .close:hover { color: rgb(153, 153, 153); background: 0px center; }.popup .multiple-pages .close { top: 4px; right: 0px; }.popup p { margin: 0px 0px 1em; padding: 0px; line-height: 1.2em; }.popup h1 { padding: 0px; margin: 1em 0px; }.popup h2 { padding: 0px; margin: 0px 0px 1em; }.popup button { padding: 0.6em 1em; background: 0px center; cursor: pointer; border-radius: 4px; border: 2px solid rgb(82, 82, 82); color: rgb(255, 255, 255); outline: 0px; display: inline-block; text-transform: uppercase; font-weight: bold; }.popup button:hover { background: rgb(49, 49, 49); }.popup .right { float: right; }.popup .secondary span { display: inline-block; transform: translateY(-5px); margin-left: 7px; }.popup hr { margin: 1em 0px; border-color: rgb(49, 49, 49); }.popup input, .popup textarea { width: 100%; border: 1px solid rgb(82, 82, 82); padding: 0.6em; display: block; border-radius: 4px; outline: 0px; margin-bottom: 1em; }.popup textarea { height: 162px; }.popup a { color: inherit; }.popup a:hover { text-decoration: none; }.popup .sub-nav { list-style: none; margin: 0px; padding: 0px; background: rgb(64, 64, 64); }.popup .sub-nav li { display: inline-block; margin: 0px; padding: 0px; background: rgb(64, 64, 64); }.popup .sub-nav li a { display: block; text-decoration: none; padding: 1em; text-transform: uppercase; border-right: 1px solid rgb(14, 14, 14); }.popup .sub-nav li a:hover { color: rgb(153, 153, 153); }.popup .sub-nav li.active { background: rgb(46, 46, 46); }.popup .content { padding: 1em; }@keyframes bubble { \n  0% { transform: scale(0.5); }\n  50% { transform: scale(1.2); }\n  100% { transform: scale(0.5); }\n}.spinner { width: 20px; height: 20px; background: rgb(0, 0, 0); border-radius: 10px; animation: bubble 1s ease 0s infinite normal none running; }.cm-s-light.CodeMirror { background: rgb(255, 255, 255); color: rgb(36, 41, 46); }.cm-s-light .CodeMirror-gutters { background: rgb(255, 255, 255); border-right-width: 0px; }.cm-s-light .CodeMirror-guttermarker { color: white; }.cm-s-light .CodeMirror-guttermarker-subtle { color: rgb(208, 208, 208); }.cm-s-light .CodeMirror-linenumber { color: rgb(149, 157, 165); padding: 0px 16px; }.cm-s-light .CodeMirror-cursor { border-left: 1px solid rgb(36, 41, 46); }.cm-s-light .CodeMirror-activeline-background { background: rgb(250, 251, 252); }.cm-s-light .CodeMirror-matchingbracket { text-decoration: underline; color: rgb(36, 41, 46) !important; }.cm-s-light .CodeMirror-lines { font-family: inherit; font-size: inherit; background: rgb(255, 255, 255); line-height: 1.5; }.cm-s-light .cm-comment { color: rgb(106, 115, 125); }.cm-s-light .cm-constant { color: rgb(0, 92, 197); }.cm-s-light .cm-entity { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(111, 66, 193); }.cm-s-light .cm-keyword { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(215, 58, 73); }.cm-s-light .cm-storage { color: rgb(215, 58, 73); }.cm-s-light .cm-string { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(3, 148, 30); }.cm-s-light .cm-support { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(0, 92, 197); }.cm-s-light .cm-variable { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(227, 98, 9); }.cm-s-light .cm-tag { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(13, 110, 171); }.cm-s-light .cm-string-2 { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(3, 148, 30); }.CodeMirror-selectedtext { color: rgb(0, 0, 0) !important; background: rgb(209, 216, 224) !important; }.cm-s-dark.CodeMirror { background: rgb(32, 48, 58); color: rgb(243, 243, 243); }.cm-s-dark .CodeMirror-gutters { background: rgb(32, 48, 58); border-right-width: 0px; }.cm-s-dark .CodeMirror-guttermarker { color: black; }.cm-s-dark .CodeMirror-guttermarker-subtle { color: rgb(208, 208, 208); }.cm-s-dark .CodeMirror-linenumber { color: rgb(149, 157, 165); padding: 0px 16px; }.cm-s-dark .CodeMirror-cursor { border-left: 1px solid rgb(243, 243, 243); }.cm-s-dark .CodeMirror-activeline-background { background: rgb(58, 58, 58); }.cm-s-dark .CodeMirror-matchingbracket { text-decoration: underline; color: rgb(255, 255, 255) !important; }.cm-s-dark .CodeMirror-lines { font-family: inherit; font-size: inherit; background: rgb(32, 48, 58); line-height: 1.5; }.cm-s-dark .cm-comment { color: rgb(106, 115, 125); }.cm-s-dark .cm-constant { color: rgb(0, 92, 197); }.cm-s-dark .cm-entity { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(111, 66, 193); }.cm-s-dark .cm-keyword { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(178, 194, 226); }.cm-s-dark .cm-storage { color: rgb(178, 194, 226); }.cm-s-dark .cm-string { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(142, 175, 134); }.cm-s-dark .cm-support { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(0, 92, 197); }.cm-s-dark .cm-variable { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(222, 183, 156); }.cm-s-dark .cm-def { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(222, 183, 156); }.cm-s-dark .cm-tag { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(175, 191, 230); }.cm-s-dark .cm-string-2 { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(142, 175, 134); }.CodeMirror-selectedtext { color: rgb(0, 0, 0) !important; background: rgb(209, 216, 224) !important; }"},"childNodes":[],"id":11},{"type":3,"textContent":"\n  ","id":12},{"type":2,"tagName":"link","attributes":{"rel":"shortcut icon","type":"image/png","href":"https://demoit.app/e/img/demoit_64x64.png"},"childNodes":[],"id":13},{"type":3,"textContent":"\n  ","id":14},{"type":2,"tagName":"meta","attributes":{"name":"viewport","content":"user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"},"childNodes":[],"id":15},{"type":3,"textContent":"\n","id":16}],"id":4},{"type":3,"textContent":"\n","id":17},{"type":2,"tagName":"body","attributes":{"data-gr-c-s-loaded":"true"},"childNodes":[{"type":3,"textContent":"\n  ","id":19},{"type":2,"tagName":"script","attributes":{"type":"text/template","id":"template-output"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":21}],"id":20},{"type":3,"textContent":"\n\n  ","id":22},{"type":2,"tagName":"script","attributes":{"type":"text/template","id":"template-console"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":24}],"id":23},{"type":3,"textContent":"\n\n  ","id":25},{"type":2,"tagName":"script","attributes":{"type":"text/template","id":"template-editor"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":27}],"id":26},{"type":3,"textContent":"\n\n  ","id":28},{"type":2,"tagName":"script","attributes":{"type":"text/template","id":"template-code-preview"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":30}],"id":29},{"type":3,"textContent":"\n\n  ","id":31},{"type":2,"tagName":"div","attributes":{"class":"app light"},"childNodes":[{"type":3,"textContent":"\n    ","id":33},{"type":2,"tagName":"div","attributes":{"class":"status-bar","style":"height: 36px;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"data-export":"buttons","style":"display: block;"},"childNodes":[{"type":2,"tagName":"a","attributes":{"data-export":"file","href":"javascript:void(0);","class":"active"},"childNodes":[{"type":3,"textContent":"ReactHooks.js","id":37}],"id":36},{"type":2,"tagName":"a","attributes":{"data-export":"newFileButton","href":"javascript:void(0)"},"childNodes":[{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[{"type":2,"tagName":"path","attributes":{"d":"M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"},"childNodes":[],"isSVG":true,"id":40}],"isSVG":true,"id":39}],"id":38},{"type":2,"tagName":"a","attributes":{"data-export":"closeButton","class":"right","href":"javascript:void(0)"},"childNodes":[{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[{"type":2,"tagName":"path","attributes":{"d":"M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"},"childNodes":[],"isSVG":true,"id":43}],"isSVG":true,"id":42}],"id":41},{"type":2,"tagName":"a","attributes":{"data-export":"settingsButton","class":"right","href":"javascript:void(0)"},"childNodes":[{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[{"type":2,"tagName":"path","attributes":{"d":"M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"},"childNodes":[],"isSVG":true,"id":46}],"isSVG":true,"id":45}],"id":44}],"id":35}],"id":34},{"type":3,"textContent":"\n    ","id":47},{"type":2,"tagName":"div","attributes":{"class":"layout","style":"height: calc(100% - 36px); filter: none;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"editor-section editor","style":"height: calc(70% - 1px);"},"childNodes":[{"type":3,"textContent":"\n      ","id":50},{"type":2,"tagName":"div","attributes":{"class":"js-code-editor"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"CodeMirror cm-s-light CodeMirror-focused"},"childNodes":[{"type":2,"tagName":"div","attributes":{"style":"overflow: hidden; position: relative; width: 3px; height: 0px; top: 140px; left: 363px;"},"childNodes":[{"type":2,"tagName":"textarea","attributes":{"autocorrect":"off","autocapitalize":"off","spellcheck":"false","style":"position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;","tabindex":"0"},"childNodes":[],"id":54}],"id":53},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-vscrollbar","tabindex":"-1","cm-not-content":"true","style":"bottom: 0px; display: block;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"style":"min-width: 1px; height: 679px;"},"childNodes":[],"id":56}],"id":55},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-hscrollbar","tabindex":"-1","cm-not-content":"true"},"childNodes":[{"type":2,"tagName":"div","attributes":{"style":"height: 100%; min-height: 1px; width: 0px;"},"childNodes":[],"id":58}],"id":57},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-scrollbar-filler","cm-not-content":"true"},"childNodes":[],"id":59},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-gutter-filler","cm-not-content":"true"},"childNodes":[],"id":60},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-scroll","tabindex":"-1"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-sizer","style":"margin-left: 0px; margin-bottom: -15px; border-right-width: 15px; min-height: 679px; min-width: 773.828px; padding-right: 15px; padding-bottom: 0px;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"style":"position: relative; top: 0px;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-lines","role":"presentation"},"childNodes":[{"type":2,"tagName":"div","attributes":{"role":"presentation","style":"position: relative; outline: none;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-measure"},"childNodes":[],"id":66},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-measure"},"childNodes":[],"id":67},{"type":2,"tagName":"div","attributes":{"style":"position: relative; z-index: 1;"},"childNodes":[],"id":68},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-cursors","style":"visibility: hidden;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-cursor","style":"left: 349px; top: 273px; height: 21px;"},"childNodes":[{"type":3,"textContent":" ","id":71}],"id":70}],"id":69},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-code","role":"presentation","style":""},"childNodes":[{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"const","id":76}],"id":75},{"type":3,"textContent":" ","id":77},{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[{"type":3,"textContent":"base","id":79}],"id":78},{"type":3,"textContent":" ","id":80},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"=","id":82}],"id":81},{"type":3,"textContent":" ","id":83},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"Date","id":85}],"id":84},{"type":3,"textContent":".","id":86},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"now","id":88}],"id":87},{"type":3,"textContent":"()","id":89}],"id":74}],"id":73},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"cm-text":""},"childNodes":[{"type":3,"textContent":"​","id":93}],"id":92}],"id":91}],"id":90},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"class","id":97}],"id":96},{"type":3,"textContent":" ","id":98},{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[{"type":3,"textContent":"App","id":100}],"id":99},{"type":3,"textContent":" ","id":101},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"extends","id":103}],"id":102},{"type":3,"textContent":" ","id":104},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"React","id":106}],"id":105},{"type":3,"textContent":".","id":107},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"Component","id":109}],"id":108},{"type":3,"textContent":" {","id":110}],"id":95}],"id":94},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  ","id":113},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"constructor","id":115}],"id":114},{"type":3,"textContent":"(","id":116},{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[{"type":3,"textContent":"props","id":118}],"id":117},{"type":3,"textContent":") {","id":119}],"id":112}],"id":111},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"    ","id":122},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"super","id":124}],"id":123},{"type":3,"textContent":"(","id":125},{"type":2,"tagName":"span","attributes":{"class":"cm-variable-2"},"childNodes":[{"type":3,"textContent":"props","id":127}],"id":126},{"type":3,"textContent":");","id":128}],"id":121}],"id":120},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"    ","id":131},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"this","id":133}],"id":132},{"type":3,"textContent":".","id":134},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"state","id":136}],"id":135},{"type":3,"textContent":" ","id":137},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"=","id":139}],"id":138},{"type":3,"textContent":" {","id":140}],"id":130}],"id":129},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"      ","id":143},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"count","id":145}],"id":144},{"type":3,"textContent":": ","id":146},{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[{"type":3,"textContent":"0","id":148}],"id":147},{"type":3,"textContent":",","id":149}],"id":142}],"id":141},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"      ","id":152},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"time","id":154}],"id":153},{"type":3,"textContent":": ","id":155},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"base","id":157}],"id":156},{"type":3,"textContent":",","id":158}],"id":151}],"id":150},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"    };","id":161}],"id":160}],"id":159},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  }","id":164}],"id":163}],"id":162},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  ","id":167}],"id":166}],"id":165},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  ","id":170},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"componentDidMount","id":172}],"id":171},{"type":3,"textContent":"() {","id":173}],"id":169}],"id":168},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"    ","id":176},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"setInterval","id":178}],"id":177},{"type":3,"textContent":"(() ","id":179},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"=>","id":181}],"id":180},{"type":3,"textContent":" {","id":182}],"id":175}],"id":174},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"      ","id":185},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"this","id":187}],"id":186},{"type":3,"textContent":".","id":188},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"setState","id":190}],"id":189},{"type":3,"textContent":"({ ","id":191},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"time","id":193}],"id":192},{"type":3,"textContent":": ","id":194},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"Date","id":196}],"id":195},{"type":3,"textContent":".","id":197},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"now","id":199}],"id":198},{"type":3,"textContent":"() })","id":200}],"id":184}],"id":183},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"    }, ","id":203},{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[{"type":3,"textContent":"1000","id":205}],"id":204},{"type":3,"textContent":");","id":206}],"id":202}],"id":201},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  }","id":209}],"id":208}],"id":207},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  ","id":212}],"id":211}],"id":210},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  ","id":215},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"render","id":217}],"id":216},{"type":3,"textContent":"() {","id":218}],"id":214}],"id":213},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"    ","id":221},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"const","id":223}],"id":222},{"type":3,"textContent":" { ","id":224},{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[{"type":3,"textContent":"count","id":226}],"id":225},{"type":3,"textContent":", ","id":227},{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[{"type":3,"textContent":"time","id":229}],"id":228},{"type":3,"textContent":" } ","id":230},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"=","id":232}],"id":231},{"type":3,"textContent":" ","id":233},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"this","id":235}],"id":234},{"type":3,"textContent":".","id":236},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"state","id":238}],"id":237},{"type":3,"textContent":";","id":239}],"id":220}],"id":219},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  ","id":242},{"type":2,"tagName":"span","attributes":{"class":"cm-tab","role":"presentation","cm-text":"\t"},"childNodes":[{"type":3,"textContent":"  ","id":244}],"id":243},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"return","id":246}],"id":245},{"type":3,"textContent":" (","id":247}],"id":241}],"id":240},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"    ","id":250},{"type":2,"tagName":"span","attributes":{"class":"cm-tab","role":"presentation","cm-text":"\t"},"childNodes":[{"type":3,"textContent":"  ","id":252}],"id":251},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"<","id":254}],"id":253},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"section","id":256}],"id":255},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":258}],"id":257}],"id":249}],"id":248},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"        ","id":261},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"<","id":263}],"id":262},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"div","id":265}],"id":264},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":267}],"id":266},{"type":3,"textContent":"Time {","id":268},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"Math","id":270}],"id":269},{"type":3,"textContent":".","id":271},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"round","id":273}],"id":272},{"type":3,"textContent":"((","id":274},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"time","id":276}],"id":275},{"type":3,"textContent":" ","id":277},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"-","id":279}],"id":278},{"type":3,"textContent":" ","id":280},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"base","id":282}],"id":281},{"type":3,"textContent":") ","id":283},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"/","id":285}],"id":284},{"type":3,"textContent":" ","id":286},{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[{"type":3,"textContent":"1000","id":288}],"id":287},{"type":3,"textContent":")}","id":289},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"</","id":291}],"id":290},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"div","id":293}],"id":292},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":295}],"id":294}],"id":260}],"id":259},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"        ","id":298},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"<","id":300}],"id":299},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"div","id":302}],"id":301},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":304}],"id":303},{"type":3,"textContent":"Counter {","id":305},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"count","id":307}],"id":306},{"type":3,"textContent":"}","id":308},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"</","id":310}],"id":309},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"div","id":312}],"id":311},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":314}],"id":313}],"id":297}],"id":296},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"        ","id":317},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"<","id":319}],"id":318},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"button","id":321}],"id":320},{"type":3,"textContent":" ","id":322},{"type":2,"tagName":"span","attributes":{"class":"cm-attribute"},"childNodes":[{"type":3,"textContent":"onClick","id":324}],"id":323},{"type":3,"textContent":"={() ","id":325},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"=>","id":327}],"id":326},{"type":3,"textContent":" ","id":328},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"this","id":330}],"id":329},{"type":3,"textContent":".","id":331},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"setState","id":333}],"id":332},{"type":3,"textContent":"({ ","id":334},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"count","id":336}],"id":335},{"type":3,"textContent":": ","id":337},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"count","id":339}],"id":338},{"type":3,"textContent":" ","id":340},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"+","id":342}],"id":341},{"type":3,"textContent":" ","id":343},{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[{"type":3,"textContent":"1","id":345}],"id":344},{"type":3,"textContent":" })}","id":346},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":348}],"id":347},{"type":3,"textContent":"click to count","id":349},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"</","id":351}],"id":350},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"button","id":353}],"id":352},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":355}],"id":354}],"id":316}],"id":315},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"      ","id":358},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"</","id":360}],"id":359},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"section","id":362}],"id":361},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":364}],"id":363}],"id":357}],"id":356},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"    )","id":367}],"id":366}],"id":365},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  }","id":370}],"id":369}],"id":368},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"}","id":373}],"id":372}],"id":371},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"cm-text":""},"childNodes":[{"type":3,"textContent":"​","id":377}],"id":376}],"id":375}],"id":374},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"ReactDOM","id":381}],"id":380},{"type":3,"textContent":".","id":382},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"render","id":384}],"id":383},{"type":3,"textContent":"(","id":385},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"<","id":387}],"id":386},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"App","id":389}],"id":388},{"type":3,"textContent":" ","id":390},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"/>","id":392}],"id":391},{"type":3,"textContent":", ","id":393},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"document","id":395}],"id":394},{"type":3,"textContent":".","id":396},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"querySelector","id":398}],"id":397},{"type":3,"textContent":"(","id":399},{"type":2,"tagName":"span","attributes":{"class":"cm-string"},"childNodes":[{"type":3,"textContent":"'.output'","id":401}],"id":400},{"type":3,"textContent":"));","id":402}],"id":379}],"id":378},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"cm-text":""},"childNodes":[{"type":3,"textContent":"​","id":406}],"id":405}],"id":404}],"id":403}],"id":72}],"id":65}],"id":64}],"id":63}],"id":62},{"type":2,"tagName":"div","attributes":{"style":"position: absolute; height: 15px; width: 1px; border-bottom: 0px solid transparent; top: 679px;"},"childNodes":[],"id":407},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-gutters","style":"display: none; height: 694px;"},"childNodes":[],"id":408}],"id":61}],"id":52}],"id":51},{"type":3,"textContent":"\n    ","id":409}],"id":49},{"type":2,"tagName":"div","attributes":{"class":"gutter gutter-vertical","style":"height: 2px;"},"childNodes":[],"id":410},{"type":2,"tagName":"div","attributes":{"class":"editor-section","style":"height: calc(30% - 1px);"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"editor-section output","id":"output","style":"float: left; width: calc(50% - 1px);"},"childNodes":[{"type":2,"tagName":"section","attributes":{},"childNodes":[{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"Time ","id":415},{"type":3,"textContent":"0","id":416}],"id":414},{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"Counter ","id":418},{"type":3,"textContent":"0","id":419}],"id":417},{"type":2,"tagName":"button","attributes":{},"childNodes":[{"type":3,"textContent":"click to count","id":421}],"id":420}],"id":413}],"id":412},{"type":2,"tagName":"div","attributes":{"class":"gutter gutter-horizontal","style":"width: 2px;"},"childNodes":[],"id":422},{"type":2,"tagName":"div","attributes":{"class":"editor-section console","style":"float: left; width: calc(50% - 1px);"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"centered"},"childNodes":[{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"console.log(...)","id":426}],"id":425}],"id":424}],"id":423}],"id":411}],"id":48},{"type":3,"textContent":"\n  ","id":427}],"id":32},{"type":3,"textContent":"\n\n  ","id":428},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":430}],"id":429},{"type":3,"textContent":"\n  ","id":431},{"type":2,"tagName":"script","attributes":{"src":"https://demoit.app/static/demoit/demoit.js"},"childNodes":[],"id":432},{"type":2,"tagName":"script","attributes":{"src":"https://demoit.app/e/resources/editor.js"},"childNodes":[],"id":433},{"type":3,"textContent":"\n\n\n","id":434},{"type":2,"tagName":"script","attributes":{"src":"https://demoit.app/e/resources/react-16.7.0-alpha.0.js"},"childNodes":[],"id":435},{"type":2,"tagName":"script","attributes":{"src":"https://demoit.app/e/resources/react-dom.16.7.0-alpha.0.js"},"childNodes":[],"id":436}],"id":18}],"id":3}],"id":1},"initialOffset":{"left":0,"top":0}},"timestamp":1544756766761,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756767101,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":1158,"y":93,"id":55,"timeOffset":-1}]},"timestamp":1544756767119,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"1"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756767141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":1019,"y":171,"id":174,"timeOffset":-469},{"x":934,"y":230,"id":207,"timeOffset":-435},{"x":921,"y":239,"id":210,"timeOffset":-403},{"x":926,"y":238,"id":207,"timeOffset":-377}]},"timestamp":1544756767620,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756767631,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":918,"y":241,"id":210,"timeOffset":-280},{"x":896,"y":248,"id":210,"timeOffset":-255},{"x":848,"y":257,"id":210,"timeOffset":-223},{"x":806,"y":260,"id":213,"timeOffset":-190},{"x":764,"y":264,"id":213,"timeOffset":-156},{"x":757,"y":268,"id":213,"timeOffset":-122}]},"timestamp":1544756768122,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"2"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756768141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756768161,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":1,"id":213,"x":757,"y":268},"timestamp":1544756768297,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":53,"attributes":{"style":"overflow: hidden; position: relative; width: 3px; height: 0px; top: 224px; left: 119px;"}}],"removes":[{"parentId":69,"id":70}],"adds":[{"parentId":69,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-cursor","style":"left: 105px; top: 357px; height: 21px;"},"childNodes":[],"id":437}},{"parentId":437,"previousId":null,"nextId":null,"node":{"type":3,"textContent":" ","id":438}}]},"timestamp":1544756768304,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":0,"id":213,"x":757,"y":268},"timestamp":1544756768475,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":2,"id":213,"x":757,"y":268},"timestamp":1544756768475,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756768830,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"3"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756769142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756769361,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756769890,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"4"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756770142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756770420,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756770951,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"5"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756771141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756771480,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756772010,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"6"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756772141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756772540,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756773070,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"7"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756773142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756773601,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756774131,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"8"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756774141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756774660,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"9"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756775142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756775190,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756775720,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"10"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756776142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756776250,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756776781,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"11"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756777141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756777311,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756777841,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"12"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756778142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756778371,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756778900,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"13"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756779141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756779430,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756779960,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"14"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756780141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756780490,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756781020,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"15"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756781140,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756781550,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756782081,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"16"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756782142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756782610,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"17"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756783141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756783142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756783670,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"18"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756784142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756784200,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756784730,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"19"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756785141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756785260,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756785791,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"20"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756786141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756786321,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756786851,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"21"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756787142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756787380,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756787911,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"22"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756788141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756788440,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756788970,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"23"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756789142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756789500,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756790031,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"24"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756790142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756790561,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756791090,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"25"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756791141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756791621,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"26"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756792142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756792151,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756792680,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"27"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756793142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756793211,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756793740,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"28"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756794141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756794270,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756794800,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"29"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756795141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756795331,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756795860,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"30"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756796142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756796390,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756796921,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"31"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756797142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756797450,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756797980,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"32"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756798142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756798510,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756799041,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"33"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756799142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756799570,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756800100,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"34"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756800142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756800631,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"35"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756801142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756801161,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756801691,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"36"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756802142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756802221,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756802750,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"37"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756803142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756803280,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756803810,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"38"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756804142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756804340,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756804871,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"39"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756805141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756805400,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756805930,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"40"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756806142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756806460,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756806990,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"41"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756807142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756807520,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756808051,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"42"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756808142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756808580,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756809110,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"43"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756809142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756809640,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"44"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756810141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756810170,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756810701,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"45"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756811141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":750,"y":268,"id":213,"timeOffset":0}]},"timestamp":1544756811187,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756811230,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":720,"y":274,"id":213,"timeOffset":-472},{"x":682,"y":281,"id":219,"timeOffset":-438},{"x":621,"y":284,"id":219,"timeOffset":-405},{"x":576,"y":288,"id":219,"timeOffset":-371},{"x":529,"y":305,"id":240,"timeOffset":-338},{"x":506,"y":327,"id":248,"timeOffset":-305},{"x":492,"y":345,"id":259,"timeOffset":-271},{"x":490,"y":356,"id":292,"timeOffset":-238},{"x":501,"y":374,"id":296,"timeOffset":-205}]},"timestamp":1544756811689,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756811760,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"46"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756812141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":505,"y":396,"id":338,"timeOffset":-337},{"x":505,"y":427,"id":356,"timeOffset":-306},{"x":511,"y":453,"id":368,"timeOffset":-273},{"x":520,"y":491,"id":374,"timeOffset":-240},{"x":526,"y":513,"id":412,"timeOffset":-205},{"x":536,"y":548,"id":413,"timeOffset":-173},{"x":540,"y":575,"id":412,"timeOffset":-139},{"x":539,"y":592,"id":412,"timeOffset":-107},{"x":536,"y":596,"id":412,"timeOffset":-73},{"x":533,"y":600,"id":412,"timeOffset":-38},{"x":527,"y":607,"id":412,"timeOffset":-6}]},"timestamp":1544756812190,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756812290,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":522,"y":612,"id":412,"timeOffset":-474},{"x":517,"y":618,"id":412,"timeOffset":-441},{"x":516,"y":618,"id":412,"timeOffset":-346}]},"timestamp":1544756812691,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756812821,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"47"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756813142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":507,"y":610,"id":412,"timeOffset":-131},{"x":487,"y":594,"id":412,"timeOffset":-107},{"x":440,"y":546,"id":417,"timeOffset":-74},{"x":412,"y":519,"id":414,"timeOffset":-40},{"x":394,"y":492,"id":374,"timeOffset":-7}]},"timestamp":1544756813191,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756813350,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":1,"id":368,"x":387,"y":463},"timestamp":1544756813496,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":53,"attributes":{"style":"overflow: hidden; position: relative; width: 3px; height: 0px; top: 413px; left: 43px;"}},{"id":69,"attributes":{"style":""}}],"removes":[{"parentId":69,"id":437}],"adds":[{"parentId":69,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-cursor","style":"left: 29px; top: 546px; height: 21px;"},"childNodes":[],"id":439}},{"parentId":439,"previousId":null,"nextId":null,"node":{"type":3,"textContent":" ","id":440}}]},"timestamp":1544756813505,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":0,"id":368,"x":387,"y":463},"timestamp":1544756813674,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":2,"id":368,"x":387,"y":463},"timestamp":1544756813674,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":390,"y":475,"id":371,"timeOffset":-474}]},"timestamp":1544756813691,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756814033,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"48"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756814141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756814562,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":55,"x":0,"y":120},"timestamp":1544756814684,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":61,"x":0,"y":0},"timestamp":1544756814785,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756815093,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"49"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756815142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":55,"x":0,"y":9},"timestamp":1544756815340,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":61,"x":0,"y":163},"timestamp":1544756815441,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":55,"x":0,"y":212},"timestamp":1544756815541,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756815623,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"50"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756816142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756816153,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756816683,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"51"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756817142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756817213,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756817743,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"52"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756818141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756818274,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":384,"y":449,"id":397,"timeOffset":0}]},"timestamp":1544756818391,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":55,"x":0,"y":166},"timestamp":1544756818797,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756818804,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":379,"y":407,"id":371,"timeOffset":-476},{"x":375,"y":322,"id":315,"timeOffset":-443},{"x":379,"y":294,"id":260,"timeOffset":-410}]},"timestamp":1544756818891,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":61,"x":0,"y":7},"timestamp":1544756818897,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":55,"x":0,"y":0},"timestamp":1544756818998,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"53"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756819142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":55,"x":0,"y":19},"timestamp":1544756819298,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756819333,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":61,"x":0,"y":212},"timestamp":1544756819398,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756819863,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"54"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756820142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756820393,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756820923,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"55"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756821141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756821454,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756821983,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"56"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756822141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756822513,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756823043,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"57"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756823142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756823573,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756824103,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"58"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756824141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756824633,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"59"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756825141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756825163,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756825693,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"60"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756826142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756826223,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756826753,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"61"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756827142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756827283,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756827813,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"62"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756828142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756828343,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756828873,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"63"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756829141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756829403,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756829932,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"64"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756830142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756830463,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756830993,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"65"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756831144,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756831522,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756832054,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"66"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756832142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756832583,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756833114,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"67"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756833142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756833643,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"68"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756834141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756834173,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756834703,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"69"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756835142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756835233,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756835763,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"70"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756836142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756836293,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":364,"y":238,"id":240,"timeOffset":0}]},"timestamp":1544756836504,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756836823,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":339,"y":167,"id":207,"timeOffset":-478},{"x":289,"y":47,"id":162,"timeOffset":-445},{"x":255,"y":11,"id":35,"timeOffset":-412},{"x":243,"y":24,"id":35,"timeOffset":-379},{"x":235,"y":45,"id":162,"timeOffset":-346},{"x":229,"y":52,"id":165,"timeOffset":-312},{"x":226,"y":53,"id":165,"timeOffset":-279},{"x":217,"y":56,"id":165,"timeOffset":-245},{"x":189,"y":60,"id":165,"timeOffset":-212},{"x":159,"y":56,"id":165,"timeOffset":-179},{"x":127,"y":41,"id":162,"timeOffset":-145},{"x":102,"y":25,"id":36,"timeOffset":-112},{"x":102,"y":24,"id":36,"timeOffset":-38},{"x":103,"y":24,"id":36,"timeOffset":-9}]},"timestamp":1544756837004,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"71"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756837142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756837353,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":103,"y":23,"id":36,"timeOffset":-470},{"x":104,"y":23,"id":36,"timeOffset":-413},{"x":104,"y":23,"id":36,"timeOffset":-379},{"x":104,"y":23,"id":36,"timeOffset":-345},{"x":105,"y":23,"id":36,"timeOffset":-306}]},"timestamp":1544756837504,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":1,"id":36,"x":105,"y":23},"timestamp":1544756837538,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":6,"id":54},"timestamp":1544756837539,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":52,"attributes":{"class":"CodeMirror cm-s-light"}}],"removes":[],"adds":[]},"timestamp":1544756837540,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":5,"id":36},"timestamp":1544756837542,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":0,"id":36,"x":105,"y":23},"timestamp":1544756837716,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":2,"id":36,"x":105,"y":23},"timestamp":1544756837716,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":6,"id":36},"timestamp":1544756837717,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":441,"attributes":{"style":"display: block;"}}],"removes":[{"parentId":34,"id":35},{"parentId":412,"id":413}],"adds":[{"parentId":34,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"data-export":"buttons","style":"display: block;"},"childNodes":[],"id":441}},{"parentId":441,"previousId":null,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"file","href":"javascript:void(0);","class":"active"},"childNodes":[],"id":442}},{"parentId":442,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"ReactHooks.js","id":443}},{"parentId":441,"previousId":442,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"newFileButton","href":"javascript:void(0)"},"childNodes":[],"id":444}},{"parentId":444,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":445}},{"parentId":445,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"},"childNodes":[],"isSVG":true,"id":446}},{"parentId":441,"previousId":444,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"closeButton","class":"right","href":"javascript:void(0)"},"childNodes":[],"id":447}},{"parentId":447,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":448}},{"parentId":448,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"},"childNodes":[],"isSVG":true,"id":449}},{"parentId":441,"previousId":447,"nextId":null,"node":{"type":2,"tagName":"a","attributes":{"data-export":"settingsButton","class":"right","href":"javascript:void(0)"},"childNodes":[],"id":450}},{"parentId":450,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":451}},{"parentId":451,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"},"childNodes":[],"isSVG":true,"id":452}},{"parentId":412,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"centered"},"childNodes":[],"id":453}},{"parentId":453,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"<div id=\"output\" />","id":454}}]},"timestamp":1544756837723,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":5,"id":54},"timestamp":1544756837758,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":72,"attributes":{"style":""}},{"id":53,"attributes":{"style":"overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 18px;"}},{"id":62,"attributes":{"style":"margin-left: 0px; margin-bottom: -15px; border-right-width: 15px; min-height: 679px; min-width: 773.828px; padding-right: 15px; padding-bottom: 0px;"}},{"id":408,"attributes":{"style":"display: none; height: 694px;"}},{"id":52,"attributes":{"class":"CodeMirror cm-s-light CodeMirror-focused"}},{"id":69,"attributes":{"style":""}},{"id":791,"attributes":{"style":"display: block;"}}],"removes":[{"parentId":423,"id":424},{"parentId":34,"id":441},{"parentId":72,"id":73},{"parentId":72,"id":90},{"parentId":72,"id":94},{"parentId":72,"id":111},{"parentId":72,"id":120},{"parentId":72,"id":129},{"parentId":72,"id":141},{"parentId":72,"id":150},{"parentId":72,"id":159},{"parentId":72,"id":162},{"parentId":72,"id":165},{"parentId":72,"id":168},{"parentId":72,"id":174},{"parentId":72,"id":183},{"parentId":72,"id":201},{"parentId":72,"id":207},{"parentId":72,"id":210},{"parentId":72,"id":213},{"parentId":72,"id":219},{"parentId":72,"id":240},{"parentId":72,"id":248},{"parentId":72,"id":259},{"parentId":72,"id":296},{"parentId":72,"id":315},{"parentId":72,"id":356},{"parentId":72,"id":365},{"parentId":72,"id":368},{"parentId":72,"id":371},{"parentId":72,"id":374},{"parentId":72,"id":378},{"parentId":72,"id":403},{"parentId":69,"id":439},{"parentId":412,"id":453}],"adds":[{"parentId":72,"previousId":null,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":455}},{"parentId":455,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":456}},{"parentId":456,"previousId":null,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":457}},{"parentId":457,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"const","id":458}},{"parentId":456,"previousId":457,"nextId":-1,"node":{"type":3,"textContent":" ","id":459}},{"parentId":456,"previousId":459,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[],"id":460}},{"parentId":460,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"base","id":461}},{"parentId":456,"previousId":460,"nextId":-1,"node":{"type":3,"textContent":" ","id":462}},{"parentId":456,"previousId":462,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[],"id":463}},{"parentId":463,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"=","id":464}},{"parentId":456,"previousId":463,"nextId":-1,"node":{"type":3,"textContent":" ","id":465}},{"parentId":456,"previousId":465,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":466}},{"parentId":466,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"Date","id":467}},{"parentId":456,"previousId":466,"nextId":-1,"node":{"type":3,"textContent":".","id":468}},{"parentId":456,"previousId":468,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":469}},{"parentId":469,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"now","id":470}},{"parentId":456,"previousId":469,"nextId":null,"node":{"type":3,"textContent":"()","id":471}},{"parentId":72,"previousId":455,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":472}},{"parentId":472,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":473}},{"parentId":473,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"cm-text":""},"childNodes":[],"id":474}},{"parentId":474,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"​","id":475}},{"parentId":72,"previousId":472,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":476}},{"parentId":476,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":477}},{"parentId":477,"previousId":null,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":478}},{"parentId":478,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"class","id":479}},{"parentId":477,"previousId":478,"nextId":-1,"node":{"type":3,"textContent":" ","id":480}},{"parentId":477,"previousId":480,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[],"id":481}},{"parentId":481,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"App","id":482}},{"parentId":477,"previousId":481,"nextId":-1,"node":{"type":3,"textContent":" ","id":483}},{"parentId":477,"previousId":483,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":484}},{"parentId":484,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"extends","id":485}},{"parentId":477,"previousId":484,"nextId":-1,"node":{"type":3,"textContent":" ","id":486}},{"parentId":477,"previousId":486,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":487}},{"parentId":487,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"React","id":488}},{"parentId":477,"previousId":487,"nextId":-1,"node":{"type":3,"textContent":".","id":489}},{"parentId":477,"previousId":489,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":490}},{"parentId":490,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"Component","id":491}},{"parentId":477,"previousId":490,"nextId":null,"node":{"type":3,"textContent":" {","id":492}},{"parentId":72,"previousId":476,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":493}},{"parentId":493,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":494}},{"parentId":494,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"  ","id":495}},{"parentId":494,"previousId":495,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":496}},{"parentId":496,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"constructor","id":497}},{"parentId":494,"previousId":496,"nextId":-1,"node":{"type":3,"textContent":"(","id":498}},{"parentId":494,"previousId":498,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[],"id":499}},{"parentId":499,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"props","id":500}},{"parentId":494,"previousId":499,"nextId":null,"node":{"type":3,"textContent":") {","id":501}},{"parentId":72,"previousId":493,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":502}},{"parentId":502,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":503}},{"parentId":503,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"    ","id":504}},{"parentId":503,"previousId":504,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":505}},{"parentId":505,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"super","id":506}},{"parentId":503,"previousId":505,"nextId":-1,"node":{"type":3,"textContent":"(","id":507}},{"parentId":503,"previousId":507,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable-2"},"childNodes":[],"id":508}},{"parentId":508,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"props","id":509}},{"parentId":503,"previousId":508,"nextId":null,"node":{"type":3,"textContent":");","id":510}},{"parentId":72,"previousId":502,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":511}},{"parentId":511,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":512}},{"parentId":512,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"    ","id":513}},{"parentId":512,"previousId":513,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":514}},{"parentId":514,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"this","id":515}},{"parentId":512,"previousId":514,"nextId":-1,"node":{"type":3,"textContent":".","id":516}},{"parentId":512,"previousId":516,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":517}},{"parentId":517,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"state","id":518}},{"parentId":512,"previousId":517,"nextId":-1,"node":{"type":3,"textContent":" ","id":519}},{"parentId":512,"previousId":519,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[],"id":520}},{"parentId":520,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"=","id":521}},{"parentId":512,"previousId":520,"nextId":null,"node":{"type":3,"textContent":" {","id":522}},{"parentId":72,"previousId":511,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":523}},{"parentId":523,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":524}},{"parentId":524,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"      ","id":525}},{"parentId":524,"previousId":525,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":526}},{"parentId":526,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"count","id":527}},{"parentId":524,"previousId":526,"nextId":-1,"node":{"type":3,"textContent":": ","id":528}},{"parentId":524,"previousId":528,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[],"id":529}},{"parentId":529,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"0","id":530}},{"parentId":524,"previousId":529,"nextId":null,"node":{"type":3,"textContent":",","id":531}},{"parentId":72,"previousId":523,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":532}},{"parentId":532,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":533}},{"parentId":533,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"      ","id":534}},{"parentId":533,"previousId":534,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":535}},{"parentId":535,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"time","id":536}},{"parentId":533,"previousId":535,"nextId":-1,"node":{"type":3,"textContent":": ","id":537}},{"parentId":533,"previousId":537,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":538}},{"parentId":538,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"base","id":539}},{"parentId":533,"previousId":538,"nextId":null,"node":{"type":3,"textContent":",","id":540}},{"parentId":72,"previousId":532,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":541}},{"parentId":541,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":542}},{"parentId":542,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"    };","id":543}},{"parentId":72,"previousId":541,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":544}},{"parentId":544,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":545}},{"parentId":545,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"  }","id":546}},{"parentId":72,"previousId":544,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":547}},{"parentId":547,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":548}},{"parentId":548,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"  ","id":549}},{"parentId":72,"previousId":547,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":550}},{"parentId":550,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":551}},{"parentId":551,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"  ","id":552}},{"parentId":551,"previousId":552,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":553}},{"parentId":553,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"componentDidMount","id":554}},{"parentId":551,"previousId":553,"nextId":null,"node":{"type":3,"textContent":"() {","id":555}},{"parentId":72,"previousId":550,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":556}},{"parentId":556,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":557}},{"parentId":557,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"    ","id":558}},{"parentId":557,"previousId":558,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":559}},{"parentId":559,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"setInterval","id":560}},{"parentId":557,"previousId":559,"nextId":-1,"node":{"type":3,"textContent":"(() ","id":561}},{"parentId":557,"previousId":561,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[],"id":562}},{"parentId":562,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"=>","id":563}},{"parentId":557,"previousId":562,"nextId":null,"node":{"type":3,"textContent":" {","id":564}},{"parentId":72,"previousId":556,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":565}},{"parentId":565,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":566}},{"parentId":566,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"      ","id":567}},{"parentId":566,"previousId":567,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":568}},{"parentId":568,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"this","id":569}},{"parentId":566,"previousId":568,"nextId":-1,"node":{"type":3,"textContent":".","id":570}},{"parentId":566,"previousId":570,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":571}},{"parentId":571,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"setState","id":572}},{"parentId":566,"previousId":571,"nextId":-1,"node":{"type":3,"textContent":"({ ","id":573}},{"parentId":566,"previousId":573,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":574}},{"parentId":574,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"time","id":575}},{"parentId":566,"previousId":574,"nextId":-1,"node":{"type":3,"textContent":": ","id":576}},{"parentId":566,"previousId":576,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":577}},{"parentId":577,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"Date","id":578}},{"parentId":566,"previousId":577,"nextId":-1,"node":{"type":3,"textContent":".","id":579}},{"parentId":566,"previousId":579,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":580}},{"parentId":580,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"now","id":581}},{"parentId":566,"previousId":580,"nextId":null,"node":{"type":3,"textContent":"() })","id":582}},{"parentId":72,"previousId":565,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":583}},{"parentId":583,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":584}},{"parentId":584,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"    }, ","id":585}},{"parentId":584,"previousId":585,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[],"id":586}},{"parentId":586,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"1000","id":587}},{"parentId":584,"previousId":586,"nextId":null,"node":{"type":3,"textContent":");","id":588}},{"parentId":72,"previousId":583,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":589}},{"parentId":589,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":590}},{"parentId":590,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"  }","id":591}},{"parentId":72,"previousId":589,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":592}},{"parentId":592,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":593}},{"parentId":593,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"  ","id":594}},{"parentId":72,"previousId":592,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":595}},{"parentId":595,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":596}},{"parentId":596,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"  ","id":597}},{"parentId":596,"previousId":597,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":598}},{"parentId":598,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"render","id":599}},{"parentId":596,"previousId":598,"nextId":null,"node":{"type":3,"textContent":"() {","id":600}},{"parentId":72,"previousId":595,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":601}},{"parentId":601,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":602}},{"parentId":602,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"    ","id":603}},{"parentId":602,"previousId":603,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":604}},{"parentId":604,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"const","id":605}},{"parentId":602,"previousId":604,"nextId":-1,"node":{"type":3,"textContent":" { ","id":606}},{"parentId":602,"previousId":606,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[],"id":607}},{"parentId":607,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"count","id":608}},{"parentId":602,"previousId":607,"nextId":-1,"node":{"type":3,"textContent":", ","id":609}},{"parentId":602,"previousId":609,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[],"id":610}},{"parentId":610,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"time","id":611}},{"parentId":602,"previousId":610,"nextId":-1,"node":{"type":3,"textContent":" } ","id":612}},{"parentId":602,"previousId":612,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[],"id":613}},{"parentId":613,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"=","id":614}},{"parentId":602,"previousId":613,"nextId":-1,"node":{"type":3,"textContent":" ","id":615}},{"parentId":602,"previousId":615,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":616}},{"parentId":616,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"this","id":617}},{"parentId":602,"previousId":616,"nextId":-1,"node":{"type":3,"textContent":".","id":618}},{"parentId":602,"previousId":618,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":619}},{"parentId":619,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"state","id":620}},{"parentId":602,"previousId":619,"nextId":null,"node":{"type":3,"textContent":";","id":621}},{"parentId":72,"previousId":601,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":622}},{"parentId":622,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":623}},{"parentId":623,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"  ","id":624}},{"parentId":623,"previousId":624,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tab","role":"presentation","cm-text":"\t"},"childNodes":[],"id":625}},{"parentId":625,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"  ","id":626}},{"parentId":623,"previousId":625,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":627}},{"parentId":627,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"return","id":628}},{"parentId":623,"previousId":627,"nextId":null,"node":{"type":3,"textContent":" (","id":629}},{"parentId":72,"previousId":622,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":630}},{"parentId":630,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":631}},{"parentId":631,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"    ","id":632}},{"parentId":631,"previousId":632,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tab","role":"presentation","cm-text":"\t"},"childNodes":[],"id":633}},{"parentId":633,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"  ","id":634}},{"parentId":631,"previousId":633,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":635}},{"parentId":635,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"<","id":636}},{"parentId":631,"previousId":635,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":637}},{"parentId":637,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"section","id":638}},{"parentId":631,"previousId":637,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":639}},{"parentId":639,"previousId":null,"nextId":null,"node":{"type":3,"textContent":">","id":640}},{"parentId":72,"previousId":630,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":641}},{"parentId":641,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":642}},{"parentId":642,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"        ","id":643}},{"parentId":642,"previousId":643,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":644}},{"parentId":644,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"<","id":645}},{"parentId":642,"previousId":644,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":646}},{"parentId":646,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"div","id":647}},{"parentId":642,"previousId":646,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":648}},{"parentId":648,"previousId":null,"nextId":null,"node":{"type":3,"textContent":">","id":649}},{"parentId":642,"previousId":648,"nextId":-1,"node":{"type":3,"textContent":"Time {","id":650}},{"parentId":642,"previousId":650,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":651}},{"parentId":651,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"Math","id":652}},{"parentId":642,"previousId":651,"nextId":-1,"node":{"type":3,"textContent":".","id":653}},{"parentId":642,"previousId":653,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":654}},{"parentId":654,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"round","id":655}},{"parentId":642,"previousId":654,"nextId":-1,"node":{"type":3,"textContent":"((","id":656}},{"parentId":642,"previousId":656,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":657}},{"parentId":657,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"time","id":658}},{"parentId":642,"previousId":657,"nextId":-1,"node":{"type":3,"textContent":" ","id":659}},{"parentId":642,"previousId":659,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[],"id":660}},{"parentId":660,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"-","id":661}},{"parentId":642,"previousId":660,"nextId":-1,"node":{"type":3,"textContent":" ","id":662}},{"parentId":642,"previousId":662,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":663}},{"parentId":663,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"base","id":664}},{"parentId":642,"previousId":663,"nextId":-1,"node":{"type":3,"textContent":") ","id":665}},{"parentId":642,"previousId":665,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[],"id":666}},{"parentId":666,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"/","id":667}},{"parentId":642,"previousId":666,"nextId":-1,"node":{"type":3,"textContent":" ","id":668}},{"parentId":642,"previousId":668,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[],"id":669}},{"parentId":669,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"1000","id":670}},{"parentId":642,"previousId":669,"nextId":-1,"node":{"type":3,"textContent":")}","id":671}},{"parentId":642,"previousId":671,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":672}},{"parentId":672,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"</","id":673}},{"parentId":642,"previousId":672,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":674}},{"parentId":674,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"div","id":675}},{"parentId":642,"previousId":674,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":676}},{"parentId":676,"previousId":null,"nextId":null,"node":{"type":3,"textContent":">","id":677}},{"parentId":72,"previousId":641,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":678}},{"parentId":678,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":679}},{"parentId":679,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"        ","id":680}},{"parentId":679,"previousId":680,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":681}},{"parentId":681,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"<","id":682}},{"parentId":679,"previousId":681,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":683}},{"parentId":683,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"div","id":684}},{"parentId":679,"previousId":683,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":685}},{"parentId":685,"previousId":null,"nextId":null,"node":{"type":3,"textContent":">","id":686}},{"parentId":679,"previousId":685,"nextId":-1,"node":{"type":3,"textContent":"Counter {","id":687}},{"parentId":679,"previousId":687,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":688}},{"parentId":688,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"count","id":689}},{"parentId":679,"previousId":688,"nextId":-1,"node":{"type":3,"textContent":"}","id":690}},{"parentId":679,"previousId":690,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":691}},{"parentId":691,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"</","id":692}},{"parentId":679,"previousId":691,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":693}},{"parentId":693,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"div","id":694}},{"parentId":679,"previousId":693,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":695}},{"parentId":695,"previousId":null,"nextId":null,"node":{"type":3,"textContent":">","id":696}},{"parentId":72,"previousId":678,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":697}},{"parentId":697,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":698}},{"parentId":698,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"        ","id":699}},{"parentId":698,"previousId":699,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":700}},{"parentId":700,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"<","id":701}},{"parentId":698,"previousId":700,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":702}},{"parentId":702,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"button","id":703}},{"parentId":698,"previousId":702,"nextId":-1,"node":{"type":3,"textContent":" ","id":704}},{"parentId":698,"previousId":704,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-attribute"},"childNodes":[],"id":705}},{"parentId":705,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"onClick","id":706}},{"parentId":698,"previousId":705,"nextId":-1,"node":{"type":3,"textContent":"={() ","id":707}},{"parentId":698,"previousId":707,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[],"id":708}},{"parentId":708,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"=>","id":709}},{"parentId":698,"previousId":708,"nextId":-1,"node":{"type":3,"textContent":" ","id":710}},{"parentId":698,"previousId":710,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":711}},{"parentId":711,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"this","id":712}},{"parentId":698,"previousId":711,"nextId":-1,"node":{"type":3,"textContent":".","id":713}},{"parentId":698,"previousId":713,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":714}},{"parentId":714,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"setState","id":715}},{"parentId":698,"previousId":714,"nextId":-1,"node":{"type":3,"textContent":"({ ","id":716}},{"parentId":698,"previousId":716,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":717}},{"parentId":717,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"count","id":718}},{"parentId":698,"previousId":717,"nextId":-1,"node":{"type":3,"textContent":": ","id":719}},{"parentId":698,"previousId":719,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":720}},{"parentId":720,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"count","id":721}},{"parentId":698,"previousId":720,"nextId":-1,"node":{"type":3,"textContent":" ","id":722}},{"parentId":698,"previousId":722,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[],"id":723}},{"parentId":723,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"+","id":724}},{"parentId":698,"previousId":723,"nextId":-1,"node":{"type":3,"textContent":" ","id":725}},{"parentId":698,"previousId":725,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[],"id":726}},{"parentId":726,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"1","id":727}},{"parentId":698,"previousId":726,"nextId":-1,"node":{"type":3,"textContent":" })}","id":728}},{"parentId":698,"previousId":728,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":729}},{"parentId":729,"previousId":null,"nextId":null,"node":{"type":3,"textContent":">","id":730}},{"parentId":698,"previousId":729,"nextId":-1,"node":{"type":3,"textContent":"click to count","id":731}},{"parentId":698,"previousId":731,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":732}},{"parentId":732,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"</","id":733}},{"parentId":698,"previousId":732,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":734}},{"parentId":734,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"button","id":735}},{"parentId":698,"previousId":734,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":736}},{"parentId":736,"previousId":null,"nextId":null,"node":{"type":3,"textContent":">","id":737}},{"parentId":72,"previousId":697,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":738}},{"parentId":738,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":739}},{"parentId":739,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"      ","id":740}},{"parentId":739,"previousId":740,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":741}},{"parentId":741,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"</","id":742}},{"parentId":739,"previousId":741,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":743}},{"parentId":743,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"section","id":744}},{"parentId":739,"previousId":743,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":745}},{"parentId":745,"previousId":null,"nextId":null,"node":{"type":3,"textContent":">","id":746}},{"parentId":72,"previousId":738,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":747}},{"parentId":747,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":748}},{"parentId":748,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"    )","id":749}},{"parentId":72,"previousId":747,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":750}},{"parentId":750,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":751}},{"parentId":751,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"  }","id":752}},{"parentId":72,"previousId":750,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":753}},{"parentId":753,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":754}},{"parentId":754,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"}","id":755}},{"parentId":72,"previousId":753,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":756}},{"parentId":756,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":757}},{"parentId":757,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"cm-text":""},"childNodes":[],"id":758}},{"parentId":758,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"​","id":759}},{"parentId":72,"previousId":756,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":760}},{"parentId":760,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":761}},{"parentId":761,"previousId":null,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":762}},{"parentId":762,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"ReactDOM","id":763}},{"parentId":761,"previousId":762,"nextId":-1,"node":{"type":3,"textContent":".","id":764}},{"parentId":761,"previousId":764,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":765}},{"parentId":765,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"render","id":766}},{"parentId":761,"previousId":765,"nextId":-1,"node":{"type":3,"textContent":"(","id":767}},{"parentId":761,"previousId":767,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":768}},{"parentId":768,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"<","id":769}},{"parentId":761,"previousId":768,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":770}},{"parentId":770,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"App","id":771}},{"parentId":761,"previousId":770,"nextId":-1,"node":{"type":3,"textContent":" ","id":772}},{"parentId":761,"previousId":772,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":773}},{"parentId":773,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"/>","id":774}},{"parentId":761,"previousId":773,"nextId":-1,"node":{"type":3,"textContent":", ","id":775}},{"parentId":761,"previousId":775,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":776}},{"parentId":776,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"document","id":777}},{"parentId":761,"previousId":776,"nextId":-1,"node":{"type":3,"textContent":".","id":778}},{"parentId":761,"previousId":778,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":779}},{"parentId":779,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"querySelector","id":780}},{"parentId":761,"previousId":779,"nextId":-1,"node":{"type":3,"textContent":"(","id":781}},{"parentId":761,"previousId":781,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-string"},"childNodes":[],"id":782}},{"parentId":782,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"'.output'","id":783}},{"parentId":761,"previousId":782,"nextId":null,"node":{"type":3,"textContent":"));","id":784}},{"parentId":72,"previousId":760,"nextId":null,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":785}},{"parentId":785,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":786}},{"parentId":786,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"cm-text":""},"childNodes":[],"id":787}},{"parentId":787,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"​","id":788}},{"parentId":69,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-cursor","style":"left: 4px; top: 0px; height: 21px;"},"childNodes":[],"id":789}},{"parentId":789,"previousId":null,"nextId":null,"node":{"type":3,"textContent":" ","id":790}},{"parentId":34,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"data-export":"buttons","style":"display: block;"},"childNodes":[],"id":791}},{"parentId":791,"previousId":null,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"file","href":"javascript:void(0);","class":"active"},"childNodes":[],"id":792}},{"parentId":792,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"ReactHooks.js","id":793}},{"parentId":791,"previousId":792,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"newFileButton","href":"javascript:void(0)"},"childNodes":[],"id":794}},{"parentId":794,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":795}},{"parentId":795,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"},"childNodes":[],"isSVG":true,"id":796}},{"parentId":791,"previousId":794,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"closeButton","class":"right","href":"javascript:void(0)"},"childNodes":[],"id":797}},{"parentId":797,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":798}},{"parentId":798,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"},"childNodes":[],"isSVG":true,"id":799}},{"parentId":791,"previousId":797,"nextId":null,"node":{"type":2,"tagName":"a","attributes":{"data-export":"settingsButton","class":"right","href":"javascript:void(0)"},"childNodes":[],"id":800}},{"parentId":800,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":801}},{"parentId":801,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"},"childNodes":[],"isSVG":true,"id":802}},{"parentId":423,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"centered"},"childNodes":[],"id":803}},{"parentId":803,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"spinner"},"childNodes":[],"id":804}},{"parentId":412,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"centered"},"childNodes":[],"id":805}},{"parentId":805,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"spinner"},"childNodes":[],"id":806}}]},"timestamp":1544756837770,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":819,"attributes":{"style":"display: block;"}}],"removes":[{"parentId":423,"id":803},{"parentId":412,"id":805},{"parentId":34,"id":791}],"adds":[{"parentId":423,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"centered"},"childNodes":[],"id":807}},{"parentId":807,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{},"childNodes":[],"id":808}},{"parentId":808,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"console.log(...)","id":809}},{"parentId":412,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"section","attributes":{},"childNodes":[],"id":810}},{"parentId":810,"previousId":null,"nextId":-1,"node":{"type":2,"tagName":"div","attributes":{},"childNodes":[],"id":811}},{"parentId":811,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"Time ","id":812}},{"parentId":811,"previousId":812,"nextId":null,"node":{"type":3,"textContent":"0","id":813}},{"parentId":810,"previousId":811,"nextId":-1,"node":{"type":2,"tagName":"div","attributes":{},"childNodes":[],"id":814}},{"parentId":814,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"Counter ","id":815}},{"parentId":814,"previousId":815,"nextId":null,"node":{"type":3,"textContent":"0","id":816}},{"parentId":810,"previousId":814,"nextId":null,"node":{"type":2,"tagName":"button","attributes":{},"childNodes":[],"id":817}},{"parentId":817,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"click to count","id":818}},{"parentId":34,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"data-export":"buttons","style":"display: block;"},"childNodes":[],"id":819}},{"parentId":819,"previousId":null,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"file","href":"javascript:void(0);","class":"active"},"childNodes":[],"id":820}},{"parentId":820,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"ReactHooks.js","id":821}},{"parentId":819,"previousId":820,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"newFileButton","href":"javascript:void(0)"},"childNodes":[],"id":822}},{"parentId":822,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":823}},{"parentId":823,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"},"childNodes":[],"isSVG":true,"id":824}},{"parentId":819,"previousId":822,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"closeButton","class":"right","href":"javascript:void(0)"},"childNodes":[],"id":825}},{"parentId":825,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":826}},{"parentId":826,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"},"childNodes":[],"isSVG":true,"id":827}},{"parentId":819,"previousId":825,"nextId":null,"node":{"type":2,"tagName":"a","attributes":{"data-export":"settingsButton","class":"right","href":"javascript:void(0)"},"childNodes":[],"id":828}},{"parentId":828,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":829}},{"parentId":829,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"},"childNodes":[],"isSVG":true,"id":830}}]},"timestamp":1544756837829,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":55,"x":0,"y":0},"timestamp":1544756837834,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":61,"x":0,"y":0},"timestamp":1544756837934,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756838290,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756838819,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"1"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756838830,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":106,"y":25,"id":820,"timeOffset":0}]},"timestamp":1544756838898,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756839350,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":114,"y":35,"id":34,"timeOffset":-475},{"x":130,"y":64,"id":466,"timeOffset":-441},{"x":151,"y":108,"id":484,"timeOffset":-408},{"x":221,"y":209,"id":532,"timeOffset":-375},{"x":294,"y":278,"id":547,"timeOffset":-341},{"x":368,"y":329,"id":565,"timeOffset":-308},{"x":391,"y":336,"id":565,"timeOffset":-48},{"x":439,"y":337,"id":565,"timeOffset":-24}]},"timestamp":1544756839399,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"2"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756839830,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756839879,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":585,"y":325,"id":565,"timeOffset":-491},{"x":729,"y":308,"id":556,"timeOffset":-459},{"x":830,"y":304,"id":556,"timeOffset":-425},{"x":888,"y":308,"id":556,"timeOffset":-391},{"x":896,"y":308,"id":556,"timeOffset":-17}]},"timestamp":1544756839899,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":918,"y":309,"id":556,"timeOffset":-493},{"x":959,"y":310,"id":556,"timeOffset":-459},{"x":990,"y":311,"id":556,"timeOffset":-426},{"x":1032,"y":315,"id":556,"timeOffset":-393},{"x":1060,"y":323,"id":565,"timeOffset":-359},{"x":1101,"y":344,"id":583,"timeOffset":-326},{"x":1132,"y":363,"id":583,"timeOffset":-293},{"x":1154,"y":373,"id":55,"timeOffset":-259}]},"timestamp":1544756840400,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756840410,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":6,"id":54},"timestamp":1544756840500,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":52,"attributes":{"class":"CodeMirror cm-s-light"}}],"removes":[],"adds":[]},"timestamp":1544756840501,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"3"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756840830,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"4"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756841830,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"5"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756842830,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"6"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756843831,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"7"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756844831,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"8"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756845831,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"9"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756846830,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"10"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756847830,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"}]
diff --git a/public/index.html b/public/index.html
index c5cf42de33..857cd29789 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,26 +12,15 @@
 
   <body>
     <script src="./bundle.js"></script>
-    <script src="./bundle.events.js"></script>
+    <script src="./events.js"></script>
     <script>
-      const queryObj = {
-        sessionId: '8874be03-bf8f-411e-862a-64ea7f950026',
-      };
-      let query = '';
-      Object.keys(queryObj).forEach(key => {
-        query += `${key}=${queryObj[key]}&`;
+      // eslint-disable-next-line
+      new rrwebPlayer({
+        target: document.body,
+        data: {
+          events,
+        },
       });
-      fetch(`http://192.168.17.205:9090/api/events?${query}`)
-        .then(res => res.json())
-        .then(data => {
-          // eslint-disable-next-line
-          new rrwebPlayer({
-            target: document.body,
-            data: {
-              events: data.events,
-            },
-          });
-        });
     </script>
   </body>
 </html>

From 2fdef75c6cb37011eba70ba6475c8d2ffb4273ae Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 14 Dec 2018 14:14:31 +0800
Subject: [PATCH 080/524] update rrweb and impl click progress to play at any
 time offset

---
 package.json        |  2 +-
 src/Controller.html | 20 +++++++++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 409114c933..7f027146fc 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.13.5"
   },
   "dependencies": {
-    "rrweb": "^0.6.5"
+    "rrweb": "^0.6.7"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/src/Controller.html b/src/Controller.html
index b203062585..a1ba84545a 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -2,7 +2,7 @@
 <div class="rr-controller">
   <div class="rr-timeline">
     <span class="rr-timeline__time">{formatTime(currentTime)}</span>
-    <div class="rr-progress">
+    <div class="rr-progress" ref:progress on:click="handleProgressClick(event)">
       <div class="rr-progress__step" ref:step style="width: {percentage}"></div>
       <div
         class="rr-progress__handler"
@@ -134,6 +134,23 @@
         replayer.setConfig({ speed });
         this.set({ speed });
       },
+      handleProgressClick(event) {
+        const progressRect = this.refs.progress.getBoundingClientRect();
+        const x = event.clientX - progressRect.left;
+        let percent = x / progressRect.width;
+        if (percent < 0) {
+          percent = 0;
+        } else if (percent > 1) {
+          percent = 1;
+        }
+        const { meta, replayer, isPlaying } = this.get();
+        const timeOffset = meta.totalTime * percent;
+        this.set({ currentTime: timeOffset });
+        replayer.play(timeOffset);
+        if (!isPlaying) {
+          replayer.pause();
+        }
+      },
     },
     onupdate({ changed, current, previous }) {
       if (current.replayer && !previous) {
@@ -193,6 +210,7 @@
     background: #eee;
     position: relative;
     border-radius: 3px;
+    cursor: pointer;
   }
 
   .rr-progress__step {

From 3dd58f1994fd7d2ad7abe353472dec8d90af1dba Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 14 Dec 2018 14:14:43 +0800
Subject: [PATCH 081/524] Release 0.3.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7f027146fc..18161173e1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "devDependencies": {
     "eslint": "^5.7.0",
     "eslint-config-google": "^0.11.0",

From 422aac3df1529e5b853b719f291ba04837a02a33 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 21 Dec 2018 18:30:13 +0800
Subject: [PATCH 082/524] update rrweb dependency

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 18161173e1..3420acbf72 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.13.5"
   },
   "dependencies": {
-    "rrweb": "^0.6.7"
+    "rrweb": "^0.6.8"
   },
   "scripts": {
     "build": "rollup -c",

From 5d65dcf6009dfdd22484be51692634d8dbf94a1a Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 21 Dec 2018 18:30:22 +0800
Subject: [PATCH 083/524] Release 0.3.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3420acbf72..53155da064 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "devDependencies": {
     "eslint": "^5.7.0",
     "eslint-config-google": "^0.11.0",

From 6a910d3eaa1c3d5cb4d3ffd84523b6f323551084 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 21 Dec 2018 22:32:01 +0800
Subject: [PATCH 084/524] close before open to make sure document was closed

---
 src/rebuild.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 563e7867af..56337eb27a 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -112,6 +112,8 @@ export function buildNodeWithSN(
   }
   // use target document as root document
   if (n.type === NodeType.Document) {
+    // close before open to make sure document was closed
+    doc.close();
     doc.open();
     node = doc;
   }

From e0b56e5de0f076ae3dc0bd9706b888ddf1d48226 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 21 Dec 2018 22:32:07 +0800
Subject: [PATCH 085/524] Release 0.6.11

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bbee5165da..4ab061dfb0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.6.10",
+  "version": "0.6.11",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 0200447533769e23c3ff2403535be9ab22413888 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 21 Dec 2018 22:35:19 +0800
Subject: [PATCH 086/524] update dependencies

---
 package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 53155da064..53e7672045 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "rrweb-player",
   "version": "0.3.3",
   "devDependencies": {
-    "eslint": "^5.7.0",
+    "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",
     "eslint-plugin-html": "^4.0.6",
     "npm-run-all": "^4.1.3",
@@ -10,13 +10,13 @@
     "rollup-plugin-commonjs": "^9.1.8",
     "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-plugin-postcss": "^1.6.3",
-    "rollup-plugin-svelte": "^4.3.1",
+    "rollup-plugin-svelte": "^4.5.0",
     "rollup-plugin-terser": "^3.0.0",
     "sirv-cli": "^0.2.2",
-    "svelte": "^2.13.5"
+    "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.6.8"
+    "rrweb": "^0.6.9"
   },
   "scripts": {
     "build": "rollup -c",

From d655f35a4c550f166837a4be02941a8804b08225 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 21 Dec 2018 22:35:26 +0800
Subject: [PATCH 087/524] Release 0.3.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 53e7672045..d192d22f7c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From 02cb046b725a07789fbb4950853990569229c282 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 25 Dec 2018 16:52:03 +0800
Subject: [PATCH 088/524] update rrweb

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d192d22f7c..e3f27726fe 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.6.9"
+    "rrweb": "^0.6.11"
   },
   "scripts": {
     "build": "rollup -c",

From d8b8d2d5316866d1a3e4ff51f3f3d910cf46946f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 25 Dec 2018 16:52:10 +0800
Subject: [PATCH 089/524] Release 0.3.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e3f27726fe..3c44026f67 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From 922be70f545b839c26edc41e6d76f5ad3d4e5bd2 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 27 Dec 2018 12:44:52 +0800
Subject: [PATCH 090/524] do not add origin before data uri image

---
 src/snapshot.ts       | 4 ++++
 test/snapshot.test.ts | 6 ++++++
 2 files changed, 10 insertions(+)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index cf05834592..cc470957cb 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -44,11 +44,15 @@ function extractOrigin(url: string): string {
 
 const URL_IN_CSS_REF = /url\((['"]|)([^'"]*)\1\)/gm;
 const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/;
+const DATA_URI = /^(data:)([\w\/\+]+);(charset=[\w-]+|base64).*,(.*)/gi;
 export function absoluteToStylesheet(cssText: string, href: string): string {
   return cssText.replace(URL_IN_CSS_REF, (_1, _2, filePath) => {
     if (!RELATIVE_PATH.test(filePath)) {
       return `url('${filePath}')`;
     }
+    if (DATA_URI.test(filePath)) {
+      return `url(${filePath})`;
+    }
     if (filePath[0] === '/') {
       return `url('${extractOrigin(href) + filePath}')`;
     }
diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts
index 125428970e..106779e9d0 100644
--- a/test/snapshot.test.ts
+++ b/test/snapshot.test.ts
@@ -46,4 +46,10 @@ describe('absolute url to stylesheet', () => {
       `url('http://localhost/css/a.jpg')`,
     );
   });
+
+  it('can handle data url image', () => {
+    expect(
+      absoluteToStylesheet('url(data:image/gif;base64,ABC)', href),
+    ).to.equal('url(data:image/gif;base64,ABC)');
+  });
 });

From 9854e5cf3193d44f85ed59ff4fd59429dab31e19 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 27 Dec 2018 12:49:19 +0800
Subject: [PATCH 091/524] add camel case svg element tag names to tag map

---
 src/rebuild.ts | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 56337eb27a..6896b7b4c5 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -9,6 +9,43 @@ import {
 
 const tagMap: tagMap = {
   script: 'noscript',
+  // camel case svg element tag names
+  altglyph: 'altGlyph',
+  altglyphdef: 'altGlyphDef',
+  altglyphitem: 'altGlyphItem',
+  animatecolor: 'animateColor',
+  animatemotion: 'animateMotion',
+  animatetransform: 'animateTransform',
+  clippath: 'clipPath',
+  feblend: 'feBlend',
+  fecolormatrix: 'feColorMatrix',
+  fecomponenttransfer: 'feComponentTransfer',
+  fecomposite: 'feComposite',
+  feconvolvematrix: 'feConvolveMatrix',
+  fediffuselighting: 'feDiffuseLighting',
+  fedisplacementmap: 'feDisplacementMap',
+  fedistantlight: 'feDistantLight',
+  fedropshadow: 'feDropShadow',
+  feflood: 'feFlood',
+  fefunca: 'feFuncA',
+  fefuncb: 'feFuncB',
+  fefuncg: 'feFuncG',
+  fefuncr: 'feFuncR',
+  fegaussianblur: 'feGaussianBlur',
+  feimage: 'feImage',
+  femerge: 'feMerge',
+  femergenode: 'feMergeNode',
+  femorphology: 'feMorphology',
+  feoffset: 'feOffset',
+  fepointlight: 'fePointLight',
+  fespecularlighting: 'feSpecularLighting',
+  fespotlight: 'feSpotLight',
+  fetile: 'feTile',
+  feturbulence: 'feTurbulence',
+  foreignobject: 'foreignObject',
+  glyphref: 'glyphRef',
+  lineargradient: 'linearGradient',
+  radialgradient: 'radialGradient',
 };
 function getTagName(n: elementNode): string {
   let tagName = tagMap[n.tagName] ? tagMap[n.tagName] : n.tagName;

From f11aa15105a3d7c3f82fc3b29e0c441f28cfbfbd Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 27 Dec 2018 12:54:42 +0800
Subject: [PATCH 092/524] Release 0.7.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4ab061dfb0..9ef0fcfc39 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.6.11",
+  "version": "0.7.0",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From e5cb062995950c7a74ac6b361b63398f2cd90ee7 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 27 Dec 2018 13:10:03 +0800
Subject: [PATCH 093/524] add skip inactive switch and use rrweb timer to
 display current time

---
 package.json               |  2 +-
 src/Controller.html        | 56 ++++++++++++++++++++-------
 src/Player.html            |  1 +
 src/components/Switch.html | 77 ++++++++++++++++++++++++++++++++++++++
 src/utils.js               |  2 +-
 5 files changed, 123 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Switch.html

diff --git a/package.json b/package.json
index 3c44026f67..aa0163383d 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.6.11"
+    "rrweb": "^0.7.0"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/src/Controller.html b/src/Controller.html
index a1ba84545a..84db820c22 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -49,8 +49,15 @@
       {/if}
     </button>
     {#each [1, 2, 4, 8] as s}
-    <button class:active="s === speed" on:click="setSpeed(s)">{s}x</button>
+    <button
+      class:active="s === speed && !isSkipping"
+      on:click="setSpeed(s)"
+      disabled="{isSkipping}"
+    >
+      {s}x
+    </button>
     {/each}
+    <Switch id="skip" bind:checked="skipInactive" disabled="{isSkipping}" label="skip inactive" />
   </div>
 </div>
 {/if}
@@ -59,10 +66,15 @@
   import { formatTime } from './utils.js';
 
   export default {
+    components: {
+      Switch: './components/Switch.html',
+    },
     data() {
       return {
         currentTime: 0,
         isPlaying: false,
+        isSkipping: false,
+        skipInactive: true,
         speed: 1,
       };
     },
@@ -80,29 +92,23 @@
     },
     methods: {
       loopTimer() {
-        const now = performance.now();
-        let lastStep = now;
         const self = this;
 
-        function update(step) {
-          let { currentTime, meta, isPlaying, speed } = self.get();
+        function update() {
+          const { meta, isPlaying, replayer } = self.get();
           if (!isPlaying) {
             self.timer = null;
             return;
           }
 
-          const stepDiff = Math.floor(step - lastStep);
-          lastStep = step;
-          currentTime += speed * stepDiff;
+          const currentTime =
+            replayer.timer.timeOffset + replayer.getTimeOffset();
           self.set({
-            currentTime: Math.min(currentTime, meta.totalTime),
+            currentTime,
           });
 
           if (currentTime < meta.totalTime) {
             requestAnimationFrame(update);
-          } else {
-            self.timer = null;
-            self.set({ isPlaying: false, currentTime: 0 });
           }
         }
 
@@ -130,9 +136,11 @@
         }
       },
       setSpeed(speed) {
-        const { replayer } = this.get();
+        const { replayer, currentTime } = this.get();
+        replayer.pause();
         replayer.setConfig({ speed });
         this.set({ speed });
+        replayer.resume(currentTime);
       },
       handleProgressClick(event) {
         const progressRect = this.refs.progress.getBoundingClientRect();
@@ -165,12 +173,27 @@
         current.replayer.on('resume', () => {
           this.set({ isPlaying: true });
         });
+        current.replayer.on('finish', () => {
+          this.timer = null;
+          this.set({ isPlaying: false, currentTime: 0 });
+        });
+        current.replayer.on('skip-start', payload => {
+          payload.isSkipping = true;
+          this.set(payload);
+        });
+        current.replayer.on('skip-end', payload => {
+          payload.isSkipping = false;
+          this.set(payload);
+        });
       }
       if (changed.isPlaying) {
         if (current.isPlaying && !this.timer) {
           this.loopTimer();
         }
       }
+      if (changed.skipInactive) {
+        current.replayer.setConfig({ skipInactive: changed.skipInactive });
+      }
     },
     ondestroy() {
       const { isPlaying } = this.get();
@@ -233,6 +256,9 @@
 
   .rr-controller__btns {
     display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
   }
 
   .rr-controller__btns button {
@@ -256,4 +282,8 @@
     color: #fff;
     background: rgb(73, 80, 246);
   }
+
+  .rr-controller__btns button:disabled {
+    cursor: not-allowed;
+  }
 </style>
diff --git a/src/Player.html b/src/Player.html
index 2c3e0a901d..cd8666eccb 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -46,6 +46,7 @@
       const replayer = new Replayer(events, {
         speed: 1,
         root: this.refs.frame,
+        skipInactive: true,
       });
       replayer.on('resize', (dimension) =>
         this.updateScale(replayer.wrapper, dimension)
diff --git a/src/components/Switch.html b/src/components/Switch.html
new file mode 100644
index 0000000000..ffe11be260
--- /dev/null
+++ b/src/components/Switch.html
@@ -0,0 +1,77 @@
+<div class="switch" class:disabled="disabled">
+  <input
+    type="checkbox"
+    id="{id}"
+    bind:checked="checked"
+    disabled="{disabled}"
+  />
+  <label for="{id}"></label> <span class="label">{label}</span>
+</div>
+
+<style>
+  .switch {
+    height: 1em;
+    display: flex;
+    align-items: center;
+  }
+
+  .switch.disabled {
+    opacity: 0.5;
+  }
+
+  .label {
+    margin: 0 8px;
+    height: 1em;
+  }
+
+  .switch input[type='checkbox'] {
+    position: absolute;
+    opacity: 0;
+  }
+
+  .switch label {
+    width: 2em;
+    height: 1em;
+    position: relative;
+    cursor: pointer;
+    display: block;
+  }
+
+  .switch.disabled label {
+    cursor: not-allowed;
+  }
+
+  .switch label:before {
+    content: '';
+    position: absolute;
+    width: 2em;
+    height: 1em;
+    left: 0.1em;
+    transition: background 0.1s ease;
+    background: rgba(73, 80, 246, 0.5);
+    border-radius: 50px;
+  }
+
+  .switch label:after {
+    content: '';
+    position: absolute;
+    width: 1em;
+    height: 1em;
+    border-radius: 50px;
+    left: 0;
+    transition: all 0.2s ease;
+    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
+    background: #fcfff4;
+    animation: switch-off 0.2s ease-out;
+    z-index: 2;
+  }
+
+  .switch input[type='checkbox']:checked + label:before {
+    background: rgb(73, 80, 246);
+  }
+
+  .switch input[type='checkbox']:checked + label:after {
+    animation: switch-on 0.2s ease-out;
+    left: 1.1em;
+  }
+</style>
diff --git a/src/utils.js b/src/utils.js
index 8b47b5587a..030a77e3db 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -27,7 +27,7 @@ export function formatTime(ms) {
   ms = ms % MINUTE;
   const second = Math.round(ms / SECOND);
   if (hour) {
-    return `${padZero(hour)}:${padZero(minute)}:${padZero(minute)}`;
+    return `${padZero(hour)}:${padZero(minute)}:${padZero(second)}`;
   }
   return `${padZero(minute)}:${padZero(second)}`;
 }

From b01deae64efe0b113296bb5e6613a7c230ad7cf2 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 27 Dec 2018 13:12:21 +0800
Subject: [PATCH 094/524] temp disable click progress

---
 src/Controller.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Controller.html b/src/Controller.html
index 84db820c22..7cdd7e81a4 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -2,7 +2,7 @@
 <div class="rr-controller">
   <div class="rr-timeline">
     <span class="rr-timeline__time">{formatTime(currentTime)}</span>
-    <div class="rr-progress" ref:progress on:click="handleProgressClick(event)">
+    <div class="rr-progress" ref:progress>
       <div class="rr-progress__step" ref:step style="width: {percentage}"></div>
       <div
         class="rr-progress__handler"
@@ -233,7 +233,7 @@
     background: #eee;
     position: relative;
     border-radius: 3px;
-    cursor: pointer;
+    /* cursor: pointer; */
   }
 
   .rr-progress__step {

From c00b38ba1ab87f57933afc45b1dcaae0705dff37 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 27 Dec 2018 13:12:53 +0800
Subject: [PATCH 095/524] Release 0.3.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index aa0163383d..0e2cab3030 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From 4f6ef05f13f6b8eeff86dacb8623abdbbbdf92ea Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 27 Dec 2018 18:18:29 +0800
Subject: [PATCH 096/524] bugfix and update rrweb

---
 package.json               |  2 +-
 src/Controller.html        | 10 +++++++---
 src/components/Switch.html |  1 -
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 0e2cab3030..d5f9948970 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.7.0"
+    "rrweb": "^0.7.2"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/src/Controller.html b/src/Controller.html
index 7cdd7e81a4..b36b5d2388 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -136,11 +136,14 @@
         }
       },
       setSpeed(speed) {
-        const { replayer, currentTime } = this.get();
+        const { replayer, currentTime, isPlaying } = this.get();
+        // freeze before set speed, and resume if is playing before freeze
         replayer.pause();
         replayer.setConfig({ speed });
         this.set({ speed });
-        replayer.resume(currentTime);
+        if (isPlaying) {
+          replayer.resume(currentTime);
+        }
       },
       handleProgressClick(event) {
         const progressRect = this.refs.progress.getBoundingClientRect();
@@ -162,6 +165,7 @@
     },
     onupdate({ changed, current, previous }) {
       if (current.replayer && !previous) {
+        window.replayer = current.replayer;
         // auto play
         setTimeout(() => {
           this.set({ isPlaying: true });
@@ -192,7 +196,7 @@
         }
       }
       if (changed.skipInactive) {
-        current.replayer.setConfig({ skipInactive: changed.skipInactive });
+        current.replayer.setConfig({ skipInactive: current.skipInactive });
       }
     },
     ondestroy() {
diff --git a/src/components/Switch.html b/src/components/Switch.html
index ffe11be260..3c3a2e7e60 100644
--- a/src/components/Switch.html
+++ b/src/components/Switch.html
@@ -21,7 +21,6 @@
 
   .label {
     margin: 0 8px;
-    height: 1em;
   }
 
   .switch input[type='checkbox'] {

From aed0b1e4ecc9279986897312101c6199e14aa87d Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 27 Dec 2018 18:18:47 +0800
Subject: [PATCH 097/524] Release 0.3.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d5f9948970..a96ac66371 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From e3f371cd67bcb1b8a31ebca184e5004bf3dc9650 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20de=20Giessen?= <github@dvdgiessen.nl>
Date: Sat, 29 Dec 2018 05:12:28 +0100
Subject: [PATCH 098/524] Cross-platform npm scripts using cross-env (#2)

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9ef0fcfc39..ce70e78806 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.7.0",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
-    "test": "TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
+    "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
     "bundle": "rollup --config"
   },
   "repository": {
@@ -38,6 +38,7 @@
     "@types/node": "^10.11.3",
     "@types/puppeteer": "^1.8.0",
     "chai": "^4.1.2",
+    "cross-env": "^5.2.0",
     "jest-snapshot": "^23.6.0",
     "mocha": "^5.2.0",
     "puppeteer": "^1.10.0",

From f5a154b750f3a77cad7860c8b0fe7d7ac1e52dfc Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 29 Dec 2018 12:13:16 +0800
Subject: [PATCH 099/524] Release 0.7.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ce70e78806..0a562f643c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 056b317116e3185cc3ddc41f8c9fe18703b0e287 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20de=20Giessen?= <github@dvdgiessen.nl>
Date: Sun, 30 Dec 2018 06:19:31 +0100
Subject: [PATCH 100/524] Parse style attributes for absolute URL paths (#5)

---
 src/snapshot.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index cc470957cb..95360b9060 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -105,6 +105,8 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
         // relative path in attribute
         if (name === 'src' || name === 'href') {
           attributes[name] = absoluteToDoc(doc, value);
+        } else if (name === 'style') {
+          attributes[name] = absoluteToStylesheet(value, doc.location.href);
         } else {
           attributes[name] = value;
         }

From 91e031844e9d8635e3f05a252a77ea9fb0d90338 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20de=20Giessen?= <github@dvdgiessen.nl>
Date: Sun, 30 Dec 2018 06:36:17 +0100
Subject: [PATCH 101/524] Fixed detection of multiple consecutive CSS URLs
 without quotes (#4)

---
 src/snapshot.ts       | 5 +++--
 test/snapshot.test.ts | 6 ++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 95360b9060..1e6bec8521 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -42,11 +42,12 @@ function extractOrigin(url: string): string {
   return origin;
 }
 
-const URL_IN_CSS_REF = /url\((['"]|)([^'"]*)\1\)/gm;
+const URL_IN_CSS_REF = /url\((?:'([^']*)'|"([^"]*)"|([^)]*))\)/gm;
 const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/;
 const DATA_URI = /^(data:)([\w\/\+]+);(charset=[\w-]+|base64).*,(.*)/gi;
 export function absoluteToStylesheet(cssText: string, href: string): string {
-  return cssText.replace(URL_IN_CSS_REF, (_1, _2, filePath) => {
+  return cssText.replace(URL_IN_CSS_REF, (_1, path1, path2, path3) => {
+    const filePath = path1 || path2 || path3;
     if (!RELATIVE_PATH.test(filePath)) {
       return `url('${filePath}')`;
     }
diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts
index 106779e9d0..45ce11dc53 100644
--- a/test/snapshot.test.ts
+++ b/test/snapshot.test.ts
@@ -47,6 +47,12 @@ describe('absolute url to stylesheet', () => {
     );
   });
 
+  it('can handle multiple no quote paths', () => {
+    expect(absoluteToStylesheet('background-image: url(images/b.jpg); background: #aabbcc url(images/a.jpg) 50% 50% repeat;', href)).to.equal(
+      `background-image: url('http://localhost/css/images/b.jpg'); background: #aabbcc url('http://localhost/css/images/a.jpg') 50% 50% repeat;`,
+    );
+  });
+
   it('can handle data url image', () => {
     expect(
       absoluteToStylesheet('url(data:image/gif;base64,ABC)', href),

From 7c275cbf2cf86505cd9ad8a30e2782a4c7d3492f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 30 Dec 2018 21:50:04 +0800
Subject: [PATCH 102/524] fix the format and use window.location

---
 src/snapshot.ts       |  2 +-
 test/snapshot.test.ts | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 1e6bec8521..ec23e7bada 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -107,7 +107,7 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
         if (name === 'src' || name === 'href') {
           attributes[name] = absoluteToDoc(doc, value);
         } else if (name === 'style') {
-          attributes[name] = absoluteToStylesheet(value, doc.location.href);
+          attributes[name] = absoluteToStylesheet(value, location.href);
         } else {
           attributes[name] = value;
         }
diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts
index 45ce11dc53..197fb7ad24 100644
--- a/test/snapshot.test.ts
+++ b/test/snapshot.test.ts
@@ -48,8 +48,14 @@ describe('absolute url to stylesheet', () => {
   });
 
   it('can handle multiple no quote paths', () => {
-    expect(absoluteToStylesheet('background-image: url(images/b.jpg); background: #aabbcc url(images/a.jpg) 50% 50% repeat;', href)).to.equal(
-      `background-image: url('http://localhost/css/images/b.jpg'); background: #aabbcc url('http://localhost/css/images/a.jpg') 50% 50% repeat;`,
+    expect(
+      absoluteToStylesheet(
+        'background-image: url(images/b.jpg); background: #aabbcc url(images/a.jpg) 50% 50% repeat;',
+        href,
+      ),
+    ).to.equal(
+      `background-image: url('http://localhost/css/images/b.jpg');` +
+        `background: #aabbcc url('http://localhost/css/images/a.jpg') 50% 50% repeat;`,
     );
   });
 

From 286a98a9e8b400a396df5a448378d008da948394 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 30 Dec 2018 21:50:16 +0800
Subject: [PATCH 103/524] Release 0.7.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0a562f643c..0eddf06999 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From b9565334f63f21a12610421f3dce7391647cc58d Mon Sep 17 00:00:00 2001
From: The Gitter Badger <badger@gitter.im>
Date: Sun, 6 Jan 2019 05:39:02 -0600
Subject: [PATCH 104/524] Add Gitter badge (#9)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 765210fd35..46f1702b5d 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # rrweb-snapshot
 
-[![Build Status](https://travis-ci.org/rrweb-io/rrweb-snapshot.svg?branch=master)](https://travis-ci.org/rrweb-io/rrweb-snapshot)
+[![Build Status](https://travis-ci.org/rrweb-io/rrweb-snapshot.svg?branch=master)](https://travis-ci.org/rrweb-io/rrweb-snapshot) [![Join the chat at https://gitter.im/rrweb-io/rrweb-snapshot](https://badges.gitter.im/rrweb-io/rrweb-snapshot.svg)](https://gitter.im/rrweb-io/rrweb-snapshot?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 Snapshot the DOM into a stateful and serializable data structure.
 Also, provide the ability to rebuild the DOM via snapshot.

From 9099a8ad8379fcb6b8d3de3216c8ff5aa95d1b4d Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 7 Jan 2019 20:01:27 +0800
Subject: [PATCH 105/524] impl fullscreen mode

---
 public/global.css   |  2 --
 src/Controller.html | 17 ++++++++++---
 src/Player.html     | 60 ++++++++++++++++++++++++++++++++++++++++++---
 src/utils.js        | 53 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 122 insertions(+), 10 deletions(-)

diff --git a/public/global.css b/public/global.css
index 9b30ce9470..ddc26d5fb2 100644
--- a/public/global.css
+++ b/public/global.css
@@ -7,8 +7,6 @@ body {
 
 body {
   margin: 0;
-  padding: 28px;
-  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
   box-sizing: border-box;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
diff --git a/src/Controller.html b/src/Controller.html
index b36b5d2388..f9878b15dd 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -16,9 +16,7 @@
     <button on:click="toggle()">
       {#if isPlaying}
       <svg
-        t="1541411313529"
         class="icon"
-        style=""
         viewBox="0 0 1024 1024"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
@@ -32,9 +30,7 @@
       </svg>
       {:else}
       <svg
-        t="1541410561137"
         class="icon"
-        style=""
         viewBox="0 0 1024 1024"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
@@ -58,6 +54,19 @@
     </button>
     {/each}
     <Switch id="skip" bind:checked="skipInactive" disabled="{isSkipping}" label="skip inactive" />
+    <button on:click="fire('fullscreen')">
+      <svg
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        width="16" height="16"
+      >
+        <defs><style type="text/css"></style></defs>
+        <path d="M916 380c-26.4 0-48-21.6-48-48L868 223.2 613.6 477.6c-18.4 18.4-48.8 18.4-68 0-18.4-18.4-18.4-48.8 0-68L800 156 692 156c-26.4 0-48-21.6-48-48 0-26.4 21.6-48 48-48l224 0c26.4 0 48 21.6 48 48l0 224C964 358.4 942.4 380 916 380zM231.2 860l108.8 0c26.4 0 48 21.6 48 48s-21.6 48-48 48l-224 0c-26.4 0-48-21.6-48-48l0-224c0-26.4 21.6-48 48-48 26.4 0 48 21.6 48 48L164 792l253.6-253.6c18.4-18.4 48.8-18.4 68 0 18.4 18.4 18.4 48.8 0 68L231.2 860z" p-id="1286"></path>
+      </svg>
+    </button>
   </div>
 </div>
 {/if}
diff --git a/src/Player.html b/src/Player.html
index cd8666eccb..d452472359 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -1,14 +1,22 @@
-<div class="rr-player">
+<div class="rr-player" ref:player style="{playerStyle}">
   <div class="rr-player__frame" ref:frame { style }></div>
   {#if replayer}
-  <Controller { replayer } {showController} />
+  <Controller { replayer } {showController} on:fullscreen="fullscreen()" />
   {/if}
 </div>
 
 <script>
   import { Replayer } from 'rrweb';
   import 'rrweb/dist/rrweb.min.css';
-  import { inlineCss } from './utils.js';
+  import {
+    inlineCss,
+    openFullscreen,
+    exitFullscreen,
+    isFullscreen,
+    onFullscreenChange,
+  } from './utils.js';
+
+  const controllerHeight = 80;
 
   export default {
     components: {
@@ -30,6 +38,12 @@
           height: `${height}px`,
         });
       },
+      playerStyle({ width, height }) {
+        return inlineCss({
+          width: `${width}px`,
+          height: `${height + controllerHeight}px`,
+        });
+      },
     },
     methods: {
       updateScale(el, frameDimension) {
@@ -40,8 +54,13 @@
           `scale(${Math.min(widthScale, heightScale, 1)})` +
           'translate(-50%, -50%)';
       },
+      fullscreen() {
+        if (this.refs.player) {
+          isFullscreen() ? exitFullscreen() : openFullscreen(this.refs.player);
+        }
+      },
     },
-    oncreate(p) {
+    oncreate() {
       const { events } = this.get();
       const replayer = new Replayer(events, {
         speed: 1,
@@ -54,6 +73,39 @@
       this.set({
         replayer,
       });
+      this.fullscreenListener = onFullscreenChange(() => {
+        if (isFullscreen()) {
+          setTimeout(() => {
+            const { width, height } = this.get();
+            // store the original dimension which do not need to be reactive
+            this._width = width;
+            this._height = height;
+            const dimension = {
+              width: document.body.offsetWidth,
+              height: document.body.offsetHeight - controllerHeight,
+            };
+            this.set(dimension);
+            this.updateScale(replayer.wrapper, {
+              width: replayer.iframe.offsetWidth,
+              height: replayer.iframe.offsetHeight,
+            });
+          }, 0);
+        } else {
+          this.set({
+            width: this._width,
+            height: this._height,
+          });
+          this.updateScale(replayer.wrapper, {
+            width: replayer.iframe.offsetWidth,
+            height: replayer.iframe.offsetHeight,
+          });
+        }
+      });
+    },
+    ondestroy() {
+      if (this.fullscreenListener) {
+        this.fullscreenListener();
+      }
     },
   };
 
diff --git a/src/utils.js b/src/utils.js
index 030a77e3db..985ef40aa6 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -31,3 +31,56 @@ export function formatTime(ms) {
   }
   return `${padZero(minute)}:${padZero(second)}`;
 }
+
+export function openFullscreen(el) {
+  if (el.requestFullscreen) {
+    return el.requestFullscreen();
+  } else if (el.mozRequestFullScreen) {
+    /* Firefox */
+    return el.mozRequestFullScreen();
+  } else if (el.webkitRequestFullscreen) {
+    /* Chrome, Safari and Opera */
+    return el.webkitRequestFullscreen();
+  } else if (el.msRequestFullscreen) {
+    /* IE/Edge */
+    return el.msRequestFullscreen();
+  }
+}
+
+export function exitFullscreen() {
+  if (document.exitFullscreen) {
+    return document.exitFullscreen();
+  } else if (document.mozExitFullscreen) {
+    /* Firefox */
+    return document.mozExitFullscreen();
+  } else if (document.webkitExitFullscreen) {
+    /* Chrome, Safari and Opera */
+    return document.webkitExitFullscreen();
+  } else if (document.msExitFullscreen) {
+    /* IE/Edge */
+    return document.msExitFullscreen();
+  }
+}
+
+export function isFullscreen() {
+  return (
+    document.fullscreen ||
+    document.webkitIsFullScreen ||
+    document.mozFullScreen ||
+    document.msFullscreenElement
+  );
+}
+
+export function onFullscreenChange(handler) {
+  document.addEventListener('fullscreenchange', handler);
+  document.addEventListener('webkitfullscreenchange', handler);
+  document.addEventListener('mozfullscreenchange', handler);
+  document.addEventListener('MSFullscreenChange', handler);
+
+  return () => {
+    document.removeEventListener('fullscreenchange', handler);
+    document.removeEventListener('webkitfullscreenchange', handler);
+    document.removeEventListener('mozfullscreenchange', handler);
+    document.removeEventListener('MSFullscreenChange', handler);
+  };
+}

From c4c147649c2c6442497b8c0c127bccdd7f60f09e Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 24 Jan 2019 18:39:57 +0800
Subject: [PATCH 106/524] handle empty url path

---
 src/snapshot.ts       | 5 ++++-
 test/snapshot.test.ts | 6 +++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index ec23e7bada..52831dfe25 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -46,8 +46,11 @@ const URL_IN_CSS_REF = /url\((?:'([^']*)'|"([^"]*)"|([^)]*))\)/gm;
 const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/;
 const DATA_URI = /^(data:)([\w\/\+]+);(charset=[\w-]+|base64).*,(.*)/gi;
 export function absoluteToStylesheet(cssText: string, href: string): string {
-  return cssText.replace(URL_IN_CSS_REF, (_1, path1, path2, path3) => {
+  return cssText.replace(URL_IN_CSS_REF, (origin, path1, path2, path3) => {
     const filePath = path1 || path2 || path3;
+    if (!filePath) {
+      return origin;
+    }
     if (!RELATIVE_PATH.test(filePath)) {
       return `url('${filePath}')`;
     }
diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts
index 197fb7ad24..ffb6174246 100644
--- a/test/snapshot.test.ts
+++ b/test/snapshot.test.ts
@@ -54,7 +54,7 @@ describe('absolute url to stylesheet', () => {
         href,
       ),
     ).to.equal(
-      `background-image: url('http://localhost/css/images/b.jpg');` +
+      `background-image: url('http://localhost/css/images/b.jpg'); ` +
         `background: #aabbcc url('http://localhost/css/images/a.jpg') 50% 50% repeat;`,
     );
   });
@@ -64,4 +64,8 @@ describe('absolute url to stylesheet', () => {
       absoluteToStylesheet('url(data:image/gif;base64,ABC)', href),
     ).to.equal('url(data:image/gif;base64,ABC)');
   });
+
+  it('can handle empty path', () => {
+    expect(absoluteToStylesheet(`url('')`, href)).to.equal(`url('')`);
+  });
 });

From 5e071370591418dc2d6f694cdcb06411da12e8e0 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 24 Jan 2019 18:40:07 +0800
Subject: [PATCH 107/524] Release 0.7.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0eddf06999..38b6f48ea0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From f3de70114d80e7cf4cb713a6342a9a087c6d5d3f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 24 Jan 2019 19:28:16 +0800
Subject: [PATCH 108/524] impl auto play

---
 package.json        |  2 +-
 public/index.html   |  1 +
 src/Controller.html | 10 +++++++++-
 src/Player.html     |  4 +++-
 src/utils.js        |  3 +++
 5 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index a96ac66371..5049bcec59 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.7.2"
+    "rrweb": "^0.7.7"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/public/index.html b/public/index.html
index 857cd29789..8dafb1ed8c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,6 +19,7 @@
         target: document.body,
         data: {
           events,
+          autoPlay: false,
         },
       });
     </script>
diff --git a/src/Controller.html b/src/Controller.html
index f9878b15dd..f95ce5c2a3 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -175,11 +175,19 @@
     onupdate({ changed, current, previous }) {
       if (current.replayer && !previous) {
         window.replayer = current.replayer;
-        // auto play
         setTimeout(() => {
           this.set({ isPlaying: true });
         }, 0);
         current.replayer.play(0);
+        if (!current.autoPlay) {
+          let firstFullSnapshotRebuilded = false;
+          current.replayer.on('fullsnapshot-rebuilded', () => {
+            if (!firstFullSnapshotRebuilded) {
+              firstFullSnapshotRebuilded = true;
+              current.replayer.pause();
+            }
+          });
+        }
         current.replayer.on('pause', () => {
           this.set({ isPlaying: false });
         });
diff --git a/src/Player.html b/src/Player.html
index d452472359..09d4958fb1 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -1,7 +1,7 @@
 <div class="rr-player" ref:player style="{playerStyle}">
   <div class="rr-player__frame" ref:frame { style }></div>
   {#if replayer}
-  <Controller { replayer } {showController} on:fullscreen="fullscreen()" />
+  <Controller { replayer } {showController} {autoPlay} on:fullscreen="fullscreen()" />
   {/if}
 </div>
 
@@ -28,6 +28,7 @@
         width: 1024,
         height: 576,
         events: [],
+        autoPlay: true,
         replayer: null,
       };
     },
@@ -66,6 +67,7 @@
         speed: 1,
         root: this.refs.frame,
         skipInactive: true,
+        showWarning: true,
       });
       replayer.on('resize', (dimension) =>
         this.updateScale(replayer.wrapper, dimension)
diff --git a/src/utils.js b/src/utils.js
index 985ef40aa6..fbb808db0d 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -21,6 +21,9 @@ const SECOND = 1000;
 const MINUTE = 60 * SECOND;
 const HOUR = 60 * MINUTE;
 export function formatTime(ms) {
+  if (ms <= 0) {
+    return '00:00';
+  }
   const hour = Math.floor(ms / HOUR);
   ms = ms % HOUR;
   const minute = Math.floor(ms / MINUTE);

From 201eae782d7e382f88abb492f19e216b648db2d4 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 25 Jan 2019 16:15:18 +0800
Subject: [PATCH 109/524] bypass event listener to rrweb event emitter

---
 package.json      | 2 +-
 public/index.html | 4 ++--
 src/Player.html   | 4 ++++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 5049bcec59..a0bb66be84 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.7.7"
+    "rrweb": "^0.7.8"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/public/index.html b/public/index.html
index 8dafb1ed8c..7e6ff699b7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,13 +15,13 @@
     <script src="./events.js"></script>
     <script>
       // eslint-disable-next-line
-      new rrwebPlayer({
+      const component = new rrwebPlayer({
         target: document.body,
         data: {
           events,
-          autoPlay: false,
         },
       });
+      component.addEventListener('finish', () => console.log('finish'));
     </script>
   </body>
 </html>
diff --git a/src/Player.html b/src/Player.html
index 09d4958fb1..6ec461a4b6 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -60,6 +60,10 @@
           isFullscreen() ? exitFullscreen() : openFullscreen(this.refs.player);
         }
       },
+      addEventListener(event, handler) {
+        const { replayer } = this.get();
+        replayer.on(event, handler);
+      },
     },
     oncreate() {
       const { events } = this.get();

From f142be74881169754c4fcec0127cffb3dacfd32a Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 25 Jan 2019 18:28:41 +0800
Subject: [PATCH 110/524] Release 0.3.8

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a0bb66be84..86b7b6f6ba 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From 5121910590dc2f2770a23fe7326685197992f17f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 8 Feb 2019 09:12:01 +0800
Subject: [PATCH 111/524] update rrweb

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 86b7b6f6ba..a472002bd1 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.7.8"
+    "rrweb": "^0.7.9"
   },
   "scripts": {
     "build": "rollup -c",

From 6f422c1afeedc5b7b4ebd65067498d2f7261d465 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 8 Feb 2019 09:12:11 +0800
Subject: [PATCH 112/524] Release 0.3.9

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a472002bd1..e055b93914 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From 687c710fe98c5da8ece3523f98cecfa962d4ed95 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 17 Feb 2019 16:34:28 +0800
Subject: [PATCH 113/524] iterate style element to get css rules string

---
 src/rebuild.ts                         |  7 ++++---
 src/snapshot.ts                        | 22 +++++++++++++++++++---
 test/__snapshots__/integration.ts.snap | 14 ++++++++++++++
 test/html/dynamic-stylesheet.html      | 20 ++++++++++++++++++++
 4 files changed, 57 insertions(+), 6 deletions(-)
 create mode 100644 test/html/dynamic-stylesheet.html

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 6896b7b4c5..1d2c535722 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -95,11 +95,12 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
           let value = n.attributes[name];
           value = typeof value === 'boolean' ? '' : value;
           const isTextarea = tagName === 'textarea' && name === 'value';
-          const isRemoteCss = tagName === 'style' && name === '_cssText';
-          if (isRemoteCss) {
+          const isRemoteOrDynamicCss =
+            tagName === 'style' && name === '_cssText';
+          if (isRemoteOrDynamicCss) {
             value = addHoverClass(value);
           }
-          if (isTextarea || isRemoteCss) {
+          if (isTextarea || isRemoteOrDynamicCss) {
             const child = doc.createTextNode(value);
             node.appendChild(child);
             continue;
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 52831dfe25..9c27a5f476 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -122,9 +122,25 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
         });
         const cssText = getCssRulesString(stylesheet as CSSStyleSheet);
         if (cssText) {
-          attributes = {
-            _cssText: absoluteToStylesheet(cssText, stylesheet!.href!),
-          };
+          delete attributes.rel;
+          delete attributes.href;
+          attributes._cssText = absoluteToStylesheet(
+            cssText,
+            stylesheet!.href!,
+          );
+        }
+      }
+      // dynamic stylesheet
+      if (
+        tagName === 'style' &&
+        (n as HTMLStyleElement).sheet &&
+        // TODO: Currently we only try to get dynamic stylesheet when it is an empty style element
+        !(n as HTMLElement).innerText.trim().length
+      ) {
+        const cssText = getCssRulesString((n as HTMLStyleElement)
+          .sheet as CSSStyleSheet);
+        if (cssText) {
+          attributes._cssText = absoluteToStylesheet(cssText, location.href);
         }
       }
       // form fields
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 7d0575fcef..2c3d42b80a 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -83,6 +83,20 @@ exports[`[html file]: cors-style-sheet.html 1`] = `
 </head><body></body></html>"
 `;
 
+exports[`[html file]: dynamic-stylesheet.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+    <meta charset=\\"UTF-8\\" />
+    <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+    <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+    <title>dynamic stylesheet</title>
+    <style>body { margin: 0px; }p { background: lightpink; }</style>
+    <noscript>SCRIPT_PLACEHOLDER</noscript>
+  </head>
+  <body>
+    <p>p tag</p>
+  </body></html>"
+`;
+
 exports[`[html file]: form-fields.html 1`] = `
 "<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
diff --git a/test/html/dynamic-stylesheet.html b/test/html/dynamic-stylesheet.html
new file mode 100644
index 0000000000..83a57ccf75
--- /dev/null
+++ b/test/html/dynamic-stylesheet.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>dynamic stylesheet</title>
+    <style></style>
+    <script>
+      const styleEl = document.querySelector('style');
+      const rules = [`body { margin: 0 }`, `p { background: lightpink }`];
+      rules.forEach((rule, idx) => {
+        styleEl.sheet.insertRule(rule, idx);
+      });
+    </script>
+  </head>
+  <body>
+    <p>p tag</p>
+  </body>
+</html>

From 110511ce7381f1e91af53391a83a9c8cce2e311f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 17 Feb 2019 16:47:24 +0800
Subject: [PATCH 114/524] Release 0.7.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 38b6f48ea0..e25bea569d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 03c9fde822f438473fe63563f961494cac6dc7c8 Mon Sep 17 00:00:00 2001
From: Sam Mason <sam.jbmason@gmail.com>
Date: Sun, 31 Mar 2019 22:30:52 -0400
Subject: [PATCH 115/524] Make block css class optional & fix test (#6)

* Make block class optional

* Fix test by removing unexpected space space
---
 src/snapshot.ts       | 26 +++++++++++++++++++-------
 test/snapshot.test.ts |  2 +-
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 9c27a5f476..19ce7d2ba9 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -86,8 +86,11 @@ function isSVGElement(el: Element): boolean {
   return el.tagName === 'svg' || el instanceof SVGElement;
 }
 
-const BLOCK_CLASS = 'rr-block';
-function serializeNode(n: Node, doc: Document): serializedNode | false {
+function serializeNode(
+  n: Node,
+  doc: Document,
+  blockClass: string,
+): serializedNode | false {
   switch (n.nodeType) {
     case n.DOCUMENT_NODE:
       return {
@@ -102,7 +105,7 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
         systemId: (n as DocumentType).systemId,
       };
     case n.ELEMENT_NODE:
-      const needBlock = (n as HTMLElement).classList.contains(BLOCK_CLASS);
+      const needBlock = (n as HTMLElement).classList.contains(blockClass);
       const tagName = (n as HTMLElement).tagName.toLowerCase();
       let attributes: attributes = {};
       for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
@@ -216,9 +219,10 @@ export function serializeNodeWithId(
   n: Node,
   doc: Document,
   map: idNodeMap,
+  blockClass: string,
   skipChild = false,
 ): serializedNodeWithId | null {
-  const _serializedNode = serializeNode(n, doc);
+  const _serializedNode = serializeNode(n, doc, blockClass);
   if (!_serializedNode) {
     // TODO: dev only
     console.warn(n, 'not serialized');
@@ -241,7 +245,12 @@ export function serializeNodeWithId(
     recordChild
   ) {
     for (const childN of Array.from(n.childNodes)) {
-      const serializedChildNode = serializeNodeWithId(childN, doc, map);
+      const serializedChildNode = serializeNodeWithId(
+        childN,
+        doc,
+        map,
+        blockClass,
+      );
       if (serializedChildNode) {
         serializedNode.childNodes.push(serializedChildNode);
       }
@@ -250,10 +259,13 @@ export function serializeNodeWithId(
   return serializedNode;
 }
 
-function snapshot(n: Document): [serializedNodeWithId | null, idNodeMap] {
+function snapshot(
+  n: Document,
+  blockClass = 'rr-block',
+): [serializedNodeWithId | null, idNodeMap] {
   resetId();
   const idNodeMap: idNodeMap = {};
-  return [serializeNodeWithId(n, n, idNodeMap), idNodeMap];
+  return [serializeNodeWithId(n, n, idNodeMap, blockClass), idNodeMap];
 }
 
 export default snapshot;
diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts
index ffb6174246..9a29018d67 100644
--- a/test/snapshot.test.ts
+++ b/test/snapshot.test.ts
@@ -50,7 +50,7 @@ describe('absolute url to stylesheet', () => {
   it('can handle multiple no quote paths', () => {
     expect(
       absoluteToStylesheet(
-        'background-image: url(images/b.jpg); background: #aabbcc url(images/a.jpg) 50% 50% repeat;',
+        'background-image: url(images/b.jpg);background: #aabbcc url(images/a.jpg) 50% 50% repeat;',
         href,
       ),
     ).to.equal(

From f4ebd6b7316a7772bffc3caa21b3daaabb024aa6 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 1 Apr 2019 11:47:49 +0800
Subject: [PATCH 116/524] add typings autogen command

---
 .release-it.json      |  2 +-
 index.d.ts            | 21 -----------------
 package.json          |  5 ++--
 typings/index.d.ts    |  4 ++++
 typings/rebuild.d.ts  |  5 ++++
 typings/snapshot.d.ts |  6 +++++
 typings/types.d.ts    | 55 +++++++++++++++++++++++++++++++++++++++++++
 7 files changed, 74 insertions(+), 24 deletions(-)
 delete mode 100644 index.d.ts
 create mode 100644 typings/index.d.ts
 create mode 100644 typings/rebuild.d.ts
 create mode 100644 typings/snapshot.d.ts
 create mode 100644 typings/types.d.ts

diff --git a/.release-it.json b/.release-it.json
index 4aff103773..15b39fa3e2 100644
--- a/.release-it.json
+++ b/.release-it.json
@@ -1,4 +1,4 @@
 {
   "non-interactive": true,
-  "buildCommand": "npm run bundle"
+  "buildCommand": "npm run bundle && npm run typings"
 }
diff --git a/index.d.ts b/index.d.ts
deleted file mode 100644
index 27eec30331..0000000000
--- a/index.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { serializedNodeWithId, idNodeMap, INode } from './src/types';
-export * from './src/types';
-
-export function snapshot(n: Document): [serializedNodeWithId | null, idNodeMap];
-export function rebuild(
-  n: serializedNodeWithId,
-  doc: Document,
-): [Node | null, idNodeMap];
-export function serializeNodeWithId(
-  n: Node,
-  doc: Document,
-  map: idNodeMap,
-  skipChild?: boolean,
-): serializedNodeWithId | null;
-export function resetId(): void;
-export function buildNodeWithSN(
-  n: serializedNodeWithId,
-  doc: Document,
-  map: idNodeMap,
-  skipChild?: boolean,
-): INode | null;
diff --git a/package.json b/package.json
index e25bea569d..5ca4698cf6 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
-    "bundle": "rollup --config"
+    "bundle": "rollup --config",
+    "typings": "tsc -d --declarationDir typings"
   },
   "repository": {
     "type": "git",
@@ -18,7 +19,7 @@
   "main": "lib/rrweb-snapshot.js",
   "module": "es/rrweb-snapshot.js",
   "unpkg": "dist/rrweb-snapshot.js",
-  "typings": "./index.d.ts",
+  "typings": "typings/index.d.ts",
   "files": [
     "dist",
     "lib",
diff --git a/typings/index.d.ts b/typings/index.d.ts
new file mode 100644
index 0000000000..60e4970215
--- /dev/null
+++ b/typings/index.d.ts
@@ -0,0 +1,4 @@
+import snapshot, { serializeNodeWithId, resetId } from './snapshot';
+import rebuild, { buildNodeWithSN } from './rebuild';
+export * from './types';
+export { snapshot, serializeNodeWithId, resetId, rebuild, buildNodeWithSN };
diff --git a/typings/rebuild.d.ts b/typings/rebuild.d.ts
new file mode 100644
index 0000000000..99c76da59c
--- /dev/null
+++ b/typings/rebuild.d.ts
@@ -0,0 +1,5 @@
+import { serializedNodeWithId, idNodeMap, INode } from './types';
+export declare function addHoverClass(cssText: string): string;
+export declare function buildNodeWithSN(n: serializedNodeWithId, doc: Document, map: idNodeMap, skipChild?: boolean): INode | null;
+declare function rebuild(n: serializedNodeWithId, doc: Document): [Node | null, idNodeMap];
+export default rebuild;
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
new file mode 100644
index 0000000000..090eac8413
--- /dev/null
+++ b/typings/snapshot.d.ts
@@ -0,0 +1,6 @@
+import { serializedNodeWithId, idNodeMap } from './types';
+export declare function resetId(): void;
+export declare function absoluteToStylesheet(cssText: string, href: string): string;
+export declare function serializeNodeWithId(n: Node, doc: Document, map: idNodeMap, blockClass: string, skipChild?: boolean): serializedNodeWithId | null;
+declare function snapshot(n: Document, blockClass?: string): [serializedNodeWithId | null, idNodeMap];
+export default snapshot;
diff --git a/typings/types.d.ts b/typings/types.d.ts
new file mode 100644
index 0000000000..556e0bdfd3
--- /dev/null
+++ b/typings/types.d.ts
@@ -0,0 +1,55 @@
+export declare enum NodeType {
+    Document = 0,
+    DocumentType = 1,
+    Element = 2,
+    Text = 3,
+    CDATA = 4,
+    Comment = 5
+}
+export declare type documentNode = {
+    type: NodeType.Document;
+    childNodes: serializedNodeWithId[];
+};
+export declare type documentTypeNode = {
+    type: NodeType.DocumentType;
+    name: string;
+    publicId: string;
+    systemId: string;
+};
+export declare type attributes = {
+    [key: string]: string | boolean;
+};
+export declare type elementNode = {
+    type: NodeType.Element;
+    tagName: string;
+    attributes: attributes;
+    childNodes: serializedNodeWithId[];
+    isSVG?: true;
+    needBlock?: boolean;
+};
+export declare type textNode = {
+    type: NodeType.Text;
+    textContent: string;
+    isStyle?: true;
+};
+export declare type cdataNode = {
+    type: NodeType.CDATA;
+    textContent: '';
+};
+export declare type commentNode = {
+    type: NodeType.Comment;
+    textContent: string;
+};
+export declare type serializedNode = documentNode | documentTypeNode | elementNode | textNode | cdataNode | commentNode;
+export declare type serializedNodeWithId = serializedNode & {
+    id: number;
+};
+export declare type tagMap = {
+    [key: string]: string;
+};
+export interface INode extends Node {
+    __sn: serializedNodeWithId;
+}
+export declare type idNodeMap = {
+    [key: number]: INode;
+};

From 2442f73f5b625d94e274bbb5250e135fa3303a55 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 1 Apr 2019 11:48:05 +0800
Subject: [PATCH 117/524] Release 0.7.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5ca4698cf6..d9b3eb8352 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 3dacd944cbb9dada4e3d7e3a24526ee931678c97 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 1 Apr 2019 22:37:09 +0800
Subject: [PATCH 118/524] add typings folder to npm files

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d9b3eb8352..6e7db22ede 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,7 @@
     "dist",
     "lib",
     "es",
-    "index.d.ts",
-    "src/types.ts"
+    "typings"
   ],
   "author": "yanzhen@smartx.com",
   "license": "MIT",

From aa5b2d38b1e73c2580c5f319db7f9abfb5b486da Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 1 Apr 2019 22:37:21 +0800
Subject: [PATCH 119/524] Release 0.7.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6e7db22ede..2eb6e1d45c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 7b02f13a196279c094a7764d0cb9d6b6b7246931 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 2 Apr 2019 21:43:16 +0800
Subject: [PATCH 120/524] update typescript and fix test cases

---
 package.json          |  2 +-
 test/integration.ts   | 11 +++++++++--
 test/snapshot.test.ts |  2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 2eb6e1d45c..b4164ed9d1 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,6 @@
     "ts-node": "^7.0.1",
     "tslib": "^1.9.3",
     "tslint": "^4.5.1",
-    "typescript": "^3.0.3"
+    "typescript": "^3.4.1"
   }
 }
diff --git a/test/integration.ts b/test/integration.ts
index 387b7ee749..8edcebeefe 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -8,6 +8,7 @@ import * as rollup from 'rollup';
 import typescript = require('rollup-plugin-typescript');
 import { assert } from 'chai';
 import { SnapshotState, toMatchSnapshot } from 'jest-snapshot';
+import { Suite } from 'mocha';
 
 const htmlFolder = path.join(__dirname, 'html');
 const htmls = fs.readdirSync(htmlFolder).map(filePath => {
@@ -23,7 +24,7 @@ interface IMimeType {
 }
 
 const server = () =>
-  new Promise(resolve => {
+  new Promise<http.Server>(resolve => {
     const mimeType: IMimeType = {
       '.html': 'text/html',
       '.js': 'text/javascript',
@@ -66,7 +67,13 @@ function matchSnapshot(actual: string, testFile: string, testTitle: string) {
   return result;
 }
 
-describe('integration tests', () => {
+interface ISuite extends Suite {
+  server: http.Server;
+  browser: puppeteer.Browser;
+  code: string;
+}
+
+describe('integration tests', function(this: ISuite) {
   before(async () => {
     this.server = await server();
     this.browser = await puppeteer.launch({
diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts
index 9a29018d67..c2f736f9a4 100644
--- a/test/snapshot.test.ts
+++ b/test/snapshot.test.ts
@@ -54,7 +54,7 @@ describe('absolute url to stylesheet', () => {
         href,
       ),
     ).to.equal(
-      `background-image: url('http://localhost/css/images/b.jpg'); ` +
+      `background-image: url('http://localhost/css/images/b.jpg');` +
         `background: #aabbcc url('http://localhost/css/images/a.jpg') 50% 50% repeat;`,
     );
   });

From b200f6b404a5da9897a71d814f9156c15e84dfa6 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 9 Apr 2019 17:06:22 +0800
Subject: [PATCH 121/524] enable click to play and update rrweb

---
 package.json        |  2 +-
 src/Controller.html | 19 ++++++++++++++++---
 src/Player.html     |  3 +++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index e055b93914..eb8c40a934 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.7.9"
+    "rrweb": "^0.7.11"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/src/Controller.html b/src/Controller.html
index f95ce5c2a3..3af4c71cef 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -2,7 +2,11 @@
 <div class="rr-controller">
   <div class="rr-timeline">
     <span class="rr-timeline__time">{formatTime(currentTime)}</span>
-    <div class="rr-progress" ref:progress>
+    <div
+      class="rr-progress"
+      class:disabled="isSkipping"
+      ref:progress on:click="handleProgressClick(event)"
+    >
       <div class="rr-progress__step" ref:step style="width: {percentage}"></div>
       <div
         class="rr-progress__handler"
@@ -155,6 +159,10 @@
         }
       },
       handleProgressClick(event) {
+        const { meta, replayer, isPlaying, isSkipping } = this.get();
+        if (isSkipping) {
+          return;
+        }
         const progressRect = this.refs.progress.getBoundingClientRect();
         const x = event.clientX - progressRect.left;
         let percent = x / progressRect.width;
@@ -163,7 +171,6 @@
         } else if (percent > 1) {
           percent = 1;
         }
-        const { meta, replayer, isPlaying } = this.get();
         const timeOffset = meta.totalTime * percent;
         this.set({ currentTime: timeOffset });
         replayer.play(timeOffset);
@@ -254,7 +261,13 @@
     background: #eee;
     position: relative;
     border-radius: 3px;
-    /* cursor: pointer; */
+    cursor: pointer;
+    border-top: solid 4px #fff;
+    border-bottom: solid 4px #fff;
+  }
+
+  .rr-progress.disabled {
+    cursor: not-allowed;
   }
 
   .rr-progress__step {
diff --git a/src/Player.html b/src/Player.html
index 6ec461a4b6..674d7220d3 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -64,6 +64,9 @@
         const { replayer } = this.get();
         replayer.on(event, handler);
       },
+      addEvent(event) {
+        replayer.addEvent(event);
+      },
     },
     oncreate() {
       const { events } = this.get();

From 3ec07d7712ddf4253b5ef0ee50c75652e4c7a1d3 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 9 Apr 2019 17:06:36 +0800
Subject: [PATCH 122/524] Release 0.3.10

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index eb8c40a934..783cc987b5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From 94e1fbba0c1c1fc06374df80d5a7477ccb2b19a7 Mon Sep 17 00:00:00 2001
From: Xavier <xavier.heysch@ifctrade.com>
Date: Tue, 9 Apr 2019 14:21:18 +0200
Subject: [PATCH 123/524] Fix progress bar height

---
 src/Controller.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Controller.html b/src/Controller.html
index 3af4c71cef..4cf9e338a4 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -257,7 +257,7 @@
 
   .rr-progress {
     width: 100%;
-    height: 4px;
+    height: 12px;
     background: #eee;
     position: relative;
     border-radius: 3px;

From 11b39664b5ff8a83cbf70e0e41adcaacdb8e8108 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 9 Apr 2019 22:11:02 +0800
Subject: [PATCH 124/524] force box-sizing model for progress bar

---
 src/Controller.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Controller.html b/src/Controller.html
index 4cf9e338a4..dac8d1ee57 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -262,6 +262,7 @@
     position: relative;
     border-radius: 3px;
     cursor: pointer;
+    box-sizing: border-box;
     border-top: solid 4px #fff;
     border-bottom: solid 4px #fff;
   }

From 7ca1e36fdda0123737f47c811dc03814551fc99f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 9 Apr 2019 22:11:13 +0800
Subject: [PATCH 125/524] Release 0.3.11

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 783cc987b5..0638a4a18c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From 171d7b39b6c97818477810ae8acc1f8375eef586 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 14 Apr 2019 15:55:34 +0800
Subject: [PATCH 126/524] accept RegExp type block class config

---
 src/snapshot.ts | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 19ce7d2ba9..f0b1813d1c 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -89,7 +89,7 @@ function isSVGElement(el: Element): boolean {
 function serializeNode(
   n: Node,
   doc: Document,
-  blockClass: string,
+  blockClass: string | RegExp,
 ): serializedNode | false {
   switch (n.nodeType) {
     case n.DOCUMENT_NODE:
@@ -105,7 +105,16 @@ function serializeNode(
         systemId: (n as DocumentType).systemId,
       };
     case n.ELEMENT_NODE:
-      const needBlock = (n as HTMLElement).classList.contains(blockClass);
+      let needBlock = false;
+      if (typeof blockClass === 'string') {
+        needBlock = (n as HTMLElement).classList.contains(blockClass);
+      } else {
+        (n as HTMLElement).classList.forEach(className => {
+          if (blockClass.test(className)) {
+            needBlock = true;
+          }
+        });
+      }
       const tagName = (n as HTMLElement).tagName.toLowerCase();
       let attributes: attributes = {};
       for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
@@ -219,7 +228,7 @@ export function serializeNodeWithId(
   n: Node,
   doc: Document,
   map: idNodeMap,
-  blockClass: string,
+  blockClass: string | RegExp,
   skipChild = false,
 ): serializedNodeWithId | null {
   const _serializedNode = serializeNode(n, doc, blockClass);

From ea59841415592633b7fee2534dcf2c2b86c4908d Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 14 Apr 2019 15:55:51 +0800
Subject: [PATCH 127/524] Release 0.7.7

---
 package.json          | 2 +-
 typings/snapshot.d.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index b4164ed9d1..58b0f61243 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index 090eac8413..a121f558e4 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -1,6 +1,6 @@
 import { serializedNodeWithId, idNodeMap } from './types';
 export declare function resetId(): void;
 export declare function absoluteToStylesheet(cssText: string, href: string): string;
-export declare function serializeNodeWithId(n: Node, doc: Document, map: idNodeMap, blockClass: string, skipChild?: boolean): serializedNodeWithId | null;
+export declare function serializeNodeWithId(n: Node, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean): serializedNodeWithId | null;
 declare function snapshot(n: Document, blockClass?: string): [serializedNodeWithId | null, idNodeMap];
 export default snapshot;

From 6218745a752aa02e365db13d9adb9d78d57aea90 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 14 Apr 2019 15:58:13 +0800
Subject: [PATCH 128/524] update typings

---
 src/snapshot.ts       | 2 +-
 typings/snapshot.d.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index f0b1813d1c..49642ed79f 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -270,7 +270,7 @@ export function serializeNodeWithId(
 
 function snapshot(
   n: Document,
-  blockClass = 'rr-block',
+  blockClass: string | RegExp = 'rr-block',
 ): [serializedNodeWithId | null, idNodeMap] {
   resetId();
   const idNodeMap: idNodeMap = {};
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index a121f558e4..7de5fb4c51 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -2,5 +2,5 @@ import { serializedNodeWithId, idNodeMap } from './types';
 export declare function resetId(): void;
 export declare function absoluteToStylesheet(cssText: string, href: string): string;
 export declare function serializeNodeWithId(n: Node, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean): serializedNodeWithId | null;
-declare function snapshot(n: Document, blockClass?: string): [serializedNodeWithId | null, idNodeMap];
+declare function snapshot(n: Document, blockClass?: string | RegExp): [serializedNodeWithId | null, idNodeMap];
 export default snapshot;

From fe6627aed58c5d43450f9c62be4f1942e9f250ac Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 14 Apr 2019 15:59:34 +0800
Subject: [PATCH 129/524] Release 0.7.8

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 58b0f61243..d67f286de6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 78c8c11e6bb7f1202bdf2c9c2081b53043300b79 Mon Sep 17 00:00:00 2001
From: Whalefreezer <roboenator.corp@gmail.com>
Date: Tue, 7 May 2019 01:56:33 +1200
Subject: [PATCH 130/524] add support for css @import rules (#11)

---
 src/snapshot.ts                             | 10 +++++++++-
 test/__snapshots__/integration.ts.snap      | 11 +++++++++++
 test/css/style-with-import.css              |  1 +
 test/html/with-style-sheet-with-import.html | 16 ++++++++++++++++
 4 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 test/css/style-with-import.css
 create mode 100644 test/html/with-style-sheet-with-import.html

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 49642ed79f..1be1b6a406 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -21,13 +21,21 @@ function getCssRulesString(s: CSSStyleSheet): string | null {
   try {
     const rules = s.rules || s.cssRules;
     return rules
-      ? Array.from(rules).reduce((prev, cur) => (prev += cur.cssText), '')
+      ? Array.from(rules).reduce((prev, cur) => prev + getCssRuleString(cur), '')
       : null;
   } catch (error) {
     return null;
   }
 }
 
+function getCssRuleString(rule: CSSRule): string {
+  return isCSSImportRule(rule) ? getCssRulesString(rule.styleSheet) || '' : rule.cssText;
+}
+
+function isCSSImportRule(rule: CSSRule): rule is CSSImportRule {
+  return 'styleSheet' in rule;
+}
+
 function extractOrigin(url: string): string {
   let origin;
   if (url.indexOf('//') > -1) {
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 2c3d42b80a..2ee77d42c5 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -205,3 +205,14 @@ exports[`[html file]: with-style-sheet.html 1`] = `
 </head><body>
 </body></html>"
 `;
+
+exports[`[html file]: with-style-sheet-with-import.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+  <meta charset=\\"UTF-8\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+  <title>with style sheet with import</title>
+  <style>body { margin: 0px; background: url('http://localhost:3030/a.jpg'); }p { color: red; background: url('http://localhost:3030/css/b.jpg'); }body &gt; p { color: yellow; }</style>
+</head><body>
+</body></html>"
+`;
diff --git a/test/css/style-with-import.css b/test/css/style-with-import.css
new file mode 100644
index 0000000000..61058d7b1e
--- /dev/null
+++ b/test/css/style-with-import.css
@@ -0,0 +1 @@
+@import "./style.css";
diff --git a/test/html/with-style-sheet-with-import.html b/test/html/with-style-sheet-with-import.html
new file mode 100644
index 0000000000..6b45f65bc5
--- /dev/null
+++ b/test/html/with-style-sheet-with-import.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>with style sheet with import</title>
+  <link rel="stylesheet" href="/css/style-with-import.css">
+</head>
+
+<body>
+
+</body>
+
+</html>

From 724b67f166d8757f3712a1c661dfdc8e2aa688ce Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 12 May 2019 16:04:14 +0800
Subject: [PATCH 131/524] add inline option which can bypass the inline
 stylesheet

---
 package.json          |  4 ++--
 src/snapshot.ts       | 21 ++++++++++++++++-----
 test/integration.ts   |  4 +++-
 typings/snapshot.d.ts |  4 ++--
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index d67f286de6..e9478e86e4 100644
--- a/package.json
+++ b/package.json
@@ -36,12 +36,12 @@
     "@types/chai": "^4.1.4",
     "@types/mocha": "^5.2.5",
     "@types/node": "^10.11.3",
-    "@types/puppeteer": "^1.8.0",
+    "@types/puppeteer": "^1.12.4",
     "chai": "^4.1.2",
     "cross-env": "^5.2.0",
     "jest-snapshot": "^23.6.0",
     "mocha": "^5.2.0",
-    "puppeteer": "^1.10.0",
+    "puppeteer": "^1.15.0",
     "rollup": "^0.66.4",
     "rollup-plugin-terser": "^3.0.0",
     "rollup-plugin-typescript": "^1.0.0",
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 1be1b6a406..5a56d65ad1 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -21,7 +21,10 @@ function getCssRulesString(s: CSSStyleSheet): string | null {
   try {
     const rules = s.rules || s.cssRules;
     return rules
-      ? Array.from(rules).reduce((prev, cur) => prev + getCssRuleString(cur), '')
+      ? Array.from(rules).reduce(
+          (prev, cur) => prev + getCssRuleString(cur),
+          '',
+        )
       : null;
   } catch (error) {
     return null;
@@ -29,7 +32,9 @@ function getCssRulesString(s: CSSStyleSheet): string | null {
 }
 
 function getCssRuleString(rule: CSSRule): string {
-  return isCSSImportRule(rule) ? getCssRulesString(rule.styleSheet) || '' : rule.cssText;
+  return isCSSImportRule(rule)
+    ? getCssRulesString(rule.styleSheet) || ''
+    : rule.cssText;
 }
 
 function isCSSImportRule(rule: CSSRule): rule is CSSImportRule {
@@ -98,6 +103,7 @@ function serializeNode(
   n: Node,
   doc: Document,
   blockClass: string | RegExp,
+  inlineStylesheet: boolean,
 ): serializedNode | false {
   switch (n.nodeType) {
     case n.DOCUMENT_NODE:
@@ -136,7 +142,7 @@ function serializeNode(
         }
       }
       // remote css
-      if (tagName === 'link') {
+      if (tagName === 'link' && inlineStylesheet) {
         const stylesheet = Array.from(doc.styleSheets).find(s => {
           return s.href === (n as HTMLLinkElement).href;
         });
@@ -238,8 +244,9 @@ export function serializeNodeWithId(
   map: idNodeMap,
   blockClass: string | RegExp,
   skipChild = false,
+  inlineStylesheet = true,
 ): serializedNodeWithId | null {
-  const _serializedNode = serializeNode(n, doc, blockClass);
+  const _serializedNode = serializeNode(n, doc, blockClass, inlineStylesheet);
   if (!_serializedNode) {
     // TODO: dev only
     console.warn(n, 'not serialized');
@@ -279,10 +286,14 @@ export function serializeNodeWithId(
 function snapshot(
   n: Document,
   blockClass: string | RegExp = 'rr-block',
+  inlineStylesheet = true,
 ): [serializedNodeWithId | null, idNodeMap] {
   resetId();
   const idNodeMap: idNodeMap = {};
-  return [serializeNodeWithId(n, n, idNodeMap, blockClass), idNodeMap];
+  return [
+    serializeNodeWithId(n, n, idNodeMap, blockClass, false, inlineStylesheet),
+    idNodeMap,
+  ];
 }
 
 export default snapshot;
diff --git a/test/integration.ts b/test/integration.ts
index 8edcebeefe..c0fdf2af71 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -104,7 +104,9 @@ describe('integration tests', function(this: ISuite) {
       // tslint:disable-next-line: no-console
       page.on('console', msg => console.log(msg.text()));
       await page.goto(`http://localhost:3030/html`);
-      await page.setContent(html.src);
+      await page.setContent(html.src, {
+        waitUntil: 'load',
+      });
       const rebuildHtml = (await page.evaluate(`${this.code}
         const x = new XMLSerializer();
         const [snap] = rrweb.snapshot(document);
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index 7de5fb4c51..61ed516326 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -1,6 +1,6 @@
 import { serializedNodeWithId, idNodeMap } from './types';
 export declare function resetId(): void;
 export declare function absoluteToStylesheet(cssText: string, href: string): string;
-export declare function serializeNodeWithId(n: Node, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean): serializedNodeWithId | null;
-declare function snapshot(n: Document, blockClass?: string | RegExp): [serializedNodeWithId | null, idNodeMap];
+export declare function serializeNodeWithId(n: Node, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean): serializedNodeWithId | null;
+declare function snapshot(n: Document, blockClass?: string | RegExp, inlineStylesheet?: boolean): [serializedNodeWithId | null, idNodeMap];
 export default snapshot;

From 543cad60e07fb7aab3e196219e66fccf5a0a57d7 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 12 May 2019 16:04:45 +0800
Subject: [PATCH 132/524] Release 0.7.9

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e9478e86e4..e8f82ffa97 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.8",
+  "version": "0.7.9",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 0f30dc288cb66296118dcac47c5ab84d5262fd90 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 12 May 2019 21:06:38 +0800
Subject: [PATCH 133/524] pass inline stylesheet option to iteratly

---
 src/snapshot.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 5a56d65ad1..dd2a544713 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -274,6 +274,8 @@ export function serializeNodeWithId(
         doc,
         map,
         blockClass,
+        skipChild,
+        inlineStylesheet,
       );
       if (serializedChildNode) {
         serializedNode.childNodes.push(serializedChildNode);

From bb1fdac86cb2d787168ccf535fa05d5a72639c48 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 12 May 2019 21:06:49 +0800
Subject: [PATCH 134/524] Release 0.7.10

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e8f82ffa97..0b6f305872 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.9",
+  "version": "0.7.10",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 5697c689d9835147dc06061c7c1b350d55548e4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beno=C3=AEt=20Zugmeyer?= <bzugmeyer@gmail.com>
Date: Tue, 21 May 2019 11:55:43 +0200
Subject: [PATCH 135/524] reuse serialized nodes ids (#12)

* reuse serialized nodes ids

With this patch, each DOM node keeps its id during its existence. This
allows to apply RRWeb events to previous snapshots if needed.

`resetId` has been removed because it loses its meaning: calling it
would not reset the existing nodes ids anymore, only the new ones.

Since we don't reset the id anymore, we may exhaust the available ids
quicker, but Number.MAX_SAFE_INTEGER (2 ** 53 - 1) is pretty large, so I
doubt this'll cause any problem.

* improv TS typing

The `nAsINode` variable was not very elegant.  Simplify this by removing
the cast, and make the INode interface compatible with Node.

* update typings
---
 src/index.ts          |  4 ++--
 src/snapshot.ts       | 20 ++++++++++----------
 typings/index.d.ts    |  4 ++--
 typings/snapshot.d.ts |  5 ++---
 4 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index f3238ea290..5b2b0b9f46 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
-import snapshot, { serializeNodeWithId, resetId } from './snapshot';
+import snapshot, { serializeNodeWithId } from './snapshot';
 import rebuild, { buildNodeWithSN } from './rebuild';
 export * from './types';
 
-export { snapshot, serializeNodeWithId, resetId, rebuild, buildNodeWithSN };
+export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN };
diff --git a/src/snapshot.ts b/src/snapshot.ts
index dd2a544713..2c0e170e6a 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -13,10 +13,6 @@ function genId(): number {
   return _id++;
 }
 
-export function resetId() {
-  _id = 1;
-}
-
 function getCssRulesString(s: CSSStyleSheet): string | null {
   try {
     const rules = s.rules || s.cssRules;
@@ -239,7 +235,7 @@ function serializeNode(
 }
 
 export function serializeNodeWithId(
-  n: Node,
+  n: Node | INode,
   doc: Document,
   map: idNodeMap,
   blockClass: string | RegExp,
@@ -252,11 +248,16 @@ export function serializeNodeWithId(
     console.warn(n, 'not serialized');
     return null;
   }
-  const serializedNode = Object.assign(_serializedNode, {
-    id: genId(),
-  });
+  let id
+  // Try to reuse the previous id
+  if ('__sn' in n) {
+    id = n.__sn.id
+  } else {
+    id = genId()
+  }
+  const serializedNode = Object.assign(_serializedNode, { id });
   (n as INode).__sn = serializedNode;
-  map[serializedNode.id] = n as INode;
+  map[id] = (n as INode);
   let recordChild = !skipChild;
   if (serializedNode.type === NodeType.Element) {
     recordChild = recordChild && !serializedNode.needBlock;
@@ -290,7 +291,6 @@ function snapshot(
   blockClass: string | RegExp = 'rr-block',
   inlineStylesheet = true,
 ): [serializedNodeWithId | null, idNodeMap] {
-  resetId();
   const idNodeMap: idNodeMap = {};
   return [
     serializeNodeWithId(n, n, idNodeMap, blockClass, false, inlineStylesheet),
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 60e4970215..87f610a3dd 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,4 +1,4 @@
-import snapshot, { serializeNodeWithId, resetId } from './snapshot';
+import snapshot, { serializeNodeWithId } from './snapshot';
 import rebuild, { buildNodeWithSN } from './rebuild';
 export * from './types';
-export { snapshot, serializeNodeWithId, resetId, rebuild, buildNodeWithSN };
+export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN };
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index 61ed516326..e8605417df 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -1,6 +1,5 @@
-import { serializedNodeWithId, idNodeMap } from './types';
-export declare function resetId(): void;
+import { serializedNodeWithId, INode, idNodeMap } from './types';
 export declare function absoluteToStylesheet(cssText: string, href: string): string;
-export declare function serializeNodeWithId(n: Node, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean): serializedNodeWithId | null;
+export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean): serializedNodeWithId | null;
 declare function snapshot(n: Document, blockClass?: string | RegExp, inlineStylesheet?: boolean): [serializedNodeWithId | null, idNodeMap];
 export default snapshot;

From 9b0c92fd6744eb786aa6af852fa26f0ac3dfad89 Mon Sep 17 00:00:00 2001
From: Razvan Sandu <razvann93@gmail.com>
Date: Thu, 23 May 2019 13:18:10 +0300
Subject: [PATCH 136/524] Allow rendering image tags inside svgs during replay
 (#13)

---
 src/rebuild.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 1d2c535722..d5c67a2cd1 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -109,7 +109,11 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
             continue;
           }
           try {
-            node.setAttribute(name, value);
+            if (n.isSVG && name === 'xlink:href') {
+              node.setAttributeNS('http://www.w3.org/1999/xlink', name, value);
+            } else {
+              node.setAttribute(name, value);
+            }
           } catch (error) {
             // skip invalid attribute
           }

From 40da9ffa2f5a1911a691efa44627bd7412af0916 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 26 May 2019 16:05:47 +0800
Subject: [PATCH 137/524] format code

---
 src/snapshot.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 2c0e170e6a..da6fcf1c73 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -248,16 +248,16 @@ export function serializeNodeWithId(
     console.warn(n, 'not serialized');
     return null;
   }
-  let id
+  let id;
   // Try to reuse the previous id
   if ('__sn' in n) {
-    id = n.__sn.id
+    id = n.__sn.id;
   } else {
-    id = genId()
+    id = genId();
   }
   const serializedNode = Object.assign(_serializedNode, { id });
   (n as INode).__sn = serializedNode;
-  map[id] = (n as INode);
+  map[id] = n as INode;
   let recordChild = !skipChild;
   if (serializedNode.type === NodeType.Element) {
     recordChild = recordChild && !serializedNode.needBlock;

From df137a8f3bb350ec88510ca06ef46a927f46d796 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 26 May 2019 16:05:57 +0800
Subject: [PATCH 138/524] Release 0.7.11

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0b6f305872..2601759cf2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.10",
+  "version": "0.7.11",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 63cb0d95922cdcbb99b3791ef541254d5f22156d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=82=89=E8=82=89=E8=82=89=E8=82=89?=
 <miss.wengxiaojun@163.com>
Date: Wed, 12 Jun 2019 17:51:34 +0800
Subject: [PATCH 139/524] fix translate second to second problem: formatTime
 function in utils/index.ts (#6)

---
 src/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils.js b/src/utils.js
index fbb808db0d..19be8f9712 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -28,7 +28,7 @@ export function formatTime(ms) {
   ms = ms % HOUR;
   const minute = Math.floor(ms / MINUTE);
   ms = ms % MINUTE;
-  const second = Math.round(ms / SECOND);
+  const second = Math.floor(ms / SECOND);
   if (hour) {
     return `${padZero(hour)}:${padZero(minute)}:${padZero(second)}`;
   }

From 77c70537518045f777f7ac558ea8cb3fa2a3c6e7 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 15 Jun 2019 14:41:36 +0800
Subject: [PATCH 140/524] add mask all inputs option to snapshot

---
 src/snapshot.ts | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index da6fcf1c73..0ffa96d8da 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -100,6 +100,7 @@ function serializeNode(
   doc: Document,
   blockClass: string | RegExp,
   inlineStylesheet: boolean,
+  maskAllInputs: boolean,
 ): serializedNode | false {
   switch (n.nodeType) {
     case n.DOCUMENT_NODE:
@@ -177,7 +178,7 @@ function serializeNode(
           attributes.type !== 'checkbox' &&
           value
         ) {
-          attributes.value = value;
+          attributes.value = maskAllInputs ? '*'.repeat(value.length) : value;
         } else if ((n as HTMLInputElement).checked) {
           attributes.checked = (n as HTMLInputElement).checked;
         }
@@ -241,8 +242,15 @@ export function serializeNodeWithId(
   blockClass: string | RegExp,
   skipChild = false,
   inlineStylesheet = true,
+  maskAllInputs = false,
 ): serializedNodeWithId | null {
-  const _serializedNode = serializeNode(n, doc, blockClass, inlineStylesheet);
+  const _serializedNode = serializeNode(
+    n,
+    doc,
+    blockClass,
+    inlineStylesheet,
+    maskAllInputs,
+  );
   if (!_serializedNode) {
     // TODO: dev only
     console.warn(n, 'not serialized');
@@ -290,10 +298,19 @@ function snapshot(
   n: Document,
   blockClass: string | RegExp = 'rr-block',
   inlineStylesheet = true,
+  maskAllInputs = false,
 ): [serializedNodeWithId | null, idNodeMap] {
   const idNodeMap: idNodeMap = {};
   return [
-    serializeNodeWithId(n, n, idNodeMap, blockClass, false, inlineStylesheet),
+    serializeNodeWithId(
+      n,
+      n,
+      idNodeMap,
+      blockClass,
+      false,
+      inlineStylesheet,
+      maskAllInputs,
+    ),
     idNodeMap,
   ];
 }

From 0865c829488cf8caa444e6221ab4e84040fc74a1 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 15 Jun 2019 14:41:47 +0800
Subject: [PATCH 141/524] Release 0.7.12

---
 package.json          | 2 +-
 typings/snapshot.d.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 2601759cf2..c827bc5ef7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.11",
+  "version": "0.7.12",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index e8605417df..594b8ccd0a 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -1,5 +1,5 @@
 import { serializedNodeWithId, INode, idNodeMap } from './types';
 export declare function absoluteToStylesheet(cssText: string, href: string): string;
-export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean): serializedNodeWithId | null;
-declare function snapshot(n: Document, blockClass?: string | RegExp, inlineStylesheet?: boolean): [serializedNodeWithId | null, idNodeMap];
+export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean, maskAllInputs?: boolean): serializedNodeWithId | null;
+declare function snapshot(n: Document, blockClass?: string | RegExp, inlineStylesheet?: boolean, maskAllInputs?: boolean): [serializedNodeWithId | null, idNodeMap];
 export default snapshot;

From 005bd6f4d16ba5aa2f9b814fc485ea9073cb541b Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 22 Jun 2019 23:07:36 +0800
Subject: [PATCH 142/524] update dependency

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0638a4a18c..d2b9029cde 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.7.11"
+    "rrweb": "^0.7.17"
   },
   "scripts": {
     "build": "rollup -c",

From f887b1e77334881b9d4482b8925799ea14494515 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 22 Jun 2019 23:07:45 +0800
Subject: [PATCH 143/524] Release 0.3.12

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d2b9029cde..c8f7e651a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From a8ee7ea3a24929772c85d8d0f4afe581b809847b Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 23 Jun 2019 20:03:54 +0800
Subject: [PATCH 144/524] Release 0.3.13

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c8f7e651a8..64d3dcf403 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From a528fb2e46e39af813ab4ebbfa8bdefae1dca098 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 23 Jun 2019 20:04:42 +0800
Subject: [PATCH 145/524] Release 0.3.12

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 64d3dcf403..c8f7e651a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.13",
+  "version": "0.3.12",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From 682ac0e2b7cbfaed68fa4d339253ac7a33d8145c Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 23 Jun 2019 20:06:22 +0800
Subject: [PATCH 146/524] fix version number

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c8f7e651a8..64d3dcf403 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From d172b706385717d1d735bb982c51d3ccd6541113 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 23 Jun 2019 20:06:29 +0800
Subject: [PATCH 147/524] Release 0.3.12

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 64d3dcf403..c8f7e651a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.13",
+  "version": "0.3.12",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From df146eef9597c49f1e926eb7b72e3827b5b4dcdb Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 23 Jun 2019 20:08:41 +0800
Subject: [PATCH 148/524] Release 0.3.14

---
 .release-it.json | 5 +++--
 package.json     | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.release-it.json b/.release-it.json
index 1c32fadbb1..65a2f9aa56 100644
--- a/.release-it.json
+++ b/.release-it.json
@@ -1,4 +1,5 @@
 {
-  "non-interactive": true,
-  "buildCommand": "npm run build"
+  "non-interactive": false,
+  "buildCommand": "npm run build",
+  "requireCleanWorkingDir": false
 }
diff --git a/package.json b/package.json
index c8f7e651a8..06984d63e0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From 61a99c642a7e2b37be96b6ff9dbaf8dd42b90c42 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 4 Aug 2019 14:35:35 +0800
Subject: [PATCH 149/524] Use css parser to add hover class name to selectors.
 Previously we use a regexp to match all the CSS selectors and add our hover
 class name to it, which has been proved not solid and may be very slow in
 some situation. Using a production ready css parser can handle this better
 and also provide ability's to do more accurate things to the recorded
 stylesheets.

---
 src/css.ts             | 909 +++++++++++++++++++++++++++++++++++++++++
 src/rebuild.ts         |  24 +-
 test/css.test.ts       | 111 +++++
 test/css/benchmark.css |   6 +
 test/rebuild.test.ts   |  14 +
 5 files changed, 1054 insertions(+), 10 deletions(-)
 create mode 100644 src/css.ts
 create mode 100644 test/css.test.ts
 create mode 100644 test/css/benchmark.css

diff --git a/src/css.ts b/src/css.ts
new file mode 100644
index 0000000000..1bef07fb30
--- /dev/null
+++ b/src/css.ts
@@ -0,0 +1,909 @@
+/**
+ * This file is a fork of https://github.com/reworkcss/css/blob/master/lib/parse/index.js
+ * I fork it because:
+ * 1. The css library was built for node.js which does not have tree-shaking supports.
+ * 2. Rewrites into typescript give us a better type interface.
+ */
+
+/* tslint:disable no-conditional-assignment interface-name no-shadowed-variable */
+
+export interface ParserOptions {
+  /** Silently fail on parse errors */
+  silent?: boolean;
+  /**
+   * The path to the file containing css.
+   * Makes errors and source maps more helpful, by letting them know where code comes from.
+   */
+  source?: string;
+}
+
+/**
+ * Error thrown during parsing.
+ */
+export interface ParserError {
+  /** The full error message with the source position. */
+  message?: string;
+  /** The error message without position. */
+  reason?: string;
+  /** The value of options.source if passed to css.parse. Otherwise undefined. */
+  filename?: string;
+  line?: number;
+  column?: number;
+  /** The portion of code that couldn't be parsed. */
+  source?: string;
+}
+
+export interface Loc {
+  line?: number;
+  column?: number;
+}
+
+/**
+ * Base AST Tree Node.
+ */
+export interface Node {
+  /** The possible values are the ones listed in the Types section on https://github.com/reworkcss/css page. */
+  type?: string;
+  /** A reference to the parent node, or null if the node has no parent. */
+  parent?: Node;
+  /** Information about the position in the source string that corresponds to the node. */
+  position?: {
+    start?: Loc;
+    end?: Loc;
+    /** The value of options.source if passed to css.parse. Otherwise undefined. */
+    source?: string;
+    /** The full source string passed to css.parse. */
+    content?: string;
+  };
+}
+
+export interface Rule extends Node {
+  /** The list of selectors of the rule, split on commas. Each selector is trimmed from whitespace and comments. */
+  selectors?: string[];
+  /** Array of nodes with the types declaration and comment. */
+  declarations?: Array<Declaration | Comment>;
+}
+
+export interface Declaration extends Node {
+  /** The property name, trimmed from whitespace and comments. May not be empty. */
+  property?: string;
+  /** The value of the property, trimmed from whitespace and comments. Empty values are allowed. */
+  value?: string;
+}
+
+/**
+ * A rule-level or declaration-level comment. Comments inside selectors, properties and values etc. are lost.
+ */
+export interface Comment extends Node {
+  comment?: string;
+}
+
+/**
+ * The @charset at-rule.
+ */
+export interface Charset extends Node {
+  /** The part following @charset. */
+  charset?: string;
+}
+
+/**
+ * The @custom-media at-rule
+ */
+export interface CustomMedia extends Node {
+  /** The ---prefixed name. */
+  name?: string;
+  /** The part following the name. */
+  media?: string;
+}
+
+/**
+ * The @document at-rule.
+ */
+export interface Document extends Node {
+  /** The part following @document. */
+  document?: string;
+  /** The vendor prefix in @document, or undefined if there is none. */
+  vendor?: string;
+  /** Array of nodes with the types rule, comment and any of the at-rule types. */
+  rules?: Array<Rule | Comment | AtRule>;
+}
+
+/**
+ * The @font-face at-rule.
+ */
+export interface FontFace extends Node {
+  /** Array of nodes with the types declaration and comment. */
+  declarations?: Array<Declaration | Comment>;
+}
+
+/**
+ * The @host at-rule.
+ */
+export interface Host extends Node {
+  /** Array of nodes with the types rule, comment and any of the at-rule types. */
+  rules?: Array<Rule | Comment | AtRule>;
+}
+
+/**
+ * The @import at-rule.
+ */
+export interface Import extends Node {
+  /** The part following @import. */
+  import?: string;
+}
+
+/**
+ * The @keyframes at-rule.
+ */
+export interface KeyFrames extends Node {
+  /** The name of the keyframes rule. */
+  name?: string;
+  /** The vendor prefix in @keyframes, or undefined if there is none. */
+  vendor?: string;
+  /** Array of nodes with the types keyframe and comment. */
+  keyframes?: Array<KeyFrame | Comment>;
+}
+
+export interface KeyFrame extends Node {
+  /** The list of "selectors" of the keyframe rule, split on commas. Each “selector” is trimmed from whitespace. */
+  values?: string[];
+  /** Array of nodes with the types declaration and comment. */
+  declarations?: Array<Declaration | Comment>;
+}
+
+/**
+ * The @media at-rule.
+ */
+export interface Media extends Node {
+  /** The part following @media. */
+  media?: string;
+  /** Array of nodes with the types rule, comment and any of the at-rule types. */
+  rules?: Array<Rule | Comment | AtRule>;
+}
+
+/**
+ * The @namespace at-rule.
+ */
+export interface Namespace extends Node {
+  /** The part following @namespace. */
+  namespace?: string;
+}
+
+/**
+ * The @page at-rule.
+ */
+export interface Page extends Node {
+  /** The list of selectors of the rule, split on commas. Each selector is trimmed from whitespace and comments. */
+  selectors?: string[];
+  /** Array of nodes with the types declaration and comment. */
+  declarations?: Array<Declaration | Comment>;
+}
+
+/**
+ * The @supports at-rule.
+ */
+export interface Supports extends Node {
+  /** The part following @supports. */
+  supports?: string;
+  /** Array of nodes with the types rule, comment and any of the at-rule types. */
+  rules?: Array<Rule | Comment | AtRule>;
+}
+
+/** All at-rules. */
+export type AtRule =
+  | Charset
+  | CustomMedia
+  | Document
+  | FontFace
+  | Host
+  | Import
+  | KeyFrames
+  | Media
+  | Namespace
+  | Page
+  | Supports;
+
+/**
+ * A collection of rules
+ */
+export interface StyleRules {
+  source?: string;
+  /** Array of nodes with the types rule, comment and any of the at-rule types. */
+  rules: Array<Rule | Comment | AtRule>;
+  /** Array of Errors. Errors collected during parsing when option silent is true. */
+  parsingErrors?: ParserError[];
+}
+
+/**
+ * The root node returned by css.parse.
+ */
+export interface Stylesheet extends Node {
+  stylesheet?: StyleRules;
+}
+
+// http://www.w3.org/TR/CSS21/grammar.html
+// https://github.com/visionmedia/css-parse/pull/49#issuecomment-30088027
+const commentre = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;
+
+export function parse(css: string, options: ParserOptions = {}) {
+  /**
+   * Positional.
+   */
+
+  let lineno = 1;
+  let column = 1;
+
+  /**
+   * Update lineno and column based on `str`.
+   */
+
+  function updatePosition(str: string) {
+    const lines = str.match(/\n/g);
+    if (lines) {
+      lineno += lines.length;
+    }
+    let i = str.lastIndexOf('\n');
+    column = i === -1 ? column + str.length : str.length - i;
+  }
+
+  /**
+   * Mark position and patch `node.position`.
+   */
+
+  function position() {
+    const start = { line: lineno, column };
+    return (
+      node: Rule | Declaration | Comment | AtRule | Stylesheet | KeyFrame,
+    ) => {
+      node.position = new Position(start);
+      whitespace();
+      return node;
+    };
+  }
+
+  /**
+   * Store position information for a node
+   */
+
+  class Position {
+    public content!: string;
+    public start!: Loc;
+    public end!: Loc;
+    public source?: string;
+
+    constructor(start: Loc) {
+      this.start = start;
+      this.end = { line: lineno, column };
+      this.source = options.source;
+    }
+  }
+
+  /**
+   * Non-enumerable source string
+   */
+
+  Position.prototype.content = css;
+
+  const errorsList: ParserError[] = [];
+
+  function error(msg: string) {
+    const err = new Error(
+      options.source + ':' + lineno + ':' + column + ': ' + msg,
+    ) as ParserError;
+    err.reason = msg;
+    err.filename = options.source;
+    err.line = lineno;
+    err.column = column;
+    err.source = css;
+
+    if (options.silent) {
+      errorsList.push(err);
+    } else {
+      throw err;
+    }
+  }
+
+  /**
+   * Parse stylesheet.
+   */
+
+  function stylesheet(): Stylesheet {
+    const rulesList = rules();
+
+    return {
+      type: 'stylesheet',
+      stylesheet: {
+        source: options.source,
+        rules: rulesList,
+        parsingErrors: errorsList,
+      },
+    };
+  }
+
+  /**
+   * Opening brace.
+   */
+
+  function open() {
+    return match(/^{\s*/);
+  }
+
+  /**
+   * Closing brace.
+   */
+
+  function close() {
+    return match(/^}/);
+  }
+
+  /**
+   * Parse ruleset.
+   */
+
+  function rules() {
+    let node: Rule | void;
+    const rules: Rule[] = [];
+    whitespace();
+    comments(rules);
+    while (css.length && css.charAt(0) !== '}' && (node = atrule() || rule())) {
+      if (node !== false) {
+        rules.push(node);
+        comments(rules);
+      }
+    }
+    return rules;
+  }
+
+  /**
+   * Match `re` and return captures.
+   */
+
+  function match(re: RegExp) {
+    const m = re.exec(css);
+    if (!m) {
+      return;
+    }
+    const str = m[0];
+    updatePosition(str);
+    css = css.slice(str.length);
+    return m;
+  }
+
+  /**
+   * Parse whitespace.
+   */
+
+  function whitespace() {
+    match(/^\s*/);
+  }
+
+  /**
+   * Parse comments;
+   */
+
+  function comments(rules: Rule[] = []) {
+    let c: Comment | void;
+    while ((c = comment())) {
+      if (c !== false) {
+        rules.push(c);
+      }
+      c = comment();
+    }
+    return rules;
+  }
+
+  /**
+   * Parse comment.
+   */
+
+  function comment() {
+    const pos = position();
+    if ('/' !== css.charAt(0) || '*' !== css.charAt(1)) {
+      return;
+    }
+
+    let i = 2;
+    while (
+      '' !== css.charAt(i) &&
+      ('*' !== css.charAt(i) || '/' !== css.charAt(i + 1))
+    ) {
+      ++i;
+    }
+    i += 2;
+
+    if ('' === css.charAt(i - 1)) {
+      return error('End of comment missing');
+    }
+
+    const str = css.slice(2, i - 2);
+    column += 2;
+    updatePosition(str);
+    css = css.slice(i);
+    column += 2;
+
+    return pos({
+      type: 'comment',
+      comment: str,
+    });
+  }
+
+  /**
+   * Parse selector.
+   */
+
+  function selector() {
+    const m = match(/^([^{]+)/);
+    if (!m) {
+      return;
+    }
+    /* @fix Remove all comments from selectors
+     * http://ostermiller.org/findcomment.html */
+    return trim(m[0])
+      .replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '')
+      .replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, m => {
+        return m.replace(/,/g, '\u200C');
+      })
+      .split(/\s*(?![^(]*\)),\s*/)
+      .map(s => {
+        return s.replace(/\u200C/g, ',');
+      });
+  }
+
+  /**
+   * Parse declaration.
+   */
+
+  function declaration(): Declaration | void | never {
+    const pos = position();
+
+    // prop
+    let propMatch = match(/^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/);
+    if (!propMatch) {
+      return;
+    }
+    const prop = trim(propMatch[0]);
+
+    // :
+    if (!match(/^:\s*/)) {
+      return error(`property missing ':'`);
+    }
+
+    // val
+    const val = match(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/);
+
+    const ret = pos({
+      type: 'declaration',
+      property: prop.replace(commentre, ''),
+      value: val ? trim(val[0]).replace(commentre, '') : '',
+    });
+
+    // ;
+    match(/^[;\s]*/);
+
+    return ret;
+  }
+
+  /**
+   * Parse declarations.
+   */
+
+  function declarations() {
+    const decls: Array<object> = [];
+
+    if (!open()) {
+      return error(`missing '{'`);
+    }
+    comments(decls);
+
+    // declarations
+    let decl;
+    while ((decl = declaration())) {
+      if ((decl as unknown) !== false) {
+        decls.push(decl);
+        comments(decls);
+      }
+      decl = declaration();
+    }
+
+    if (!close()) {
+      return error(`missing '}'`);
+    }
+    return decls;
+  }
+
+  /**
+   * Parse keyframe.
+   */
+
+  function keyframe() {
+    let m;
+    const vals = [];
+    const pos = position();
+
+    while ((m = match(/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/))) {
+      vals.push(m[1]);
+      match(/^,\s*/);
+    }
+
+    if (!vals.length) {
+      return;
+    }
+
+    return pos({
+      type: 'keyframe',
+      values: vals,
+      declarations: declarations() as Declaration[],
+    });
+  }
+
+  /**
+   * Parse keyframes.
+   */
+
+  function atkeyframes() {
+    const pos = position();
+    let m = match(/^@([-\w]+)?keyframes\s*/);
+
+    if (!m) {
+      return;
+    }
+    const vendor = m[1];
+
+    // identifier
+    m = match(/^([-\w]+)\s*/);
+    if (!m) {
+      return error('@keyframes missing name');
+    }
+    const name = m[1];
+
+    if (!open()) {
+      return error(`@keyframes missing '{'`);
+    }
+
+    let frame;
+    let frames = comments();
+    while ((frame = keyframe())) {
+      frames.push(frame);
+      frames = frames.concat(comments());
+    }
+
+    if (!close()) {
+      return error(`@keyframes missing '}'`);
+    }
+
+    return pos({
+      type: 'keyframes',
+      name,
+      vendor,
+      keyframes: frames,
+    });
+  }
+
+  /**
+   * Parse supports.
+   */
+
+  function atsupports() {
+    const pos = position();
+    const m = match(/^@supports *([^{]+)/);
+
+    if (!m) {
+      return;
+    }
+    const supports = trim(m[1]);
+
+    if (!open()) {
+      return error(`@supports missing '{'`);
+    }
+
+    const style = comments().concat(rules());
+
+    if (!close()) {
+      return error(`@supports missing '}'`);
+    }
+
+    return pos({
+      type: 'supports',
+      supports,
+      rules: style,
+    });
+  }
+
+  /**
+   * Parse host.
+   */
+
+  function athost() {
+    const pos = position();
+    const m = match(/^@host\s*/);
+
+    if (!m) {
+      return;
+    }
+
+    if (!open()) {
+      return error(`@host missing '{'`);
+    }
+
+    const style = comments().concat(rules());
+
+    if (!close()) {
+      return error(`@host missing '}'`);
+    }
+
+    return pos({
+      type: 'host',
+      rules: style,
+    });
+  }
+
+  /**
+   * Parse media.
+   */
+
+  function atmedia() {
+    const pos = position();
+    const m = match(/^@media *([^{]+)/);
+
+    if (!m) {
+      return;
+    }
+    const media = trim(m[1]);
+
+    if (!open()) {
+      return error(`@media missing '{'`);
+    }
+
+    const style = comments().concat(rules());
+
+    if (!close()) {
+      return error(`@media missing '}'`);
+    }
+
+    return pos({
+      type: 'media',
+      media,
+      rules: style,
+    });
+  }
+
+  /**
+   * Parse custom-media.
+   */
+
+  function atcustommedia() {
+    const pos = position();
+    const m = match(/^@custom-media\s+(--[^\s]+)\s*([^{;]+);/);
+    if (!m) {
+      return;
+    }
+
+    return pos({
+      type: 'custom-media',
+      name: trim(m[1]),
+      media: trim(m[2]),
+    });
+  }
+
+  /**
+   * Parse paged media.
+   */
+
+  function atpage() {
+    const pos = position();
+    const m = match(/^@page */);
+    if (!m) {
+      return;
+    }
+
+    const sel = selector() || [];
+
+    if (!open()) {
+      return error(`@page missing '{'`);
+    }
+    let decls = comments();
+
+    // declarations
+    let decl;
+    while ((decl = declaration())) {
+      decls.push(decl);
+      decls = decls.concat(comments());
+    }
+
+    if (!close()) {
+      return error(`@page missing '}'`);
+    }
+
+    return pos({
+      type: 'page',
+      selectors: sel,
+      declarations: decls,
+    });
+  }
+
+  /**
+   * Parse document.
+   */
+
+  function atdocument() {
+    const pos = position();
+    const m = match(/^@([-\w]+)?document *([^{]+)/);
+    if (!m) {
+      return;
+    }
+
+    const vendor = trim(m[1]);
+    const doc = trim(m[2]);
+
+    if (!open()) {
+      return error(`@document missing '{'`);
+    }
+
+    const style = comments().concat(rules());
+
+    if (!close()) {
+      return error(`@document missing '}'`);
+    }
+
+    return pos({
+      type: 'document',
+      document: doc,
+      vendor,
+      rules: style,
+    });
+  }
+
+  /**
+   * Parse font-face.
+   */
+
+  function atfontface() {
+    const pos = position();
+    const m = match(/^@font-face\s*/);
+    if (!m) {
+      return;
+    }
+
+    if (!open()) {
+      return error(`@font-face missing '{'`);
+    }
+    let decls = comments();
+
+    // declarations
+    let decl;
+    while ((decl = declaration())) {
+      decls.push(decl);
+      decls = decls.concat(comments());
+    }
+
+    if (!close()) {
+      return error(`@font-face missing '}'`);
+    }
+
+    return pos({
+      type: 'font-face',
+      declarations: decls,
+    });
+  }
+
+  /**
+   * Parse import
+   */
+
+  const atimport = _compileAtrule('import');
+
+  /**
+   * Parse charset
+   */
+
+  const atcharset = _compileAtrule('charset');
+
+  /**
+   * Parse namespace
+   */
+
+  const atnamespace = _compileAtrule('namespace');
+
+  /**
+   * Parse non-block at-rules
+   */
+
+  function _compileAtrule(name: string) {
+    const re = new RegExp('^@' + name + '\\s*([^;]+);');
+    return () => {
+      const pos = position();
+      const m = match(re);
+      if (!m) {
+        return;
+      }
+      const ret: Record<string, string> = { type: name };
+      ret[name] = m[1].trim();
+      return pos(ret);
+    };
+  }
+
+  /**
+   * Parse at rule.
+   */
+
+  function atrule() {
+    if (css[0] !== '@') {
+      return;
+    }
+
+    return (
+      atkeyframes() ||
+      atmedia() ||
+      atcustommedia() ||
+      atsupports() ||
+      atimport() ||
+      atcharset() ||
+      atnamespace() ||
+      atdocument() ||
+      atpage() ||
+      athost() ||
+      atfontface()
+    );
+  }
+
+  /**
+   * Parse rule.
+   */
+
+  function rule() {
+    const pos = position();
+    const sel = selector();
+
+    if (!sel) {
+      return error('selector missing');
+    }
+    comments();
+
+    return pos({
+      type: 'rule',
+      selectors: sel,
+      declarations: declarations() as Declaration[],
+    });
+  }
+
+  return addParent(stylesheet());
+}
+
+/**
+ * Trim `str`.
+ */
+
+function trim(str: string) {
+  return str ? str.replace(/^\s+|\s+$/g, '') : '';
+}
+
+/**
+ * Adds non-enumerable parent node reference to each node.
+ */
+
+function addParent(obj: Stylesheet, parent?: Stylesheet) {
+  const isNode = obj && typeof obj.type === 'string';
+  const childParent = isNode ? obj : parent;
+
+  for (const k of Object.keys(obj)) {
+    const value = obj[k as keyof Stylesheet];
+    if (Array.isArray(value)) {
+      value.forEach(v => {
+        addParent(v, childParent);
+      });
+    } else if (value && typeof value === 'object') {
+      addParent((value as unknown) as Stylesheet, childParent);
+    }
+  }
+
+  if (isNode) {
+    Object.defineProperty(obj, 'parent', {
+      configurable: true,
+      writable: true,
+      enumerable: false,
+      value: parent || null,
+    });
+  }
+
+  return obj;
+}
diff --git a/src/rebuild.ts b/src/rebuild.ts
index d5c67a2cd1..94cc244cb3 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -1,3 +1,4 @@
+import { parse } from './css';
 import {
   serializedNodeWithId,
   NodeType,
@@ -55,20 +56,23 @@ function getTagName(n: elementNode): string {
   return tagName;
 }
 
-const CSS_SELECTOR = /([^\r\n,{}]+)(,(?=[^}]*{)|\s*{)/g;
 const HOVER_SELECTOR = /([^\\]):hover/g;
 export function addHoverClass(cssText: string): string {
-  return cssText.replace(CSS_SELECTOR, (match, p1: string, p2: string) => {
-    if (HOVER_SELECTOR.test(p1)) {
-      const newSelector = p1.replace(HOVER_SELECTOR, '$1.\\:hover');
-      return `${p1.replace(/\s*$/, '')}, ${newSelector.replace(
-        /^\s*/,
-        '',
-      )}${p2}`;
-    } else {
-      return match;
+  const ast = parse(cssText);
+  if (!ast.stylesheet) {
+    return cssText;
+  }
+  ast.stylesheet.rules.forEach(rule => {
+    if ('selectors' in rule) {
+      (rule.selectors || []).forEach((selector: string) => {
+        if (HOVER_SELECTOR.test(selector)) {
+          const newSelector = selector.replace(HOVER_SELECTOR, '$1.\\:hover');
+          cssText = cssText.replace(selector, `${selector}, ${newSelector}`);
+        }
+      });
     }
   });
+  return cssText;
 }
 
 function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
diff --git a/test/css.test.ts b/test/css.test.ts
new file mode 100644
index 0000000000..f94c06d7d9
--- /dev/null
+++ b/test/css.test.ts
@@ -0,0 +1,111 @@
+import 'mocha';
+import { expect } from 'chai';
+import { parse, Rule, Media } from '../src/css';
+
+describe('css parser', () => {
+  it('should save the filename and source', () => {
+    const css = 'booty {\n  size: large;\n}\n';
+    const ast = parse(css, {
+      source: 'booty.css',
+    });
+
+    expect(ast.stylesheet!.source).to.equal('booty.css');
+
+    const position = ast.stylesheet!.rules[0].position!;
+    expect(position.start).to.be.ok;
+    expect(position.end).to.be.ok;
+    expect(position.source).to.equal('booty.css');
+    expect(position.content).to.equal(css);
+  });
+
+  it('should throw when a selector is missing', () => {
+    expect(() => {
+      parse('{size: large}');
+    }).to.throw();
+
+    expect(() => {
+      parse('b { color: red; }\n{ color: green; }\na { color: blue; }');
+    }).to.throw();
+  });
+
+  it('should throw when a broken comment is found', () => {
+    expect(() => {
+      parse('thing { color: red; } /* b { color: blue; }');
+    }).to.throw();
+
+    expect(() => {
+      parse('/*');
+    }).to.throw();
+
+    /* Nested comments should be fine */
+    expect(() => {
+      parse('/* /* */');
+    }).to.not.throw();
+  });
+
+  it('should allow empty property value', () => {
+    expect(() => {
+      parse('p { color:; }');
+    }).to.not.throw();
+  });
+
+  it('should not throw with silent option', () => {
+    expect(() => {
+      parse('thing { color: red; } /* b { color: blue; }', { silent: true });
+    }).to.not.throw();
+  });
+
+  it('should list the parsing errors and continue parsing', () => {
+    const result = parse(
+      'foo { color= red; } bar { color: blue; } baz {}} boo { display: none}',
+      {
+        silent: true,
+        source: 'foo.css',
+      },
+    );
+
+    const rules = result.stylesheet!.rules;
+    expect(rules.length).to.above(2);
+
+    const errors = result.stylesheet!.parsingErrors!;
+    expect(errors.length).to.equal(2);
+
+    expect(errors[0]).to.have.property('message');
+    expect(errors[0]).to.have.property('reason');
+    expect(errors[0]).to.have.property('filename');
+    expect(errors[0]).to.have.property('line');
+    expect(errors[0]).to.have.property('column');
+    expect(errors[0]).to.have.property('source');
+    expect(errors[0].filename).to.equal('foo.css');
+  });
+
+  it('should set parent property', () => {
+    const result = parse(
+      'thing { test: value; }\n' +
+        '@media (min-width: 100px) { thing { test: value; } }',
+    );
+
+    expect(result.parent).to.equal(null);
+
+    const rules = result.stylesheet!.rules;
+    expect(rules.length).to.equal(2);
+
+    let rule = rules[0] as Rule;
+    expect(rule.parent).to.equal(result);
+    expect(rule.declarations!.length).to.equal(1);
+
+    let decl = rule.declarations![0];
+    expect(decl.parent).to.equal(rule);
+
+    const media = rules[1] as Media;
+    expect(media.parent).to.equal(result);
+    expect(media.rules!.length).to.equal(1);
+
+    rule = media.rules![0] as Rule;
+    expect(rule.parent).to.equal(media);
+
+    expect(rule.declarations!.length).to.equal(1);
+    decl = rule.declarations![0];
+    expect(decl.parent).to.equal(rule);
+  });
+});
diff --git a/test/css/benchmark.css b/test/css/benchmark.css
new file mode 100644
index 0000000000..ea7e0585c3
--- /dev/null
+++ b/test/css/benchmark.css
@@ -0,0 +1,6 @@
+/*!-----------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Version: 0.17.0(63d87164d0bc8c6206d9339c195289c93665028e)
+ * Released under the MIT license
+ * https://github.com/Microsoft/vscode/blob/master/LICENSE.txt
+ *-----------------------------------------------------------*/.monaco-action-bar{text-align:right;overflow:hidden;white-space:nowrap}.monaco-action-bar .actions-container{display:flex;margin:0 auto;padding:0;width:100%;justify-content:flex-end}.monaco-action-bar.vertical .actions-container{display:inline-block}.monaco-action-bar.reverse .actions-container{flex-direction:row-reverse}.monaco-action-bar .action-item{cursor:pointer;display:inline-block;transition:transform 50ms ease;position:relative}.monaco-action-bar .action-item.disabled{cursor:default}.monaco-action-bar.animated .action-item.active{transform:scale(1.272019649)}.monaco-action-bar .action-item .icon{display:inline-block}.monaco-action-bar .action-label{font-size:11px;margin-right:4px}.monaco-action-bar .action-label.octicon{font-size:15px;line-height:35px;text-align:center}.monaco-action-bar .action-item.disabled .action-label,.monaco-action-bar .action-item.disabled .action-label:hover{opacity:.4}.monaco-action-bar.vertical{text-align:left}.monaco-action-bar.vertical .action-item{display:block}.monaco-action-bar.vertical .action-label.separator{display:block;border-bottom:1px solid #bbb;padding-top:1px;margin-left:.8em;margin-right:.8em}.monaco-action-bar.animated.vertical .action-item.active{transform:translate(5px)}.secondary-actions .monaco-action-bar .action-label{margin-left:6px}.monaco-action-bar .action-item.select-container{overflow:hidden;flex:1;max-width:170px;min-width:60px;display:flex;align-items:center;justify-content:center}.monaco-aria-container{position:absolute;left:-999em}.monaco-custom-checkbox{margin-left:2px;float:left;cursor:pointer;overflow:hidden;opacity:.7;width:20px;height:20px;border:1px solid transparent;padding:1px;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none}.monaco-custom-checkbox.checked,.monaco-custom-checkbox:hover{opacity:1}.hc-black .monaco-custom-checkbox,.hc-black .monaco-custom-checkbox:hover{background:none}.context-view{position:absolute;z-index:2000}.monaco-count-badge{padding:.3em .5em;border-radius:1em;font-size:85%;min-width:1.6em;line-height:1em;font-weight:400;text-align:center;display:inline-block;box-sizing:border-box}.monaco-findInput{position:relative}.monaco-findInput .monaco-inputbox{font-size:13px;width:100%}.monaco-findInput>.controls{position:absolute;top:3px;right:2px}.vs .monaco-findInput.disabled{background-color:#e1e1e1}.vs-dark .monaco-findInput.disabled{background-color:#333}.monaco-findInput.highlight-0 .controls{animation:monaco-findInput-highlight-0 .1s linear 0s}.monaco-findInput.highlight-1 .controls{animation:monaco-findInput-highlight-1 .1s linear 0s}.hc-black .monaco-findInput.highlight-0 .controls,.vs-dark .monaco-findInput.highlight-0 .controls{animation:monaco-findInput-highlight-dark-0 .1s linear 0s}.hc-black .monaco-findInput.highlight-1 .controls,.vs-dark .monaco-findInput.highlight-1 .controls{animation:monaco-findInput-highlight-dark-1 .1s linear 0s}@keyframes monaco-findInput-highlight-0{0%{background:rgba(253,255,0,.8)}to{background:transparent}}@keyframes monaco-findInput-highlight-1{0%{background:rgba(253,255,0,.8)}99%{background:transparent}}@keyframes monaco-findInput-highlight-dark-0{0%{background:hsla(0,0%,100%,.44)}to{background:transparent}}@keyframes monaco-findInput-highlight-dark-1{0%{background:hsla(0,0%,100%,.44)}99%{background:transparent}}.vs .monaco-custom-checkbox.monaco-case-sensitive{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe29wYWNpdHk6MDtmaWxsOiNGNkY2RjY7fSAuc3Qxe2ZpbGw6I0Y2RjZGNjt9IC5zdDJ7ZmlsbDojNDI0MjQyO308L3N0eWxlPjxnIGlkPSJvdXRsaW5lIj48cmVjdCBjbGFzcz0ic3QwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTQuMTc2IDUuNTkyYy0uNTU1LS42LTEuMzM2LS45MDQtMi4zMjItLjkwNC0uMjU4IDAtLjUyMS4wMjQtLjc4NC4wNzItLjI0Ni4wNDQtLjQ3OS4xMDEtLjcuMTY5LS4yMjguMDctLjQzMi4xNDctLjYxMy4yMjktLjIyLjA5OS0uMzg5LjE5Ni0uNTEyLjI4NGwtLjQxOS4yOTl2Mi43MDFjLS4wODYuMTA4LS4xNjIuMjIzLS4yMjkuMzQ0bC0yLjQ1LTYuMzU0aC0yLjM5NGwtMy43NTMgOS44MDR2LjU5OGgzLjAyNWwuODM4LTIuMzVoMi4xNjdsLjg5MSAyLjM1aDMuMjM3bC0uMDAxLS4wMDNjLjMwNS4wOTIuNjMzLjE1Ljk5My4xNS4zNDQgMCAuNjcxLS4wNDkuOTc4LS4xNDZoMi44NTN2LTQuOTAzYy0uMDAxLS45NzUtLjI3MS0xLjc2My0uODA1LTIuMzR6Ii8+PC9nPjxnIGlkPSJpY29uX3g1Rl9iZyI+PHBhdGggY2xhc3M9InN0MiIgZD0iTTcuNjExIDExLjgzNGwtLjg5MS0yLjM1aC0zLjU2MmwtLjgzOCAyLjM1aC0xLjA5NWwzLjIxNy04LjQwMmgxLjAybDMuMjQgOC40MDJoLTEuMDkxem0tMi41MzEtNi44MTRsLS4wNDQtLjEzNS0uMDM4LS4xNTYtLjAyOS0uMTUyLS4wMjQtLjEyNmgtLjAyM2wtLjAyMS4xMjYtLjAzMi4xNTItLjAzOC4xNTYtLjA0NC4xMzUtMS4zMDcgMy41NzRoMi45MThsLTEuMzE4LTMuNTc0eiIvPjxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMy4wMiAxMS44MzR2LS45MzhoLS4wMjNjLS4xOTkuMzUyLS40NTYuNjItLjc3MS44MDZzLS42NzMuMjc4LTEuMDc1LjI3OGMtLjMxMyAwLS41ODgtLjA0NS0uODI2LS4xMzVzLS40MzgtLjIxMi0uNTk4LS4zNjYtLjI4MS0uMzM4LS4zNjMtLjU1MS0uMTI0LS40NDItLjEyNC0uNjg4YzAtLjI2Mi4wMzktLjUwMi4xMTctLjcyMXMuMTk4LS40MTIuMzYtLjU4LjM2Ny0uMzA4LjYxNS0uNDE5LjU0NC0uMTkuODg4LS4yMzdsMS44MTEtLjI1MmMwLS4yNzMtLjAyOS0uNTA3LS4wODgtLjdzLS4xNDMtLjM1MS0uMjUyLS40NzItLjI0MS0uMjEtLjM5Ni0uMjY3LS4zMjUtLjA4NS0uNTEzLS4wODVjLS4zNjMgMC0uNzE0LjA2NC0xLjA1Mi4xOTNzLS42MzguMzEtLjkwNC41NHYtLjk4NGMuMDgyLS4wNTkuMTk2LS4xMjEuMzQzLS4xODhzLjMxMi0uMTI4LjQ5NS0uMTg1LjM3OC0uMTA0LjU4My0uMTQxLjQwNy0uMDU2LjYwNi0uMDU2Yy42OTkgMCAxLjIyOS4xOTQgMS41ODguNTgzcy41MzkuOTQyLjUzOSAxLjY2MXYzLjkwMmgtLjk2em0tMS40NTQtMi44M2MtLjI3My4wMzUtLjQ5OC4wODUtLjY3NC4xNDlzLS4zMTMuMTQ0LS40MS4yMzctLjE2NS4yMDUtLjIwMi4zMzQtLjA1NS4yNzYtLjA1NS40NGMwIC4xNDEuMDI1LjI3MS4wNzYuMzkzcy4xMjQuMjI3LjIyLjMxNi4yMTUuMTYuMzU3LjIxMS4zMDguMDc2LjQ5NS4wNzZjLjI0MiAwIC40NjUtLjA0NS42NjgtLjEzNXMuMzc4LS4yMTQuNTI0LS4zNzIuMjYxLS4zNDQuMzQzLS41NTcuMTIzLS40NDIuMTIzLS42ODh2LS42MDlsLTEuNDY1LjIwNXoiLz48L2c+PC9zdmc+) 50% no-repeat}.hc-black .monaco-custom-checkbox.monaco-case-sensitive,.hc-black .monaco-custom-checkbox.monaco-case-sensitive:hover,.vs-dark .monaco-custom-checkbox.monaco-case-sensitive{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe29wYWNpdHk6MDtmaWxsOiMyNjI2MjY7fSAuc3Qxe2ZpbGw6IzI2MjYyNjt9IC5zdDJ7ZmlsbDojQzVDNUM1O308L3N0eWxlPjxnIGlkPSJvdXRsaW5lIj48cmVjdCBjbGFzcz0ic3QwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTQuMTc2IDUuNTkyYy0uNTU1LS42LTEuMzM2LS45MDQtMi4zMjItLjkwNC0uMjU4IDAtLjUyMS4wMjQtLjc4NC4wNzItLjI0Ni4wNDQtLjQ3OS4xMDEtLjcuMTY5LS4yMjguMDctLjQzMi4xNDctLjYxMy4yMjktLjIyLjA5OS0uMzg5LjE5Ni0uNTEyLjI4NGwtLjQxOS4yOTl2Mi43MDFjLS4wODYuMTA4LS4xNjIuMjIzLS4yMjkuMzQ0bC0yLjQ1LTYuMzU0aC0yLjM5NGwtMy43NTMgOS44MDR2LjU5OGgzLjAyNWwuODM4LTIuMzVoMi4xNjdsLjg5MSAyLjM1aDMuMjM3bC0uMDAxLS4wMDNjLjMwNS4wOTIuNjMzLjE1Ljk5My4xNS4zNDQgMCAuNjcxLS4wNDkuOTc4LS4xNDZoMi44NTN2LTQuOTAzYy0uMDAxLS45NzUtLjI3MS0xLjc2My0uODA1LTIuMzR6Ii8+PC9nPjxnIGlkPSJpY29uX3g1Rl9iZyI+PHBhdGggY2xhc3M9InN0MiIgZD0iTTcuNjExIDExLjgzNGwtLjg5MS0yLjM1aC0zLjU2MmwtLjgzOCAyLjM1aC0xLjA5NWwzLjIxNy04LjQwMmgxLjAybDMuMjQgOC40MDJoLTEuMDkxem0tMi41MzEtNi44MTRsLS4wNDQtLjEzNS0uMDM4LS4xNTYtLjAyOS0uMTUyLS4wMjQtLjEyNmgtLjAyM2wtLjAyMS4xMjYtLjAzMi4xNTItLjAzOC4xNTYtLjA0NC4xMzUtMS4zMDcgMy41NzRoMi45MThsLTEuMzE4LTMuNTc0eiIvPjxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMy4wMiAxMS44MzR2LS45MzhoLS4wMjNjLS4xOTkuMzUyLS40NTYuNjItLjc3MS44MDZzLS42NzMuMjc4LTEuMDc1LjI3OGMtLjMxMyAwLS41ODgtLjA0NS0uODI2LS4xMzVzLS40MzgtLjIxMi0uNTk4LS4zNjYtLjI4MS0uMzM4LS4zNjMtLjU1MS0uMTI0LS40NDItLjEyNC0uNjg4YzAtLjI2Mi4wMzktLjUwMi4xMTctLjcyMXMuMTk4LS40MTIuMzYtLjU4LjM2Ny0uMzA4LjYxNS0uNDE5LjU0NC0uMTkuODg4LS4yMzdsMS44MTEtLjI1MmMwLS4yNzMtLjAyOS0uNTA3LS4wODgtLjdzLS4xNDMtLjM1MS0uMjUyLS40NzItLjI0MS0uMjEtLjM5Ni0uMjY3LS4zMjUtLjA4NS0uNTEzLS4wODVjLS4zNjMgMC0uNzE0LjA2NC0xLjA1Mi4xOTNzLS42MzguMzEtLjkwNC41NHYtLjk4NGMuMDgyLS4wNTkuMTk2LS4xMjEuMzQzLS4xODhzLjMxMi0uMTI4LjQ5NS0uMTg1LjM3OC0uMTA0LjU4My0uMTQxLjQwNy0uMDU2LjYwNi0uMDU2Yy42OTkgMCAxLjIyOS4xOTQgMS41ODguNTgzcy41MzkuOTQyLjUzOSAxLjY2MXYzLjkwMmgtLjk2em0tMS40NTQtMi44M2MtLjI3My4wMzUtLjQ5OC4wODUtLjY3NC4xNDlzLS4zMTMuMTQ0LS40MS4yMzctLjE2NS4yMDUtLjIwMi4zMzQtLjA1NS4yNzYtLjA1NS40NGMwIC4xNDEuMDI1LjI3MS4wNzYuMzkzcy4xMjQuMjI3LjIyLjMxNi4yMTUuMTYuMzU3LjIxMS4zMDguMDc2LjQ5NS4wNzZjLjI0MiAwIC40NjUtLjA0NS42NjgtLjEzNXMuMzc4LS4yMTQuNTI0LS4zNzIuMjYxLS4zNDQuMzQzLS41NTcuMTIzLS40NDIuMTIzLS42ODh2LS42MDlsLTEuNDY1LjIwNXoiLz48L2c+PC9zdmc+) 50% no-repeat}.vs .monaco-custom-checkbox.monaco-whole-word{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe29wYWNpdHk6MDtmaWxsOiNGNkY2RjY7fSAuc3Qxe2ZpbGw6I0Y2RjZGNjt9IC5zdDJ7ZmlsbDojNDI0MjQyO308L3N0eWxlPjxnIGlkPSJvdXRsaW5lIj48cmVjdCBjbGFzcz0ic3QwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTYgNC4wMjJ2LTMuMDIyaC0xNi4wMTR2My4wMjJoMy4wNDZsLTMuMDQzIDcuOTQ1aC0uMDA0di4wMWwuMDE1IDEuMDIzaC0uMDE0djEuOTkxaDE2LjAxNHYtMy4wMjNoLTF2LTcuOTQ2aDF6bS01LjkxNCA1LjMwMWMwIC4yMzMtLjAyMy40NDEtLjA2Ni41OTUtLjA0Ny4xNjQtLjA5OS4yNDctLjEyNy4yODRsLS4wNzguMDY5LS4xNTEuMDI2LS4xMTUtLjAxNy0uMTM5LS4xMzdjLS4wMzEtLjA3OC0uMTEyLS4zMzItLjExMi0uNTY2IDAtLjI1NC4wOTEtLjU2MS4xMjYtLjY1NmwuMDY5LS4xNDEuMTA5LS4wODIuMTc4LS4wMjdjLjA3NyAwIC4xMTcuMDE0LjE3Ny4wNTZsLjA4Ny4xNzkuMDUxLjIzNy0uMDA5LjE4em0tMy42OTUtNS4zMDF2Mi44OTNsLTEuMTE2LTIuODkzaDEuMTE2em0tMy4wMjYgNy4wMmgxLjU3M2wuMzUxLjkyNmgtMi4yNTRsLjMzLS45MjZ6bTguNjM1LTQuMzU0Yy0uMjA2LS4yLS40MzEtLjM4LS42OTUtLjUxMi0uMzk2LS4xOTgtLjg1My0uMjk4LTEuMzU1LS4yOTgtLjIxNSAwLS40MjMuMDItLjYyMS4wNTh2LTEuOTE0aDIuNjcxdjIuNjY2eiIvPjwvZz48ZyBpZD0iaWNvbl94NUZfYmciPjxyZWN0IHg9IjEzIiB5PSI0IiBjbGFzcz0ic3QyIiB3aWR0aD0iMSIgaGVpZ2h0PSI4Ii8+PHBhdGggY2xhc3M9InN0MiIgZD0iTTExLjIyNSA4LjM4N2MtLjA3OC0uMjk5LS4xOTktLjU2Mi0uMzYtLjc4NnMtLjM2NS0uNDAxLS42MDktLjUzLS41MzQtLjE5My0uODY2LS4xOTNjLS4xOTggMC0uMzguMDI0LS41NDcuMDczLS4xNjUuMDQ5LS4zMTYuMTE3LS40NTMuMjA1LS4xMzYuMDg4LS4yNTcuMTk0LS4zNjUuMzE4bC0uMTc5LjI1OHYtMy4xNTRoLS44OTN2Ny40MjJoLjg5M3YtLjU3NWwuMTI2LjE3NWMuMDg3LjEwMi4xODkuMTkuMzA0LjI2OS4xMTcuMDc4LjI0OS4xNC4zOTguMTg2LjE0OS4wNDYuMzE0LjA2OC40OTguMDY4LjM1MyAwIC42NjYtLjA3MS45MzctLjIxMi4yNzItLjE0My40OTktLjMzOC42ODItLjU4Ni4xODMtLjI1LjMyMS0uNTQzLjQxNC0uODc5LjA5My0uMzM4LjE0LS43MDMuMTQtMS4wOTctLjAwMS0uMzQyLS4wNC0uNjYzLS4xMi0uOTYyem0tMS40NzktLjYwN2MuMTUxLjA3MS4yODIuMTc2LjM5LjMxNC4xMDkuMTQuMTk0LjMxMy4yNTUuNTE3LjA1MS4xNzQuMDgyLjM3MS4wODkuNTg3bC0uMDA3LjEyNWMwIC4zMjctLjAzMy42Mi0uMS44NjktLjA2Ny4yNDYtLjE2MS40NTMtLjI3OC42MTQtLjExNy4xNjItLjI2LjI4NS0uNDIxLjM2Ni0uMzIyLjE2Mi0uNzYuMTY2LTEuMDY5LjAxNS0uMTUzLS4wNzUtLjI4Ni0uMTc1LS4zOTMtLjI5Ni0uMDg1LS4wOTYtLjE1Ni0uMjE2LS4yMTgtLjM2NyAwIDAtLjE3OS0uNDQ3LS4xNzktLjk0NyAwLS41LjE3OS0xLjAwMi4xNzktMS4wMDIuMDYyLS4xNzcuMTM2LS4zMTguMjI0LS40My4xMTQtLjE0My4yNTYtLjI1OS40MjQtLjM0NS4xNjgtLjA4Ni4zNjUtLjEyOS41ODctLjEyOS4xOSAwIC4zNjQuMDM3LjUxNy4xMDl6Ii8+PHJlY3QgeD0iLjk4NyIgeT0iMiIgY2xhc3M9InN0MiIgd2lkdGg9IjE0LjAxMyIgaGVpZ2h0PSIxLjAyMyIvPjxyZWN0IHg9Ii45ODciIHk9IjEyLjk2OCIgY2xhc3M9InN0MiIgd2lkdGg9IjE0LjAxMyIgaGVpZ2h0PSIxLjAyMyIvPjxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xLjk5MSAxMi4wMzFsLjcyOC0yLjAzMWgyLjIxOWwuNzc4IDIuMDMxaDEuMDgybC0yLjQ4NS03LjE1OGgtLjk0MWwtMi40NDEgNy4wODYtLjAyNS4wNzJoMS4wODV6bTEuODI3LTUuNjA5aC4wMjJsLjkxNCAyLjc1M2gtMS44NDFsLjkwNS0yLjc1M3oiLz48L2c+PC9zdmc+) 50% no-repeat}.hc-black .monaco-custom-checkbox.monaco-whole-word,.hc-black .monaco-custom-checkbox.monaco-whole-word:hover,.vs-dark .monaco-custom-checkbox.monaco-whole-word{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe29wYWNpdHk6MDtmaWxsOiMyNjI2MjY7fSAuc3Qxe2ZpbGw6IzI2MjYyNjt9IC5zdDJ7ZmlsbDojQzVDNUM1O308L3N0eWxlPjxnIGlkPSJvdXRsaW5lIj48cmVjdCBjbGFzcz0ic3QwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTYgNC4wMjJ2LTMuMDIyaC0xNi4wMTR2My4wMjJoMy4wNDZsLTMuMDQzIDcuOTQ1aC0uMDA0di4wMWwuMDE1IDEuMDIzaC0uMDE0djEuOTkxaDE2LjAxNHYtMy4wMjNoLTF2LTcuOTQ2aDF6bS01LjkxNCA1LjMwMWMwIC4yMzMtLjAyMy40NDEtLjA2Ni41OTUtLjA0Ny4xNjQtLjA5OS4yNDctLjEyNy4yODRsLS4wNzguMDY5LS4xNTEuMDI2LS4xMTUtLjAxNy0uMTM5LS4xMzdjLS4wMzEtLjA3OC0uMTEyLS4zMzItLjExMi0uNTY2IDAtLjI1NC4wOTEtLjU2MS4xMjYtLjY1NmwuMDY5LS4xNDEuMTA5LS4wODIuMTc4LS4wMjdjLjA3NyAwIC4xMTcuMDE0LjE3Ny4wNTZsLjA4Ny4xNzkuMDUxLjIzNy0uMDA5LjE4em0tMy42OTUtNS4zMDF2Mi44OTNsLTEuMTE2LTIuODkzaDEuMTE2em0tMy4wMjYgNy4wMmgxLjU3M2wuMzUxLjkyNmgtMi4yNTRsLjMzLS45MjZ6bTguNjM1LTQuMzU0Yy0uMjA2LS4yLS40MzEtLjM4LS42OTUtLjUxMi0uMzk2LS4xOTgtLjg1My0uMjk4LTEuMzU1LS4yOTgtLjIxNSAwLS40MjMuMDItLjYyMS4wNTh2LTEuOTE0aDIuNjcxdjIuNjY2eiIvPjwvZz48ZyBpZD0iaWNvbl94NUZfYmciPjxyZWN0IHg9IjEzIiB5PSI0IiBjbGFzcz0ic3QyIiB3aWR0aD0iMSIgaGVpZ2h0PSI4Ii8+PHBhdGggY2xhc3M9InN0MiIgZD0iTTExLjIyNSA4LjM4N2MtLjA3OC0uMjk5LS4xOTktLjU2Mi0uMzYtLjc4NnMtLjM2NS0uNDAxLS42MDktLjUzLS41MzQtLjE5My0uODY2LS4xOTNjLS4xOTggMC0uMzguMDI0LS41NDcuMDczLS4xNjUuMDQ5LS4zMTYuMTE3LS40NTMuMjA1LS4xMzYuMDg4LS4yNTcuMTk0LS4zNjUuMzE4bC0uMTc5LjI1OHYtMy4xNTRoLS44OTN2Ny40MjJoLjg5M3YtLjU3NWwuMTI2LjE3NWMuMDg3LjEwMi4xODkuMTkuMzA0LjI2OS4xMTcuMDc4LjI0OS4xNC4zOTguMTg2LjE0OS4wNDYuMzE0LjA2OC40OTguMDY4LjM1MyAwIC42NjYtLjA3MS45MzctLjIxMi4yNzItLjE0My40OTktLjMzOC42ODItLjU4Ni4xODMtLjI1LjMyMS0uNTQzLjQxNC0uODc5LjA5My0uMzM4LjE0LS43MDMuMTQtMS4wOTctLjAwMS0uMzQyLS4wNC0uNjYzLS4xMi0uOTYyem0tMS40NzktLjYwN2MuMTUxLjA3MS4yODIuMTc2LjM5LjMxNC4xMDkuMTQuMTk0LjMxMy4yNTUuNTE3LjA1MS4xNzQuMDgyLjM3MS4wODkuNTg3bC0uMDA3LjEyNWMwIC4zMjctLjAzMy42Mi0uMS44NjktLjA2Ny4yNDYtLjE2MS40NTMtLjI3OC42MTQtLjExNy4xNjItLjI2LjI4NS0uNDIxLjM2Ni0uMzIyLjE2Mi0uNzYuMTY2LTEuMDY5LjAxNS0uMTUzLS4wNzUtLjI4Ni0uMTc1LS4zOTMtLjI5Ni0uMDg1LS4wOTYtLjE1Ni0uMjE2LS4yMTgtLjM2NyAwIDAtLjE3OS0uNDQ3LS4xNzktLjk0NyAwLS41LjE3OS0xLjAwMi4xNzktMS4wMDIuMDYyLS4xNzcuMTM2LS4zMTguMjI0LS40My4xMTQtLjE0My4yNTYtLjI1OS40MjQtLjM0NS4xNjgtLjA4Ni4zNjUtLjEyOS41ODctLjEyOS4xOSAwIC4zNjQuMDM3LjUxNy4xMDl6Ii8+PHJlY3QgeD0iLjk4NyIgeT0iMiIgY2xhc3M9InN0MiIgd2lkdGg9IjE0LjAxMyIgaGVpZ2h0PSIxLjAyMyIvPjxyZWN0IHg9Ii45ODciIHk9IjEyLjk2OCIgY2xhc3M9InN0MiIgd2lkdGg9IjE0LjAxMyIgaGVpZ2h0PSIxLjAyMyIvPjxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xLjk5MSAxMi4wMzFsLjcyOC0yLjAzMWgyLjIxOWwuNzc4IDIuMDMxaDEuMDgybC0yLjQ4NS03LjE1OGgtLjk0MWwtMi40NDEgNy4wODYtLjAyNS4wNzJoMS4wODV6bTEuODI3LTUuNjA5aC4wMjJsLjkxNCAyLjc1M2gtMS44NDFsLjkwNS0yLjc1M3oiLz48L2c+PC9zdmc+) 50% no-repeat}.vs .monaco-custom-checkbox.monaco-regex{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBvbHlnb24gZmlsbD0iI0Y2RjZGNiIgcG9pbnRzPSIxMy42NCw3LjM5NiAxMi4xNjksMi44OTggMTAuNzA2LDMuNzYxIDExLjA4NywyIDYuNTU3LDIgNi45MzYsMy43NjIgNS40NzMsMi44OTggNCw3LjM5NiA1LjY4Miw3LjU1NCA0LjUxMyw4LjU2MSA1LjAxMyw5IDIsOSAyLDE0IDcsMTQgNywxMC43NDcgNy45NzgsMTEuNjA2IDguODIsOS43MjUgOS42NjEsMTEuNjAyIDEzLjE0NCw4LjU2MiAxMS45NjgsNy41NTQiLz48ZyBmaWxsPSIjNDI0MjQyIj48cGF0aCBkPSJNMTIuMzAxIDYuNTE4bC0yLjc3Mi4yNjIgMi4wODYgMS43ODgtMS41OTQgMS4zOTItMS4yMDEtMi42ODItMS4yMDEgMi42ODItMS41ODMtMS4zOTIgMi4wNzUtMS43ODgtMi43NzEtLjI2Mi42OTYtMi4xMjYgMi4zNTggMS4zOTItLjU5OS0yLjc4NGgyLjA1M2wtLjYwMiAyLjc4MyAyLjM1OS0xLjM5Mi42OTYgMi4xMjd6Ii8+PHJlY3QgeD0iMyIgeT0iMTAiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiLz48L2c+PC9zdmc+) 50% no-repeat}.hc-black .monaco-custom-checkbox.monaco-regex,.hc-black .monaco-custom-checkbox.monaco-regex:hover,.vs-dark .monaco-custom-checkbox.monaco-regex{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBvbHlnb24gZmlsbD0iIzJkMmQzMCIgcG9pbnRzPSIxMy42NCw3LjM5NiAxMi4xNjksMi44OTggMTAuNzA2LDMuNzYxIDExLjA4NywyIDYuNTU3LDIgNi45MzYsMy43NjIgNS40NzMsMi44OTggNCw3LjM5NiA1LjY4Miw3LjU1NCA0LjUxMyw4LjU2MSA1LjAxMyw5IDIsOSAyLDE0IDcsMTQgNywxMC43NDcgNy45NzgsMTEuNjA2IDguODIsOS43MjUgOS42NjEsMTEuNjAyIDEzLjE0NCw4LjU2MiAxMS45NjgsNy41NTQiLz48ZyBmaWxsPSIjQzVDNUM1Ij48cGF0aCBkPSJNMTIuMzAxIDYuNTE4bC0yLjc3Mi4yNjIgMi4wODYgMS43ODgtMS41OTQgMS4zOTItMS4yMDEtMi42ODItMS4yMDEgMi42ODItMS41ODMtMS4zOTIgMi4wNzUtMS43ODgtMi43NzEtLjI2Mi42OTYtMi4xMjYgMi4zNTggMS4zOTItLjU5OS0yLjc4NGgyLjA1M2wtLjYwMiAyLjc4MyAyLjM1OS0xLjM5Mi42OTYgMi4xMjd6Ii8+PHJlY3QgeD0iMyIgeT0iMTAiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiLz48L2c+PC9zdmc+) 50% no-repeat}.monaco-icon-label{display:flex;overflow:hidden;text-overflow:ellipsis}.monaco-icon-label:before{background-size:16px;background-position:0;background-repeat:no-repeat;padding-right:6px;width:16px;height:22px;display:inline-block;-webkit-font-smoothing:antialiased;vertical-align:top;flex-shrink:0}.monaco-icon-label>.monaco-icon-label-description-container{overflow:hidden;text-overflow:ellipsis}.monaco-icon-label>.monaco-icon-label-description-container>.label-name{color:inherit;white-space:pre}.monaco-icon-label>.monaco-icon-label-description-container>.label-description{opacity:.7;margin-left:.5em;font-size:.9em;white-space:pre}.monaco-icon-label.italic>.monaco-icon-label-description-container>.label-description,.monaco-icon-label.italic>.monaco-icon-label-description-container>.label-name{font-style:italic}.monaco-icon-label:after{opacity:.75;font-size:90%;font-weight:600;padding:0 12px 0 5px;margin-left:auto;text-align:center}.monaco-list:focus .selected .monaco-icon-label,.monaco-list:focus .selected .monaco-icon-label:after,.monaco-tree.focused .selected .monaco-icon-label,.monaco-tree.focused .selected .monaco-icon-label:after{color:inherit!important}.monaco-list-row.focused.selected .label-description,.monaco-list-row.selected .label-description,.monaco-tree-row.focused.selected .label-description,.monaco-tree-row.selected .label-description{opacity:.8}.monaco-inputbox{position:relative;display:block;padding:0;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;line-height:auto!important;font-size:inherit}.monaco-inputbox.idle{border:1px solid transparent}.monaco-inputbox>.wrapper>.input,.monaco-inputbox>.wrapper>.mirror{padding:4px}.monaco-inputbox>.wrapper{position:relative;width:100%;height:100%}.monaco-inputbox>.wrapper>.input{display:inline-block;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;line-height:inherit;border:none;font-family:inherit;font-size:inherit;resize:none;color:inherit}.monaco-inputbox>.wrapper>input{text-overflow:ellipsis}.monaco-inputbox>.wrapper>textarea.input{display:block;overflow:hidden}.monaco-inputbox>.wrapper>.mirror{position:absolute;display:inline-block;width:100%;top:0;left:0;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;white-space:pre-wrap;visibility:hidden;word-wrap:break-word}.monaco-inputbox-container{text-align:right}.monaco-inputbox-container .monaco-inputbox-message{display:inline-block;overflow:hidden;text-align:left;width:100%;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;padding:.4em;font-size:12px;line-height:17px;min-height:34px;margin-top:-1px;word-wrap:break-word}.monaco-inputbox .monaco-action-bar{position:absolute;right:2px;top:4px}.monaco-inputbox .monaco-action-bar .action-item{margin-left:2px}.monaco-inputbox .monaco-action-bar .action-item .icon{background-repeat:no-repeat;width:16px;height:16px}.monaco-keybinding{display:flex;align-items:center;line-height:10px}.monaco-keybinding>.monaco-keybinding-key{display:inline-block;border:1px solid hsla(0,0%,80%,.4);border-bottom-color:hsla(0,0%,73%,.4);border-radius:3px;box-shadow:inset 0 -1px 0 hsla(0,0%,73%,.4);background-color:hsla(0,0%,87%,.4);vertical-align:middle;color:#555;font-size:11px;padding:3px 5px;margin:0 2px}.monaco-keybinding>.monaco-keybinding-key:first-child{margin-left:0}.monaco-keybinding>.monaco-keybinding-key:last-child{margin-right:0}.hc-black .monaco-keybinding>.monaco-keybinding-key,.vs-dark .monaco-keybinding>.monaco-keybinding-key{background-color:hsla(0,0%,50%,.17);color:#ccc;border:1px solid rgba(51,51,51,.6);border-bottom-color:rgba(68,68,68,.6);box-shadow:inset 0 -1px 0 rgba(68,68,68,.6)}.monaco-keybinding>.monaco-keybinding-key-separator{display:inline-block}.monaco-keybinding>.monaco-keybinding-key-chord-separator{width:6px}.monaco-list{position:relative;height:100%;width:100%;white-space:nowrap}.monaco-list.mouse-support{-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;-o-user-select:none;user-select:none}.monaco-list>.monaco-scrollable-element{height:100%}.monaco-list-rows{position:relative;width:100%;height:100%}.monaco-list.horizontal-scrolling .monaco-list-rows{width:auto;min-width:100%}.monaco-list-row{position:absolute;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;overflow:hidden;width:100%}.monaco-list.mouse-support .monaco-list-row{cursor:pointer;touch-action:none}.monaco-list-row.scrolling{display:none!important}.monaco-list.element-focused,.monaco-list.selection-multiple,.monaco-list.selection-single{outline:0!important}.monaco-drag-image{display:inline-block;padding:1px 7px;border-radius:10px;font-size:12px;position:absolute}.monaco-list-type-filter{display:flex;align-items:center;position:absolute;border-radius:2px;padding:0 3px;max-width:calc(100% - 10px);text-overflow:ellipsis;overflow:hidden;text-align:right;box-sizing:border-box;cursor:all-scroll;font-size:13px;line-height:18px;height:20px;z-index:1;top:4px}.monaco-list-type-filter.dragging{transition:top .2s,left .2s}.monaco-list-type-filter.ne{right:4px}.monaco-list-type-filter.nw{left:4px}.monaco-list-type-filter>.controls{display:flex;align-items:center;box-sizing:border-box;transition:width .2s;width:0}.monaco-list-type-filter.dragging>.controls,.monaco-list-type-filter:hover>.controls{width:36px}.monaco-list-type-filter>.controls>*{box-sizing:border-box;width:16px;height:16px;margin:0 0 0 2px;flex-shrink:0}.monaco-list-type-filter>.controls>.filter{-webkit-appearance:none;width:16px;height:16px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgOS45OTk1MUgyVjExLjk5OTVINlY5Ljk5OTUxWiIgZmlsbD0iIzRCNEI0QiIvPgo8cGF0aCBkPSJNMTAgN0gyVjlIMTBWN1oiIGZpbGw9IiM0QjRCNEIiLz4KPHBhdGggZD0iTTE0IDRIMlY2SDE0VjRaIiBmaWxsPSIjNEI0QjRCIi8+Cjwvc3ZnPgo=);background-position:50% 50%;cursor:pointer}.monaco-list-type-filter>.controls>.filter:checked{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMTBINi4wMDAyNFYxMkgxMC4wMDAyVjEwWiIgZmlsbD0iIzQyNDI0MiIvPgo8cGF0aCBkPSJNMTEuOTk5OCA3SDMuOTk5NzZWOUgxMS45OTk4VjdaIiBmaWxsPSIjNDI0MjQyIi8+CjxwYXRoIGQ9Ik0xNCA0SDJWNkgxNFY0WiIgZmlsbD0iIzQyNDI0MiIvPgo8L3N2Zz4K)}.vs-dark .monaco-list-type-filter>.controls>.filter{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgOS45OTk1MUgyVjExLjk5OTVINlY5Ljk5OTUxWiIgZmlsbD0iI0U4RThFOCIvPgo8cGF0aCBkPSJNMTAgN0gyVjlIMTBWN1oiIGZpbGw9IiNFOEU4RTgiLz4KPHBhdGggZD0iTTE0IDRIMlY2SDE0VjRaIiBmaWxsPSIjRThFOEU4Ii8+Cjwvc3ZnPgo=)}.vs-dark .monaco-list-type-filter>.controls>.filter:checked{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMTBINi4wMDAyNFYxMkgxMC4wMDAyVjEwWiIgZmlsbD0iI0U4RThFOCIvPgo8cGF0aCBkPSJNMTEuOTk5OCA3SDMuOTk5NzZWOUgxMS45OTk4VjdaIiBmaWxsPSIjRThFOEU4Ii8+CjxwYXRoIGQ9Ik0xNCA0SDJWNkgxNFY0WiIgZmlsbD0iI0U4RThFOCIvPgo8L3N2Zz4K)}.hc-black .monaco-list-type-filter>.controls>.filter{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgOS45OTk1MUgyVjExLjk5OTVINlY5Ljk5OTUxWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTEwIDdIMlY5SDEwVjdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTQgNEgyVjZIMTRWNFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=)}.hc-black .monaco-list-type-filter>.controls>.filter:checked{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMTBINi4wMDAyNFYxMkgxMC4wMDAyVjEwWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTExLjk5OTggN0gzLjk5OTc2VjlIMTEuOTk5OFY3WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTE0IDRIMlY2SDE0VjRaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K)}.monaco-list-type-filter>.controls>.clear{border:none;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMyAzIDE2IDE2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMgMyAxNiAxNiI+PHBvbHlnb24gZmlsbD0iIzQyNDI0MiIgcG9pbnRzPSIxMi41OTcsMTEuMDQyIDE1LjQsMTMuODQ1IDEzLjg0NCwxNS40IDExLjA0MiwxMi41OTggOC4yMzksMTUuNCA2LjY4MywxMy44NDUgOS40ODUsMTEuMDQyIDYuNjgzLDguMjM5IDguMjM4LDYuNjgzIDExLjA0Miw5LjQ4NiAxMy44NDUsNi42ODMgMTUuNCw4LjIzOSIvPjwvc3ZnPg==);cursor:pointer}.vs-dark .monaco-list-type-filter>.controls>.clear{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMyAzIDE2IDE2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMgMyAxNiAxNiI+PHBvbHlnb24gZmlsbD0iI2U4ZThlOCIgcG9pbnRzPSIxMi41OTcsMTEuMDQyIDE1LjQsMTMuODQ1IDEzLjg0NCwxNS40IDExLjA0MiwxMi41OTggOC4yMzksMTUuNCA2LjY4MywxMy44NDUgOS40ODUsMTEuMDQyIDYuNjgzLDguMjM5IDguMjM4LDYuNjgzIDExLjA0Miw5LjQ4NiAxMy44NDUsNi42ODMgMTUuNCw4LjIzOSIvPjwvc3ZnPg==)}.hc-black .monaco-list-type-filter>.controls>.clear{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzczMjAiCiAgIHZlcnNpb249IjEuMSIKICAgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAzIDMgMTYgMTYiCiAgIHZpZXdCb3g9IjMgMyAxNiAxNiIKICAgaGVpZ2h0PSIxNiIKICAgd2lkdGg9IjE2Ij4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE3MzI2Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzNzMyNCIgLz4KICA8cG9seWdvbgogICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjEiCiAgICAgaWQ9InBvbHlnb243MzE4IgogICAgIHBvaW50cz0iMTIuNTk3LDExLjA0MiAxNS40LDEzLjg0NSAxMy44NDQsMTUuNCAxMS4wNDIsMTIuNTk4IDguMjM5LDE1LjQgNi42ODMsMTMuODQ1IDkuNDg1LDExLjA0MiA2LjY4Myw4LjIzOSA4LjIzOCw2LjY4MyAxMS4wNDIsOS40ODYgMTMuODQ1LDYuNjgzIDE1LjQsOC4yMzkiCiAgICAgZmlsbD0iIzQyNDI0MiIgLz4KPC9zdmc+Cg==)}.monaco-list-type-filter-message{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;padding:40px 1em 1em;text-align:center;white-space:normal;opacity:.7;pointer-events:none}.monaco-list-type-filter-message:empty{display:none}.monaco-list-type-filter{cursor:-webkit-grab}.monaco-list-type-filter.dragging{cursor:-webkit-grabbing}.monaco-menu .monaco-action-bar.vertical{margin-left:0;overflow:visible}.monaco-menu .monaco-action-bar.vertical .actions-container{display:block}.monaco-menu .monaco-action-bar.vertical .action-item{padding:0;transform:none;display:-ms-flexbox;display:flex}.monaco-menu .monaco-action-bar.vertical .action-item.active{transform:none}.monaco-menu .monaco-action-bar.vertical .action-menu-item{-ms-flex:1 1 auto;flex:1 1 auto;display:-ms-flexbox;display:flex;height:2em;align-items:center;position:relative}.monaco-menu .monaco-action-bar.vertical .action-label{-ms-flex:1 1 auto;flex:1 1 auto;text-decoration:none;padding:0 1em;background:none;font-size:12px;line-height:1}.monaco-menu .monaco-action-bar.vertical .keybinding,.monaco-menu .monaco-action-bar.vertical .submenu-indicator{display:inline-block;-ms-flex:2 1 auto;flex:2 1 auto;padding:0 1em;text-align:right;font-size:12px;line-height:1}.monaco-menu .monaco-action-bar.vertical .submenu-indicator{height:100%;-webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQuNTIwNTEgMTIuMzY0M0w5Ljg3NzkzIDdMNC41MjA1MSAxLjYzNTc0Mkw1LjEzNTc0IDEuMDIwNTA3OEwxMS4xMjIxIDdMNS4xMzU3NCAxMi45Nzk1TDQuNTIwNTEgMTIuMzY0M1oiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=) no-repeat 90% 50%/13px 13px;mask:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQuNTIwNTEgMTIuMzY0M0w5Ljg3NzkzIDdMNC41MjA1MSAxLjYzNTc0Mkw1LjEzNTc0IDEuMDIwNTA3OEwxMS4xMjIxIDdMNS4xMzU3NCAxMi45Nzk1TDQuNTIwNTEgMTIuMzY0M1oiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=) no-repeat 90% 50%/13px 13px}.monaco-menu .monaco-action-bar.vertical .action-item.disabled .keybinding,.monaco-menu .monaco-action-bar.vertical .action-item.disabled .submenu-indicator{opacity:.4}.monaco-menu .monaco-action-bar.vertical .action-label:not(.separator){display:inline-block;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;margin:0}.monaco-menu .monaco-action-bar.vertical .action-item{position:static;overflow:visible}.monaco-menu .monaco-action-bar.vertical .action-item .monaco-submenu{position:absolute}.monaco-menu .monaco-action-bar.vertical .action-label.separator{padding:.5em 0 0;margin-bottom:.5em;width:100%}.monaco-menu .monaco-action-bar.vertical .action-label.separator.text{padding:.7em 1em .1em;font-weight:700;opacity:1}.monaco-menu .monaco-action-bar.vertical .action-label:hover{color:inherit}.monaco-menu .monaco-action-bar.vertical .menu-item-check{position:absolute;visibility:hidden;-webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iLTIgLTIgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMTYgMTYiPjxwb2x5Z29uIGZpbGw9IiM0MjQyNDIiIHBvaW50cz0iOSwwIDQuNSw5IDMsNiAwLDYgMywxMiA2LDEyIDEyLDAiLz48L3N2Zz4=) no-repeat 50% 56%/15px 15px;mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iLTIgLTIgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMTYgMTYiPjxwb2x5Z29uIGZpbGw9IiM0MjQyNDIiIHBvaW50cz0iOSwwIDQuNSw5IDMsNiAwLDYgMywxMiA2LDEyIDEyLDAiLz48L3N2Zz4=) no-repeat 50% 56%/15px 15px;width:1em;height:100%}.monaco-menu .monaco-action-bar.vertical .action-menu-item.checked .menu-item-check{visibility:visible}.context-view.monaco-menu-container{outline:0;border:none;-webkit-animation:fadeIn 83ms linear;animation:fadeIn 83ms linear}.context-view.monaco-menu-container .monaco-action-bar.vertical:focus,.context-view.monaco-menu-container .monaco-action-bar.vertical :focus,.context-view.monaco-menu-container :focus{outline:0}.monaco-menu .monaco-action-bar.vertical .action-item{border:1px solid transparent}.hc-black .context-view.monaco-menu-container{box-shadow:none}.hc-black .monaco-menu .monaco-action-bar.vertical .action-item.focused{background:none}.menubar{display:flex;flex-shrink:1;box-sizing:border-box;height:30px;overflow:hidden;flex-wrap:wrap}.fullscreen .menubar{margin:0;padding:0 5px}.menubar>.menubar-menu-button{align-items:center;box-sizing:border-box;padding:0 8px;cursor:default;-webkit-app-region:no-drag;zoom:1;white-space:nowrap;outline:0}.menubar .menubar-menu-items-holder{position:absolute;left:0;opacity:1;z-index:2000}.menubar .menubar-menu-items-holder.monaco-menu-container{outline:0;border:none}.menubar .menubar-menu-items-holder.monaco-menu-container :focus{outline:0}.menubar .toolbar-toggle-more{background-position:50%;background-repeat:no-repeat;background-size:14px;width:20px;height:100%;display:inline-block;padding:0;-webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGRlZnM+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudCwuaWNvbi12cy1vdXR7ZmlsbDojZjZmNmY2O30uaWNvbi1jYW52YXMtdHJhbnNwYXJlbnR7b3BhY2l0eTowO30uaWNvbi12cy1iZ3tmaWxsOiM0MjQyNDI7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5FbGxpcHNpc19ib2xkXzE2eDwvdGl0bGU+PGcgaWQ9ImNhbnZhcyI+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYsMFYxNkgwVjBaIi8+PC9nPjxnIGlkPSJvdXRsaW5lIiBzdHlsZT0iZGlzcGxheTogbm9uZTsiPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTYsNy41QTIuNSwyLjUsMCwxLDEsMy41LDUsMi41LDIuNSwwLDAsMSw2LDcuNVpNOC41LDVBMi41LDIuNSwwLDEsMCwxMSw3LjUsMi41LDIuNSwwLDAsMCw4LjUsNVptNSwwQTIuNSwyLjUsMCwxLDAsMTYsNy41LDIuNSwyLjUsMCwwLDAsMTMuNSw1WiIgc3R5bGU9ImRpc3BsYXk6IG5vbmU7Ii8+PC9nPjxnIGlkPSJpY29uQmciPjxwYXRoIGNsYXNzPSJpY29uLXZzLWJnIiBkPSJNNSw3LjVBMS41LDEuNSwwLDEsMSwzLjUsNiwxLjUsMS41LDAsMCwxLDUsNy41Wk04LjUsNkExLjUsMS41LDAsMSwwLDEwLDcuNSwxLjUsMS41LDAsMCwwLDguNSw2Wm01LDBBMS41LDEuNSwwLDEsMCwxNSw3LjUsMS41LDEuNSwwLDAsMCwxMy41LDZaIi8+PC9nPjwvc3ZnPg==) no-repeat 50% 55%/14px 14px;mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGRlZnM+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudCwuaWNvbi12cy1vdXR7ZmlsbDojZjZmNmY2O30uaWNvbi1jYW52YXMtdHJhbnNwYXJlbnR7b3BhY2l0eTowO30uaWNvbi12cy1iZ3tmaWxsOiM0MjQyNDI7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5FbGxpcHNpc19ib2xkXzE2eDwvdGl0bGU+PGcgaWQ9ImNhbnZhcyI+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYsMFYxNkgwVjBaIi8+PC9nPjxnIGlkPSJvdXRsaW5lIiBzdHlsZT0iZGlzcGxheTogbm9uZTsiPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTYsNy41QTIuNSwyLjUsMCwxLDEsMy41LDUsMi41LDIuNSwwLDAsMSw2LDcuNVpNOC41LDVBMi41LDIuNSwwLDEsMCwxMSw3LjUsMi41LDIuNSwwLDAsMCw4LjUsNVptNSwwQTIuNSwyLjUsMCwxLDAsMTYsNy41LDIuNSwyLjUsMCwwLDAsMTMuNSw1WiIgc3R5bGU9ImRpc3BsYXk6IG5vbmU7Ii8+PC9nPjxnIGlkPSJpY29uQmciPjxwYXRoIGNsYXNzPSJpY29uLXZzLWJnIiBkPSJNNSw3LjVBMS41LDEuNSwwLDEsMSwzLjUsNiwxLjUsMS41LDAsMCwxLDUsNy41Wk04LjUsNkExLjUsMS41LDAsMSwwLDEwLDcuNSwxLjUsMS41LDAsMCwwLDguNSw2Wm01LDBBMS41LDEuNSwwLDEsMCwxNSw3LjUsMS41LDEuNSwwLDAsMCwxMy41LDZaIi8+PC9nPjwvc3ZnPg==) no-repeat 50% 55%/14px 14px}.monaco-progress-container{width:100%;height:5px;overflow:hidden}.monaco-progress-container .progress-bit{width:2%;height:5px;position:absolute;left:0;display:none}.monaco-progress-container.active .progress-bit{display:inherit}.monaco-progress-container.discrete .progress-bit{left:0;transition:width .1s linear}.monaco-progress-container.discrete.done .progress-bit{width:100%}.monaco-progress-container.infinite .progress-bit{animation-name:progress;animation-duration:4s;animation-iteration-count:infinite;animation-timing-function:linear;-ms-animation-name:progress;-ms-animation-duration:4s;-ms-animation-iteration-count:infinite;-ms-animation-timing-function:linear;-webkit-animation-name:progress;-webkit-animation-duration:4s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:progress;-moz-animation-duration:4s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;will-change:transform}@keyframes progress{0%{transform:translateX(0) scaleX(1)}50%{transform:translateX(2500%) scaleX(3)}to{transform:translateX(4950%) scaleX(1)}}@-webkit-keyframes progress{0%{transform:translateX(0) scaleX(1)}50%{transform:translateX(2500%) scaleX(3)}to{transform:translateX(4950%) scaleX(1)}}.monaco-sash{position:absolute;z-index:35;touch-action:none}.monaco-sash.disabled{pointer-events:none}.monaco-sash.vertical{cursor:ew-resize;top:0;width:4px;height:100%}.monaco-sash.mac.vertical{cursor:col-resize}.monaco-sash.vertical.minimum{cursor:e-resize}.monaco-sash.vertical.maximum{cursor:w-resize}.monaco-sash.horizontal{cursor:ns-resize;left:0;width:100%;height:4px}.monaco-sash.mac.horizontal{cursor:row-resize}.monaco-sash.horizontal.minimum{cursor:s-resize}.monaco-sash.horizontal.maximum{cursor:n-resize}.monaco-sash:not(.disabled).orthogonal-end:after,.monaco-sash:not(.disabled).orthogonal-start:before{content:" ";height:8px;width:8px;z-index:100;display:block;cursor:all-scroll;position:absolute}.monaco-sash.orthogonal-start.vertical:before{left:-2px;top:-4px}.monaco-sash.orthogonal-end.vertical:after{left:-2px;bottom:-4px}.monaco-sash.orthogonal-start.horizontal:before{top:-2px;left:-4px}.monaco-sash.orthogonal-end.horizontal:after{top:-2px;right:-4px}.monaco-sash.disabled{cursor:default!important;pointer-events:none!important}.monaco-sash.touch.vertical{width:20px}.monaco-sash.touch.horizontal{height:20px}.monaco-sash.debug{background:cyan}.monaco-sash.debug.disabled{background:rgba(0,255,255,.2)}.monaco-sash.debug:not(.disabled).orthogonal-end:after,.monaco-sash.debug:not(.disabled).orthogonal-start:before{background:red}.monaco-scrollable-element>.scrollbar>.up-arrow{background:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTEgMTEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTkuNDgwNDYsOC45NjE1bDEuMjYsLTEuMjZsLTUuMDQsLTUuMDRsLTUuNDYsNS4wNGwxLjI2LDEuMjZsNC4yLC0zLjc4bDMuNzgsMy43OHoiIGZpbGw9IiM0MjQyNDIiLz48L3N2Zz4=);cursor:pointer}.monaco-scrollable-element>.scrollbar>.down-arrow{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMSAxMSI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoLTE4MCA1LjQ5MDQ1OTkxODk3NTgzLDUuODExNTAwMDcyNDc5MjQ4KSIgZmlsbD0iIzQyNDI0MiIgZD0ibTkuNDgwNDYsOC45NjE1bDEuMjYsLTEuMjZsLTUuMDQsLTUuMDRsLTUuNDYsNS4wNGwxLjI2LDEuMjZsNC4yLC0zLjc4bDMuNzgsMy43OHoiLz48L3N2Zz4=);cursor:pointer}.monaco-scrollable-element>.scrollbar>.left-arrow{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMSAxMSI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDUuNDkwNDU5OTE4OTc1ODMxLDUuNDMxMzgyMTc5MjYwMjU0KSIgZmlsbD0iIzQyNDI0MiIgZD0ibTkuNDgwNDYsOC41ODEzOGwxLjI2LC0xLjI2bC01LjA0LC01LjA0bC01LjQ2LDUuMDRsMS4yNiwxLjI2bDQuMiwtMy43OGwzLjc4LDMuNzh6Ii8+PC9zdmc+);cursor:pointer}.monaco-scrollable-element>.scrollbar>.right-arrow{background:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTEgMTEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoOTAgNS42MTcxNjUwODg2NTM1NjQ1LDUuNTU4MDg5NzMzMTIzNzgpICIgZmlsbD0iIzQyNDI0MiIgZD0ibTkuNjA3MTcsOC43MDgwOWwxLjI2LC0xLjI2bC01LjA0LC01LjA0bC01LjQ2LDUuMDRsMS4yNiwxLjI2bDQuMiwtMy43OGwzLjc4LDMuNzh6Ii8+PC9zdmc+);cursor:pointer}.hc-black .monaco-scrollable-element>.scrollbar>.up-arrow,.vs-dark .monaco-scrollable-element>.scrollbar>.up-arrow{background:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTEgMTEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTkuNDgwNDYsOC45NjE1bDEuMjYsLTEuMjZsLTUuMDQsLTUuMDRsLTUuNDYsNS4wNGwxLjI2LDEuMjZsNC4yLC0zLjc4bDMuNzgsMy43OHoiIGZpbGw9IiNFOEU4RTgiLz48L3N2Zz4=)}.hc-black .monaco-scrollable-element>.scrollbar>.down-arrow,.vs-dark .monaco-scrollable-element>.scrollbar>.down-arrow{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMSAxMSI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoLTE4MCA1LjQ5MDQ1OTkxODk3NTgzLDUuODExNTAwMDcyNDc5MjQ4KSIgZmlsbD0iI0U4RThFOCIgZD0ibTkuNDgwNDYsOC45NjE1bDEuMjYsLTEuMjZsLTUuMDQsLTUuMDRsLTUuNDYsNS4wNGwxLjI2LDEuMjZsNC4yLC0zLjc4bDMuNzgsMy43OHoiLz48L3N2Zz4=)}.hc-black .monaco-scrollable-element>.scrollbar>.left-arrow,.vs-dark .monaco-scrollable-element>.scrollbar>.left-arrow{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMSAxMSI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDUuNDkwNDU5OTE4OTc1ODMxLDUuNDMxMzgyMTc5MjYwMjU0KSIgZmlsbD0iI0U4RThFOCIgZD0ibTkuNDgwNDYsOC41ODEzOGwxLjI2LC0xLjI2bC01LjA0LC01LjA0bC01LjQ2LDUuMDRsMS4yNiwxLjI2bDQuMiwtMy43OGwzLjc4LDMuNzh6Ii8+PC9zdmc+)}.hc-black .monaco-scrollable-element>.scrollbar>.right-arrow,.vs-dark .monaco-scrollable-element>.scrollbar>.right-arrow{background:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTEgMTEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoOTAgNS42MTcxNjUwODg2NTM1NjQ1LDUuNTU4MDg5NzMzMTIzNzgpICIgZmlsbD0iI0U4RThFOCIgZD0ibTkuNjA3MTcsOC43MDgwOWwxLjI2LC0xLjI2bC01LjA0LC01LjA0bC01LjQ2LDUuMDRsMS4yNiwxLjI2bDQuMiwtMy43OGwzLjc4LDMuNzh6Ii8+PC9zdmc+)}.monaco-scrollable-element>.visible{opacity:1;background:transparent;transition:opacity .1s linear}.monaco-scrollable-element>.invisible{opacity:0;pointer-events:none}.monaco-scrollable-element>.invisible.fade{transition:opacity .8s linear}.monaco-scrollable-element>.shadow{position:absolute;display:none}.monaco-scrollable-element>.shadow.top{display:block;top:0;left:3px;height:3px;width:100%;box-shadow:inset 0 6px 6px -6px #ddd}.monaco-scrollable-element>.shadow.left{display:block;top:3px;left:0;height:100%;width:3px;box-shadow:inset 6px 0 6px -6px #ddd}.monaco-scrollable-element>.shadow.top-left-corner{display:block;top:0;left:0;height:3px;width:3px}.monaco-scrollable-element>.shadow.top.left{box-shadow:inset 6px 6px 6px -6px #ddd}.vs .monaco-scrollable-element>.scrollbar>.slider{background:hsla(0,0%,39%,.4)}.vs-dark .monaco-scrollable-element>.scrollbar>.slider{background:hsla(0,0%,47%,.4)}.hc-black .monaco-scrollable-element>.scrollbar>.slider{background:rgba(111,195,223,.6)}.monaco-scrollable-element>.scrollbar>.slider:hover{background:hsla(0,0%,39%,.7)}.hc-black .monaco-scrollable-element>.scrollbar>.slider:hover{background:rgba(111,195,223,.8)}.monaco-scrollable-element>.scrollbar>.slider.active{background:rgba(0,0,0,.6)}.vs-dark .monaco-scrollable-element>.scrollbar>.slider.active{background:hsla(0,0%,75%,.4)}.hc-black .monaco-scrollable-element>.scrollbar>.slider.active{background:#6fc3df}.vs-dark .monaco-scrollable-element .shadow.top{box-shadow:none}.vs-dark .monaco-scrollable-element .shadow.left{box-shadow:inset 6px 0 6px -6px #000}.vs-dark .monaco-scrollable-element .shadow.top.left{box-shadow:inset 6px 6px 6px -6px #000}.hc-black .monaco-scrollable-element .shadow.left,.hc-black .monaco-scrollable-element .shadow.top,.hc-black .monaco-scrollable-element .shadow.top.left{box-shadow:none}.monaco-split-view2{position:relative;width:100%;height:100%}.monaco-split-view2>.sash-container{position:absolute;width:100%;height:100%;pointer-events:none}.monaco-split-view2>.sash-container>.monaco-sash{pointer-events:auto}.monaco-split-view2>.split-view-container{display:flex;width:100%;height:100%;white-space:nowrap}.monaco-split-view2.vertical>.split-view-container{flex-direction:column}.monaco-split-view2.horizontal>.split-view-container{flex-direction:row}.monaco-split-view2>.split-view-container>.split-view-view{white-space:normal;flex:none;position:relative}.monaco-split-view2.vertical>.split-view-container>.split-view-view{width:100%}.monaco-split-view2.horizontal>.split-view-container>.split-view-view{height:100%;display:inline-block}.monaco-split-view2.separator-border>.split-view-container>.split-view-view:not(:first-child):before{content:" ";position:absolute;top:0;left:0;z-index:5;pointer-events:none;background-color:var(--separator-border)}.monaco-split-view2.separator-border.horizontal>.split-view-container>.split-view-view:not(:first-child):before{height:100%;width:1px}.monaco-split-view2.separator-border.vertical>.split-view-container>.split-view-view:not(:first-child):before{height:1px;width:100%}.monaco-tl-row{display:flex;height:100%;align-items:center}.monaco-tl-contents,.monaco-tl-twistie{height:100%}.monaco-tl-twistie{font-size:10px;text-align:right;margin-right:6px;flex-shrink:0;width:16px}.monaco-tl-contents{flex:1;overflow:hidden}.monaco-tl-twistie.collapsible{background-size:16px;background-position:3px 50%;background-repeat:no-repeat;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iIzY0NjQ2NSIgZD0iTTExIDEwSDUuMzQ0TDExIDQuNDE0VjEweiIvPjwvc3ZnPg==)}.monaco-tl-twistie.collapsible.collapsed:not(.loading){display:inline-block;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iIzY0NjQ2NSIgZD0iTTYgNHY4bDQtNC00LTR6bTEgMi40MTRMOC41ODYgOCA3IDkuNTg2VjYuNDE0eiIvPjwvc3ZnPg==)}.vs-dark .monaco-tl-twistie.collapsible:not(.loading){background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI0U4RThFOCIgZD0iTTExIDEwSDUuMzQ0TDExIDQuNDE0VjEweiIvPjwvc3ZnPg==)}.vs-dark .monaco-tl-twistie.collapsible.collapsed:not(.loading){background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI0U4RThFOCIgZD0iTTYgNHY4bDQtNC00LTR6bTEgMi40MTRMOC41ODYgOCA3IDkuNTg2VjYuNDE0eiIvPjwvc3ZnPg==)}.hc-black .monaco-tl-twistie.collapsible:not(.loading){background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTExIDEwLjA3aC01LjY1Nmw1LjY1Ni01LjY1NnY1LjY1NnoiLz48L3N2Zz4=)}.hc-black .monaco-tl-twistie.collapsible.collapsed:not(.loading){background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTYgNHY4bDQtNC00LTR6bTEgMi40MTRsMS41ODYgMS41ODYtMS41ODYgMS41ODZ2LTMuMTcyeiIvPjwvc3ZnPg==)}.monaco-tl-twistie.loading{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0nMS4wJyBzdGFuZGFsb25lPSdubycgPz4KPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzEwcHgnIGhlaWdodD0nMTBweCc+Cgk8c3R5bGU+CiAgICBjaXJjbGUgewogICAgICBhbmltYXRpb246IGJhbGwgMC42cyBsaW5lYXIgaW5maW5pdGU7CiAgICB9CgogICAgY2lyY2xlOm50aC1jaGlsZCgyKSB7IGFuaW1hdGlvbi1kZWxheTogMC4wNzVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDMpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjE1czsgfQogICAgY2lyY2xlOm50aC1jaGlsZCg0KSB7IGFuaW1hdGlvbi1kZWxheTogMC4yMjVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDUpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjNzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDYpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjM3NXM7IH0KICAgIGNpcmNsZTpudGgtY2hpbGQoNykgeyBhbmltYXRpb24tZGVsYXk6IDAuNDVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDgpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjUyNXM7IH0KCiAgICBAa2V5ZnJhbWVzIGJhbGwgewogICAgICBmcm9tIHsgb3BhY2l0eTogMTsgfQogICAgICB0byB7IG9wYWNpdHk6IDAuMzsgfQogICAgfQoJPC9zdHlsZT4KCTxnPgoJCTxjaXJjbGUgY3g9JzUnIGN5PScxJyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzcuODI4NCcgY3k9JzIuMTcxNicgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PSc5JyBjeT0nNScgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PSc3LjgyODQnIGN5PSc3LjgyODQnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nNScgY3k9JzknIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nMi4xNzE2JyBjeT0nNy44Mjg0JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzEnIGN5PSc1JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzIuMTcxNicgY3k9JzIuMTcxNicgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCTwvZz4KPC9zdmc+Cg==);background-position:0}.vs-dark .monaco-tl-twistie.loading{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0nMS4wJyBzdGFuZGFsb25lPSdubycgPz4KPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzEwcHgnIGhlaWdodD0nMTBweCc+Cgk8c3R5bGU+CiAgICBjaXJjbGUgewogICAgICBhbmltYXRpb246IGJhbGwgMC42cyBsaW5lYXIgaW5maW5pdGU7CiAgICB9CgogICAgY2lyY2xlOm50aC1jaGlsZCgyKSB7IGFuaW1hdGlvbi1kZWxheTogMC4wNzVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDMpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjE1czsgfQogICAgY2lyY2xlOm50aC1jaGlsZCg0KSB7IGFuaW1hdGlvbi1kZWxheTogMC4yMjVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDUpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjNzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDYpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjM3NXM7IH0KICAgIGNpcmNsZTpudGgtY2hpbGQoNykgeyBhbmltYXRpb24tZGVsYXk6IDAuNDVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDgpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjUyNXM7IH0KCiAgICBAa2V5ZnJhbWVzIGJhbGwgewogICAgICBmcm9tIHsgb3BhY2l0eTogMTsgfQogICAgICB0byB7IG9wYWNpdHk6IDAuMzsgfQogICAgfQoJPC9zdHlsZT4KCTxnIHN0eWxlPSJmaWxsOmdyZXk7Ij4KCQk8Y2lyY2xlIGN4PSc1JyBjeT0nMScgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PSc3LjgyODQnIGN5PScyLjE3MTYnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nOScgY3k9JzUnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nNy44Mjg0JyBjeT0nNy44Mjg0JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzUnIGN5PSc5JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzIuMTcxNicgY3k9JzcuODI4NCcgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PScxJyBjeT0nNScgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PScyLjE3MTYnIGN5PScyLjE3MTYnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+Cgk8L2c+Cjwvc3ZnPgo=)}.hc-black .monaco-tl-twistie.loading{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0nMS4wJyBzdGFuZGFsb25lPSdubycgPz4KPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzEwcHgnIGhlaWdodD0nMTBweCc+Cgk8c3R5bGU+CiAgICBjaXJjbGUgewogICAgICBhbmltYXRpb246IGJhbGwgMC42cyBsaW5lYXIgaW5maW5pdGU7CiAgICB9CgogICAgY2lyY2xlOm50aC1jaGlsZCgyKSB7IGFuaW1hdGlvbi1kZWxheTogMC4wNzVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDMpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjE1czsgfQogICAgY2lyY2xlOm50aC1jaGlsZCg0KSB7IGFuaW1hdGlvbi1kZWxheTogMC4yMjVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDUpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjNzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDYpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjM3NXM7IH0KICAgIGNpcmNsZTpudGgtY2hpbGQoNykgeyBhbmltYXRpb24tZGVsYXk6IDAuNDVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDgpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjUyNXM7IH0KCiAgICBAa2V5ZnJhbWVzIGJhbGwgewogICAgICBmcm9tIHsgb3BhY2l0eTogMTsgfQogICAgICB0byB7IG9wYWNpdHk6IDAuMzsgfQogICAgfQoJPC9zdHlsZT4KCTxnIHN0eWxlPSJmaWxsOndoaXRlOyI+CgkJPGNpcmNsZSBjeD0nNScgY3k9JzEnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nNy44Mjg0JyBjeT0nMi4xNzE2JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzknIGN5PSc1JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzcuODI4NCcgY3k9JzcuODI4NCcgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PSc1JyBjeT0nOScgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PScyLjE3MTYnIGN5PSc3LjgyODQnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nMScgY3k9JzUnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nMi4xNzE2JyBjeT0nMi4xNzE2JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJPC9nPgo8L3N2Zz4K)}.monaco-quick-open-widget{position:absolute;width:600px;z-index:2000;padding-bottom:6px;left:50%;margin-left:-300px}.monaco-quick-open-widget .monaco-progress-container{position:absolute;left:0;top:38px;z-index:1;height:2px}.monaco-quick-open-widget .monaco-progress-container .progress-bit{height:2px}.monaco-quick-open-widget .quick-open-input{width:588px;border:none;margin:6px}.monaco-quick-open-widget .quick-open-input .monaco-inputbox{width:100%;height:25px}.monaco-quick-open-widget .quick-open-result-count{position:absolute;left:-10000px}.monaco-quick-open-widget .quick-open-tree{line-height:22px}.monaco-quick-open-widget .quick-open-tree .monaco-tree-row>.content>.sub-content{overflow:hidden}.monaco-quick-open-widget.content-changing .quick-open-tree .monaco-scrollable-element .slider{display:none}.monaco-quick-open-widget .quick-open-tree .quick-open-entry{overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;height:100%}.monaco-quick-open-widget .quick-open-tree .quick-open-entry>.quick-open-row{display:flex;align-items:center}.monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon{overflow:hidden;width:16px;height:16px;margin-right:4px;display:inline-block;vertical-align:middle;flex-shrink:0}.monaco-quick-open-widget .quick-open-tree .monaco-icon-label,.monaco-quick-open-widget .quick-open-tree .monaco-icon-label .monaco-icon-label-description-container{flex:1}.monaco-quick-open-widget .quick-open-tree .quick-open-entry .monaco-highlighted-label span{opacity:1}.monaco-quick-open-widget .quick-open-tree .quick-open-entry-meta{opacity:.7;line-height:normal}.monaco-quick-open-widget .quick-open-tree .content.has-group-label .quick-open-entry-keybinding{margin-right:8px}.monaco-quick-open-widget .quick-open-tree .quick-open-entry-keybinding .monaco-keybinding-key{vertical-align:text-bottom}.monaco-quick-open-widget .quick-open-tree .results-group{margin-right:18px}.monaco-quick-open-widget .quick-open-tree .focused .monaco-tree-row.focused>.content.has-actions>.results-group,.monaco-quick-open-widget .quick-open-tree .monaco-tree-row.focused>.content.has-actions>.results-group,.monaco-quick-open-widget .quick-open-tree .monaco-tree-row:hover:not(.highlighted)>.content.has-actions>.results-group{margin-right:0}.monaco-quick-open-widget .quick-open-tree .results-group-separator{border-top-width:1px;border-top-style:solid;box-sizing:border-box;margin-left:-11px;padding-left:11px}.monaco-tree .monaco-tree-row>.content.actions{position:relative;display:flex}.monaco-tree .monaco-tree-row>.content.actions>.sub-content{flex:1}.monaco-tree .monaco-tree-row>.content.actions .action-item{margin:0}.monaco-tree .monaco-tree-row>.content.actions>.primary-action-bar{line-height:22px;display:none;padding:0 .8em 0 .4em}.monaco-tree .monaco-tree-row.focused>.content.has-actions>.primary-action-bar{width:0;display:block}.monaco-tree.focused .monaco-tree-row.focused>.content.has-actions>.primary-action-bar,.monaco-tree .monaco-tree-row:hover:not(.highlighted)>.content.has-actions>.primary-action-bar,.monaco-tree .monaco-tree-row>.content.has-actions.more>.primary-action-bar{width:inherit;display:block}.monaco-tree .monaco-tree-row>.content.actions>.primary-action-bar .action-label{margin-right:.4em;margin-top:4px;background-repeat:no-repeat;width:16px;height:16px}.monaco-quick-open-widget .quick-open-tree .monaco-highlighted-label .highlight{font-weight:700}.monaco-tree{height:100%;width:100%;white-space:nowrap;-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;-o-user-select:none;user-select:none;position:relative}.monaco-tree>.monaco-scrollable-element{height:100%}.monaco-tree>.monaco-scrollable-element>.monaco-tree-wrapper{height:100%;width:100%;position:relative}.monaco-tree .monaco-tree-rows{position:absolute;width:100%;height:100%}.monaco-tree .monaco-tree-rows>.monaco-tree-row{-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;cursor:pointer;overflow:hidden;width:100%;touch-action:none}.monaco-tree .monaco-tree-rows>.monaco-tree-row>.content{position:relative;height:100%}.monaco-tree-drag-image{display:inline-block;padding:1px 7px;border-radius:10px;font-size:12px;position:absolute}.monaco-tree .monaco-tree-rows>.monaco-tree-row.scrolling{display:none}.monaco-tree .monaco-tree-rows.show-twisties>.monaco-tree-row.has-children>.content:before{content:" ";position:absolute;display:block;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iIzY0NjQ2NSIgZD0iTTYgNHY4bDQtNC00LTR6bTEgMi40MTRMOC41ODYgOCA3IDkuNTg2VjYuNDE0eiIvPjwvc3ZnPg==) 50% 50% no-repeat;width:16px;height:100%;top:0;left:-16px}.monaco-tree .monaco-tree-rows.show-twisties>.monaco-tree-row.expanded>.content:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iIzY0NjQ2NSIgZD0iTTExIDEwSDUuMzQ0TDExIDQuNDE0VjEweiIvPjwvc3ZnPg==)}.monaco-tree .monaco-tree-rows>.monaco-tree-row.has-children.loading>.content:before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0nMS4wJyBzdGFuZGFsb25lPSdubycgPz4KPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzEwcHgnIGhlaWdodD0nMTBweCc+Cgk8c3R5bGU+CiAgICBjaXJjbGUgewogICAgICBhbmltYXRpb246IGJhbGwgMC42cyBsaW5lYXIgaW5maW5pdGU7CiAgICB9CgogICAgY2lyY2xlOm50aC1jaGlsZCgyKSB7IGFuaW1hdGlvbi1kZWxheTogMC4wNzVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDMpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjE1czsgfQogICAgY2lyY2xlOm50aC1jaGlsZCg0KSB7IGFuaW1hdGlvbi1kZWxheTogMC4yMjVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDUpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjNzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDYpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjM3NXM7IH0KICAgIGNpcmNsZTpudGgtY2hpbGQoNykgeyBhbmltYXRpb24tZGVsYXk6IDAuNDVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDgpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjUyNXM7IH0KCiAgICBAa2V5ZnJhbWVzIGJhbGwgewogICAgICBmcm9tIHsgb3BhY2l0eTogMTsgfQogICAgICB0byB7IG9wYWNpdHk6IDAuMzsgfQogICAgfQoJPC9zdHlsZT4KCTxnPgoJCTxjaXJjbGUgY3g9JzUnIGN5PScxJyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzcuODI4NCcgY3k9JzIuMTcxNicgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PSc5JyBjeT0nNScgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PSc3LjgyODQnIGN5PSc3LjgyODQnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nNScgY3k9JzknIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nMi4xNzE2JyBjeT0nNy44Mjg0JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzEnIGN5PSc1JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzIuMTcxNicgY3k9JzIuMTcxNicgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCTwvZz4KPC9zdmc+Cg==)}.monaco-tree.highlighted .monaco-tree-rows>.monaco-tree-row:not(.highlighted){opacity:.3}.vs-dark .monaco-tree .monaco-tree-rows.show-twisties>.monaco-tree-row.has-children>.content:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI0U4RThFOCIgZD0iTTYgNHY4bDQtNC00LTR6bTEgMi40MTRMOC41ODYgOCA3IDkuNTg2VjYuNDE0eiIvPjwvc3ZnPg==)}.vs-dark .monaco-tree .monaco-tree-rows.show-twisties>.monaco-tree-row.expanded>.content:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI0U4RThFOCIgZD0iTTExIDEwSDUuMzQ0TDExIDQuNDE0VjEweiIvPjwvc3ZnPg==)}.vs-dark .monaco-tree .monaco-tree-rows>.monaco-tree-row.has-children.loading>.content:before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0nMS4wJyBzdGFuZGFsb25lPSdubycgPz4KPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzEwcHgnIGhlaWdodD0nMTBweCc+Cgk8c3R5bGU+CiAgICBjaXJjbGUgewogICAgICBhbmltYXRpb246IGJhbGwgMC42cyBsaW5lYXIgaW5maW5pdGU7CiAgICB9CgogICAgY2lyY2xlOm50aC1jaGlsZCgyKSB7IGFuaW1hdGlvbi1kZWxheTogMC4wNzVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDMpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjE1czsgfQogICAgY2lyY2xlOm50aC1jaGlsZCg0KSB7IGFuaW1hdGlvbi1kZWxheTogMC4yMjVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDUpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjNzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDYpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjM3NXM7IH0KICAgIGNpcmNsZTpudGgtY2hpbGQoNykgeyBhbmltYXRpb24tZGVsYXk6IDAuNDVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDgpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjUyNXM7IH0KCiAgICBAa2V5ZnJhbWVzIGJhbGwgewogICAgICBmcm9tIHsgb3BhY2l0eTogMTsgfQogICAgICB0byB7IG9wYWNpdHk6IDAuMzsgfQogICAgfQoJPC9zdHlsZT4KCTxnIHN0eWxlPSJmaWxsOmdyZXk7Ij4KCQk8Y2lyY2xlIGN4PSc1JyBjeT0nMScgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PSc3LjgyODQnIGN5PScyLjE3MTYnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nOScgY3k9JzUnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nNy44Mjg0JyBjeT0nNy44Mjg0JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzUnIGN5PSc5JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzIuMTcxNicgY3k9JzcuODI4NCcgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PScxJyBjeT0nNScgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PScyLjE3MTYnIGN5PScyLjE3MTYnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+Cgk8L2c+Cjwvc3ZnPgo=)}.hc-black .monaco-tree .monaco-tree-rows.show-twisties>.monaco-tree-row.has-children>.content:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTYgNHY4bDQtNC00LTR6bTEgMi40MTRsMS41ODYgMS41ODYtMS41ODYgMS41ODZ2LTMuMTcyeiIvPjwvc3ZnPg==)}.hc-black .monaco-tree .monaco-tree-rows.show-twisties>.monaco-tree-row.expanded>.content:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTExIDEwLjA3aC01LjY1Nmw1LjY1Ni01LjY1NnY1LjY1NnoiLz48L3N2Zz4=)}.hc-black .monaco-tree .monaco-tree-rows>.monaco-tree-row.has-children.loading>.content:before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0nMS4wJyBzdGFuZGFsb25lPSdubycgPz4KPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzEwcHgnIGhlaWdodD0nMTBweCc+Cgk8c3R5bGU+CiAgICBjaXJjbGUgewogICAgICBhbmltYXRpb246IGJhbGwgMC42cyBsaW5lYXIgaW5maW5pdGU7CiAgICB9CgogICAgY2lyY2xlOm50aC1jaGlsZCgyKSB7IGFuaW1hdGlvbi1kZWxheTogMC4wNzVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDMpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjE1czsgfQogICAgY2lyY2xlOm50aC1jaGlsZCg0KSB7IGFuaW1hdGlvbi1kZWxheTogMC4yMjVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDUpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjNzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDYpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjM3NXM7IH0KICAgIGNpcmNsZTpudGgtY2hpbGQoNykgeyBhbmltYXRpb24tZGVsYXk6IDAuNDVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDgpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjUyNXM7IH0KCiAgICBAa2V5ZnJhbWVzIGJhbGwgewogICAgICBmcm9tIHsgb3BhY2l0eTogMTsgfQogICAgICB0byB7IG9wYWNpdHk6IDAuMzsgfQogICAgfQoJPC9zdHlsZT4KCTxnIHN0eWxlPSJmaWxsOndoaXRlOyI+CgkJPGNpcmNsZSBjeD0nNScgY3k9JzEnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nNy44Mjg0JyBjeT0nMi4xNzE2JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzknIGN5PSc1JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzcuODI4NCcgY3k9JzcuODI4NCcgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PSc1JyBjeT0nOScgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PScyLjE3MTYnIGN5PSc3LjgyODQnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nMScgY3k9JzUnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nMi4xNzE2JyBjeT0nMi4xNzE2JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJPC9nPgo8L3N2Zz4K)}.monaco-tree-action.collapse-all{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iLTEgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMSAwIDE2IDE2Ij48cGF0aCBmaWxsPSIjNDI0MjQyIiBkPSJNMTQgMXY5aC0xdi04aC04di0xaDl6bS0xMSAydjFoOHY4aDF2LTloLTl6bTcgMnY5aC05di05aDl6bS0yIDJoLTV2NWg1di01eiIvPjxyZWN0IHg9IjQiIHk9IjkiIGZpbGw9IiMwMDUzOUMiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiLz48L3N2Zz4=) 50% no-repeat}.hc-black .monaco-tree-action.collapse-all,.vs-dark .monaco-tree-action.collapse-all{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iLTEgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMSAwIDE2IDE2Ij48cGF0aCBmaWxsPSIjQzVDNUM1IiBkPSJNMTQgMXY5aC0xdi04aC04di0xaDl6bS0xMSAydjFoOHY4aDF2LTloLTl6bTcgMnY5aC05di05aDl6bS0yIDJoLTV2NWg1di01eiIvPjxyZWN0IHg9IjQiIHk9IjkiIGZpbGw9IiM3NUJFRkYiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiLz48L3N2Zz4=) 50% no-repeat}.monaco-editor .inputarea{min-width:0;min-height:0;margin:0;padding:0;position:absolute;outline:none!important;resize:none;border:none;overflow:hidden;color:transparent;background-color:transparent}.monaco-editor .inputarea.ime-input{z-index:10}.monaco-editor .margin-view-overlays .current-line,.monaco-editor .view-overlays .current-line{display:block;position:absolute;left:0;top:0;box-sizing:border-box}.monaco-editor .margin-view-overlays .current-line.current-line-margin.current-line-margin-both{border-right:0}.monaco-editor .lines-content .cdr{position:absolute}.monaco-editor .glyph-margin{position:absolute;top:0}.monaco-editor .lines-content .cigr,.monaco-editor .lines-content .cigra,.monaco-editor .margin-view-overlays .cgmr{position:absolute}.monaco-editor .margin-view-overlays .line-numbers{position:absolute;text-align:right;display:inline-block;vertical-align:middle;box-sizing:border-box;cursor:default;height:100%}.monaco-editor .relative-current-line-number{text-align:left;display:inline-block;width:100%}.monaco-editor .margin-view-overlays .line-numbers{cursor:-webkit-image-set(url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIyNSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxNSAyNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTUgMjU7Ij48cG9seWdvbiBzdHlsZT0iZmlsbDojRkZGRkZGO3N0cm9rZTojMDAwMDAwIiBwb2ludHM9IjE0LjUsMS4yIDEuOSwxMy44IDcsMTMuOCAzLjIsMjEuNSA2LjMsMjIuNSAxMC4xLDE0LjkgMTQuNSwxOCIvPjwvc3ZnPg==) 1x,url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCAzMCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzAgNTA7Ij48cG9seWdvbiBzdHlsZT0iZmlsbDojRkZGRkZGO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoyOyIgcG9pbnRzPSIyOSwyLjQgMy44LDI3LjYgMTQsMjcuNiA2LjQsNDMgMTIuNiw0NSAyMC4yLDI5LjggMjksMzYiLz48L3N2Zz4K) 2x) 30 0,default}.monaco-editor.mac .margin-view-overlays .line-numbers{cursor:-webkit-image-set(url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTMgMTkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEzIDE5OyIgd2lkdGg9IjEzIiBoZWlnaHQ9IjE5Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fTwvc3R5bGU+PHRpdGxlPmZsaXBwZWQtY3Vyc29yLW1hYzwvdGl0bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTUuMywxNi42bDEuNi00LjdIMi4xTDEyLjUsMS4ydjE0LjRMOS43LDEzbC0xLjYsNC42Yy0wLjIsMC41LTAuOCwwLjgtMS4zLDAuNkw2LDE3LjkgQzUuNCwxNy43LDUuMSwxNy4yLDUuMywxNi42eiIvPjwvc3ZnPgo=) 1x,url(data:image/svg+xml;base64,CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDI2IDM4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNiAzODsiIHdpZHRoPSIyNiIgaGVpZ2h0PSIzOCI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe3N0cm9rZTojRkZGRkZGO3N0cm9rZS1taXRlcmxpbWl0OjEwO308L3N0eWxlPgk8dGl0bGU+ZmxpcHBlZC1jdXJzb3ItbWFjPC90aXRsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTAuNiwzMy4ybDMuMi05LjRINC4yTDI1LDIuNHYyOC44TDE5LjQsMjZsLTMuMiw5LjJjLTAuNCwxLTEuNiwxLjYtMi42LDEuMkwxMiwzNS44IEMxMC44LDM1LjQsMTAuMiwzNC40LDEwLjYsMzMuMnoiLz48L3N2Zz4K) 2x) 24 3,default}.monaco-editor .margin-view-overlays .line-numbers.lh-odd{margin-top:1px}.monaco-editor.no-user-select .lines-content,.monaco-editor.no-user-select .view-line,.monaco-editor.no-user-select .view-lines{-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.monaco-editor .view-lines{cursor:text;white-space:nowrap}.monaco-editor.hc-black.mac .view-lines,.monaco-editor.vs-dark.mac .view-lines{cursor:-webkit-image-set(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAL0lEQVQoz2NgCD3x//9/BhBYBWdhgFVAiVW4JBFKGIa4AqD0//9D3pt4I4tAdAMAHTQ/j5Zom30AAAAASUVORK5CYII=) 1x,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAz0lEQVRIx2NgYGBY/R8I/vx5eelX3n82IJ9FxGf6tksvf/8FiTMQAcAGQMDvSwu09abffY8QYSAScNk45G198eX//yev73/4///701eh//kZSARckrNBRvz//+8+6ZohwCzjGNjdgQxkAg7B9WADeBjIBqtJCbhRA0YNoIkBSNmaPEMoNmA0FkYNoFKhapJ6FGyAH3nauaSmPfwI0v/3OukVi0CIZ+F25KrtYcx/CTIy0e+rC7R1Z4KMICVTQQ14feVXIbR695u14+Ir4gwAAD49E54wc1kWAAAAAElFTkSuQmCC) 2x) 5 8,text}.monaco-editor .view-line{position:absolute;width:100%}.monaco-editor .lines-decorations{position:absolute;top:0;background:#fff}.monaco-editor .margin-view-overlays .cldr{position:absolute;height:100%}.monaco-editor .margin-view-overlays .cmdr{position:absolute;left:0;width:100%;height:100%}.monaco-editor .minimap.slider-mouseover .minimap-slider{opacity:0;transition:opacity .1s linear}.monaco-editor .minimap.slider-mouseover .minimap-slider.active,.monaco-editor .minimap.slider-mouseover:hover .minimap-slider{opacity:1}.monaco-editor .minimap-shadow-hidden{position:absolute;width:0}.monaco-editor .minimap-shadow-visible{position:absolute;left:-6px;width:6px}.monaco-editor .overlayWidgets{position:absolute;top:0;left:0}.monaco-editor .view-ruler{position:absolute;top:0}.monaco-editor .scroll-decoration{position:absolute;top:0;left:0;height:6px}.monaco-editor .lines-content .cslr{position:absolute}.monaco-editor .top-left-radius{border-top-left-radius:3px}.monaco-editor .bottom-left-radius{border-bottom-left-radius:3px}.monaco-editor .top-right-radius{border-top-right-radius:3px}.monaco-editor .bottom-right-radius{border-bottom-right-radius:3px}.monaco-editor.hc-black .top-left-radius{border-top-left-radius:0}.monaco-editor.hc-black .bottom-left-radius{border-bottom-left-radius:0}.monaco-editor.hc-black .top-right-radius{border-top-right-radius:0}.monaco-editor.hc-black .bottom-right-radius{border-bottom-right-radius:0}.monaco-editor .cursors-layer{position:absolute;top:0}.monaco-editor .cursors-layer>.cursor{position:absolute;cursor:text;overflow:hidden}.monaco-editor .cursors-layer.cursor-smooth-caret-animation>.cursor{transition:80ms}.monaco-editor .cursors-layer.cursor-block-outline-style>.cursor{box-sizing:border-box;background:transparent!important;border-style:solid;border-width:1px}.monaco-editor .cursors-layer.cursor-underline-style>.cursor{border-bottom-width:2px;border-bottom-style:solid;background:transparent!important;box-sizing:border-box}.monaco-editor .cursors-layer.cursor-underline-thin-style>.cursor{border-bottom-width:1px;border-bottom-style:solid;background:transparent!important;box-sizing:border-box}@keyframes monaco-cursor-smooth{0%,20%{opacity:1}60%,to{opacity:0}}@keyframes monaco-cursor-phase{0%,20%{opacity:1}90%,to{opacity:0}}@keyframes monaco-cursor-expand{0%,20%{transform:scaleY(1)}80%,to{transform:scaleY(0)}}.cursor-smooth{animation:monaco-cursor-smooth .5s ease-in-out 0s 20 alternate}.cursor-phase{animation:monaco-cursor-phase .5s ease-in-out 0s 20 alternate}.cursor-expand>.cursor{animation:monaco-cursor-expand .5s ease-in-out 0s 20 alternate}.monaco-diff-editor .diffOverview{z-index:9}.monaco-diff-editor.vs .diffOverview{background:rgba(0,0,0,.03)}.monaco-diff-editor.vs-dark .diffOverview{background:hsla(0,0%,100%,.01)}.monaco-diff-editor .diffViewport{box-shadow:inset 0 0 1px 0 #b9b9b9;background:rgba(0,0,0,.1)}.monaco-diff-editor.hc-black .diffViewport,.monaco-diff-editor.vs-dark .diffViewport{background:hsla(0,0%,100%,.1)}.monaco-scrollable-element.modified-in-monaco-diff-editor.vs-dark .scrollbar,.monaco-scrollable-element.modified-in-monaco-diff-editor.vs .scrollbar{background:transparent}.monaco-scrollable-element.modified-in-monaco-diff-editor.hc-black .scrollbar{background:none}.monaco-scrollable-element.modified-in-monaco-diff-editor .slider{z-index:10}.modified-in-monaco-diff-editor .slider.active{background:hsla(0,0%,67%,.4)}.modified-in-monaco-diff-editor.hc-black .slider.active{background:none}.monaco-diff-editor .delete-sign,.monaco-diff-editor .insert-sign,.monaco-editor .delete-sign,.monaco-editor .insert-sign{background-size:60%;opacity:.7;background-repeat:no-repeat;background-position:50% 50%;background-position:50%;background-size:11px 11px}.monaco-diff-editor.hc-black .delete-sign,.monaco-diff-editor.hc-black .insert-sign,.monaco-editor.hc-black .delete-sign,.monaco-editor.hc-black .insert-sign{opacity:1}.monaco-diff-editor .insert-sign,.monaco-editor .insert-sign{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPkxheWVyIDE8L3RpdGxlPjxyZWN0IGhlaWdodD0iMTEiIHdpZHRoPSIzIiB5PSIzIiB4PSI3IiBmaWxsPSIjNDI0MjQyIi8+PHJlY3QgaGVpZ2h0PSIzIiB3aWR0aD0iMTEiIHk9IjciIHg9IjMiIGZpbGw9IiM0MjQyNDIiLz48L3N2Zz4=)}.monaco-diff-editor .delete-sign,.monaco-editor .delete-sign{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPkxheWVyIDE8L3RpdGxlPjxyZWN0IGhlaWdodD0iMyIgd2lkdGg9IjExIiB5PSI3IiB4PSIzIiBmaWxsPSIjNDI0MjQyIi8+PC9zdmc+)}.monaco-diff-editor.hc-black .insert-sign,.monaco-diff-editor.vs-dark .insert-sign,.monaco-editor.hc-black .insert-sign,.monaco-editor.vs-dark .insert-sign{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPkxheWVyIDE8L3RpdGxlPjxyZWN0IGhlaWdodD0iMTEiIHdpZHRoPSIzIiB5PSIzIiB4PSI3IiBmaWxsPSIjQzVDNUM1Ii8+PHJlY3QgaGVpZ2h0PSIzIiB3aWR0aD0iMTEiIHk9IjciIHg9IjMiIGZpbGw9IiNDNUM1QzUiLz48L3N2Zz4=)}.monaco-diff-editor.hc-black .delete-sign,.monaco-diff-editor.vs-dark .delete-sign,.monaco-editor.hc-black .delete-sign,.monaco-editor.vs-dark .delete-sign{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPkxheWVyIDE8L3RpdGxlPjxyZWN0IGhlaWdodD0iMyIgd2lkdGg9IjExIiB5PSI3IiB4PSIzIiBmaWxsPSIjQzVDNUM1Ii8+PC9zdmc+)}.monaco-editor .inline-added-margin-view-zone,.monaco-editor .inline-deleted-margin-view-zone{text-align:right}.monaco-editor .diagonal-fill{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAChJREFUKFNjOH/+fAMDDgCSu3Dhwn9c8gwwBTgNGR4KQP4HhQOhsAIAZCBTkhtqePcAAAAASUVORK5CYII=)}.monaco-editor.vs-dark .diagonal-fill{opacity:.2}.monaco-editor.hc-black .diagonal-fill{background:none}.monaco-editor .view-zones .view-lines .view-line span{display:inline-block}.monaco-diff-editor .diff-review-line-number{text-align:right;display:inline-block}.monaco-diff-editor .diff-review{position:absolute;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.monaco-diff-editor .diff-review-summary{padding-left:10px}.monaco-diff-editor .diff-review-shadow{position:absolute}.monaco-diff-editor .diff-review-row{white-space:pre}.monaco-diff-editor .diff-review-table{display:table;min-width:100%}.monaco-diff-editor .diff-review-row{display:table-row;width:100%}.monaco-diff-editor .diff-review-cell{display:table-cell}.monaco-diff-editor .diff-review-spacer{display:inline-block;width:10px}.monaco-diff-editor .diff-review-actions{display:inline-block;position:absolute;right:10px;top:2px}.monaco-diff-editor .diff-review-actions .action-label{width:16px;height:16px;margin:2px 0}.monaco-diff-editor .action-label.icon.close-diff-review{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMyAzIDE2IDE2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMgMyAxNiAxNiI+PHBvbHlnb24gZmlsbD0iIzQyNDI0MiIgcG9pbnRzPSIxMi41OTcsMTEuMDQyIDE1LjQsMTMuODQ1IDEzLjg0NCwxNS40IDExLjA0MiwxMi41OTggOC4yMzksMTUuNCA2LjY4MywxMy44NDUgOS40ODUsMTEuMDQyIDYuNjgzLDguMjM5IDguMjM4LDYuNjgzIDExLjA0Miw5LjQ4NiAxMy44NDUsNi42ODMgMTUuNCw4LjIzOSIvPjwvc3ZnPg==) 50% no-repeat}.monaco-diff-editor.hc-black .action-label.icon.close-diff-review,.monaco-diff-editor.vs-dark .action-label.icon.close-diff-review{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMyAzIDE2IDE2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMgMyAxNiAxNiI+PHBvbHlnb24gZmlsbD0iI2U4ZThlOCIgcG9pbnRzPSIxMi41OTcsMTEuMDQyIDE1LjQsMTMuODQ1IDEzLjg0NCwxNS40IDExLjA0MiwxMi41OTggOC4yMzksMTUuNCA2LjY4MywxMy44NDUgOS40ODUsMTEuMDQyIDYuNjgzLDguMjM5IDguMjM4LDYuNjgzIDExLjA0Miw5LjQ4NiAxMy44NDUsNi42ODMgMTUuNCw4LjIzOSIvPjwvc3ZnPg==) 50% no-repeat}::-ms-clear{display:none}.monaco-editor .editor-widget input{color:inherit}.monaco-editor{position:relative;overflow:visible;-webkit-text-size-adjust:100%;-webkit-font-feature-settings:"liga" off,"calt" off;font-feature-settings:"liga" off,"calt" off}.monaco-editor.enable-ligatures{-webkit-font-feature-settings:"liga" on,"calt" on;font-feature-settings:"liga" on,"calt" on}.monaco-editor .overflow-guard{position:relative;overflow:hidden}.monaco-editor .view-overlays{position:absolute;top:0}.monaco-editor .vs-whitespace{display:inline-block}.monaco-editor .bracket-match{box-sizing:border-box}.monaco-menu .monaco-action-bar.vertical .action-label.hover{background-color:#eee}.monaco-editor .lightbulb-glyph{display:flex;align-items:center;justify-content:center;height:16px;width:20px;padding-left:2px}.monaco-editor .lightbulb-glyph:hover{cursor:pointer}.monaco-editor.vs .lightbulb-glyph{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiI+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTEzLjUgNC4yQzEzLjEgMi4xIDEwLjggMCA5LjMgMEg2LjdjLS40IDAtLjYuMi0uNi4yQzQgLjggMi41IDIuNyAyLjUgNC45YzAgLjUtLjEgMi4zIDEuNyAzLjguNS41IDEuMiAyIDEuMyAyLjR2My4zTDcuMSAxNmgybDEuNS0xLjZWMTFjLjEtLjQuOC0xLjkgMS4zLTIuMyAxLjEtLjkgMS41LTEuOSAxLjYtMi43VjQuMnoiLz48Zz48ZyBmaWxsPSIjODQ4NDg0Ij48cGF0aCBkPSJNNi41IDEyaDN2MWgtM3pNNy41IDE1aDEuMWwuOS0xaC0zeiIvPjwvZz48cGF0aCBmaWxsPSIjZmMwIiBkPSJNMTIuNiA1YzAtMi4zLTEuOC00LjEtNC4xLTQuMS0uMSAwLTEuNC4xLTEuNC4xLTIuMS4zLTMuNyAyLTMuNyA0IDAgLjEtLjIgMS42IDEuNCAzIC43LjcgMS41IDIuNCAxLjYgMi45bC4xLjFoM2wuMS0uMmMuMS0uNS45LTIuMiAxLjYtMi45IDEuNi0xLjMgMS40LTIuOCAxLjQtMi45em0tMyAxbC0uNSAzaC0uNlY2YzEuMSAwIC45LTEgLjktMUg2LjV2LjFjMCAuMi4xLjkgMSAuOXYzSDdsLS4yLS43TDYuNSA2Yy0uNyAwLS45LS40LTEtLjd2LS40YzAtLjguOS0uOS45LS45aDMuMXMxIC4xIDEgMWMwIDAgLjEgMS0uOSAxeiIvPjwvZz48cGF0aCBmaWxsPSIjRjBFRkYxIiBkPSJNMTAuNSA1YzAtLjktMS0xLTEtMUg2LjRzLS45LjEtLjkuOXYuNGMwIC4zLjMuNy45LjdsLjQgMi4zLjIuN2guNVY2Yy0xIDAtMS0uNy0xLS45VjVoM3MuMSAxLS45IDF2M2guNmwuNS0zYy45IDAgLjgtMSAuOC0xeiIvPjwvc3ZnPg==) 50% no-repeat}.monaco-editor.vs .lightbulb-glyph.autofixable{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjAwMSA0LjJDMTIuNjAxIDIuMSAxMC4zMDEgMCA4LjgwMSAwSDYuMjAxQzUuODAxIDAgNS42MDEgMC4yIDUuNjAxIDAuMkMzLjUwMSAwLjggMi4wMDEgMi43IDIuMDAxIDQuOUMyLjAwMSA1LjQgMS45MDEgNy4yIDMuNzAxIDguN0M0LjIwMSA5LjIgNC45MDEgMTAuNyA1LjAwMSAxMS4xVjE0LjRMNi42MDEgMTZIOC42MDFMMTAuMTAxIDE0LjRWMTFDMTAuMjAxIDEwLjYgMTAuOTAxIDkuMSAxMS40MDEgOC43QzEyLjUwMSA3LjggMTIuOTAxIDYuOCAxMy4wMDEgNlY0LjJaIiBmaWxsPSIjRjZGNkY2Ii8+CjxwYXRoIGQ9Ik02LjAwMDk4IDEySDkuMDAwOThWMTNINi4wMDA5OFYxMlpNNy4wMDA5OCAxNUg4LjEwMDk4TDkuMDAwOTggMTRINi4wMDA5OEw3LjAwMDk4IDE1WiIgZmlsbD0iIzg0ODQ4NCIvPgo8cGF0aCBkPSJNMTIuMTAxMSA0Ljk5OTlDMTIuMTAxMSAyLjY5OTkgMTAuMzAxMSAwLjg5OTkwMiA4LjAwMTA3IDAuODk5OTAyQzcuOTAxMDcgMC44OTk5MDIgNi42MDEwNyAwLjk5OTkwMiA2LjYwMTA3IDAuOTk5OTAyQzQuNTAxMDcgMS4yOTk5IDIuOTAxMDcgMi45OTk5IDIuOTAxMDcgNC45OTk5QzIuOTAxMDcgNS4wOTk5IDIuNzAxMDcgNi41OTk5IDQuMzAxMDcgNy45OTk5QzUuMDAxMDcgOC42OTk5IDUuODAxMDcgMTAuMzk5OSA1LjkwMTA3IDEwLjg5OTlMNi4wMDEwNyAxMC45OTk5SDkuMDAxMDdMOS4xMDEwNyAxMC43OTk5QzkuMjAxMDcgMTAuMjk5OSAxMC4wMDExIDguNTk5OSAxMC43MDExIDcuODk5OUMxMi4zMDExIDYuNTk5OSAxMi4xMDExIDUuMDk5OSAxMi4xMDExIDQuOTk5OVY0Ljk5OTlaTTkuMTAxMDcgNS45OTk5TDguNjAxMDcgOC45OTk5SDguMDAxMDdWNS45OTk5QzkuMTAxMDcgNS45OTk5IDguOTAxMDcgNC45OTk5IDguOTAxMDcgNC45OTk5SDYuMDAxMDdWNS4wOTk5QzYuMDAxMDcgNS4yOTk5IDYuMTAxMDcgNS45OTk5IDcuMDAxMDcgNS45OTk5VjguOTk5OUg2LjUwMTA3TDYuMzAxMDcgOC4yOTk5TDYuMDAxMDcgNS45OTk5QzUuMzAxMDcgNS45OTk5IDUuMTAxMDcgNS41OTk5IDUuMDAxMDcgNS4yOTk5VjQuODk5OUM1LjAwMTA3IDQuMDk5OSA1LjkwMTA3IDMuOTk5OSA1LjkwMTA3IDMuOTk5OUg5LjAwMTA3QzkuMDAxMDcgMy45OTk5IDEwLjAwMTEgNC4wOTk5IDEwLjAwMTEgNC45OTk5QzEwLjAwMTEgNC45OTk5IDEwLjEwMTEgNS45OTk5IDkuMTAxMDcgNS45OTk5WiIgZmlsbD0iI0ZGQ0MwMCIvPgo8cGF0aCBkPSJNMTAuMDAxIDVDMTAuMDAxIDQuMSA5LjAwMDk4IDQgOS4wMDA5OCA0SDUuOTAwOThDNS45MDA5OCA0IDUuMDAwOTggNC4xIDUuMDAwOTggNC45VjUuM0M1LjAwMDk4IDUuNiA1LjMwMDk4IDYgNS45MDA5OCA2TDYuMzAwOTggOC4zTDYuNTAwOTggOUg3LjAwMDk4VjZDNi4wMDA5OCA2IDYuMDAwOTggNS4zIDYuMDAwOTggNS4xVjVIOS4wMDA5OEM5LjAwMDk4IDUgOS4xMDA5OCA2IDguMTAwOTggNlY5SDguNzAwOThMOS4yMDA5OCA2QzEwLjEwMSA2IDEwLjAwMSA1IDEwLjAwMSA1WiIgZmlsbD0iI0YwRUZGMSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggMTJDOCA5Ljc3Mzg2IDkuNzczODYgOCAxMiA4QzE0LjIyNjEgOCAxNiA5Ljc3Mzg2IDE2IDEyQzE2IDE0LjIyNjEgMTQuMjI2MSAxNiAxMiAxNkM5Ljc3Mzg2IDE2IDggMTQuMjI2MSA4IDEyWiIgZmlsbD0iI0Y2RjZGNiIvPgo8cGF0aCBkPSJNMTIuMzE5MiAxMi4zMDMxTDEzLjM0OTUgMTMuMzMzNEwxMy4zMzM0IDEzLjM0OTVMMTIuMzAzMSAxMi4zMTkyTDEyIDEyLjAxNjJMMTEuNjk3IDEyLjMxOTJMMTAuNjY2NyAxMy4zNDk1TDEwLjY1MDYgMTMuMzMzNEwxMS42ODA5IDEyLjMwMzFMMTEuOTgzOSAxMkwxMS42ODA5IDExLjY5N0wxMC42NTA2IDEwLjY2NjdMMTAuNjY2NyAxMC42NTA2TDExLjY5NyAxMS42ODA5TDEyIDExLjk4MzlMMTIuMzAzMSAxMS42ODA5TDEzLjMzMzQgMTAuNjUwNkwxMy4zNDk1IDEwLjY2NjdMMTIuMzE5MiAxMS42OTdMMTIuMDE2MiAxMkwxMi4zMTkyIDEyLjMwMzFaTTEyIDguNDYwMzRDMTAuMDMgOC40NjAzNCA4LjQ2MDM0IDEwLjAzIDguNDYwMzQgMTJDOC40NjAzNCAxMy45NzAxIDEwLjAzIDE1LjUzOTcgMTIgMTUuNTM5N0MxMy45NzAxIDE1LjUzOTcgMTUuNTM5NyAxMy45NzAxIDE1LjUzOTcgMTJDMTUuNTM5NyAxMC4wMyAxMy45NzAxIDguNDYwMzQgMTIgOC40NjAzNFoiIGZpbGw9IiMwMDdBQ0MiIHN0cm9rZT0iI0Y2RjZGNiIgc3Ryb2tlLXdpZHRoPSIwLjg1NzE0MyIvPgo8cGF0aCBkPSJNMTIuNjIyNSAxMi4wMDAyTDEzLjk1NTggMTMuMzMzNkwxMy4zMzM2IDEzLjk1NThMMTIuMDAwMiAxMi42MjI1TDEwLjY2NjkgMTMuOTU1OEwxMC4wNDQ3IDEzLjMzMzZMMTEuMzc4IDEyLjAwMDJMMTAuMDQ0NyAxMC42NjY5TDEwLjY2NjkgMTAuMDQ0N0wxMi4wMDAyIDExLjM3OEwxMy4zMzM2IDEwLjA0NDdMMTMuOTU1OCAxMC42NjY5TDEyLjYyMjUgMTIuMDAwMloiIGZpbGw9IiMwMDdBQ0MiLz4KPHBhdGggZD0iTTEwLjcwNCAxNEwxMS4yMDI4IDEyLjQ3MTJMMTAgMTEuNjM5NEgxMS40NzMyTDEyIDEwTDEyLjUzNjEgMTEuNjM5NEgxNEwxMi43OTcyIDEyLjQ3MTJMMTMuMzA1NCAxNEwxMiAxMy4wMjRMMTAuNzA0IDE0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==) 50% no-repeat}.monaco-editor.hc-black .lightbulb-glyph,.monaco-editor.vs-dark .lightbulb-glyph{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiI+PHBhdGggZmlsbD0iIzFFMUUxRSIgZD0iTTEzLjUgNC4yQzEzLjEgMi4xIDEwLjggMCA5LjMgMEg2LjdjLS40IDAtLjYuMi0uNi4yQzQgLjggMi41IDIuNyAyLjUgNC45YzAgLjUtLjEgMi4zIDEuNyAzLjguNS41IDEuMiAyIDEuMyAyLjR2My4zTDcuMSAxNmgybDEuNS0xLjZWMTFjLjEtLjQuOC0xLjkgMS4zLTIuMyAxLjEtLjkgMS41LTEuOSAxLjYtMi43VjQuMnoiLz48Zz48ZyBmaWxsPSIjQzVDNUM1Ij48cGF0aCBkPSJNNi41IDEyaDN2MWgtM3pNNy41IDE1aDEuMWwuOS0xaC0zeiIvPjwvZz48cGF0aCBmaWxsPSIjRERCMjA0IiBkPSJNMTIuNiA1YzAtMi4zLTEuOC00LjEtNC4xLTQuMS0uMSAwLTEuNC4xLTEuNC4xLTIuMS4zLTMuNyAyLTMuNyA0IDAgLjEtLjIgMS42IDEuNCAzIC43LjcgMS41IDIuNCAxLjYgMi45bC4xLjFoM2wuMS0uMmMuMS0uNS45LTIuMiAxLjYtMi45IDEuNi0xLjMgMS40LTIuOCAxLjQtMi45em0tMyAxbC0uNSAzaC0uNlY2YzEuMSAwIC45LTEgLjktMUg2LjV2LjFjMCAuMi4xLjkgMSAuOXYzSDdsLS4yLS43TDYuNSA2Yy0uNyAwLS45LS40LTEtLjd2LS40YzAtLjguOS0uOS45LS45aDMuMXMxIC4xIDEgMWMwIDAgLjEgMS0uOSAxeiIvPjwvZz48cGF0aCBmaWxsPSIjMjUyNTI2IiBkPSJNMTAuNSA1YzAtLjktMS0xLTEtMUg2LjRzLS45LjEtLjkuOXYuNGMwIC4zLjMuNy45LjdsLjQgMi4zLjIuN2guNVY2Yy0xIDAtMS0uNy0xLS45VjVoM3MuMSAxLS45IDF2M2guNmwuNS0zYy45IDAgLjgtMSAuOC0xeiIvPjwvc3ZnPg==) 50% no-repeat}.monaco-editor.hc-black .lightbulb-glyph.autofixable,.monaco-editor.vs-dark .lightbulb-glyph.autofixable{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjAwMSA0LjJDMTIuNjAxIDIuMSAxMC4zMDEgMCA4LjgwMSAwSDYuMjAxQzUuODAxIDAgNS42MDEgMC4yIDUuNjAxIDAuMkMzLjUwMSAwLjggMi4wMDEgMi43IDIuMDAxIDQuOUMyLjAwMSA1LjQgMS45MDEgNy4yIDMuNzAxIDguN0M0LjIwMSA5LjIgNC45MDEgMTAuNyA1LjAwMSAxMS4xVjE0LjRMNi42MDEgMTZIOC42MDFMMTAuMTAxIDE0LjRWMTFDMTAuMjAxIDEwLjYgMTAuOTAxIDkuMSAxMS40MDEgOC43QzEyLjUwMSA3LjggMTIuOTAxIDYuOCAxMy4wMDEgNlY0LjJaIiBmaWxsPSIjMUUxRTFFIi8+CjxwYXRoIGQ9Ik02LjAwMDk4IDEySDkuMDAwOThWMTNINi4wMDA5OFYxMlpNNy4wMDA5OCAxNUg4LjEwMDk4TDkuMDAwOTggMTRINi4wMDA5OEw3LjAwMDk4IDE1WiIgZmlsbD0iI0M1QzVDNSIvPgo8cGF0aCBkPSJNMTIuMTAxMSA0Ljk5OTlDMTIuMTAxMSAyLjY5OTkgMTAuMzAxMSAwLjg5OTkwMiA4LjAwMTA3IDAuODk5OTAyQzcuOTAxMDcgMC44OTk5MDIgNi42MDEwNyAwLjk5OTkwMiA2LjYwMTA3IDAuOTk5OTAyQzQuNTAxMDcgMS4yOTk5IDIuOTAxMDcgMi45OTk5IDIuOTAxMDcgNC45OTk5QzIuOTAxMDcgNS4wOTk5IDIuNzAxMDcgNi41OTk5IDQuMzAxMDcgNy45OTk5QzUuMDAxMDcgOC42OTk5IDUuODAxMDcgMTAuMzk5OSA1LjkwMTA3IDEwLjg5OTlMNi4wMDEwNyAxMC45OTk5SDkuMDAxMDdMOS4xMDEwNyAxMC43OTk5QzkuMjAxMDcgMTAuMjk5OSAxMC4wMDExIDguNTk5OSAxMC43MDExIDcuODk5OUMxMi4zMDExIDYuNTk5OSAxMi4xMDExIDUuMDk5OSAxMi4xMDExIDQuOTk5OVY0Ljk5OTlaTTkuMTAxMDcgNS45OTk5TDguNjAxMDcgOC45OTk5SDguMDAxMDdWNS45OTk5QzkuMTAxMDcgNS45OTk5IDguOTAxMDcgNC45OTk5IDguOTAxMDcgNC45OTk5SDYuMDAxMDdWNS4wOTk5QzYuMDAxMDcgNS4yOTk5IDYuMTAxMDcgNS45OTk5IDcuMDAxMDcgNS45OTk5VjguOTk5OUg2LjUwMTA3TDYuMzAxMDcgOC4yOTk5TDYuMDAxMDcgNS45OTk5QzUuMzAxMDcgNS45OTk5IDUuMTAxMDcgNS41OTk5IDUuMDAxMDcgNS4yOTk5VjQuODk5OUM1LjAwMTA3IDQuMDk5OSA1LjkwMTA3IDMuOTk5OSA1LjkwMTA3IDMuOTk5OUg5LjAwMTA3QzkuMDAxMDcgMy45OTk5IDEwLjAwMTEgNC4wOTk5IDEwLjAwMTEgNC45OTk5QzEwLjAwMTEgNC45OTk5IDEwLjEwMTEgNS45OTk5IDkuMTAxMDcgNS45OTk5WiIgZmlsbD0iI0REQjIwNCIvPgo8cGF0aCBkPSJNMTAuMDAxIDVDMTAuMDAxIDQuMSA5LjAwMDk4IDQgOS4wMDA5OCA0SDUuOTAwOThDNS45MDA5OCA0IDUuMDAwOTggNC4xIDUuMDAwOTggNC45VjUuM0M1LjAwMDk4IDUuNiA1LjMwMDk4IDYgNS45MDA5OCA2TDYuMzAwOTggOC4zTDYuNTAwOTggOUg3LjAwMDk4VjZDNi4wMDA5OCA2IDYuMDAwOTggNS4zIDYuMDAwOTggNS4xVjVIOS4wMDA5OEM5LjAwMDk4IDUgOS4xMDA5OCA2IDguMTAwOTggNlY5SDguNzAwOThMOS4yMDA5OCA2QzEwLjEwMSA2IDEwLjAwMSA1IDEwLjAwMSA1WiIgZmlsbD0iIzI1MjUyNiIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggMTJDOCA5Ljc3Mzg2IDkuNzczODYgOCAxMiA4QzE0LjIyNjEgOCAxNiA5Ljc3Mzg2IDE2IDEyQzE2IDE0LjIyNjEgMTQuMjI2MSAxNiAxMiAxNkM5Ljc3Mzg2IDE2IDggMTQuMjI2MSA4IDEyWiIgZmlsbD0iIzFFMUUxRSIvPgo8cGF0aCBkPSJNMTIuMzE5MiAxMi4zMDMxTDEzLjM0OTUgMTMuMzMzNEwxMy4zMzM0IDEzLjM0OTVMMTIuMzAzMSAxMi4zMTkyTDEyIDEyLjAxNjJMMTEuNjk3IDEyLjMxOTJMMTAuNjY2NyAxMy4zNDk1TDEwLjY1MDYgMTMuMzMzNEwxMS42ODA5IDEyLjMwMzFMMTEuOTgzOSAxMkwxMS42ODA5IDExLjY5N0wxMC42NTA2IDEwLjY2NjdMMTAuNjY2NyAxMC42NTA2TDExLjY5NyAxMS42ODA5TDEyIDExLjk4MzlMMTIuMzAzMSAxMS42ODA5TDEzLjMzMzQgMTAuNjUwNkwxMy4zNDk1IDEwLjY2NjdMMTIuMzE5MiAxMS42OTdMMTIuMDE2MiAxMkwxMi4zMTkyIDEyLjMwMzFaTTEyIDguNDYwMzRDMTAuMDMgOC40NjAzNCA4LjQ2MDM0IDEwLjAzIDguNDYwMzQgMTJDOC40NjAzNCAxMy45NzAxIDEwLjAzIDE1LjUzOTcgMTIgMTUuNTM5N0MxMy45NzAxIDE1LjUzOTcgMTUuNTM5NyAxMy45NzAxIDE1LjUzOTcgMTJDMTUuNTM5NyAxMC4wMyAxMy45NzAxIDguNDYwMzQgMTIgOC40NjAzNFoiIGZpbGw9IiMwMDdBQ0MiIHN0cm9rZT0iIzFFMUUxRSIgc3Ryb2tlLXdpZHRoPSIwLjg1NzE0MyIvPgo8cGF0aCBkPSJNMTIuNjIyNSAxMi4wMDAyTDEzLjk1NTggMTMuMzMzNkwxMy4zMzM2IDEzLjk1NThMMTIuMDAwMiAxMi42MjI1TDEwLjY2NjkgMTMuOTU1OEwxMC4wNDQ3IDEzLjMzMzZMMTEuMzc4IDEyLjAwMDJMMTAuMDQ0NyAxMC42NjY5TDEwLjY2NjkgMTAuMDQ0N0wxMi4wMDAyIDExLjM3OEwxMy4zMzM2IDEwLjA0NDdMMTMuOTU1OCAxMC42NjY5TDEyLjYyMjUgMTIuMDAwMloiIGZpbGw9IiMwMDdBQ0MiLz4KPHBhdGggZD0iTTEwLjcwNCAxNEwxMS4yMDI4IDEyLjQ3MTJMMTAgMTEuNjM5NEgxMS40NzMyTDEyIDEwTDEyLjUzNjEgMTEuNjM5NEgxNEwxMi43OTcyIDEyLjQ3MTJMMTMuMzA1NCAxNEwxMiAxMy4wMjRMMTAuNzA0IDE0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==) 50% no-repeat}.monaco-editor .codelens-decoration{overflow:hidden;display:inline-block;text-overflow:ellipsis}.monaco-editor .codelens-decoration>a,.monaco-editor .codelens-decoration>span{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;vertical-align:sub}.monaco-editor .codelens-decoration>a{text-decoration:none}.monaco-editor .codelens-decoration>a:hover{text-decoration:underline;cursor:pointer}.monaco-editor .codelens-decoration.invisible-cl{opacity:0}@keyframes fadein{0%{opacity:0;visibility:visible}to{opacity:1}}.monaco-editor .codelens-decoration.fadein{animation:fadein .1s linear}.colorpicker-widget{height:190px;user-select:none}.monaco-editor .colorpicker-hover:focus{outline:none}.colorpicker-header{display:flex;height:24px;position:relative;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=);background-size:9px 9px;image-rendering:pixelated}.colorpicker-header .picked-color{width:216px;line-height:24px;cursor:pointer;color:#fff;flex:1;text-align:center}.colorpicker-header .picked-color.light{color:#000}.colorpicker-header .original-color{width:74px;z-index:inherit;cursor:pointer}.colorpicker-body{display:flex;padding:8px;position:relative}.colorpicker-body .saturation-wrap{overflow:hidden;height:150px;position:relative;min-width:220px;flex:1}.colorpicker-body .saturation-box{height:150px;position:absolute}.colorpicker-body .saturation-selection{width:9px;height:9px;margin:-5px 0 0 -5px;border:1px solid #fff;border-radius:100%;box-shadow:0 0 2px rgba(0,0,0,.8);position:absolute}.colorpicker-body .strip{width:25px;height:150px}.colorpicker-body .hue-strip{position:relative;margin-left:8px;cursor:-webkit-grab;background:linear-gradient(180deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.colorpicker-body .opacity-strip{position:relative;margin-left:8px;cursor:-webkit-grab;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=);background-size:9px 9px;image-rendering:pixelated}.colorpicker-body .strip.grabbing{cursor:-webkit-grabbing}.colorpicker-body .slider{position:absolute;top:0;left:-2px;width:calc(100% + 4px);height:4px;box-sizing:border-box;border:1px solid hsla(0,0%,100%,.71);box-shadow:0 0 1px rgba(0,0,0,.85)}.colorpicker-body .strip .overlay{height:150px;pointer-events:none}.monaco-editor.vs .dnd-target{border-right:2px dotted #000;color:#fff}.monaco-editor.vs-dark .dnd-target{border-right:2px dotted #aeafad;color:#51504f}.monaco-editor.hc-black .dnd-target{border-right:2px dotted #fff;color:#000}.monaco-editor.hc-black.mac.mouse-default .view-lines,.monaco-editor.mouse-default .view-lines,.monaco-editor.vs-dark.mac.mouse-default .view-lines{cursor:default}.monaco-editor.hc-black.mac.mouse-copy .view-lines,.monaco-editor.mouse-copy .view-lines,.monaco-editor.vs-dark.mac.mouse-copy .view-lines{cursor:copy}.monaco-checkbox .label{width:12px;height:12px;border:1px solid #000;background-color:transparent;display:inline-block}.monaco-checkbox .checkbox{position:absolute;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}.monaco-checkbox .checkbox:checked+.label{background-color:#000}.monaco-editor .find-widget{position:absolute;z-index:10;top:-44px;height:34px;overflow:hidden;line-height:19px;transition:top .2s linear;padding:0 4px}.monaco-editor .find-widget.replaceToggled{top:-74px;height:64px}.monaco-editor .find-widget.replaceToggled>.replace-part{display:flex;display:-webkit-flex;align-items:center}.monaco-editor .find-widget.replaceToggled.visible,.monaco-editor .find-widget.visible{top:0}.monaco-editor .find-widget .monaco-inputbox .input{background-color:transparent;min-height:0}.monaco-editor .find-widget .replace-input .input{font-size:13px}.monaco-editor .find-widget>.find-part,.monaco-editor .find-widget>.replace-part{margin:4px 0 0 17px;font-size:12px;display:flex;display:-webkit-flex;align-items:center}.monaco-editor .find-widget>.find-part .monaco-inputbox,.monaco-editor .find-widget>.replace-part .monaco-inputbox{height:25px}.monaco-editor .find-widget>.find-part .monaco-inputbox>.wrapper>.input,.monaco-editor .find-widget>.replace-part .monaco-inputbox>.wrapper>.input{padding-top:2px;padding-bottom:2px}.monaco-editor .find-widget .monaco-findInput{vertical-align:middle;display:flex;display:-webkit-flex;flex:1}.monaco-editor .find-widget .matchesCount{display:flex;display:-webkit-flex;flex:initial;margin:0 1px 0 3px;padding:2px 2px 0;height:25px;vertical-align:middle;box-sizing:border-box;text-align:center;line-height:23px}.monaco-editor .find-widget .button{min-width:20px;width:20px;height:20px;display:flex;display:-webkit-flex;flex:initial;margin-left:3px;background-position:50%;background-repeat:no-repeat;cursor:pointer}.monaco-editor .find-widget .button:not(.disabled):hover{background-color:rgba(0,0,0,.1)}.monaco-editor .find-widget .button.left{margin-left:0;margin-right:3px}.monaco-editor .find-widget .button.wide{width:auto;padding:1px 6px;top:-1px}.monaco-editor .find-widget .button.toggle{position:absolute;top:0;left:0;width:18px;height:100%;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.monaco-editor .find-widget .button.toggle.disabled{display:none}.monaco-editor .find-widget .previous{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKCSB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iLTEgLTMgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTEgLTMgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cG9seWdvbiBmaWxsPSIjNDI0MjQyIiBwb2ludHM9IjEzLDQgNiw0IDksMSA2LDEgMiw1IDYsOSA5LDkgNiw2IDEzLDYgIi8+Cjwvc3ZnPgo=)}.monaco-editor .find-widget .next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKCSB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iLTEgLTMgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTEgLTMgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjNDI0MjQyIiBkPSJNMSw0aDdMNSwxaDNsNCw0TDgsOUg1bDMtM0gxVjR6Ii8+Cjwvc3ZnPgo=)}.monaco-editor .find-widget .disabled{opacity:.3;cursor:default}.monaco-editor .find-widget .monaco-checkbox{width:20px;height:20px;display:inline-block;vertical-align:middle;margin-left:3px}.monaco-editor .find-widget .monaco-checkbox .label{content:"";display:inline-block;background-repeat:no-repeat;background-position:0 0;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEwMzIuMzYyMikiPgogIDxyZWN0IHdpZHRoPSI5IiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjEwNDYuMzYyMiIgc3R5bGU9ImZpbGw6IzQyNDI0MjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICA8cmVjdCB3aWR0aD0iMTMiIGhlaWdodD0iMiIgeD0iMiIgeT0iMTA0My4zNjIyIiBzdHlsZT0iZmlsbDojNDI0MjQyO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgogIDxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjEwNDAuMzYyMiIgc3R5bGU9ImZpbGw6IzQyNDI0MjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMiIgeD0iMiIgeT0iMTAzNy4zNjIyIiBzdHlsZT0iZmlsbDojNDI0MjQyO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L2c+Cjwvc3ZnPg==);width:20px;height:20px;border:none}.monaco-editor .find-widget .monaco-checkbox .checkbox:disabled+.label{opacity:.3;cursor:default}.monaco-editor .find-widget .monaco-checkbox .checkbox:not(:disabled)+.label{cursor:pointer}.monaco-editor .find-widget .monaco-checkbox .checkbox:not(:disabled):hover:before+.label{background-color:#ddd}.monaco-editor .find-widget .monaco-checkbox .checkbox:checked+.label{background-color:hsla(0,0%,39%,.2)}.monaco-editor .find-widget .close-fw{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMyAzIDE2IDE2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMgMyAxNiAxNiI+PHBvbHlnb24gZmlsbD0iIzQyNDI0MiIgcG9pbnRzPSIxMi41OTcsMTEuMDQyIDE1LjQsMTMuODQ1IDEzLjg0NCwxNS40IDExLjA0MiwxMi41OTggOC4yMzksMTUuNCA2LjY4MywxMy44NDUgOS40ODUsMTEuMDQyIDYuNjgzLDguMjM5IDguMjM4LDYuNjgzIDExLjA0Miw5LjQ4NiAxMy44NDUsNi42ODMgMTUuNCw4LjIzOSIvPjwvc3ZnPg==)}.monaco-editor .find-widget .expand{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzY0NjQ2NSIgZD0iTTExIDEwLjA3aC01LjY1Nmw1LjY1Ni01LjY1NnY1LjY1NnoiLz48L3N2Zz4=)}.monaco-editor .find-widget .collapse{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzY0NjQ2NSIgZD0iTTYgNHY4bDQtNC00LTR6bTEgMi40MTRsMS41ODYgMS41ODYtMS41ODYgMS41ODZ2LTMuMTcyeiIvPjwvc3ZnPg==)}.monaco-editor .find-widget .replace{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTZweCIKCSBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iaWNvbl94NUZfYmciPgoJPGc+CgkJPHBhdGggZmlsbD0iIzQyNDI0MiIgZD0iTTExLDNWMWgtMXY1djFoMWgyaDFWNFYzSDExeiBNMTMsNmgtMlY0aDJWNnoiLz4KCQk8cGF0aCBmaWxsPSIjNDI0MjQyIiBkPSJNMiwxNWg3VjlIMlYxNXogTTQsMTBoM3YxSDV2MmgydjFINFYxMHoiLz4KCTwvZz4KPC9nPgo8ZyBpZD0iY29sb3JfeDVGX2ltcG9ydGFuY2UiPgoJPHBhdGggZmlsbD0iIzAwNTM5QyIgZD0iTTMuOTc5LDMuNUw0LDZMMyw1djEuNUw0LjUsOEw2LDYuNVY1TDUsNkw0Ljk3OSwzLjVjMC0wLjI3NSwwLjIyNS0wLjUsMC41LTAuNUg5VjJINS40NzkKCQlDNC42NTEsMiwzLjk3OSwyLjY3MywzLjk3OSwzLjV6Ii8+CjwvZz4KPC9zdmc+Cg==)}.monaco-editor .find-widget .replace-all{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTZweCIKCSBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iaWNvbl94NUZfYmciPgoJPHBhdGggZmlsbD0iIzQyNDI0MiIgZD0iTTExLDE1VjlIMXY2SDExeiBNMiwxNHYtMmgxdi0xSDJ2LTFoM3Y0SDJ6IE0xMCwxMUg4djJoMnYxSDd2LTRoM1YxMXogTTMsMTN2LTFoMXYxSDN6IE0xMyw3djZoLTFWOEg1VjcKCQlIMTN6IE0xMywyVjFoLTF2NWgzVjJIMTN6IE0xNCw1aC0xVjNoMVY1eiBNMTEsMnY0SDhWNGgxdjFoMVY0SDlWM0g4VjJIMTF6Ii8+CjwvZz4KPGcgaWQ9ImNvbG9yX3g1Rl9hY3Rpb24iPgoJPHBhdGggZmlsbD0iIzAwNTM5QyIgZD0iTTEuOTc5LDMuNUwyLDZMMSw1djEuNUwyLjUsOEw0LDYuNVY1TDMsNkwyLjk3OSwzLjVjMC0wLjI3NSwwLjIyNS0wLjUsMC41LTAuNUg3VjJIMy40NzkKCQlDMi42NTEsMiwxLjk3OSwyLjY3MywxLjk3OSwzLjV6Ii8+CjwvZz4KPC9zdmc+Cg==)}.monaco-editor .find-widget>.replace-part{display:none}.monaco-editor .find-widget>.replace-part>.replace-input{display:flex;display:-webkit-flex;vertical-align:middle;width:auto!important}.monaco-editor .find-widget.reduced-find-widget .matchesCount,.monaco-editor .find-widget.reduced-find-widget .monaco-checkbox{display:none}.monaco-editor .find-widget.narrow-find-widget{max-width:257px!important}.monaco-editor .find-widget.collapsed-find-widget{max-width:170px!important}.monaco-editor .find-widget.collapsed-find-widget .button.next,.monaco-editor .find-widget.collapsed-find-widget .button.previous,.monaco-editor .find-widget.collapsed-find-widget .button.replace,.monaco-editor .find-widget.collapsed-find-widget .button.replace-all,.monaco-editor .find-widget.collapsed-find-widget>.find-part .monaco-findInput .controls{display:none}.monaco-editor .findMatch{-webkit-animation-duration:0;-webkit-animation-name:inherit!important;-moz-animation-duration:0;-moz-animation-name:inherit!important;-ms-animation-duration:0;-ms-animation-name:inherit!important;animation-duration:0;animation-name:inherit!important}.monaco-editor .find-widget .monaco-sash{width:2px!important;margin-left:-4px}.monaco-editor.hc-black .find-widget .previous,.monaco-editor.vs-dark .find-widget .previous{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKCSB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iLTEgLTMgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTEgLTMgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cG9seWdvbiBmaWxsPSIjQzVDNUM1IiBwb2ludHM9IjEzLDQgNiw0IDksMSA2LDEgMiw1IDYsOSA5LDkgNiw2IDEzLDYgIi8+Cjwvc3ZnPgo=)}.monaco-editor.hc-black .find-widget .next,.monaco-editor.vs-dark .find-widget .next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKCSB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iLTEgLTMgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTEgLTMgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjQzVDNUM1IiBkPSJNMSw0aDdMNSwxaDNsNCw0TDgsOUg1bDMtM0gxVjR6Ii8+Cjwvc3ZnPgo=)}.monaco-editor.hc-black .find-widget .monaco-checkbox .label,.monaco-editor.vs-dark .find-widget .monaco-checkbox .label{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEwMzIuMzYyMikiPgogIDxyZWN0IHdpZHRoPSI5IiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjEwNDYuMzYyMiIgc3R5bGU9ImZpbGw6I0M1QzVDNTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICA8cmVjdCB3aWR0aD0iMTMiIGhlaWdodD0iMiIgeD0iMiIgeT0iMTA0My4zNjIyIiBzdHlsZT0iZmlsbDojQzVDNUM1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgogIDxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjEwNDAuMzYyMiIgc3R5bGU9ImZpbGw6I0M1QzVDNTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMiIgeD0iMiIgeT0iMTAzNy4zNjIyIiBzdHlsZT0iZmlsbDojQzVDNUM1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L2c+Cjwvc3ZnPg==)}.monaco-editor.vs-dark .find-widget .monaco-checkbox .checkbox:checked+.label,.monaco-editor.vs-dark .find-widget .monaco-checkbox .checkbox:not(:disabled):hover:before+.label{background-color:hsla(0,0%,100%,.1)}.monaco-editor.hc-black .find-widget .close-fw,.monaco-editor.vs-dark .find-widget .close-fw{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMyAzIDE2IDE2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMgMyAxNiAxNiI+PHBvbHlnb24gZmlsbD0iI2U4ZThlOCIgcG9pbnRzPSIxMi41OTcsMTEuMDQyIDE1LjQsMTMuODQ1IDEzLjg0NCwxNS40IDExLjA0MiwxMi41OTggOC4yMzksMTUuNCA2LjY4MywxMy44NDUgOS40ODUsMTEuMDQyIDYuNjgzLDguMjM5IDguMjM4LDYuNjgzIDExLjA0Miw5LjQ4NiAxMy44NDUsNi42ODMgMTUuNCw4LjIzOSIvPjwvc3ZnPg==)}.monaco-editor.hc-black .find-widget .replace,.monaco-editor.vs-dark .find-widget .replace{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTZweCIKCSBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iaWNvbl94NUZfYmciPgoJPGc+CgkJPHBhdGggZmlsbD0iI0M1QzVDNSIgZD0iTTExLDNWMWgtMXY1djFoMWgyaDFWNFYzSDExeiBNMTMsNmgtMlY0aDJWNnoiLz4KCQk8cGF0aCBmaWxsPSIjQzVDNUM1IiBkPSJNMiwxNWg3VjlIMlYxNXogTTQsMTBoM3YxSDV2MmgydjFINFYxMHoiLz4KCTwvZz4KPC9nPgo8ZyBpZD0iY29sb3JfeDVGX2ltcG9ydGFuY2UiPgoJPHBhdGggZmlsbD0iIzc1QkVGRiIgZD0iTTMuOTc5LDMuNUw0LDZMMyw1djEuNUw0LjUsOEw2LDYuNVY1TDUsNkw0Ljk3OSwzLjVjMC0wLjI3NSwwLjIyNS0wLjUsMC41LTAuNUg5VjJINS40NzkKCQlDNC42NTEsMiwzLjk3OSwyLjY3MywzLjk3OSwzLjV6Ii8+CjwvZz4KPC9zdmc+Cg==)}.monaco-editor.hc-black .find-widget .replace-all,.monaco-editor.vs-dark .find-widget .replace-all{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTZweCIKCSBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iaWNvbl94NUZfYmciPgoJPHBhdGggZmlsbD0iI0M1QzVDNSIgZD0iTTExLDE1VjlIMXY2SDExeiBNMiwxNHYtMmgxdi0xSDJ2LTFoM3Y0SDJ6IE0xMCwxMUg4djJoMnYxSDd2LTRoM1YxMXogTTMsMTN2LTFoMXYxSDN6IE0xMyw3djZoLTFWOEg1VjcKCQlIMTN6IE0xMywyVjFoLTF2NWgzVjJIMTN6IE0xNCw1aC0xVjNoMVY1eiBNMTEsMnY0SDhWNGgxdjFoMVY0SDlWM0g4VjJIMTF6Ii8+CjwvZz4KPGcgaWQ9ImNvbG9yX3g1Rl9hY3Rpb24iPgoJPHBhdGggZmlsbD0iIzc1QkVGRiIgZD0iTTEuOTc5LDMuNUwyLDZMMSw1djEuNUwyLjUsOEw0LDYuNVY1TDMsNkwyLjk3OSwzLjVjMC0wLjI3NSwwLjIyNS0wLjUsMC41LTAuNUg3VjJIMy40NzkKCQlDMi42NTEsMiwxLjk3OSwyLjY3MywxLjk3OSwzLjV6Ii8+CjwvZz4KPC9zdmc+Cg==)}.monaco-editor.hc-black .find-widget .expand,.monaco-editor.vs-dark .find-widget .expand{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2U4ZThlOCIgZD0iTTExIDEwLjA3aC01LjY1Nmw1LjY1Ni01LjY1NnY1LjY1NnoiLz48L3N2Zz4=)}.monaco-editor.hc-black .find-widget .collapse,.monaco-editor.vs-dark .find-widget .collapse{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2U4ZThlOCIgZD0iTTYgNHY4bDQtNC00LTR6bTEgMi40MTRsMS41ODYgMS41ODYtMS41ODYgMS41ODZ2LTMuMTcyeiIvPjwvc3ZnPg==)}.monaco-editor.hc-black .find-widget .button:not(.disabled):hover,.monaco-editor.vs-dark .find-widget .button:not(.disabled):hover{background-color:hsla(0,0%,100%,.1)}.monaco-editor.hc-black .find-widget .button:before{position:relative;top:1px;left:2px}.monaco-editor.hc-black .find-widget .monaco-checkbox .checkbox:checked+.label{background-color:hsla(0,0%,100%,.1)}.monaco-editor .margin-view-overlays .folding{cursor:pointer;background-repeat:no-repeat;background-origin:border-box;background-position:calc(50% + 2px) 50%;background-size:auto calc(100% - 3px);opacity:0;transition:opacity .5s;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTUgMTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE1IDE1OyI+CjxwYXRoIHN0eWxlPSJmaWxsOiNCNkI2QjYiIGQ9Ik0xMSw0djdINFY0SDExIE0xMiwzSDN2OWg5VjNMMTIsM3oiLz4KPGxpbmUgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzZCNkI2QjtzdHJva2UtbWl0ZXJsaW1pdDoxMCIgeDE9IjEwIiB5MT0iNy41IiB4Mj0iNSIgeTI9IjcuNSIvPgo8L3N2Zz4=)}.monaco-editor.hc-black .margin-view-overlays .folding,.monaco-editor.vs-dark .margin-view-overlays .folding{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTUgMTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE1IDE1OyI+CjxwYXRoIHN0eWxlPSJmaWxsOiM1QTVBNUEiIGQ9Ik0xMSw0djdINFY0SDExIE0xMiwzSDN2OWg5VjNMMTIsM3oiLz4KPGxpbmUgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I0M1QzVDNTtzdHJva2UtbWl0ZXJsaW1pdDoxMCIgeDE9IjEwIiB5MT0iNy41IiB4Mj0iNSIgeTI9IjcuNSIvPgo8L3N2Zz4=)}.monaco-editor .margin-view-overlays .folding.alwaysShowFoldIcons,.monaco-editor .margin-view-overlays:hover .folding{opacity:1}.monaco-editor .margin-view-overlays .folding.collapsed{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTUgMTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE1IDE1OyI+CjxyZWN0IHg9IjMiIHk9IjMiIHN0eWxlPSJmaWxsOiNFOEU4RTgiIHdpZHRoPSI5IiBoZWlnaHQ9IjkiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0I2QjZCNiIgZD0iTTExLDR2N0g0VjRIMTEgTTEyLDNIM3Y5aDlWM0wxMiwzeiIvPgo8bGluZSBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojNkI2QjZCO3N0cm9rZS1taXRlcmxpbWl0OjEwIiB4MT0iMTAiIHkxPSI3LjUiIHgyPSI1IiB5Mj0iNy41Ii8+CjxsaW5lIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiM2QjZCNkI7c3Ryb2tlLW1pdGVybGltaXQ6MTAiIHgxPSI3LjUiIHkxPSI1IiB4Mj0iNy41IiB5Mj0iMTAiLz4KPC9zdmc+);opacity:1}.monaco-editor.hc-black .margin-view-overlays .folding.collapsed,.monaco-editor.vs-dark .margin-view-overlays .folding.collapsed{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTUgMTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE1IDE1OyI+CjxyZWN0IHg9IjMiIHk9IjMiIHN0eWxlPSJvcGFjaXR5OjAuMTtmaWxsOiNGRkZGRkYiIHdpZHRoPSI5IiBoZWlnaHQ9IjkiLz4KPHBhdGggc3R5bGU9ImZpbGw6IzVBNUE1QSIgZD0iTTExLDR2N0g0VjRIMTEgTTEyLDNIM3Y5aDlWM0wxMiwzeiIvPgo8bGluZSBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojQzVDNUM1O3N0cm9rZS1taXRlcmxpbWl0OjEwIiB4MT0iMTAiIHkxPSI3LjUiIHgyPSI1IiB5Mj0iNy41Ii8+CjxsaW5lIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiNDNUM1QzU7c3Ryb2tlLW1pdGVybGltaXQ6MTAiIHgxPSI3LjUiIHkxPSI1IiB4Mj0iNy41IiB5Mj0iMTAiLz4KPC9zdmc+)}.monaco-editor .inline-folded:after{color:grey;margin:.1em .2em 0;content:"⋯";display:inline;line-height:1em;cursor:pointer}.monaco-editor .goto-definition-link{text-decoration:underline;cursor:pointer}.monaco-editor .peekview-widget .head .peekview-title .icon.warning{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiI+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTcuNSAyTDIgMTJsMiAyaDlsMi0yTDkuNSAyeiIvPjxwYXRoIGQ9Ik05IDNIOGwtNC41IDkgMSAxaDhsMS0xTDkgM3ptMCA5SDh2LTFoMXYxem0wLTJIOFY2aDF2NHoiIGZpbGw9IiNmYzAiLz48cGF0aCBkPSJNOSAxMEg4VjZoMXY0em0wIDFIOHYxaDF2LTF6Ii8+PC9zdmc+) 50% no-repeat}.monaco-editor .peekview-widget .head .peekview-title .icon.error{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiI+PGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjYiIGZpbGw9IiNGNkY2RjYiLz48cGF0aCBkPSJNOCAzQzUuMjM4IDMgMyA1LjIzOCAzIDhzMi4yMzggNSA1IDUgNS0yLjIzOCA1LTUtMi4yMzgtNS01LTV6bTMgN2wtMSAxLTItMi0yIDItMS0xIDItMi4wMjdMNSA2bDEtMSAyIDIgMi0yIDEgMS0yIDEuOTczTDExIDEweiIgZmlsbD0iI0U1MTQwMCIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xMSA2bC0xLTEtMiAyLTItMi0xIDEgMiAxLjk3M0w1IDEwbDEgMSAyLTIgMiAyIDEtMS0yLTIuMDI3eiIvPjwvc3ZnPg==) 50% no-repeat}.monaco-editor .peekview-widget .head .peekview-title .icon.info{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiI+PGNpcmNsZSBjeD0iOC41IiBjeT0iNy41IiByPSI1LjUiIGZpbGw9IiNGNkY2RjYiLz48cGF0aCBkPSJNOC41IDNDNi4wMTUgMyA0IDUuMDE1IDQgNy41UzYuMDE1IDEyIDguNSAxMiAxMyA5Ljk4NSAxMyA3LjUgMTAuOTg1IDMgOC41IDN6bS41IDhIOFY2aDF2NXptMC02SDhWNGgxdjF6IiBmaWxsPSIjMUJBMUUyIi8+PHBhdGggZD0iTTggNmgxdjVIOFY2em0wLTJ2MWgxVjRIOHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=) 50% no-repeat}.vs-dark .monaco-editor .peekview-widget .head .peekview-title .icon.warning{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgaGVpZ2h0PSIxNiIgd2lkdGg9IjE2Ij48cGF0aCBmaWxsPSIjMUUxRTFFIiBkPSJNNy41IDJMMiAxMmwyIDJoOWwyLTJMOS41IDJ6Ii8+PHBhdGggZD0iTTkgM0g4bC00LjUgOSAxIDFoOGwxLTFMOSAzem0wIDlIOHYtMWgxdjF6bTAtMkg4VjZoMXY0eiIgZmlsbD0iI2ZjMCIvPjxwYXRoIGQ9Ik05IDEwSDhWNmgxdjR6bTAgMUg4djFoMXYtMXoiLz48L3N2Zz4=) 50% no-repeat}.vs-dark .monaco-editor .peekview-widget .head .peekview-title .icon.error{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgaGVpZ2h0PSIxNiIgd2lkdGg9IjE2Ij48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iNiIgZmlsbD0iIzFFMUUxRSIvPjxwYXRoIGQ9Ik04IDNDNS4yMzggMyAzIDUuMjM4IDMgOHMyLjIzOCA1IDUgNSA1LTIuMjM4IDUtNS0yLjIzOC01LTUtNXptMyA3bC0xIDEtMi0yLTIgMi0xLTEgMi0yLjAyN0w1IDZsMS0xIDIgMiAyLTIgMSAxLTIgMS45NzNMMTEgMTB6IiBmaWxsPSIjRjQ4NzcxIi8+PHBhdGggZmlsbD0iIzI1MjUyNiIgZD0iTTExIDZsLTEtMS0yIDItMi0yLTEgMSAyIDEuOTczTDUgMTBsMSAxIDItMiAyIDIgMS0xLTItMi4wMjd6Ii8+PC9zdmc+) 50% no-repeat}.vs-dark .monaco-editor .peekview-widget .head .peekview-title .icon.info{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIGhlaWdodD0iMTYiIHdpZHRoPSIxNiI+PGNpcmNsZSBjeD0iOC41IiBjeT0iNy41IiByPSI1LjUiIGZpbGw9IiMxRTFFMUUiLz48cGF0aCBkPSJNOC41IDNDNi4wMTUgMyA0IDUuMDE1IDQgNy41UzYuMDE1IDEyIDguNSAxMiAxMyA5Ljk4NSAxMyA3LjUgMTAuOTg1IDMgOC41IDN6bS41IDhIOFY2aDF2NXptMC02SDhWNGgxdjF6IiBmaWxsPSIjMUJBMUUyIi8+PHBhdGggZD0iTTggNmgxdjVIOFY2em0wLTJ2MWgxVjRIOHoiIGZpbGw9IiMyNTI1MjYiLz48L3N2Zz4=) 50% no-repeat}.monaco-editor .marker-widget{text-overflow:ellipsis;white-space:nowrap}.monaco-editor .marker-widget>.stale{opacity:.6;font-style:italic}.monaco-editor .marker-widget .title{display:inline-block;padding-right:5px}.monaco-editor .marker-widget .descriptioncontainer{position:absolute;white-space:pre;-webkit-user-select:text;user-select:text;padding:8px 12px 0 20px}.monaco-editor .marker-widget .descriptioncontainer .message{display:flex;flex-direction:column}.monaco-editor .marker-widget .descriptioncontainer .message .details{padding-left:6px}.monaco-editor .marker-widget .descriptioncontainer .message .code,.monaco-editor .marker-widget .descriptioncontainer .message .source{opacity:.6}.monaco-editor .marker-widget .descriptioncontainer .filename{cursor:pointer}.monaco-editor-hover{cursor:default;position:absolute;overflow:hidden;z-index:50;-webkit-user-select:text;-ms-user-select:text;-moz-user-select:text;-o-user-select:text;user-select:text;box-sizing:initial;animation:fadein .1s linear;line-height:1.5em}.monaco-editor-hover.hidden{display:none}.monaco-editor-hover .hover-contents{padding:4px 8px}.monaco-editor-hover .markdown-hover>.hover-contents:not(.code-hover-contents){max-width:500px}.monaco-editor-hover p,.monaco-editor-hover ul{margin:8px 0}.monaco-editor-hover hr{margin:4px -10px -6px;height:1px}.monaco-editor-hover p:first-child,.monaco-editor-hover ul:first-child{margin-top:0}.monaco-editor-hover p:last-child,.monaco-editor-hover ul:last-child{margin-bottom:0}.monaco-editor-hover ul{padding-left:20px}.monaco-editor-hover li>p{margin-bottom:0}.monaco-editor-hover li>ul{margin-top:0}.monaco-editor-hover code{border-radius:3px;padding:0 .4em}.monaco-editor-hover .monaco-tokenized-source{white-space:pre-wrap;word-break:break-all}.monaco-editor-hover .hover-row.status-bar{font-size:12px;line-height:22px}.monaco-editor-hover .hover-row.status-bar .actions{display:flex}.monaco-editor-hover .hover-row.status-bar .actions .action-container{margin:0 8px;cursor:pointer}.monaco-editor-hover .hover-row.status-bar .actions .action-container .action .icon{padding-right:4px}.monaco-editor .detected-link,.monaco-editor .detected-link-active{text-decoration:underline;text-underline-position:under}.monaco-editor .detected-link-active{cursor:pointer}.monaco-editor .monaco-editor-overlaymessage{padding-bottom:8px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.monaco-editor .monaco-editor-overlaymessage.fadeIn{animation:fadeIn .15s ease-out}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.monaco-editor .monaco-editor-overlaymessage.fadeOut{animation:fadeOut .1s ease-out}.monaco-editor .monaco-editor-overlaymessage .message{padding:1px 4px}.monaco-editor .monaco-editor-overlaymessage .anchor{width:0!important;height:0!important;border:8px solid transparent;z-index:1000;position:absolute}.monaco-editor .parameter-hints-widget{z-index:10;display:flex;flex-direction:column;line-height:1.5em}.monaco-editor .parameter-hints-widget>.wrapper{max-width:440px;display:flex;flex-direction:column}.monaco-editor .parameter-hints-widget.multiple{min-height:3.3em;padding:0 0 0 1.9em}.monaco-editor .parameter-hints-widget.visible{transition:left .05s ease-in-out}.monaco-editor .parameter-hints-widget p,.monaco-editor .parameter-hints-widget ul{margin:8px 0}.monaco-editor .parameter-hints-widget .body,.monaco-editor .parameter-hints-widget .monaco-scrollable-element{display:flex;flex-direction:column}.monaco-editor .parameter-hints-widget .signature{padding:4px 5px}.monaco-editor .parameter-hints-widget .docs{padding:0 10px 0 5px;white-space:pre-wrap}.monaco-editor .parameter-hints-widget .docs .markdown-docs{white-space:normal}.monaco-editor .parameter-hints-widget .docs .code{white-space:pre-wrap}.monaco-editor .parameter-hints-widget .docs code{border-radius:3px;padding:0 .4em}.monaco-editor .parameter-hints-widget .buttons{position:absolute;display:none;bottom:0;left:0}.monaco-editor .parameter-hints-widget.multiple .buttons{display:block}.monaco-editor .parameter-hints-widget.multiple .button{position:absolute;left:2px;width:16px;height:16px;background-repeat:no-repeat;cursor:pointer}.monaco-editor .parameter-hints-widget .button.previous{bottom:24px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iIzQyNDI0MiIgZD0iTTEwLjggOS41bC45LS45TDguMSA1IDQuMiA4LjZsLjkuOSAzLTIuNyAyLjcgMi43eiIvPjwvc3ZnPg==)}.monaco-editor .parameter-hints-widget .button.next{bottom:0;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iIzQyNDI0MiIgZD0iTTUuMSA1bC0uOS45IDMuNiAzLjYgMy45LTMuNi0xLS45LTMgMi43TDUuMSA1eiIvPjwvc3ZnPg==)}.monaco-editor .parameter-hints-widget .overloads{position:absolute;display:none;text-align:center;bottom:14px;left:0;width:22px;height:12px;line-height:12px;opacity:.5}.monaco-editor .parameter-hints-widget.multiple .overloads{display:block}.monaco-editor .parameter-hints-widget .signature .parameter.active{font-weight:700;text-decoration:underline}.monaco-editor .parameter-hints-widget .documentation-parameter>.parameter{font-weight:700;margin-right:.5em}.monaco-editor.hc-black .parameter-hints-widget .button.previous,.monaco-editor.vs-dark .parameter-hints-widget .button.previous{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI0U4RThFOCIgZD0iTTEwLjggOS41bC45LS45TDguMSA1IDQuMiA4LjZsLjkuOSAzLTIuNyAyLjcgMi43eiIvPjwvc3ZnPg==)}.monaco-editor.hc-black .parameter-hints-widget .button.next,.monaco-editor.vs-dark .parameter-hints-widget .button.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI0U4RThFOCIgZD0iTTUuMSA1bC0uOS45IDMuNiAzLjYgMy45LTMuNi0xLS45LTMgMi43TDUuMSA1eiIvPjwvc3ZnPg==)}.monaco-editor .peekview-widget .head{-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;display:flex}.monaco-editor .peekview-widget .head .peekview-title{display:inline-block;font-size:13px;margin-left:20px;cursor:pointer}.monaco-editor .peekview-widget .head .peekview-title .icon{display:inline-block;height:16px;width:16px;vertical-align:text-bottom;margin-right:4px}.monaco-editor .peekview-widget .head .peekview-title .dirname:not(:empty){font-size:.9em;margin-left:.5em}.monaco-editor .peekview-widget .head .peekview-actions{flex:1;text-align:right;padding-right:2px}.monaco-editor .peekview-widget .head .peekview-actions>.monaco-action-bar{display:inline-block}.monaco-editor .peekview-widget .head .peekview-actions>.monaco-action-bar,.monaco-editor .peekview-widget .head .peekview-actions>.monaco-action-bar>.actions-container{height:100%}.monaco-editor .peekview-widget .head .peekview-actions>.monaco-action-bar .action-item{margin-left:4px}.monaco-editor .peekview-widget .head .peekview-actions>.monaco-action-bar .action-label{width:16px;height:100%;margin:0;line-height:inherit;background-repeat:no-repeat;background-position:50%}.monaco-editor .peekview-widget .head .peekview-actions>.monaco-action-bar .action-label.octicon{margin:0}.monaco-editor .peekview-widget .head .peekview-actions .action-label.icon.close-peekview-action{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMyAzIDE2IDE2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMgMyAxNiAxNiI+PHBvbHlnb24gZmlsbD0iIzQyNDI0MiIgcG9pbnRzPSIxMi41OTcsMTEuMDQyIDE1LjQsMTMuODQ1IDEzLjg0NCwxNS40IDExLjA0MiwxMi41OTggOC4yMzksMTUuNCA2LjY4MywxMy44NDUgOS40ODUsMTEuMDQyIDYuNjgzLDguMjM5IDguMjM4LDYuNjgzIDExLjA0Miw5LjQ4NiAxMy44NDUsNi42ODMgMTUuNCw4LjIzOSIvPjwvc3ZnPg==) 50% no-repeat}.monaco-editor .peekview-widget>.body{border-top:1px solid;position:relative}.monaco-editor.hc-black .peekview-widget .head .peekview-actions .action-label.icon.close-peekview-action,.monaco-editor.vs-dark .peekview-widget .head .peekview-actions .action-label.icon.close-peekview-action{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMyAzIDE2IDE2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMgMyAxNiAxNiI+PHBvbHlnb24gZmlsbD0iI2U4ZThlOCIgcG9pbnRzPSIxMi41OTcsMTEuMDQyIDE1LjQsMTMuODQ1IDEzLjg0NCwxNS40IDExLjA0MiwxMi41OTggOC4yMzksMTUuNCA2LjY4MywxMy44NDUgOS40ODUsMTEuMDQyIDYuNjgzLDguMjM5IDguMjM4LDYuNjgzIDExLjA0Miw5LjQ4NiAxMy44NDUsNi42ODMgMTUuNCw4LjIzOSIvPjwvc3ZnPg==) 50% no-repeat}.monaco-editor .peekview-widget .peekview-actions .icon.chevron-up{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik0xNCAxMC41TDEyLjk0NTMgMTEuNTU1N0w4IDYuNjEwNDVMMy4wNTQ3MyAxMS41NTU3TDIgMTAuNUw4IDQuNUwxNCAxMC41WiIgZmlsbD0iIzRCNEI0QiIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMiAyKSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=) 50% no-repeat}.vs-dark .monaco-editor .peekview-widget .peekview-actions .icon.chevron-up{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik0xNCAxMC41TDEyLjk0NTMgMTEuNTU1N0w4IDYuNjEwNDVMMy4wNTQ3MyAxMS41NTU3TDIgMTAuNUw4IDQuNUwxNCAxMC41WiIgZmlsbD0iI0M4QzhDOCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMiAyKSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=) 50% no-repeat}.hc-black .monaco-editor .peekview-widget .peekview-actions .icon.chevron-up{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik0xNCAxMC41TDEyLjk0NTMgMTEuNTU1N0w4IDYuNjEwNDVMMy4wNTQ3MyAxMS41NTU3TDIgMTAuNUw4IDQuNUwxNCAxMC41WiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMCI+CjxyZWN0IHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIgMikiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K) 50% no-repeat}.monaco-editor .peekview-widget .peekview-actions .icon.chevron-down{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik0yIDUuNUwzLjA1NDczIDQuNDQ0MjhMOCA5LjM4OTU1TDEyLjk0NTMgNC40NDQyOEwxNCA1LjVMOCAxMS41TDIgNS41WiIgZmlsbD0iIzRCNEI0QiIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMiAyKSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=) 50% no-repeat}.vs-dark .monaco-editor .peekview-widget .peekview-actions .icon.chevron-down{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik0yIDUuNUwzLjA1NDczIDQuNDQ0MjhMOCA5LjM4OTU1TDEyLjk0NTMgNC40NDQyOEwxNCA1LjVMOCAxMS41TDIgNS41WiIgZmlsbD0iI0M4QzhDOCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMiAyKSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=) 50% no-repeat}.hc-black .monaco-editor .peekview-widget .peekview-actions .icon.chevron-down{background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik0yIDUuNUwzLjA1NDczIDQuNDQ0MjhMOCA5LjM4OTU1TDEyLjk0NTMgNC40NDQyOEwxNCA1LjVMOCAxMS41TDIgNS41WiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMCI+CjxyZWN0IHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIgMikiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K) 50% no-repeat}.monaco-editor .zone-widget .zone-widget-container.reference-zone-widget{border-top-width:1px;border-bottom-width:1px}.monaco-editor .reference-zone-widget .inline{display:inline-block;vertical-align:top}.monaco-editor .reference-zone-widget .messages{height:100%;width:100%;text-align:center;padding:3em 0}.monaco-editor .reference-zone-widget .ref-tree{line-height:23px}.monaco-editor .reference-zone-widget .ref-tree .reference{text-overflow:ellipsis;overflow:hidden}.monaco-editor .reference-zone-widget .ref-tree .reference-file{display:inline-flex;width:100%;height:100%}.monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .selected .reference-file{color:inherit!important}.monaco-editor .reference-zone-widget .ref-tree .reference-file .count{margin-right:12px;margin-left:auto}.monaco-editor.hc-black .reference-zone-widget .ref-tree .reference-file{font-weight:700}.monaco-editor .rename-box{z-index:100;color:inherit}.monaco-editor .rename-box .rename-input{padding:4px}.monaco-editor .snippet-placeholder{min-width:2px}.monaco-editor .finish-snippet-placeholder,.monaco-editor .snippet-placeholder{outline-style:solid;outline-width:1px}.monaco-editor .suggest-widget{z-index:40;width:430px}.monaco-editor .suggest-widget>.details,.monaco-editor .suggest-widget>.message,.monaco-editor .suggest-widget>.tree{width:100%;border-style:solid;border-width:1px;box-sizing:border-box}.monaco-editor.hc-black .suggest-widget>.details,.monaco-editor.hc-black .suggest-widget>.message,.monaco-editor.hc-black .suggest-widget>.tree{border-width:2px}.monaco-editor .suggest-widget.docs-side{width:660px}.monaco-editor .suggest-widget.docs-side>.details,.monaco-editor .suggest-widget.docs-side>.tree{width:50%;float:left}.monaco-editor .suggest-widget.docs-side.list-right>.details,.monaco-editor .suggest-widget.docs-side.list-right>.tree{float:right}.monaco-editor .suggest-widget>.message{padding-left:22px}.monaco-editor .suggest-widget>.tree{height:100%}.monaco-editor .suggest-widget .monaco-list{-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;-o-user-select:none;user-select:none}.monaco-editor .suggest-widget .monaco-list .monaco-list-row{display:flex;-mox-box-sizing:border-box;box-sizing:border-box;padding-right:10px;background-repeat:no-repeat;background-position:2px 2px;white-space:nowrap;cursor:pointer;touch-action:none}.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents{flex:1;height:100%;overflow:hidden;padding-left:2px}.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main{display:flex;overflow:hidden;text-overflow:ellipsis;white-space:pre}.monaco-editor .suggest-widget:not(.frozen) .monaco-highlighted-label .highlight{font-weight:700}.monaco-editor .suggest-widget .details>.monaco-scrollable-element>.body>.header>.close,.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.readMore{opacity:.6;background-position:50%;background-repeat:no-repeat;background-size:70%;cursor:pointer}.monaco-editor .suggest-widget .details>.monaco-scrollable-element>.body>.header>.close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMyAzIDE2IDE2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMgMyAxNiAxNiI+PHBvbHlnb24gZmlsbD0iIzQyNDI0MiIgcG9pbnRzPSIxMi41OTcsMTEuMDQyIDE1LjQsMTMuODQ1IDEzLjg0NCwxNS40IDExLjA0MiwxMi41OTggOC4yMzksMTUuNCA2LjY4MywxMy44NDUgOS40ODUsMTEuMDQyIDYuNjgzLDguMjM5IDguMjM4LDYuNjgzIDExLjA0Miw5LjQ4NiAxMy44NDUsNi42ODMgMTUuNCw4LjIzOSIvPjwvc3ZnPg==);float:right;margin-right:5px}.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.readMore{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTggMWMtMy44NjUgMC03IDMuMTM1LTcgN3MzLjEzNSA3IDcgNyA3LTMuMTM1IDctNy0zLjEzNS03LTctN3ptMSAxMmgtMnYtN2gydjd6bTAtOGgtMnYtMmgydjJ6IiBmaWxsPSIjMUJBMUUyIi8+PHBhdGggZD0iTTcgNmgydjdoLTJ2LTd6bTAtMWgydi0yaC0ydjJ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+)}.monaco-editor .suggest-widget .details>.monaco-scrollable-element>.body>.header>.close:hover,.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.readMore:hover{opacity:1}.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.type-label{margin-left:.8em;flex:1;text-align:right;overflow:hidden;text-overflow:ellipsis;opacity:.7;white-space:nowrap}.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.type-label>.monaco-tokenized-source{display:inline}.monaco-editor .suggest-widget.docs-below .monaco-list .monaco-list-row.focused>.contents>.main>.readMore,.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row.focused>.contents>.main>.readMore,.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row.focused>.contents>.main>.type-label,.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.readMore,.monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.type-label{display:none}.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused>.contents>.main>.readMore,.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused>.contents>.main>.type-label{display:inline}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label:before{height:100%}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon{display:block;height:16px;width:16px;margin-left:2px;background-repeat:no-repeat;background-size:80%;background-position:50%}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon.hide,.monaco-editor .suggest-widget.no-icons .monaco-list .monaco-list-row .icon,.monaco-editor .suggest-widget.no-icons .monaco-list .monaco-list-row .monaco-icon-label.suggest-icon:before{display:none}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label.suggest-icon:before{content:" ";background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtYmd7ZmlsbDojNDI0MjQyfTwvc3R5bGU+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYgMTZIMFYwaDE2djE2eiIgaWQ9ImNhbnZhcyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTE2IDEwYzAgMi4yMDUtMS43OTQgNC00IDQtMS44NTggMC0zLjQxMS0xLjI3OS0zLjg1OC0zaC0uOTc4bDIuMzE4IDRIMHYtMS43MDNsMi0zLjQwOFYwaDExdjYuMTQyYzEuNzIxLjQ0NyAzIDIgMyAzLjg1OHoiIGlkPSJvdXRsaW5lIi8+PHBhdGggY2xhc3M9Imljb24tdnMtYmciIGQ9Ik0xMiAxdjQuNzVBNC4yNTUgNC4yNTUgMCAwIDAgNy43NSAxMGgtLjczMkw0LjI3NSA1LjI2OSAzIDcuNDQyVjFoOXpNNy43NDcgMTRMNC4yNjkgOCAuNzQ4IDE0aDYuOTk5ek0xNSAxMGEzIDMgMCAxIDEtNiAwIDMgMyAwIDAgMSA2IDB6IiBpZD0iaWNvbkJnIi8+PC9zdmc+);background-repeat:no-repeat;background-position:50%;background-size:75%}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.constructor:before,.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.function:before,.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.method:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtZmd7ZmlsbDojZjBlZmYxfS5pY29uLXZzLWFjdGlvbi1wdXJwbGV7ZmlsbDojNjUyZDkwfTwvc3R5bGU+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYgMTZIMFYwaDE2djE2eiIgaWQ9ImNhbnZhcyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTE1IDMuMzQ5djguNDAzTDguOTc1IDE2SDguMDdMMSAxMS41ODJWMy4zMjdMNy41OTUgMGgxLjExOEwxNSAzLjM0OXoiIGlkPSJvdXRsaW5lIi8+PHBhdGggY2xhc3M9Imljb24tdnMtZmciIGQ9Ik0xMi43MTUgNC4zOThMOC40ODcgNy4wMiAzLjU2NSA0LjI3Mmw0LjU3OC0yLjMwOSA0LjU3MiAyLjQzNXpNMyA1LjEwMmw1IDIuNzkydjUuNzA1bC01LTMuMTI1VjUuMTAyem02IDguNDM0VjcuODc4bDQtMi40OHY1LjMxN2wtNCAyLjgyMXoiIGlkPSJpY29uRmciLz48cGF0aCBjbGFzcz0iaWNvbi12cy1hY3Rpb24tcHVycGxlIiBkPSJNOC4xNTYuODM3TDIgMy45NDJ2Ny4wODVMOC41MTcgMTUuMSAxNCAxMS4yMzNWMy45NUw4LjE1Ni44Mzd6bTQuNTU5IDMuNTYxTDguNDg3IDcuMDIgMy41NjUgNC4yNzJsNC41NzgtMi4zMDkgNC41NzIgMi40MzV6TTMgNS4xMDJsNSAyLjc5MnY1LjcwNWwtNS0zLjEyNVY1LjEwMnptNiA4LjQzNFY3Ljg3OGw0LTIuNDh2NS4zMTdsLTQgMi44MjF6IiBpZD0iaWNvbkJnIi8+PC9zdmc+)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.field:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtZmd7ZmlsbDojZjBlZmYxfS5pY29uLXZzLWFjdGlvbi1ibHVle2ZpbGw6IzAwNTM5Y308L3N0eWxlPjxwYXRoIGNsYXNzPSJpY29uLWNhbnZhcy10cmFuc3BhcmVudCIgZD0iTTE2IDE2SDBWMGgxNnYxNnoiIGlkPSJjYW52YXMiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1vdXQiIGQ9Ik0wIDEwLjczNlY0LjVMOSAwbDcgMy41djYuMjM2bC05IDQuNS03LTMuNXoiIGlkPSJvdXRsaW5lIi8+PHBhdGggY2xhc3M9Imljb24tdnMtYWN0aW9uLWJsdWUiIGQ9Ik05IDFMMSA1djVsNiAzIDgtNFY0TDkgMXpNNyA2Ljg4MkwzLjIzNiA1IDkgMi4xMTggMTIuNzY0IDQgNyA2Ljg4MnoiIGlkPSJpY29uQmciLz48cGF0aCBjbGFzcz0iaWNvbi12cy1mZyIgZD0iTTkgMi4xMThMMTIuNzY0IDQgNyA2Ljg4MiAzLjIzNiA1IDkgMi4xMTh6IiBpZD0iaWNvbkZnIi8+PC9zdmc+)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.event:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtYWN0aW9uLW9yYW5nZXtmaWxsOiNjMjdkMWF9PC9zdHlsZT48cGF0aCBjbGFzcz0iaWNvbi1jYW52YXMtdHJhbnNwYXJlbnQiIGQ9Ik0xNiAxNkgwVjBoMTZ2MTZ6IiBpZD0iY2FudmFzIi8+PHBhdGggY2xhc3M9Imljb24tdnMtb3V0IiBkPSJNMTQgMS40MTRMOS40MTQgNkgxNHYxLjQxNEw1LjQxNCAxNkgzdi0xLjIzNEw1LjM3MSAxMEgyVjguNzY0TDYuMzgyIDBIMTR2MS40MTR6IiBpZD0ib3V0bGluZSIgc3R5bGU9ImRpc3BsYXk6IG5vbmU7Ii8+PHBhdGggY2xhc3M9Imljb24tdnMtYWN0aW9uLW9yYW5nZSIgZD0iTTcgN2g2bC04IDhINGwyLjk4NS02SDNsNC04aDZMNyA3eiIgaWQ9Imljb25CZyIvPjwvc3ZnPg==)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.operator:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtZmd7ZmlsbDojZjBlZmYxfS5pY29uLXZzLWFjdGlvbi1ibHVle2ZpbGw6IzAwNTM5Y308L3N0eWxlPjxwYXRoIGNsYXNzPSJpY29uLWNhbnZhcy10cmFuc3BhcmVudCIgZD0iTTE2IDE2SDBWMGgxNnYxNnoiIGlkPSJjYW52YXMiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1vdXQiIGQ9Ik0xNiAxNkgwVjBoMTZ2MTZ6IiBpZD0ib3V0bGluZSIgc3R5bGU9ImRpc3BsYXk6IG5vbmU7Ii8+PHBhdGggY2xhc3M9Imljb24tdnMtYWN0aW9uLWJsdWUiIGQ9Ik0xIDF2MTRoMTRWMUgxem02IDEySDN2LTFoNHYxem0wLTNIM1Y5aDR2MXptMC01SDV2Mkg0VjVIMlY0aDJWMmgxdjJoMnYxem0zLjI4MSA4SDguNzE5bDMtNGgxLjU2M2wtMy4wMDEgNHpNMTQgNUg5VjRoNXYxeiIgaWQ9Imljb25CZyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWZnIiBkPSJNNyA1SDV2Mkg0VjVIMlY0aDJWMmgxdjJoMnYxem03LTFIOXYxaDVWNHpNNyA5SDN2MWg0Vjl6bTAgM0gzdjFoNHYtMXptMy4yODEgMWwzLTRoLTEuNTYzbC0zIDRoMS41NjN6IiBpZD0iaWNvbkZnIiBzdHlsZT0iZGlzcGxheTogbm9uZTsiLz48L3N2Zz4=)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.variable:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtYmd7ZmlsbDojNDI0MjQyfS5pY29uLXZzLWZne2ZpbGw6I2YwZWZmMX0uaWNvbi12cy1hY3Rpb24tYmx1ZXtmaWxsOiMwMDUzOWN9PC9zdHlsZT48cGF0aCBjbGFzcz0iaWNvbi1jYW52YXMtdHJhbnNwYXJlbnQiIGQ9Ik0xNiAxNkgwVjBoMTZ2MTZ6IiBpZD0iY2FudmFzIi8+PHBhdGggY2xhc3M9Imljb24tdnMtb3V0IiBkPSJNMTEgM3YxLjAxNUw4LjczMyAyLjg4MiA1IDQuNzQ5VjNIMHYxMGg1di0xLjg1OWwyLjE1NiAxLjA3N0wxMSAxMC4yOTVWMTNoNVYzaC01eiIgaWQ9Im91dGxpbmUiIHN0eWxlPSJkaXNwbGF5OiBub25lOyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWJnIiBkPSJNMiA1djZoMnYxSDFWNGgzdjFIMnptMTAgNnYxaDNWNGgtM3YxaDJ2NmgtMnoiIGlkPSJpY29uQmciLz48cGF0aCBjbGFzcz0iaWNvbi12cy1mZyIgZD0iTTcuMTU2IDcuMTU2bC0xLjU3OC0uNzg5IDMuMTU2LTEuNTc4IDEuNTc4Ljc4OS0zLjE1NiAxLjU3OHoiIGlkPSJpY29uRmciIHN0eWxlPSJkaXNwbGF5OiBub25lOyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWFjdGlvbi1ibHVlIiBkPSJNOC43MzMgNEw0IDYuMzY3djMuMTU2TDcuMTU2IDExLjFsNC43MzMtMi4zNjdWNS41NzhMOC43MzMgNHpNNy4xNTYgNy4xNTZsLTEuNTc4LS43ODkgMy4xNTYtMS41NzggMS41NzguNzg5LTMuMTU2IDEuNTc4eiIgaWQ9ImNvbG9ySW1wb3J0YW5jZSIvPjwvc3ZnPg==)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.class:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtYWN0aW9uLW9yYW5nZXtmaWxsOiNjMjdkMWF9PC9zdHlsZT48cGF0aCBjbGFzcz0iaWNvbi1jYW52YXMtdHJhbnNwYXJlbnQiIGQ9Ik0xNiAxNkgwVjBoMTZ2MTZ6IiBpZD0iY2FudmFzIi8+PHBhdGggY2xhc3M9Imljb24tdnMtb3V0IiBkPSJNMTYgNi41ODZsLTMtM0wxMS41ODYgNUg5LjQxNGwxLTEtNC00aC0uODI4TDAgNS41ODZ2LjgyOGw0IDRMNi40MTQgOEg3djVoMS41ODZsMyAzaC44MjhMMTYgMTIuNDE0di0uODI4TDEzLjkxNCA5LjUgMTYgNy40MTR2LS44Mjh6IiBpZD0ib3V0bGluZSIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWFjdGlvbi1vcmFuZ2UiIGQ9Ik0xMyAxMGwyIDItMyAzLTItMiAxLTFIOFY3SDZMNCA5IDEgNmw1LTUgMyAzLTIgMmg1bDEtMSAyIDItMyAzLTItMiAxLTFIOXY0bDIuOTk5LjAwMkwxMyAxMHoiIGlkPSJpY29uQmciLz48L3N2Zz4=)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.interface:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtZmd7ZmlsbDojZjBlZmYxfS5pY29uLXZzLWFjdGlvbi1ibHVle2ZpbGw6IzAwNTM5Y308L3N0eWxlPjxwYXRoIGNsYXNzPSJpY29uLWNhbnZhcy10cmFuc3BhcmVudCIgZD0iTTE2IDE2SDBWMGgxNnYxNnoiIGlkPSJjYW52YXMiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1vdXQiIGQ9Ik0xMS41IDEyYy0xLjkxNSAwLTMuNjAyLTEuMjQxLTQuMjI4LTNoLTEuNDFhMy4xMSAzLjExIDAgMCAxLTIuNzM3IDEuNjI1QzEuNDAyIDEwLjYyNSAwIDkuMjIzIDAgNy41czEuNDAyLTMuMTI1IDMuMTI1LTMuMTI1YzEuMTY1IDAgMi4yMDEuNjM5IDIuNzM3IDEuNjI1aDEuNDFjLjYyNi0xLjc1OSAyLjMxMy0zIDQuMjI4LTNDMTMuOTgxIDMgMTYgNS4wMTkgMTYgNy41UzEzLjk4MSAxMiAxMS41IDEyeiIgaWQ9Im91dGxpbmUiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1mZyIgZD0iTTExLjUgOUExLjUwMSAxLjUwMSAwIDEgMSAxMyA3LjVjMCAuODI2LS42NzMgMS41LTEuNSAxLjV6IiBpZD0iaWNvbkZnIi8+PHBhdGggY2xhc3M9Imljb24tdnMtYWN0aW9uLWJsdWUiIGQ9Ik0xMS41IDRhMy40OSAzLjQ5IDAgMCAwLTMuNDUgM0g1LjE4NUEyLjEyMiAyLjEyMiAwIDAgMCAxIDcuNWEyLjEyMyAyLjEyMyAwIDEgMCA0LjE4NS41SDguMDVhMy40OSAzLjQ5IDAgMCAwIDMuNDUgMyAzLjUgMy41IDAgMSAwIDAtN3ptMCA1Yy0uODI3IDAtMS41LS42NzMtMS41LTEuNVMxMC42NzMgNiAxMS41IDZzMS41LjY3MyAxLjUgMS41UzEyLjMyNyA5IDExLjUgOXoiIGlkPSJpY29uQmciLz48L3N2Zz4=)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.struct:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtYWN0aW9uLWJsdWV7ZmlsbDojMDA1MzljfTwvc3R5bGU+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYgMTZIMFYwaDE2djE2eiIgaWQ9ImNhbnZhcyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTkgMTRWOEg3djZIMVYyaDE0djEySDl6IiBpZD0ib3V0bGluZSIgc3R5bGU9ImRpc3BsYXk6IG5vbmU7Ii8+PHBhdGggY2xhc3M9Imljb24tdnMtYWN0aW9uLWJsdWUiIGQ9Ik0xMCA5aDR2NGgtNFY5em0tOCA0aDRWOUgydjR6TTIgM3Y0aDEyVjNIMnoiIGlkPSJpY29uQmciLz48L3N2Zz4=)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.type-parameter:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtYmd7ZmlsbDojNDI0MjQyfTwvc3R5bGU+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYgMTZIMFYwaDE2djE2eiIgaWQ9ImNhbnZhcyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTEwLjcwMiAxMC41bDItMi0yLTIgLjUtLjVIMTB2NWgxdjNINXYtM2gxVjZINC43OThsLjUuNS0yIDIgMiAyTDMgMTIuNzk3bC0zLTNWNy4yMDFsMy0zVjJoMTB2Mi4yMDFsMyAzdjIuNTk2bC0zIDMtMi4yOTgtMi4yOTd6IiBpZD0ib3V0bGluZSIgc3R5bGU9ImRpc3BsYXk6IG5vbmU7Ii8+PHBhdGggY2xhc3M9Imljb24tdnMtYmciIGQ9Ik00IDNoOHYyaC0xdi0uNWMwLS4yNzctLjIyNC0uNS0uNS0uNUg5djcuNWMwIC4yNzUuMjI0LjUuNS41aC41djFINnYtMWguNWEuNS41IDAgMCAwIC41LS41VjRINS41YS41LjUgMCAwIDAtLjUuNVY1SDRWM3pNMyA1LjYxNUwuMTE2IDguNSAzIDExLjM4M2wuODg0LS44ODMtMi0yIDItMkwzIDUuNjE1em0xMCAwbC0uODg0Ljg4NSAyIDItMiAyIC44ODQuODgzTDE1Ljg4NCA4LjUgMTMgNS42MTV6IiBpZD0iaWNvbkJnIi8+PC9zdmc+)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.module:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtYmd7ZmlsbDojNDI0MjQyfTwvc3R5bGU+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYgMTZIMFYwaDE2djE2eiIgaWQ9ImNhbnZhcyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTkuMjYgMTEuOTg0bC45NzgtLjAyMWEuOTYyLjk2MiAwIDAgMCAuMDktLjAwNmMuMDExLS4wNjMuMDI2LS4xNzkuMDI2LS4zNjFWOS42ODhjMC0uNjc5LjE4NS0xLjI1Ny41My0xLjcwNy0uMzQ2LS40NTItLjUzLTEuMDMtLjUzLTEuNzA1VjQuMzVjMC0uMTY3LS4wMjEtLjI1OS0uMDM0LS4zMDJMOS4yNiA0LjAyVi45NzNsMS4wMTEuMDExYzIuMTY3LjAyNCAzLjQwOSAxLjE1NiAzLjQwOSAzLjEwNXYxLjk2MmMwIC4zNTEuMDcxLjQ2MS4wNzIuNDYybC45MzYuMDYuMDUzLjkyN3YxLjkzNmwtLjkzNi4wNjFjLS4wNzYuMDE2LS4xMjUuMTQ2LS4xMjUuNDI0djIuMDE3YzAgLjkxNC0uMzMyIDMuMDQzLTMuNDA4IDMuMDc4bC0xLjAxMi4wMTF2LTMuMDQzem0tMy41MjEgMy4wMzJjLTMuMDg5LS4wMzUtMy40MjItMi4xNjQtMy40MjItMy4wNzhWOS45MjFjMC0uMzI3LS4wNjYtLjQzMi0uMDY3LS40MzNsLS45MzctLjA2LS4wNjMtLjkyOVY2LjU2M2wuOTQyLS4wNmMuMDU4IDAgLjEyNS0uMTE0LjEyNS0uNDUyVjQuMDljMC0xLjk0OSAxLjI0OC0zLjA4MSAzLjQyMi0zLjEwNUw2Ljc1Ljk3M1Y0LjAybC0uOTc1LjAyM2EuNTcyLjU3MiAwIDAgMC0uMDkzLjAxYy4wMDYuMDIxLS4wMTkuMTE1LS4wMTkuMjk3djEuOTI4YzAgLjY3NS0uMTg2IDEuMjUzLS41MzQgMS43MDUuMzQ4LjQ1LjUzNCAxLjAyOC41MzQgMS43MDd2MS45MDdjMCAuMTc1LjAxNC4yOTEuMDI3LjM2My4wMjMuMDAyIDEuMDYuMDI1IDEuMDYuMDI1djMuMDQzbC0xLjAxMS0uMDEyeiIgaWQ9Im91dGxpbmUiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1iZyIgZD0iTTUuNzUgMTQuMDE2Yy0xLjYyMy0uMDE5LTIuNDM0LS43MTEtMi40MzQtMi4wNzhWOS45MjFjMC0uOTAyLS4zNTUtMS4zNzYtMS4wNjYtMS40MjJ2LS45OThjLjcxMS0uMDQ1IDEuMDY2LS41MjkgMS4wNjYtMS40NDlWNC4wOWMwLTEuMzg1LjgxMS0yLjA4NyAyLjQzNC0yLjEwNXYxLjA2Yy0uNzI1LjAxNy0xLjA4Ny40NTMtMS4wODcgMS4zMDV2MS45MjhjMCAuOTItLjQ1NCAxLjQ4OC0xLjM2IDEuNzAyVjhjLjkwNy4yMDEgMS4zNi43NjMgMS4zNiAxLjY4OHYxLjkwN2MwIC40ODguMDgxLjgzNS4yNDMgMS4wNDIuMTYyLjIwOC40NDMuMzE2Ljg0NC4zMjV2MS4wNTR6bTcuOTktNS41MTdjLS43MDYuMDQ1LTEuMDYuNTItMS4wNiAxLjQyMnYyLjAxN2MwIDEuMzY3LS44MDcgMi4wNi0yLjQyIDIuMDc4di0xLjA1M2MuMzk2LS4wMDkuNjc4LS4xMTguODQ0LS4zMjguMTY3LS4yMS4yNS0uNTU2LjI1LTEuMDM5VjkuNjg4YzAtLjkyNS40NDktMS40ODggMS4zNDctMS42ODh2LS4wMjFjLS44OTgtLjIxNC0xLjM0Ny0uNzgyLTEuMzQ3LTEuNzAyVjQuMzVjMC0uODUyLS4zNjQtMS4yODgtMS4wOTQtMS4zMDZ2LTEuMDZjMS42MTMuMDE4IDIuNDIuNzIgMi40MiAyLjEwNXYxLjk2MmMwIC45Mi4zNTQgMS40MDQgMS4wNiAxLjQ0OXYuOTk5eiIgaWQ9Imljb25CZyIvPjwvc3ZnPg==)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.property:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtYmd7ZmlsbDojNDI0MjQyfTwvc3R5bGU+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYgMTZIMFYwaDE2djE2eiIgaWQ9ImNhbnZhcyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTE2IDUuNWE1LjUgNS41IDAgMCAxLTUuNSA1LjVjLS4yNzUgMC0uNTQzLS4wMjctLjgwNy0uMDY2bC0uMDc5LS4wMTJhNS40MjkgNS40MjkgMCAwIDEtLjgxLS4xOTJsLTQuNTM3IDQuNTM3Yy0uNDcyLjQ3My0xLjEuNzMzLTEuNzY3LjczM3MtMS4yOTUtLjI2LTEuNzY4LS43MzJhMi41MDIgMi41MDIgMCAwIDEgMC0zLjUzNWw0LjUzNy00LjUzN2E1LjQ1MiA1LjQ1MiAwIDAgMS0uMTkxLS44MTJjLS4wMDUtLjAyNS0uMDA4LS4wNTEtLjAxMi0uMDc3QTUuNTAzIDUuNTAzIDAgMCAxIDUgNS41YTUuNSA1LjUgMCAxIDEgMTEgMHoiIGlkPSJvdXRsaW5lIi8+PHBhdGggY2xhc3M9Imljb24tdnMtYmciIGQ9Ik0xNSA1LjVhNC41IDQuNSAwIDAgMS00LjUgNC41Yy0uNjkzIDAtMS4zNDItLjE3LTEuOTI5LS40NWwtNS4wMSA1LjAxYy0uMjkzLjI5NC0uNjc3LjQ0LTEuMDYxLjQ0cy0uNzY4LS4xNDYtMS4wNjEtLjQzOWExLjUgMS41IDAgMCAxIDAtMi4xMjFsNS4wMS01LjAxQTQuNDgzIDQuNDgzIDAgMCAxIDYgNS41IDQuNSA0LjUgMCAwIDEgMTAuNSAxYy42OTMgMCAxLjM0Mi4xNyAxLjkyOS40NUw5LjYzNiA0LjI0M2wyLjEyMSAyLjEyMSAyLjc5My0yLjc5M2MuMjguNTg3LjQ1IDEuMjM2LjQ1IDEuOTI5eiIgaWQ9Imljb25CZyIvPjwvc3ZnPg==)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.unit:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtYmd7ZmlsbDojNDI0MjQyfS5pY29uLXZzLWZne2ZpbGw6I2YwZWZmMX08L3N0eWxlPjxwYXRoIGNsYXNzPSJpY29uLWNhbnZhcy10cmFuc3BhcmVudCIgZD0iTTE2IDE2SDBWMGgxNnYxNnoiIGlkPSJjYW52YXMiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1vdXQiIGQ9Ik0xNiAxMS4wMTNIMVY0aDE1djcuMDEzeiIgaWQ9Im91dGxpbmUiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1mZyIgZD0iTTggOUg3VjZoM3YzSDlWN0g4djJ6TTQgN2gxdjJoMVY2SDN2M2gxVjd6bTggMGgxdjJoMVY2aC0zdjNoMVY3eiIgaWQ9Imljb25GZyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWJnIiBkPSJNMiA1djVoMTNWNUgyem00IDRINVY3SDR2MkgzVjZoM3Yzem00IDBIOVY3SDh2Mkg3VjZoM3Yzem00IDBoLTFWN2gtMXYyaC0xVjZoM3YzeiIgaWQ9Imljb25CZyIvPjwvc3ZnPg==)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.constant:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtYmd7ZmlsbDojNDI0MjQyfS5pY29uLXZzLWZne2ZpbGw6I2YwZWZmMX0uaWNvbi12cy1hY3Rpb24tYmx1ZXtmaWxsOiMwMDUzOWN9PC9zdHlsZT48cGF0aCBjbGFzcz0iaWNvbi1jYW52YXMtdHJhbnNwYXJlbnQiIGQ9Ik0xNiAxNkgwVjBoMTZ2MTZ6IiBpZD0iY2FudmFzIi8+PHBhdGggY2xhc3M9Imljb24tdnMtb3V0IiBkPSJNMi44NzkgMTRMMSAxMi4xMjFWMy44NzlMMi44NzkgMmgxMC4yNDJMMTUgMy44Nzl2OC4yNDJMMTMuMTIxIDE0SDIuODc5eiIgaWQ9Im91dGxpbmUiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1mZyIgZD0iTTEyLjI5MyA0SDMuNzA3TDMgNC43MDd2Ni41ODZsLjcwNy43MDdoOC41ODZsLjcwNy0uNzA3VjQuNzA3TDEyLjI5MyA0ek0xMSAxMEg1VjloNnYxem0wLTNINVY2aDZ2MXoiIGlkPSJpY29uRmciLz48ZyBpZD0iaWNvbkJnIj48cGF0aCBjbGFzcz0iaWNvbi12cy1iZyIgZD0iTTEyLjcwNyAxM0gzLjI5M0wyIDExLjcwN1Y0LjI5M0wzLjI5MyAzaDkuNDE0TDE0IDQuMjkzdjcuNDE0TDEyLjcwNyAxM3ptLTktMWg4LjU4NmwuNzA3LS43MDdWNC43MDdMMTIuMjkzIDRIMy43MDdMMyA0LjcwN3Y2LjU4NmwuNzA3LjcwN3oiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1hY3Rpb24tYmx1ZSIgZD0iTTExIDdINVY2aDZ2MXptMCAySDV2MWg2Vjl6Ii8+PC9nPjwvc3ZnPg==)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.enum:before,.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.value:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtZmd7ZmlsbDojZjBlZmYxfS5pY29uLXZzLWFjdGlvbi1vcmFuZ2V7ZmlsbDojYzI3ZDFhfTwvc3R5bGU+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYgMTZIMFYwaDE2djE2eiIgaWQ9ImNhbnZhcyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTE0LjQxNCAxTDE2IDIuNTg2djUuODI4TDE0LjQxNCAxMEgxMHYzLjQxNkw4LjQxNCAxNUgxLjU4NkwwIDEzLjQxNnYtNS44M0wxLjU4NiA2SDZWMi41ODZMNy41ODYgMWg2LjgyOHoiIGlkPSJvdXRsaW5lIi8+PHBhdGggY2xhc3M9Imljb24tdnMtZmciIGQ9Ik0yIDEzaDZWOEgydjV6bTEtNGg0djFIM1Y5em0wIDJoNHYxSDN2LTF6bTExLTVWM0g4djNoLjQxNEw5IDYuNTg2VjZoNHYxSDkuNDE0bC41ODYuNTg2VjhoNFY2em0tMS0xSDlWNGg0djF6IiBpZD0iaWNvbkZnIi8+PHBhdGggY2xhc3M9Imljb24tdnMtYWN0aW9uLW9yYW5nZSIgZD0iTTMgMTFoNC4wMDF2MUgzdi0xem0wLTFoNC4wMDFWOUgzdjF6bTYtMnY1bC0xIDFIMmwtMS0xVjhsMS0xaDZsMSAxek04IDhIMnY1aDZWOHptMS0ybDEgMWgzVjZIOXptMC0xaDRWNEg5djF6bTUtM0g4TDcgM3YzaDFWM2g2djVoLTR2MWg0bDEtMVYzbC0xLTF6IiBpZD0iaWNvbkJnIi8+PC9zdmc+)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.enum-member:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtZmd7ZmlsbDojZjBlZmYxfS5pY29uLXZzLWFjdGlvbi1ibHVle2ZpbGw6IzAwNTM5Y308L3N0eWxlPjxwYXRoIGNsYXNzPSJpY29uLWNhbnZhcy10cmFuc3BhcmVudCIgZD0iTTE2IDE2SDBWMGgxNnYxNnoiIGlkPSJjYW52YXMiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1vdXQiIGQ9Ik0wIDE1VjZoNlYyLjU4Nkw3LjU4NSAxaDYuODI5TDE2IDIuNTg2djUuODI5TDE0LjQxNCAxMEgxMHY1SDB6bTMtNnoiIGlkPSJvdXRsaW5lIi8+PHBhdGggY2xhc3M9Imljb24tdnMtZmciIGQ9Ik04IDN2M2g1djFoLTN2MWg0VjNIOHptNSAySDlWNGg0djF6TTIgOHY1aDZWOEgyem01IDNIM3YtMWg0djF6IiBpZD0iaWNvbkZnIi8+PHBhdGggY2xhc3M9Imljb24tdnMtYWN0aW9uLWJsdWUiIGQ9Ik0xMCA2aDN2MWgtM1Y2ek05IDR2MWg0VjRIOXptNS0ySDhMNyAzdjNoMVYzaDZ2NWgtNHYxaDRsMS0xVjNsLTEtMXptLTcgOEgzdjFoNHYtMXptMi0zdjdIMVY3aDh6TTggOEgydjVoNlY4eiIgaWQ9Imljb25CZyIvPjwvc3ZnPg==)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.keyword:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtYmd7ZmlsbDojNDI0MjQyfS5pY29uLXZzLWZne2ZpbGw6I2YwZWZmMX08L3N0eWxlPjxwYXRoIGNsYXNzPSJpY29uLWNhbnZhcy10cmFuc3BhcmVudCIgZD0iTTE2IDE2SDBWMGgxNnYxNnoiIGlkPSJjYW52YXMiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1vdXQiIGQ9Ik0xNiA1VjJIOVYxSDB2MTRoMTN2LTNoM1Y5aC0xVjZIOVY1aDd6bS04IDdWOWgxdjNIOHoiIGlkPSJvdXRsaW5lIi8+PHBhdGggY2xhc3M9Imljb24tdnMtZmciIGQ9Ik0yIDNoNXYxSDJWM3oiIGlkPSJpY29uRmciLz48cGF0aCBjbGFzcz0iaWNvbi12cy1iZyIgZD0iTTE1IDRoLTVWM2g1djF6bS0xIDNoLTJ2MWgyVjd6bS00IDBIMXYxaDlWN3ptMiA2SDF2MWgxMXYtMXptLTUtM0gxdjFoNnYtMXptOCAwaC01djFoNXYtMXpNOCAydjNIMVYyaDd6TTcgM0gydjFoNVYzeiIgaWQ9Imljb25CZyIvPjwvc3ZnPg==)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.text:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtYmd7ZmlsbDojNDI0MjQyfS5pY29uLXZzLWZne2ZpbGw6I2YwZWZmMX08L3N0eWxlPjxwYXRoIGNsYXNzPSJpY29uLWNhbnZhcy10cmFuc3BhcmVudCIgZD0iTTE2IDE2SDBWMGgxNnYxNnoiIGlkPSJjYW52YXMiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1vdXQiIGQ9Ik0xNiAxNUgwVjFoMTZ2MTR6IiBpZD0ib3V0bGluZSIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWZnIiBkPSJNOS4yMjkgNy4zNTRjLjAzNS4xNDYuMDUyLjMxLjA1Mi40OTQgMCAuMjM0LS4wMi40NDEtLjA2LjYyMS0uMDM5LjE4LS4wOTUuMzI4LS4xNjguNDQ1YS42ODcuNjg3IDAgMCAxLS45MTQuMjgxLjc2Ljc2IDAgMCAxLS4yMzctLjIwNy45ODguOTg4IDAgMCAxLS4xNTQtLjMwNiAxLjI2MiAxLjI2MiAwIDAgMS0uMDU3LS4zODF2LS41MDZjMC0uMTcuMDItLjMyNi4wNjEtLjQ2NXMuMDk2LS4yNTguMTY4LS4zNTlhLjc1Ni43NTYgMCAwIDEgLjI1Ny0uMjMyYy4xLS4wNTUuMjEtLjA4Mi4zMzEtLjA4MmEuNjQ2LjY0NiAwIDAgMSAuNTcxLjMyYy4wNjcuMTA1LjExNi4yMy4xNS4zNzd6bS01LjEyNi44NjlhLjU1Ny41NTcgMCAwIDAtLjE5Ni4xMzJjLS4wNDcuMDUzLS4wOC4xMTItLjA5Ny4xOHMtLjAyOC4xNDctLjAyOC4yMzNhLjUxMy41MTMgMCAwIDAgLjE1Ny4zOS41MjguNTI4IDAgMCAwIC4xODYuMTEzLjY4Mi42ODIgMCAwIDAgLjI0Mi4wNDEuNzYuNzYgMCAwIDAgLjU5My0uMjcxLjg5Ny44OTcgMCAwIDAgLjE2NS0uMjk1Yy4wMzgtLjExMy4wNTktLjIzNC4wNTktLjM2NXYtLjM0NmwtLjc2MS4xMWExLjI5IDEuMjkgMCAwIDAtLjMyLjA3OHpNMTQgM3YxMEgyVjNoMTJ6TTUuOTYyIDcuNDY5YzAtLjIzOC0uMDI3LS40NTEtLjA4My0uNjM3YTEuMjg2IDEuMjg2IDAgMCAwLS4yNDktLjQ3MSAxLjA4IDEuMDggMCAwIDAtLjQyNC0uMjk1IDEuNjQ0IDEuNjQ0IDAgMCAwLS42MDgtLjEwMWMtLjExOSAwLS4yNDEuMDEyLS4zNjguMDMzYTMuMjEzIDMuMjEzIDAgMCAwLS42NzMuMTk1IDEuMzEzIDEuMzEzIDAgMCAwLS4yMTIuMTE0di43NjhjLjE1OC0uMTMyLjM0MS0uMjM1LjU0NC0uMzEzLjIwNC0uMDc4LjQxMy0uMTE3LjYyNy0uMTE3LjIxMyAwIC4zNzcuMDYzLjQ5NC4xODYuMTE2LjEyNS4xNzQuMzI0LjE3NC42bC0xLjAzLjE1NGMtLjIwNS4wMjYtLjM4LjA3Ny0uNTI2LjE1MWExLjA4MyAxLjA4MyAwIDAgMC0uNTYzLjY2QTEuNTYyIDEuNTYyIDAgMCAwIDMgOC44NTdjMCAuMTcuMDI1LjMyMy4wNzQuNDYzYS45NDUuOTQ1IDAgMCAwIC41NjguNTk2Yy4xMzkuMDU3LjI5Ny4wODQuNDc4LjA4NC4yMjkgMCAuNDMxLS4wNTMuNjA0LS4xNmExLjMgMS4zIDAgMCAwIC40MzktLjQ2M2guMDE0di41MjloLjc4NVY3LjQ2OXpNMTAgNy44NjFhMy41NCAzLjU0IDAgMCAwLS4wNzQtLjczNCAyLjA0NyAyLjA0NyAwIDAgMC0uMjI4LS42MTEgMS4yMDMgMS4yMDMgMCAwIDAtLjM5NC0uNDE2IDEuMDMgMS4wMyAwIDAgMC0uNTc0LS4xNTNjLS4xMjMgMC0uMjM0LjAxOC0uMzM2LjA1MWExIDEgMCAwIDAtLjI3OC4xNDcgMS4xNTMgMS4xNTMgMCAwIDAtLjIyNS4yMjIgMi4wMjIgMi4wMjIgMCAwIDAtLjE4MS4yODloLS4wMTNWNUg3djQuODg3aC42OTd2LS40ODVoLjAxM2MuMDQ0LjA4Mi4wOTUuMTU4LjE1MS4yMjkuMDU3LjA3LjExOS4xMzMuMTkxLjE4NmEuODM1LjgzNSAwIDAgMCAuMjM4LjEyMS45NDMuOTQzIDAgMCAwIC4yOTMuMDQyYy4yMyAwIC40MzQtLjA1My42MDktLjE2YTEuMzQgMS4zNCAwIDAgMCAuNDQzLS40NDNjLjEyLS4xODguMjExLS40MTIuMjcyLS42NzJBMy42MiAzLjYyIDAgMCAwIDEwIDcuODYxem0zLTEuNjU4YS43LjcgMCAwIDAtLjEwNi0uMDY2IDEuMTgzIDEuMTgzIDAgMCAwLS4xNDItLjA2MyAxLjIzMyAxLjIzMyAwIDAgMC0uMzYzLS4wNjVjLS4yMDkgMC0uMzk5LjA1MS0uNTY5LjE1YTEuMzU1IDEuMzU1IDAgMCAwLS40MzMuNDI0Yy0uMTE4LjE4Mi0uMjEuNDAyLS4yNzMuNjZhMy42MyAzLjYzIDAgMCAwLS4wMDggMS42MTVjLjA2LjIzLjE0My40My4yNTIuNjAyLjEwOS4xNjguMjQxLjMwMy4zOTYuMzk2YS45NzIuOTcyIDAgMCAwIC41MjQuMTQ0Yy4xNTggMCAuMjk2LS4wMjEuNDEzLS4wNjguMTE3LS4wNDUuMjE5LS4xMDguMzA5LS4xODR2LS43N2ExLjA5NCAxLjA5NCAwIDAgMS0uMjg4LjIyNS44MTkuODE5IDAgMCAxLS4xNTguMDY4LjQ4LjQ4IDAgMCAxLS4xNTMuMDI3LjYyLjYyIDAgMCAxLS4yNzQtLjA3NGMtLjI0MS0uMTM2LS40MjMtLjQ3OS0uNDIzLTEuMTQ2IDAtLjcxNS4yMDYtMS4xMi40NjktMS4zMDEuMDc3LS4wMzIuMTUzLS4wNjQuMjM4LS4wNjQuMTEzIDAgLjIyLjAyNy4zMTcuMDgyLjA5Ni4wNTcuMTg4LjEzMS4yNzIuMjIzdi0uODE1eiIgaWQ9Imljb25GZyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWJnIiBkPSJNMSAydjEyaDE0VjJIMXptMTMgMTFIMlYzaDEydjEwek01LjYzIDYuMzYxYTEuMDggMS4wOCAwIDAgMC0uNDI0LS4yOTUgMS42NDQgMS42NDQgMCAwIDAtLjYwOC0uMTAxYy0uMTE5IDAtLjI0MS4wMTItLjM2OC4wMzNhMy4yMTMgMy4yMTMgMCAwIDAtLjY3My4xOTUgMS4zMTMgMS4zMTMgMCAwIDAtLjIxMi4xMTR2Ljc2OGMuMTU4LS4xMzIuMzQxLS4yMzUuNTQ0LS4zMTMuMjA0LS4wNzguNDEzLS4xMTcuNjI3LS4xMTcuMjEzIDAgLjM3Ny4wNjMuNDk0LjE4Ni4xMTYuMTI1LjE3NC4zMjQuMTc0LjZsLTEuMDMuMTU0Yy0uMjA1LjAyNi0uMzguMDc3LS41MjYuMTUxYTEuMDgzIDEuMDgzIDAgMCAwLS41NjMuNjZBMS41NjIgMS41NjIgMCAwIDAgMyA4Ljg1N2MwIC4xNy4wMjUuMzIzLjA3NC40NjNhLjk0NS45NDUgMCAwIDAgLjU2OC41OTZjLjEzOS4wNTcuMjk3LjA4NC40NzguMDg0LjIyOSAwIC40MzEtLjA1My42MDQtLjE2YTEuMyAxLjMgMCAwIDAgLjQzOS0uNDYzaC4wMTR2LjUyOWguNzg1VjcuNDY5YzAtLjIzOC0uMDI3LS40NTEtLjA4My0uNjM3YTEuMjg2IDEuMjg2IDAgMCAwLS4yNDktLjQ3MXptLS40NDYgMi4wMmMwIC4xMzEtLjAyLjI1Mi0uMDU5LjM2NWEuODk3Ljg5NyAwIDAgMS0uMTY1LjI5NS43NTguNzU4IDAgMCAxLS41OTMuMjcyLjY4Mi42ODIgMCAwIDEtLjI0Mi0uMDQxLjUwNy41MDcgMCAwIDEtLjMwMi0uMjg2LjU4My41ODMgMCAwIDEtLjA0MS0uMjE4YzAtLjA4Ni4wMS0uMTY0LjAyNy0uMjMycy4wNTEtLjEyNy4wOTgtLjE4YS41NDYuNTQ2IDAgMCAxIC4xOTYtLjEzM2MuMDgzLS4wMzMuMTg5LS4wNjEuMzItLjA3OGwuNzYxLS4xMDl2LjM0NXptNC41MTQtMS44NjVhMS4yMDMgMS4yMDMgMCAwIDAtLjM5NC0uNDE2IDEuMDMgMS4wMyAwIDAgMC0uNTc0LS4xNTNjLS4xMjMgMC0uMjM0LjAxOC0uMzM2LjA1MWExIDEgMCAwIDAtLjI3OC4xNDcgMS4xNTMgMS4xNTMgMCAwIDAtLjIyNS4yMjIgMi4wMjIgMi4wMjIgMCAwIDAtLjE4MS4yODloLS4wMTNWNUg3djQuODg3aC42OTd2LS40ODVoLjAxM2MuMDQ0LjA4Mi4wOTUuMTU4LjE1MS4yMjkuMDU3LjA3LjExOS4xMzMuMTkxLjE4NmEuODM1LjgzNSAwIDAgMCAuMjM4LjEyMS45NDMuOTQzIDAgMCAwIC4yOTMuMDQyYy4yMyAwIC40MzQtLjA1My42MDktLjE2YTEuMzQgMS4zNCAwIDAgMCAuNDQzLS40NDNjLjEyLS4xODguMjExLS40MTIuMjcyLS42NzJBMy42MiAzLjYyIDAgMCAwIDEwIDcuODYxYTMuNTQgMy41NCAwIDAgMC0uMDc0LS43MzQgMi4wNDcgMi4wNDcgMCAwIDAtLjIyOC0uNjExem0tLjQ3NiAxLjk1M2MtLjAzOS4xOC0uMDk1LjMyOC0uMTY4LjQ0NWEuNzU1Ljc1NSAwIDAgMS0uMjY0LjI2Ni42ODcuNjg3IDAgMCAxLS42NTEuMDE1Ljc2Ljc2IDAgMCAxLS4yMzctLjIwNy45ODguOTg4IDAgMCAxLS4xNTQtLjMwNiAxLjI2MiAxLjI2MiAwIDAgMS0uMDU3LS4zODF2LS41MDZjMC0uMTcuMDItLjMyNi4wNjEtLjQ2NXMuMDk2LS4yNTguMTY4LS4zNTlhLjc1Ni43NTYgMCAwIDEgLjI1Ny0uMjMyYy4xLS4wNTUuMjEtLjA4Mi4zMzEtLjA4MmEuNjQ2LjY0NiAwIDAgMSAuNTcxLjMyYy4wNjYuMTA1LjExNi4yMy4xNS4zNzcuMDM1LjE0Ni4wNTIuMzEuMDUyLjQ5NCAwIC4yMzQtLjAxOS40NDEtLjA1OS42MjF6bTMuNjcyLTIuMzMyYS43LjcgMCAwIDEgLjEwNi4wNjZ2LjgxNGExLjE3OCAxLjE3OCAwIDAgMC0uMjczLS4yMjMuNjQ1LjY0NSAwIDAgMC0uMzE3LS4wODFjLS4wODUgMC0uMTYxLjAzMi0uMjM4LjA2NC0uMjYzLjE4MS0uNDY5LjU4Ni0uNDY5IDEuMzAxIDAgLjY2OC4xODIgMS4wMTEuNDIzIDEuMTQ2LjA4NC4wNC4xNzEuMDc0LjI3NC4wNzQuMDQ5IDAgLjEwMS0uMDEuMTUzLS4wMjdhLjg1Ni44NTYgMCAwIDAgLjE1OC0uMDY4IDEuMTYgMS4xNiAwIDAgMCAuMjg4LS4yMjV2Ljc3Yy0uMDkuMDc2LS4xOTIuMTM5LS4zMDkuMTg0YTEuMDk4IDEuMDk4IDAgMCAxLS40MTIuMDY4Ljk3NC45NzQgMCAwIDEtLjUyMy0uMTQzIDEuMjU3IDEuMjU3IDAgMCAxLS4zOTYtLjM5NiAyLjA5OCAyLjA5OCAwIDAgMS0uMjUyLS42MDIgMy4xMTggMy4xMTggMCAwIDEtLjA4OC0uNzU0YzAtLjMxNi4wMzItLjYwNC4wOTYtLjg2MS4wNjMtLjI1OC4xNTUtLjQ3OS4yNzMtLjY2LjExOS0uMTgyLjI2NS0uMzIyLjQzMy0uNDI0YTEuMTAyIDEuMTAyIDAgMCAxIDEuMDczLS4wMjN6IiBpZD0iaWNvbkJnIi8+PC9zdmc+)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.color:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtYmd7ZmlsbDojNDI0MjQyfS5pY29uLXZzLXJlZHtmaWxsOiNlNTE0MDB9Lmljb24tdnMteWVsbG93e2ZpbGw6I2ZmY2MwMH0uaWNvbi12cy1ncmVlbntmaWxsOiMzMzk5MzN9Lmljb24tdnMtYmx1ZXtmaWxsOiMxYmExZTJ9Lmljb24tdnMtYWN0aW9uLXB1cnBsZXtmaWxsOiM2NTJkOTB9Lmljb24td2hpdGV7ZmlsbDojZmZmZmZmfTwvc3R5bGU+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYgMTZIMFYwaDE2djE2eiIgaWQ9ImNhbnZhcyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTE2IDhjMCA0LjQxMS0zLjU4OSA4LTggOGEyLjgwMyAyLjgwMyAwIDAgMS0yLjgtMi44YzAtLjgzMy4yNzItMS42MjkuNzY2LTIuMjQxYS41OTYuNTk2IDAgMCAwIC4xMDEtLjM1OS42NjcuNjY3IDAgMCAwLS42NjctLjY2Ni41OC41OCAwIDAgMC0uMzU4LjEwMkEzLjU4NCAzLjU4NCAwIDAgMSAyLjggMTAuOCAyLjgwMyAyLjgwMyAwIDAgMSAwIDhjMC00LjQxMSAzLjU4OS04IDgtOHM4IDMuNTg5IDggOHoiIGlkPSJvdXRsaW5lIi8+PHBhdGggY2xhc3M9Imljb24td2hpdGUiIGQ9Ik01LjQgNy45MzNhMi42NyAyLjY3IDAgMCAxIDIuNjY3IDIuNjY2YzAgLjYwNi0uMTkzIDEuMTc5LS41NDQgMS42MTRhMS41OTkgMS41OTkgMCAwIDAtLjMyMy45ODcuOC44IDAgMCAwIC44LjhjMy4zMDkgMCA2LTIuNjkxIDYtNnMtMi42OTEtNi02LTYtNiAyLjY5MS02IDZjMCAuNDQxLjM1OS44LjguOC4zNzggMCAuNzI5LS4xMTQuOTg2LS4zMjJBMi41NjggMi41NjggMCAwIDEgNS40IDcuOTMzeiIgaWQ9Imljb25GZyIvPjxnIGlkPSJpY29uQmciPjxwYXRoIGNsYXNzPSJpY29uLXZzLWJnIiBkPSJNOCAxNWMtLjk5MiAwLTEuOC0uODA4LTEuOC0xLjggMC0uNjA2LjE5My0xLjE3OS41NDQtMS42MTMuMjA4LS4yNTkuMzIzLS42MDkuMzIzLS45ODcgMC0uOTE5LS43NDgtMS42NjYtMS42NjctMS42NjYtLjM3NyAwLS43MjguMTE1LS45ODYuMzIzQTIuNTggMi41OCAwIDAgMSAyLjggOS44QzEuODA4IDkuOCAxIDguOTkyIDEgOGMwLTMuODYgMy4xNC03IDctNyAzLjg1OSAwIDcgMy4xNCA3IDcgMCAzLjg1OS0zLjE0MSA3LTcgN3pNNS40IDcuOTMzYTIuNjcgMi42NyAwIDAgMSAyLjY2NyAyLjY2NmMwIC42MDYtLjE5MyAxLjE3OS0uNTQ0IDEuNjE0YTEuNTk5IDEuNTk5IDAgMCAwLS4zMjMuOTg3LjguOCAwIDAgMCAuOC44YzMuMzA5IDAgNi0yLjY5MSA2LTZzLTIuNjkxLTYtNi02LTYgMi42OTEtNiA2YzAgLjQ0MS4zNTkuOC44LjguMzc4IDAgLjcyOS0uMTE0Ljk4Ni0uMzIyQTIuNTY4IDIuNTY4IDAgMCAxIDUuNCA3LjkzM3oiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1hY3Rpb24tcHVycGxlIiBkPSJNNC41IDUuMzc1YS44NzUuODc1IDAgMSAwIDAgMS43NS44NzUuODc1IDAgMCAwIDAtMS43NXoiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1ibHVlIiBkPSJNNy4xMjUgMy42MjVhLjg3NS44NzUgMCAxIDAgMCAxLjc1Ljg3NS44NzUgMCAwIDAgMC0xLjc1eiIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWdyZWVuIiBkPSJNMTAuNjI1IDQuNWEuODc1Ljg3NSAwIDEgMCAwIDEuNzUuODc1Ljg3NSAwIDAgMCAwLTEuNzV6Ii8+PHBhdGggY2xhc3M9Imljb24tdnMteWVsbG93IiBkPSJNMTEuNSA4YS44NzUuODc1IDAgMSAwIDAgMS43NS44NzUuODc1IDAgMCAwIDAtMS43NXoiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1yZWQiIGQ9Ik05Ljc1IDEwLjYyNWEuODc1Ljg3NSAwIDEgMCAwIDEuNzUuODc1Ljg3NSAwIDAgMCAwLTEuNzV6Ii8+PC9nPjwvc3ZnPg==)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.file:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtYmd7ZmlsbDojNDI0MjQyfS5pY29uLXZzLWZne2ZpbGw6I2YwZWZmMX08L3N0eWxlPjxwYXRoIGNsYXNzPSJpY29uLWNhbnZhcy10cmFuc3BhcmVudCIgZD0iTTE2IDE2SDBWMGgxNnYxNnoiIGlkPSJjYW52YXMiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1vdXQiIGQ9Ik0xNSAxNkgyVjBoOC42MjFMMTUgNC4zNzlWMTZ6IiBpZD0ib3V0bGluZSIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWZnIiBkPSJNMTMgMTRINFYyaDV2NGg0djh6bS0zLTlWMi4yMDdMMTIuNzkzIDVIMTB6IiBpZD0iaWNvbkZnIi8+PHBhdGggY2xhc3M9Imljb24tdnMtYmciIGQ9Ik0zIDF2MTRoMTFWNC43OTNMMTAuMjA3IDFIM3ptMTAgMTNINFYyaDV2NGg0djh6bS0zLTlWMi4yMDdMMTIuNzkzIDVIMTB6IiBpZD0iaWNvbkJnIi8+PC9zdmc+)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.reference:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojZjZmNmY2fS5pY29uLXZzLW91dHtmaWxsOiNmNmY2ZjZ9Lmljb24tdnMtYmd7ZmlsbDojNDI0MjQyfS5pY29uLXZzLWZne2ZpbGw6I2YwZWZmMX0uaWNvbi12cy1hY3Rpb24tYmx1ZXtmaWxsOiMwMDUzOWN9PC9zdHlsZT48cGF0aCBjbGFzcz0iaWNvbi1jYW52YXMtdHJhbnNwYXJlbnQiIGQ9Ik0xNiAxNkgwVjBoMTZ2MTZ6IiBpZD0iY2FudmFzIi8+PHBhdGggY2xhc3M9Imljb24tdnMtb3V0IiBkPSJNMTQgNC41NTZWMTNjMCAuOTctLjcwMSAyLTIgMkg0Yy0uOTcgMC0yLS43MDEtMi0yVjYuNjQ5QTMuNDk1IDMuNDk1IDAgMCAxIDAgMy41QzAgMS41NyAxLjU3IDAgMy41IDBINXYxaDUuMDYxTDE0IDQuNTU2eiIgaWQ9Im91dGxpbmUiIHN0eWxlPSJkaXNwbGF5OiBub25lOyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWJnIiBkPSJNMTMgNXY4cy0uMDM1IDEtMS4wMzUgMWgtOFMzIDE0IDMgMTNWOWgxdjRoOFY2SDkuMzk3bC41MTctLjUyTDkgNC41NzJWM0g3LjQxOUw2LjQxMyAyaDMuMjI4TDEzIDV6IiBpZD0iaWNvbkJnIi8+PHBhdGggY2xhc3M9Imljb24tdnMtZmciIGQ9Ik03LjQxOSAzSDl2MS41NzJMNy40MTkgM3ptMS45NzggM0w2LjQxNiA5SDR2NGg4VjZIOS4zOTd6IiBpZD0iaWNvbkZnIiBzdHlsZT0iZGlzcGxheTogbm9uZTsiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1hY3Rpb24tYmx1ZSIgZD0iTTUuOTg4IDZIMy41YTIuNSAyLjUgMCAxIDEgMC01SDR2MWgtLjVDMi42NzMgMiAyIDIuNjczIDIgMy41UzIuNjczIDUgMy41IDVoMi41MTNMNCAzaDJsMi41IDIuNDg0TDYgOEg0bDEuOTg4LTJ6IiBpZD0iY29sb3JBY3Rpb24iLz48L3N2Zz4=)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.snippet:before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnNDY5NCIKICAgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE0NzA1Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzNDcwMyIgLz4KICA8c3R5bGUKICAgICBpZD0ic3R5bGU0Njk2Ij4uaWNvbi1jYW52YXMtdHJhbnNwYXJlbnR7b3BhY2l0eTowO2ZpbGw6I2Y2ZjZmNn0uaWNvbi12cy1vdXR7ZmlsbDojZjZmNmY2fS5pY29uLXZzLWFjdGlvbi1vcmFuZ2V7ZmlsbDojYzI3ZDFhfTwvc3R5bGU+CiAgPGcKICAgICBpZD0iZzQ3MDciCiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwxLjMzMzMzMzMsLTI0NS45OTk5OSwtNS4zMzMzMzMpIj4KICAgIDxwYXRoCiAgICAgICBkPSJtIDE4NSw0IDExLDAgMCwxMiAtMTEsMCB6IgogICAgICAgaWQ9InBhdGg0NTM0IgogICAgICAgc3R5bGU9ImZpbGw6I2Y2ZjZmNiIgLz4KICAgIDxwYXRoCiAgICAgICBkPSJtIDE5NCwxMyAwLC03IC03LDAgMCw3IC0xLDAgMCwtOCA5LDAgMCw4IC0xLDAgeiBtIC03LDIgLTEsMCAwLC0xIDEsMCAwLDEgeiBtIDIsLTEgLTEsMCAwLDEgMSwwIDAsLTEgeiBtIDIsMCAtMSwwIDAsMSAxLDAgMCwtMSB6IG0gMiwxIC0xLDAgMCwtMSAxLDAgMCwxIHogbSAyLC0xIC0xLDAgMCwxIDEsMCAwLC0xIHoiCiAgICAgICBpZD0icGF0aDQ1MzYiCiAgICAgICBzdHlsZT0iZmlsbDojNDI0MjQyIiAvPgogICAgPHBhdGgKICAgICAgIGQ9Im0gMTg3LDEzIDAsLTcgNywwIDAsNyAtNywwIHoiCiAgICAgICBpZD0icGF0aDQ1MzgiCiAgICAgICBzdHlsZT0iZmlsbDojZjBlZmYxIiAvPgogIDwvZz4KICA8cGF0aAogICAgIGlkPSJjYW52YXMiCiAgICAgZD0iTTE2IDE2SDBWMGgxNnYxNnoiCiAgICAgY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiAvPgo8L3N2Zz4K)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.customcolor:before{background-image:none}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.folder:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uaWNvbi1jYW52YXMtdHJhbnNwYXJlbnR7b3BhY2l0eTowO2ZpbGw6I0Y2RjZGNjt9IC5pY29uLXZzLW91dHtvcGFjaXR5OjA7ZmlsbDojRjZGNkY2O30gLmljb24tdnMtZmd7ZmlsbDojRjBFRkYxO30gLmljb24tZm9sZGVye2ZpbGw6IzY1NjU2NTt9PC9zdHlsZT48cGF0aCBjbGFzcz0iaWNvbi1jYW52YXMtdHJhbnNwYXJlbnQiIGQ9Ik0xNiAxNmgtMTZ2LTE2aDE2djE2eiIgaWQ9ImNhbnZhcyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTE2IDIuNXYxMGMwIC44MjctLjY3MyAxLjUtMS41IDEuNWgtMTEuOTk2Yy0uODI3IDAtMS41LS42NzMtMS41LTEuNXYtOGMwLS44MjcuNjczLTEuNSAxLjUtMS41aDIuODg2bDEtMmg4LjExYy44MjcgMCAxLjUuNjczIDEuNSAxLjV6IiBpZD0ib3V0bGluZSIvPjxwYXRoIGNsYXNzPSJpY29uLWZvbGRlciIgZD0iTTE0LjUgMmgtNy40OTJsLTEgMmgtMy41MDRjLS4yNzcgMC0uNS4yMjQtLjUuNXY4YzAgLjI3Ni4yMjMuNS41LjVoMTEuOTk2Yy4yNzUgMCAuNS0uMjI0LjUtLjV2LTEwYzAtLjI3Ni0uMjI1LS41LS41LS41em0tLjQ5NiAyaC02LjQ5NmwuNS0xaDUuOTk2djF6IiBpZD0iaWNvbkJnIi8+PHBhdGggY2xhc3M9Imljb24tdnMtZmciIGQ9Ik0xNCAzdjFoLTYuNWwuNS0xaDZ6IiBpZD0iaWNvbkZnIi8+PC9zdmc+)}.monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon.customcolor .colorspan{margin:0 0 0 .3em;border:.1em solid #000;width:.7em;height:.7em;display:inline-block}.monaco-editor .suggest-widget .details{display:flex;flex-direction:column;cursor:default}.monaco-editor .suggest-widget .details.no-docs{display:none}.monaco-editor .suggest-widget.docs-below .details{border-top-width:0}.monaco-editor .suggest-widget .details>.monaco-scrollable-element{flex:1}.monaco-editor .suggest-widget .details>.monaco-scrollable-element>.body{position:absolute;box-sizing:border-box;height:100%;width:100%}.monaco-editor .suggest-widget .details>.monaco-scrollable-element>.body>.header>.type{flex:2;overflow:hidden;text-overflow:ellipsis;opacity:.7;word-break:break-all;margin:0;padding:4px 0 12px 5px}.monaco-editor .suggest-widget .details>.monaco-scrollable-element>.body>.docs{margin:0;padding:4px 5px;white-space:pre-wrap}.monaco-editor .suggest-widget .details>.monaco-scrollable-element>.body>.docs.markdown-docs{padding:0;white-space:normal}.monaco-editor .suggest-widget .details>.monaco-scrollable-element>.body>.docs.markdown-docs>div,.monaco-editor .suggest-widget .details>.monaco-scrollable-element>.body>.docs.markdown-docs>span:not(:empty){padding:4px 5px}.monaco-editor .suggest-widget .details>.monaco-scrollable-element>.body>.docs.markdown-docs>div>p:first-child{margin-top:0}.monaco-editor .suggest-widget .details>.monaco-scrollable-element>.body>.docs.markdown-docs>div>p:last-child{margin-bottom:0}.monaco-editor .suggest-widget .details>.monaco-scrollable-element>.body>.docs .code{white-space:pre-wrap;word-wrap:break-word}.monaco-editor .suggest-widget .details>.monaco-scrollable-element>.body>p:empty{display:none}.monaco-editor .suggest-widget .details code{border-radius:3px;padding:0 .4em}.monaco-editor.hc-black .suggest-widget .details>.monaco-scrollable-element>.body>.header>.close,.monaco-editor.vs-dark .suggest-widget .details>.monaco-scrollable-element>.body>.header>.close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMyAzIDE2IDE2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMgMyAxNiAxNiI+PHBvbHlnb24gZmlsbD0iI2U4ZThlOCIgcG9pbnRzPSIxMi41OTcsMTEuMDQyIDE1LjQsMTMuODQ1IDEzLjg0NCwxNS40IDExLjA0MiwxMi41OTggOC4yMzksMTUuNCA2LjY4MywxMy44NDUgOS40ODUsMTEuMDQyIDYuNjgzLDguMjM5IDguMjM4LDYuNjgzIDExLjA0Miw5LjQ4NiAxMy44NDUsNi42ODMgMTUuNCw4LjIzOSIvPjwvc3ZnPg==)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtYmd7ZmlsbDojYzVjNWM1fTwvc3R5bGU+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYgMTZIMFYwaDE2djE2eiIgaWQ9ImNhbnZhcyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTE2IDEwYzAgMi4yMDUtMS43OTQgNC00IDQtMS44NTggMC0zLjQxMS0xLjI3OS0zLjg1OC0zaC0uOTc4bDIuMzE4IDRIMHYtMS43MDNsMi0zLjQwOFYwaDExdjYuMTQyYzEuNzIxLjQ0NyAzIDIgMyAzLjg1OHoiIGlkPSJvdXRsaW5lIi8+PHBhdGggY2xhc3M9Imljb24tdnMtYmciIGQ9Ik0xMiAxdjQuNzVBNC4yNTUgNC4yNTUgMCAwIDAgNy43NSAxMGgtLjczMkw0LjI3NSA1LjI2OSAzIDcuNDQyVjFoOXpNNy43NDcgMTRMNC4yNjkgOCAuNzQ4IDE0aDYuOTk5ek0xNSAxMGEzIDMgMCAxIDEtNiAwIDMgMyAwIDAgMSA2IDB6IiBpZD0iaWNvbkJnIi8+PC9zdmc+)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.constructor:before,.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.function:before,.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.method:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.constructor:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.function:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.method:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtZmd7ZmlsbDojMmIyODJlfS5pY29uLXZzLWFjdGlvbi1wdXJwbGV7ZmlsbDojYjE4MGQ3fTwvc3R5bGU+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYgMTZIMFYwaDE2djE2eiIgaWQ9ImNhbnZhcyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTE1IDMuMzQ5djguNDAzTDguOTc1IDE2SDguMDdMMSAxMS41ODJWMy4zMjdMNy41OTUgMGgxLjExOEwxNSAzLjM0OXoiIGlkPSJvdXRsaW5lIi8+PHBhdGggY2xhc3M9Imljb24tdnMtZmciIGQ9Ik0xMi43MTUgNC4zOThMOC40ODcgNy4wMiAzLjU2NSA0LjI3Mmw0LjU3OC0yLjMwOSA0LjU3MiAyLjQzNXpNMyA1LjEwMmw1IDIuNzkydjUuNzA1bC01LTMuMTI1VjUuMTAyem02IDguNDM0VjcuODc4bDQtMi40OHY1LjMxN2wtNCAyLjgyMXoiIGlkPSJpY29uRmciLz48cGF0aCBjbGFzcz0iaWNvbi12cy1hY3Rpb24tcHVycGxlIiBkPSJNOC4xNTYuODM3TDIgMy45NDJ2Ny4wODVMOC41MTcgMTUuMSAxNCAxMS4yMzNWMy45NUw4LjE1Ni44Mzd6bTQuNTU5IDMuNTYxTDguNDg3IDcuMDIgMy41NjUgNC4yNzJsNC41NzgtMi4zMDkgNC41NzIgMi40MzV6TTMgNS4xMDJsNSAyLjc5MnY1LjcwNWwtNS0zLjEyNVY1LjEwMnptNiA4LjQzNFY3Ljg3OGw0LTIuNDh2NS4zMTdsLTQgMi44MjF6IiBpZD0iaWNvbkJnIi8+PC9zdmc+)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.field:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.field:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtZmd7ZmlsbDojMmIyODJlfS5pY29uLXZzLWFjdGlvbi1ibHVle2ZpbGw6Izc1YmVmZn08L3N0eWxlPjxwYXRoIGNsYXNzPSJpY29uLWNhbnZhcy10cmFuc3BhcmVudCIgZD0iTTE2IDE2SDBWMGgxNnYxNnoiIGlkPSJjYW52YXMiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1vdXQiIGQ9Ik0wIDEwLjczNlY0LjVMOSAwbDcgMy41djYuMjM2bC05IDQuNS03LTMuNXoiIGlkPSJvdXRsaW5lIi8+PHBhdGggY2xhc3M9Imljb24tdnMtYWN0aW9uLWJsdWUiIGQ9Ik05IDFMMSA1djVsNiAzIDgtNFY0TDkgMXpNNyA2Ljg4MkwzLjIzNiA1IDkgMi4xMTggMTIuNzY0IDQgNyA2Ljg4MnoiIGlkPSJpY29uQmciLz48cGF0aCBjbGFzcz0iaWNvbi12cy1mZyIgZD0iTTkgMi4xMThMMTIuNzY0IDQgNyA2Ljg4MiAzLjIzNiA1IDkgMi4xMTh6IiBpZD0iaWNvbkZnIi8+PC9zdmc+)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.event:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.event:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtYWN0aW9uLW9yYW5nZXtmaWxsOiNlOGFiNTN9PC9zdHlsZT48cGF0aCBjbGFzcz0iaWNvbi1jYW52YXMtdHJhbnNwYXJlbnQiIGQ9Ik0xNiAxNkgwVjBoMTZ2MTZ6IiBpZD0iY2FudmFzIi8+PHBhdGggY2xhc3M9Imljb24tdnMtb3V0IiBkPSJNMTQgMS40MTRMOS40MTQgNkgxNHYxLjQxNEw1LjQxNCAxNkgzdi0xLjIzNEw1LjM3MSAxMEgyVjguNzY0TDYuMzgyIDBIMTR2MS40MTR6IiBpZD0ib3V0bGluZSIgc3R5bGU9ImRpc3BsYXk6IG5vbmU7Ii8+PHBhdGggY2xhc3M9Imljb24tdnMtYWN0aW9uLW9yYW5nZSIgZD0iTTcgN2g2bC04IDhINGwyLjk4NS02SDNsNC04aDZMNyA3eiIgaWQ9Imljb25CZyIvPjwvc3ZnPg==)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.operator:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.operator:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtZmd7ZmlsbDojMmIyODJlfS5pY29uLXZzLWFjdGlvbi1ibHVle2ZpbGw6Izc1YmVmZn08L3N0eWxlPjxwYXRoIGNsYXNzPSJpY29uLWNhbnZhcy10cmFuc3BhcmVudCIgZD0iTTE2IDE2SDBWMGgxNnYxNnoiIGlkPSJjYW52YXMiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1vdXQiIGQ9Ik0xNiAxNkgwVjBoMTZ2MTZ6IiBpZD0ib3V0bGluZSIgc3R5bGU9ImRpc3BsYXk6IG5vbmU7Ii8+PHBhdGggY2xhc3M9Imljb24tdnMtYWN0aW9uLWJsdWUiIGQ9Ik0xIDF2MTRoMTRWMUgxem02IDEySDN2LTFoNHYxem0wLTNIM1Y5aDR2MXptMC01SDV2Mkg0VjVIMlY0aDJWMmgxdjJoMnYxem0zLjI4MSA4SDguNzE5bDMtNGgxLjU2M2wtMy4wMDEgNHpNMTQgNUg5VjRoNXYxeiIgaWQ9Imljb25CZyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWZnIiBkPSJNNyA1SDV2Mkg0VjVIMlY0aDJWMmgxdjJoMnYxem03LTFIOXYxaDVWNHpNNyA5SDN2MWg0Vjl6bTAgM0gzdjFoNHYtMXptMy4yODEgMWwzLTRoLTEuNTYzbC0zIDRoMS41NjN6IiBpZD0iaWNvbkZnIiBzdHlsZT0iZGlzcGxheTogbm9uZTsiLz48L3N2Zz4=)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.variable:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.variable:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtYmd7ZmlsbDojYzVjNWM1fS5pY29uLXZzLWZne2ZpbGw6IzJiMjgyZX0uaWNvbi12cy1hY3Rpb24tYmx1ZXtmaWxsOiM3NWJlZmZ9PC9zdHlsZT48cGF0aCBjbGFzcz0iaWNvbi1jYW52YXMtdHJhbnNwYXJlbnQiIGQ9Ik0xNiAxNkgwVjBoMTZ2MTZ6IiBpZD0iY2FudmFzIi8+PHBhdGggY2xhc3M9Imljb24tdnMtb3V0IiBkPSJNMTEgM3YxLjAxNUw4LjczMyAyLjg4MiA1IDQuNzQ5VjNIMHYxMGg1di0xLjg1OWwyLjE1NiAxLjA3N0wxMSAxMC4yOTVWMTNoNVYzaC01eiIgaWQ9Im91dGxpbmUiIHN0eWxlPSJkaXNwbGF5OiBub25lOyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWJnIiBkPSJNMiA1djZoMnYxSDFWNGgzdjFIMnptMTAgNnYxaDNWNGgtM3YxaDJ2NmgtMnoiIGlkPSJpY29uQmciLz48cGF0aCBjbGFzcz0iaWNvbi12cy1mZyIgZD0iTTcuMTU2IDcuMTU2bC0xLjU3OC0uNzg5IDMuMTU2LTEuNTc4IDEuNTc4Ljc4OS0zLjE1NiAxLjU3OHoiIGlkPSJpY29uRmciIHN0eWxlPSJkaXNwbGF5OiBub25lOyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWFjdGlvbi1ibHVlIiBkPSJNOC43MzMgNEw0IDYuMzY3djMuMTU2TDcuMTU2IDExLjFsNC43MzMtMi4zNjdWNS41NzhMOC43MzMgNHpNNy4xNTYgNy4xNTZsLTEuNTc4LS43ODkgMy4xNTYtMS41NzggMS41NzguNzg5LTMuMTU2IDEuNTc4eiIgaWQ9ImNvbG9ySW1wb3J0YW5jZSIvPjwvc3ZnPg==)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.class:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.class:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtYWN0aW9uLW9yYW5nZXtmaWxsOiNlOGFiNTN9PC9zdHlsZT48cGF0aCBjbGFzcz0iaWNvbi1jYW52YXMtdHJhbnNwYXJlbnQiIGQ9Ik0xNiAxNkgwVjBoMTZ2MTZ6IiBpZD0iY2FudmFzIi8+PHBhdGggY2xhc3M9Imljb24tdnMtb3V0IiBkPSJNMTYgNi41ODZsLTMtM0wxMS41ODYgNUg5LjQxNGwxLTEtNC00aC0uODI4TDAgNS41ODZ2LjgyOGw0IDRMNi40MTQgOEg3djVoMS41ODZsMyAzaC44MjhMMTYgMTIuNDE0di0uODI4TDEzLjkxNCA5LjUgMTYgNy40MTR2LS44Mjh6IiBpZD0ib3V0bGluZSIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWFjdGlvbi1vcmFuZ2UiIGQ9Ik0xMyAxMGwyIDItMyAzLTItMiAxLTFIOFY3SDZMNCA5IDEgNmw1LTUgMyAzLTIgMmg1bDEtMSAyIDItMyAzLTItMiAxLTFIOXY0bDIuOTk5LjAwMkwxMyAxMHoiIGlkPSJpY29uQmciLz48L3N2Zz4=)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.interface:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.interface:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtZmd7ZmlsbDojMmIyODJlfS5pY29uLXZzLWFjdGlvbi1ibHVle2ZpbGw6Izc1YmVmZn08L3N0eWxlPjxwYXRoIGNsYXNzPSJpY29uLWNhbnZhcy10cmFuc3BhcmVudCIgZD0iTTE2IDE2SDBWMGgxNnYxNnoiIGlkPSJjYW52YXMiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1vdXQiIGQ9Ik0xMS41IDEyYy0xLjkxNSAwLTMuNjAyLTEuMjQxLTQuMjI4LTNoLTEuNDFhMy4xMSAzLjExIDAgMCAxLTIuNzM3IDEuNjI1QzEuNDAyIDEwLjYyNSAwIDkuMjIzIDAgNy41czEuNDAyLTMuMTI1IDMuMTI1LTMuMTI1YzEuMTY1IDAgMi4yMDEuNjM5IDIuNzM3IDEuNjI1aDEuNDFjLjYyNi0xLjc1OSAyLjMxMy0zIDQuMjI4LTNDMTMuOTgxIDMgMTYgNS4wMTkgMTYgNy41UzEzLjk4MSAxMiAxMS41IDEyeiIgaWQ9Im91dGxpbmUiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1mZyIgZD0iTTExLjUgOUExLjUwMSAxLjUwMSAwIDEgMSAxMyA3LjVjMCAuODI2LS42NzMgMS41LTEuNSAxLjV6IiBpZD0iaWNvbkZnIi8+PHBhdGggY2xhc3M9Imljb24tdnMtYWN0aW9uLWJsdWUiIGQ9Ik0xMS41IDRhMy40OSAzLjQ5IDAgMCAwLTMuNDUgM0g1LjE4NUEyLjEyMiAyLjEyMiAwIDAgMCAxIDcuNWEyLjEyMyAyLjEyMyAwIDEgMCA0LjE4NS41SDguMDVhMy40OSAzLjQ5IDAgMCAwIDMuNDUgMyAzLjUgMy41IDAgMSAwIDAtN3ptMCA1Yy0uODI3IDAtMS41LS42NzMtMS41LTEuNVMxMC42NzMgNiAxMS41IDZzMS41LjY3MyAxLjUgMS41UzEyLjMyNyA5IDExLjUgOXoiIGlkPSJpY29uQmciLz48L3N2Zz4=)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.struct:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.struct:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtYWN0aW9uLWJsdWV7ZmlsbDojNzViZWZmfTwvc3R5bGU+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYgMTZIMFYwaDE2djE2eiIgaWQ9ImNhbnZhcyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTkgMTRWOEg3djZIMVYyaDE0djEySDl6IiBpZD0ib3V0bGluZSIgc3R5bGU9ImRpc3BsYXk6IG5vbmU7Ii8+PHBhdGggY2xhc3M9Imljb24tdnMtYWN0aW9uLWJsdWUiIGQ9Ik0xMCA5aDR2NGgtNFY5em0tOCA0aDRWOUgydjR6TTIgM3Y0aDEyVjNIMnoiIGlkPSJpY29uQmciLz48L3N2Zz4=)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.type-parameter:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.type-parameter:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtYmd7ZmlsbDojYzVjNWM1fTwvc3R5bGU+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYgMTZIMFYwaDE2djE2eiIgaWQ9ImNhbnZhcyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTEwLjcwMiAxMC41bDItMi0yLTIgLjUtLjVIMTB2NWgxdjNINXYtM2gxVjZINC43OThsLjUuNS0yIDIgMiAyTDMgMTIuNzk3bC0zLTNWNy4yMDFsMy0zVjJoMTB2Mi4yMDFsMyAzdjIuNTk2bC0zIDMtMi4yOTgtMi4yOTd6IiBpZD0ib3V0bGluZSIgc3R5bGU9ImRpc3BsYXk6IG5vbmU7Ii8+PHBhdGggY2xhc3M9Imljb24tdnMtYmciIGQ9Ik00IDNoOHYyaC0xdi0uNWMwLS4yNzctLjIyNC0uNS0uNS0uNUg5djcuNWMwIC4yNzUuMjI0LjUuNS41aC41djFINnYtMWguNWEuNS41IDAgMCAwIC41LS41VjRINS41YS41LjUgMCAwIDAtLjUuNVY1SDRWM3pNMyA1LjYxNUwuMTE2IDguNSAzIDExLjM4M2wuODg0LS44ODMtMi0yIDItMkwzIDUuNjE1em0xMCAwbC0uODg0Ljg4NSAyIDItMiAyIC44ODQuODgzTDE1Ljg4NCA4LjUgMTMgNS42MTV6IiBpZD0iaWNvbkJnIi8+PC9zdmc+)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.module:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.module:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtYmd7ZmlsbDojYzVjNWM1fTwvc3R5bGU+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYgMTZIMFYwaDE2djE2eiIgaWQ9ImNhbnZhcyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTkuMjYgMTEuOTg0bC45NzgtLjAyMWEuOTYyLjk2MiAwIDAgMCAuMDktLjAwNmMuMDExLS4wNjMuMDI2LS4xNzkuMDI2LS4zNjFWOS42ODhjMC0uNjc5LjE4NS0xLjI1Ny41My0xLjcwNy0uMzQ2LS40NTItLjUzLTEuMDMtLjUzLTEuNzA1VjQuMzVjMC0uMTY3LS4wMjEtLjI1OS0uMDM0LS4zMDJMOS4yNiA0LjAyVi45NzNsMS4wMTEuMDExYzIuMTY3LjAyNCAzLjQwOSAxLjE1NiAzLjQwOSAzLjEwNXYxLjk2MmMwIC4zNTEuMDcxLjQ2MS4wNzIuNDYybC45MzYuMDYuMDUzLjkyN3YxLjkzNmwtLjkzNi4wNjFjLS4wNzYuMDE2LS4xMjUuMTQ2LS4xMjUuNDI0djIuMDE3YzAgLjkxNC0uMzMyIDMuMDQzLTMuNDA4IDMuMDc4bC0xLjAxMi4wMTF2LTMuMDQzem0tMy41MjEgMy4wMzJjLTMuMDg5LS4wMzUtMy40MjItMi4xNjQtMy40MjItMy4wNzhWOS45MjFjMC0uMzI3LS4wNjYtLjQzMi0uMDY3LS40MzNsLS45MzctLjA2LS4wNjMtLjkyOVY2LjU2M2wuOTQyLS4wNmMuMDU4IDAgLjEyNS0uMTE0LjEyNS0uNDUyVjQuMDljMC0xLjk0OSAxLjI0OC0zLjA4MSAzLjQyMi0zLjEwNUw2Ljc1Ljk3M1Y0LjAybC0uOTc1LjAyM2EuNTcyLjU3MiAwIDAgMC0uMDkzLjAxYy4wMDYuMDIxLS4wMTkuMTE1LS4wMTkuMjk3djEuOTI4YzAgLjY3NS0uMTg2IDEuMjUzLS41MzQgMS43MDUuMzQ4LjQ1LjUzNCAxLjAyOC41MzQgMS43MDd2MS45MDdjMCAuMTc1LjAxNC4yOTEuMDI3LjM2My4wMjMuMDAyIDEuMDYuMDI1IDEuMDYuMDI1djMuMDQzbC0xLjAxMS0uMDEyeiIgaWQ9Im91dGxpbmUiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1iZyIgZD0iTTUuNzUgMTQuMDE2Yy0xLjYyMy0uMDE5LTIuNDM0LS43MTEtMi40MzQtMi4wNzhWOS45MjFjMC0uOTAyLS4zNTUtMS4zNzYtMS4wNjYtMS40MjJ2LS45OThjLjcxMS0uMDQ1IDEuMDY2LS41MjkgMS4wNjYtMS40NDlWNC4wOWMwLTEuMzg1LjgxMS0yLjA4NyAyLjQzNC0yLjEwNXYxLjA2Yy0uNzI1LjAxNy0xLjA4Ny40NTMtMS4wODcgMS4zMDV2MS45MjhjMCAuOTItLjQ1NCAxLjQ4OC0xLjM2IDEuNzAyVjhjLjkwNy4yMDEgMS4zNi43NjMgMS4zNiAxLjY4OHYxLjkwN2MwIC40ODguMDgxLjgzNS4yNDMgMS4wNDIuMTYyLjIwOC40NDMuMzE2Ljg0NC4zMjV2MS4wNTR6bTcuOTktNS41MTdjLS43MDYuMDQ1LTEuMDYuNTItMS4wNiAxLjQyMnYyLjAxN2MwIDEuMzY3LS44MDcgMi4wNi0yLjQyIDIuMDc4di0xLjA1M2MuMzk2LS4wMDkuNjc4LS4xMTguODQ0LS4zMjguMTY3LS4yMS4yNS0uNTU2LjI1LTEuMDM5VjkuNjg4YzAtLjkyNS40NDktMS40ODggMS4zNDctMS42ODh2LS4wMjFjLS44OTgtLjIxNC0xLjM0Ny0uNzgyLTEuMzQ3LTEuNzAyVjQuMzVjMC0uODUyLS4zNjQtMS4yODgtMS4wOTQtMS4zMDZ2LTEuMDZjMS42MTMuMDE4IDIuNDIuNzIgMi40MiAyLjEwNXYxLjk2MmMwIC45Mi4zNTQgMS40MDQgMS4wNiAxLjQ0OXYuOTk5eiIgaWQ9Imljb25CZyIvPjwvc3ZnPg==)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.property:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.property:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtYmd7ZmlsbDojYzVjNWM1fTwvc3R5bGU+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYgMTZIMFYwaDE2djE2eiIgaWQ9ImNhbnZhcyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTE2IDUuNWE1LjUgNS41IDAgMCAxLTUuNSA1LjVjLS4yNzUgMC0uNTQzLS4wMjctLjgwNy0uMDY2bC0uMDc5LS4wMTJhNS40MjkgNS40MjkgMCAwIDEtLjgxLS4xOTJsLTQuNTM3IDQuNTM3Yy0uNDcyLjQ3My0xLjEuNzMzLTEuNzY3LjczM3MtMS4yOTUtLjI2LTEuNzY4LS43MzJhMi41MDIgMi41MDIgMCAwIDEgMC0zLjUzNWw0LjUzNy00LjUzN2E1LjQ1MiA1LjQ1MiAwIDAgMS0uMTkxLS44MTJjLS4wMDUtLjAyNS0uMDA4LS4wNTEtLjAxMi0uMDc3QTUuNTAzIDUuNTAzIDAgMCAxIDUgNS41YTUuNSA1LjUgMCAxIDEgMTEgMHoiIGlkPSJvdXRsaW5lIi8+PHBhdGggY2xhc3M9Imljb24tdnMtYmciIGQ9Ik0xNSA1LjVhNC41IDQuNSAwIDAgMS00LjUgNC41Yy0uNjkzIDAtMS4zNDItLjE3LTEuOTI5LS40NWwtNS4wMSA1LjAxYy0uMjkzLjI5NC0uNjc3LjQ0LTEuMDYxLjQ0cy0uNzY4LS4xNDYtMS4wNjEtLjQzOWExLjUgMS41IDAgMCAxIDAtMi4xMjFsNS4wMS01LjAxQTQuNDgzIDQuNDgzIDAgMCAxIDYgNS41IDQuNSA0LjUgMCAwIDEgMTAuNSAxYy42OTMgMCAxLjM0Mi4xNyAxLjkyOS40NUw5LjYzNiA0LjI0M2wyLjEyMSAyLjEyMSAyLjc5My0yLjc5M2MuMjguNTg3LjQ1IDEuMjM2LjQ1IDEuOTI5eiIgaWQ9Imljb25CZyIvPjwvc3ZnPg==)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.unit:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.unit:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtYmd7ZmlsbDojYzVjNWM1fS5pY29uLXZzLWZne2ZpbGw6IzJiMjgyZX08L3N0eWxlPjxwYXRoIGNsYXNzPSJpY29uLWNhbnZhcy10cmFuc3BhcmVudCIgZD0iTTE2IDE2SDBWMGgxNnYxNnoiIGlkPSJjYW52YXMiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1vdXQiIGQ9Ik0xNiAxMS4wMTNIMVY0aDE1djcuMDEzeiIgaWQ9Im91dGxpbmUiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1mZyIgZD0iTTggOUg3VjZoM3YzSDlWN0g4djJ6TTQgN2gxdjJoMVY2SDN2M2gxVjd6bTggMGgxdjJoMVY2aC0zdjNoMVY3eiIgaWQ9Imljb25GZyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWJnIiBkPSJNMiA1djVoMTNWNUgyem00IDRINVY3SDR2MkgzVjZoM3Yzem00IDBIOVY3SDh2Mkg3VjZoM3Yzem00IDBoLTFWN2gtMXYyaC0xVjZoM3YzeiIgaWQ9Imljb25CZyIvPjwvc3ZnPg==)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.constant:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.constant:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMjUyNTI2fS5pY29uLXZzLW91dHtmaWxsOiMyNTI1MjZ9Lmljb24tdnMtYmd7ZmlsbDojYzVjNWM1fS5pY29uLXZzLWZne2ZpbGw6IzJiMjgyZX0uaWNvbi12cy1hY3Rpb24tYmx1ZXtmaWxsOiM3NWJlZmZ9PC9zdHlsZT48cGF0aCBjbGFzcz0iaWNvbi1jYW52YXMtdHJhbnNwYXJlbnQiIGQ9Ik0xNiAxNkgwVjBoMTZ2MTZ6IiBpZD0iY2FudmFzIi8+PHBhdGggY2xhc3M9Imljb24tdnMtb3V0IiBkPSJNMi44NzkgMTRMMSAxMi4xMjFWMy44NzlMMi44NzkgMmgxMC4yNDJMMTUgMy44Nzl2OC4yNDJMMTMuMTIxIDE0SDIuODc5eiIgaWQ9Im91dGxpbmUiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1mZyIgZD0iTTEyLjI5MyA0SDMuNzA3TDMgNC43MDd2Ni41ODZsLjcwNy43MDdoOC41ODZsLjcwNy0uNzA3VjQuNzA3TDEyLjI5MyA0ek0xMSAxMEg1VjloNnYxem0wLTNINVY2aDZ2MXoiIGlkPSJpY29uRmciLz48ZyBpZD0iaWNvbkJnIj48cGF0aCBjbGFzcz0iaWNvbi12cy1iZyIgZD0iTTEyLjcwNyAxM0gzLjI5M0wyIDExLjcwN1Y0LjI5M0wzLjI5MyAzaDkuNDE0TDE0IDQuMjkzdjcuNDE0TDEyLjcwNyAxM3ptLTktMWg4LjU4NmwuNzA3LS43MDdWNC43MDdMMTIuMjkzIDRIMy43MDdMMyA0LjcwN3Y2LjU4NmwuNzA3LjcwN3oiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1hY3Rpb24tYmx1ZSIgZD0iTTExIDdINVY2aDZ2MXptMCAySDV2MWg2Vjl6Ii8+PC9nPjwvc3ZnPg==)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.enum:before,.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.value:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.enum:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.value:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtZmd7ZmlsbDojMmIyODJlfS5pY29uLXZzLWFjdGlvbi1vcmFuZ2V7ZmlsbDojZThhYjUzfTwvc3R5bGU+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYgMTZIMFYwaDE2djE2eiIgaWQ9ImNhbnZhcyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTE0LjQxNCAxTDE2IDIuNTg2djUuODI4TDE0LjQxNCAxMEgxMHYzLjQxNkw4LjQxNCAxNUgxLjU4NkwwIDEzLjQxNnYtNS44M0wxLjU4NiA2SDZWMi41ODZMNy41ODYgMWg2LjgyOHoiIGlkPSJvdXRsaW5lIi8+PHBhdGggY2xhc3M9Imljb24tdnMtZmciIGQ9Ik0yIDEzaDZWOEgydjV6bTEtNGg0djFIM1Y5em0wIDJoNHYxSDN2LTF6bTExLTVWM0g4djNoLjQxNEw5IDYuNTg2VjZoNHYxSDkuNDE0bC41ODYuNTg2VjhoNFY2em0tMS0xSDlWNGg0djF6IiBpZD0iaWNvbkZnIi8+PHBhdGggY2xhc3M9Imljb24tdnMtYWN0aW9uLW9yYW5nZSIgZD0iTTMgMTFoNC4wMDF2MUgzdi0xem0wLTFoNC4wMDFWOUgzdjF6bTYtMnY1bC0xIDFIMmwtMS0xVjhsMS0xaDZsMSAxek04IDhIMnY1aDZWOHptMS0ybDEgMWgzVjZIOXptMC0xaDRWNEg5djF6bTUtM0g4TDcgM3YzaDFWM2g2djVoLTR2MWg0bDEtMVYzbC0xLTF6IiBpZD0iaWNvbkJnIi8+PC9zdmc+)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.enum-member:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.enum-member:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtZmd7ZmlsbDojMmIyODJlfS5pY29uLXZzLWFjdGlvbi1ibHVle2ZpbGw6Izc1YmVmZn08L3N0eWxlPjxwYXRoIGNsYXNzPSJpY29uLWNhbnZhcy10cmFuc3BhcmVudCIgZD0iTTE2IDE2SDBWMGgxNnYxNnoiIGlkPSJjYW52YXMiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1vdXQiIGQ9Ik0wIDE1VjZoNlYyLjU4Nkw3LjU4NSAxaDYuODI5TDE2IDIuNTg2djUuODI5TDE0LjQxNCAxMEgxMHY1SDB6bTMtNnoiIGlkPSJvdXRsaW5lIi8+PHBhdGggY2xhc3M9Imljb24tdnMtZmciIGQ9Ik04IDN2M2g1djFoLTN2MWg0VjNIOHptNSAySDlWNGg0djF6TTIgOHY1aDZWOEgyem01IDNIM3YtMWg0djF6IiBpZD0iaWNvbkZnIi8+PHBhdGggY2xhc3M9Imljb24tdnMtYWN0aW9uLWJsdWUiIGQ9Ik0xMCA2aDN2MWgtM1Y2ek05IDR2MWg0VjRIOXptNS0ySDhMNyAzdjNoMVYzaDZ2NWgtNHYxaDRsMS0xVjNsLTEtMXptLTcgOEgzdjFoNHYtMXptMi0zdjdIMVY3aDh6TTggOEgydjVoNlY4eiIgaWQ9Imljb25CZyIvPjwvc3ZnPg==)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.keyword:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.keyword:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtYmd7ZmlsbDojYzVjNWM1fS5pY29uLXZzLWZne2ZpbGw6IzJiMjgyZX08L3N0eWxlPjxwYXRoIGNsYXNzPSJpY29uLWNhbnZhcy10cmFuc3BhcmVudCIgZD0iTTE2IDE2SDBWMGgxNnYxNnoiIGlkPSJjYW52YXMiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1vdXQiIGQ9Ik0xNiA1VjJIOVYxSDB2MTRoMTN2LTNoM1Y5aC0xVjZIOVY1aDd6bS04IDdWOWgxdjNIOHoiIGlkPSJvdXRsaW5lIi8+PHBhdGggY2xhc3M9Imljb24tdnMtZmciIGQ9Ik0yIDNoNXYxSDJWM3oiIGlkPSJpY29uRmciLz48cGF0aCBjbGFzcz0iaWNvbi12cy1iZyIgZD0iTTE1IDRoLTVWM2g1djF6bS0xIDNoLTJ2MWgyVjd6bS00IDBIMXYxaDlWN3ptMiA2SDF2MWgxMXYtMXptLTUtM0gxdjFoNnYtMXptOCAwaC01djFoNXYtMXpNOCAydjNIMVYyaDd6TTcgM0gydjFoNVYzeiIgaWQ9Imljb25CZyIvPjwvc3ZnPg==)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.text:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.text:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtYmd7ZmlsbDojYzVjNWM1fS5pY29uLXZzLWZne2ZpbGw6IzJiMjgyZX08L3N0eWxlPjxwYXRoIGNsYXNzPSJpY29uLWNhbnZhcy10cmFuc3BhcmVudCIgZD0iTTE2IDE2SDBWMGgxNnYxNnoiIGlkPSJjYW52YXMiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1vdXQiIGQ9Ik0xNiAxNUgwVjFoMTZ2MTR6IiBpZD0ib3V0bGluZSIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWZnIiBkPSJNOS4yMjkgNy4zNTRjLjAzNS4xNDYuMDUyLjMxLjA1Mi40OTQgMCAuMjM0LS4wMi40NDEtLjA2LjYyMS0uMDM5LjE4LS4wOTUuMzI4LS4xNjguNDQ1YS42ODcuNjg3IDAgMCAxLS45MTQuMjgxLjc2Ljc2IDAgMCAxLS4yMzctLjIwNy45ODguOTg4IDAgMCAxLS4xNTQtLjMwNiAxLjI2MiAxLjI2MiAwIDAgMS0uMDU3LS4zODF2LS41MDZjMC0uMTcuMDItLjMyNi4wNjEtLjQ2NXMuMDk2LS4yNTguMTY4LS4zNTlhLjc1Ni43NTYgMCAwIDEgLjI1Ny0uMjMyYy4xLS4wNTUuMjEtLjA4Mi4zMzEtLjA4MmEuNjQ2LjY0NiAwIDAgMSAuNTcxLjMyYy4wNjcuMTA1LjExNi4yMy4xNS4zNzd6bS01LjEyNi44NjlhLjU1Ny41NTcgMCAwIDAtLjE5Ni4xMzJjLS4wNDcuMDUzLS4wOC4xMTItLjA5Ny4xOHMtLjAyOC4xNDctLjAyOC4yMzNhLjUxMy41MTMgMCAwIDAgLjE1Ny4zOS41MjguNTI4IDAgMCAwIC4xODYuMTEzLjY4Mi42ODIgMCAwIDAgLjI0Mi4wNDEuNzYuNzYgMCAwIDAgLjU5My0uMjcxLjg5Ny44OTcgMCAwIDAgLjE2NS0uMjk1Yy4wMzgtLjExMy4wNTktLjIzNC4wNTktLjM2NXYtLjM0NmwtLjc2MS4xMWExLjI5IDEuMjkgMCAwIDAtLjMyLjA3OHpNMTQgM3YxMEgyVjNoMTJ6TTUuOTYyIDcuNDY5YzAtLjIzOC0uMDI3LS40NTEtLjA4My0uNjM3YTEuMjg2IDEuMjg2IDAgMCAwLS4yNDktLjQ3MSAxLjA4IDEuMDggMCAwIDAtLjQyNC0uMjk1IDEuNjQ0IDEuNjQ0IDAgMCAwLS42MDgtLjEwMWMtLjExOSAwLS4yNDEuMDEyLS4zNjguMDMzYTMuMjEzIDMuMjEzIDAgMCAwLS42NzMuMTk1IDEuMzEzIDEuMzEzIDAgMCAwLS4yMTIuMTE0di43NjhjLjE1OC0uMTMyLjM0MS0uMjM1LjU0NC0uMzEzLjIwNC0uMDc4LjQxMy0uMTE3LjYyNy0uMTE3LjIxMyAwIC4zNzcuMDYzLjQ5NC4xODYuMTE2LjEyNS4xNzQuMzI0LjE3NC42bC0xLjAzLjE1NGMtLjIwNS4wMjYtLjM4LjA3Ny0uNTI2LjE1MWExLjA4MyAxLjA4MyAwIDAgMC0uNTYzLjY2QTEuNTYyIDEuNTYyIDAgMCAwIDMgOC44NTdjMCAuMTcuMDI1LjMyMy4wNzQuNDYzYS45NDUuOTQ1IDAgMCAwIC41NjguNTk2Yy4xMzkuMDU3LjI5Ny4wODQuNDc4LjA4NC4yMjkgMCAuNDMxLS4wNTMuNjA0LS4xNmExLjMgMS4zIDAgMCAwIC40MzktLjQ2M2guMDE0di41MjloLjc4NVY3LjQ2OXpNMTAgNy44NjFhMy41NCAzLjU0IDAgMCAwLS4wNzQtLjczNCAyLjA0NyAyLjA0NyAwIDAgMC0uMjI4LS42MTEgMS4yMDMgMS4yMDMgMCAwIDAtLjM5NC0uNDE2IDEuMDMgMS4wMyAwIDAgMC0uNTc0LS4xNTNjLS4xMjMgMC0uMjM0LjAxOC0uMzM2LjA1MWExIDEgMCAwIDAtLjI3OC4xNDcgMS4xNTMgMS4xNTMgMCAwIDAtLjIyNS4yMjIgMi4wMjIgMi4wMjIgMCAwIDAtLjE4MS4yODloLS4wMTNWNUg3djQuODg3aC42OTd2LS40ODVoLjAxM2MuMDQ0LjA4Mi4wOTUuMTU4LjE1MS4yMjkuMDU3LjA3LjExOS4xMzMuMTkxLjE4NmEuODM1LjgzNSAwIDAgMCAuMjM4LjEyMS45NDMuOTQzIDAgMCAwIC4yOTMuMDQyYy4yMyAwIC40MzQtLjA1My42MDktLjE2YTEuMzQgMS4zNCAwIDAgMCAuNDQzLS40NDNjLjEyLS4xODguMjExLS40MTIuMjcyLS42NzJBMy42MiAzLjYyIDAgMCAwIDEwIDcuODYxem0zLTEuNjU4YS43LjcgMCAwIDAtLjEwNi0uMDY2IDEuMTgzIDEuMTgzIDAgMCAwLS4xNDItLjA2MyAxLjIzMyAxLjIzMyAwIDAgMC0uMzYzLS4wNjVjLS4yMDkgMC0uMzk5LjA1MS0uNTY5LjE1YTEuMzU1IDEuMzU1IDAgMCAwLS40MzMuNDI0Yy0uMTE4LjE4Mi0uMjEuNDAyLS4yNzMuNjZhMy42MyAzLjYzIDAgMCAwLS4wMDggMS42MTVjLjA2LjIzLjE0My40My4yNTIuNjAyLjEwOS4xNjguMjQxLjMwMy4zOTYuMzk2YS45NzIuOTcyIDAgMCAwIC41MjQuMTQ0Yy4xNTggMCAuMjk2LS4wMjEuNDEzLS4wNjguMTE3LS4wNDUuMjE5LS4xMDguMzA5LS4xODR2LS43N2ExLjA5NCAxLjA5NCAwIDAgMS0uMjg4LjIyNS44MTkuODE5IDAgMCAxLS4xNTguMDY4LjQ4LjQ4IDAgMCAxLS4xNTMuMDI3LjYyLjYyIDAgMCAxLS4yNzQtLjA3NGMtLjI0MS0uMTM2LS40MjMtLjQ3OS0uNDIzLTEuMTQ2IDAtLjcxNS4yMDYtMS4xMi40NjktMS4zMDEuMDc3LS4wMzIuMTUzLS4wNjQuMjM4LS4wNjQuMTEzIDAgLjIyLjAyNy4zMTcuMDgyLjA5Ni4wNTcuMTg4LjEzMS4yNzIuMjIzdi0uODE1eiIgaWQ9Imljb25GZyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWJnIiBkPSJNMSAydjEyaDE0VjJIMXptMTMgMTFIMlYzaDEydjEwek01LjYzIDYuMzYxYTEuMDggMS4wOCAwIDAgMC0uNDI0LS4yOTUgMS42NDQgMS42NDQgMCAwIDAtLjYwOC0uMTAxYy0uMTE5IDAtLjI0MS4wMTItLjM2OC4wMzNhMy4yMTMgMy4yMTMgMCAwIDAtLjY3My4xOTUgMS4zMTMgMS4zMTMgMCAwIDAtLjIxMi4xMTR2Ljc2OGMuMTU4LS4xMzIuMzQxLS4yMzUuNTQ0LS4zMTMuMjA0LS4wNzguNDEzLS4xMTcuNjI3LS4xMTcuMjEzIDAgLjM3Ny4wNjMuNDk0LjE4Ni4xMTYuMTI1LjE3NC4zMjQuMTc0LjZsLTEuMDMuMTU0Yy0uMjA1LjAyNi0uMzguMDc3LS41MjYuMTUxYTEuMDgzIDEuMDgzIDAgMCAwLS41NjMuNjZBMS41NjIgMS41NjIgMCAwIDAgMyA4Ljg1N2MwIC4xNy4wMjUuMzIzLjA3NC40NjNhLjk0NS45NDUgMCAwIDAgLjU2OC41OTZjLjEzOS4wNTcuMjk3LjA4NC40NzguMDg0LjIyOSAwIC40MzEtLjA1My42MDQtLjE2YTEuMyAxLjMgMCAwIDAgLjQzOS0uNDYzaC4wMTR2LjUyOWguNzg1VjcuNDY5YzAtLjIzOC0uMDI3LS40NTEtLjA4My0uNjM3YTEuMjg2IDEuMjg2IDAgMCAwLS4yNDktLjQ3MXptLS40NDYgMi4wMmMwIC4xMzEtLjAyLjI1Mi0uMDU5LjM2NWEuODk3Ljg5NyAwIDAgMS0uMTY1LjI5NS43NTguNzU4IDAgMCAxLS41OTMuMjcyLjY4Mi42ODIgMCAwIDEtLjI0Mi0uMDQxLjUwNy41MDcgMCAwIDEtLjMwMi0uMjg2LjU4My41ODMgMCAwIDEtLjA0MS0uMjE4YzAtLjA4Ni4wMS0uMTY0LjAyNy0uMjMycy4wNTEtLjEyNy4wOTgtLjE4YS41NDYuNTQ2IDAgMCAxIC4xOTYtLjEzM2MuMDgzLS4wMzMuMTg5LS4wNjEuMzItLjA3OGwuNzYxLS4xMDl2LjM0NXptNC41MTQtMS44NjVhMS4yMDMgMS4yMDMgMCAwIDAtLjM5NC0uNDE2IDEuMDMgMS4wMyAwIDAgMC0uNTc0LS4xNTNjLS4xMjMgMC0uMjM0LjAxOC0uMzM2LjA1MWExIDEgMCAwIDAtLjI3OC4xNDcgMS4xNTMgMS4xNTMgMCAwIDAtLjIyNS4yMjIgMi4wMjIgMi4wMjIgMCAwIDAtLjE4MS4yODloLS4wMTNWNUg3djQuODg3aC42OTd2LS40ODVoLjAxM2MuMDQ0LjA4Mi4wOTUuMTU4LjE1MS4yMjkuMDU3LjA3LjExOS4xMzMuMTkxLjE4NmEuODM1LjgzNSAwIDAgMCAuMjM4LjEyMS45NDMuOTQzIDAgMCAwIC4yOTMuMDQyYy4yMyAwIC40MzQtLjA1My42MDktLjE2YTEuMzQgMS4zNCAwIDAgMCAuNDQzLS40NDNjLjEyLS4xODguMjExLS40MTIuMjcyLS42NzJBMy42MiAzLjYyIDAgMCAwIDEwIDcuODYxYTMuNTQgMy41NCAwIDAgMC0uMDc0LS43MzQgMi4wNDcgMi4wNDcgMCAwIDAtLjIyOC0uNjExem0tLjQ3NiAxLjk1M2MtLjAzOS4xOC0uMDk1LjMyOC0uMTY4LjQ0NWEuNzU1Ljc1NSAwIDAgMS0uMjY0LjI2Ni42ODcuNjg3IDAgMCAxLS42NTEuMDE1Ljc2Ljc2IDAgMCAxLS4yMzctLjIwNy45ODguOTg4IDAgMCAxLS4xNTQtLjMwNiAxLjI2MiAxLjI2MiAwIDAgMS0uMDU3LS4zODF2LS41MDZjMC0uMTcuMDItLjMyNi4wNjEtLjQ2NXMuMDk2LS4yNTguMTY4LS4zNTlhLjc1Ni43NTYgMCAwIDEgLjI1Ny0uMjMyYy4xLS4wNTUuMjEtLjA4Mi4zMzEtLjA4MmEuNjQ2LjY0NiAwIDAgMSAuNTcxLjMyYy4wNjYuMTA1LjExNi4yMy4xNS4zNzcuMDM1LjE0Ni4wNTIuMzEuMDUyLjQ5NCAwIC4yMzQtLjAxOS40NDEtLjA1OS42MjF6bTMuNjcyLTIuMzMyYS43LjcgMCAwIDEgLjEwNi4wNjZ2LjgxNGExLjE3OCAxLjE3OCAwIDAgMC0uMjczLS4yMjMuNjQ1LjY0NSAwIDAgMC0uMzE3LS4wODFjLS4wODUgMC0uMTYxLjAzMi0uMjM4LjA2NC0uMjYzLjE4MS0uNDY5LjU4Ni0uNDY5IDEuMzAxIDAgLjY2OC4xODIgMS4wMTEuNDIzIDEuMTQ2LjA4NC4wNC4xNzEuMDc0LjI3NC4wNzQuMDQ5IDAgLjEwMS0uMDEuMTUzLS4wMjdhLjg1Ni44NTYgMCAwIDAgLjE1OC0uMDY4IDEuMTYgMS4xNiAwIDAgMCAuMjg4LS4yMjV2Ljc3Yy0uMDkuMDc2LS4xOTIuMTM5LS4zMDkuMTg0YTEuMDk4IDEuMDk4IDAgMCAxLS40MTIuMDY4Ljk3NC45NzQgMCAwIDEtLjUyMy0uMTQzIDEuMjU3IDEuMjU3IDAgMCAxLS4zOTYtLjM5NiAyLjA5OCAyLjA5OCAwIDAgMS0uMjUyLS42MDIgMy4xMTggMy4xMTggMCAwIDEtLjA4OC0uNzU0YzAtLjMxNi4wMzItLjYwNC4wOTYtLjg2MS4wNjMtLjI1OC4xNTUtLjQ3OS4yNzMtLjY2LjExOS0uMTgyLjI2NS0uMzIyLjQzMy0uNDI0YTEuMTAyIDEuMTAyIDAgMCAxIDEuMDczLS4wMjN6IiBpZD0iaWNvbkJnIi8+PC9zdmc+)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.color:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.color:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtYmd7ZmlsbDojYzVjNWM1fS5pY29uLXZzLXJlZHtmaWxsOiNmNDg3NzF9Lmljb24tdnMteWVsbG93e2ZpbGw6I2ZmY2MwMH0uaWNvbi12cy1ncmVlbntmaWxsOiMzMzk5MzN9Lmljb24tdnMtYmx1ZXtmaWxsOiMxYmExZTJ9Lmljb24tdnMtYWN0aW9uLXB1cnBsZXtmaWxsOiNiMTgwZDd9Lmljb24td2hpdGV7ZmlsbDojMDAwMDAwfTwvc3R5bGU+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYgMTZIMFYwaDE2djE2eiIgaWQ9ImNhbnZhcyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLW91dCIgZD0iTTE2IDhjMCA0LjQxMS0zLjU4OSA4LTggOGEyLjgwMyAyLjgwMyAwIDAgMS0yLjgtMi44YzAtLjgzMy4yNzItMS42MjkuNzY2LTIuMjQxYS41OTYuNTk2IDAgMCAwIC4xMDEtLjM1OS42NjcuNjY3IDAgMCAwLS42NjctLjY2Ni41OC41OCAwIDAgMC0uMzU4LjEwMkEzLjU4NCAzLjU4NCAwIDAgMSAyLjggMTAuOCAyLjgwMyAyLjgwMyAwIDAgMSAwIDhjMC00LjQxMSAzLjU4OS04IDgtOHM4IDMuNTg5IDggOHoiIGlkPSJvdXRsaW5lIi8+PHBhdGggY2xhc3M9Imljb24td2hpdGUiIGQ9Ik01LjQgNy45MzNhMi42NyAyLjY3IDAgMCAxIDIuNjY3IDIuNjY2YzAgLjYwNi0uMTkzIDEuMTc5LS41NDQgMS42MTRhMS41OTkgMS41OTkgMCAwIDAtLjMyMy45ODcuOC44IDAgMCAwIC44LjhjMy4zMDkgMCA2LTIuNjkxIDYtNnMtMi42OTEtNi02LTYtNiAyLjY5MS02IDZjMCAuNDQxLjM1OS44LjguOC4zNzggMCAuNzI5LS4xMTQuOTg2LS4zMjJBMi41NjggMi41NjggMCAwIDEgNS40IDcuOTMzeiIgaWQ9Imljb25GZyIvPjxnIGlkPSJpY29uQmciPjxwYXRoIGNsYXNzPSJpY29uLXZzLWJnIiBkPSJNOCAxNWMtLjk5MiAwLTEuOC0uODA4LTEuOC0xLjggMC0uNjA2LjE5My0xLjE3OS41NDQtMS42MTMuMjA4LS4yNTkuMzIzLS42MDkuMzIzLS45ODcgMC0uOTE5LS43NDgtMS42NjYtMS42NjctMS42NjYtLjM3NyAwLS43MjguMTE1LS45ODYuMzIzQTIuNTggMi41OCAwIDAgMSAyLjggOS44QzEuODA4IDkuOCAxIDguOTkyIDEgOGMwLTMuODYgMy4xNC03IDctNyAzLjg1OSAwIDcgMy4xNCA3IDcgMCAzLjg1OS0zLjE0MSA3LTcgN3pNNS40IDcuOTMzYTIuNjcgMi42NyAwIDAgMSAyLjY2NyAyLjY2NmMwIC42MDYtLjE5MyAxLjE3OS0uNTQ0IDEuNjE0YTEuNTk5IDEuNTk5IDAgMCAwLS4zMjMuOTg3LjguOCAwIDAgMCAuOC44YzMuMzA5IDAgNi0yLjY5MSA2LTZzLTIuNjkxLTYtNi02LTYgMi42OTEtNiA2YzAgLjQ0MS4zNTkuOC44LjguMzc4IDAgLjcyOS0uMTE0Ljk4Ni0uMzIyQTIuNTY4IDIuNTY4IDAgMCAxIDUuNCA3LjkzM3oiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1hY3Rpb24tcHVycGxlIiBkPSJNNC41IDUuMzc1YS44NzUuODc1IDAgMSAwIDAgMS43NS44NzUuODc1IDAgMCAwIDAtMS43NXoiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1ibHVlIiBkPSJNNy4xMjUgMy42MjVhLjg3NS44NzUgMCAxIDAgMCAxLjc1Ljg3NS44NzUgMCAwIDAgMC0xLjc1eiIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWdyZWVuIiBkPSJNMTAuNjI1IDQuNWEuODc1Ljg3NSAwIDEgMCAwIDEuNzUuODc1Ljg3NSAwIDAgMCAwLTEuNzV6Ii8+PHBhdGggY2xhc3M9Imljb24tdnMteWVsbG93IiBkPSJNMTEuNSA4YS44NzUuODc1IDAgMSAwIDAgMS43NS44NzUuODc1IDAgMCAwIDAtMS43NXoiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1yZWQiIGQ9Ik05Ljc1IDEwLjYyNWEuODc1Ljg3NSAwIDEgMCAwIDEuNzUuODc1Ljg3NSAwIDAgMCAwLTEuNzV6Ii8+PC9nPjwvc3ZnPg==)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.file:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.file:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtYmd7ZmlsbDojYzVjNWM1fS5pY29uLXZzLWZne2ZpbGw6IzJiMjgyZX08L3N0eWxlPjxwYXRoIGNsYXNzPSJpY29uLWNhbnZhcy10cmFuc3BhcmVudCIgZD0iTTE2IDE2SDBWMGgxNnYxNnoiIGlkPSJjYW52YXMiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1vdXQiIGQ9Ik0xNSAxNkgyVjBoOC42MjFMMTUgNC4zNzlWMTZ6IiBpZD0ib3V0bGluZSIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWZnIiBkPSJNMTMgMTRINFYyaDV2NGg0djh6bS0zLTlWMi4yMDdMMTIuNzkzIDVIMTB6IiBpZD0iaWNvbkZnIi8+PHBhdGggY2xhc3M9Imljb24tdnMtYmciIGQ9Ik0zIDF2MTRoMTFWNC43OTNMMTAuMjA3IDFIM3ptMTAgMTNINFYyaDV2NGg0djh6bS0zLTlWMi4yMDdMMTIuNzkzIDVIMTB6IiBpZD0iaWNvbkJnIi8+PC9zdmc+)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.reference:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.reference:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHN0eWxlPi5pY29uLWNhbnZhcy10cmFuc3BhcmVudHtvcGFjaXR5OjA7ZmlsbDojMmQyZDMwfS5pY29uLXZzLW91dHtmaWxsOiMyZDJkMzB9Lmljb24tdnMtYmd7ZmlsbDojYzVjNWM1fS5pY29uLXZzLWZne2ZpbGw6IzJiMjgyZX0uaWNvbi12cy1hY3Rpb24tYmx1ZXtmaWxsOiM3NWJlZmZ9PC9zdHlsZT48cGF0aCBjbGFzcz0iaWNvbi1jYW52YXMtdHJhbnNwYXJlbnQiIGQ9Ik0xNiAxNkgwVjBoMTZ2MTZ6IiBpZD0iY2FudmFzIi8+PHBhdGggY2xhc3M9Imljb24tdnMtb3V0IiBkPSJNMTQgNC41NTZWMTNjMCAuOTctLjcwMSAyLTIgMkg0Yy0uOTcgMC0yLS43MDEtMi0yVjYuNjQ5QTMuNDk1IDMuNDk1IDAgMCAxIDAgMy41QzAgMS41NyAxLjU3IDAgMy41IDBINXYxaDUuMDYxTDE0IDQuNTU2eiIgaWQ9Im91dGxpbmUiIHN0eWxlPSJkaXNwbGF5OiBub25lOyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWJnIiBkPSJNMTMgNXY4cy0uMDM1IDEtMS4wMzUgMWgtOFMzIDE0IDMgMTNWOWgxdjRoOFY2SDkuMzk3bC41MTctLjUyTDkgNC41NzJWM0g3LjQxOUw2LjQxMyAyaDMuMjI4TDEzIDV6IiBpZD0iaWNvbkJnIi8+PHBhdGggY2xhc3M9Imljb24tdnMtZmciIGQ9Ik03LjQxOSAzSDl2MS41NzJMNy40MTkgM3ptMS45NzggM0w2LjQxNiA5SDR2NGg4VjZIOS4zOTd6IiBpZD0iaWNvbkZnIiBzdHlsZT0iZGlzcGxheTogbm9uZTsiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1hY3Rpb24tYmx1ZSIgZD0iTTUuOTg4IDZIMy41YTIuNSAyLjUgMCAxIDEgMC01SDR2MWgtLjVDMi42NzMgMiAyIDIuNjczIDIgMy41UzIuNjczIDUgMy41IDVoMi41MTNMNCAzaDJsMi41IDIuNDg0TDYgOEg0bDEuOTg4LTJ6IiBpZD0iY29sb3JBY3Rpb24iLz48L3N2Zz4=)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.snippet:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.snippet:before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnNDY5NCIKICAgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE0NzA1Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzNDcwMyIgLz4KICA8c3R5bGUKICAgICBpZD0ic3R5bGU0Njk2Ij4uaWNvbi1jYW52YXMtdHJhbnNwYXJlbnR7b3BhY2l0eTowO2ZpbGw6I2Y2ZjZmNn0uaWNvbi12cy1vdXR7ZmlsbDojZjZmNmY2fS5pY29uLXZzLWFjdGlvbi1vcmFuZ2V7ZmlsbDojYzI3ZDFhfTwvc3R5bGU+CiAgPGcKICAgICBpZD0iZzQ3MjQiCiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwxLjMzMzMzMzMsLTI0NS45OTk5OSwtMzEuOTk5OTk5KSI+CiAgICA8cGF0aAogICAgICAgZD0ibSAxODUsMjQgMTEsMCAwLDEyIC0xMSwwIHoiCiAgICAgICBpZD0icGF0aDQ1MjgiCiAgICAgICBzdHlsZT0iZmlsbDojMmQyZDMwIiAvPgogICAgPHBhdGgKICAgICAgIGQ9Im0gMTk0LDMzIDAsLTcgLTcsMCAwLDcgLTEsMCAwLC04IDksMCAwLDggeiBtIC04LDEgMSwwIDAsMSAtMSwwIHogbSAyLDAgMSwwIDAsMSAtMSwwIHogbSAyLDAgMSwwIDAsMSAtMSwwIHogbSAyLDAgMSwwIDAsMSAtMSwwIHogbSAyLDAgMSwwIDAsMSAtMSwwIHoiCiAgICAgICBpZD0icGF0aDQ1MzAiCiAgICAgICBzdHlsZT0iZmlsbDojYzVjNWM1IiAvPgogICAgPHBhdGgKICAgICAgIGQ9Im0gMTg3LDI2IDcsMCAwLDcgLTcsMCB6IgogICAgICAgaWQ9InBhdGg0NTMyIgogICAgICAgc3R5bGU9ImZpbGw6IzJiMjgyZSIgLz4KICA8L2c+Cjwvc3ZnPgo=)}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.customcolor:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.customcolor:before{background-image:none}.monaco-editor.hc-black .suggest-widget .monaco-list .monaco-list-row .suggest-icon.folder:before,.monaco-editor.vs-dark .suggest-widget .monaco-list .monaco-list-row .suggest-icon.folder:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uaWNvbi1jYW52YXMtdHJhbnNwYXJlbnR7b3BhY2l0eTowO2ZpbGw6I0Y2RjZGNjt9IC5pY29uLXZzLW91dHtvcGFjaXR5OjA7ZmlsbDojRjZGNkY2O30gLmljb24tdnMtZmd7b3BhY2l0eTowO2ZpbGw6I0YwRUZGMTt9IC5pY29uLWZvbGRlcntmaWxsOiNDNUM1QzU7fTwvc3R5bGU+PHBhdGggY2xhc3M9Imljb24tY2FudmFzLXRyYW5zcGFyZW50IiBkPSJNMTYgMTZoLTE2di0xNmgxNnYxNnoiIGlkPSJjYW52YXMiLz48cGF0aCBjbGFzcz0iaWNvbi12cy1vdXQiIGQ9Ik0xNiAyLjV2MTBjMCAuODI3LS42NzMgMS41LTEuNSAxLjVoLTExLjk5NmMtLjgyNyAwLTEuNS0uNjczLTEuNS0xLjV2LThjMC0uODI3LjY3My0xLjUgMS41LTEuNWgyLjg4NmwxLTJoOC4xMWMuODI3IDAgMS41LjY3MyAxLjUgMS41eiIgaWQ9Im91dGxpbmUiLz48cGF0aCBjbGFzcz0iaWNvbi1mb2xkZXIiIGQ9Ik0xNC41IDJoLTcuNDkybC0xIDJoLTMuNTA0Yy0uMjc3IDAtLjUuMjI0LS41LjV2OGMwIC4yNzYuMjIzLjUuNS41aDExLjk5NmMuMjc1IDAgLjUtLjIyNC41LS41di0xMGMwLS4yNzYtLjIyNS0uNS0uNS0uNXptLS40OTYgMmgtNi40OTZsLjUtMWg1Ljk5NnYxeiIgaWQ9Imljb25CZyIvPjxwYXRoIGNsYXNzPSJpY29uLXZzLWZnIiBkPSJNMTQgM3YxaC02LjVsLjUtMWg2eiIgaWQ9Imljb25GZyIvPjwvc3ZnPg==)}.monaco-editor .zone-widget{position:absolute;z-index:10}.monaco-editor .zone-widget .zone-widget-container{border-top-style:solid;border-bottom-style:solid;border-top-width:0;border-bottom-width:0;position:relative}.monaco-editor .accessibilityHelpWidget{padding:10px;vertical-align:middle;overflow:scroll}.monaco-editor .iPadShowKeyboard{width:58px;min-width:0;height:36px;min-height:0;margin:0;padding:0;position:absolute;resize:none;overflow:hidden;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1OCIgaGVpZ2h0PSIzNiI+PHBhdGggZmlsbD0iI0YwRUZGMSIgZD0iTTU0IDMydi0yOGgtNTB2MjhoNTB6bS0xNi0yaC0xOHYtNmgxOHY2em02IDBoLTR2LTZoNHY2em04IDBoLTZ2LTZoNnY2em0tNC0yNGg0djRoLTR2LTR6bTAgNmg0djRoLTR2LTR6bTAgNmg0djRoLTR2LTR6bS02LTEyaDR2NGgtNHYtNHptMCA2aDR2NGgtNHYtNHptMCA2aDR2NGgtNHYtNHptLTYtMTJoNHY0aC00di00em0wIDZoNHY0aC00di00em0wIDZoNHY0aC00di00em0tNi0xMmg0djRoLTR2LTR6bTAgNmg0djRoLTR2LTR6bTAgNmg0djRoLTR2LTR6bS02LTEyaDR2NGgtNHYtNHptMCA2aDR2NGgtNHYtNHptMCA2aDR2NGgtNHYtNHptLTYtMTJoNHY0aC00di00em0wIDZoNHY0aC00di00em0wIDZoNHY0aC00di00em0wIDEyaC00di02aDR2NnptLTYtMjRoNHY0aC00di00em0wIDZoNHY0aC00di00em0wIDZoNHY0aC00di00em0tNi0xMmg0djRoLTR2LTR6bTAgNmg0djRoLTR2LTR6bTAgNmg0djRoLTR2LTR6bTAgNmg2djZoLTZ2LTZ6Ii8+PHBhdGggZmlsbD0iIzQyNDI0MiIgZD0iTTU1LjMzNiAwaC01My4yODVjLTEuMzQ0IDAtMi4wNTEuNjU2LTIuMDUxIDJ2MzJjMCAxLjM0NC43MDcgMS45NjUgMi4wNTEgMS45NjVsNTMuOTQ5LjAzNWMxLjM0NCAwIDItLjY1NiAyLTJ2LTMyYzAtMS4zNDQtMS4zMi0yLTIuNjY0LTJ6bS0xLjMzNiAzMmgtNTB2LTI4aDUwdjI4eiIvPjxyZWN0IHg9IjYiIHk9IjEyIiBmaWxsPSIjNDI0MjQyIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iMTIiIHk9IjEyIiBmaWxsPSIjNDI0MjQyIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iMTgiIHk9IjEyIiBmaWxsPSIjNDI0MjQyIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iMjQiIHk9IjEyIiBmaWxsPSIjNDI0MjQyIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iMzAiIHk9IjEyIiBmaWxsPSIjNDI0MjQyIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iMzYiIHk9IjEyIiBmaWxsPSIjNDI0MjQyIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iNDIiIHk9IjEyIiBmaWxsPSIjNDI0MjQyIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iNDgiIHk9IjEyIiBmaWxsPSIjNDI0MjQyIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iNiIgeT0iNiIgZmlsbD0iIzQyNDI0MiIgd2lkdGg9IjQiIGhlaWdodD0iNCIvPjxyZWN0IHg9IjEyIiB5PSI2IiBmaWxsPSIjNDI0MjQyIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iMTgiIHk9IjYiIGZpbGw9IiM0MjQyNDIiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSIyNCIgeT0iNiIgZmlsbD0iIzQyNDI0MiIgd2lkdGg9IjQiIGhlaWdodD0iNCIvPjxyZWN0IHg9IjMwIiB5PSI2IiBmaWxsPSIjNDI0MjQyIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iMzYiIHk9IjYiIGZpbGw9IiM0MjQyNDIiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSI0MiIgeT0iNiIgZmlsbD0iIzQyNDI0MiIgd2lkdGg9IjQiIGhlaWdodD0iNCIvPjxyZWN0IHg9IjQ4IiB5PSI2IiBmaWxsPSIjNDI0MjQyIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iNiIgeT0iMTgiIGZpbGw9IiM0MjQyNDIiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSIxMiIgeT0iMTgiIGZpbGw9IiM0MjQyNDIiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSIxOCIgeT0iMTgiIGZpbGw9IiM0MjQyNDIiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSIyNCIgeT0iMTgiIGZpbGw9IiM0MjQyNDIiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSIzMCIgeT0iMTgiIGZpbGw9IiM0MjQyNDIiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSIzNiIgeT0iMTgiIGZpbGw9IiM0MjQyNDIiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSI0MiIgeT0iMTgiIGZpbGw9IiM0MjQyNDIiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSI0OCIgeT0iMTgiIGZpbGw9IiM0MjQyNDIiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSI2IiB5PSIyNCIgZmlsbD0iIzQyNDI0MiIgd2lkdGg9IjYiIGhlaWdodD0iNiIvPjxyZWN0IHg9IjQ2IiB5PSIyNCIgZmlsbD0iIzQyNDI0MiIgd2lkdGg9IjYiIGhlaWdodD0iNiIvPjxyZWN0IHg9IjIwIiB5PSIyNCIgZmlsbD0iIzQyNDI0MiIgd2lkdGg9IjE4IiBoZWlnaHQ9IjYiLz48cmVjdCB4PSIxNCIgeT0iMjQiIGZpbGw9IiM0MjQyNDIiIHdpZHRoPSI0IiBoZWlnaHQ9IjYiLz48cmVjdCB4PSI0MCIgeT0iMjQiIGZpbGw9IiM0MjQyNDIiIHdpZHRoPSI0IiBoZWlnaHQ9IjYiLz48L3N2Zz4=) 50% no-repeat;border:4px solid #f6f6f6;border-radius:4px}.monaco-editor.vs-dark .iPadShowKeyboard{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1OCIgaGVpZ2h0PSIzNiI+PHBhdGggZmlsbD0iIzJCMjgyRSIgZD0iTTU0IDMydi0yOGgtNTB2MjhoNTB6bS0xNi0yaC0xOHYtNmgxOHY2em02IDBoLTR2LTZoNHY2em04IDBoLTZ2LTZoNnY2em0tNC0yNGg0djRoLTR2LTR6bTAgNmg0djRoLTR2LTR6bTAgNmg0djRoLTR2LTR6bS02LTEyaDR2NGgtNHYtNHptMCA2aDR2NGgtNHYtNHptMCA2aDR2NGgtNHYtNHptLTYtMTJoNHY0aC00di00em0wIDZoNHY0aC00di00em0wIDZoNHY0aC00di00em0tNi0xMmg0djRoLTR2LTR6bTAgNmg0djRoLTR2LTR6bTAgNmg0djRoLTR2LTR6bS02LTEyaDR2NGgtNHYtNHptMCA2aDR2NGgtNHYtNHptMCA2aDR2NGgtNHYtNHptLTYtMTJoNHY0aC00di00em0wIDZoNHY0aC00di00em0wIDZoNHY0aC00di00em0wIDEyaC00di02aDR2NnptLTYtMjRoNHY0aC00di00em0wIDZoNHY0aC00di00em0wIDZoNHY0aC00di00em0tNi0xMmg0djRoLTR2LTR6bTAgNmg0djRoLTR2LTR6bTAgNmg0djRoLTR2LTR6bTAgNmg2djZoLTZ2LTZ6Ii8+PHBhdGggZmlsbD0iI0M1QzVDNSIgZD0iTTU1LjMzNiAwaC01My4yODVjLTEuMzQ0IDAtMi4wNTEuNjU2LTIuMDUxIDJ2MzJjMCAxLjM0NC43MDcgMS45NjUgMi4wNTEgMS45NjVsNTMuOTQ5LjAzNWMxLjM0NCAwIDItLjY1NiAyLTJ2LTMyYzAtMS4zNDQtMS4zMi0yLTIuNjY0LTJ6bS0xLjMzNiAzMmgtNTB2LTI4aDUwdjI4eiIvPjxyZWN0IHg9IjYiIHk9IjEyIiBmaWxsPSIjQzVDNUM1IiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iMTIiIHk9IjEyIiBmaWxsPSIjQzVDNUM1IiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iMTgiIHk9IjEyIiBmaWxsPSIjQzVDNUM1IiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iMjQiIHk9IjEyIiBmaWxsPSIjQzVDNUM1IiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iMzAiIHk9IjEyIiBmaWxsPSIjQzVDNUM1IiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iMzYiIHk9IjEyIiBmaWxsPSIjQzVDNUM1IiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iNDIiIHk9IjEyIiBmaWxsPSIjQzVDNUM1IiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iNDgiIHk9IjEyIiBmaWxsPSIjQzVDNUM1IiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iNiIgeT0iNiIgZmlsbD0iI0M1QzVDNSIgd2lkdGg9IjQiIGhlaWdodD0iNCIvPjxyZWN0IHg9IjEyIiB5PSI2IiBmaWxsPSIjQzVDNUM1IiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iMTgiIHk9IjYiIGZpbGw9IiNDNUM1QzUiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSIyNCIgeT0iNiIgZmlsbD0iI0M1QzVDNSIgd2lkdGg9IjQiIGhlaWdodD0iNCIvPjxyZWN0IHg9IjMwIiB5PSI2IiBmaWxsPSIjQzVDNUM1IiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iMzYiIHk9IjYiIGZpbGw9IiNDNUM1QzUiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSI0MiIgeT0iNiIgZmlsbD0iI0M1QzVDNSIgd2lkdGg9IjQiIGhlaWdodD0iNCIvPjxyZWN0IHg9IjQ4IiB5PSI2IiBmaWxsPSIjQzVDNUM1IiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PHJlY3QgeD0iNiIgeT0iMTgiIGZpbGw9IiNDNUM1QzUiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSIxMiIgeT0iMTgiIGZpbGw9IiNDNUM1QzUiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSIxOCIgeT0iMTgiIGZpbGw9IiNDNUM1QzUiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSIyNCIgeT0iMTgiIGZpbGw9IiNDNUM1QzUiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSIzMCIgeT0iMTgiIGZpbGw9IiNDNUM1QzUiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSIzNiIgeT0iMTgiIGZpbGw9IiNDNUM1QzUiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSI0MiIgeT0iMTgiIGZpbGw9IiNDNUM1QzUiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSI0OCIgeT0iMTgiIGZpbGw9IiNDNUM1QzUiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiLz48cmVjdCB4PSI2IiB5PSIyNCIgZmlsbD0iI0M1QzVDNSIgd2lkdGg9IjYiIGhlaWdodD0iNiIvPjxyZWN0IHg9IjQ2IiB5PSIyNCIgZmlsbD0iI0M1QzVDNSIgd2lkdGg9IjYiIGhlaWdodD0iNiIvPjxyZWN0IHg9IjIwIiB5PSIyNCIgZmlsbD0iI0M1QzVDNSIgd2lkdGg9IjE4IiBoZWlnaHQ9IjYiLz48cmVjdCB4PSIxNCIgeT0iMjQiIGZpbGw9IiNDNUM1QzUiIHdpZHRoPSI0IiBoZWlnaHQ9IjYiLz48cmVjdCB4PSI0MCIgeT0iMjQiIGZpbGw9IiNDNUM1QzUiIHdpZHRoPSI0IiBoZWlnaHQ9IjYiLz48L3N2Zz4=) 50% no-repeat;border:4px solid #252526}.monaco-editor .tokens-inspect-widget{z-index:50;-webkit-user-select:text;-ms-user-select:text;-moz-user-select:text;-o-user-select:text;user-select:text;padding:10px}.tokens-inspect-separator{height:1px;border:0}.monaco-editor .tokens-inspect-widget .tm-token{font-family:monospace}.monaco-editor .tokens-inspect-widget .tm-token-length{font-weight:400;font-size:60%;float:right}.monaco-editor .tokens-inspect-widget .tm-metadata-table{width:100%}.monaco-editor .tokens-inspect-widget .tm-metadata-value{font-family:monospace;text-align:right}.monaco-editor .tokens-inspect-widget .tm-token-type{font-family:monospace}.monaco-quick-open-widget .monaco-list .monaco-list-row .monaco-highlighted-label .highlight,.monaco-quick-open-widget .monaco-tree .monaco-tree-row .monaco-highlighted-label .highlight{color:#0066bf}.vs-dark .monaco-quick-open-widget .monaco-list .monaco-list-row .monaco-highlighted-label .highlight,.vs-dark .monaco-quick-open-widget .monaco-tree .monaco-tree-row .monaco-highlighted-label .highlight{color:#0097fb}.hc-black .monaco-quick-open-widget .monaco-list .monaco-list-row .monaco-highlighted-label .highlight,.hc-black .monaco-quick-open-widget .monaco-tree .monaco-tree-row .monaco-highlighted-label .highlight{color:#f38518}.monaco-quick-open-widget{font-size:13px}.monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon,.vs-dark .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iNDAiPjxwYXRoIGQ9Ik0yODguNDgzIDMzYy0uNzcyIDAtMS40OTctLjEyMy0yLjE1My0uMzY1LS42NzgtLjI1My0xLjI3LS42MTctMS43Ni0xLjA4NC0uNS0uNDc1LS44OTItMS4wNDktMS4xNjMtMS43MDQtLjI3LS42NDQtLjQwNy0xLjM3MS0uNDA3LTIuMTU4IDAtLjUxNy4wNjEtMS4wMTguMTc4LTEuNDkuMTE2LS40Ny4yOS0uOTI1LjUxNi0xLjM0OC4yMjUtLjQyMi41MDgtLjgxNS44NDQtMS4xNjcuMzM0LS4zNTIuNzE3LS42NTYgMS4xMzktLjkwNS40MTYtLjI0Ni44ODEtLjQ0IDEuMzgtLjU3Ni40OTMtLjEzNCAxLjAyNi0uMjAyIDEuNTg3LS4yMDIuNzA1IDAgMS4zODIuMTA5IDIuMDEzLjMyNC42NDIuMjE3IDEuMjE4LjUzOCAxLjcwOC45NTUuNTAxLjQyNS45MDMuOTQ4IDEuMTkzIDEuNTU2LjI5NC42MjMuNDQyIDEuMzE2LjQ0MiAyLjA2NCAwIC42MTktLjA5IDEuMTg1LS4yNjggMS42NzktLjE3OC40OTItLjQyLjkyLS43MjEgMS4yNzUtLjMzMS4zNzctLjY5OS42NTgtMS4xMDQuODQ3bC0uMDQ4LjAyMnYxLjUzbC0uNTg3LjI2NmMtLjEyOC4wNTktLjI4OC4xMTctLjQ3NC4xNzktLjE5My4wNjItLjQwNC4xMTQtLjY0NS4xNTktLjIyOS4wNC0uNDc3LjA3Ni0uNzUzLjEwMy0uMjcuMDI3LS41NzguMDQtLjkxNy4wNHoiIGZpbGw9IiMyRDJEMkQiLz48cGF0aCBkPSJNMjkxLjcxNiAyNC4wNDFjLS4zOTYtLjMzNi0uODU2LS41OTMtMS4zODQtLjc3MS0uNTI3LS4xOC0xLjA5LS4yNzEtMS42ODktLjI3MS0uNDczIDAtLjkxMi4wNTUtMS4zMjQuMTY3LS40MTQuMTEyLS43OTEuMjctMS4xMzUuNDczLS4zNDIuMjAyLS42NS40NDYtLjkyMi43MzMtLjI3My4yODYtLjUwMi42MDItLjY4Ni45NDktLjE4Ni4zNDctLjMzLjcyMi0uNDI4IDEuMTE5LS4xLjM5OS0uMTQ4LjgxNC0uMTQ4IDEuMjQ3IDAgLjY1Mi4xMDkgMS4yNDcuMzMyIDEuNzc2LjIxOS41MzEuNTMuOTg0LjkyOCAxLjM2MS4zOTYuMzc4Ljg3MS42NjcgMS40MTYuODcuNTQ4LjIwMiAxLjE1Mi4zMDQgMS44MDguMzA0LjMwMiAwIC41NzctLjAxMS44MjMtLjAzNS4yNDYtLjAyMy40NjgtLjA1Ni42NjQtLjA5MS4xOTUtLjAzNi4zNjYtLjA3OC41MTQtLjEyNWwuMzc1LS4xNHYtLjg1NGwtLjQ2My4xODRjLS4xNi4wNTYtLjMzNi4xMDQtLjUyMS4xNDMtLjE4OC4wMzctLjM4Ny4wNjktLjYwNC4wODktLjIxMy4wMjQtLjQ0OC4wMzQtLjcuMDM0LS41NjIgMC0xLjA2NC0uMDg4LTEuNTA5LS4yNjQtLjQ0Mi0uMTc2LS44MTYtLjQyMS0xLjEyNS0uNzMxLS4zMDktLjMxNC0uNTQ1LS42ODctLjcwOC0xLjEyNC0uMTYxLS40MzUtLjI0My0uOTEzLS4yNDMtMS40MzIgMC0uNTQ1LjA5LTEuMDUzLjI3My0xLjUyMi4xODItLjQ3MS40MzUtLjg3OS43NTgtMS4yMjUuMzI0LS4zNDUuNzA4LS42MTcgMS4xNTUtLjgxNS40NDYtLjE5Ni45MzQtLjI5NCAxLjQ1Ny0uMjk0LjQxOSAwIC43OTguMDQ0IDEuMTIyLjEzNi4zMjkuMDkxLjYyLjIxNS44NzEuMzY5LjI1NC4xNTguNDY1LjMzOS42NDMuNTQ3LjE3OS4yMDkuMzI0LjQzMi40MzguNjY3LjExMy4yMzcuMTkzLjQ4LjI0Ni43MzEuMDUxLjI1NC4wNzYuNS4wNzYuNzQxIDAgLjM0NC0uMDMzLjY1My0uMTAyLjkyNi0uMDY4LjI3NC0uMTU4LjUwMy0uMjY5LjY5NC0uMTEuMTg5LS4yMzkuMzM1LS4zODYuNDM0cy0uMjk1LjE0OC0uNDUzLjE0OGwtLjIxNS0uMDQ1Yy0uMDY2LS4wMjktLjExOS0uMDgtLjE2Ni0uMTU2LS4wNDYtLjA3NS0uMDgyLS4xNzctLjEwNy0uMzA2LS4wMjUtLjEyNi0uMDM5LS4yOTItLjAzOS0uNDkybC4wMTgtLjMyNS4wNDEtLjUzLjA1NS0uNjQ0LjA1OC0uNjQ3LjA0OC0uNTQ2LjAyNy0uMzQ0aC0uOTE5bC0uMDU0LjZoLS4wMjFjLS4wMjUtLjEwMy0uMDctLjE5NS0uMTM2LS4yODEtLjA2My0uMDgzLS4xNDEtLjE1NS0uMjMzLS4yMTYtLjA5MS0uMDYxLS4xOTMtLjEwNi0uMzA3LS4xNDEtLjExNS0uMDMzLS4yMzgtLjA0OC0uMzY5LS4wNDgtLjMzNyAwLS42NDYuMDctLjkyNC4yMTYtLjI4MS4xNDQtLjUxOC4zNDQtLjcyMS41OTktLjIwMS4yNTQtLjM1NS41NTYtLjQ2NS45MDUtLjExNS4zNS0uMTcuNzI2LS4xNyAxLjEzNCAwIC4zNDQuMDQ1LjY0NS4xMzUuOTAxLjA4OC4yNi4yMTEuNDczLjM1OS42NDYuMTUzLjE3MS4zMjkuMy41MzQuMzgyLjIuMDg2LjQxNS4xMjkuNjQxLjEyOS4xNzYgMCAuMzQyLS4wMjcuNDk5LS4wODEuMTU0LS4wNTIuMzAyLS4xMy40MzItLjIzMi4xMzQtLjEwNC4yNDgtLjIzLjM0OC0uMzguMTAyLS4xNDkuMTgyLS4zMjMuMjM2LS41MmguMDI3YzAgLjM3Ni4xMDEuNjc0LjMwNy44OTMuMjA3LjIyLjUwMi4zMy44ODkuMzMuMjkyIDAgLjU4LS4wNjQuODYzLS4xOTguMjgzLS4xMzIuNTM2LS4zMjguNzYyLS41ODYuMjIzLS4yNjIuNDA0LS41ODMuNTQzLS45NjYuMTM4LS4zODQuMjA4LS44My4yMDgtMS4zNCAwLS42MDUtLjExNy0xLjE1LS4zNDUtMS42MzQtLjIzMS0uNDgyLS41NDYtLjg5MS0uOTM5LTEuMjI1bS0yLjM2OCAzLjc3NGMtLjA1Ni4yNzctLjEzNi41MTctLjI0Ni43MTktLjEwOS4yMDMtLjI0Ni4zNjMtLjQwNy40ODEtLjE2My4xMTUtLjM1NC4xNzYtLjU3Mi4xNzYtLjEyIDAtLjIzNi0uMDI1LS4zNDQtLjA3OC0uMTA4LS4wNTItLjIwNi0uMTMtLjI4OS0uMjMyLS4wODEtLjEwMy0uMTQ4LS4yMzQtLjE5OC0uMzktLjA0Ni0uMTU2LS4wNy0uMzM3LS4wNy0uNTQ3IDAtLjIzNy4wMjctLjQ4MS4wOC0uNzI5LjA1Ni0uMjQ3LjEzNy0uNDczLjI1LS42NzcuMTA5LS4yLjI1LS4zNjMuNDE2LS40OTIuMTY1LS4xMjcuMzYxLS4xOTEuNTgyLS4xOTEuMTIzIDAgLjIzNC4wMjEuMzQuMDYzLjEwNy4wNDIuMTk4LjEwNy4yNzkuMTk2LjA4LjA4Ny4xNDUuMTk3LjE4OS4zMy4wNDMuMTM0LjA3LjI5NC4wNy40OCAwIC4zMTctLjAzMS42MTUtLjA4Ljg5MSIgZmlsbD0iI0M1QzVDNSIvPjxwYXRoIGQ9Ik0yODguNDgzIDEzYy0uNzcyIDAtMS40OTctLjEyMy0yLjE1My0uMzY1LS42NzgtLjI1My0xLjI3LS42MTctMS43Ni0xLjA4NC0uNS0uNDc1LS44OTItMS4wNDktMS4xNjMtMS43MDQtLjI2OS0uNjQ0LS40MDctMS4zNzEtLjQwNy0yLjE1OSAwLS41MTcuMDYxLTEuMDE4LjE3OC0xLjQ5LjExNi0uNDcuMjktLjkyNS41MTYtMS4zNDguMjI1LS40MjIuNTA4LS44MTUuODQ0LTEuMTY3LjMzNC0uMzUyLjcxNy0uNjU2IDEuMTM5LS45MDUuNDE2LS4yNDYuODgxLS40NCAxLjM4LS41NzYuNDkyLS4xMzQgMS4wMjUtLjIwMiAxLjU4Ni0uMjAyLjcwNSAwIDEuMzgyLjEwOSAyLjAxMy4zMjQuNjQyLjIxNyAxLjIxOC41MzggMS43MDguOTU1LjUwMS40MjUuOTAzLjk0OCAxLjE5MyAxLjU1Ni4yOTUuNjI0LjQ0MyAxLjMxNy40NDMgMi4wNjUgMCAuNjE5LS4wOSAxLjE4NS0uMjY4IDEuNjc5LS4xNzguNDkyLS40Mi45Mi0uNzIxIDEuMjc1LS4zMzEuMzc3LS42OTkuNjU4LTEuMTA0Ljg0N2wtLjA0OC4wMjJ2MS41M2wtLjU4Ny4yNjZjLS4xMjguMDU5LS4yODguMTE3LS40NzQuMTc5LS4xOTMuMDYyLS40MDQuMTE0LS42NDUuMTU5LS4yMjkuMDQtLjQ3Ny4wNzYtLjc1My4xMDMtLjI3LjAyNy0uNTc4LjA0LS45MTcuMDR6IiBmaWxsPSIjRjNGM0YzIi8+PHBhdGggZD0iTTI5MS43MTYgNC4wNDFjLS4zOTYtLjMzNi0uODU2LS41OTMtMS4zODQtLjc3MS0uNTI3LS4xNzktMS4wOS0uMjctMS42ODktLjI3LS40NzMgMC0uOTEyLjA1NS0xLjMyNC4xNjctLjQxNC4xMTItLjc5MS4yNy0xLjEzNS40NzMtLjM0Mi4yMDItLjY1LjQ0Ni0uOTIyLjczMy0uMjczLjI4Ni0uNTAyLjYwMi0uNjg2Ljk0OS0uMTg2LjM0Ny0uMzMuNzIyLS40MjggMS4xMTktLjA5OS40LS4xNDguODE1LS4xNDggMS4yNDcgMCAuNjUyLjEwOSAxLjI0Ny4zMzIgMS43NzYuMjE5LjUzMS41My45ODQuOTI4IDEuMzYxLjM5Ni4zNzguODcxLjY2NyAxLjQxNi44Ny41NDguMjAyIDEuMTUyLjMwNCAxLjgwOC4zMDQuMzAyIDAgLjU3Ny0uMDExLjgyMy0uMDM1LjI0Ni0uMDIzLjQ2OC0uMDU2LjY2NC0uMDkxLjE5NS0uMDM2LjM2Ni0uMDc4LjUxNC0uMTI1bC4zNzUtLjE0di0uODU0bC0uNDYzLjE4NGMtLjE2LjA1Ni0uMzM2LjEwNC0uNTIxLjE0My0uMTg4LjAzNy0uMzg3LjA2OS0uNjA0LjA4OS0uMjEzLjAyNC0uNDQ4LjAzNC0uNy4wMzQtLjU2MiAwLTEuMDY0LS4wODgtMS41MDktLjI2NC0uNDQyLS4xNzYtLjgxNi0uNDIxLTEuMTI1LS43MzEtLjMwOS0uMzE0LS41NDUtLjY4Ny0uNzA4LTEuMTI0LS4xNjEtLjQzNS0uMjQzLS45MTMtLjI0My0xLjQzMiAwLS41NDUuMDktMS4wNTMuMjczLTEuNTIyLjE4Mi0uNDcxLjQzNS0uODc5Ljc1OC0xLjIyNS4zMjQtLjM0NS43MDgtLjYxNyAxLjE1NS0uODE1LjQ0Ni0uMTk2LjkzNC0uMjk0IDEuNDU3LS4yOTQuNDE5IDAgLjc5OC4wNDQgMS4xMjIuMTM2LjMyOS4wOTEuNjIuMjE1Ljg3MS4zNjkuMjU0LjE1OC40NjUuMzM5LjY0My41NDcuMTc5LjIwOS4zMjQuNDMyLjQzOC42NjcuMTEzLjIzNy4xOTMuNDguMjQ2LjczMS4wNTEuMjU0LjA3Ni41LjA3Ni43NDEgMCAuMzQ0LS4wMzMuNjUzLS4xMDIuOTI2LS4wNjguMjc0LS4xNTguNTAzLS4yNjkuNjk0LS4xMS4xODktLjIzOS4zMzUtLjM4Ni40MzRzLS4yOTUuMTQ4LS40NTMuMTQ4bC0uMjE1LS4wNDVjLS4wNjYtLjAyOS0uMTE5LS4wOC0uMTY2LS4xNTYtLjA0Ni0uMDc1LS4wODItLjE3Ny0uMTA3LS4zMDYtLjAyNS0uMTI2LS4wMzktLjI5Mi0uMDM5LS40OTJsLjAxOC0uMzI1LjA0MS0uNTMuMDU1LS42NDQuMDU4LS42NDcuMDQ4LS41NDYuMDI3LS4zNDRoLS45MTlsLS4wNTQuNmgtLjAyMWMtLjAyNS0uMTAzLS4wNy0uMTk1LS4xMzYtLjI4MS0uMDYzLS4wODMtLjE0MS0uMTU1LS4yMzMtLjIxNi0uMDkxLS4wNjEtLjE5My0uMTA2LS4zMDctLjE0MS0uMTE1LS4wMzMtLjIzOC0uMDQ4LS4zNjktLjA0OC0uMzM3IDAtLjY0Ni4wNy0uOTI0LjIxNi0uMjgxLjE0NC0uNTE4LjM0NC0uNzIxLjU5OS0uMjAxLjI1NC0uMzU1LjU1Ni0uNDY1LjkwNS0uMTE1LjM1LS4xNy43MjYtLjE3IDEuMTM0IDAgLjM0NC4wNDUuNjQ1LjEzNS45MDEuMDg4LjI2LjIxMS40NzMuMzU5LjY0Ni4xNTMuMTcxLjMyOS4zLjUzNC4zODIuMi4wODYuNDE1LjEyOS42NDEuMTI5LjE3NiAwIC4zNDItLjAyNy40OTktLjA4MS4xNTQtLjA1Mi4zMDItLjEzLjQzMi0uMjMyLjEzNC0uMTA0LjI0OC0uMjMuMzQ4LS4zOC4xMDItLjE0OS4xODItLjMyMy4yMzYtLjUyaC4wMjdjMCAuMzc2LjEwMS42NzQuMzA3Ljg5My4yMDcuMjIuNTAyLjMzLjg4OS4zMy4yOTIgMCAuNTgtLjA2NC44NjMtLjE5OC4yODMtLjEzMi41MzYtLjMyOC43NjItLjU4Ni4yMjMtLjI2Mi40MDQtLjU4My41NDMtLjk2Ni4xMzgtLjM4NS4yMDgtLjgzMS4yMDgtMS4zNDEgMC0uNjA1LS4xMTctMS4xNS0uMzQ1LTEuNjM0LS4yMzEtLjQ4Mi0uNTQ2LS44OTEtLjkzOS0xLjIyNW0tMi4zNjggMy43NzRjLS4wNTYuMjc3LS4xMzYuNTE3LS4yNDYuNzE5LS4xMDkuMjAzLS4yNDYuMzYzLS40MDcuNDgxLS4xNjMuMTE1LS4zNTQuMTc2LS41NzIuMTc2LS4xMiAwLS4yMzYtLjAyNS0uMzQ0LS4wNzgtLjEwOC0uMDUyLS4yMDYtLjEzLS4yODktLjIzMi0uMDgxLS4xMDMtLjE0OC0uMjM0LS4xOTgtLjM5LS4wNDYtLjE1Ni0uMDctLjMzNy0uMDctLjU0NyAwLS4yMzcuMDI3LS40ODEuMDgtLjcyOS4wNTYtLjI0Ny4xMzctLjQ3My4yNS0uNjc3LjEwOS0uMi4yNS0uMzYzLjQxNi0uNDkyLjE2NS0uMTI3LjM2MS0uMTkxLjU4Mi0uMTkxLjEyMyAwIC4yMzQuMDIxLjM0LjA2My4xMDcuMDQyLjE5OC4xMDcuMjc5LjE5Ni4wOC4wODcuMTQ1LjE5Ny4xODkuMzMuMDQzLjEzNC4wNy4yOTQuMDcuNDggMCAuMzE3LS4wMzEuNjE1LS4wOC44OTEiIGZpbGw9IiM0MjQyNDIiLz48cGF0aCBkPSJNMjY0IDM3di0xNGg4LjYyNWwzLjM3NSAzLjU1NnYxMC40NDRoLTEyeiIgZmlsbD0iIzJEMkQyRCIvPjxwYXRoIGQ9Ik0yNzIgMjRoLTd2MTJoMTB2LTlsLTMtM3ptMiAxMWgtOHYtMTBoNXYzaDN2N3oiIGZpbGw9IiNDNUM1QzUiLz48cG9seWdvbiBwb2ludHM9IjI2NiwyNSAyNzEsMjUgMjcxLDI4IDI3NCwyOCAyNzQsMzUgMjY2LDM1IiBmaWxsPSIjMkQyRDJEIi8+PHBhdGggZD0iTTI2NCAxN3YtMTRoOC42MjVsMy4zNzUgMy41NTZ2MTAuNDQ0aC0xMnoiIGZpbGw9IiNGM0YzRjMiLz48cGF0aCBkPSJNMjcyIDRoLTd2MTJoMTB2LTlsLTMtM3ptMiAxMWgtOHYtMTBoNXYzaDN2N3oiIGZpbGw9IiM0MjQyNDIiLz48cG9seWdvbiBwb2ludHM9IjI2Niw1IDI3MSw1IDI3MSw4IDI3NCw4IDI3NCwxNSAyNjYsMTUiIGZpbGw9IiNGMEVGRjEiLz48cG9seWdvbiBwb2ludHM9IjI0NywzNCAyNDcsMzAgMjQ1LDMwIDI0NSwyNiAyNTUsMjYgMjU1LDM0IiBmaWxsPSIjMkQyRDJEIi8+PHBhdGggZD0iTTI1NCAyOWgtOHYtMmg4djJ6bTAgMWgtNnYxaDZ2LTF6bTAgMmgtNnYxaDZ2LTF6IiBmaWxsPSIjQzVDNUM1Ii8+PHBvbHlnb24gcG9pbnRzPSIyNDcsMTQgMjQ3LDEwIDI0NSwxMCAyNDUsNiAyNTUsNiAyNTUsMTQiIGZpbGw9IiNGM0YzRjMiLz48cGF0aCBkPSJNMjU0IDloLTh2LTJoOHYyem0wIDFoLTZ2MWg2di0xem0wIDJoLTZ2MWg2di0xeiIgZmlsbD0iIzQyNDI0MiIvPjxwYXRoIGQ9Ik0yMzAuNSAyMmMtNC4xNDMgMC03LjUgMy4zNTctNy41IDcuNXMzLjM1NyA3LjUgNy41IDcuNSA3LjUtMy4zNTcgNy41LTcuNS0zLjM1Ny03LjUtNy41LTcuNXptMCAxMWMtMS45MzMgMC0zLjUtMS41NjYtMy41LTMuNXMxLjU2Ny0zLjUgMy41LTMuNSAzLjUgMS41NjYgMy41IDMuNS0xLjU2NyAzLjUtMy41IDMuNXoiIGZpbGw9IiMyRDJEMkQiLz48cGF0aCBkPSJNMjI0LjAyNSAyOWMuMTA4LTEuNDE4LjY2OS0yLjcwOCAxLjU0Mi0zLjcyNmwxLjQzMSAxLjQzMWMtLjUxNi42NDYtLjg1MSAxLjQzLS45NDcgMi4yOTVoLTIuMDI2em0yLjk3MyAzLjI5NWMtLjUxNi0uNjQ2LS44NTEtMS40My0uOTQ3LTIuMjk1aC0yLjAyNWMuMTA4IDEuNDE4LjY2OSAyLjcwNyAxLjU0MiAzLjcyNmwxLjQzLTEuNDMxem00LjAwMi05LjI3djIuMDI1Yy44NjUuMDk3IDEuNjQ5LjQzMiAyLjI5NS45NDdsMS40MzEtMS40MzFjLTEuMDE4LS44NzItMi4zMDgtMS40MzItMy43MjYtMS41NDF6bS0zLjI5NSAyLjk3M2MuNjQ2LS41MTYgMS40My0uODUxIDIuMjk1LS45NDd2LTIuMDI1Yy0xLjQxOC4xMDgtMi43MDguNjY5LTMuNzI2IDEuNTQybDEuNDMxIDEuNDN6bTYuMjk3LjcwN2MuNTE2LjY0Ni44NTEgMS40My45NDcgMi4yOTVoMi4wMjVjLS4xMDgtMS40MTgtLjY2OS0yLjcwOC0xLjU0Mi0zLjcyNmwtMS40MyAxLjQzMXptLTQuMDAyIDcuMjQ0Yy0uODY1LS4wOTctMS42NDktLjQzMi0yLjI5NS0uOTQ3bC0xLjQzMSAxLjQzMWMxLjAxOC44NzMgMi4zMDcgMS40MzQgMy43MjYgMS41NDJ2LTIuMDI2em00Ljk0OS0zLjk0OWMtLjA5Ny44NjUtLjQzMiAxLjY0OC0uOTQ3IDIuMjk1bDEuNDMxIDEuNDMxYy44NzMtMS4wMTkgMS40MzQtMi4zMDggMS41NDItMy43MjZoLTIuMDI2em0tMS42NTQgMy4wMDJjLS42NDYuNTE2LTEuNDMuODUxLTIuMjk1Ljk0N3YyLjAyNWMxLjQxOS0uMTA4IDIuNzA4LS42NjkgMy43MjYtMS41NDJsLTEuNDMxLTEuNDN6IiBmaWxsPSIjQzVDNUM1Ii8+PHBhdGggZD0iTTIzMC41IDJjLTQuMTQzIDAtNy41IDMuMzU4LTcuNSA3LjUgMCA0LjE0MyAzLjM1NyA3LjUgNy41IDcuNXM3LjUtMy4zNTcgNy41LTcuNWMwLTQuMTQyLTMuMzU3LTcuNS03LjUtNy41em0wIDExYy0xLjkzMyAwLTMuNS0xLjU2Ni0zLjUtMy41IDAtMS45MzMgMS41NjctMy41IDMuNS0zLjVzMy41IDEuNTY3IDMuNSAzLjVjMCAxLjkzNC0xLjU2NyAzLjUtMy41IDMuNXoiIGZpbGw9IiNGM0YzRjMiLz48cGF0aCBkPSJNMjI0LjAyNSA5Yy4xMDgtMS40MTguNjY5LTIuNzA4IDEuNTQyLTMuNzI2bDEuNDMxIDEuNDMxYy0uNTE2LjY0Ni0uODUxIDEuNDMtLjk0NyAyLjI5NGgtMi4wMjZ6bTIuOTczIDMuMjk1Yy0uNTE2LS42NDYtLjg1MS0xLjQzLS45NDctMi4yOTVoLTIuMDI1Yy4xMDggMS40MTguNjY5IDIuNzA3IDEuNTQyIDMuNzI2bDEuNDMtMS40MzF6bTQuMDAyLTkuMjd2Mi4wMjVjLjg2NS4wOTcgMS42NDkuNDMyIDIuMjk1Ljk0OGwxLjQzMS0xLjQzMWMtMS4wMTgtLjg3My0yLjMwOC0xLjQzMy0zLjcyNi0xLjU0MnptLTMuMjk1IDIuOTc0Yy42NDYtLjUxNiAxLjQzLS44NTEgMi4yOTUtLjk0OHYtMi4wMjZjLTEuNDE4LjEwOC0yLjcwOC42NjktMy43MjYgMS41NDJsMS40MzEgMS40MzJ6bTYuMjk3LjcwN2MuNTE2LjY0Ni44NTEgMS40My45NDcgMi4yOTRoMi4wMjVjLS4xMDgtMS40MTgtLjY2OS0yLjcwOC0xLjU0Mi0zLjcyNmwtMS40MyAxLjQzMnptLTQuMDAyIDcuMjQzYy0uODY1LS4wOTctMS42NDktLjQzMi0yLjI5NS0uOTQ3bC0xLjQzMSAxLjQzMWMxLjAxOC44NzMgMi4zMDcgMS40MzQgMy43MjYgMS41NDJ2LTIuMDI2em00Ljk0OS0zLjk0OWMtLjA5Ny44NjUtLjQzMiAxLjY0OC0uOTQ3IDIuMjk1bDEuNDMxIDEuNDMxYy44NzMtMS4wMTkgMS40MzQtMi4zMDggMS41NDItMy43MjZoLTIuMDI2em0tMS42NTQgMy4wMDJjLS42NDYuNTE2LTEuNDMuODUxLTIuMjk1Ljk0N3YyLjAyNWMxLjQxOS0uMTA4IDIuNzA4LS42NjkgMy43MjYtMS41NDJsLTEuNDMxLTEuNDN6IiBmaWxsPSIjNDI0MjQyIi8+PHJlY3QgeD0iMjAyIiB5PSIyMyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE0IiBmaWxsPSIjMkQyRDJEIi8+PHBhdGggZD0iTTIwMyAyNHYxMmgxNHYtMTJoLTE0em0xMyAxMWgtMTJ2LTEwaDEydjEwem0tNi03di0xaC0xdjVoM3YtNGgtMnptMSAzaC0xdi0yaDF2MnptMy0ydjJoMXYxaC0ydi00aDJ2MWgtMXptLTYtMXY0aC0zdi0yaDF2MWgxdi0xaC0xdi0xaC0xdi0xaDN6IiBmaWxsPSIjQzVDNUM1Ii8+PHBhdGggZD0iTTIxMCAyOWgxdjJoLTF2LTJ6bS0zIDJ2LTFoLTF2MWgxem05LTZ2MTBoLTEydi0xMGgxMnptLTggM2gtM3YxaDF2MWgtMXYyaDN2LTR6bTQgMGgtMnYtMWgtMXY1aDN2LTR6bTMgMGgtMnY0aDJ2LTFoLTF2LTJoMXYtMXoiIGZpbGw9IiMyRDJEMkQiLz48cmVjdCB4PSIyMDIiIHk9IjMiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNCIgZmlsbD0iI0YzRjNGMyIvPjxwYXRoIGQ9Ik0yMDMgNHYxMmgxNHYtMTJoLTE0em0xMyAxMWgtMTJ2LTEwaDEydjEwem0tNi03di0xaC0xdjVoM3YtNGgtMnptMSAzaC0xdi0yaDF2MnptMy0ydjJoMXYxaC0ydi00aDJ2MWgtMXptLTYtMXY0aC0zdi0yaDF2MWgxdi0xaC0xdi0xaC0xdi0xaDN6IiBmaWxsPSIjNDI0MjQyIi8+PHBhdGggZD0iTTIxMCA5aDF2MmgtMXYtMnptLTMgMnYtMWgtMXYxaDF6bTktNnYxMGgtMTJ2LTEwaDEyem0tOCAzaC0zdjFoMXYxaC0xdjJoM3YtNHptNCAwaC0ydi0xaC0xdjVoM3YtNHptMyAwaC0ydjRoMnYtMWgtMXYtMmgxdi0xeiIgZmlsbD0iI0YwRUZGMSIvPjxwYXRoIGQ9Ik0xOTYuNjUyIDMyLjVjLjgxMS0uNTM3IDEuMzQ4LTEuNDU3IDEuMzQ4LTIuNSAwLTEuNjU0LTEuMzQ2LTMtMy0zLS43NzEgMC0xLjQ2OC4zMDEtMiAuNzc5di01Ljc3OWgtMTF2MTJoMy43NjRsLTEuNDUyLjcyNyAxLjQ4MSAxLjQ4Yy4zMjIuMzIyLjgwMy41IDEuMzU0LjUuNDM2IDAgLjg5Ny0uMTExIDEuMzAxLS4zMTNsMy4xNDQtMS41NzJjLjEzNC4wNTMuMjcxLjA5OC40MTQuMTI3bC0uMDA1LjA1MWMwIDEuNjU0IDEuMzQ2IDMgMyAzczMtMS4zNDYgMy0zYy0uMDAxLTEuMDQzLS41MzgtMS45NjMtMS4zNDktMi41eiIgZmlsbD0iIzJEMkQyRCIvPjxwYXRoIGQ9Ik0xOTUgMzNjLS4yOTMgMC0uNTY5LjA2Ni0uODIuMThsLS4yNS0uMjVjLjA0Mi0uMTM3LjA3LS4yNzkuMDctLjQzcy0uMDI4LS4yOTMtLjA3LS40M2wuMjUtLjI1Yy4yNTEuMTEzLjUyNy4xOC44Mi4xOCAxLjEwNCAwIDItLjg5NiAyLTIgMC0xLjEwNS0uODk2LTItMi0ycy0yIC44OTUtMiAyYzAgLjI5My4wNjYuNTY4LjE4LjgybC0uMjUuMjVjLS4xMzctLjA0My0uMjc5LS4wNy0uNDMtLjA3LS4zMzcgMC0uNjQ1LjExNS0uODk1LjMwM2wtMi42MDctMS4zMDUtLjk5OS0uNWMtLjU1Mi0uMjc1LTEuMjIzLS4yNzUtMS40OTkuMDAybC0uNS41IDUgMi41LTUgMi41LjUuNWMuMjc2LjI3NS45NDcuMjc1IDEuNSAwbDEtLjUgMi42MDUtMS4zMDNjLjI1LjE4OC41NTguMzAzLjg5NS4zMDMuMTUgMCAuMjkzLS4wMjkuNDMtLjA3bC4yNS4yNWMtLjExNC4yNS0uMTguNTI3LS4xOC44MiAwIDEuMTA0Ljg5NiAyIDIgMnMyLS44OTYgMi0yYzAtMS4xMDUtLjg5Ni0yLTItMnptMC00Yy41NTMgMCAxIC40NDcgMSAxIDAgLjU1MS0uNDQ3IDEtMSAxcy0xLS40NDktMS0xYzAtLjU1My40NDctMSAxLTF6bS0yLjUgNGMtLjI3NiAwLS41LS4yMjUtLjUtLjUgMC0uMjc3LjIyNC0uNS41LS41cy41LjIyMy41LjVjMCAuMjc1LS4yMjQuNS0uNS41em0yLjUgM2MtLjU1MyAwLTEtLjQ0OS0xLTEgMC0uNTUzLjQ0Ny0xIDEtMXMxIC40NDcgMSAxYzAgLjU1MS0uNDQ3IDEtMSAxem0tMy0xM3Y3LjA1MWMtLjE0Mi4wMjktLjI3OS4wNy0uNDEzLjEyM2wtLjU4Ny0uMTc0di02aC03djdoLTF2LThoOXptLTggMTBoLTF2LTFoMXYxem0yLTFoLTF2MWgxdi0xem0yIDBoLTF2MWgxdi0xeiIgZmlsbD0iI0M1QzVDNSIvPjxwYXRoIGQ9Ik0xODUuNzkzIDI4Ljc5M2wtMS43OTMgMS4yMDd2LTZoN3Y1LjM4MWwtMi41NTQtLjc3N2MtLjgxNi0uNDA5LTEuOTktLjQ3NS0yLjY1My4xODl6bS0uNzkzIDIuMjA3aC43NjRsLS43NjQtLjM4M3YuMzgzem0xMSA0YzAgLjU1MS0uNDQ3IDEtMSAxcy0xLS40NDktMS0xYzAtLjU1My40NDctMSAxLTFzMSAuNDQ3IDEgMXptLTMuNS0zYy0uMjc2IDAtLjUuMjIzLS41LjUgMCAuMjc1LjIyNC41LjUuNXMuNS0uMjI1LjUtLjVjMC0uMjc3LS4yMjQtLjUtLjUtLjV6bTIuNS0zYy0uNTUzIDAtMSAuNDQ3LTEgMSAwIC41NTEuNDQ3IDEgMSAxczEtLjQ0OSAxLTFjMC0uNTUzLS40NDctMS0xLTF6IiBmaWxsPSIjMkQyRDJEIi8+PHBhdGggZD0iTTE5Ni42NTIgMTIuNWMuODExLS41MzggMS4zNDgtMS40NTggMS4zNDgtMi41IDAtMS42NTQtMS4zNDYtMy0zLTMtLjc3MSAwLTEuNDY4LjMwMS0yIC43Nzl2LTUuNzc5aC0xMXYxMmgzLjc2NGwtMS40NTIuNzI3IDEuNDgxIDEuNDhjLjMyMi4zMjIuODAzLjUgMS4zNTQuNS40MzYgMCAuODk3LS4xMTEgMS4zMDEtLjMxM2wzLjE0NC0xLjU3MmMuMTM0LjA1My4yNzEuMDk4LjQxNC4xMjdsLS4wMDUuMDUxYzAgMS42NTQgMS4zNDYgMyAzIDNzMy0xLjM0NiAzLTNjLS4wMDEtMS4wNDMtLjUzOC0xLjk2My0xLjM0OS0yLjV6IiBmaWxsPSIjRjNGM0YzIi8+PHBhdGggZD0iTTE5NSAxM2MtLjI5MyAwLS41NjkuMDY2LS44Mi4xOGwtLjI1LS4yNWMuMDQyLS4xMzcuMDctLjI3OS4wNy0uNDNzLS4wMjgtLjI5My0uMDctLjQzbC4yNS0uMjVjLjI1MS4xMTMuNTI3LjE4LjgyLjE4IDEuMTA0IDAgMi0uODk2IDItMiAwLTEuMTA1LS44OTYtMi0yLTJzLTIgLjg5NS0yIDJjMCAuMjkzLjA2Ni41NjguMTguODJsLS4yNS4yNWMtLjEzNy0uMDQzLS4yNzktLjA3LS40My0uMDctLjMzNyAwLS42NDUuMTE1LS44OTUuMzAzbC0yLjYwNy0xLjMwNC0uOTk5LS41Yy0uNTUyLS4yNzUtMS4yMjMtLjI3NS0xLjQ5OS4wMDJsLS41LjQ5OSA1IDIuNS01IDIuNS41LjVjLjI3Ni4yNzUuOTQ3LjI3NSAxLjUgMGwxLS41IDIuNjA1LTEuMzAzYy4yNS4xODguNTU4LjMwMy44OTUuMzAzLjE1IDAgLjI5My0uMDI5LjQzLS4wN2wuMjUuMjVjLS4xMTMuMjUtLjE4LjUyNy0uMTguODIgMCAxLjEwNC44OTYgMiAyIDJzMi0uODk2IDItMmMwLTEuMTA2LS44OTYtMi0yLTJ6bTAtNGMuNTUzIDAgMSAuNDQ3IDEgMSAwIC41NTEtLjQ0NyAxLTEgMXMtMS0uNDQ5LTEtMWMwLS41NTMuNDQ3LTEgMS0xem0tMi41IDRjLS4yNzYgMC0uNS0uMjI1LS41LS41IDAtLjI3Ny4yMjQtLjUuNS0uNXMuNS4yMjMuNS41YzAgLjI3NS0uMjI0LjUtLjUuNXptMi41IDNjLS41NTMgMC0xLS40NDktMS0xIDAtLjU1My40NDctMSAxLTFzMSAuNDQ3IDEgMWMwIC41NS0uNDQ3IDEtMSAxem0tMy0xM3Y3LjA1MWMtLjE0Mi4wMjktLjI3OS4wNy0uNDEzLjEyM2wtLjU4Ny0uMTc0di02aC03djdoLTF2LThoOXptLTggMTBoLTF2LTFoMXYxem0yLTFoLTF2MWgxdi0xem0yIDBoLTF2MWgxdi0xeiIgZmlsbD0iIzQyNDI0MiIvPjxwYXRoIGQ9Ik0xODUuNzkzIDguNzkzbC0xLjc5MyAxLjIwN3YtNmg3djUuMzgxbC0yLjU1NC0uNzc3Yy0uODE2LS40MDktMS45OS0uNDc1LTIuNjUzLjE4OXptLS43OTMgMi4yMDdoLjc2NGwtLjc2NC0uMzgzdi4zODN6bTExIDRjMCAuNTUxLS40NDcgMS0xIDFzLTEtLjQ0OS0xLTFjMC0uNTUzLjQ0Ny0xIDEtMXMxIC40NDcgMSAxem0tMy41LTNjLS4yNzYgMC0uNS4yMjMtLjUuNSAwIC4yNzUuMjI0LjUuNS41cy41LS4yMjUuNS0uNWMwLS4yNzgtLjIyNC0uNS0uNS0uNXptMi41LTNjLS41NTMgMC0xIC40NDctMSAxIDAgLjU1MS40NDcgMSAxIDFzMS0uNDQ5IDEtMWMwLS41NTMtLjQ0Ny0xLTEtMXoiIGZpbGw9IiNGMEVGRjEiLz48cGF0aCBkPSJNMTc4IDI3di0zaC03di0xaC05djE0aDEzdi0zaDN2LTNoLTF2LTNoLTZ2LTFoN3ptLTggN3YtM2gxdjNoLTF6IiBmaWxsPSIjMkQyRDJEIi8+PHBhdGggZD0iTTE3NyAyNmgtNXYtMWg1djF6bS0xIDNoLTJ2MWgydi0xem0tNCAwaC05djFoOXYtMXptMiA2aC0xMXYxaDExdi0xem0tNS0zaC02djFoNnYtMXptOCAwaC01djFoNXYtMXptLTctOHYzaC03di0zaDd6bS0xIDFoLTV2MWg1di0xeiIgZmlsbD0iI0M1QzVDNSIvPjxyZWN0IHg9IjE2NCIgeT0iMjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiMyRDJEMkQiLz48cGF0aCBkPSJNMTc4IDd2LTNoLTd2LTFoLTl2MTRoMTN2LTNoM3YtM2gtMXYtM2gtNnYtMWg3em0tOCA3di0zaDF2M2gtMXoiIGZpbGw9IiNGM0YzRjMiLz48cGF0aCBkPSJNMTc3IDZoLTV2LTFoNXYxem0tMSAzaC0ydjFoMnYtMXptLTQgMGgtOXYxaDl2LTF6bTIgNmgtMTF2MWgxMXYtMXptLTUtM2gtNnYxaDZ2LTF6bTggMGgtNXYxaDV2LTF6bS03LTh2M2gtN3YtM2g3em0tMSAxaC01djFoNXYtMXoiIGZpbGw9IiM0MjQyNDIiLz48cmVjdCB4PSIxNjQiIHk9IjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNGMEVGRjEiLz48cG9seWdvbiBwb2ludHM9IjE1NC40MTQsMjQgMTQ5LjU4NiwyNCAxNDgsMjUuNTg2IDE0OCwyOCAxNDQsMjggMTQ0LDM1IDE1MiwzNSAxNTIsMzEgMTU0LjQxNCwzMSAxNTYsMjkuNDE0IDE1NiwyNS41ODYiIGZpbGw9IiMyRDJEMkQiLz48ZyBmaWxsPSIjNzVCRUZGIj48cGF0aCBkPSJNMTU0IDI1aC00bC0xIDF2Mmg1djFoLTJ2MWgybDEtMXYtM2wtMS0xem0wIDJoLTR2LTFoNHYxek0xNDUgMzRoNnYtNWgtNnY1em0xLTNoNHYxaC00di0xeiIvPjwvZz48ZyBmaWxsPSIjMkQyRDJEIj48cmVjdCB4PSIxNDYiIHk9IjMxIiB3aWR0aD0iNCIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMTUwIiB5PSIyNiIgd2lkdGg9IjQiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjE1MiIgeT0iMjgiIHdpZHRoPSIyIiBoZWlnaHQ9IjEiLz48L2c+PHBvbHlnb24gcG9pbnRzPSIxNTQuNDE0LDQgMTQ5LjU4Niw0IDE0OCw1LjU4NiAxNDgsOCAxNDQsOCAxNDQsMTUgMTUyLDE1IDE1MiwxMSAxNTQuNDE0LDExIDE1Niw5LjQxNCAxNTYsNS41ODYiIGZpbGw9IiNGM0YzRjMiLz48ZyBmaWxsPSIjMDA1MzlDIj48cGF0aCBkPSJNMTU0IDVoLTRsLTEgMXYyaDV2MWgtMnYxaDJsMS0xdi0zbC0xLTF6bTAgMmgtNHYtMWg0djF6TTE0NSAxNGg2di01aC02djV6bTEtM2g0djFoLTR2LTF6Ii8+PC9nPjxnIGZpbGw9IiNGMEVGRjEiPjxyZWN0IHg9IjE0NiIgeT0iMTEiIHdpZHRoPSI0IiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIxNTAiIHk9IjYiIHdpZHRoPSI0IiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIxNTIiIHk9IjgiIHdpZHRoPSIyIiBoZWlnaHQ9IjEiLz48L2c+PHBhdGggZD0iTTEzOCAyNGgtMTV2NGgtMXY4aDh2LTZoOHYtNnptLTExIDloLTJ2LTJoMnYyeiIgZmlsbD0iIzJEMkQyRCIvPjxwYXRoIGQ9Ik0xMzcgMjloLTd2LTFoLTZ2LTNoMXYyaDF2LTJoMXYyaDF2LTJoMXYyaDF2LTJoMXYyaDF2LTJoMXYyaDF2LTJoMXYyaDF2LTJoMXY0em0tMTIgMXYtMWgtMnY2aDJ2LTFoLTF2LTRoMXptMiA0djFoMnYtNmgtMnYxaDF2NGgtMXoiIGZpbGw9IiNDNUM1QzUiLz48cGF0aCBkPSJNMTI1IDI3di0yaDF2MmgtMXptMyAwdi0yaC0xdjJoMXptMiAwdi0yaC0xdjJoMXptMiAwdi0yaC0xdjJoMXptMiAwdi0yaC0xdjJoMXptMiAwdi0yaC0xdjJoMXoiIGZpbGw9IiMyRDJEMkQiLz48cGF0aCBkPSJNMTM4IDRoLTE1djRoLTF2OGg4di02aDh2LTZ6bS0xMSA5aC0ydi0yaDJ2MnoiIGZpbGw9IiNGM0YzRjMiLz48cGF0aCBkPSJNMTM3IDloLTd2LTFoLTZ2LTNoMXYyaDF2LTJoMXYyaDF2LTJoMXYyaDF2LTJoMXYyaDF2LTJoMXYyaDF2LTJoMXYyaDF2LTJoMXY0em0tMTIgMXYtMWgtMnY2aDJ2LTFoLTF2LTRoMXptMiA0djFoMnYtNmgtMnYxaDF2NGgtMXoiIGZpbGw9IiM0MjQyNDIiLz48cGF0aCBkPSJNMTI1IDd2LTJoMXYyaC0xem0zIDB2LTJoLTF2Mmgxem0yIDB2LTJoLTF2Mmgxem0yIDB2LTJoLTF2Mmgxem0yIDB2LTJoLTF2Mmgxem0yIDB2LTJoLTF2MmgxeiIgZmlsbD0iI0YwRUZGMSIvPjxwYXRoIGQ9Ik0xMTAuNDQ5IDIzYy0xLjYzNyAwLTMuMDc1Ljc5Ny0zLjk4NyAyLjAxMmwuMDAxLjAwMmMtLjYyOC44MzYtMS4wMTQgMS44NjMtMS4wMTQgMi45ODYgMCAuNDY5LjA2Ny45MzMuMiAxLjM4NWwtMi45MDcgMi45MDhjLS42ODcuNjg2LTEuMjUzIDIuMTYxIDAgMy40MTQuNjA5LjYwOSAxLjI0NC43MzYgMS42Ny43MzYuOTU4IDAgMS42MjEtLjYxMyAxLjc0NC0uNzM2bDIuOTA3LTIuOTA4Yy40NTMuMTMzLjkxNy4yMDEgMS4zODYuMjAxIDEuMTIzIDAgMi4xNDktLjM4NyAyLjk4NS0xLjAxNGwuMDAyLjAwMWMxLjIxNi0uOTEyIDIuMDEzLTIuMzUyIDIuMDEzLTMuOTg3IDAtMi43NjItMi4yMzgtNS01LTV6IiBmaWxsPSIjMkQyRDJEIi8+PHBhdGggZD0iTTExNC4wOSAyNi4zNTlsLTIuNjQxIDIuNjQxLTItMiAyLjY0MS0yLjY0MWMtLjUwMi0uMjI3LTEuMDU1LS4zNTktMS42NDEtLjM1OS0yLjIwOSAwLTQgMS43OTEtNCA0IDAgLjU4Ni4xMzMgMS4xMzkuMzU5IDEuNjRsLTMuMzU5IDMuMzZzLTEgMSAwIDJoMmwzLjM1OS0zLjM2Yy41MDIuMjI3IDEuMDU1LjM2IDEuNjQxLjM2IDIuMjA5IDAgNC0xLjc5MSA0LTQgMC0uNTg2LS4xMzMtMS4xMzktLjM1OS0xLjY0MXoiIGZpbGw9IiNDNUM1QzUiLz48cGF0aCBkPSJNMTEwLjQ0OSAzYy0xLjYzNyAwLTMuMDc1Ljc5Ny0zLjk4NyAyLjAxMmwuMDAxLjAwMmMtLjYyOC44MzYtMS4wMTQgMS44NjMtMS4wMTQgMi45ODYgMCAuNDY5LjA2Ny45MzMuMiAxLjM4NWwtMi45MDcgMi45MDhjLS42ODcuNjg2LTEuMjUzIDIuMTYxIDAgMy40MTQuNjA5LjYwOSAxLjI0NC43MzYgMS42Ny43MzYuOTU4IDAgMS42MjEtLjYxMyAxLjc0NC0uNzM2bDIuOTA3LTIuOTA4Yy40NTMuMTMzLjkxNy4yMDEgMS4zODYuMjAxIDEuMTIzIDAgMi4xNDktLjM4NyAyLjk4NS0xLjAxNGwuMDAyLjAwMWMxLjIxNi0uOTEyIDIuMDEzLTIuMzUyIDIuMDEzLTMuOTg3IDAtMi43NjItMi4yMzgtNS01LTV6IiBmaWxsPSIjRjNGM0YzIi8+PHBhdGggZD0iTTExNC4wOSA2LjM1OWwtMi42NDEgMi42NDEtMi0yIDIuNjQxLTIuNjQxYy0uNTAyLS4yMjYtMS4wNTUtLjM1OS0xLjY0MS0uMzU5LTIuMjA5IDAtNCAxLjc5MS00IDQgMCAuNTg2LjEzMyAxLjEzOS4zNTkgMS42NGwtMy4zNTkgMy4zNnMtMSAxIDAgMmgybDMuMzU5LTMuMzZjLjUwMi4yMjcgMS4wNTUuMzYgMS42NDEuMzYgMi4yMDkgMCA0LTEuNzkxIDQtNCAwLS41ODYtLjEzMy0xLjEzOS0uMzU5LTEuNjQxeiIgZmlsbD0iIzQyNDI0MiIvPjxwYXRoIGQ9Ik04OSAzM2gxdi0xYzAtLjUzNy43NDEtMS42MTMgMS0yLS4yNTktLjM4OS0xLTEuNDY3LTEtMnYtMWgtMXYtM2gxYzEuOTY5LjAyMSAzIDEuMjc3IDMgM3YxbDEgMXYybC0xIDF2MWMwIDEuNzA5LTEuMDMxIDIuOTc5LTMgM2gtMXYtM3ptLTIgMGgtMXYtMWMwLS41MzctLjc0MS0xLjYxMy0xLTIgLjI1OS0uMzg5IDEtMS40NjcgMS0ydi0xaDF2LTNoLTFjLTEuOTY5LjAyMS0zIDEuMjc3LTMgM3YxbC0xIDF2MmwxIDF2MWMwIDEuNzA5IDEuMzE3IDIuOTc5IDMuMjg2IDNoLjcxNHYtM3oiIGZpbGw9IiMyRDJEMkQiLz48cGF0aCBkPSJNOTEgMzN2LTFjMC0uODM0LjQ5Ni0xLjczOCAxLTItLjUwNC0uMjctMS0xLjE2OC0xLTJ2LTFjMC0uODQtLjU4NC0xLTEtMXYtMWMyLjA4MyAwIDIgMS4xNjYgMiAydjFjMCAuOTY5LjcwMy45OCAxIDF2MmMtLjMyMi4wMi0xIC4wNTMtMSAxdjFjMCAuODM0LjA4MyAyLTIgMnYtMWMuODMzIDAgMS0xIDEtMXptLTYgMHYtMWMwLS44MzQtLjQ5Ni0xLjczOC0xLTIgLjUwNC0uMjcgMS0xLjE2OCAxLTJ2LTFjMC0uODQuNTg0LTEgMS0xdi0xYy0yLjA4MyAwLTIgMS4xNjYtMiAydjFjMCAuOTY5LS43MDMuOTgtMSAxdjJjLjMyMi4wMiAxIC4wNTMgMSAxdjFjMCAuODM0LS4wODMgMiAyIDJ2LTFjLS44MzMgMC0xLTEtMS0xeiIgZmlsbD0iI0M1QzVDNSIvPjxwYXRoIGQ9Ik04OSAxM2gxdi0xYzAtLjUzNy43NDEtMS42MTMgMS0yLS4yNTktLjM4OS0xLTEuNDY3LTEtMnYtMWgtMXYtM2gxYzEuOTY5LjAyMSAzIDEuMjc3IDMgM3YxbDEgMXYybC0xIDF2MWMwIDEuNzA5LTEuMDMxIDIuOTc5LTMgM2gtMXYtM3ptLTIgMGgtMXYtMWMwLS41MzctLjc0MS0xLjYxMy0xLTIgLjI1OS0uMzg5IDEtMS40NjcgMS0ydi0xaDF2LTNoLTFjLTEuOTY5LjAyMS0zIDEuMjc3LTMgM3YxbC0xIDF2MmwxIDF2MWMwIDEuNzA5IDEuMzE3IDIuOTc5IDMuMjg2IDNoLjcxNHYtM3oiIGZpbGw9IiNGM0YzRjMiLz48cGF0aCBkPSJNOTEgMTN2LTFjMC0uODM0LjQ5Ni0xLjczOCAxLTItLjUwNC0uMjctMS0xLjE2OC0xLTJ2LTFjMC0uODQtLjU4NC0xLTEtMXYtMWMyLjA4MyAwIDIgMS4xNjYgMiAydjFjMCAuOTY5LjcwMy45OCAxIDF2MmMtLjMyMi4wMi0xIC4wNTMtMSAxdjFjMCAuODM0LjA4MyAyLTIgMnYtMWMuODMzIDAgMS0xIDEtMXptLTYgMHYtMWMwLS44MzQtLjQ5Ni0xLjczOC0xLTIgLjUwNC0uMjcgMS0xLjE2OCAxLTJ2LTFjMC0uODQuNTg0LTEgMS0xdi0xYy0yLjA4MyAwLTIgMS4xNjYtMiAydjFjMCAuOTY5LS43MDMuOTgtMSAxdjJjLjMyMi4wMiAxIC4wNTMgMSAxdjFjMCAuODM0LS4wODMgMiAyIDJ2LTFjLS44MzMgMC0xLTEtMS0xeiIgZmlsbD0iIzQyNDI0MiIvPjxwYXRoIGQ9Ik03My41IDM0Yy0xLjkxNCAwLTMuNjAxLTEuMjQyLTQuMjI3LTNoLTEuNjgzYy0uNTI0LjkxLTEuNTAzIDEuNS0yLjU5MSAxLjUtMS42NTQgMC0zLTEuMzQ2LTMtM3MxLjM0Ni0zIDMtM2MxLjA4OCAwIDIuMDY2LjU4OCAyLjU5MSAxLjVoMS42ODNjLjYyNi0xLjc2IDIuMzEzLTMgNC4yMjctMyAyLjQ4MSAwIDQuNSAyLjAxOCA0LjUgNC41IDAgMi40OC0yLjAxOSA0LjUtNC41IDQuNXoiIGZpbGw9IiMyRDJEMkQiLz48cGF0aCBkPSJNNzMuNSAyNmMtMS43NTkgMC0zLjIwNCAxLjMwOC0zLjQ0OSAzaC0zLjEyMmMtLjIyMy0uODYxLS45OTgtMS41LTEuOTI5LTEuNS0xLjEwNCAwLTIgLjg5NS0yIDIgMCAxLjEwNC44OTYgMiAyIDIgLjkzMSAwIDEuNzA2LS42MzkgMS45MjktMS41aDMuMTIyYy4yNDUgMS42OTEgMS42OSAzIDMuNDQ5IDMgMS45MyAwIDMuNS0xLjU3IDMuNS0zLjUgMC0xLjkzMS0xLjU3LTMuNS0zLjUtMy41em0wIDVjLS44MjcgMC0xLjUtLjY3NC0xLjUtMS41IDAtLjgyOC42NzMtMS41IDEuNS0xLjVzMS41LjY3MiAxLjUgMS41YzAgLjgyNi0uNjczIDEuNS0xLjUgMS41eiIgZmlsbD0iIzc1QkVGRiIvPjxjaXJjbGUgY3g9IjczLjUiIGN5PSIyOS41IiByPSIxLjUiIGZpbGw9IiMyRDJEMkQiLz48cGF0aCBkPSJNNzMuNSAxNGMtMS45MTQgMC0zLjYwMS0xLjI0Mi00LjIyNy0zaC0xLjY4M2MtLjUyNC45MS0xLjUwMyAxLjUtMi41OTEgMS41LTEuNjU0IDAtMy0xLjM0Ni0zLTNzMS4zNDYtMyAzLTNjMS4wODggMCAyLjA2Ni41ODggMi41OTEgMS41aDEuNjgzYy42MjYtMS43NiAyLjMxMy0zIDQuMjI3LTMgMi40ODEgMCA0LjUgMi4wMTggNC41IDQuNSAwIDIuNDgtMi4wMTkgNC41LTQuNSA0LjV6IiBmaWxsPSIjRjNGM0YzIi8+PHBhdGggZD0iTTczLjUgNmMtMS43NTkgMC0zLjIwNCAxLjMwOC0zLjQ0OSAzaC0zLjEyMmMtLjIyMy0uODYxLS45OTgtMS41LTEuOTI5LTEuNS0xLjEwNCAwLTIgLjg5NS0yIDIgMCAxLjEwNC44OTYgMiAyIDIgLjkzMSAwIDEuNzA2LS42MzkgMS45MjktMS41aDMuMTIyYy4yNDUgMS42OTEgMS42OSAzIDMuNDQ5IDMgMS45MyAwIDMuNS0xLjU3IDMuNS0zLjUgMC0xLjkzMS0xLjU3LTMuNS0zLjUtMy41em0wIDVjLS44MjcgMC0xLjUtLjY3NC0xLjUtMS41IDAtLjgyOC42NzMtMS41IDEuNS0xLjVzMS41LjY3MiAxLjUgMS41YzAgLjgyNi0uNjczIDEuNS0xLjUgMS41eiIgZmlsbD0iIzAwNTM5QyIvPjxjaXJjbGUgY3g9IjczLjUiIGN5PSI5LjUiIHI9IjEuNSIgZmlsbD0iI0YwRUZGMSIvPjxwYXRoIGQ9Ik01OCAyOC41ODZsLTMtMy0xLjQxNCAxLjQxNGgtMi4xNzJsMS0xLTQtNGgtLjgyOGwtNS41ODYgNS41ODZ2LjgyOGw0IDQgMi40MTQtMi40MTRoLjU4NnY1aDEuNTg2bDMgM2guODI4bDMuNTg2LTMuNTg2di0uODI4bC0yLjA4Ni0yLjA4NiAyLjA4Ni0yLjA4NnYtLjgyOHoiIGZpbGw9IiMyRDJEMkQiLz48cG9seWdvbiBwb2ludHM9IjUzLjk5OCwzMy4wMDIgNTEsMzMgNTEsMjkgNTMsMjkgNTIsMzAgNTQsMzIgNTcsMjkgNTUsMjcgNTQsMjggNDksMjggNTEsMjYgNDgsMjMgNDMsMjggNDYsMzEgNDgsMjkgNTAsMjkgNTAsMzQgNTMsMzQgNTIsMzUgNTQsMzcgNTcsMzQgNTUsMzIiIGZpbGw9IiNDMjdEMUEiLz48cGF0aCBkPSJNNTggOC41ODZsLTMtMy0xLjQxNCAxLjQxNGgtMi4xNzJsMS0xLTQtNGgtLjgyOGwtNS41ODYgNS41ODZ2LjgyOGw0IDQgMi40MTQtMi40MTRoLjU4NnY1aDEuNTg2bDMgM2guODI4bDMuNTg2LTMuNTg2di0uODI4bC0yLjA4Ni0yLjA4NiAyLjA4Ni0yLjA4NnYtLjgyOHoiIGZpbGw9IiNGM0YzRjMiLz48cG9seWdvbiBwb2ludHM9IjUzLjk5OCwxMy4wMDIgNTEsMTMgNTEsOSA1Myw5IDUyLDEwIDU0LDEyIDU3LDkgNTUsNyA1NCw4IDQ5LDggNTEsNiA0OCwzIDQzLDggNDYsMTEgNDgsOSA1MCw5IDUwLDE0IDUzLDE0IDUyLDE1IDU0LDE3IDU3LDE0IDU1LDEyIiBmaWxsPSIjQzI3RDFBIi8+PHBhdGggZD0iTTI5LjI2MyAyNGw0LjczNyAyLjM2OXY1LjIzNmwtNi43OTEgMy4zOTVoLS40MmwtNC43ODktMi4zOTV2LTUuMjM2bDYuNzM5LTMuMzY5aC41MjR6IiBmaWxsPSIjMkQyRDJEIi8+PHBhdGggZD0iTTIzIDI4djRsNCAyIDYtM3YtNGwtNC0yLTYgM3ptNCAxbC0yLTEgNC0yIDIgMS00IDJ6IiBmaWxsPSIjNzVCRUZGIi8+PHBhdGggZD0iTTI5IDI2bDIgMS00IDItMi0xIDQtMnoiIGZpbGw9IiMyRDJEMkQiLz48cGF0aCBkPSJNMjkuMjYzIDRsNC43MzcgMi4zNjl2NS4yMzZsLTYuNzkxIDMuMzk1aC0uNDJsLTQuNzg5LTIuMzk1di01LjIzNmw2LjczOS0zLjM2OWguNTI0eiIgZmlsbD0iI0YzRjNGMyIvPjxwYXRoIGQ9Ik0yMyA4djRsNCAyIDYtM3YtNGwtNC0yLTYgM3ptNCAxbC0yLTEgNC0yIDIgMS00IDJ6IiBmaWxsPSIjMDA1MzlDIi8+PHBhdGggZD0iTTI5IDZsMiAxLTQgMi0yLTEgNC0yeiIgZmlsbD0iI0YwRUZGMSIvPjxwb2x5Z29uIHBvaW50cz0iMiwyNy4zMDggMiwzMi42OTIgNy4yMDksMzYgNy43OTEsMzYgMTMsMzIuNjkyIDEzLDI3LjMwOCA3Ljc5MSwyNCA3LjIwOSwyNCIgZmlsbD0iIzJEMkQyRCIvPjxwYXRoIGQ9Ik03LjUgMjVsLTQuNSAyLjg1N3Y0LjI4NWw0LjUgMi44NTggNC41LTIuODU3di00LjI4NWwtNC41LTIuODU4em0tLjUgOC40OThsLTMtMS45MDV2LTIuODE1bDMgMS45MDV2Mi44MTV6bS0yLjM1OC01LjQ5OGwyLjg1OC0xLjgxNSAyLjg1OCAxLjgxNS0yLjg1OCAxLjgxNS0yLjg1OC0xLjgxNXptNi4zNTggMy41OTNsLTMgMS45MDV2LTIuODE1bDMtMS45MDV2Mi44MTV6IiBmaWxsPSIjQjE4MEQ3Ii8+PHBvbHlnb24gcG9pbnRzPSIxMC4zNTgsMjggNy41LDI5LjgxNSA0LjY0MiwyOCA3LjUsMjYuMTg1IiBmaWxsPSIjMkQyRDJEIi8+PHBvbHlnb24gcG9pbnRzPSI0LDI4Ljc3NyA3LDMwLjY4MyA3LDMzLjQ5OCA0LDMxLjU5MyIgZmlsbD0iIzJEMkQyRCIvPjxwb2x5Z29uIHBvaW50cz0iOCwzMy40OTggOCwzMC42ODMgMTEsMjguNzc3IDExLDMxLjU5MyIgZmlsbD0iIzJEMkQyRCIvPjxwb2x5Z29uIHBvaW50cz0iMiw3LjMwOCAyLDEyLjY5MiA3LjIwOSwxNiA3Ljc5MSwxNiAxMywxMi42OTIgMTMsNy4zMDggNy43OTEsNCA3LjIwOSw0IiBmaWxsPSIjRjNGM0YzIi8+PHBhdGggZD0iTTcuNSA1bC00LjUgMi44NTd2NC4yODVsNC41IDIuODU4IDQuNS0yLjg1N3YtNC4yODZsLTQuNS0yLjg1N3ptLS41IDguNDk4bC0zLTEuOTA1di0yLjgxNmwzIDEuOTA1djIuODE2em0tMi4zNTgtNS40OThsMi44NTgtMS44MTUgMi44NTggMS44MTUtMi44NTggMS44MTUtMi44NTgtMS44MTV6bTYuMzU4IDMuNTkzbC0zIDEuOTA1di0yLjgxNWwzLTEuOTA1djIuODE1eiIgZmlsbD0iIzY1MkQ5MCIvPjxwb2x5Z29uIHBvaW50cz0iMTAuMzU4LDggNy41LDkuODE1IDQuNjQyLDggNy41LDYuMTg1IiBmaWxsPSIjRjBFRkYxIi8+PHBvbHlnb24gcG9pbnRzPSI0LDguNzc3IDcsMTAuNjgzIDcsMTMuNDk4IDQsMTEuNTkzIiBmaWxsPSIjRjBFRkYxIi8+PHBvbHlnb24gcG9pbnRzPSI4LDEzLjQ5OCA4LDEwLjY4MyAxMSw4Ljc3NyAxMSwxMS41OTMiIGZpbGw9IiNGMEVGRjEiLz48L3N2Zz4=);background-repeat:no-repeat}.monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.constructor,.monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.function,.monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.method{background-position:0 -4px}.monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.field,.monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.variable{background-position:-22px -4px}.monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.class{background-position:-43px -3px}.monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.interface{background-position:-63px -4px}.monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.module{background-position:-82px -4px}.monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.property{background-position:-102px -3px}.monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.enum{background-position:-122px -3px}.monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.rule{background-position:-242px -4px}.monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.file{background-position:-262px -4px}.vs-dark .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.constructor,.vs-dark .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.function,.vs-dark .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.method{background-position:0 -24px}.vs-dark .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.field,.vs-dark .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.variable{background-position:-22px -24px}.vs-dark .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.class{background-position:-43px -23px}.vs-dark .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.interface{background-position:-63px -24px}.vs-dark .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.module{background-position:-82px -24px}.vs-dark .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.property{background-position:-102px -23px}.vs-dark .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.enum{background-position:-122px -23px}.vs-dark .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.rule{background-position:-242px -24px}.vs-dark .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.file{background-position:-262px -24px}.hc-black .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon{background:none;display:inline}.hc-black .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon:before{height:16px;width:16px;display:inline-block}.hc-black .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.constructor:before,.hc-black .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.function:before,.hc-black .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.method:before{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI0IxODBENyIgZD0iTTUuNSAzbC00LjUgMi44NTd2NC4yODVsNC41IDIuODU4IDQuNS0yLjg1N3YtNC4yODZsLTQuNS0yLjg1N3ptLS41IDguNDk4bC0zLTEuOTA1di0yLjgxNmwzIDEuOTA1djIuODE2em0tMi4zNTgtNS40OThsMi44NTgtMS44MTUgMi44NTggMS44MTUtMi44NTggMS44MTUtMi44NTgtMS44MTV6bTYuMzU4IDMuNTkzbC0zIDEuOTA1di0yLjgxNWwzLTEuOTA1djIuODE1eiIvPjwvc3ZnPg==);margin-left:2px}.hc-black .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.field:before,.hc-black .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.variable:before{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzc1QkVGRiIgZD0iTTEgNnY0bDQgMiA2LTN2LTRsLTQtMi02IDN6bTQgMWwtMi0xIDQtMiAyIDEtNCAyeiIvPjwvc3ZnPg==);margin-left:2px}.hc-black .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.class:before{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBvbHlnb24gZmlsbD0iI0U4QUI1MyIgcG9pbnRzPSIxMS45OTgsMTEuMDAyIDksMTEgOSw3IDExLDcgMTAsOCAxMiwxMCAxNSw3IDEzLDUgMTIsNiA3LDYgOSw0IDYsMSAxLDYgNCw5IDYsNyA4LDcgOCwxMiAxMSwxMiAxMCwxMyAxMiwxNSAxNSwxMiAxMywxMCIvPjwvc3ZnPg==)}.hc-black .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.interface:before{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzc1QkVGRiIgZD0iTTExLjUgNGMtMS43NTkgMC0zLjIwNCAxLjMwOC0zLjQ0OSAzaC0zLjEyMmMtLjIyMy0uODYxLS45OTgtMS41LTEuOTI5LTEuNS0xLjEwNCAwLTIgLjg5NS0yIDIgMCAxLjEwNC44OTYgMiAyIDIgLjkzMSAwIDEuNzA2LS42MzkgMS45MjktMS41aDMuMTIyYy4yNDUgMS42OTEgMS42OSAzIDMuNDQ5IDMgMS45MyAwIDMuNS0xLjU3IDMuNS0zLjUgMC0xLjkzMS0xLjU3LTMuNS0zLjUtMy41em0wIDVjLS44MjcgMC0xLjUtLjY3NC0xLjUtMS41IDAtLjgyOC42NzMtMS41IDEuNS0xLjVzMS41LjY3MiAxLjUgMS41YzAgLjgyNi0uNjczIDEuNS0xLjUgMS41eiIvPjwvc3ZnPg==)}.hc-black .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.module:before{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI0M1QzVDNSIgZD0iTTkgMTF2LTFjMC0uODM0LjQ5Ni0xLjczOCAxLTItLjUwNC0uMjctMS0xLjE2OC0xLTJ2LTFjMC0uODQtLjU4NC0xLTEtMXYtMWMyLjA4MyAwIDIgMS4xNjYgMiAydjFjMCAuOTY5LjcwMy45OCAxIDF2MmMtLjMyMi4wMi0xIC4wNTMtMSAxdjFjMCAuODM0LjA4MyAyLTIgMnYtMWMuODMzIDAgMS0xIDEtMXptLTYgMHYtMWMwLS44MzQtLjQ5Ni0xLjczOC0xLTIgLjUwNC0uMjcgMS0xLjE2OCAxLTJ2LTFjMC0uODQuNTg0LTEgMS0xdi0xYy0yLjA4MyAwLTIgMS4xNjYtMiAydjFjMCAuOTY5LS43MDMuOTgtMSAxdjJjLjMyMi4wMiAxIC4wNTMgMSAxdjFjMCAuODM0LS4wODMgMiAyIDJ2LTFjLS44MzMgMC0xLTEtMS0xeiIvPjwvc3ZnPg==);margin-left:2px}.hc-black .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.property:before{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI0M1QzVDNSIgZD0iTTEyLjA5IDQuMzU5bC0yLjY0MSAyLjY0MS0yLTIgMi42NDEtMi42NDFjLS41MDItLjIyNi0xLjA1NS0uMzU5LTEuNjQxLS4zNTktMi4yMDkgMC00IDEuNzkxLTQgNCAwIC41ODYuMTMzIDEuMTM5LjM1OSAxLjY0bC0zLjM1OSAzLjM2cy0xIDEgMCAyaDJsMy4zNTktMy4zNmMuNTAzLjIyNiAxLjA1NS4zNiAxLjY0MS4zNiAyLjIwOSAwIDQtMS43OTEgNC00IDAtLjU4Ni0uMTMzLTEuMTM5LS4zNTktMS42NDF6Ii8+PC9zdmc+);margin-left:1px}.hc-black .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.enum:before,.hc-black .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.value:before{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PGcgZmlsbD0iIzc1QkVGRiI+PHBhdGggZD0iTTEyIDNoLTRsLTEgMXYyaDV2MWgtMnYxaDJsMS0xdi0zbC0xLTF6bTAgMmgtNHYtMWg0djF6TTMgMTJoNnYtNWgtNnY1em0xLTNoNHYxaC00di0xeiIvPjwvZz48L3N2Zz4=)}.hc-black .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.rule:before{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiI+PHBhdGggZmlsbD0iI0M1QzVDNSIgZD0iTTEwIDVoLTh2LTJoOHYyem0wIDFoLTZ2MWg2di0xem0wIDJoLTZ2MWg2di0xeiIvPjwvc3ZnPg==)}.hc-black .monaco-quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.file:before{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI0M1QzVDNSIgZD0iTTkuNjc2IDJoLTYuNjc2djEyaDEwdi05bC0zLjMyNC0zem0yLjMyNCAxMWgtOHYtMTBoNXYzaDN2N3oiLz48L3N2Zz4=)}.monaco-editor{font-family:-apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,HelveticaNeue-Light,Ubuntu,Droid Sans,sans-serif}.monaco-editor.hc-black .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label,.monaco-editor.vs-dark .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label,.monaco-menu .monaco-action-bar.vertical .action-item .action-menu-item:focus .action-label{stroke-width:1.2px}.monaco-editor-hover p{margin:0}.monaco-editor.hc-black{-ms-high-contrast-adjust:none}@media screen and (-ms-high-contrast:active){.monaco-editor.vs-dark .view-overlays .current-line,.monaco-editor.vs .view-overlays .current-line{border-color:windowtext!important;border-left:0;border-right:0}.monaco-editor.vs-dark .cursor,.monaco-editor.vs .cursor{background-color:windowtext!important}.monaco-editor.vs-dark .dnd-target,.monaco-editor.vs .dnd-target{border-color:windowtext!important}.monaco-editor.vs-dark .selected-text,.monaco-editor.vs .selected-text{background-color:highlight!important}.monaco-editor.vs-dark .view-line,.monaco-editor.vs .view-line{-ms-high-contrast-adjust:none}.monaco-editor.vs-dark .view-line span,.monaco-editor.vs .view-line span{color:windowtext!important}.monaco-editor.vs-dark .view-line span.inline-selected-text,.monaco-editor.vs .view-line span.inline-selected-text{color:highlighttext!important}.monaco-editor.vs-dark .view-overlays,.monaco-editor.vs .view-overlays{-ms-high-contrast-adjust:none}.monaco-editor.vs-dark .reference-decoration,.monaco-editor.vs-dark .selectionHighlight,.monaco-editor.vs-dark .wordHighlight,.monaco-editor.vs-dark .wordHighlightStrong,.monaco-editor.vs .reference-decoration,.monaco-editor.vs .selectionHighlight,.monaco-editor.vs .wordHighlight,.monaco-editor.vs .wordHighlightStrong{border:2px dotted highlight!important;background:transparent!important;box-sizing:border-box}.monaco-editor.vs-dark .rangeHighlight,.monaco-editor.vs .rangeHighlight{background:transparent!important;border:1px dotted activeborder!important;box-sizing:border-box}.monaco-editor.vs-dark .bracket-match,.monaco-editor.vs .bracket-match{border-color:windowtext!important;background:transparent!important}.monaco-editor.vs-dark .currentFindMatch,.monaco-editor.vs-dark .findMatch,.monaco-editor.vs .currentFindMatch,.monaco-editor.vs .findMatch{border:2px dotted activeborder!important;background:transparent!important;box-sizing:border-box}.monaco-editor.vs-dark .find-widget,.monaco-editor.vs .find-widget{border:1px solid windowtext}.monaco-editor.vs-dark .monaco-list .monaco-list-row,.monaco-editor.vs .monaco-list .monaco-list-row{-ms-high-contrast-adjust:none;color:windowtext!important}.monaco-editor.vs-dark .monaco-list .monaco-list-row.focused,.monaco-editor.vs .monaco-list .monaco-list-row.focused{color:highlighttext!important;background-color:highlight!important}.monaco-editor.vs-dark .monaco-list .monaco-list-row:hover,.monaco-editor.vs .monaco-list .monaco-list-row:hover{background:transparent!important;border:1px solid highlight;box-sizing:border-box}.monaco-editor.vs-dark .monaco-tree .monaco-tree-row,.monaco-editor.vs .monaco-tree .monaco-tree-row{-ms-high-contrast-adjust:none;color:windowtext!important}.monaco-editor.vs-dark .monaco-tree .monaco-tree-row.focused,.monaco-editor.vs-dark .monaco-tree .monaco-tree-row.selected,.monaco-editor.vs .monaco-tree .monaco-tree-row.focused,.monaco-editor.vs .monaco-tree .monaco-tree-row.selected{color:highlighttext!important;background-color:highlight!important}.monaco-editor.vs-dark .monaco-tree .monaco-tree-row:hover,.monaco-editor.vs .monaco-tree .monaco-tree-row:hover{background:transparent!important;border:1px solid highlight;box-sizing:border-box}.monaco-editor.vs-dark .monaco-scrollable-element>.scrollbar,.monaco-editor.vs .monaco-scrollable-element>.scrollbar{-ms-high-contrast-adjust:none;background:background!important;border:1px solid windowtext;box-sizing:border-box}.monaco-editor.vs-dark .monaco-scrollable-element>.scrollbar>.slider,.monaco-editor.vs .monaco-scrollable-element>.scrollbar>.slider{background:windowtext!important}.monaco-editor.vs-dark .monaco-scrollable-element>.scrollbar>.slider.active,.monaco-editor.vs-dark .monaco-scrollable-element>.scrollbar>.slider:hover,.monaco-editor.vs .monaco-scrollable-element>.scrollbar>.slider.active,.monaco-editor.vs .monaco-scrollable-element>.scrollbar>.slider:hover{background:highlight!important}.monaco-editor.vs-dark .decorationsOverviewRuler,.monaco-editor.vs .decorationsOverviewRuler{opacity:0}.monaco-editor.vs-dark .minimap,.monaco-editor.vs .minimap{display:none}.monaco-editor.vs-dark .squiggly-d-error,.monaco-editor.vs .squiggly-d-error{background:transparent!important;border-bottom:4px double #e47777}.monaco-editor.vs-dark .squiggly-b-info,.monaco-editor.vs-dark .squiggly-c-warning,.monaco-editor.vs .squiggly-b-info,.monaco-editor.vs .squiggly-c-warning{border-bottom:4px double #71b771}.monaco-editor.vs-dark .squiggly-a-hint,.monaco-editor.vs .squiggly-a-hint{border-bottom:4px double #6c6c6c}.monaco-editor.vs-dark .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label,.monaco-editor.vs .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label{-ms-high-contrast-adjust:none;color:highlighttext!important;background-color:highlight!important}.monaco-editor.vs-dark .monaco-menu .monaco-action-bar.vertical .action-menu-item:hover .action-label,.monaco-editor.vs .monaco-menu .monaco-action-bar.vertical .action-menu-item:hover .action-label{-ms-high-contrast-adjust:none;background:transparent!important;border:1px solid highlight;box-sizing:border-box}.monaco-diff-editor.vs-dark .diffOverviewRuler,.monaco-diff-editor.vs .diffOverviewRuler{display:none}.monaco-editor.vs-dark .line-delete,.monaco-editor.vs-dark .line-insert,.monaco-editor.vs .line-delete,.monaco-editor.vs .line-insert{background:transparent!important;border:1px solid highlight!important;box-sizing:border-box}.monaco-editor.vs-dark .char-delete,.monaco-editor.vs-dark .char-insert,.monaco-editor.vs .char-delete,.monaco-editor.vs .char-insert{background:transparent!important}}.context-view .monaco-menu{min-width:130px}.context-view-block{position:fixed;left:0;top:0;z-index:-1;width:100%;height:100%}
\ No newline at end of file
diff --git a/test/rebuild.test.ts b/test/rebuild.test.ts
index d93bf64af2..9643d69d3b 100644
--- a/test/rebuild.test.ts
+++ b/test/rebuild.test.ts
@@ -1,3 +1,5 @@
+import * as fs from 'fs';
+import * as path from 'path';
 import 'mocha';
 import { expect } from 'chai';
 import { addHoverClass } from '../src/rebuild';
@@ -40,4 +42,16 @@ describe('add hover class to hover selector related rules', () => {
     const cssText = '.a::after { content: ":hover" }';
     expect(addHoverClass(cssText)).to.equal(cssText);
   });
+
+  it('benchmark', () => {
+    const cssText = fs.readFileSync(
+      path.resolve(__dirname, './css/benchmark.css'),
+      'utf8',
+    );
+    const start = process.hrtime();
+    addHoverClass(cssText);
+    const end = process.hrtime(start);
+    const duration = end[0] * 1_000 + end[1] / 1_000_000;
+    expect(duration).to.below(100);
+  });
 });

From b22ccd6bc054e3ad5d4786e6e29ab3909d58b090 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 4 Aug 2019 14:40:54 +0800
Subject: [PATCH 150/524] fix #14 fix innerText cap issue

---
 src/snapshot.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 0ffa96d8da..0cd79471d9 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -158,7 +158,11 @@ function serializeNode(
         tagName === 'style' &&
         (n as HTMLStyleElement).sheet &&
         // TODO: Currently we only try to get dynamic stylesheet when it is an empty style element
-        !(n as HTMLElement).innerText.trim().length
+        !(
+          (n as HTMLElement).innerText ||
+          (n as HTMLElement).textContent ||
+          ''
+        ).trim().length
       ) {
         const cssText = getCssRulesString((n as HTMLStyleElement)
           .sheet as CSSStyleSheet);

From 34170b277bf7e6ae1f698fedacf2cd12cc554c0f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 4 Aug 2019 14:43:02 +0800
Subject: [PATCH 151/524] Release 0.7.13

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c827bc5ef7..d11e6eb29c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.12",
+  "version": "0.7.13",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From e48d50a7186da5f30f36a4d07dd4b9a0c6b0bd36 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 4 Aug 2019 14:48:22 +0800
Subject: [PATCH 152/524] update typings

---
 typings/css.d.ts | 92 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 typings/css.d.ts

diff --git a/typings/css.d.ts b/typings/css.d.ts
new file mode 100644
index 0000000000..6207385ab7
--- /dev/null
+++ b/typings/css.d.ts
@@ -0,0 +1,92 @@
+export interface ParserOptions {
+    silent?: boolean;
+    source?: string;
+}
+export interface ParserError {
+    message?: string;
+    reason?: string;
+    filename?: string;
+    line?: number;
+    column?: number;
+    source?: string;
+}
+export interface Loc {
+    line?: number;
+    column?: number;
+}
+export interface Node {
+    type?: string;
+    parent?: Node;
+    position?: {
+        start?: Loc;
+        end?: Loc;
+        source?: string;
+        content?: string;
+    };
+}
+export interface Rule extends Node {
+    selectors?: string[];
+    declarations?: Array<Declaration | Comment>;
+}
+export interface Declaration extends Node {
+    property?: string;
+    value?: string;
+}
+export interface Comment extends Node {
+    comment?: string;
+}
+export interface Charset extends Node {
+    charset?: string;
+}
+export interface CustomMedia extends Node {
+    name?: string;
+    media?: string;
+}
+export interface Document extends Node {
+    document?: string;
+    vendor?: string;
+    rules?: Array<Rule | Comment | AtRule>;
+}
+export interface FontFace extends Node {
+    declarations?: Array<Declaration | Comment>;
+}
+export interface Host extends Node {
+    rules?: Array<Rule | Comment | AtRule>;
+}
+export interface Import extends Node {
+    import?: string;
+}
+export interface KeyFrames extends Node {
+    name?: string;
+    vendor?: string;
+    keyframes?: Array<KeyFrame | Comment>;
+}
+export interface KeyFrame extends Node {
+    values?: string[];
+    declarations?: Array<Declaration | Comment>;
+}
+export interface Media extends Node {
+    media?: string;
+    rules?: Array<Rule | Comment | AtRule>;
+}
+export interface Namespace extends Node {
+    namespace?: string;
+}
+export interface Page extends Node {
+    selectors?: string[];
+    declarations?: Array<Declaration | Comment>;
+}
+export interface Supports extends Node {
+    supports?: string;
+    rules?: Array<Rule | Comment | AtRule>;
+}
+export declare type AtRule = Charset | CustomMedia | Document | FontFace | Host | Import | KeyFrames | Media | Namespace | Page | Supports;
+export interface StyleRules {
+    source?: string;
+    rules: Array<Rule | Comment | AtRule>;
+    parsingErrors?: ParserError[];
+}
+export interface Stylesheet extends Node {
+    stylesheet?: StyleRules;
+}
+export declare function parse(css: string, options?: ParserOptions): Stylesheet;

From 1f052c1b2a44cc00f9dd7c7868f692a309cfb7b8 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 5 Aug 2019 12:19:15 +0800
Subject: [PATCH 153/524] update rrweb

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 06984d63e0..e91d203d31 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.7.17"
+    "rrweb": "^0.7.19"
   },
   "scripts": {
     "build": "rollup -c",

From 92620149482d383eff403cd1d16412c65c397162 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 5 Aug 2019 12:20:19 +0800
Subject: [PATCH 154/524] Release 0.3.15

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e91d203d31..6faf126f94 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.14",
+  "version": "0.3.15",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From ada77fe861245363ebfbe79a0805c355c35042d7 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 7 Aug 2019 23:38:09 +0800
Subject: [PATCH 155/524] remove child node before set default value

---
 src/rebuild.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 94cc244cb3..7200ef8172 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -106,6 +106,12 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
           }
           if (isTextarea || isRemoteOrDynamicCss) {
             const child = doc.createTextNode(value);
+            // https://github.com/rrweb-io/rrweb/issues/112
+            for (const c of Array.from(node.childNodes)) {
+              if (c.nodeType === node.TEXT_NODE) {
+                node.removeChild(c);
+              }
+            }
             node.appendChild(child);
             continue;
           }

From 950c94d69c0e4f0e494d6d304a984be4e7c7bfe7 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 7 Aug 2019 23:39:50 +0800
Subject: [PATCH 156/524] Release 0.7.14

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d11e6eb29c..a18289c199 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.13",
+  "version": "0.7.14",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 4248b3d2a937a4a6fa36d191bd42a7bbbaa66442 Mon Sep 17 00:00:00 2001
From: dphuang2 <dylan.p.huang@gmail.com>
Date: Fri, 9 Aug 2019 19:13:03 -0700
Subject: [PATCH 157/524] Ignore broken CSS (#15)

Broken CSS inside a page will throw an error on our behalf. This should
be ignored because we are not in control of the CSS on the page we are
recording.
---
 src/rebuild.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 7200ef8172..a0baf2aa4f 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -58,7 +58,7 @@ function getTagName(n: elementNode): string {
 
 const HOVER_SELECTOR = /([^\\]):hover/g;
 export function addHoverClass(cssText: string): string {
-  const ast = parse(cssText);
+  const ast = parse(cssText, {silent: true});
   if (!ast.stylesheet) {
     return cssText;
   }

From 4a11591ad781fd1f0431777d255edc89f670551a Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 10 Aug 2019 17:31:00 +0800
Subject: [PATCH 158/524] Release 0.7.15

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a18289c199..db738cba71 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.14",
+  "version": "0.7.15",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 13a2985d48dec5899024039635780e9934386df3 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 11 Aug 2019 20:43:09 +0800
Subject: [PATCH 159/524] pass mask all input option recursively

---
 src/snapshot.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 0cd79471d9..37c97887c0 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -289,6 +289,7 @@ export function serializeNodeWithId(
         blockClass,
         skipChild,
         inlineStylesheet,
+        maskAllInputs,
       );
       if (serializedChildNode) {
         serializedNode.childNodes.push(serializedChildNode);

From f6b93ee27cbb5fc2df970774107fc8cabe042a1f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 11 Aug 2019 20:43:47 +0800
Subject: [PATCH 160/524] Release 0.7.16

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index db738cba71..2a84bd35dd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.15",
+  "version": "0.7.16",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 215aeeb6b1e45b78ee65ee818962f0cbf44ea0b3 Mon Sep 17 00:00:00 2001
From: yz-yu <yanzhen@smartx.com>
Date: Tue, 27 Aug 2019 13:42:07 +0800
Subject: [PATCH 161/524] add the HACK_CSS flag to bypass css parsing (#16)

---
 src/rebuild.ts       | 23 ++++++++++++++++-------
 typings/rebuild.d.ts |  4 ++--
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index a0baf2aa4f..c5d5885fdf 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -58,7 +58,7 @@ function getTagName(n: elementNode): string {
 
 const HOVER_SELECTOR = /([^\\]):hover/g;
 export function addHoverClass(cssText: string): string {
-  const ast = parse(cssText, {silent: true});
+  const ast = parse(cssText, { silent: true });
   if (!ast.stylesheet) {
     return cssText;
   }
@@ -75,7 +75,11 @@ export function addHoverClass(cssText: string): string {
   return cssText;
 }
 
-function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
+function buildNode(
+  n: serializedNodeWithId,
+  doc: Document,
+  HACK_CSS: boolean,
+): Node | null {
   switch (n.type) {
     case NodeType.Document:
       return doc.implementation.createDocument(null, '', null);
@@ -101,7 +105,7 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
           const isTextarea = tagName === 'textarea' && name === 'value';
           const isRemoteOrDynamicCss =
             tagName === 'style' && name === '_cssText';
-          if (isRemoteOrDynamicCss) {
+          if (isRemoteOrDynamicCss && HACK_CSS) {
             value = addHoverClass(value);
           }
           if (isTextarea || isRemoteOrDynamicCss) {
@@ -141,7 +145,7 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
       return node;
     case NodeType.Text:
       return doc.createTextNode(
-        n.isStyle ? addHoverClass(n.textContent) : n.textContent,
+        n.isStyle && HACK_CSS ? addHoverClass(n.textContent) : n.textContent,
       );
     case NodeType.CDATA:
       return doc.createCDATASection(n.textContent);
@@ -157,8 +161,9 @@ export function buildNodeWithSN(
   doc: Document,
   map: idNodeMap,
   skipChild = false,
+  HACK_CSS = true,
 ): INode | null {
-  let node = buildNode(n, doc);
+  let node = buildNode(n, doc, HACK_CSS);
   if (!node) {
     return null;
   }
@@ -177,7 +182,7 @@ export function buildNodeWithSN(
     !skipChild
   ) {
     for (const childN of n.childNodes) {
-      const childNode = buildNodeWithSN(childN, doc, map);
+      const childNode = buildNodeWithSN(childN, doc, map, false, HACK_CSS);
       if (!childNode) {
         console.warn('Failed to rebuild', childN);
       } else {
@@ -191,9 +196,13 @@ export function buildNodeWithSN(
 function rebuild(
   n: serializedNodeWithId,
   doc: Document,
+  /**
+   * This is not a public API yet, just for POC
+   */
+  HACK_CSS: boolean = true,
 ): [Node | null, idNodeMap] {
   const idNodeMap: idNodeMap = {};
-  return [buildNodeWithSN(n, doc, idNodeMap), idNodeMap];
+  return [buildNodeWithSN(n, doc, idNodeMap, false, HACK_CSS), idNodeMap];
 }
 
 export default rebuild;
diff --git a/typings/rebuild.d.ts b/typings/rebuild.d.ts
index 99c76da59c..5ea522d8e3 100644
--- a/typings/rebuild.d.ts
+++ b/typings/rebuild.d.ts
@@ -1,5 +1,5 @@
 import { serializedNodeWithId, idNodeMap, INode } from './types';
 export declare function addHoverClass(cssText: string): string;
-export declare function buildNodeWithSN(n: serializedNodeWithId, doc: Document, map: idNodeMap, skipChild?: boolean): INode | null;
-declare function rebuild(n: serializedNodeWithId, doc: Document): [Node | null, idNodeMap];
+export declare function buildNodeWithSN(n: serializedNodeWithId, doc: Document, map: idNodeMap, skipChild?: boolean, HACK_CSS?: boolean): INode | null;
+declare function rebuild(n: serializedNodeWithId, doc: Document, HACK_CSS?: boolean): [Node | null, idNodeMap];
 export default rebuild;

From 32f14b30277e40f44ff630d6099ec67b904356d8 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 27 Aug 2019 13:45:00 +0800
Subject: [PATCH 162/524] Release 0.7.17

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2a84bd35dd..839ec32d3e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.16",
+  "version": "0.7.17",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 31ea2db94d337de1def74b5e7d4f204109c1a651 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 29 Aug 2019 16:11:00 +0800
Subject: [PATCH 163/524] Release 0.3.16

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 6faf126f94..8a8b28c701 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.15",
+  "version": "0.3.16",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.7.19"
+    "rrweb": "^0.7.23"
   },
   "scripts": {
     "build": "rollup -c",

From a69791b7f5296a92b420f488fd55cf0c7e6fddb6 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 31 Aug 2019 16:13:02 +0800
Subject: [PATCH 164/524] fix data url regexp

---
 src/snapshot.ts       | 2 +-
 test/snapshot.test.ts | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 37c97887c0..5f76994e0c 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -53,7 +53,7 @@ function extractOrigin(url: string): string {
 
 const URL_IN_CSS_REF = /url\((?:'([^']*)'|"([^"]*)"|([^)]*))\)/gm;
 const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/;
-const DATA_URI = /^(data:)([\w\/\+]+);(charset=[\w-]+|base64).*,(.*)/gi;
+const DATA_URI = /^(data:)([\w\/\+\-]+);(charset=[\w-]+|base64).*,(.*)/i;
 export function absoluteToStylesheet(cssText: string, href: string): string {
   return cssText.replace(URL_IN_CSS_REF, (origin, path1, path2, path3) => {
     const filePath = path1 || path2 || path3;
diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts
index c2f736f9a4..36d697ce98 100644
--- a/test/snapshot.test.ts
+++ b/test/snapshot.test.ts
@@ -63,6 +63,12 @@ describe('absolute url to stylesheet', () => {
     expect(
       absoluteToStylesheet('url(data:image/gif;base64,ABC)', href),
     ).to.equal('url(data:image/gif;base64,ABC)');
+    expect(
+      absoluteToStylesheet(
+        'url(data:application/font-woff;base64,d09GMgABAAAAAAm)',
+        href,
+      ),
+    ).to.equal('url(data:application/font-woff;base64,d09GMgABAAAAAAm)');
   });
 
   it('can handle empty path', () => {

From 44bdf69a1d2cb14317a3afc67e10170b679bc148 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 31 Aug 2019 16:13:32 +0800
Subject: [PATCH 165/524] Release 0.7.18

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 839ec32d3e..95a0120a10 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.17",
+  "version": "0.7.18",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 7ab5456b3e0d26827b7d93b28c52ad6f148e4d96 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 19 Sep 2019 12:40:51 +0800
Subject: [PATCH 166/524] export add hover class method

---
 src/index.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 5b2b0b9f46..2240f589cf 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,11 @@
 import snapshot, { serializeNodeWithId } from './snapshot';
-import rebuild, { buildNodeWithSN } from './rebuild';
+import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
 export * from './types';
 
-export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN };
+export {
+  snapshot,
+  serializeNodeWithId,
+  rebuild,
+  buildNodeWithSN,
+  addHoverClass,
+};

From 7203517d157bfa9cb9892498afa60d58b2bf7dcf Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 19 Sep 2019 12:41:12 +0800
Subject: [PATCH 167/524] Release 0.7.19

---
 package.json       | 2 +-
 typings/index.d.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 95a0120a10..42c61bd6ff 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.18",
+  "version": "0.7.19",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 87f610a3dd..420b997e41 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,4 +1,4 @@
 import snapshot, { serializeNodeWithId } from './snapshot';
-import rebuild, { buildNodeWithSN } from './rebuild';
+import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
 export * from './types';
-export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN };
+export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, };

From 30bbd9e21da235f3265d327cf3ef387cebf54604 Mon Sep 17 00:00:00 2001
From: Filip Slatinac <Fslat092@uottawa.ca>
Date: Mon, 30 Sep 2019 23:32:50 -0400
Subject: [PATCH 168/524] Added srcset support (#18)

* added src set as a parsed attribute

* added tests

* changed to /a

* added multiple attribute handling

* added better comment

* made snapshot ignore invalid input as if it is invalid input in the original DOM, it should stay invalid in the recreated DOM

* added extra absolute test case

* code style

* addressed comments
---
 src/snapshot.ts                        | 31 ++++++++++++++++++++++++++
 test/__snapshots__/integration.ts.snap |  5 ++++-
 test/html/with-relative-res.html       |  3 +++
 test/snapshot.test.ts                  |  2 +-
 4 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 5f76994e0c..1ebb870963 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -85,7 +85,36 @@ export function absoluteToStylesheet(cssText: string, href: string): string {
   });
 }
 
+function getAbsoluteSrcsetString(doc: Document, attributeValue: string) {
+  if(attributeValue.trim() === "") {
+    return attributeValue
+  }
+
+  const srcsetValues = attributeValue.split(",")
+  // srcset attributes is defined as such:
+  // srcset = "url size,url1 size1"
+  const resultingSrcsetString = srcsetValues.map((srcItem) => {
+       // removing all but middle spaces
+       const trimmedSrcItem = srcItem.trimLeft().trimRight()
+       const urlAndSize = trimmedSrcItem.split(" ")
+       // this means we have both 0:url and 1:size
+       if (urlAndSize.length === 2) {
+         const absUrl = absoluteToDoc(doc, urlAndSize[0])
+         return `${absUrl} ${urlAndSize[1]}`
+       } else if(urlAndSize.length === 1){
+         const absUrl = absoluteToDoc(doc, urlAndSize[0])
+         return `${absUrl}`
+       }
+       return ""
+  }).join(',')
+
+  return resultingSrcsetString
+}
+
 function absoluteToDoc(doc: Document, attributeValue: string): string {
+  if (attributeValue.trim() === ""){
+    return attributeValue
+  }
   const a: HTMLAnchorElement = doc.createElement('a');
   a.href = attributeValue;
   return a.href;
@@ -132,6 +161,8 @@ function serializeNode(
         // relative path in attribute
         if (name === 'src' || name === 'href') {
           attributes[name] = absoluteToDoc(doc, value);
+        } else if (name == 'srcset') {
+          attributes[name] = getAbsoluteSrcsetString(doc, value)
         } else if (name === 'style') {
           attributes[name] = absoluteToStylesheet(value, location.href);
         } else {
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 2ee77d42c5..3a38ee1013 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -181,7 +181,10 @@ exports[`[html file]: with-relative-res.html 1`] = `
 </head>
 <body>
   <a href=\\"http://localhost:3030/basic.html\\"></a>
-  <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"\\" /></body></html>"
+  <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"\\" />
+  <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg\\" />
+  <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://exmple.com/a.jpg\\" />
+  <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg 3x,http://localhost:3030/a.jpg 45x,http://localhost:3030/b.png\\" /></body></html>"
 `;
 
 exports[`[html file]: with-script.html 1`] = `
diff --git a/test/html/with-relative-res.html b/test/html/with-relative-res.html
index 9e75f035c1..f8cd16dc9d 100644
--- a/test/html/with-relative-res.html
+++ b/test/html/with-relative-res.html
@@ -9,5 +9,8 @@
 <body>
   <a href="./basic.html"></a>
   <img src="./a.jpg" alt="" srcset="">
+  <img src="./a.jpg" alt="" srcset="/a.jpg">
+  <img src="./a.jpg" alt="" srcset="http://exmple.com/a.jpg ">
+  <img src="./a.jpg" alt="" srcset="/a.jpg 3x, /a.jpg 45x , /b.png">
 </body>
 </html>
\ No newline at end of file
diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts
index 36d697ce98..9c58dca745 100644
--- a/test/snapshot.test.ts
+++ b/test/snapshot.test.ts
@@ -5,7 +5,7 @@ import { absoluteToStylesheet } from '../src/snapshot';
 describe('absolute url to stylesheet', () => {
   const href = 'http://localhost/css/style.css';
 
-  it('cam handle relative path', () => {
+  it('can handle relative path', () => {
     expect(absoluteToStylesheet('url(a.jpg)', href)).to.equal(
       `url('http://localhost/css/a.jpg')`,
     );

From a58a118f2c1a6b1bd81c2737448d5ee8619108a0 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 4 Oct 2019 23:13:58 +0800
Subject: [PATCH 169/524] Release 0.7.20

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 42c61bd6ff..32b8da8af6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.19",
+  "version": "0.7.20",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From cd9de42b6dc0013bec188b4517170d097a451f25 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 12 Oct 2019 16:54:41 +0800
Subject: [PATCH 170/524] add picture tag test

---
 test/__snapshots__/integration.ts.snap | 9 +++++++++
 test/html/picture.html                 | 8 ++++++++
 2 files changed, 17 insertions(+)
 create mode 100644 test/html/picture.html

diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 3a38ee1013..e5b4fc73fa 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -172,6 +172,15 @@ exports[`[html file]: invalid-attribute.html 1`] = `
 </body></html>"
 `;
 
+exports[`[html file]: picture.html 1`] = `
+"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
+    <picture>
+      <source type=\\"image/webp\\" srcset=\\"http://localhost:3030/assets/img/characters/robot.webp\\" />
+      <img src=\\"http://localhost:3030/assets/img/characters/robot.png\\" />
+    </picture>
+  </body></html>"
+`;
+
 exports[`[html file]: with-relative-res.html 1`] = `
 "<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
diff --git a/test/html/picture.html b/test/html/picture.html
new file mode 100644
index 0000000000..27d83686e0
--- /dev/null
+++ b/test/html/picture.html
@@ -0,0 +1,8 @@
+<html>
+  <body>
+    <picture>
+      <source type="image/webp" srcset="assets/img/characters/robot.webp" />
+      <img src="assets/img/characters/robot.png" />
+    </picture>
+  </body>
+</html>

From 358d5e0d502581eea8bee9c8c0596aea725eaec1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=B3=BD=E5=BA=B7?= <wu.zekang@outlook.com>
Date: Sat, 12 Oct 2019 17:02:24 +0800
Subject: [PATCH 171/524] Add canvas image content support (#20)

* Add canvas image content support

* use rr_dataURL as the key so we know its a rrweb-added attribute.

* fix canvas rr_dataURL rebuild
---
 src/rebuild.ts  | 28 ++++++++++++++++++++--------
 src/snapshot.ts |  4 ++++
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index c5d5885fdf..ba61414415 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -98,10 +98,13 @@ function buildNode(
         node = doc.createElement(tagName);
       }
       for (const name in n.attributes) {
+        if (!n.attributes.hasOwnProperty(name)) {
+          continue
+        }
+        let value = n.attributes[name];
+        value = typeof value === 'boolean' ? '' : value;
         // attribute names start with rr_ are internal attributes added by rrweb
-        if (n.attributes.hasOwnProperty(name) && !name.startsWith('rr_')) {
-          let value = n.attributes[name];
-          value = typeof value === 'boolean' ? '' : value;
+        if (!name.startsWith('rr_')) {
           const isTextarea = tagName === 'textarea' && name === 'value';
           const isRemoteOrDynamicCss =
             tagName === 'style' && name === '_cssText';
@@ -133,12 +136,21 @@ function buildNode(
           }
         } else {
           // handle internal attributes
-          if (n.attributes.rr_width) {
-            (node as HTMLElement).style.width = n.attributes.rr_width as string;
+          if (tagName === 'canvas' && name === 'rr_dataURL') {
+            const image = document.createElement('img')
+            image.src = value
+            image.onload = () => {
+              const ctx = (node as HTMLCanvasElement).getContext('2d')
+              if (ctx) {
+                ctx.drawImage(image, 0, 0, image.width, image.height)
+              }
+            }
+          }
+          if (name === 'rr_width') {
+            (node as HTMLElement).style.width = value;
           }
-          if (n.attributes.rr_height) {
-            (node as HTMLElement).style.height = n.attributes
-              .rr_height as string;
+          if (name === 'rr_height') {
+            (node as HTMLElement).style.height = value;
           }
         }
       }
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 1ebb870963..74126f547f 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -224,6 +224,10 @@ function serializeNode(
           attributes.selected = (n as HTMLOptionElement).selected;
         }
       }
+      // canvas image data
+      if (tagName === 'canvas') {
+        attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL()
+      }
       if (needBlock) {
         const { width, height } = (n as HTMLElement).getBoundingClientRect();
         attributes.rr_width = `${width}px`;

From 998f7a6cf03e26bf5435ffcc270c9ad9fd93b8ce Mon Sep 17 00:00:00 2001
From: mpstv <postautov.max@gmail.com>
Date: Thu, 31 Oct 2019 04:25:09 +0300
Subject: [PATCH 172/524] add skipInactive parameter (#9)

---
 src/Player.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Player.html b/src/Player.html
index 674d7220d3..ced35e141b 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -1,7 +1,7 @@
 <div class="rr-player" ref:player style="{playerStyle}">
   <div class="rr-player__frame" ref:frame { style }></div>
   {#if replayer}
-  <Controller { replayer } {showController} {autoPlay} on:fullscreen="fullscreen()" />
+  <Controller { replayer } {showController} {autoPlay} {skipInactive} on:fullscreen="fullscreen()" />
   {/if}
 </div>
 
@@ -29,6 +29,7 @@
         height: 576,
         events: [],
         autoPlay: true,
+        skipInactive: true,
         replayer: null,
       };
     },

From fa0243b33e45f0761d20a640e6370d79d93a3852 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 7 Nov 2019 11:53:29 +0800
Subject: [PATCH 173/524] update rrweb

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8a8b28c701..6921195506 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.7.23"
+    "rrweb": "^0.7.25"
   },
   "scripts": {
     "build": "rollup -c",

From 169bc4b53f790ad251d44355349bd7d26c71e94e Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 7 Nov 2019 11:53:52 +0800
Subject: [PATCH 174/524] Release 0.3.17

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6921195506..90e9dfa2a4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From 0b3b630c60b112d774ab990d6df48c60e6fbd1f6 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 9 Nov 2019 15:20:58 +0800
Subject: [PATCH 175/524] format code

---
 src/rebuild.ts  | 12 ++++++------
 src/snapshot.ts | 48 +++++++++++++++++++++++++-----------------------
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index ba61414415..835105881a 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -99,7 +99,7 @@ function buildNode(
       }
       for (const name in n.attributes) {
         if (!n.attributes.hasOwnProperty(name)) {
-          continue
+          continue;
         }
         let value = n.attributes[name];
         value = typeof value === 'boolean' ? '' : value;
@@ -137,14 +137,14 @@ function buildNode(
         } else {
           // handle internal attributes
           if (tagName === 'canvas' && name === 'rr_dataURL') {
-            const image = document.createElement('img')
-            image.src = value
+            const image = document.createElement('img');
+            image.src = value;
             image.onload = () => {
-              const ctx = (node as HTMLCanvasElement).getContext('2d')
+              const ctx = (node as HTMLCanvasElement).getContext('2d');
               if (ctx) {
-                ctx.drawImage(image, 0, 0, image.width, image.height)
+                ctx.drawImage(image, 0, 0, image.width, image.height);
               }
-            }
+            };
           }
           if (name === 'rr_width') {
             (node as HTMLElement).style.width = value;
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 74126f547f..520eed5ec0 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -86,34 +86,36 @@ export function absoluteToStylesheet(cssText: string, href: string): string {
 }
 
 function getAbsoluteSrcsetString(doc: Document, attributeValue: string) {
-  if(attributeValue.trim() === "") {
-    return attributeValue
+  if (attributeValue.trim() === '') {
+    return attributeValue;
   }
 
-  const srcsetValues = attributeValue.split(",")
+  const srcsetValues = attributeValue.split(',');
   // srcset attributes is defined as such:
   // srcset = "url size,url1 size1"
-  const resultingSrcsetString = srcsetValues.map((srcItem) => {
-       // removing all but middle spaces
-       const trimmedSrcItem = srcItem.trimLeft().trimRight()
-       const urlAndSize = trimmedSrcItem.split(" ")
-       // this means we have both 0:url and 1:size
-       if (urlAndSize.length === 2) {
-         const absUrl = absoluteToDoc(doc, urlAndSize[0])
-         return `${absUrl} ${urlAndSize[1]}`
-       } else if(urlAndSize.length === 1){
-         const absUrl = absoluteToDoc(doc, urlAndSize[0])
-         return `${absUrl}`
-       }
-       return ""
-  }).join(',')
+  const resultingSrcsetString = srcsetValues
+    .map(srcItem => {
+      // removing all but middle spaces
+      const trimmedSrcItem = srcItem.trimLeft().trimRight();
+      const urlAndSize = trimmedSrcItem.split(' ');
+      // this means we have both 0:url and 1:size
+      if (urlAndSize.length === 2) {
+        const absUrl = absoluteToDoc(doc, urlAndSize[0]);
+        return `${absUrl} ${urlAndSize[1]}`;
+      } else if (urlAndSize.length === 1) {
+        const absUrl = absoluteToDoc(doc, urlAndSize[0]);
+        return `${absUrl}`;
+      }
+      return '';
+    })
+    .join(',');
 
-  return resultingSrcsetString
+  return resultingSrcsetString;
 }
 
 function absoluteToDoc(doc: Document, attributeValue: string): string {
-  if (attributeValue.trim() === ""){
-    return attributeValue
+  if (attributeValue.trim() === '') {
+    return attributeValue;
   }
   const a: HTMLAnchorElement = doc.createElement('a');
   a.href = attributeValue;
@@ -161,8 +163,8 @@ function serializeNode(
         // relative path in attribute
         if (name === 'src' || name === 'href') {
           attributes[name] = absoluteToDoc(doc, value);
-        } else if (name == 'srcset') {
-          attributes[name] = getAbsoluteSrcsetString(doc, value)
+        } else if (name === 'srcset') {
+          attributes[name] = getAbsoluteSrcsetString(doc, value);
         } else if (name === 'style') {
           attributes[name] = absoluteToStylesheet(value, location.href);
         } else {
@@ -226,7 +228,7 @@ function serializeNode(
       }
       // canvas image data
       if (tagName === 'canvas') {
-        attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL()
+        attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL();
       }
       if (needBlock) {
         const { width, height } = (n as HTMLElement).getBoundingClientRect();

From 2af6e7af7fbb1f1505ef206b2463252844f45e84 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 9 Nov 2019 15:28:04 +0800
Subject: [PATCH 176/524] export the transform attribute method

---
 src/index.ts    |  3 ++-
 src/snapshot.ts | 30 +++++++++++++++++++-----------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 2240f589cf..7c059f3763 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-import snapshot, { serializeNodeWithId } from './snapshot';
+import snapshot, { serializeNodeWithId, transformAttribute } from './snapshot';
 import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
 export * from './types';
 
@@ -8,4 +8,5 @@ export {
   rebuild,
   buildNodeWithSN,
   addHoverClass,
+  transformAttribute,
 };
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 520eed5ec0..58891587b5 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -113,7 +113,7 @@ function getAbsoluteSrcsetString(doc: Document, attributeValue: string) {
   return resultingSrcsetString;
 }
 
-function absoluteToDoc(doc: Document, attributeValue: string): string {
+export function absoluteToDoc(doc: Document, attributeValue: string): string {
   if (attributeValue.trim() === '') {
     return attributeValue;
   }
@@ -126,6 +126,23 @@ function isSVGElement(el: Element): boolean {
   return el.tagName === 'svg' || el instanceof SVGElement;
 }
 
+export function transformAttribute(
+  doc: Document,
+  name: string,
+  value: string,
+): string {
+  // relative path in attribute
+  if (name === 'src' || name === 'href') {
+    return absoluteToDoc(doc, value);
+  } else if (name === 'srcset') {
+    return getAbsoluteSrcsetString(doc, value);
+  } else if (name === 'style') {
+    return absoluteToStylesheet(value, location.href);
+  } else {
+    return value;
+  }
+}
+
 function serializeNode(
   n: Node,
   doc: Document,
@@ -160,16 +177,7 @@ function serializeNode(
       const tagName = (n as HTMLElement).tagName.toLowerCase();
       let attributes: attributes = {};
       for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
-        // relative path in attribute
-        if (name === 'src' || name === 'href') {
-          attributes[name] = absoluteToDoc(doc, value);
-        } else if (name === 'srcset') {
-          attributes[name] = getAbsoluteSrcsetString(doc, value);
-        } else if (name === 'style') {
-          attributes[name] = absoluteToStylesheet(value, location.href);
-        } else {
-          attributes[name] = value;
-        }
+        attributes[name] = transformAttribute(doc, name, value);
       }
       // remote css
       if (tagName === 'link' && inlineStylesheet) {

From a0dc9481b21fbbbdc590d8998f055676f2279cab Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 9 Nov 2019 15:28:17 +0800
Subject: [PATCH 177/524] Release 0.7.21

---
 package.json          | 2 +-
 typings/index.d.ts    | 4 ++--
 typings/snapshot.d.ts | 2 ++
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 32b8da8af6..cfb61ead33 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.20",
+  "version": "0.7.21",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 420b997e41..81e7b27712 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,4 +1,4 @@
-import snapshot, { serializeNodeWithId } from './snapshot';
+import snapshot, { serializeNodeWithId, transformAttribute } from './snapshot';
 import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
 export * from './types';
-export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, };
+export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, transformAttribute, };
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index 594b8ccd0a..fca312170f 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -1,5 +1,7 @@
 import { serializedNodeWithId, INode, idNodeMap } from './types';
 export declare function absoluteToStylesheet(cssText: string, href: string): string;
+export declare function absoluteToDoc(doc: Document, attributeValue: string): string;
+export declare function transformAttribute(doc: Document, name: string, value: string): string;
 export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean, maskAllInputs?: boolean): serializedNodeWithId | null;
 declare function snapshot(n: Document, blockClass?: string | RegExp, inlineStylesheet?: boolean, maskAllInputs?: boolean): [serializedNodeWithId | null, idNodeMap];
 export default snapshot;

From 15f0c5ca26000d70328a660480f55daa9f1df9ad Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 14 Nov 2019 17:47:36 +0800
Subject: [PATCH 178/524] Release 0.4.0

---
 .gitignore       | 1 +
 package.json     | 6 ++++--
 rollup.config.js | 3 ++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 33f3a2b468..8ade46f340 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ yarn.lock
 temp
 
 dist
+lib
diff --git a/package.json b/package.json
index 90e9dfa2a4..ac9ecb8af4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.3.17",
+  "version": "0.4.0",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",
@@ -27,9 +27,11 @@
     "start:dev": "sirv public --dev"
   },
   "description": "rrweb's replayer UI",
-  "main": "dist/index.js",
+  "main": "lib/index.js",
   "module": "dist/index.mjs",
+  "unpkg": "dist/index.js",
   "files": [
+    "lib",
     "dist"
   ],
   "repository": {
diff --git a/rollup.config.js b/rollup.config.js
index b664fcb725..86e8c99d8d 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -9,7 +9,8 @@ const production = !process.env.ROLLUP_WATCH;
 
 export default [
   { file: pkg.module, format: 'es' },
-  { file: pkg.main, format: 'iife', name: 'rrwebPlayer' },
+  { file: pkg.main, format: 'cjs' },
+  { file: pkg.unpkg, format: 'iife', name: 'rrwebPlayer' },
   { file: 'public/bundle.js', format: 'iife', name: 'rrwebPlayer' },
 ].map(output => ({
   input: 'src/Player.html',

From acb53f2ef129a622f9c2dce1c51c2b8d55627b22 Mon Sep 17 00:00:00 2001
From: Filip Slatinac <Fslat092@uottawa.ca>
Date: Mon, 25 Nov 2019 08:28:20 -0500
Subject: [PATCH 179/524] replacing invalid tag names by div (#22)

---
 src/snapshot.ts                        | 21 ++++++++++++++++++---
 test/__snapshots__/integration.ts.snap | 18 ++++++++++++++++++
 test/html/invalid-tagname.html         | 15 +++++++++++++++
 test/html/with-relative-res.html       |  4 ++++
 4 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 test/html/invalid-tagname.html

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 58891587b5..8c8233e1c8 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -8,11 +8,25 @@ import {
 } from './types';
 
 let _id = 1;
+const symbolAndNumberRegex = RegExp('[^a-z]');
 
 function genId(): number {
   return _id++;
 }
 
+function getValidTagName(tagName: string): string {
+  const processedTagName = tagName.toLowerCase().trim();
+
+  if (symbolAndNumberRegex.test(processedTagName)) {
+    // if the tag name is odd and we cannot extract
+    // anything from the string, then we return a
+    // generic div
+    return 'div';
+  }
+
+  return processedTagName;
+}
+
 function getCssRulesString(s: CSSStyleSheet): string | null {
   try {
     const rules = s.rules || s.cssRules;
@@ -174,7 +188,7 @@ function serializeNode(
           }
         });
       }
-      const tagName = (n as HTMLElement).tagName.toLowerCase();
+      const tagName = getValidTagName((n as HTMLElement).tagName);
       let attributes: attributes = {};
       for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
         attributes[name] = transformAttribute(doc, name, value);
@@ -205,8 +219,9 @@ function serializeNode(
           ''
         ).trim().length
       ) {
-        const cssText = getCssRulesString((n as HTMLStyleElement)
-          .sheet as CSSStyleSheet);
+        const cssText = getCssRulesString(
+          (n as HTMLStyleElement).sheet as CSSStyleSheet,
+        );
         if (cssText) {
           attributes._cssText = absoluteToStylesheet(cssText, location.href);
         }
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index e5b4fc73fa..f04f33ad32 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -172,6 +172,20 @@ exports[`[html file]: invalid-attribute.html 1`] = `
 </body></html>"
 `;
 
+exports[`[html file]: invalid-tagname.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+  <meta charset=\\"UTF-8\\" />
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+  <title>Document</title>
+</head>
+<body>
+  <div>Hello</div>
+  <div>Hello</div>
+  <div>Hello</div>
+  <div></div></body></html>"
+`;
+
 exports[`[html file]: picture.html 1`] = `
 "<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
     <picture>
@@ -190,6 +204,10 @@ exports[`[html file]: with-relative-res.html 1`] = `
 </head>
 <body>
   <a href=\\"http://localhost:3030/basic.html\\"></a>
+  <div>Hello</div>
+  <div>Hello</div>
+  <div>Hello</div>
+  <div></div>
   <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"\\" />
   <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg\\" />
   <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://exmple.com/a.jpg\\" />
diff --git a/test/html/invalid-tagname.html b/test/html/invalid-tagname.html
new file mode 100644
index 0000000000..4d9183dfee
--- /dev/null
+++ b/test/html/invalid-tagname.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+  <alt="">Hello</alt="">
+  <alt34>Hello</alt34>
+  <d123-_+!@#$%^&*()>Hello</d123-_+!@#$%^&*()>
+  <ale#></ale#>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/html/with-relative-res.html b/test/html/with-relative-res.html
index f8cd16dc9d..7505d5a355 100644
--- a/test/html/with-relative-res.html
+++ b/test/html/with-relative-res.html
@@ -8,6 +8,10 @@
 </head>
 <body>
   <a href="./basic.html"></a>
+  <alt="">Hello</alt="">
+  <alt34>Hello</alt34>
+  <d123-_+!@#$%^&*()>Hello</d123-_+!@#$%^&*()>
+  <ale#></ale#>
   <img src="./a.jpg" alt="" srcset="">
   <img src="./a.jpg" alt="" srcset="/a.jpg">
   <img src="./a.jpg" alt="" srcset="http://exmple.com/a.jpg ">

From f1cae2f68cffdd23e5be6798d58f30ffbbf3be3f Mon Sep 17 00:00:00 2001
From: Filip Slatinac <Fslat092@uottawa.ca>
Date: Wed, 27 Nov 2019 01:17:00 -0500
Subject: [PATCH 180/524] added cssText check (#23)

* added cssText check

* added testing
---
 src/snapshot.ts                        |  6 +++---
 test/__snapshots__/integration.ts.snap | 14 +++++++------
 test/html/cors-style-sheet.html        | 27 +++++++++++++-------------
 3 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 8c8233e1c8..167768f252 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -146,11 +146,11 @@ export function transformAttribute(
   value: string,
 ): string {
   // relative path in attribute
-  if (name === 'src' || name === 'href') {
+  if (name === 'src' || (name === 'href' && value)) {
     return absoluteToDoc(doc, value);
-  } else if (name === 'srcset') {
+  } else if (name === 'srcset' && value) {
     return getAbsoluteSrcsetString(doc, value);
-  } else if (name === 'style') {
+  } else if (name === 'style' && value) {
     return absoluteToStylesheet(value, location.href);
   } else {
     return value;
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index f04f33ad32..363fd6589b 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -75,12 +75,14 @@ exports[`[html file]: block-element.html 1`] = `
 
 exports[`[html file]: cors-style-sheet.html 1`] = `
 "<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
-  <meta charset=\\"UTF-8\\" />
-  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
-  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
-  <title>with style sheet</title>
-  <link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/pure@2.85.0/index.css\\" />
-</head><body></body></html>"
+    <meta charset=\\"UTF-8\\" />
+    <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+    <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+    <title>with style sheet</title>
+    <link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/pure@2.85.0/index.css\\" />
+    <link rel=\\"stylesheet\\" href=\\"\\" />
+  </head>
+  <body></body></html>"
 `;
 
 exports[`[html file]: dynamic-stylesheet.html 1`] = `
diff --git a/test/html/cors-style-sheet.html b/test/html/cors-style-sheet.html
index 06dddaa262..741a136662 100644
--- a/test/html/cors-style-sheet.html
+++ b/test/html/cors-style-sheet.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>with style sheet</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pure@2.85.0/index.css">
-</head>
-
-<body>
-
-</body>
-
-</html>
\ No newline at end of file
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>with style sheet</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/pure@2.85.0/index.css"
+    />
+    <link rel="stylesheet" href />
+  </head>
+  <body></body>
+</html>

From a739c0fbc6b8a81982f1a43e70a0931c560f9778 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 30 Nov 2019 17:50:48 +0800
Subject: [PATCH 181/524] Release 0.7.22

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index cfb61ead33..fc591e745c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.21",
+  "version": "0.7.22",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From cdf7495cf73f7c322bc8261ef39113e502175e49 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 30 Nov 2019 17:52:05 +0800
Subject: [PATCH 182/524] update release it config

---
 .release-it.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.release-it.json b/.release-it.json
index 15b39fa3e2..998dc9ba52 100644
--- a/.release-it.json
+++ b/.release-it.json
@@ -1,4 +1,6 @@
 {
   "non-interactive": true,
-  "buildCommand": "npm run bundle && npm run typings"
+  "hooks": {
+    "before:init": ["npm run bundle", "npm run typings"]
+  }
 }

From 98fc939c9eb7c92d8a624ae21a6cc45da62c82ca Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 30 Nov 2019 17:56:32 +0800
Subject: [PATCH 183/524] allow release on not committed working dir

---
 .release-it.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.release-it.json b/.release-it.json
index 998dc9ba52..e76cbd8ee2 100644
--- a/.release-it.json
+++ b/.release-it.json
@@ -2,5 +2,8 @@
   "non-interactive": true,
   "hooks": {
     "before:init": ["npm run bundle", "npm run typings"]
+  },
+  "git": {
+    "requireCleanWorkingDir": false
   }
 }

From 388ec6c30cf8b9b7fc1236930c915411244ab431 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 30 Nov 2019 17:56:52 +0800
Subject: [PATCH 184/524] Release 0.7.23

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fc591e745c..2921d91178 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.22",
+  "version": "0.7.23",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From a7a3a76af12e7d9c056336ef52c358f9b5528161 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 12 Jan 2020 18:01:37 +0800
Subject: [PATCH 185/524] add media state check

---
 src/rebuild.ts                         | 10 ++++++++++
 src/snapshot.ts                        |  6 ++++++
 test/__snapshots__/integration.ts.snap | 15 +++++++++++++++
 test/html/video.html                   | 19 +++++++++++++++++++
 4 files changed, 50 insertions(+)
 create mode 100644 test/html/video.html

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 835105881a..4a42d5be41 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -152,6 +152,16 @@ function buildNode(
           if (name === 'rr_height') {
             (node as HTMLElement).style.height = value;
           }
+          if (name === 'rr_mediaState') {
+            switch (value) {
+              case 'played':
+                (node as HTMLMediaElement).play();
+              case 'paused':
+                (node as HTMLMediaElement).pause();
+                break;
+              default:
+            }
+          }
         }
       }
       return node;
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 167768f252..69f0577cce 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -253,6 +253,12 @@ function serializeNode(
       if (tagName === 'canvas') {
         attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL();
       }
+      // media elements
+      if (tagName === 'audio' || tagName === 'video') {
+        attributes.rr_mediaState = (n as HTMLMediaElement).paused
+          ? 'paused'
+          : 'played';
+      }
       if (needBlock) {
         const { width, height } = (n as HTMLElement).getBoundingClientRect();
         attributes.rr_width = `${width}px`;
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 363fd6589b..715debc760 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -197,6 +197,21 @@ exports[`[html file]: picture.html 1`] = `
   </body></html>"
 `;
 
+exports[`[html file]: video.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+    <meta charset=\\"UTF-8\\" />
+    <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+    <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+    <title>video</title>
+  </head>
+  <body>
+    <video controls=\\"\\">
+      <source src=\\"http://techslides.com/demos/sample-videos/small.webm\\" type=\\"video/webm\\" /> <source src=\\"http://techslides.com/demos/sample-videos/small.ogv\\" type=\\"video/ogg\\" />
+      <source src=\\"http://techslides.com/demos/sample-videos/small.mp4\\" type=\\"video/mp4\\" /> <source src=\\"http://techslides.com/demos/sample-videos/small.3gp\\" type=\\"video/3gp\\" />
+    </video>
+  </body></html>"
+`;
+
 exports[`[html file]: with-relative-res.html 1`] = `
 "<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
diff --git a/test/html/video.html b/test/html/video.html
new file mode 100644
index 0000000000..653f7172d6
--- /dev/null
+++ b/test/html/video.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>video</title>
+  </head>
+  <body>
+    <video controls>
+      <source src=http://techslides.com/demos/sample-videos/small.webm
+      type=video/webm> <source
+      src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
+      <source src=http://techslides.com/demos/sample-videos/small.mp4
+      type=video/mp4> <source
+      src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
+    </video>
+  </body>
+</html>

From 7c01ec3c27d99dc2e3e1e8ce5265a092ec6b7c19 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 12 Jan 2020 18:02:12 +0800
Subject: [PATCH 186/524] Release 0.7.24

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2921d91178..852030bfab 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.23",
+  "version": "0.7.24",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From b5e9b40f4d624854564bb433900606232cdc3b5b Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 26 Jan 2020 20:08:52 +0800
Subject: [PATCH 187/524] close #24 css text can be null

---
 src/snapshot.ts | 62 +++++++++++++++++++++++++++----------------------
 1 file changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 69f0577cce..fbffe2db4c 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -68,35 +68,41 @@ function extractOrigin(url: string): string {
 const URL_IN_CSS_REF = /url\((?:'([^']*)'|"([^"]*)"|([^)]*))\)/gm;
 const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/;
 const DATA_URI = /^(data:)([\w\/\+\-]+);(charset=[\w-]+|base64).*,(.*)/i;
-export function absoluteToStylesheet(cssText: string, href: string): string {
-  return cssText.replace(URL_IN_CSS_REF, (origin, path1, path2, path3) => {
-    const filePath = path1 || path2 || path3;
-    if (!filePath) {
-      return origin;
-    }
-    if (!RELATIVE_PATH.test(filePath)) {
-      return `url('${filePath}')`;
-    }
-    if (DATA_URI.test(filePath)) {
-      return `url(${filePath})`;
-    }
-    if (filePath[0] === '/') {
-      return `url('${extractOrigin(href) + filePath}')`;
-    }
-    const stack = href.split('/');
-    const parts = filePath.split('/');
-    stack.pop();
-    for (const part of parts) {
-      if (part === '.') {
-        continue;
-      } else if (part === '..') {
-        stack.pop();
-      } else {
-        stack.push(part);
+export function absoluteToStylesheet(
+  cssText: string | null,
+  href: string,
+): string {
+  return (cssText || '').replace(
+    URL_IN_CSS_REF,
+    (origin, path1, path2, path3) => {
+      const filePath = path1 || path2 || path3;
+      if (!filePath) {
+        return origin;
       }
-    }
-    return `url('${stack.join('/')}')`;
-  });
+      if (!RELATIVE_PATH.test(filePath)) {
+        return `url('${filePath}')`;
+      }
+      if (DATA_URI.test(filePath)) {
+        return `url(${filePath})`;
+      }
+      if (filePath[0] === '/') {
+        return `url('${extractOrigin(href) + filePath}')`;
+      }
+      const stack = href.split('/');
+      const parts = filePath.split('/');
+      stack.pop();
+      for (const part of parts) {
+        if (part === '.') {
+          continue;
+        } else if (part === '..') {
+          stack.pop();
+        } else {
+          stack.push(part);
+        }
+      }
+      return `url('${stack.join('/')}')`;
+    },
+  );
 }
 
 function getAbsoluteSrcsetString(doc: Document, attributeValue: string) {

From 7da67ec18297ecffbed1a7f74726870bd51c7436 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fizer=20Khan=20=28=E0=AE=AA=E0=AF=88=E0=AE=9A=E0=AE=B0?=
 =?UTF-8?q?=E0=AF=8D=20=E0=AE=95=E0=AE=BE=E0=AE=A9=E0=AF=8D=29?=
 <fizerkhan@gmail.com>
Date: Tue, 25 Feb 2020 13:22:38 +0530
Subject: [PATCH 188/524] fix null issue. (#27)

---
 src/snapshot.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index fbffe2db4c..656de6ea83 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -134,7 +134,7 @@ function getAbsoluteSrcsetString(doc: Document, attributeValue: string) {
 }
 
 export function absoluteToDoc(doc: Document, attributeValue: string): string {
-  if (attributeValue.trim() === '') {
+  if (!attributeValue || attributeValue.trim() === '') {
     return attributeValue;
   }
   const a: HTMLAnchorElement = doc.createElement('a');

From 4118d32601641d19b2fda94e0bb813aed7ba5551 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 26 Feb 2020 09:56:49 +0800
Subject: [PATCH 189/524] Release 0.7.25

---
 package.json          | 2 +-
 typings/snapshot.d.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 852030bfab..68b93028eb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.24",
+  "version": "0.7.25",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index fca312170f..e630a036c5 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -1,5 +1,5 @@
 import { serializedNodeWithId, INode, idNodeMap } from './types';
-export declare function absoluteToStylesheet(cssText: string, href: string): string;
+export declare function absoluteToStylesheet(cssText: string | null, href: string): string;
 export declare function absoluteToDoc(doc: Document, attributeValue: string): string;
 export declare function transformAttribute(doc: Document, name: string, value: string): string;
 export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean, maskAllInputs?: boolean): serializedNodeWithId | null;

From 4e7b038c7be233a8fc72c9d73e2be94be781c45a Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 28 Feb 2020 16:25:08 +0800
Subject: [PATCH 190/524] fix controller height compute

---
 package.json    |  2 +-
 src/Player.html | 22 ++++++++++++++--------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index ac9ecb8af4..148aa87899 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.7.25"
+    "rrweb": "^0.7.28"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/src/Player.html b/src/Player.html
index ced35e141b..777f8c412a 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -1,7 +1,15 @@
 <div class="rr-player" ref:player style="{playerStyle}">
   <div class="rr-player__frame" ref:frame { style }></div>
   {#if replayer}
-  <Controller { replayer } {showController} {autoPlay} {skipInactive} on:fullscreen="fullscreen()" />
+  <Controller
+    {
+    replayer
+    }
+    {showController}
+    {autoPlay}
+    {skipInactive}
+    on:fullscreen="fullscreen()"
+  />
   {/if}
 </div>
 
@@ -40,10 +48,10 @@
           height: `${height}px`,
         });
       },
-      playerStyle({ width, height }) {
+      playerStyle({ width, height, showController }) {
         return inlineCss({
           width: `${width}px`,
-          height: `${height + controllerHeight}px`,
+          height: `${height + showController ? controllerHeight : 0}px`,
         });
       },
     },
@@ -77,8 +85,8 @@
         skipInactive: true,
         showWarning: true,
       });
-      replayer.on('resize', (dimension) =>
-        this.updateScale(replayer.wrapper, dimension)
+      replayer.on('resize', dimension =>
+        this.updateScale(replayer.wrapper, dimension),
       );
       this.set({
         replayer,
@@ -118,8 +126,6 @@
       }
     },
   };
-
-
 </script>
 
 <style>
@@ -146,4 +152,4 @@
   :global(.replayer-wrapper > iframe) {
     border: none;
   }
-</style>
\ No newline at end of file
+</style>

From a4e49ba7416cb02a54c4e2cbf5aef82be85f1edc Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 28 Feb 2020 16:25:48 +0800
Subject: [PATCH 191/524] Release 0.4.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 148aa87899..caf1b98289 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From fd9095f6549b1dbdd3c8edf5ffd76fd221e02d54 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 28 Feb 2020 16:41:50 +0800
Subject: [PATCH 192/524] fix logic operator

---
 src/Player.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Player.html b/src/Player.html
index 777f8c412a..894a8f5ddf 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -51,7 +51,7 @@
       playerStyle({ width, height, showController }) {
         return inlineCss({
           width: `${width}px`,
-          height: `${height + showController ? controllerHeight : 0}px`,
+          height: `${height + (showController ? controllerHeight : 0)}px`,
         });
       },
     },

From 1b834b6fe60ada4c432e5068c389956736137b0a Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 28 Feb 2020 16:42:55 +0800
Subject: [PATCH 193/524] Release 0.4.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index caf1b98289..d166719458 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From 6e4a7c3637233acf5279d06a9bcd58e608d2fe2d Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 28 Feb 2020 19:53:31 +0800
Subject: [PATCH 194/524] add rrweb options

---
 package.json    | 2 +-
 src/Player.html | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d166719458..9abe4453e4 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.7.28"
+    "rrweb": "^0.7.29"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/src/Player.html b/src/Player.html
index 894a8f5ddf..b280565143 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -39,6 +39,7 @@
         autoPlay: true,
         skipInactive: true,
         replayer: null,
+        triggerFocus: true,
       };
     },
     computed: {
@@ -78,12 +79,13 @@
       },
     },
     oncreate() {
-      const { events } = this.get();
+      const { events, triggerFocus } = this.get();
       const replayer = new Replayer(events, {
         speed: 1,
         root: this.refs.frame,
         skipInactive: true,
         showWarning: true,
+        triggerFocus,
       });
       replayer.on('resize', dimension =>
         this.updateScale(replayer.wrapper, dimension),

From 10f192d54b9023119f6c273ddcadc8038ff8620b Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 28 Feb 2020 19:53:55 +0800
Subject: [PATCH 195/524] Release 0.4.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9abe4453e4..c1653dea46 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From 86cf78822dff6f7b7743d6f8fa630a14999eefca Mon Sep 17 00:00:00 2001
From: James Bradley <github@jbrew.co.uk>
Date: Tue, 10 Mar 2020 14:33:23 +0000
Subject: [PATCH 196/524] H tags (#28)

* Failing test

* Allow numbers in el name tests

* Allow numbers in el names
---
 src/snapshot.ts                        | 2 +-
 test/__snapshots__/integration.ts.snap | 9 +++++----
 test/html/basic.html                   | 4 ++--
 test/html/invalid-tagname.html         | 3 +--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 656de6ea83..2d500d2768 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -8,7 +8,7 @@ import {
 } from './types';
 
 let _id = 1;
-const symbolAndNumberRegex = RegExp('[^a-z]');
+const symbolAndNumberRegex = RegExp('[^a-z1-6]');
 
 function genId(): number {
   return _id++;
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 715debc760..1e70a29508 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -45,7 +45,8 @@ exports[`[html file]: basic.html 1`] = `
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
   <title>Document</title>
-</head><body></body></html>"
+</head><body>
+  <h1>Title</h1></body></html>"
 `;
 
 exports[`[html file]: block-element.html 1`] = `
@@ -184,8 +185,8 @@ exports[`[html file]: invalid-tagname.html 1`] = `
 <body>
   <div>Hello</div>
   <div>Hello</div>
-  <div>Hello</div>
-  <div></div></body></html>"
+  <div></div>
+</body></html>"
 `;
 
 exports[`[html file]: picture.html 1`] = `
@@ -222,7 +223,7 @@ exports[`[html file]: with-relative-res.html 1`] = `
 <body>
   <a href=\\"http://localhost:3030/basic.html\\"></a>
   <div>Hello</div>
-  <div>Hello</div>
+  <alt34>Hello</alt34>
   <div>Hello</div>
   <div></div>
   <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"\\" />
diff --git a/test/html/basic.html b/test/html/basic.html
index 95fac2bede..44d38cba8f 100644
--- a/test/html/basic.html
+++ b/test/html/basic.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-
+  <h1>Title</h1>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/test/html/invalid-tagname.html b/test/html/invalid-tagname.html
index 4d9183dfee..e28dd7104a 100644
--- a/test/html/invalid-tagname.html
+++ b/test/html/invalid-tagname.html
@@ -8,8 +8,7 @@
 </head>
 <body>
   <alt="">Hello</alt="">
-  <alt34>Hello</alt34>
   <d123-_+!@#$%^&*()>Hello</d123-_+!@#$%^&*()>
   <ale#></ale#>
 </body>
-</html>
\ No newline at end of file
+</html>

From 89445f3c503d46c5b77bb9a54c10ee5ac8cd3612 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 14 Mar 2020 14:46:56 +0800
Subject: [PATCH 197/524] close #29 add MIT license

---
 LICENSE | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 LICENSE

diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000000..0b2f1b2f72
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Contributors (https://github.com/rrweb-io/rrweb-snapshot/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.

From 6245bee7bd7530e8830e051df09dccaf45c27cf4 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 14 Mar 2020 14:48:41 +0800
Subject: [PATCH 198/524] Release 0.7.26

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 68b93028eb..5056a1edfd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.25",
+  "version": "0.7.26",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From c14242e93248107ebdc56d45c0a441a3ca176097 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Thu, 26 Mar 2020 15:15:41 +0000
Subject: [PATCH 199/524] Avoid more common causes of 'blocked script
 execution' console.error messages in Chrome which are not exceptions (but
 look like them): (#30)

'Blocked script execution in '<page>' because the document's frame is sandboxed and the 'allow-scripts' permission is not set'
---
 src/rebuild.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 4a42d5be41..c9be6d23f5 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -128,6 +128,11 @@ function buildNode(
           try {
             if (n.isSVG && name === 'xlink:href') {
               node.setAttributeNS('http://www.w3.org/1999/xlink', name, value);
+            } else if (name == 'onload' || name == 'onclick' || name.substring(0, 7) == 'onmouse') {
+              // Rename some of the more common atttributes from https://www.w3schools.com/tags/ref_eventattributes.asp
+              // as setting them triggers a console.error (which shows up despite the try/catch)
+              // Assumption: these attributes are not used to css
+              node.setAttribute('_' + name, value);
             } else {
               node.setAttribute(name, value);
             }

From b1723e17162d07a773ac8211dc7c7d3255520c9c Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 5 Apr 2020 22:10:27 +0800
Subject: [PATCH 200/524] update rrweb

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c1653dea46..c97d541d63 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.7.29"
+    "rrweb": "^0.7.31"
   },
   "scripts": {
     "build": "rollup -c",

From 08d21b41bae1be680e3a2d6eaabefd93eeaff2ec Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 5 Apr 2020 22:14:28 +0800
Subject: [PATCH 201/524] allow scale over 1

---
 src/Player.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Player.html b/src/Player.html
index b280565143..0117dd382e 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -62,7 +62,7 @@
         const widthScale = width / frameDimension.width;
         const heightScale = height / frameDimension.height;
         el.style.transform =
-          `scale(${Math.min(widthScale, heightScale, 1)})` +
+          `scale(${Math.min(widthScale, heightScale)})` +
           'translate(-50%, -50%)';
       },
       fullscreen() {
@@ -87,7 +87,7 @@
         showWarning: true,
         triggerFocus,
       });
-      replayer.on('resize', dimension =>
+      replayer.on('resize', (dimension) =>
         this.updateScale(replayer.wrapper, dimension),
       );
       this.set({

From 18063bee330c53b6a3f6edcf14a43999f3d4b5ef Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 5 Apr 2020 22:14:52 +0800
Subject: [PATCH 202/524] Release 0.4.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c97d541d63..c07e86e24d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From 6933a3b807e1f51f25b907aee73e22732fb3fc4c Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 5 Apr 2020 22:31:47 +0800
Subject: [PATCH 203/524] use player dimension to calc scale when fullscreen

---
 src/Player.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Player.html b/src/Player.html
index 0117dd382e..4872eab06f 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -101,8 +101,8 @@
             this._width = width;
             this._height = height;
             const dimension = {
-              width: document.body.offsetWidth,
-              height: document.body.offsetHeight - controllerHeight,
+              width: this.refs.player.offsetWidth,
+              height: this.refs.player.offsetHeight - controllerHeight,
             };
             this.set(dimension);
             this.updateScale(replayer.wrapper, {

From b0451fc257300c02907557cfa79aaea5eac90143 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 5 Apr 2020 22:33:12 +0800
Subject: [PATCH 204/524] Release 0.4.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c07e86e24d..8e695fcbbb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From c435c5f0951361ebe801188b2ef8004ae5a77dd4 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 11 Apr 2020 20:02:26 +0800
Subject: [PATCH 205/524] update player with built-in unpack function

---
 package.json    | 2 +-
 src/Player.html | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 8e695fcbbb..aaf7a9cd0e 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "svelte": "^2.16.0"
   },
   "dependencies": {
-    "rrweb": "^0.7.31"
+    "rrweb": "^0.7.32"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/src/Player.html b/src/Player.html
index 4872eab06f..ec0d2feb68 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -14,7 +14,7 @@
 </div>
 
 <script>
-  import { Replayer } from 'rrweb';
+  import { Replayer, unpack } from 'rrweb';
   import 'rrweb/dist/rrweb.min.css';
   import {
     inlineCss,
@@ -86,6 +86,7 @@
         skipInactive: true,
         showWarning: true,
         triggerFocus,
+        unpackFn: unpack,
       });
       replayer.on('resize', (dimension) =>
         this.updateScale(replayer.wrapper, dimension),

From 675a8541b414a0ab0afc1fd23b64e94957714ff6 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 11 Apr 2020 20:03:13 +0800
Subject: [PATCH 206/524] Release 0.4.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index aaf7a9cd0e..5cd7ffc40d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "devDependencies": {
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",

From a60cf99691512d05473500d44f1b0fba244b8963 Mon Sep 17 00:00:00 2001
From: Rifaudeen <rifajas@gmail.com>
Date: Thu, 28 May 2020 19:31:12 +0400
Subject: [PATCH 207/524] Added tags support in the player timeline (#17)

* implemented custom-event handler from replayer

* Added tags support in the player timeline

* updated event type check with EventType enum from rrweb
---
 src/Controller.html | 43 +++++++++++++++++++++++++++++++++++++++++++
 src/Player.html     |  3 +++
 2 files changed, 46 insertions(+)

diff --git a/src/Controller.html b/src/Controller.html
index dac8d1ee57..0212706963 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -8,6 +8,13 @@
       ref:progress on:click="handleProgressClick(event)"
     >
       <div class="rr-progress__step" ref:step style="width: {percentage}"></div>
+        {#each getCustomEvents as event,i (i)}
+          <div
+            title="{event.name}"
+            style="width: 10px;height: 5px;position: absolute;top: 2px;transform: translate(-50%, -50%);background: {event.background};left: {event.position};"
+          ></div>
+        {/each}
+
       <div
         class="rr-progress__handler"
         ref:handler
@@ -76,6 +83,7 @@
 {/if}
 
 <script>
+  import { EventType } from 'rrweb';
   import { formatTime } from './utils.js';
 
   export default {
@@ -99,6 +107,40 @@
         const percent = Math.min(1, currentTime / meta.totalTime);
         return `${100 * percent}%`;
       },
+      getCustomEvents({tags, replayer}) {
+        const { events } = replayer;
+        const totalEvents = events.length;
+        const start = events[0].timestamp;
+        const end = events[totalEvents - 1].timestamp;
+        const customEvents = [];
+
+        // calculate tag position.
+        const position = (startTime, endTime, tagTime) => {
+          const sessionDuration = endTime - startTime;
+          const eventDuration = endTime - tagTime;
+          const eventPosition = 100 - ((eventDuration / sessionDuration) * 100);
+
+          return eventPosition.toFixed(2);
+        };
+
+         // loop through all the events and find out custom event.
+        events.forEach((event) => {
+          /**
+           * we are only interested in custom event and calculate it's position
+           * to place it in player's timeline.
+           */
+          if (event.type === EventType.Custom) {
+            const customEvent = {
+              name: event.data.tag,
+              background: tags[event.data.tag] || 'rgb(73, 80, 246)',
+              position: `${position(start, end, event.timestamp)}%`,
+            };
+            customEvents.push(customEvent);
+          }
+        });
+
+        return customEvents;
+      },
     },
     helpers: {
       formatTime,
@@ -129,6 +171,7 @@
       },
       play() {
         const { replayer, currentTime } = this.get();
+  
         if (currentTime > 0) {
           replayer.resume(currentTime);
         } else {
diff --git a/src/Player.html b/src/Player.html
index ec0d2feb68..b0f1bfcad4 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -8,6 +8,7 @@
     {showController}
     {autoPlay}
     {skipInactive}
+    {tags}
     on:fullscreen="fullscreen()"
   />
   {/if}
@@ -40,6 +41,7 @@
         skipInactive: true,
         replayer: null,
         triggerFocus: true,
+        tags: {},
       };
     },
     computed: {
@@ -91,6 +93,7 @@
       replayer.on('resize', (dimension) =>
         this.updateScale(replayer.wrapper, dimension),
       );
+
       this.set({
         replayer,
       });

From 341b1858b984f72bed20b2a9657a154e75fafefc Mon Sep 17 00:00:00 2001
From: Maxim Postautov <54762420+mpstv@users.noreply.github.com>
Date: Sat, 6 Jun 2020 16:14:09 +0300
Subject: [PATCH 208/524] add '-' to symbolAndNumberRegex (#34)

---
 src/snapshot.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 2d500d2768..32fe3e414c 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -8,7 +8,7 @@ import {
 } from './types';
 
 let _id = 1;
-const symbolAndNumberRegex = RegExp('[^a-z1-6]');
+const symbolAndNumberRegex = RegExp('[^a-z1-6\-]');
 
 function genId(): number {
   return _id++;
@@ -32,9 +32,9 @@ function getCssRulesString(s: CSSStyleSheet): string | null {
     const rules = s.rules || s.cssRules;
     return rules
       ? Array.from(rules).reduce(
-          (prev, cur) => prev + getCssRuleString(cur),
-          '',
-        )
+        (prev, cur) => prev + getCssRuleString(cur),
+        '',
+      )
       : null;
   } catch (error) {
     return null;

From 647e314179b5f7d80b90ea951c5a11b35fa17ec0 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 15 Jun 2020 17:11:21 +0800
Subject: [PATCH 209/524] Release 0.7.27

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5056a1edfd..7d9c9a9705 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.26",
+  "version": "0.7.27",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 63c3bd744e65d13d92d65026f2a9edb194475457 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Fri, 17 Jul 2020 16:17:07 +0100
Subject: [PATCH 210/524] Don't obscure text of form buttons under
 `maskAllInputs` (more modern style would be a `<button>`) (#35)

---
 src/snapshot.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 32fe3e414c..c3e6d3b8ff 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -242,6 +242,8 @@ function serializeNode(
         if (
           attributes.type !== 'radio' &&
           attributes.type !== 'checkbox' &&
+          attributes.type !== 'submit' &&
+          attributes.type !== 'button' &&
           value
         ) {
           attributes.value = maskAllInputs ? '*'.repeat(value.length) : value;

From e4593ff76d90e2519abe66186c38c0c2c473cd01 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 18 Jul 2020 13:31:32 +0800
Subject: [PATCH 211/524] part of rrweb #80, support configure mask input types

---
 src/snapshot.ts | 58 ++++++++++++++++++++++++++++++++++---------------
 src/types.ts    | 16 ++++++++++++++
 2 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index c3e6d3b8ff..edc9123145 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -5,10 +5,11 @@ import {
   attributes,
   INode,
   idNodeMap,
+  MaskInputOptions,
 } from './types';
 
 let _id = 1;
-const symbolAndNumberRegex = RegExp('[^a-z1-6\-]');
+const symbolAndNumberRegex = RegExp('[^a-z1-6-]');
 
 function genId(): number {
   return _id++;
@@ -32,9 +33,9 @@ function getCssRulesString(s: CSSStyleSheet): string | null {
     const rules = s.rules || s.cssRules;
     return rules
       ? Array.from(rules).reduce(
-        (prev, cur) => prev + getCssRuleString(cur),
-        '',
-      )
+          (prev, cur) => prev + getCssRuleString(cur),
+          '',
+        )
       : null;
   } catch (error) {
     return null;
@@ -54,10 +55,7 @@ function isCSSImportRule(rule: CSSRule): rule is CSSImportRule {
 function extractOrigin(url: string): string {
   let origin;
   if (url.indexOf('//') > -1) {
-    origin = url
-      .split('/')
-      .slice(0, 3)
-      .join('/');
+    origin = url.split('/').slice(0, 3).join('/');
   } else {
     origin = url.split('/')[0];
   }
@@ -114,7 +112,7 @@ function getAbsoluteSrcsetString(doc: Document, attributeValue: string) {
   // srcset attributes is defined as such:
   // srcset = "url size,url1 size1"
   const resultingSrcsetString = srcsetValues
-    .map(srcItem => {
+    .map((srcItem) => {
       // removing all but middle spaces
       const trimmedSrcItem = srcItem.trimLeft().trimRight();
       const urlAndSize = trimmedSrcItem.split(' ');
@@ -168,7 +166,7 @@ function serializeNode(
   doc: Document,
   blockClass: string | RegExp,
   inlineStylesheet: boolean,
-  maskAllInputs: boolean,
+  maskInputOptions: MaskInputOptions = {},
 ): serializedNode | false {
   switch (n.nodeType) {
     case n.DOCUMENT_NODE:
@@ -188,7 +186,7 @@ function serializeNode(
       if (typeof blockClass === 'string') {
         needBlock = (n as HTMLElement).classList.contains(blockClass);
       } else {
-        (n as HTMLElement).classList.forEach(className => {
+        (n as HTMLElement).classList.forEach((className) => {
           if (blockClass.test(className)) {
             needBlock = true;
           }
@@ -201,7 +199,7 @@ function serializeNode(
       }
       // remote css
       if (tagName === 'link' && inlineStylesheet) {
-        const stylesheet = Array.from(doc.styleSheets).find(s => {
+        const stylesheet = Array.from(doc.styleSheets).find((s) => {
           return s.href === (n as HTMLLinkElement).href;
         });
         const cssText = getCssRulesString(stylesheet as CSSStyleSheet);
@@ -246,7 +244,11 @@ function serializeNode(
           attributes.type !== 'button' &&
           value
         ) {
-          attributes.value = maskAllInputs ? '*'.repeat(value.length) : value;
+          attributes.value = maskInputOptions[
+            attributes.type as keyof MaskInputOptions
+          ]
+            ? '*'.repeat(value.length)
+            : value;
         } else if ((n as HTMLInputElement).checked) {
           attributes.checked = (n as HTMLInputElement).checked;
         }
@@ -320,14 +322,14 @@ export function serializeNodeWithId(
   blockClass: string | RegExp,
   skipChild = false,
   inlineStylesheet = true,
-  maskAllInputs = false,
+  maskInputOptions?: MaskInputOptions,
 ): serializedNodeWithId | null {
   const _serializedNode = serializeNode(
     n,
     doc,
     blockClass,
     inlineStylesheet,
-    maskAllInputs,
+    maskInputOptions,
   );
   if (!_serializedNode) {
     // TODO: dev only
@@ -363,7 +365,7 @@ export function serializeNodeWithId(
         blockClass,
         skipChild,
         inlineStylesheet,
-        maskAllInputs,
+        maskInputOptions,
       );
       if (serializedChildNode) {
         serializedNode.childNodes.push(serializedChildNode);
@@ -377,9 +379,29 @@ function snapshot(
   n: Document,
   blockClass: string | RegExp = 'rr-block',
   inlineStylesheet = true,
-  maskAllInputs = false,
+  maskAllInputsOrOptions: boolean | MaskInputOptions,
 ): [serializedNodeWithId | null, idNodeMap] {
   const idNodeMap: idNodeMap = {};
+  const maskInputOptions: MaskInputOptions =
+    maskAllInputsOrOptions === true
+      ? {
+          color: true,
+          date: true,
+          'datetime-local': true,
+          email: true,
+          month: true,
+          number: true,
+          range: true,
+          search: true,
+          tel: true,
+          text: true,
+          time: true,
+          url: true,
+          week: true,
+        }
+      : maskAllInputsOrOptions === false
+      ? {}
+      : maskAllInputsOrOptions;
   return [
     serializeNodeWithId(
       n,
@@ -388,7 +410,7 @@ function snapshot(
       blockClass,
       false,
       inlineStylesheet,
-      maskAllInputs,
+      maskInputOptions,
     ),
     idNodeMap,
   ];
diff --git a/src/types.ts b/src/types.ts
index 2bdbd74c18..78582c6669 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -68,3 +68,19 @@ export interface INode extends Node {
 export type idNodeMap = {
   [key: number]: INode;
 };
+
+export type MaskInputOptions = Partial<{
+  color: boolean;
+  date: boolean;
+  'datetime-local': boolean;
+  email: boolean;
+  month: boolean;
+  number: boolean;
+  range: boolean;
+  search: boolean;
+  tel: boolean;
+  text: boolean;
+  time: boolean;
+  url: boolean;
+  week: boolean;
+}>;

From c206e100f1845b73d3fc389c95c212059ac008b9 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 18 Jul 2020 13:32:36 +0800
Subject: [PATCH 212/524] Release 0.7.28

---
 package.json          |  2 +-
 typings/snapshot.d.ts |  6 +++---
 typings/types.d.ts    | 15 +++++++++++++++
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 7d9c9a9705..320d77a490 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.27",
+  "version": "0.7.28",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index e630a036c5..3b6ed5d727 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -1,7 +1,7 @@
-import { serializedNodeWithId, INode, idNodeMap } from './types';
+import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions } from './types';
 export declare function absoluteToStylesheet(cssText: string | null, href: string): string;
 export declare function absoluteToDoc(doc: Document, attributeValue: string): string;
 export declare function transformAttribute(doc: Document, name: string, value: string): string;
-export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean, maskAllInputs?: boolean): serializedNodeWithId | null;
-declare function snapshot(n: Document, blockClass?: string | RegExp, inlineStylesheet?: boolean, maskAllInputs?: boolean): [serializedNodeWithId | null, idNodeMap];
+export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean, maskInputOptions?: MaskInputOptions): serializedNodeWithId | null;
+declare function snapshot(n: Document, blockClass: string | RegExp | undefined, inlineStylesheet: boolean | undefined, maskAllInputsOrOptions: boolean | MaskInputOptions): [serializedNodeWithId | null, idNodeMap];
 export default snapshot;
diff --git a/typings/types.d.ts b/typings/types.d.ts
index 556e0bdfd3..5c385e48a5 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -53,3 +53,18 @@ export interface INode extends Node {
 export declare type idNodeMap = {
     [key: number]: INode;
 };
+export declare type MaskInputOptions = Partial<{
+    color: boolean;
+    date: boolean;
+    'datetime-local': boolean;
+    email: boolean;
+    month: boolean;
+    number: boolean;
+    range: boolean;
+    search: boolean;
+    tel: boolean;
+    text: boolean;
+    time: boolean;
+    url: boolean;
+    week: boolean;
+}>;

From 3ebdcbdf03829222010242a5482a47c77fdc3bd2 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 18 Jul 2020 13:48:38 +0800
Subject: [PATCH 213/524] fix mask textarea

---
 src/snapshot.ts | 12 +++++++-----
 src/types.ts    |  2 ++
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index edc9123145..79d6c8053d 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -237,6 +237,8 @@ function serializeNode(
         tagName === 'select'
       ) {
         const value = (n as HTMLInputElement | HTMLTextAreaElement).value;
+        const needBlockTextarea =
+          tagName === 'textarea' && maskInputOptions.textarea;
         if (
           attributes.type !== 'radio' &&
           attributes.type !== 'checkbox' &&
@@ -244,11 +246,11 @@ function serializeNode(
           attributes.type !== 'button' &&
           value
         ) {
-          attributes.value = maskInputOptions[
-            attributes.type as keyof MaskInputOptions
-          ]
-            ? '*'.repeat(value.length)
-            : value;
+          attributes.value =
+            maskInputOptions[attributes.type as keyof MaskInputOptions] ||
+            needBlockTextarea
+              ? '*'.repeat(value.length)
+              : value;
         } else if ((n as HTMLInputElement).checked) {
           attributes.checked = (n as HTMLInputElement).checked;
         }
diff --git a/src/types.ts b/src/types.ts
index 78582c6669..1ec1109e28 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -83,4 +83,6 @@ export type MaskInputOptions = Partial<{
   time: boolean;
   url: boolean;
   week: boolean;
+  // unify textarea element with text input
+  textarea: boolean;
 }>;

From f6781fda04392c84b659d20a5a2528d53c338c2d Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 18 Jul 2020 13:52:42 +0800
Subject: [PATCH 214/524] Release 0.7.29

---
 package.json       | 2 +-
 typings/types.d.ts | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 320d77a490..dbaa7dd5b4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.28",
+  "version": "0.7.29",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
diff --git a/typings/types.d.ts b/typings/types.d.ts
index 5c385e48a5..9e440a8d15 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -67,4 +67,5 @@ export declare type MaskInputOptions = Partial<{
     time: boolean;
     url: boolean;
     week: boolean;
+    textarea: boolean;
 }>;

From 9ea534505f24ad09c0294650634ff691ddd624e0 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 18 Jul 2020 13:58:09 +0800
Subject: [PATCH 215/524] support mask select fields

---
 src/snapshot.ts | 4 +---
 src/types.ts    | 3 ++-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 79d6c8053d..b3c50c3c73 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -237,8 +237,6 @@ function serializeNode(
         tagName === 'select'
       ) {
         const value = (n as HTMLInputElement | HTMLTextAreaElement).value;
-        const needBlockTextarea =
-          tagName === 'textarea' && maskInputOptions.textarea;
         if (
           attributes.type !== 'radio' &&
           attributes.type !== 'checkbox' &&
@@ -248,7 +246,7 @@ function serializeNode(
         ) {
           attributes.value =
             maskInputOptions[attributes.type as keyof MaskInputOptions] ||
-            needBlockTextarea
+            maskInputOptions[tagName as keyof MaskInputOptions]
               ? '*'.repeat(value.length)
               : value;
         } else if ((n as HTMLInputElement).checked) {
diff --git a/src/types.ts b/src/types.ts
index 1ec1109e28..a5abef35a4 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -83,6 +83,7 @@ export type MaskInputOptions = Partial<{
   time: boolean;
   url: boolean;
   week: boolean;
-  // unify textarea element with text input
+  // unify textarea and select element with text input
   textarea: boolean;
+  select: boolean;
 }>;

From 4199e55da140e72bb7d75dcf8d96cf194442917a Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 18 Jul 2020 13:58:27 +0800
Subject: [PATCH 216/524] Release 0.8.0

---
 package.json       | 2 +-
 typings/types.d.ts | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index dbaa7dd5b4..e3308648d2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.7.29",
+  "version": "0.8.0",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
diff --git a/typings/types.d.ts b/typings/types.d.ts
index 9e440a8d15..1c819ee8d4 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -68,4 +68,5 @@ export declare type MaskInputOptions = Partial<{
     url: boolean;
     week: boolean;
     textarea: boolean;
+    select: boolean;
 }>;

From 785ff391b99c1a745e029edf6c03eed3035dbd3b Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 18 Jul 2020 14:08:36 +0800
Subject: [PATCH 217/524] add textarea and select to default options

---
 src/snapshot.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index b3c50c3c73..4519a2be5a 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -398,6 +398,8 @@ function snapshot(
           time: true,
           url: true,
           week: true,
+          textarea: true,
+          select: true,
         }
       : maskAllInputsOrOptions === false
       ? {}

From f7d43f5fee7e064dff44375fae087edb42c3e8ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=B3=BD=E5=BA=B7?= <wu.zekang@outlook.com>
Date: Sat, 25 Jul 2020 15:05:45 +0800
Subject: [PATCH 218/524] Add nested scroll support (#31)

---
 src/rebuild.ts     | 29 +++++++++++++++++++++++++++--
 src/snapshot.ts    |  7 +++++++
 src/types.ts       |  2 +-
 typings/types.d.ts |  2 +-
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index c9be6d23f5..bb26aeface 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -102,7 +102,7 @@ function buildNode(
           continue;
         }
         let value = n.attributes[name];
-        value = typeof value === 'boolean' ? '' : value;
+        value = typeof value === 'boolean' || typeof value === 'number' ? '' : value;
         // attribute names start with rr_ are internal attributes added by rrweb
         if (!name.startsWith('rr_')) {
           const isTextarea = tagName === 'textarea' && name === 'value';
@@ -220,6 +220,29 @@ export function buildNodeWithSN(
   return node as INode;
 }
 
+function sideEffects(idNodeMap: idNodeMap) {
+  for(let id in idNodeMap) {
+    const node = idNodeMap[id];
+    const n = node.__sn;
+    if (n.type !== NodeType.Element) {
+      continue;
+    }
+    const el = node as Node as HTMLElement;
+    for(const name in n.attributes) {
+      if (!(n.attributes.hasOwnProperty(name) && name.startsWith('rr_'))) {
+        continue;
+      }
+      const value = n.attributes[name];
+      if (name === 'rr_scrollLeft') {
+        el.scrollLeft = value as number;
+      }
+      if (name === 'rr_scrollTop') {
+        el.scrollTop = value as number;
+      }
+    }
+  }
+}
+
 function rebuild(
   n: serializedNodeWithId,
   doc: Document,
@@ -229,7 +252,9 @@ function rebuild(
   HACK_CSS: boolean = true,
 ): [Node | null, idNodeMap] {
   const idNodeMap: idNodeMap = {};
-  return [buildNodeWithSN(n, doc, idNodeMap, false, HACK_CSS), idNodeMap];
+  const node = buildNodeWithSN(n, doc, idNodeMap, false, HACK_CSS);
+  sideEffects(idNodeMap);
+  return [node, idNodeMap];
 }
 
 export default rebuild;
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 4519a2be5a..685e0fd5aa 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -269,6 +269,13 @@ function serializeNode(
           ? 'paused'
           : 'played';
       }
+      // scroll
+      if ((n as HTMLElement).scrollLeft) {
+        attributes.rr_scrollLeft = (n as HTMLElement).scrollLeft;
+      }
+      if ((n as HTMLElement).scrollTop) {
+        attributes.rr_scrollTop = (n as HTMLElement).scrollTop;
+      }
       if (needBlock) {
         const { width, height } = (n as HTMLElement).getBoundingClientRect();
         attributes.rr_width = `${width}px`;
diff --git a/src/types.ts b/src/types.ts
index a5abef35a4..d8546e8418 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -20,7 +20,7 @@ export type documentTypeNode = {
 };
 
 export type attributes = {
-  [key: string]: string | boolean;
+  [key: string]: string | number | boolean;
 };
 export type elementNode = {
   type: NodeType.Element;
diff --git a/typings/types.d.ts b/typings/types.d.ts
index 1c819ee8d4..90271c1450 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -17,7 +17,7 @@ export declare type documentTypeNode = {
     systemId: string;
 };
 export declare type attributes = {
-    [key: string]: string | boolean;
+    [key: string]: string | number | boolean;
 };
 export declare type elementNode = {
     type: NodeType.Element;

From d92bc733df2167d9692a748e7d5c44a8033e7ea0 Mon Sep 17 00:00:00 2001
From: Jin <jin_wentao@qq.com>
Date: Sat, 25 Jul 2020 17:14:39 +0800
Subject: [PATCH 219/524] :feat add tips (#23)

Co-authored-by: jinwentao <jinwentao@huya.com>
---
 public/index.html   |  4 ++++
 src/Controller.html |  5 +++--
 src/Player.html     | 41 ++++++++++++++++++++++++++++++++++++-----
 src/utils.js        | 17 +++++++++++++++++
 4 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index 7e6ff699b7..e9a0b02e6d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,6 +19,10 @@
         target: document.body,
         data: {
           events,
+          skipInactive: true,
+          showDebug: false,
+          autoPlay: false,
+          showWarning: false,
         },
       });
       component.addEventListener('finish', () => console.log('finish'));
diff --git a/src/Controller.html b/src/Controller.html
index 0212706963..27649d5752 100644
--- a/src/Controller.html
+++ b/src/Controller.html
@@ -55,7 +55,7 @@
       </svg>
       {/if}
     </button>
-    {#each [1, 2, 4, 8] as s}
+    {#each speedOption as s}
     <button
       class:active="s === speed && !isSkipping"
       on:click="setSpeed(s)"
@@ -97,6 +97,7 @@
         isSkipping: false,
         skipInactive: true,
         speed: 1,
+        speedOption: [],
       };
     },
     computed: {
@@ -171,7 +172,7 @@
       },
       play() {
         const { replayer, currentTime } = this.get();
-  
+
         if (currentTime > 0) {
           replayer.resume(currentTime);
         } else {
diff --git a/src/Player.html b/src/Player.html
index b0f1bfcad4..0b766fdc86 100644
--- a/src/Player.html
+++ b/src/Player.html
@@ -9,6 +9,8 @@
     {autoPlay}
     {skipInactive}
     {tags}
+    {speedOption}
+    {speed}
     on:fullscreen="fullscreen()"
   />
   {/if}
@@ -23,6 +25,7 @@
     exitFullscreen,
     isFullscreen,
     onFullscreenChange,
+    typeOf,
   } from './utils.js';
 
   const controllerHeight = 80;
@@ -38,10 +41,12 @@
         height: 576,
         events: [],
         autoPlay: true,
-        skipInactive: true,
         replayer: null,
         triggerFocus: true,
         tags: {},
+        skipInactive: true,
+        speedOption: [1, 2, 3],
+        speed: 1,
       };
     },
     computed: {
@@ -81,12 +86,36 @@
       },
     },
     oncreate() {
-      const { events, triggerFocus } = this.get();
+      const { events, triggerFocus, showWarning, showDebug, speedOption } = this.get();
+      let { skipInactive, speed } = this.get();
+      skipInactive = skipInactive === undefined ? true : !!skipInactive;
+      speed = speed === undefined ? 1 : speed;
+      // 类型检查
+      if (speedOption !== undefined && typeOf(speedOption) !== 'array') {
+        throw new Error('speedOption must be array');
+      }
+      speedOption.forEach(item => {
+        if (typeOf(item) !== 'number') {
+          throw new Error('item of speedOption must be number');
+        }
+      });
+      if (speedOption.indexOf(speed) < 0) {
+        throw new Error(`speed must be one of speedOption,
+        current config:
+        {
+          ...
+          speed: ${speed},
+          speedOption: [${speedOption.toString()}]
+          ...
+        }
+        `);
+      }
       const replayer = new Replayer(events, {
-        speed: 1,
+        speed: speed === undefined ? 1 : speed,
         root: this.refs.frame,
-        skipInactive: true,
-        showWarning: true,
+        skipInactive,
+        showWarning: showWarning === undefined ? true : !!showWarning,
+        showDebug: showDebug === undefined ? true : !!showDebug,
         triggerFocus,
         unpackFn: unpack,
       });
@@ -96,6 +125,8 @@
 
       this.set({
         replayer,
+        skipInactive,
+        speed,
       });
       this.fullscreenListener = onFullscreenChange(() => {
         if (isFullscreen()) {
diff --git a/src/utils.js b/src/utils.js
index 19be8f9712..275f8fb5b3 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -87,3 +87,20 @@ export function onFullscreenChange(handler) {
     document.removeEventListener('MSFullscreenChange', handler);
   };
 }
+
+export function typeOf(obj) {
+  const toString = Object.prototype.toString;
+  const map = {
+    '[object Boolean]': 'boolean',
+    '[object Number]': 'number',
+    '[object String]': 'string',
+    '[object Function]': 'function',
+    '[object Array]': 'array',
+    '[object Date]': 'date',
+    '[object RegExp]': 'regExp',
+    '[object Undefined]': 'undefined',
+    '[object Null]': 'null',
+    '[object Object]': 'object'
+  };
+  return map[toString.call(obj)];
+}

From db28bc4428848728a5585326a865507c3811ec91 Mon Sep 17 00:00:00 2001
From: Jason Barry <jasbarry@me.com>
Date: Tue, 4 Aug 2020 19:09:59 -0700
Subject: [PATCH 220/524] Fixes missing space when converting srcset to use
 absolute URLs (#40)

* Fixes missing space when converting srcset to use absolute URLs

* Fix integration snapshot
---
 src/snapshot.ts                        | 2 +-
 test/__snapshots__/integration.ts.snap | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 685e0fd5aa..351bbc75ef 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -126,7 +126,7 @@ function getAbsoluteSrcsetString(doc: Document, attributeValue: string) {
       }
       return '';
     })
-    .join(',');
+    .join(', ');
 
   return resultingSrcsetString;
 }
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 1e70a29508..7bf95acfbe 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -229,7 +229,7 @@ exports[`[html file]: with-relative-res.html 1`] = `
   <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"\\" />
   <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg\\" />
   <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://exmple.com/a.jpg\\" />
-  <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg 3x,http://localhost:3030/a.jpg 45x,http://localhost:3030/b.png\\" /></body></html>"
+  <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg 3x, http://localhost:3030/a.jpg 45x, http://localhost:3030/b.png\\" /></body></html>"
 `;
 
 exports[`[html file]: with-script.html 1`] = `

From 7aa760e73185b3de45d215e6b2f08a8191a4d9be Mon Sep 17 00:00:00 2001
From: yz-yu <yanzhen@smartx.com>
Date: Sun, 9 Aug 2020 13:35:25 +0800
Subject: [PATCH 221/524] Refactoring rrweb-player (#26)

* enable drag and drop in controller

* setup svelte v3 workflow and entry point

* add ts eslint config and do compatibility fallbacks in API

* rewrite replayer in svelte v3

* fix css import

* fix fullscreen API
---
 .eslintrc.json                                |   17 +-
 .gitignore                                    |    3 +
 package.json                                  |   39 +-
 public/events.js                              |    1 +
 public/global.css                             |    1 -
 public/index.html                             |   48 +-
 rollup.config.js                              |   76 +-
 src/Controller.html                           |  368 ----
 src/Controller.svelte                         |  403 ++++
 src/Player.html                               |  192 --
 src/Player.svelte                             |  178 ++
 src/components/{Switch.html => Switch.svelte} |   21 +-
 src/main.ts                                   |   22 +
 src/{utils.js => utils.ts}                    |   57 +-
 tsconfig.json                                 |    5 +
 yarn.lock                                     | 1650 +++++++++++++++++
 16 files changed, 2436 insertions(+), 645 deletions(-)
 delete mode 100644 src/Controller.html
 create mode 100644 src/Controller.svelte
 delete mode 100644 src/Player.html
 create mode 100644 src/Player.svelte
 rename src/components/{Switch.html => Switch.svelte} (79%)
 create mode 100644 src/main.ts
 rename src/{utils.js => utils.ts} (65%)
 create mode 100644 tsconfig.json
 create mode 100644 yarn.lock

diff --git a/.eslintrc.json b/.eslintrc.json
index 263f8d87ac..f9317620a0 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,7 +1,8 @@
 {
-  "extends": "google",
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaVersion": 8,
+    "ecmaVersion": 2019,
     "sourceType": "module"
   },
   "rules": {
@@ -10,5 +11,15 @@
     "object-curly-spacing": "off",
     "indent": "off"
   },
-  "plugins": ["html"]
+  "env": {
+    "es6": true,
+    "browser": true
+  },
+  "plugins": ["svelte3", "@typescript-eslint"],
+  "overrides": [
+    {
+      "files": ["*.svelte"],
+      "processor": "svelte3/svelte3"
+    }
+  ]
 }
diff --git a/.gitignore b/.gitignore
index 8ade46f340..5bc8d8f704 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 public/bundle.*
+public/build
 package-lock.json
 yarn.lock
 
@@ -9,3 +10,5 @@ temp
 
 dist
 lib
+
+*.log
diff --git a/package.json b/package.json
index 5cd7ffc40d..4d8389bef9 100644
--- a/package.json
+++ b/package.json
@@ -2,29 +2,36 @@
   "name": "rrweb-player",
   "version": "0.4.6",
   "devDependencies": {
-    "eslint": "^5.10.0",
+    "@rollup/plugin-commonjs": "^11.0.0",
+    "@rollup/plugin-node-resolve": "^7.0.0",
+    "@rollup/plugin-typescript": "^4.0.0",
+    "@tsconfig/svelte": "^1.0.0",
+    "@typescript-eslint/eslint-plugin": "^3.7.0",
+    "@typescript-eslint/parser": "^3.7.0",
+    "eslint": "^7.5.0",
     "eslint-config-google": "^0.11.0",
-    "eslint-plugin-html": "^4.0.6",
-    "npm-run-all": "^4.1.3",
-    "rollup": "^0.66.2",
-    "rollup-plugin-commonjs": "^9.1.8",
-    "rollup-plugin-node-resolve": "^3.4.0",
-    "rollup-plugin-postcss": "^1.6.3",
-    "rollup-plugin-svelte": "^4.5.0",
-    "rollup-plugin-terser": "^3.0.0",
-    "sirv-cli": "^0.2.2",
-    "svelte": "^2.16.0"
+    "eslint-plugin-svelte3": "^2.7.3",
+    "postcss-easy-import": "^3.0.0",
+    "rollup": "^1.20.0",
+    "rollup-plugin-livereload": "^1.0.0",
+    "rollup-plugin-svelte": "^5.0.3",
+    "rollup-plugin-terser": "^5.1.2",
+    "sirv-cli": "^0.4.4",
+    "svelte": "^3.2.0",
+    "svelte-check": "^0.1.0",
+    "svelte-preprocess": "^4.0.0",
+    "tslib": "^2.0.0",
+    "typescript": "^3.9.7"
   },
   "dependencies": {
-    "rrweb": "^0.7.32"
+    "rrweb": "^0.9.0"
   },
   "scripts": {
     "build": "rollup -c",
-    "prepublishOnly": "npm run build",
-    "autobuild": "rollup -c -w",
-    "dev": "run-p start:dev autobuild",
+    "dev": "rollup -c -w",
+    "prepublishOnly": "yarn build",
     "start": "sirv public",
-    "start:dev": "sirv public --dev"
+    "validate": "svelte-check"
   },
   "description": "rrweb's replayer UI",
   "main": "lib/index.js",
diff --git a/public/events.js b/public/events.js
index 1ba14b5843..9f82de9454 100644
--- a/public/events.js
+++ b/public/events.js
@@ -1,2 +1,3 @@
+/* eslint-disable */
 // prettier-ignore
 const events = [{"type":4,"data":{"href":"https://demoit.app/e/react#ReactHooks.js","width":1166,"height":705},"timestamp":1544756766750,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":2,"data":{"node":{"type":0,"childNodes":[{"type":1,"name":"html","publicId":"","systemId":"","id":2},{"type":2,"tagName":"html","attributes":{"lang":"en","class":"gr__demoit_app"},"childNodes":[{"type":2,"tagName":"head","attributes":{},"childNodes":[{"type":3,"textContent":"\n  ","id":5},{"type":2,"tagName":"meta","attributes":{"charset":"UTF-8"},"childNodes":[],"id":6},{"type":3,"textContent":"\n  ","id":7},{"type":2,"tagName":"title","attributes":{},"childNodes":[{"type":3,"textContent":"demoit","id":9}],"id":8},{"type":3,"textContent":"\n  ","id":10},{"type":2,"tagName":"link","attributes":{"_cssText":"@font-face { font-family: \"Fira Mono\"; font-style: normal; font-weight: 400; src: local(\"Fira Mono Regular\"), local(\"FiraMono-Regular\"), url('https://demoit.app/static/demoit/font/FiraMono.woff2') format(\"woff2\"); unicode-range: U+460-52F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }.CodeMirror { font-family: \"PT Mono\", monospace; height: 300px; color: black; direction: ltr; }.CodeMirror-lines { padding: 4px 0px; }.CodeMirror pre { padding: 0px 4px; }.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background-color: white; }.CodeMirror-gutters { border-right: 1px solid rgb(221, 221, 221); background-color: rgb(247, 247, 247); white-space: nowrap; }.CodeMirror-linenumber { padding: 0px 3px 0px 5px; min-width: 20px; text-align: right; color: rgb(153, 153, 153); white-space: nowrap; }.CodeMirror-guttermarker { color: black; }.CodeMirror-guttermarker-subtle { color: rgb(153, 153, 153); }.CodeMirror-cursor { border-left: 1px solid black; border-right: 0px; width: 0px; }.CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver; }.cm-fat-cursor .CodeMirror-cursor { width: auto; background: rgb(119, 238, 119); border: 0px !important; }.cm-fat-cursor div.CodeMirror-cursors { z-index: 1; }.cm-fat-cursor-mark { background-color: rgba(20, 255, 20, 0.5); animation: blink 1.06s steps(1, end) 0s infinite normal none running; }.cm-animate-fat-cursor { width: auto; border: 0px; animation: blink 1.06s steps(1, end) 0s infinite normal none running; background-color: rgb(119, 238, 119); }@-webkit-keyframes blink { \n  50% { background-color: transparent; }\n}@keyframes blink { \n  50% { background-color: transparent; }\n}.cm-tab { display: inline-block; text-decoration: inherit; }.CodeMirror-rulers { position: absolute; left: 0px; right: 0px; top: -50px; bottom: -20px; overflow: hidden; }.CodeMirror-ruler { border-left: 1px solid rgb(204, 204, 204); top: 0px; bottom: 0px; position: absolute; }.cm-s-default .cm-header { color: blue; }.cm-s-default .cm-quote { color: rgb(0, 153, 0); }.cm-negative { color: rgb(221, 68, 68); }.cm-positive { color: rgb(34, 153, 34); }.cm-header, .cm-strong { font-weight: bold; }.cm-em { font-style: italic; }.cm-link { text-decoration: underline; }.cm-strikethrough { text-decoration: line-through; }.cm-s-default .cm-keyword { color: rgb(119, 0, 136); }.cm-s-default .cm-atom { color: rgb(34, 17, 153); }.cm-s-default .cm-number { color: rgb(17, 102, 68); }.cm-s-default .cm-def { color: rgb(0, 0, 255); }.cm-s-default .cm-variable-2 { color: rgb(0, 85, 170); }.cm-s-default .cm-variable-3, .cm-s-default .cm-type { color: rgb(0, 136, 85); }.cm-s-default .cm-comment { color: rgb(170, 85, 0); }.cm-s-default .cm-string { color: rgb(170, 17, 17); }.cm-s-default .cm-string-2 { color: rgb(255, 85, 0); }.cm-s-default .cm-meta { color: rgb(85, 85, 85); }.cm-s-default .cm-qualifier { color: rgb(85, 85, 85); }.cm-s-default .cm-builtin { color: rgb(51, 0, 170); }.cm-s-default .cm-bracket { color: rgb(153, 153, 119); }.cm-s-default .cm-tag { color: rgb(17, 119, 0); }.cm-s-default .cm-attribute { color: rgb(0, 0, 204); }.cm-s-default .cm-hr { color: rgb(153, 153, 153); }.cm-s-default .cm-link { color: rgb(0, 0, 204); }.cm-s-default .cm-error { color: red; }.cm-invalidchar { color: red; }.CodeMirror-composing { border-bottom: 2px solid; }div.CodeMirror span.CodeMirror-matchingbracket { color: rgb(0, 187, 0); }div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgb(170, 34, 34); }.CodeMirror-matchingtag { background: rgba(255, 150, 0, 0.3); }.CodeMirror-activeline-background { background: rgb(232, 242, 255); }.CodeMirror { position: relative; overflow: hidden; background: white; }.CodeMirror-scroll { margin-bottom: -30px; margin-right: -30px; padding-bottom: 30px; height: 100%; outline: 0px; position: relative; overflow: scroll !important; }.CodeMirror-sizer { position: relative; border-right: 30px solid transparent; }.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { position: absolute; z-index: 6; display: none; }.CodeMirror-vscrollbar { right: 0px; top: 0px; overflow: hidden scroll; }.CodeMirror-hscrollbar { bottom: 0px; left: 0px; overflow: scroll hidden; }.CodeMirror-scrollbar-filler { right: 0px; bottom: 0px; }.CodeMirror-gutter-filler { left: 0px; bottom: 0px; }.CodeMirror-gutters { position: absolute; left: 0px; top: 0px; min-height: 100%; z-index: 3; }.CodeMirror-gutter { white-space: normal; height: 100%; display: inline-block; vertical-align: top; margin-bottom: -30px; }.CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: none !important; border: none !important; }.CodeMirror-gutter-background { position: absolute; top: 0px; bottom: 0px; z-index: 4; }.CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }.CodeMirror-gutter-wrapper ::selection { background-color: transparent; }.CodeMirror-lines { cursor: text; min-height: 1px; }.CodeMirror pre { border-radius: 0px; border-width: 0px; background: transparent; font-family: inherit; font-size: inherit; margin: 0px; white-space: pre; overflow-wrap: normal; line-height: inherit; color: inherit; z-index: 2; position: relative; overflow: visible; -webkit-tap-highlight-color: transparent; font-variant-ligatures: contextual; }.CodeMirror-wrap pre { overflow-wrap: break-word; white-space: pre-wrap; word-break: normal; }.CodeMirror-linebackground { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 0; }.CodeMirror-linewidget { position: relative; z-index: 2; padding: 0.1px; }.CodeMirror-rtl pre { direction: rtl; }.CodeMirror-code { outline: 0px; }.CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber { box-sizing: content-box; }.CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden; }.CodeMirror-cursor { position: absolute; pointer-events: none; }.CodeMirror-measure pre { position: static; }div.CodeMirror-cursors { visibility: hidden; position: relative; z-index: 3; }div.CodeMirror-dragcursors { visibility: visible; }.CodeMirror-focused div.CodeMirror-cursors { visibility: visible; }.CodeMirror-selected { background: rgb(217, 217, 217); }.CodeMirror-focused .CodeMirror-selected { background: rgb(215, 212, 240); }.CodeMirror-crosshair { cursor: crosshair; }.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: rgb(215, 212, 240); }.cm-searching { background-color: rgba(255, 255, 0, 0.4); }.cm-force-border { padding-right: 0.1px; }@media print {\n  .CodeMirror div.CodeMirror-cursors { visibility: hidden; }\n}.cm-tab-wrap-hack::after { content: \"\"; }span.CodeMirror-selectedtext { background: 0px center; }html { box-sizing: border-box; width: 100%; height: 100%; }*, ::before, ::after { box-sizing: inherit; }body { margin: 0px; padding: 0px; width: 100%; height: 100%; font-family: \"Fira Mono\", monospace; font-size: 14px; line-height: 14px; background: rgb(255, 255, 255); color: rgb(0, 0, 0); }.right { float: right; }svg { fill: currentcolor; }.centered { height: 100%; display: flex; align-items: center; justify-content: center; }.mt1 { margin-top: 1em !important; }.app { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 8000; }.app.dark { background: rgb(32, 48, 58); color: rgb(254, 254, 254); }.app .layout { height: calc(100% - 8px); transition: height 200ms ease-out 0s; }.gutter.gutter-horizontal { cursor: ew-resize; float: left; height: 100%; background: rgb(234, 234, 234); }.gutter.gutter-vertical { cursor: ns-resize; width: 100%; background: rgb(234, 234, 234); }.dark .gutter.gutter-horizontal, .dark .gutter.gutter-vertical { background: rgb(46, 65, 76); }.editor-section { vertical-align: top; height: 100%; }.CodeMirror { height: 100%; transition: opacity 300ms ease 0s; opacity: 1; }.CodeMirror-lines { padding: 1em; }.CodeMirror-selected { background-color: rgb(255, 255, 255) !important; }.output { padding: 1em; position: relative; overflow: auto; }.console { position: relative; overflow: auto; }.console p { margin: 0px; padding: 0.5em; white-space: pre-wrap; }.js-code-editor { height: 100%; width: 100%; overflow: auto; line-height: 1.3em; float: left; z-index: 90; }.status-bar { width: 100%; height: 8px; background: rgb(204, 204, 204); cursor: pointer; transition: height 200ms ease-out 0s; overflow: hidden; }.dark .status-bar { background: rgb(0, 0, 0); }.status-bar > div { display: none; }.status-bar a { display: inline-block; color: rgb(0, 0, 0); text-decoration: none; padding: 8px; cursor: pointer; }.dark .status-bar a { color: rgb(165, 165, 165); }.status-bar a:hover { color: rgb(76, 0, 0); }.dark .status-bar a:hover { color: rgb(123, 109, 109); }.status-bar a.active { font-weight: bold; }.status-bar a svg { transform: translateY(3px); }.popup { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 8100; color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.8); transition: opacity 200ms ease 0s, width 200ms ease-out 0s; opacity: 0; }.popup section { position: absolute; min-width: 600px; max-width: 90%; max-height: 90%; overflow-y: auto; padding: 1em; background: rgb(46, 46, 46); border-radius: 0.2em; box-shadow: rgb(0, 0, 0) 0px 0px 5px 3px; top: 50%; left: 50%; transform: translate(-50%, -50%); }.popup section.multiple-pages { padding: 0px; }.popup .close { background: 0px center; color: rgb(255, 255, 255); border: 0px; position: absolute; top: 0.4em; right: 0.5em; cursor: pointer; outline: 0px; }.popup .close:hover { color: rgb(153, 153, 153); background: 0px center; }.popup .multiple-pages .close { top: 4px; right: 0px; }.popup p { margin: 0px 0px 1em; padding: 0px; line-height: 1.2em; }.popup h1 { padding: 0px; margin: 1em 0px; }.popup h2 { padding: 0px; margin: 0px 0px 1em; }.popup button { padding: 0.6em 1em; background: 0px center; cursor: pointer; border-radius: 4px; border: 2px solid rgb(82, 82, 82); color: rgb(255, 255, 255); outline: 0px; display: inline-block; text-transform: uppercase; font-weight: bold; }.popup button:hover { background: rgb(49, 49, 49); }.popup .right { float: right; }.popup .secondary span { display: inline-block; transform: translateY(-5px); margin-left: 7px; }.popup hr { margin: 1em 0px; border-color: rgb(49, 49, 49); }.popup input, .popup textarea { width: 100%; border: 1px solid rgb(82, 82, 82); padding: 0.6em; display: block; border-radius: 4px; outline: 0px; margin-bottom: 1em; }.popup textarea { height: 162px; }.popup a { color: inherit; }.popup a:hover { text-decoration: none; }.popup .sub-nav { list-style: none; margin: 0px; padding: 0px; background: rgb(64, 64, 64); }.popup .sub-nav li { display: inline-block; margin: 0px; padding: 0px; background: rgb(64, 64, 64); }.popup .sub-nav li a { display: block; text-decoration: none; padding: 1em; text-transform: uppercase; border-right: 1px solid rgb(14, 14, 14); }.popup .sub-nav li a:hover { color: rgb(153, 153, 153); }.popup .sub-nav li.active { background: rgb(46, 46, 46); }.popup .content { padding: 1em; }@keyframes bubble { \n  0% { transform: scale(0.5); }\n  50% { transform: scale(1.2); }\n  100% { transform: scale(0.5); }\n}.spinner { width: 20px; height: 20px; background: rgb(0, 0, 0); border-radius: 10px; animation: bubble 1s ease 0s infinite normal none running; }.cm-s-light.CodeMirror { background: rgb(255, 255, 255); color: rgb(36, 41, 46); }.cm-s-light .CodeMirror-gutters { background: rgb(255, 255, 255); border-right-width: 0px; }.cm-s-light .CodeMirror-guttermarker { color: white; }.cm-s-light .CodeMirror-guttermarker-subtle { color: rgb(208, 208, 208); }.cm-s-light .CodeMirror-linenumber { color: rgb(149, 157, 165); padding: 0px 16px; }.cm-s-light .CodeMirror-cursor { border-left: 1px solid rgb(36, 41, 46); }.cm-s-light .CodeMirror-activeline-background { background: rgb(250, 251, 252); }.cm-s-light .CodeMirror-matchingbracket { text-decoration: underline; color: rgb(36, 41, 46) !important; }.cm-s-light .CodeMirror-lines { font-family: inherit; font-size: inherit; background: rgb(255, 255, 255); line-height: 1.5; }.cm-s-light .cm-comment { color: rgb(106, 115, 125); }.cm-s-light .cm-constant { color: rgb(0, 92, 197); }.cm-s-light .cm-entity { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(111, 66, 193); }.cm-s-light .cm-keyword { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(215, 58, 73); }.cm-s-light .cm-storage { color: rgb(215, 58, 73); }.cm-s-light .cm-string { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(3, 148, 30); }.cm-s-light .cm-support { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(0, 92, 197); }.cm-s-light .cm-variable { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(227, 98, 9); }.cm-s-light .cm-tag { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(13, 110, 171); }.cm-s-light .cm-string-2 { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(3, 148, 30); }.CodeMirror-selectedtext { color: rgb(0, 0, 0) !important; background: rgb(209, 216, 224) !important; }.cm-s-dark.CodeMirror { background: rgb(32, 48, 58); color: rgb(243, 243, 243); }.cm-s-dark .CodeMirror-gutters { background: rgb(32, 48, 58); border-right-width: 0px; }.cm-s-dark .CodeMirror-guttermarker { color: black; }.cm-s-dark .CodeMirror-guttermarker-subtle { color: rgb(208, 208, 208); }.cm-s-dark .CodeMirror-linenumber { color: rgb(149, 157, 165); padding: 0px 16px; }.cm-s-dark .CodeMirror-cursor { border-left: 1px solid rgb(243, 243, 243); }.cm-s-dark .CodeMirror-activeline-background { background: rgb(58, 58, 58); }.cm-s-dark .CodeMirror-matchingbracket { text-decoration: underline; color: rgb(255, 255, 255) !important; }.cm-s-dark .CodeMirror-lines { font-family: inherit; font-size: inherit; background: rgb(32, 48, 58); line-height: 1.5; }.cm-s-dark .cm-comment { color: rgb(106, 115, 125); }.cm-s-dark .cm-constant { color: rgb(0, 92, 197); }.cm-s-dark .cm-entity { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(111, 66, 193); }.cm-s-dark .cm-keyword { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(178, 194, 226); }.cm-s-dark .cm-storage { color: rgb(178, 194, 226); }.cm-s-dark .cm-string { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(142, 175, 134); }.cm-s-dark .cm-support { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(0, 92, 197); }.cm-s-dark .cm-variable { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(222, 183, 156); }.cm-s-dark .cm-def { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(222, 183, 156); }.cm-s-dark .cm-tag { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(175, 191, 230); }.cm-s-dark .cm-string-2 { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(142, 175, 134); }.CodeMirror-selectedtext { color: rgb(0, 0, 0) !important; background: rgb(209, 216, 224) !important; }"},"childNodes":[],"id":11},{"type":3,"textContent":"\n  ","id":12},{"type":2,"tagName":"link","attributes":{"rel":"shortcut icon","type":"image/png","href":"https://demoit.app/e/img/demoit_64x64.png"},"childNodes":[],"id":13},{"type":3,"textContent":"\n  ","id":14},{"type":2,"tagName":"meta","attributes":{"name":"viewport","content":"user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"},"childNodes":[],"id":15},{"type":3,"textContent":"\n","id":16}],"id":4},{"type":3,"textContent":"\n","id":17},{"type":2,"tagName":"body","attributes":{"data-gr-c-s-loaded":"true"},"childNodes":[{"type":3,"textContent":"\n  ","id":19},{"type":2,"tagName":"script","attributes":{"type":"text/template","id":"template-output"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":21}],"id":20},{"type":3,"textContent":"\n\n  ","id":22},{"type":2,"tagName":"script","attributes":{"type":"text/template","id":"template-console"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":24}],"id":23},{"type":3,"textContent":"\n\n  ","id":25},{"type":2,"tagName":"script","attributes":{"type":"text/template","id":"template-editor"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":27}],"id":26},{"type":3,"textContent":"\n\n  ","id":28},{"type":2,"tagName":"script","attributes":{"type":"text/template","id":"template-code-preview"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":30}],"id":29},{"type":3,"textContent":"\n\n  ","id":31},{"type":2,"tagName":"div","attributes":{"class":"app light"},"childNodes":[{"type":3,"textContent":"\n    ","id":33},{"type":2,"tagName":"div","attributes":{"class":"status-bar","style":"height: 36px;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"data-export":"buttons","style":"display: block;"},"childNodes":[{"type":2,"tagName":"a","attributes":{"data-export":"file","href":"javascript:void(0);","class":"active"},"childNodes":[{"type":3,"textContent":"ReactHooks.js","id":37}],"id":36},{"type":2,"tagName":"a","attributes":{"data-export":"newFileButton","href":"javascript:void(0)"},"childNodes":[{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[{"type":2,"tagName":"path","attributes":{"d":"M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"},"childNodes":[],"isSVG":true,"id":40}],"isSVG":true,"id":39}],"id":38},{"type":2,"tagName":"a","attributes":{"data-export":"closeButton","class":"right","href":"javascript:void(0)"},"childNodes":[{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[{"type":2,"tagName":"path","attributes":{"d":"M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"},"childNodes":[],"isSVG":true,"id":43}],"isSVG":true,"id":42}],"id":41},{"type":2,"tagName":"a","attributes":{"data-export":"settingsButton","class":"right","href":"javascript:void(0)"},"childNodes":[{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[{"type":2,"tagName":"path","attributes":{"d":"M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"},"childNodes":[],"isSVG":true,"id":46}],"isSVG":true,"id":45}],"id":44}],"id":35}],"id":34},{"type":3,"textContent":"\n    ","id":47},{"type":2,"tagName":"div","attributes":{"class":"layout","style":"height: calc(100% - 36px); filter: none;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"editor-section editor","style":"height: calc(70% - 1px);"},"childNodes":[{"type":3,"textContent":"\n      ","id":50},{"type":2,"tagName":"div","attributes":{"class":"js-code-editor"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"CodeMirror cm-s-light CodeMirror-focused"},"childNodes":[{"type":2,"tagName":"div","attributes":{"style":"overflow: hidden; position: relative; width: 3px; height: 0px; top: 140px; left: 363px;"},"childNodes":[{"type":2,"tagName":"textarea","attributes":{"autocorrect":"off","autocapitalize":"off","spellcheck":"false","style":"position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;","tabindex":"0"},"childNodes":[],"id":54}],"id":53},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-vscrollbar","tabindex":"-1","cm-not-content":"true","style":"bottom: 0px; display: block;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"style":"min-width: 1px; height: 679px;"},"childNodes":[],"id":56}],"id":55},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-hscrollbar","tabindex":"-1","cm-not-content":"true"},"childNodes":[{"type":2,"tagName":"div","attributes":{"style":"height: 100%; min-height: 1px; width: 0px;"},"childNodes":[],"id":58}],"id":57},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-scrollbar-filler","cm-not-content":"true"},"childNodes":[],"id":59},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-gutter-filler","cm-not-content":"true"},"childNodes":[],"id":60},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-scroll","tabindex":"-1"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-sizer","style":"margin-left: 0px; margin-bottom: -15px; border-right-width: 15px; min-height: 679px; min-width: 773.828px; padding-right: 15px; padding-bottom: 0px;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"style":"position: relative; top: 0px;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-lines","role":"presentation"},"childNodes":[{"type":2,"tagName":"div","attributes":{"role":"presentation","style":"position: relative; outline: none;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-measure"},"childNodes":[],"id":66},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-measure"},"childNodes":[],"id":67},{"type":2,"tagName":"div","attributes":{"style":"position: relative; z-index: 1;"},"childNodes":[],"id":68},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-cursors","style":"visibility: hidden;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-cursor","style":"left: 349px; top: 273px; height: 21px;"},"childNodes":[{"type":3,"textContent":" ","id":71}],"id":70}],"id":69},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-code","role":"presentation","style":""},"childNodes":[{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"const","id":76}],"id":75},{"type":3,"textContent":" ","id":77},{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[{"type":3,"textContent":"base","id":79}],"id":78},{"type":3,"textContent":" ","id":80},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"=","id":82}],"id":81},{"type":3,"textContent":" ","id":83},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"Date","id":85}],"id":84},{"type":3,"textContent":".","id":86},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"now","id":88}],"id":87},{"type":3,"textContent":"()","id":89}],"id":74}],"id":73},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"cm-text":""},"childNodes":[{"type":3,"textContent":"​","id":93}],"id":92}],"id":91}],"id":90},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"class","id":97}],"id":96},{"type":3,"textContent":" ","id":98},{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[{"type":3,"textContent":"App","id":100}],"id":99},{"type":3,"textContent":" ","id":101},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"extends","id":103}],"id":102},{"type":3,"textContent":" ","id":104},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"React","id":106}],"id":105},{"type":3,"textContent":".","id":107},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"Component","id":109}],"id":108},{"type":3,"textContent":" {","id":110}],"id":95}],"id":94},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  ","id":113},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"constructor","id":115}],"id":114},{"type":3,"textContent":"(","id":116},{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[{"type":3,"textContent":"props","id":118}],"id":117},{"type":3,"textContent":") {","id":119}],"id":112}],"id":111},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"    ","id":122},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"super","id":124}],"id":123},{"type":3,"textContent":"(","id":125},{"type":2,"tagName":"span","attributes":{"class":"cm-variable-2"},"childNodes":[{"type":3,"textContent":"props","id":127}],"id":126},{"type":3,"textContent":");","id":128}],"id":121}],"id":120},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"    ","id":131},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"this","id":133}],"id":132},{"type":3,"textContent":".","id":134},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"state","id":136}],"id":135},{"type":3,"textContent":" ","id":137},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"=","id":139}],"id":138},{"type":3,"textContent":" {","id":140}],"id":130}],"id":129},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"      ","id":143},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"count","id":145}],"id":144},{"type":3,"textContent":": ","id":146},{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[{"type":3,"textContent":"0","id":148}],"id":147},{"type":3,"textContent":",","id":149}],"id":142}],"id":141},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"      ","id":152},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"time","id":154}],"id":153},{"type":3,"textContent":": ","id":155},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"base","id":157}],"id":156},{"type":3,"textContent":",","id":158}],"id":151}],"id":150},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"    };","id":161}],"id":160}],"id":159},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  }","id":164}],"id":163}],"id":162},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  ","id":167}],"id":166}],"id":165},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  ","id":170},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"componentDidMount","id":172}],"id":171},{"type":3,"textContent":"() {","id":173}],"id":169}],"id":168},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"    ","id":176},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"setInterval","id":178}],"id":177},{"type":3,"textContent":"(() ","id":179},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"=>","id":181}],"id":180},{"type":3,"textContent":" {","id":182}],"id":175}],"id":174},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"      ","id":185},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"this","id":187}],"id":186},{"type":3,"textContent":".","id":188},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"setState","id":190}],"id":189},{"type":3,"textContent":"({ ","id":191},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"time","id":193}],"id":192},{"type":3,"textContent":": ","id":194},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"Date","id":196}],"id":195},{"type":3,"textContent":".","id":197},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"now","id":199}],"id":198},{"type":3,"textContent":"() })","id":200}],"id":184}],"id":183},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"    }, ","id":203},{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[{"type":3,"textContent":"1000","id":205}],"id":204},{"type":3,"textContent":");","id":206}],"id":202}],"id":201},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  }","id":209}],"id":208}],"id":207},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  ","id":212}],"id":211}],"id":210},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  ","id":215},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"render","id":217}],"id":216},{"type":3,"textContent":"() {","id":218}],"id":214}],"id":213},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"    ","id":221},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"const","id":223}],"id":222},{"type":3,"textContent":" { ","id":224},{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[{"type":3,"textContent":"count","id":226}],"id":225},{"type":3,"textContent":", ","id":227},{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[{"type":3,"textContent":"time","id":229}],"id":228},{"type":3,"textContent":" } ","id":230},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"=","id":232}],"id":231},{"type":3,"textContent":" ","id":233},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"this","id":235}],"id":234},{"type":3,"textContent":".","id":236},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"state","id":238}],"id":237},{"type":3,"textContent":";","id":239}],"id":220}],"id":219},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  ","id":242},{"type":2,"tagName":"span","attributes":{"class":"cm-tab","role":"presentation","cm-text":"\t"},"childNodes":[{"type":3,"textContent":"  ","id":244}],"id":243},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"return","id":246}],"id":245},{"type":3,"textContent":" (","id":247}],"id":241}],"id":240},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"    ","id":250},{"type":2,"tagName":"span","attributes":{"class":"cm-tab","role":"presentation","cm-text":"\t"},"childNodes":[{"type":3,"textContent":"  ","id":252}],"id":251},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"<","id":254}],"id":253},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"section","id":256}],"id":255},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":258}],"id":257}],"id":249}],"id":248},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"        ","id":261},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"<","id":263}],"id":262},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"div","id":265}],"id":264},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":267}],"id":266},{"type":3,"textContent":"Time {","id":268},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"Math","id":270}],"id":269},{"type":3,"textContent":".","id":271},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"round","id":273}],"id":272},{"type":3,"textContent":"((","id":274},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"time","id":276}],"id":275},{"type":3,"textContent":" ","id":277},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"-","id":279}],"id":278},{"type":3,"textContent":" ","id":280},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"base","id":282}],"id":281},{"type":3,"textContent":") ","id":283},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"/","id":285}],"id":284},{"type":3,"textContent":" ","id":286},{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[{"type":3,"textContent":"1000","id":288}],"id":287},{"type":3,"textContent":")}","id":289},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"</","id":291}],"id":290},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"div","id":293}],"id":292},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":295}],"id":294}],"id":260}],"id":259},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"        ","id":298},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"<","id":300}],"id":299},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"div","id":302}],"id":301},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":304}],"id":303},{"type":3,"textContent":"Counter {","id":305},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"count","id":307}],"id":306},{"type":3,"textContent":"}","id":308},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"</","id":310}],"id":309},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"div","id":312}],"id":311},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":314}],"id":313}],"id":297}],"id":296},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"        ","id":317},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"<","id":319}],"id":318},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"button","id":321}],"id":320},{"type":3,"textContent":" ","id":322},{"type":2,"tagName":"span","attributes":{"class":"cm-attribute"},"childNodes":[{"type":3,"textContent":"onClick","id":324}],"id":323},{"type":3,"textContent":"={() ","id":325},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"=>","id":327}],"id":326},{"type":3,"textContent":" ","id":328},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"this","id":330}],"id":329},{"type":3,"textContent":".","id":331},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"setState","id":333}],"id":332},{"type":3,"textContent":"({ ","id":334},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"count","id":336}],"id":335},{"type":3,"textContent":": ","id":337},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"count","id":339}],"id":338},{"type":3,"textContent":" ","id":340},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"+","id":342}],"id":341},{"type":3,"textContent":" ","id":343},{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[{"type":3,"textContent":"1","id":345}],"id":344},{"type":3,"textContent":" })}","id":346},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":348}],"id":347},{"type":3,"textContent":"click to count","id":349},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"</","id":351}],"id":350},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"button","id":353}],"id":352},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":355}],"id":354}],"id":316}],"id":315},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"      ","id":358},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"</","id":360}],"id":359},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"section","id":362}],"id":361},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":364}],"id":363}],"id":357}],"id":356},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"    )","id":367}],"id":366}],"id":365},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"  }","id":370}],"id":369}],"id":368},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"}","id":373}],"id":372}],"id":371},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"cm-text":""},"childNodes":[{"type":3,"textContent":"​","id":377}],"id":376}],"id":375}],"id":374},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"ReactDOM","id":381}],"id":380},{"type":3,"textContent":".","id":382},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"render","id":384}],"id":383},{"type":3,"textContent":"(","id":385},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"<","id":387}],"id":386},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"App","id":389}],"id":388},{"type":3,"textContent":" ","id":390},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"/>","id":392}],"id":391},{"type":3,"textContent":", ","id":393},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"document","id":395}],"id":394},{"type":3,"textContent":".","id":396},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"querySelector","id":398}],"id":397},{"type":3,"textContent":"(","id":399},{"type":2,"tagName":"span","attributes":{"class":"cm-string"},"childNodes":[{"type":3,"textContent":"'.output'","id":401}],"id":400},{"type":3,"textContent":"));","id":402}],"id":379}],"id":378},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"cm-text":""},"childNodes":[{"type":3,"textContent":"​","id":406}],"id":405}],"id":404}],"id":403}],"id":72}],"id":65}],"id":64}],"id":63}],"id":62},{"type":2,"tagName":"div","attributes":{"style":"position: absolute; height: 15px; width: 1px; border-bottom: 0px solid transparent; top: 679px;"},"childNodes":[],"id":407},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-gutters","style":"display: none; height: 694px;"},"childNodes":[],"id":408}],"id":61}],"id":52}],"id":51},{"type":3,"textContent":"\n    ","id":409}],"id":49},{"type":2,"tagName":"div","attributes":{"class":"gutter gutter-vertical","style":"height: 2px;"},"childNodes":[],"id":410},{"type":2,"tagName":"div","attributes":{"class":"editor-section","style":"height: calc(30% - 1px);"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"editor-section output","id":"output","style":"float: left; width: calc(50% - 1px);"},"childNodes":[{"type":2,"tagName":"section","attributes":{},"childNodes":[{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"Time ","id":415},{"type":3,"textContent":"0","id":416}],"id":414},{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"Counter ","id":418},{"type":3,"textContent":"0","id":419}],"id":417},{"type":2,"tagName":"button","attributes":{},"childNodes":[{"type":3,"textContent":"click to count","id":421}],"id":420}],"id":413}],"id":412},{"type":2,"tagName":"div","attributes":{"class":"gutter gutter-horizontal","style":"width: 2px;"},"childNodes":[],"id":422},{"type":2,"tagName":"div","attributes":{"class":"editor-section console","style":"float: left; width: calc(50% - 1px);"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"centered"},"childNodes":[{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"console.log(...)","id":426}],"id":425}],"id":424}],"id":423}],"id":411}],"id":48},{"type":3,"textContent":"\n  ","id":427}],"id":32},{"type":3,"textContent":"\n\n  ","id":428},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":430}],"id":429},{"type":3,"textContent":"\n  ","id":431},{"type":2,"tagName":"script","attributes":{"src":"https://demoit.app/static/demoit/demoit.js"},"childNodes":[],"id":432},{"type":2,"tagName":"script","attributes":{"src":"https://demoit.app/e/resources/editor.js"},"childNodes":[],"id":433},{"type":3,"textContent":"\n\n\n","id":434},{"type":2,"tagName":"script","attributes":{"src":"https://demoit.app/e/resources/react-16.7.0-alpha.0.js"},"childNodes":[],"id":435},{"type":2,"tagName":"script","attributes":{"src":"https://demoit.app/e/resources/react-dom.16.7.0-alpha.0.js"},"childNodes":[],"id":436}],"id":18}],"id":3}],"id":1},"initialOffset":{"left":0,"top":0}},"timestamp":1544756766761,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756767101,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":1158,"y":93,"id":55,"timeOffset":-1}]},"timestamp":1544756767119,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"1"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756767141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":1019,"y":171,"id":174,"timeOffset":-469},{"x":934,"y":230,"id":207,"timeOffset":-435},{"x":921,"y":239,"id":210,"timeOffset":-403},{"x":926,"y":238,"id":207,"timeOffset":-377}]},"timestamp":1544756767620,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756767631,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":918,"y":241,"id":210,"timeOffset":-280},{"x":896,"y":248,"id":210,"timeOffset":-255},{"x":848,"y":257,"id":210,"timeOffset":-223},{"x":806,"y":260,"id":213,"timeOffset":-190},{"x":764,"y":264,"id":213,"timeOffset":-156},{"x":757,"y":268,"id":213,"timeOffset":-122}]},"timestamp":1544756768122,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"2"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756768141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756768161,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":1,"id":213,"x":757,"y":268},"timestamp":1544756768297,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":53,"attributes":{"style":"overflow: hidden; position: relative; width: 3px; height: 0px; top: 224px; left: 119px;"}}],"removes":[{"parentId":69,"id":70}],"adds":[{"parentId":69,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-cursor","style":"left: 105px; top: 357px; height: 21px;"},"childNodes":[],"id":437}},{"parentId":437,"previousId":null,"nextId":null,"node":{"type":3,"textContent":" ","id":438}}]},"timestamp":1544756768304,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":0,"id":213,"x":757,"y":268},"timestamp":1544756768475,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":2,"id":213,"x":757,"y":268},"timestamp":1544756768475,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756768830,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"3"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756769142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756769361,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756769890,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"4"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756770142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756770420,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756770951,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"5"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756771141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756771480,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756772010,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"6"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756772141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756772540,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756773070,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"7"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756773142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756773601,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756774131,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"8"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756774141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756774660,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"9"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756775142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756775190,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756775720,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"10"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756776142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756776250,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756776781,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"11"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756777141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756777311,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756777841,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"12"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756778142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756778371,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756778900,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"13"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756779141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756779430,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756779960,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"14"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756780141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756780490,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756781020,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"15"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756781140,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756781550,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756782081,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"16"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756782142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756782610,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"17"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756783141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756783142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756783670,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"18"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756784142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756784200,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756784730,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"19"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756785141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756785260,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756785791,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"20"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756786141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756786321,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756786851,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"21"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756787142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756787380,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756787911,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"22"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756788141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756788440,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756788970,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"23"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756789142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756789500,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756790031,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"24"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756790142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756790561,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756791090,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"25"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756791141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756791621,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"26"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756792142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756792151,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756792680,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"27"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756793142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756793211,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756793740,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"28"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756794141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756794270,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756794800,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"29"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756795141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756795331,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756795860,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"30"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756796142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756796390,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756796921,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"31"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756797142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756797450,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756797980,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"32"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756798142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756798510,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756799041,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"33"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756799142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756799570,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756800100,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"34"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756800142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756800631,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"35"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756801142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756801161,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756801691,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"36"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756802142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756802221,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756802750,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"37"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756803142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756803280,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756803810,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"38"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756804142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756804340,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756804871,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"39"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756805141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756805400,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756805930,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"40"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756806142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756806460,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756806990,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"41"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756807142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756807520,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756808051,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"42"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756808142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756808580,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756809110,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"43"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756809142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756809640,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"44"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756810141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756810170,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756810701,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"45"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756811141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":750,"y":268,"id":213,"timeOffset":0}]},"timestamp":1544756811187,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756811230,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":720,"y":274,"id":213,"timeOffset":-472},{"x":682,"y":281,"id":219,"timeOffset":-438},{"x":621,"y":284,"id":219,"timeOffset":-405},{"x":576,"y":288,"id":219,"timeOffset":-371},{"x":529,"y":305,"id":240,"timeOffset":-338},{"x":506,"y":327,"id":248,"timeOffset":-305},{"x":492,"y":345,"id":259,"timeOffset":-271},{"x":490,"y":356,"id":292,"timeOffset":-238},{"x":501,"y":374,"id":296,"timeOffset":-205}]},"timestamp":1544756811689,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756811760,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"46"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756812141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":505,"y":396,"id":338,"timeOffset":-337},{"x":505,"y":427,"id":356,"timeOffset":-306},{"x":511,"y":453,"id":368,"timeOffset":-273},{"x":520,"y":491,"id":374,"timeOffset":-240},{"x":526,"y":513,"id":412,"timeOffset":-205},{"x":536,"y":548,"id":413,"timeOffset":-173},{"x":540,"y":575,"id":412,"timeOffset":-139},{"x":539,"y":592,"id":412,"timeOffset":-107},{"x":536,"y":596,"id":412,"timeOffset":-73},{"x":533,"y":600,"id":412,"timeOffset":-38},{"x":527,"y":607,"id":412,"timeOffset":-6}]},"timestamp":1544756812190,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756812290,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":522,"y":612,"id":412,"timeOffset":-474},{"x":517,"y":618,"id":412,"timeOffset":-441},{"x":516,"y":618,"id":412,"timeOffset":-346}]},"timestamp":1544756812691,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756812821,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"47"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756813142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":507,"y":610,"id":412,"timeOffset":-131},{"x":487,"y":594,"id":412,"timeOffset":-107},{"x":440,"y":546,"id":417,"timeOffset":-74},{"x":412,"y":519,"id":414,"timeOffset":-40},{"x":394,"y":492,"id":374,"timeOffset":-7}]},"timestamp":1544756813191,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756813350,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":1,"id":368,"x":387,"y":463},"timestamp":1544756813496,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":53,"attributes":{"style":"overflow: hidden; position: relative; width: 3px; height: 0px; top: 413px; left: 43px;"}},{"id":69,"attributes":{"style":""}}],"removes":[{"parentId":69,"id":437}],"adds":[{"parentId":69,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-cursor","style":"left: 29px; top: 546px; height: 21px;"},"childNodes":[],"id":439}},{"parentId":439,"previousId":null,"nextId":null,"node":{"type":3,"textContent":" ","id":440}}]},"timestamp":1544756813505,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":0,"id":368,"x":387,"y":463},"timestamp":1544756813674,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":2,"id":368,"x":387,"y":463},"timestamp":1544756813674,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":390,"y":475,"id":371,"timeOffset":-474}]},"timestamp":1544756813691,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756814033,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"48"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756814141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756814562,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":55,"x":0,"y":120},"timestamp":1544756814684,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":61,"x":0,"y":0},"timestamp":1544756814785,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756815093,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"49"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756815142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":55,"x":0,"y":9},"timestamp":1544756815340,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":61,"x":0,"y":163},"timestamp":1544756815441,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":55,"x":0,"y":212},"timestamp":1544756815541,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756815623,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"50"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756816142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756816153,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756816683,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"51"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756817142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756817213,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756817743,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"52"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756818141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756818274,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":384,"y":449,"id":397,"timeOffset":0}]},"timestamp":1544756818391,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":55,"x":0,"y":166},"timestamp":1544756818797,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756818804,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":379,"y":407,"id":371,"timeOffset":-476},{"x":375,"y":322,"id":315,"timeOffset":-443},{"x":379,"y":294,"id":260,"timeOffset":-410}]},"timestamp":1544756818891,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":61,"x":0,"y":7},"timestamp":1544756818897,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":55,"x":0,"y":0},"timestamp":1544756818998,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"53"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756819142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":55,"x":0,"y":19},"timestamp":1544756819298,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756819333,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":61,"x":0,"y":212},"timestamp":1544756819398,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756819863,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"54"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756820142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756820393,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756820923,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"55"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756821141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756821454,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756821983,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"56"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756822141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756822513,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756823043,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"57"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756823142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756823573,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756824103,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"58"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756824141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756824633,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"59"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756825141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756825163,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756825693,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"60"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756826142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756826223,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756826753,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"61"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756827142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756827283,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756827813,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"62"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756828142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756828343,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756828873,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"63"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756829141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756829403,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756829932,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"64"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756830142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756830463,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756830993,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"65"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756831144,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756831522,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756832054,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"66"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756832142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756832583,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756833114,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"67"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756833142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756833643,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"68"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756834141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756834173,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756834703,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"69"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756835142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756835233,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756835763,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"70"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756836142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756836293,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":364,"y":238,"id":240,"timeOffset":0}]},"timestamp":1544756836504,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756836823,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":339,"y":167,"id":207,"timeOffset":-478},{"x":289,"y":47,"id":162,"timeOffset":-445},{"x":255,"y":11,"id":35,"timeOffset":-412},{"x":243,"y":24,"id":35,"timeOffset":-379},{"x":235,"y":45,"id":162,"timeOffset":-346},{"x":229,"y":52,"id":165,"timeOffset":-312},{"x":226,"y":53,"id":165,"timeOffset":-279},{"x":217,"y":56,"id":165,"timeOffset":-245},{"x":189,"y":60,"id":165,"timeOffset":-212},{"x":159,"y":56,"id":165,"timeOffset":-179},{"x":127,"y":41,"id":162,"timeOffset":-145},{"x":102,"y":25,"id":36,"timeOffset":-112},{"x":102,"y":24,"id":36,"timeOffset":-38},{"x":103,"y":24,"id":36,"timeOffset":-9}]},"timestamp":1544756837004,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"71"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756837142,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756837353,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":103,"y":23,"id":36,"timeOffset":-470},{"x":104,"y":23,"id":36,"timeOffset":-413},{"x":104,"y":23,"id":36,"timeOffset":-379},{"x":104,"y":23,"id":36,"timeOffset":-345},{"x":105,"y":23,"id":36,"timeOffset":-306}]},"timestamp":1544756837504,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":1,"id":36,"x":105,"y":23},"timestamp":1544756837538,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":6,"id":54},"timestamp":1544756837539,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":52,"attributes":{"class":"CodeMirror cm-s-light"}}],"removes":[],"adds":[]},"timestamp":1544756837540,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":5,"id":36},"timestamp":1544756837542,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":0,"id":36,"x":105,"y":23},"timestamp":1544756837716,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":2,"id":36,"x":105,"y":23},"timestamp":1544756837716,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":6,"id":36},"timestamp":1544756837717,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":441,"attributes":{"style":"display: block;"}}],"removes":[{"parentId":34,"id":35},{"parentId":412,"id":413}],"adds":[{"parentId":34,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"data-export":"buttons","style":"display: block;"},"childNodes":[],"id":441}},{"parentId":441,"previousId":null,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"file","href":"javascript:void(0);","class":"active"},"childNodes":[],"id":442}},{"parentId":442,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"ReactHooks.js","id":443}},{"parentId":441,"previousId":442,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"newFileButton","href":"javascript:void(0)"},"childNodes":[],"id":444}},{"parentId":444,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":445}},{"parentId":445,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"},"childNodes":[],"isSVG":true,"id":446}},{"parentId":441,"previousId":444,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"closeButton","class":"right","href":"javascript:void(0)"},"childNodes":[],"id":447}},{"parentId":447,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":448}},{"parentId":448,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"},"childNodes":[],"isSVG":true,"id":449}},{"parentId":441,"previousId":447,"nextId":null,"node":{"type":2,"tagName":"a","attributes":{"data-export":"settingsButton","class":"right","href":"javascript:void(0)"},"childNodes":[],"id":450}},{"parentId":450,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":451}},{"parentId":451,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"},"childNodes":[],"isSVG":true,"id":452}},{"parentId":412,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"centered"},"childNodes":[],"id":453}},{"parentId":453,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"<div id=\"output\" />","id":454}}]},"timestamp":1544756837723,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":5,"id":54},"timestamp":1544756837758,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":72,"attributes":{"style":""}},{"id":53,"attributes":{"style":"overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 18px;"}},{"id":62,"attributes":{"style":"margin-left: 0px; margin-bottom: -15px; border-right-width: 15px; min-height: 679px; min-width: 773.828px; padding-right: 15px; padding-bottom: 0px;"}},{"id":408,"attributes":{"style":"display: none; height: 694px;"}},{"id":52,"attributes":{"class":"CodeMirror cm-s-light CodeMirror-focused"}},{"id":69,"attributes":{"style":""}},{"id":791,"attributes":{"style":"display: block;"}}],"removes":[{"parentId":423,"id":424},{"parentId":34,"id":441},{"parentId":72,"id":73},{"parentId":72,"id":90},{"parentId":72,"id":94},{"parentId":72,"id":111},{"parentId":72,"id":120},{"parentId":72,"id":129},{"parentId":72,"id":141},{"parentId":72,"id":150},{"parentId":72,"id":159},{"parentId":72,"id":162},{"parentId":72,"id":165},{"parentId":72,"id":168},{"parentId":72,"id":174},{"parentId":72,"id":183},{"parentId":72,"id":201},{"parentId":72,"id":207},{"parentId":72,"id":210},{"parentId":72,"id":213},{"parentId":72,"id":219},{"parentId":72,"id":240},{"parentId":72,"id":248},{"parentId":72,"id":259},{"parentId":72,"id":296},{"parentId":72,"id":315},{"parentId":72,"id":356},{"parentId":72,"id":365},{"parentId":72,"id":368},{"parentId":72,"id":371},{"parentId":72,"id":374},{"parentId":72,"id":378},{"parentId":72,"id":403},{"parentId":69,"id":439},{"parentId":412,"id":453}],"adds":[{"parentId":72,"previousId":null,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":455}},{"parentId":455,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":456}},{"parentId":456,"previousId":null,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":457}},{"parentId":457,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"const","id":458}},{"parentId":456,"previousId":457,"nextId":-1,"node":{"type":3,"textContent":" ","id":459}},{"parentId":456,"previousId":459,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[],"id":460}},{"parentId":460,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"base","id":461}},{"parentId":456,"previousId":460,"nextId":-1,"node":{"type":3,"textContent":" ","id":462}},{"parentId":456,"previousId":462,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[],"id":463}},{"parentId":463,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"=","id":464}},{"parentId":456,"previousId":463,"nextId":-1,"node":{"type":3,"textContent":" ","id":465}},{"parentId":456,"previousId":465,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":466}},{"parentId":466,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"Date","id":467}},{"parentId":456,"previousId":466,"nextId":-1,"node":{"type":3,"textContent":".","id":468}},{"parentId":456,"previousId":468,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":469}},{"parentId":469,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"now","id":470}},{"parentId":456,"previousId":469,"nextId":null,"node":{"type":3,"textContent":"()","id":471}},{"parentId":72,"previousId":455,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":472}},{"parentId":472,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":473}},{"parentId":473,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"cm-text":""},"childNodes":[],"id":474}},{"parentId":474,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"​","id":475}},{"parentId":72,"previousId":472,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":476}},{"parentId":476,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":477}},{"parentId":477,"previousId":null,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":478}},{"parentId":478,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"class","id":479}},{"parentId":477,"previousId":478,"nextId":-1,"node":{"type":3,"textContent":" ","id":480}},{"parentId":477,"previousId":480,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[],"id":481}},{"parentId":481,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"App","id":482}},{"parentId":477,"previousId":481,"nextId":-1,"node":{"type":3,"textContent":" ","id":483}},{"parentId":477,"previousId":483,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":484}},{"parentId":484,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"extends","id":485}},{"parentId":477,"previousId":484,"nextId":-1,"node":{"type":3,"textContent":" ","id":486}},{"parentId":477,"previousId":486,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":487}},{"parentId":487,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"React","id":488}},{"parentId":477,"previousId":487,"nextId":-1,"node":{"type":3,"textContent":".","id":489}},{"parentId":477,"previousId":489,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":490}},{"parentId":490,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"Component","id":491}},{"parentId":477,"previousId":490,"nextId":null,"node":{"type":3,"textContent":" {","id":492}},{"parentId":72,"previousId":476,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":493}},{"parentId":493,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":494}},{"parentId":494,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"  ","id":495}},{"parentId":494,"previousId":495,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":496}},{"parentId":496,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"constructor","id":497}},{"parentId":494,"previousId":496,"nextId":-1,"node":{"type":3,"textContent":"(","id":498}},{"parentId":494,"previousId":498,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[],"id":499}},{"parentId":499,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"props","id":500}},{"parentId":494,"previousId":499,"nextId":null,"node":{"type":3,"textContent":") {","id":501}},{"parentId":72,"previousId":493,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":502}},{"parentId":502,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":503}},{"parentId":503,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"    ","id":504}},{"parentId":503,"previousId":504,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":505}},{"parentId":505,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"super","id":506}},{"parentId":503,"previousId":505,"nextId":-1,"node":{"type":3,"textContent":"(","id":507}},{"parentId":503,"previousId":507,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable-2"},"childNodes":[],"id":508}},{"parentId":508,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"props","id":509}},{"parentId":503,"previousId":508,"nextId":null,"node":{"type":3,"textContent":");","id":510}},{"parentId":72,"previousId":502,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":511}},{"parentId":511,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":512}},{"parentId":512,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"    ","id":513}},{"parentId":512,"previousId":513,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":514}},{"parentId":514,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"this","id":515}},{"parentId":512,"previousId":514,"nextId":-1,"node":{"type":3,"textContent":".","id":516}},{"parentId":512,"previousId":516,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":517}},{"parentId":517,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"state","id":518}},{"parentId":512,"previousId":517,"nextId":-1,"node":{"type":3,"textContent":" ","id":519}},{"parentId":512,"previousId":519,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[],"id":520}},{"parentId":520,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"=","id":521}},{"parentId":512,"previousId":520,"nextId":null,"node":{"type":3,"textContent":" {","id":522}},{"parentId":72,"previousId":511,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":523}},{"parentId":523,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":524}},{"parentId":524,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"      ","id":525}},{"parentId":524,"previousId":525,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":526}},{"parentId":526,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"count","id":527}},{"parentId":524,"previousId":526,"nextId":-1,"node":{"type":3,"textContent":": ","id":528}},{"parentId":524,"previousId":528,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[],"id":529}},{"parentId":529,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"0","id":530}},{"parentId":524,"previousId":529,"nextId":null,"node":{"type":3,"textContent":",","id":531}},{"parentId":72,"previousId":523,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":532}},{"parentId":532,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":533}},{"parentId":533,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"      ","id":534}},{"parentId":533,"previousId":534,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":535}},{"parentId":535,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"time","id":536}},{"parentId":533,"previousId":535,"nextId":-1,"node":{"type":3,"textContent":": ","id":537}},{"parentId":533,"previousId":537,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":538}},{"parentId":538,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"base","id":539}},{"parentId":533,"previousId":538,"nextId":null,"node":{"type":3,"textContent":",","id":540}},{"parentId":72,"previousId":532,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":541}},{"parentId":541,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":542}},{"parentId":542,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"    };","id":543}},{"parentId":72,"previousId":541,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":544}},{"parentId":544,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":545}},{"parentId":545,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"  }","id":546}},{"parentId":72,"previousId":544,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":547}},{"parentId":547,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":548}},{"parentId":548,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"  ","id":549}},{"parentId":72,"previousId":547,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":550}},{"parentId":550,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":551}},{"parentId":551,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"  ","id":552}},{"parentId":551,"previousId":552,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":553}},{"parentId":553,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"componentDidMount","id":554}},{"parentId":551,"previousId":553,"nextId":null,"node":{"type":3,"textContent":"() {","id":555}},{"parentId":72,"previousId":550,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":556}},{"parentId":556,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":557}},{"parentId":557,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"    ","id":558}},{"parentId":557,"previousId":558,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":559}},{"parentId":559,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"setInterval","id":560}},{"parentId":557,"previousId":559,"nextId":-1,"node":{"type":3,"textContent":"(() ","id":561}},{"parentId":557,"previousId":561,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[],"id":562}},{"parentId":562,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"=>","id":563}},{"parentId":557,"previousId":562,"nextId":null,"node":{"type":3,"textContent":" {","id":564}},{"parentId":72,"previousId":556,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":565}},{"parentId":565,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":566}},{"parentId":566,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"      ","id":567}},{"parentId":566,"previousId":567,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":568}},{"parentId":568,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"this","id":569}},{"parentId":566,"previousId":568,"nextId":-1,"node":{"type":3,"textContent":".","id":570}},{"parentId":566,"previousId":570,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":571}},{"parentId":571,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"setState","id":572}},{"parentId":566,"previousId":571,"nextId":-1,"node":{"type":3,"textContent":"({ ","id":573}},{"parentId":566,"previousId":573,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":574}},{"parentId":574,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"time","id":575}},{"parentId":566,"previousId":574,"nextId":-1,"node":{"type":3,"textContent":": ","id":576}},{"parentId":566,"previousId":576,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":577}},{"parentId":577,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"Date","id":578}},{"parentId":566,"previousId":577,"nextId":-1,"node":{"type":3,"textContent":".","id":579}},{"parentId":566,"previousId":579,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":580}},{"parentId":580,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"now","id":581}},{"parentId":566,"previousId":580,"nextId":null,"node":{"type":3,"textContent":"() })","id":582}},{"parentId":72,"previousId":565,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":583}},{"parentId":583,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":584}},{"parentId":584,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"    }, ","id":585}},{"parentId":584,"previousId":585,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[],"id":586}},{"parentId":586,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"1000","id":587}},{"parentId":584,"previousId":586,"nextId":null,"node":{"type":3,"textContent":");","id":588}},{"parentId":72,"previousId":583,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":589}},{"parentId":589,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":590}},{"parentId":590,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"  }","id":591}},{"parentId":72,"previousId":589,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":592}},{"parentId":592,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":593}},{"parentId":593,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"  ","id":594}},{"parentId":72,"previousId":592,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":595}},{"parentId":595,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":596}},{"parentId":596,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"  ","id":597}},{"parentId":596,"previousId":597,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":598}},{"parentId":598,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"render","id":599}},{"parentId":596,"previousId":598,"nextId":null,"node":{"type":3,"textContent":"() {","id":600}},{"parentId":72,"previousId":595,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":601}},{"parentId":601,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":602}},{"parentId":602,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"    ","id":603}},{"parentId":602,"previousId":603,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":604}},{"parentId":604,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"const","id":605}},{"parentId":602,"previousId":604,"nextId":-1,"node":{"type":3,"textContent":" { ","id":606}},{"parentId":602,"previousId":606,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[],"id":607}},{"parentId":607,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"count","id":608}},{"parentId":602,"previousId":607,"nextId":-1,"node":{"type":3,"textContent":", ","id":609}},{"parentId":602,"previousId":609,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[],"id":610}},{"parentId":610,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"time","id":611}},{"parentId":602,"previousId":610,"nextId":-1,"node":{"type":3,"textContent":" } ","id":612}},{"parentId":602,"previousId":612,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[],"id":613}},{"parentId":613,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"=","id":614}},{"parentId":602,"previousId":613,"nextId":-1,"node":{"type":3,"textContent":" ","id":615}},{"parentId":602,"previousId":615,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":616}},{"parentId":616,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"this","id":617}},{"parentId":602,"previousId":616,"nextId":-1,"node":{"type":3,"textContent":".","id":618}},{"parentId":602,"previousId":618,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":619}},{"parentId":619,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"state","id":620}},{"parentId":602,"previousId":619,"nextId":null,"node":{"type":3,"textContent":";","id":621}},{"parentId":72,"previousId":601,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":622}},{"parentId":622,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":623}},{"parentId":623,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"  ","id":624}},{"parentId":623,"previousId":624,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tab","role":"presentation","cm-text":"\t"},"childNodes":[],"id":625}},{"parentId":625,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"  ","id":626}},{"parentId":623,"previousId":625,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":627}},{"parentId":627,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"return","id":628}},{"parentId":623,"previousId":627,"nextId":null,"node":{"type":3,"textContent":" (","id":629}},{"parentId":72,"previousId":622,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":630}},{"parentId":630,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":631}},{"parentId":631,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"    ","id":632}},{"parentId":631,"previousId":632,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tab","role":"presentation","cm-text":"\t"},"childNodes":[],"id":633}},{"parentId":633,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"  ","id":634}},{"parentId":631,"previousId":633,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":635}},{"parentId":635,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"<","id":636}},{"parentId":631,"previousId":635,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":637}},{"parentId":637,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"section","id":638}},{"parentId":631,"previousId":637,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":639}},{"parentId":639,"previousId":null,"nextId":null,"node":{"type":3,"textContent":">","id":640}},{"parentId":72,"previousId":630,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":641}},{"parentId":641,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":642}},{"parentId":642,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"        ","id":643}},{"parentId":642,"previousId":643,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":644}},{"parentId":644,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"<","id":645}},{"parentId":642,"previousId":644,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":646}},{"parentId":646,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"div","id":647}},{"parentId":642,"previousId":646,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":648}},{"parentId":648,"previousId":null,"nextId":null,"node":{"type":3,"textContent":">","id":649}},{"parentId":642,"previousId":648,"nextId":-1,"node":{"type":3,"textContent":"Time {","id":650}},{"parentId":642,"previousId":650,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":651}},{"parentId":651,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"Math","id":652}},{"parentId":642,"previousId":651,"nextId":-1,"node":{"type":3,"textContent":".","id":653}},{"parentId":642,"previousId":653,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":654}},{"parentId":654,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"round","id":655}},{"parentId":642,"previousId":654,"nextId":-1,"node":{"type":3,"textContent":"((","id":656}},{"parentId":642,"previousId":656,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":657}},{"parentId":657,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"time","id":658}},{"parentId":642,"previousId":657,"nextId":-1,"node":{"type":3,"textContent":" ","id":659}},{"parentId":642,"previousId":659,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[],"id":660}},{"parentId":660,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"-","id":661}},{"parentId":642,"previousId":660,"nextId":-1,"node":{"type":3,"textContent":" ","id":662}},{"parentId":642,"previousId":662,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":663}},{"parentId":663,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"base","id":664}},{"parentId":642,"previousId":663,"nextId":-1,"node":{"type":3,"textContent":") ","id":665}},{"parentId":642,"previousId":665,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[],"id":666}},{"parentId":666,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"/","id":667}},{"parentId":642,"previousId":666,"nextId":-1,"node":{"type":3,"textContent":" ","id":668}},{"parentId":642,"previousId":668,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[],"id":669}},{"parentId":669,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"1000","id":670}},{"parentId":642,"previousId":669,"nextId":-1,"node":{"type":3,"textContent":")}","id":671}},{"parentId":642,"previousId":671,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":672}},{"parentId":672,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"</","id":673}},{"parentId":642,"previousId":672,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":674}},{"parentId":674,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"div","id":675}},{"parentId":642,"previousId":674,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":676}},{"parentId":676,"previousId":null,"nextId":null,"node":{"type":3,"textContent":">","id":677}},{"parentId":72,"previousId":641,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":678}},{"parentId":678,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":679}},{"parentId":679,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"        ","id":680}},{"parentId":679,"previousId":680,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":681}},{"parentId":681,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"<","id":682}},{"parentId":679,"previousId":681,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":683}},{"parentId":683,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"div","id":684}},{"parentId":679,"previousId":683,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":685}},{"parentId":685,"previousId":null,"nextId":null,"node":{"type":3,"textContent":">","id":686}},{"parentId":679,"previousId":685,"nextId":-1,"node":{"type":3,"textContent":"Counter {","id":687}},{"parentId":679,"previousId":687,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":688}},{"parentId":688,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"count","id":689}},{"parentId":679,"previousId":688,"nextId":-1,"node":{"type":3,"textContent":"}","id":690}},{"parentId":679,"previousId":690,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":691}},{"parentId":691,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"</","id":692}},{"parentId":679,"previousId":691,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":693}},{"parentId":693,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"div","id":694}},{"parentId":679,"previousId":693,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":695}},{"parentId":695,"previousId":null,"nextId":null,"node":{"type":3,"textContent":">","id":696}},{"parentId":72,"previousId":678,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":697}},{"parentId":697,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":698}},{"parentId":698,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"        ","id":699}},{"parentId":698,"previousId":699,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":700}},{"parentId":700,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"<","id":701}},{"parentId":698,"previousId":700,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":702}},{"parentId":702,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"button","id":703}},{"parentId":698,"previousId":702,"nextId":-1,"node":{"type":3,"textContent":" ","id":704}},{"parentId":698,"previousId":704,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-attribute"},"childNodes":[],"id":705}},{"parentId":705,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"onClick","id":706}},{"parentId":698,"previousId":705,"nextId":-1,"node":{"type":3,"textContent":"={() ","id":707}},{"parentId":698,"previousId":707,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[],"id":708}},{"parentId":708,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"=>","id":709}},{"parentId":698,"previousId":708,"nextId":-1,"node":{"type":3,"textContent":" ","id":710}},{"parentId":698,"previousId":710,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[],"id":711}},{"parentId":711,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"this","id":712}},{"parentId":698,"previousId":711,"nextId":-1,"node":{"type":3,"textContent":".","id":713}},{"parentId":698,"previousId":713,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":714}},{"parentId":714,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"setState","id":715}},{"parentId":698,"previousId":714,"nextId":-1,"node":{"type":3,"textContent":"({ ","id":716}},{"parentId":698,"previousId":716,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":717}},{"parentId":717,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"count","id":718}},{"parentId":698,"previousId":717,"nextId":-1,"node":{"type":3,"textContent":": ","id":719}},{"parentId":698,"previousId":719,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":720}},{"parentId":720,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"count","id":721}},{"parentId":698,"previousId":720,"nextId":-1,"node":{"type":3,"textContent":" ","id":722}},{"parentId":698,"previousId":722,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[],"id":723}},{"parentId":723,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"+","id":724}},{"parentId":698,"previousId":723,"nextId":-1,"node":{"type":3,"textContent":" ","id":725}},{"parentId":698,"previousId":725,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[],"id":726}},{"parentId":726,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"1","id":727}},{"parentId":698,"previousId":726,"nextId":-1,"node":{"type":3,"textContent":" })}","id":728}},{"parentId":698,"previousId":728,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":729}},{"parentId":729,"previousId":null,"nextId":null,"node":{"type":3,"textContent":">","id":730}},{"parentId":698,"previousId":729,"nextId":-1,"node":{"type":3,"textContent":"click to count","id":731}},{"parentId":698,"previousId":731,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":732}},{"parentId":732,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"</","id":733}},{"parentId":698,"previousId":732,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":734}},{"parentId":734,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"button","id":735}},{"parentId":698,"previousId":734,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":736}},{"parentId":736,"previousId":null,"nextId":null,"node":{"type":3,"textContent":">","id":737}},{"parentId":72,"previousId":697,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":738}},{"parentId":738,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":739}},{"parentId":739,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"      ","id":740}},{"parentId":739,"previousId":740,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":741}},{"parentId":741,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"</","id":742}},{"parentId":739,"previousId":741,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":743}},{"parentId":743,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"section","id":744}},{"parentId":739,"previousId":743,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":745}},{"parentId":745,"previousId":null,"nextId":null,"node":{"type":3,"textContent":">","id":746}},{"parentId":72,"previousId":738,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":747}},{"parentId":747,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":748}},{"parentId":748,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"    )","id":749}},{"parentId":72,"previousId":747,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":750}},{"parentId":750,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":751}},{"parentId":751,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"  }","id":752}},{"parentId":72,"previousId":750,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":753}},{"parentId":753,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":754}},{"parentId":754,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"}","id":755}},{"parentId":72,"previousId":753,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":756}},{"parentId":756,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":757}},{"parentId":757,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"cm-text":""},"childNodes":[],"id":758}},{"parentId":758,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"​","id":759}},{"parentId":72,"previousId":756,"nextId":-1,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":760}},{"parentId":760,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":761}},{"parentId":761,"previousId":null,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":762}},{"parentId":762,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"ReactDOM","id":763}},{"parentId":761,"previousId":762,"nextId":-1,"node":{"type":3,"textContent":".","id":764}},{"parentId":761,"previousId":764,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[],"id":765}},{"parentId":765,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"render","id":766}},{"parentId":761,"previousId":765,"nextId":-1,"node":{"type":3,"textContent":"(","id":767}},{"parentId":761,"previousId":767,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":768}},{"parentId":768,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"<","id":769}},{"parentId":761,"previousId":768,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[],"id":770}},{"parentId":770,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"App","id":771}},{"parentId":761,"previousId":770,"nextId":-1,"node":{"type":3,"textContent":" ","id":772}},{"parentId":761,"previousId":772,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[],"id":773}},{"parentId":773,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"/>","id":774}},{"parentId":761,"previousId":773,"nextId":-1,"node":{"type":3,"textContent":", ","id":775}},{"parentId":761,"previousId":775,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":776}},{"parentId":776,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"document","id":777}},{"parentId":761,"previousId":776,"nextId":-1,"node":{"type":3,"textContent":".","id":778}},{"parentId":761,"previousId":778,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[],"id":779}},{"parentId":779,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"querySelector","id":780}},{"parentId":761,"previousId":779,"nextId":-1,"node":{"type":3,"textContent":"(","id":781}},{"parentId":761,"previousId":781,"nextId":-1,"node":{"type":2,"tagName":"span","attributes":{"class":"cm-string"},"childNodes":[],"id":782}},{"parentId":782,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"'.output'","id":783}},{"parentId":761,"previousId":782,"nextId":null,"node":{"type":3,"textContent":"));","id":784}},{"parentId":72,"previousId":760,"nextId":null,"node":{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[],"id":785}},{"parentId":785,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[],"id":786}},{"parentId":786,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{"cm-text":""},"childNodes":[],"id":787}},{"parentId":787,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"​","id":788}},{"parentId":69,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-cursor","style":"left: 4px; top: 0px; height: 21px;"},"childNodes":[],"id":789}},{"parentId":789,"previousId":null,"nextId":null,"node":{"type":3,"textContent":" ","id":790}},{"parentId":34,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"data-export":"buttons","style":"display: block;"},"childNodes":[],"id":791}},{"parentId":791,"previousId":null,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"file","href":"javascript:void(0);","class":"active"},"childNodes":[],"id":792}},{"parentId":792,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"ReactHooks.js","id":793}},{"parentId":791,"previousId":792,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"newFileButton","href":"javascript:void(0)"},"childNodes":[],"id":794}},{"parentId":794,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":795}},{"parentId":795,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"},"childNodes":[],"isSVG":true,"id":796}},{"parentId":791,"previousId":794,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"closeButton","class":"right","href":"javascript:void(0)"},"childNodes":[],"id":797}},{"parentId":797,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":798}},{"parentId":798,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"},"childNodes":[],"isSVG":true,"id":799}},{"parentId":791,"previousId":797,"nextId":null,"node":{"type":2,"tagName":"a","attributes":{"data-export":"settingsButton","class":"right","href":"javascript:void(0)"},"childNodes":[],"id":800}},{"parentId":800,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":801}},{"parentId":801,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"},"childNodes":[],"isSVG":true,"id":802}},{"parentId":423,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"centered"},"childNodes":[],"id":803}},{"parentId":803,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"spinner"},"childNodes":[],"id":804}},{"parentId":412,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"centered"},"childNodes":[],"id":805}},{"parentId":805,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"spinner"},"childNodes":[],"id":806}}]},"timestamp":1544756837770,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":819,"attributes":{"style":"display: block;"}}],"removes":[{"parentId":423,"id":803},{"parentId":412,"id":805},{"parentId":34,"id":791}],"adds":[{"parentId":423,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"centered"},"childNodes":[],"id":807}},{"parentId":807,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{},"childNodes":[],"id":808}},{"parentId":808,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"console.log(...)","id":809}},{"parentId":412,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"section","attributes":{},"childNodes":[],"id":810}},{"parentId":810,"previousId":null,"nextId":-1,"node":{"type":2,"tagName":"div","attributes":{},"childNodes":[],"id":811}},{"parentId":811,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"Time ","id":812}},{"parentId":811,"previousId":812,"nextId":null,"node":{"type":3,"textContent":"0","id":813}},{"parentId":810,"previousId":811,"nextId":-1,"node":{"type":2,"tagName":"div","attributes":{},"childNodes":[],"id":814}},{"parentId":814,"previousId":null,"nextId":-1,"node":{"type":3,"textContent":"Counter ","id":815}},{"parentId":814,"previousId":815,"nextId":null,"node":{"type":3,"textContent":"0","id":816}},{"parentId":810,"previousId":814,"nextId":null,"node":{"type":2,"tagName":"button","attributes":{},"childNodes":[],"id":817}},{"parentId":817,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"click to count","id":818}},{"parentId":34,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"data-export":"buttons","style":"display: block;"},"childNodes":[],"id":819}},{"parentId":819,"previousId":null,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"file","href":"javascript:void(0);","class":"active"},"childNodes":[],"id":820}},{"parentId":820,"previousId":null,"nextId":null,"node":{"type":3,"textContent":"ReactHooks.js","id":821}},{"parentId":819,"previousId":820,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"newFileButton","href":"javascript:void(0)"},"childNodes":[],"id":822}},{"parentId":822,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":823}},{"parentId":823,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"},"childNodes":[],"isSVG":true,"id":824}},{"parentId":819,"previousId":822,"nextId":-1,"node":{"type":2,"tagName":"a","attributes":{"data-export":"closeButton","class":"right","href":"javascript:void(0)"},"childNodes":[],"id":825}},{"parentId":825,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":826}},{"parentId":826,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"},"childNodes":[],"isSVG":true,"id":827}},{"parentId":819,"previousId":825,"nextId":null,"node":{"type":2,"tagName":"a","attributes":{"data-export":"settingsButton","class":"right","href":"javascript:void(0)"},"childNodes":[],"id":828}},{"parentId":828,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[],"isSVG":true,"id":829}},{"parentId":829,"previousId":null,"nextId":null,"node":{"type":2,"tagName":"path","attributes":{"d":"M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"},"childNodes":[],"isSVG":true,"id":830}}]},"timestamp":1544756837829,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":55,"x":0,"y":0},"timestamp":1544756837834,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":3,"id":61,"x":0,"y":0},"timestamp":1544756837934,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756838290,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756838819,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"1"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756838830,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":106,"y":25,"id":820,"timeOffset":0}]},"timestamp":1544756838898,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756839350,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":114,"y":35,"id":34,"timeOffset":-475},{"x":130,"y":64,"id":466,"timeOffset":-441},{"x":151,"y":108,"id":484,"timeOffset":-408},{"x":221,"y":209,"id":532,"timeOffset":-375},{"x":294,"y":278,"id":547,"timeOffset":-341},{"x":368,"y":329,"id":565,"timeOffset":-308},{"x":391,"y":336,"id":565,"timeOffset":-48},{"x":439,"y":337,"id":565,"timeOffset":-24}]},"timestamp":1544756839399,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"2"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756839830,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756839879,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":585,"y":325,"id":565,"timeOffset":-491},{"x":729,"y":308,"id":556,"timeOffset":-459},{"x":830,"y":304,"id":556,"timeOffset":-425},{"x":888,"y":308,"id":556,"timeOffset":-391},{"x":896,"y":308,"id":556,"timeOffset":-17}]},"timestamp":1544756839899,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":918,"y":309,"id":556,"timeOffset":-493},{"x":959,"y":310,"id":556,"timeOffset":-459},{"x":990,"y":311,"id":556,"timeOffset":-426},{"x":1032,"y":315,"id":556,"timeOffset":-393},{"x":1060,"y":323,"id":565,"timeOffset":-359},{"x":1101,"y":344,"id":583,"timeOffset":-326},{"x":1132,"y":363,"id":583,"timeOffset":-293},{"x":1154,"y":373,"id":55,"timeOffset":-259}]},"timestamp":1544756840400,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":"visibility: hidden;"}}],"removes":[],"adds":[]},"timestamp":1544756840410,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":2,"type":6,"id":54},"timestamp":1544756840500,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":52,"attributes":{"class":"CodeMirror cm-s-light"}}],"removes":[],"adds":[]},"timestamp":1544756840501,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"3"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756840830,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"4"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756841830,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"5"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756842830,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"6"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756843831,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"7"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756844831,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"8"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756845831,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"9"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756846830,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":813,"value":"10"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756847830,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"}]
diff --git a/public/global.css b/public/global.css
index ddc26d5fb2..c30acb6092 100644
--- a/public/global.css
+++ b/public/global.css
@@ -6,7 +6,6 @@ body {
 }
 
 body {
-  margin: 0;
   box-sizing: border-box;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
diff --git a/public/index.html b/public/index.html
index e9a0b02e6d..56ec245e1b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,31 +1,31 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="utf8" />
-    <meta name="viewport" content="width=device-width" />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
 
-    <title>dev panel</title>
+    <title>Svelte app</title>
 
-    <link rel="stylesheet" href="./global.css" />
-    <link rel="stylesheet" href="./bundle.css" />
-  </head>
+    <link rel="stylesheet" href="/global.css" />
+    <link rel="stylesheet" href="/bundle.css" />
 
-  <body>
-    <script src="./bundle.js"></script>
+    <script src="/bundle.js"></script>
     <script src="./events.js"></script>
-    <script>
-      // eslint-disable-next-line
-      const component = new rrwebPlayer({
-        target: document.body,
-        data: {
-          events,
-          skipInactive: true,
-          showDebug: false,
-          autoPlay: false,
-          showWarning: false,
-        },
-      });
-      component.addEventListener('finish', () => console.log('finish'));
-    </script>
-  </body>
+  </head>
+
+  <body></body>
+  <script>
+    // eslint-disable-next-line
+    const component = new rrwebPlayer({
+      target: document.body,
+      data: {
+        events,
+        skipInactive: true,
+        showDebug: false,
+        showWarning: false,
+        autoPlay: false,
+      },
+    });
+    component.addEventListener('finish', () => console.log('finish'));
+  </script>
 </html>
diff --git a/rollup.config.js b/rollup.config.js
index 86e8c99d8d..1e10a3ed90 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,35 +1,43 @@
 import svelte from 'rollup-plugin-svelte';
-import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
-import postcss from 'rollup-plugin-postcss';
+import sveltePreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';
 import pkg from './package.json';
 
+// eslint-disable-next-line no-undef
 const production = !process.env.ROLLUP_WATCH;
 
-export default [
-  { file: pkg.module, format: 'es' },
-  { file: pkg.main, format: 'cjs' },
-  { file: pkg.unpkg, format: 'iife', name: 'rrwebPlayer' },
-  { file: 'public/bundle.js', format: 'iife', name: 'rrwebPlayer' },
-].map(output => ({
-  input: 'src/Player.html',
+const entries = (production
+  ? [
+      { file: pkg.module, format: 'es' },
+      { file: pkg.main, format: 'cjs' },
+      { file: pkg.unpkg, format: 'iife', name: 'rrwebPlayer' },
+    ]
+  : []
+).concat([{ file: 'public/bundle.js', format: 'iife', name: 'rrwebPlayer' }]);
+
+export default entries.map((output) => ({
+  input: 'src/main.ts',
   output,
   plugins: [
     svelte({
-      cascade: false,
-      // opt in to v3 behaviour today
-      skipIntroByDefault: true,
-      nestedTransitions: true,
-
       // enable run-time checks when not in production
       dev: !production,
       // we'll extract any component CSS out into
       // a separate file — better for performance
-      css: css => {
+      css: (css) => {
         css.write('dist/style.css');
         css.write('public/bundle.css');
       },
+      preprocess: sveltePreprocess({
+        postcss: {
+          // eslint-disable-next-line no-undef
+          plugins: [require('postcss-easy-import')],
+        },
+      }),
     }),
 
     // If you have external dependencies installed from
@@ -37,13 +45,45 @@ export default [
     // some cases you'll need additional configuration —
     // consult the documentation for details:
     // https://github.com/rollup/rollup-plugin-commonjs
-    resolve(),
+    resolve({
+      browser: true,
+      dedupe: ['svelte'],
+    }),
     commonjs(),
 
-    postcss(),
+    typescript({ sourceMap: !production }),
+
+    // In dev mode, call `npm run start` once
+    // the bundle has been generated
+    !production && serve(),
+
+    // Watch the `public` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload('public'),
 
     // If we're building for production (npm run build
     // instead of npm run dev), minify
     production && terser(),
   ],
+  watch: {
+    clearScreen: false,
+  },
 }));
+
+function serve() {
+  let started = false;
+
+  return {
+    writeBundle() {
+      if (!started) {
+        started = true;
+
+        // eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
+        require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+          stdio: ['ignore', 'inherit', 'inherit'],
+          shell: true,
+        });
+      }
+    },
+  };
+}
diff --git a/src/Controller.html b/src/Controller.html
deleted file mode 100644
index 27649d5752..0000000000
--- a/src/Controller.html
+++ /dev/null
@@ -1,368 +0,0 @@
-{#if showController}
-<div class="rr-controller">
-  <div class="rr-timeline">
-    <span class="rr-timeline__time">{formatTime(currentTime)}</span>
-    <div
-      class="rr-progress"
-      class:disabled="isSkipping"
-      ref:progress on:click="handleProgressClick(event)"
-    >
-      <div class="rr-progress__step" ref:step style="width: {percentage}"></div>
-        {#each getCustomEvents as event,i (i)}
-          <div
-            title="{event.name}"
-            style="width: 10px;height: 5px;position: absolute;top: 2px;transform: translate(-50%, -50%);background: {event.background};left: {event.position};"
-          ></div>
-        {/each}
-
-      <div
-        class="rr-progress__handler"
-        ref:handler
-        style="left: {percentage}"
-      ></div>
-    </div>
-    <span class="rr-timeline__time">{formatTime(meta.totalTime)}</span>
-  </div>
-  <div class="rr-controller__btns">
-    <button on:click="toggle()">
-      {#if isPlaying}
-      <svg
-        class="icon"
-        viewBox="0 0 1024 1024"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        width="16"
-        height="16"
-      >
-        <path
-          d="M682.65984 128q53.00224 0 90.50112 37.49888t37.49888 90.50112l0 512q0 53.00224-37.49888 90.50112t-90.50112 37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224 37.49888-90.50112t90.50112-37.49888zM341.34016 128q53.00224 0 90.50112 37.49888t37.49888 90.50112l0 512q0 53.00224-37.49888 90.50112t-90.50112 37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224 37.49888-90.50112t90.50112-37.49888zM341.34016 213.34016q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 512q0 17.67424 12.4928 30.16704t30.16704 12.4928 30.16704-12.4928 12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928zM682.65984 213.34016q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 512q0 17.67424 12.4928 30.16704t30.16704 12.4928 30.16704-12.4928 12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928z"
-        ></path>
-      </svg>
-      {:else}
-      <svg
-        class="icon"
-        viewBox="0 0 1024 1024"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        width="16"
-        height="16"
-      >
-        <path
-          d="M170.65984 896l0-768 640 384zM644.66944 512l-388.66944-233.32864 0 466.65728z"
-        ></path>
-      </svg>
-      {/if}
-    </button>
-    {#each speedOption as s}
-    <button
-      class:active="s === speed && !isSkipping"
-      on:click="setSpeed(s)"
-      disabled="{isSkipping}"
-    >
-      {s}x
-    </button>
-    {/each}
-    <Switch id="skip" bind:checked="skipInactive" disabled="{isSkipping}" label="skip inactive" />
-    <button on:click="fire('fullscreen')">
-      <svg
-        class="icon"
-        viewBox="0 0 1024 1024"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        width="16" height="16"
-      >
-        <defs><style type="text/css"></style></defs>
-        <path d="M916 380c-26.4 0-48-21.6-48-48L868 223.2 613.6 477.6c-18.4 18.4-48.8 18.4-68 0-18.4-18.4-18.4-48.8 0-68L800 156 692 156c-26.4 0-48-21.6-48-48 0-26.4 21.6-48 48-48l224 0c26.4 0 48 21.6 48 48l0 224C964 358.4 942.4 380 916 380zM231.2 860l108.8 0c26.4 0 48 21.6 48 48s-21.6 48-48 48l-224 0c-26.4 0-48-21.6-48-48l0-224c0-26.4 21.6-48 48-48 26.4 0 48 21.6 48 48L164 792l253.6-253.6c18.4-18.4 48.8-18.4 68 0 18.4 18.4 18.4 48.8 0 68L231.2 860z" p-id="1286"></path>
-      </svg>
-    </button>
-  </div>
-</div>
-{/if}
-
-<script>
-  import { EventType } from 'rrweb';
-  import { formatTime } from './utils.js';
-
-  export default {
-    components: {
-      Switch: './components/Switch.html',
-    },
-    data() {
-      return {
-        currentTime: 0,
-        isPlaying: false,
-        isSkipping: false,
-        skipInactive: true,
-        speed: 1,
-        speedOption: [],
-      };
-    },
-    computed: {
-      meta({ replayer }) {
-        return replayer.getMetaData();
-      },
-      percentage({ currentTime, meta }) {
-        const percent = Math.min(1, currentTime / meta.totalTime);
-        return `${100 * percent}%`;
-      },
-      getCustomEvents({tags, replayer}) {
-        const { events } = replayer;
-        const totalEvents = events.length;
-        const start = events[0].timestamp;
-        const end = events[totalEvents - 1].timestamp;
-        const customEvents = [];
-
-        // calculate tag position.
-        const position = (startTime, endTime, tagTime) => {
-          const sessionDuration = endTime - startTime;
-          const eventDuration = endTime - tagTime;
-          const eventPosition = 100 - ((eventDuration / sessionDuration) * 100);
-
-          return eventPosition.toFixed(2);
-        };
-
-         // loop through all the events and find out custom event.
-        events.forEach((event) => {
-          /**
-           * we are only interested in custom event and calculate it's position
-           * to place it in player's timeline.
-           */
-          if (event.type === EventType.Custom) {
-            const customEvent = {
-              name: event.data.tag,
-              background: tags[event.data.tag] || 'rgb(73, 80, 246)',
-              position: `${position(start, end, event.timestamp)}%`,
-            };
-            customEvents.push(customEvent);
-          }
-        });
-
-        return customEvents;
-      },
-    },
-    helpers: {
-      formatTime,
-    },
-    methods: {
-      loopTimer() {
-        const self = this;
-
-        function update() {
-          const { meta, isPlaying, replayer } = self.get();
-          if (!isPlaying) {
-            self.timer = null;
-            return;
-          }
-
-          const currentTime =
-            replayer.timer.timeOffset + replayer.getTimeOffset();
-          self.set({
-            currentTime,
-          });
-
-          if (currentTime < meta.totalTime) {
-            requestAnimationFrame(update);
-          }
-        }
-
-        this.timer = requestAnimationFrame(update);
-      },
-      play() {
-        const { replayer, currentTime } = this.get();
-
-        if (currentTime > 0) {
-          replayer.resume(currentTime);
-        } else {
-          this.set({ isPlaying: true });
-          replayer.play(currentTime);
-        }
-      },
-      pause() {
-        const { replayer } = this.get();
-        replayer.pause();
-      },
-      toggle() {
-        const { isPlaying } = this.get();
-        if (isPlaying) {
-          this.pause();
-        } else {
-          this.play();
-        }
-      },
-      setSpeed(speed) {
-        const { replayer, currentTime, isPlaying } = this.get();
-        // freeze before set speed, and resume if is playing before freeze
-        replayer.pause();
-        replayer.setConfig({ speed });
-        this.set({ speed });
-        if (isPlaying) {
-          replayer.resume(currentTime);
-        }
-      },
-      handleProgressClick(event) {
-        const { meta, replayer, isPlaying, isSkipping } = this.get();
-        if (isSkipping) {
-          return;
-        }
-        const progressRect = this.refs.progress.getBoundingClientRect();
-        const x = event.clientX - progressRect.left;
-        let percent = x / progressRect.width;
-        if (percent < 0) {
-          percent = 0;
-        } else if (percent > 1) {
-          percent = 1;
-        }
-        const timeOffset = meta.totalTime * percent;
-        this.set({ currentTime: timeOffset });
-        replayer.play(timeOffset);
-        if (!isPlaying) {
-          replayer.pause();
-        }
-      },
-    },
-    onupdate({ changed, current, previous }) {
-      if (current.replayer && !previous) {
-        window.replayer = current.replayer;
-        setTimeout(() => {
-          this.set({ isPlaying: true });
-        }, 0);
-        current.replayer.play(0);
-        if (!current.autoPlay) {
-          let firstFullSnapshotRebuilded = false;
-          current.replayer.on('fullsnapshot-rebuilded', () => {
-            if (!firstFullSnapshotRebuilded) {
-              firstFullSnapshotRebuilded = true;
-              current.replayer.pause();
-            }
-          });
-        }
-        current.replayer.on('pause', () => {
-          this.set({ isPlaying: false });
-        });
-        current.replayer.on('resume', () => {
-          this.set({ isPlaying: true });
-        });
-        current.replayer.on('finish', () => {
-          this.timer = null;
-          this.set({ isPlaying: false, currentTime: 0 });
-        });
-        current.replayer.on('skip-start', payload => {
-          payload.isSkipping = true;
-          this.set(payload);
-        });
-        current.replayer.on('skip-end', payload => {
-          payload.isSkipping = false;
-          this.set(payload);
-        });
-      }
-      if (changed.isPlaying) {
-        if (current.isPlaying && !this.timer) {
-          this.loopTimer();
-        }
-      }
-      if (changed.skipInactive) {
-        current.replayer.setConfig({ skipInactive: current.skipInactive });
-      }
-    },
-    ondestroy() {
-      const { isPlaying } = this.get();
-      if (isPlaying) {
-        this.pause();
-      }
-    },
-  };
-</script>
-
-<style>
-  .rr-controller {
-    width: 100%;
-    height: 80px;
-    background: #fff;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-    border-radius: 0 0 5px 5px;
-  }
-
-  .rr-timeline {
-    width: 80%;
-    display: flex;
-    align-items: center;
-  }
-
-  .rr-timeline__time {
-    padding: 0 20px;
-    color: #11103e;
-  }
-
-  .rr-progress {
-    width: 100%;
-    height: 12px;
-    background: #eee;
-    position: relative;
-    border-radius: 3px;
-    cursor: pointer;
-    box-sizing: border-box;
-    border-top: solid 4px #fff;
-    border-bottom: solid 4px #fff;
-  }
-
-  .rr-progress.disabled {
-    cursor: not-allowed;
-  }
-
-  .rr-progress__step {
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    background: #e0e1fe;
-  }
-
-  .rr-progress__handler {
-    width: 20px;
-    height: 20px;
-    border-radius: 10px;
-    position: absolute;
-    top: 2px;
-    transform: translate(-50%, -50%);
-    background: rgb(73, 80, 246);
-  }
-
-  .rr-controller__btns {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 13px;
-  }
-
-  .rr-controller__btns button {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    padding: 0;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-  }
-
-  .rr-controller__btns button:active {
-    background: #e0e1fe;
-  }
-
-  .rr-controller__btns button.active {
-    color: #fff;
-    background: rgb(73, 80, 246);
-  }
-
-  .rr-controller__btns button:disabled {
-    cursor: not-allowed;
-  }
-</style>
diff --git a/src/Controller.svelte b/src/Controller.svelte
new file mode 100644
index 0000000000..3140f199c8
--- /dev/null
+++ b/src/Controller.svelte
@@ -0,0 +1,403 @@
+<script lang="ts">
+  import { EventType } from 'rrweb';
+  import type { Replayer } from 'rrweb';
+  import type { playerMetaData } from 'rrweb/typings/types';
+  import type {
+    PlayerMachineState,
+    SpeedMachineState,
+  } from 'rrweb/typings/replay/machine';
+  import {
+    onMount,
+    onDestroy,
+    createEventDispatcher,
+    afterUpdate,
+  } from 'svelte';
+  import { formatTime } from './utils';
+  import Switch from './components/Switch.svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let replayer: Replayer;
+  export let showController: boolean;
+  export let autoPlay: boolean;
+  export let skipInactive: boolean;
+  export let speedOption: number[];
+  export let speed = speedOption.length ? speedOption[0] : 1;
+  export let tags: Record<string, string> = {};
+
+  let currentTime = 0;
+  let timer: number | null = null;
+  let playerState: 'playing' | 'paused' | 'live';
+  let speedState: 'normal' | 'skipping';
+  let progress: HTMLElement;
+  let step: HTMLElement;
+  let finished: boolean;
+
+  let meta: playerMetaData;
+  $: meta = replayer.getMetaData();
+  let percentage: string;
+  $: {
+    const percent = Math.min(1, currentTime / meta.totalTime);
+    percentage = `${100 * percent}%`;
+  }
+  type CustomEvent = {
+    name: string;
+    background: string;
+    position: string;
+  };
+  let customEvents: CustomEvent[];
+  $: customEvents = (() => {
+    const { context } = replayer.service.state;
+    const totalEvents = context.events.length;
+    const start = context.events[0].timestamp;
+    const end = context.events[totalEvents - 1].timestamp;
+    const customEvents: CustomEvent[] = [];
+
+    // calculate tag position.
+    const position = (startTime: number, endTime: number, tagTime: number) => {
+      const sessionDuration = endTime - startTime;
+      const eventDuration = endTime - tagTime;
+      const eventPosition = 100 - (eventDuration / sessionDuration) * 100;
+
+      return eventPosition.toFixed(2);
+    };
+
+    // loop through all the events and find out custom event.
+    context.events.forEach((event) => {
+      /**
+       * we are only interested in custom event and calculate it's position
+       * to place it in player's timeline.
+       */
+      if (event.type === EventType.Custom) {
+        const customEvent = {
+          name: event.data.tag,
+          background: tags[event.data.tag] || 'rgb(73, 80, 246)',
+          position: `${position(start, end, event.timestamp)}%`,
+        };
+        customEvents.push(customEvent);
+      }
+    });
+
+    return customEvents;
+  })();
+
+  const loopTimer = () => {
+    stopTimer();
+
+    function update() {
+      currentTime = replayer.timer.timeOffset + replayer.getTimeOffset();
+
+      if (currentTime < meta.totalTime) {
+        timer = requestAnimationFrame(update);
+      }
+    }
+
+    timer = requestAnimationFrame(update);
+  };
+
+  const stopTimer = () => {
+    if (timer) {
+      cancelAnimationFrame(timer);
+      timer = null;
+    }
+  };
+
+  const toggle = () => {
+    switch (playerState) {
+      case 'playing':
+        replayer.pause();
+        break;
+      case 'paused':
+        if (finished) {
+          replayer.play();
+          finished = false;
+        } else {
+          replayer.play(currentTime);
+        }
+        break;
+      default:
+        break;
+    }
+  };
+
+  const handleProgressClick = (event: MouseEvent) => {
+    if (speedState === 'skipping') {
+      return;
+    }
+    const progressRect = progress.getBoundingClientRect();
+    const x = event.clientX - progressRect.left;
+    let percent = x / progressRect.width;
+    if (percent < 0) {
+      percent = 0;
+    } else if (percent > 1) {
+      percent = 1;
+    }
+    const timeOffset = meta.totalTime * percent;
+    currentTime = timeOffset;
+    const isPlaying = playerState === 'playing';
+    replayer.pause();
+    replayer.play(timeOffset);
+    if (!isPlaying) {
+      replayer.pause();
+    }
+  };
+
+  const setSpeed = (newSpeed: number) => {
+    let needFreeze = playerState === 'playing';
+    speed = newSpeed;
+    if (needFreeze) {
+      replayer.pause();
+    }
+    replayer.setConfig({ speed });
+    if (needFreeze) {
+      replayer.play(currentTime);
+    }
+  };
+
+  onMount(() => {
+    playerState = replayer.service.state.value as typeof playerState;
+    speedState = replayer.speedService.state.value as typeof speedState;
+    replayer.on(
+      'state-change',
+      (states: { player?: PlayerMachineState; speed?: SpeedMachineState }) => {
+        const { player, speed } = states;
+        if (player?.value && playerState !== player.value) {
+          playerState = player.value as typeof playerState;
+          switch (playerState) {
+            case 'playing':
+              loopTimer();
+              break;
+            case 'paused':
+              stopTimer();
+              break;
+            default:
+              break;
+          }
+        }
+        if (speed?.value && speedState !== speed.value) {
+          speedState = speed.value as typeof speedState;
+        }
+      },
+    );
+    replayer.on('finish', () => {
+      finished = true;
+    });
+
+    if (autoPlay) {
+      replayer.play();
+    }
+  });
+
+  afterUpdate(() => {
+    if (skipInactive !== replayer.config.skipInactive) {
+      replayer.setConfig({ skipInactive });
+    }
+  });
+
+  onDestroy(() => {
+    replayer.pause();
+    stopTimer();
+  });
+</script>
+
+<style>
+  .rr-controller {
+    width: 100%;
+    height: 80px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    border-radius: 0 0 5px 5px;
+  }
+
+  .rr-timeline {
+    width: 80%;
+    display: flex;
+    align-items: center;
+  }
+
+  .rr-timeline__time {
+    display: inline-block;
+    width: 100px;
+    text-align: center;
+    color: #11103e;
+  }
+
+  .rr-progress {
+    flex: 1;
+    height: 12px;
+    background: #eee;
+    position: relative;
+    border-radius: 3px;
+    cursor: pointer;
+    box-sizing: border-box;
+    border-top: solid 4px #fff;
+    border-bottom: solid 4px #fff;
+  }
+
+  .rr-progress.disabled {
+    cursor: not-allowed;
+  }
+
+  .rr-progress__step {
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: #e0e1fe;
+  }
+
+  .rr-progress__handler {
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    position: absolute;
+    top: 2px;
+    transform: translate(-50%, -50%);
+    background: rgb(73, 80, 246);
+  }
+
+  .rr-controller__btns {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+  }
+
+  .rr-controller__btns button {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  .rr-controller__btns button:active {
+    background: #e0e1fe;
+  }
+
+  .rr-controller__btns button.active {
+    color: #fff;
+    background: rgb(73, 80, 246);
+  }
+
+  .rr-controller__btns button:disabled {
+    cursor: not-allowed;
+  }
+</style>
+
+{#if showController}
+  <div class="rr-controller">
+    <div class="rr-timeline">
+      <span class="rr-timeline__time">{formatTime(currentTime)}</span>
+      <div
+        class="rr-progress"
+        class:disabled={speedState === 'skipping'}
+        bind:this={progress}
+        on:click={(event) => handleProgressClick(event)}>
+        <div
+          class="rr-progress__step"
+          bind:this={step}
+          style="width: {percentage}" />
+        {#each customEvents as event}
+          <div
+            title={event.name}
+            style="width: 10px;height: 5px;position: absolute;top:
+            2px;transform: translate(-50%, -50%);background: {event.background};left:
+            {event.position};" />
+        {/each}
+
+        <div class="rr-progress__handler" style="left: {percentage}" />
+      </div>
+      <span class="rr-timeline__time">{formatTime(meta.totalTime)}</span>
+    </div>
+    <div class="rr-controller__btns">
+      <button on:click={toggle}>
+        {#if ['playing', 'skipping'].includes(playerState)}
+          <svg
+            class="icon"
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            width="16"
+            height="16">
+            <path
+              d="M682.65984 128q53.00224 0 90.50112 37.49888t37.49888 90.50112l0
+              512q0 53.00224-37.49888 90.50112t-90.50112
+              37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224
+              37.49888-90.50112t90.50112-37.49888zM341.34016 128q53.00224 0
+              90.50112 37.49888t37.49888 90.50112l0 512q0 53.00224-37.49888
+              90.50112t-90.50112
+              37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224
+              37.49888-90.50112t90.50112-37.49888zM341.34016 213.34016q-17.67424
+              0-30.16704 12.4928t-12.4928 30.16704l0 512q0 17.67424 12.4928
+              30.16704t30.16704 12.4928 30.16704-12.4928
+              12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928zM682.65984
+              213.34016q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 512q0
+              17.67424 12.4928 30.16704t30.16704 12.4928 30.16704-12.4928
+              12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928z" />
+          </svg>
+        {:else}
+          <svg
+            class="icon"
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            width="16"
+            height="16">
+            <path
+              d="M170.65984 896l0-768 640 384zM644.66944
+              512l-388.66944-233.32864 0 466.65728z" />
+          </svg>
+        {/if}
+      </button>
+      {#each speedOption as s}
+        <button
+          class:active={s === speed && speedState !== 'skipping'}
+          on:click={() => setSpeed(s)}
+          disabled={speedState === 'skipping'}>
+          {s}x
+        </button>
+      {/each}
+      <Switch
+        id="skip"
+        bind:checked={skipInactive}
+        disabled={speedState === 'skipping'}
+        label="skip inactive" />
+      <button on:click={() => dispatch('fullscreen')}>
+        <svg
+          class="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          width="16"
+          height="16">
+          <defs>
+            <style type="text/css">
+
+            </style>
+          </defs>
+          <path
+            d="M916 380c-26.4 0-48-21.6-48-48L868 223.2 613.6 477.6c-18.4
+            18.4-48.8 18.4-68 0-18.4-18.4-18.4-48.8 0-68L800 156 692 156c-26.4
+            0-48-21.6-48-48 0-26.4 21.6-48 48-48l224 0c26.4 0 48 21.6 48 48l0
+            224C964 358.4 942.4 380 916 380zM231.2 860l108.8 0c26.4 0 48 21.6 48
+            48s-21.6 48-48 48l-224 0c-26.4 0-48-21.6-48-48l0-224c0-26.4 21.6-48
+            48-48 26.4 0 48 21.6 48 48L164 792l253.6-253.6c18.4-18.4 48.8-18.4
+            68 0 18.4 18.4 18.4 48.8 0 68L231.2 860z"
+            p-id="1286" />
+        </svg>
+      </button>
+    </div>
+  </div>
+{/if}
diff --git a/src/Player.html b/src/Player.html
deleted file mode 100644
index 0b766fdc86..0000000000
--- a/src/Player.html
+++ /dev/null
@@ -1,192 +0,0 @@
-<div class="rr-player" ref:player style="{playerStyle}">
-  <div class="rr-player__frame" ref:frame { style }></div>
-  {#if replayer}
-  <Controller
-    {
-    replayer
-    }
-    {showController}
-    {autoPlay}
-    {skipInactive}
-    {tags}
-    {speedOption}
-    {speed}
-    on:fullscreen="fullscreen()"
-  />
-  {/if}
-</div>
-
-<script>
-  import { Replayer, unpack } from 'rrweb';
-  import 'rrweb/dist/rrweb.min.css';
-  import {
-    inlineCss,
-    openFullscreen,
-    exitFullscreen,
-    isFullscreen,
-    onFullscreenChange,
-    typeOf,
-  } from './utils.js';
-
-  const controllerHeight = 80;
-
-  export default {
-    components: {
-      Controller: './Controller.html',
-    },
-    data() {
-      return {
-        showController: true,
-        width: 1024,
-        height: 576,
-        events: [],
-        autoPlay: true,
-        replayer: null,
-        triggerFocus: true,
-        tags: {},
-        skipInactive: true,
-        speedOption: [1, 2, 3],
-        speed: 1,
-      };
-    },
-    computed: {
-      style({ width, height }) {
-        return inlineCss({
-          width: `${width}px`,
-          height: `${height}px`,
-        });
-      },
-      playerStyle({ width, height, showController }) {
-        return inlineCss({
-          width: `${width}px`,
-          height: `${height + (showController ? controllerHeight : 0)}px`,
-        });
-      },
-    },
-    methods: {
-      updateScale(el, frameDimension) {
-        const { width, height } = this.get();
-        const widthScale = width / frameDimension.width;
-        const heightScale = height / frameDimension.height;
-        el.style.transform =
-          `scale(${Math.min(widthScale, heightScale)})` +
-          'translate(-50%, -50%)';
-      },
-      fullscreen() {
-        if (this.refs.player) {
-          isFullscreen() ? exitFullscreen() : openFullscreen(this.refs.player);
-        }
-      },
-      addEventListener(event, handler) {
-        const { replayer } = this.get();
-        replayer.on(event, handler);
-      },
-      addEvent(event) {
-        replayer.addEvent(event);
-      },
-    },
-    oncreate() {
-      const { events, triggerFocus, showWarning, showDebug, speedOption } = this.get();
-      let { skipInactive, speed } = this.get();
-      skipInactive = skipInactive === undefined ? true : !!skipInactive;
-      speed = speed === undefined ? 1 : speed;
-      // 类型检查
-      if (speedOption !== undefined && typeOf(speedOption) !== 'array') {
-        throw new Error('speedOption must be array');
-      }
-      speedOption.forEach(item => {
-        if (typeOf(item) !== 'number') {
-          throw new Error('item of speedOption must be number');
-        }
-      });
-      if (speedOption.indexOf(speed) < 0) {
-        throw new Error(`speed must be one of speedOption,
-        current config:
-        {
-          ...
-          speed: ${speed},
-          speedOption: [${speedOption.toString()}]
-          ...
-        }
-        `);
-      }
-      const replayer = new Replayer(events, {
-        speed: speed === undefined ? 1 : speed,
-        root: this.refs.frame,
-        skipInactive,
-        showWarning: showWarning === undefined ? true : !!showWarning,
-        showDebug: showDebug === undefined ? true : !!showDebug,
-        triggerFocus,
-        unpackFn: unpack,
-      });
-      replayer.on('resize', (dimension) =>
-        this.updateScale(replayer.wrapper, dimension),
-      );
-
-      this.set({
-        replayer,
-        skipInactive,
-        speed,
-      });
-      this.fullscreenListener = onFullscreenChange(() => {
-        if (isFullscreen()) {
-          setTimeout(() => {
-            const { width, height } = this.get();
-            // store the original dimension which do not need to be reactive
-            this._width = width;
-            this._height = height;
-            const dimension = {
-              width: this.refs.player.offsetWidth,
-              height: this.refs.player.offsetHeight - controllerHeight,
-            };
-            this.set(dimension);
-            this.updateScale(replayer.wrapper, {
-              width: replayer.iframe.offsetWidth,
-              height: replayer.iframe.offsetHeight,
-            });
-          }, 0);
-        } else {
-          this.set({
-            width: this._width,
-            height: this._height,
-          });
-          this.updateScale(replayer.wrapper, {
-            width: replayer.iframe.offsetWidth,
-            height: replayer.iframe.offsetHeight,
-          });
-        }
-      });
-    },
-    ondestroy() {
-      if (this.fullscreenListener) {
-        this.fullscreenListener();
-      }
-    },
-  };
-</script>
-
-<style>
-  .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;
-  }
-
-  :global(.replayer-wrapper) {
-    float: left;
-    clear: both;
-    transform-origin: top left;
-    left: 50%;
-    top: 50%;
-  }
-
-  :global(.replayer-wrapper > iframe) {
-    border: none;
-  }
-</style>
diff --git a/src/Player.svelte b/src/Player.svelte
new file mode 100644
index 0000000000..4eeed4a399
--- /dev/null
+++ b/src/Player.svelte
@@ -0,0 +1,178 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { Replayer, unpack } from 'rrweb';
+  import type { eventWithTime } from 'rrweb/typings/types';
+  import {
+    inlineCss,
+    openFullscreen,
+    exitFullscreen,
+    isFullscreen,
+    onFullscreenChange,
+    typeOf,
+  } from './utils';
+  import Controller from './Controller.svelte';
+
+  export let width: number = 1024;
+  export let height: number = 576;
+  export let events: eventWithTime[] = [];
+  export let skipInactive: boolean = true;
+  export let autoPlay: boolean = true;
+  export let triggerFocus: boolean = true;
+  export let speedOption: number[] = [1, 2, 4, 8];
+  export let showController: boolean = true;
+  export let showWarning: boolean = true;
+  export let showDebug: boolean = true;
+  export let tags: Record<string, string> = {};
+
+  const controllerHeight = 80;
+  let speed = 1;
+  let player: HTMLElement;
+  let frame: HTMLElement;
+  let replayer: Replayer;
+  let fullscreenListener: undefined | (() => void);
+  let _width: number = width;
+  let _height: number = height;
+
+  let style: string;
+  $: style = inlineCss({
+    width: `${width}px`,
+    height: `${height}px`,
+  });
+  let playerStyle: string;
+  $: playerStyle = inlineCss({
+    width: `${width}px`,
+    height: `${height + (showController ? controllerHeight : 0)}px`,
+  });
+
+  const updateScale = (
+    el: HTMLElement,
+    frameDimension: { width: number; height: number },
+  ) => {
+    const widthScale = width / frameDimension.width;
+    const heightScale = height / frameDimension.height;
+    el.style.transform =
+      `scale(${Math.min(widthScale, heightScale)})` + 'translate(-50%, -50%)';
+  };
+
+  const fullscreen = () => {
+    if (player) {
+      isFullscreen() ? exitFullscreen() : openFullscreen(player);
+    }
+  };
+
+  export const addEventListener = (event: string, handler: () => unknown) => {
+    replayer.on(event, handler);
+  };
+
+  export const addEvent = (event: eventWithTime) => {
+    replayer.addEvent(event);
+  };
+
+  onMount(() => {
+    // runtime type check
+    if (speedOption !== undefined && typeOf(speedOption) !== 'array') {
+      throw new Error('speedOption must be array');
+    }
+    speedOption.forEach((item) => {
+      if (typeOf(item) !== 'number') {
+        throw new Error('item of speedOption must be number');
+      }
+    });
+    if (speedOption.indexOf(speed) < 0) {
+      throw new Error(`speed must be one of speedOption,
+        current config:
+        {
+          ...
+          speed: ${speed},
+          speedOption: [${speedOption.toString()}]
+          ...
+        }
+        `);
+    }
+
+    replayer = new Replayer(events, {
+      speed,
+      root: frame,
+      skipInactive,
+      showWarning,
+      showDebug,
+      triggerFocus,
+      unpackFn: unpack,
+    });
+
+    replayer.on('resize', (dimension) => {
+      updateScale(
+        replayer.wrapper,
+        dimension as { width: number; height: number },
+      );
+    });
+
+    fullscreenListener = onFullscreenChange(() => {
+      if (isFullscreen()) {
+        setTimeout(() => {
+          _width = width;
+          _height = height;
+          width = player.offsetWidth;
+          height = player.offsetHeight;
+          updateScale(replayer.wrapper, {
+            width: replayer.iframe.offsetWidth,
+            height: replayer.iframe.offsetHeight,
+          });
+        }, 0);
+      } else {
+        width = _width;
+        height = _height;
+        updateScale(replayer.wrapper, {
+          width: replayer.iframe.offsetWidth,
+          height: replayer.iframe.offsetHeight,
+        });
+      }
+    });
+  });
+
+  onDestroy(() => {
+    fullscreenListener && fullscreenListener();
+  });
+</script>
+
+<style global>
+  @import 'rrweb/dist/rrweb.min.css';
+
+  .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;
+  }
+
+  :global(.replayer-wrapper) {
+    float: left;
+    clear: both;
+    transform-origin: top left;
+    left: 50%;
+    top: 50%;
+  }
+
+  :global(.replayer-wrapper > iframe) {
+    border: none;
+  }
+</style>
+
+<div class="rr-player" bind:this={player} style={playerStyle}>
+  <div class="rr-player__frame" bind:this={frame} {style} />
+  {#if replayer}
+    <Controller
+      {replayer}
+      {showController}
+      {autoPlay}
+      {speedOption}
+      {skipInactive}
+      {tags}
+      on:fullscreen={() => fullscreen()} />
+  {/if}
+</div>
diff --git a/src/components/Switch.html b/src/components/Switch.svelte
similarity index 79%
rename from src/components/Switch.html
rename to src/components/Switch.svelte
index 3c3a2e7e60..9aa6862401 100644
--- a/src/components/Switch.html
+++ b/src/components/Switch.svelte
@@ -1,12 +1,9 @@
-<div class="switch" class:disabled="disabled">
-  <input
-    type="checkbox"
-    id="{id}"
-    bind:checked="checked"
-    disabled="{disabled}"
-  />
-  <label for="{id}"></label> <span class="label">{label}</span>
-</div>
+<script lang="ts">
+  export let disabled: boolean;
+  export let checked: boolean;
+  export let id: string;
+  export let label: string;
+</script>
 
 <style>
   .switch {
@@ -74,3 +71,9 @@
     left: 1.1em;
   }
 </style>
+
+<div class="switch" class:disabled>
+  <input type="checkbox" {id} bind:checked {disabled} />
+  <label for={id} />
+  <span class="label">{label}</span>
+</div>
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000000..341e39aacc
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,22 @@
+import type { eventWithTime } from 'rrweb/typings/types';
+import _Player from './Player.svelte';
+
+type PlayerProps = {
+  events: eventWithTime[];
+};
+
+class Player extends _Player {
+  constructor(options: {
+    target: Element;
+    props: PlayerProps;
+    // for compatibility
+    data?: PlayerProps;
+  }) {
+    super({
+      target: options.target,
+      props: options.data || options.props,
+    });
+  }
+}
+
+export default Player;
diff --git a/src/utils.js b/src/utils.ts
similarity index 65%
rename from src/utils.js
rename to src/utils.ts
index 275f8fb5b3..b95f38e9c3 100644
--- a/src/utils.js
+++ b/src/utils.ts
@@ -1,26 +1,43 @@
-export function inlineCss(cssObj) {
+declare global {
+  interface Document {
+    mozExitFullscreen: Document['exitFullscreen'];
+    webkitExitFullscreen: Document['exitFullscreen'];
+    msExitFullscreen: Document['exitFullscreen'];
+    webkitIsFullScreen: Document['fullscreen'];
+    mozFullScreen: Document['fullscreen'];
+    msFullscreenElement: Document['fullscreen'];
+  }
+
+  interface HTMLElement {
+    mozRequestFullScreen: Element['requestFullscreen'];
+    webkitRequestFullscreen: Element['requestFullscreen'];
+    msRequestFullscreen: Element['requestFullscreen'];
+  }
+}
+
+export function inlineCss(cssObj: Record<string, string>): string {
   let style = '';
-  Object.keys(cssObj).forEach(key => {
+  Object.keys(cssObj).forEach((key) => {
     style += `${key}: ${cssObj[key]};`;
   });
   return style;
 }
 
-function padZero(num, len = 2) {
+function padZero(num: number, len = 2): string {
+  let str = String(num);
   const threshold = Math.pow(10, len - 1);
   if (num < threshold) {
-    num = String(num);
-    while (String(threshold).length > num.length) {
-      num = '0' + num;
+    while (String(threshold).length > str.length) {
+      str = '0' + num;
     }
   }
-  return num;
+  return str;
 }
 
 const SECOND = 1000;
 const MINUTE = 60 * SECOND;
 const HOUR = 60 * MINUTE;
-export function formatTime(ms) {
+export function formatTime(ms: number): string {
   if (ms <= 0) {
     return '00:00';
   }
@@ -35,7 +52,7 @@ export function formatTime(ms) {
   return `${padZero(minute)}:${padZero(second)}`;
 }
 
-export function openFullscreen(el) {
+export function openFullscreen(el: HTMLElement): Promise<void> {
   if (el.requestFullscreen) {
     return el.requestFullscreen();
   } else if (el.mozRequestFullScreen) {
@@ -50,7 +67,7 @@ export function openFullscreen(el) {
   }
 }
 
-export function exitFullscreen() {
+export function exitFullscreen(): Promise<void> {
   if (document.exitFullscreen) {
     return document.exitFullscreen();
   } else if (document.mozExitFullscreen) {
@@ -65,7 +82,7 @@ export function exitFullscreen() {
   }
 }
 
-export function isFullscreen() {
+export function isFullscreen(): boolean {
   return (
     document.fullscreen ||
     document.webkitIsFullScreen ||
@@ -74,7 +91,7 @@ export function isFullscreen() {
   );
 }
 
-export function onFullscreenChange(handler) {
+export function onFullscreenChange(handler: () => unknown): () => void {
   document.addEventListener('fullscreenchange', handler);
   document.addEventListener('webkitfullscreenchange', handler);
   document.addEventListener('mozfullscreenchange', handler);
@@ -88,7 +105,19 @@ export function onFullscreenChange(handler) {
   };
 }
 
-export function typeOf(obj) {
+export function typeOf(
+  obj: unknown,
+):
+  | 'boolean'
+  | 'number'
+  | 'string'
+  | 'function'
+  | 'array'
+  | 'date'
+  | 'regExp'
+  | 'undefined'
+  | 'null'
+  | 'object' {
   const toString = Object.prototype.toString;
   const map = {
     '[object Boolean]': 'boolean',
@@ -100,7 +129,7 @@ export function typeOf(obj) {
     '[object RegExp]': 'regExp',
     '[object Undefined]': 'undefined',
     '[object Null]': 'null',
-    '[object Object]': 'object'
+    '[object Object]': 'object',
   };
   return map[toString.call(obj)];
 }
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000..77db65da2f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000000..cdd8777011
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,1650 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
+  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
+"@babel/helper-validator-identifier@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+
+"@babel/highlight@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
+  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@emmetio/extract-abbreviation@0.1.6":
+  version "0.1.6"
+  resolved "https://registry.npmjs.org/@emmetio/extract-abbreviation/-/extract-abbreviation-0.1.6.tgz#e4a9856c1057f0aff7d443b8536477c243abe28c"
+  integrity sha512-Ce3xE2JvTSEbASFbRbA1gAIcMcZWdS2yUYRaQbeM0nbOzaZrUYfa3ePtcriYRZOZmr+CkKA+zbjhvTpIOAYVcw==
+
+"@polka/url@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.npmjs.org/@polka/url/-/url-0.5.0.tgz#b21510597fd601e5d7c95008b76bf0d254ebfd31"
+  integrity sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==
+
+"@rollup/plugin-commonjs@^11.0.0":
+  version "11.1.0"
+  resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.1.0.tgz#60636c7a722f54b41e419e1709df05c7234557ef"
+  integrity sha512-Ycr12N3ZPN96Fw2STurD21jMqzKwL9QuFhms3SD7KKRK7oaXUsBU9Zt0jL/rOPHiPYisI21/rXGO3jr9BnLHUA==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.8"
+    commondir "^1.0.1"
+    estree-walker "^1.0.1"
+    glob "^7.1.2"
+    is-reference "^1.1.2"
+    magic-string "^0.25.2"
+    resolve "^1.11.0"
+
+"@rollup/plugin-node-resolve@^7.0.0":
+  version "7.1.3"
+  resolved "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
+  integrity sha512-RxtSL3XmdTAE2byxekYLnx+98kEUOrPHF/KRVjLH+DEIHy6kjIw7YINQzn+NXiH/NTrQLAwYs0GWB+csWygA9Q==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.8"
+    "@types/resolve" "0.0.8"
+    builtin-modules "^3.1.0"
+    is-module "^1.0.0"
+    resolve "^1.14.2"
+
+"@rollup/plugin-typescript@^4.0.0":
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-4.1.2.tgz#6f910430276ae3e53a47a12ad65820627e7b6ad9"
+  integrity sha512-+7UlGat/99e2JbmGNnIauxwEhYLwrL7adO/tSJxUN57xrrS3Ps+ZzYpLCDGPZJ57j+ZJTZLLN89KXW9JMEB+jg==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.1"
+    resolve "^1.14.1"
+
+"@rollup/pluginutils@^3.0.1", "@rollup/pluginutils@^3.0.8":
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
+  integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
+  dependencies:
+    "@types/estree" "0.0.39"
+    estree-walker "^1.0.1"
+    picomatch "^2.2.2"
+
+"@tsconfig/svelte@^1.0.0":
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-1.0.3.tgz#7e29c4fd771af94faa3e5dde4b717a1ad8625583"
+  integrity sha512-rk+BuV7fNAE33bywtzgNCbPSVEITOeR9zFPeHHJaD9lTcmjZQQRe5fOGJtsdyG3JJKoAZ4JSYVbll4CvWhC3sA==
+
+"@types/color-name@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
+  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
+
+"@types/eslint-visitor-keys@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
+  integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
+
+"@types/estree@*":
+  version "0.0.45"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.45.tgz#e9387572998e5ecdac221950dab3e8c3b16af884"
+  integrity sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g==
+
+"@types/estree@0.0.39":
+  version "0.0.39"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
+  integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
+
+"@types/json-schema@^7.0.3":
+  version "7.0.5"
+  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
+  integrity sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==
+
+"@types/node@*":
+  version "14.0.26"
+  resolved "https://registry.npmjs.org/@types/node/-/node-14.0.26.tgz#22a3b8a46510da8944b67bfc27df02c34a35331c"
+  integrity sha512-W+fpe5s91FBGE0pEa0lnqGLL4USgpLgs4nokw16SrBBco/gQxuua7KnArSEOd5iaMqbbSHV10vUDkJYJJqpXKA==
+
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+
+"@types/pug@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/@types/pug/-/pug-2.0.4.tgz#8772fcd0418e3cd2cc171555d73007415051f4b2"
+  integrity sha1-h3L80EGOPNLMFxVV1zAHQVBR9LI=
+
+"@types/resolve@0.0.8":
+  version "0.0.8"
+  resolved "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
+  integrity sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/sass@^1.16.0":
+  version "1.16.0"
+  resolved "https://registry.npmjs.org/@types/sass/-/sass-1.16.0.tgz#b41ac1c17fa68ffb57d43e2360486ef526b3d57d"
+  integrity sha512-2XZovu4NwcqmtZtsBR5XYLw18T8cBCnU2USFHTnYLLHz9fkhnoEMoDsqShJIOFsFhn5aJHjweiUUdTrDGujegA==
+  dependencies:
+    "@types/node" "*"
+
+"@types/smoothscroll-polyfill@^0.3.0":
+  version "0.3.1"
+  resolved "https://registry.npmjs.org/@types/smoothscroll-polyfill/-/smoothscroll-polyfill-0.3.1.tgz#77fb3a6e116bdab4a5959122e3b8e201224dcd49"
+  integrity sha512-+KkHw4y+EyeCtVXET7woHUhIbfWFCflc0E0mZnSV+ZdjPQeHt/9KPEuT7gSW/kFQ8O3EG30PLO++YhChDt8+Ag==
+
+"@typescript-eslint/eslint-plugin@^3.7.0":
+  version "3.7.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.7.0.tgz#0f91aa3c83d019591719e597fbdb73a59595a263"
+  integrity sha512-4OEcPON3QIx0ntsuiuFP/TkldmBGXf0uKxPQlGtS/W2F3ndYm8Vgdpj/woPJkzUc65gd3iR+qi3K8SDQP/obFg==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "3.7.0"
+    debug "^4.1.1"
+    functional-red-black-tree "^1.0.1"
+    regexpp "^3.0.0"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
+"@typescript-eslint/experimental-utils@3.7.0":
+  version "3.7.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.7.0.tgz#0ee21f6c48b2b30c63211da23827725078d5169a"
+  integrity sha512-xpfXXAfZqhhqs5RPQBfAFrWDHoNxD5+sVB5A46TF58Bq1hRfVROrWHcQHHUM9aCBdy9+cwATcvCbRg8aIRbaHQ==
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+    "@typescript-eslint/types" "3.7.0"
+    "@typescript-eslint/typescript-estree" "3.7.0"
+    eslint-scope "^5.0.0"
+    eslint-utils "^2.0.0"
+
+"@typescript-eslint/parser@^3.7.0":
+  version "3.7.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.7.0.tgz#3e9cd9df9ea644536feb6e5acdb8279ecff96ce9"
+  integrity sha512-2LZauVUt7jAWkcIW7djUc3kyW+fSarNEuM3RF2JdLHR9BfX/nDEnyA4/uWz0wseoWVZbDXDF7iF9Jc342flNqQ==
+  dependencies:
+    "@types/eslint-visitor-keys" "^1.0.0"
+    "@typescript-eslint/experimental-utils" "3.7.0"
+    "@typescript-eslint/types" "3.7.0"
+    "@typescript-eslint/typescript-estree" "3.7.0"
+    eslint-visitor-keys "^1.1.0"
+
+"@typescript-eslint/types@3.7.0":
+  version "3.7.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-3.7.0.tgz#09897fab0cb95479c01166b10b2c03c224821077"
+  integrity sha512-reCaK+hyKkKF+itoylAnLzFeNYAEktB0XVfSQvf0gcVgpz1l49Lt6Vo9x4MVCCxiDydA0iLAjTF/ODH0pbfnpg==
+
+"@typescript-eslint/typescript-estree@3.7.0":
+  version "3.7.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.7.0.tgz#66872e6da120caa4b64e6b4ca5c8702afc74738d"
+  integrity sha512-xr5oobkYRebejlACGr1TJ0Z/r0a2/HUf0SXqPvlgUMwiMqOCu/J+/Dr9U3T0IxpE5oLFSkqMx1FE/dKaZ8KsOQ==
+  dependencies:
+    "@typescript-eslint/types" "3.7.0"
+    "@typescript-eslint/visitor-keys" "3.7.0"
+    debug "^4.1.1"
+    glob "^7.1.6"
+    is-glob "^4.0.1"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
+"@typescript-eslint/visitor-keys@3.7.0":
+  version "3.7.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-3.7.0.tgz#ac0417d382a136e4571a0b0dcfe52088cb628177"
+  integrity sha512-k5PiZdB4vklUpUX4NBncn5RBKty8G3ihTY+hqJsCdMuD0v4jofI5xuqwnVcWxfv6iTm2P/dfEa2wMUnsUY8ODw==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
+"@xstate/fsm@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/@xstate/fsm/-/fsm-1.4.0.tgz#6fd082336fde4d026e9e448576189ee5265fa51a"
+  integrity sha512-uTHDeu2xI5E1IFwf37JFQM31RrH7mY7877RqPBS4ZqSNUwoLDuct8AhBWaXGnVizBAYyimVwgCyGa9z/NiRhXA==
+
+acorn-jsx@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
+  integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==
+
+acorn@^7.1.0, acorn@^7.3.1:
+  version "7.3.1"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-7.3.1.tgz#85010754db53c3fbaf3b9ea3e083aa5c5d147ffd"
+  integrity sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA==
+
+ajv@^6.10.0, ajv@^6.10.2:
+  version "6.12.3"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz#18c5af38a111ddeb4f2697bd78d68abc1cabd706"
+  integrity sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-colors@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
+  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
+
+ansi-regex@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
+  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
+
+ansi-regex@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
+  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
+
+ansi-styles@^3.2.0, ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
+  integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==
+  dependencies:
+    "@types/color-name" "^1.1.1"
+    color-convert "^2.0.1"
+
+anymatch@~3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
+  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+  integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
+
+astral-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
+  integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
+
+async-limiter@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
+  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
+
+binary-extensions@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
+  integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+buffer-from@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
+  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
+
+builtin-modules@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484"
+  integrity sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
+chalk@^2.0.0, chalk@^2.4.1:
+  version "2.4.2"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
+  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chokidar@^3.3.0:
+  version "3.4.1"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.4.1.tgz#e905bdecf10eaa0a0b1db0c664481cc4cbc22ba1"
+  integrity sha512-TQTJyr2stihpC4Sya9hs2Xh+O2wf+igjL36Y75xx2WdHuiICcn/XJza46Jwt0eT5hVpQOzo3FpY3cj3RVYLX0g==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.4.0"
+  optionalDependencies:
+    fsevents "~2.1.2"
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+
+console-clear@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz#995e20cbfbf14dd792b672cde387bd128d674bf7"
+  integrity sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==
+
+cosmiconfig@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
+  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.7.2"
+
+cross-spawn@^7.0.2:
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+debug@^4.0.1, debug@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
+  dependencies:
+    ms "^2.1.1"
+
+dedent-js@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz#bee5fb7c9e727d85dffa24590d10ec1ab1255305"
+  integrity sha1-vuX7fJ5yfYXf+iRZDRDsGrElUwU=
+
+deep-is@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
+
+detect-indent@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
+  integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==
+
+doctrine@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
+  dependencies:
+    esutils "^2.0.2"
+
+emoji-regex@^7.0.1:
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
+  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
+
+enquirer@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
+  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
+  dependencies:
+    ansi-colors "^4.1.1"
+
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
+escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+
+eslint-config-google@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.npmjs.org/eslint-config-google/-/eslint-config-google-0.11.0.tgz#fd0fc70be2e9114df097cac93a9b5b0d4e1c6830"
+  integrity sha512-z541Fs5TFaY7/35v/z100InQ2f3V2J7e3u/0yKrnImgsHjh6JWgSRngfC/mZepn/+XN16jUydt64k//kxXc1fw==
+
+eslint-plugin-svelte3@^2.7.3:
+  version "2.7.3"
+  resolved "https://registry.npmjs.org/eslint-plugin-svelte3/-/eslint-plugin-svelte3-2.7.3.tgz#e793b646b848e717674fe668c21b909cfa025eb3"
+  integrity sha512-p6HhxyICX9x/x+8WSy6AVk2bmv9ayoznoTSyCvK47th/k/07ksuJixMwbGX9qxJVAmPBaYMjEIMSEZtJHPIN7w==
+
+eslint-scope@^5.0.0, eslint-scope@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.0.tgz#d0f971dfe59c69e0cada684b23d49dbf82600ce5"
+  integrity sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-utils@^2.0.0, eslint-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
+eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
+
+eslint@^7.5.0:
+  version "7.5.0"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-7.5.0.tgz#9ecbfad62216d223b82ac9ffea7ef3444671d135"
+  integrity sha512-vlUP10xse9sWt9SGRtcr1LAC67BENcQMFeV+w5EvLEoFe3xJ8cF1Skd0msziRx/VMC+72B4DxreCE+OR12OA6Q==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    enquirer "^2.3.5"
+    eslint-scope "^5.1.0"
+    eslint-utils "^2.1.0"
+    eslint-visitor-keys "^1.3.0"
+    espree "^7.2.0"
+    esquery "^1.2.0"
+    esutils "^2.0.2"
+    file-entry-cache "^5.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^5.0.0"
+    globals "^12.1.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash "^4.17.19"
+    minimatch "^3.0.4"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    progress "^2.0.0"
+    regexpp "^3.1.0"
+    semver "^7.2.1"
+    strip-ansi "^6.0.0"
+    strip-json-comments "^3.1.0"
+    table "^5.2.3"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
+espree@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/espree/-/espree-7.2.0.tgz#1c263d5b513dbad0ac30c4991b93ac354e948d69"
+  integrity sha512-H+cQ3+3JYRMEIOl87e7QdHX70ocly5iW4+dttuR8iYSPr/hXKFb+7dBsZ7+u1adC4VrnPlTkv0+OwuPnDop19g==
+  dependencies:
+    acorn "^7.3.1"
+    acorn-jsx "^5.2.0"
+    eslint-visitor-keys "^1.3.0"
+
+esprima@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
+esquery@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
+  integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
+  integrity sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==
+  dependencies:
+    estraverse "^4.1.0"
+
+estraverse@^4.1.0, estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.1.0.tgz#374309d39fd935ae500e7b92e8a6b4c720e59642"
+  integrity sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==
+
+estree-walker@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
+  integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
+
+estree-walker@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
+  integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
+
+estree-walker@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.1.tgz#f8e030fb21cefa183b44b7ad516b747434e7a3e0"
+  integrity sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
+
+file-entry-cache@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
+  integrity sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==
+  dependencies:
+    flat-cache "^2.0.1"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+flat-cache@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
+  integrity sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==
+  dependencies:
+    flatted "^2.0.0"
+    rimraf "2.6.3"
+    write "1.0.3"
+
+flatted@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
+  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+
+fsevents@~2.1.2:
+  version "2.1.3"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
+  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+
+functional-red-black-tree@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
+  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
+
+get-port@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
+  integrity sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=
+
+glob-parent@^5.0.0, glob-parent@~5.1.0:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
+  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.6:
+  version "7.1.6"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globals@^12.1.0:
+  version "12.4.0"
+  resolved "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8"
+  integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
+  dependencies:
+    type-fest "^0.8.1"
+
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
+  dependencies:
+    array-union "^1.0.1"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+ignore@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
+
+import-fresh@^3.0.0, import-fresh@^3.1.0:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
+  integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
+
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
+  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+  integrity sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-reference@^1.1.2:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
+  integrity sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==
+  dependencies:
+    "@types/estree" "*"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+
+jest-worker@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
+  integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
+  dependencies:
+    merge-stream "^2.0.0"
+    supports-color "^6.1.0"
+
+js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-yaml@^3.13.1:
+  version "3.14.0"
+  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz#a7a34170f26a21bb162424d8adacb4113a69e482"
+  integrity sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+json-parse-better-errors@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
+
+jsonc-parser@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-1.0.3.tgz#1d53d7160e401a783dbceabaad82473f80e6ad7e"
+  integrity sha512-hk/69oAeaIzchq/v3lS50PXuzn5O2ynldopMC+SWBql7J2WtdptfB9dy8Y7+Og5rPkTCpn83zTiO8FMcqlXJ/g==
+
+kleur@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
+  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
+
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+lines-and-columns@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
+  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+
+livereload-js@^3.1.0:
+  version "3.2.4"
+  resolved "https://registry.npmjs.org/livereload-js/-/livereload-js-3.2.4.tgz#21a05f8a7bd04c9531a7c63dfb6ff4b677d30f43"
+  integrity sha512-kgTCrrYAfwnb5469+7bB2hxIct8Giq0RemDnxOESIzyRwRqYGGMZh5VIveYqJiDvpglH0dpd074BU1zJj4NaNw==
+
+livereload@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.npmjs.org/livereload/-/livereload-0.9.1.tgz#65125dabdf2db4fd3f1169e953fe56e3bcc6f477"
+  integrity sha512-9g7sua11kkyZNo2hLRCG3LuZZwqexoyEyecSlV8cAsfAVVCZqLzVir6XDqmH0r+Vzgnd5LrdHDMyjtFnJQLAYw==
+  dependencies:
+    chokidar "^3.3.0"
+    livereload-js "^3.1.0"
+    opts ">= 1.2.0"
+    ws "^6.2.1"
+
+local-access@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/local-access/-/local-access-1.0.1.tgz#5121258146d64e869046c642ea4f1dd39ff942bb"
+  integrity sha512-ykt2pgN0aqIy6KQC1CqdWTWkmUwNgaOS6dcpHVjyBJONA+Xi7AtSB1vuxC/U/0tjIP3wcRudwQk1YYzUvzk2bA==
+
+lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4:
+  version "4.17.19"
+  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
+  integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
+
+lower-case@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/lower-case/-/lower-case-2.0.1.tgz#39eeb36e396115cc05e29422eaea9e692c9408c7"
+  integrity sha512-LiWgfDLLb1dwbFQZsSglpRj+1ctGnayXz3Uv0/WO8n558JycT5fg6zkNcnW0G68Nn0aEldTFeEfmjCfmqry/rQ==
+  dependencies:
+    tslib "^1.10.0"
+
+magic-string@^0.25.2, magic-string@^0.25.3:
+  version "0.25.7"
+  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
+  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
+  dependencies:
+    sourcemap-codec "^1.4.4"
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
+mime@^2.3.1:
+  version "2.4.6"
+  resolved "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz#e5b407c90db442f2beb5b162373d07b69affa4d1"
+  integrity sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==
+
+min-indent@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
+
+minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
+mitt@^1.1.3:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/mitt/-/mitt-1.2.0.tgz#cb24e6569c806e31bd4e3995787fe38a04fdf90d"
+  integrity sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw==
+
+mkdirp@^0.5.1:
+  version "0.5.5"
+  resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
+mri@^1.1.0:
+  version "1.1.6"
+  resolved "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"
+  integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==
+
+ms@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
+
+no-case@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/no-case/-/no-case-3.0.3.tgz#c21b434c1ffe48b39087e86cfb4d2582e9df18f8"
+  integrity sha512-ehY/mVQCf9BL0gKfsJBvFJen+1V//U+0HQMPrWct40ixE4jnv0bfvxDbWtAHL9EcaPEOJHVVYKoQn1TlZUB8Tw==
+  dependencies:
+    lower-case "^2.0.1"
+    tslib "^1.10.0"
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+object-assign@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
+
+"opts@>= 1.2.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/opts/-/opts-2.0.0.tgz#c0b2cebdf53eaeafc21ed844e34773758dcf41e2"
+  integrity sha512-rPleeyX48sBEc4aj7rAok5dCbvRdYpdbIdSRR4gnIK98a7Rvd4l3wlv4YHQr2mwPQTpKQiw8uipi/WoyItDINg==
+
+pako@^1.0.11:
+  version "1.0.11"
+  resolved "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
+parse-json@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.0.1.tgz#7cfe35c1ccd641bce3981467e6c2ece61b3b3878"
+  integrity sha512-ztoZ4/DYeXQq4E21v169sC8qWINGpcosGv9XhTDvg9/hWvx/zrFkc9BiWxR58OJLHGk28j5BL0SDLeV2WmFZlQ==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+    lines-and-columns "^1.1.6"
+
+pascal-case@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.1.tgz#5ac1975133ed619281e88920973d2cd1f279de5f"
+  integrity sha512-XIeHKqIrsquVTQL2crjq3NfJUxmdLasn3TYOU0VBM+UX2a6ztAWBlJQBePLGY7VHW8+2dRadeIPK5+KImwTxQA==
+  dependencies:
+    no-case "^3.0.3"
+    tslib "^1.10.0"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
+  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+
+pify@^2.0.0, pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
+
+pify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
+
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+  integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
+
+postcss-easy-import@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-easy-import/-/postcss-easy-import-3.0.0.tgz#8eaaf5ae59566083d0cae98735dfd803e3ab194d"
+  integrity sha512-cfNsear/v8xlkl9v5Wm8y4Do/puiDQTFF+WX2Fo++h7oKt1fKWVVW/5Ca8hslYDQWnjndrg813cA23Pt1jsYdg==
+  dependencies:
+    globby "^6.1.0"
+    is-glob "^4.0.0"
+    lodash "^4.17.4"
+    object-assign "^4.0.1"
+    pify "^3.0.0"
+    postcss "^6.0.11"
+    postcss-import "^10.0.0"
+    resolve "^1.1.7"
+
+postcss-import@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-10.0.0.tgz#4c85c97b099136cc5ea0240dc1dfdbfde4e2ebbe"
+  integrity sha1-TIXJewmRNsxeoCQNwd/b/eTi674=
+  dependencies:
+    object-assign "^4.0.1"
+    postcss "^6.0.1"
+    postcss-value-parser "^3.2.3"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+postcss-value-parser@^3.2.3:
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
+  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
+
+postcss@^6.0.1, postcss@^6.0.11:
+  version "6.0.23"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+prettier-plugin-svelte@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-1.1.0.tgz#e6ec282d8457598b0c02164083b11ad8cb8ab304"
+  integrity sha512-wmIggG/ryV0wcmE9D5p+k5TwKDpS2SGKJpF6IV1aYHK7dkBJD+di1w47Ci00DRsI4RrXZRC2Ef37DSyrTb6Zqg==
+
+prettier@2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
+  integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
+
+progress@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
+punycode@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=
+  dependencies:
+    pify "^2.3.0"
+
+readdirp@~3.4.0:
+  version "3.4.0"
+  resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
+  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
+  dependencies:
+    picomatch "^2.2.1"
+
+regexpp@^3.0.0, regexpp@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
+  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
+
+require-relative@^0.8.7:
+  version "0.8.7"
+  resolved "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
+  integrity sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve@^1.1.7, resolve@^1.11.0, resolve@^1.14.1, resolve@^1.14.2:
+  version "1.17.0"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
+  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
+  dependencies:
+    path-parse "^1.0.6"
+
+rimraf@2.6.3:
+  version "2.6.3"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
+  integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
+  dependencies:
+    glob "^7.1.3"
+
+rollup-plugin-livereload@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-1.3.0.tgz#8da90df13df6502b9d982997d6ac871092f15fdd"
+  integrity sha512-abyqXaB21+nFHo+vJULBqfzNx6zXABC19UyvqgDfdoxR/8pFAd041GO+GIUe8ZYC2DbuMUmioh1Lvbk14YLZgw==
+  dependencies:
+    livereload "^0.9.1"
+
+rollup-plugin-svelte@^5.0.3:
+  version "5.2.3"
+  resolved "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-5.2.3.tgz#efdc15e3e3fdd9b9f1100fdc14a8532b4e587bc8"
+  integrity sha512-513vOht9A93OV7fvmpIq8mD1JFgTZ5LidmpULKM2Od9P1l8oI5KwvO32fwCnASuVJS1EkRfvCnS7vKQ8DF4srg==
+  dependencies:
+    require-relative "^0.8.7"
+    rollup-pluginutils "^2.8.2"
+    sourcemap-codec "^1.4.8"
+
+rollup-plugin-terser@^5.1.2:
+  version "5.3.0"
+  resolved "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-5.3.0.tgz#9c0dd33d5771df9630cd027d6a2559187f65885e"
+  integrity sha512-XGMJihTIO3eIBsVGq7jiNYOdDMb3pVxuzY0uhOE/FM4x/u9nQgr3+McsjzqBn3QfHIpNSZmFnpoKAwHBEcsT7g==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    jest-worker "^24.9.0"
+    rollup-pluginutils "^2.8.2"
+    serialize-javascript "^2.1.2"
+    terser "^4.6.2"
+
+rollup-pluginutils@^2.8.2:
+  version "2.8.2"
+  resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
+  integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
+  dependencies:
+    estree-walker "^0.6.1"
+
+rollup@^1.20.0:
+  version "1.32.1"
+  resolved "https://registry.npmjs.org/rollup/-/rollup-1.32.1.tgz#4480e52d9d9e2ae4b46ba0d9ddeaf3163940f9c4"
+  integrity sha512-/2HA0Ec70TvQnXdzynFffkjA6XN+1e2pEv/uKS5Ulca40g2L7KuOE3riasHoNVHOsFD5KKZgDsMk1CP3Tw9s+A==
+  dependencies:
+    "@types/estree" "*"
+    "@types/node" "*"
+    acorn "^7.1.0"
+
+rrweb-snapshot@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.npmjs.org/rrweb-snapshot/-/rrweb-snapshot-0.8.0.tgz#43f119407cb7ec0fdbb30056d6149b1a2c76b79b"
+  integrity sha512-rPQmgragMixTOGQNtMDI31XzpbtaXt2aIB98LNqkeOjaCeo46+B1rxAMLsT3FDFFgmq8vo/cS101H6wiiyuwew==
+
+rrweb@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-0.9.0.tgz#94e5370b931fcbad61280845a540f39a3e8eb13a"
+  integrity sha512-sfLu1Wu7rE85mZu0kSvdVoM3VwDNo1SPqnz7wl96sIC0RchcthxifhMLrldmI9/btdGCi8jJrpcEnuW09vpdWw==
+  dependencies:
+    "@types/smoothscroll-polyfill" "^0.3.0"
+    "@xstate/fsm" "^1.4.0"
+    mitt "^1.1.3"
+    pako "^1.0.11"
+    rrweb-snapshot "^0.8.0"
+    smoothscroll-polyfill "^0.4.3"
+
+sade@^1.4.0:
+  version "1.7.3"
+  resolved "https://registry.npmjs.org/sade/-/sade-1.7.3.tgz#a217ccc4fb4abb2d271648bf48f6628b2636fa1b"
+  integrity sha512-m4BctppMvJ60W1dXnHq7jMmFe3hPJZDAH85kQ3ACTo7XZNVUuTItCQ+2HfyaMeV5cKrbw7l4vD/6We3GBxvdJw==
+  dependencies:
+    mri "^1.1.0"
+
+semver@^7.2.1, semver@^7.3.2:
+  version "7.3.2"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
+
+serialize-javascript@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
+  integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+sirv-cli@^0.4.4:
+  version "0.4.6"
+  resolved "https://registry.npmjs.org/sirv-cli/-/sirv-cli-0.4.6.tgz#c28ab20deb3b34637f5a60863dc350f055abca04"
+  integrity sha512-/Vj85/kBvPL+n9ibgX6FicLE8VjidC1BhlX67PYPBfbBAphzR6i0k0HtU5c2arejfU3uzq8l3SYPCwl1x7z6Ww==
+  dependencies:
+    console-clear "^1.1.0"
+    get-port "^3.2.0"
+    kleur "^3.0.0"
+    local-access "^1.0.1"
+    sade "^1.4.0"
+    sirv "^0.4.6"
+    tinydate "^1.0.0"
+
+sirv@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.npmjs.org/sirv/-/sirv-0.4.6.tgz#185e44eb93d24009dd183b7494285c5180b81f22"
+  integrity sha512-rYpOXlNbpHiY4nVXxuDf4mXPvKz1reZGap/LkWp9TvcZ84qD/nPBjjH/6GZsgIjVMbOslnY8YYULAyP8jMn1GQ==
+  dependencies:
+    "@polka/url" "^0.5.0"
+    mime "^2.3.1"
+
+slice-ansi@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
+  integrity sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==
+  dependencies:
+    ansi-styles "^3.2.0"
+    astral-regex "^1.0.0"
+    is-fullwidth-code-point "^2.0.0"
+
+smoothscroll-polyfill@^0.4.3:
+  version "0.4.4"
+  resolved "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz#3a259131dc6930e6ca80003e1cb03b603b69abf8"
+  integrity sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==
+
+source-map-support@~0.5.12:
+  version "0.5.19"
+  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
+  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+source-map@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
+sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
+
+string-width@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
+  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
+  dependencies:
+    emoji-regex "^7.0.1"
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^5.1.0"
+
+strip-ansi@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
+  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
+  dependencies:
+    ansi-regex "^4.1.0"
+
+strip-ansi@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
+  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
+  dependencies:
+    ansi-regex "^5.0.0"
+
+strip-indent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+  dependencies:
+    min-indent "^1.0.0"
+
+strip-json-comments@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+supports-color@^5.3.0, supports-color@^5.4.0:
+  version "5.5.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
+  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+  dependencies:
+    has-flag "^4.0.0"
+
+svelte-check@^0.1.0:
+  version "0.1.56"
+  resolved "https://registry.npmjs.org/svelte-check/-/svelte-check-0.1.56.tgz#a82bbb10bcb61c2da5a4cfc8c60e0d2325225019"
+  integrity sha512-XFdbb72Fcu6gZnjnrawpn9DEoTUEzrN07lbcm0vawizrw8UEsBPvg55RQgdCd53vfBriBnprP5Bi3YWi9R5Q+Q==
+  dependencies:
+    chalk "^4.0.0"
+    glob "^7.1.6"
+    minimist "^1.2.5"
+    svelte-language-server "*"
+    vscode-languageserver "6.1.1"
+    vscode-languageserver-protocol "3.15.3"
+    vscode-languageserver-types "3.15.1"
+    vscode-uri "2.1.1"
+
+svelte-language-server@*:
+  version "0.10.75"
+  resolved "https://registry.npmjs.org/svelte-language-server/-/svelte-language-server-0.10.75.tgz#0cfc0ceb5642564fe98a8515989b17339bc2eb8c"
+  integrity sha512-ENLhx1z1pSIG0Szm+hgp3N5aB9/PCSAK0Cs/+XjEU5m6qm2Rl1aKb6v7NnuPSlpRV8Nv+B/0/xR0HIioHRi5Vw==
+  dependencies:
+    cosmiconfig "^6.0.0"
+    estree-walker "^2.0.1"
+    lodash "^4.17.19"
+    magic-string "^0.25.3"
+    prettier "2.0.5"
+    prettier-plugin-svelte "1.1.0"
+    source-map "^0.7.3"
+    svelte "3.24.0"
+    svelte-preprocess "~3.9.11"
+    svelte2tsx "*"
+    typescript "*"
+    vscode-css-languageservice "4.1.0"
+    vscode-emmet-helper "1.2.17"
+    vscode-html-languageservice "3.0.4-next.15"
+    vscode-languageserver "6.1.1"
+    vscode-languageserver-types "3.15.1"
+    vscode-uri "2.1.1"
+
+svelte-preprocess@^4.0.0:
+  version "4.0.8"
+  resolved "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.0.8.tgz#d283218cd078b91419d7e11371d5f79060d07196"
+  integrity sha512-RNSwuk8chC9g1MZAkHPM+/LRc2jndBPph26GN3eWNkAVkGwwt6HNskcRkUn30ZW71my1vlhMhk2D5ajVcz8RmA==
+  dependencies:
+    "@types/pug" "^2.0.4"
+    "@types/sass" "^1.16.0"
+    detect-indent "^6.0.0"
+    strip-indent "^3.0.0"
+
+svelte-preprocess@~3.9.11:
+  version "3.9.12"
+  resolved "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-3.9.12.tgz#21e8452e45c6a4d89df37a38714af4a0186df3a1"
+  integrity sha512-OX8a7drmlYcX/bLKbtRTvcc0lYu5Ub78D4B/GVxac2zeyrj1e5vEJU6BsxFbc/8kFDqI6BgsCLZAqsFDr/KrDQ==
+  dependencies:
+    "@types/pug" "^2.0.4"
+    "@types/sass" "^1.16.0"
+    detect-indent "^6.0.0"
+    strip-indent "^3.0.0"
+
+svelte2tsx@*:
+  version "0.1.61"
+  resolved "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.1.61.tgz#ad06be6c74f78c5c06ecb9b1788035a0c2545968"
+  integrity sha512-XXs/85B+MED8zsuG3VPkkQQffoEVZwujgZrs2RSUl3hNPROXYkbOA+it5mMdlUzzOvaDY1ODlXoylBOU0eq6qA==
+  dependencies:
+    dedent-js "^1.0.1"
+    pascal-case "^3.1.1"
+
+svelte@3.24.0, svelte@^3.2.0:
+  version "3.24.0"
+  resolved "https://registry.npmjs.org/svelte/-/svelte-3.24.0.tgz#6565a42c9705796fa66c6abb4fedc09f4323a4a8"
+  integrity sha512-VFXom6EP2DK83kxy4ZlBbaZklSbZIrpNH3oNXlPYHJUuW4q1OuAr3ZoYbfIVTVYPDgrI7Yq0gQcOhDlAtO4qfw==
+
+table@^5.2.3:
+  version "5.4.6"
+  resolved "https://registry.npmjs.org/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
+  integrity sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==
+  dependencies:
+    ajv "^6.10.2"
+    lodash "^4.17.14"
+    slice-ansi "^2.1.0"
+    string-width "^3.0.0"
+
+terser@^4.6.2:
+  version "4.8.0"
+  resolved "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
+  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
+
+tinydate@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz#e6ca8e5a22b51bb4ea1c3a2a4fd1352dbd4c57fb"
+  integrity sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+tslib@^1.10.0, tslib@^1.8.1:
+  version "1.13.0"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
+  integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
+
+tslib@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz#18d13fc2dce04051e20f074cc8387fd8089ce4f3"
+  integrity sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==
+
+tsutils@^3.17.1:
+  version "3.17.1"
+  resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
+  integrity sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==
+  dependencies:
+    tslib "^1.8.1"
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-fest@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
+  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
+
+typescript@*, typescript@^3.9.7:
+  version "3.9.7"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
+  integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==
+
+uri-js@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
+  integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==
+  dependencies:
+    punycode "^2.1.0"
+
+v8-compile-cache@^2.0.3:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745"
+  integrity sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==
+
+vscode-css-languageservice@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/vscode-css-languageservice/-/vscode-css-languageservice-4.1.0.tgz#144c8274e0bf1719fa6f773ca684bd1c7ffd634f"
+  integrity sha512-iTX3dTp0Y0RFWhIux5jasI8r9swdiWVB1Z3OrZ10iDHxzkETjVPxAQ5BEQU4ag0Awc8TTg1C7sJriHQY2LO14g==
+  dependencies:
+    vscode-languageserver-textdocument "^1.0.1"
+    vscode-languageserver-types "^3.15.1"
+    vscode-nls "^4.1.1"
+    vscode-uri "^2.1.1"
+
+vscode-emmet-helper@1.2.17:
+  version "1.2.17"
+  resolved "https://registry.npmjs.org/vscode-emmet-helper/-/vscode-emmet-helper-1.2.17.tgz#f0c6bfcebc4285d081fb2618e6e5b9a08c567afa"
+  integrity sha512-X4pzcrJ8dE7M3ArFuySF5fgipKDd/EauXkiJwtjBIVRWpVNq0tF9+lNCyuC7iDUwP3Oq7ow/TGssD3GdG96Jow==
+  dependencies:
+    "@emmetio/extract-abbreviation" "0.1.6"
+    jsonc-parser "^1.0.0"
+    vscode-languageserver-types "^3.6.0-next.1"
+
+vscode-html-languageservice@3.0.4-next.15:
+  version "3.0.4-next.15"
+  resolved "https://registry.npmjs.org/vscode-html-languageservice/-/vscode-html-languageservice-3.0.4-next.15.tgz#7214ccd9b4a06cf138b5945d9fd88285a0add490"
+  integrity sha512-UmUm3A1ZTj+BloVIyel+5pK/nfsqRfPLXzl8BA9O7v5Cj64vivddABvNf/rW1US8fzdikFNZNloC/4ooqxB2kw==
+  dependencies:
+    vscode-languageserver-textdocument "^1.0.1-next.1"
+    vscode-languageserver-types "^3.15.1"
+    vscode-nls "^4.1.1"
+    vscode-uri "^2.1.1"
+
+vscode-jsonrpc@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-5.0.1.tgz#9bab9c330d89f43fc8c1e8702b5c36e058a01794"
+  integrity sha512-JvONPptw3GAQGXlVV2utDcHx0BiY34FupW/kI6mZ5x06ER5DdPG/tXWMVHjTNULF5uKPOUUD0SaXg5QaubJL0A==
+
+vscode-languageserver-protocol@3.15.3, vscode-languageserver-protocol@^3.15.3:
+  version "3.15.3"
+  resolved "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.15.3.tgz#3fa9a0702d742cf7883cb6182a6212fcd0a1d8bb"
+  integrity sha512-zrMuwHOAQRhjDSnflWdJG+O2ztMWss8GqUUB8dXLR/FPenwkiBNkMIJJYfSN6sgskvsF0rHAoBowNQfbyZnnvw==
+  dependencies:
+    vscode-jsonrpc "^5.0.1"
+    vscode-languageserver-types "3.15.1"
+
+vscode-languageserver-textdocument@^1.0.1, vscode-languageserver-textdocument@^1.0.1-next.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.1.tgz#178168e87efad6171b372add1dea34f53e5d330f"
+  integrity sha512-UIcJDjX7IFkck7cSkNNyzIz5FyvpQfY7sdzVy+wkKN/BLaD4DQ0ppXQrKePomCxTS7RrolK1I0pey0bG9eh8dA==
+
+vscode-languageserver-types@3.15.1, vscode-languageserver-types@^3.15.1, vscode-languageserver-types@^3.6.0-next.1:
+  version "3.15.1"
+  resolved "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.15.1.tgz#17be71d78d2f6236d414f0001ce1ef4d23e6b6de"
+  integrity sha512-+a9MPUQrNGRrGU630OGbYVQ+11iOIovjCkqxajPa9w57Sd5ruK8WQNsslzpa0x/QJqC8kRc2DUxWjIFwoNm4ZQ==
+
+vscode-languageserver@6.1.1:
+  version "6.1.1"
+  resolved "https://registry.npmjs.org/vscode-languageserver/-/vscode-languageserver-6.1.1.tgz#d76afc68172c27d4327ee74332b468fbc740d762"
+  integrity sha512-DueEpkUAkD5XTR4MLYNr6bQIp/UFR0/IPApgXU3YfCBCB08u2sm9hRCs6DxYZELkk++STPjpcjksR2H8qI3cDQ==
+  dependencies:
+    vscode-languageserver-protocol "^3.15.3"
+
+vscode-nls@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/vscode-nls/-/vscode-nls-4.1.2.tgz#ca8bf8bb82a0987b32801f9fddfdd2fb9fd3c167"
+  integrity sha512-7bOHxPsfyuCqmP+hZXscLhiHwe7CSuFE4hyhbs22xPIhQ4jv99FcR4eBzfYYVLP356HNFpdvz63FFb/xw6T4Iw==
+
+vscode-uri@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/vscode-uri/-/vscode-uri-2.1.1.tgz#5aa1803391b6ebdd17d047f51365cf62c38f6e90"
+  integrity sha512-eY9jmGoEnVf8VE8xr5znSah7Qt1P/xsCdErz+g8HYZtJ7bZqKH5E3d+6oVNm1AC/c6IHUDokbmVXKOi4qPAC9A==
+
+vscode-uri@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/vscode-uri/-/vscode-uri-2.1.2.tgz#c8d40de93eb57af31f3c715dd650e2ca2c096f1c"
+  integrity sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
+write@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
+  integrity sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==
+  dependencies:
+    mkdirp "^0.5.1"
+
+ws@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
+  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
+  dependencies:
+    async-limiter "~1.0.0"
+
+yaml@^1.7.2:
+  version "1.10.0"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
+  integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==

From 0ad53b232c993f67866c2ad9618bd14640336422 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 9 Aug 2020 13:38:26 +0800
Subject: [PATCH 222/524] Release 0.5.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4d8389bef9..4b283bc341 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From 3b8ea6d465b56e3555d48bfdb05d378e3ab8aaea Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 9 Aug 2020 15:54:56 +0800
Subject: [PATCH 223/524] close #20 add types

---
 package.json       |  1 +
 typings/index.d.ts | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 typings/index.d.ts

diff --git a/package.json b/package.json
index 4b283bc341..900c7c2c1e 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "lib",
     "dist"
   ],
+  "typings": "typings/index.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/rrweb-io/rrweb-player.git"
diff --git a/typings/index.d.ts b/typings/index.d.ts
new file mode 100644
index 0000000000..ba0b5499d7
--- /dev/null
+++ b/typings/index.d.ts
@@ -0,0 +1,23 @@
+import { eventWithTime } from 'rrweb/typings/types';
+
+export default class rrwebPlayer {
+  constructor(options: {
+    target: HTMLElement;
+    props: {
+      events: eventWithTime[];
+      width?: number;
+      height?: number;
+      skipInactive?: boolean;
+      autoPlay?: number;
+      speedOption?: number[];
+      showController?: boolean;
+      showWarning?: boolean;
+      showDebug?: boolean;
+      tags?: Record<string, string>;
+    };
+  });
+
+  addEventListener(event: string, handler: () => unknown): void;
+
+  addEvent(event: eventWithTime): void;
+}

From c84bfc8dbf33b87be490282208892a3f2f48e13b Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 9 Aug 2020 15:55:39 +0800
Subject: [PATCH 224/524] Release 0.5.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 900c7c2c1e..b995ca09ea 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From 7525b3bb9f64095a228d8fad8d36b577390ad73c Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 9 Aug 2020 15:59:45 +0800
Subject: [PATCH 225/524] fix types

---
 package.json       | 3 ++-
 typings/index.d.ts | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index b995ca09ea..8138c37f7c 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,8 @@
   "unpkg": "dist/index.js",
   "files": [
     "lib",
-    "dist"
+    "dist",
+    "typings"
   ],
   "typings": "typings/index.d.ts",
   "repository": {
diff --git a/typings/index.d.ts b/typings/index.d.ts
index ba0b5499d7..72b235895b 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -8,7 +8,7 @@ export default class rrwebPlayer {
       width?: number;
       height?: number;
       skipInactive?: boolean;
-      autoPlay?: number;
+      autoPlay?: boolean;
       speedOption?: number[];
       showController?: boolean;
       showWarning?: boolean;

From b3c3947a2d29243a3679fd684b35657cf48b9501 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 9 Aug 2020 16:00:21 +0800
Subject: [PATCH 226/524] Release 0.5.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8138c37f7c..8e87165ab5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From e905467852ed3d5321e5dcc0256e4434a2e08826 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 20 Aug 2020 23:18:55 +0800
Subject: [PATCH 227/524] expose APIs as public API

---
 public/index.html     |  1 +
 src/Controller.svelte | 10 +++++++---
 src/Player.svelte     | 21 +++++++++++++++++++--
 typings/index.d.ts    |  3 +++
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/public/index.html b/public/index.html
index 56ec245e1b..e05b1b83af 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,6 +26,7 @@
         autoPlay: false,
       },
     });
+    window.$c = component;
     component.addEventListener('finish', () => console.log('finish'));
   </script>
 </html>
diff --git a/src/Controller.svelte b/src/Controller.svelte
index 3140f199c8..22e30c585f 100644
--- a/src/Controller.svelte
+++ b/src/Controller.svelte
@@ -102,7 +102,7 @@
     }
   };
 
-  const toggle = () => {
+  export const toggle = () => {
     switch (playerState) {
       case 'playing':
         replayer.pause();
@@ -142,7 +142,7 @@
     }
   };
 
-  const setSpeed = (newSpeed: number) => {
+  export const setSpeed = (newSpeed: number) => {
     let needFreeze = playerState === 'playing';
     speed = newSpeed;
     if (needFreeze) {
@@ -154,6 +154,10 @@
     }
   };
 
+  export const toggleSkipInactive = () => {
+    skipInactive = !skipInactive;
+  };
+
   onMount(() => {
     playerState = replayer.service.state.value as typeof playerState;
     speedState = replayer.speedService.state.value as typeof speedState;
@@ -320,7 +324,7 @@
     </div>
     <div class="rr-controller__btns">
       <button on:click={toggle}>
-        {#if ['playing', 'skipping'].includes(playerState)}
+        {#if playerState === 'playing'}
           <svg
             class="icon"
             viewBox="0 0 1024 1024"
diff --git a/src/Player.svelte b/src/Player.svelte
index 4eeed4a399..db276b6119 100644
--- a/src/Player.svelte
+++ b/src/Player.svelte
@@ -32,6 +32,11 @@
   let fullscreenListener: undefined | (() => void);
   let _width: number = width;
   let _height: number = height;
+  let controller: {
+    toggle: () => void;
+    setSpeed: (speed: number) => void;
+    toggleSkipInactive: () => void;
+  };
 
   let style: string;
   $: style = inlineCss({
@@ -54,7 +59,7 @@
       `scale(${Math.min(widthScale, heightScale)})` + 'translate(-50%, -50%)';
   };
 
-  const fullscreen = () => {
+  export const toggleFullscreen = () => {
     if (player) {
       isFullscreen() ? exitFullscreen() : openFullscreen(player);
     }
@@ -68,6 +73,17 @@
     replayer.addEvent(event);
   };
 
+  // by pass controller methods as public API
+  export const toggle = () => {
+    controller.toggle();
+  };
+  export const setSpeed = (speed: number) => {
+    controller.setSpeed(speed);
+  };
+  export const toggleSkipInactive = () => {
+    controller.toggleSkipInactive();
+  };
+
   onMount(() => {
     // runtime type check
     if (speedOption !== undefined && typeOf(speedOption) !== 'array') {
@@ -167,12 +183,13 @@
   <div class="rr-player__frame" bind:this={frame} {style} />
   {#if replayer}
     <Controller
+      bind:this={controller}
       {replayer}
       {showController}
       {autoPlay}
       {speedOption}
       {skipInactive}
       {tags}
-      on:fullscreen={() => fullscreen()} />
+      on:fullscreen={() => toggleFullscreen()} />
   {/if}
 </div>
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 72b235895b..a44558a15e 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -20,4 +20,7 @@ export default class rrwebPlayer {
   addEventListener(event: string, handler: () => unknown): void;
 
   addEvent(event: eventWithTime): void;
+  toggle: () => void;
+  setSpeed: (speed: number) => void;
+  toggleSkipInactive: () => void;
 }

From a24e3762715165201ec24d767c6b0d55769138cd Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 20 Aug 2020 23:27:09 +0800
Subject: [PATCH 228/524] Release 0.5.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8e87165ab5..88eef7cf0c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From 6c9a48919bf354e28732dcd622ba3f97b4e7862f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 21 Aug 2020 18:33:24 +0800
Subject: [PATCH 229/524] dispatch ui events

---
 public/index.html     |  1 +
 src/Controller.svelte |  4 ++++
 src/Player.svelte     | 14 ++++++++++++--
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index e05b1b83af..6cedf6c4fa 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,5 +28,6 @@
     });
     window.$c = component;
     component.addEventListener('finish', () => console.log('finish'));
+    // component.addEventListener('ui-update-progress', console.log);
   </script>
 </html>
diff --git a/src/Controller.svelte b/src/Controller.svelte
index 22e30c585f..5473732019 100644
--- a/src/Controller.svelte
+++ b/src/Controller.svelte
@@ -26,6 +26,9 @@
   export let tags: Record<string, string> = {};
 
   let currentTime = 0;
+  $: {
+    dispatch('ui-update-current-time', { payload: currentTime });
+  }
   let timer: number | null = null;
   let playerState: 'playing' | 'paused' | 'live';
   let speedState: 'normal' | 'skipping';
@@ -39,6 +42,7 @@
   $: {
     const percent = Math.min(1, currentTime / meta.totalTime);
     percentage = `${100 * percent}%`;
+    dispatch('ui-update-progress', { payload: percent });
   }
   type CustomEvent = {
     name: string;
diff --git a/src/Player.svelte b/src/Player.svelte
index db276b6119..528da5b68c 100644
--- a/src/Player.svelte
+++ b/src/Player.svelte
@@ -36,7 +36,7 @@
     toggle: () => void;
     setSpeed: (speed: number) => void;
     toggleSkipInactive: () => void;
-  };
+  } & Controller;
 
   let style: string;
   $: style = inlineCss({
@@ -65,8 +65,18 @@
     }
   };
 
-  export const addEventListener = (event: string, handler: () => unknown) => {
+  export const addEventListener = (
+    event: string,
+    handler: (detail: unknown) => unknown,
+  ) => {
     replayer.on(event, handler);
+    switch (event) {
+      case 'ui-update-current-time':
+      case 'ui-update-progress':
+        controller.$on(event, ({ detail }) => handler(detail));
+      default:
+        break;
+    }
   };
 
   export const addEvent = (event: eventWithTime) => {

From ae476d25a909acb4398ed986bd6df9abb0c1fcad Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Fri, 21 Aug 2020 16:35:17 +0100
Subject: [PATCH 230/524] Expand what is considered to be a valid tag name to
 include underscores: (#41)

- was making this change for <wix-image> on Wix websites, but discovered after that this has already been done in e4593ff76d90e2519abe66186c38c0c2c473cd01
 - have tested document.createElement('wix-image') and document.createElement('foo_bar'), but can't find a canonical source for what is allowed in tag names.
 - this restriction was originally introduced in #150 to prevent document.createElement('alt=""') i.e. a very malformed tag name
---
 src/snapshot.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 351bbc75ef..f2300cf392 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -9,7 +9,7 @@ import {
 } from './types';
 
 let _id = 1;
-const symbolAndNumberRegex = RegExp('[^a-z1-6-]');
+const tagNameRegex = RegExp('[^a-z1-6-_]');
 
 function genId(): number {
   return _id++;
@@ -18,7 +18,7 @@ function genId(): number {
 function getValidTagName(tagName: string): string {
   const processedTagName = tagName.toLowerCase().trim();
 
-  if (symbolAndNumberRegex.test(processedTagName)) {
+  if (tagNameRegex.test(processedTagName)) {
     // if the tag name is odd and we cannot extract
     // anything from the string, then we return a
     // generic div

From 74cb44c16b3743f4ba96e215f7f4a2e4eb75092d Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 22 Aug 2020 00:39:29 +0800
Subject: [PATCH 231/524] export more public APIs to customize UI

---
 src/Controller.svelte |  3 +++
 src/Player.svelte     |  3 +++
 typings/index.d.ts    |  6 +++++-
 yarn.lock             | 40 ++++++++++++++++++++--------------------
 4 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/Controller.svelte b/src/Controller.svelte
index 5473732019..84cb68457f 100644
--- a/src/Controller.svelte
+++ b/src/Controller.svelte
@@ -31,6 +31,9 @@
   }
   let timer: number | null = null;
   let playerState: 'playing' | 'paused' | 'live';
+  $: {
+    dispatch('ui-update-player-state', { payload: playerState });
+  }
   let speedState: 'normal' | 'skipping';
   let progress: HTMLElement;
   let step: HTMLElement;
diff --git a/src/Player.svelte b/src/Player.svelte
index 528da5b68c..9067c7e217 100644
--- a/src/Player.svelte
+++ b/src/Player.svelte
@@ -73,6 +73,7 @@
     switch (event) {
       case 'ui-update-current-time':
       case 'ui-update-progress':
+      case 'ui-update-player-state':
         controller.$on(event, ({ detail }) => handler(detail));
       default:
         break;
@@ -82,6 +83,8 @@
   export const addEvent = (event: eventWithTime) => {
     replayer.addEvent(event);
   };
+  export const getMetaData = () => replayer.getMetaData();
+  export const getReplayer = () => replayer;
 
   // by pass controller methods as public API
   export const toggle = () => {
diff --git a/typings/index.d.ts b/typings/index.d.ts
index a44558a15e..ca0c7bdcac 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,4 +1,5 @@
 import { eventWithTime } from 'rrweb/typings/types';
+import { Replayer } from 'rrweb';
 
 export default class rrwebPlayer {
   constructor(options: {
@@ -17,9 +18,12 @@ export default class rrwebPlayer {
     };
   });
 
-  addEventListener(event: string, handler: () => unknown): void;
+  addEventListener(event: string, handler: (params: any) => unknown): void;
 
   addEvent(event: eventWithTime): void;
+  getMetaData: Replayer['getMetaData'];
+  getReplayer: () => Replayer;
+
   toggle: () => void;
   setSpeed: (speed: number) => void;
   toggleSkipInactive: () => void;
diff --git a/yarn.lock b/yarn.lock
index cdd8777011..43d7e6c6f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11,12 +11,12 @@
 
 "@babel/helper-validator-identifier@^7.10.4":
   version "7.10.4"
-  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
   integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
 
 "@babel/highlight@^7.10.4":
   version "7.10.4"
-  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
   integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
   dependencies:
     "@babel/helper-validator-identifier" "^7.10.4"
@@ -317,7 +317,7 @@ braces@~3.0.2:
 
 buffer-from@^1.0.0:
   version "1.1.1"
-  resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
   integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
 
 builtin-modules@^3.1.0:
@@ -332,7 +332,7 @@ callsites@^3.0.0:
 
 chalk@^2.0.0, chalk@^2.4.1:
   version "2.4.2"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
   dependencies:
     ansi-styles "^3.2.1"
@@ -364,7 +364,7 @@ chokidar@^3.3.0:
 
 color-convert@^1.9.0:
   version "1.9.3"
-  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
   dependencies:
     color-name "1.1.3"
@@ -378,7 +378,7 @@ color-convert@^2.0.1:
 
 color-name@1.1.3:
   version "1.1.3"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
 color-name@~1.1.4:
@@ -388,7 +388,7 @@ color-name@~1.1.4:
 
 commander@^2.20.0:
   version "2.20.3"
-  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
 commondir@^1.0.1:
@@ -476,7 +476,7 @@ error-ex@^1.3.1:
 
 escape-string-regexp@^1.0.5:
   version "1.0.5"
-  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
 eslint-config-google@^0.11.0:
@@ -591,7 +591,7 @@ estraverse@^5.1.0:
 
 estree-walker@^0.6.1:
   version "0.6.1"
-  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
   integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
 
 estree-walker@^1.0.1:
@@ -711,7 +711,7 @@ globby@^6.1.0:
 
 has-flag@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
   integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
 
 has-flag@^4.0.0:
@@ -803,7 +803,7 @@ isexe@^2.0.0:
 
 jest-worker@^24.9.0:
   version "24.9.0"
-  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
   integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
   dependencies:
     merge-stream "^2.0.0"
@@ -811,7 +811,7 @@ jest-worker@^24.9.0:
 
 js-tokens@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
 js-yaml@^3.13.1:
@@ -901,7 +901,7 @@ magic-string@^0.25.2, magic-string@^0.25.3:
 
 merge-stream@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
 mime@^2.3.1:
@@ -1197,7 +1197,7 @@ rollup-plugin-svelte@^5.0.3:
 
 rollup-plugin-terser@^5.1.2:
   version "5.3.0"
-  resolved "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-5.3.0.tgz#9c0dd33d5771df9630cd027d6a2559187f65885e"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-5.3.0.tgz#9c0dd33d5771df9630cd027d6a2559187f65885e"
   integrity sha512-XGMJihTIO3eIBsVGq7jiNYOdDMb3pVxuzY0uhOE/FM4x/u9nQgr3+McsjzqBn3QfHIpNSZmFnpoKAwHBEcsT7g==
   dependencies:
     "@babel/code-frame" "^7.5.5"
@@ -1208,7 +1208,7 @@ rollup-plugin-terser@^5.1.2:
 
 rollup-pluginutils@^2.8.2:
   version "2.8.2"
-  resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
   integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
   dependencies:
     estree-walker "^0.6.1"
@@ -1253,7 +1253,7 @@ semver@^7.2.1, semver@^7.3.2:
 
 serialize-javascript@^2.1.2:
   version "2.1.2"
-  resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
   integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
 
 shebang-command@^2.0.0:
@@ -1305,7 +1305,7 @@ smoothscroll-polyfill@^0.4.3:
 
 source-map-support@~0.5.12:
   version "0.5.19"
-  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
   integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
   dependencies:
     buffer-from "^1.0.0"
@@ -1368,14 +1368,14 @@ strip-json-comments@^3.1.0:
 
 supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.5.0"
-  resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   dependencies:
     has-flag "^3.0.0"
 
 supports-color@^6.1.0:
   version "6.1.0"
-  resolved "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
   integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
   dependencies:
     has-flag "^3.0.0"
@@ -1469,7 +1469,7 @@ table@^5.2.3:
 
 terser@^4.6.2:
   version "4.8.0"
-  resolved "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
   integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
   dependencies:
     commander "^2.20.0"

From 01b138c650727d8f8e9ecb74cb29a3147d1738f8 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 22 Aug 2020 00:40:03 +0800
Subject: [PATCH 232/524] Release 0.5.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 88eef7cf0c..1f072264d4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From e54218be19240a65940c9f6f2165d934bfd84848 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 6 Aug 2020 21:37:52 +0800
Subject: [PATCH 233/524] provide a general visit function to modify rebuilt id
 node map

---
 src/rebuild.ts | 62 +++++++++++++++++++++++++++++++++-----------------
 1 file changed, 41 insertions(+), 21 deletions(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index bb26aeface..23025797cf 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -62,7 +62,7 @@ export function addHoverClass(cssText: string): string {
   if (!ast.stylesheet) {
     return cssText;
   }
-  ast.stylesheet.rules.forEach(rule => {
+  ast.stylesheet.rules.forEach((rule) => {
     if ('selectors' in rule) {
       (rule.selectors || []).forEach((selector: string) => {
         if (HOVER_SELECTOR.test(selector)) {
@@ -102,7 +102,8 @@ function buildNode(
           continue;
         }
         let value = n.attributes[name];
-        value = typeof value === 'boolean' || typeof value === 'number' ? '' : value;
+        value =
+          typeof value === 'boolean' || typeof value === 'number' ? '' : value;
         // attribute names start with rr_ are internal attributes added by rrweb
         if (!name.startsWith('rr_')) {
           const isTextarea = tagName === 'textarea' && name === 'value';
@@ -128,7 +129,11 @@ function buildNode(
           try {
             if (n.isSVG && name === 'xlink:href') {
               node.setAttributeNS('http://www.w3.org/1999/xlink', name, value);
-            } else if (name == 'onload' || name == 'onclick' || name.substring(0, 7) == 'onmouse') {
+            } else if (
+              name === 'onload' ||
+              name === 'onclick' ||
+              name.substring(0, 7) === 'onmouse'
+            ) {
               // Rename some of the more common atttributes from https://www.w3schools.com/tags/ref_eventattributes.asp
               // as setting them triggers a console.error (which shows up despite the try/catch)
               // Assumption: these attributes are not used to css
@@ -220,25 +225,34 @@ export function buildNodeWithSN(
   return node as INode;
 }
 
-function sideEffects(idNodeMap: idNodeMap) {
-  for(let id in idNodeMap) {
-    const node = idNodeMap[id];
-    const n = node.__sn;
-    if (n.type !== NodeType.Element) {
+function visit(idNodeMap: idNodeMap, onVisit: (node: INode) => void) {
+  function walk(node: INode) {
+    onVisit(node);
+  }
+
+  for (const key in idNodeMap) {
+    if (idNodeMap[key]) {
+      walk(idNodeMap[key]);
+    }
+  }
+}
+
+function handleScroll(node: INode) {
+  const n = node.__sn;
+  if (n.type !== NodeType.Element) {
+    return;
+  }
+  const el = (node as Node) as HTMLElement;
+  for (const name in n.attributes) {
+    if (!(n.attributes.hasOwnProperty(name) && name.startsWith('rr_'))) {
       continue;
     }
-    const el = node as Node as HTMLElement;
-    for(const name in n.attributes) {
-      if (!(n.attributes.hasOwnProperty(name) && name.startsWith('rr_'))) {
-        continue;
-      }
-      const value = n.attributes[name];
-      if (name === 'rr_scrollLeft') {
-        el.scrollLeft = value as number;
-      }
-      if (name === 'rr_scrollTop') {
-        el.scrollTop = value as number;
-      }
+    const value = n.attributes[name];
+    if (name === 'rr_scrollLeft') {
+      el.scrollLeft = value as number;
+    }
+    if (name === 'rr_scrollTop') {
+      el.scrollTop = value as number;
     }
   }
 }
@@ -246,6 +260,7 @@ function sideEffects(idNodeMap: idNodeMap) {
 function rebuild(
   n: serializedNodeWithId,
   doc: Document,
+  onVisit?: (node: INode) => unknown,
   /**
    * This is not a public API yet, just for POC
    */
@@ -253,7 +268,12 @@ function rebuild(
 ): [Node | null, idNodeMap] {
   const idNodeMap: idNodeMap = {};
   const node = buildNodeWithSN(n, doc, idNodeMap, false, HACK_CSS);
-  sideEffects(idNodeMap);
+  visit(idNodeMap, (visitedNode) => {
+    if (onVisit) {
+      onVisit(visitedNode);
+    }
+    handleScroll(visitedNode);
+  });
   return [node, idNodeMap];
 }
 

From 9bf1ced6561c3c8c68b838d419bdeb9f5ce1f0b5 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 6 Aug 2020 21:44:05 +0800
Subject: [PATCH 234/524] add visit function for snapshot

---
 src/index.ts    |  7 ++++++-
 src/snapshot.ts | 17 +++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/index.ts b/src/index.ts
index 7c059f3763..1d5c89eae7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,8 @@
-import snapshot, { serializeNodeWithId, transformAttribute } from './snapshot';
+import snapshot, {
+  serializeNodeWithId,
+  transformAttribute,
+  visit,
+} from './snapshot';
 import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
 export * from './types';
 
@@ -9,4 +13,5 @@ export {
   buildNodeWithSN,
   addHoverClass,
   transformAttribute,
+  visit,
 };
diff --git a/src/snapshot.ts b/src/snapshot.ts
index f2300cf392..10a6d8573a 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -425,4 +425,21 @@ function snapshot(
   ];
 }
 
+export function visit(
+  node: serializedNodeWithId,
+  onVisit: (node: serializedNodeWithId) => unknown,
+) {
+  function walk(current: serializedNodeWithId) {
+    onVisit(current);
+    if (
+      current.type === NodeType.Document ||
+      current.type === NodeType.Element
+    ) {
+      current.childNodes.forEach(walk);
+    }
+  }
+
+  walk(node);
+}
+
 export default snapshot;

From 3c406bd49f340157b6248e9aaa199f2edc961962 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 22 Aug 2020 15:42:55 +0800
Subject: [PATCH 235/524] rename visit to visitSnapshot

---
 src/index.ts          | 4 ++--
 src/snapshot.ts       | 2 +-
 typings/index.d.ts    | 4 ++--
 typings/rebuild.d.ts  | 2 +-
 typings/snapshot.d.ts | 1 +
 5 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 1d5c89eae7..0688bb24cf 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,7 @@
 import snapshot, {
   serializeNodeWithId,
   transformAttribute,
-  visit,
+  visitSnapshot,
 } from './snapshot';
 import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
 export * from './types';
@@ -13,5 +13,5 @@ export {
   buildNodeWithSN,
   addHoverClass,
   transformAttribute,
-  visit,
+  visitSnapshot,
 };
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 10a6d8573a..6d3215755e 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -425,7 +425,7 @@ function snapshot(
   ];
 }
 
-export function visit(
+export function visitSnapshot(
   node: serializedNodeWithId,
   onVisit: (node: serializedNodeWithId) => unknown,
 ) {
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 81e7b27712..b871ef01d8 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,4 +1,4 @@
-import snapshot, { serializeNodeWithId, transformAttribute } from './snapshot';
+import snapshot, { serializeNodeWithId, transformAttribute, visitSnapshot } from './snapshot';
 import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
 export * from './types';
-export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, transformAttribute, };
+export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, transformAttribute, visitSnapshot, };
diff --git a/typings/rebuild.d.ts b/typings/rebuild.d.ts
index 5ea522d8e3..f61a762a69 100644
--- a/typings/rebuild.d.ts
+++ b/typings/rebuild.d.ts
@@ -1,5 +1,5 @@
 import { serializedNodeWithId, idNodeMap, INode } from './types';
 export declare function addHoverClass(cssText: string): string;
 export declare function buildNodeWithSN(n: serializedNodeWithId, doc: Document, map: idNodeMap, skipChild?: boolean, HACK_CSS?: boolean): INode | null;
-declare function rebuild(n: serializedNodeWithId, doc: Document, HACK_CSS?: boolean): [Node | null, idNodeMap];
+declare function rebuild(n: serializedNodeWithId, doc: Document, onVisit?: (node: INode) => unknown, HACK_CSS?: boolean): [Node | null, idNodeMap];
 export default rebuild;
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index 3b6ed5d727..2c03a806bf 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -4,4 +4,5 @@ export declare function absoluteToDoc(doc: Document, attributeValue: string): st
 export declare function transformAttribute(doc: Document, name: string, value: string): string;
 export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean, maskInputOptions?: MaskInputOptions): serializedNodeWithId | null;
 declare function snapshot(n: Document, blockClass: string | RegExp | undefined, inlineStylesheet: boolean | undefined, maskAllInputsOrOptions: boolean | MaskInputOptions): [serializedNodeWithId | null, idNodeMap];
+export declare function visitSnapshot(node: serializedNodeWithId, onVisit: (node: serializedNodeWithId) => unknown): void;
 export default snapshot;

From 94ea611790eefe3b2e7a3631183cf8df2d811a66 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 22 Aug 2020 15:49:55 +0800
Subject: [PATCH 236/524] add an option to enable/disable take canvas snapshot

---
 src/snapshot.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 6d3215755e..fec9813dd3 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -167,6 +167,7 @@ function serializeNode(
   blockClass: string | RegExp,
   inlineStylesheet: boolean,
   maskInputOptions: MaskInputOptions = {},
+  recordCanvas: boolean,
 ): serializedNode | false {
   switch (n.nodeType) {
     case n.DOCUMENT_NODE:
@@ -260,7 +261,7 @@ function serializeNode(
         }
       }
       // canvas image data
-      if (tagName === 'canvas') {
+      if (tagName === 'canvas' && recordCanvas) {
         attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL();
       }
       // media elements
@@ -330,6 +331,7 @@ export function serializeNodeWithId(
   skipChild = false,
   inlineStylesheet = true,
   maskInputOptions?: MaskInputOptions,
+  recordCanvas?: boolean,
 ): serializedNodeWithId | null {
   const _serializedNode = serializeNode(
     n,
@@ -337,6 +339,7 @@ export function serializeNodeWithId(
     blockClass,
     inlineStylesheet,
     maskInputOptions,
+    recordCanvas || false,
   );
   if (!_serializedNode) {
     // TODO: dev only
@@ -373,6 +376,7 @@ export function serializeNodeWithId(
         skipChild,
         inlineStylesheet,
         maskInputOptions,
+        recordCanvas,
       );
       if (serializedChildNode) {
         serializedNode.childNodes.push(serializedChildNode);
@@ -387,6 +391,7 @@ function snapshot(
   blockClass: string | RegExp = 'rr-block',
   inlineStylesheet = true,
   maskAllInputsOrOptions: boolean | MaskInputOptions,
+  recordCanvas?: boolean,
 ): [serializedNodeWithId | null, idNodeMap] {
   const idNodeMap: idNodeMap = {};
   const maskInputOptions: MaskInputOptions =
@@ -420,6 +425,7 @@ function snapshot(
       false,
       inlineStylesheet,
       maskInputOptions,
+      recordCanvas,
     ),
     idNodeMap,
   ];

From 9d58205bf8b9790ba499952f539f6f226507746b Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 22 Aug 2020 15:50:28 +0800
Subject: [PATCH 237/524] Release 0.8.1

---
 package.json          | 2 +-
 typings/snapshot.d.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index e3308648d2..a5cad846f6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index 2c03a806bf..46982a6464 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -2,7 +2,7 @@ import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions } from './type
 export declare function absoluteToStylesheet(cssText: string | null, href: string): string;
 export declare function absoluteToDoc(doc: Document, attributeValue: string): string;
 export declare function transformAttribute(doc: Document, name: string, value: string): string;
-export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean, maskInputOptions?: MaskInputOptions): serializedNodeWithId | null;
-declare function snapshot(n: Document, blockClass: string | RegExp | undefined, inlineStylesheet: boolean | undefined, maskAllInputsOrOptions: boolean | MaskInputOptions): [serializedNodeWithId | null, idNodeMap];
+export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean, maskInputOptions?: MaskInputOptions, recordCanvas?: boolean): serializedNodeWithId | null;
+declare function snapshot(n: Document, blockClass: string | RegExp | undefined, inlineStylesheet: boolean | undefined, maskAllInputsOrOptions: boolean | MaskInputOptions, recordCanvas?: boolean): [serializedNodeWithId | null, idNodeMap];
 export declare function visitSnapshot(node: serializedNodeWithId, onVisit: (node: serializedNodeWithId) => unknown): void;
 export default snapshot;

From 8565b0d692bb3a19bf97a5f8a6c633bffcbc2db4 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 6 Sep 2020 16:59:03 +0800
Subject: [PATCH 238/524] close #42 fallback to html when doctype is invalid

---
 src/rebuild.ts                         | 2 +-
 test/__snapshots__/integration.ts.snap | 9 +++++++++
 test/html/invalid-doctype.html         | 9 +++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 test/html/invalid-doctype.html

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 23025797cf..f2a8291d16 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -85,7 +85,7 @@ function buildNode(
       return doc.implementation.createDocument(null, '', null);
     case NodeType.DocumentType:
       return doc.implementation.createDocumentType(
-        n.name,
+        n.name || 'html',
         n.publicId,
         n.systemId,
       );
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 7bf95acfbe..855d73eb5b 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -175,6 +175,15 @@ exports[`[html file]: invalid-attribute.html 1`] = `
 </body></html>"
 `;
 
+exports[`[html file]: invalid-doctype.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+    <meta charset=\\"UTF-8\\" />
+    <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+    <title>Invalid Doctype</title>
+  </head>
+  <body></body></html>"
+`;
+
 exports[`[html file]: invalid-tagname.html 1`] = `
 "<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
diff --git a/test/html/invalid-doctype.html b/test/html/invalid-doctype.html
new file mode 100644
index 0000000000..395c916d70
--- /dev/null
+++ b/test/html/invalid-doctype.html
@@ -0,0 +1,9 @@
+<!DOCTYPE >
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Invalid Doctype</title>
+  </head>
+  <body></body>
+</html>

From fd285ed2c4d01bacf587c7c8f7bd1d95be4b6b4f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 6 Sep 2020 19:15:44 +0800
Subject: [PATCH 239/524] Release 0.8.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a5cad846f6..eee822bd4a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 1f16bd750f6fbfdcb928b56974ba43f6332e2437 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 7 Sep 2020 22:07:17 +0800
Subject: [PATCH 240/524] upgrade to rrweb 0.9.2

---
 package.json       |  2 +-
 public/index.html  |  5 ++++-
 src/Player.svelte  |  8 ++++++--
 typings/index.d.ts |  6 ++++--
 yarn.lock          | 30 +++++++++---------------------
 5 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index 1f072264d4..c398c1b300 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "typescript": "^3.9.7"
   },
   "dependencies": {
-    "rrweb": "^0.9.0"
+    "rrweb": "^0.9.2"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/public/index.html b/public/index.html
index 6cedf6c4fa..032a906894 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,7 +23,10 @@
         skipInactive: true,
         showDebug: false,
         showWarning: false,
-        autoPlay: false,
+        autoPlay: true,
+        mouseTail: {
+          strokeStyle: 'yellow',
+        },
       },
     });
     window.$c = component;
diff --git a/src/Player.svelte b/src/Player.svelte
index 9067c7e217..70bca1edfc 100644
--- a/src/Player.svelte
+++ b/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/typings/types';
+  import { Replayer, unpack, mirror } from 'rrweb';
+  import type { eventWithTime, playerConfig } from 'rrweb/typings/types';
   import {
     inlineCss,
     openFullscreen,
@@ -23,6 +23,9 @@
   export let showWarning: boolean = true;
   export let showDebug: boolean = true;
   export let tags: Record<string, string> = {};
+  export let mouseTail: playerConfig['mouseTail'] = true;
+
+  export const getMirror = () => mirror;
 
   const controllerHeight = 80;
   let speed = 1;
@@ -127,6 +130,7 @@
       showDebug,
       triggerFocus,
       unpackFn: unpack,
+      mouseTail,
     });
 
     replayer.on('resize', (dimension) => {
diff --git a/typings/index.d.ts b/typings/index.d.ts
index ca0c7bdcac..67625dc5f7 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,5 +1,5 @@
-import { eventWithTime } from 'rrweb/typings/types';
-import { Replayer } from 'rrweb';
+import { eventWithTime, playerConfig } from 'rrweb/typings/types';
+import { Replayer, mirror } from 'rrweb';
 
 export default class rrwebPlayer {
   constructor(options: {
@@ -15,6 +15,7 @@ export default class rrwebPlayer {
       showWarning?: boolean;
       showDebug?: boolean;
       tags?: Record<string, string>;
+      mouseTail?: playerConfig['mouseTail'];
     };
   });
 
@@ -23,6 +24,7 @@ export default class rrwebPlayer {
   addEvent(event: eventWithTime): void;
   getMetaData: Replayer['getMetaData'];
   getReplayer: () => Replayer;
+  getMirror: () => typeof mirror;
 
   toggle: () => void;
   setSpeed: (speed: number) => void;
diff --git a/yarn.lock b/yarn.lock
index 43d7e6c6f7..e09373f55a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -133,11 +133,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/smoothscroll-polyfill@^0.3.0":
-  version "0.3.1"
-  resolved "https://registry.npmjs.org/@types/smoothscroll-polyfill/-/smoothscroll-polyfill-0.3.1.tgz#77fb3a6e116bdab4a5959122e3b8e201224dcd49"
-  integrity sha512-+KkHw4y+EyeCtVXET7woHUhIbfWFCflc0E0mZnSV+ZdjPQeHt/9KPEuT7gSW/kFQ8O3EG30PLO++YhChDt8+Ag==
-
 "@typescript-eslint/eslint-plugin@^3.7.0":
   version "3.7.0"
   resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.7.0.tgz#0f91aa3c83d019591719e597fbdb73a59595a263"
@@ -1222,22 +1217,20 @@ rollup@^1.20.0:
     "@types/node" "*"
     acorn "^7.1.0"
 
-rrweb-snapshot@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.npmjs.org/rrweb-snapshot/-/rrweb-snapshot-0.8.0.tgz#43f119407cb7ec0fdbb30056d6149b1a2c76b79b"
-  integrity sha512-rPQmgragMixTOGQNtMDI31XzpbtaXt2aIB98LNqkeOjaCeo46+B1rxAMLsT3FDFFgmq8vo/cS101H6wiiyuwew==
+rrweb-snapshot@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-0.8.2.tgz#1e87c0369e37c8af484de5a82301a9b09883081c"
+  integrity sha512-KwD5NJeiPMgA+qRPf/0YIk0dKevOpj/2redYX+9Ker6FpyUlUBKaopEc9M3VbFnUqwgU9v109c9220PwhKEQcQ==
 
-rrweb@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-0.9.0.tgz#94e5370b931fcbad61280845a540f39a3e8eb13a"
-  integrity sha512-sfLu1Wu7rE85mZu0kSvdVoM3VwDNo1SPqnz7wl96sIC0RchcthxifhMLrldmI9/btdGCi8jJrpcEnuW09vpdWw==
+rrweb@^0.9.2:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-0.9.2.tgz#cc2a5b8072fcd652a039d3602759479624b4b026"
+  integrity sha512-4Yy4LEKHM4bFn8DlBn1hM9mjxlfyv7iMdO7VAJixCgg+Jy+RiE2dY7fDqU6LHyjMFTwF7G11knGHg0Dz2AOhkA==
   dependencies:
-    "@types/smoothscroll-polyfill" "^0.3.0"
     "@xstate/fsm" "^1.4.0"
     mitt "^1.1.3"
     pako "^1.0.11"
-    rrweb-snapshot "^0.8.0"
-    smoothscroll-polyfill "^0.4.3"
+    rrweb-snapshot "^0.8.2"
 
 sade@^1.4.0:
   version "1.7.3"
@@ -1298,11 +1291,6 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
-smoothscroll-polyfill@^0.4.3:
-  version "0.4.4"
-  resolved "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz#3a259131dc6930e6ca80003e1cb03b603b69abf8"
-  integrity sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==
-
 source-map-support@~0.5.12:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"

From 4c0cbfaf6a891374d7ffe0e259331e598ed5f1d9 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 7 Sep 2020 22:07:37 +0800
Subject: [PATCH 241/524] Release 0.5.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c398c1b300..cbe980f3d2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From 5a1d8b30b0373ce32d4e5904c52538ce67879d68 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 8 Sep 2020 15:09:06 +0800
Subject: [PATCH 242/524] impl apis: play, pause, goto

---
 src/Controller.svelte | 46 ++++++++++++++++++++++++++++++-------------
 src/Player.svelte     |  9 +++++++++
 typings/index.d.ts    |  3 +++
 3 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/src/Controller.svelte b/src/Controller.svelte
index 84cb68457f..4644ccfba2 100644
--- a/src/Controller.svelte
+++ b/src/Controller.svelte
@@ -112,21 +112,45 @@
   export const toggle = () => {
     switch (playerState) {
       case 'playing':
-        replayer.pause();
+        pause();
         break;
       case 'paused':
-        if (finished) {
-          replayer.play();
-          finished = false;
-        } else {
-          replayer.play(currentTime);
-        }
+        play();
         break;
       default:
         break;
     }
   };
 
+  export const play = () => {
+    if (playerState !== 'paused') {
+      return;
+    }
+    if (finished) {
+      replayer.play();
+      finished = false;
+    } else {
+      replayer.play(currentTime);
+    }
+  };
+
+  export const pause = () => {
+    if (playerState !== 'playing') {
+      return;
+    }
+    replayer.pause();
+  };
+
+  export const goto = (timeOffset: number) => {
+    currentTime = timeOffset;
+    const isPlaying = playerState === 'playing';
+    replayer.pause();
+    replayer.play(timeOffset);
+    if (!isPlaying) {
+      replayer.pause();
+    }
+  };
+
   const handleProgressClick = (event: MouseEvent) => {
     if (speedState === 'skipping') {
       return;
@@ -140,13 +164,7 @@
       percent = 1;
     }
     const timeOffset = meta.totalTime * percent;
-    currentTime = timeOffset;
-    const isPlaying = playerState === 'playing';
-    replayer.pause();
-    replayer.play(timeOffset);
-    if (!isPlaying) {
-      replayer.pause();
-    }
+    goto(timeOffset);
   };
 
   export const setSpeed = (newSpeed: number) => {
diff --git a/src/Player.svelte b/src/Player.svelte
index 70bca1edfc..9b0b793b3f 100644
--- a/src/Player.svelte
+++ b/src/Player.svelte
@@ -99,6 +99,15 @@
   export const toggleSkipInactive = () => {
     controller.toggleSkipInactive();
   };
+  export const play = () => {
+    controller.play();
+  };
+  export const pause = () => {
+    controller.pause();
+  };
+  export const goto = (timeOffset: number) => {
+    controller.goto(timeOffset);
+  };
 
   onMount(() => {
     // runtime type check
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 67625dc5f7..4e83e38b4e 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -29,4 +29,7 @@ export default class rrwebPlayer {
   toggle: () => void;
   setSpeed: (speed: number) => void;
   toggleSkipInactive: () => void;
+  play: () => void;
+  pause: () => void;
+  goto: (timeOffset: number) => void;
 }

From 29ff1e9cedc34dfcdd4083a0ec81ebee6b7ff055 Mon Sep 17 00:00:00 2001
From: DiaNiki <45599286+DiaNiki@users.noreply.github.com>
Date: Wed, 9 Sep 2020 18:43:33 -0600
Subject: [PATCH 243/524] Add UNSAFE_replayCanvas. (#36)

---
 src/Player.svelte  | 2 ++
 typings/index.d.ts | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/Player.svelte b/src/Player.svelte
index 9b0b793b3f..5c84064e11 100644
--- a/src/Player.svelte
+++ b/src/Player.svelte
@@ -24,6 +24,7 @@
   export let showDebug: boolean = true;
   export let tags: Record<string, string> = {};
   export let mouseTail: playerConfig['mouseTail'] = true;
+  export let UNSAFE_replayCanvas: boolean = false;
 
   export const getMirror = () => mirror;
 
@@ -140,6 +141,7 @@
       triggerFocus,
       unpackFn: unpack,
       mouseTail,
+      UNSAFE_replayCanvas,
     });
 
     replayer.on('resize', (dimension) => {
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 4e83e38b4e..40d1946053 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -16,6 +16,7 @@ export default class rrwebPlayer {
       showDebug?: boolean;
       tags?: Record<string, string>;
       mouseTail?: playerConfig['mouseTail'];
+      UNSAFE_replayCanvas?: boolean;
     };
   });
 

From 22e6b67903f5868fddde81d4c5b0dc0bb01b3863 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 12 Sep 2020 17:40:27 +0800
Subject: [PATCH 244/524] close #33 upgrade rrweb

---
 package.json          | 2 +-
 src/Controller.svelte | 2 +-
 typings/index.d.ts    | 3 ++-
 yarn.lock             | 8 ++++----
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index cbe980f3d2..bce6d7f675 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "typescript": "^3.9.7"
   },
   "dependencies": {
-    "rrweb": "^0.9.2"
+    "rrweb": "^0.9.3"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/src/Controller.svelte b/src/Controller.svelte
index 4644ccfba2..38292dfca9 100644
--- a/src/Controller.svelte
+++ b/src/Controller.svelte
@@ -92,7 +92,7 @@
     stopTimer();
 
     function update() {
-      currentTime = replayer.timer.timeOffset + replayer.getTimeOffset();
+      currentTime = replayer.getCurrentTime();
 
       if (currentTime < meta.totalTime) {
         timer = requestAnimationFrame(update);
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 40d1946053..f844d4ae82 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,7 +1,8 @@
 import { eventWithTime, playerConfig } from 'rrweb/typings/types';
 import { Replayer, mirror } from 'rrweb';
+import { SvelteComponent } from 'svelte';
 
-export default class rrwebPlayer {
+export default class rrwebPlayer extends SvelteComponent {
   constructor(options: {
     target: HTMLElement;
     props: {
diff --git a/yarn.lock b/yarn.lock
index e09373f55a..cfaa9c34f4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1222,10 +1222,10 @@ rrweb-snapshot@^0.8.2:
   resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-0.8.2.tgz#1e87c0369e37c8af484de5a82301a9b09883081c"
   integrity sha512-KwD5NJeiPMgA+qRPf/0YIk0dKevOpj/2redYX+9Ker6FpyUlUBKaopEc9M3VbFnUqwgU9v109c9220PwhKEQcQ==
 
-rrweb@^0.9.2:
-  version "0.9.2"
-  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-0.9.2.tgz#cc2a5b8072fcd652a039d3602759479624b4b026"
-  integrity sha512-4Yy4LEKHM4bFn8DlBn1hM9mjxlfyv7iMdO7VAJixCgg+Jy+RiE2dY7fDqU6LHyjMFTwF7G11knGHg0Dz2AOhkA==
+rrweb@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-0.9.3.tgz#f783ab10e4201143c3381e0efb6f59fec0988608"
+  integrity sha512-rno2FgBFxhHAGZD+7mE6aYlIzvChys4kjQj0bD7yeEQL+BoPtNYKufDYV8w3ZjtyC1LPUDZy092fxlrQsXVFpQ==
   dependencies:
     "@xstate/fsm" "^1.4.0"
     mitt "^1.1.3"

From e1b02d1b679bf4c0661044553827dd065c422e25 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 12 Sep 2020 17:41:26 +0800
Subject: [PATCH 245/524] Release 0.5.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bce6d7f675..30819073f5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From 6728d12b3cddd96951c86d948578f99ada5749ff Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Sun, 20 Sep 2020 06:00:44 +0100
Subject: [PATCH 246/524] Add a `slimDOM` option to strip out unnecessary parts
 of the DOM (#36)

* Add a `slimDOM` option to strip out unnecessary parts of the DOM in terms of replay

 - <script> tags in the <head> take up unnecessary storage space and are often injected semi randomly to become a source of unnecessary variation between recordings of the same thing
 - comment tags can be stripped out without affecting display
 - future: this option could also turn on more aggressive stripping, e.g. elements that are hidden by CSS (assuming we can handle them becoming visible after mutation events)

* Mark nodes ignored due to slimDOM option, so that they can also be ignored by the mutation observer in rrweb

* Introducing the `ignored` attribute violates the `serializedNodeWithId` type

* slimDOM: Strip out whitespace nodes from <head> element as they have no effect but take up space

 - these would otherwise have to be merged after <script> elements are removed; for statcounter usecase, removing
   <script> elements is no good if there is still a trace of their presence due to the white space (and hence a variant <head> node is still produced)
 - I explored a more radical stripping of all white space nodes, but there is a problem if parent node is <pre> or otherwise rendered with `white-space: pre` and similar.
   detecting applied styles with getComputedStyle would be very expensive (I haven't measured it though)

* Export IGNORED_NODE as a constant instead of relying on the hard-to-grok `-2`

* Remove <link rel=preload as=script> which are similarly as useless as <script> tags

* Make slimDOM configurable with the expecations that `slimDOMOptions: true` will only enable non-destructive options (so not all options may be turned on)

* Expand slimDOM to add options to remove more elements from the <head> that should not be necessary in the replayer context
---
 src/index.ts    |   2 +
 src/snapshot.ts | 124 ++++++++++++++++++++++++++++++++++++++++++++++++
 src/types.ts    |  13 +++++
 3 files changed, 139 insertions(+)

diff --git a/src/index.ts b/src/index.ts
index 0688bb24cf..77ca837772 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,6 +2,7 @@ import snapshot, {
   serializeNodeWithId,
   transformAttribute,
   visitSnapshot,
+  IGNORED_NODE,
 } from './snapshot';
 import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
 export * from './types';
@@ -14,4 +15,5 @@ export {
   addHoverClass,
   transformAttribute,
   visitSnapshot,
+  IGNORED_NODE,
 };
diff --git a/src/snapshot.ts b/src/snapshot.ts
index fec9813dd3..17150d0ad1 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -6,11 +6,14 @@ import {
   INode,
   idNodeMap,
   MaskInputOptions,
+  SlimDOMOptions,
 } from './types';
 
 let _id = 1;
 const tagNameRegex = RegExp('[^a-z1-6-_]');
 
+export const IGNORED_NODE = -2;
+
 function genId(): number {
   return _id++;
 }
@@ -323,6 +326,83 @@ function serializeNode(
   }
 }
 
+function lowerIfExists(maybeAttr : string | number | boolean) : string {
+  if (maybeAttr === undefined) {
+    return '';
+  } else {
+    return (maybeAttr as string).toLowerCase();
+  }
+}
+
+function slimDOMExcluded(sn: serializedNode, slimDOMOptions: SlimDOMOptions): boolean {
+  if (slimDOMOptions.comment && sn.type === NodeType.Comment) {
+    // TODO: convert IE conditional comments to real nodes
+    return true;
+  } else if (sn.type === NodeType.Element) {
+    if (slimDOMOptions.script &&
+        (sn.tagName === 'script' ||
+         (sn.tagName === 'link' && sn.attributes.rel === 'preload' && sn.attributes['as'] === 'script')
+        )) {
+      return true;
+    } else if (slimDOMOptions.headFavicon && (
+      (sn.tagName === 'link' && sn.attributes.rel === 'shortcut icon')
+        || (sn.tagName === 'meta' && (
+          lowerIfExists(sn.attributes['name']).match(/^msapplication-tile(image|color)$/)
+            || lowerIfExists(sn.attributes['name']) === 'application-name'
+            || lowerIfExists(sn.attributes['rel']) === 'icon'
+            || lowerIfExists(sn.attributes['rel']) === 'apple-touch-icon'
+            || lowerIfExists(sn.attributes['rel']) === 'shortcut icon'
+        )))) {
+      return true;
+    } else if (sn.tagName === 'meta') {
+      if (slimDOMOptions.headMetaDescKeywords && (
+        lowerIfExists(sn.attributes['name']).match(/^description|keywords$/)
+      )) {
+        return true;
+      } else if (slimDOMOptions.headMetaSocial && (
+        lowerIfExists(sn.attributes['property']).match(/^(og|twitter|fb):/)  // og = opengraph (facebook)
+          || lowerIfExists(sn.attributes['name']).match(/^(og|twitter):/)
+          || lowerIfExists(sn.attributes['name']) === 'pinterest'
+      )) {
+        return true;
+      } else if (slimDOMOptions.headMetaRobots && (
+        lowerIfExists(sn.attributes['name']) === 'robots'
+          || lowerIfExists(sn.attributes['name']) === 'googlebot'
+          || lowerIfExists(sn.attributes['name']) === 'bingbot'
+      )) {
+        return true;
+      } else if (slimDOMOptions.headMetaHttpEquiv && (
+        sn.attributes['http-equiv'] !== undefined
+      )) {
+        // e.g. X-UA-Compatible, Content-Type, Content-Language,
+        // cache-control, X-Translated-By
+        return true;
+      } else if (slimDOMOptions.headMetaAuthorship && (
+        lowerIfExists(sn.attributes['name']) === 'author'
+          || lowerIfExists(sn.attributes['name']) === 'generator'
+          || lowerIfExists(sn.attributes['name']) === 'framework'
+          || lowerIfExists(sn.attributes['name']) === 'publisher'
+          || lowerIfExists(sn.attributes['name']) === 'progid'
+          || lowerIfExists(sn.attributes['property']).match(/^article:/)
+          || lowerIfExists(sn.attributes['property']).match(/^product:/)
+      )) {
+        return true;
+      } else if (slimDOMOptions.headMetaVerification && (
+        lowerIfExists(sn.attributes['name']) === 'google-site-verification'
+          || lowerIfExists(sn.attributes['name']) === 'yandex-verification'
+          || lowerIfExists(sn.attributes['name']) === 'csrf-token'
+          || lowerIfExists(sn.attributes['name']) === 'p:domain_verify'
+          || lowerIfExists(sn.attributes['name']) === 'verify-v1'
+          || lowerIfExists(sn.attributes['name']) === 'verification'
+          || lowerIfExists(sn.attributes['name']) === 'shopify-checkout-api-token'
+      )) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
 export function serializeNodeWithId(
   n: Node | INode,
   doc: Document,
@@ -331,7 +411,9 @@ export function serializeNodeWithId(
   skipChild = false,
   inlineStylesheet = true,
   maskInputOptions?: MaskInputOptions,
+  slimDOMOptions: SlimDOMOptions = {},
   recordCanvas?: boolean,
+  preserveWhiteSpace = true,
 ): serializedNodeWithId | null {
   const _serializedNode = serializeNode(
     n,
@@ -346,15 +428,26 @@ export function serializeNodeWithId(
     console.warn(n, 'not serialized');
     return null;
   }
+
   let id;
   // Try to reuse the previous id
   if ('__sn' in n) {
     id = n.__sn.id;
+  } else if (slimDOMExcluded(_serializedNode, slimDOMOptions) ||
+             (!preserveWhiteSpace &&
+              _serializedNode.type === NodeType.Text &&
+              !_serializedNode.isStyle &&
+              !_serializedNode.textContent.replace(/^\s+|\s+$/gm,'').length
+             )) {
+    id = IGNORED_NODE;
   } else {
     id = genId();
   }
   const serializedNode = Object.assign(_serializedNode, { id });
   (n as INode).__sn = serializedNode;
+  if (id === IGNORED_NODE) {
+    return null;  // slimDOM
+  }
   map[id] = n as INode;
   let recordChild = !skipChild;
   if (serializedNode.type === NodeType.Element) {
@@ -367,6 +460,14 @@ export function serializeNodeWithId(
       serializedNode.type === NodeType.Element) &&
     recordChild
   ) {
+    if (
+      (slimDOMOptions.headWhitespace &&
+       _serializedNode.type === NodeType.Element &&
+       _serializedNode.tagName == 'head')
+      // would impede performance: || getComputedStyle(n)['white-space'] === 'normal'
+    ) {
+      preserveWhiteSpace = false;
+    }
     for (const childN of Array.from(n.childNodes)) {
       const serializedChildNode = serializeNodeWithId(
         childN,
@@ -376,7 +477,9 @@ export function serializeNodeWithId(
         skipChild,
         inlineStylesheet,
         maskInputOptions,
+        slimDOMOptions,
         recordCanvas,
+        preserveWhiteSpace,
       );
       if (serializedChildNode) {
         serializedNode.childNodes.push(serializedChildNode);
@@ -391,6 +494,7 @@ function snapshot(
   blockClass: string | RegExp = 'rr-block',
   inlineStylesheet = true,
   maskAllInputsOrOptions: boolean | MaskInputOptions,
+  slimDOMSensibleOrOptions: boolean | SlimDOMOptions,
   recordCanvas?: boolean,
 ): [serializedNodeWithId | null, idNodeMap] {
   const idNodeMap: idNodeMap = {};
@@ -416,6 +520,25 @@ function snapshot(
       : maskAllInputsOrOptions === false
       ? {}
       : maskAllInputsOrOptions;
+  const slimDOMOptions: SlimDOMOptions =
+    (slimDOMSensibleOrOptions === true ||
+     slimDOMSensibleOrOptions === 'all')
+  // if true: set of sensible options that should not throw away any information
+    ? {
+      script: true,
+      comment: true,
+      headFavicon: true,
+      headWhitespace: true,
+      headMetaDescKeywords: slimDOMSensibleOrOptions === 'all',  // destructive
+      headMetaSocial: true,
+      headMetaRobots: true,
+      headMetaHttpEquiv: true,
+      headMetaAuthorship: true,
+      headMetaVerification: true,
+    }
+  : slimDOMSensibleOrOptions === false
+    ? {}
+  : slimDOMSensibleOrOptions;
   return [
     serializeNodeWithId(
       n,
@@ -425,6 +548,7 @@ function snapshot(
       false,
       inlineStylesheet,
       maskInputOptions,
+      slimDOMOptions,
       recordCanvas,
     ),
     idNodeMap,
diff --git a/src/types.ts b/src/types.ts
index d8546e8418..9a53c0126f 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -87,3 +87,16 @@ export type MaskInputOptions = Partial<{
   textarea: boolean;
   select: boolean;
 }>;
+
+export type SlimDOMOptions = Partial<{
+  script: boolean;
+  comment: boolean;
+  headFavicon: boolean;
+  headWhitespace: boolean;
+  headMetaDescKeywords: boolean;
+  headMetaSocial: boolean;
+  headMetaRobots: boolean;
+  headMetaHttpEquiv: boolean;
+  headMetaAuthorship: boolean;
+  headMetaVerification: boolean;
+}>;

From e63b554b49c20156f915acaa5723e451b172580e Mon Sep 17 00:00:00 2001
From: jackycoder <jokee.wu@gmail.com>
Date: Sun, 20 Sep 2020 18:59:44 +0800
Subject: [PATCH 247/524] fix iframe border issue (#41)

---
 src/Player.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Player.svelte b/src/Player.svelte
index 5c84064e11..9da04ed605 100644
--- a/src/Player.svelte
+++ b/src/Player.svelte
@@ -194,7 +194,7 @@
     overflow: hidden;
   }
 
-  :global(.replayer-wrapper) {
+  .replayer-wrapper {
     float: left;
     clear: both;
     transform-origin: top left;
@@ -202,7 +202,7 @@
     top: 50%;
   }
 
-  :global(.replayer-wrapper > iframe) {
+  .replayer-wrapper > iframe {
     border: none;
   }
 </style>

From 4d45d16cb81abfe35f8669c7998887ed79d703e0 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 23 Sep 2020 16:05:07 +0800
Subject: [PATCH 248/524] update rrweb version

---
 package.json       |  2 +-
 src/Player.svelte  |  2 ++
 typings/index.d.ts |  1 +
 yarn.lock          | 14 ++++++++++----
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 30819073f5..9ae56b55ad 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "typescript": "^3.9.7"
   },
   "dependencies": {
-    "rrweb": "^0.9.3"
+    "rrweb": "^0.9.6"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/src/Player.svelte b/src/Player.svelte
index 9da04ed605..aae2e59ce7 100644
--- a/src/Player.svelte
+++ b/src/Player.svelte
@@ -25,6 +25,7 @@
   export let tags: Record<string, string> = {};
   export let mouseTail: playerConfig['mouseTail'] = true;
   export let UNSAFE_replayCanvas: boolean = false;
+  export let insertStyleRules: string[] = [];
 
   export const getMirror = () => mirror;
 
@@ -142,6 +143,7 @@
       unpackFn: unpack,
       mouseTail,
       UNSAFE_replayCanvas,
+      insertStyleRules,
     });
 
     replayer.on('resize', (dimension) => {
diff --git a/typings/index.d.ts b/typings/index.d.ts
index f844d4ae82..003c728808 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -18,6 +18,7 @@ export default class rrwebPlayer extends SvelteComponent {
       tags?: Record<string, string>;
       mouseTail?: playerConfig['mouseTail'];
       UNSAFE_replayCanvas?: boolean;
+      insertStyleRules?: string[];
     };
   });
 
diff --git a/yarn.lock b/yarn.lock
index cfaa9c34f4..6c873869d0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -84,6 +84,11 @@
   resolved "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
+"@types/css-font-loading-module@0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@types/css-font-loading-module/-/css-font-loading-module-0.0.4.tgz#94a835e27d1af444c65cba88523533c174463d64"
+  integrity sha512-ENdXf7MW4m9HeDojB2Ukbi7lYMIuQNBHVf98dbzaiG4EEJREBd6oleVAjrLRCrp7dm6CK1mmdmU9tcgF61acbw==
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -1222,11 +1227,12 @@ rrweb-snapshot@^0.8.2:
   resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-0.8.2.tgz#1e87c0369e37c8af484de5a82301a9b09883081c"
   integrity sha512-KwD5NJeiPMgA+qRPf/0YIk0dKevOpj/2redYX+9Ker6FpyUlUBKaopEc9M3VbFnUqwgU9v109c9220PwhKEQcQ==
 
-rrweb@^0.9.3:
-  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-0.9.3.tgz#f783ab10e4201143c3381e0efb6f59fec0988608"
-  integrity sha512-rno2FgBFxhHAGZD+7mE6aYlIzvChys4kjQj0bD7yeEQL+BoPtNYKufDYV8w3ZjtyC1LPUDZy092fxlrQsXVFpQ==
+rrweb@^0.9.6:
+  version "0.9.6"
+  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-0.9.6.tgz#115bb2c2b1a15c18d69d3878f362a7dbc74fd4b5"
+  integrity sha512-yzudVRhp5tjaFh9/M9UBikgqzQ5app8SJ2ITeqGJ5MmQ84hsTR0S9XFrLwdTA/sxnU7i7dbepT8T3846t0U1pg==
   dependencies:
+    "@types/css-font-loading-module" "0.0.4"
     "@xstate/fsm" "^1.4.0"
     mitt "^1.1.3"
     pako "^1.0.11"

From 183daf34b0009e1e78d68cf83619fbc90f28f0b2 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 23 Sep 2020 16:08:23 +0800
Subject: [PATCH 249/524] Release 0.6.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9ae56b55ad..a06cb1356b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.5.6",
+  "version": "0.6.0",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From 325ca4cc699a380275648341c432db8e8a79265c Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 24 Sep 2020 10:28:35 +0800
Subject: [PATCH 250/524] expose trigger resize method

---
 package.json       | 2 +-
 src/Player.svelte  | 7 +++++++
 typings/index.d.ts | 1 +
 yarn.lock          | 8 ++++----
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index a06cb1356b..dce88b31e5 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "typescript": "^3.9.7"
   },
   "dependencies": {
-    "rrweb": "^0.9.6"
+    "rrweb": "^0.9.7"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/src/Player.svelte b/src/Player.svelte
index aae2e59ce7..b883325461 100644
--- a/src/Player.svelte
+++ b/src/Player.svelte
@@ -64,6 +64,13 @@
       `scale(${Math.min(widthScale, heightScale)})` + 'translate(-50%, -50%)';
   };
 
+  export const triggerResize = () => {
+    updateScale(replayer.wrapper, {
+      width: replayer.iframe.offsetWidth,
+      height: replayer.iframe.offsetHeight,
+    });
+  };
+
   export const toggleFullscreen = () => {
     if (player) {
       isFullscreen() ? exitFullscreen() : openFullscreen(player);
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 003c728808..57c9ec25f6 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -32,6 +32,7 @@ export default class rrwebPlayer extends SvelteComponent {
   toggle: () => void;
   setSpeed: (speed: number) => void;
   toggleSkipInactive: () => void;
+  triggerResize: () => void;
   play: () => void;
   pause: () => void;
   goto: (timeOffset: number) => void;
diff --git a/yarn.lock b/yarn.lock
index 6c873869d0..9e0d96f69e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1227,10 +1227,10 @@ rrweb-snapshot@^0.8.2:
   resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-0.8.2.tgz#1e87c0369e37c8af484de5a82301a9b09883081c"
   integrity sha512-KwD5NJeiPMgA+qRPf/0YIk0dKevOpj/2redYX+9Ker6FpyUlUBKaopEc9M3VbFnUqwgU9v109c9220PwhKEQcQ==
 
-rrweb@^0.9.6:
-  version "0.9.6"
-  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-0.9.6.tgz#115bb2c2b1a15c18d69d3878f362a7dbc74fd4b5"
-  integrity sha512-yzudVRhp5tjaFh9/M9UBikgqzQ5app8SJ2ITeqGJ5MmQ84hsTR0S9XFrLwdTA/sxnU7i7dbepT8T3846t0U1pg==
+rrweb@^0.9.7:
+  version "0.9.7"
+  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-0.9.7.tgz#6632918dc61f2979d86d2b892810678408e7e11f"
+  integrity sha512-n3TEe1OyEtOGFvh4D513dR4jKVBlw//flCaFSwNFBreod/WKNRuqyZ7A2SCbY3XJbQ8JRFTfGa1jGsKvhiqTdQ==
   dependencies:
     "@types/css-font-loading-module" "0.0.4"
     "@xstate/fsm" "^1.4.0"

From 9bdf9692db11a7de50af2b93e52a75584b48ffcd Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 24 Sep 2020 10:28:58 +0800
Subject: [PATCH 251/524] Release 0.6.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index dce88b31e5..b5cb4a649f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From 1277dbd1dfc464f869435b3457d0c8884a65f37b Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 1 Oct 2020 14:17:46 +0800
Subject: [PATCH 252/524] by pass all options to rrweb

---
 src/Player.svelte  | 14 +-------------
 typings/index.d.ts |  8 +-------
 2 files changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/Player.svelte b/src/Player.svelte
index b883325461..0caab9de22 100644
--- a/src/Player.svelte
+++ b/src/Player.svelte
@@ -17,15 +17,9 @@
   export let events: eventWithTime[] = [];
   export let skipInactive: boolean = true;
   export let autoPlay: boolean = true;
-  export let triggerFocus: boolean = true;
   export let speedOption: number[] = [1, 2, 4, 8];
   export let showController: boolean = true;
-  export let showWarning: boolean = true;
-  export let showDebug: boolean = true;
   export let tags: Record<string, string> = {};
-  export let mouseTail: playerConfig['mouseTail'] = true;
-  export let UNSAFE_replayCanvas: boolean = false;
-  export let insertStyleRules: string[] = [];
 
   export const getMirror = () => mirror;
 
@@ -143,14 +137,8 @@
     replayer = new Replayer(events, {
       speed,
       root: frame,
-      skipInactive,
-      showWarning,
-      showDebug,
-      triggerFocus,
       unpackFn: unpack,
-      mouseTail,
-      UNSAFE_replayCanvas,
-      insertStyleRules,
+      ...$$props,
     });
 
     replayer.on('resize', (dimension) => {
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 57c9ec25f6..de8a20d6e5 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -9,17 +9,11 @@ export default class rrwebPlayer extends SvelteComponent {
       events: eventWithTime[];
       width?: number;
       height?: number;
-      skipInactive?: boolean;
       autoPlay?: boolean;
       speedOption?: number[];
       showController?: boolean;
-      showWarning?: boolean;
-      showDebug?: boolean;
       tags?: Record<string, string>;
-      mouseTail?: playerConfig['mouseTail'];
-      UNSAFE_replayCanvas?: boolean;
-      insertStyleRules?: string[];
-    };
+    } & playerConfig;
   });
 
   addEventListener(event: string, handler: (params: any) => unknown): void;

From 459f8249b674595c3a9a27c92f4a2efcc151a6d9 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 1 Oct 2020 15:24:57 +0800
Subject: [PATCH 253/524] export speed as props

---
 src/Player.svelte  | 2 +-
 typings/index.d.ts | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Player.svelte b/src/Player.svelte
index 0caab9de22..e0cc6f16a0 100644
--- a/src/Player.svelte
+++ b/src/Player.svelte
@@ -18,13 +18,13 @@
   export let skipInactive: boolean = true;
   export let autoPlay: boolean = true;
   export let speedOption: number[] = [1, 2, 4, 8];
+  export let speed: number = 1;
   export let showController: boolean = true;
   export let tags: Record<string, string> = {};
 
   export const getMirror = () => mirror;
 
   const controllerHeight = 80;
-  let speed = 1;
   let player: HTMLElement;
   let frame: HTMLElement;
   let replayer: Replayer;
diff --git a/typings/index.d.ts b/typings/index.d.ts
index de8a20d6e5..a518fb2cfb 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -10,6 +10,7 @@ export default class rrwebPlayer extends SvelteComponent {
       width?: number;
       height?: number;
       autoPlay?: boolean;
+      speed?: number;
       speedOption?: number[];
       showController?: boolean;
       tags?: Record<string, string>;

From 4cff4225cf5371ab3c4e777f1b8533ec4f95cded Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 1 Oct 2020 22:04:24 +0800
Subject: [PATCH 254/524] Release 0.6.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b5cb4a649f..57a4cb0738 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From 8b0bc7c5052f7e9a1bb522cc31b5c342cef375e2 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Sun, 4 Oct 2020 13:46:57 +0100
Subject: [PATCH 255/524] Preserve url quotes (#47)

* Preserve original quotes when rewriting CSS url() paths - important for inline SVG files which often have spaces

* Found an example in the wild with the 'charset=' part left off. This is supported by https://css-tricks.com/lodge/svg/09-svg-data-uris/ ... not sure why we aren't just testing for the 'data:' prefix here?

* Not sure why this is now coming back with a double quote after recent changes here; it's supposed to preserve the single quote from style.css??
---
 src/snapshot.ts                        | 15 ++++++++-------
 test/__snapshots__/integration.ts.snap |  4 ++--
 test/snapshot.test.ts                  | 24 ++++++++++++++++--------
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 17150d0ad1..9c9a64c3d7 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -66,28 +66,29 @@ function extractOrigin(url: string): string {
   return origin;
 }
 
-const URL_IN_CSS_REF = /url\((?:'([^']*)'|"([^"]*)"|([^)]*))\)/gm;
+const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")([^"]*)"|([^)]*))\)/gm;
 const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/;
-const DATA_URI = /^(data:)([\w\/\+\-]+);(charset=[\w-]+|base64).*,(.*)/i;
+const DATA_URI = /^(data:)([\w\/\+\-]+);(charset=[\w-]+|base64|utf-?8).*,(.*)/i;
 export function absoluteToStylesheet(
   cssText: string | null,
   href: string,
 ): string {
   return (cssText || '').replace(
     URL_IN_CSS_REF,
-    (origin, path1, path2, path3) => {
+    (origin, quote1, path1, quote2, path2, path3) => {
       const filePath = path1 || path2 || path3;
+      const maybe_quote = quote1 || quote2 || '';
       if (!filePath) {
         return origin;
       }
       if (!RELATIVE_PATH.test(filePath)) {
-        return `url('${filePath}')`;
+        return `url(${maybe_quote}${filePath}${maybe_quote})`;
       }
       if (DATA_URI.test(filePath)) {
-        return `url(${filePath})`;
+        return `url(${maybe_quote}${filePath}${maybe_quote})`;
       }
       if (filePath[0] === '/') {
-        return `url('${extractOrigin(href) + filePath}')`;
+        return `url(${maybe_quote}${extractOrigin(href) + filePath}${maybe_quote})`;
       }
       const stack = href.split('/');
       const parts = filePath.split('/');
@@ -101,7 +102,7 @@ export function absoluteToStylesheet(
           stack.push(part);
         }
       }
-      return `url('${stack.join('/')}')`;
+      return `url(${maybe_quote}${stack.join('/')}${maybe_quote})`;
     },
   );
 }
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 855d73eb5b..f5c84e18a2 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -258,7 +258,7 @@ exports[`[html file]: with-style-sheet.html 1`] = `
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
   <title>with style sheet</title>
-  <style>body { margin: 0px; background: url('http://localhost:3030/a.jpg'); }p { color: red; background: url('http://localhost:3030/css/b.jpg'); }body &gt; p { color: yellow; }</style>
+  <style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body &gt; p { color: yellow; }</style>
 </head><body>
 </body></html>"
 `;
@@ -269,7 +269,7 @@ exports[`[html file]: with-style-sheet-with-import.html 1`] = `
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
   <title>with style sheet with import</title>
-  <style>body { margin: 0px; background: url('http://localhost:3030/a.jpg'); }p { color: red; background: url('http://localhost:3030/css/b.jpg'); }body &gt; p { color: yellow; }</style>
+  <style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body &gt; p { color: yellow; }</style>
 </head><body>
 </body></html>"
 `;
diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts
index 9c58dca745..2116813a47 100644
--- a/test/snapshot.test.ts
+++ b/test/snapshot.test.ts
@@ -7,32 +7,32 @@ describe('absolute url to stylesheet', () => {
 
   it('can handle relative path', () => {
     expect(absoluteToStylesheet('url(a.jpg)', href)).to.equal(
-      `url('http://localhost/css/a.jpg')`,
+      `url(http://localhost/css/a.jpg)`,
     );
   });
 
   it('can handle same level path', () => {
     expect(absoluteToStylesheet('url("./a.jpg")', href)).to.equal(
-      `url('http://localhost/css/a.jpg')`,
+      `url("http://localhost/css/a.jpg")`,
     );
   });
 
   it('can handle parent level path', () => {
     expect(absoluteToStylesheet('url("../a.jpg")', href)).to.equal(
-      `url('http://localhost/a.jpg')`,
+      `url("http://localhost/a.jpg")`,
     );
   });
 
   it('can handle absolute path', () => {
     expect(absoluteToStylesheet('url("/a.jpg")', href)).to.equal(
-      `url('http://localhost/a.jpg')`,
+      `url("http://localhost/a.jpg")`,
     );
   });
 
   it('can handle external path', () => {
     expect(
       absoluteToStylesheet('url("http://localhost/a.jpg")', href),
-    ).to.equal(`url('http://localhost/a.jpg')`);
+    ).to.equal(`url("http://localhost/a.jpg")`);
   });
 
   it('can handle single quote path', () => {
@@ -43,7 +43,7 @@ describe('absolute url to stylesheet', () => {
 
   it('can handle no quote path', () => {
     expect(absoluteToStylesheet('url(./a.jpg)', href)).to.equal(
-      `url('http://localhost/css/a.jpg')`,
+      `url(http://localhost/css/a.jpg)`,
     );
   });
 
@@ -54,8 +54,8 @@ describe('absolute url to stylesheet', () => {
         href,
       ),
     ).to.equal(
-      `background-image: url('http://localhost/css/images/b.jpg');` +
-        `background: #aabbcc url('http://localhost/css/images/a.jpg') 50% 50% repeat;`,
+      `background-image: url(http://localhost/css/images/b.jpg);` +
+        `background: #aabbcc url(http://localhost/css/images/a.jpg) 50% 50% repeat;`,
     );
   });
 
@@ -71,6 +71,14 @@ describe('absolute url to stylesheet', () => {
     ).to.equal('url(data:application/font-woff;base64,d09GMgABAAAAAAm)');
   });
 
+  it('preserves quotes around inline svgs with spaces', () => {
+    expect(
+      absoluteToStylesheet("url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")", href),
+    ).to.equal("url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")");
+    expect(
+      absoluteToStylesheet('url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')', href),
+    ).to.equal('url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')');
+  });
   it('can handle empty path', () => {
     expect(absoluteToStylesheet(`url('')`, href)).to.equal(`url('')`);
   });

From 57a124ff747ec4033c38c4611d175d74d16ded08 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 4 Oct 2020 20:48:51 +0800
Subject: [PATCH 256/524] update typings

---
 typings/index.d.ts    |  4 ++--
 typings/snapshot.d.ts |  7 ++++---
 typings/types.d.ts    | 12 ++++++++++++
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/typings/index.d.ts b/typings/index.d.ts
index b871ef01d8..d436c211e5 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,4 +1,4 @@
-import snapshot, { serializeNodeWithId, transformAttribute, visitSnapshot } from './snapshot';
+import snapshot, { serializeNodeWithId, transformAttribute, visitSnapshot, IGNORED_NODE } from './snapshot';
 import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
 export * from './types';
-export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, transformAttribute, visitSnapshot, };
+export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, transformAttribute, visitSnapshot, IGNORED_NODE, };
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index 46982a6464..163ee0c7e2 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -1,8 +1,9 @@
-import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions } from './types';
+import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions, SlimDOMOptions } from './types';
+export declare const IGNORED_NODE = -2;
 export declare function absoluteToStylesheet(cssText: string | null, href: string): string;
 export declare function absoluteToDoc(doc: Document, attributeValue: string): string;
 export declare function transformAttribute(doc: Document, name: string, value: string): string;
-export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean, maskInputOptions?: MaskInputOptions, recordCanvas?: boolean): serializedNodeWithId | null;
-declare function snapshot(n: Document, blockClass: string | RegExp | undefined, inlineStylesheet: boolean | undefined, maskAllInputsOrOptions: boolean | MaskInputOptions, recordCanvas?: boolean): [serializedNodeWithId | null, idNodeMap];
+export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean, maskInputOptions?: MaskInputOptions, slimDOMOptions?: SlimDOMOptions, recordCanvas?: boolean, preserveWhiteSpace?: boolean): serializedNodeWithId | null;
+declare function snapshot(n: Document, blockClass: string | RegExp | undefined, inlineStylesheet: boolean | undefined, maskAllInputsOrOptions: boolean | MaskInputOptions, slimDOMSensibleOrOptions: boolean | SlimDOMOptions, recordCanvas?: boolean): [serializedNodeWithId | null, idNodeMap];
 export declare function visitSnapshot(node: serializedNodeWithId, onVisit: (node: serializedNodeWithId) => unknown): void;
 export default snapshot;
diff --git a/typings/types.d.ts b/typings/types.d.ts
index 90271c1450..256abba52d 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -70,3 +70,15 @@ export declare type MaskInputOptions = Partial<{
     textarea: boolean;
     select: boolean;
 }>;
+export declare type SlimDOMOptions = Partial<{
+    script: boolean;
+    comment: boolean;
+    headFavicon: boolean;
+    headWhitespace: boolean;
+    headMetaDescKeywords: boolean;
+    headMetaSocial: boolean;
+    headMetaRobots: boolean;
+    headMetaHttpEquiv: boolean;
+    headMetaAuthorship: boolean;
+    headMetaVerification: boolean;
+}>;

From 1251091d6446cf8fe360012ff4b0a4af98567aff Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 4 Oct 2020 20:49:17 +0800
Subject: [PATCH 257/524] Release 0.8.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index eee822bd4a..94adce4fb1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From ea0ac76418ccaa45522fc35cbbdb63ea3bd452a7 Mon Sep 17 00:00:00 2001
From: Karl-Aksel Puulmann <macobo@users.noreply.github.com>
Date: Sat, 10 Oct 2020 03:05:10 +0200
Subject: [PATCH 258/524] Update rrwebPlayer types (#46)

Without this change, the following fails to compile in typescript:

```js
new rrwebPlayer({
                target: document.body,
                props: {
                    width: 900,
                    events,
                    autoPlay: true,
                },
            })
```
---
 typings/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/typings/index.d.ts b/typings/index.d.ts
index a518fb2cfb..9a34d3309c 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -14,7 +14,7 @@ export default class rrwebPlayer extends SvelteComponent {
       speedOption?: number[];
       showController?: boolean;
       tags?: Record<string, string>;
-    } & playerConfig;
+    } & Partial<playerConfig>;
   });
 
   addEventListener(event: string, handler: (params: any) => unknown): void;

From b3e7d5a476f0c5adb291924654094299b8899d80 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Thu, 15 Oct 2020 06:14:57 +0100
Subject: [PATCH 259/524] Prefer a map and a join as feel it's easier to
 understand, and I found a case in the wild where `Array.prototype.reduce` was
 overwritten (which admittedly is also a danger with `map`) (#52)

---
 src/snapshot.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 9c9a64c3d7..0e97033be2 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -35,10 +35,7 @@ function getCssRulesString(s: CSSStyleSheet): string | null {
   try {
     const rules = s.rules || s.cssRules;
     return rules
-      ? Array.from(rules).reduce(
-          (prev, cur) => prev + getCssRuleString(cur),
-          '',
-        )
+      ? Array.from(rules).map(getCssRuleString).join('')
       : null;
   } catch (error) {
     return null;

From 14bdd6745959cbd1d033c60299883c3526537560 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Sat, 24 Oct 2020 09:10:51 +0100
Subject: [PATCH 260/524] Add ability to reset the mapping id, to facilitate
 destructor in rrweb (rrwebRecord.stop) (#49)

---
 src/index.ts          | 2 ++
 src/snapshot.ts       | 5 +++++
 typings/index.d.ts    | 4 ++--
 typings/snapshot.d.ts | 1 +
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 77ca837772..20d5b02d23 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,6 +2,7 @@ import snapshot, {
   serializeNodeWithId,
   transformAttribute,
   visitSnapshot,
+  cleanupSnapshot,
   IGNORED_NODE,
 } from './snapshot';
 import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
@@ -15,5 +16,6 @@ export {
   addHoverClass,
   transformAttribute,
   visitSnapshot,
+  cleanupSnapshot,
   IGNORED_NODE,
 };
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 0e97033be2..c3190794d2 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -570,4 +570,9 @@ export function visitSnapshot(
   walk(node);
 }
 
+export function cleanupSnapshot() {
+  // allow a new recording to start numbering nodes from scratch
+  _id = 1;
+}
+
 export default snapshot;
diff --git a/typings/index.d.ts b/typings/index.d.ts
index d436c211e5..b2c2271df8 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,4 +1,4 @@
-import snapshot, { serializeNodeWithId, transformAttribute, visitSnapshot, IGNORED_NODE } from './snapshot';
+import snapshot, { serializeNodeWithId, transformAttribute, visitSnapshot, IGNORED_NODE, cleanupSnapshot } from './snapshot';
 import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
 export * from './types';
-export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, transformAttribute, visitSnapshot, IGNORED_NODE, };
+export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, transformAttribute, visitSnapshot, IGNORED_NODE, cleanupSnapshot, };
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index 163ee0c7e2..988f7982a7 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -6,4 +6,5 @@ export declare function transformAttribute(doc: Document, name: string, value: s
 export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean, maskInputOptions?: MaskInputOptions, slimDOMOptions?: SlimDOMOptions, recordCanvas?: boolean, preserveWhiteSpace?: boolean): serializedNodeWithId | null;
 declare function snapshot(n: Document, blockClass: string | RegExp | undefined, inlineStylesheet: boolean | undefined, maskAllInputsOrOptions: boolean | MaskInputOptions, slimDOMSensibleOrOptions: boolean | SlimDOMOptions, recordCanvas?: boolean): [serializedNodeWithId | null, idNodeMap];
 export declare function visitSnapshot(node: serializedNodeWithId, onVisit: (node: serializedNodeWithId) => unknown): void;
+export declare function cleanupSnapshot(): void;
 export default snapshot;

From 036d3df692f9d73e3dfea3e827518a9ee5c14edd Mon Sep 17 00:00:00 2001
From: Karl-Aksel Puulmann <macobo@users.noreply.github.com>
Date: Sat, 24 Oct 2020 10:11:39 +0200
Subject: [PATCH 261/524] Allow blocking elements by selector (#50)

* Extract method (isElementBlocked) and add tests

* Add blockSelector argument to snapshot

If blockSelector is passed, it will be matched against the element.

Reasoning: Mutating class names can get messy, so providing another hook
helps keep code clean by using data-attributes instead.
---
 package.json          |  2 ++
 src/snapshot.ts       | 40 ++++++++++++++++++++++++++++++----------
 test/snapshot.test.ts | 27 ++++++++++++++++++++++++++-
 typings/snapshot.d.ts |  5 +++--
 4 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 94adce4fb1..0c4b1f5faf 100644
--- a/package.json
+++ b/package.json
@@ -34,12 +34,14 @@
   "homepage": "https://github.com/rrweb-io/rrweb-snapshot#readme",
   "devDependencies": {
     "@types/chai": "^4.1.4",
+    "@types/jsdom": "^16.2.4",
     "@types/mocha": "^5.2.5",
     "@types/node": "^10.11.3",
     "@types/puppeteer": "^1.12.4",
     "chai": "^4.1.2",
     "cross-env": "^5.2.0",
     "jest-snapshot": "^23.6.0",
+    "jsdom": "^16.4.0",
     "mocha": "^5.2.0",
     "puppeteer": "^1.15.0",
     "rollup": "^0.66.4",
diff --git a/src/snapshot.ts b/src/snapshot.ts
index c3190794d2..9db891ba97 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -162,10 +162,34 @@ export function transformAttribute(
   }
 }
 
+export function _isBlockedElement(
+  element: HTMLElement,
+  blockClass: string | RegExp,
+  blockSelector: string | null,
+): boolean {
+  if (typeof blockClass === 'string') {
+    if (element.classList.contains(blockClass)) {
+      return true;
+    }
+  } else {
+    element.classList.forEach((className) => {
+      if (blockClass.test(className)) {
+        return true;
+      }
+    });
+  }
+  if (blockSelector) {
+    return element.matches(blockSelector)
+  }
+
+  return false;
+}
+
 function serializeNode(
   n: Node,
   doc: Document,
   blockClass: string | RegExp,
+  blockSelector: string | null,
   inlineStylesheet: boolean,
   maskInputOptions: MaskInputOptions = {},
   recordCanvas: boolean,
@@ -184,16 +208,7 @@ function serializeNode(
         systemId: (n as DocumentType).systemId,
       };
     case n.ELEMENT_NODE:
-      let needBlock = false;
-      if (typeof blockClass === 'string') {
-        needBlock = (n as HTMLElement).classList.contains(blockClass);
-      } else {
-        (n as HTMLElement).classList.forEach((className) => {
-          if (blockClass.test(className)) {
-            needBlock = true;
-          }
-        });
-      }
+      const needBlock = _isBlockedElement(n as HTMLElement, blockClass, blockSelector);
       const tagName = getValidTagName((n as HTMLElement).tagName);
       let attributes: attributes = {};
       for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
@@ -406,6 +421,7 @@ export function serializeNodeWithId(
   doc: Document,
   map: idNodeMap,
   blockClass: string | RegExp,
+  blockSelector: string | null,
   skipChild = false,
   inlineStylesheet = true,
   maskInputOptions?: MaskInputOptions,
@@ -417,6 +433,7 @@ export function serializeNodeWithId(
     n,
     doc,
     blockClass,
+    blockSelector,
     inlineStylesheet,
     maskInputOptions,
     recordCanvas || false,
@@ -472,6 +489,7 @@ export function serializeNodeWithId(
         doc,
         map,
         blockClass,
+        blockSelector,
         skipChild,
         inlineStylesheet,
         maskInputOptions,
@@ -494,6 +512,7 @@ function snapshot(
   maskAllInputsOrOptions: boolean | MaskInputOptions,
   slimDOMSensibleOrOptions: boolean | SlimDOMOptions,
   recordCanvas?: boolean,
+  blockSelector: string | null = null,
 ): [serializedNodeWithId | null, idNodeMap] {
   const idNodeMap: idNodeMap = {};
   const maskInputOptions: MaskInputOptions =
@@ -543,6 +562,7 @@ function snapshot(
       n,
       idNodeMap,
       blockClass,
+      blockSelector,
       false,
       inlineStylesheet,
       maskInputOptions,
diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts
index 2116813a47..5c3000d067 100644
--- a/test/snapshot.test.ts
+++ b/test/snapshot.test.ts
@@ -1,6 +1,7 @@
 import 'mocha';
+import { JSDOM } from 'jsdom';
 import { expect } from 'chai';
-import { absoluteToStylesheet } from '../src/snapshot';
+import { absoluteToStylesheet, _isBlockedElement } from '../src/snapshot';
 
 describe('absolute url to stylesheet', () => {
   const href = 'http://localhost/css/style.css';
@@ -83,3 +84,27 @@ describe('absolute url to stylesheet', () => {
     expect(absoluteToStylesheet(`url('')`, href)).to.equal(`url('')`);
   });
 });
+
+describe('isBlockedElement()', () => {
+  const subject = (html: string, opt: any = {}) =>
+    _isBlockedElement(render(html), 'rr-block', opt.blockSelector)
+
+  const render = (html: string): HTMLElement =>
+    JSDOM.fragment(html).querySelector('div')!
+
+  it('can handle empty elements', () => {
+    expect(subject('<div />')).to.equal(false)
+  })
+
+  it('blocks prohibited className', () => {
+    expect(subject('<div class="foo rr-block bar" />')).to.equal(true)
+  })
+
+  it('does not block random data selector', () => {
+    expect(subject('<div data-rr-block />')).to.equal(false)
+  })
+
+  it('blocks blocked selector', () => {
+    expect(subject('<div data-rr-block />', { blockSelector: '[data-rr-block]' })).to.equal(true)
+  })
+})
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index 988f7982a7..d99ef4d650 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -3,8 +3,9 @@ export declare const IGNORED_NODE = -2;
 export declare function absoluteToStylesheet(cssText: string | null, href: string): string;
 export declare function absoluteToDoc(doc: Document, attributeValue: string): string;
 export declare function transformAttribute(doc: Document, name: string, value: string): string;
-export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean, maskInputOptions?: MaskInputOptions, slimDOMOptions?: SlimDOMOptions, recordCanvas?: boolean, preserveWhiteSpace?: boolean): serializedNodeWithId | null;
-declare function snapshot(n: Document, blockClass: string | RegExp | undefined, inlineStylesheet: boolean | undefined, maskAllInputsOrOptions: boolean | MaskInputOptions, slimDOMSensibleOrOptions: boolean | SlimDOMOptions, recordCanvas?: boolean): [serializedNodeWithId | null, idNodeMap];
+export declare function _isBlockedElement(element: HTMLElement, blockClass: string | RegExp, blockSelector: string | null): boolean;
+export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, blockSelector: string | null, skipChild?: boolean, inlineStylesheet?: boolean, maskInputOptions?: MaskInputOptions, slimDOMOptions?: SlimDOMOptions, recordCanvas?: boolean, preserveWhiteSpace?: boolean): serializedNodeWithId | null;
+declare function snapshot(n: Document, blockClass: string | RegExp | undefined, inlineStylesheet: boolean | undefined, maskAllInputsOrOptions: boolean | MaskInputOptions, slimDOMSensibleOrOptions: boolean | SlimDOMOptions, recordCanvas?: boolean, blockSelector?: string | null): [serializedNodeWithId | null, idNodeMap];
 export declare function visitSnapshot(node: serializedNodeWithId, onVisit: (node: serializedNodeWithId) => unknown): void;
 export declare function cleanupSnapshot(): void;
 export default snapshot;

From c489e06acfa1d77779da7a4461a17917aa2ba874 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 24 Oct 2020 16:13:58 +0800
Subject: [PATCH 262/524] Release 0.8.4

---
 package.json       | 2 +-
 typings/index.d.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 0c4b1f5faf..9852ac7ddb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
diff --git a/typings/index.d.ts b/typings/index.d.ts
index b2c2271df8..b60dbf59c8 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,4 +1,4 @@
-import snapshot, { serializeNodeWithId, transformAttribute, visitSnapshot, IGNORED_NODE, cleanupSnapshot } from './snapshot';
+import snapshot, { serializeNodeWithId, transformAttribute, visitSnapshot, cleanupSnapshot, IGNORED_NODE } from './snapshot';
 import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
 export * from './types';
-export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, transformAttribute, visitSnapshot, IGNORED_NODE, cleanupSnapshot, };
+export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, transformAttribute, visitSnapshot, cleanupSnapshot, IGNORED_NODE, };

From e192497b9aac4b056601a90fd26fd984588f6deb Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 24 Oct 2020 23:14:43 +0800
Subject: [PATCH 263/524] upgrade rrweb

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 57a4cb0738..a19d82cadd 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "typescript": "^3.9.7"
   },
   "dependencies": {
-    "rrweb": "^0.9.7"
+    "rrweb": "^0.9.8"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/yarn.lock b/yarn.lock
index 9e0d96f69e..3346073355 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1227,10 +1227,10 @@ rrweb-snapshot@^0.8.2:
   resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-0.8.2.tgz#1e87c0369e37c8af484de5a82301a9b09883081c"
   integrity sha512-KwD5NJeiPMgA+qRPf/0YIk0dKevOpj/2redYX+9Ker6FpyUlUBKaopEc9M3VbFnUqwgU9v109c9220PwhKEQcQ==
 
-rrweb@^0.9.7:
-  version "0.9.7"
-  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-0.9.7.tgz#6632918dc61f2979d86d2b892810678408e7e11f"
-  integrity sha512-n3TEe1OyEtOGFvh4D513dR4jKVBlw//flCaFSwNFBreod/WKNRuqyZ7A2SCbY3XJbQ8JRFTfGa1jGsKvhiqTdQ==
+rrweb@^0.9.8:
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-0.9.8.tgz#48e0f418a39dc62d6b0d0541d2971545937c8356"
+  integrity sha512-0EzL32mJ2+n8OP3zA5JhcXFKfI76tzIwlzaZMB5jlMiws2DCtn+yEiaZSlU31d3VPUkpV8h2w2VbF6FWfS04Ug==
   dependencies:
     "@types/css-font-loading-module" "0.0.4"
     "@xstate/fsm" "^1.4.0"

From fe36b17ebc6cf52cac9dad03ff6c4b610f08c438 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 24 Oct 2020 23:15:02 +0800
Subject: [PATCH 264/524] Release 0.6.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a19d82cadd..f3bb9232ed 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From e8dc87add1a7a8f2db858b4b1f87d7885eb76195 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 26 Oct 2020 23:35:40 +0800
Subject: [PATCH 265/524] upgrade rrweb

---
 package.json |  2 +-
 yarn.lock    | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index f3bb9232ed..baf662e9da 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "typescript": "^3.9.7"
   },
   "dependencies": {
-    "rrweb": "^0.9.8"
+    "rrweb": "^0.9.9"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/yarn.lock b/yarn.lock
index 3346073355..d9077f41d9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1222,21 +1222,21 @@ rollup@^1.20.0:
     "@types/node" "*"
     acorn "^7.1.0"
 
-rrweb-snapshot@^0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-0.8.2.tgz#1e87c0369e37c8af484de5a82301a9b09883081c"
-  integrity sha512-KwD5NJeiPMgA+qRPf/0YIk0dKevOpj/2redYX+9Ker6FpyUlUBKaopEc9M3VbFnUqwgU9v109c9220PwhKEQcQ==
+rrweb-snapshot@^0.8.4:
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-0.8.4.tgz#3f8bf1270975f9dfad60321a29067d2ea39e3c39"
+  integrity sha512-6zY4lEUpA6qEd/ArAo1crWefxsmiXMuK/fTToGmsW+ehR8/pglxTsqpMPEkgQO9uBUIWIUE9I3CyIQkigmt4ug==
 
-rrweb@^0.9.8:
-  version "0.9.8"
-  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-0.9.8.tgz#48e0f418a39dc62d6b0d0541d2971545937c8356"
-  integrity sha512-0EzL32mJ2+n8OP3zA5JhcXFKfI76tzIwlzaZMB5jlMiws2DCtn+yEiaZSlU31d3VPUkpV8h2w2VbF6FWfS04Ug==
+rrweb@^0.9.9:
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-0.9.9.tgz#d502271f08620cd880a2be452e78ab78186173cb"
+  integrity sha512-w7KcyQp4r1vhHmPfxSnk2JriDdR9F9w6ABnEylwfhKjQR267T3WEYh9niRc1CBvXIrybTk6bzMuOqqXg4ziOWw==
   dependencies:
     "@types/css-font-loading-module" "0.0.4"
     "@xstate/fsm" "^1.4.0"
     mitt "^1.1.3"
     pako "^1.0.11"
-    rrweb-snapshot "^0.8.2"
+    rrweb-snapshot "^0.8.4"
 
 sade@^1.4.0:
   version "1.7.3"

From 9434db4a6b60bfe824ec151f3aaa32f2a9885530 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 26 Oct 2020 23:36:21 +0800
Subject: [PATCH 266/524] Release 0.6.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index baf662e9da..f56af01752 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From 79a8198c03bb5896f1e4801482139c52234b8725 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 15 Nov 2020 14:42:23 +0800
Subject: [PATCH 267/524] limit max scale to 1

---
 src/Player.svelte  |  3 ++-
 typings/index.d.ts | 28 +++++++++++++++-------------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/Player.svelte b/src/Player.svelte
index e0cc6f16a0..04dcd59b24 100644
--- a/src/Player.svelte
+++ b/src/Player.svelte
@@ -55,7 +55,8 @@
     const widthScale = width / frameDimension.width;
     const heightScale = height / frameDimension.height;
     el.style.transform =
-      `scale(${Math.min(widthScale, heightScale)})` + 'translate(-50%, -50%)';
+      `scale(${Math.min(widthScale, heightScale, 1)})` +
+      'translate(-50%, -50%)';
   };
 
   export const triggerResize = () => {
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 9a34d3309c..6268e7bb85 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -2,20 +2,22 @@ import { eventWithTime, playerConfig } from 'rrweb/typings/types';
 import { Replayer, mirror } from 'rrweb';
 import { SvelteComponent } from 'svelte';
 
+export type RRwebPlayerOptions = {
+  target: HTMLElement;
+  props: {
+    events: eventWithTime[];
+    width?: number;
+    height?: number;
+    autoPlay?: boolean;
+    speed?: number;
+    speedOption?: number[];
+    showController?: boolean;
+    tags?: Record<string, string>;
+  } & Partial<playerConfig>;
+};
+
 export default class rrwebPlayer extends SvelteComponent {
-  constructor(options: {
-    target: HTMLElement;
-    props: {
-      events: eventWithTime[];
-      width?: number;
-      height?: number;
-      autoPlay?: boolean;
-      speed?: number;
-      speedOption?: number[];
-      showController?: boolean;
-      tags?: Record<string, string>;
-    } & Partial<playerConfig>;
-  });
+  constructor(options: RRwebPlayerOptions);
 
   addEventListener(event: string, handler: (params: any) => unknown): void;
 

From 918153c89ea2777cfef9e43b65cac6e746b152e1 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 15 Nov 2020 14:43:54 +0800
Subject: [PATCH 268/524] Release 0.6.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f56af01752..6f2dcd5b0e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From da182f49276361275ae91b6e045d20e0e42afa9f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 21 Nov 2020 11:03:32 +0800
Subject: [PATCH 269/524] fix lint

---
 src/css.ts      |   6 +-
 src/snapshot.ts | 191 ++++++++++++++++++++++++++----------------------
 2 files changed, 108 insertions(+), 89 deletions(-)

diff --git a/src/css.ts b/src/css.ts
index 1bef07fb30..950ec0b4c1 100644
--- a/src/css.ts
+++ b/src/css.ts
@@ -440,11 +440,11 @@ export function parse(css: string, options: ParserOptions = {}) {
      * http://ostermiller.org/findcomment.html */
     return trim(m[0])
       .replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '')
-      .replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, m => {
+      .replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, (m) => {
         return m.replace(/,/g, '\u200C');
       })
       .split(/\s*(?![^(]*\)),\s*/)
-      .map(s => {
+      .map((s) => {
         return s.replace(/\u200C/g, ',');
       });
   }
@@ -888,7 +888,7 @@ function addParent(obj: Stylesheet, parent?: Stylesheet) {
   for (const k of Object.keys(obj)) {
     const value = obj[k as keyof Stylesheet];
     if (Array.isArray(value)) {
-      value.forEach(v => {
+      value.forEach((v) => {
         addParent(v, childParent);
       });
     } else if (value && typeof value === 'object') {
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 9db891ba97..d13c48d0c0 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -34,9 +34,7 @@ function getValidTagName(tagName: string): string {
 function getCssRulesString(s: CSSStyleSheet): string | null {
   try {
     const rules = s.rules || s.cssRules;
-    return rules
-      ? Array.from(rules).map(getCssRuleString).join('')
-      : null;
+    return rules ? Array.from(rules).map(getCssRuleString).join('') : null;
   } catch (error) {
     return null;
   }
@@ -74,18 +72,20 @@ export function absoluteToStylesheet(
     URL_IN_CSS_REF,
     (origin, quote1, path1, quote2, path2, path3) => {
       const filePath = path1 || path2 || path3;
-      const maybe_quote = quote1 || quote2 || '';
+      const maybeQuote = quote1 || quote2 || '';
       if (!filePath) {
         return origin;
       }
       if (!RELATIVE_PATH.test(filePath)) {
-        return `url(${maybe_quote}${filePath}${maybe_quote})`;
+        return `url(${maybeQuote}${filePath}${maybeQuote})`;
       }
       if (DATA_URI.test(filePath)) {
-        return `url(${maybe_quote}${filePath}${maybe_quote})`;
+        return `url(${maybeQuote}${filePath}${maybeQuote})`;
       }
       if (filePath[0] === '/') {
-        return `url(${maybe_quote}${extractOrigin(href) + filePath}${maybe_quote})`;
+        return `url(${maybeQuote}${
+          extractOrigin(href) + filePath
+        }${maybeQuote})`;
       }
       const stack = href.split('/');
       const parts = filePath.split('/');
@@ -99,7 +99,7 @@ export function absoluteToStylesheet(
           stack.push(part);
         }
       }
-      return `url(${maybe_quote}${stack.join('/')}${maybe_quote})`;
+      return `url(${maybeQuote}${stack.join('/')}${maybeQuote})`;
     },
   );
 }
@@ -179,7 +179,7 @@ export function _isBlockedElement(
     });
   }
   if (blockSelector) {
-    return element.matches(blockSelector)
+    return element.matches(blockSelector);
   }
 
   return false;
@@ -208,7 +208,11 @@ function serializeNode(
         systemId: (n as DocumentType).systemId,
       };
     case n.ELEMENT_NODE:
-      const needBlock = _isBlockedElement(n as HTMLElement, blockClass, blockSelector);
+      const needBlock = _isBlockedElement(
+        n as HTMLElement,
+        blockClass,
+        blockSelector,
+      );
       const tagName = getValidTagName((n as HTMLElement).tagName);
       let attributes: attributes = {};
       for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
@@ -339,7 +343,7 @@ function serializeNode(
   }
 }
 
-function lowerIfExists(maybeAttr : string | number | boolean) : string {
+function lowerIfExists(maybeAttr: string | number | boolean): string {
   if (maybeAttr === undefined) {
     return '';
   } else {
@@ -347,68 +351,83 @@ function lowerIfExists(maybeAttr : string | number | boolean) : string {
   }
 }
 
-function slimDOMExcluded(sn: serializedNode, slimDOMOptions: SlimDOMOptions): boolean {
+function slimDOMExcluded(
+  sn: serializedNode,
+  slimDOMOptions: SlimDOMOptions,
+): boolean {
   if (slimDOMOptions.comment && sn.type === NodeType.Comment) {
     // TODO: convert IE conditional comments to real nodes
     return true;
   } else if (sn.type === NodeType.Element) {
-    if (slimDOMOptions.script &&
-        (sn.tagName === 'script' ||
-         (sn.tagName === 'link' && sn.attributes.rel === 'preload' && sn.attributes['as'] === 'script')
-        )) {
+    if (
+      slimDOMOptions.script &&
+      (sn.tagName === 'script' ||
+        (sn.tagName === 'link' &&
+          sn.attributes.rel === 'preload' &&
+          sn.attributes.as === 'script'))
+    ) {
       return true;
-    } else if (slimDOMOptions.headFavicon && (
-      (sn.tagName === 'link' && sn.attributes.rel === 'shortcut icon')
-        || (sn.tagName === 'meta' && (
-          lowerIfExists(sn.attributes['name']).match(/^msapplication-tile(image|color)$/)
-            || lowerIfExists(sn.attributes['name']) === 'application-name'
-            || lowerIfExists(sn.attributes['rel']) === 'icon'
-            || lowerIfExists(sn.attributes['rel']) === 'apple-touch-icon'
-            || lowerIfExists(sn.attributes['rel']) === 'shortcut icon'
-        )))) {
+    } else if (
+      slimDOMOptions.headFavicon &&
+      ((sn.tagName === 'link' && sn.attributes.rel === 'shortcut icon') ||
+        (sn.tagName === 'meta' &&
+          (lowerIfExists(sn.attributes.name).match(
+            /^msapplication-tile(image|color)$/,
+          ) ||
+            lowerIfExists(sn.attributes.name) === 'application-name' ||
+            lowerIfExists(sn.attributes.rel) === 'icon' ||
+            lowerIfExists(sn.attributes.rel) === 'apple-touch-icon' ||
+            lowerIfExists(sn.attributes.rel) === 'shortcut icon')))
+    ) {
       return true;
     } else if (sn.tagName === 'meta') {
-      if (slimDOMOptions.headMetaDescKeywords && (
-        lowerIfExists(sn.attributes['name']).match(/^description|keywords$/)
-      )) {
+      if (
+        slimDOMOptions.headMetaDescKeywords &&
+        lowerIfExists(sn.attributes.name).match(/^description|keywords$/)
+      ) {
         return true;
-      } else if (slimDOMOptions.headMetaSocial && (
-        lowerIfExists(sn.attributes['property']).match(/^(og|twitter|fb):/)  // og = opengraph (facebook)
-          || lowerIfExists(sn.attributes['name']).match(/^(og|twitter):/)
-          || lowerIfExists(sn.attributes['name']) === 'pinterest'
-      )) {
+      } else if (
+        slimDOMOptions.headMetaSocial &&
+        (lowerIfExists(sn.attributes.property).match(/^(og|twitter|fb):/) || // og = opengraph (facebook)
+          lowerIfExists(sn.attributes.name).match(/^(og|twitter):/) ||
+          lowerIfExists(sn.attributes.name) === 'pinterest')
+      ) {
         return true;
-      } else if (slimDOMOptions.headMetaRobots && (
-        lowerIfExists(sn.attributes['name']) === 'robots'
-          || lowerIfExists(sn.attributes['name']) === 'googlebot'
-          || lowerIfExists(sn.attributes['name']) === 'bingbot'
-      )) {
+      } else if (
+        slimDOMOptions.headMetaRobots &&
+        (lowerIfExists(sn.attributes.name) === 'robots' ||
+          lowerIfExists(sn.attributes.name) === 'googlebot' ||
+          lowerIfExists(sn.attributes.name) === 'bingbot')
+      ) {
         return true;
-      } else if (slimDOMOptions.headMetaHttpEquiv && (
+      } else if (
+        slimDOMOptions.headMetaHttpEquiv &&
         sn.attributes['http-equiv'] !== undefined
-      )) {
+      ) {
         // e.g. X-UA-Compatible, Content-Type, Content-Language,
         // cache-control, X-Translated-By
         return true;
-      } else if (slimDOMOptions.headMetaAuthorship && (
-        lowerIfExists(sn.attributes['name']) === 'author'
-          || lowerIfExists(sn.attributes['name']) === 'generator'
-          || lowerIfExists(sn.attributes['name']) === 'framework'
-          || lowerIfExists(sn.attributes['name']) === 'publisher'
-          || lowerIfExists(sn.attributes['name']) === 'progid'
-          || lowerIfExists(sn.attributes['property']).match(/^article:/)
-          || lowerIfExists(sn.attributes['property']).match(/^product:/)
-      )) {
+      } else if (
+        slimDOMOptions.headMetaAuthorship &&
+        (lowerIfExists(sn.attributes.name) === 'author' ||
+          lowerIfExists(sn.attributes.name) === 'generator' ||
+          lowerIfExists(sn.attributes.name) === 'framework' ||
+          lowerIfExists(sn.attributes.name) === 'publisher' ||
+          lowerIfExists(sn.attributes.name) === 'progid' ||
+          lowerIfExists(sn.attributes.property).match(/^article:/) ||
+          lowerIfExists(sn.attributes.property).match(/^product:/))
+      ) {
         return true;
-      } else if (slimDOMOptions.headMetaVerification && (
-        lowerIfExists(sn.attributes['name']) === 'google-site-verification'
-          || lowerIfExists(sn.attributes['name']) === 'yandex-verification'
-          || lowerIfExists(sn.attributes['name']) === 'csrf-token'
-          || lowerIfExists(sn.attributes['name']) === 'p:domain_verify'
-          || lowerIfExists(sn.attributes['name']) === 'verify-v1'
-          || lowerIfExists(sn.attributes['name']) === 'verification'
-          || lowerIfExists(sn.attributes['name']) === 'shopify-checkout-api-token'
-      )) {
+      } else if (
+        slimDOMOptions.headMetaVerification &&
+        (lowerIfExists(sn.attributes.name) === 'google-site-verification' ||
+          lowerIfExists(sn.attributes.name) === 'yandex-verification' ||
+          lowerIfExists(sn.attributes.name) === 'csrf-token' ||
+          lowerIfExists(sn.attributes.name) === 'p:domain_verify' ||
+          lowerIfExists(sn.attributes.name) === 'verify-v1' ||
+          lowerIfExists(sn.attributes.name) === 'verification' ||
+          lowerIfExists(sn.attributes.name) === 'shopify-checkout-api-token')
+      ) {
         return true;
       }
     }
@@ -448,12 +467,13 @@ export function serializeNodeWithId(
   // Try to reuse the previous id
   if ('__sn' in n) {
     id = n.__sn.id;
-  } else if (slimDOMExcluded(_serializedNode, slimDOMOptions) ||
-             (!preserveWhiteSpace &&
-              _serializedNode.type === NodeType.Text &&
-              !_serializedNode.isStyle &&
-              !_serializedNode.textContent.replace(/^\s+|\s+$/gm,'').length
-             )) {
+  } else if (
+    slimDOMExcluded(_serializedNode, slimDOMOptions) ||
+    (!preserveWhiteSpace &&
+      _serializedNode.type === NodeType.Text &&
+      !_serializedNode.isStyle &&
+      !_serializedNode.textContent.replace(/^\s+|\s+$/gm, '').length)
+  ) {
     id = IGNORED_NODE;
   } else {
     id = genId();
@@ -461,7 +481,7 @@ export function serializeNodeWithId(
   const serializedNode = Object.assign(_serializedNode, { id });
   (n as INode).__sn = serializedNode;
   if (id === IGNORED_NODE) {
-    return null;  // slimDOM
+    return null; // slimDOM
   }
   map[id] = n as INode;
   let recordChild = !skipChild;
@@ -476,9 +496,9 @@ export function serializeNodeWithId(
     recordChild
   ) {
     if (
-      (slimDOMOptions.headWhitespace &&
-       _serializedNode.type === NodeType.Element &&
-       _serializedNode.tagName == 'head')
+      slimDOMOptions.headWhitespace &&
+      _serializedNode.type === NodeType.Element &&
+      _serializedNode.tagName === 'head'
       // would impede performance: || getComputedStyle(n)['white-space'] === 'normal'
     ) {
       preserveWhiteSpace = false;
@@ -538,24 +558,23 @@ function snapshot(
       ? {}
       : maskAllInputsOrOptions;
   const slimDOMOptions: SlimDOMOptions =
-    (slimDOMSensibleOrOptions === true ||
-     slimDOMSensibleOrOptions === 'all')
-  // if true: set of sensible options that should not throw away any information
-    ? {
-      script: true,
-      comment: true,
-      headFavicon: true,
-      headWhitespace: true,
-      headMetaDescKeywords: slimDOMSensibleOrOptions === 'all',  // destructive
-      headMetaSocial: true,
-      headMetaRobots: true,
-      headMetaHttpEquiv: true,
-      headMetaAuthorship: true,
-      headMetaVerification: true,
-    }
-  : slimDOMSensibleOrOptions === false
-    ? {}
-  : slimDOMSensibleOrOptions;
+    slimDOMSensibleOrOptions === true || slimDOMSensibleOrOptions === 'all'
+      ? // if true: set of sensible options that should not throw away any information
+        {
+          script: true,
+          comment: true,
+          headFavicon: true,
+          headWhitespace: true,
+          headMetaDescKeywords: slimDOMSensibleOrOptions === 'all', // destructive
+          headMetaSocial: true,
+          headMetaRobots: true,
+          headMetaHttpEquiv: true,
+          headMetaAuthorship: true,
+          headMetaVerification: true,
+        }
+      : slimDOMSensibleOrOptions === false
+      ? {}
+      : slimDOMSensibleOrOptions;
   return [
     serializeNodeWithId(
       n,

From 555398d3f522b788e253b61c31d70ba82191c3c3 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 21 Nov 2020 11:05:08 +0800
Subject: [PATCH 270/524] close #38, update data uri regexp

---
 src/snapshot.ts       |  2 +-
 test/snapshot.test.ts | 42 +++++++++++++++++++++++++++---------------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index d13c48d0c0..ae3e5ad45c 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -63,7 +63,7 @@ function extractOrigin(url: string): string {
 
 const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")([^"]*)"|([^)]*))\)/gm;
 const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/;
-const DATA_URI = /^(data:)([\w\/\+\-]+);(charset=[\w-]+|base64|utf-?8).*,(.*)/i;
+const DATA_URI = /^(data:)([^,]*),(.*)/i;
 export function absoluteToStylesheet(
   cssText: string | null,
   href: string,
diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts
index 5c3000d067..025fac6cab 100644
--- a/test/snapshot.test.ts
+++ b/test/snapshot.test.ts
@@ -74,11 +74,21 @@ describe('absolute url to stylesheet', () => {
 
   it('preserves quotes around inline svgs with spaces', () => {
     expect(
-      absoluteToStylesheet("url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")", href),
-    ).to.equal("url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")");
+      absoluteToStylesheet(
+        "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")",
+        href,
+      ),
+    ).to.equal(
+      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")",
+    );
     expect(
-      absoluteToStylesheet('url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')', href),
-    ).to.equal('url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')');
+      absoluteToStylesheet(
+        'url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')',
+        href,
+      ),
+    ).to.equal(
+      'url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')',
+    );
   });
   it('can handle empty path', () => {
     expect(absoluteToStylesheet(`url('')`, href)).to.equal(`url('')`);
@@ -87,24 +97,26 @@ describe('absolute url to stylesheet', () => {
 
 describe('isBlockedElement()', () => {
   const subject = (html: string, opt: any = {}) =>
-    _isBlockedElement(render(html), 'rr-block', opt.blockSelector)
+    _isBlockedElement(render(html), 'rr-block', opt.blockSelector);
 
   const render = (html: string): HTMLElement =>
-    JSDOM.fragment(html).querySelector('div')!
+    JSDOM.fragment(html).querySelector('div')!;
 
   it('can handle empty elements', () => {
-    expect(subject('<div />')).to.equal(false)
-  })
+    expect(subject('<div />')).to.equal(false);
+  });
 
   it('blocks prohibited className', () => {
-    expect(subject('<div class="foo rr-block bar" />')).to.equal(true)
-  })
+    expect(subject('<div class="foo rr-block bar" />')).to.equal(true);
+  });
 
   it('does not block random data selector', () => {
-    expect(subject('<div data-rr-block />')).to.equal(false)
-  })
+    expect(subject('<div data-rr-block />')).to.equal(false);
+  });
 
   it('blocks blocked selector', () => {
-    expect(subject('<div data-rr-block />', { blockSelector: '[data-rr-block]' })).to.equal(true)
-  })
-})
+    expect(
+      subject('<div data-rr-block />', { blockSelector: '[data-rr-block]' }),
+    ).to.equal(true);
+  });
+});

From 852632656f0b45e5e7dc1c9a3bee98418fc2d505 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 29 Nov 2020 13:22:01 +0800
Subject: [PATCH 271/524] refactoring public API

---
 src/rebuild.ts        |  50 +++++++++++-------
 src/snapshot.ts       | 115 +++++++++++++++++++++++++++---------------
 test/integration.ts   |  16 +++---
 typings/rebuild.d.ts  |  13 ++++-
 typings/snapshot.d.ts |  22 +++++++-
 5 files changed, 146 insertions(+), 70 deletions(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index f2a8291d16..b09d42342e 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -77,9 +77,12 @@ export function addHoverClass(cssText: string): string {
 
 function buildNode(
   n: serializedNodeWithId,
-  doc: Document,
-  HACK_CSS: boolean,
+  options: {
+    doc: Document;
+    hackCss: boolean;
+  },
 ): Node | null {
+  const { doc, hackCss } = options;
   switch (n.type) {
     case NodeType.Document:
       return doc.implementation.createDocument(null, '', null);
@@ -109,7 +112,7 @@ function buildNode(
           const isTextarea = tagName === 'textarea' && name === 'value';
           const isRemoteOrDynamicCss =
             tagName === 'style' && name === '_cssText';
-          if (isRemoteOrDynamicCss && HACK_CSS) {
+          if (isRemoteOrDynamicCss && hackCss) {
             value = addHoverClass(value);
           }
           if (isTextarea || isRemoteOrDynamicCss) {
@@ -177,7 +180,7 @@ function buildNode(
       return node;
     case NodeType.Text:
       return doc.createTextNode(
-        n.isStyle && HACK_CSS ? addHoverClass(n.textContent) : n.textContent,
+        n.isStyle && hackCss ? addHoverClass(n.textContent) : n.textContent,
       );
     case NodeType.CDATA:
       return doc.createCDATASection(n.textContent);
@@ -190,12 +193,15 @@ function buildNode(
 
 export function buildNodeWithSN(
   n: serializedNodeWithId,
-  doc: Document,
-  map: idNodeMap,
-  skipChild = false,
-  HACK_CSS = true,
+  options: {
+    doc: Document;
+    map: idNodeMap;
+    skipChild?: boolean;
+    hackCss: boolean;
+  },
 ): INode | null {
-  let node = buildNode(n, doc, HACK_CSS);
+  const { doc, map, skipChild = false, hackCss = true } = options;
+  let node = buildNode(n, { doc, hackCss });
   if (!node) {
     return null;
   }
@@ -214,7 +220,12 @@ export function buildNodeWithSN(
     !skipChild
   ) {
     for (const childN of n.childNodes) {
-      const childNode = buildNodeWithSN(childN, doc, map, false, HACK_CSS);
+      const childNode = buildNodeWithSN(childN, {
+        doc,
+        map,
+        skipChild: false,
+        hackCss,
+      });
       if (!childNode) {
         console.warn('Failed to rebuild', childN);
       } else {
@@ -259,15 +270,20 @@ function handleScroll(node: INode) {
 
 function rebuild(
   n: serializedNodeWithId,
-  doc: Document,
-  onVisit?: (node: INode) => unknown,
-  /**
-   * This is not a public API yet, just for POC
-   */
-  HACK_CSS: boolean = true,
+  options: {
+    doc: Document;
+    onVisit?: (node: INode) => unknown;
+    hackCss?: boolean;
+  },
 ): [Node | null, idNodeMap] {
+  const { doc, onVisit, hackCss = true } = options;
   const idNodeMap: idNodeMap = {};
-  const node = buildNodeWithSN(n, doc, idNodeMap, false, HACK_CSS);
+  const node = buildNodeWithSN(n, {
+    doc,
+    map: idNodeMap,
+    skipChild: false,
+    hackCss,
+  });
   visit(idNodeMap, (visitedNode) => {
     if (onVisit) {
       onVisit(visitedNode);
diff --git a/src/snapshot.ts b/src/snapshot.ts
index ae3e5ad45c..4c17612fc6 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -187,13 +187,23 @@ export function _isBlockedElement(
 
 function serializeNode(
   n: Node,
-  doc: Document,
-  blockClass: string | RegExp,
-  blockSelector: string | null,
-  inlineStylesheet: boolean,
-  maskInputOptions: MaskInputOptions = {},
-  recordCanvas: boolean,
+  options: {
+    doc: Document;
+    blockClass: string | RegExp;
+    blockSelector: string | null;
+    inlineStylesheet: boolean;
+    maskInputOptions: MaskInputOptions;
+    recordCanvas: boolean;
+  },
 ): serializedNode | false {
+  const {
+    doc,
+    blockClass,
+    blockSelector,
+    inlineStylesheet,
+    maskInputOptions = {},
+    recordCanvas,
+  } = options;
   switch (n.nodeType) {
     case n.DOCUMENT_NODE:
       return {
@@ -437,26 +447,39 @@ function slimDOMExcluded(
 
 export function serializeNodeWithId(
   n: Node | INode,
-  doc: Document,
-  map: idNodeMap,
-  blockClass: string | RegExp,
-  blockSelector: string | null,
-  skipChild = false,
-  inlineStylesheet = true,
-  maskInputOptions?: MaskInputOptions,
-  slimDOMOptions: SlimDOMOptions = {},
-  recordCanvas?: boolean,
-  preserveWhiteSpace = true,
+  options: {
+    doc: Document;
+    map: idNodeMap;
+    blockClass: string | RegExp;
+    blockSelector: string | null;
+    skipChild: boolean;
+    inlineStylesheet: boolean;
+    maskInputOptions?: MaskInputOptions;
+    slimDOMOptions: SlimDOMOptions;
+    recordCanvas?: boolean;
+    preserveWhiteSpace?: boolean;
+  },
 ): serializedNodeWithId | null {
-  const _serializedNode = serializeNode(
-    n,
+  const {
+    doc,
+    map,
+    blockClass,
+    blockSelector,
+    skipChild = false,
+    inlineStylesheet = true,
+    maskInputOptions = {},
+    slimDOMOptions,
+    recordCanvas = false,
+  } = options;
+  let { preserveWhiteSpace = true } = options;
+  const _serializedNode = serializeNode(n, {
     doc,
     blockClass,
     blockSelector,
     inlineStylesheet,
     maskInputOptions,
-    recordCanvas || false,
-  );
+    recordCanvas,
+  });
   if (!_serializedNode) {
     // TODO: dev only
     console.warn(n, 'not serialized');
@@ -504,8 +527,7 @@ export function serializeNodeWithId(
       preserveWhiteSpace = false;
     }
     for (const childN of Array.from(n.childNodes)) {
-      const serializedChildNode = serializeNodeWithId(
-        childN,
+      const serializedChildNode = serializeNodeWithId(childN, {
         doc,
         map,
         blockClass,
@@ -516,7 +538,7 @@ export function serializeNodeWithId(
         slimDOMOptions,
         recordCanvas,
         preserveWhiteSpace,
-      );
+      });
       if (serializedChildNode) {
         serializedNode.childNodes.push(serializedChildNode);
       }
@@ -527,16 +549,26 @@ export function serializeNodeWithId(
 
 function snapshot(
   n: Document,
-  blockClass: string | RegExp = 'rr-block',
-  inlineStylesheet = true,
-  maskAllInputsOrOptions: boolean | MaskInputOptions,
-  slimDOMSensibleOrOptions: boolean | SlimDOMOptions,
-  recordCanvas?: boolean,
-  blockSelector: string | null = null,
+  options?: {
+    blockClass?: string | RegExp;
+    inlineStylesheet?: boolean;
+    maskAllInputs?: boolean | MaskInputOptions;
+    slimDOM?: boolean | SlimDOMOptions;
+    recordCanvas?: boolean;
+    blockSelector?: string | null;
+  },
 ): [serializedNodeWithId | null, idNodeMap] {
+  const {
+    blockClass = 'rr-block',
+    inlineStylesheet = true,
+    recordCanvas = false,
+    blockSelector = null,
+    maskAllInputs = false,
+    slimDOM = false,
+  } = options || {};
   const idNodeMap: idNodeMap = {};
   const maskInputOptions: MaskInputOptions =
-    maskAllInputsOrOptions === true
+    maskAllInputs === true
       ? {
           color: true,
           date: true,
@@ -554,40 +586,39 @@ function snapshot(
           textarea: true,
           select: true,
         }
-      : maskAllInputsOrOptions === false
+      : maskAllInputs === false
       ? {}
-      : maskAllInputsOrOptions;
+      : maskAllInputs;
   const slimDOMOptions: SlimDOMOptions =
-    slimDOMSensibleOrOptions === true || slimDOMSensibleOrOptions === 'all'
+    slimDOM === true || slimDOM === 'all'
       ? // if true: set of sensible options that should not throw away any information
         {
           script: true,
           comment: true,
           headFavicon: true,
           headWhitespace: true,
-          headMetaDescKeywords: slimDOMSensibleOrOptions === 'all', // destructive
+          headMetaDescKeywords: slimDOM === 'all', // destructive
           headMetaSocial: true,
           headMetaRobots: true,
           headMetaHttpEquiv: true,
           headMetaAuthorship: true,
           headMetaVerification: true,
         }
-      : slimDOMSensibleOrOptions === false
+      : slimDOM === false
       ? {}
-      : slimDOMSensibleOrOptions;
+      : slimDOM;
   return [
-    serializeNodeWithId(
-      n,
-      n,
-      idNodeMap,
+    serializeNodeWithId(n, {
+      doc: n,
+      map: idNodeMap,
       blockClass,
       blockSelector,
-      false,
+      skipChild: false,
       inlineStylesheet,
       maskInputOptions,
       slimDOMOptions,
       recordCanvas,
-    ),
+    }),
     idNodeMap,
   ];
 }
diff --git a/test/integration.ts b/test/integration.ts
index c0fdf2af71..ddfb5bc88d 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -11,7 +11,7 @@ import { SnapshotState, toMatchSnapshot } from 'jest-snapshot';
 import { Suite } from 'mocha';
 
 const htmlFolder = path.join(__dirname, 'html');
-const htmls = fs.readdirSync(htmlFolder).map(filePath => {
+const htmls = fs.readdirSync(htmlFolder).map((filePath) => {
   const raw = fs.readFileSync(path.resolve(htmlFolder, filePath), 'utf-8');
   return {
     filePath,
@@ -24,7 +24,7 @@ interface IMimeType {
 }
 
 const server = () =>
-  new Promise<http.Server>(resolve => {
+  new Promise<http.Server>((resolve) => {
     const mimeType: IMimeType = {
       '.html': 'text/html',
       '.js': 'text/javascript',
@@ -73,7 +73,7 @@ interface ISuite extends Suite {
   code: string;
 }
 
-describe('integration tests', function(this: ISuite) {
+describe('integration tests', function (this: ISuite) {
   before(async () => {
     this.server = await server();
     this.browser = await puppeteer.launch({
@@ -102,16 +102,18 @@ describe('integration tests', function(this: ISuite) {
       const page: puppeteer.Page = await this.browser.newPage();
       // console for debug
       // tslint:disable-next-line: no-console
-      page.on('console', msg => console.log(msg.text()));
+      page.on('console', (msg) => console.log(msg.text()));
       await page.goto(`http://localhost:3030/html`);
       await page.setContent(html.src, {
         waitUntil: 'load',
       });
-      const rebuildHtml = (await page.evaluate(`${this.code}
+      const rebuildHtml = (
+        await page.evaluate(`${this.code}
         const x = new XMLSerializer();
         const [snap] = rrweb.snapshot(document);
-        x.serializeToString(rrweb.rebuild(snap, document)[0]);
-      `)).replace(/\n\n/g, '');
+        x.serializeToString(rrweb.rebuild(snap, { doc: document })[0]);
+      `)
+      ).replace(/\n\n/g, '');
       const result = matchSnapshot(rebuildHtml, __filename, title);
       assert(result.pass, result.pass ? '' : result.report());
     }).timeout(5000);
diff --git a/typings/rebuild.d.ts b/typings/rebuild.d.ts
index f61a762a69..35eb60208d 100644
--- a/typings/rebuild.d.ts
+++ b/typings/rebuild.d.ts
@@ -1,5 +1,14 @@
 import { serializedNodeWithId, idNodeMap, INode } from './types';
 export declare function addHoverClass(cssText: string): string;
-export declare function buildNodeWithSN(n: serializedNodeWithId, doc: Document, map: idNodeMap, skipChild?: boolean, HACK_CSS?: boolean): INode | null;
-declare function rebuild(n: serializedNodeWithId, doc: Document, onVisit?: (node: INode) => unknown, HACK_CSS?: boolean): [Node | null, idNodeMap];
+export declare function buildNodeWithSN(n: serializedNodeWithId, options: {
+    doc: Document;
+    map: idNodeMap;
+    skipChild?: boolean;
+    hackCss: boolean;
+}): INode | null;
+declare function rebuild(n: serializedNodeWithId, options: {
+    doc: Document;
+    onVisit?: (node: INode) => unknown;
+    hackCss?: boolean;
+}): [Node | null, idNodeMap];
 export default rebuild;
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index d99ef4d650..8ae27a30f7 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -4,8 +4,26 @@ export declare function absoluteToStylesheet(cssText: string | null, href: strin
 export declare function absoluteToDoc(doc: Document, attributeValue: string): string;
 export declare function transformAttribute(doc: Document, name: string, value: string): string;
 export declare function _isBlockedElement(element: HTMLElement, blockClass: string | RegExp, blockSelector: string | null): boolean;
-export declare function serializeNodeWithId(n: Node | INode, doc: Document, map: idNodeMap, blockClass: string | RegExp, blockSelector: string | null, skipChild?: boolean, inlineStylesheet?: boolean, maskInputOptions?: MaskInputOptions, slimDOMOptions?: SlimDOMOptions, recordCanvas?: boolean, preserveWhiteSpace?: boolean): serializedNodeWithId | null;
-declare function snapshot(n: Document, blockClass: string | RegExp | undefined, inlineStylesheet: boolean | undefined, maskAllInputsOrOptions: boolean | MaskInputOptions, slimDOMSensibleOrOptions: boolean | SlimDOMOptions, recordCanvas?: boolean, blockSelector?: string | null): [serializedNodeWithId | null, idNodeMap];
+export declare function serializeNodeWithId(n: Node | INode, options: {
+    doc: Document;
+    map: idNodeMap;
+    blockClass: string | RegExp;
+    blockSelector: string | null;
+    skipChild: boolean;
+    inlineStylesheet: boolean;
+    maskInputOptions?: MaskInputOptions;
+    slimDOMOptions: SlimDOMOptions;
+    recordCanvas?: boolean;
+    preserveWhiteSpace?: boolean;
+}): serializedNodeWithId | null;
+declare function snapshot(n: Document, options?: {
+    blockClass?: string | RegExp;
+    inlineStylesheet?: boolean;
+    maskAllInputs?: boolean | MaskInputOptions;
+    slimDOM?: boolean | SlimDOMOptions;
+    recordCanvas?: boolean;
+    blockSelector?: string | null;
+}): [serializedNodeWithId | null, idNodeMap];
 export declare function visitSnapshot(node: serializedNodeWithId, onVisit: (node: serializedNodeWithId) => unknown): void;
 export declare function cleanupSnapshot(): void;
 export default snapshot;

From 924d2d9911bc848c024a6783e0d9b43e6ee14078 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 29 Nov 2020 13:34:33 +0800
Subject: [PATCH 272/524] Release 1.0.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9852ac7ddb..f9da76fce3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "0.8.4",
+  "version": "1.0.0",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 6c2d85049adbd8b2a1a459508fb4171c792dd937 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 29 Nov 2020 14:37:11 +0800
Subject: [PATCH 273/524] fix https://github.com/rrweb-io/rrweb/issues/395

---
 src/snapshot.ts                        | 7 +++++--
 test/__snapshots__/integration.ts.snap | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 4c17612fc6..81d8e83fa1 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -309,8 +309,11 @@ function serializeNode(
       }
       if (needBlock) {
         const { width, height } = (n as HTMLElement).getBoundingClientRect();
-        attributes.rr_width = `${width}px`;
-        attributes.rr_height = `${height}px`;
+        attributes = {
+          class: attributes.class,
+          rr_width: `${width}px`,
+          rr_height: `${height}px`,
+        };
       }
       return {
         type: NodeType.Element,
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index f5c84e18a2..43bb79cdab 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -70,7 +70,7 @@ exports[`[html file]: block-element.html 1`] = `
     <div class=\\"rr-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=\\"height: 200px; width: 100px\\"></div>
+    <div class=\\"rr-block\\" style=\\"width: 100px; height: 200px;\\"></div>
   </body></html>"
 `;
 

From b6ca577f3e0b4e5ce637f84a1d1b16884b037fa2 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 29 Nov 2020 14:38:04 +0800
Subject: [PATCH 274/524] Release 1.0.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f9da76fce3..ed05752e8d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 563d866a9a24648f4423b2de73676f9ec16cd51a Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 29 Nov 2020 14:44:15 +0800
Subject: [PATCH 275/524] upgrade rrweb

---
 package.json |  2 +-
 yarn.lock    | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 6f2dcd5b0e..33076135d3 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "typescript": "^3.9.7"
   },
   "dependencies": {
-    "rrweb": "^0.9.9"
+    "rrweb": "^0.9.10"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/yarn.lock b/yarn.lock
index d9077f41d9..ea2633558d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1222,21 +1222,21 @@ rollup@^1.20.0:
     "@types/node" "*"
     acorn "^7.1.0"
 
-rrweb-snapshot@^0.8.4:
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-0.8.4.tgz#3f8bf1270975f9dfad60321a29067d2ea39e3c39"
-  integrity sha512-6zY4lEUpA6qEd/ArAo1crWefxsmiXMuK/fTToGmsW+ehR8/pglxTsqpMPEkgQO9uBUIWIUE9I3CyIQkigmt4ug==
+rrweb-snapshot@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/rrweb-snapshot/-/rrweb-snapshot-1.0.1.tgz#f3800f4deb434da02b6086533c5c38e23e7e796b"
+  integrity sha512-HKbfbTTDSTy4T0h/w9SubI1E5kL/qLiK08pJZRLA0MmGtqJ5nCTMtpEZXgCKMUncH3lb1rbiu+sDIoxKD+Anng==
 
-rrweb@^0.9.9:
-  version "0.9.9"
-  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-0.9.9.tgz#d502271f08620cd880a2be452e78ab78186173cb"
-  integrity sha512-w7KcyQp4r1vhHmPfxSnk2JriDdR9F9w6ABnEylwfhKjQR267T3WEYh9niRc1CBvXIrybTk6bzMuOqqXg4ziOWw==
+rrweb@^0.9.10:
+  version "0.9.10"
+  resolved "https://registry.npmjs.org/rrweb/-/rrweb-0.9.10.tgz#4f6611c1fda24a65b9db31e7a85c293f3cbfcfc2"
+  integrity sha512-AO/yxZ/iZ2If+PiyPFGLpgFPkkP9XC1eB0J6ItPuki2rSEVxKbSapk4AYnWKTeoNBjGDwcgUp1hKsBNQAziT5Q==
   dependencies:
     "@types/css-font-loading-module" "0.0.4"
     "@xstate/fsm" "^1.4.0"
     mitt "^1.1.3"
     pako "^1.0.11"
-    rrweb-snapshot "^0.8.4"
+    rrweb-snapshot "^1.0.1"
 
 sade@^1.4.0:
   version "1.7.3"

From c420c6b5569a7cd311cc2a45052b360b175b11d5 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 29 Nov 2020 14:44:32 +0800
Subject: [PATCH 276/524] Release 0.6.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 33076135d3..3154c4dad9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From 451bde0a2991f2c779e4eef37fcdf2eb9dfafe1f Mon Sep 17 00:00:00 2001
From: Jonithan <zhou_lihan@163.com>
Date: Wed, 2 Dec 2020 22:07:55 +0800
Subject: [PATCH 277/524] 2 commits for optimizing chore (#53)

* fix: chore bug. Update rollup-plugin-svelte

* chore: move @tsconfig/svelte from devDependencies to dependencies, convenience for building components in other framework and typescrpit

Co-authored-by: lihanzhou <lihanzhou@tencent.com>
---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 3154c4dad9..496d609eec 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,6 @@
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",
     "@rollup/plugin-typescript": "^4.0.0",
-    "@tsconfig/svelte": "^1.0.0",
     "@typescript-eslint/eslint-plugin": "^3.7.0",
     "@typescript-eslint/parser": "^3.7.0",
     "eslint": "^7.5.0",
@@ -14,7 +13,7 @@
     "postcss-easy-import": "^3.0.0",
     "rollup": "^1.20.0",
     "rollup-plugin-livereload": "^1.0.0",
-    "rollup-plugin-svelte": "^5.0.3",
+    "rollup-plugin-svelte": "^6.1.1",
     "rollup-plugin-terser": "^5.1.2",
     "sirv-cli": "^0.4.4",
     "svelte": "^3.2.0",
@@ -24,7 +23,8 @@
     "typescript": "^3.9.7"
   },
   "dependencies": {
-    "rrweb": "^0.9.10"
+    "rrweb": "^0.9.10",
+    "@tsconfig/svelte": "^1.0.0"
   },
   "scripts": {
     "build": "rollup -c",

From 1cc7164f2ca138be2278119f1ab37dc17ee16375 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 21 Dec 2020 12:37:13 +0800
Subject: [PATCH 278/524] fix
 https://github.com/rrweb-io/rrweb-snapshot/issues/56 safe access tagName of
 form element

---
 src/snapshot.ts                        | 10 ++--
 test/__snapshots__/integration.ts.snap | 56 ++++++++++---------
 test/html/form-fields.html             | 75 +++++++++++++-------------
 3 files changed, 75 insertions(+), 66 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 81d8e83fa1..b3f161a8f9 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -18,8 +18,12 @@ function genId(): number {
   return _id++;
 }
 
-function getValidTagName(tagName: string): string {
-  const processedTagName = tagName.toLowerCase().trim();
+function getValidTagName(element: HTMLElement): string {
+  if (element instanceof HTMLFormElement) {
+    return 'form';
+  }
+
+  const processedTagName = element.tagName.toLowerCase().trim();
 
   if (tagNameRegex.test(processedTagName)) {
     // if the tag name is odd and we cannot extract
@@ -223,7 +227,7 @@ function serializeNode(
         blockClass,
         blockSelector,
       );
-      const tagName = getValidTagName((n as HTMLElement).tagName);
+      const tagName = getValidTagName(n as HTMLElement);
       let attributes: attributes = {};
       for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
         attributes[name] = transformAttribute(doc, name, value);
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 43bb79cdab..d7d76c6dd5 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -102,32 +102,36 @@ exports[`[html file]: dynamic-stylesheet.html 1`] = `
 
 exports[`[html file]: form-fields.html 1`] = `
 "<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
-  <meta charset=\\"UTF-8\\" />
-  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
-  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
-  <title>form fields</title>
-</head><body>
-  <form>
-    <label for=\\"text\\">
-      <input type=\\"text\\" value=\\"1\\" />
-    </label>
-    <label for=\\"radio\\">
-      <input type=\\"radio\\" checked=\\"\\" />
-    </label>
-    <label for=\\"checkbox\\">
-      <input type=\\"checkbox\\" checked=\\"\\" />
-    </label>
-    <label for=\\"textarea\\">
-      <textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\">1234</textarea>
-    </label>
-    <label for=\\"select\\">
-      <select name=\\"\\" id=\\"\\" value=\\"2\\">
-        <option value=\\"1\\">1</option>
-        <option value=\\"2\\" selected=\\"\\">2</option>
-      </select>
-    </label>
-  </form><noscript>SCRIPT_PLACEHOLDER</noscript>
-</body></html>"
+    <meta charset=\\"UTF-8\\" />
+    <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+    <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+    <title>form fields</title>
+  </head>  <body>
+    <form>
+      <label for=\\"text\\">
+        <input type=\\"text\\" value=\\"1\\" />
+      </label>
+      <label for=\\"radio\\">
+        <input type=\\"radio\\" checked=\\"\\" />
+      </label>
+      <label for=\\"checkbox\\">
+        <input type=\\"checkbox\\" checked=\\"\\" />
+      </label>
+      <label for=\\"textarea\\">
+        <textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\">1234</textarea>
+      </label>
+      <label for=\\"select\\">
+        <select name=\\"\\" id=\\"\\" value=\\"2\\">
+          <option value=\\"1\\">1</option>
+          <option value=\\"2\\" selected=\\"\\">2</option>
+        </select>
+      </label>
+      <label>
+        <input name=\\"tagName\\" />
+      </label>
+    </form>
+  
+  <noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
 `;
 
 exports[`[html file]: hover.html 1`] = `
diff --git a/test/html/form-fields.html b/test/html/form-fields.html
index 50778d603b..31a35afa10 100644
--- a/test/html/form-fields.html
+++ b/test/html/form-fields.html
@@ -1,41 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>form fields</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>form fields</title>
-</head>
-
-<body>
-  <form>
-    <label for="text">
-      <input type="text">
-    </label>
-    <label for="radio">
-      <input type="radio">
-    </label>
-    <label for="checkbox">
-      <input type="checkbox">
-    </label>
-    <label for="textarea">
-      <textarea name="" id="" cols="30" rows="10"></textarea>
-    </label>
-    <label for="select">
-      <select name="" id="">
-        <option value="1">1</option>
-        <option value="2">2</option>
-      </select>
-    </label>
-  </form>
-</body>
-<script>
-  document.querySelector('input[type="text"]').value = '1';
-  document.querySelector('input[type="radio"]').checked = true;
-  document.querySelector('input[type="checkbox"]').checked = true;
-  document.querySelector('textarea').value = '1234';
-  document.querySelector('select').value = '2';
-</script>
-
+  <body>
+    <form>
+      <label for="text">
+        <input type="text" />
+      </label>
+      <label for="radio">
+        <input type="radio" />
+      </label>
+      <label for="checkbox">
+        <input type="checkbox" />
+      </label>
+      <label for="textarea">
+        <textarea name="" id="" cols="30" rows="10"></textarea>
+      </label>
+      <label for="select">
+        <select name="" id="">
+          <option value="1">1</option>
+          <option value="2">2</option>
+        </select>
+      </label>
+      <label>
+        <input name="tagName" />
+      </label>
+    </form>
+  </body>
+  <script>
+    document.querySelector('input[type="text"]').value = '1';
+    document.querySelector('input[type="radio"]').checked = true;
+    document.querySelector('input[type="checkbox"]').checked = true;
+    document.querySelector('textarea').value = '1234';
+    document.querySelector('select').value = '2';
+  </script>
 </html>

From 7cd09daad09ce6ef5d034d2c5a33c7ff76f05cf4 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 2 Jan 2021 14:35:58 +0800
Subject: [PATCH 279/524] Release 1.0.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ed05752e8d..08efd87a50 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 4db18d5d24299597c24e5899518c6dec97eda043 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 2 Jan 2021 15:31:23 +0800
Subject: [PATCH 280/524] upgrade rrweb

---
 package.json |  2 +-
 yarn.lock    | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 496d609eec..88f42222d8 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "typescript": "^3.9.7"
   },
   "dependencies": {
-    "rrweb": "^0.9.10",
+    "rrweb": "^0.9.12",
     "@tsconfig/svelte": "^1.0.0"
   },
   "scripts": {
diff --git a/yarn.lock b/yarn.lock
index ea2633558d..8ecdeaba9a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -624,6 +624,11 @@ fast-levenshtein@^2.0.6:
   resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fflate@^0.4.4:
+  version "0.4.8"
+  resolved "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
+  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
+
 file-entry-cache@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
@@ -995,11 +1000,6 @@ optionator@^0.9.1:
   resolved "https://registry.npmjs.org/opts/-/opts-2.0.0.tgz#c0b2cebdf53eaeafc21ed844e34773758dcf41e2"
   integrity sha512-rPleeyX48sBEc4aj7rAok5dCbvRdYpdbIdSRR4gnIK98a7Rvd4l3wlv4YHQr2mwPQTpKQiw8uipi/WoyItDINg==
 
-pako@^1.0.11:
-  version "1.0.11"
-  resolved "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
-  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
-
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -1227,15 +1227,15 @@ rrweb-snapshot@^1.0.1:
   resolved "https://registry.npmjs.org/rrweb-snapshot/-/rrweb-snapshot-1.0.1.tgz#f3800f4deb434da02b6086533c5c38e23e7e796b"
   integrity sha512-HKbfbTTDSTy4T0h/w9SubI1E5kL/qLiK08pJZRLA0MmGtqJ5nCTMtpEZXgCKMUncH3lb1rbiu+sDIoxKD+Anng==
 
-rrweb@^0.9.10:
-  version "0.9.10"
-  resolved "https://registry.npmjs.org/rrweb/-/rrweb-0.9.10.tgz#4f6611c1fda24a65b9db31e7a85c293f3cbfcfc2"
-  integrity sha512-AO/yxZ/iZ2If+PiyPFGLpgFPkkP9XC1eB0J6ItPuki2rSEVxKbSapk4AYnWKTeoNBjGDwcgUp1hKsBNQAziT5Q==
+rrweb@^0.9.12:
+  version "0.9.12"
+  resolved "https://registry.npmjs.org/rrweb/-/rrweb-0.9.12.tgz#601c6fbc166c1f3ebffaa4a83a1c41845c7f1520"
+  integrity sha512-9ZYefSOCtNkwkNgINTZ014Kt+g4J+6X8cR8b03h/kATI92DutcwPr4KwL+qlgUJnccWXoiC5Xkbl5trtQSEG0Q==
   dependencies:
     "@types/css-font-loading-module" "0.0.4"
     "@xstate/fsm" "^1.4.0"
+    fflate "^0.4.4"
     mitt "^1.1.3"
-    pako "^1.0.11"
     rrweb-snapshot "^1.0.1"
 
 sade@^1.4.0:

From 2982a5527909c275de2526d00b641a1565a62419 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 2 Jan 2021 15:37:29 +0800
Subject: [PATCH 281/524] Release 0.7.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 88f42222d8..d975cd7a07 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From e1c90aae9aa8f507b8201667e2c69f2af8bad1b0 Mon Sep 17 00:00:00 2001
From: cgf <cgf2009@126.com>
Date: Sat, 16 Jan 2021 21:21:52 +0800
Subject: [PATCH 282/524] =?UTF-8?q?svg=20xlink:href=20=E8=B7=AF=E5=BE=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=20(#55)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 修改在svg , xlink:href 相对路径改为绝对路径

* feat: 修改在svg , xlink:href 路径

* feat: 修改在svg, 图片路径问题

* feat: 修改在svg, 图片路径问题

* feat: 修改在svg , xlink:href 路径

Co-authored-by: caogf <caogf@guahao.com>
---
 src/snapshot.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index b3f161a8f9..e23d2a70da 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -155,7 +155,7 @@ export function transformAttribute(
   value: string,
 ): string {
   // relative path in attribute
-  if (name === 'src' || (name === 'href' && value)) {
+  if (name === 'src' || ((name === 'href' || name === 'xlink:href') && value)) {
     return absoluteToDoc(doc, value);
   } else if (name === 'srcset' && value) {
     return getAbsoluteSrcsetString(doc, value);

From 98cc4ee709d9cd9c0fd08b16099d93747c364b6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=B6Cccccc?= <leoassw@gmail.com>
Date: Sat, 16 Jan 2021 21:22:45 +0800
Subject: [PATCH 283/524] =?UTF-8?q?bugfix:=20svg=20url=E4=B8=ADid=20name?=
 =?UTF-8?q?=E8=A2=AB=E8=AF=AF=E8=BD=AC=E4=B8=BA=E7=BB=9D=E5=AF=B9=E8=B7=AF?=
 =?UTF-8?q?=E5=BE=84=20(#59)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: wanglei002 <wanglei002@sensorsdata.cn>
---
 src/snapshot.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index e23d2a70da..3d04acc304 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -66,7 +66,7 @@ function extractOrigin(url: string): string {
 }
 
 const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")([^"]*)"|([^)]*))\)/gm;
-const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/;
+const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/|#).*/;
 const DATA_URI = /^(data:)([^,]*),(.*)/i;
 export function absoluteToStylesheet(
   cssText: string | null,

From c1c687ad93f44a4e7bc7a6342f1a9adbbefc3052 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 16 Jan 2021 21:24:40 +0800
Subject: [PATCH 284/524] Release 1.0.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 08efd87a50..9944c0ee1a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From c7f4c36702d7e2ef020f5d87e79d3923bd1cd6be Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 4 Feb 2021 14:48:28 +0800
Subject: [PATCH 285/524] fix href value

---
 src/snapshot.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 3d04acc304..fcfb9f561c 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -149,6 +149,13 @@ function isSVGElement(el: Element): boolean {
   return el.tagName === 'svg' || el instanceof SVGElement;
 }
 
+function getHref() {
+  // return a href without hash
+  const a = document.createElement('a');
+  a.href = '';
+  return a.href;
+}
+
 export function transformAttribute(
   doc: Document,
   name: string,
@@ -160,7 +167,7 @@ export function transformAttribute(
   } else if (name === 'srcset' && value) {
     return getAbsoluteSrcsetString(doc, value);
   } else if (name === 'style' && value) {
-    return absoluteToStylesheet(value, location.href);
+    return absoluteToStylesheet(value, getHref());
   } else {
     return value;
   }
@@ -262,7 +269,7 @@ function serializeNode(
           (n as HTMLStyleElement).sheet as CSSStyleSheet,
         );
         if (cssText) {
-          attributes._cssText = absoluteToStylesheet(cssText, location.href);
+          attributes._cssText = absoluteToStylesheet(cssText, getHref());
         }
       }
       // form fields
@@ -335,7 +342,7 @@ function serializeNode(
       let textContent = (n as Text).textContent;
       const isStyle = parentTagName === 'STYLE' ? true : undefined;
       if (isStyle && textContent) {
-        textContent = absoluteToStylesheet(textContent, location.href);
+        textContent = absoluteToStylesheet(textContent, getHref());
       }
       if (parentTagName === 'SCRIPT') {
         textContent = 'SCRIPT_PLACEHOLDER';

From a3ff5e5ea806ee19db8e9890312eeb0b57b6ed5e Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 4 Feb 2021 14:49:20 +0800
Subject: [PATCH 286/524] Release 1.0.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9944c0ee1a..ce0b68168f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 98aa732d176aee25a97dcaf4f77bbc93d832cac3 Mon Sep 17 00:00:00 2001
From: yz-yu <yanzhen@smartx.com>
Date: Sun, 7 Feb 2021 14:00:22 +0800
Subject: [PATCH 287/524] nested record iframe (#63)

* pick nested branch

* iframe snapshot

* temp: add bundle file to git

* revert ignore file

* refactor iframe impl
1. do callback one iframe is loaded, let rrweb handle the rest
2. handle iframe as normal element in rebuild

* rename hook function
---
 src/rebuild.ts                         |  24 ++++-
 src/snapshot.ts                        |  93 +++++++++++++++++
 src/types.ts                           |   7 +-
 test/__snapshots__/integration.ts.snap | 132 +++++++++++++++++++++++++
 test/iframe-html/frame1.html           |  13 +++
 test/iframe-html/frame2.html           |  11 +++
 test/iframe-html/main.html             |  12 +++
 test/integration.ts                    |  47 +++++++++
 typings/rebuild.d.ts                   |   2 +
 typings/snapshot.d.ts                  |   5 +
 typings/types.d.ts                     |   4 +-
 11 files changed, 343 insertions(+), 7 deletions(-)
 create mode 100644 test/iframe-html/frame1.html
 create mode 100644 test/iframe-html/frame2.html
 create mode 100644 test/iframe-html/main.html

diff --git a/src/rebuild.ts b/src/rebuild.ts
index b09d42342e..8091be3bc9 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -198,13 +198,20 @@ export function buildNodeWithSN(
     map: idNodeMap;
     skipChild?: boolean;
     hackCss: boolean;
+    afterAppend?: (n: INode) => unknown;
   },
 ): INode | null {
-  const { doc, map, skipChild = false, hackCss = true } = options;
+  const { doc, map, skipChild = false, hackCss = true, afterAppend } = options;
   let node = buildNode(n, { doc, hackCss });
   if (!node) {
     return null;
   }
+  if (n.rootId) {
+    console.assert(
+      ((map[n.rootId] as unknown) as Document) === doc,
+      'Target document should has the same root id.',
+    );
+  }
   // use target document as root document
   if (n.type === NodeType.Document) {
     // close before open to make sure document was closed
@@ -215,6 +222,7 @@ export function buildNodeWithSN(
 
   (node as INode).__sn = n;
   map[n.id] = node as INode;
+
   if (
     (n.type === NodeType.Document || n.type === NodeType.Element) &&
     !skipChild
@@ -225,14 +233,20 @@ export function buildNodeWithSN(
         map,
         skipChild: false,
         hackCss,
+        afterAppend,
       });
       if (!childNode) {
         console.warn('Failed to rebuild', childN);
-      } else {
-        node.appendChild(childNode);
+        continue;
+      }
+
+      node.appendChild(childNode);
+      if (afterAppend) {
+        afterAppend(childNode);
       }
     }
   }
+
   return node as INode;
 }
 
@@ -274,15 +288,17 @@ function rebuild(
     doc: Document;
     onVisit?: (node: INode) => unknown;
     hackCss?: boolean;
+    afterAppend?: (n: INode) => unknown;
   },
 ): [Node | null, idNodeMap] {
-  const { doc, onVisit, hackCss = true } = options;
+  const { doc, onVisit, hackCss = true, afterAppend } = options;
   const idNodeMap: idNodeMap = {};
   const node = buildNodeWithSN(n, {
     doc,
     map: idNodeMap,
     skipChild: false,
     hackCss,
+    afterAppend,
   });
   visit(idNodeMap, (visitedNode) => {
     if (onVisit) {
diff --git a/src/snapshot.ts b/src/snapshot.ts
index fcfb9f561c..9ddc39d513 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -196,6 +196,34 @@ export function _isBlockedElement(
   return false;
 }
 
+// https://stackoverflow.com/a/36155560
+function onceIframeLoaded(
+  iframeEl: HTMLIFrameElement,
+  listener: () => unknown,
+) {
+  const win = iframeEl.contentWindow;
+  if (!win) {
+    return;
+  }
+  // document is loading
+  if (win.document.readyState !== 'complete') {
+    iframeEl.addEventListener('load', listener);
+    return;
+  }
+  // check blank frame for Chrome
+  const blankUrl = 'about:blank';
+  if (
+    win.location.href !== blankUrl ||
+    iframeEl.src === blankUrl ||
+    iframeEl.src === ''
+  ) {
+    listener();
+    return;
+  }
+  // use default listener
+  iframeEl.addEventListener('load', listener);
+}
+
 function serializeNode(
   n: Node,
   options: {
@@ -215,11 +243,18 @@ function serializeNode(
     maskInputOptions = {},
     recordCanvas,
   } = options;
+  // Only record root id when document object is not the base document
+  let rootId: number | undefined;
+  if (((doc as unknown) as INode).__sn) {
+    const docId = ((doc as unknown) as INode).__sn.id;
+    rootId = docId === 1 ? undefined : docId;
+  }
   switch (n.nodeType) {
     case n.DOCUMENT_NODE:
       return {
         type: NodeType.Document,
         childNodes: [],
+        rootId,
       };
     case n.DOCUMENT_TYPE_NODE:
       return {
@@ -227,6 +262,7 @@ function serializeNode(
         name: (n as DocumentType).name,
         publicId: (n as DocumentType).publicId,
         systemId: (n as DocumentType).systemId,
+        rootId,
       };
     case n.ELEMENT_NODE:
       const needBlock = _isBlockedElement(
@@ -318,6 +354,7 @@ function serializeNode(
       if ((n as HTMLElement).scrollTop) {
         attributes.rr_scrollTop = (n as HTMLElement).scrollTop;
       }
+      // block element
       if (needBlock) {
         const { width, height } = (n as HTMLElement).getBoundingClientRect();
         attributes = {
@@ -326,6 +363,10 @@ function serializeNode(
           rr_height: `${height}px`,
         };
       }
+      // iframe
+      if (tagName === 'iframe') {
+        delete attributes.src;
+      }
       return {
         type: NodeType.Element,
         tagName,
@@ -333,6 +374,7 @@ function serializeNode(
         childNodes: [],
         isSVG: isSVGElement(n as Element) || undefined,
         needBlock,
+        rootId,
       };
     case n.TEXT_NODE:
       // The parent node may not be a html element which has a tagName attribute.
@@ -351,16 +393,19 @@ function serializeNode(
         type: NodeType.Text,
         textContent: textContent || '',
         isStyle,
+        rootId,
       };
     case n.CDATA_SECTION_NODE:
       return {
         type: NodeType.CDATA,
         textContent: '',
+        rootId,
       };
     case n.COMMENT_NODE:
       return {
         type: NodeType.Comment,
         textContent: (n as Comment).textContent || '',
+        rootId,
       };
     default:
       return false;
@@ -472,6 +517,8 @@ export function serializeNodeWithId(
     slimDOMOptions: SlimDOMOptions;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
+    onSerialize?: (n: INode) => unknown;
+    onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
   },
 ): serializedNodeWithId | null {
   const {
@@ -484,6 +531,8 @@ export function serializeNodeWithId(
     maskInputOptions = {},
     slimDOMOptions,
     recordCanvas = false,
+    onSerialize,
+    onIframeLoad,
   } = options;
   let { preserveWhiteSpace = true } = options;
   const _serializedNode = serializeNode(n, {
@@ -521,6 +570,9 @@ export function serializeNodeWithId(
     return null; // slimDOM
   }
   map[id] = n as INode;
+  if (onSerialize) {
+    onSerialize(n as INode);
+  }
   let recordChild = !skipChild;
   if (serializedNode.type === NodeType.Element) {
     recordChild = recordChild && !serializedNode.needBlock;
@@ -552,12 +604,44 @@ export function serializeNodeWithId(
         slimDOMOptions,
         recordCanvas,
         preserveWhiteSpace,
+        onSerialize,
+        onIframeLoad,
       });
       if (serializedChildNode) {
         serializedNode.childNodes.push(serializedChildNode);
       }
     }
   }
+
+  if (
+    serializedNode.type === NodeType.Element &&
+    serializedNode.tagName === 'iframe'
+  ) {
+    onceIframeLoaded(n as HTMLIFrameElement, () => {
+      const iframeDoc = (n as HTMLIFrameElement).contentDocument;
+      if (iframeDoc && onIframeLoad) {
+        const serializedIframeNode = serializeNodeWithId(iframeDoc, {
+          doc: iframeDoc,
+          map,
+          blockClass,
+          blockSelector,
+          skipChild: false,
+          inlineStylesheet,
+          maskInputOptions,
+          slimDOMOptions,
+          recordCanvas,
+          preserveWhiteSpace,
+          onSerialize,
+          onIframeLoad,
+        });
+
+        if (serializedIframeNode) {
+          onIframeLoad(n as INode, serializedIframeNode);
+        }
+      }
+    });
+  }
+
   return serializedNode;
 }
 
@@ -570,6 +654,9 @@ function snapshot(
     slimDOM?: boolean | SlimDOMOptions;
     recordCanvas?: boolean;
     blockSelector?: string | null;
+    preserveWhiteSpace?: boolean;
+    onSerialize?: (n: INode) => unknown;
+    onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
   },
 ): [serializedNodeWithId | null, idNodeMap] {
   const {
@@ -579,6 +666,9 @@ function snapshot(
     blockSelector = null,
     maskAllInputs = false,
     slimDOM = false,
+    preserveWhiteSpace,
+    onSerialize,
+    onIframeLoad,
   } = options || {};
   const idNodeMap: idNodeMap = {};
   const maskInputOptions: MaskInputOptions =
@@ -632,6 +722,9 @@ function snapshot(
       maskInputOptions,
       slimDOMOptions,
       recordCanvas,
+      preserveWhiteSpace,
+      onSerialize,
+      onIframeLoad,
     }),
     idNodeMap,
   ];
diff --git a/src/types.ts b/src/types.ts
index 9a53c0126f..3ae2d76f9c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -47,13 +47,16 @@ export type commentNode = {
   textContent: string;
 };
 
-export type serializedNode =
+export type serializedNode = (
   | documentNode
   | documentTypeNode
   | elementNode
   | textNode
   | cdataNode
-  | commentNode;
+  | commentNode
+) & {
+  rootId?: number;
+};
 
 export type serializedNodeWithId = serializedNode & { id: number };
 
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index d7d76c6dd5..75734c14b7 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -277,3 +277,135 @@ exports[`[html file]: with-style-sheet-with-import.html 1`] = `
 </head><body>
 </body></html>"
 `;
+
+exports[`iframe integration tests 1`] = `
+"{
+  \\"type\\": 0,
+  \\"childNodes\\": [
+    {
+      \\"type\\": 1,
+      \\"name\\": \\"html\\",
+      \\"publicId\\": \\"\\",
+      \\"systemId\\": \\"\\",
+      \\"id\\": 2
+    },
+    {
+      \\"type\\": 2,
+      \\"tagName\\": \\"html\\",
+      \\"attributes\\": {
+        \\"lang\\": \\"en\\"
+      },
+      \\"childNodes\\": [
+        {
+          \\"type\\": 2,
+          \\"tagName\\": \\"head\\",
+          \\"attributes\\": {},
+          \\"childNodes\\": [
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n    \\",
+              \\"id\\": 5
+            },
+            {
+              \\"type\\": 2,
+              \\"tagName\\": \\"meta\\",
+              \\"attributes\\": {
+                \\"charset\\": \\"UTF-8\\"
+              },
+              \\"childNodes\\": [],
+              \\"id\\": 6
+            },
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n    \\",
+              \\"id\\": 7
+            },
+            {
+              \\"type\\": 2,
+              \\"tagName\\": \\"meta\\",
+              \\"attributes\\": {
+                \\"name\\": \\"viewport\\",
+                \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+              },
+              \\"childNodes\\": [],
+              \\"id\\": 8
+            },
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n    \\",
+              \\"id\\": 9
+            },
+            {
+              \\"type\\": 2,
+              \\"tagName\\": \\"title\\",
+              \\"attributes\\": {},
+              \\"childNodes\\": [
+                {
+                  \\"type\\": 3,
+                  \\"textContent\\": \\"Main\\",
+                  \\"id\\": 11
+                }
+              ],
+              \\"id\\": 10
+            },
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n  \\",
+              \\"id\\": 12
+            }
+          ],
+          \\"id\\": 4
+        },
+        {
+          \\"type\\": 3,
+          \\"textContent\\": \\"\\\\n  \\",
+          \\"id\\": 13
+        },
+        {
+          \\"type\\": 2,
+          \\"tagName\\": \\"body\\",
+          \\"attributes\\": {},
+          \\"childNodes\\": [
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n    \\",
+              \\"id\\": 15
+            },
+            {
+              \\"type\\": 2,
+              \\"tagName\\": \\"iframe\\",
+              \\"attributes\\": {
+                \\"id\\": \\"one\\"
+              },
+              \\"childNodes\\": [],
+              \\"id\\": 16
+            },
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n    \\",
+              \\"id\\": 17
+            },
+            {
+              \\"type\\": 2,
+              \\"tagName\\": \\"iframe\\",
+              \\"attributes\\": {
+                \\"id\\": \\"two\\"
+              },
+              \\"childNodes\\": [],
+              \\"id\\": 18
+            },
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n  \\\\n\\\\n\\",
+              \\"id\\": 19
+            }
+          ],
+          \\"id\\": 14
+        }
+      ],
+      \\"id\\": 3
+    }
+  ],
+  \\"id\\": 1
+}"
+`;
diff --git a/test/iframe-html/frame1.html b/test/iframe-html/frame1.html
new file mode 100644
index 0000000000..8810af4608
--- /dev/null
+++ b/test/iframe-html/frame1.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Frame 1</title>
+  </head>
+  <body>
+    frame 1
+    <iframe id="three" frameborder="0"></iframe>
+    <iframe id="four" src="./frame2.html" frameborder="0"></iframe>
+  </body>
+</html>
diff --git a/test/iframe-html/frame2.html b/test/iframe-html/frame2.html
new file mode 100644
index 0000000000..343240858e
--- /dev/null
+++ b/test/iframe-html/frame2.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Frame 2</title>
+  </head>
+  <body>
+    frame 2
+  </body>
+</html>
diff --git a/test/iframe-html/main.html b/test/iframe-html/main.html
new file mode 100644
index 0000000000..d8e712bc85
--- /dev/null
+++ b/test/iframe-html/main.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Main</title>
+  </head>
+  <body>
+    <iframe id="one"></iframe>
+    <iframe id="two" src="./frame1.html"></iframe>
+  </body>
+</html>
diff --git a/test/integration.ts b/test/integration.ts
index ddfb5bc88d..807639f09a 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -119,3 +119,50 @@ describe('integration tests', function (this: ISuite) {
     }).timeout(5000);
   }
 });
+
+describe('iframe integration tests', function (this: ISuite) {
+  const iframeHtml = path.join(__dirname, 'iframe-html/main.html');
+  const raw = fs.readFileSync(iframeHtml, 'utf-8');
+
+  before(async () => {
+    this.server = await server();
+    this.browser = await puppeteer.launch({
+      // headless: false,
+    });
+
+    const bundle = await rollup.rollup({
+      input: path.resolve(__dirname, '../src/index.ts'),
+      plugins: [typescript()],
+    });
+    const { code } = await bundle.generate({
+      name: 'rrweb',
+      format: 'iife',
+    });
+    this.code = code;
+  });
+
+  after(async () => {
+    await this.browser.close();
+    await this.server.close();
+  });
+
+  it('snapshot async iframes', async () => {
+    const page: puppeteer.Page = await this.browser.newPage();
+    // console for debug
+    // tslint:disable-next-line: no-console
+    page.on('console', (msg) => console.log(msg.text()));
+    await page.goto(`http://localhost:3030/html`);
+    await page.setContent(raw, {
+      waitUntil: 'load',
+    });
+    const snapshotResult = JSON.stringify(
+      await page.evaluate(`${this.code};
+      rrweb.snapshot(document)[0];
+    `),
+      null,
+      2,
+    );
+    const result = matchSnapshot(snapshotResult, __filename, this.title);
+    assert(result.pass, result.pass ? '' : result.report());
+  }).timeout(5000);
+});
diff --git a/typings/rebuild.d.ts b/typings/rebuild.d.ts
index 35eb60208d..6ab9f04b94 100644
--- a/typings/rebuild.d.ts
+++ b/typings/rebuild.d.ts
@@ -5,10 +5,12 @@ export declare function buildNodeWithSN(n: serializedNodeWithId, options: {
     map: idNodeMap;
     skipChild?: boolean;
     hackCss: boolean;
+    afterAppend?: (n: INode) => unknown;
 }): INode | null;
 declare function rebuild(n: serializedNodeWithId, options: {
     doc: Document;
     onVisit?: (node: INode) => unknown;
     hackCss?: boolean;
+    afterAppend?: (n: INode) => unknown;
 }): [Node | null, idNodeMap];
 export default rebuild;
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index 8ae27a30f7..053e3a19f6 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -15,6 +15,8 @@ export declare function serializeNodeWithId(n: Node | INode, options: {
     slimDOMOptions: SlimDOMOptions;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
+    onSerialize?: (n: INode) => unknown;
+    onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
 }): serializedNodeWithId | null;
 declare function snapshot(n: Document, options?: {
     blockClass?: string | RegExp;
@@ -23,6 +25,9 @@ declare function snapshot(n: Document, options?: {
     slimDOM?: boolean | SlimDOMOptions;
     recordCanvas?: boolean;
     blockSelector?: string | null;
+    preserveWhiteSpace?: boolean;
+    onSerialize?: (n: INode) => unknown;
+    onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
 }): [serializedNodeWithId | null, idNodeMap];
 export declare function visitSnapshot(node: serializedNodeWithId, onVisit: (node: serializedNodeWithId) => unknown): void;
 export declare function cleanupSnapshot(): void;
diff --git a/typings/types.d.ts b/typings/types.d.ts
index 256abba52d..8efab81733 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -40,7 +40,9 @@ export declare type commentNode = {
     type: NodeType.Comment;
     textContent: string;
 };
-export declare type serializedNode = documentNode | documentTypeNode | elementNode | textNode | cdataNode | commentNode;
+export declare type serializedNode = (documentNode | documentTypeNode | elementNode | textNode | cdataNode | commentNode) & {
+    rootId?: number;
+};
 export declare type serializedNodeWithId = serializedNode & {
     id: number;
 };

From 1dbe2c12182188e5191e223d0c2f33c75f11c298 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 7 Feb 2021 14:01:45 +0800
Subject: [PATCH 288/524] Release 1.0.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ce0b68168f..d18497ae80 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From d7668efbcf718db124672a454033ed7402043472 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 10 Feb 2021 21:26:07 +0800
Subject: [PATCH 289/524] add iframe load timeout

---
 src/snapshot.ts       | 69 ++++++++++++++++++++++++++++---------------
 typings/snapshot.d.ts |  2 ++
 2 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 9ddc39d513..7754465656 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -200,14 +200,26 @@ export function _isBlockedElement(
 function onceIframeLoaded(
   iframeEl: HTMLIFrameElement,
   listener: () => unknown,
+  iframeLoadTimeout: number,
 ) {
   const win = iframeEl.contentWindow;
   if (!win) {
     return;
   }
   // document is loading
+  let fired = false;
   if (win.document.readyState !== 'complete') {
-    iframeEl.addEventListener('load', listener);
+    const timer = setTimeout(() => {
+      if (!fired) {
+        listener();
+        fired = true;
+      }
+    }, iframeLoadTimeout);
+    iframeEl.addEventListener('load', () => {
+      clearTimeout(timer);
+      fired = true;
+      listener();
+    });
     return;
   }
   // check blank frame for Chrome
@@ -519,6 +531,7 @@ export function serializeNodeWithId(
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
     onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
+    iframeLoadTimeout?: number;
   },
 ): serializedNodeWithId | null {
   const {
@@ -533,6 +546,7 @@ export function serializeNodeWithId(
     recordCanvas = false,
     onSerialize,
     onIframeLoad,
+    iframeLoadTimeout = 5000,
   } = options;
   let { preserveWhiteSpace = true } = options;
   const _serializedNode = serializeNode(n, {
@@ -606,6 +620,7 @@ export function serializeNodeWithId(
         preserveWhiteSpace,
         onSerialize,
         onIframeLoad,
+        iframeLoadTimeout,
       });
       if (serializedChildNode) {
         serializedNode.childNodes.push(serializedChildNode);
@@ -617,29 +632,34 @@ export function serializeNodeWithId(
     serializedNode.type === NodeType.Element &&
     serializedNode.tagName === 'iframe'
   ) {
-    onceIframeLoaded(n as HTMLIFrameElement, () => {
-      const iframeDoc = (n as HTMLIFrameElement).contentDocument;
-      if (iframeDoc && onIframeLoad) {
-        const serializedIframeNode = serializeNodeWithId(iframeDoc, {
-          doc: iframeDoc,
-          map,
-          blockClass,
-          blockSelector,
-          skipChild: false,
-          inlineStylesheet,
-          maskInputOptions,
-          slimDOMOptions,
-          recordCanvas,
-          preserveWhiteSpace,
-          onSerialize,
-          onIframeLoad,
-        });
-
-        if (serializedIframeNode) {
-          onIframeLoad(n as INode, serializedIframeNode);
+    onceIframeLoaded(
+      n as HTMLIFrameElement,
+      () => {
+        const iframeDoc = (n as HTMLIFrameElement).contentDocument;
+        if (iframeDoc && onIframeLoad) {
+          const serializedIframeNode = serializeNodeWithId(iframeDoc, {
+            doc: iframeDoc,
+            map,
+            blockClass,
+            blockSelector,
+            skipChild: false,
+            inlineStylesheet,
+            maskInputOptions,
+            slimDOMOptions,
+            recordCanvas,
+            preserveWhiteSpace,
+            onSerialize,
+            onIframeLoad,
+            iframeLoadTimeout,
+          });
+
+          if (serializedIframeNode) {
+            onIframeLoad(n as INode, serializedIframeNode);
+          }
         }
-      }
-    });
+      },
+      iframeLoadTimeout,
+    );
   }
 
   return serializedNode;
@@ -657,6 +677,7 @@ function snapshot(
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
     onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
+    iframeLoadTimeout?: number;
   },
 ): [serializedNodeWithId | null, idNodeMap] {
   const {
@@ -669,6 +690,7 @@ function snapshot(
     preserveWhiteSpace,
     onSerialize,
     onIframeLoad,
+    iframeLoadTimeout,
   } = options || {};
   const idNodeMap: idNodeMap = {};
   const maskInputOptions: MaskInputOptions =
@@ -725,6 +747,7 @@ function snapshot(
       preserveWhiteSpace,
       onSerialize,
       onIframeLoad,
+      iframeLoadTimeout,
     }),
     idNodeMap,
   ];
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index 053e3a19f6..296aaa8366 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -17,6 +17,7 @@ export declare function serializeNodeWithId(n: Node | INode, options: {
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
     onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
+    iframeLoadTimeout?: number;
 }): serializedNodeWithId | null;
 declare function snapshot(n: Document, options?: {
     blockClass?: string | RegExp;
@@ -28,6 +29,7 @@ declare function snapshot(n: Document, options?: {
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
     onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
+    iframeLoadTimeout?: number;
 }): [serializedNodeWithId | null, idNodeMap];
 export declare function visitSnapshot(node: serializedNodeWithId, onVisit: (node: serializedNodeWithId) => unknown): void;
 export declare function cleanupSnapshot(): void;

From 1ad1e524e353c7b50a189f9b0630fb25ed16d1e5 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 10 Feb 2021 21:28:10 +0800
Subject: [PATCH 290/524] Release 1.0.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d18497ae80..fb88e6d534 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From a591a53195ba3a1ebf36c149c72e11800a674a1a Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 18 Feb 2021 11:59:41 +0800
Subject: [PATCH 291/524] safe access iframe document

---
 src/snapshot.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 7754465656..2c0f67e48a 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -208,7 +208,14 @@ function onceIframeLoaded(
   }
   // document is loading
   let fired = false;
-  if (win.document.readyState !== 'complete') {
+
+  let readyState: DocumentReadyState;
+  try {
+    readyState = win.document.readyState;
+  } catch (error) {
+    return;
+  }
+  if (readyState !== 'complete') {
     const timer = setTimeout(() => {
       if (!fired) {
         listener();

From 2a9057d4f231ea82534c61984e7ab1b2191db01d Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 18 Feb 2021 12:00:16 +0800
Subject: [PATCH 292/524] Release 1.0.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fb88e6d534..f62d66a275 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",

From 2ad7be639b65bdbc2813c4948f89488773678aad Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Fri, 19 Feb 2021 05:02:13 +0100
Subject: [PATCH 293/524] Adding prepare & prepack npm statement (#67)

* Add prepare & prepack

* Create .npmignore

* remove node_modules, they might be needed
---
 .npmignore   | 2 ++
 package.json | 2 ++
 2 files changed, 4 insertions(+)
 create mode 100644 .npmignore

diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000000..d631984d1e
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,2 @@
+.vscode
+package-lock.json
diff --git a/package.json b/package.json
index f62d66a275..5c177d94c2 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,8 @@
   "version": "1.0.7",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
+    "prepare": "npm run prepack",
+    "prepack": "npm run bundle",
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
     "bundle": "rollup --config",
     "typings": "tsc -d --declarationDir typings"

From aee3c1605c0e5e4ab056ff1dfc29e9e005e537e8 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Fri, 19 Feb 2021 12:50:22 +0100
Subject: [PATCH 294/524] allow goto to specify if it should play or pause

---
 src/Controller.svelte | 13 +++++++------
 src/Player.svelte     |  4 ++--
 typings/index.d.ts    |  2 +-
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/Controller.svelte b/src/Controller.svelte
index 38292dfca9..e7e430e007 100644
--- a/src/Controller.svelte
+++ b/src/Controller.svelte
@@ -141,13 +141,14 @@
     replayer.pause();
   };
 
-  export const goto = (timeOffset: number) => {
+  export const goto = (timeOffset: number, play?: boolean) => {
     currentTime = timeOffset;
-    const isPlaying = playerState === 'playing';
-    replayer.pause();
-    replayer.play(timeOffset);
-    if (!isPlaying) {
-      replayer.pause();
+    const resumePlaying =
+      typeof play === 'boolean' ? play : playerState === 'playing';
+    if (resumePlaying) {
+      replayer.play(timeOffset);
+    } else {
+      replayer.pause(timeOffset);
     }
   };
 
diff --git a/src/Player.svelte b/src/Player.svelte
index 04dcd59b24..000b40821f 100644
--- a/src/Player.svelte
+++ b/src/Player.svelte
@@ -109,8 +109,8 @@
   export const pause = () => {
     controller.pause();
   };
-  export const goto = (timeOffset: number) => {
-    controller.goto(timeOffset);
+  export const goto = (timeOffset: number, play?: boolean) => {
+    controller.goto(timeOffset, play);
   };
 
   onMount(() => {
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 6268e7bb85..7412448170 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -32,5 +32,5 @@ export default class rrwebPlayer extends SvelteComponent {
   triggerResize: () => void;
   play: () => void;
   pause: () => void;
-  goto: (timeOffset: number) => void;
+  goto: (timeOffset: number, play?: boolean) => void;
 }

From dbdf58a29d82896eed4867d5874ed36afb7f50c6 Mon Sep 17 00:00:00 2001
From: Province Innovation
 <69924001+provinceinnovation@users.noreply.github.com>
Date: Thu, 25 Feb 2021 01:49:47 +0000
Subject: [PATCH 295/524] Valid tag names can include any digit [0-9] (#66)

---
 src/snapshot.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 2c0f67e48a..c01f5b2c15 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -10,7 +10,7 @@ import {
 } from './types';
 
 let _id = 1;
-const tagNameRegex = RegExp('[^a-z1-6-_]');
+const tagNameRegex = RegExp('[^a-z0-9-_]');
 
 export const IGNORED_NODE = -2;
 

From 8307c87cedf603190fd898832d06df9bf12237bf Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 25 Feb 2021 21:14:30 +0800
Subject: [PATCH 296/524] using for loop instead of forEach in element
 classlists pick #64 and close #68

---
 src/snapshot.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index c01f5b2c15..e5f79f35fa 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -183,11 +183,13 @@ export function _isBlockedElement(
       return true;
     }
   } else {
-    element.classList.forEach((className) => {
+    // tslint:disable-next-line: prefer-for-of
+    for (let eIndex = 0; eIndex < element.classList.length; eIndex++) {
+      const className = element.classList[eIndex];
       if (blockClass.test(className)) {
         return true;
       }
-    });
+    }
   }
   if (blockSelector) {
     return element.matches(blockSelector);

From 4bf3073d80cfdf865434f3a9dcaf2e1da2ccf6dd Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Sat, 27 Feb 2021 09:59:42 +0000
Subject: [PATCH 297/524] Found an example in the wild of the deprecated
 pre-css way of adding a background image to table cells (#69)

---
 src/snapshot.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index e5f79f35fa..ad220d060f 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -158,12 +158,15 @@ function getHref() {
 
 export function transformAttribute(
   doc: Document,
+  tagName: string,
   name: string,
   value: string,
 ): string {
   // relative path in attribute
   if (name === 'src' || ((name === 'href' || name === 'xlink:href') && value)) {
     return absoluteToDoc(doc, value);
+  } else if (name === 'background' && value && (tagName === 'table' || tagName == 'td' || tagName == 'th')) {
+    return absoluteToDoc(doc, value);
   } else if (name === 'srcset' && value) {
     return getAbsoluteSrcsetString(doc, value);
   } else if (name === 'style' && value) {
@@ -294,7 +297,7 @@ function serializeNode(
       const tagName = getValidTagName(n as HTMLElement);
       let attributes: attributes = {};
       for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
-        attributes[name] = transformAttribute(doc, name, value);
+        attributes[name] = transformAttribute(doc, tagName, name, value);
       }
       // remote css
       if (tagName === 'link' && inlineStylesheet) {

From cf5c34592eaefb6715c61d1393888b2a26050574 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 27 Feb 2021 18:00:56 +0800
Subject: [PATCH 298/524] add typings script to prepack

---
 package.json    | 2 +-
 src/snapshot.ts | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 5c177d94c2..1881d2174c 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",
-    "prepack": "npm run bundle",
+    "prepack": "npm run bundle && npm run typings",
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
     "bundle": "rollup --config",
     "typings": "tsc -d --declarationDir typings"
diff --git a/src/snapshot.ts b/src/snapshot.ts
index ad220d060f..09991b1487 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -165,7 +165,11 @@ export function transformAttribute(
   // relative path in attribute
   if (name === 'src' || ((name === 'href' || name === 'xlink:href') && value)) {
     return absoluteToDoc(doc, value);
-  } else if (name === 'background' && value && (tagName === 'table' || tagName == 'td' || tagName == 'th')) {
+  } else if (
+    name === 'background' &&
+    value &&
+    (tagName === 'table' || tagName === 'td' || tagName === 'th')
+  ) {
     return absoluteToDoc(doc, value);
   } else if (name === 'srcset' && value) {
     return getAbsoluteSrcsetString(doc, value);

From 6272f0f7972980e98fbbaf9ae296c5a9b800c692 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 8 Mar 2021 13:53:57 +0800
Subject: [PATCH 299/524] update rollup config to fix breaking change in
 css.write fix #58 fix https://github.com/rrweb-io/rrweb/issues/496

---
 rollup.config.js | 25 +++++++++++++++++--------
 yarn.lock        |  8 ++++----
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/rollup.config.js b/rollup.config.js
index 1e10a3ed90..84530b9a52 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -12,12 +12,24 @@ const production = !process.env.ROLLUP_WATCH;
 
 const entries = (production
   ? [
-      { file: pkg.module, format: 'es' },
-      { file: pkg.main, format: 'cjs' },
-      { file: pkg.unpkg, format: 'iife', name: 'rrwebPlayer' },
+      { file: pkg.module, format: 'es', css: false },
+      { file: pkg.main, format: 'cjs', css: false },
+      {
+        file: pkg.unpkg,
+        format: 'iife',
+        name: 'rrwebPlayer',
+        css: 'style.css',
+      },
     ]
   : []
-).concat([{ file: 'public/bundle.js', format: 'iife', name: 'rrwebPlayer' }]);
+).concat([
+  {
+    file: 'public/bundle.js',
+    format: 'iife',
+    name: 'rrwebPlayer',
+    css: 'bundle.css',
+  },
+]);
 
 export default entries.map((output) => ({
   input: 'src/main.ts',
@@ -28,10 +40,7 @@ export default entries.map((output) => ({
       dev: !production,
       // we'll extract any component CSS out into
       // a separate file — better for performance
-      css: (css) => {
-        css.write('dist/style.css');
-        css.write('public/bundle.css');
-      },
+      css: output.css && ((css) => css.write(output.css)),
       preprocess: sveltePreprocess({
         postcss: {
           // eslint-disable-next-line no-undef
diff --git a/yarn.lock b/yarn.lock
index 8ecdeaba9a..b555573fc8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1186,10 +1186,10 @@ rollup-plugin-livereload@^1.0.0:
   dependencies:
     livereload "^0.9.1"
 
-rollup-plugin-svelte@^5.0.3:
-  version "5.2.3"
-  resolved "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-5.2.3.tgz#efdc15e3e3fdd9b9f1100fdc14a8532b4e587bc8"
-  integrity sha512-513vOht9A93OV7fvmpIq8mD1JFgTZ5LidmpULKM2Od9P1l8oI5KwvO32fwCnASuVJS1EkRfvCnS7vKQ8DF4srg==
+rollup-plugin-svelte@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-svelte/-/rollup-plugin-svelte-6.1.1.tgz#66362cf0500fb7a848283ebcf19d289a60ef0871"
+  integrity sha512-ijnm0pH1ScrY4uxwaNXBpNVejVzpL2769hIEbAlnqNUWZrffLspu5/k9/l/Wsj3NrEHLQ6wCKGagVJonyfN7ow==
   dependencies:
     require-relative "^0.8.7"
     rollup-pluginutils "^2.8.2"

From ddc164e2b33fc5eb5fda4e28c90ee697ea730bef Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 8 Mar 2021 13:56:54 +0800
Subject: [PATCH 300/524] upgrade rrweb

---
 package.json                 |  4 ++--
 public/public/bundle.css     |  5 +++++
 public/public/bundle.css.map | 16 ++++++++++++++++
 yarn.lock                    | 18 +++++++++---------
 4 files changed, 32 insertions(+), 11 deletions(-)
 create mode 100644 public/public/bundle.css
 create mode 100644 public/public/bundle.css.map

diff --git a/package.json b/package.json
index d975cd7a07..dc1bc95272 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,8 @@
     "typescript": "^3.9.7"
   },
   "dependencies": {
-    "rrweb": "^0.9.12",
-    "@tsconfig/svelte": "^1.0.0"
+    "@tsconfig/svelte": "^1.0.0",
+    "rrweb": "^0.9.14"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/public/public/bundle.css b/public/public/bundle.css
new file mode 100644
index 0000000000..6df150510a
--- /dev/null
+++ b/public/public/bundle.css
@@ -0,0 +1,5 @@
+.rr-controller.svelte-dxnc1j.svelte-dxnc1j{width:100%;height:80px;background:#fff;display:flex;flex-direction:column;justify-content:space-around;align-items:center;border-radius:0 0 5px 5px}.rr-timeline.svelte-dxnc1j.svelte-dxnc1j{width:80%;display:flex;align-items:center}.rr-timeline__time.svelte-dxnc1j.svelte-dxnc1j{display:inline-block;width:100px;text-align:center;color:#11103e}.rr-progress.svelte-dxnc1j.svelte-dxnc1j{flex:1;height:12px;background:#eee;position:relative;border-radius:3px;cursor:pointer;box-sizing:border-box;border-top:solid 4px #fff;border-bottom:solid 4px #fff}.rr-progress.disabled.svelte-dxnc1j.svelte-dxnc1j{cursor:not-allowed}.rr-progress__step.svelte-dxnc1j.svelte-dxnc1j{height:100%;position:absolute;left:0;top:0;background:#e0e1fe}.rr-progress__handler.svelte-dxnc1j.svelte-dxnc1j{width:20px;height:20px;border-radius:10px;position:absolute;top:2px;transform:translate(-50%, -50%);background:rgb(73, 80, 246)}.rr-controller__btns.svelte-dxnc1j.svelte-dxnc1j{display:flex;align-items:center;justify-content:center;font-size:13px}.rr-controller__btns.svelte-dxnc1j button.svelte-dxnc1j{width:32px;height:32px;display:flex;padding:0;align-items:center;justify-content:center;background:none;border:none;border-radius:50%;cursor:pointer}.rr-controller__btns.svelte-dxnc1j button.svelte-dxnc1j:active{background:#e0e1fe}.rr-controller__btns.svelte-dxnc1j button.active.svelte-dxnc1j{color:#fff;background:rgb(73, 80, 246)}.rr-controller__btns.svelte-dxnc1j button.svelte-dxnc1j:disabled{cursor:not-allowed}
+.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:.05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMwMCIgd2lkdGg9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBkYXRhLW5hbWU9IkxheWVyIDEiIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHBhdGggZD0iTTQ4LjcxIDQyLjkxTDM0LjA4IDI4LjI5IDQ0LjMzIDE4YTEgMSAwIDAwLS4zMy0xLjYxTDIuMzUgMS4wNmExIDEgMCAwMC0xLjI5IDEuMjlMMTYuMzkgNDRhMSAxIDAgMDAxLjY1LjM2bDEwLjI1LTEwLjI4IDE0LjYyIDE0LjYzYTEgMSAwIDAwMS40MSAwbDQuMzgtNC4zOGExIDEgMCAwMC4wMS0xLjQyem0tNS4wOSAzLjY3TDI5IDMyYTEgMSAwIDAwLTEuNDEgMGwtOS44NSA5Ljg1TDMuNjkgMy42OWwzOC4xMiAxNEwzMiAyNy41OEExIDEgMCAwMDMyIDI5bDE0LjU5IDE0LjYyeiIvPjwvc3ZnPg==")}.replayer-mouse:after{content:"";display:inline-block;width:20px;height:20px;border-radius:10px;background:#4950f6;transform:translate(-10px,-10px);opacity:.3}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;border-radius:10px;transform:translate(-10px,-10px)}50%{opacity:.5;width:10px;height:10px;border-radius:5px;transform:translate(-5px,-5px)}}.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}.replayer-wrapper{float:left;clear:both;transform-origin:top left;left:50%;top:50%}.replayer-wrapper>iframe{border:none}
+.switch.svelte-1mmdovf.svelte-1mmdovf{height:1em;display:flex;align-items:center}.switch.disabled.svelte-1mmdovf.svelte-1mmdovf{opacity:0.5}.label.svelte-1mmdovf.svelte-1mmdovf{margin:0 8px}.switch.svelte-1mmdovf input[type='checkbox'].svelte-1mmdovf{position:absolute;opacity:0}.switch.svelte-1mmdovf label.svelte-1mmdovf{width:2em;height:1em;position:relative;cursor:pointer;display:block}.switch.disabled.svelte-1mmdovf label.svelte-1mmdovf{cursor:not-allowed}.switch.svelte-1mmdovf label.svelte-1mmdovf:before{content:'';position:absolute;width:2em;height:1em;left:0.1em;transition:background 0.1s ease;background:rgba(73, 80, 246, 0.5);border-radius:50px}.switch.svelte-1mmdovf label.svelte-1mmdovf:after{content:'';position:absolute;width:1em;height:1em;border-radius:50px;left:0;transition:all 0.2s ease;box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.3);background:#fcfff4;animation:switch-off 0.2s ease-out;z-index:2}.switch input[type='checkbox']:checked+label.svelte-1mmdovf.svelte-1mmdovf:before{background:rgb(73, 80, 246)}.switch input[type='checkbox']:checked+label.svelte-1mmdovf.svelte-1mmdovf:after{animation:switch-on 0.2s ease-out;left:1.1em}
+
+/*# sourceMappingURL=bundle.css.map */
\ No newline at end of file
diff --git a/public/public/bundle.css.map b/public/public/bundle.css.map
new file mode 100644
index 0000000000..24c87a90bf
--- /dev/null
+++ b/public/public/bundle.css.map
@@ -0,0 +1,16 @@
+{
+  "version": 3,
+  "file": "bundle.css",
+  "sources": [
+    "../Controller.svelte",
+    "../Player.svelte",
+    "../Switch.svelte"
+  ],
+  "sourcesContent": [
+    "<script lang=\"ts\">import { EventType } from 'rrweb';\n;\n;\n;\nimport { onMount, onDestroy, createEventDispatcher, afterUpdate, } from 'svelte';\nimport { formatTime } from './utils';\nimport Switch from './components/Switch.svelte';\nconst dispatch = createEventDispatcher();\nexport let replayer;\nexport let showController;\nexport let autoPlay;\nexport let skipInactive;\nexport let speedOption;\nexport let speed = speedOption.length ? speedOption[0] : 1;\nexport let tags = {};\nlet currentTime = 0;\n$: {\n    dispatch('ui-update-current-time', { payload: currentTime });\n}\nlet timer = null;\nlet playerState;\n$: {\n    dispatch('ui-update-player-state', { payload: playerState });\n}\nlet speedState;\nlet progress;\nlet step;\nlet finished;\nlet meta;\n$: meta = replayer.getMetaData();\nlet percentage;\n$: {\n    const percent = Math.min(1, currentTime / meta.totalTime);\n    percentage = `${100 * percent}%`;\n    dispatch('ui-update-progress', { payload: percent });\n}\nlet customEvents;\n$: customEvents = (() => {\n    const { context } = replayer.service.state;\n    const totalEvents = context.events.length;\n    const start = context.events[0].timestamp;\n    const end = context.events[totalEvents - 1].timestamp;\n    const customEvents = [];\n    // calculate tag position.\n    const position = (startTime, endTime, tagTime) => {\n        const sessionDuration = endTime - startTime;\n        const eventDuration = endTime - tagTime;\n        const eventPosition = 100 - (eventDuration / sessionDuration) * 100;\n        return eventPosition.toFixed(2);\n    };\n    // loop through all the events and find out custom event.\n    context.events.forEach((event) => {\n        /**\n         * we are only interested in custom event and calculate it's position\n         * to place it in player's timeline.\n         */\n        if (event.type === EventType.Custom) {\n            const customEvent = {\n                name: event.data.tag,\n                background: tags[event.data.tag] || 'rgb(73, 80, 246)',\n                position: `${position(start, end, event.timestamp)}%`,\n            };\n            customEvents.push(customEvent);\n        }\n    });\n    return customEvents;\n})();\nconst loopTimer = () => {\n    stopTimer();\n    function update() {\n        currentTime = replayer.getCurrentTime();\n        if (currentTime < meta.totalTime) {\n            timer = requestAnimationFrame(update);\n        }\n    }\n    timer = requestAnimationFrame(update);\n};\nconst stopTimer = () => {\n    if (timer) {\n        cancelAnimationFrame(timer);\n        timer = null;\n    }\n};\nexport const toggle = () => {\n    switch (playerState) {\n        case 'playing':\n            pause();\n            break;\n        case 'paused':\n            play();\n            break;\n        default:\n            break;\n    }\n};\nexport const play = () => {\n    if (playerState !== 'paused') {\n        return;\n    }\n    if (finished) {\n        replayer.play();\n        finished = false;\n    }\n    else {\n        replayer.play(currentTime);\n    }\n};\nexport const pause = () => {\n    if (playerState !== 'playing') {\n        return;\n    }\n    replayer.pause();\n};\nexport const goto = (timeOffset) => {\n    currentTime = timeOffset;\n    const isPlaying = playerState === 'playing';\n    replayer.pause();\n    replayer.play(timeOffset);\n    if (!isPlaying) {\n        replayer.pause();\n    }\n};\nconst handleProgressClick = (event) => {\n    if (speedState === 'skipping') {\n        return;\n    }\n    const progressRect = progress.getBoundingClientRect();\n    const x = event.clientX - progressRect.left;\n    let percent = x / progressRect.width;\n    if (percent < 0) {\n        percent = 0;\n    }\n    else if (percent > 1) {\n        percent = 1;\n    }\n    const timeOffset = meta.totalTime * percent;\n    goto(timeOffset);\n};\nexport const setSpeed = (newSpeed) => {\n    let needFreeze = playerState === 'playing';\n    speed = newSpeed;\n    if (needFreeze) {\n        replayer.pause();\n    }\n    replayer.setConfig({ speed });\n    if (needFreeze) {\n        replayer.play(currentTime);\n    }\n};\nexport const toggleSkipInactive = () => {\n    skipInactive = !skipInactive;\n};\nonMount(() => {\n    playerState = replayer.service.state.value;\n    speedState = replayer.speedService.state.value;\n    replayer.on('state-change', (states) => {\n        const { player, speed } = states;\n        if ((player === null || player === void 0 ? void 0 : player.value) && playerState !== player.value) {\n            playerState = player.value;\n            switch (playerState) {\n                case 'playing':\n                    loopTimer();\n                    break;\n                case 'paused':\n                    stopTimer();\n                    break;\n                default:\n                    break;\n            }\n        }\n        if ((speed === null || speed === void 0 ? void 0 : speed.value) && speedState !== speed.value) {\n            speedState = speed.value;\n        }\n    });\n    replayer.on('finish', () => {\n        finished = true;\n    });\n    if (autoPlay) {\n        replayer.play();\n    }\n});\nafterUpdate(() => {\n    if (skipInactive !== replayer.config.skipInactive) {\n        replayer.setConfig({ skipInactive });\n    }\n});\nonDestroy(() => {\n    replayer.pause();\n    stopTimer();\n});\n</script>\n\n<style>\n.rr-controller {\n  width: 100%;\n  height: 80px;\n  background: #fff;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  align-items: center;\n  border-radius: 0 0 5px 5px;\n}\n\n.rr-timeline {\n  width: 80%;\n  display: flex;\n  align-items: center;\n}\n\n.rr-timeline__time {\n  display: inline-block;\n  width: 100px;\n  text-align: center;\n  color: #11103e;\n}\n\n.rr-progress {\n  flex: 1;\n  height: 12px;\n  background: #eee;\n  position: relative;\n  border-radius: 3px;\n  cursor: pointer;\n  box-sizing: border-box;\n  border-top: solid 4px #fff;\n  border-bottom: solid 4px #fff;\n}\n\n.rr-progress.disabled {\n  cursor: not-allowed;\n}\n\n.rr-progress__step {\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  background: #e0e1fe;\n}\n\n.rr-progress__handler {\n  width: 20px;\n  height: 20px;\n  border-radius: 10px;\n  position: absolute;\n  top: 2px;\n  transform: translate(-50%, -50%);\n  background: rgb(73, 80, 246);\n}\n\n.rr-controller__btns {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 13px;\n}\n\n.rr-controller__btns button {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  padding: 0;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n.rr-controller__btns button:active {\n  background: #e0e1fe;\n}\n\n.rr-controller__btns button.active {\n  color: #fff;\n  background: rgb(73, 80, 246);\n}\n\n.rr-controller__btns button:disabled {\n  cursor: not-allowed;\n}</style>\n\n{#if showController}\n  <div class=\"rr-controller\">\n    <div class=\"rr-timeline\">\n      <span class=\"rr-timeline__time\">{formatTime(currentTime)}</span>\n      <div\n        class=\"rr-progress\"\n        class:disabled={speedState === 'skipping'}\n        bind:this={progress}\n        on:click={(event) => handleProgressClick(event)}>\n        <div\n          class=\"rr-progress__step\"\n          bind:this={step}\n          style=\"width: {percentage}\" />\n        {#each customEvents as event}\n          <div\n            title={event.name}\n            style=\"width: 10px;height: 5px;position: absolute;top:\n            2px;transform: translate(-50%, -50%);background: {event.background};left:\n            {event.position};\" />\n        {/each}\n\n        <div class=\"rr-progress__handler\" style=\"left: {percentage}\" />\n      </div>\n      <span class=\"rr-timeline__time\">{formatTime(meta.totalTime)}</span>\n    </div>\n    <div class=\"rr-controller__btns\">\n      <button on:click={toggle}>\n        {#if playerState === 'playing'}\n          <svg\n            class=\"icon\"\n            viewBox=\"0 0 1024 1024\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            width=\"16\"\n            height=\"16\">\n            <path\n              d=\"M682.65984 128q53.00224 0 90.50112 37.49888t37.49888 90.50112l0\n              512q0 53.00224-37.49888 90.50112t-90.50112\n              37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224\n              37.49888-90.50112t90.50112-37.49888zM341.34016 128q53.00224 0\n              90.50112 37.49888t37.49888 90.50112l0 512q0 53.00224-37.49888\n              90.50112t-90.50112\n              37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224\n              37.49888-90.50112t90.50112-37.49888zM341.34016 213.34016q-17.67424\n              0-30.16704 12.4928t-12.4928 30.16704l0 512q0 17.67424 12.4928\n              30.16704t30.16704 12.4928 30.16704-12.4928\n              12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928zM682.65984\n              213.34016q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 512q0\n              17.67424 12.4928 30.16704t30.16704 12.4928 30.16704-12.4928\n              12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928z\" />\n          </svg>\n        {:else}\n          <svg\n            class=\"icon\"\n            viewBox=\"0 0 1024 1024\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            width=\"16\"\n            height=\"16\">\n            <path\n              d=\"M170.65984 896l0-768 640 384zM644.66944\n              512l-388.66944-233.32864 0 466.65728z\" />\n          </svg>\n        {/if}\n      </button>\n      {#each speedOption as s}\n        <button\n          class:active={s === speed && speedState !== 'skipping'}\n          on:click={() => setSpeed(s)}\n          disabled={speedState === 'skipping'}>\n          {s}x\n        </button>\n      {/each}\n      <Switch\n        id=\"skip\"\n        bind:checked={skipInactive}\n        disabled={speedState === 'skipping'}\n        label=\"skip inactive\" />\n      <button on:click={() => dispatch('fullscreen')}>\n        <svg\n          class=\"icon\"\n          viewBox=\"0 0 1024 1024\"\n          version=\"1.1\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          width=\"16\"\n          height=\"16\">\n          <defs>\n            <style type=\"text/css\"></style>\n          </defs>\n          <path\n            d=\"M916 380c-26.4 0-48-21.6-48-48L868 223.2 613.6 477.6c-18.4\n            18.4-48.8 18.4-68 0-18.4-18.4-18.4-48.8 0-68L800 156 692 156c-26.4\n            0-48-21.6-48-48 0-26.4 21.6-48 48-48l224 0c26.4 0 48 21.6 48 48l0\n            224C964 358.4 942.4 380 916 380zM231.2 860l108.8 0c26.4 0 48 21.6 48\n            48s-21.6 48-48 48l-224 0c-26.4 0-48-21.6-48-48l0-224c0-26.4 21.6-48\n            48-48 26.4 0 48 21.6 48 48L164 792l253.6-253.6c18.4-18.4 48.8-18.4\n            68 0 18.4 18.4 18.4 48.8 0 68L231.2 860z\"\n            p-id=\"1286\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n{/if}\n",
+    "<script lang=\"ts\">import { onMount, onDestroy } from 'svelte';\nimport { Replayer, unpack, mirror } from 'rrweb';\n;\nimport { inlineCss, openFullscreen, exitFullscreen, isFullscreen, onFullscreenChange, typeOf, } from './utils';\nimport Controller from './Controller.svelte';\nexport let width = 1024;\nexport let height = 576;\nexport let events = [];\nexport let skipInactive = true;\nexport let autoPlay = true;\nexport let speedOption = [1, 2, 4, 8];\nexport let speed = 1;\nexport let showController = true;\nexport let tags = {};\nexport const getMirror = () => mirror;\nconst controllerHeight = 80;\nlet player;\nlet frame;\nlet replayer;\nlet fullscreenListener;\nlet _width = width;\nlet _height = height;\nlet controller;\nlet style;\n$: style = inlineCss({\n    width: `${width}px`,\n    height: `${height}px`,\n});\nlet playerStyle;\n$: playerStyle = inlineCss({\n    width: `${width}px`,\n    height: `${height + (showController ? controllerHeight : 0)}px`,\n});\nconst updateScale = (el, frameDimension) => {\n    const widthScale = width / frameDimension.width;\n    const heightScale = height / frameDimension.height;\n    el.style.transform =\n        `scale(${Math.min(widthScale, heightScale, 1)})` +\n            'translate(-50%, -50%)';\n};\nexport const triggerResize = () => {\n    updateScale(replayer.wrapper, {\n        width: replayer.iframe.offsetWidth,\n        height: replayer.iframe.offsetHeight,\n    });\n};\nexport const toggleFullscreen = () => {\n    if (player) {\n        isFullscreen() ? exitFullscreen() : openFullscreen(player);\n    }\n};\nexport const addEventListener = (event, handler) => {\n    replayer.on(event, handler);\n    switch (event) {\n        case 'ui-update-current-time':\n        case 'ui-update-progress':\n        case 'ui-update-player-state':\n            controller.$on(event, ({ detail }) => handler(detail));\n        default:\n            break;\n    }\n};\nexport const addEvent = (event) => {\n    replayer.addEvent(event);\n};\nexport const getMetaData = () => replayer.getMetaData();\nexport const getReplayer = () => replayer;\n// by pass controller methods as public API\nexport const toggle = () => {\n    controller.toggle();\n};\nexport const setSpeed = (speed) => {\n    controller.setSpeed(speed);\n};\nexport const toggleSkipInactive = () => {\n    controller.toggleSkipInactive();\n};\nexport const play = () => {\n    controller.play();\n};\nexport const pause = () => {\n    controller.pause();\n};\nexport const goto = (timeOffset) => {\n    controller.goto(timeOffset);\n};\nonMount(() => {\n    // runtime type check\n    if (speedOption !== undefined && typeOf(speedOption) !== 'array') {\n        throw new Error('speedOption must be array');\n    }\n    speedOption.forEach((item) => {\n        if (typeOf(item) !== 'number') {\n            throw new Error('item of speedOption must be number');\n        }\n    });\n    if (speedOption.indexOf(speed) < 0) {\n        throw new Error(`speed must be one of speedOption,\n      current config:\n      {\n        ...\n        speed: ${speed},\n        speedOption: [${speedOption.toString()}]\n        ...\n      }\n      `);\n    }\n    replayer = new Replayer(events, Object.assign({ speed, root: frame, unpackFn: unpack }, $$props));\n    replayer.on('resize', (dimension) => {\n        updateScale(replayer.wrapper, dimension);\n    });\n    fullscreenListener = onFullscreenChange(() => {\n        if (isFullscreen()) {\n            setTimeout(() => {\n                _width = width;\n                _height = height;\n                width = player.offsetWidth;\n                height = player.offsetHeight;\n                updateScale(replayer.wrapper, {\n                    width: replayer.iframe.offsetWidth,\n                    height: replayer.iframe.offsetHeight,\n                });\n            }, 0);\n        }\n        else {\n            width = _width;\n            height = _height;\n            updateScale(replayer.wrapper, {\n                width: replayer.iframe.offsetWidth,\n                height: replayer.iframe.offsetHeight,\n            });\n        }\n    });\n});\nonDestroy(() => {\n    fullscreenListener && fullscreenListener();\n});\n</script>\n\n<style global>:global(.replayer-wrapper){position:relative}:global(.replayer-mouse){position:absolute;width:20px;height:20px;transition:.05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMwMCIgd2lkdGg9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBkYXRhLW5hbWU9IkxheWVyIDEiIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHBhdGggZD0iTTQ4LjcxIDQyLjkxTDM0LjA4IDI4LjI5IDQ0LjMzIDE4YTEgMSAwIDAwLS4zMy0xLjYxTDIuMzUgMS4wNmExIDEgMCAwMC0xLjI5IDEuMjlMMTYuMzkgNDRhMSAxIDAgMDAxLjY1LjM2bDEwLjI1LTEwLjI4IDE0LjYyIDE0LjYzYTEgMSAwIDAwMS40MSAwbDQuMzgtNC4zOGExIDEgMCAwMC4wMS0xLjQyem0tNS4wOSAzLjY3TDI5IDMyYTEgMSAwIDAwLTEuNDEgMGwtOS44NSA5Ljg1TDMuNjkgMy42OWwzOC4xMiAxNEwzMiAyNy41OEExIDEgMCAwMDMyIDI5bDE0LjU5IDE0LjYyeiIvPjwvc3ZnPg==\")}:global(.replayer-mouse:after){content:\"\";display:inline-block;width:20px;height:20px;border-radius:10px;background:#4950f6;transform:translate(-10px,-10px);opacity:.3}:global(.replayer-mouse.active:after){animation:click .2s ease-in-out 1}:global(.replayer-mouse-tail){position:absolute;pointer-events:none}@keyframes -global-click{0%{opacity:.3;width:20px;height:20px;border-radius:10px;transform:translate(-10px,-10px)}50%{opacity:.5;width:10px;height:10px;border-radius:5px;transform:translate(-5px,-5px)}}:global(.rr-player) {\n  position: relative;\n  background: white;\n  float: left;\n  border-radius: 5px;\n  box-shadow: 0 24px 48px rgba(17, 16, 62, 0.12);\n}:global(.rr-player__frame) {\n  overflow: hidden;\n}:global(.replayer-wrapper) {\n  float: left;\n  clear: both;\n  transform-origin: top left;\n  left: 50%;\n  top: 50%;\n}:global(.replayer-wrapper) > :global(iframe) {\n  border: none;\n}</style>\n\n<div class=\"rr-player\" bind:this={player} style={playerStyle}>\n  <div class=\"rr-player__frame\" bind:this={frame} {style} />\n  {#if replayer}\n    <Controller\n      bind:this={controller}\n      {replayer}\n      {showController}\n      {autoPlay}\n      {speedOption}\n      {skipInactive}\n      {tags}\n      on:fullscreen={() => toggleFullscreen()} />\n  {/if}\n</div>\n",
+    "<script lang=\"ts\">export let disabled;\nexport let checked;\nexport let id;\nexport let label;\n</script>\n\n<style>\n.switch {\n  height: 1em;\n  display: flex;\n  align-items: center;\n}\n\n.switch.disabled {\n  opacity: 0.5;\n}\n\n.label {\n  margin: 0 8px;\n}\n\n.switch input[type='checkbox'] {\n  position: absolute;\n  opacity: 0;\n}\n\n.switch label {\n  width: 2em;\n  height: 1em;\n  position: relative;\n  cursor: pointer;\n  display: block;\n}\n\n.switch.disabled label {\n  cursor: not-allowed;\n}\n\n.switch label:before {\n  content: '';\n  position: absolute;\n  width: 2em;\n  height: 1em;\n  left: 0.1em;\n  transition: background 0.1s ease;\n  background: rgba(73, 80, 246, 0.5);\n  border-radius: 50px;\n}\n\n.switch label:after {\n  content: '';\n  position: absolute;\n  width: 1em;\n  height: 1em;\n  border-radius: 50px;\n  left: 0;\n  transition: all 0.2s ease;\n  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);\n  background: #fcfff4;\n  animation: switch-off 0.2s ease-out;\n  z-index: 2;\n}\n\n.switch input[type='checkbox']:checked + label:before {\n  background: rgb(73, 80, 246);\n}\n\n.switch input[type='checkbox']:checked + label:after {\n  animation: switch-on 0.2s ease-out;\n  left: 1.1em;\n}</style>\n\n<div class=\"switch\" class:disabled>\n  <input type=\"checkbox\" {id} bind:checked {disabled} />\n  <label for={id} />\n  <span class=\"label\">{label}</span>\n</div>\n"
+  ],
+  "names": [],
+  "mappings": "AAiMA,cAAc,4BAAC,CAAC,AACd,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CACZ,UAAU,CAAE,IAAI,CAChB,OAAO,CAAE,IAAI,CACb,cAAc,CAAE,MAAM,CACtB,eAAe,CAAE,YAAY,CAC7B,WAAW,CAAE,MAAM,CACnB,aAAa,CAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,AAC5B,CAAC,AAED,YAAY,4BAAC,CAAC,AACZ,KAAK,CAAE,GAAG,CACV,OAAO,CAAE,IAAI,CACb,WAAW,CAAE,MAAM,AACrB,CAAC,AAED,kBAAkB,4BAAC,CAAC,AAClB,OAAO,CAAE,YAAY,CACrB,KAAK,CAAE,KAAK,CACZ,UAAU,CAAE,MAAM,CAClB,KAAK,CAAE,OAAO,AAChB,CAAC,AAED,YAAY,4BAAC,CAAC,AACZ,IAAI,CAAE,CAAC,CACP,MAAM,CAAE,IAAI,CACZ,UAAU,CAAE,IAAI,CAChB,QAAQ,CAAE,QAAQ,CAClB,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,OAAO,CACf,UAAU,CAAE,UAAU,CACtB,UAAU,CAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAC1B,aAAa,CAAE,KAAK,CAAC,GAAG,CAAC,IAAI,AAC/B,CAAC,AAED,YAAY,SAAS,4BAAC,CAAC,AACrB,MAAM,CAAE,WAAW,AACrB,CAAC,AAED,kBAAkB,4BAAC,CAAC,AAClB,MAAM,CAAE,IAAI,CACZ,QAAQ,CAAE,QAAQ,CAClB,IAAI,CAAE,CAAC,CACP,GAAG,CAAE,CAAC,CACN,UAAU,CAAE,OAAO,AACrB,CAAC,AAED,qBAAqB,4BAAC,CAAC,AACrB,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CACZ,aAAa,CAAE,IAAI,CACnB,QAAQ,CAAE,QAAQ,CAClB,GAAG,CAAE,GAAG,CACR,SAAS,CAAE,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,CAChC,UAAU,CAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,AAC9B,CAAC,AAED,oBAAoB,4BAAC,CAAC,AACpB,OAAO,CAAE,IAAI,CACb,WAAW,CAAE,MAAM,CACnB,eAAe,CAAE,MAAM,CACvB,SAAS,CAAE,IAAI,AACjB,CAAC,AAED,kCAAoB,CAAC,MAAM,cAAC,CAAC,AAC3B,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CACZ,OAAO,CAAE,IAAI,CACb,OAAO,CAAE,CAAC,CACV,WAAW,CAAE,MAAM,CACnB,eAAe,CAAE,MAAM,CACvB,UAAU,CAAE,IAAI,CAChB,MAAM,CAAE,IAAI,CACZ,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,OAAO,AACjB,CAAC,AAED,kCAAoB,CAAC,oBAAM,OAAO,AAAC,CAAC,AAClC,UAAU,CAAE,OAAO,AACrB,CAAC,AAED,kCAAoB,CAAC,MAAM,OAAO,cAAC,CAAC,AAClC,KAAK,CAAE,IAAI,CACX,UAAU,CAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,AAC9B,CAAC,AAED,kCAAoB,CAAC,oBAAM,SAAS,AAAC,CAAC,AACpC,MAAM,CAAE,WAAW,AACrB,CAAC;AC/IqB,iBAAiB,AAAC,CAAC,SAAS,QAAQ,CAAC,AAAQ,eAAe,AAAC,CAAC,SAAS,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,IAAI,CAAC,WAAW,IAAI,CAAC,MAAM,CAAC,gBAAgB,OAAO,CAAC,oBAAoB,GAAG,CAAC,kBAAkB,SAAS,CAAC,iBAAiB,IAAI,4iBAA4iB,CAAC,CAAC,AAAQ,qBAAqB,AAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,YAAY,CAAC,MAAM,IAAI,CAAC,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,WAAW,OAAO,CAAC,UAAU,UAAU,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,AAAQ,4BAA4B,AAAC,CAAC,UAAU,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,AAAQ,oBAAoB,AAAC,CAAC,SAAS,QAAQ,CAAC,eAAe,IAAI,CAAC,WAAW,AAAQ,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU,UAAU,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,OAAO,IAAI,CAAC,cAAc,GAAG,CAAC,UAAU,UAAU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,AAAQ,UAAU,AAAE,CAAC,AACpzC,QAAQ,CAAE,QAAQ,CAClB,UAAU,CAAE,KAAK,CACjB,KAAK,CAAE,IAAI,CACX,aAAa,CAAE,GAAG,CAClB,UAAU,CAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,AAChD,CAAC,AAAQ,iBAAiB,AAAE,CAAC,AAC3B,QAAQ,CAAE,MAAM,AAClB,CAAC,AAAQ,iBAAiB,AAAE,CAAC,AAC3B,KAAK,CAAE,IAAI,CACX,KAAK,CAAE,IAAI,CACX,gBAAgB,CAAE,GAAG,CAAC,IAAI,CAC1B,IAAI,CAAE,GAAG,CACT,GAAG,CAAE,GAAG,AACV,CAAC,AAAQ,iBAAiB,AAAC,CAAW,MAAM,AAAE,CAAC,AAC7C,MAAM,CAAE,IAAI,AACd,CAAC;ACpJD,OAAO,8BAAC,CAAC,AACP,MAAM,CAAE,GAAG,CACX,OAAO,CAAE,IAAI,CACb,WAAW,CAAE,MAAM,AACrB,CAAC,AAED,OAAO,SAAS,8BAAC,CAAC,AAChB,OAAO,CAAE,GAAG,AACd,CAAC,AAED,MAAM,8BAAC,CAAC,AACN,MAAM,CAAE,CAAC,CAAC,GAAG,AACf,CAAC,AAED,sBAAO,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,eAAC,CAAC,AAC9B,QAAQ,CAAE,QAAQ,CAClB,OAAO,CAAE,CAAC,AACZ,CAAC,AAED,sBAAO,CAAC,KAAK,eAAC,CAAC,AACb,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CACX,QAAQ,CAAE,QAAQ,CAClB,MAAM,CAAE,OAAO,CACf,OAAO,CAAE,KAAK,AAChB,CAAC,AAED,OAAO,wBAAS,CAAC,KAAK,eAAC,CAAC,AACtB,MAAM,CAAE,WAAW,AACrB,CAAC,AAED,sBAAO,CAAC,oBAAK,OAAO,AAAC,CAAC,AACpB,OAAO,CAAE,EAAE,CACX,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CACX,IAAI,CAAE,KAAK,CACX,UAAU,CAAE,UAAU,CAAC,IAAI,CAAC,IAAI,CAChC,UAAU,CAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAClC,aAAa,CAAE,IAAI,AACrB,CAAC,AAED,sBAAO,CAAC,oBAAK,MAAM,AAAC,CAAC,AACnB,OAAO,CAAE,EAAE,CACX,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CACX,aAAa,CAAE,IAAI,CACnB,IAAI,CAAE,CAAC,CACP,UAAU,CAAE,GAAG,CAAC,IAAI,CAAC,IAAI,CACzB,UAAU,CAAE,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAC9C,UAAU,CAAE,OAAO,CACnB,SAAS,CAAE,UAAU,CAAC,IAAI,CAAC,QAAQ,CACnC,OAAO,CAAE,CAAC,AACZ,CAAC,AAED,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAG,mCAAK,OAAO,AAAC,CAAC,AACrD,UAAU,CAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,AAC9B,CAAC,AAED,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAG,mCAAK,MAAM,AAAC,CAAC,AACpD,SAAS,CAAE,SAAS,CAAC,IAAI,CAAC,QAAQ,CAClC,IAAI,CAAE,KAAK,AACb,CAAC"
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index b555573fc8..1467bdde2a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1222,21 +1222,21 @@ rollup@^1.20.0:
     "@types/node" "*"
     acorn "^7.1.0"
 
-rrweb-snapshot@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/rrweb-snapshot/-/rrweb-snapshot-1.0.1.tgz#f3800f4deb434da02b6086533c5c38e23e7e796b"
-  integrity sha512-HKbfbTTDSTy4T0h/w9SubI1E5kL/qLiK08pJZRLA0MmGtqJ5nCTMtpEZXgCKMUncH3lb1rbiu+sDIoxKD+Anng==
+rrweb-snapshot@^1.0.3:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.0.7.tgz#9d334590089af4a857970ef4e9e978d986a122d1"
+  integrity sha512-6fu9+KiQlFPkFk2SdahIDsV+yu1juiAR/o+kOiwKPbXur1TiFGMPAfaQNCkqLc8Nvyx3ItkJmrIldyxnAalEag==
 
-rrweb@^0.9.12:
-  version "0.9.12"
-  resolved "https://registry.npmjs.org/rrweb/-/rrweb-0.9.12.tgz#601c6fbc166c1f3ebffaa4a83a1c41845c7f1520"
-  integrity sha512-9ZYefSOCtNkwkNgINTZ014Kt+g4J+6X8cR8b03h/kATI92DutcwPr4KwL+qlgUJnccWXoiC5Xkbl5trtQSEG0Q==
+rrweb@^0.9.14:
+  version "0.9.14"
+  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-0.9.14.tgz#09bec604fc44c74801e4fe910606e5a6cde008ec"
+  integrity sha512-nm2rrVNoyWFPrbGQmcvTTlA7XjbbgPIgO7qsW0Zyr5iOURIFJDGPHFmOVLRyLpWiriVtEoXh6a+x+D1sj+qwWg==
   dependencies:
     "@types/css-font-loading-module" "0.0.4"
     "@xstate/fsm" "^1.4.0"
     fflate "^0.4.4"
     mitt "^1.1.3"
-    rrweb-snapshot "^1.0.1"
+    rrweb-snapshot "^1.0.3"
 
 sade@^1.4.0:
   version "1.7.3"

From 34588c451b12493d8167aa3d726292b748c55743 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 8 Mar 2021 13:59:40 +0800
Subject: [PATCH 301/524] Release 0.7.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index dc1bc95272..33e1f2e59d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From 88f348a57b24cccfb3e6a4db8b8eb0576c4ca7fe Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 13 Mar 2021 20:46:18 +0800
Subject: [PATCH 302/524] snapshot and rebuild shadow DOM
 https://github.com/rrweb-io/rrweb/issues/38

---
 .gitignore                             |   1 +
 src/rebuild.ts                         |  26 +-
 src/snapshot.ts                        |  43 ++-
 src/types.ts                           |   2 +
 src/utils.ts                           |   5 +
 test/__snapshots__/integration.ts.snap | 400 +++++++++++++++++++++++++
 test/html/shadow-dom.html              | 209 +++++++++++++
 test/integration.ts                    |  47 +++
 8 files changed, 717 insertions(+), 16 deletions(-)
 create mode 100644 src/utils.ts
 create mode 100644 test/html/shadow-dom.html

diff --git a/.gitignore b/.gitignore
index 2c597d0358..3365d49249 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ build
 dist
 es
 lib
+temp
diff --git a/src/rebuild.ts b/src/rebuild.ts
index 8091be3bc9..9ab8315687 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -7,6 +7,7 @@ import {
   idNodeMap,
   INode,
 } from './types';
+import { isElement } from './utils';
 
 const tagMap: tagMap = {
   script: 'noscript',
@@ -177,6 +178,25 @@ function buildNode(
           }
         }
       }
+      if (n.isShadowHost) {
+        /**
+         * Since node is newly rebuilt, it should be a normal element
+         * without shadowRoot.
+         * But if there are some weird situations that has defined
+         * custom element in the scope before we rebuild node, it may
+         * register the shadowRoot earlier.
+         * The logic in the 'else' block is just a try-my-best solution
+         * for the corner case, please let we know if it is wrong and
+         * we can remove it.
+         */
+        if (!node.shadowRoot) {
+          node.attachShadow({ mode: 'open' });
+        } else {
+          while (node.shadowRoot.firstChild) {
+            node.shadowRoot.removeChild(node.shadowRoot.firstChild);
+          }
+        }
+      }
       return node;
     case NodeType.Text:
       return doc.createTextNode(
@@ -240,7 +260,11 @@ export function buildNodeWithSN(
         continue;
       }
 
-      node.appendChild(childNode);
+      if (childN.isShadow && isElement(node) && node.shadowRoot) {
+        node.shadowRoot.appendChild(childNode);
+      } else {
+        node.appendChild(childNode);
+      }
       if (afterAppend) {
         afterAppend(childNode);
       }
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 09991b1487..62832cc0c1 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -8,6 +8,7 @@ import {
   MaskInputOptions,
   SlimDOMOptions,
 } from './types';
+import { isElement } from './utils';
 
 let _id = 1;
 const tagNameRegex = RegExp('[^a-z0-9-_]');
@@ -622,26 +623,38 @@ export function serializeNodeWithId(
     ) {
       preserveWhiteSpace = false;
     }
+    const bypassOptions = {
+      doc,
+      map,
+      blockClass,
+      blockSelector,
+      skipChild,
+      inlineStylesheet,
+      maskInputOptions,
+      slimDOMOptions,
+      recordCanvas,
+      preserveWhiteSpace,
+      onSerialize,
+      onIframeLoad,
+      iframeLoadTimeout,
+    };
     for (const childN of Array.from(n.childNodes)) {
-      const serializedChildNode = serializeNodeWithId(childN, {
-        doc,
-        map,
-        blockClass,
-        blockSelector,
-        skipChild,
-        inlineStylesheet,
-        maskInputOptions,
-        slimDOMOptions,
-        recordCanvas,
-        preserveWhiteSpace,
-        onSerialize,
-        onIframeLoad,
-        iframeLoadTimeout,
-      });
+      const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
       if (serializedChildNode) {
         serializedNode.childNodes.push(serializedChildNode);
       }
     }
+
+    if (isElement(n) && n.shadowRoot) {
+      serializedNode.isShadowHost = true;
+      for (const childN of Array.from(n.shadowRoot.childNodes)) {
+        const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
+        if (serializedChildNode) {
+          serializedChildNode.isShadow = true;
+          serializedNode.childNodes.push(serializedChildNode);
+        }
+      }
+    }
   }
 
   if (
diff --git a/src/types.ts b/src/types.ts
index 3ae2d76f9c..0a9eb63080 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -56,6 +56,8 @@ export type serializedNode = (
   | commentNode
 ) & {
   rootId?: number;
+  isShadowHost?: boolean;
+  isShadow?: boolean;
 };
 
 export type serializedNodeWithId = serializedNode & { id: number };
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000000..de0e1e8cf0
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,5 @@
+import { INode } from './types';
+
+export function isElement(n: Node | INode): n is Element {
+  return n.nodeType === n.ELEMENT_NODE;
+}
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 75734c14b7..e6577820c1 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -211,6 +211,25 @@ exports[`[html file]: picture.html 1`] = `
   </body></html>"
 `;
 
+exports[`[html file]: shadow-dom.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+    <meta charset=\\"UTF-8\\" />
+    <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+    <title>shadow DOM</title>
+  </head>
+  <body>
+    <fancy-tabs background=\\"\\" role=\\"tablist\\" selected=\\"1\\">
+      <button slot=\\"title\\" role=\\"tab\\" tabindex=\\"-1\\" aria-selected=\\"false\\">Tab 1</button>
+      <button slot=\\"title\\" selected=\\"\\" role=\\"tab\\" tabindex=\\"0\\" aria-selected=\\"true\\">Tab 2</button>
+      <button slot=\\"title\\" role=\\"tab\\" tabindex=\\"-1\\" aria-selected=\\"false\\">Tab 3</button>
+      <section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"true\\">content panel 1</section>
+      <section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"false\\">content panel 2</section>
+      <section role=\\"tabpanel\\" tabindex=\\"0\\" aria-hidden=\\"true\\">content panel 3</section>
+    </fancy-tabs>
+    <noscript>SCRIPT_PLACEHOLDER</noscript>
+  </body></html>"
+`;
+
 exports[`[html file]: video.html 1`] = `
 "<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
@@ -409,3 +428,384 @@ exports[`iframe integration tests 1`] = `
   \\"id\\": 1
 }"
 `;
+
+exports[`shadown DOM integration tests 1`] = `
+"{
+  \\"type\\": 0,
+  \\"childNodes\\": [
+    {
+      \\"type\\": 1,
+      \\"name\\": \\"html\\",
+      \\"publicId\\": \\"\\",
+      \\"systemId\\": \\"\\",
+      \\"id\\": 2
+    },
+    {
+      \\"type\\": 2,
+      \\"tagName\\": \\"html\\",
+      \\"attributes\\": {
+        \\"lang\\": \\"en\\"
+      },
+      \\"childNodes\\": [
+        {
+          \\"type\\": 2,
+          \\"tagName\\": \\"head\\",
+          \\"attributes\\": {},
+          \\"childNodes\\": [
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n    \\",
+              \\"id\\": 5
+            },
+            {
+              \\"type\\": 2,
+              \\"tagName\\": \\"meta\\",
+              \\"attributes\\": {
+                \\"charset\\": \\"UTF-8\\"
+              },
+              \\"childNodes\\": [],
+              \\"id\\": 6
+            },
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n    \\",
+              \\"id\\": 7
+            },
+            {
+              \\"type\\": 2,
+              \\"tagName\\": \\"meta\\",
+              \\"attributes\\": {
+                \\"name\\": \\"viewport\\",
+                \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+              },
+              \\"childNodes\\": [],
+              \\"id\\": 8
+            },
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n    \\",
+              \\"id\\": 9
+            },
+            {
+              \\"type\\": 2,
+              \\"tagName\\": \\"title\\",
+              \\"attributes\\": {},
+              \\"childNodes\\": [
+                {
+                  \\"type\\": 3,
+                  \\"textContent\\": \\"shadow DOM\\",
+                  \\"id\\": 11
+                }
+              ],
+              \\"id\\": 10
+            },
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n  \\",
+              \\"id\\": 12
+            }
+          ],
+          \\"id\\": 4
+        },
+        {
+          \\"type\\": 3,
+          \\"textContent\\": \\"\\\\n  \\",
+          \\"id\\": 13
+        },
+        {
+          \\"type\\": 2,
+          \\"tagName\\": \\"body\\",
+          \\"attributes\\": {},
+          \\"childNodes\\": [
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n    \\",
+              \\"id\\": 15
+            },
+            {
+              \\"type\\": 2,
+              \\"tagName\\": \\"fancy-tabs\\",
+              \\"attributes\\": {
+                \\"background\\": \\"\\",
+                \\"role\\": \\"tablist\\",
+                \\"selected\\": \\"1\\"
+              },
+              \\"childNodes\\": [
+                {
+                  \\"type\\": 3,
+                  \\"textContent\\": \\"\\\\n      \\",
+                  \\"id\\": 17
+                },
+                {
+                  \\"type\\": 2,
+                  \\"tagName\\": \\"button\\",
+                  \\"attributes\\": {
+                    \\"slot\\": \\"title\\",
+                    \\"role\\": \\"tab\\",
+                    \\"tabindex\\": \\"-1\\",
+                    \\"aria-selected\\": \\"false\\"
+                  },
+                  \\"childNodes\\": [
+                    {
+                      \\"type\\": 3,
+                      \\"textContent\\": \\"Tab 1\\",
+                      \\"id\\": 19
+                    }
+                  ],
+                  \\"id\\": 18
+                },
+                {
+                  \\"type\\": 3,
+                  \\"textContent\\": \\"\\\\n      \\",
+                  \\"id\\": 20
+                },
+                {
+                  \\"type\\": 2,
+                  \\"tagName\\": \\"button\\",
+                  \\"attributes\\": {
+                    \\"slot\\": \\"title\\",
+                    \\"selected\\": \\"\\",
+                    \\"role\\": \\"tab\\",
+                    \\"tabindex\\": \\"0\\",
+                    \\"aria-selected\\": \\"true\\"
+                  },
+                  \\"childNodes\\": [
+                    {
+                      \\"type\\": 3,
+                      \\"textContent\\": \\"Tab 2\\",
+                      \\"id\\": 22
+                    }
+                  ],
+                  \\"id\\": 21
+                },
+                {
+                  \\"type\\": 3,
+                  \\"textContent\\": \\"\\\\n      \\",
+                  \\"id\\": 23
+                },
+                {
+                  \\"type\\": 2,
+                  \\"tagName\\": \\"button\\",
+                  \\"attributes\\": {
+                    \\"slot\\": \\"title\\",
+                    \\"role\\": \\"tab\\",
+                    \\"tabindex\\": \\"-1\\",
+                    \\"aria-selected\\": \\"false\\"
+                  },
+                  \\"childNodes\\": [
+                    {
+                      \\"type\\": 3,
+                      \\"textContent\\": \\"Tab 3\\",
+                      \\"id\\": 25
+                    }
+                  ],
+                  \\"id\\": 24
+                },
+                {
+                  \\"type\\": 3,
+                  \\"textContent\\": \\"\\\\n      \\",
+                  \\"id\\": 26
+                },
+                {
+                  \\"type\\": 2,
+                  \\"tagName\\": \\"section\\",
+                  \\"attributes\\": {
+                    \\"role\\": \\"tabpanel\\",
+                    \\"tabindex\\": \\"0\\",
+                    \\"aria-hidden\\": \\"true\\"
+                  },
+                  \\"childNodes\\": [
+                    {
+                      \\"type\\": 3,
+                      \\"textContent\\": \\"content panel 1\\",
+                      \\"id\\": 28
+                    }
+                  ],
+                  \\"id\\": 27
+                },
+                {
+                  \\"type\\": 3,
+                  \\"textContent\\": \\"\\\\n      \\",
+                  \\"id\\": 29
+                },
+                {
+                  \\"type\\": 2,
+                  \\"tagName\\": \\"section\\",
+                  \\"attributes\\": {
+                    \\"role\\": \\"tabpanel\\",
+                    \\"tabindex\\": \\"0\\",
+                    \\"aria-hidden\\": \\"false\\"
+                  },
+                  \\"childNodes\\": [
+                    {
+                      \\"type\\": 3,
+                      \\"textContent\\": \\"content panel 2\\",
+                      \\"id\\": 31
+                    }
+                  ],
+                  \\"id\\": 30
+                },
+                {
+                  \\"type\\": 3,
+                  \\"textContent\\": \\"\\\\n      \\",
+                  \\"id\\": 32
+                },
+                {
+                  \\"type\\": 2,
+                  \\"tagName\\": \\"section\\",
+                  \\"attributes\\": {
+                    \\"role\\": \\"tabpanel\\",
+                    \\"tabindex\\": \\"0\\",
+                    \\"aria-hidden\\": \\"true\\"
+                  },
+                  \\"childNodes\\": [
+                    {
+                      \\"type\\": 3,
+                      \\"textContent\\": \\"content panel 3\\",
+                      \\"id\\": 34
+                    }
+                  ],
+                  \\"id\\": 33
+                },
+                {
+                  \\"type\\": 3,
+                  \\"textContent\\": \\"\\\\n    \\",
+                  \\"id\\": 35
+                },
+                {
+                  \\"type\\": 3,
+                  \\"textContent\\": \\"\\\\n            \\",
+                  \\"id\\": 36,
+                  \\"isShadow\\": true
+                },
+                {
+                  \\"type\\": 2,
+                  \\"tagName\\": \\"style\\",
+                  \\"attributes\\": {},
+                  \\"childNodes\\": [
+                    {
+                      \\"type\\": 3,
+                      \\"textContent\\": \\"\\\\n              :host {\\\\n                display: inline-block;\\\\n                width: 650px;\\\\n                font-family: 'Roboto Slab';\\\\n                contain: content;\\\\n              }\\\\n              :host([background]) {\\\\n                background: var(--background-color, #9E9E9E);\\\\n                border-radius: 10px;\\\\n                padding: 10px;\\\\n              }\\\\n              #panels {\\\\n                box-shadow: 0 2px 2px rgba(0, 0, 0, .3);\\\\n                background: white;\\\\n                border-radius: 3px;\\\\n                padding: 16px;\\\\n                height: 250px;\\\\n                overflow: auto;\\\\n              }\\\\n              #tabs {\\\\n                display: inline-flex;\\\\n                -webkit-user-select: none;\\\\n                user-select: none;\\\\n              }\\\\n              #tabs slot {\\\\n                display: inline-flex; /* Safari bug. Treats <slot> as a parent */\\\\n              }\\\\n              /* Safari does not support #id prefixes on ::slotted\\\\n                 See https://bugs.webkit.org/show_bug.cgi?id=160538 */\\\\n              #tabs ::slotted(*) {\\\\n                font: 400 16px/22px 'Roboto';\\\\n                padding: 16px 8px;\\\\n                margin: 0;\\\\n                text-align: center;\\\\n                width: 100px;\\\\n                text-overflow: ellipsis;\\\\n                white-space: nowrap;\\\\n                overflow: hidden;\\\\n                cursor: pointer;\\\\n                border-top-left-radius: 3px;\\\\n                border-top-right-radius: 3px;\\\\n                background: linear-gradient(#fafafa, #eee);\\\\n                border: none; /* if the user users a <button> */\\\\n              }\\\\n              #tabs ::slotted([aria-selected=\\\\\\"true\\\\\\"]) {\\\\n                font-weight: 600;\\\\n                background: white;\\\\n                box-shadow: none;\\\\n              }\\\\n              #tabs ::slotted(:focus) {\\\\n                z-index: 1; /* make sure focus ring doesn't get buried */\\\\n              }\\\\n              #panels ::slotted([aria-hidden=\\\\\\"true\\\\\\"]) {\\\\n                display: none;\\\\n              }\\\\n            \\",
+                      \\"isStyle\\": true,
+                      \\"id\\": 38
+                    }
+                  ],
+                  \\"id\\": 37,
+                  \\"isShadow\\": true
+                },
+                {
+                  \\"type\\": 3,
+                  \\"textContent\\": \\"\\\\n            \\",
+                  \\"id\\": 39,
+                  \\"isShadow\\": true
+                },
+                {
+                  \\"type\\": 2,
+                  \\"tagName\\": \\"div\\",
+                  \\"attributes\\": {
+                    \\"id\\": \\"tabs\\"
+                  },
+                  \\"childNodes\\": [
+                    {
+                      \\"type\\": 3,
+                      \\"textContent\\": \\"\\\\n              \\",
+                      \\"id\\": 41
+                    },
+                    {
+                      \\"type\\": 2,
+                      \\"tagName\\": \\"slot\\",
+                      \\"attributes\\": {
+                        \\"id\\": \\"tabsSlot\\",
+                        \\"name\\": \\"title\\"
+                      },
+                      \\"childNodes\\": [],
+                      \\"id\\": 42
+                    },
+                    {
+                      \\"type\\": 3,
+                      \\"textContent\\": \\"\\\\n            \\",
+                      \\"id\\": 43
+                    }
+                  ],
+                  \\"id\\": 40,
+                  \\"isShadow\\": true
+                },
+                {
+                  \\"type\\": 3,
+                  \\"textContent\\": \\"\\\\n            \\",
+                  \\"id\\": 44,
+                  \\"isShadow\\": true
+                },
+                {
+                  \\"type\\": 2,
+                  \\"tagName\\": \\"div\\",
+                  \\"attributes\\": {
+                    \\"id\\": \\"panels\\"
+                  },
+                  \\"childNodes\\": [
+                    {
+                      \\"type\\": 3,
+                      \\"textContent\\": \\"\\\\n              \\",
+                      \\"id\\": 46
+                    },
+                    {
+                      \\"type\\": 2,
+                      \\"tagName\\": \\"slot\\",
+                      \\"attributes\\": {
+                        \\"id\\": \\"panelsSlot\\"
+                      },
+                      \\"childNodes\\": [],
+                      \\"id\\": 47
+                    },
+                    {
+                      \\"type\\": 3,
+                      \\"textContent\\": \\"\\\\n            \\",
+                      \\"id\\": 48
+                    }
+                  ],
+                  \\"id\\": 45,
+                  \\"isShadow\\": true
+                },
+                {
+                  \\"type\\": 3,
+                  \\"textContent\\": \\"\\\\n          \\",
+                  \\"id\\": 49,
+                  \\"isShadow\\": true
+                }
+              ],
+              \\"id\\": 16,
+              \\"isShadowHost\\": true
+            },
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n    \\",
+              \\"id\\": 50
+            },
+            {
+              \\"type\\": 2,
+              \\"tagName\\": \\"script\\",
+              \\"attributes\\": {},
+              \\"childNodes\\": [
+                {
+                  \\"type\\": 3,
+                  \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                  \\"id\\": 52
+                }
+              ],
+              \\"id\\": 51
+            },
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n  \\\\n\\\\n\\",
+              \\"id\\": 53
+            }
+          ],
+          \\"id\\": 14
+        }
+      ],
+      \\"id\\": 3
+    }
+  ],
+  \\"id\\": 1
+}"
+`;
diff --git a/test/html/shadow-dom.html b/test/html/shadow-dom.html
new file mode 100644
index 0000000000..0050bede01
--- /dev/null
+++ b/test/html/shadow-dom.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>shadow DOM</title>
+  </head>
+  <body>
+    <fancy-tabs background>
+      <button slot="title">Tab 1</button>
+      <button slot="title" selected>Tab 2</button>
+      <button slot="title">Tab 3</button>
+      <section>content panel 1</section>
+      <section>content panel 2</section>
+      <section>content panel 3</section>
+    </fancy-tabs>
+    <script>
+      (function () {
+        'use strict';
+
+        // Feature detect
+        if (!(window.customElements && document.body.attachShadow)) {
+          document.querySelector('fancy-tabs').innerHTML =
+            "<b>Your browser doesn't support Shadow DOM and Custom Elements v1.</b>";
+          return;
+        }
+
+        let selected_ = null;
+
+        // See https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel
+
+        customElements.define(
+          'fancy-tabs',
+          class extends HTMLElement {
+            constructor() {
+              super(); // always call super() first in the ctor.
+
+              // Create shadow DOM for the component.
+              let shadowRoot = this.attachShadow({ mode: 'open' });
+              shadowRoot.innerHTML = `
+            <style>
+              :host {
+                display: inline-block;
+                width: 650px;
+                font-family: 'Roboto Slab';
+                contain: content;
+              }
+              :host([background]) {
+                background: var(--background-color, #9E9E9E);
+                border-radius: 10px;
+                padding: 10px;
+              }
+              #panels {
+                box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
+                background: white;
+                border-radius: 3px;
+                padding: 16px;
+                height: 250px;
+                overflow: auto;
+              }
+              #tabs {
+                display: inline-flex;
+                -webkit-user-select: none;
+                user-select: none;
+              }
+              #tabs slot {
+                display: inline-flex; /* Safari bug. Treats <slot> as a parent */
+              }
+              /* Safari does not support #id prefixes on ::slotted
+                 See https://bugs.webkit.org/show_bug.cgi?id=160538 */
+              #tabs ::slotted(*) {
+                font: 400 16px/22px 'Roboto';
+                padding: 16px 8px;
+                margin: 0;
+                text-align: center;
+                width: 100px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                cursor: pointer;
+                border-top-left-radius: 3px;
+                border-top-right-radius: 3px;
+                background: linear-gradient(#fafafa, #eee);
+                border: none; /* if the user users a <button> */
+              }
+              #tabs ::slotted([aria-selected="true"]) {
+                font-weight: 600;
+                background: white;
+                box-shadow: none;
+              }
+              #tabs ::slotted(:focus) {
+                z-index: 1; /* make sure focus ring doesn't get buried */
+              }
+              #panels ::slotted([aria-hidden="true"]) {
+                display: none;
+              }
+            </style>
+            <div id="tabs">
+              <slot id="tabsSlot" name="title"></slot>
+            </div>
+            <div id="panels">
+              <slot id="panelsSlot"></slot>
+            </div>
+          `;
+            }
+
+            get selected() {
+              return selected_;
+            }
+
+            set selected(idx) {
+              selected_ = idx;
+              this._selectTab(idx);
+
+              // Updated the element's selected attribute value when
+              // backing property changes.
+              this.setAttribute('selected', idx);
+            }
+
+            connectedCallback() {
+              this.setAttribute('role', 'tablist');
+
+              const tabsSlot = this.shadowRoot.querySelector('#tabsSlot');
+              const panelsSlot = this.shadowRoot.querySelector('#panelsSlot');
+
+              this.tabs = tabsSlot.assignedNodes({ flatten: true });
+              this.panels = panelsSlot
+                .assignedNodes({ flatten: true })
+                .filter((el) => {
+                  return el.nodeType === Node.ELEMENT_NODE;
+                });
+
+              // Add aria role="tabpanel" to each content panel.
+              for (let [i, panel] of this.panels.entries()) {
+                panel.setAttribute('role', 'tabpanel');
+                panel.setAttribute('tabindex', 0);
+              }
+
+              // Save refer to we can remove listeners later.
+              this._boundOnTitleClick = this._onTitleClick.bind(this);
+              this._boundOnKeyDown = this._onKeyDown.bind(this);
+
+              tabsSlot.addEventListener('click', this._boundOnTitleClick);
+              tabsSlot.addEventListener('keydown', this._boundOnKeyDown);
+
+              this.selected = this._findFirstSelectedTab() || 0;
+            }
+
+            disconnectedCallback() {
+              const tabsSlot = this.shadowRoot.querySelector('#tabsSlot');
+              tabsSlot.removeEventListener('click', this._boundOnTitleClick);
+              tabsSlot.removeEventListener('keydown', this._boundOnKeyDown);
+            }
+
+            _onTitleClick(e) {
+              if (e.target.slot === 'title') {
+                this.selected = this.tabs.indexOf(e.target);
+                e.target.focus();
+              }
+            }
+
+            _onKeyDown(e) {
+              switch (e.code) {
+                case 'ArrowUp':
+                case 'ArrowLeft':
+                  e.preventDefault();
+                  var idx = this.selected - 1;
+                  idx = idx < 0 ? this.tabs.length - 1 : idx;
+                  this.tabs[idx].click();
+                  break;
+                case 'ArrowDown':
+                case 'ArrowRight':
+                  e.preventDefault();
+                  var idx = this.selected + 1;
+                  this.tabs[idx % this.tabs.length].click();
+                  break;
+                default:
+                  break;
+              }
+            }
+
+            _findFirstSelectedTab() {
+              let selectedIdx;
+              for (let [i, tab] of this.tabs.entries()) {
+                tab.setAttribute('role', 'tab');
+
+                // Allow users to declaratively select a tab
+                // Highlight last tab which has the selected attribute.
+                if (tab.hasAttribute('selected')) {
+                  selectedIdx = i;
+                }
+              }
+              return selectedIdx;
+            }
+
+            _selectTab(idx = null) {
+              for (let i = 0, tab; (tab = this.tabs[i]); ++i) {
+                let select = i === idx;
+                tab.setAttribute('tabindex', select ? 0 : -1);
+                tab.setAttribute('aria-selected', select);
+                this.panels[i].setAttribute('aria-hidden', !select);
+              }
+            }
+          },
+        );
+      })();
+    </script>
+  </body>
+</html>
diff --git a/test/integration.ts b/test/integration.ts
index 807639f09a..751fbeedca 100644
--- a/test/integration.ts
+++ b/test/integration.ts
@@ -166,3 +166,50 @@ describe('iframe integration tests', function (this: ISuite) {
     assert(result.pass, result.pass ? '' : result.report());
   }).timeout(5000);
 });
+
+describe('shadown DOM integration tests', function (this: ISuite) {
+  const shadowDomHtml = path.join(__dirname, 'html/shadow-dom.html');
+  const raw = fs.readFileSync(shadowDomHtml, 'utf-8');
+
+  before(async () => {
+    this.server = await server();
+    this.browser = await puppeteer.launch({
+      // headless: false,
+    });
+
+    const bundle = await rollup.rollup({
+      input: path.resolve(__dirname, '../src/index.ts'),
+      plugins: [typescript()],
+    });
+    const { code } = await bundle.generate({
+      name: 'rrweb',
+      format: 'iife',
+    });
+    this.code = code;
+  });
+
+  after(async () => {
+    await this.browser.close();
+    await this.server.close();
+  });
+
+  it('snapshot shadow DOM', async () => {
+    const page: puppeteer.Page = await this.browser.newPage();
+    // console for debug
+    // tslint:disable-next-line: no-console
+    page.on('console', (msg) => console.log(msg.text()));
+    await page.goto(`http://localhost:3030/html`);
+    await page.setContent(raw, {
+      waitUntil: 'load',
+    });
+    const snapshotResult = JSON.stringify(
+      await page.evaluate(`${this.code};
+      rrweb.snapshot(document)[0];
+    `),
+      null,
+      2,
+    );
+    const result = matchSnapshot(snapshotResult, __filename, this.title);
+    assert(result.pass, result.pass ? '' : result.report());
+  }).timeout(5000);
+});

From 1192735af4b53770ec6dd793fb39eac8df334c8b Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 21 Mar 2021 14:50:01 +0800
Subject: [PATCH 303/524] Release 1.1.0

---
 package.json          | 2 +-
 typings/snapshot.d.ts | 2 +-
 typings/types.d.ts    | 2 ++
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 1881d2174c..aaf357d1f8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index 296aaa8366..8992fff80c 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -2,7 +2,7 @@ import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions, SlimDOMOption
 export declare const IGNORED_NODE = -2;
 export declare function absoluteToStylesheet(cssText: string | null, href: string): string;
 export declare function absoluteToDoc(doc: Document, attributeValue: string): string;
-export declare function transformAttribute(doc: Document, name: string, value: string): string;
+export declare function transformAttribute(doc: Document, tagName: string, name: string, value: string): string;
 export declare function _isBlockedElement(element: HTMLElement, blockClass: string | RegExp, blockSelector: string | null): boolean;
 export declare function serializeNodeWithId(n: Node | INode, options: {
     doc: Document;
diff --git a/typings/types.d.ts b/typings/types.d.ts
index 8efab81733..1b8740b8a3 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -42,6 +42,8 @@ export declare type commentNode = {
 };
 export declare type serializedNode = (documentNode | documentTypeNode | elementNode | textNode | cdataNode | commentNode) & {
     rootId?: number;
+    isShadowHost?: boolean;
+    isShadow?: boolean;
 };
 export declare type serializedNodeWithId = serializedNode & {
     id: number;

From 5f96f775e8e07aa29ef93fdb5cec49cc7f19ef11 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 21 Mar 2021 14:50:35 +0800
Subject: [PATCH 304/524] update typings

---
 typings/utils.d.ts | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 typings/utils.d.ts

diff --git a/typings/utils.d.ts b/typings/utils.d.ts
new file mode 100644
index 0000000000..e1571f385c
--- /dev/null
+++ b/typings/utils.d.ts
@@ -0,0 +1,2 @@
+import { INode } from './types';
+export declare function isElement(n: Node | INode): n is Element;

From 9d6696befde9427653312a0d335ab42c25beb15f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 28 Mar 2021 17:49:41 +0800
Subject: [PATCH 305/524] add isShadow flag if a node is under shadow root

---
 src/index.ts       | 1 +
 src/snapshot.ts    | 6 +++++-
 src/utils.ts       | 5 +++++
 typings/index.d.ts | 1 +
 typings/utils.d.ts | 1 +
 5 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/index.ts b/src/index.ts
index 20d5b02d23..9c1fd3895e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,6 +7,7 @@ import snapshot, {
 } from './snapshot';
 import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
 export * from './types';
+export * from './utils';
 
 export {
   snapshot,
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 62832cc0c1..210386aa58 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -8,7 +8,7 @@ import {
   MaskInputOptions,
   SlimDOMOptions,
 } from './types';
-import { isElement } from './utils';
+import { isElement, isShadowRoot } from './utils';
 
 let _id = 1;
 const tagNameRegex = RegExp('[^a-z0-9-_]');
@@ -657,6 +657,10 @@ export function serializeNodeWithId(
     }
   }
 
+  if (n.parentNode && isShadowRoot(n.parentNode)) {
+    serializedNode.isShadow = true;
+  }
+
   if (
     serializedNode.type === NodeType.Element &&
     serializedNode.tagName === 'iframe'
diff --git a/src/utils.ts b/src/utils.ts
index de0e1e8cf0..df6cf20ba5 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -3,3 +3,8 @@ import { INode } from './types';
 export function isElement(n: Node | INode): n is Element {
   return n.nodeType === n.ELEMENT_NODE;
 }
+
+export function isShadowRoot(n: Node): n is ShadowRoot {
+  const host: Element | null = (n as ShadowRoot)?.host;
+  return Boolean(host && host.shadowRoot && host.shadowRoot === n);
+}
diff --git a/typings/index.d.ts b/typings/index.d.ts
index b60dbf59c8..c9f1235967 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,4 +1,5 @@
 import snapshot, { serializeNodeWithId, transformAttribute, visitSnapshot, cleanupSnapshot, IGNORED_NODE } from './snapshot';
 import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
 export * from './types';
+export * from './utils';
 export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, transformAttribute, visitSnapshot, cleanupSnapshot, IGNORED_NODE, };
diff --git a/typings/utils.d.ts b/typings/utils.d.ts
index e1571f385c..a896748e61 100644
--- a/typings/utils.d.ts
+++ b/typings/utils.d.ts
@@ -1,2 +1,3 @@
 import { INode } from './types';
 export declare function isElement(n: Node | INode): n is Element;
+export declare function isShadowRoot(n: Node): n is ShadowRoot;

From 9dfbd522bf34c634812c6d6cfa1998820d6c2a5c Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 28 Mar 2021 17:51:26 +0800
Subject: [PATCH 306/524] Release 1.1.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index aaf357d1f8..54613c8a11 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",

From 3c2d7c1eea16446306bf38610b1889d2472c5a42 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Thu, 22 Apr 2021 09:32:50 +0200
Subject: [PATCH 307/524] Speed up addHoverClass on large stylesheets (#72)

* speed up addHoverClass on large style sheets

* longer strings first to prevent accidental partial matches

* can add hover class when there is a multi selector with the same prefix

* tweak performance
---
 src/rebuild.ts       | 37 ++++++++++++++++++++++++++++++++-----
 test/rebuild.test.ts |  7 +++++++
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 9ab8315687..7a4d4422d4 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -57,23 +57,50 @@ function getTagName(n: elementNode): string {
   return tagName;
 }
 
-const HOVER_SELECTOR = /([^\\]):hover/g;
+// based on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
+function escapeRegExp(string: string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+}
+
+const HOVER_SELECTOR = /([^\\]):hover/;
+const HOVER_SELECTOR_GLOBAL = new RegExp(HOVER_SELECTOR, 'g');
 export function addHoverClass(cssText: string): string {
-  const ast = parse(cssText, { silent: true });
+  const ast = parse(cssText, {
+    silent: true,
+  });
+
   if (!ast.stylesheet) {
     return cssText;
   }
+
+  const selectors: string[] = [];
   ast.stylesheet.rules.forEach((rule) => {
     if ('selectors' in rule) {
       (rule.selectors || []).forEach((selector: string) => {
         if (HOVER_SELECTOR.test(selector)) {
-          const newSelector = selector.replace(HOVER_SELECTOR, '$1.\\:hover');
-          cssText = cssText.replace(selector, `${selector}, ${newSelector}`);
+          selectors.push(selector);
         }
       });
     }
   });
-  return cssText;
+
+  if (selectors.length === 0) return cssText;
+
+  const selectorMatcher = new RegExp(
+    selectors
+      .filter((selector, index) => selectors.indexOf(selector) === index)
+      .sort((a, b) => b.length - a.length)
+      .map((selector) => {
+        return escapeRegExp(selector);
+      })
+      .join('|'),
+    'g',
+  );
+
+  return cssText.replace(selectorMatcher, (selector) => {
+    const newSelector = selector.replace(HOVER_SELECTOR_GLOBAL, '$1.\\:hover');
+    return `${selector}, ${newSelector}`;
+  });
 }
 
 function buildNode(
diff --git a/test/rebuild.test.ts b/test/rebuild.test.ts
index 9643d69d3b..a343e780b3 100644
--- a/test/rebuild.test.ts
+++ b/test/rebuild.test.ts
@@ -24,6 +24,13 @@ describe('add hover class to hover selector related rules', () => {
     );
   });
 
+  it('can add hover class when there is a multi selector with the same prefix', () => {
+    const cssText = '.a:hover, .a:hover::after { color: white }';
+    expect(addHoverClass(cssText)).to.equal(
+      '.a:hover, .a.\\:hover, .a:hover::after, .a.\\:hover::after { color: white }',
+    );
+  });
+
   it('can add hover class when :hover is not the end of selector', () => {
     const cssText = 'div:hover::after { color: white }';
     expect(addHoverClass(cssText)).to.equal(

From a0d82589b7136b8d5b4ad354713ea6038c45fc1e Mon Sep 17 00:00:00 2001
From: re-fort <refort.dev@gmail.com>
Date: Thu, 22 Apr 2021 16:34:36 +0900
Subject: [PATCH 308/524] Enable to mask texts (#73)

* chore: reorder options

* feat: enable to mask texts

* feat: add the default mask function

* refactor: rename options to identify the difference between  mask text and mask input

* test: add tests about masking
---
 src/index.ts                           |  2 +
 src/snapshot.ts                        | 82 +++++++++++++++++++++++++-
 src/types.ts                           |  2 +
 test/__snapshots__/integration.ts.snap | 15 +++++
 test/html/mask-text.html               | 17 ++++++
 typings/index.d.ts                     |  4 +-
 typings/snapshot.d.ts                  | 11 +++-
 typings/types.d.ts                     |  1 +
 8 files changed, 127 insertions(+), 7 deletions(-)
 create mode 100644 test/html/mask-text.html

diff --git a/src/index.ts b/src/index.ts
index 9c1fd3895e..8335768f5f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,6 +3,7 @@ import snapshot, {
   transformAttribute,
   visitSnapshot,
   cleanupSnapshot,
+  needMaskingText,
   IGNORED_NODE,
 } from './snapshot';
 import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
@@ -18,5 +19,6 @@ export {
   transformAttribute,
   visitSnapshot,
   cleanupSnapshot,
+  needMaskingText,
   IGNORED_NODE,
 };
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 210386aa58..94a2b904d2 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -7,6 +7,7 @@ import {
   idNodeMap,
   MaskInputOptions,
   SlimDOMOptions,
+  MaskTextFn,
 } from './types';
 import { isElement, isShadowRoot } from './utils';
 
@@ -206,6 +207,40 @@ export function _isBlockedElement(
   return false;
 }
 
+export function needMaskingText(
+  node: Node | null,
+  maskTextClass: string | RegExp,
+  maskTextSelector: string | null,
+): boolean {
+  if (!node) {
+    return false;
+  }
+  if (node.nodeType === node.ELEMENT_NODE) {
+    if (typeof maskTextClass === 'string') {
+      if ((node as HTMLElement).classList.contains(maskTextClass)) {
+        return true;
+      }
+    } else {
+      (node as HTMLElement).classList.forEach((className) => {
+        if (maskTextClass.test(className)) {
+          return true;
+        }
+      });
+    }
+    if (maskTextSelector) {
+      if ((node as HTMLElement).matches(maskTextSelector)) {
+        return true;
+      }
+    }
+    return needMaskingText(node.parentNode, maskTextClass, maskTextSelector);
+  }
+  if (node.nodeType === node.TEXT_NODE) {
+    // check parent node since text node do not have class name
+    return needMaskingText(node.parentNode, maskTextClass, maskTextSelector);
+  }
+  return needMaskingText(node.parentNode, maskTextClass, maskTextSelector);
+}
+
 // https://stackoverflow.com/a/36155560
 function onceIframeLoaded(
   iframeEl: HTMLIFrameElement,
@@ -259,8 +294,11 @@ function serializeNode(
     doc: Document;
     blockClass: string | RegExp;
     blockSelector: string | null;
+    maskTextClass: string | RegExp;
+    maskTextSelector: string | null;
     inlineStylesheet: boolean;
     maskInputOptions: MaskInputOptions;
+    maskTextFn: MaskTextFn | undefined;
     recordCanvas: boolean;
   },
 ): serializedNode | false {
@@ -268,8 +306,11 @@ function serializeNode(
     doc,
     blockClass,
     blockSelector,
+    maskTextClass,
+    maskTextSelector,
     inlineStylesheet,
     maskInputOptions = {},
+    maskTextFn,
     recordCanvas,
   } = options;
   // Only record root id when document object is not the base document
@@ -412,12 +453,23 @@ function serializeNode(
         n.parentNode && (n.parentNode as HTMLElement).tagName;
       let textContent = (n as Text).textContent;
       const isStyle = parentTagName === 'STYLE' ? true : undefined;
+      const isScript = parentTagName === 'SCRIPT' ? true : undefined;
       if (isStyle && textContent) {
         textContent = absoluteToStylesheet(textContent, getHref());
       }
-      if (parentTagName === 'SCRIPT') {
+      if (isScript) {
         textContent = 'SCRIPT_PLACEHOLDER';
       }
+      if (
+        !isStyle &&
+        !isScript &&
+        needMaskingText(n, maskTextClass, maskTextSelector) &&
+        textContent
+      ) {
+        textContent = maskTextFn
+          ? maskTextFn(textContent)
+          : textContent.replace(/[\S]/g, '*');
+      }
       return {
         type: NodeType.Text,
         textContent: textContent || '',
@@ -540,9 +592,12 @@ export function serializeNodeWithId(
     map: idNodeMap;
     blockClass: string | RegExp;
     blockSelector: string | null;
+    maskTextClass: string | RegExp;
+    maskTextSelector: string | null;
     skipChild: boolean;
     inlineStylesheet: boolean;
     maskInputOptions?: MaskInputOptions;
+    maskTextFn: MaskTextFn | undefined;
     slimDOMOptions: SlimDOMOptions;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
@@ -556,9 +611,12 @@ export function serializeNodeWithId(
     map,
     blockClass,
     blockSelector,
+    maskTextClass,
+    maskTextSelector,
     skipChild = false,
     inlineStylesheet = true,
     maskInputOptions = {},
+    maskTextFn,
     slimDOMOptions,
     recordCanvas = false,
     onSerialize,
@@ -570,8 +628,11 @@ export function serializeNodeWithId(
     doc,
     blockClass,
     blockSelector,
+    maskTextClass,
+    maskTextSelector,
     inlineStylesheet,
     maskInputOptions,
+    maskTextFn,
     recordCanvas,
   });
   if (!_serializedNode) {
@@ -628,9 +689,12 @@ export function serializeNodeWithId(
       map,
       blockClass,
       blockSelector,
+      maskTextClass,
+      maskTextSelector,
       skipChild,
       inlineStylesheet,
       maskInputOptions,
+      maskTextFn,
       slimDOMOptions,
       recordCanvas,
       preserveWhiteSpace,
@@ -675,9 +739,12 @@ export function serializeNodeWithId(
             map,
             blockClass,
             blockSelector,
+            maskTextClass,
+            maskTextSelector,
             skipChild: false,
             inlineStylesheet,
             maskInputOptions,
+            maskTextFn,
             slimDOMOptions,
             recordCanvas,
             preserveWhiteSpace,
@@ -702,11 +769,14 @@ function snapshot(
   n: Document,
   options?: {
     blockClass?: string | RegExp;
+    blockSelector?: string | null;
+    maskTextClass?: string | RegExp;
+    maskTextSelector?: string | null;
     inlineStylesheet?: boolean;
     maskAllInputs?: boolean | MaskInputOptions;
+    maskTextFn?: MaskTextFn;
     slimDOM?: boolean | SlimDOMOptions;
     recordCanvas?: boolean;
-    blockSelector?: string | null;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
     onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
@@ -715,10 +785,13 @@ function snapshot(
 ): [serializedNodeWithId | null, idNodeMap] {
   const {
     blockClass = 'rr-block',
+    blockSelector = null,
+    maskTextClass = 'rr-mask',
+    maskTextSelector = null,
     inlineStylesheet = true,
     recordCanvas = false,
-    blockSelector = null,
     maskAllInputs = false,
+    maskTextFn,
     slimDOM = false,
     preserveWhiteSpace,
     onSerialize,
@@ -772,9 +845,12 @@ function snapshot(
       map: idNodeMap,
       blockClass,
       blockSelector,
+      maskTextClass,
+      maskTextSelector,
       skipChild: false,
       inlineStylesheet,
       maskInputOptions,
+      maskTextFn,
       slimDOMOptions,
       recordCanvas,
       preserveWhiteSpace,
diff --git a/src/types.ts b/src/types.ts
index 0a9eb63080..b38a4778bc 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -105,3 +105,5 @@ export type SlimDOMOptions = Partial<{
   headMetaAuthorship: boolean;
   headMetaVerification: boolean;
 }>;
+
+export type MaskTextFn = (text: string) => string;
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index e6577820c1..72b317f102 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -202,6 +202,21 @@ exports[`[html file]: invalid-tagname.html 1`] = `
 </body></html>"
 `;
 
+exports[`[html file]: mask-text.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+    <meta charset=\\"UTF-8\\" />
+    <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+    <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
+    <title>Document</title>
+  </head>  <body>
+    <p class=\\"rr-mask\\">**** *</p>
+    <div class=\\"rr-mask\\">
+      <span>**** *</span>
+    </div>
+    <div class=\\"rr-mask\\">**** *</div>
+  </body></html>"
+`;
+
 exports[`[html file]: picture.html 1`] = `
 "<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
     <picture>
diff --git a/test/html/mask-text.html b/test/html/mask-text.html
new file mode 100644
index 0000000000..fe177a61c5
--- /dev/null
+++ b/test/html/mask-text.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Document</title>
+  </head>
+
+  <body>
+    <p class="rr-mask">mask 1</p>
+    <div class="rr-mask">
+      <span>mask 2</span>
+    </div>
+    <div class="rr-mask">mask 3</div>
+  </body>
+</html>
diff --git a/typings/index.d.ts b/typings/index.d.ts
index c9f1235967..000750d007 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,5 +1,5 @@
-import snapshot, { serializeNodeWithId, transformAttribute, visitSnapshot, cleanupSnapshot, IGNORED_NODE } from './snapshot';
+import snapshot, { serializeNodeWithId, transformAttribute, visitSnapshot, cleanupSnapshot, needMaskingText, IGNORED_NODE } from './snapshot';
 import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
 export * from './types';
 export * from './utils';
-export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, transformAttribute, visitSnapshot, cleanupSnapshot, IGNORED_NODE, };
+export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, transformAttribute, visitSnapshot, cleanupSnapshot, needMaskingText, IGNORED_NODE, };
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index 8992fff80c..91bec1a9a1 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -1,17 +1,21 @@
-import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions, SlimDOMOptions } from './types';
+import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions, MaskTextFn, SlimDOMOptions } from './types';
 export declare const IGNORED_NODE = -2;
 export declare function absoluteToStylesheet(cssText: string | null, href: string): string;
 export declare function absoluteToDoc(doc: Document, attributeValue: string): string;
 export declare function transformAttribute(doc: Document, tagName: string, name: string, value: string): string;
 export declare function _isBlockedElement(element: HTMLElement, blockClass: string | RegExp, blockSelector: string | null): boolean;
+export declare function needMaskingText(node: Node | null, maskTextClass: string | RegExp, maskTextSelector: string | null): boolean;
 export declare function serializeNodeWithId(n: Node | INode, options: {
     doc: Document;
     map: idNodeMap;
     blockClass: string | RegExp;
     blockSelector: string | null;
+    maskTextClass: string | RegExp;
+    maskTextSelector: string | null;
     skipChild: boolean;
     inlineStylesheet: boolean;
     maskInputOptions?: MaskInputOptions;
+    maskTextFn?: MaskTextFn;
     slimDOMOptions: SlimDOMOptions;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
@@ -21,11 +25,14 @@ export declare function serializeNodeWithId(n: Node | INode, options: {
 }): serializedNodeWithId | null;
 declare function snapshot(n: Document, options?: {
     blockClass?: string | RegExp;
+    blockSelector?: string | null;
+    maskTextClass?: string | RegExp;
+    maskTextSelector?: string | null;
     inlineStylesheet?: boolean;
     maskAllInputs?: boolean | MaskInputOptions;
+    maskTextFn?: MaskTextFn;
     slimDOM?: boolean | SlimDOMOptions;
     recordCanvas?: boolean;
-    blockSelector?: string | null;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
     onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
diff --git a/typings/types.d.ts b/typings/types.d.ts
index 1b8740b8a3..f9394a39dc 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -86,3 +86,4 @@ export declare type SlimDOMOptions = Partial<{
     headMetaAuthorship: boolean;
     headMetaVerification: boolean;
 }>;
+export declare type MaskTextFn = (text: string) => string;

From 7850a75c835bc37fd42db0e4ddb28c640db958de Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 22 Apr 2021 15:38:27 +0800
Subject: [PATCH 309/524] Release 1.1.2

---
 package.json          | 2 +-
 typings/snapshot.d.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 54613c8a11..bb5d823941 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index 91bec1a9a1..0581fedafe 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -1,4 +1,4 @@
-import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions, MaskTextFn, SlimDOMOptions } from './types';
+import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions, SlimDOMOptions, MaskTextFn } from './types';
 export declare const IGNORED_NODE = -2;
 export declare function absoluteToStylesheet(cssText: string | null, href: string): string;
 export declare function absoluteToDoc(doc: Document, attributeValue: string): string;
@@ -15,7 +15,7 @@ export declare function serializeNodeWithId(n: Node | INode, options: {
     skipChild: boolean;
     inlineStylesheet: boolean;
     maskInputOptions?: MaskInputOptions;
-    maskTextFn?: MaskTextFn;
+    maskTextFn: MaskTextFn | undefined;
     slimDOMOptions: SlimDOMOptions;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;

From 4c9c3e9c94043f5f78884f4153f93f125944504a Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Thu, 22 Apr 2021 15:24:51 +0200
Subject: [PATCH 310/524] remove duplicate files

---
 public/public/bundle.css     |  5 -----
 public/public/bundle.css.map | 16 ----------------
 2 files changed, 21 deletions(-)
 delete mode 100644 public/public/bundle.css
 delete mode 100644 public/public/bundle.css.map

diff --git a/public/public/bundle.css b/public/public/bundle.css
deleted file mode 100644
index 6df150510a..0000000000
--- a/public/public/bundle.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.rr-controller.svelte-dxnc1j.svelte-dxnc1j{width:100%;height:80px;background:#fff;display:flex;flex-direction:column;justify-content:space-around;align-items:center;border-radius:0 0 5px 5px}.rr-timeline.svelte-dxnc1j.svelte-dxnc1j{width:80%;display:flex;align-items:center}.rr-timeline__time.svelte-dxnc1j.svelte-dxnc1j{display:inline-block;width:100px;text-align:center;color:#11103e}.rr-progress.svelte-dxnc1j.svelte-dxnc1j{flex:1;height:12px;background:#eee;position:relative;border-radius:3px;cursor:pointer;box-sizing:border-box;border-top:solid 4px #fff;border-bottom:solid 4px #fff}.rr-progress.disabled.svelte-dxnc1j.svelte-dxnc1j{cursor:not-allowed}.rr-progress__step.svelte-dxnc1j.svelte-dxnc1j{height:100%;position:absolute;left:0;top:0;background:#e0e1fe}.rr-progress__handler.svelte-dxnc1j.svelte-dxnc1j{width:20px;height:20px;border-radius:10px;position:absolute;top:2px;transform:translate(-50%, -50%);background:rgb(73, 80, 246)}.rr-controller__btns.svelte-dxnc1j.svelte-dxnc1j{display:flex;align-items:center;justify-content:center;font-size:13px}.rr-controller__btns.svelte-dxnc1j button.svelte-dxnc1j{width:32px;height:32px;display:flex;padding:0;align-items:center;justify-content:center;background:none;border:none;border-radius:50%;cursor:pointer}.rr-controller__btns.svelte-dxnc1j button.svelte-dxnc1j:active{background:#e0e1fe}.rr-controller__btns.svelte-dxnc1j button.active.svelte-dxnc1j{color:#fff;background:rgb(73, 80, 246)}.rr-controller__btns.svelte-dxnc1j button.svelte-dxnc1j:disabled{cursor:not-allowed}
-.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:.05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMwMCIgd2lkdGg9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBkYXRhLW5hbWU9IkxheWVyIDEiIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHBhdGggZD0iTTQ4LjcxIDQyLjkxTDM0LjA4IDI4LjI5IDQ0LjMzIDE4YTEgMSAwIDAwLS4zMy0xLjYxTDIuMzUgMS4wNmExIDEgMCAwMC0xLjI5IDEuMjlMMTYuMzkgNDRhMSAxIDAgMDAxLjY1LjM2bDEwLjI1LTEwLjI4IDE0LjYyIDE0LjYzYTEgMSAwIDAwMS40MSAwbDQuMzgtNC4zOGExIDEgMCAwMC4wMS0xLjQyem0tNS4wOSAzLjY3TDI5IDMyYTEgMSAwIDAwLTEuNDEgMGwtOS44NSA5Ljg1TDMuNjkgMy42OWwzOC4xMiAxNEwzMiAyNy41OEExIDEgMCAwMDMyIDI5bDE0LjU5IDE0LjYyeiIvPjwvc3ZnPg==")}.replayer-mouse:after{content:"";display:inline-block;width:20px;height:20px;border-radius:10px;background:#4950f6;transform:translate(-10px,-10px);opacity:.3}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;border-radius:10px;transform:translate(-10px,-10px)}50%{opacity:.5;width:10px;height:10px;border-radius:5px;transform:translate(-5px,-5px)}}.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}.replayer-wrapper{float:left;clear:both;transform-origin:top left;left:50%;top:50%}.replayer-wrapper>iframe{border:none}
-.switch.svelte-1mmdovf.svelte-1mmdovf{height:1em;display:flex;align-items:center}.switch.disabled.svelte-1mmdovf.svelte-1mmdovf{opacity:0.5}.label.svelte-1mmdovf.svelte-1mmdovf{margin:0 8px}.switch.svelte-1mmdovf input[type='checkbox'].svelte-1mmdovf{position:absolute;opacity:0}.switch.svelte-1mmdovf label.svelte-1mmdovf{width:2em;height:1em;position:relative;cursor:pointer;display:block}.switch.disabled.svelte-1mmdovf label.svelte-1mmdovf{cursor:not-allowed}.switch.svelte-1mmdovf label.svelte-1mmdovf:before{content:'';position:absolute;width:2em;height:1em;left:0.1em;transition:background 0.1s ease;background:rgba(73, 80, 246, 0.5);border-radius:50px}.switch.svelte-1mmdovf label.svelte-1mmdovf:after{content:'';position:absolute;width:1em;height:1em;border-radius:50px;left:0;transition:all 0.2s ease;box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.3);background:#fcfff4;animation:switch-off 0.2s ease-out;z-index:2}.switch input[type='checkbox']:checked+label.svelte-1mmdovf.svelte-1mmdovf:before{background:rgb(73, 80, 246)}.switch input[type='checkbox']:checked+label.svelte-1mmdovf.svelte-1mmdovf:after{animation:switch-on 0.2s ease-out;left:1.1em}
-
-/*# sourceMappingURL=bundle.css.map */
\ No newline at end of file
diff --git a/public/public/bundle.css.map b/public/public/bundle.css.map
deleted file mode 100644
index 24c87a90bf..0000000000
--- a/public/public/bundle.css.map
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "version": 3,
-  "file": "bundle.css",
-  "sources": [
-    "../Controller.svelte",
-    "../Player.svelte",
-    "../Switch.svelte"
-  ],
-  "sourcesContent": [
-    "<script lang=\"ts\">import { EventType } from 'rrweb';\n;\n;\n;\nimport { onMount, onDestroy, createEventDispatcher, afterUpdate, } from 'svelte';\nimport { formatTime } from './utils';\nimport Switch from './components/Switch.svelte';\nconst dispatch = createEventDispatcher();\nexport let replayer;\nexport let showController;\nexport let autoPlay;\nexport let skipInactive;\nexport let speedOption;\nexport let speed = speedOption.length ? speedOption[0] : 1;\nexport let tags = {};\nlet currentTime = 0;\n$: {\n    dispatch('ui-update-current-time', { payload: currentTime });\n}\nlet timer = null;\nlet playerState;\n$: {\n    dispatch('ui-update-player-state', { payload: playerState });\n}\nlet speedState;\nlet progress;\nlet step;\nlet finished;\nlet meta;\n$: meta = replayer.getMetaData();\nlet percentage;\n$: {\n    const percent = Math.min(1, currentTime / meta.totalTime);\n    percentage = `${100 * percent}%`;\n    dispatch('ui-update-progress', { payload: percent });\n}\nlet customEvents;\n$: customEvents = (() => {\n    const { context } = replayer.service.state;\n    const totalEvents = context.events.length;\n    const start = context.events[0].timestamp;\n    const end = context.events[totalEvents - 1].timestamp;\n    const customEvents = [];\n    // calculate tag position.\n    const position = (startTime, endTime, tagTime) => {\n        const sessionDuration = endTime - startTime;\n        const eventDuration = endTime - tagTime;\n        const eventPosition = 100 - (eventDuration / sessionDuration) * 100;\n        return eventPosition.toFixed(2);\n    };\n    // loop through all the events and find out custom event.\n    context.events.forEach((event) => {\n        /**\n         * we are only interested in custom event and calculate it's position\n         * to place it in player's timeline.\n         */\n        if (event.type === EventType.Custom) {\n            const customEvent = {\n                name: event.data.tag,\n                background: tags[event.data.tag] || 'rgb(73, 80, 246)',\n                position: `${position(start, end, event.timestamp)}%`,\n            };\n            customEvents.push(customEvent);\n        }\n    });\n    return customEvents;\n})();\nconst loopTimer = () => {\n    stopTimer();\n    function update() {\n        currentTime = replayer.getCurrentTime();\n        if (currentTime < meta.totalTime) {\n            timer = requestAnimationFrame(update);\n        }\n    }\n    timer = requestAnimationFrame(update);\n};\nconst stopTimer = () => {\n    if (timer) {\n        cancelAnimationFrame(timer);\n        timer = null;\n    }\n};\nexport const toggle = () => {\n    switch (playerState) {\n        case 'playing':\n            pause();\n            break;\n        case 'paused':\n            play();\n            break;\n        default:\n            break;\n    }\n};\nexport const play = () => {\n    if (playerState !== 'paused') {\n        return;\n    }\n    if (finished) {\n        replayer.play();\n        finished = false;\n    }\n    else {\n        replayer.play(currentTime);\n    }\n};\nexport const pause = () => {\n    if (playerState !== 'playing') {\n        return;\n    }\n    replayer.pause();\n};\nexport const goto = (timeOffset) => {\n    currentTime = timeOffset;\n    const isPlaying = playerState === 'playing';\n    replayer.pause();\n    replayer.play(timeOffset);\n    if (!isPlaying) {\n        replayer.pause();\n    }\n};\nconst handleProgressClick = (event) => {\n    if (speedState === 'skipping') {\n        return;\n    }\n    const progressRect = progress.getBoundingClientRect();\n    const x = event.clientX - progressRect.left;\n    let percent = x / progressRect.width;\n    if (percent < 0) {\n        percent = 0;\n    }\n    else if (percent > 1) {\n        percent = 1;\n    }\n    const timeOffset = meta.totalTime * percent;\n    goto(timeOffset);\n};\nexport const setSpeed = (newSpeed) => {\n    let needFreeze = playerState === 'playing';\n    speed = newSpeed;\n    if (needFreeze) {\n        replayer.pause();\n    }\n    replayer.setConfig({ speed });\n    if (needFreeze) {\n        replayer.play(currentTime);\n    }\n};\nexport const toggleSkipInactive = () => {\n    skipInactive = !skipInactive;\n};\nonMount(() => {\n    playerState = replayer.service.state.value;\n    speedState = replayer.speedService.state.value;\n    replayer.on('state-change', (states) => {\n        const { player, speed } = states;\n        if ((player === null || player === void 0 ? void 0 : player.value) && playerState !== player.value) {\n            playerState = player.value;\n            switch (playerState) {\n                case 'playing':\n                    loopTimer();\n                    break;\n                case 'paused':\n                    stopTimer();\n                    break;\n                default:\n                    break;\n            }\n        }\n        if ((speed === null || speed === void 0 ? void 0 : speed.value) && speedState !== speed.value) {\n            speedState = speed.value;\n        }\n    });\n    replayer.on('finish', () => {\n        finished = true;\n    });\n    if (autoPlay) {\n        replayer.play();\n    }\n});\nafterUpdate(() => {\n    if (skipInactive !== replayer.config.skipInactive) {\n        replayer.setConfig({ skipInactive });\n    }\n});\nonDestroy(() => {\n    replayer.pause();\n    stopTimer();\n});\n</script>\n\n<style>\n.rr-controller {\n  width: 100%;\n  height: 80px;\n  background: #fff;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  align-items: center;\n  border-radius: 0 0 5px 5px;\n}\n\n.rr-timeline {\n  width: 80%;\n  display: flex;\n  align-items: center;\n}\n\n.rr-timeline__time {\n  display: inline-block;\n  width: 100px;\n  text-align: center;\n  color: #11103e;\n}\n\n.rr-progress {\n  flex: 1;\n  height: 12px;\n  background: #eee;\n  position: relative;\n  border-radius: 3px;\n  cursor: pointer;\n  box-sizing: border-box;\n  border-top: solid 4px #fff;\n  border-bottom: solid 4px #fff;\n}\n\n.rr-progress.disabled {\n  cursor: not-allowed;\n}\n\n.rr-progress__step {\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  background: #e0e1fe;\n}\n\n.rr-progress__handler {\n  width: 20px;\n  height: 20px;\n  border-radius: 10px;\n  position: absolute;\n  top: 2px;\n  transform: translate(-50%, -50%);\n  background: rgb(73, 80, 246);\n}\n\n.rr-controller__btns {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 13px;\n}\n\n.rr-controller__btns button {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  padding: 0;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n.rr-controller__btns button:active {\n  background: #e0e1fe;\n}\n\n.rr-controller__btns button.active {\n  color: #fff;\n  background: rgb(73, 80, 246);\n}\n\n.rr-controller__btns button:disabled {\n  cursor: not-allowed;\n}</style>\n\n{#if showController}\n  <div class=\"rr-controller\">\n    <div class=\"rr-timeline\">\n      <span class=\"rr-timeline__time\">{formatTime(currentTime)}</span>\n      <div\n        class=\"rr-progress\"\n        class:disabled={speedState === 'skipping'}\n        bind:this={progress}\n        on:click={(event) => handleProgressClick(event)}>\n        <div\n          class=\"rr-progress__step\"\n          bind:this={step}\n          style=\"width: {percentage}\" />\n        {#each customEvents as event}\n          <div\n            title={event.name}\n            style=\"width: 10px;height: 5px;position: absolute;top:\n            2px;transform: translate(-50%, -50%);background: {event.background};left:\n            {event.position};\" />\n        {/each}\n\n        <div class=\"rr-progress__handler\" style=\"left: {percentage}\" />\n      </div>\n      <span class=\"rr-timeline__time\">{formatTime(meta.totalTime)}</span>\n    </div>\n    <div class=\"rr-controller__btns\">\n      <button on:click={toggle}>\n        {#if playerState === 'playing'}\n          <svg\n            class=\"icon\"\n            viewBox=\"0 0 1024 1024\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            width=\"16\"\n            height=\"16\">\n            <path\n              d=\"M682.65984 128q53.00224 0 90.50112 37.49888t37.49888 90.50112l0\n              512q0 53.00224-37.49888 90.50112t-90.50112\n              37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224\n              37.49888-90.50112t90.50112-37.49888zM341.34016 128q53.00224 0\n              90.50112 37.49888t37.49888 90.50112l0 512q0 53.00224-37.49888\n              90.50112t-90.50112\n              37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224\n              37.49888-90.50112t90.50112-37.49888zM341.34016 213.34016q-17.67424\n              0-30.16704 12.4928t-12.4928 30.16704l0 512q0 17.67424 12.4928\n              30.16704t30.16704 12.4928 30.16704-12.4928\n              12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928zM682.65984\n              213.34016q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 512q0\n              17.67424 12.4928 30.16704t30.16704 12.4928 30.16704-12.4928\n              12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928z\" />\n          </svg>\n        {:else}\n          <svg\n            class=\"icon\"\n            viewBox=\"0 0 1024 1024\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            width=\"16\"\n            height=\"16\">\n            <path\n              d=\"M170.65984 896l0-768 640 384zM644.66944\n              512l-388.66944-233.32864 0 466.65728z\" />\n          </svg>\n        {/if}\n      </button>\n      {#each speedOption as s}\n        <button\n          class:active={s === speed && speedState !== 'skipping'}\n          on:click={() => setSpeed(s)}\n          disabled={speedState === 'skipping'}>\n          {s}x\n        </button>\n      {/each}\n      <Switch\n        id=\"skip\"\n        bind:checked={skipInactive}\n        disabled={speedState === 'skipping'}\n        label=\"skip inactive\" />\n      <button on:click={() => dispatch('fullscreen')}>\n        <svg\n          class=\"icon\"\n          viewBox=\"0 0 1024 1024\"\n          version=\"1.1\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          width=\"16\"\n          height=\"16\">\n          <defs>\n            <style type=\"text/css\"></style>\n          </defs>\n          <path\n            d=\"M916 380c-26.4 0-48-21.6-48-48L868 223.2 613.6 477.6c-18.4\n            18.4-48.8 18.4-68 0-18.4-18.4-18.4-48.8 0-68L800 156 692 156c-26.4\n            0-48-21.6-48-48 0-26.4 21.6-48 48-48l224 0c26.4 0 48 21.6 48 48l0\n            224C964 358.4 942.4 380 916 380zM231.2 860l108.8 0c26.4 0 48 21.6 48\n            48s-21.6 48-48 48l-224 0c-26.4 0-48-21.6-48-48l0-224c0-26.4 21.6-48\n            48-48 26.4 0 48 21.6 48 48L164 792l253.6-253.6c18.4-18.4 48.8-18.4\n            68 0 18.4 18.4 18.4 48.8 0 68L231.2 860z\"\n            p-id=\"1286\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n{/if}\n",
-    "<script lang=\"ts\">import { onMount, onDestroy } from 'svelte';\nimport { Replayer, unpack, mirror } from 'rrweb';\n;\nimport { inlineCss, openFullscreen, exitFullscreen, isFullscreen, onFullscreenChange, typeOf, } from './utils';\nimport Controller from './Controller.svelte';\nexport let width = 1024;\nexport let height = 576;\nexport let events = [];\nexport let skipInactive = true;\nexport let autoPlay = true;\nexport let speedOption = [1, 2, 4, 8];\nexport let speed = 1;\nexport let showController = true;\nexport let tags = {};\nexport const getMirror = () => mirror;\nconst controllerHeight = 80;\nlet player;\nlet frame;\nlet replayer;\nlet fullscreenListener;\nlet _width = width;\nlet _height = height;\nlet controller;\nlet style;\n$: style = inlineCss({\n    width: `${width}px`,\n    height: `${height}px`,\n});\nlet playerStyle;\n$: playerStyle = inlineCss({\n    width: `${width}px`,\n    height: `${height + (showController ? controllerHeight : 0)}px`,\n});\nconst updateScale = (el, frameDimension) => {\n    const widthScale = width / frameDimension.width;\n    const heightScale = height / frameDimension.height;\n    el.style.transform =\n        `scale(${Math.min(widthScale, heightScale, 1)})` +\n            'translate(-50%, -50%)';\n};\nexport const triggerResize = () => {\n    updateScale(replayer.wrapper, {\n        width: replayer.iframe.offsetWidth,\n        height: replayer.iframe.offsetHeight,\n    });\n};\nexport const toggleFullscreen = () => {\n    if (player) {\n        isFullscreen() ? exitFullscreen() : openFullscreen(player);\n    }\n};\nexport const addEventListener = (event, handler) => {\n    replayer.on(event, handler);\n    switch (event) {\n        case 'ui-update-current-time':\n        case 'ui-update-progress':\n        case 'ui-update-player-state':\n            controller.$on(event, ({ detail }) => handler(detail));\n        default:\n            break;\n    }\n};\nexport const addEvent = (event) => {\n    replayer.addEvent(event);\n};\nexport const getMetaData = () => replayer.getMetaData();\nexport const getReplayer = () => replayer;\n// by pass controller methods as public API\nexport const toggle = () => {\n    controller.toggle();\n};\nexport const setSpeed = (speed) => {\n    controller.setSpeed(speed);\n};\nexport const toggleSkipInactive = () => {\n    controller.toggleSkipInactive();\n};\nexport const play = () => {\n    controller.play();\n};\nexport const pause = () => {\n    controller.pause();\n};\nexport const goto = (timeOffset) => {\n    controller.goto(timeOffset);\n};\nonMount(() => {\n    // runtime type check\n    if (speedOption !== undefined && typeOf(speedOption) !== 'array') {\n        throw new Error('speedOption must be array');\n    }\n    speedOption.forEach((item) => {\n        if (typeOf(item) !== 'number') {\n            throw new Error('item of speedOption must be number');\n        }\n    });\n    if (speedOption.indexOf(speed) < 0) {\n        throw new Error(`speed must be one of speedOption,\n      current config:\n      {\n        ...\n        speed: ${speed},\n        speedOption: [${speedOption.toString()}]\n        ...\n      }\n      `);\n    }\n    replayer = new Replayer(events, Object.assign({ speed, root: frame, unpackFn: unpack }, $$props));\n    replayer.on('resize', (dimension) => {\n        updateScale(replayer.wrapper, dimension);\n    });\n    fullscreenListener = onFullscreenChange(() => {\n        if (isFullscreen()) {\n            setTimeout(() => {\n                _width = width;\n                _height = height;\n                width = player.offsetWidth;\n                height = player.offsetHeight;\n                updateScale(replayer.wrapper, {\n                    width: replayer.iframe.offsetWidth,\n                    height: replayer.iframe.offsetHeight,\n                });\n            }, 0);\n        }\n        else {\n            width = _width;\n            height = _height;\n            updateScale(replayer.wrapper, {\n                width: replayer.iframe.offsetWidth,\n                height: replayer.iframe.offsetHeight,\n            });\n        }\n    });\n});\nonDestroy(() => {\n    fullscreenListener && fullscreenListener();\n});\n</script>\n\n<style global>:global(.replayer-wrapper){position:relative}:global(.replayer-mouse){position:absolute;width:20px;height:20px;transition:.05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMwMCIgd2lkdGg9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBkYXRhLW5hbWU9IkxheWVyIDEiIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHBhdGggZD0iTTQ4LjcxIDQyLjkxTDM0LjA4IDI4LjI5IDQ0LjMzIDE4YTEgMSAwIDAwLS4zMy0xLjYxTDIuMzUgMS4wNmExIDEgMCAwMC0xLjI5IDEuMjlMMTYuMzkgNDRhMSAxIDAgMDAxLjY1LjM2bDEwLjI1LTEwLjI4IDE0LjYyIDE0LjYzYTEgMSAwIDAwMS40MSAwbDQuMzgtNC4zOGExIDEgMCAwMC4wMS0xLjQyem0tNS4wOSAzLjY3TDI5IDMyYTEgMSAwIDAwLTEuNDEgMGwtOS44NSA5Ljg1TDMuNjkgMy42OWwzOC4xMiAxNEwzMiAyNy41OEExIDEgMCAwMDMyIDI5bDE0LjU5IDE0LjYyeiIvPjwvc3ZnPg==\")}:global(.replayer-mouse:after){content:\"\";display:inline-block;width:20px;height:20px;border-radius:10px;background:#4950f6;transform:translate(-10px,-10px);opacity:.3}:global(.replayer-mouse.active:after){animation:click .2s ease-in-out 1}:global(.replayer-mouse-tail){position:absolute;pointer-events:none}@keyframes -global-click{0%{opacity:.3;width:20px;height:20px;border-radius:10px;transform:translate(-10px,-10px)}50%{opacity:.5;width:10px;height:10px;border-radius:5px;transform:translate(-5px,-5px)}}:global(.rr-player) {\n  position: relative;\n  background: white;\n  float: left;\n  border-radius: 5px;\n  box-shadow: 0 24px 48px rgba(17, 16, 62, 0.12);\n}:global(.rr-player__frame) {\n  overflow: hidden;\n}:global(.replayer-wrapper) {\n  float: left;\n  clear: both;\n  transform-origin: top left;\n  left: 50%;\n  top: 50%;\n}:global(.replayer-wrapper) > :global(iframe) {\n  border: none;\n}</style>\n\n<div class=\"rr-player\" bind:this={player} style={playerStyle}>\n  <div class=\"rr-player__frame\" bind:this={frame} {style} />\n  {#if replayer}\n    <Controller\n      bind:this={controller}\n      {replayer}\n      {showController}\n      {autoPlay}\n      {speedOption}\n      {skipInactive}\n      {tags}\n      on:fullscreen={() => toggleFullscreen()} />\n  {/if}\n</div>\n",
-    "<script lang=\"ts\">export let disabled;\nexport let checked;\nexport let id;\nexport let label;\n</script>\n\n<style>\n.switch {\n  height: 1em;\n  display: flex;\n  align-items: center;\n}\n\n.switch.disabled {\n  opacity: 0.5;\n}\n\n.label {\n  margin: 0 8px;\n}\n\n.switch input[type='checkbox'] {\n  position: absolute;\n  opacity: 0;\n}\n\n.switch label {\n  width: 2em;\n  height: 1em;\n  position: relative;\n  cursor: pointer;\n  display: block;\n}\n\n.switch.disabled label {\n  cursor: not-allowed;\n}\n\n.switch label:before {\n  content: '';\n  position: absolute;\n  width: 2em;\n  height: 1em;\n  left: 0.1em;\n  transition: background 0.1s ease;\n  background: rgba(73, 80, 246, 0.5);\n  border-radius: 50px;\n}\n\n.switch label:after {\n  content: '';\n  position: absolute;\n  width: 1em;\n  height: 1em;\n  border-radius: 50px;\n  left: 0;\n  transition: all 0.2s ease;\n  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);\n  background: #fcfff4;\n  animation: switch-off 0.2s ease-out;\n  z-index: 2;\n}\n\n.switch input[type='checkbox']:checked + label:before {\n  background: rgb(73, 80, 246);\n}\n\n.switch input[type='checkbox']:checked + label:after {\n  animation: switch-on 0.2s ease-out;\n  left: 1.1em;\n}</style>\n\n<div class=\"switch\" class:disabled>\n  <input type=\"checkbox\" {id} bind:checked {disabled} />\n  <label for={id} />\n  <span class=\"label\">{label}</span>\n</div>\n"
-  ],
-  "names": [],
-  "mappings": "AAiMA,cAAc,4BAAC,CAAC,AACd,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CACZ,UAAU,CAAE,IAAI,CAChB,OAAO,CAAE,IAAI,CACb,cAAc,CAAE,MAAM,CACtB,eAAe,CAAE,YAAY,CAC7B,WAAW,CAAE,MAAM,CACnB,aAAa,CAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,AAC5B,CAAC,AAED,YAAY,4BAAC,CAAC,AACZ,KAAK,CAAE,GAAG,CACV,OAAO,CAAE,IAAI,CACb,WAAW,CAAE,MAAM,AACrB,CAAC,AAED,kBAAkB,4BAAC,CAAC,AAClB,OAAO,CAAE,YAAY,CACrB,KAAK,CAAE,KAAK,CACZ,UAAU,CAAE,MAAM,CAClB,KAAK,CAAE,OAAO,AAChB,CAAC,AAED,YAAY,4BAAC,CAAC,AACZ,IAAI,CAAE,CAAC,CACP,MAAM,CAAE,IAAI,CACZ,UAAU,CAAE,IAAI,CAChB,QAAQ,CAAE,QAAQ,CAClB,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,OAAO,CACf,UAAU,CAAE,UAAU,CACtB,UAAU,CAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAC1B,aAAa,CAAE,KAAK,CAAC,GAAG,CAAC,IAAI,AAC/B,CAAC,AAED,YAAY,SAAS,4BAAC,CAAC,AACrB,MAAM,CAAE,WAAW,AACrB,CAAC,AAED,kBAAkB,4BAAC,CAAC,AAClB,MAAM,CAAE,IAAI,CACZ,QAAQ,CAAE,QAAQ,CAClB,IAAI,CAAE,CAAC,CACP,GAAG,CAAE,CAAC,CACN,UAAU,CAAE,OAAO,AACrB,CAAC,AAED,qBAAqB,4BAAC,CAAC,AACrB,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CACZ,aAAa,CAAE,IAAI,CACnB,QAAQ,CAAE,QAAQ,CAClB,GAAG,CAAE,GAAG,CACR,SAAS,CAAE,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,CAChC,UAAU,CAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,AAC9B,CAAC,AAED,oBAAoB,4BAAC,CAAC,AACpB,OAAO,CAAE,IAAI,CACb,WAAW,CAAE,MAAM,CACnB,eAAe,CAAE,MAAM,CACvB,SAAS,CAAE,IAAI,AACjB,CAAC,AAED,kCAAoB,CAAC,MAAM,cAAC,CAAC,AAC3B,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CACZ,OAAO,CAAE,IAAI,CACb,OAAO,CAAE,CAAC,CACV,WAAW,CAAE,MAAM,CACnB,eAAe,CAAE,MAAM,CACvB,UAAU,CAAE,IAAI,CAChB,MAAM,CAAE,IAAI,CACZ,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,OAAO,AACjB,CAAC,AAED,kCAAoB,CAAC,oBAAM,OAAO,AAAC,CAAC,AAClC,UAAU,CAAE,OAAO,AACrB,CAAC,AAED,kCAAoB,CAAC,MAAM,OAAO,cAAC,CAAC,AAClC,KAAK,CAAE,IAAI,CACX,UAAU,CAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,AAC9B,CAAC,AAED,kCAAoB,CAAC,oBAAM,SAAS,AAAC,CAAC,AACpC,MAAM,CAAE,WAAW,AACrB,CAAC;AC/IqB,iBAAiB,AAAC,CAAC,SAAS,QAAQ,CAAC,AAAQ,eAAe,AAAC,CAAC,SAAS,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,IAAI,CAAC,WAAW,IAAI,CAAC,MAAM,CAAC,gBAAgB,OAAO,CAAC,oBAAoB,GAAG,CAAC,kBAAkB,SAAS,CAAC,iBAAiB,IAAI,4iBAA4iB,CAAC,CAAC,AAAQ,qBAAqB,AAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,YAAY,CAAC,MAAM,IAAI,CAAC,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,WAAW,OAAO,CAAC,UAAU,UAAU,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,AAAQ,4BAA4B,AAAC,CAAC,UAAU,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,AAAQ,oBAAoB,AAAC,CAAC,SAAS,QAAQ,CAAC,eAAe,IAAI,CAAC,WAAW,AAAQ,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU,UAAU,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,OAAO,IAAI,CAAC,cAAc,GAAG,CAAC,UAAU,UAAU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,AAAQ,UAAU,AAAE,CAAC,AACpzC,QAAQ,CAAE,QAAQ,CAClB,UAAU,CAAE,KAAK,CACjB,KAAK,CAAE,IAAI,CACX,aAAa,CAAE,GAAG,CAClB,UAAU,CAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,AAChD,CAAC,AAAQ,iBAAiB,AAAE,CAAC,AAC3B,QAAQ,CAAE,MAAM,AAClB,CAAC,AAAQ,iBAAiB,AAAE,CAAC,AAC3B,KAAK,CAAE,IAAI,CACX,KAAK,CAAE,IAAI,CACX,gBAAgB,CAAE,GAAG,CAAC,IAAI,CAC1B,IAAI,CAAE,GAAG,CACT,GAAG,CAAE,GAAG,AACV,CAAC,AAAQ,iBAAiB,AAAC,CAAW,MAAM,AAAE,CAAC,AAC7C,MAAM,CAAE,IAAI,AACd,CAAC;ACpJD,OAAO,8BAAC,CAAC,AACP,MAAM,CAAE,GAAG,CACX,OAAO,CAAE,IAAI,CACb,WAAW,CAAE,MAAM,AACrB,CAAC,AAED,OAAO,SAAS,8BAAC,CAAC,AAChB,OAAO,CAAE,GAAG,AACd,CAAC,AAED,MAAM,8BAAC,CAAC,AACN,MAAM,CAAE,CAAC,CAAC,GAAG,AACf,CAAC,AAED,sBAAO,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,eAAC,CAAC,AAC9B,QAAQ,CAAE,QAAQ,CAClB,OAAO,CAAE,CAAC,AACZ,CAAC,AAED,sBAAO,CAAC,KAAK,eAAC,CAAC,AACb,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CACX,QAAQ,CAAE,QAAQ,CAClB,MAAM,CAAE,OAAO,CACf,OAAO,CAAE,KAAK,AAChB,CAAC,AAED,OAAO,wBAAS,CAAC,KAAK,eAAC,CAAC,AACtB,MAAM,CAAE,WAAW,AACrB,CAAC,AAED,sBAAO,CAAC,oBAAK,OAAO,AAAC,CAAC,AACpB,OAAO,CAAE,EAAE,CACX,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CACX,IAAI,CAAE,KAAK,CACX,UAAU,CAAE,UAAU,CAAC,IAAI,CAAC,IAAI,CAChC,UAAU,CAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAClC,aAAa,CAAE,IAAI,AACrB,CAAC,AAED,sBAAO,CAAC,oBAAK,MAAM,AAAC,CAAC,AACnB,OAAO,CAAE,EAAE,CACX,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CACX,aAAa,CAAE,IAAI,CACnB,IAAI,CAAE,CAAC,CACP,UAAU,CAAE,GAAG,CAAC,IAAI,CAAC,IAAI,CACzB,UAAU,CAAE,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAC9C,UAAU,CAAE,OAAO,CACnB,SAAS,CAAE,UAAU,CAAC,IAAI,CAAC,QAAQ,CACnC,OAAO,CAAE,CAAC,AACZ,CAAC,AAED,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAG,mCAAK,OAAO,AAAC,CAAC,AACrD,UAAU,CAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,AAC9B,CAAC,AAED,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAG,mCAAK,MAAM,AAAC,CAAC,AACpD,SAAS,CAAE,SAAS,CAAC,IAAI,CAAC,QAAQ,CAClC,IAAI,CAAE,KAAK,AACb,CAAC"
-}
\ No newline at end of file

From 922919d251040f8fdd71e25e8eaee338d95568ef Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Thu, 22 Apr 2021 15:32:47 +0200
Subject: [PATCH 311/524] update rollup

---
 package.json     |  11 +-
 rollup.config.js |  23 ++-
 yarn.lock        | 488 ++++++++++++++++++-----------------------------
 3 files changed, 207 insertions(+), 315 deletions(-)

diff --git a/package.json b/package.json
index 33e1f2e59d..df1f155685 100644
--- a/package.json
+++ b/package.json
@@ -11,13 +11,14 @@
     "eslint-config-google": "^0.11.0",
     "eslint-plugin-svelte3": "^2.7.3",
     "postcss-easy-import": "^3.0.0",
-    "rollup": "^1.20.0",
-    "rollup-plugin-livereload": "^1.0.0",
-    "rollup-plugin-svelte": "^6.1.1",
-    "rollup-plugin-terser": "^5.1.2",
+    "rollup": "^2.45.2",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^7.1.0",
+    "rollup-plugin-terser": "^7.0.2",
     "sirv-cli": "^0.4.4",
     "svelte": "^3.2.0",
-    "svelte-check": "^0.1.0",
+    "svelte-check": "^1.4.0",
     "svelte-preprocess": "^4.0.0",
     "tslib": "^2.0.0",
     "typescript": "^3.9.7"
diff --git a/rollup.config.js b/rollup.config.js
index 84530b9a52..4b0c358e23 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -6,6 +6,7 @@ import { terser } from 'rollup-plugin-terser';
 import sveltePreprocess from 'svelte-preprocess';
 import typescript from '@rollup/plugin-typescript';
 import pkg from './package.json';
+import css from 'rollup-plugin-css-only';
 
 // eslint-disable-next-line no-undef
 const production = !process.env.ROLLUP_WATCH;
@@ -33,14 +34,18 @@ const entries = (production
 
 export default entries.map((output) => ({
   input: 'src/main.ts',
-  output,
+  output: {
+    file: output.file,
+    format: output.format,
+    name: output.name,
+    exports: 'auto',
+  },
   plugins: [
     svelte({
-      // enable run-time checks when not in production
-      dev: !production,
-      // we'll extract any component CSS out into
-      // a separate file — better for performance
-      css: output.css && ((css) => css.write(output.css)),
+      compilerOptions: {
+        // enable run-time checks when not in production
+        dev: !production,
+      },
       preprocess: sveltePreprocess({
         postcss: {
           // eslint-disable-next-line no-undef
@@ -62,6 +67,12 @@ export default entries.map((output) => ({
 
     typescript({ sourceMap: !production }),
 
+    css({
+      // we'll extract any component CSS out into
+      // a separate file — better for performance
+      output: output.css,
+    }),
+
     // In dev mode, call `npm run start` once
     // the bundle has been generated
     !production && serve(),
diff --git a/yarn.lock b/yarn.lock
index 1467bdde2a..a4768be170 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,18 +2,30 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5":
+"@babel/code-frame@^7.0.0":
   version "7.10.4"
   resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
   integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
   dependencies:
     "@babel/highlight" "^7.10.4"
 
+"@babel/code-frame@^7.10.4":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658"
+  integrity sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==
+  dependencies:
+    "@babel/highlight" "^7.12.13"
+
 "@babel/helper-validator-identifier@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
   integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
 
+"@babel/helper-validator-identifier@^7.12.11":
+  version "7.12.11"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
+  integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
+
 "@babel/highlight@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
@@ -23,10 +35,14 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@emmetio/extract-abbreviation@0.1.6":
-  version "0.1.6"
-  resolved "https://registry.npmjs.org/@emmetio/extract-abbreviation/-/extract-abbreviation-0.1.6.tgz#e4a9856c1057f0aff7d443b8536477c243abe28c"
-  integrity sha512-Ce3xE2JvTSEbASFbRbA1gAIcMcZWdS2yUYRaQbeM0nbOzaZrUYfa3ePtcriYRZOZmr+CkKA+zbjhvTpIOAYVcw==
+"@babel/highlight@^7.12.13":
+  version "7.13.10"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.13.10.tgz#a8b2a66148f5b27d666b15d81774347a731d52d1"
+  integrity sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.12.11"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
 
 "@polka/url@^0.5.0":
   version "0.5.0"
@@ -59,12 +75,20 @@
 
 "@rollup/plugin-typescript@^4.0.0":
   version "4.1.2"
-  resolved "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-4.1.2.tgz#6f910430276ae3e53a47a12ad65820627e7b6ad9"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-4.1.2.tgz#6f910430276ae3e53a47a12ad65820627e7b6ad9"
   integrity sha512-+7UlGat/99e2JbmGNnIauxwEhYLwrL7adO/tSJxUN57xrrS3Ps+ZzYpLCDGPZJ57j+ZJTZLLN89KXW9JMEB+jg==
   dependencies:
     "@rollup/pluginutils" "^3.0.1"
     resolve "^1.14.1"
 
+"@rollup/pluginutils@4":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.0.tgz#0dcc61c780e39257554feb7f77207dceca13c838"
+  integrity sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
 "@rollup/pluginutils@^3.0.1", "@rollup/pluginutils@^3.0.8":
   version "3.1.0"
   resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
@@ -95,9 +119,9 @@
   integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
 
 "@types/estree@*":
-  version "0.0.45"
-  resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.45.tgz#e9387572998e5ecdac221950dab3e8c3b16af884"
-  integrity sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g==
+  version "0.0.47"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.47.tgz#d7a51db20f0650efec24cd04994f523d93172ed4"
+  integrity sha512-c5ciR06jK8u9BstrmJyO97m+klJrrhCf9u3rLu3DEAJBirxRqSCvDQoYKmxuYwQI5SZChAWu+tq9oVlGRuzPAg==
 
 "@types/estree@0.0.39":
   version "0.0.39"
@@ -110,18 +134,13 @@
   integrity sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==
 
 "@types/node@*":
-  version "14.0.26"
-  resolved "https://registry.npmjs.org/@types/node/-/node-14.0.26.tgz#22a3b8a46510da8944b67bfc27df02c34a35331c"
-  integrity sha512-W+fpe5s91FBGE0pEa0lnqGLL4USgpLgs4nokw16SrBBco/gQxuua7KnArSEOd5iaMqbbSHV10vUDkJYJJqpXKA==
-
-"@types/parse-json@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
-  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+  version "14.14.41"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.41.tgz#d0b939d94c1d7bd53d04824af45f1139b8c45615"
+  integrity sha512-dueRKfaJL4RTtSa7bWeTK1M+VH+Gns73oCgzvYfHZywRCoPSd8EkXBL0mZ9unPTveBn+D9phZBaxuzpwjWkW0g==
 
 "@types/pug@^2.0.4":
   version "2.0.4"
-  resolved "https://registry.npmjs.org/@types/pug/-/pug-2.0.4.tgz#8772fcd0418e3cd2cc171555d73007415051f4b2"
+  resolved "https://registry.yarnpkg.com/@types/pug/-/pug-2.0.4.tgz#8772fcd0418e3cd2cc171555d73007415051f4b2"
   integrity sha1-h3L80EGOPNLMFxVV1zAHQVBR9LI=
 
 "@types/resolve@0.0.8":
@@ -133,7 +152,7 @@
 
 "@types/sass@^1.16.0":
   version "1.16.0"
-  resolved "https://registry.npmjs.org/@types/sass/-/sass-1.16.0.tgz#b41ac1c17fa68ffb57d43e2360486ef526b3d57d"
+  resolved "https://registry.yarnpkg.com/@types/sass/-/sass-1.16.0.tgz#b41ac1c17fa68ffb57d43e2360486ef526b3d57d"
   integrity sha512-2XZovu4NwcqmtZtsBR5XYLw18T8cBCnU2USFHTnYLLHz9fkhnoEMoDsqShJIOFsFhn5aJHjweiUUdTrDGujegA==
   dependencies:
     "@types/node" "*"
@@ -208,7 +227,7 @@ acorn-jsx@^5.2.0:
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
   integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==
 
-acorn@^7.1.0, acorn@^7.3.1:
+acorn@^7.3.1:
   version "7.3.1"
   resolved "https://registry.npmjs.org/acorn/-/acorn-7.3.1.tgz#85010754db53c3fbaf3b9ea3e083aa5c5d147ffd"
   integrity sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA==
@@ -362,6 +381,21 @@ chokidar@^3.3.0:
   optionalDependencies:
     fsevents "~2.1.2"
 
+chokidar@^3.4.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
+  integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.5.0"
+  optionalDependencies:
+    fsevents "~2.3.1"
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -406,17 +440,6 @@ console-clear@^1.1.0:
   resolved "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz#995e20cbfbf14dd792b672cde387bd128d674bf7"
   integrity sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==
 
-cosmiconfig@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
-  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
-  dependencies:
-    "@types/parse-json" "^4.0.0"
-    import-fresh "^3.1.0"
-    parse-json "^5.0.0"
-    path-type "^4.0.0"
-    yaml "^1.7.2"
-
 cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -433,11 +456,6 @@ debug@^4.0.1, debug@^4.1.1:
   dependencies:
     ms "^2.1.1"
 
-dedent-js@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz#bee5fb7c9e727d85dffa24590d10ec1ab1255305"
-  integrity sha1-vuX7fJ5yfYXf+iRZDRDsGrElUwU=
-
 deep-is@^0.1.3:
   version "0.1.3"
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -445,7 +463,7 @@ deep-is@^0.1.3:
 
 detect-indent@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
   integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==
 
 doctrine@^3.0.0:
@@ -467,13 +485,6 @@ enquirer@^2.3.5:
   dependencies:
     ansi-colors "^4.1.1"
 
-error-ex@^1.3.1:
-  version "1.3.2"
-  resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
-  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
-  dependencies:
-    is-arrayish "^0.2.1"
-
 escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -600,9 +611,9 @@ estree-walker@^1.0.1:
   integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
 
 estree-walker@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.1.tgz#f8e030fb21cefa183b44b7ad516b747434e7a3e0"
-  integrity sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
 
 esutils@^2.0.2:
   version "2.0.3"
@@ -667,6 +678,16 @@ fsevents@~2.1.2:
   resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
   integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
 
+fsevents@~2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
@@ -724,12 +745,19 @@ has-flag@^4.0.0:
   resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
-import-fresh@^3.0.0, import-fresh@^3.1.0:
+import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
   integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==
@@ -755,11 +783,6 @@ inherits@2:
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-is-arrayish@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
-  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
-
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -767,6 +790,13 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
+is-core-module@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a"
+  integrity sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==
+  dependencies:
+    has "^1.0.3"
+
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@@ -806,13 +836,14 @@ isexe@^2.0.0:
   resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
-jest-worker@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
-  integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
+jest-worker@^26.2.1:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
+  integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
   dependencies:
+    "@types/node" "*"
     merge-stream "^2.0.0"
-    supports-color "^6.1.0"
+    supports-color "^7.0.0"
 
 js-tokens@^4.0.0:
   version "4.0.0"
@@ -827,11 +858,6 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-json-parse-better-errors@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
-  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
-
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -842,11 +868,6 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
-jsonc-parser@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-1.0.3.tgz#1d53d7160e401a783dbceabaad82473f80e6ad7e"
-  integrity sha512-hk/69oAeaIzchq/v3lS50PXuzn5O2ynldopMC+SWBql7J2WtdptfB9dy8Y7+Og5rPkTCpn83zTiO8FMcqlXJ/g==
-
 kleur@^3.0.0:
   version "3.0.3"
   resolved "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
@@ -860,11 +881,6 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lines-and-columns@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
-  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
-
 livereload-js@^3.1.0:
   version "3.2.4"
   resolved "https://registry.npmjs.org/livereload-js/-/livereload-js-3.2.4.tgz#21a05f8a7bd04c9531a7c63dfb6ff4b677d30f43"
@@ -890,14 +906,7 @@ lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4:
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
   integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
 
-lower-case@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/lower-case/-/lower-case-2.0.1.tgz#39eeb36e396115cc05e29422eaea9e692c9408c7"
-  integrity sha512-LiWgfDLLb1dwbFQZsSglpRj+1ctGnayXz3Uv0/WO8n558JycT5fg6zkNcnW0G68Nn0aEldTFeEfmjCfmqry/rQ==
-  dependencies:
-    tslib "^1.10.0"
-
-magic-string@^0.25.2, magic-string@^0.25.3:
+magic-string@^0.25.2:
   version "0.25.7"
   resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
   integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
@@ -916,7 +925,7 @@ mime@^2.3.1:
 
 min-indent@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
 minimatch@^3.0.4:
@@ -958,14 +967,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-no-case@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.npmjs.org/no-case/-/no-case-3.0.3.tgz#c21b434c1ffe48b39087e86cfb4d2582e9df18f8"
-  integrity sha512-ehY/mVQCf9BL0gKfsJBvFJen+1V//U+0HQMPrWct40ixE4jnv0bfvxDbWtAHL9EcaPEOJHVVYKoQn1TlZUB8Tw==
-  dependencies:
-    lower-case "^2.0.1"
-    tslib "^1.10.0"
-
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -1007,24 +1008,6 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
-parse-json@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.0.1.tgz#7cfe35c1ccd641bce3981467e6c2ece61b3b3878"
-  integrity sha512-ztoZ4/DYeXQq4E21v169sC8qWINGpcosGv9XhTDvg9/hWvx/zrFkc9BiWxR58OJLHGk28j5BL0SDLeV2WmFZlQ==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    error-ex "^1.3.1"
-    json-parse-better-errors "^1.0.1"
-    lines-and-columns "^1.1.6"
-
-pascal-case@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.1.tgz#5ac1975133ed619281e88920973d2cd1f279de5f"
-  integrity sha512-XIeHKqIrsquVTQL2crjq3NfJUxmdLasn3TYOU0VBM+UX2a6ztAWBlJQBePLGY7VHW8+2dRadeIPK5+KImwTxQA==
-  dependencies:
-    no-case "^3.0.3"
-    tslib "^1.10.0"
-
 path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
@@ -1040,11 +1023,6 @@ path-parse@^1.0.6:
   resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
   integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
 
-path-type@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
-  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
-
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2:
   version "2.2.2"
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
@@ -1116,16 +1094,6 @@ prelude-ls@^1.2.1:
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier-plugin-svelte@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-1.1.0.tgz#e6ec282d8457598b0c02164083b11ad8cb8ab304"
-  integrity sha512-wmIggG/ryV0wcmE9D5p+k5TwKDpS2SGKJpF6IV1aYHK7dkBJD+di1w47Ci00DRsI4RrXZRC2Ef37DSyrTb6Zqg==
-
-prettier@2.0.5:
-  version "2.0.5"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
-  integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
-
 progress@^2.0.0:
   version "2.0.3"
   resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
@@ -1136,6 +1104,13 @@ punycode@^2.1.0:
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+randombytes@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
+  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
+  dependencies:
+    safe-buffer "^5.1.0"
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -1150,6 +1125,13 @@ readdirp@~3.4.0:
   dependencies:
     picomatch "^2.2.1"
 
+readdirp@~3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
+  integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==
+  dependencies:
+    picomatch "^2.2.1"
+
 regexpp@^3.0.0, regexpp@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
@@ -1157,7 +1139,7 @@ regexpp@^3.0.0, regexpp@^3.1.0:
 
 require-relative@^0.8.7:
   version "0.8.7"
-  resolved "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
+  resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
   integrity sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=
 
 resolve-from@^4.0.0:
@@ -1165,13 +1147,21 @@ resolve-from@^4.0.0:
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve@^1.1.7, resolve@^1.11.0, resolve@^1.14.1, resolve@^1.14.2:
+resolve@^1.1.7, resolve@^1.11.0, resolve@^1.14.2:
   version "1.17.0"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
   integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
   dependencies:
     path-parse "^1.0.6"
 
+resolve@^1.14.1:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
+  dependencies:
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
+
 rimraf@2.6.3:
   version "2.6.3"
   resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
@@ -1179,32 +1169,37 @@ rimraf@2.6.3:
   dependencies:
     glob "^7.1.3"
 
-rollup-plugin-livereload@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-1.3.0.tgz#8da90df13df6502b9d982997d6ac871092f15fdd"
-  integrity sha512-abyqXaB21+nFHo+vJULBqfzNx6zXABC19UyvqgDfdoxR/8pFAd041GO+GIUe8ZYC2DbuMUmioh1Lvbk14YLZgw==
+rollup-plugin-css-only@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-css-only/-/rollup-plugin-css-only-3.1.0.tgz#6a701cc5b051c6b3f0961e69b108a9a118e1b1df"
+  integrity sha512-TYMOE5uoD76vpj+RTkQLzC9cQtbnJNktHPB507FzRWBVaofg7KhIqq1kGbcVOadARSozWF883Ho9KpSPKH8gqA==
+  dependencies:
+    "@rollup/pluginutils" "4"
+
+rollup-plugin-livereload@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.0.tgz#d3928d74e8cf2ae4286c5dd46b770fd3f3b82313"
+  integrity sha512-oC/8NqumGYuphkqrfszOHUUIwzKsaHBICw6QRwT5uD07gvePTS+HW+GFwu6f9K8W02CUuTvtIM9AWJrbj4wE1A==
   dependencies:
     livereload "^0.9.1"
 
-rollup-plugin-svelte@^6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-svelte/-/rollup-plugin-svelte-6.1.1.tgz#66362cf0500fb7a848283ebcf19d289a60ef0871"
-  integrity sha512-ijnm0pH1ScrY4uxwaNXBpNVejVzpL2769hIEbAlnqNUWZrffLspu5/k9/l/Wsj3NrEHLQ6wCKGagVJonyfN7ow==
+rollup-plugin-svelte@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-svelte/-/rollup-plugin-svelte-7.1.0.tgz#d45f2b92b1014be4eb46b55aa033fb9a9c65f04d"
+  integrity sha512-vopCUq3G+25sKjwF5VilIbiY6KCuMNHP1PFvx2Vr3REBNMDllKHFZN2B9jwwC+MqNc3UPKkjXnceLPEjTjXGXg==
   dependencies:
     require-relative "^0.8.7"
     rollup-pluginutils "^2.8.2"
-    sourcemap-codec "^1.4.8"
 
-rollup-plugin-terser@^5.1.2:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-5.3.0.tgz#9c0dd33d5771df9630cd027d6a2559187f65885e"
-  integrity sha512-XGMJihTIO3eIBsVGq7jiNYOdDMb3pVxuzY0uhOE/FM4x/u9nQgr3+McsjzqBn3QfHIpNSZmFnpoKAwHBEcsT7g==
+rollup-plugin-terser@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
+  integrity sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==
   dependencies:
-    "@babel/code-frame" "^7.5.5"
-    jest-worker "^24.9.0"
-    rollup-pluginutils "^2.8.2"
-    serialize-javascript "^2.1.2"
-    terser "^4.6.2"
+    "@babel/code-frame" "^7.10.4"
+    jest-worker "^26.2.1"
+    serialize-javascript "^4.0.0"
+    terser "^5.0.0"
 
 rollup-pluginutils@^2.8.2:
   version "2.8.2"
@@ -1213,14 +1208,12 @@ rollup-pluginutils@^2.8.2:
   dependencies:
     estree-walker "^0.6.1"
 
-rollup@^1.20.0:
-  version "1.32.1"
-  resolved "https://registry.npmjs.org/rollup/-/rollup-1.32.1.tgz#4480e52d9d9e2ae4b46ba0d9ddeaf3163940f9c4"
-  integrity sha512-/2HA0Ec70TvQnXdzynFffkjA6XN+1e2pEv/uKS5Ulca40g2L7KuOE3riasHoNVHOsFD5KKZgDsMk1CP3Tw9s+A==
-  dependencies:
-    "@types/estree" "*"
-    "@types/node" "*"
-    acorn "^7.1.0"
+rollup@^2.45.2:
+  version "2.45.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.45.2.tgz#8fb85917c9f35605720e92328f3ccbfba6f78b48"
+  integrity sha512-kRRU7wXzFHUzBIv0GfoFFIN3m9oteY4uAsKllIpQDId5cfnkWF2J130l+27dzDju0E6MScKiV0ZM5Bw8m4blYQ==
+  optionalDependencies:
+    fsevents "~2.3.1"
 
 rrweb-snapshot@^1.0.3:
   version "1.0.7"
@@ -1245,15 +1238,22 @@ sade@^1.4.0:
   dependencies:
     mri "^1.1.0"
 
+safe-buffer@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
 semver@^7.2.1, semver@^7.3.2:
   version "7.3.2"
   resolved "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
   integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
 
-serialize-javascript@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
-  integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
+serialize-javascript@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
+  dependencies:
+    randombytes "^2.1.0"
 
 shebang-command@^2.0.0:
   version "2.0.0"
@@ -1297,7 +1297,7 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
-source-map-support@~0.5.12:
+source-map-support@~0.5.19:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
   integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
@@ -1305,17 +1305,17 @@ source-map-support@~0.5.12:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+source-map@^0.6.0, source-map@^0.6.1:
   version "0.6.1"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.7.3:
+source-map@^0.7.3, source-map@~0.7.2:
   version "0.7.3"
-  resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
-sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
+sourcemap-codec@^1.4.4:
   version "1.4.8"
   resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
@@ -1350,7 +1350,7 @@ strip-ansi@^6.0.0:
 
 strip-indent@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
   integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
   dependencies:
     min-indent "^1.0.0"
@@ -1367,12 +1367,12 @@ supports-color@^5.3.0, supports-color@^5.4.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
-  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+supports-color@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
   dependencies:
-    has-flag "^3.0.0"
+    has-flag "^4.0.0"
 
 supports-color@^7.1.0:
   version "7.1.0"
@@ -1381,72 +1381,31 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-svelte-check@^0.1.0:
-  version "0.1.56"
-  resolved "https://registry.npmjs.org/svelte-check/-/svelte-check-0.1.56.tgz#a82bbb10bcb61c2da5a4cfc8c60e0d2325225019"
-  integrity sha512-XFdbb72Fcu6gZnjnrawpn9DEoTUEzrN07lbcm0vawizrw8UEsBPvg55RQgdCd53vfBriBnprP5Bi3YWi9R5Q+Q==
+svelte-check@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-1.4.0.tgz#5d15f6ce22564fab137d28abb3f6c48aa1a22a12"
+  integrity sha512-fcACzU7EJEQBxbbUub8o/3tm5gp0txdGXin9fzHHvtHfgyS9RHSfA5poTWlteeVigu2MSqrTpvMPGT/DazyK0g==
   dependencies:
     chalk "^4.0.0"
+    chokidar "^3.4.1"
     glob "^7.1.6"
+    import-fresh "^3.2.1"
     minimist "^1.2.5"
-    svelte-language-server "*"
-    vscode-languageserver "6.1.1"
-    vscode-languageserver-protocol "3.15.3"
-    vscode-languageserver-types "3.15.1"
-    vscode-uri "2.1.1"
-
-svelte-language-server@*:
-  version "0.10.75"
-  resolved "https://registry.npmjs.org/svelte-language-server/-/svelte-language-server-0.10.75.tgz#0cfc0ceb5642564fe98a8515989b17339bc2eb8c"
-  integrity sha512-ENLhx1z1pSIG0Szm+hgp3N5aB9/PCSAK0Cs/+XjEU5m6qm2Rl1aKb6v7NnuPSlpRV8Nv+B/0/xR0HIioHRi5Vw==
-  dependencies:
-    cosmiconfig "^6.0.0"
-    estree-walker "^2.0.1"
-    lodash "^4.17.19"
-    magic-string "^0.25.3"
-    prettier "2.0.5"
-    prettier-plugin-svelte "1.1.0"
     source-map "^0.7.3"
-    svelte "3.24.0"
-    svelte-preprocess "~3.9.11"
-    svelte2tsx "*"
+    svelte-preprocess "^4.0.0"
     typescript "*"
-    vscode-css-languageservice "4.1.0"
-    vscode-emmet-helper "1.2.17"
-    vscode-html-languageservice "3.0.4-next.15"
-    vscode-languageserver "6.1.1"
-    vscode-languageserver-types "3.15.1"
-    vscode-uri "2.1.1"
 
 svelte-preprocess@^4.0.0:
-  version "4.0.8"
-  resolved "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.0.8.tgz#d283218cd078b91419d7e11371d5f79060d07196"
-  integrity sha512-RNSwuk8chC9g1MZAkHPM+/LRc2jndBPph26GN3eWNkAVkGwwt6HNskcRkUn30ZW71my1vlhMhk2D5ajVcz8RmA==
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.7.2.tgz#e16bf5cc152df8097485ce8c7842073a83a12b1e"
+  integrity sha512-EToG+08rEsA33btv+C5g2qnRArwpTc5AoU0QBB3ZEkYagxAb2yPNsy0qsmtvbJOTBMy6o3oyijDdl3DMpMvpEg==
   dependencies:
     "@types/pug" "^2.0.4"
     "@types/sass" "^1.16.0"
     detect-indent "^6.0.0"
     strip-indent "^3.0.0"
 
-svelte-preprocess@~3.9.11:
-  version "3.9.12"
-  resolved "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-3.9.12.tgz#21e8452e45c6a4d89df37a38714af4a0186df3a1"
-  integrity sha512-OX8a7drmlYcX/bLKbtRTvcc0lYu5Ub78D4B/GVxac2zeyrj1e5vEJU6BsxFbc/8kFDqI6BgsCLZAqsFDr/KrDQ==
-  dependencies:
-    "@types/pug" "^2.0.4"
-    "@types/sass" "^1.16.0"
-    detect-indent "^6.0.0"
-    strip-indent "^3.0.0"
-
-svelte2tsx@*:
-  version "0.1.61"
-  resolved "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.1.61.tgz#ad06be6c74f78c5c06ecb9b1788035a0c2545968"
-  integrity sha512-XXs/85B+MED8zsuG3VPkkQQffoEVZwujgZrs2RSUl3hNPROXYkbOA+it5mMdlUzzOvaDY1ODlXoylBOU0eq6qA==
-  dependencies:
-    dedent-js "^1.0.1"
-    pascal-case "^3.1.1"
-
-svelte@3.24.0, svelte@^3.2.0:
+svelte@^3.2.0:
   version "3.24.0"
   resolved "https://registry.npmjs.org/svelte/-/svelte-3.24.0.tgz#6565a42c9705796fa66c6abb4fedc09f4323a4a8"
   integrity sha512-VFXom6EP2DK83kxy4ZlBbaZklSbZIrpNH3oNXlPYHJUuW4q1OuAr3ZoYbfIVTVYPDgrI7Yq0gQcOhDlAtO4qfw==
@@ -1461,14 +1420,14 @@ table@^5.2.3:
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
-terser@^4.6.2:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
-  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
+terser@^5.0.0:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.6.1.tgz#a48eeac5300c0a09b36854bf90d9c26fb201973c"
+  integrity sha512-yv9YLFQQ+3ZqgWCUk+pvNJwgUTdlIxUk1WTN+RnaFJe2L7ipG2csPT0ra2XRm7Cs8cxN7QXmK1rFzEwYEQkzXw==
   dependencies:
     commander "^2.20.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.12"
+    source-map "~0.7.2"
+    source-map-support "~0.5.19"
 
 text-table@^0.2.0:
   version "0.2.0"
@@ -1487,7 +1446,7 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-tslib@^1.10.0, tslib@^1.8.1:
+tslib@^1.8.1:
   version "1.13.0"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
   integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
@@ -1533,80 +1492,6 @@ v8-compile-cache@^2.0.3:
   resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745"
   integrity sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==
 
-vscode-css-languageservice@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/vscode-css-languageservice/-/vscode-css-languageservice-4.1.0.tgz#144c8274e0bf1719fa6f773ca684bd1c7ffd634f"
-  integrity sha512-iTX3dTp0Y0RFWhIux5jasI8r9swdiWVB1Z3OrZ10iDHxzkETjVPxAQ5BEQU4ag0Awc8TTg1C7sJriHQY2LO14g==
-  dependencies:
-    vscode-languageserver-textdocument "^1.0.1"
-    vscode-languageserver-types "^3.15.1"
-    vscode-nls "^4.1.1"
-    vscode-uri "^2.1.1"
-
-vscode-emmet-helper@1.2.17:
-  version "1.2.17"
-  resolved "https://registry.npmjs.org/vscode-emmet-helper/-/vscode-emmet-helper-1.2.17.tgz#f0c6bfcebc4285d081fb2618e6e5b9a08c567afa"
-  integrity sha512-X4pzcrJ8dE7M3ArFuySF5fgipKDd/EauXkiJwtjBIVRWpVNq0tF9+lNCyuC7iDUwP3Oq7ow/TGssD3GdG96Jow==
-  dependencies:
-    "@emmetio/extract-abbreviation" "0.1.6"
-    jsonc-parser "^1.0.0"
-    vscode-languageserver-types "^3.6.0-next.1"
-
-vscode-html-languageservice@3.0.4-next.15:
-  version "3.0.4-next.15"
-  resolved "https://registry.npmjs.org/vscode-html-languageservice/-/vscode-html-languageservice-3.0.4-next.15.tgz#7214ccd9b4a06cf138b5945d9fd88285a0add490"
-  integrity sha512-UmUm3A1ZTj+BloVIyel+5pK/nfsqRfPLXzl8BA9O7v5Cj64vivddABvNf/rW1US8fzdikFNZNloC/4ooqxB2kw==
-  dependencies:
-    vscode-languageserver-textdocument "^1.0.1-next.1"
-    vscode-languageserver-types "^3.15.1"
-    vscode-nls "^4.1.1"
-    vscode-uri "^2.1.1"
-
-vscode-jsonrpc@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-5.0.1.tgz#9bab9c330d89f43fc8c1e8702b5c36e058a01794"
-  integrity sha512-JvONPptw3GAQGXlVV2utDcHx0BiY34FupW/kI6mZ5x06ER5DdPG/tXWMVHjTNULF5uKPOUUD0SaXg5QaubJL0A==
-
-vscode-languageserver-protocol@3.15.3, vscode-languageserver-protocol@^3.15.3:
-  version "3.15.3"
-  resolved "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.15.3.tgz#3fa9a0702d742cf7883cb6182a6212fcd0a1d8bb"
-  integrity sha512-zrMuwHOAQRhjDSnflWdJG+O2ztMWss8GqUUB8dXLR/FPenwkiBNkMIJJYfSN6sgskvsF0rHAoBowNQfbyZnnvw==
-  dependencies:
-    vscode-jsonrpc "^5.0.1"
-    vscode-languageserver-types "3.15.1"
-
-vscode-languageserver-textdocument@^1.0.1, vscode-languageserver-textdocument@^1.0.1-next.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.1.tgz#178168e87efad6171b372add1dea34f53e5d330f"
-  integrity sha512-UIcJDjX7IFkck7cSkNNyzIz5FyvpQfY7sdzVy+wkKN/BLaD4DQ0ppXQrKePomCxTS7RrolK1I0pey0bG9eh8dA==
-
-vscode-languageserver-types@3.15.1, vscode-languageserver-types@^3.15.1, vscode-languageserver-types@^3.6.0-next.1:
-  version "3.15.1"
-  resolved "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.15.1.tgz#17be71d78d2f6236d414f0001ce1ef4d23e6b6de"
-  integrity sha512-+a9MPUQrNGRrGU630OGbYVQ+11iOIovjCkqxajPa9w57Sd5ruK8WQNsslzpa0x/QJqC8kRc2DUxWjIFwoNm4ZQ==
-
-vscode-languageserver@6.1.1:
-  version "6.1.1"
-  resolved "https://registry.npmjs.org/vscode-languageserver/-/vscode-languageserver-6.1.1.tgz#d76afc68172c27d4327ee74332b468fbc740d762"
-  integrity sha512-DueEpkUAkD5XTR4MLYNr6bQIp/UFR0/IPApgXU3YfCBCB08u2sm9hRCs6DxYZELkk++STPjpcjksR2H8qI3cDQ==
-  dependencies:
-    vscode-languageserver-protocol "^3.15.3"
-
-vscode-nls@^4.1.1:
-  version "4.1.2"
-  resolved "https://registry.npmjs.org/vscode-nls/-/vscode-nls-4.1.2.tgz#ca8bf8bb82a0987b32801f9fddfdd2fb9fd3c167"
-  integrity sha512-7bOHxPsfyuCqmP+hZXscLhiHwe7CSuFE4hyhbs22xPIhQ4jv99FcR4eBzfYYVLP356HNFpdvz63FFb/xw6T4Iw==
-
-vscode-uri@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/vscode-uri/-/vscode-uri-2.1.1.tgz#5aa1803391b6ebdd17d047f51365cf62c38f6e90"
-  integrity sha512-eY9jmGoEnVf8VE8xr5znSah7Qt1P/xsCdErz+g8HYZtJ7bZqKH5E3d+6oVNm1AC/c6IHUDokbmVXKOi4qPAC9A==
-
-vscode-uri@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.npmjs.org/vscode-uri/-/vscode-uri-2.1.2.tgz#c8d40de93eb57af31f3c715dd650e2ca2c096f1c"
-  integrity sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==
-
 which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
@@ -1637,8 +1522,3 @@ ws@^6.2.1:
   integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
   dependencies:
     async-limiter "~1.0.0"
-
-yaml@^1.7.2:
-  version "1.10.0"
-  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
-  integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==

From 30fe993e99e406df1e99e86c4b080b9701212550 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Thu, 22 Apr 2021 15:35:26 +0200
Subject: [PATCH 312/524] enable sourcemaps everywhere

---
 rollup.config.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/rollup.config.js b/rollup.config.js
index 4b0c358e23..313b8e1133 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -38,6 +38,7 @@ export default entries.map((output) => ({
     file: output.file,
     format: output.format,
     name: output.name,
+    sourcemap: true,
     exports: 'auto',
   },
   plugins: [
@@ -65,7 +66,7 @@ export default entries.map((output) => ({
     }),
     commonjs(),
 
-    typescript({ sourceMap: !production }),
+    typescript(),
 
     css({
       // we'll extract any component CSS out into

From 6f0dde529e1c72a1adc30566ee4371bef13da3f7 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Thu, 22 Apr 2021 15:35:57 +0200
Subject: [PATCH 313/524] fix validation warning

---
 src/Player.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Player.svelte b/src/Player.svelte
index 04dcd59b24..f139b4d6f6 100644
--- a/src/Player.svelte
+++ b/src/Player.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import { Replayer, unpack, mirror } from 'rrweb';
-  import type { eventWithTime, playerConfig } from 'rrweb/typings/types';
+  import type { eventWithTime } from 'rrweb/typings/types';
   import {
     inlineCss,
     openFullscreen,

From 7e46341c18deda352045b8416cf75a1ba6641c58 Mon Sep 17 00:00:00 2001
From: Lucky Feng <f18846188605@gmail.com>
Date: Sun, 2 May 2021 21:56:43 +0800
Subject: [PATCH 314/524] fix: issue #548 (#550)

1. Do not use virtual parent optimization if the mutation targets have iframe elements as children. This will cause some performance regression but will be easy to add and ship.
2. If an iframe element has already been a child of a virtual parent, add the virtual parent back to the dom.
---
 src/replay/index.ts       | 72 ++++++++++++++++++++++++++++-----------
 typings/replay/index.d.ts |  1 +
 2 files changed, 54 insertions(+), 19 deletions(-)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index 61c7559c2e..07bd69a472 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -166,23 +166,9 @@ export class Replayer {
     this.emitter.on(ReplayerEvents.Flush, () => {
       const { scrollMap, inputMap } = this.treeIndex.flush();
 
-      for (const [frag, parent] of this.fragmentParentMap.entries()) {
-        mirror.map[parent.__sn.id] = parent;
-        /**
-         * If we have already set value attribute on textarea,
-         * then we could not apply text content as default value any more.
-         */
-        if (
-          parent.__sn.type === NodeType.Element &&
-          parent.__sn.tagName === 'textarea' &&
-          frag.textContent
-        ) {
-          ((parent as unknown) as HTMLTextAreaElement).value = frag.textContent;
-        }
-        parent.appendChild(frag);
-        // restore state of elements after they are mounted
-        this.restoreState(parent);
-      }
+      this.fragmentParentMap.forEach((parent, frag) =>
+        this.restoreRealParent(frag, parent),
+      );
       this.fragmentParentMap.clear();
       this.elementStateMap.clear();
 
@@ -627,6 +613,20 @@ export class Replayer {
     iframeEl: HTMLIFrameElement,
   ) {
     const collected: AppendedIframe[] = [];
+    // If iframeEl is detached from dom, iframeEl.contentDocument is null.
+    if (!iframeEl.contentDocument) {
+      let parent = iframeEl.parentNode;
+      while (parent) {
+        // The parent of iframeEl is virtual parent and we need to mount it on the dom.
+        if (this.fragmentParentMap.has((parent as unknown) as INode)) {
+          const frag = (parent as unknown) as INode;
+          const realParent = this.fragmentParentMap.get(frag)!;
+          this.restoreRealParent(frag, realParent);
+          break;
+        }
+        parent = parent.parentNode;
+      }
+    }
     buildNodeWithSN(mutation.node, {
       doc: iframeEl.contentDocument!,
       map: mirror.map,
@@ -1139,8 +1139,19 @@ export class Replayer {
         parentInDocument = this.iframe.contentDocument.body.contains(parent);
       }
 
-      // if parent element is an iframe, iframe document can't be appended to virtual parent
-      if (useVirtualParent && parentInDocument && !isIframeINode(parent)) {
+      const hasIframeChild =
+        ((parent as unknown) as HTMLElement).getElementsByTagName?.('iframe')
+          .length > 0;
+      /**
+       * Why !isIframeINode(parent)? If parent element is an iframe, iframe document can't be appended to virtual parent.
+       * Why !hasIframeChild? If we move iframe elements from dom to fragment document, we will lose the contentDocument of iframe. So we need to disable the virtual dom optimization if a parent node contains iframe elements.
+       */
+      if (
+        useVirtualParent &&
+        parentInDocument &&
+        !isIframeINode(parent) &&
+        !hasIframeChild
+      ) {
         const virtualParent = (document.createDocumentFragment() as unknown) as INode;
         mirror.map[mutation.parentId] = virtualParent;
         this.fragmentParentMap.set(virtualParent, parent);
@@ -1529,6 +1540,29 @@ export class Replayer {
     });
   }
 
+  /**
+   * Replace the virtual parent with the real parent.
+   * @param frag fragment document, the virtual parent
+   * @param parent real parent element
+   */
+  private restoreRealParent(frag: INode, parent: INode) {
+    mirror.map[parent.__sn.id] = parent;
+    /**
+     * If we have already set value attribute on textarea,
+     * then we could not apply text content as default value any more.
+     */
+    if (
+      parent.__sn.type === NodeType.Element &&
+      parent.__sn.tagName === 'textarea' &&
+      frag.textContent
+    ) {
+      ((parent as unknown) as HTMLTextAreaElement).value = frag.textContent;
+    }
+    parent.appendChild(frag);
+    // restore state of elements after they are mounted
+    this.restoreState(parent);
+  }
+
   /**
    * store state of elements before unmounted from dom recursively
    * the state should be restored in the handler of event ReplayerEvents.Flush
diff --git a/typings/replay/index.d.ts b/typings/replay/index.d.ts
index f1df3a2f72..441552ed37 100644
--- a/typings/replay/index.d.ts
+++ b/typings/replay/index.d.ts
@@ -55,6 +55,7 @@ export declare class Replayer {
     private hoverElements;
     private isUserInteraction;
     private backToNormal;
+    private restoreRealParent;
     private storeState;
     private restoreState;
     private warnNodeNotFound;

From e9b9d42e6eca7af3cc154fd2dc55914f8f25b619 Mon Sep 17 00:00:00 2001
From: Lucky Feng <f18846188605@gmail.com>
Date: Tue, 4 May 2021 13:11:20 +0800
Subject: [PATCH 315/524] fix: #542 wrong results of splitting log stacks
 (#547)

fix bug of stack parcer and increase compatibility for different browser vendors
---
 src/record/error-stack-parser.ts            | 254 ++++++++++++++++++++
 src/record/observer.ts                      |  51 ++--
 test/__snapshots__/integration.test.ts.snap |  51 ++--
 test/integration.test.ts                    |   2 +-
 typings/record/error-stack-parser.d.ts      |  37 +++
 5 files changed, 328 insertions(+), 67 deletions(-)
 create mode 100644 src/record/error-stack-parser.ts
 create mode 100644 typings/record/error-stack-parser.d.ts

diff --git a/src/record/error-stack-parser.ts b/src/record/error-stack-parser.ts
new file mode 100644
index 0000000000..311f07a706
--- /dev/null
+++ b/src/record/error-stack-parser.ts
@@ -0,0 +1,254 @@
+/**
+ * Class StackFrame is a fork of https://github.com/stacktracejs/stackframe/blob/master/stackframe.js
+ * I fork it because:
+ * 1. There are some build issues when importing this package.
+ * 2. Rewrites into typescript give us a better type interface.
+ * 3. StackFrame contains some functions we don't need.
+ */
+export class StackFrame {
+  private fileName: string;
+  private functionName: string;
+  private lineNumber?: number;
+  private columnNumber?: number;
+
+  constructor(obj: {
+    fileName?: string;
+    functionName?: string;
+    lineNumber?: number;
+    columnNumber?: number;
+  }) {
+    this.fileName = obj.fileName || '';
+    this.functionName = obj.functionName || '';
+    this.lineNumber = obj.lineNumber;
+    this.columnNumber = obj.columnNumber;
+  }
+
+  toString() {
+    const lineNumber = this.lineNumber || '';
+    const columnNumber = this.columnNumber || '';
+    if (this.functionName) {
+      return (
+        this.functionName +
+        ' (' +
+        this.fileName +
+        ':' +
+        lineNumber +
+        ':' +
+        columnNumber +
+        ')'
+      );
+    }
+    return this.fileName + ':' + lineNumber + ':' + columnNumber;
+  }
+}
+
+/**
+ * ErrorStackParser is a fork of https://github.com/stacktracejs/error-stack-parser/blob/master/error-stack-parser.js
+ * I fork it because:
+ * 1. There are some build issues when importing this package.
+ * 2. Rewrites into typescript give us a better type interface.
+ */
+const FIREFOX_SAFARI_STACK_REGEXP = /(^|@)\S+:\d+/;
+const CHROME_IE_STACK_REGEXP = /^\s*at .*(\S+:\d+|\(native\))/m;
+const SAFARI_NATIVE_CODE_REGEXP = /^(eval@)?(\[native code])?$/;
+export const ErrorStackParser = {
+  /**
+   * Given an Error object, extract the most information from it.
+   *
+   * @param {Error} error object
+   * @return {Array} of StackFrames
+   */
+  parse: function (error: Error): StackFrame[] {
+    if (
+      // @ts-ignore
+      typeof error.stacktrace !== 'undefined' ||
+      // @ts-ignore
+      typeof error['opera#sourceloc'] !== 'undefined'
+    ) {
+      return this.parseOpera(
+        error as {
+          stacktrace?: string;
+          message: string;
+          stack?: string;
+        },
+      );
+    } else if (error.stack && error.stack.match(CHROME_IE_STACK_REGEXP)) {
+      return this.parseV8OrIE(error as { stack: string });
+    } else if (error.stack) {
+      return this.parseFFOrSafari(error as { stack: string });
+    } else {
+      throw new Error('Cannot parse given Error object');
+    }
+  },
+  // Separate line and column numbers from a string of the form: (URI:Line:Column)
+  extractLocation: function (urlLike: string) {
+    // Fail-fast but return locations like "(native)"
+    if (urlLike.indexOf(':') === -1) {
+      return [urlLike];
+    }
+
+    const regExp = /(.+?)(?::(\d+))?(?::(\d+))?$/;
+    const parts = regExp.exec(urlLike.replace(/[()]/g, ''));
+    if (!parts) throw new Error(`Cannot parse given url: ${urlLike}`);
+    return [parts[1], parts[2] || undefined, parts[3] || undefined];
+  },
+  parseV8OrIE: function (error: { stack: string }) {
+    const filtered = error.stack.split('\n').filter(function (line) {
+      return !!line.match(CHROME_IE_STACK_REGEXP);
+    }, this);
+
+    return filtered.map(function (line) {
+      if (line.indexOf('(eval ') > -1) {
+        // Throw away eval information until we implement stacktrace.js/stackframe#8
+        line = line
+          .replace(/eval code/g, 'eval')
+          .replace(/(\(eval at [^()]*)|(\),.*$)/g, '');
+      }
+      let sanitizedLine = line.replace(/^\s+/, '').replace(/\(eval code/g, '(');
+
+      // capture and preseve the parenthesized location "(/foo/my bar.js:12:87)" in
+      // case it has spaces in it, as the string is split on \s+ later on
+      const location = sanitizedLine.match(/ (\((.+):(\d+):(\d+)\)$)/);
+
+      // remove the parenthesized location from the line, if it was matched
+      sanitizedLine = location
+        ? sanitizedLine.replace(location[0], '')
+        : sanitizedLine;
+
+      const tokens = sanitizedLine.split(/\s+/).slice(1);
+      // if a location was matched, pass it to extractLocation() otherwise pop the last token
+      const locationParts = this.extractLocation(
+        location ? location[1] : tokens.pop(),
+      );
+      const functionName = tokens.join(' ') || undefined;
+      const fileName =
+        ['eval', '<anonymous>'].indexOf(locationParts[0]) > -1
+          ? undefined
+          : locationParts[0];
+
+      return new StackFrame({
+        functionName,
+        fileName,
+        lineNumber: locationParts[1],
+        columnNumber: locationParts[2],
+      });
+    }, this);
+  },
+  parseFFOrSafari: function (error: { stack: string }) {
+    const filtered = error.stack.split('\n').filter(function (line) {
+      return !line.match(SAFARI_NATIVE_CODE_REGEXP);
+    }, this);
+
+    return filtered.map(function (line) {
+      // Throw away eval information until we implement stacktrace.js/stackframe#8
+      if (line.indexOf(' > eval') > -1) {
+        line = line.replace(
+          / line (\d+)(?: > eval line \d+)* > eval:\d+:\d+/g,
+          ':$1',
+        );
+      }
+
+      if (line.indexOf('@') === -1 && line.indexOf(':') === -1) {
+        // Safari eval frames only have function names and nothing else
+        return new StackFrame({
+          functionName: line,
+        });
+      } else {
+        const functionNameRegex = /((.*".+"[^@]*)?[^@]*)(?:@)/;
+        const matches = line.match(functionNameRegex);
+        const functionName = matches && matches[1] ? matches[1] : undefined;
+        const locationParts = this.extractLocation(
+          line.replace(functionNameRegex, ''),
+        );
+
+        return new StackFrame({
+          functionName,
+          fileName: locationParts[0],
+          lineNumber: locationParts[1],
+          columnNumber: locationParts[2],
+        });
+      }
+    }, this);
+  },
+  parseOpera: function (e: {
+    stacktrace?: string;
+    message: string;
+    stack?: string;
+  }): StackFrame[] {
+    if (
+      !e.stacktrace ||
+      (e.message.indexOf('\n') > -1 &&
+        e.message.split('\n').length > e.stacktrace.split('\n').length)
+    ) {
+      return this.parseOpera9(e as { message: string });
+    } else if (!e.stack) {
+      return this.parseOpera10(e as { stacktrace: string });
+    } else {
+      return this.parseOpera11(e as { stack: string });
+    }
+  },
+  parseOpera9: function (e: { message: string }) {
+    const lineRE = /Line (\d+).*script (?:in )?(\S+)/i;
+    const lines = e.message.split('\n');
+    const result = [];
+
+    for (let i = 2, len = lines.length; i < len; i += 2) {
+      const match = lineRE.exec(lines[i]);
+      if (match) {
+        result.push(
+          new StackFrame({
+            fileName: match[2],
+            lineNumber: parseFloat(match[1]),
+          }),
+        );
+      }
+    }
+
+    return result;
+  },
+  parseOpera10: function (e: { stacktrace: string }) {
+    const lineRE = /Line (\d+).*script (?:in )?(\S+)(?:: In function (\S+))?$/i;
+    const lines = e.stacktrace.split('\n');
+    const result = [];
+
+    for (let i = 0, len = lines.length; i < len; i += 2) {
+      const match = lineRE.exec(lines[i]);
+      if (match) {
+        result.push(
+          new StackFrame({
+            functionName: match[3] || undefined,
+            fileName: match[2],
+            lineNumber: parseFloat(match[1]),
+          }),
+        );
+      }
+    }
+
+    return result;
+  },
+  // Opera 10.65+ Error.stack very similar to FF/Safari
+  parseOpera11: function (error: { stack: string }) {
+    const filtered = error.stack.split('\n').filter(function (line) {
+      return (
+        !!line.match(FIREFOX_SAFARI_STACK_REGEXP) &&
+        !line.match(/^Error created at/)
+      );
+    }, this);
+
+    return filtered.map(function (line: string) {
+      const tokens = line.split('@');
+      const locationParts = this.extractLocation(tokens.pop());
+      const functionCall = tokens.shift() || '';
+      const functionName =
+        functionCall
+          .replace(/<anonymous function(: (\w+))?>/, '$2')
+          .replace(/\([^)]*\)/g, '') || undefined;
+      return new StackFrame({
+        functionName,
+        fileName: locationParts[0],
+        lineNumber: locationParts[1],
+        columnNumber: locationParts[2],
+      });
+    }, this);
+  },
+};
diff --git a/src/record/observer.ts b/src/record/observer.ts
index 1bc6babd13..2cc87efa03 100644
--- a/src/record/observer.ts
+++ b/src/record/observer.ts
@@ -47,6 +47,7 @@ import MutationBuffer from './mutation';
 import { stringify } from './stringify';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
+import { StackFrame, ErrorStackParser } from './error-stack-parser';
 
 type WindowWithStoredMutationObserver = Window & {
   __rrMutationObserver?: MutationObserver;
@@ -602,20 +603,23 @@ function initLogObserver(
   if (logOptions.level!.includes('error')) {
     if (window) {
       const originalOnError = window.onerror;
-      // tslint:disable-next-line:no-any
-      window.onerror = (...args: any[]) => {
+      window.onerror = (
+        msg: Event | string,
+        file: string,
+        line: number,
+        col: number,
+        error: Error,
+      ) => {
         if (originalOnError) {
-          originalOnError.apply(this, args);
+          originalOnError.apply(this, [msg, file, line, col, error]);
         }
-        let stack: string[] = [];
-        if (args[args.length - 1] instanceof Error) {
-          // 0(the second parameter) tells parseStack that every stack in Error is useful
-          stack = parseStack(args[args.length - 1].stack, 0);
-        }
-        const payload = [stringify(args[0], logOptions.stringifyOptions)];
+        const trace: string[] = ErrorStackParser.parse(
+          error,
+        ).map((stackFrame: StackFrame) => stackFrame.toString());
+        const payload = [stringify(msg, logOptions.stringifyOptions)];
         cb({
           level: 'error',
-          trace: stack,
+          trace,
           payload,
         });
       };
@@ -642,11 +646,12 @@ function initLogObserver(
     }
     // replace the logger.{level}. return a restore function
     return patch(_logger, level, (original) => {
-      // tslint:disable-next-line:no-any
-      return (...args: any[]) => {
+      return (...args: unknown[]) => {
         original.apply(this, args);
         try {
-          const stack = parseStack(new Error().stack);
+          const trace = ErrorStackParser.parse(new Error())
+            .map((stackFrame: StackFrame) => stackFrame.toString())
+            .splice(1); // splice(1) to omit the hijacked log function
           const payload = args.map((s) =>
             stringify(s, logOptions.stringifyOptions),
           );
@@ -654,7 +659,7 @@ function initLogObserver(
           if (logCount < logOptions.lengthThreshold!) {
             cb({
               level,
-              trace: stack,
+              trace,
               payload,
             });
           } else if (logCount === logOptions.lengthThreshold) {
@@ -673,24 +678,6 @@ function initLogObserver(
       };
     });
   }
-  /**
-   * parse single stack message to an stack array.
-   * @param stack the stack message to be parsed
-   * @param omitDepth omit specific depth of useless stack. omit hijacked log function by default
-   */
-  function parseStack(
-    stack: string | undefined,
-    omitDepth: number = 1,
-  ): string[] {
-    let stacks: string[] = [];
-    if (stack) {
-      stacks = stack
-        .split('at')
-        .splice(1 + omitDepth)
-        .map((s) => s.trim());
-    }
-    return stacks;
-  }
 }
 
 function mergeHooks(o: observerParam, hooks: hooksParam) {
diff --git a/test/__snapshots__/integration.test.ts.snap b/test/__snapshots__/integration.test.ts.snap
index ac6f2cd344..7326b4eb3b 100644
--- a/test/__snapshots__/integration.test.ts.snap
+++ b/test/__snapshots__/integration.test.ts.snap
@@ -3199,8 +3199,7 @@ exports[`log 1`] = `
       \\"source\\": 11,
       \\"level\\": \\"assert\\",
       \\"trace\\": [
-        \\"__puppeteer_evalu\\",
-        \\"ion_script__:2:37\\"
+        \\"__puppeteer_evaluation_script__:2:37\\"
       ],
       \\"payload\\": [
         \\"true\\",
@@ -3214,8 +3213,7 @@ exports[`log 1`] = `
       \\"source\\": 11,
       \\"level\\": \\"count\\",
       \\"trace\\": [
-        \\"__puppeteer_evalu\\",
-        \\"ion_script__:3:37\\"
+        \\"__puppeteer_evaluation_script__:3:37\\"
       ],
       \\"payload\\": [
         \\"\\\\\\"count\\\\\\"\\"
@@ -3228,8 +3226,7 @@ exports[`log 1`] = `
       \\"source\\": 11,
       \\"level\\": \\"countReset\\",
       \\"trace\\": [
-        \\"__puppeteer_evalu\\",
-        \\"ion_script__:4:37\\"
+        \\"__puppeteer_evaluation_script__:4:37\\"
       ],
       \\"payload\\": [
         \\"\\\\\\"count\\\\\\"\\"
@@ -3242,8 +3239,7 @@ exports[`log 1`] = `
       \\"source\\": 11,
       \\"level\\": \\"debug\\",
       \\"trace\\": [
-        \\"__puppeteer_evalu\\",
-        \\"ion_script__:5:37\\"
+        \\"__puppeteer_evaluation_script__:5:37\\"
       ],
       \\"payload\\": [
         \\"\\\\\\"debug\\\\\\"\\"
@@ -3256,8 +3252,7 @@ exports[`log 1`] = `
       \\"source\\": 11,
       \\"level\\": \\"dir\\",
       \\"trace\\": [
-        \\"__puppeteer_evalu\\",
-        \\"ion_script__:6:37\\"
+        \\"__puppeteer_evaluation_script__:6:37\\"
       ],
       \\"payload\\": [
         \\"\\\\\\"dir\\\\\\"\\"
@@ -3270,8 +3265,7 @@ exports[`log 1`] = `
       \\"source\\": 11,
       \\"level\\": \\"dirxml\\",
       \\"trace\\": [
-        \\"__puppeteer_evalu\\",
-        \\"ion_script__:7:37\\"
+        \\"__puppeteer_evaluation_script__:7:37\\"
       ],
       \\"payload\\": [
         \\"\\\\\\"dirxml\\\\\\"\\"
@@ -3284,8 +3278,7 @@ exports[`log 1`] = `
       \\"source\\": 11,
       \\"level\\": \\"group\\",
       \\"trace\\": [
-        \\"__puppeteer_evalu\\",
-        \\"ion_script__:8:37\\"
+        \\"__puppeteer_evaluation_script__:8:37\\"
       ],
       \\"payload\\": []
     }
@@ -3296,8 +3289,7 @@ exports[`log 1`] = `
       \\"source\\": 11,
       \\"level\\": \\"groupCollapsed\\",
       \\"trace\\": [
-        \\"__puppeteer_evalu\\",
-        \\"ion_script__:9:37\\"
+        \\"__puppeteer_evaluation_script__:9:37\\"
       ],
       \\"payload\\": []
     }
@@ -3308,8 +3300,7 @@ exports[`log 1`] = `
       \\"source\\": 11,
       \\"level\\": \\"info\\",
       \\"trace\\": [
-        \\"__puppeteer_evalu\\",
-        \\"ion_script__:10:37\\"
+        \\"__puppeteer_evaluation_script__:10:37\\"
       ],
       \\"payload\\": [
         \\"\\\\\\"info\\\\\\"\\"
@@ -3322,8 +3313,7 @@ exports[`log 1`] = `
       \\"source\\": 11,
       \\"level\\": \\"log\\",
       \\"trace\\": [
-        \\"__puppeteer_evalu\\",
-        \\"ion_script__:11:37\\"
+        \\"__puppeteer_evaluation_script__:11:37\\"
       ],
       \\"payload\\": [
         \\"\\\\\\"log\\\\\\"\\"
@@ -3336,8 +3326,7 @@ exports[`log 1`] = `
       \\"source\\": 11,
       \\"level\\": \\"table\\",
       \\"trace\\": [
-        \\"__puppeteer_evalu\\",
-        \\"ion_script__:12:37\\"
+        \\"__puppeteer_evaluation_script__:12:37\\"
       ],
       \\"payload\\": [
         \\"\\\\\\"table\\\\\\"\\"
@@ -3350,8 +3339,7 @@ exports[`log 1`] = `
       \\"source\\": 11,
       \\"level\\": \\"time\\",
       \\"trace\\": [
-        \\"__puppeteer_evalu\\",
-        \\"ion_script__:13:37\\"
+        \\"__puppeteer_evaluation_script__:13:37\\"
       ],
       \\"payload\\": []
     }
@@ -3362,8 +3350,7 @@ exports[`log 1`] = `
       \\"source\\": 11,
       \\"level\\": \\"timeEnd\\",
       \\"trace\\": [
-        \\"__puppeteer_evalu\\",
-        \\"ion_script__:14:37\\"
+        \\"__puppeteer_evaluation_script__:14:37\\"
       ],
       \\"payload\\": []
     }
@@ -3374,8 +3361,7 @@ exports[`log 1`] = `
       \\"source\\": 11,
       \\"level\\": \\"timeLog\\",
       \\"trace\\": [
-        \\"__puppeteer_evalu\\",
-        \\"ion_script__:15:37\\"
+        \\"__puppeteer_evaluation_script__:15:37\\"
       ],
       \\"payload\\": []
     }
@@ -3386,8 +3372,7 @@ exports[`log 1`] = `
       \\"source\\": 11,
       \\"level\\": \\"trace\\",
       \\"trace\\": [
-        \\"__puppeteer_evalu\\",
-        \\"ion_script__:16:37\\"
+        \\"__puppeteer_evaluation_script__:16:37\\"
       ],
       \\"payload\\": [
         \\"\\\\\\"trace\\\\\\"\\"
@@ -3400,8 +3385,7 @@ exports[`log 1`] = `
       \\"source\\": 11,
       \\"level\\": \\"warn\\",
       \\"trace\\": [
-        \\"__puppeteer_evalu\\",
-        \\"ion_script__:17:37\\"
+        \\"__puppeteer_evaluation_script__:17:37\\"
       ],
       \\"payload\\": [
         \\"\\\\\\"warn\\\\\\"\\"
@@ -3414,8 +3398,7 @@ exports[`log 1`] = `
       \\"source\\": 11,
       \\"level\\": \\"clear\\",
       \\"trace\\": [
-        \\"__puppeteer_evalu\\",
-        \\"ion_script__:18:37\\"
+        \\"__puppeteer_evaluation_script__:18:37\\"
       ],
       \\"payload\\": []
     }
diff --git a/test/integration.test.ts b/test/integration.test.ts
index 207b878273..e14d40feaf 100644
--- a/test/integration.test.ts
+++ b/test/integration.test.ts
@@ -379,7 +379,7 @@ describe('record integration tests', function (this: ISuite) {
     expect(text).to.equal('4\n3\n2\n1\n5');
   });
 
-  it('can record log mutation', async () => {
+  it('should record console messages', async () => {
     const page: puppeteer.Page = await this.browser.newPage();
     await page.goto('about:blank');
     await page.setContent(
diff --git a/typings/record/error-stack-parser.d.ts b/typings/record/error-stack-parser.d.ts
new file mode 100644
index 0000000000..86a961da9b
--- /dev/null
+++ b/typings/record/error-stack-parser.d.ts
@@ -0,0 +1,37 @@
+export declare class StackFrame {
+    private fileName;
+    private functionName;
+    private lineNumber?;
+    private columnNumber?;
+    constructor(obj: {
+        fileName?: string;
+        functionName?: string;
+        lineNumber?: number;
+        columnNumber?: number;
+    });
+    toString(): string;
+}
+export declare const ErrorStackParser: {
+    parse: (error: Error) => StackFrame[];
+    extractLocation: (urlLike: string) => (string | undefined)[];
+    parseV8OrIE: (error: {
+        stack: string;
+    }) => StackFrame[];
+    parseFFOrSafari: (error: {
+        stack: string;
+    }) => StackFrame[];
+    parseOpera: (e: {
+        stacktrace?: string;
+        message: string;
+        stack?: string;
+    }) => StackFrame[];
+    parseOpera9: (e: {
+        message: string;
+    }) => StackFrame[];
+    parseOpera10: (e: {
+        stacktrace: string;
+    }) => StackFrame[];
+    parseOpera11: (error: {
+        stack: string;
+    }) => StackFrame[];
+};

From 362359eccc60cac2e35129cf822a0e6fa590c011 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Tue, 4 May 2021 06:28:38 +0100
Subject: [PATCH 316/524] Improve parsing of srcset according to whatwg spec
 (#74)

* Improve parsing of srcset according to whatwg spec; e.g. srcset="http://example.com/size400,300/img.jpg 640w"

* Trim/normalise the output in order to conform to prior version; solely to keep tests happy

* Add test case for embedded commas in a srcset url as well as support for future possible parenthesis in descriptor string

* Drop 'future proof' test as it causes an error message in test output
---
 src/snapshot.ts                        | 86 ++++++++++++++++++++------
 test/__snapshots__/integration.ts.snap |  3 +-
 test/html/with-relative-res.html       |  1 +
 3 files changed, 69 insertions(+), 21 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 94a2b904d2..29b1f16c50 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -110,32 +110,78 @@ export function absoluteToStylesheet(
   );
 }
 
+const SRCSET_NOT_SPACES = /^[^ \t\n\r\u000c]+/;  // Don't use \s, to avoid matching non-breaking space
+const SRCSET_COMMAS_OR_SPACES = /^[, \t\n\r\u000c]+/;
 function getAbsoluteSrcsetString(doc: Document, attributeValue: string) {
+  /*
+    run absoluteToDoc over every url in the srcset
+
+    this is adapted from https://github.com/albell/parse-srcset/
+    without the parsing of the descriptors (we return these as-is)
+    parce-srcset is in turn based on
+    https://html.spec.whatwg.org/multipage/embedded-content.html#parse-a-srcset-attribute
+  */
   if (attributeValue.trim() === '') {
     return attributeValue;
   }
 
-  const srcsetValues = attributeValue.split(',');
-  // srcset attributes is defined as such:
-  // srcset = "url size,url1 size1"
-  const resultingSrcsetString = srcsetValues
-    .map((srcItem) => {
-      // removing all but middle spaces
-      const trimmedSrcItem = srcItem.trimLeft().trimRight();
-      const urlAndSize = trimmedSrcItem.split(' ');
-      // this means we have both 0:url and 1:size
-      if (urlAndSize.length === 2) {
-        const absUrl = absoluteToDoc(doc, urlAndSize[0]);
-        return `${absUrl} ${urlAndSize[1]}`;
-      } else if (urlAndSize.length === 1) {
-        const absUrl = absoluteToDoc(doc, urlAndSize[0]);
-        return `${absUrl}`;
-      }
-      return '';
-    })
-    .join(', ');
+  let pos = 0;
 
-  return resultingSrcsetString;
+  function collectCharacters(regEx: RegExp) {
+    var chars,
+    match = regEx.exec(attributeValue.substring(pos));
+    if (match) {
+      chars = match[0];
+      pos += chars.length;
+      return chars;
+    }
+    return '';
+  }
+
+  let output = [];
+  while (true) {
+    collectCharacters(SRCSET_COMMAS_OR_SPACES);
+    if (pos >= attributeValue.length) {
+      break;
+    }
+    // don't split on commas within urls
+    let url = collectCharacters(SRCSET_NOT_SPACES);
+    if (url.slice(-1) === ',') {
+      // aside: according to spec more than one comma at the end is a parse error, but we ignore that
+      url = absoluteToDoc(doc, url.substring(0, url.length - 1))
+      // the trailing comma splits the srcset, so the interpretion is that
+      // another url will follow, and the descriptor is empty
+      output.push(url);
+    } else {
+      let descriptorsStr = '';
+      url = absoluteToDoc(doc, url)
+      let inParens = false;
+      while (true) {
+        let c = attributeValue.charAt(pos);
+        if (c === '') {
+          output.push((url + descriptorsStr).trim());
+          break;
+        } else if (!inParens) {
+          if (c === ',') {
+            pos += 1;
+            output.push((url + descriptorsStr).trim());
+            break;  // parse the next url
+          } else if (c === '(') {
+            inParens = true;
+          }
+        } else {
+          // in parenthesis; ignore commas
+          // (parenthesis may be supported by future additions to spec)
+          if (c === ')') {
+            inParens = false;
+          }
+        }
+        descriptorsStr += c;
+        pos += 1;
+      }
+    }
+  }
+  return output.join(', ');
 }
 
 export function absoluteToDoc(doc: Document, attributeValue: string): string {
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index 72b317f102..afa7b2a04e 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -276,7 +276,8 @@ exports[`[html file]: with-relative-res.html 1`] = `
   <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"\\" />
   <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg\\" />
   <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://exmple.com/a.jpg\\" />
-  <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg 3x, http://localhost:3030/a.jpg 45x, http://localhost:3030/b.png\\" /></body></html>"
+  <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/a.jpg 3x, http://localhost:3030/a.jpg 45x, http://localhost:3030/b.png\\" />
+  <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/300,400/a.jpg 300w, http://localhost:3030/b.png\\" /></body></html>"
 `;
 
 exports[`[html file]: with-script.html 1`] = `
diff --git a/test/html/with-relative-res.html b/test/html/with-relative-res.html
index 7505d5a355..c390dc53cc 100644
--- a/test/html/with-relative-res.html
+++ b/test/html/with-relative-res.html
@@ -16,5 +16,6 @@
   <img src="./a.jpg" alt="" srcset="/a.jpg">
   <img src="./a.jpg" alt="" srcset="http://exmple.com/a.jpg ">
   <img src="./a.jpg" alt="" srcset="/a.jpg 3x, /a.jpg 45x , /b.png">
+  <img src="./a.jpg" alt="" srcset="/300,400/a.jpg 300w,b.png">
 </body>
 </html>
\ No newline at end of file

From 2169af167f5a6d8deb626f94f07efff0f9b3b03e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 11 May 2021 21:47:47 +0000
Subject: [PATCH 317/524] Bump lodash from 4.17.19 to 4.17.21

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.19 to 4.17.21.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](https://github.com/lodash/lodash/compare/4.17.19...4.17.21)

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 1467bdde2a..b5cb506540 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -886,9 +886,9 @@ local-access@^1.0.1:
   integrity sha512-ykt2pgN0aqIy6KQC1CqdWTWkmUwNgaOS6dcpHVjyBJONA+Xi7AtSB1vuxC/U/0tjIP3wcRudwQk1YYzUvzk2bA==
 
 lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4:
-  version "4.17.19"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
-  integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 lower-case@^2.0.1:
   version "2.0.1"

From b83123a23c2fe5d08ebeff6a74f839bc8efcb865 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 12 May 2021 14:25:29 +0800
Subject: [PATCH 318/524] fix #524 polyfill Node.prototype.contains

---
 src/utils.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/utils.ts b/src/utils.ts
index ba7bdcdee4..d407d2740c 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -253,6 +253,24 @@ export function polyfill(win = window) {
     win.DOMTokenList.prototype.forEach = (Array.prototype
       .forEach as unknown) as DOMTokenList['forEach'];
   }
+
+  // https://github.com/Financial-Times/polyfill-service/pull/183
+  if (!Node.prototype.contains) {
+    Node.prototype.contains = function contains(node) {
+      if (!(0 in arguments)) {
+        throw new TypeError('1 argument is required');
+      }
+
+      do {
+        if (this === node) {
+          return true;
+        }
+        // tslint:disable-next-line: no-conditional-assignment
+      } while ((node = node && node.parentNode));
+
+      return false;
+    };
+  }
 }
 
 export function needCastInSyncMode(event: eventWithTime): boolean {

From 0bb95f1ee77fef03166a68f75b959ad997171442 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Wed, 12 May 2021 20:13:44 +0200
Subject: [PATCH 319/524] Allow password to be maskable instead of ignorable
 (#65)

* Add password to maskInputOptions on types

* Add password on maskInputOptions to types definition
---
 src/types.ts       | 1 +
 typings/types.d.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/types.ts b/src/types.ts
index b38a4778bc..0a3d2ce2fc 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -91,6 +91,7 @@ export type MaskInputOptions = Partial<{
   // unify textarea and select element with text input
   textarea: boolean;
   select: boolean;
+  password: boolean;
 }>;
 
 export type SlimDOMOptions = Partial<{
diff --git a/typings/types.d.ts b/typings/types.d.ts
index f9394a39dc..c43cccbe6c 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -73,6 +73,7 @@ export declare type MaskInputOptions = Partial<{
     week: boolean;
     textarea: boolean;
     select: boolean;
+    password: boolean;
 }>;
 export declare type SlimDOMOptions = Partial<{
     script: boolean;

From 0d1dbdd0a7ec840ebde8499f52f736efde244553 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 13 May 2021 02:18:54 +0800
Subject: [PATCH 320/524] related to #75 mask password input by default

---
 src/snapshot.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 29b1f16c50..532fe16ab4 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -110,7 +110,7 @@ export function absoluteToStylesheet(
   );
 }
 
-const SRCSET_NOT_SPACES = /^[^ \t\n\r\u000c]+/;  // Don't use \s, to avoid matching non-breaking space
+const SRCSET_NOT_SPACES = /^[^ \t\n\r\u000c]+/; // Don't use \s, to avoid matching non-breaking space
 const SRCSET_COMMAS_OR_SPACES = /^[, \t\n\r\u000c]+/;
 function getAbsoluteSrcsetString(doc: Document, attributeValue: string) {
   /*
@@ -129,7 +129,7 @@ function getAbsoluteSrcsetString(doc: Document, attributeValue: string) {
 
   function collectCharacters(regEx: RegExp) {
     var chars,
-    match = regEx.exec(attributeValue.substring(pos));
+      match = regEx.exec(attributeValue.substring(pos));
     if (match) {
       chars = match[0];
       pos += chars.length;
@@ -148,13 +148,13 @@ function getAbsoluteSrcsetString(doc: Document, attributeValue: string) {
     let url = collectCharacters(SRCSET_NOT_SPACES);
     if (url.slice(-1) === ',') {
       // aside: according to spec more than one comma at the end is a parse error, but we ignore that
-      url = absoluteToDoc(doc, url.substring(0, url.length - 1))
+      url = absoluteToDoc(doc, url.substring(0, url.length - 1));
       // the trailing comma splits the srcset, so the interpretion is that
       // another url will follow, and the descriptor is empty
       output.push(url);
     } else {
       let descriptorsStr = '';
-      url = absoluteToDoc(doc, url)
+      url = absoluteToDoc(doc, url);
       let inParens = false;
       while (true) {
         let c = attributeValue.charAt(pos);
@@ -165,7 +165,7 @@ function getAbsoluteSrcsetString(doc: Document, attributeValue: string) {
           if (c === ',') {
             pos += 1;
             output.push((url + descriptorsStr).trim());
-            break;  // parse the next url
+            break; // parse the next url
           } else if (c === '(') {
             inParens = true;
           }
@@ -863,9 +863,12 @@ function snapshot(
           week: true,
           textarea: true,
           select: true,
+          password: true,
         }
       : maskAllInputs === false
-      ? {}
+      ? {
+          password: true,
+        }
       : maskAllInputs;
   const slimDOMOptions: SlimDOMOptions =
     slimDOM === true || slimDOM === 'all'

From 4059b2a4699253d057a41c928bcb7feaddad96b5 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 13 May 2021 02:22:31 +0800
Subject: [PATCH 321/524] Release 1.1.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bb5d823941..8013cd3b0b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",

From e71a8d3fc34b393dd21281270c9529dc7ac1e961 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 11 May 2021 22:57:37 +0000
Subject: [PATCH 322/524] Bump lodash from 4.17.20 to 4.17.21

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.20 to 4.17.21.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](https://github.com/lodash/lodash/compare/4.17.20...4.17.21)

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index fb4e92efa7..910ac9f36b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1771,9 +1771,9 @@ lodash.uniq@^4.5.0:
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
 lodash@^4.17.12, lodash@^4.17.4:
-  version "4.17.20"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
-  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 lowercase-keys@^1.0.0:
   version "1.0.1"

From 3b4ff0e2015ef2bb45c634a859739cafb0fdd031 Mon Sep 17 00:00:00 2001
From: Ziqiu Zhao <39512431+ZzqiZQute@users.noreply.github.com>
Date: Sat, 22 May 2021 18:01:11 +0800
Subject: [PATCH 323/524] feature: make mirror independent in Replayer (#407)

Co-authored-by: zhaoziqiu <zhaoziqiu@meituan.com>
Co-authored-by: yz-yu <yanzhen@smartx.com>
---
 src/replay/index.ts | 75 ++++++++++++++++++++++++++++-----------------
 src/utils.ts        | 62 +++++++++++++++++++------------------
 2 files changed, 80 insertions(+), 57 deletions(-)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index 07bd69a472..5ce1d07ab1 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -26,13 +26,14 @@ import {
   scrollData,
   inputData,
   canvasMutationData,
+  Mirror,
   ElementState,
   LogReplayConfig,
   logData,
   ReplayLogger,
 } from '../types';
 import {
-  mirror,
+  createMirror,
   polyfill,
   TreeIndex,
   queueToResolveTrees,
@@ -120,6 +121,7 @@ export class Replayer {
 
   private imageMap: Map<eventWithTime, HTMLImageElement> = new Map();
 
+  private mirror: Mirror = createMirror();
   /** The first time the player is playing. */
   private firstPlayedEvent: eventWithTime | null = null;
 
@@ -178,10 +180,27 @@ export class Replayer {
       for (const d of inputMap.values()) {
         this.applyInput(d);
       }
+
+      for (const [frag, parent] of this.fragmentParentMap.entries()) {
+        this.mirror.map[parent.__sn.id] = parent;
+        /**
+         * If we have already set value attribute on textarea,
+         * then we could not apply text content as default value any more.
+         */
+        if (
+          parent.__sn.type === NodeType.Element &&
+          parent.__sn.tagName === 'textarea' &&
+          frag.textContent
+        ) {
+          ((parent as unknown) as HTMLTextAreaElement).value = frag.textContent;
+        }
+        parent.appendChild(frag);
+      }
+      this.fragmentParentMap.clear();
     });
     this.emitter.on(ReplayerEvents.PlayBack, () => {
       this.firstPlayedEvent = null;
-      mirror.reset();
+      this.mirror.reset();
     });
 
     const timer = new Timer([], config?.speed || defaultConfig.speed);
@@ -557,7 +576,7 @@ export class Replayer {
     }
     this.legacy_missingNodeRetryMap = {};
     const collected: AppendedIframe[] = [];
-    mirror.map = rebuild(event.data.node, {
+    this.mirror.map = rebuild(event.data.node, {
       doc: this.iframe.contentDocument,
       afterAppend: (builtNode) => {
         this.collectIframeAndAttachDocument(collected, builtNode);
@@ -629,7 +648,7 @@ export class Replayer {
     }
     buildNodeWithSN(mutation.node, {
       doc: iframeEl.contentDocument!,
-      map: mirror.map,
+      map: this.mirror.map,
       hackCss: true,
       skipChild: false,
       afterAppend: (builtNode) => {
@@ -810,7 +829,7 @@ export class Replayer {
           break;
         }
         const event = new Event(MouseInteractions[d.type].toLowerCase());
-        const target = mirror.getNode(d.id);
+        const target = this.mirror.getNode(d.id);
         if (!target) {
           return this.debugNodeNotFound(d, d.id);
         }
@@ -893,7 +912,7 @@ export class Replayer {
         break;
       }
       case IncrementalSource.MediaInteraction: {
-        const target = mirror.getNode(d.id);
+        const target = this.mirror.getNode(d.id);
         if (!target) {
           return this.debugNodeNotFound(d, d.id);
         }
@@ -921,7 +940,7 @@ export class Replayer {
         break;
       }
       case IncrementalSource.StyleSheetRule: {
-        const target = mirror.getNode(d.id);
+        const target = this.mirror.getNode(d.id);
         if (!target) {
           return this.debugNodeNotFound(d, d.id);
         }
@@ -993,7 +1012,7 @@ export class Replayer {
         if (!this.config.UNSAFE_replayCanvas) {
           return;
         }
-        const target = mirror.getNode(d.id);
+        const target = this.mirror.getNode(d.id);
         if (!target) {
           return this.debugNodeNotFound(d, d.id);
         }
@@ -1061,11 +1080,11 @@ export class Replayer {
 
   private applyMutation(d: mutationData, useVirtualParent: boolean) {
     d.removes.forEach((mutation) => {
-      const target = mirror.getNode(mutation.id);
+      const target = this.mirror.getNode(mutation.id);
       if (!target) {
         return this.warnNodeNotFound(d, mutation.id);
       }
-      let parent: INode | null | ShadowRoot = mirror.getNode(mutation.parentId);
+      let parent: INode | null | ShadowRoot = this.mirror.getNode(mutation.parentId);
       if (!parent) {
         return this.warnNodeNotFound(d, mutation.parentId);
       }
@@ -1073,7 +1092,7 @@ export class Replayer {
         parent = parent.shadowRoot;
       }
       // target may be removed with its parents before
-      mirror.removeNodeFromMap(target);
+      this.mirror.removeNodeFromMap(target);
       if (parent) {
         const realParent =
           '__sn' in parent ? this.fragmentParentMap.get(parent) : undefined;
@@ -1100,10 +1119,10 @@ export class Replayer {
     const queue: addedNodeMutation[] = [];
 
     // next not present at this moment
-    function nextNotInDOM(mutation: addedNodeMutation) {
+    const nextNotInDOM = (mutation: addedNodeMutation) => {
       let next: Node | null = null;
       if (mutation.nextId) {
-        next = mirror.getNode(mutation.nextId) as Node;
+        next = this.mirror.getNode(mutation.nextId) as Node;
       }
       // next not present at this moment
       if (
@@ -1115,13 +1134,13 @@ export class Replayer {
         return true;
       }
       return false;
-    }
+    };
 
     const appendNode = (mutation: addedNodeMutation) => {
       if (!this.iframe.contentDocument) {
         return console.warn('Looks like your replayer has been destroyed.');
       }
-      let parent: INode | null | ShadowRoot = mirror.getNode(mutation.parentId);
+      let parent: INode | null | ShadowRoot = this.mirror.getNode(mutation.parentId);
       if (!parent) {
         if (mutation.node.type === NodeType.Document) {
           // is newly added document, maybe the document node of an iframe
@@ -1153,7 +1172,7 @@ export class Replayer {
         !hasIframeChild
       ) {
         const virtualParent = (document.createDocumentFragment() as unknown) as INode;
-        mirror.map[mutation.parentId] = virtualParent;
+        this.mirror.map[mutation.parentId] = virtualParent;
         this.fragmentParentMap.set(virtualParent, parent);
 
         // store the state, like scroll position, of child nodes before they are unmounted from dom
@@ -1172,21 +1191,21 @@ export class Replayer {
       let previous: Node | null = null;
       let next: Node | null = null;
       if (mutation.previousId) {
-        previous = mirror.getNode(mutation.previousId) as Node;
+        previous = this.mirror.getNode(mutation.previousId) as Node;
       }
       if (mutation.nextId) {
-        next = mirror.getNode(mutation.nextId) as Node;
+        next = this.mirror.getNode(mutation.nextId) as Node;
       }
       if (nextNotInDOM(mutation)) {
         return queue.push(mutation);
       }
 
-      if (mutation.node.rootId && !mirror.getNode(mutation.node.rootId)) {
+      if (mutation.node.rootId && !this.mirror.getNode(mutation.node.rootId)) {
         return;
       }
 
       const targetDoc = mutation.node.rootId
-        ? mirror.getNode(mutation.node.rootId)
+        ? this.mirror.getNode(mutation.node.rootId)
         : this.iframe.contentDocument;
       if (isIframeINode(parent)) {
         this.attachDocumentToIframe(mutation, parent);
@@ -1194,7 +1213,7 @@ export class Replayer {
       }
       const target = buildNodeWithSN(mutation.node, {
         doc: targetDoc as Document,
-        map: mirror.map,
+        map: this.mirror.map,
         skipChild: true,
         hackCss: true,
       }) as INode;
@@ -1272,7 +1291,7 @@ export class Replayer {
         break;
       }
       for (const tree of resolveTrees) {
-        let parent = mirror.getNode(tree.value.parentId);
+        let parent = this.mirror.getNode(tree.value.parentId);
         if (!parent) {
           this.debug(
             'Drop resolve tree since there is no parent for the root node.',
@@ -1291,7 +1310,7 @@ export class Replayer {
     }
 
     d.texts.forEach((mutation) => {
-      let target = mirror.getNode(mutation.id);
+      let target = this.mirror.getNode(mutation.id);
       if (!target) {
         return this.warnNodeNotFound(d, mutation.id);
       }
@@ -1304,7 +1323,7 @@ export class Replayer {
       target.textContent = mutation.value;
     });
     d.attributes.forEach((mutation) => {
-      let target = mirror.getNode(mutation.id);
+      let target = this.mirror.getNode(mutation.id);
       if (!target) {
         return this.warnNodeNotFound(d, mutation.id);
       }
@@ -1334,7 +1353,7 @@ export class Replayer {
   }
 
   private applyScroll(d: scrollData) {
-    const target = mirror.getNode(d.id);
+    const target = this.mirror.getNode(d.id);
     if (!target) {
       return this.debugNodeNotFound(d, d.id);
     }
@@ -1358,7 +1377,7 @@ export class Replayer {
   }
 
   private applyInput(d: inputData) {
-    const target = mirror.getNode(d.id);
+    const target = this.mirror.getNode(d.id);
     if (!target) {
       return this.debugNodeNotFound(d, d.id);
     }
@@ -1453,7 +1472,7 @@ export class Replayer {
   }
 
   private moveAndHover(d: incrementalData, x: number, y: number, id: number) {
-    const target = mirror.getNode(id);
+    const target = this.mirror.getNode(id);
     if (!target) {
       return this.debugNodeNotFound(d, id);
     }
@@ -1546,7 +1565,7 @@ export class Replayer {
    * @param parent real parent element
    */
   private restoreRealParent(frag: INode, parent: INode) {
-    mirror.map[parent.__sn.id] = parent;
+    this.mirror.map[parent.__sn.id] = parent;
     /**
      * If we have already set value attribute on textarea,
      * then we could not apply text content as default value any more.
diff --git a/src/utils.ts b/src/utils.ts
index d407d2740c..dd45009fdd 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -34,35 +34,39 @@ export function on(
   return () => target.removeEventListener(type, fn, options);
 }
 
-export const mirror: Mirror = {
-  map: {},
-  getId(n) {
-    // if n is not a serialized INode, use -1 as its id.
-    if (!n.__sn) {
-      return -1;
-    }
-    return n.__sn.id;
-  },
-  getNode(id) {
-    return mirror.map[id] || null;
-  },
-  // TODO: use a weakmap to get rid of manually memory management
-  removeNodeFromMap(n) {
-    const id = n.__sn && n.__sn.id;
-    delete mirror.map[id];
-    if (n.childNodes) {
-      n.childNodes.forEach((child) =>
-        mirror.removeNodeFromMap((child as Node) as INode),
-      );
-    }
-  },
-  has(id) {
-    return mirror.map.hasOwnProperty(id);
-  },
-  reset() {
-    mirror.map = {};
-  },
-};
+export function createMirror (): Mirror {
+  return {
+    map: {},
+    getId(n) {
+      // if n is not a serialized INode, use -1 as its id.
+      if (!n.__sn) {
+        return -1;
+      }
+      return n.__sn.id;
+    },
+    getNode(id) {
+      return this.map[id] || null;
+    },
+    // TODO: use a weakmap to get rid of manually memory management
+    removeNodeFromMap(n) {
+      const id = n.__sn && n.__sn.id;
+      delete this.map[id];
+      if (n.childNodes) {
+        n.childNodes.forEach((child) =>
+          this.removeNodeFromMap((child as Node) as INode),
+        );
+      }
+    },
+    has(id) {
+      return this.map.hasOwnProperty(id);
+    },
+    reset() {
+      this.map = {};
+    },
+  };
+}
+
+export const mirror: Mirror = createMirror();
 
 // copy from underscore and modified
 export function throttle<T>(

From 0f86a72705b998a9abf5b4aae5b01a4f3b679954 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 22 May 2021 18:02:55 +0800
Subject: [PATCH 324/524] fix useless code introduced by resolving conflicts

---
 src/replay/index.ts | 25 ++++++-------------------
 1 file changed, 6 insertions(+), 19 deletions(-)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index 5ce1d07ab1..ff92c23aa4 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -180,23 +180,6 @@ export class Replayer {
       for (const d of inputMap.values()) {
         this.applyInput(d);
       }
-
-      for (const [frag, parent] of this.fragmentParentMap.entries()) {
-        this.mirror.map[parent.__sn.id] = parent;
-        /**
-         * If we have already set value attribute on textarea,
-         * then we could not apply text content as default value any more.
-         */
-        if (
-          parent.__sn.type === NodeType.Element &&
-          parent.__sn.tagName === 'textarea' &&
-          frag.textContent
-        ) {
-          ((parent as unknown) as HTMLTextAreaElement).value = frag.textContent;
-        }
-        parent.appendChild(frag);
-      }
-      this.fragmentParentMap.clear();
     });
     this.emitter.on(ReplayerEvents.PlayBack, () => {
       this.firstPlayedEvent = null;
@@ -1084,7 +1067,9 @@ export class Replayer {
       if (!target) {
         return this.warnNodeNotFound(d, mutation.id);
       }
-      let parent: INode | null | ShadowRoot = this.mirror.getNode(mutation.parentId);
+      let parent: INode | null | ShadowRoot = this.mirror.getNode(
+        mutation.parentId,
+      );
       if (!parent) {
         return this.warnNodeNotFound(d, mutation.parentId);
       }
@@ -1140,7 +1125,9 @@ export class Replayer {
       if (!this.iframe.contentDocument) {
         return console.warn('Looks like your replayer has been destroyed.');
       }
-      let parent: INode | null | ShadowRoot = this.mirror.getNode(mutation.parentId);
+      let parent: INode | null | ShadowRoot = this.mirror.getNode(
+        mutation.parentId,
+      );
       if (!parent) {
         if (mutation.node.type === NodeType.Document) {
           // is newly added document, maybe the document node of an iframe

From 51f64d8fad7978947c16f488b417b55c1fd8d5af Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 25 May 2021 20:01:31 +0800
Subject: [PATCH 325/524] fix #565 add departed warning

---
 src/replay/index.ts       |  4 ++++
 src/utils.ts              | 37 +++++++++++++++++++++++++++++++++++--
 typings/replay/index.d.ts |  4 +++-
 typings/utils.d.ts        |  3 ++-
 4 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index ff92c23aa4..97de88ba51 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -318,6 +318,10 @@ export class Replayer {
     return baselineTime - events[0].timestamp;
   }
 
+  public getMirror(): Mirror {
+    return this.mirror;
+  }
+
   /**
    * This API was designed to be used as play at any time offset.
    * Since we minimized the data collected from recorder, we do not
diff --git a/src/utils.ts b/src/utils.ts
index dd45009fdd..d579c9ae3d 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -34,7 +34,7 @@ export function on(
   return () => target.removeEventListener(type, fn, options);
 }
 
-export function createMirror (): Mirror {
+export function createMirror(): Mirror {
   return {
     map: {},
     getId(n) {
@@ -66,7 +66,40 @@ export function createMirror (): Mirror {
   };
 }
 
-export const mirror: Mirror = createMirror();
+// https://github.com/rrweb-io/rrweb/pull/407
+const DEPARTED_MIRROR_ACCESS_WARNING =
+  'Please stop import mirror directly. Instead of that, now you can use replayer.getMirror() to access the mirror instance of a replayer.';
+export let mirror: Mirror = {
+  map: {},
+  getId() {
+    console.error(DEPARTED_MIRROR_ACCESS_WARNING);
+    return -1;
+  },
+  getNode() {
+    console.error(DEPARTED_MIRROR_ACCESS_WARNING);
+    return null;
+  },
+  removeNodeFromMap() {
+    console.error(DEPARTED_MIRROR_ACCESS_WARNING);
+  },
+  has() {
+    console.error(DEPARTED_MIRROR_ACCESS_WARNING);
+    return false;
+  },
+  reset() {
+    console.error(DEPARTED_MIRROR_ACCESS_WARNING);
+  },
+};
+if (window.Proxy && window.Reflect) {
+  mirror = new Proxy(mirror, {
+    get(target, prop, receiver) {
+      if (prop === 'map') {
+        console.error(DEPARTED_MIRROR_ACCESS_WARNING);
+      }
+      return Reflect.get(target, prop, receiver);
+    },
+  });
+}
 
 // copy from underscore and modified
 export function throttle<T>(
diff --git a/typings/replay/index.d.ts b/typings/replay/index.d.ts
index 441552ed37..9c849ae23d 100644
--- a/typings/replay/index.d.ts
+++ b/typings/replay/index.d.ts
@@ -1,6 +1,6 @@
 import { Timer } from './timer';
 import { createPlayerService, createSpeedService } from './machine';
-import { eventWithTime, playerConfig, playerMetaData, Handler } from '../types';
+import { eventWithTime, playerConfig, playerMetaData, Handler, Mirror } from '../types';
 import './styles/style.css';
 export declare class Replayer {
     wrapper: HTMLDivElement;
@@ -19,6 +19,7 @@ export declare class Replayer {
     private fragmentParentMap;
     private elementStateMap;
     private imageMap;
+    private mirror;
     private firstPlayedEvent;
     private newDocumentQueue;
     constructor(events: Array<eventWithTime | string>, config?: Partial<playerConfig>);
@@ -27,6 +28,7 @@ export declare class Replayer {
     getMetaData(): playerMetaData;
     getCurrentTime(): number;
     getTimeOffset(): number;
+    getMirror(): Mirror;
     play(timeOffset?: number): void;
     pause(timeOffset?: number): void;
     resume(timeOffset?: number): void;
diff --git a/typings/utils.d.ts b/typings/utils.d.ts
index b6ab536bf5..749487bc34 100644
--- a/typings/utils.d.ts
+++ b/typings/utils.d.ts
@@ -1,7 +1,8 @@
 import { Mirror, throttleOptions, listenerHandler, hookResetter, blockClass, eventWithTime, addedNodeMutation, removedNodeMutation, textMutation, attributeMutation, mutationData, scrollData, inputData, DocumentDimension } from './types';
 import { INode, serializedNodeWithId } from 'rrweb-snapshot';
 export declare function on(type: string, fn: EventListenerOrEventListenerObject, target?: Document | Window): listenerHandler;
-export declare const mirror: Mirror;
+export declare function createMirror(): Mirror;
+export declare let mirror: Mirror;
 export declare function throttle<T>(func: (arg: T) => void, wait: number, options?: throttleOptions): (arg: T) => void;
 export declare function hookSetter<T>(target: T, key: string | number | symbol, d: PropertyDescriptor, isRevoked?: boolean, win?: Window & typeof globalThis): hookResetter;
 export declare function patch(source: {

From 995d80a26ff23e0ed9bebd7292e2d0a5491f3f4f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 25 May 2021 23:37:07 +0800
Subject: [PATCH 326/524] create mirror during record

---
 src/index.ts                           | 11 ++++++--
 src/record/index.ts                    |  7 ++++-
 src/record/mutation.ts                 | 37 ++++++++++++++------------
 src/record/observer.ts                 | 34 +++++++++++++++++++----
 src/record/shadow-dom-manager.ts       | 12 ++++++++-
 src/replay/index.ts                    |  2 +-
 src/types.ts                           |  1 +
 src/utils.ts                           | 18 ++++++++-----
 test/record.test.ts                    |  4 +--
 typings/index.d.ts                     |  4 +--
 typings/record/index.d.ts              |  1 +
 typings/record/mutation.d.ts           |  5 ++--
 typings/record/observer.d.ts           |  4 +--
 typings/record/shadow-dom-manager.d.ts |  4 ++-
 typings/types.d.ts                     |  1 +
 typings/utils.d.ts                     |  6 ++---
 16 files changed, 105 insertions(+), 46 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index e57b8e42ba..d8e8dad3ee 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,6 @@
 import record from './record';
 import { Replayer } from './replay';
-import { mirror } from './utils';
+import { _mirror } from './utils';
 import * as utils from './utils';
 
 export {
@@ -13,4 +13,11 @@ export {
 const { addCustomEvent } = record;
 const { freezePage } = record;
 
-export { record, addCustomEvent, freezePage, Replayer, mirror, utils };
+export {
+  record,
+  addCustomEvent,
+  freezePage,
+  Replayer,
+  _mirror as mirror,
+  utils,
+};
diff --git a/src/record/index.ts b/src/record/index.ts
index 3a7668dc8a..585a5fc656 100644
--- a/src/record/index.ts
+++ b/src/record/index.ts
@@ -1,13 +1,13 @@
 import { snapshot, MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
 import { initObservers, mutationBuffers } from './observer';
 import {
-  mirror,
   on,
   getWindowWidth,
   getWindowHeight,
   polyfill,
   isIframeINode,
   hasShadowRoot,
+  createMirror,
 } from '../utils';
 import {
   EventType,
@@ -33,6 +33,7 @@ let wrappedEmit!: (e: eventWithTime, isCheckout?: boolean) => void;
 
 let takeFullSnapshot!: (isCheckout?: boolean) => void;
 
+const mirror = createMirror();
 function record<T = eventWithTime>(
   options: recordOptions<T> = {},
 ): listenerHandler | undefined {
@@ -215,6 +216,7 @@ function record<T = eventWithTime>(
       slimDOMOptions,
       iframeManager,
     },
+    mirror,
   });
 
   takeFullSnapshot = (isCheckout = false) => {
@@ -418,6 +420,7 @@ function record<T = eventWithTime>(
           logOptions,
           blockSelector,
           slimDOMOptions,
+          mirror,
           iframeManager,
           shadowDomManager,
         },
@@ -490,4 +493,6 @@ record.takeFullSnapshot = (isCheckout?: boolean) => {
   takeFullSnapshot(isCheckout);
 };
 
+record.mirror = mirror;
+
 export default record;
diff --git a/src/record/mutation.ts b/src/record/mutation.ts
index 4b65e79656..8e744bcaba 100644
--- a/src/record/mutation.ts
+++ b/src/record/mutation.ts
@@ -18,9 +18,9 @@ import {
   removedNodeMutation,
   addedNodeMutation,
   MaskTextFn,
+  Mirror,
 } from '../types';
 import {
-  mirror,
   isBlocked,
   isAncestorRemoved,
   isIgnored,
@@ -171,6 +171,7 @@ export default class MutationBuffer {
   private slimDOMOptions: SlimDOMOptions;
   private doc: Document;
 
+  private mirror: Mirror;
   private iframeManager: IframeManager;
   private shadowDomManager: ShadowDomManager;
 
@@ -186,6 +187,7 @@ export default class MutationBuffer {
     recordCanvas: boolean,
     slimDOMOptions: SlimDOMOptions,
     doc: Document,
+    mirror: Mirror,
     iframeManager: IframeManager,
     shadowDomManager: ShadowDomManager,
   ) {
@@ -200,6 +202,7 @@ export default class MutationBuffer {
     this.slimDOMOptions = slimDOMOptions;
     this.emissionCallback = cb;
     this.doc = doc;
+    this.mirror = mirror;
     this.iframeManager = iframeManager;
     this.shadowDomManager = shadowDomManager;
   }
@@ -251,7 +254,7 @@ export default class MutationBuffer {
       let nextId: number | null = IGNORED_NODE; // slimDOM: ignored
       while (nextId === IGNORED_NODE) {
         ns = ns && ns.nextSibling;
-        nextId = ns && mirror.getId((ns as unknown) as INode);
+        nextId = ns && this.mirror.getId((ns as unknown) as INode);
       }
       if (nextId === -1 && isBlocked(n.nextSibling, this.blockClass)) {
         nextId = null;
@@ -267,15 +270,15 @@ export default class MutationBuffer {
         return;
       }
       const parentId = isShadowRoot(n.parentNode)
-        ? mirror.getId((shadowHost as unknown) as INode)
-        : mirror.getId((n.parentNode as Node) as INode);
+        ? this.mirror.getId((shadowHost as unknown) as INode)
+        : this.mirror.getId((n.parentNode as Node) as INode);
       const nextId = getNextId(n);
       if (parentId === -1 || nextId === -1) {
         return addList.addNode(n);
       }
       let sn = serializeNodeWithId(n, {
         doc: this.doc,
-        map: mirror.map,
+        map: this.mirror.map,
         blockClass: this.blockClass,
         blockSelector: this.blockSelector,
         maskTextClass: this.maskTextClass,
@@ -308,7 +311,7 @@ export default class MutationBuffer {
     };
 
     while (this.mapRemoves.length) {
-      mirror.removeNodeFromMap(this.mapRemoves.shift() as INode);
+      this.mirror.removeNodeFromMap(this.mapRemoves.shift() as INode);
     }
 
     for (const n of this.movedSet) {
@@ -338,7 +341,7 @@ export default class MutationBuffer {
     while (addList.length) {
       let node: DoubleLinkedListNode | null = null;
       if (candidate) {
-        const parentId = mirror.getId(
+        const parentId = this.mirror.getId(
           (candidate.value.parentNode as Node) as INode,
         );
         const nextId = getNextId(candidate.value);
@@ -349,7 +352,7 @@ export default class MutationBuffer {
       if (!node) {
         for (let index = addList.length - 1; index >= 0; index--) {
           const _node = addList.get(index)!;
-          const parentId = mirror.getId(
+          const parentId = this.mirror.getId(
             (_node.value.parentNode as Node) as INode,
           );
           const nextId = getNextId(_node.value);
@@ -378,18 +381,18 @@ export default class MutationBuffer {
     const payload = {
       texts: this.texts
         .map((text) => ({
-          id: mirror.getId(text.node as INode),
+          id: this.mirror.getId(text.node as INode),
           value: text.value,
         }))
         // text mutation's id was not in the mirror map means the target node has been removed
-        .filter((text) => mirror.has(text.id)),
+        .filter((text) => this.mirror.has(text.id)),
       attributes: this.attributes
         .map((attribute) => ({
-          id: mirror.getId(attribute.node as INode),
+          id: this.mirror.getId(attribute.node as INode),
           attributes: attribute.attributes,
         }))
         // attribute mutation's id was not in the mirror map means the target node has been removed
-        .filter((attribute) => mirror.has(attribute.id)),
+        .filter((attribute) => this.mirror.has(attribute.id)),
       removes: this.removes,
       adds,
     };
@@ -466,10 +469,10 @@ export default class MutationBuffer {
       case 'childList': {
         m.addedNodes.forEach((n) => this.genAdds(n, m.target));
         m.removedNodes.forEach((n) => {
-          const nodeId = mirror.getId(n as INode);
+          const nodeId = this.mirror.getId(n as INode);
           const parentId = isShadowRoot(m.target)
-            ? mirror.getId((m.target.host as unknown) as INode)
-            : mirror.getId(m.target as INode);
+            ? this.mirror.getId((m.target.host as unknown) as INode)
+            : this.mirror.getId(m.target as INode);
           if (
             isBlocked(n, this.blockClass) ||
             isBlocked(m.target, this.blockClass) ||
@@ -489,7 +492,7 @@ export default class MutationBuffer {
              * newly added node will be serialized without child nodes.
              * TODO: verify this
              */
-          } else if (isAncestorRemoved(m.target as INode)) {
+          } else if (isAncestorRemoved(m.target as INode, this.mirror)) {
             /**
              * If parent id was not in the mirror map any more, it
              * means the parent node has already been removed. So
@@ -560,7 +563,7 @@ function isParentRemoved(removes: removedNodeMutation[], n: Node): boolean {
   if (!parentNode) {
     return false;
   }
-  const parentId = mirror.getId((parentNode as Node) as INode);
+  const parentId = this.mirror.getId((parentNode as Node) as INode);
   if (removes.some((r) => r.id === parentId)) {
     return true;
   }
diff --git a/src/record/observer.ts b/src/record/observer.ts
index 2cc87efa03..dd2a1934db 100644
--- a/src/record/observer.ts
+++ b/src/record/observer.ts
@@ -1,7 +1,6 @@
 import { INode, MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
 import { FontFaceDescriptors, FontFaceSet } from 'css-font-loading-module';
 import {
-  mirror,
   throttle,
   on,
   hookSetter,
@@ -42,6 +41,7 @@ import {
   LogRecordOptions,
   Logger,
   LogLevel,
+  Mirror,
 } from '../types';
 import MutationBuffer from './mutation';
 import { stringify } from './stringify';
@@ -72,6 +72,7 @@ export function initMutationObserver(
   maskTextFn: MaskTextFn | undefined,
   recordCanvas: boolean,
   slimDOMOptions: SlimDOMOptions,
+  mirror: Mirror,
   iframeManager: IframeManager,
   shadowDomManager: ShadowDomManager,
   rootEl: Node,
@@ -91,6 +92,7 @@ export function initMutationObserver(
     recordCanvas,
     slimDOMOptions,
     doc,
+    mirror,
     iframeManager,
     shadowDomManager,
   );
@@ -137,6 +139,7 @@ function initMoveObserver(
   cb: mousemoveCallBack,
   sampling: SamplingStrategy,
   doc: Document,
+  mirror: Mirror,
 ): listenerHandler {
   if (sampling.mousemove === false) {
     return () => {};
@@ -212,6 +215,7 @@ function initMoveObserver(
 function initMouseInteractionObserver(
   cb: mouseInteractionCallBack,
   doc: Document,
+  mirror: Mirror,
   blockClass: blockClass,
   sampling: SamplingStrategy,
 ): listenerHandler {
@@ -264,6 +268,7 @@ function initMouseInteractionObserver(
 function initScrollObserver(
   cb: scrollCallback,
   doc: Document,
+  mirror: Mirror,
   blockClass: blockClass,
   sampling: SamplingStrategy,
 ): listenerHandler {
@@ -315,6 +320,7 @@ const lastInputValueMap: WeakMap<EventTarget, inputValue> = new WeakMap();
 function initInputObserver(
   cb: inputCallback,
   doc: Document,
+  mirror: Mirror,
   blockClass: blockClass,
   ignoreClass: string,
   maskInputOptions: MaskInputOptions,
@@ -419,7 +425,10 @@ function initInputObserver(
   };
 }
 
-function initStyleSheetObserver(cb: styleSheetRuleCallback): listenerHandler {
+function initStyleSheetObserver(
+  cb: styleSheetRuleCallback,
+  mirror: Mirror,
+): listenerHandler {
   const insertRule = CSSStyleSheet.prototype.insertRule;
   CSSStyleSheet.prototype.insertRule = function (rule: string, index?: number) {
     const id = mirror.getId(this.ownerNode as INode);
@@ -453,6 +462,7 @@ function initStyleSheetObserver(cb: styleSheetRuleCallback): listenerHandler {
 function initMediaInteractionObserver(
   mediaInteractionCb: mediaInteractionCallback,
   blockClass: blockClass,
+  mirror: Mirror,
 ): listenerHandler {
   const handler = (type: 'play' | 'pause') => (event: Event) => {
     const { target } = event;
@@ -473,6 +483,7 @@ function initMediaInteractionObserver(
 function initCanvasMutationObserver(
   cb: canvasMutationCallback,
   blockClass: blockClass,
+  mirror: Mirror,
 ): listenerHandler {
   const props = Object.getOwnPropertyNames(CanvasRenderingContext2D.prototype);
   const handlers: listenerHandler[] = [];
@@ -779,20 +790,28 @@ export function initObservers(
     o.maskTextFn,
     o.recordCanvas,
     o.slimDOMOptions,
+    o.mirror,
     o.iframeManager,
     o.shadowDomManager,
     o.doc,
   );
-  const mousemoveHandler = initMoveObserver(o.mousemoveCb, o.sampling, o.doc);
+  const mousemoveHandler = initMoveObserver(
+    o.mousemoveCb,
+    o.sampling,
+    o.doc,
+    o.mirror,
+  );
   const mouseInteractionHandler = initMouseInteractionObserver(
     o.mouseInteractionCb,
     o.doc,
+    o.mirror,
     o.blockClass,
     o.sampling,
   );
   const scrollHandler = initScrollObserver(
     o.scrollCb,
     o.doc,
+    o.mirror,
     o.blockClass,
     o.sampling,
   );
@@ -800,6 +819,7 @@ export function initObservers(
   const inputHandler = initInputObserver(
     o.inputCb,
     o.doc,
+    o.mirror,
     o.blockClass,
     o.ignoreClass,
     o.maskInputOptions,
@@ -809,10 +829,14 @@ export function initObservers(
   const mediaInteractionHandler = initMediaInteractionObserver(
     o.mediaInteractionCb,
     o.blockClass,
+    o.mirror,
+  );
+  const styleSheetObserver = initStyleSheetObserver(
+    o.styleSheetRuleCb,
+    o.mirror,
   );
-  const styleSheetObserver = initStyleSheetObserver(o.styleSheetRuleCb);
   const canvasMutationObserver = o.recordCanvas
-    ? initCanvasMutationObserver(o.canvasMutationCb, o.blockClass)
+    ? initCanvasMutationObserver(o.canvasMutationCb, o.blockClass, o.mirror)
     : () => {};
   const fontObserver = o.collectFonts ? initFontObserver(o.fontCb) : () => {};
   const logObserver = o.logOptions
diff --git a/src/record/shadow-dom-manager.ts b/src/record/shadow-dom-manager.ts
index 6681e11b54..71d233d26a 100644
--- a/src/record/shadow-dom-manager.ts
+++ b/src/record/shadow-dom-manager.ts
@@ -1,4 +1,10 @@
-import { mutationCallBack, blockClass, maskTextClass, MaskTextFn } from '../types';
+import {
+  mutationCallBack,
+  blockClass,
+  maskTextClass,
+  MaskTextFn,
+  Mirror,
+} from '../types';
 import { MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
 import { IframeManager } from './iframe-manager';
 import { initMutationObserver } from './observer';
@@ -19,13 +25,16 @@ type BypassOptions = {
 export class ShadowDomManager {
   private mutationCb: mutationCallBack;
   private bypassOptions: BypassOptions;
+  private mirror: Mirror;
 
   constructor(options: {
     mutationCb: mutationCallBack;
     bypassOptions: BypassOptions;
+    mirror: Mirror;
   }) {
     this.mutationCb = options.mutationCb;
     this.bypassOptions = options.bypassOptions;
+    this.mirror = this.mirror;
   }
 
   public addShadowRoot(shadowRoot: ShadowRoot, doc: Document) {
@@ -41,6 +50,7 @@ export class ShadowDomManager {
       this.bypassOptions.maskTextFn,
       this.bypassOptions.recordCanvas,
       this.bypassOptions.slimDOMOptions,
+      this.mirror,
       this.bypassOptions.iframeManager,
       this,
       shadowRoot,
diff --git a/src/replay/index.ts b/src/replay/index.ts
index 97de88ba51..6964eda891 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -779,7 +779,7 @@ export class Replayer {
           d.adds.forEach((m) => this.treeIndex.add(m));
           d.texts.forEach((m) => this.treeIndex.text(m));
           d.attributes.forEach((m) => this.treeIndex.attribute(m));
-          d.removes.forEach((m) => this.treeIndex.remove(m));
+          d.removes.forEach((m) => this.treeIndex.remove(m, this.mirror));
         }
         this.applyMutation(d, isSync);
         break;
diff --git a/src/types.ts b/src/types.ts
index 3be785f096..0a040e3b09 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -243,6 +243,7 @@ export type observerParam = {
   collectFonts: boolean;
   slimDOMOptions: SlimDOMOptions;
   doc: Document;
+  mirror: Mirror;
   iframeManager: IframeManager;
   shadowDomManager: ShadowDomManager;
 };
diff --git a/src/utils.ts b/src/utils.ts
index d579c9ae3d..59ee18e9a1 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -68,8 +68,12 @@ export function createMirror(): Mirror {
 
 // https://github.com/rrweb-io/rrweb/pull/407
 const DEPARTED_MIRROR_ACCESS_WARNING =
-  'Please stop import mirror directly. Instead of that, now you can use replayer.getMirror() to access the mirror instance of a replayer.';
-export let mirror: Mirror = {
+  'Please stop import mirror directly. Instead of that,' +
+  '\r\n' +
+  'now you can use replayer.getMirror() to access the mirror instance of a replayer,' +
+  '\r\n' +
+  'or you can use record.mirror to access the mirror instance during recording.';
+export let _mirror: Mirror = {
   map: {},
   getId() {
     console.error(DEPARTED_MIRROR_ACCESS_WARNING);
@@ -90,8 +94,8 @@ export let mirror: Mirror = {
     console.error(DEPARTED_MIRROR_ACCESS_WARNING);
   },
 };
-if (window.Proxy && window.Reflect) {
-  mirror = new Proxy(mirror, {
+if (typeof window !== 'undefined' && window.Proxy && window.Reflect) {
+  _mirror = new Proxy(_mirror, {
     get(target, prop, receiver) {
       if (prop === 'map') {
         console.error(DEPARTED_MIRROR_ACCESS_WARNING);
@@ -253,7 +257,7 @@ export function isIgnored(n: Node | INode): boolean {
   return false;
 }
 
-export function isAncestorRemoved(target: INode): boolean {
+export function isAncestorRemoved(target: INode, mirror: Mirror): boolean {
   if (isShadowRoot(target)) {
     return false;
   }
@@ -271,7 +275,7 @@ export function isAncestorRemoved(target: INode): boolean {
   if (!target.parentNode) {
     return true;
   }
-  return isAncestorRemoved((target.parentNode as unknown) as INode);
+  return isAncestorRemoved((target.parentNode as unknown) as INode, mirror);
 }
 
 export function isTouchEvent(
@@ -382,7 +386,7 @@ export class TreeIndex {
     this.indexes.set(treeNode.id, treeNode);
   }
 
-  public remove(mutation: removedNodeMutation) {
+  public remove(mutation: removedNodeMutation, mirror: Mirror) {
     const parentTreeNode = this.indexes.get(mutation.parentId);
     const treeNode = this.indexes.get(mutation.id);
 
diff --git a/test/record.test.ts b/test/record.test.ts
index fb6a3f799b..025675a0df 100644
--- a/test/record.test.ts
+++ b/test/record.test.ts
@@ -142,10 +142,10 @@ describe('record', function (this: ISuite) {
     }
     await this.page.waitFor(300);
     expect(this.events.length).to.equal(33); // before first automatic snapshot
-    await this.page.waitFor(200);  // could be 33 or 35 events by now depending on speed of test env
+    await this.page.waitFor(200); // could be 33 or 35 events by now depending on speed of test env
     await this.page.type('input', 'a');
     await this.page.waitFor(10);
-    expect(this.events.length).to.equal(36);  // additionally includes the 2 checkout events
+    expect(this.events.length).to.equal(36); // additionally includes the 2 checkout events
     expect(
       this.events.filter(
         (event: eventWithTime) => event.type === EventType.Meta,
diff --git a/typings/index.d.ts b/typings/index.d.ts
index b6bf190e78..6b6d18d12f 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,8 +1,8 @@
 import record from './record';
 import { Replayer } from './replay';
-import { mirror } from './utils';
+import { _mirror } from './utils';
 import * as utils from './utils';
 export { EventType, IncrementalSource, MouseInteractions, ReplayerEvents, } from './types';
 declare const addCustomEvent: <T>(tag: string, payload: T) => void;
 declare const freezePage: () => void;
-export { record, addCustomEvent, freezePage, Replayer, mirror, utils };
+export { record, addCustomEvent, freezePage, Replayer, _mirror as mirror, utils, };
diff --git a/typings/record/index.d.ts b/typings/record/index.d.ts
index 469fde38bb..c4f541c887 100644
--- a/typings/record/index.d.ts
+++ b/typings/record/index.d.ts
@@ -4,5 +4,6 @@ declare namespace record {
     var addCustomEvent: <T>(tag: string, payload: T) => void;
     var freezePage: () => void;
     var takeFullSnapshot: (isCheckout?: boolean | undefined) => void;
+    var mirror: import("../types").Mirror;
 }
 export default record;
diff --git a/typings/record/mutation.d.ts b/typings/record/mutation.d.ts
index aaa0570096..a512942c08 100644
--- a/typings/record/mutation.d.ts
+++ b/typings/record/mutation.d.ts
@@ -1,5 +1,5 @@
 import { MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
-import { mutationRecord, blockClass, maskTextClass, mutationCallBack, MaskTextFn } from '../types';
+import { mutationRecord, blockClass, maskTextClass, mutationCallBack, MaskTextFn, Mirror } from '../types';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
 export default class MutationBuffer {
@@ -24,9 +24,10 @@ export default class MutationBuffer {
     private recordCanvas;
     private slimDOMOptions;
     private doc;
+    private mirror;
     private iframeManager;
     private shadowDomManager;
-    init(cb: mutationCallBack, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, doc: Document, iframeManager: IframeManager, shadowDomManager: ShadowDomManager): void;
+    init(cb: mutationCallBack, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, doc: Document, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager): void;
     freeze(): void;
     unfreeze(): void;
     isFrozen(): boolean;
diff --git a/typings/record/observer.d.ts b/typings/record/observer.d.ts
index cfeda577e6..a82a370cc4 100644
--- a/typings/record/observer.d.ts
+++ b/typings/record/observer.d.ts
@@ -1,9 +1,9 @@
 import { MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
-import { mutationCallBack, observerParam, listenerHandler, blockClass, maskTextClass, hooksParam, MaskTextFn } from '../types';
+import { mutationCallBack, observerParam, listenerHandler, blockClass, maskTextClass, hooksParam, MaskTextFn, Mirror } from '../types';
 import MutationBuffer from './mutation';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
 export declare const mutationBuffers: MutationBuffer[];
-export declare function initMutationObserver(cb: mutationCallBack, doc: Document, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, iframeManager: IframeManager, shadowDomManager: ShadowDomManager, rootEl: Node): MutationObserver;
+export declare function initMutationObserver(cb: mutationCallBack, doc: Document, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager, rootEl: Node): MutationObserver;
 export declare const INPUT_TAGS: string[];
 export declare function initObservers(o: observerParam, hooks?: hooksParam): listenerHandler;
diff --git a/typings/record/shadow-dom-manager.d.ts b/typings/record/shadow-dom-manager.d.ts
index 1df3bcdac4..b0c4e2bc14 100644
--- a/typings/record/shadow-dom-manager.d.ts
+++ b/typings/record/shadow-dom-manager.d.ts
@@ -1,4 +1,4 @@
-import { mutationCallBack, blockClass, maskTextClass, MaskTextFn } from '../types';
+import { mutationCallBack, blockClass, maskTextClass, MaskTextFn, Mirror } from '../types';
 import { MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
 import { IframeManager } from './iframe-manager';
 declare type BypassOptions = {
@@ -16,9 +16,11 @@ declare type BypassOptions = {
 export declare class ShadowDomManager {
     private mutationCb;
     private bypassOptions;
+    private mirror;
     constructor(options: {
         mutationCb: mutationCallBack;
         bypassOptions: BypassOptions;
+        mirror: Mirror;
     });
     addShadowRoot(shadowRoot: ShadowRoot, doc: Document): void;
 }
diff --git a/typings/types.d.ts b/typings/types.d.ts
index f42927fcc1..a71df5b909 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -168,6 +168,7 @@ export declare type observerParam = {
     collectFonts: boolean;
     slimDOMOptions: SlimDOMOptions;
     doc: Document;
+    mirror: Mirror;
     iframeManager: IframeManager;
     shadowDomManager: ShadowDomManager;
 };
diff --git a/typings/utils.d.ts b/typings/utils.d.ts
index 749487bc34..763fa503c3 100644
--- a/typings/utils.d.ts
+++ b/typings/utils.d.ts
@@ -2,7 +2,7 @@ import { Mirror, throttleOptions, listenerHandler, hookResetter, blockClass, eve
 import { INode, serializedNodeWithId } from 'rrweb-snapshot';
 export declare function on(type: string, fn: EventListenerOrEventListenerObject, target?: Document | Window): listenerHandler;
 export declare function createMirror(): Mirror;
-export declare let mirror: Mirror;
+export declare let _mirror: Mirror;
 export declare function throttle<T>(func: (arg: T) => void, wait: number, options?: throttleOptions): (arg: T) => void;
 export declare function hookSetter<T>(target: T, key: string | number | symbol, d: PropertyDescriptor, isRevoked?: boolean, win?: Window & typeof globalThis): hookResetter;
 export declare function patch(source: {
@@ -12,7 +12,7 @@ export declare function getWindowHeight(): number;
 export declare function getWindowWidth(): number;
 export declare function isBlocked(node: Node | null, blockClass: blockClass): boolean;
 export declare function isIgnored(n: Node | INode): boolean;
-export declare function isAncestorRemoved(target: INode): boolean;
+export declare function isAncestorRemoved(target: INode, mirror: Mirror): boolean;
 export declare function isTouchEvent(event: MouseEvent | TouchEvent): event is TouchEvent;
 export declare function polyfill(win?: Window & typeof globalThis): void;
 export declare function needCastInSyncMode(event: eventWithTime): boolean;
@@ -35,7 +35,7 @@ export declare class TreeIndex {
     private inputMap;
     constructor();
     add(mutation: addedNodeMutation): void;
-    remove(mutation: removedNodeMutation): void;
+    remove(mutation: removedNodeMutation, mirror: Mirror): void;
     text(mutation: textMutation): void;
     attribute(mutation: attributeMutation): void;
     scroll(d: scrollData): void;

From 3b20abec2d6d2e2e0d8b541a5250face8a89a90f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 26 May 2021 00:04:23 +0800
Subject: [PATCH 327/524] fix unit test

---
 src/record/mutation.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/record/mutation.ts b/src/record/mutation.ts
index 8e744bcaba..ae2fba6b76 100644
--- a/src/record/mutation.ts
+++ b/src/record/mutation.ts
@@ -316,7 +316,7 @@ export default class MutationBuffer {
 
     for (const n of this.movedSet) {
       if (
-        isParentRemoved(this.removes, n) &&
+        isParentRemoved(this.removes, n, this.mirror) &&
         !this.movedSet.has(n.parentNode!)
       ) {
         continue;
@@ -327,7 +327,7 @@ export default class MutationBuffer {
     for (const n of this.addedSet) {
       if (
         !isAncestorInSet(this.droppedSet, n) &&
-        !isParentRemoved(this.removes, n)
+        !isParentRemoved(this.removes, n, this.mirror)
       ) {
         pushAdd(n);
       } else if (isAncestorInSet(this.movedSet, n)) {
@@ -419,6 +419,7 @@ export default class MutationBuffer {
   };
 
   private processMutation = (m: mutationRecord) => {
+    console.log({ m });
     if (isIgnored(m.target)) {
       return;
     }
@@ -558,16 +559,20 @@ function deepDelete(addsSet: Set<Node>, n: Node) {
   n.childNodes.forEach((childN) => deepDelete(addsSet, childN));
 }
 
-function isParentRemoved(removes: removedNodeMutation[], n: Node): boolean {
+function isParentRemoved(
+  removes: removedNodeMutation[],
+  n: Node,
+  mirror: Mirror,
+): boolean {
   const { parentNode } = n;
   if (!parentNode) {
     return false;
   }
-  const parentId = this.mirror.getId((parentNode as Node) as INode);
+  const parentId = mirror.getId((parentNode as Node) as INode);
   if (removes.some((r) => r.id === parentId)) {
     return true;
   }
-  return isParentRemoved(removes, parentNode);
+  return isParentRemoved(removes, parentNode, mirror);
 }
 
 function isAncestorInSet(set: Set<Node>, n: Node): boolean {

From 28b6ac8bd98586d2d671b4181b6a61fca4583b8f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 26 May 2021 00:21:18 +0800
Subject: [PATCH 328/524] fix mirror usage in shadow DOM manager

---
 src/record/shadow-dom-manager.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/record/shadow-dom-manager.ts b/src/record/shadow-dom-manager.ts
index 71d233d26a..92774f4eb4 100644
--- a/src/record/shadow-dom-manager.ts
+++ b/src/record/shadow-dom-manager.ts
@@ -34,7 +34,7 @@ export class ShadowDomManager {
   }) {
     this.mutationCb = options.mutationCb;
     this.bypassOptions = options.bypassOptions;
-    this.mirror = this.mirror;
+    this.mirror = options.mirror;
   }
 
   public addShadowRoot(shadowRoot: ShadowRoot, doc: Document) {

From cbcd46a5b1ccb30db9d87b2393ac5bed9a162d3f Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 27 May 2021 09:44:40 +0800
Subject: [PATCH 329/524] Bump browserslist from 4.14.5 to 4.16.6 (#569)

Bumps [browserslist](https://github.com/browserslist/browserslist) from 4.14.5 to 4.16.6.
- [Release notes](https://github.com/browserslist/browserslist/releases)
- [Changelog](https://github.com/browserslist/browserslist/blob/main/CHANGELOG.md)
- [Commits](https://github.com/browserslist/browserslist/compare/4.14.5...4.16.6)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 46 ++++++++++++++++++++++++++--------------------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 910ac9f36b..f6c8c637b6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -363,14 +363,15 @@ browser-stdout@1.3.1:
   integrity sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==
 
 browserslist@^4.0.0:
-  version "4.14.5"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.5.tgz#1c751461a102ddc60e40993639b709be7f2c4015"
-  integrity sha512-Z+vsCZIvCBvqLoYkBFTwEYH3v5MCQbsAjp50ERycpOjnPmolg1Gjy4+KaWWpm8QOJt9GHkhdqAl14NpCX73CWA==
+  version "4.16.6"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
+  integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==
   dependencies:
-    caniuse-lite "^1.0.30001135"
-    electron-to-chromium "^1.3.571"
-    escalade "^3.1.0"
-    node-releases "^1.1.61"
+    caniuse-lite "^1.0.30001219"
+    colorette "^1.2.2"
+    electron-to-chromium "^1.3.723"
+    escalade "^3.1.1"
+    node-releases "^1.1.71"
 
 buffer-crc32@~0.2.3:
   version "0.2.13"
@@ -421,10 +422,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001135:
-  version "1.0.30001151"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001151.tgz#1ddfde5e6fff02aad7940b4edb7d3ac76b0cb00b"
-  integrity sha512-Zh3sHqskX6mHNrqUerh+fkf0N72cMxrmflzje/JyVImfpknscMnkeJrlFGJcqTmaa0iszdYptGpWMJCRQDkBVw==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001219:
+  version "1.0.30001230"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz#8135c57459854b2240b57a4a6786044bdc5a9f71"
+  integrity sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==
 
 capture-stack-trace@^1.0.0:
   version "1.0.1"
@@ -552,6 +553,11 @@ color@^3.0.0:
     color-convert "^1.9.1"
     color-string "^1.5.4"
 
+colorette@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
+  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
+
 colors@^1.1.2:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
@@ -906,10 +912,10 @@ duplexer3@^0.1.4:
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
   integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
 
-electron-to-chromium@^1.3.571:
-  version "1.3.583"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.583.tgz#47a9fde74740b1205dba96db2e433132964ba3ee"
-  integrity sha512-L9BwLwJohjZW9mQESI79HRzhicPk1DFgM+8hOCfGgGCFEcA3Otpv7QK6SGtYoZvfQfE3wKLh0Hd5ptqUFv3gvQ==
+electron-to-chromium@^1.3.723:
+  version "1.3.739"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.739.tgz#f07756aa92cabd5a6eec6f491525a64fe62f98b9"
+  integrity sha512-+LPJVRsN7hGZ9EIUUiWCpO7l4E3qBYHNadazlucBfsXBbccDFNKUBAgzE68FnkWGJPwD/AfKhSzL+G+Iqb8A4A==
 
 emojis-list@^3.0.0:
   version "3.0.0"
@@ -984,7 +990,7 @@ es6-promisify@^5.0.0:
   dependencies:
     es6-promise "^4.0.3"
 
-escalade@^3.1.0:
+escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
@@ -1939,10 +1945,10 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
-node-releases@^1.1.61:
-  version "1.1.64"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.64.tgz#71b4ae988e9b1dd7c1ffce58dd9e561752dfebc5"
-  integrity sha512-Iec8O9166/x2HRMJyLLLWkd0sFFLrFNy+Xf+JQfSQsdBJzPcHpNl3JQ9gD4j+aJxmCa25jNsIbM4bmACtSbkSg==
+node-releases@^1.1.71:
+  version "1.1.72"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe"
+  integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==
 
 normalize-path@^2.0.1:
   version "2.1.1"

From 9fbd7e1661c4654c4b14948b5802fb498caa8f2d Mon Sep 17 00:00:00 2001
From: mgoshorn <msgoshorn@gmail.com>
Date: Thu, 27 May 2021 20:17:09 +0900
Subject: [PATCH 330/524] Updates regex used to validate tagnames to allow for
 tagnames that include namespace information (esp: svg tags) (#77)

Co-authored-by: Mitch Goshorn <mitch.goshorn@calmid.com>
---
 src/snapshot.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 532fe16ab4..065feb1e7c 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -12,7 +12,7 @@ import {
 import { isElement, isShadowRoot } from './utils';
 
 let _id = 1;
-const tagNameRegex = RegExp('[^a-z0-9-_]');
+const tagNameRegex = RegExp('[^a-z0-9-_:]');
 
 export const IGNORED_NODE = -2;
 

From 04b3d8b35182b21f753f5dc2af90d2c5a0bfa598 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 6 Jun 2021 21:51:52 +0800
Subject: [PATCH 331/524] Bump ws from 6.2.1 to 6.2.2 (#72)

Bumps [ws](https://github.com/websockets/ws) from 6.2.1 to 6.2.2.
- [Release notes](https://github.com/websockets/ws/releases)
- [Commits](https://github.com/websockets/ws/commits)

---
updated-dependencies:
- dependency-name: ws
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 1467bdde2a..586bf9b7d8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -287,7 +287,7 @@ astral-regex@^1.0.0:
 
 async-limiter@~1.0.0:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
 balanced-match@^1.0.0:
@@ -1632,9 +1632,9 @@ write@1.0.3:
     mkdirp "^0.5.1"
 
 ws@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
-  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"
+  integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==
   dependencies:
     async-limiter "~1.0.0"
 

From c25bd2ee857a11e6d2a21b73d1be8cd89a1d32a9 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 6 Jun 2021 21:52:11 +0800
Subject: [PATCH 332/524] Bump ws from 6.2.1 to 6.2.2 (#575)

Bumps [ws](https://github.com/websockets/ws) from 6.2.1 to 6.2.2.
- [Release notes](https://github.com/websockets/ws/releases)
- [Commits](https://github.com/websockets/ws/commits)

---
updated-dependencies:
- dependency-name: ws
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index f6c8c637b6..44be4bd9a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3242,9 +3242,9 @@ write-file-atomic@^2.0.0:
     signal-exit "^3.0.2"
 
 ws@^6.1.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
-  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"
+  integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==
   dependencies:
     async-limiter "~1.0.0"
 

From 6710e2c0e30b602872aae8bf478d286aebc54a8b Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Sun, 6 Jun 2021 15:52:51 +0200
Subject: [PATCH 333/524] Fixes https://github.com/rrweb-io/rrweb/issues/567
 (#78)

---
 src/snapshot.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 065feb1e7c..c6249eba91 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -327,7 +327,9 @@ function onceIframeLoaded(
     iframeEl.src === blankUrl ||
     iframeEl.src === ''
   ) {
-    listener();
+    // iframe was already loaded, make sure we wait to trigger the listener
+    // till _after_ the mutation that found this iframe has had time to process
+    setTimeout(listener, 0);
     return;
   }
   // use default listener

From 53699822e4c6bbad25ee847877513db5afa6839b Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 7 Jun 2021 09:50:37 +0800
Subject: [PATCH 334/524] remove useless log

---
 src/record/mutation.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/record/mutation.ts b/src/record/mutation.ts
index ae2fba6b76..43d470e924 100644
--- a/src/record/mutation.ts
+++ b/src/record/mutation.ts
@@ -419,7 +419,6 @@ export default class MutationBuffer {
   };
 
   private processMutation = (m: mutationRecord) => {
-    console.log({ m });
     if (isIgnored(m.target)) {
       return;
     }

From 079ecd4972ba6fbf1f25c0905ab201ded4968ca3 Mon Sep 17 00:00:00 2001
From: Lucky Feng <f18846188605@gmail.com>
Date: Wed, 9 Jun 2021 18:55:03 +0800
Subject: [PATCH 335/524] fix: "Uncaught TypeError: Cannot read property
 'insertRule' of null" caused by CSP style-src (#79)

---
 src/rebuild.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 7a4d4422d4..0d269b0f37 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -169,6 +169,15 @@ function buildNode(
               // as setting them triggers a console.error (which shows up despite the try/catch)
               // Assumption: these attributes are not used to css
               node.setAttribute('_' + name, value);
+            } else if (
+              tagName === 'meta' &&
+              n.attributes['http-equiv'] === 'Content-Security-Policy' &&
+              name == 'content'
+            ) {
+              // If CSP contains style-src and inline-style is disabled, there will be an error "Refused to apply inline style because it violates the following Content Security Policy directive: style-src '*'".
+              // And the function insertStyleRules in rrweb replayer will throw an error "Uncaught TypeError: Cannot read property 'insertRule' of null".
+              node.setAttribute('csp-content', value);
+              continue;
             } else {
               node.setAttribute(name, value);
             }
@@ -255,7 +264,7 @@ export function buildNodeWithSN(
   }
   if (n.rootId) {
     console.assert(
-      ((map[n.rootId] as unknown) as Document) === doc,
+      (map[n.rootId] as unknown as Document) === doc,
       'Target document should has the same root id.',
     );
   }
@@ -318,7 +327,7 @@ function handleScroll(node: INode) {
   if (n.type !== NodeType.Element) {
     return;
   }
-  const el = (node as Node) as HTMLElement;
+  const el = node as Node as HTMLElement;
   for (const name in n.attributes) {
     if (!(n.attributes.hasOwnProperty(name) && name.startsWith('rr_'))) {
       continue;

From 1062770e20c0631bd07eba36c98c8b4de905325e Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 10 Jun 2021 19:26:00 +0800
Subject: [PATCH 336/524] shadow DOM recording GA 1. record shadow DOM event
 target by parsing composed path 2. nested record scroll event in shadow DOM

---
 src/record/index.ts              | 24 ++++++++++-------
 src/record/observer.ts           | 45 +++++++++++++++++++++++---------
 src/record/shadow-dom-manager.ts | 17 +++++++++++-
 3 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/src/record/index.ts b/src/record/index.ts
index 585a5fc656..1331d02a16 100644
--- a/src/record/index.ts
+++ b/src/record/index.ts
@@ -18,6 +18,7 @@ import {
   listenerHandler,
   LogRecordOptions,
   mutationCallbackParam,
+  scrollCallback,
 } from '../types';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
@@ -197,6 +198,16 @@ function record<T = eventWithTime>(
       }),
     );
   };
+  const wrappedScrollEmit: scrollCallback = (p) =>
+    wrappedEmit(
+      wrapEvent({
+        type: EventType.IncrementalSnapshot,
+        data: {
+          source: IncrementalSource.Scroll,
+          ...p,
+        },
+      }),
+    );
 
   const iframeManager = new IframeManager({
     mutationCb: wrappedMutationEmit,
@@ -204,6 +215,7 @@ function record<T = eventWithTime>(
 
   const shadowDomManager = new ShadowDomManager({
     mutationCb: wrappedMutationEmit,
+    scrollCb: wrappedScrollEmit,
     bypassOptions: {
       blockClass,
       blockSelector,
@@ -213,6 +225,7 @@ function record<T = eventWithTime>(
       maskInputOptions,
       maskTextFn,
       recordCanvas,
+      sampling,
       slimDOMOptions,
       iframeManager,
     },
@@ -325,16 +338,7 @@ function record<T = eventWithTime>(
                 },
               }),
             ),
-          scrollCb: (p) =>
-            wrappedEmit(
-              wrapEvent({
-                type: EventType.IncrementalSnapshot,
-                data: {
-                  source: IncrementalSource.Scroll,
-                  ...p,
-                },
-              }),
-            ),
+          scrollCb: wrappedScrollEmit,
           viewportResizeCb: (d) =>
             wrappedEmit(
               wrapEvent({
diff --git a/src/record/observer.ts b/src/record/observer.ts
index dd2a1934db..24a459e585 100644
--- a/src/record/observer.ts
+++ b/src/record/observer.ts
@@ -60,6 +60,25 @@ type WindowWithAngularZone = Window & {
 
 export const mutationBuffers: MutationBuffer[] = [];
 
+function getEventTarget(event: Event): EventTarget | null {
+  try {
+    if ('composedPath' in event) {
+      const path = event.composedPath();
+      if (path.length) {
+        return path[0];
+      }
+    } else if (
+      'path' in event &&
+      (event as { path: EventTarget[] }).path.length
+    ) {
+      return (event as { path: EventTarget[] }).path[0];
+    }
+    return event.target;
+  } catch {
+    return event.target;
+  }
+}
+
 export function initMutationObserver(
   cb: mutationCallBack,
   doc: Document,
@@ -176,7 +195,7 @@ function initMoveObserver(
   );
   const updatePosition = throttle<MouseEvent | TouchEvent | DragEvent>(
     (evt) => {
-      const { target } = evt;
+      const target = getEventTarget(evt);
       const { clientX, clientY } = isTouchEvent(evt)
         ? evt.changedTouches[0]
         : evt;
@@ -231,14 +250,15 @@ function initMouseInteractionObserver(
   const handlers: listenerHandler[] = [];
   const getHandler = (eventKey: keyof typeof MouseInteractions) => {
     return (event: MouseEvent | TouchEvent) => {
-      if (isBlocked(event.target as Node, blockClass)) {
+      const target = getEventTarget(event) as Node;
+      if (isBlocked(target as Node, blockClass)) {
         return;
       }
       const e = isTouchEvent(event) ? event.changedTouches[0] : event;
       if (!e) {
         return;
       }
-      const id = mirror.getId(event.target as INode);
+      const id = mirror.getId(target as INode);
       const { clientX, clientY } = e;
       cb({
         type: MouseInteractions[eventKey],
@@ -265,7 +285,7 @@ function initMouseInteractionObserver(
   };
 }
 
-function initScrollObserver(
+export function initScrollObserver(
   cb: scrollCallback,
   doc: Document,
   mirror: Mirror,
@@ -273,11 +293,12 @@ function initScrollObserver(
   sampling: SamplingStrategy,
 ): listenerHandler {
   const updatePosition = throttle<UIEvent>((evt) => {
-    if (!evt.target || isBlocked(evt.target as Node, blockClass)) {
+    const target = getEventTarget(evt);
+    if (!target || isBlocked(target as Node, blockClass)) {
       return;
     }
-    const id = mirror.getId(evt.target as INode);
-    if (evt.target === doc) {
+    const id = mirror.getId(target as INode);
+    if (target === doc) {
       const scrollEl = (doc.scrollingElement || doc.documentElement)!;
       cb({
         id,
@@ -287,12 +308,12 @@ function initScrollObserver(
     } else {
       cb({
         id,
-        x: (evt.target as HTMLElement).scrollLeft,
-        y: (evt.target as HTMLElement).scrollTop,
+        x: (target as HTMLElement).scrollLeft,
+        y: (target as HTMLElement).scrollTop,
       });
     }
   }, sampling.scroll || 100);
-  return on('scroll', updatePosition);
+  return on('scroll', updatePosition, doc);
 }
 
 function initViewportResizeObserver(
@@ -328,7 +349,7 @@ function initInputObserver(
   sampling: SamplingStrategy,
 ): listenerHandler {
   function eventHandler(event: Event) {
-    const { target } = event;
+    const target = getEventTarget(event);
     if (
       !target ||
       !(target as Element).tagName ||
@@ -465,7 +486,7 @@ function initMediaInteractionObserver(
   mirror: Mirror,
 ): listenerHandler {
   const handler = (type: 'play' | 'pause') => (event: Event) => {
-    const { target } = event;
+    const target = getEventTarget(event);
     if (!target || isBlocked(target as Node, blockClass)) {
       return;
     }
diff --git a/src/record/shadow-dom-manager.ts b/src/record/shadow-dom-manager.ts
index 92774f4eb4..119ca99219 100644
--- a/src/record/shadow-dom-manager.ts
+++ b/src/record/shadow-dom-manager.ts
@@ -4,10 +4,12 @@ import {
   maskTextClass,
   MaskTextFn,
   Mirror,
+  scrollCallback,
+  SamplingStrategy,
 } from '../types';
 import { MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
 import { IframeManager } from './iframe-manager';
-import { initMutationObserver } from './observer';
+import { initMutationObserver, initScrollObserver } from './observer';
 
 type BypassOptions = {
   blockClass: blockClass;
@@ -18,21 +20,25 @@ type BypassOptions = {
   maskInputOptions: MaskInputOptions;
   maskTextFn: MaskTextFn | undefined;
   recordCanvas: boolean;
+  sampling: SamplingStrategy;
   slimDOMOptions: SlimDOMOptions;
   iframeManager: IframeManager;
 };
 
 export class ShadowDomManager {
   private mutationCb: mutationCallBack;
+  private scrollCb: scrollCallback;
   private bypassOptions: BypassOptions;
   private mirror: Mirror;
 
   constructor(options: {
     mutationCb: mutationCallBack;
+    scrollCb: scrollCallback;
     bypassOptions: BypassOptions;
     mirror: Mirror;
   }) {
     this.mutationCb = options.mutationCb;
+    this.scrollCb = options.scrollCb;
     this.bypassOptions = options.bypassOptions;
     this.mirror = options.mirror;
   }
@@ -55,5 +61,14 @@ export class ShadowDomManager {
       this,
       shadowRoot,
     );
+    initScrollObserver(
+      this.scrollCb,
+      // https://gist.github.com/praveenpuglia/0832da687ed5a5d7a0907046c9ef1813
+      // scroll is not allowed to pass the boundary, so we need to listen the shadow document
+      (shadowRoot as unknown) as Document,
+      this.mirror,
+      this.bypassOptions.blockClass,
+      this.bypassOptions.sampling,
+    );
   }
 }

From d9d3e5461aa2e9eaf13b598019d6d48ded3f1135 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 10 Jun 2021 19:37:55 +0800
Subject: [PATCH 337/524] Release 1.1.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8013cd3b0b..ca98a8020d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",

From 1dd91f0737dc326560fec4bccb0264623777103f Mon Sep 17 00:00:00 2001
From: Yakko Majuri <38760734+yakkomajuri@users.noreply.github.com>
Date: Thu, 10 Jun 2021 08:47:19 -0300
Subject: [PATCH 338/524] Update canvas recording mechanism (#536)

---
 src/record/observer.ts |  6 +++++-
 src/replay/index.ts    | 18 ++++++------------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/record/observer.ts b/src/record/observer.ts
index 24a459e585..920f251c9a 100644
--- a/src/record/observer.ts
+++ b/src/record/observer.ts
@@ -533,7 +533,11 @@ function initCanvasMutationObserver(
                     recordArgs[0] &&
                     recordArgs[0] instanceof HTMLCanvasElement
                   ) {
-                    recordArgs[0] = recordArgs[0].toDataURL();
+                    const canvas = recordArgs[0]
+                    const ctx = canvas.getContext('2d')
+                    let imgd = ctx?.getImageData(0, 0, canvas.width, canvas.height)
+                    let pix = imgd?.data;
+                    recordArgs[0] = JSON.stringify(pix)
                   }
                 }
                 cb({
diff --git a/src/replay/index.ts b/src/replay/index.ts
index 6964eda891..44bc117a3d 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -749,18 +749,12 @@ export class Replayer {
         !this.imageMap.has(event)
       ) {
         count++;
-        const image = document.createElement('img');
-        image.src = event.data.args[0];
-        this.imageMap.set(event, image);
-        image.onload = () => {
-          resolved++;
-          if (resolved === count) {
-            if (beforeLoadState.matches('playing')) {
-              this.play(this.getCurrentTime());
-            }
-            unsubscribe();
-          }
-        };
+        var canvas = document.createElement('canvas');
+        var ctx = canvas.getContext('2d')
+        var imgd = ctx?.createImageData(canvas.width, canvas.height)
+        var d = imgd?.data                     
+        d = JSON.parse(event.data.args[0])
+        ctx?.putImageData(imgd!, 0, 0)
       }
     }
     if (count !== resolved) {

From e17845cf185d8594dfbe19e99784c13dfcddd813 Mon Sep 17 00:00:00 2001
From: Fatih Solhan <22654053+fatihsolhan@users.noreply.github.com>
Date: Thu, 10 Jun 2021 16:06:54 +0300
Subject: [PATCH 339/524] Add Vue.js version link to readme file

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 3e411bf696..9539d3543a 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 *Psst — looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
 
+*Looking for a Vue.js version? Go here --> [@preflight-hq/rrweb-player-vue](https://github.com/Preflight-HQ/rrweb-player-vue)*
+
 ---
 
 # svelte app

From 1c59ead0076f36073303a847abc82ccaf8690371 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 12 Jun 2021 14:04:17 +0800
Subject: [PATCH 340/524] Bump glob-parent from 5.1.1 to 5.1.2 (#74)

Bumps [glob-parent](https://github.com/gulpjs/glob-parent) from 5.1.1 to 5.1.2.
- [Release notes](https://github.com/gulpjs/glob-parent/releases)
- [Changelog](https://github.com/gulpjs/glob-parent/blob/main/CHANGELOG.md)
- [Commits](https://github.com/gulpjs/glob-parent/compare/v5.1.1...v5.1.2)

---
updated-dependencies:
- dependency-name: glob-parent
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 586bf9b7d8..9c0f16551a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -678,9 +678,9 @@ get-port@^3.2.0:
   integrity sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=
 
 glob-parent@^5.0.0, glob-parent@~5.1.0:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
-  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
   dependencies:
     is-glob "^4.0.1"
 
@@ -769,7 +769,7 @@ is-binary-path@~2.1.0:
 
 is-extglob@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
 is-fullwidth-code-point@^2.0.0:
@@ -779,7 +779,7 @@ is-fullwidth-code-point@^2.0.0:
 
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   version "4.0.1"
-  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
   integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
   dependencies:
     is-extglob "^2.1.1"

From c59bd710d22cc4736f853fc047bf4fa0a70b9eaa Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Tue, 15 Jun 2021 16:33:34 +0200
Subject: [PATCH 341/524] add ability to stop listening

---
 src/replay/index.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index 44bc117a3d..23dad8bc21 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -263,6 +263,11 @@ export class Replayer {
     return this;
   }
 
+  public off(event: string, handler: Handler) {
+    this.emitter.off(event, handler);
+    return this;
+  }
+
   public setConfig(config: Partial<playerConfig>) {
     Object.keys(config).forEach((key) => {
       // @ts-ignore
@@ -750,11 +755,11 @@ export class Replayer {
       ) {
         count++;
         var canvas = document.createElement('canvas');
-        var ctx = canvas.getContext('2d')
-        var imgd = ctx?.createImageData(canvas.width, canvas.height)
-        var d = imgd?.data                     
-        d = JSON.parse(event.data.args[0])
-        ctx?.putImageData(imgd!, 0, 0)
+        var ctx = canvas.getContext('2d');
+        var imgd = ctx?.createImageData(canvas.width, canvas.height);
+        var d = imgd?.data;
+        d = JSON.parse(event.data.args[0]);
+        ctx?.putImageData(imgd!, 0, 0);
       }
     }
     if (count !== resolved) {

From ce74062869f64e2ce9d88f82703f36e4c82b2da1 Mon Sep 17 00:00:00 2001
From: Yun Feng <yun.feng@smartx.com>
Date: Wed, 16 Jun 2021 11:40:10 +0800
Subject: [PATCH 342/524] update typings and fix lint errors

---
 src/replay/index.ts                    | 8 ++++----
 typings/record/observer.d.ts           | 3 ++-
 typings/record/shadow-dom-manager.d.ts | 5 ++++-
 typings/replay/index.d.ts              | 1 +
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index 23dad8bc21..61ed5b8e15 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -754,10 +754,10 @@ export class Replayer {
         !this.imageMap.has(event)
       ) {
         count++;
-        var canvas = document.createElement('canvas');
-        var ctx = canvas.getContext('2d');
-        var imgd = ctx?.createImageData(canvas.width, canvas.height);
-        var d = imgd?.data;
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        const imgd = ctx?.createImageData(canvas.width, canvas.height);
+        let d = imgd?.data;
         d = JSON.parse(event.data.args[0]);
         ctx?.putImageData(imgd!, 0, 0);
       }
diff --git a/typings/record/observer.d.ts b/typings/record/observer.d.ts
index a82a370cc4..b77aa4ee3a 100644
--- a/typings/record/observer.d.ts
+++ b/typings/record/observer.d.ts
@@ -1,9 +1,10 @@
 import { MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
-import { mutationCallBack, observerParam, listenerHandler, blockClass, maskTextClass, hooksParam, MaskTextFn, Mirror } from '../types';
+import { mutationCallBack, observerParam, listenerHandler, scrollCallback, blockClass, maskTextClass, hooksParam, SamplingStrategy, MaskTextFn, Mirror } from '../types';
 import MutationBuffer from './mutation';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
 export declare const mutationBuffers: MutationBuffer[];
 export declare function initMutationObserver(cb: mutationCallBack, doc: Document, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager, rootEl: Node): MutationObserver;
+export declare function initScrollObserver(cb: scrollCallback, doc: Document, mirror: Mirror, blockClass: blockClass, sampling: SamplingStrategy): listenerHandler;
 export declare const INPUT_TAGS: string[];
 export declare function initObservers(o: observerParam, hooks?: hooksParam): listenerHandler;
diff --git a/typings/record/shadow-dom-manager.d.ts b/typings/record/shadow-dom-manager.d.ts
index b0c4e2bc14..0d7fca02dd 100644
--- a/typings/record/shadow-dom-manager.d.ts
+++ b/typings/record/shadow-dom-manager.d.ts
@@ -1,4 +1,4 @@
-import { mutationCallBack, blockClass, maskTextClass, MaskTextFn, Mirror } from '../types';
+import { mutationCallBack, blockClass, maskTextClass, MaskTextFn, Mirror, scrollCallback, SamplingStrategy } from '../types';
 import { MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
 import { IframeManager } from './iframe-manager';
 declare type BypassOptions = {
@@ -10,15 +10,18 @@ declare type BypassOptions = {
     maskInputOptions: MaskInputOptions;
     maskTextFn: MaskTextFn | undefined;
     recordCanvas: boolean;
+    sampling: SamplingStrategy;
     slimDOMOptions: SlimDOMOptions;
     iframeManager: IframeManager;
 };
 export declare class ShadowDomManager {
     private mutationCb;
+    private scrollCb;
     private bypassOptions;
     private mirror;
     constructor(options: {
         mutationCb: mutationCallBack;
+        scrollCb: scrollCallback;
         bypassOptions: BypassOptions;
         mirror: Mirror;
     });
diff --git a/typings/replay/index.d.ts b/typings/replay/index.d.ts
index 9c849ae23d..0a2af1c84b 100644
--- a/typings/replay/index.d.ts
+++ b/typings/replay/index.d.ts
@@ -24,6 +24,7 @@ export declare class Replayer {
     private newDocumentQueue;
     constructor(events: Array<eventWithTime | string>, config?: Partial<playerConfig>);
     on(event: string, handler: Handler): this;
+    off(event: string, handler: Handler): this;
     setConfig(config: Partial<playerConfig>): void;
     getMetaData(): playerMetaData;
     getCurrentTime(): number;

From ba6666b7f32a2109b8d9b9b0430c3838ece28c4d Mon Sep 17 00:00:00 2001
From: yashkumar18 <yashkumar1820@gmail.com>
Date: Thu, 17 Jun 2021 12:27:29 +0530
Subject: [PATCH 343/524] Fix order of ternary expression for mouse move source
 type (#586)

Co-authored-by: Yash Kumar <yashkumar@Yashs-MacBook-Pro-2.local>
---
 src/record/observer.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/record/observer.ts b/src/record/observer.ts
index 920f251c9a..7ffffd4859 100644
--- a/src/record/observer.ts
+++ b/src/record/observer.ts
@@ -209,10 +209,10 @@ function initMoveObserver(
         timeOffset: Date.now() - timeBaseline,
       });
       wrappedCb(
-        evt instanceof MouseEvent
-          ? IncrementalSource.MouseMove
-          : evt instanceof DragEvent
+        evt instanceof DragEvent
           ? IncrementalSource.Drag
+          : evt instanceof MouseEvent
+          ? IncrementalSource.MouseMove
           : IncrementalSource.TouchMove,
       );
     },

From d4d437db375506d99e073fbb773bc9dd476f9b8f Mon Sep 17 00:00:00 2001
From: yashkumar18 <yashkumar1820@gmail.com>
Date: Thu, 17 Jun 2021 14:51:12 +0530
Subject: [PATCH 344/524] Handle Drag events in replayer (#587)

* Handle Drag events in replayer

* add touch move source as well

Co-authored-by: Yash Kumar <yashkumar@Yashs-MacBook-Pro-2.local>
---
 src/replay/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index 61ed5b8e15..cbcc8fd898 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -783,6 +783,8 @@ export class Replayer {
         this.applyMutation(d, isSync);
         break;
       }
+      case IncrementalSource.Drag:
+      case IncrementalSource.TouchMove:
       case IncrementalSource.MouseMove:
         if (isSync) {
           const lastPosition = d.positions[d.positions.length - 1];

From 2c905436604508247430f8f56603af38d24b29e7 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 17 Jun 2021 20:13:41 +0800
Subject: [PATCH 345/524] update rrweb-snapshot

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 4c3d86fe38..4084e8b754 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,6 @@
     "@xstate/fsm": "^1.4.0",
     "fflate": "^0.4.4",
     "mitt": "^1.1.3",
-    "rrweb-snapshot": "^1.1.2"
+    "rrweb-snapshot": "^1.1.4"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 44be4bd9a4..189ddf66be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2773,10 +2773,10 @@ rollup@^2.3.3:
   optionalDependencies:
     fsevents "~2.1.2"
 
-rrweb-snapshot@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.2.tgz#e9a5ce11f2dba8ff58e22f7f0b96954ef9133be2"
-  integrity sha512-J/BCClbk1fs9ilU9Bn8J/vUdumUllvNsmC1rVSz7rxqVzo+MthpI83gll1S3rBQVcxmQcLGmJWpkyO7M2rGyTw==
+rrweb-snapshot@^1.1.4:
+  version "1.1.4"
+  resolved "http://192.168.26.29:7001/rrweb-snapshot/download/rrweb-snapshot-1.1.4.tgz#a71d812004c340aaa5313d313a7bd343eb8c260d"
+  integrity sha1-px2BIATDQKqlMT0xOnvTQ+uMJg0=
 
 run-async@^2.2.0:
   version "2.4.1"

From 069397c2c751d0292bb70804599023dee85796fe Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 17 Jun 2021 20:25:26 +0800
Subject: [PATCH 346/524] fix registry

---
 yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index 189ddf66be..869c78ee5c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2775,7 +2775,7 @@ rollup@^2.3.3:
 
 rrweb-snapshot@^1.1.4:
   version "1.1.4"
-  resolved "http://192.168.26.29:7001/rrweb-snapshot/download/rrweb-snapshot-1.1.4.tgz#a71d812004c340aaa5313d313a7bd343eb8c260d"
+  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.4.tgz#a71d812004c340aaa5313d313a7bd343eb8c260d"
   integrity sha1-px2BIATDQKqlMT0xOnvTQ+uMJg0=
 
 run-async@^2.2.0:

From 8a9212fed451502485749485d9c38ebcee969708 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Thu, 17 Jun 2021 15:02:42 +0200
Subject: [PATCH 347/524] Tests: Iframe event order (#568)

* add failing test

* assert order of events

* defer attaching of iframe till FullSnapshot is done
Fixes: https://github.com/rrweb-io/rrweb/issues/567

* correct event order in iframe integration test snapshot

* trigger build

* trigger build

* Move settimeout responsibility to snapshot
https://github.com/rrweb-io/rrweb-snapshot/pull/78

* upgrade rrweb-snapshot to 1.1.4

* DRY record tests

* cleanup

* Upgrade puppeteer to 9.1.1
for (hopefully) more consistent behaviour between CI and development

* make input bigger to prevent triggering scroll events

* page.waitFor is deprecated
more info: https://github.com/puppeteer/puppeteer/issues/6214

* Set os and distro for Travis ci

Co-authored-by: yz-yu <yanzhen@smartx.com>
---
 .travis.yml                                 |   4 +
 package.json                                |   4 +-
 src/record/index.ts                         |   2 +-
 test/__snapshots__/integration.test.ts.snap | 434 ++++++++++----------
 test/__snapshots__/record.test.ts.snap      |   9 +-
 test/integration.test.ts                    |   6 +-
 test/record.test.ts                         |  82 +++-
 yarn.lock                                   | 365 +++++++++-------
 8 files changed, 524 insertions(+), 382 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 52d6bad905..ff245c5f32 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,5 +1,9 @@
 language: node_js
 
+os: linux
+
+dist: focal
+
 node_js:
   - 12
 
diff --git a/package.json b/package.json
index 4084e8b754..f1f6cf8e8d 100644
--- a/package.json
+++ b/package.json
@@ -41,14 +41,14 @@
     "@types/inquirer": "0.0.43",
     "@types/mocha": "^5.2.5",
     "@types/node": "^10.11.7",
-    "@types/puppeteer": "^1.11.1",
+    "@types/puppeteer": "^5.4.3",
     "chai": "^4.2.0",
     "cross-env": "^5.2.0",
     "inquirer": "^6.2.1",
     "jest-snapshot": "^23.6.0",
     "mocha": "^5.2.0",
     "prettier": "2.2.1",
-    "puppeteer": "^1.11.0",
+    "puppeteer": "^9.1.1",
     "rollup": "^2.3.3",
     "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-node-resolve": "^3.4.0",
diff --git a/src/record/index.ts b/src/record/index.ts
index 1331d02a16..4738a14496 100644
--- a/src/record/index.ts
+++ b/src/record/index.ts
@@ -167,7 +167,7 @@ function record<T = eventWithTime>(
       lastFullSnapshotEvent = e;
       incrementalSnapshotCount = 0;
     } else if (e.type === EventType.IncrementalSnapshot) {
-      // attch iframe should be considered as full snapshot
+      // attach iframe should be considered as full snapshot
       if (
         e.data.source === IncrementalSource.Mutation &&
         e.data.isAttachIframe
diff --git a/test/__snapshots__/integration.test.ts.snap b/test/__snapshots__/integration.test.ts.snap
index 7326b4eb3b..e2f17250a2 100644
--- a/test/__snapshots__/integration.test.ts.snap
+++ b/test/__snapshots__/integration.test.ts.snap
@@ -1745,53 +1745,6 @@ exports[`iframe 1`] = `
       \\"height\\": 1080
     }
   },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"adds\\": [
-        {
-          \\"parentId\\": 19,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 0,
-            \\"childNodes\\": [
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"html\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"head\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [],
-                    \\"rootId\\": 20,
-                    \\"id\\": 22
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"body\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [],
-                    \\"rootId\\": 20,
-                    \\"id\\": 23
-                  }
-                ],
-                \\"rootId\\": 20,
-                \\"id\\": 21
-              }
-            ],
-            \\"id\\": 20
-          }
-        }
-      ],
-      \\"removes\\": [],
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"isAttachIframe\\": true
-    }
-  },
   {
     \\"type\\": 2,
     \\"data\\": {
@@ -1918,7 +1871,7 @@ exports[`iframe 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 24
+                    \\"id\\": 20
                   },
                   {
                     \\"type\\": 2,
@@ -1928,15 +1881,15 @@ exports[`iframe 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 26
+                        \\"id\\": 22
                       }
                     ],
-                    \\"id\\": 25
+                    \\"id\\": 21
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n  \\",
-                    \\"id\\": 27
+                    \\"id\\": 23
                   },
                   {
                     \\"type\\": 2,
@@ -1946,15 +1899,15 @@ exports[`iframe 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 29
+                        \\"id\\": 25
                       }
                     ],
-                    \\"id\\": 28
+                    \\"id\\": 24
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n\\\\n\\",
-                    \\"id\\": 30
+                    \\"id\\": 26
                   }
                 ],
                 \\"id\\": 17
@@ -1975,33 +1928,9 @@ exports[`iframe 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"removes\\": [],
       \\"adds\\": [
         {
-          \\"parentId\\": 17,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"iframe\\",
-            \\"attributes\\": {
-              \\"id\\": \\"two\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 31
-          }
-        }
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"adds\\": [
-        {
-          \\"parentId\\": 47,
+          \\"parentId\\": 19,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 0,
@@ -2016,23 +1945,23 @@ exports[`iframe 1`] = `
                     \\"tagName\\": \\"head\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [],
-                    \\"rootId\\": 48,
-                    \\"id\\": 50
+                    \\"rootId\\": 27,
+                    \\"id\\": 29
                   },
                   {
                     \\"type\\": 2,
                     \\"tagName\\": \\"body\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [],
-                    \\"rootId\\": 48,
-                    \\"id\\": 51
+                    \\"rootId\\": 27,
+                    \\"id\\": 30
                   }
                 ],
-                \\"rootId\\": 48,
-                \\"id\\": 49
+                \\"rootId\\": 27,
+                \\"id\\": 28
               }
             ],
-            \\"id\\": 48
+            \\"id\\": 27
           }
         }
       ],
@@ -2046,9 +1975,33 @@ exports[`iframe 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
       \\"adds\\": [
         {
-          \\"parentId\\": 53,
+          \\"parentId\\": 17,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"iframe\\",
+            \\"attributes\\": {
+              \\"id\\": \\"two\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 31
+          }
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"adds\\": [
+        {
+          \\"parentId\\": 31,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 0,
@@ -2058,8 +2011,8 @@ exports[`iframe 1`] = `
                 \\"name\\": \\"html\\",
                 \\"publicId\\": \\"\\",
                 \\"systemId\\": \\"\\",
-                \\"rootId\\": 54,
-                \\"id\\": 55
+                \\"rootId\\": 32,
+                \\"id\\": 33
               },
               {
                 \\"type\\": 2,
@@ -2076,8 +2029,8 @@ exports[`iframe 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"rootId\\": 54,
-                        \\"id\\": 58
+                        \\"rootId\\": 32,
+                        \\"id\\": 36
                       },
                       {
                         \\"type\\": 2,
@@ -2086,14 +2039,14 @@ exports[`iframe 1`] = `
                           \\"charset\\": \\"UTF-8\\"
                         },
                         \\"childNodes\\": [],
-                        \\"rootId\\": 54,
-                        \\"id\\": 59
+                        \\"rootId\\": 32,
+                        \\"id\\": 37
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"rootId\\": 54,
-                        \\"id\\": 60
+                        \\"rootId\\": 32,
+                        \\"id\\": 38
                       },
                       {
                         \\"type\\": 2,
@@ -2103,14 +2056,14 @@ exports[`iframe 1`] = `
                           \\"content\\": \\"width=device-width, initial-scale=1.0\\"
                         },
                         \\"childNodes\\": [],
-                        \\"rootId\\": 54,
-                        \\"id\\": 61
+                        \\"rootId\\": 32,
+                        \\"id\\": 39
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"rootId\\": 54,
-                        \\"id\\": 62
+                        \\"rootId\\": 32,
+                        \\"id\\": 40
                       },
                       {
                         \\"type\\": 2,
@@ -2119,29 +2072,29 @@ exports[`iframe 1`] = `
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"Frame 2\\",
-                            \\"rootId\\": 54,
-                            \\"id\\": 64
+                            \\"textContent\\": \\"Frame 1\\",
+                            \\"rootId\\": 32,
+                            \\"id\\": 42
                           }
                         ],
-                        \\"rootId\\": 54,
-                        \\"id\\": 63
+                        \\"rootId\\": 32,
+                        \\"id\\": 41
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n  \\",
-                        \\"rootId\\": 54,
-                        \\"id\\": 65
+                        \\"rootId\\": 32,
+                        \\"id\\": 43
                       }
                     ],
-                    \\"rootId\\": 54,
-                    \\"id\\": 57
+                    \\"rootId\\": 32,
+                    \\"id\\": 35
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"rootId\\": 54,
-                    \\"id\\": 66
+                    \\"rootId\\": 32,
+                    \\"id\\": 44
                   },
                   {
                     \\"type\\": 2,
@@ -2150,41 +2103,54 @@ exports[`iframe 1`] = `
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    frame 2\\\\n  \\\\n  \\",
-                        \\"rootId\\": 54,
-                        \\"id\\": 68
+                        \\"textContent\\": \\"\\\\n    frame 1\\\\n    \\",
+                        \\"rootId\\": 32,
+                        \\"id\\": 46
                       },
                       {
                         \\"type\\": 2,
-                        \\"tagName\\": \\"script\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                            \\"rootId\\": 54,
-                            \\"id\\": 70
-                          }
-                        ],
-                        \\"rootId\\": 54,
-                        \\"id\\": 69
+                        \\"tagName\\": \\"iframe\\",
+                        \\"attributes\\": {
+                          \\"id\\": \\"three\\",
+                          \\"frameborder\\": \\"0\\"
+                        },
+                        \\"childNodes\\": [],
+                        \\"rootId\\": 32,
+                        \\"id\\": 47
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n\\\\n\\",
-                        \\"rootId\\": 54,
-                        \\"id\\": 71
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"rootId\\": 32,
+                        \\"id\\": 48
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"iframe\\",
+                        \\"attributes\\": {
+                          \\"id\\": \\"four\\",
+                          \\"frameborder\\": \\"0\\"
+                        },
+                        \\"childNodes\\": [],
+                        \\"rootId\\": 32,
+                        \\"id\\": 49
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n  \\\\n\\\\n\\",
+                        \\"rootId\\": 32,
+                        \\"id\\": 50
                       }
                     ],
-                    \\"rootId\\": 54,
-                    \\"id\\": 67
+                    \\"rootId\\": 32,
+                    \\"id\\": 45
                   }
                 ],
-                \\"rootId\\": 54,
-                \\"id\\": 56
+                \\"rootId\\": 32,
+                \\"id\\": 34
               }
             ],
-            \\"id\\": 54
+            \\"id\\": 32
           }
         }
       ],
@@ -2200,7 +2166,54 @@ exports[`iframe 1`] = `
       \\"source\\": 0,
       \\"adds\\": [
         {
-          \\"parentId\\": 31,
+          \\"parentId\\": 47,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 0,
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"html\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"head\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 51,
+                    \\"id\\": 53
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"body\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 51,
+                    \\"id\\": 54
+                  }
+                ],
+                \\"rootId\\": 51,
+                \\"id\\": 52
+              }
+            ],
+            \\"id\\": 51
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"isAttachIframe\\": true
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"adds\\": [
+        {
+          \\"parentId\\": 49,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 0,
@@ -2210,8 +2223,8 @@ exports[`iframe 1`] = `
                 \\"name\\": \\"html\\",
                 \\"publicId\\": \\"\\",
                 \\"systemId\\": \\"\\",
-                \\"rootId\\": 32,
-                \\"id\\": 33
+                \\"rootId\\": 55,
+                \\"id\\": 56
               },
               {
                 \\"type\\": 2,
@@ -2228,8 +2241,8 @@ exports[`iframe 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"rootId\\": 32,
-                        \\"id\\": 36
+                        \\"rootId\\": 55,
+                        \\"id\\": 59
                       },
                       {
                         \\"type\\": 2,
@@ -2238,14 +2251,14 @@ exports[`iframe 1`] = `
                           \\"charset\\": \\"UTF-8\\"
                         },
                         \\"childNodes\\": [],
-                        \\"rootId\\": 32,
-                        \\"id\\": 37
+                        \\"rootId\\": 55,
+                        \\"id\\": 60
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"rootId\\": 32,
-                        \\"id\\": 38
+                        \\"rootId\\": 55,
+                        \\"id\\": 61
                       },
                       {
                         \\"type\\": 2,
@@ -2255,14 +2268,14 @@ exports[`iframe 1`] = `
                           \\"content\\": \\"width=device-width, initial-scale=1.0\\"
                         },
                         \\"childNodes\\": [],
-                        \\"rootId\\": 32,
-                        \\"id\\": 39
+                        \\"rootId\\": 55,
+                        \\"id\\": 62
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"rootId\\": 32,
-                        \\"id\\": 40
+                        \\"rootId\\": 55,
+                        \\"id\\": 63
                       },
                       {
                         \\"type\\": 2,
@@ -2271,29 +2284,29 @@ exports[`iframe 1`] = `
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"Frame 1\\",
-                            \\"rootId\\": 32,
-                            \\"id\\": 42
+                            \\"textContent\\": \\"Frame 2\\",
+                            \\"rootId\\": 55,
+                            \\"id\\": 65
                           }
                         ],
-                        \\"rootId\\": 32,
-                        \\"id\\": 41
+                        \\"rootId\\": 55,
+                        \\"id\\": 64
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n  \\",
-                        \\"rootId\\": 32,
-                        \\"id\\": 43
+                        \\"rootId\\": 55,
+                        \\"id\\": 66
                       }
                     ],
-                    \\"rootId\\": 32,
-                    \\"id\\": 35
+                    \\"rootId\\": 55,
+                    \\"id\\": 58
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"rootId\\": 32,
-                    \\"id\\": 44
+                    \\"rootId\\": 55,
+                    \\"id\\": 67
                   },
                   {
                     \\"type\\": 2,
@@ -2302,54 +2315,41 @@ exports[`iframe 1`] = `
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    frame 1\\\\n    \\",
-                        \\"rootId\\": 32,
-                        \\"id\\": 46
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"iframe\\",
-                        \\"attributes\\": {
-                          \\"id\\": \\"three\\",
-                          \\"frameborder\\": \\"0\\"
-                        },
-                        \\"childNodes\\": [],
-                        \\"rootId\\": 32,
-                        \\"id\\": 47
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"rootId\\": 32,
-                        \\"id\\": 52
+                        \\"textContent\\": \\"\\\\n    frame 2\\\\n  \\\\n  \\",
+                        \\"rootId\\": 55,
+                        \\"id\\": 69
                       },
                       {
                         \\"type\\": 2,
-                        \\"tagName\\": \\"iframe\\",
-                        \\"attributes\\": {
-                          \\"id\\": \\"four\\",
-                          \\"frameborder\\": \\"0\\"
-                        },
-                        \\"childNodes\\": [],
-                        \\"rootId\\": 32,
-                        \\"id\\": 53
+                        \\"tagName\\": \\"script\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                            \\"rootId\\": 55,
+                            \\"id\\": 71
+                          }
+                        ],
+                        \\"rootId\\": 55,
+                        \\"id\\": 70
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n  \\\\n\\\\n\\",
-                        \\"rootId\\": 32,
+                        \\"textContent\\": \\"\\\\n\\\\n\\",
+                        \\"rootId\\": 55,
                         \\"id\\": 72
                       }
                     ],
-                    \\"rootId\\": 32,
-                    \\"id\\": 45
+                    \\"rootId\\": 55,
+                    \\"id\\": 68
                   }
                 ],
-                \\"rootId\\": 32,
-                \\"id\\": 34
+                \\"rootId\\": 55,
+                \\"id\\": 57
               }
             ],
-            \\"id\\": 32
+            \\"id\\": 55
           }
         }
       ],
@@ -2359,6 +2359,31 @@ exports[`iframe 1`] = `
       \\"isAttachIframe\\": true
     }
   },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 68,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"iframe\\",
+            \\"attributes\\": {
+              \\"id\\": \\"five\\"
+            },
+            \\"childNodes\\": [],
+            \\"rootId\\": 55,
+            \\"id\\": 73
+          }
+        }
+      ]
+    }
+  },
   {
     \\"type\\": 3,
     \\"data\\": {
@@ -2405,31 +2430,6 @@ exports[`iframe 1`] = `
       \\"attributes\\": [],
       \\"isAttachIframe\\": true
     }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"removes\\": [],
-      \\"adds\\": [
-        {
-          \\"parentId\\": 67,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"iframe\\",
-            \\"attributes\\": {
-              \\"id\\": \\"five\\"
-            },
-            \\"childNodes\\": [],
-            \\"rootId\\": 54,
-            \\"id\\": 73
-          }
-        }
-      ]
-    }
   }
 ]"
 `;
diff --git a/test/__snapshots__/record.test.ts.snap b/test/__snapshots__/record.test.ts.snap
index 70c7ec05e2..f2278deda4 100644
--- a/test/__snapshots__/record.test.ts.snap
+++ b/test/__snapshots__/record.test.ts.snap
@@ -42,7 +42,8 @@ exports[`async-checkout 1`] = `
                     \\"type\\": 2,
                     \\"tagName\\": \\"input\\",
                     \\"attributes\\": {
-                      \\"type\\": \\"text\\"
+                      \\"type\\": \\"text\\",
+                      \\"size\\": \\"40\\"
                     },
                     \\"childNodes\\": [],
                     \\"id\\": 6
@@ -283,7 +284,8 @@ exports[`custom-event 1`] = `
                     \\"type\\": 2,
                     \\"tagName\\": \\"input\\",
                     \\"attributes\\": {
-                      \\"type\\": \\"text\\"
+                      \\"type\\": \\"text\\",
+                      \\"size\\": \\"40\\"
                     },
                     \\"childNodes\\": [],
                     \\"id\\": 6
@@ -369,7 +371,8 @@ exports[`stylesheet-rules 1`] = `
                     \\"type\\": 2,
                     \\"tagName\\": \\"input\\",
                     \\"attributes\\": {
-                      \\"type\\": \\"text\\"
+                      \\"type\\": \\"text\\",
+                      \\"size\\": \\"40\\"
                     },
                     \\"childNodes\\": [],
                     \\"id\\": 6
diff --git a/test/integration.test.ts b/test/integration.test.ts
index e14d40feaf..6d5234e7b3 100644
--- a/test/integration.test.ts
+++ b/test/integration.test.ts
@@ -324,7 +324,7 @@ describe('record integration tests', function (this: ISuite) {
         recordCanvas: true,
       }),
     );
-    await page.waitFor(50);
+    await page.waitForTimeout(50);
     const snapshots = await page.evaluate('window.snapshots');
     for (const event of snapshots) {
       if (event.type === EventType.FullSnapshot) {
@@ -417,7 +417,7 @@ describe('record integration tests', function (this: ISuite) {
     await page.goto(`http://localhost:3030/html`);
     await page.setContent(getHtml.call(this, 'main.html'));
 
-    await page.waitFor(500);
+    await page.waitForTimeout(500);
     const snapshots = await page.evaluate('window.snapshots');
     assertSnapshot(snapshots, __filename, 'iframe');
   });
@@ -453,7 +453,7 @@ describe('record integration tests', function (this: ISuite) {
             '123';
         });
     });
-    await page.waitFor(50);
+    await page.waitForTimeout(50);
 
     const snapshots = await page.evaluate('window.snapshots');
     assertSnapshot(snapshots, __filename, 'shadow-dom');
diff --git a/test/record.test.ts b/test/record.test.ts
index 025675a0df..fd78052e4c 100644
--- a/test/record.test.ts
+++ b/test/record.test.ts
@@ -32,9 +32,7 @@ interface IWindow extends Window {
   emit: (e: eventWithTime) => undefined;
 }
 
-describe('record', function (this: ISuite) {
-  this.timeout(10_000);
-
+const setup = async function (this: ISuite, content: string) {
   before(async () => {
     this.browser = await launchPuppeteer();
 
@@ -45,13 +43,7 @@ describe('record', function (this: ISuite) {
   beforeEach(async () => {
     const page: puppeteer.Page = await this.browser.newPage();
     await page.goto('about:blank');
-    await page.setContent(`
-      <html>
-        <body>
-          <input type="text" />
-        </body>
-      </html>
-    `);
+    await page.setContent(content);
     await page.evaluate(this.code);
     this.page = page;
     this.events = [];
@@ -72,6 +64,21 @@ describe('record', function (this: ISuite) {
   after(async () => {
     await this.browser.close();
   });
+};
+
+describe('record', function (this: ISuite) {
+  this.timeout(10_000);
+
+  setup.call(
+    this,
+    `
+      <html>
+        <body>
+          <input type="text" size="40" />
+        </body>
+      </html>
+    `,
+  );
 
   it('will only have one full snapshot without checkout config', async () => {
     await this.page.evaluate(() => {
@@ -84,7 +91,7 @@ describe('record', function (this: ISuite) {
     while (count--) {
       await this.page.type('input', 'a');
     }
-    await this.page.waitFor(10);
+    await this.page.waitForTimeout(10);
     expect(this.events.length).to.equal(33);
     expect(
       this.events.filter(
@@ -110,7 +117,7 @@ describe('record', function (this: ISuite) {
     while (count--) {
       await this.page.type('input', 'a');
     }
-    await this.page.waitFor(10);
+    await this.page.waitForTimeout(10);
     expect(this.events.length).to.equal(39);
     expect(
       this.events.filter(
@@ -140,11 +147,11 @@ describe('record', function (this: ISuite) {
     while (count--) {
       await this.page.type('input', 'a');
     }
-    await this.page.waitFor(300);
+    await this.page.waitForTimeout(300);
     expect(this.events.length).to.equal(33); // before first automatic snapshot
-    await this.page.waitFor(200); // could be 33 or 35 events by now depending on speed of test env
+    await this.page.waitForTimeout(200); // could be 33 or 35 events by now depending on speed of test env
     await this.page.type('input', 'a');
-    await this.page.waitFor(10);
+    await this.page.waitForTimeout(10);
     expect(this.events.length).to.equal(36); // additionally includes the 2 checkout events
     expect(
       this.events.filter(
@@ -182,7 +189,7 @@ describe('record', function (this: ISuite) {
         document.body.appendChild(span);
       }, 10);
     });
-    await this.page.waitFor(100);
+    await this.page.waitForTimeout(100);
     assertSnapshot(this.events, __filename, 'async-checkout');
   });
 
@@ -197,7 +204,7 @@ describe('record', function (this: ISuite) {
         a: 'b',
       });
     });
-    await this.page.waitFor(50);
+    await this.page.waitForTimeout(50);
     assertSnapshot(this.events, __filename, 'custom-event');
   });
 
@@ -226,7 +233,7 @@ describe('record', function (this: ISuite) {
         styleSheet.insertRule('body { color: #ccc; }');
       }, 10);
     });
-    await this.page.waitFor(50);
+    await this.page.waitForTimeout(50);
     const styleSheetRuleEvents = this.events.filter(
       (e) =>
         e.type === EventType.IncrementalSnapshot &&
@@ -244,3 +251,42 @@ describe('record', function (this: ISuite) {
     assertSnapshot(this.events, __filename, 'stylesheet-rules');
   });
 });
+
+describe('record iframes', function (this: ISuite) {
+  this.timeout(10_000);
+
+  setup.call(
+    this,
+    `
+      <html>
+        <body>
+          <iframe srcdoc="<button>Mysterious Button</button>" />
+        </body>
+      </html>
+    `,
+  );
+
+  it('captures iframe content in correct order', async () => {
+    await this.page.evaluate(() => {
+      const { record } = ((window as unknown) as IWindow).rrweb;
+      record({
+        emit: ((window as unknown) as IWindow).emit,
+      });
+    });
+    await this.page.waitForTimeout(10);
+    // console.log(JSON.stringify(this.events));
+
+    expect(this.events.length).to.equal(3);
+    const eventTypes = this.events
+      .filter(
+        (e) =>
+          e.type === EventType.IncrementalSnapshot ||
+          e.type === EventType.FullSnapshot,
+      )
+      .map((e) => e.type);
+    expect(eventTypes).to.have.ordered.members([
+      EventType.FullSnapshot,
+      EventType.IncrementalSnapshot,
+    ]);
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index 869c78ee5c..0d7e304372 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -56,10 +56,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.42.tgz#90dd71b26fe4f4e2929df6b07e72ef2e9648a173"
   integrity sha512-HElxYF7C/MSkuvlaHB2c+82zhXiuO49Cq056Dol8AQuTph7oJtduo2n6J8rFa+YhJyNgQ/Lm20ZaxqD0vxU0+Q==
 
-"@types/puppeteer@^1.11.1":
-  version "1.20.7"
-  resolved "https://registry.yarnpkg.com/@types/puppeteer/-/puppeteer-1.20.7.tgz#31fb4274f0c6ec2e90ed8473616243f15a808017"
-  integrity sha512-LCfP/Zf/y4I/hG8ARR8htPYa1wpLpUkysJo9TffmQssVz8c1b9uDNU4benDHSldiz7HVAMek1DCWz7KbqEUg3w==
+"@types/puppeteer@^5.4.3":
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/@types/puppeteer/-/puppeteer-5.4.3.tgz#cdca84aa7751d77448d8a477dbfa0af1f11485f2"
+  integrity sha512-3nE8YgR9DIsgttLW+eJf6mnXxq8Ge+27m5SU3knWmrlfl6+KOG0Bf9f7Ua7K+C4BnaTMAh3/UpySqdAYvrsvjg==
   dependencies:
     "@types/node" "*"
 
@@ -176,17 +176,24 @@
   dependencies:
     "@types/node" "*"
 
+"@types/yauzl@^2.9.1":
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.1.tgz#d10f69f9f522eef3cf98e30afb684a1e1ec923af"
+  integrity sha512-A1b8SU4D10uoPjwb0lnHmmu8wZhR9d+9o2PKBQT2jU5YPTKsxac6M2qGAdY7VcL+dHHhARVUDmeg0rOrcd9EjA==
+  dependencies:
+    "@types/node" "*"
+
 "@xstate/fsm@^1.4.0":
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/@xstate/fsm/-/fsm-1.5.1.tgz#b1ebedc77b11e4956fda0a6429cef986cd17979e"
   integrity sha512-t8blLI0e90jCE71yUQHLH5uEljD1v0aC8PKkHUtNWEnXt81EOj7xBjnlwmaHn/8cmE2aSygiBElUpkRZUV9hXA==
 
-agent-base@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
-  integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==
+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
   dependencies:
-    es6-promisify "^5.0.0"
+    debug "4"
 
 alphanum-sort@^1.0.0:
   version "1.0.2"
@@ -273,11 +280,6 @@ assertion-error@^1.1.0:
   resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
   integrity sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==
 
-async-limiter@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
-  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
-
 babel-code-frame@^6.20.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -310,11 +312,25 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+base64-js@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
+bl@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
+  integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
+  dependencies:
+    buffer "^5.5.0"
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+
 boolbase@^1.0.0, boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
@@ -383,6 +399,14 @@ buffer-from@^1.0.0, buffer-from@^1.1.0:
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
   integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
 
+buffer@^5.2.1, buffer@^5.5.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
+  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.1.13"
+
 builtin-modules@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-2.0.0.tgz#60b7ef5ae6546bd7deefa74b08b62a43a232648e"
@@ -482,6 +506,11 @@ check-error@^1.0.2:
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
   integrity sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=
 
+chownr@^1.1.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
+  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
+
 ci-info@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
@@ -578,16 +607,6 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
-concat-stream@^1.6.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
-  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
-  dependencies:
-    buffer-from "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^2.2.2"
-    typedarray "^0.0.6"
-
 concat-with-sourcemaps@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz#d4ea93f05ae25790951b99e7b3b09e3908a4082e"
@@ -612,11 +631,6 @@ core-js@^2.4.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
-core-util-is@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
-  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
-
 cosmiconfig@^5.0.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
@@ -822,24 +836,10 @@ debug@3.1.0:
   dependencies:
     ms "2.0.0"
 
-debug@^2.6.9:
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
-  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
-  dependencies:
-    ms "2.0.0"
-
-debug@^3.1.0:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
-  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
-  dependencies:
-    ms "^2.1.1"
-
-debug@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.2.0.tgz#7f150f93920e94c58f5574c2fd01a3110effe7f1"
-  integrity sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==
+debug@4, debug@^4.1.0, debug@^4.1.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
+  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
   dependencies:
     ms "2.1.2"
 
@@ -862,6 +862,11 @@ define-properties@^1.1.3:
   dependencies:
     object-keys "^1.0.12"
 
+devtools-protocol@0.0.869402:
+  version "0.0.869402"
+  resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.869402.tgz#03ade701761742e43ae4de5dc188bcd80f156d8d"
+  integrity sha512-VvlVYY+VDJe639yHs5PHISzdWTLL3Aw8rO4cvUtwvoxFd6FHbE4OpHHcde52M6096uYYazAmd4l0o5VuFRO2WA==
+
 diff@3.5.0, diff@^3.0.1, diff@^3.1.0, diff@^3.2.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
@@ -922,6 +927,13 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
+end-of-stream@^1.1.0, end-of-stream@^1.4.1:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.0"
+
 entities@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
@@ -978,18 +990,6 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-es6-promise@^4.0.3:
-  version "4.2.8"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
-  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
-
-es6-promisify@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
-  integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
-  dependencies:
-    es6-promise "^4.0.3"
-
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -1068,15 +1068,16 @@ extglob@^0.3.1:
   dependencies:
     is-extglob "^1.0.0"
 
-extract-zip@^1.6.6:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.7.0.tgz#556cc3ae9df7f452c493a0cfb51cc30277940927"
-  integrity sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==
+extract-zip@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-2.0.1.tgz#663dca56fe46df890d5f131ef4a06d22bb8ba13a"
+  integrity sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==
   dependencies:
-    concat-stream "^1.6.2"
-    debug "^2.6.9"
-    mkdirp "^0.5.4"
+    debug "^4.1.1"
+    get-stream "^5.1.0"
     yauzl "^2.10.0"
+  optionalDependencies:
+    "@types/yauzl" "^2.9.1"
 
 fastparse@^1.1.2:
   version "1.1.2"
@@ -1118,6 +1119,14 @@ fill-range@^2.1.0:
     repeat-element "^1.1.2"
     repeat-string "^1.5.2"
 
+find-up@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
 findup-sync@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-0.3.0.tgz#37930aa5d816b777c03445e1966cc6790a4c0b16"
@@ -1137,6 +1146,11 @@ for-own@^0.1.4:
   dependencies:
     for-in "^1.0.1"
 
+fs-constants@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
+  integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -1169,6 +1183,13 @@ get-stream@^3.0.0:
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
   integrity sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=
 
+get-stream@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
+  integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
+  dependencies:
+    pump "^3.0.0"
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -1312,13 +1333,13 @@ html-comment-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
   integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
 
-https-proxy-agent@^2.2.1:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz#4ee7a737abd92678a293d9b34a1af4d0d08c787b"
-  integrity sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==
+https-proxy-agent@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
+  integrity sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==
   dependencies:
-    agent-base "^4.3.0"
-    debug "^3.1.0"
+    agent-base "6"
+    debug "4"
 
 iconv-lite@^0.4.24:
   version "0.4.24"
@@ -1332,6 +1353,11 @@ icss-replace-symbols@1.1.0, icss-replace-symbols@^1.1.0:
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
   integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
 
+ieee754@^1.1.13:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -1391,7 +1417,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.3, inherits@~2.0.3:
+inherits@2, inherits@^2.0.3, inherits@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -1618,7 +1644,7 @@ is-symbol@^1.0.2:
   dependencies:
     has-symbols "^1.0.1"
 
-isarray@1.0.0, isarray@~1.0.0:
+isarray@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
@@ -1761,6 +1787,13 @@ loader-utils@^1.1.0:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
@@ -1852,11 +1885,6 @@ micromatch@^2.3.11:
     parse-glob "^3.0.4"
     regex-cache "^0.4.2"
 
-mime@^2.0.3:
-  version "2.4.6"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.6.tgz#e5b407c90db442f2beb5b162373d07b69affa4d1"
-  integrity sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==
-
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
@@ -1889,6 +1917,11 @@ mitt@^1.1.3:
   resolved "https://registry.yarnpkg.com/mitt/-/mitt-1.2.0.tgz#cb24e6569c806e31bd4e3995787fe38a04fdf90d"
   integrity sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw==
 
+mkdirp-classic@^0.5.2:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
+  integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
+
 mkdirp@0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -1896,7 +1929,7 @@ mkdirp@0.5.1:
   dependencies:
     minimist "0.0.8"
 
-mkdirp@^0.5.1, mkdirp@^0.5.4, mkdirp@~0.5.1:
+mkdirp@^0.5.1, mkdirp@~0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
   integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
@@ -1925,7 +1958,7 @@ ms@2.0.0:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
   integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
 
-ms@2.1.2, ms@^2.1.1:
+ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
@@ -1945,6 +1978,11 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
+node-fetch@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+
 node-releases@^1.1.71:
   version "1.1.72"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe"
@@ -2022,7 +2060,7 @@ object.values@^1.1.0:
     function-bind "^1.1.1"
     has "^1.0.3"
 
-once@^1.3.0:
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
@@ -2054,6 +2092,20 @@ p-finally@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
   integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
 
+p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
 p-queue@^6.3.0:
   version "6.6.2"
   resolved "https://registry.yarnpkg.com/p-queue/-/p-queue-6.6.2.tgz#2068a9dcf8e67dd0ec3e7a2bcb76810faa85e426"
@@ -2069,6 +2121,11 @@ p-timeout@^3.2.0:
   dependencies:
     p-finally "^1.0.0"
 
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
+
 package-json@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/package-json/-/package-json-4.0.1.tgz#8869a0401253661c4c4ca3da6c2121ed555f5eed"
@@ -2097,6 +2154,11 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
 path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
@@ -2137,6 +2199,13 @@ pify@^5.0.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-5.0.0.tgz#1f5eca3f5e87ebec28cc6d54a0e4aaf00acc127f"
   integrity sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==
 
+pkg-dir@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
 postcss-calc@^7.0.1:
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.5.tgz#f8a6e99f12e619c2ebc23cf6c486fdc15860933e"
@@ -2513,11 +2582,6 @@ pretty-format@^23.6.0:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
-process-nextick-args@~2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
-  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
-
 progress@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
@@ -2528,7 +2592,7 @@ promise.series@^0.2.0:
   resolved "https://registry.yarnpkg.com/promise.series/-/promise.series-0.2.0.tgz#2cc7ebe959fc3a6619c04ab4dbdc9e452d864bbd"
   integrity sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=
 
-proxy-from-env@^1.0.0:
+proxy-from-env@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
@@ -2538,19 +2602,31 @@ pseudomap@^1.0.2:
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
   integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
 
-puppeteer@^1.11.0:
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-1.20.0.tgz#e3d267786f74e1d87cf2d15acc59177f471bbe38"
-  integrity sha512-bt48RDBy2eIwZPrkgbcwHtb51mj2nKvHOPMaSH2IsWiv7lOG9k9zhaRzpDZafrk05ajMc3cu+lSQYYOfH2DkVQ==
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+puppeteer@^9.1.1:
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-9.1.1.tgz#f74b7facf86887efd6c6b9fabb7baae6fdce012c"
+  integrity sha512-W+nOulP2tYd/ZG99WuZC/I5ljjQQ7EUw/jQGcIb9eu8mDlZxNY2SgcJXTLG9h5gRvqA3uJOe4hZXYsd3EqioMw==
   dependencies:
     debug "^4.1.0"
-    extract-zip "^1.6.6"
-    https-proxy-agent "^2.2.1"
-    mime "^2.0.3"
+    devtools-protocol "0.0.869402"
+    extract-zip "^2.0.0"
+    https-proxy-agent "^5.0.0"
+    node-fetch "^2.6.1"
+    pkg-dir "^4.2.0"
     progress "^2.0.1"
-    proxy-from-env "^1.0.0"
-    rimraf "^2.6.1"
-    ws "^6.1.0"
+    proxy-from-env "^1.1.0"
+    rimraf "^3.0.2"
+    tar-fs "^2.0.0"
+    unbzip2-stream "^1.3.3"
+    ws "^7.2.3"
 
 q@^1.1.2:
   version "1.5.1"
@@ -2583,18 +2659,14 @@ rc@^1.0.1, rc@^1.1.6:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-readable-stream@^2.2.2:
-  version "2.3.7"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
-  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
+readable-stream@^3.1.1, readable-stream@^3.4.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
+  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
   dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
 
 realpath-native@^1.0.0:
   version "1.1.0"
@@ -2686,10 +2758,10 @@ rgba-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
-rimraf@^2.6.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
-  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
   dependencies:
     glob "^7.1.3"
 
@@ -2776,7 +2848,7 @@ rollup@^2.3.3:
 rrweb-snapshot@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.4.tgz#a71d812004c340aaa5313d313a7bd343eb8c260d"
-  integrity sha1-px2BIATDQKqlMT0xOnvTQ+uMJg0=
+  integrity sha512-0iVRbsWSVOVEjgE8MA0+zYwlLMSwkVsUA7KhmvVaBK+viYcbx79SKRB8PkeFz1/1Jnn9fnkzPHlh42F+xFuwbQ==
 
 run-async@^2.2.0:
   version "2.4.1"
@@ -2790,16 +2862,11 @@ rxjs@^6.4.0:
   dependencies:
     tslib "^1.9.0"
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.0:
+safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-safe-buffer@~5.1.0, safe-buffer@~5.1.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
-  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
-
 safe-identifier@^0.4.1:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/safe-identifier/-/safe-identifier-0.4.2.tgz#cf6bfca31c2897c588092d1750d30ef501d59fcb"
@@ -2930,12 +2997,12 @@ string.prototype.trimstart@^1.0.1:
     define-properties "^1.1.3"
     es-abstract "^1.18.0-next.1"
 
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
   dependencies:
-    safe-buffer "~5.1.0"
+    safe-buffer "~5.2.0"
 
 strip-ansi@^3.0.0:
   version "3.0.1"
@@ -3041,6 +3108,27 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+tar-fs@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
+  integrity sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==
+  dependencies:
+    chownr "^1.1.1"
+    mkdirp-classic "^0.5.2"
+    pump "^3.0.0"
+    tar-stream "^2.1.4"
+
+tar-stream@^2.1.4:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.2.0.tgz#acad84c284136b060dc3faa64474aa9aebd77287"
+  integrity sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==
+  dependencies:
+    bl "^4.0.3"
+    end-of-stream "^1.4.1"
+    fs-constants "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^3.1.1"
+
 term-size@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
@@ -3057,7 +3145,7 @@ terser@^4.6.2:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
-through@^2.3.6:
+through@^2.3.6, through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
@@ -3128,16 +3216,19 @@ type-detect@^4.0.0, type-detect@^4.0.5:
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
 
-typedarray@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
-  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
-
 typescript@^3.9.5:
   version "3.9.7"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
   integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==
 
+unbzip2-stream@^1.3.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz#b0da04c4371311df771cdc215e87f2130991ace7"
+  integrity sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==
+  dependencies:
+    buffer "^5.2.1"
+    through "^2.3.8"
+
 uniq@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
@@ -3188,7 +3279,7 @@ url-parse-lax@^1.0.0:
   dependencies:
     prepend-http "^1.0.1"
 
-util-deprecate@^1.0.2, util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
@@ -3241,12 +3332,10 @@ write-file-atomic@^2.0.0:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.2"
 
-ws@^6.1.0:
-  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"
-  integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==
-  dependencies:
-    async-limiter "~1.0.0"
+ws@^7.2.3:
+  version "7.4.6"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
+  integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
 
 xdg-basedir@^3.0.0:
   version "3.0.0"

From c2e042ca6cf963df147ff9063af2da933c290c65 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 20 Jun 2021 21:40:16 +0800
Subject: [PATCH 348/524] Release 1.0.0-beta.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f1f6cf8e8d..4c30560d12 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb",
-  "version": "0.9.14",
+  "version": "1.0.0-beta.0",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",

From 52cbbdaf5669740cc7d417db3551502c25b22b36 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Tue, 22 Jun 2021 04:26:39 +0200
Subject: [PATCH 349/524] rrweb 1.0 use new getMirror api (#70)

* Fixes #69

* update rrweb to 1.0.0-beta.0
---
 package.json      |  2 +-
 src/Player.svelte |  7 ++++---
 yarn.lock         | 18 +++++++++---------
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 33e1f2e59d..a797193b10 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^0.9.14"
+    "rrweb": "^1.0.0-beta.0"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/src/Player.svelte b/src/Player.svelte
index 04dcd59b24..2801a53ff8 100644
--- a/src/Player.svelte
+++ b/src/Player.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import { Replayer, unpack, mirror } from 'rrweb';
+  import { Replayer, unpack } from 'rrweb';
   import type { eventWithTime, playerConfig } from 'rrweb/typings/types';
   import {
     inlineCss,
@@ -22,12 +22,13 @@
   export let showController: boolean = true;
   export let tags: Record<string, string> = {};
 
-  export const getMirror = () => mirror;
+  let replayer: Replayer;
+  
+  export const getMirror = () => replayer.getMirror();
 
   const controllerHeight = 80;
   let player: HTMLElement;
   let frame: HTMLElement;
-  let replayer: Replayer;
   let fullscreenListener: undefined | (() => void);
   let _width: number = width;
   let _height: number = height;
diff --git a/yarn.lock b/yarn.lock
index 9c0f16551a..9043da0921 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1222,21 +1222,21 @@ rollup@^1.20.0:
     "@types/node" "*"
     acorn "^7.1.0"
 
-rrweb-snapshot@^1.0.3:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.0.7.tgz#9d334590089af4a857970ef4e9e978d986a122d1"
-  integrity sha512-6fu9+KiQlFPkFk2SdahIDsV+yu1juiAR/o+kOiwKPbXur1TiFGMPAfaQNCkqLc8Nvyx3ItkJmrIldyxnAalEag==
+rrweb-snapshot@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.4.tgz#a71d812004c340aaa5313d313a7bd343eb8c260d"
+  integrity sha512-0iVRbsWSVOVEjgE8MA0+zYwlLMSwkVsUA7KhmvVaBK+viYcbx79SKRB8PkeFz1/1Jnn9fnkzPHlh42F+xFuwbQ==
 
-rrweb@^0.9.14:
-  version "0.9.14"
-  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-0.9.14.tgz#09bec604fc44c74801e4fe910606e5a6cde008ec"
-  integrity sha512-nm2rrVNoyWFPrbGQmcvTTlA7XjbbgPIgO7qsW0Zyr5iOURIFJDGPHFmOVLRyLpWiriVtEoXh6a+x+D1sj+qwWg==
+rrweb@^1.0.0-beta.0:
+  version "1.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-1.0.0-beta.0.tgz#c781794ac4cf80e55e4c240090f246891b8bf704"
+  integrity sha512-mCDDCEEJpIDNsmL9kNMl0FYMtoMlza8/wpjcK1uWOVk09jGANyxRVc0+jjUl1D83k9KlFXx0kj1TTSTYHdanMw==
   dependencies:
     "@types/css-font-loading-module" "0.0.4"
     "@xstate/fsm" "^1.4.0"
     fflate "^0.4.4"
     mitt "^1.1.3"
-    rrweb-snapshot "^1.0.3"
+    rrweb-snapshot "^1.1.4"
 
 sade@^1.4.0:
   version "1.7.3"

From fee48f084c9614f88d2a5a81e598f0918bd9988e Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Tue, 22 Jun 2021 13:47:30 +0200
Subject: [PATCH 350/524] Add ability to mask passwords (#494)

* add ability to mask passwords

* remove duplicate mask snapshot

* make sure only one click happens at a time
---
 guide.md                                    |  54 +-
 guide.zh_CN.md                              |  40 +-
 src/record/index.ts                         |   3 +-
 src/record/observer.ts                      |   5 +-
 test/__snapshots__/integration.test.ts.snap | 994 ++++++++------------
 test/html/form.html                         |   3 +
 test/html/ignore.html                       |   1 -
 test/integration.test.ts                    |   7 +-
 8 files changed, 455 insertions(+), 652 deletions(-)

diff --git a/guide.md b/guide.md
index 4cd3403c29..ecb35fcd1f 100644
--- a/guide.md
+++ b/guide.md
@@ -135,28 +135,28 @@ setInterval(save, 10 * 1000);
 
 The parameter of `rrweb.record` accepts the following options.
 
-| key              | default     | description                                                                                                                                                      |
-| ---------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 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                                                   |
-| ignoreClass      | 'rr-ignore' | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter                                                   |
-| maskTextClass    | 'rr-mask'   | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter                                                    |
-| blockSelector    | null        | Use a string to configure which selector should be blocked, 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 | {}          | mask some kinds of input \*<br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L72)  |
-| maskInputFn      | -           | customize mask input content recording logic                                                                                                                     |
-| maskTextFn       | -           | customize mask text content recording logic                                                                                                                      |
-| slimDOMOptions   | {}          | remove unnecessary parts of the DOM <br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91)            |
-| inlineStylesheet | true        | whether to inline the stylesheet in the events                                                                                                                   |
-| hooks            | {}          | hooks for events<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                     |
-| packFn           | -           | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                   |
-| sampling         | -           | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                   |
-| recordCanvas     | false       | whether to record the canvas element                                                                                                                             |
-| collectFonts     | false       | whether to collect fonts in the website                                                                                                                          |
-| recordLog        | false       | whether to record console output, refer to the [console recipe](./docs/recipes/console.md)                                                                       |
+| key              | default            | description                                                                                                                                                              |
+| ---------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| 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                                                           |
+| ignoreClass      | 'rr-ignore'        | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter                                                           |
+| maskTextClass    | 'rr-mask'          | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter                                                            |
+| blockSelector    | null               | Use a string to configure which selector should be blocked, 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-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L72)          |
+| maskInputFn      | -                  | customize mask input content recording logic                                                                                                                             |
+| maskTextFn       | -                  | customize mask text content recording logic                                                                                                                              |
+| slimDOMOptions   | {}                 | remove unnecessary parts of the DOM <br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91) |
+| inlineStylesheet | true               | whether to inline the stylesheet in the events                                                                                                                           |
+| hooks            | {}                 | hooks for events<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                             |
+| packFn           | -                  | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                           |
+| sampling         | -                  | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                           |
+| recordCanvas     | false              | whether to record the canvas element                                                                                                                                     |
+| collectFonts     | false              | whether to collect fonts in the website                                                                                                                                  |
+| recordLog        | false              | whether to record console output, refer to the [console recipe](./docs/recipes/console.md)                                                                               |
 
 #### Privacy
 
@@ -164,9 +164,9 @@ You may find some contents on the webpage which are not willing to be recorded,
 
 - 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.
-- `input[type="password"]` will be ignored as default.
 - Mask options to mask the content in input elements.
-- A text of elements with the class name `.rr-mask` and its children will be masked.
+- `input[type="password"]` will be masked by default.
+- All text of elements with the class name `.rr-mask` and their children will be masked.
 
 #### Checkout
 
@@ -294,7 +294,7 @@ The replayer accepts options as its constructor's second parameter, and it has t
 | showDebug           | false         | whether to print debug messages during replay                                                                                                                                                                                  |
 | blockClass          | 'rr-block'    | element with the class name will display as a blocked area                                                                                                                                                                     |
 | liveMode            | false         | whether to enable live mode                                                                                                                                                                                                    |
-| insertStyleRules     | []            | accepts multiple CSS rule string, which will be injected into the replay iframe                                                                                                                                                |
+| insertStyleRules    | []            | accepts multiple CSS rule string, which will be injected into the replay iframe                                                                                                                                                |
 | triggerFocus        | true          | whether to trigger focus during replay                                                                                                                                                                                         |
 | UNSAFE_replayCanvas | false         | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.**                                                                                                                                |
 | mouseTail           | true          | whether to show mouse tail during replay. Set to false to disable mouse tail. A complete config can be found in this [type](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
@@ -380,8 +380,8 @@ The rrweb-replayer also re-expose the event listener via a `component.addEventLi
 
 And there are three rrweb-replayer event will be emitted in the same way:
 
-| Event                  | Description                      | Value                   |
-| ---------------------- | -------------------------------- | ----------------------- |
+| Event                  | Description                      | Value       |
+| ---------------------- | -------------------------------- | ----------- |
 | ui-update-current-time | current time has changed         | { payload } |
 | ui-update-player-state | current player state has changed | { payload } |
 | ui-update-progress     | current progress has changed     | { payload } |
diff --git a/guide.zh_CN.md b/guide.zh_CN.md
index 9a54488d0f..e85e0a92bb 100644
--- a/guide.zh_CN.md
+++ b/guide.zh_CN.md
@@ -131,25 +131,25 @@ setInterval(save, 10 * 1000);
 
 `rrweb.record(config)` 的 config 部分接受以下参数
 
-| key              | 默认值      | 功能                                                                                                                                                               |
-| ---------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| emit             | 必填        | 获取当前录制的数据                                                                                                                                                 |
-| checkoutEveryNth | -           | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                       |
-| checkoutEveryNms | -           | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                         |
-| blockClass       | 'rr-block'  | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节                                                                                            |
-| blockSelector    | null        | 字符串或正则表达式，可用于自定义屏蔽元素的选择器，详见[“隐私”](#隐私)章节                                                                                          |
-| ignoreClass      | 'rr-ignore' | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节                                                                                            |
-| maskAllInputs    | false       | 将所有输入内容记录为 \*                                                                                                                                            |
-| maskInputOptions | {}          | 选择将特定类型的输入框内容记录为 \*<br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L72) |
-| maskInputFn      | -           | 自定义特定类型的输入框内容记录逻辑                                                                                                                                 |
-| slimDOMOptions   | {}          | 去除 DOM 中不必要的部分 <br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91)            |
-| inlineStylesheet | true        | 是否将样式表内联                                                                                                                                                   |
-| hooks            | {}          | 各类事件的回调<br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                              |
-| packFn           | -           | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                         |
-| sampling         | -           | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                         |
-| recordCanvas     | false       | 是否记录 canvas 内容                                                                                                                                               |
-| collectFonts     | false       | 是否记录页面中的字体文件                                                                                                                                           |
-| recordLog        | false       | 是否记录 console 输出，详见[console 录制和播放](./docs/recipes/console.zh_CN.md)                                                                                   |
+| key              | 默认值             | 功能                                                                                                                                                               |
+| ---------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| emit             | 必填               | 获取当前录制的数据                                                                                                                                                 |
+| checkoutEveryNth | -                  | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                       |
+| checkoutEveryNms | -                  | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                         |
+| blockClass       | 'rr-block'         | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节                                                                                            |
+| blockSelector    | null               | 字符串或正则表达式，可用于自定义屏蔽元素的选择器，详见[“隐私”](#隐私)章节                                                                                          |
+| ignoreClass      | 'rr-ignore'        | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节                                                                                            |
+| maskAllInputs    | false              | 将所有输入内容记录为 \*                                                                                                                                            |
+| maskInputOptions | { password: true } | 选择将特定类型的输入框内容记录为 \*<br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L72) |
+| maskInputFn      | -                  | 自定义特定类型的输入框内容记录逻辑                                                                                                                                 |
+| slimDOMOptions   | {}                 | 去除 DOM 中不必要的部分 <br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91)            |
+| inlineStylesheet | true               | 是否将样式表内联                                                                                                                                                   |
+| hooks            | {}                 | 各类事件的回调<br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                              |
+| packFn           | -                  | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                         |
+| sampling         | -                  | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                         |
+| recordCanvas     | false              | 是否记录 canvas 内容                                                                                                                                               |
+| collectFonts     | false              | 是否记录页面中的字体文件                                                                                                                                           |
+| recordLog        | false              | 是否记录 console 输出，详见[console 录制和播放](./docs/recipes/console.zh_CN.md)                                                                                   |
 
 #### 隐私
 
@@ -157,8 +157,8 @@ setInterval(save, 10 * 1000);
 
 - 在 HTML 元素中添加类名 `.rr-block` 将会避免该元素及其子元素被录制，回放时取而代之的是一个同等宽高的占位元素。
 - 在 HTML 元素中添加类名 `.rr-ignore` 将会避免录制该元素的输入事件。
-- `input[type="password"]` 类型的密码输入框默认不会录制输入事件。
 - 配置中还有更为丰富的隐私保护选项。
+- `input[type="password"]` 类型的密码输入框默认不会录制输入事件。
 
 #### 重新制作快照
 
diff --git a/src/record/index.ts b/src/record/index.ts
index 4738a14496..68f2625c23 100644
--- a/src/record/index.ts
+++ b/src/record/index.ts
@@ -88,10 +88,11 @@ function record<T = eventWithTime>(
           week: true,
           textarea: true,
           select: true,
+          password: true,
         }
       : _maskInputOptions !== undefined
       ? _maskInputOptions
-      : {};
+      : { password: true };
 
   const slimDOMOptions: SlimDOMOptions =
     _slimDOMOptions === true || _slimDOMOptions === 'all'
diff --git a/src/record/observer.ts b/src/record/observer.ts
index 7ffffd4859..30db7f836e 100644
--- a/src/record/observer.ts
+++ b/src/record/observer.ts
@@ -359,10 +359,7 @@ function initInputObserver(
       return;
     }
     const type: string | undefined = (target as HTMLInputElement).type;
-    if (
-      type === 'password' ||
-      (target as HTMLElement).classList.contains(ignoreClass)
-    ) {
+    if ((target as HTMLElement).classList.contains(ignoreClass)) {
       return;
     }
     let text = (target as HTMLInputElement).value;
diff --git a/test/__snapshots__/integration.test.ts.snap b/test/__snapshots__/integration.test.ts.snap
index e2f17250a2..e74967e4fc 100644
--- a/test/__snapshots__/integration.test.ts.snap
+++ b/test/__snapshots__/integration.test.ts.snap
@@ -1229,8 +1229,42 @@ exports[`form 1`] = `
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n  \\",
+                        \\"textContent\\": \\"\\\\n    \\",
                         \\"id\\": 51
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"password\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 53
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"input\\",
+                            \\"attributes\\": {
+                              \\"type\\": \\"password\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 54
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"id\\": 55
+                          }
+                        ],
+                        \\"id\\": 52
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n  \\",
+                        \\"id\\": 56
                       }
                     ],
                     \\"id\\": 18
@@ -1238,7 +1272,7 @@ exports[`form 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 52
+                    \\"id\\": 57
                   },
                   {
                     \\"type\\": 2,
@@ -1248,15 +1282,15 @@ exports[`form 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 54
+                        \\"id\\": 59
                       }
                     ],
-                    \\"id\\": 53
+                    \\"id\\": 58
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\\\n\\",
-                    \\"id\\": 55
+                    \\"id\\": 60
                   }
                 ],
                 \\"id\\": 16
@@ -2576,7 +2610,7 @@ exports[`ignore 1`] = `
                         \\"type\\": 2,
                         \\"tagName\\": \\"label\\",
                         \\"attributes\\": {
-                          \\"for\\": \\"password\\"
+                          \\"for\\": \\"ignore text\\"
                         },
                         \\"childNodes\\": [
                           {
@@ -2588,7 +2622,8 @@ exports[`ignore 1`] = `
                             \\"type\\": 2,
                             \\"tagName\\": \\"input\\",
                             \\"attributes\\": {
-                              \\"type\\": \\"password\\"
+                              \\"type\\": \\"text\\",
+                              \\"class\\": \\"rr-ignore\\"
                             },
                             \\"childNodes\\": [],
                             \\"id\\": 22
@@ -2601,45 +2636,10 @@ exports[`ignore 1`] = `
                         ],
                         \\"id\\": 20
                       },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 24
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"ignore text\\"
-                        },
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\" \\",
-                            \\"id\\": 26
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"input\\",
-                            \\"attributes\\": {
-                              \\"type\\": \\"text\\",
-                              \\"class\\": \\"rr-ignore\\"
-                            },
-                            \\"childNodes\\": [],
-                            \\"id\\": 27
-                          },
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\" \\",
-                            \\"id\\": 28
-                          }
-                        ],
-                        \\"id\\": 25
-                      },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 29
+                        \\"id\\": 24
                       }
                     ],
                     \\"id\\": 18
@@ -2647,7 +2647,7 @@ exports[`ignore 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 30
+                    \\"id\\": 25
                   },
                   {
                     \\"type\\": 2,
@@ -2657,15 +2657,15 @@ exports[`ignore 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 32
+                        \\"id\\": 27
                       }
                     ],
-                    \\"id\\": 31
+                    \\"id\\": 26
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 33
+                    \\"id\\": 28
                   }
                 ],
                 \\"id\\": 16
@@ -2689,27 +2689,11 @@ exports[`ignore 1`] = `
       \\"type\\": 5,
       \\"id\\": 22
     }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 6,
-      \\"id\\": 22
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 5,
-      \\"id\\": 27
-    }
   }
 ]"
 `;
 
-exports[`log`] = `
+exports[`log 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -2875,9 +2859,12 @@ exports[`log`] = `
     \\"data\\": {
       \\"source\\": 11,
       \\"level\\": \\"assert\\",
+      \\"trace\\": [
+        \\"__puppeteer_evaluation_script__:2:37\\"
+      ],
       \\"payload\\": [
         \\"true\\",
-        \\"\\"assert\\"\\"
+        \\"\\\\\\"assert\\\\\\"\\"
       ]
     }
   },
@@ -2886,8 +2873,11 @@ exports[`log`] = `
     \\"data\\": {
       \\"source\\": 11,
       \\"level\\": \\"count\\",
+      \\"trace\\": [
+        \\"__puppeteer_evaluation_script__:3:37\\"
+      ],
       \\"payload\\": [
-        \\"\\"count\\"\\"
+        \\"\\\\\\"count\\\\\\"\\"
       ]
     }
   },
@@ -2896,8 +2886,11 @@ exports[`log`] = `
     \\"data\\": {
       \\"source\\": 11,
       \\"level\\": \\"countReset\\",
+      \\"trace\\": [
+        \\"__puppeteer_evaluation_script__:4:37\\"
+      ],
       \\"payload\\": [
-        \\"\\"count\\"\\"
+        \\"\\\\\\"count\\\\\\"\\"
       ]
     }
   },
@@ -2906,8 +2899,11 @@ exports[`log`] = `
     \\"data\\": {
       \\"source\\": 11,
       \\"level\\": \\"debug\\",
+      \\"trace\\": [
+        \\"__puppeteer_evaluation_script__:5:37\\"
+      ],
       \\"payload\\": [
-        \\"\\"debug\\"\\"
+        \\"\\\\\\"debug\\\\\\"\\"
       ]
     }
   },
@@ -2916,8 +2912,11 @@ exports[`log`] = `
     \\"data\\": {
       \\"source\\": 11,
       \\"level\\": \\"dir\\",
+      \\"trace\\": [
+        \\"__puppeteer_evaluation_script__:6:37\\"
+      ],
       \\"payload\\": [
-        \\"\\"dir\\"\\"
+        \\"\\\\\\"dir\\\\\\"\\"
       ]
     }
   },
@@ -2926,8 +2925,11 @@ exports[`log`] = `
     \\"data\\": {
       \\"source\\": 11,
       \\"level\\": \\"dirxml\\",
+      \\"trace\\": [
+        \\"__puppeteer_evaluation_script__:7:37\\"
+      ],
       \\"payload\\": [
-        \\"\\"dirxml\\"\\"
+        \\"\\\\\\"dirxml\\\\\\"\\"
       ]
     }
   },
@@ -2936,6 +2938,9 @@ exports[`log`] = `
     \\"data\\": {
       \\"source\\": 11,
       \\"level\\": \\"group\\",
+      \\"trace\\": [
+        \\"__puppeteer_evaluation_script__:8:37\\"
+      ],
       \\"payload\\": []
     }
   },
@@ -2944,6 +2949,9 @@ exports[`log`] = `
     \\"data\\": {
       \\"source\\": 11,
       \\"level\\": \\"groupCollapsed\\",
+      \\"trace\\": [
+        \\"__puppeteer_evaluation_script__:9:37\\"
+      ],
       \\"payload\\": []
     }
   },
@@ -2952,8 +2960,11 @@ exports[`log`] = `
     \\"data\\": {
       \\"source\\": 11,
       \\"level\\": \\"info\\",
+      \\"trace\\": [
+        \\"__puppeteer_evaluation_script__:10:37\\"
+      ],
       \\"payload\\": [
-        \\"\\"info\\"\\"
+        \\"\\\\\\"info\\\\\\"\\"
       ]
     }
   },
@@ -2962,8 +2973,11 @@ exports[`log`] = `
     \\"data\\": {
       \\"source\\": 11,
       \\"level\\": \\"log\\",
+      \\"trace\\": [
+        \\"__puppeteer_evaluation_script__:11:37\\"
+      ],
       \\"payload\\": [
-        \\"\\"log\\"\\"
+        \\"\\\\\\"log\\\\\\"\\"
       ]
     }
   },
@@ -2972,8 +2986,11 @@ exports[`log`] = `
     \\"data\\": {
       \\"source\\": 11,
       \\"level\\": \\"table\\",
+      \\"trace\\": [
+        \\"__puppeteer_evaluation_script__:12:37\\"
+      ],
       \\"payload\\": [
-        \\"\\"table\\"\\"
+        \\"\\\\\\"table\\\\\\"\\"
       ]
     }
   },
@@ -2982,6 +2999,9 @@ exports[`log`] = `
     \\"data\\": {
       \\"source\\": 11,
       \\"level\\": \\"time\\",
+      \\"trace\\": [
+        \\"__puppeteer_evaluation_script__:13:37\\"
+      ],
       \\"payload\\": []
     }
   },
@@ -2990,6 +3010,9 @@ exports[`log`] = `
     \\"data\\": {
       \\"source\\": 11,
       \\"level\\": \\"timeEnd\\",
+      \\"trace\\": [
+        \\"__puppeteer_evaluation_script__:14:37\\"
+      ],
       \\"payload\\": []
     }
   },
@@ -2998,6 +3021,9 @@ exports[`log`] = `
     \\"data\\": {
       \\"source\\": 11,
       \\"level\\": \\"timeLog\\",
+      \\"trace\\": [
+        \\"__puppeteer_evaluation_script__:15:37\\"
+      ],
       \\"payload\\": []
     }
   },
@@ -3006,8 +3032,11 @@ exports[`log`] = `
     \\"data\\": {
       \\"source\\": 11,
       \\"level\\": \\"trace\\",
+      \\"trace\\": [
+        \\"__puppeteer_evaluation_script__:16:37\\"
+      ],
       \\"payload\\": [
-        \\"\\"trace\\"\\"
+        \\"\\\\\\"trace\\\\\\"\\"
       ]
     }
   },
@@ -3016,8 +3045,11 @@ exports[`log`] = `
     \\"data\\": {
       \\"source\\": 11,
       \\"level\\": \\"warn\\",
+      \\"trace\\": [
+        \\"__puppeteer_evaluation_script__:17:37\\"
+      ],
       \\"payload\\": [
-        \\"\\"warn\\"\\"
+        \\"\\\\\\"warn\\\\\\"\\"
       ]
     }
   },
@@ -3026,13 +3058,16 @@ exports[`log`] = `
     \\"data\\": {
       \\"source\\": 11,
       \\"level\\": \\"clear\\",
+      \\"trace\\": [
+        \\"__puppeteer_evaluation_script__:18:37\\"
+      ],
       \\"payload\\": []
     }
   }
 ]"
 `;
 
-exports[`log 1`] = `
+exports[`mask 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -3077,7 +3112,7 @@ exports[`log 1`] = `
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 5
                   },
                   {
@@ -3091,7 +3126,7 @@ exports[`log 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 7
                   },
                   {
@@ -3106,7 +3141,7 @@ exports[`log 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 9
                   },
                   {
@@ -3121,7 +3156,7 @@ exports[`log 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 11
                   },
                   {
@@ -3131,7 +3166,7 @@ exports[`log 1`] = `
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"Log record\\",
+                        \\"textContent\\": \\"form fields\\",
                         \\"id\\": 13
                       }
                     ],
@@ -3139,7 +3174,7 @@ exports[`log 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n\\",
                     \\"id\\": 14
                   }
                 ],
@@ -3147,7 +3182,7 @@ exports[`log 1`] = `
               },
               {
                 \\"type\\": 3,
-                \\"textContent\\": \\"\\\\n  \\",
+                \\"textContent\\": \\"\\\\n\\\\n\\",
                 \\"id\\": 15
               },
               {
@@ -3157,391 +3192,17 @@ exports[`log 1`] = `
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 17
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
+                    \\"tagName\\": \\"form\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 19
-                      }
-                    ],
-                    \\"id\\": 18
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 20
-                  }
-                ],
-                \\"id\\": 16
-              }
-            ],
-            \\"id\\": 3
-          }
-        ],
-        \\"id\\": 1
-      },
-      \\"initialOffset\\": {
-        \\"left\\": 0,
-        \\"top\\": 0
-      }
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"assert\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:2:37\\"
-      ],
-      \\"payload\\": [
-        \\"true\\",
-        \\"\\\\\\"assert\\\\\\"\\"
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"count\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:3:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"count\\\\\\"\\"
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"countReset\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:4:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"count\\\\\\"\\"
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"debug\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:5:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"debug\\\\\\"\\"
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"dir\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:6:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"dir\\\\\\"\\"
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"dirxml\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:7:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"dirxml\\\\\\"\\"
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"group\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:8:37\\"
-      ],
-      \\"payload\\": []
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"groupCollapsed\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:9:37\\"
-      ],
-      \\"payload\\": []
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"info\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:10:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"info\\\\\\"\\"
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"log\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:11:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"log\\\\\\"\\"
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"table\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:12:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"table\\\\\\"\\"
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"time\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:13:37\\"
-      ],
-      \\"payload\\": []
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"timeEnd\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:14:37\\"
-      ],
-      \\"payload\\": []
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"timeLog\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:15:37\\"
-      ],
-      \\"payload\\": []
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"trace\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:16:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"trace\\\\\\"\\"
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"warn\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:17:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"warn\\\\\\"\\"
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"clear\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:18:37\\"
-      ],
-      \\"payload\\": []
-    }
-  }
-]"
-`;
-
-exports[`mask 1`] = `
-"[
-  {
-    \\"type\\": 0,
-    \\"data\\": {}
-  },
-  {
-    \\"type\\": 1,
-    \\"data\\": {}
-  },
-  {
-    \\"type\\": 4,
-    \\"data\\": {
-      \\"href\\": \\"about:blank\\",
-      \\"width\\": 1920,
-      \\"height\\": 1080
-    }
-  },
-  {
-    \\"type\\": 2,
-    \\"data\\": {
-      \\"node\\": {
-        \\"type\\": 0,
-        \\"childNodes\\": [
-          {
-            \\"type\\": 1,
-            \\"name\\": \\"html\\",
-            \\"publicId\\": \\"\\",
-            \\"systemId\\": \\"\\",
-            \\"id\\": 2
-          },
-          {
-            \\"type\\": 2,
-            \\"tagName\\": \\"html\\",
-            \\"attributes\\": {
-              \\"lang\\": \\"en\\"
-            },
-            \\"childNodes\\": [
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"head\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 5
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"charset\\": \\"UTF-8\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 6
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 7
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"name\\": \\"viewport\\",
-                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 8
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 9
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"http-equiv\\": \\"X-UA-Compatible\\",
-                      \\"content\\": \\"ie=edge\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 10
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 11
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"title\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"form fields\\",
-                        \\"id\\": 13
-                      }
-                    ],
-                    \\"id\\": 12
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\",
-                    \\"id\\": 14
-                  }
-                ],
-                \\"id\\": 4
-              },
-              {
-                \\"type\\": 3,
-                \\"textContent\\": \\"\\\\n\\\\n\\",
-                \\"id\\": 15
-              },
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"body\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 17
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"form\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n    \\",
                         \\"id\\": 19
                       },
                       {
@@ -3763,8 +3424,42 @@ exports[`mask 1`] = `
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n  \\",
+                        \\"textContent\\": \\"\\\\n    \\",
                         \\"id\\": 51
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"password\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 53
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"input\\",
+                            \\"attributes\\": {
+                              \\"type\\": \\"password\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 54
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"id\\": 55
+                          }
+                        ],
+                        \\"id\\": 52
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n  \\",
+                        \\"id\\": 56
                       }
                     ],
                     \\"id\\": 18
@@ -3772,7 +3467,7 @@ exports[`mask 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 52
+                    \\"id\\": 57
                   },
                   {
                     \\"type\\": 2,
@@ -3782,15 +3477,15 @@ exports[`mask 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 54
+                        \\"id\\": 59
                       }
                     ],
-                    \\"id\\": 53
+                    \\"id\\": 58
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\\\n\\",
-                    \\"id\\": 55
+                    \\"id\\": 60
                   }
                 ],
                 \\"id\\": 16
@@ -3895,58 +3590,146 @@ exports[`mask 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 5,
-      \\"text\\": \\"on\\",
-      \\"isChecked\\": true,
-      \\"id\\": 27
+      \\"text\\": \\"on\\",
+      \\"isChecked\\": true,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 1,
+      \\"id\\": 32
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 6,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 32
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 0,
+      \\"id\\": 32
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 2,
+      \\"id\\": 32
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"on\\",
+      \\"isChecked\\": true,
+      \\"id\\": 32
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 6,
+      \\"id\\": 32
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 54
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*\\",
+      \\"isChecked\\": false,
+      \\"id\\": 54
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"**\\",
+      \\"isChecked\\": false,
+      \\"id\\": 54
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 1,
-      \\"id\\": 32
+      \\"source\\": 5,
+      \\"text\\": \\"***\\",
+      \\"isChecked\\": false,
+      \\"id\\": 54
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 6,
-      \\"id\\": 27
+      \\"source\\": 5,
+      \\"text\\": \\"****\\",
+      \\"isChecked\\": false,
+      \\"id\\": 54
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 5,
-      \\"id\\": 32
+      \\"source\\": 5,
+      \\"text\\": \\"*****\\",
+      \\"isChecked\\": false,
+      \\"id\\": 54
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 0,
-      \\"id\\": 32
+      \\"source\\": 5,
+      \\"text\\": \\"******\\",
+      \\"isChecked\\": false,
+      \\"id\\": 54
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 2,
-      \\"id\\": 32
+      \\"source\\": 5,
+      \\"text\\": \\"*******\\",
+      \\"isChecked\\": false,
+      \\"id\\": 54
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 5,
-      \\"text\\": \\"on\\",
-      \\"isChecked\\": true,
-      \\"id\\": 32
+      \\"text\\": \\"********\\",
+      \\"isChecked\\": false,
+      \\"id\\": 54
     }
   },
   {
@@ -3954,7 +3737,7 @@ exports[`mask 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 6,
-      \\"id\\": 32
+      \\"id\\": 54
     }
   },
   {
@@ -5191,8 +4974,42 @@ exports[`maskInputOptions 1`] = `
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n  \\",
+                        \\"textContent\\": \\"\\\\n    \\",
                         \\"id\\": 51
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"password\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 53
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"input\\",
+                            \\"attributes\\": {
+                              \\"type\\": \\"password\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 54
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"id\\": 55
+                          }
+                        ],
+                        \\"id\\": 52
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n  \\",
+                        \\"id\\": 56
                       }
                     ],
                     \\"id\\": 18
@@ -5200,7 +5017,7 @@ exports[`maskInputOptions 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 52
+                    \\"id\\": 57
                   },
                   {
                     \\"type\\": 2,
@@ -5210,15 +5027,15 @@ exports[`maskInputOptions 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 54
+                        \\"id\\": 59
                       }
                     ],
-                    \\"id\\": 53
+                    \\"id\\": 58
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\\\n\\",
-                    \\"id\\": 55
+                    \\"id\\": 60
                   }
                 ],
                 \\"id\\": 16
@@ -5510,6 +5327,94 @@ exports[`maskInputOptions 1`] = `
       \\"id\\": 37
     }
   },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 6,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 54
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*\\",
+      \\"isChecked\\": false,
+      \\"id\\": 54
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"**\\",
+      \\"isChecked\\": false,
+      \\"id\\": 54
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"***\\",
+      \\"isChecked\\": false,
+      \\"id\\": 54
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"****\\",
+      \\"isChecked\\": false,
+      \\"id\\": 54
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*****\\",
+      \\"isChecked\\": false,
+      \\"id\\": 54
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"******\\",
+      \\"isChecked\\": false,
+      \\"id\\": 54
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*******\\",
+      \\"isChecked\\": false,
+      \\"id\\": 54
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"********\\",
+      \\"isChecked\\": false,
+      \\"id\\": 54
+    }
+  },
   {
     \\"type\\": 3,
     \\"data\\": {
@@ -7400,14 +7305,6 @@ exports[`select2 1`] = `
       ]
     }
   },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 0,
-      \\"id\\": 70
-    }
-  },
   {
     \\"type\\": 3,
     \\"data\\": {
@@ -7426,107 +7323,12 @@ exports[`select2 1`] = `
       \\"id\\": 35
     }
   },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 1,
-      \\"id\\": 70
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 6,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 5,
-      \\"id\\": 35
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [
-        {
-          \\"id\\": 70,
-          \\"attributes\\": {
-            \\"style\\": \\"display: none;\\"
-          }
-        },
-        {
-          \\"id\\": 36,
-          \\"attributes\\": {
-            \\"id\\": null,
-            \\"style\\": \\"left: Npx; width: Npx; top: Npx; bottom: auto; display: none;\\"
-          }
-        },
-        {
-          \\"id\\": 25,
-          \\"attributes\\": {
-            \\"class\\": \\"select2-container select2-container-active\\"
-          }
-        },
-        {
-          \\"id\\": 35,
-          \\"attributes\\": {
-            \\"disabled\\": null
-          }
-        },
-        {
-          \\"id\\": 42,
-          \\"attributes\\": {
-            \\"class\\": \\"select2-input\\"
-          }
-        }
-      ],
-      \\"removes\\": [
-        {
-          \\"parentId\\": 18,
-          \\"id\\": 70
-        },
-        {
-          \\"parentId\\": 45,
-          \\"id\\": 72
-        },
-        {
-          \\"parentId\\": 45,
-          \\"id\\": 67
-        }
-      ],
-      \\"adds\\": [
-        {
-          \\"parentId\\": 18,
-          \\"nextId\\": 36,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"div\\",
-            \\"attributes\\": {
-              \\"id\\": \\"select2-drop-mask\\",
-              \\"class\\": \\"select2-drop-mask\\",
-              \\"style\\": \\"display: none;\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 70
-          }
-        }
-      ]
-    }
-  },
   {
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 0,
-      \\"id\\": 26
+      \\"id\\": 70
     }
   }
 ]"
diff --git a/test/html/form.html b/test/html/form.html
index 14120fd30e..9d4a0c7116 100644
--- a/test/html/form.html
+++ b/test/html/form.html
@@ -28,6 +28,9 @@
         <option value="2">2</option>
       </select>
     </label>
+    <label for="password">
+      <input type="password" />
+    </label>
   </form>
 </body>
 
diff --git a/test/html/ignore.html b/test/html/ignore.html
index 91e0652d9e..f46c2efd00 100644
--- a/test/html/ignore.html
+++ b/test/html/ignore.html
@@ -9,7 +9,6 @@
 
   <body>
     <form>
-      <label for="password"> <input type="password" /> </label>
       <label for="ignore text"> <input type="text" class="rr-ignore" /> </label>
     </form>
   </body>
diff --git a/test/integration.test.ts b/test/integration.test.ts
index 6d5234e7b3..01bef4297d 100644
--- a/test/integration.test.ts
+++ b/test/integration.test.ts
@@ -177,8 +177,7 @@ describe('record integration tests', function (this: ISuite) {
     });
 
     // toggle the select box
-    await page.click('.select2-container');
-    await page.click('.select2-container');
+    await page.click('.select2-container', { clickCount: 2, delay: 100 });
 
     const snapshots = await page.evaluate('window.snapshots');
     assertSnapshot(snapshots, __filename, 'select2');
@@ -215,7 +214,6 @@ describe('record integration tests', function (this: ISuite) {
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'ignore.html'));
 
-    await page.type('input[type="password"]', 'password');
     await page.type('.rr-ignore', 'secret');
 
     const snapshots = await page.evaluate('window.snapshots');
@@ -232,6 +230,7 @@ describe('record integration tests', function (this: ISuite) {
     await page.type('input[type="text"]', 'test');
     await page.click('input[type="radio"]');
     await page.click('input[type="checkbox"]');
+    await page.type('input[type="password"]', 'password');
     await page.type('textarea', 'textarea test');
     await page.select('select', '1');
 
@@ -247,6 +246,7 @@ describe('record integration tests', function (this: ISuite) {
         maskInputOptions: {
           text: false,
           textarea: false,
+          password: true,
         },
       }),
     );
@@ -255,6 +255,7 @@ describe('record integration tests', function (this: ISuite) {
     await page.click('input[type="radio"]');
     await page.click('input[type="checkbox"]');
     await page.type('textarea', 'textarea test');
+    await page.type('input[type="password"]', 'password');
     await page.select('select', '1');
 
     const snapshots = await page.evaluate('window.snapshots');

From 1b62620e5289216311ca86a90dd900d0f25b41e5 Mon Sep 17 00:00:00 2001
From: Yun Feng <yun.feng@smartx.com>
Date: Wed, 23 Jun 2021 13:45:12 +0800
Subject: [PATCH 351/524] doc: update guide.zh_CN.md

---
 guide.md       |  6 +++---
 guide.zh_CN.md | 14 +++++++++-----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/guide.md b/guide.md
index ecb35fcd1f..f40bc4074b 100644
--- a/guide.md
+++ b/guide.md
@@ -141,9 +141,9 @@ The parameter of `rrweb.record` accepts the following options.
 | 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                                                           |
+| 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                                                           |
 | maskTextClass    | 'rr-mask'          | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter                                                            |
-| blockSelector    | null               | Use a string to configure which selector should be blocked, 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-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L72)          |
@@ -164,9 +164,9 @@ You may find some contents on the webpage which are not willing to be recorded,
 
 - 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.
-- Mask options to mask the content in input elements.
-- `input[type="password"]` will be masked by default.
 - All text of elements with the class name `.rr-mask` and their children will be masked.
+- `input[type="password"]` will be masked by default.
+- Mask options to mask the content in input elements.
 
 #### Checkout
 
diff --git a/guide.zh_CN.md b/guide.zh_CN.md
index e85e0a92bb..b17d478bfd 100644
--- a/guide.zh_CN.md
+++ b/guide.zh_CN.md
@@ -137,11 +137,14 @@ setInterval(save, 10 * 1000);
 | checkoutEveryNth | -                  | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                       |
 | checkoutEveryNms | -                  | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                         |
 | blockClass       | 'rr-block'         | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节                                                                                            |
-| blockSelector    | null               | 字符串或正则表达式，可用于自定义屏蔽元素的选择器，详见[“隐私”](#隐私)章节                                                                                          |
+| blockSelector    | null               | 所有element.matches(blockSelector)为true的元素都不会被录制，回放时取而代之的是一个同等宽高的占位元素                                                               |
 | ignoreClass      | 'rr-ignore'        | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节                                                                                            |
+| maskTextClass    | 'rr-mask'          | 字符串或正则表达式，可用于自定义忽略元素text内容的类名，详见[“隐私”](#隐私)章节                                                                                    |
+| maskTextSelector | null               | 所有element.matches(maskTextSelector)为true的元素及其子元素的text内容将会被屏蔽                                                                                    |
 | maskAllInputs    | false              | 将所有输入内容记录为 \*                                                                                                                                            |
 | maskInputOptions | { password: true } | 选择将特定类型的输入框内容记录为 \*<br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L72) |
 | maskInputFn      | -                  | 自定义特定类型的输入框内容记录逻辑                                                                                                                                 |
+| maskTextFn       | -                  | 自定义文字内容的记录逻辑                                                                                                                                           |
 | slimDOMOptions   | {}                 | 去除 DOM 中不必要的部分 <br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91)            |
 | inlineStylesheet | true               | 是否将样式表内联                                                                                                                                                   |
 | hooks            | {}                 | 各类事件的回调<br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                              |
@@ -157,8 +160,9 @@ setInterval(save, 10 * 1000);
 
 - 在 HTML 元素中添加类名 `.rr-block` 将会避免该元素及其子元素被录制，回放时取而代之的是一个同等宽高的占位元素。
 - 在 HTML 元素中添加类名 `.rr-ignore` 将会避免录制该元素的输入事件。
-- 配置中还有更为丰富的隐私保护选项。
+- 所有带有`.rr-mask`类名的元素及其子元素的text内容将会被屏蔽。
 - `input[type="password"]` 类型的密码输入框默认不会录制输入事件。
+- 配置中还有更为丰富的隐私保护选项。
 
 #### 重新制作快照
 
@@ -286,7 +290,7 @@ replayer.pause(5000);
 | showDebug           | false         | 是否在回放过程中打印 debug 信息                                                                                                                                                                      |
 | blockClass          | 'rr-block'    | 需要在回放时展示为隐藏区域的元素类名                                                                                                                                                                 |
 | liveMode            | false         | 是否开启直播模式                                                                                                                                                                                     |
-| insertStyleRules     | []            | 可以传入多个 CSS rule string，用于自定义回放时 iframe 内的样式                                                                                                                                       |
+| insertStyleRules    | []            | 可以传入多个 CSS rule string，用于自定义回放时 iframe 内的样式                                                                                                                                       |
 | triggerFocus        | true          | 回放时是否回放 focus 交互                                                                                                                                                                            |
 | UNSAFE_replayCanvas | false         | 回放时是否回放 canvas 内容，**开启后将会关闭沙盒策略，导致一定风险**                                                                                                                                 |
 | mouseTail           | true          | 是否在回放时增加鼠标轨迹。传入 false 可关闭，传入对象可以定制轨迹持续时间、样式等，配置详见[类型](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
@@ -374,8 +378,8 @@ replayer.on(EVENT_NAME, (payload) => {
 
 使用 `rrweb-player` 时，也可以通过 `addEventListener` API 使用相同的事件功能，并且会获得 3 个额外的事件：
 
-| 事件类型               | 描述           | 值                      |
-| ---------------------- | -------------- | ----------------------- |
+| 事件类型               | 描述           | 值          |
+| ---------------------- | -------------- | ----------- |
 | ui-update-current-time | 当前回放时间点 | { payload } |
 | ui-update-player-state | 当前回放状态   | { payload } |
 | ui-update-progress     | 当前回放百分比 | { payload } |

From f5509d3a47ca96d5d265ef43b7e9ad833f62059a Mon Sep 17 00:00:00 2001
From: bachmanity1 <81428651+bachmanity1@users.noreply.github.com>
Date: Wed, 23 Jun 2021 17:54:01 +0900
Subject: [PATCH 352/524] fix media playback bug (#80)

---
 src/rebuild.ts  | 6 +++++-
 src/snapshot.ts | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index 0d269b0f37..ef88103bd6 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -202,10 +202,14 @@ function buildNode(
           if (name === 'rr_height') {
             (node as HTMLElement).style.height = value;
           }
+          if (name === 'rr_mediaCurrentTime') {
+            (node as HTMLMediaElement).currentTime = n.attributes.rr_mediaCurrentTime as number
+          }
           if (name === 'rr_mediaState') {
             switch (value) {
               case 'played':
-                (node as HTMLMediaElement).play();
+                (node as HTMLMediaElement).play().catch(e => console.warn("media playback error", e));
+                break;
               case 'paused':
                 (node as HTMLMediaElement).pause();
                 break;
diff --git a/src/snapshot.ts b/src/snapshot.ts
index c6249eba91..14f87e37c8 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -464,6 +464,7 @@ function serializeNode(
         attributes.rr_mediaState = (n as HTMLMediaElement).paused
           ? 'paused'
           : 'played';
+        attributes.rr_mediaCurrentTime = (n as HTMLMediaElement).currentTime
       }
       // scroll
       if ((n as HTMLElement).scrollLeft) {

From 2cf4ddd9e2de46f132c5c28e14510606bd4e2f5d Mon Sep 17 00:00:00 2001
From: Yun Feng <yun.feng@smartx.com>
Date: Wed, 23 Jun 2021 16:58:38 +0800
Subject: [PATCH 353/524] style(rebuild.ts snapshot.ts): format code

---
 src/rebuild.ts  | 7 +++++--
 src/snapshot.ts | 6 +++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index ef88103bd6..be8cd8f00a 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -203,12 +203,15 @@ function buildNode(
             (node as HTMLElement).style.height = value;
           }
           if (name === 'rr_mediaCurrentTime') {
-            (node as HTMLMediaElement).currentTime = n.attributes.rr_mediaCurrentTime as number
+            (node as HTMLMediaElement).currentTime = n.attributes
+              .rr_mediaCurrentTime as number;
           }
           if (name === 'rr_mediaState') {
             switch (value) {
               case 'played':
-                (node as HTMLMediaElement).play().catch(e => console.warn("media playback error", e));
+                (node as HTMLMediaElement)
+                  .play()
+                  .catch((e) => console.warn('media playback error', e));
                 break;
               case 'paused':
                 (node as HTMLMediaElement).pause();
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 14f87e37c8..6d2fe8ff2d 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -363,8 +363,8 @@ function serializeNode(
   } = options;
   // Only record root id when document object is not the base document
   let rootId: number | undefined;
-  if (((doc as unknown) as INode).__sn) {
-    const docId = ((doc as unknown) as INode).__sn.id;
+  if ((doc as unknown as INode).__sn) {
+    const docId = (doc as unknown as INode).__sn.id;
     rootId = docId === 1 ? undefined : docId;
   }
   switch (n.nodeType) {
@@ -464,7 +464,7 @@ function serializeNode(
         attributes.rr_mediaState = (n as HTMLMediaElement).paused
           ? 'paused'
           : 'played';
-        attributes.rr_mediaCurrentTime = (n as HTMLMediaElement).currentTime
+        attributes.rr_mediaCurrentTime = (n as HTMLMediaElement).currentTime;
       }
       // scroll
       if ((n as HTMLElement).scrollLeft) {

From dbaea7a521d7c832f35ad6089a02fb219dc7552d Mon Sep 17 00:00:00 2001
From: bachmanity1 <81428651+bachmanity1@users.noreply.github.com>
Date: Thu, 24 Jun 2021 19:28:14 +0900
Subject: [PATCH 354/524] implement video seek feature (#593)

* implement video seek feature

* rm attribute from MediaInteractions

* resolve ts warning

* use getEventTarget
---
 src/record/observer.ts | 11 ++++++++---
 src/replay/index.ts    | 15 ++++++++-------
 src/types.ts           |  2 ++
 typings/types.d.ts     |  4 +++-
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/record/observer.ts b/src/record/observer.ts
index 30db7f836e..c356397361 100644
--- a/src/record/observer.ts
+++ b/src/record/observer.ts
@@ -482,17 +482,22 @@ function initMediaInteractionObserver(
   blockClass: blockClass,
   mirror: Mirror,
 ): listenerHandler {
-  const handler = (type: 'play' | 'pause') => (event: Event) => {
+  const handler = (type: MediaInteractions ) => (event: Event) => {
     const target = getEventTarget(event);
     if (!target || isBlocked(target as Node, blockClass)) {
       return;
     }
     mediaInteractionCb({
-      type: type === 'play' ? MediaInteractions.Play : MediaInteractions.Pause,
+      type,
       id: mirror.getId(target as INode),
+      currentTime: (target as HTMLMediaElement).currentTime
     });
   };
-  const handlers = [on('play', handler('play')), on('pause', handler('pause'))];
+  const handlers = [
+    on('play', handler(MediaInteractions.Play)), 
+    on('pause', handler(MediaInteractions.Pause)), 
+    on('seeked', handler(MediaInteractions.Seeked))
+  ];
   return () => {
     handlers.forEach((h) => h());
   };
diff --git a/src/replay/index.ts b/src/replay/index.ts
index cbcc8fd898..7efca4915a 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -906,17 +906,18 @@ export class Replayer {
         }
         const mediaEl = (target as Node) as HTMLMediaElement;
         try {
+          if (d.currentTime) {
+            mediaEl.currentTime = d.currentTime;
+          }
           if (d.type === MediaInteractions.Pause) {
             mediaEl.pause();
           }
           if (d.type === MediaInteractions.Play) {
-            if (mediaEl.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
-              mediaEl.play();
-            } else {
-              mediaEl.addEventListener('canplay', () => {
-                mediaEl.play();
-              });
-            }
+            // remove listener for 'canplay' event because play() is async and returns a promise
+            // i.e. media will evntualy start to play when data is loaded
+            // 'canplay' event fires even when currentTime attribute changes which may lead to 
+            // unexpeted behavior
+            mediaEl.play();
           }
         } catch (error) {
           if (this.config.showWarning) {
diff --git a/src/types.ts b/src/types.ts
index 0a040e3b09..88a8fe4ebb 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -474,11 +474,13 @@ export type inputCallback = (v: inputValue & { id: number }) => void;
 export const enum MediaInteractions {
   Play,
   Pause,
+  Seeked,
 }
 
 export type mediaInteractionParam = {
   type: MediaInteractions;
   id: number;
+  currentTime?: number
 };
 
 export type mediaInteractionCallback = (p: mediaInteractionParam) => void;
diff --git a/typings/types.d.ts b/typings/types.d.ts
index a71df5b909..735071b149 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -334,11 +334,13 @@ export declare type inputCallback = (v: inputValue & {
 }) => void;
 export declare const enum MediaInteractions {
     Play = 0,
-    Pause = 1
+    Pause = 1,
+    Seeked = 2
 }
 export declare type mediaInteractionParam = {
     type: MediaInteractions;
     id: number;
+    currentTime?: number;
 };
 export declare type mediaInteractionCallback = (p: mediaInteractionParam) => void;
 export declare type DocumentDimension = {

From 4e025c84ced9d308bbfda517c82dc57e719d0487 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 25 Jun 2021 22:44:20 +0800
Subject: [PATCH 355/524] remove unsed variables

---
 src/replay/index.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index 7efca4915a..0d46d0ee35 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -739,10 +739,6 @@ export class Replayer {
     };
     this.emitter.on(ReplayerEvents.Start, stateHandler);
     this.emitter.on(ReplayerEvents.Pause, stateHandler);
-    const unsubscribe = () => {
-      this.emitter.off(ReplayerEvents.Start, stateHandler);
-      this.emitter.off(ReplayerEvents.Pause, stateHandler);
-    };
     let count = 0;
     let resolved = 0;
     for (const event of this.service.state.context.events) {
@@ -915,7 +911,7 @@ export class Replayer {
           if (d.type === MediaInteractions.Play) {
             // remove listener for 'canplay' event because play() is async and returns a promise
             // i.e. media will evntualy start to play when data is loaded
-            // 'canplay' event fires even when currentTime attribute changes which may lead to 
+            // 'canplay' event fires even when currentTime attribute changes which may lead to
             // unexpeted behavior
             mediaEl.play();
           }

From 5fc6c193fd2a9dde15d295b805d4424a174cd7c5 Mon Sep 17 00:00:00 2001
From: yz-yu <yanzhen@smartx.com>
Date: Mon, 28 Jun 2021 00:09:09 +0800
Subject: [PATCH 356/524] plugin API (#598)

* temp: plugin API

* fix a bug in the replay handler and rename some type names.

* update integration test

* improve plugin types and handle legacy log data

* use different naming in record and replay bundles

* delete unreferenced types

Co-authored-by: Lucky Feng <294889365@qq.com>
---
 rollup.config.js                              |  17 +
 src/entries/all.ts                            |   2 +
 .../console}/record/error-stack-parser.ts     |   1 +
 src/plugins/console/record/index.ts           | 203 +++++++++++
 src/{ => plugins/console}/record/stringify.ts |   2 +-
 src/plugins/console/replay/index.ts           | 144 ++++++++
 src/record/index.ts                           |  60 +---
 src/record/observer.ts                        | 127 +------
 src/replay/index.ts                           | 108 +-----
 src/types.ts                                  | 134 ++------
 src/utils.ts                                  |  25 +-
 test/__snapshots__/integration.test.ts.snap   | 318 ++++++++++--------
 test/integration.test.ts                      |  11 +-
 typings/entries/all.d.ts                      |   2 +
 .../console/record/error-stack-parser.d.ts    |  37 ++
 typings/plugins/console/record/index.d.ts     |  41 +++
 typings/plugins/console/record/stringify.d.ts |   2 +
 typings/plugins/console/replay/index.d.ts     |   9 +
 typings/replay/index.d.ts                     |   2 -
 typings/types.d.ts                            |  87 ++---
 20 files changed, 753 insertions(+), 579 deletions(-)
 rename src/{ => plugins/console}/record/error-stack-parser.ts (99%)
 create mode 100644 src/plugins/console/record/index.ts
 rename src/{ => plugins/console}/record/stringify.ts (98%)
 create mode 100644 src/plugins/console/replay/index.ts
 create mode 100644 typings/plugins/console/record/error-stack-parser.d.ts
 create mode 100644 typings/plugins/console/record/index.d.ts
 create mode 100644 typings/plugins/console/record/stringify.d.ts
 create mode 100644 typings/plugins/console/replay/index.d.ts

diff --git a/rollup.config.js b/rollup.config.js
index 3381a518c5..25bd0dff34 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -33,6 +33,13 @@ function toAllPath(path) {
   return path.replace('rrweb', 'rrweb-all');
 }
 
+function toPluginPath(pluginName, stage) {
+  return (path) =>
+    path
+      .replace(/^([\w]+)\//, '$1/plugins/')
+      .replace('rrweb', `${pluginName}-${stage}`);
+}
+
 function toMinPath(path) {
   return path.replace(/\.js$/, '.min.js');
 }
@@ -74,6 +81,16 @@ const baseConfigs = [
     name: 'rrweb',
     pathFn: toAllPath,
   },
+  {
+    input: './src/plugins/console/record/index.ts',
+    name: 'rrwebConsoleRecord',
+    pathFn: toPluginPath('console', 'record'),
+  },
+  {
+    input: './src/plugins/console/replay/index.ts',
+    name: 'rrwebConsoleReplay',
+    pathFn: toPluginPath('console', 'replay'),
+  },
 ];
 
 let configs = [];
diff --git a/src/entries/all.ts b/src/entries/all.ts
index e5080d3940..d67ff92447 100644
--- a/src/entries/all.ts
+++ b/src/entries/all.ts
@@ -1,2 +1,4 @@
 export * from '../index';
 export * from '../packer';
+export * from '../plugins/console/record';
+export * from '../plugins/console/replay';
diff --git a/src/record/error-stack-parser.ts b/src/plugins/console/record/error-stack-parser.ts
similarity index 99%
rename from src/record/error-stack-parser.ts
rename to src/plugins/console/record/error-stack-parser.ts
index 311f07a706..da323a4f4c 100644
--- a/src/record/error-stack-parser.ts
+++ b/src/plugins/console/record/error-stack-parser.ts
@@ -1,3 +1,4 @@
+// tslint:disable
 /**
  * Class StackFrame is a fork of https://github.com/stacktracejs/stackframe/blob/master/stackframe.js
  * I fork it because:
diff --git a/src/plugins/console/record/index.ts b/src/plugins/console/record/index.ts
new file mode 100644
index 0000000000..250ffd2bbe
--- /dev/null
+++ b/src/plugins/console/record/index.ts
@@ -0,0 +1,203 @@
+import { listenerHandler, RecordPlugin } from '../../../types';
+import { stringify } from './stringify';
+import { StackFrame, ErrorStackParser } from './error-stack-parser';
+import { patch } from '../../../utils';
+
+export type StringifyOptions = {
+  // limit of string length
+  stringLengthLimit?: number;
+  /**
+   * limit of number of keys in an object
+   * if an object contains more keys than this limit, we would call its toString function directly
+   */
+  numOfKeysLimit: number;
+};
+
+type LogRecordOptions = {
+  level?: LogLevel[] | undefined;
+  lengthThreshold?: number;
+  stringifyOptions?: StringifyOptions;
+  logger?: Logger;
+};
+
+const defaultLogOptions: LogRecordOptions = {
+  level: [
+    'assert',
+    'clear',
+    'count',
+    'countReset',
+    'debug',
+    'dir',
+    'dirxml',
+    'error',
+    'group',
+    'groupCollapsed',
+    'groupEnd',
+    'info',
+    'log',
+    'table',
+    'time',
+    'timeEnd',
+    'timeLog',
+    'trace',
+    'warn',
+  ],
+  lengthThreshold: 1000,
+  logger: console,
+};
+
+export type LogData = {
+  level: LogLevel;
+  trace: string[];
+  payload: string[];
+};
+
+type logCallback = (p: LogData) => void;
+
+export type LogLevel =
+  | 'assert'
+  | 'clear'
+  | 'count'
+  | 'countReset'
+  | 'debug'
+  | 'dir'
+  | 'dirxml'
+  | 'error'
+  | 'group'
+  | 'groupCollapsed'
+  | 'groupEnd'
+  | 'info'
+  | 'log'
+  | 'table'
+  | 'time'
+  | 'timeEnd'
+  | 'timeLog'
+  | 'trace'
+  | 'warn';
+
+/* fork from interface Console */
+// all kinds of console functions
+export type Logger = {
+  assert?: typeof console.assert;
+  clear?: typeof console.clear;
+  count?: typeof console.count;
+  countReset?: typeof console.countReset;
+  debug?: typeof console.debug;
+  dir?: typeof console.dir;
+  dirxml?: typeof console.dirxml;
+  error?: typeof console.error;
+  group?: typeof console.group;
+  groupCollapsed?: typeof console.groupCollapsed;
+  groupEnd?: () => void;
+  info?: typeof console.info;
+  log?: typeof console.log;
+  table?: typeof console.table;
+  time?: typeof console.time;
+  timeEnd?: typeof console.timeEnd;
+  timeLog?: typeof console.timeLog;
+  trace?: typeof console.trace;
+  warn?: typeof console.warn;
+};
+
+function initLogObserver(
+  cb: logCallback,
+  logOptions: LogRecordOptions,
+): listenerHandler {
+  const logger = logOptions.logger;
+  if (!logger) {
+    return () => {};
+  }
+  let logCount = 0;
+  const cancelHandlers: listenerHandler[] = [];
+  // add listener to thrown errors
+  if (logOptions.level!.includes('error')) {
+    if (window) {
+      const originalOnError = window.onerror;
+      window.onerror = (
+        msg: Event | string,
+        file: string,
+        line: number,
+        col: number,
+        error: Error,
+      ) => {
+        if (originalOnError) {
+          originalOnError.apply(this, [msg, file, line, col, error]);
+        }
+        const trace: string[] = ErrorStackParser.parse(
+          error,
+        ).map((stackFrame: StackFrame) => stackFrame.toString());
+        const payload = [stringify(msg, logOptions.stringifyOptions)];
+        cb({
+          level: 'error',
+          trace,
+          payload,
+        });
+      };
+      cancelHandlers.push(() => {
+        window.onerror = originalOnError;
+      });
+    }
+  }
+  for (const levelType of logOptions.level!) {
+    cancelHandlers.push(replace(logger, levelType));
+  }
+  return () => {
+    cancelHandlers.forEach((h) => h());
+  };
+
+  /**
+   * replace the original console function and record logs
+   * @param logger the logger object such as Console
+   * @param level the name of log function to be replaced
+   */
+  function replace(_logger: Logger, level: LogLevel) {
+    if (!_logger[level]) {
+      return () => {};
+    }
+    // replace the logger.{level}. return a restore function
+    return patch(_logger, level, (original) => {
+      return (...args: Array<unknown>) => {
+        original.apply(this, args);
+        try {
+          const trace = ErrorStackParser.parse(new Error())
+            .map((stackFrame: StackFrame) => stackFrame.toString())
+            .splice(1); // splice(1) to omit the hijacked log function
+          const payload = args.map((s) =>
+            stringify(s, logOptions.stringifyOptions),
+          );
+          logCount++;
+          if (logCount < logOptions.lengthThreshold!) {
+            cb({
+              level,
+              trace,
+              payload,
+            });
+          } else if (logCount === logOptions.lengthThreshold) {
+            // notify the user
+            cb({
+              level: 'warn',
+              trace: [],
+              payload: [
+                stringify('The number of log records reached the threshold.'),
+              ],
+            });
+          }
+        } catch (error) {
+          original('rrweb logger error:', error, ...args);
+        }
+      };
+    });
+  }
+}
+
+export const PLUGIN_NAME = 'rrweb/console@1';
+
+export const getRecordConsolePlugin: (
+  options?: LogRecordOptions,
+) => RecordPlugin = (options) => ({
+  name: PLUGIN_NAME,
+  observer: initLogObserver,
+  options: options
+    ? Object.assign({}, defaultLogOptions, options)
+    : defaultLogOptions,
+});
diff --git a/src/record/stringify.ts b/src/plugins/console/record/stringify.ts
similarity index 98%
rename from src/record/stringify.ts
rename to src/plugins/console/record/stringify.ts
index b1c69b81b9..e67c35a982 100644
--- a/src/record/stringify.ts
+++ b/src/plugins/console/record/stringify.ts
@@ -4,7 +4,7 @@
  *
  */
 
-import { StringifyOptions } from '../types';
+import { StringifyOptions } from './index';
 
 /**
  * transfer the node path in Event to string
diff --git a/src/plugins/console/replay/index.ts b/src/plugins/console/replay/index.ts
new file mode 100644
index 0000000000..d54c5e114c
--- /dev/null
+++ b/src/plugins/console/replay/index.ts
@@ -0,0 +1,144 @@
+import { LogLevel, LogData, PLUGIN_NAME } from '../record';
+import {
+  eventWithTime,
+  EventType,
+  IncrementalSource,
+  ReplayPlugin,
+} from '../../../types';
+
+/**
+ * define an interface to replay log records
+ * (data: logData) => void> function to display the log data
+ */
+type ReplayLogger = Partial<Record<LogLevel, (data: LogData) => void>>;
+
+type LogReplayConfig = {
+  level?: LogLevel[] | undefined;
+  replayLogger: ReplayLogger | undefined;
+};
+
+const ORIGINAL_ATTRIBUTE_NAME = '__rrweb_original__';
+type PatchedConsoleLog = {
+  [ORIGINAL_ATTRIBUTE_NAME]: typeof console.log;
+};
+
+const defaultLogConfig: LogReplayConfig = {
+  level: [
+    'assert',
+    'clear',
+    'count',
+    'countReset',
+    'debug',
+    'dir',
+    'dirxml',
+    'error',
+    'group',
+    'groupCollapsed',
+    'groupEnd',
+    'info',
+    'log',
+    'table',
+    'time',
+    'timeEnd',
+    'timeLog',
+    'trace',
+    'warn',
+  ],
+  replayLogger: undefined,
+};
+
+class LogReplayPlugin {
+  private config: LogReplayConfig;
+
+  constructor(config?: LogReplayConfig) {
+    this.config = Object.assign(defaultLogConfig, config);
+  }
+
+  /**
+   * generate a console log replayer which implement the interface ReplayLogger
+   */
+  public getConsoleLogger(): ReplayLogger {
+    const replayLogger: ReplayLogger = {};
+    for (const level of this.config.level!) {
+      if (level === 'trace') {
+        replayLogger[level] = (data: LogData) => {
+          const logger = ((console.log as unknown) as PatchedConsoleLog)[
+            ORIGINAL_ATTRIBUTE_NAME
+          ]
+            ? ((console.log as unknown) as PatchedConsoleLog)[
+                ORIGINAL_ATTRIBUTE_NAME
+              ]
+            : console.log;
+          logger(
+            ...data.payload.map((s) => JSON.parse(s)),
+            this.formatMessage(data),
+          );
+        };
+      } else {
+        replayLogger[level] = (data: LogData) => {
+          const logger = ((console[level] as unknown) as PatchedConsoleLog)[
+            ORIGINAL_ATTRIBUTE_NAME
+          ]
+            ? ((console[level] as unknown) as PatchedConsoleLog)[
+                ORIGINAL_ATTRIBUTE_NAME
+              ]
+            : console[level];
+          logger(
+            ...data.payload.map((s) => JSON.parse(s)),
+            this.formatMessage(data),
+          );
+        };
+      }
+    }
+    return replayLogger;
+  }
+
+  /**
+   * format the trace data to a string
+   * @param data the log data
+   */
+  private formatMessage(data: LogData): string {
+    if (data.trace.length === 0) {
+      return '';
+    }
+    const stackPrefix = '\n\tat ';
+    let result = stackPrefix;
+    result += data.trace.join(stackPrefix);
+    return result;
+  }
+}
+
+export const getLogReplayPlugin: (options?: LogReplayConfig) => ReplayPlugin = (
+  options,
+) => {
+  const replayLogger =
+    options?.replayLogger || new LogReplayPlugin(options).getConsoleLogger();
+
+  return {
+    handler(event: eventWithTime, _isSync, context) {
+      let logData: LogData | null = null;
+      if (
+        event.type === EventType.IncrementalSnapshot &&
+        event.data.source === (IncrementalSource.Log as IncrementalSource)
+      ) {
+        logData = (event.data as unknown) as LogData;
+      } else if (
+        event.type === EventType.Plugin &&
+        event.data.plugin === PLUGIN_NAME
+      ) {
+        logData = event.data.payload as LogData;
+      }
+      if (logData) {
+        try {
+          if (typeof replayLogger[logData.level] === 'function') {
+            replayLogger[logData.level]!(logData);
+          }
+        } catch (error) {
+          if (context.replayer.config.showWarning) {
+            console.warn(error);
+          }
+        }
+      }
+    },
+  };
+};
diff --git a/src/record/index.ts b/src/record/index.ts
index 68f2625c23..69b350f209 100644
--- a/src/record/index.ts
+++ b/src/record/index.ts
@@ -16,7 +16,6 @@ import {
   recordOptions,
   IncrementalSource,
   listenerHandler,
-  LogRecordOptions,
   mutationCallbackParam,
   scrollCallback,
 } from '../types';
@@ -59,7 +58,7 @@ function record<T = eventWithTime>(
     mousemoveWait,
     recordCanvas = false,
     collectFonts = false,
-    recordLog = false,
+    plugins,
   } = options;
   // runtime checks for user options
   if (!emit) {
@@ -113,37 +112,6 @@ function record<T = eventWithTime>(
       : _slimDOMOptions
       ? _slimDOMOptions
       : {};
-  const defaultLogOptions: LogRecordOptions = {
-    level: [
-      'assert',
-      'clear',
-      'count',
-      'countReset',
-      'debug',
-      'dir',
-      'dirxml',
-      'error',
-      'group',
-      'groupCollapsed',
-      'groupEnd',
-      'info',
-      'log',
-      'table',
-      'time',
-      'timeEnd',
-      'timeLog',
-      'trace',
-      'warn',
-    ],
-    lengthThreshold: 1000,
-    logger: console,
-  };
-
-  const logOptions: LogRecordOptions = recordLog
-    ? recordLog === true
-      ? defaultLogOptions
-      : Object.assign({}, defaultLogOptions, recordLog)
-    : {};
 
   polyfill();
 
@@ -400,16 +368,6 @@ function record<T = eventWithTime>(
                 },
               }),
             ),
-          logCb: (p) =>
-            wrappedEmit(
-              wrapEvent({
-                type: EventType.IncrementalSnapshot,
-                data: {
-                  source: IncrementalSource.Log,
-                  ...p,
-                },
-              }),
-            ),
           blockClass,
           ignoreClass,
           maskTextClass,
@@ -422,12 +380,26 @@ function record<T = eventWithTime>(
           doc,
           maskInputFn,
           maskTextFn,
-          logOptions,
           blockSelector,
           slimDOMOptions,
           mirror,
           iframeManager,
           shadowDomManager,
+          plugins:
+            plugins?.map((p) => ({
+              observer: p.observer,
+              options: p.options,
+              callback: (payload: object) =>
+                wrappedEmit(
+                  wrapEvent({
+                    type: EventType.Plugin,
+                    data: {
+                      plugin: p.name,
+                      payload,
+                    },
+                  }),
+                ),
+            })) || [],
         },
         hooks,
       );
diff --git a/src/record/observer.ts b/src/record/observer.ts
index c356397361..6665162a41 100644
--- a/src/record/observer.ts
+++ b/src/record/observer.ts
@@ -37,17 +37,11 @@ import {
   fontParam,
   MaskInputFn,
   MaskTextFn,
-  logCallback,
-  LogRecordOptions,
-  Logger,
-  LogLevel,
   Mirror,
 } from '../types';
 import MutationBuffer from './mutation';
-import { stringify } from './stringify';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
-import { StackFrame, ErrorStackParser } from './error-stack-parser';
 
 type WindowWithStoredMutationObserver = Window & {
   __rrMutationObserver?: MutationObserver;
@@ -535,11 +529,16 @@ function initCanvasMutationObserver(
                     recordArgs[0] &&
                     recordArgs[0] instanceof HTMLCanvasElement
                   ) {
-                    const canvas = recordArgs[0]
-                    const ctx = canvas.getContext('2d')
-                    let imgd = ctx?.getImageData(0, 0, canvas.width, canvas.height)
+                    const canvas = recordArgs[0];
+                    const ctx = canvas.getContext('2d');
+                    let imgd = ctx?.getImageData(
+                      0,
+                      0,
+                      canvas.width,
+                      canvas.height,
+                    );
                     let pix = imgd?.data;
-                    recordArgs[0] = JSON.stringify(pix)
+                    recordArgs[0] = JSON.stringify(pix);
                   }
                 }
                 cb({
@@ -627,97 +626,6 @@ function initFontObserver(cb: fontCallback): listenerHandler {
   };
 }
 
-function initLogObserver(
-  cb: logCallback,
-  logOptions: LogRecordOptions,
-): listenerHandler {
-  const logger = logOptions.logger;
-  if (!logger) {
-    return () => {};
-  }
-  let logCount = 0;
-  const cancelHandlers: listenerHandler[] = [];
-  // add listener to thrown errors
-  if (logOptions.level!.includes('error')) {
-    if (window) {
-      const originalOnError = window.onerror;
-      window.onerror = (
-        msg: Event | string,
-        file: string,
-        line: number,
-        col: number,
-        error: Error,
-      ) => {
-        if (originalOnError) {
-          originalOnError.apply(this, [msg, file, line, col, error]);
-        }
-        const trace: string[] = ErrorStackParser.parse(
-          error,
-        ).map((stackFrame: StackFrame) => stackFrame.toString());
-        const payload = [stringify(msg, logOptions.stringifyOptions)];
-        cb({
-          level: 'error',
-          trace,
-          payload,
-        });
-      };
-      cancelHandlers.push(() => {
-        window.onerror = originalOnError;
-      });
-    }
-  }
-  for (const levelType of logOptions.level!) {
-    cancelHandlers.push(replace(logger, levelType));
-  }
-  return () => {
-    cancelHandlers.forEach((h) => h());
-  };
-
-  /**
-   * replace the original console function and record logs
-   * @param logger the logger object such as Console
-   * @param level the name of log function to be replaced
-   */
-  function replace(_logger: Logger, level: LogLevel) {
-    if (!_logger[level]) {
-      return () => {};
-    }
-    // replace the logger.{level}. return a restore function
-    return patch(_logger, level, (original) => {
-      return (...args: unknown[]) => {
-        original.apply(this, args);
-        try {
-          const trace = ErrorStackParser.parse(new Error())
-            .map((stackFrame: StackFrame) => stackFrame.toString())
-            .splice(1); // splice(1) to omit the hijacked log function
-          const payload = args.map((s) =>
-            stringify(s, logOptions.stringifyOptions),
-          );
-          logCount++;
-          if (logCount < logOptions.lengthThreshold!) {
-            cb({
-              level,
-              trace,
-              payload,
-            });
-          } else if (logCount === logOptions.lengthThreshold) {
-            // notify the user
-            cb({
-              level: 'warn',
-              trace: [],
-              payload: [
-                stringify('The number of log records reached the threshold.'),
-              ],
-            });
-          }
-        } catch (error) {
-          original('rrweb logger error:', error, ...args);
-        }
-      };
-    });
-  }
-}
-
 function mergeHooks(o: observerParam, hooks: hooksParam) {
   const {
     mutationCb,
@@ -730,7 +638,6 @@ function mergeHooks(o: observerParam, hooks: hooksParam) {
     styleSheetRuleCb,
     canvasMutationCb,
     fontCb,
-    logCb,
   } = o;
   o.mutationCb = (...p: Arguments<mutationCallBack>) => {
     if (hooks.mutation) {
@@ -792,12 +699,6 @@ function mergeHooks(o: observerParam, hooks: hooksParam) {
     }
     fontCb(...p);
   };
-  o.logCb = (...p: Arguments<logCallback>) => {
-    if (hooks.log) {
-      hooks.log(...p);
-    }
-    logCb(...p);
-  };
 }
 
 export function initObservers(
@@ -866,9 +767,11 @@ export function initObservers(
     ? initCanvasMutationObserver(o.canvasMutationCb, o.blockClass, o.mirror)
     : () => {};
   const fontObserver = o.collectFonts ? initFontObserver(o.fontCb) : () => {};
-  const logObserver = o.logOptions
-    ? initLogObserver(o.logCb, o.logOptions)
-    : () => {};
+  // plugins
+  const pluginHandlers: listenerHandler[] = [];
+  for (const plugin of o.plugins) {
+    pluginHandlers.push(plugin.observer(plugin.callback, plugin.options));
+  }
 
   return () => {
     mutationObserver.disconnect();
@@ -881,6 +784,6 @@ export function initObservers(
     styleSheetObserver();
     canvasMutationObserver();
     fontObserver();
-    logObserver();
+    pluginHandlers.forEach((h) => h());
   };
 }
diff --git a/src/replay/index.ts b/src/replay/index.ts
index 0d46d0ee35..0bdd644283 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -28,9 +28,6 @@ import {
   canvasMutationData,
   Mirror,
   ElementState,
-  LogReplayConfig,
-  logData,
-  ReplayLogger,
 } from '../types';
 import {
   createMirror,
@@ -54,11 +51,6 @@ const SKIP_TIME_INTERVAL = 5 * 1000;
 const mitt = (mittProxy as any).default || mittProxy;
 
 const REPLAY_CONSOLE_PREFIX = '[replayer]';
-const ORIGINAL_ATTRIBUTE_NAME = '__rrweb_original__';
-
-type PatchedConsoleLog = {
-  [ORIGINAL_ATTRIBUTE_NAME]: typeof console.log;
-};
 
 const defaultMouseTailConfig = {
   duration: 500,
@@ -67,31 +59,6 @@ const defaultMouseTailConfig = {
   strokeStyle: 'red',
 } as const;
 
-const defaultLogConfig: LogReplayConfig = {
-  level: [
-    'assert',
-    'clear',
-    'count',
-    'countReset',
-    'debug',
-    'dir',
-    'dirxml',
-    'error',
-    'group',
-    'groupCollapsed',
-    'groupEnd',
-    'info',
-    'log',
-    'table',
-    'time',
-    'timeEnd',
-    'timeLog',
-    'trace',
-    'warn',
-  ],
-  replayLogger: undefined,
-};
-
 export class Replayer {
   public wrapper: HTMLDivElement;
   public iframe: HTMLIFrameElement;
@@ -149,12 +116,8 @@ export class Replayer {
       UNSAFE_replayCanvas: false,
       pauseAnimation: true,
       mouseTail: defaultMouseTailConfig,
-      logConfig: defaultLogConfig,
     };
     this.config = Object.assign({}, defaultConfig, config);
-    if (!this.config.logConfig.replayLogger) {
-      this.config.logConfig.replayLogger = this.getConsoleLogger();
-    }
 
     this.handleResize = this.handleResize.bind(this);
     this.getCastFn = this.getCastFn.bind(this);
@@ -522,6 +485,11 @@ export class Replayer {
       if (castFn) {
         castFn();
       }
+
+      for (const plugin of this.config.plugins || []) {
+        plugin.handler(event, isSync, { replayer: this });
+      }
+
       this.service.send({ type: 'CAST_EVENT', payload: { event } });
 
       // events are kept sorted by timestamp, check if this is the last event
@@ -1046,19 +1014,6 @@ export class Replayer {
         }
         break;
       }
-      case IncrementalSource.Log: {
-        try {
-          const logData = e.data as logData;
-          const replayLogger = this.config.logConfig.replayLogger!;
-          if (typeof replayLogger[logData.level] === 'function') {
-            replayLogger[logData.level]!(logData);
-          }
-        } catch (error) {
-          if (this.config.showWarning) {
-            console.warn(error);
-          }
-        }
-      }
       default:
     }
   }
@@ -1378,59 +1333,6 @@ export class Replayer {
     }
   }
 
-  /**
-   * format the trace data to a string
-   * @param data the log data
-   */
-  private formatMessage(data: logData): string {
-    if (data.trace.length === 0) {
-      return '';
-    }
-    const stackPrefix = '\n\tat ';
-    let result = stackPrefix;
-    result += data.trace.join(stackPrefix);
-    return result;
-  }
-
-  /**
-   * generate a console log replayer which implement the interface ReplayLogger
-   */
-  private getConsoleLogger(): ReplayLogger {
-    const replayLogger: ReplayLogger = {};
-    for (const level of this.config.logConfig.level!) {
-      if (level === 'trace') {
-        replayLogger[level] = (data: logData) => {
-          const logger = ((console.log as unknown) as PatchedConsoleLog)[
-            ORIGINAL_ATTRIBUTE_NAME
-          ]
-            ? ((console.log as unknown) as PatchedConsoleLog)[
-                ORIGINAL_ATTRIBUTE_NAME
-              ]
-            : console.log;
-          logger(
-            ...data.payload.map((s) => JSON.parse(s)),
-            this.formatMessage(data),
-          );
-        };
-      } else {
-        replayLogger[level] = (data: logData) => {
-          const logger = ((console[level] as unknown) as PatchedConsoleLog)[
-            ORIGINAL_ATTRIBUTE_NAME
-          ]
-            ? ((console[level] as unknown) as PatchedConsoleLog)[
-                ORIGINAL_ATTRIBUTE_NAME
-              ]
-            : console[level];
-          logger(
-            ...data.payload.map((s) => JSON.parse(s)),
-            this.formatMessage(data),
-          );
-        };
-      }
-    }
-    return replayLogger;
-  }
-
   private legacy_resolveMissingNode(
     map: missingNodeMap,
     parent: Node,
diff --git a/src/types.ts b/src/types.ts
index 88a8fe4ebb..0acb0a1604 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -9,6 +9,7 @@ import { PackFn, UnpackFn } from './packer/base';
 import { FontFaceDescriptors } from 'css-font-loading-module';
 import { IframeManager } from './record/iframe-manager';
 import { ShadowDomManager } from './record/shadow-dom-manager';
+import type { Replayer } from './replay';
 
 export enum EventType {
   DomContentLoaded,
@@ -17,6 +18,7 @@ export enum EventType {
   IncrementalSnapshot,
   Meta,
   Custom,
+  Plugin,
 }
 
 export type domContentLoadedEvent = {
@@ -54,11 +56,6 @@ export type metaEvent = {
   };
 };
 
-export type logEvent = {
-  type: EventType.IncrementalSnapshot;
-  data: incrementalData;
-};
-
 export type customEvent<T = unknown> = {
   type: EventType.Custom;
   data: {
@@ -67,6 +64,14 @@ export type customEvent<T = unknown> = {
   };
 };
 
+export type pluginEvent<T = unknown> = {
+  type: EventType.Plugin;
+  data: {
+    plugin: string;
+    payload: T;
+  };
+};
+
 export type styleSheetEvent = {};
 
 export enum IncrementalSource {
@@ -130,10 +135,6 @@ export type fontData = {
   source: IncrementalSource.Font;
 } & fontParam;
 
-export type logData = {
-  source: IncrementalSource.Log;
-} & LogParam;
-
 export type incrementalData =
   | mutationData
   | mousemoveData
@@ -144,8 +145,7 @@ export type incrementalData =
   | mediaInteractionData
   | styleSheetRuleData
   | canvasMutationData
-  | fontData
-  | logData;
+  | fontData;
 
 export type event =
   | domContentLoadedEvent
@@ -153,8 +153,8 @@ export type event =
   | fullSnapshotEvent
   | incrementalSnapshotEvent
   | metaEvent
-  | logEvent
-  | customEvent;
+  | customEvent
+  | pluginEvent;
 
 export type eventWithTime = event & {
   timestamp: number;
@@ -191,6 +191,12 @@ export type SamplingStrategy = Partial<{
   input: 'all' | 'last';
 }>;
 
+export type RecordPlugin<TOptions = unknown> = {
+  name: string;
+  observer: (cb: Function, options: TOptions) => listenerHandler;
+  options: TOptions;
+};
+
 export type recordOptions<T> = {
   emit?: (e: T, isCheckout?: boolean) => void;
   checkoutEveryNth?: number;
@@ -211,9 +217,9 @@ export type recordOptions<T> = {
   sampling?: SamplingStrategy;
   recordCanvas?: boolean;
   collectFonts?: boolean;
+  plugins?: RecordPlugin[];
   // departed, please use sampling options
   mousemoveWait?: number;
-  recordLog?: boolean | LogRecordOptions;
 };
 
 export type observerParam = {
@@ -236,8 +242,6 @@ export type observerParam = {
   styleSheetRuleCb: styleSheetRuleCallback;
   canvasMutationCb: canvasMutationCallback;
   fontCb: fontCallback;
-  logCb: logCallback;
-  logOptions: LogRecordOptions;
   sampling: SamplingStrategy;
   recordCanvas: boolean;
   collectFonts: boolean;
@@ -246,6 +250,11 @@ export type observerParam = {
   mirror: Mirror;
   iframeManager: IframeManager;
   shadowDomManager: ShadowDomManager;
+  plugins: Array<{
+    observer: Function;
+    callback: Function;
+    options: unknown;
+  }>;
 };
 
 export type hooksParam = {
@@ -259,7 +268,6 @@ export type hooksParam = {
   styleSheetRule?: styleSheetRuleCallback;
   canvasMutation?: canvasMutationCallback;
   font?: fontCallback;
-  log?: logCallback;
 };
 
 // https://dom.spec.whatwg.org/#interface-mutationrecord
@@ -396,67 +404,8 @@ export type fontParam = {
   descriptors?: FontFaceDescriptors;
 };
 
-export type LogLevel =
-  | 'assert'
-  | 'clear'
-  | 'count'
-  | 'countReset'
-  | 'debug'
-  | 'dir'
-  | 'dirxml'
-  | 'error'
-  | 'group'
-  | 'groupCollapsed'
-  | 'groupEnd'
-  | 'info'
-  | 'log'
-  | 'table'
-  | 'time'
-  | 'timeEnd'
-  | 'timeLog'
-  | 'trace'
-  | 'warn';
-
-/* fork from interface Console */
-// all kinds of console functions
-export type Logger = {
-  assert?: typeof console.assert;
-  clear?: typeof console.clear;
-  count?: typeof console.count;
-  countReset?: typeof console.countReset;
-  debug?: typeof console.debug;
-  dir?: typeof console.dir;
-  dirxml?: typeof console.dirxml;
-  error?: typeof console.error;
-  group?: typeof console.group;
-  groupCollapsed?: typeof console.groupCollapsed;
-  groupEnd?: () => void;
-  info?: typeof console.info;
-  log?: typeof console.log;
-  table?: typeof console.table;
-  time?: typeof console.time;
-  timeEnd?: typeof console.timeEnd;
-  timeLog?: typeof console.timeLog;
-  trace?: typeof console.trace;
-  warn?: typeof console.warn;
-};
-
-/**
- * define an interface to replay log records
- * (data: logData) => void> function to display the log data
- */
-export type ReplayLogger = Partial<Record<LogLevel, (data: logData) => void>>;
-
-export type LogParam = {
-  level: LogLevel;
-  trace: string[];
-  payload: string[];
-};
-
 export type fontCallback = (p: fontParam) => void;
 
-export type logCallback = (p: LogParam) => void;
-
 export type viewportResizeDimension = {
   width: number;
   height: number;
@@ -480,7 +429,7 @@ export const enum MediaInteractions {
 export type mediaInteractionParam = {
   type: MediaInteractions;
   id: number;
-  currentTime?: number
+  currentTime?: number;
 };
 
 export type mediaInteractionCallback = (p: mediaInteractionParam) => void;
@@ -511,6 +460,13 @@ export type throttleOptions = {
 export type listenerHandler = () => void;
 export type hookResetter = () => void;
 
+export type ReplayPlugin = {
+  handler: (
+    event: eventWithTime,
+    isSync: boolean,
+    context: { replayer: Replayer },
+  ) => void;
+};
 export type playerConfig = {
   speed: number;
   maxSpeed: number;
@@ -534,12 +490,7 @@ export type playerConfig = {
         strokeStyle?: string;
       };
   unpackFn?: UnpackFn;
-  logConfig: LogReplayConfig;
-};
-
-export type LogReplayConfig = {
-  level?: LogLevel[] | undefined;
-  replayLogger: ReplayLogger | undefined;
+  plugins?: ReplayPlugin[];
 };
 
 export type playerMetaData = {
@@ -601,20 +552,3 @@ export type ElementState = {
   // [scrollLeft,scrollTop]
   scroll?: [number, number];
 };
-
-export type StringifyOptions = {
-  // limit of string length
-  stringLengthLimit?: number;
-  /**
-   * limit of number of keys in an object
-   * if an object contains more keys than this limit, we would call its toString function directly
-   */
-  numOfKeysLimit: number;
-};
-
-export type LogRecordOptions = {
-  level?: LogLevel[] | undefined;
-  lengthThreshold?: number;
-  stringifyOptions?: StringifyOptions;
-  logger?: Logger;
-};
diff --git a/src/utils.ts b/src/utils.ts
index 59ee18e9a1..9161afb00e 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -53,7 +53,7 @@ export function createMirror(): Mirror {
       delete this.map[id];
       if (n.childNodes) {
         n.childNodes.forEach((child) =>
-          this.removeNodeFromMap((child as Node) as INode),
+          this.removeNodeFromMap(child as Node as INode),
         );
       }
     },
@@ -275,7 +275,7 @@ export function isAncestorRemoved(target: INode, mirror: Mirror): boolean {
   if (!target.parentNode) {
     return true;
   }
-  return isAncestorRemoved((target.parentNode as unknown) as INode, mirror);
+  return isAncestorRemoved(target.parentNode as unknown as INode, mirror);
 }
 
 export function isTouchEvent(
@@ -286,13 +286,13 @@ export function isTouchEvent(
 
 export function polyfill(win = window) {
   if ('NodeList' in win && !win.NodeList.prototype.forEach) {
-    win.NodeList.prototype.forEach = (Array.prototype
-      .forEach as unknown) as NodeList['forEach'];
+    win.NodeList.prototype.forEach = Array.prototype
+      .forEach as unknown as NodeList['forEach'];
   }
 
   if ('DOMTokenList' in win && !win.DOMTokenList.prototype.forEach) {
-    win.DOMTokenList.prototype.forEach = (Array.prototype
-      .forEach as unknown) as DOMTokenList['forEach'];
+    win.DOMTokenList.prototype.forEach = Array.prototype
+      .forEach as unknown as DOMTokenList['forEach'];
   }
 
   // https://github.com/Financial-Times/polyfill-service/pull/183
@@ -322,6 +322,7 @@ export function needCastInSyncMode(event: eventWithTime): boolean {
       return false;
     case EventType.FullSnapshot:
     case EventType.Meta:
+    case EventType.Plugin:
       return true;
     default:
       break;
@@ -395,7 +396,7 @@ export class TreeIndex {
       const node = mirror.getNode(id);
       node?.childNodes.forEach((childNode) => {
         if ('__sn' in childNode) {
-          deepRemoveFromMirror(((childNode as unknown) as INode).__sn.id);
+          deepRemoveFromMirror((childNode as unknown as INode).__sn.id);
         }
       });
     };
@@ -459,12 +460,8 @@ export class TreeIndex {
     scrollMap: TreeIndex['scrollMap'];
     inputMap: TreeIndex['inputMap'];
   } {
-    const {
-      tree,
-      removeNodeMutations,
-      textMutations,
-      attributeMutations,
-    } = this;
+    const { tree, removeNodeMutations, textMutations, attributeMutations } =
+      this;
 
     const batchMutationData: mutationData = {
       source: IncrementalSource.Mutation,
@@ -653,5 +650,5 @@ export function getBaseDimension(
 export function hasShadowRoot<T extends Node>(
   n: T,
 ): n is T & { shadowRoot: ShadowRoot } {
-  return Boolean(((n as unknown) as Element)?.shadowRoot);
+  return Boolean((n as unknown as Element)?.shadowRoot);
 }
diff --git a/test/__snapshots__/integration.test.ts.snap b/test/__snapshots__/integration.test.ts.snap
index e74967e4fc..b033fee9c5 100644
--- a/test/__snapshots__/integration.test.ts.snap
+++ b/test/__snapshots__/integration.test.ts.snap
@@ -2855,213 +2855,247 @@ exports[`log 1`] = `
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"assert\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:2:37\\"
-      ],
-      \\"payload\\": [
-        \\"true\\",
-        \\"\\\\\\"assert\\\\\\"\\"
-      ]
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"assert\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:2:37\\"
+        ],
+        \\"payload\\": [
+          \\"true\\",
+          \\"\\\\\\"assert\\\\\\"\\"
+        ]
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"count\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:3:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"count\\\\\\"\\"
-      ]
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"count\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:3:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"count\\\\\\"\\"
+        ]
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"countReset\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:4:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"count\\\\\\"\\"
-      ]
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"countReset\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:4:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"count\\\\\\"\\"
+        ]
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"debug\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:5:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"debug\\\\\\"\\"
-      ]
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"debug\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:5:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"debug\\\\\\"\\"
+        ]
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"dir\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:6:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"dir\\\\\\"\\"
-      ]
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"dir\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:6:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"dir\\\\\\"\\"
+        ]
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"dirxml\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:7:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"dirxml\\\\\\"\\"
-      ]
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"dirxml\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:7:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"dirxml\\\\\\"\\"
+        ]
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"group\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:8:37\\"
-      ],
-      \\"payload\\": []
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"group\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:8:37\\"
+        ],
+        \\"payload\\": []
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"groupCollapsed\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:9:37\\"
-      ],
-      \\"payload\\": []
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"groupCollapsed\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:9:37\\"
+        ],
+        \\"payload\\": []
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"info\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:10:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"info\\\\\\"\\"
-      ]
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"info\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:10:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"info\\\\\\"\\"
+        ]
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"log\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:11:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"log\\\\\\"\\"
-      ]
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"log\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:11:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"log\\\\\\"\\"
+        ]
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"table\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:12:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"table\\\\\\"\\"
-      ]
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"table\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:12:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"table\\\\\\"\\"
+        ]
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"time\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:13:37\\"
-      ],
-      \\"payload\\": []
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"time\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:13:37\\"
+        ],
+        \\"payload\\": []
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"timeEnd\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:14:37\\"
-      ],
-      \\"payload\\": []
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"timeEnd\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:14:37\\"
+        ],
+        \\"payload\\": []
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"timeLog\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:15:37\\"
-      ],
-      \\"payload\\": []
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"timeLog\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:15:37\\"
+        ],
+        \\"payload\\": []
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"trace\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:16:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"trace\\\\\\"\\"
-      ]
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"trace\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:16:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"trace\\\\\\"\\"
+        ]
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"warn\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:17:37\\"
-      ],
-      \\"payload\\": [
-        \\"\\\\\\"warn\\\\\\"\\"
-      ]
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"warn\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:17:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"warn\\\\\\"\\"
+        ]
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 11,
-      \\"level\\": \\"clear\\",
-      \\"trace\\": [
-        \\"__puppeteer_evaluation_script__:18:37\\"
-      ],
-      \\"payload\\": []
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"clear\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:18:37\\"
+        ],
+        \\"payload\\": []
+      }
     }
   }
 ]"
diff --git a/test/integration.test.ts b/test/integration.test.ts
index 01bef4297d..29168e292a 100644
--- a/test/integration.test.ts
+++ b/test/integration.test.ts
@@ -77,7 +77,7 @@ describe('record integration tests', function (this: ISuite) {
         maskInputOptions: ${JSON.stringify(options.maskAllInputs)},
         maskTextFn: ${options.maskTextFn},
         recordCanvas: ${options.recordCanvas},
-        recordLog: ${options.recordLog},
+        plugins: ${options.plugins}        
       });
     </script>
     </body>
@@ -90,7 +90,12 @@ describe('record integration tests', function (this: ISuite) {
     this.browser = await launchPuppeteer();
 
     const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js');
-    this.code = fs.readFileSync(bundlePath, 'utf8');
+    const pluginsCode = [
+      path.resolve(__dirname, '../dist/plugins/console-record.min.js'),
+    ]
+      .map((path) => fs.readFileSync(path, 'utf8'))
+      .join();
+    this.code = fs.readFileSync(bundlePath, 'utf8') + pluginsCode;
   });
 
   after(async () => {
@@ -385,7 +390,7 @@ describe('record integration tests', function (this: ISuite) {
     await page.goto('about:blank');
     await page.setContent(
       getHtml.call(this, 'log.html', {
-        recordLog: true,
+        plugins: '[rrwebConsoleRecord.getRecordConsolePlugin()]',
       }),
     );
 
diff --git a/typings/entries/all.d.ts b/typings/entries/all.d.ts
index e5080d3940..d67ff92447 100644
--- a/typings/entries/all.d.ts
+++ b/typings/entries/all.d.ts
@@ -1,2 +1,4 @@
 export * from '../index';
 export * from '../packer';
+export * from '../plugins/console/record';
+export * from '../plugins/console/replay';
diff --git a/typings/plugins/console/record/error-stack-parser.d.ts b/typings/plugins/console/record/error-stack-parser.d.ts
new file mode 100644
index 0000000000..86a961da9b
--- /dev/null
+++ b/typings/plugins/console/record/error-stack-parser.d.ts
@@ -0,0 +1,37 @@
+export declare class StackFrame {
+    private fileName;
+    private functionName;
+    private lineNumber?;
+    private columnNumber?;
+    constructor(obj: {
+        fileName?: string;
+        functionName?: string;
+        lineNumber?: number;
+        columnNumber?: number;
+    });
+    toString(): string;
+}
+export declare const ErrorStackParser: {
+    parse: (error: Error) => StackFrame[];
+    extractLocation: (urlLike: string) => (string | undefined)[];
+    parseV8OrIE: (error: {
+        stack: string;
+    }) => StackFrame[];
+    parseFFOrSafari: (error: {
+        stack: string;
+    }) => StackFrame[];
+    parseOpera: (e: {
+        stacktrace?: string;
+        message: string;
+        stack?: string;
+    }) => StackFrame[];
+    parseOpera9: (e: {
+        message: string;
+    }) => StackFrame[];
+    parseOpera10: (e: {
+        stacktrace: string;
+    }) => StackFrame[];
+    parseOpera11: (error: {
+        stack: string;
+    }) => StackFrame[];
+};
diff --git a/typings/plugins/console/record/index.d.ts b/typings/plugins/console/record/index.d.ts
new file mode 100644
index 0000000000..9461dd1dfb
--- /dev/null
+++ b/typings/plugins/console/record/index.d.ts
@@ -0,0 +1,41 @@
+import { RecordPlugin } from '../../../types';
+export declare type StringifyOptions = {
+    stringLengthLimit?: number;
+    numOfKeysLimit: number;
+};
+declare type LogRecordOptions = {
+    level?: LogLevel[] | undefined;
+    lengthThreshold?: number;
+    stringifyOptions?: StringifyOptions;
+    logger?: Logger;
+};
+export declare type LogData = {
+    level: LogLevel;
+    trace: string[];
+    payload: string[];
+};
+export declare type LogLevel = 'assert' | 'clear' | 'count' | 'countReset' | 'debug' | 'dir' | 'dirxml' | 'error' | 'group' | 'groupCollapsed' | 'groupEnd' | 'info' | 'log' | 'table' | 'time' | 'timeEnd' | 'timeLog' | 'trace' | 'warn';
+export declare type Logger = {
+    assert?: typeof console.assert;
+    clear?: typeof console.clear;
+    count?: typeof console.count;
+    countReset?: typeof console.countReset;
+    debug?: typeof console.debug;
+    dir?: typeof console.dir;
+    dirxml?: typeof console.dirxml;
+    error?: typeof console.error;
+    group?: typeof console.group;
+    groupCollapsed?: typeof console.groupCollapsed;
+    groupEnd?: () => void;
+    info?: typeof console.info;
+    log?: typeof console.log;
+    table?: typeof console.table;
+    time?: typeof console.time;
+    timeEnd?: typeof console.timeEnd;
+    timeLog?: typeof console.timeLog;
+    trace?: typeof console.trace;
+    warn?: typeof console.warn;
+};
+export declare const PLUGIN_NAME = "rrweb/console@1";
+export declare const getRecordConsolePlugin: (options?: LogRecordOptions) => RecordPlugin;
+export {};
diff --git a/typings/plugins/console/record/stringify.d.ts b/typings/plugins/console/record/stringify.d.ts
new file mode 100644
index 0000000000..213bbf3511
--- /dev/null
+++ b/typings/plugins/console/record/stringify.d.ts
@@ -0,0 +1,2 @@
+import { StringifyOptions } from './index';
+export declare function stringify(obj: any, stringifyOptions?: StringifyOptions): string;
diff --git a/typings/plugins/console/replay/index.d.ts b/typings/plugins/console/replay/index.d.ts
new file mode 100644
index 0000000000..8d0fc9c052
--- /dev/null
+++ b/typings/plugins/console/replay/index.d.ts
@@ -0,0 +1,9 @@
+import { LogLevel, LogData } from '../record';
+import { ReplayPlugin } from '../../../types';
+declare type ReplayLogger = Partial<Record<LogLevel, (data: LogData) => void>>;
+declare type LogReplayConfig = {
+    level?: LogLevel[] | undefined;
+    replayLogger: ReplayLogger | undefined;
+};
+export declare const getLogReplayPlugin: (options?: LogReplayConfig) => ReplayPlugin;
+export {};
diff --git a/typings/replay/index.d.ts b/typings/replay/index.d.ts
index 0a2af1c84b..fc9302092b 100644
--- a/typings/replay/index.d.ts
+++ b/typings/replay/index.d.ts
@@ -50,8 +50,6 @@ export declare class Replayer {
     private applyMutation;
     private applyScroll;
     private applyInput;
-    private formatMessage;
-    private getConsoleLogger;
     private legacy_resolveMissingNode;
     private moveAndHover;
     private drawMouseTail;
diff --git a/typings/types.d.ts b/typings/types.d.ts
index 735071b149..a80334e47e 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -3,13 +3,15 @@ import { PackFn, UnpackFn } from './packer/base';
 import { FontFaceDescriptors } from 'css-font-loading-module';
 import { IframeManager } from './record/iframe-manager';
 import { ShadowDomManager } from './record/shadow-dom-manager';
+import type { Replayer } from './replay';
 export declare enum EventType {
     DomContentLoaded = 0,
     Load = 1,
     FullSnapshot = 2,
     IncrementalSnapshot = 3,
     Meta = 4,
-    Custom = 5
+    Custom = 5,
+    Plugin = 6
 }
 export declare type domContentLoadedEvent = {
     type: EventType.DomContentLoaded;
@@ -41,10 +43,6 @@ export declare type metaEvent = {
         height: number;
     };
 };
-export declare type logEvent = {
-    type: EventType.IncrementalSnapshot;
-    data: incrementalData;
-};
 export declare type customEvent<T = unknown> = {
     type: EventType.Custom;
     data: {
@@ -52,6 +50,13 @@ export declare type customEvent<T = unknown> = {
         payload: T;
     };
 };
+export declare type pluginEvent<T = unknown> = {
+    type: EventType.Plugin;
+    data: {
+        plugin: string;
+        payload: T;
+    };
+};
 export declare type styleSheetEvent = {};
 export declare enum IncrementalSource {
     Mutation = 0,
@@ -100,11 +105,8 @@ export declare type canvasMutationData = {
 export declare type fontData = {
     source: IncrementalSource.Font;
 } & fontParam;
-export declare type logData = {
-    source: IncrementalSource.Log;
-} & LogParam;
-export declare type incrementalData = mutationData | mousemoveData | mouseInteractionData | scrollData | viewportResizeData | inputData | mediaInteractionData | styleSheetRuleData | canvasMutationData | fontData | logData;
-export declare type event = domContentLoadedEvent | loadedEvent | fullSnapshotEvent | incrementalSnapshotEvent | metaEvent | logEvent | customEvent;
+export declare type incrementalData = mutationData | mousemoveData | mouseInteractionData | scrollData | viewportResizeData | inputData | mediaInteractionData | styleSheetRuleData | canvasMutationData | fontData;
+export declare type event = domContentLoadedEvent | loadedEvent | fullSnapshotEvent | incrementalSnapshotEvent | metaEvent | customEvent | pluginEvent;
 export declare type eventWithTime = event & {
     timestamp: number;
     delay?: number;
@@ -118,6 +120,11 @@ export declare type SamplingStrategy = Partial<{
     scroll: number;
     input: 'all' | 'last';
 }>;
+export declare type RecordPlugin<TOptions = unknown> = {
+    name: string;
+    observer: (cb: Function, options: TOptions) => listenerHandler;
+    options: TOptions;
+};
 export declare type recordOptions<T> = {
     emit?: (e: T, isCheckout?: boolean) => void;
     checkoutEveryNth?: number;
@@ -138,8 +145,8 @@ export declare type recordOptions<T> = {
     sampling?: SamplingStrategy;
     recordCanvas?: boolean;
     collectFonts?: boolean;
+    plugins?: RecordPlugin[];
     mousemoveWait?: number;
-    recordLog?: boolean | LogRecordOptions;
 };
 export declare type observerParam = {
     mutationCb: mutationCallBack;
@@ -161,8 +168,6 @@ export declare type observerParam = {
     styleSheetRuleCb: styleSheetRuleCallback;
     canvasMutationCb: canvasMutationCallback;
     fontCb: fontCallback;
-    logCb: logCallback;
-    logOptions: LogRecordOptions;
     sampling: SamplingStrategy;
     recordCanvas: boolean;
     collectFonts: boolean;
@@ -171,6 +176,11 @@ export declare type observerParam = {
     mirror: Mirror;
     iframeManager: IframeManager;
     shadowDomManager: ShadowDomManager;
+    plugins: Array<{
+        observer: Function;
+        callback: Function;
+        options: unknown;
+    }>;
 };
 export declare type hooksParam = {
     mutation?: mutationCallBack;
@@ -183,7 +193,6 @@ export declare type hooksParam = {
     styleSheetRule?: styleSheetRuleCallback;
     canvasMutation?: canvasMutationCallback;
     font?: fontCallback;
-    log?: logCallback;
 };
 export declare type mutationRecord = {
     type: string;
@@ -290,36 +299,7 @@ export declare type fontParam = {
     buffer: boolean;
     descriptors?: FontFaceDescriptors;
 };
-export declare type LogLevel = 'assert' | 'clear' | 'count' | 'countReset' | 'debug' | 'dir' | 'dirxml' | 'error' | 'group' | 'groupCollapsed' | 'groupEnd' | 'info' | 'log' | 'table' | 'time' | 'timeEnd' | 'timeLog' | 'trace' | 'warn';
-export declare type Logger = {
-    assert?: typeof console.assert;
-    clear?: typeof console.clear;
-    count?: typeof console.count;
-    countReset?: typeof console.countReset;
-    debug?: typeof console.debug;
-    dir?: typeof console.dir;
-    dirxml?: typeof console.dirxml;
-    error?: typeof console.error;
-    group?: typeof console.group;
-    groupCollapsed?: typeof console.groupCollapsed;
-    groupEnd?: () => void;
-    info?: typeof console.info;
-    log?: typeof console.log;
-    table?: typeof console.table;
-    time?: typeof console.time;
-    timeEnd?: typeof console.timeEnd;
-    timeLog?: typeof console.timeLog;
-    trace?: typeof console.trace;
-    warn?: typeof console.warn;
-};
-export declare type ReplayLogger = Partial<Record<LogLevel, (data: logData) => void>>;
-export declare type LogParam = {
-    level: LogLevel;
-    trace: string[];
-    payload: string[];
-};
 export declare type fontCallback = (p: fontParam) => void;
-export declare type logCallback = (p: LogParam) => void;
 export declare type viewportResizeDimension = {
     width: number;
     height: number;
@@ -363,6 +343,11 @@ export declare type throttleOptions = {
 };
 export declare type listenerHandler = () => void;
 export declare type hookResetter = () => void;
+export declare type ReplayPlugin = {
+    handler: (event: eventWithTime, isSync: boolean, context: {
+        replayer: Replayer;
+    }) => void;
+};
 export declare type playerConfig = {
     speed: number;
     maxSpeed: number;
@@ -384,11 +369,7 @@ export declare type playerConfig = {
         strokeStyle?: string;
     };
     unpackFn?: UnpackFn;
-    logConfig: LogReplayConfig;
-};
-export declare type LogReplayConfig = {
-    level?: LogLevel[] | undefined;
-    replayLogger: ReplayLogger | undefined;
+    plugins?: ReplayPlugin[];
 };
 export declare type playerMetaData = {
     startTime: number;
@@ -436,14 +417,4 @@ export declare type MaskTextFn = (text: string) => string;
 export declare type ElementState = {
     scroll?: [number, number];
 };
-export declare type StringifyOptions = {
-    stringLengthLimit?: number;
-    numOfKeysLimit: number;
-};
-export declare type LogRecordOptions = {
-    level?: LogLevel[] | undefined;
-    lengthThreshold?: number;
-    stringifyOptions?: StringifyOptions;
-    logger?: Logger;
-};
 export {};

From 1ae74b2d0486de08d63b82a76a149e8c94c3ed87 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 28 Jun 2021 07:28:10 +0800
Subject: [PATCH 357/524] Bump color-string from 1.5.4 to 1.5.5 (#599)

Bumps [color-string](https://github.com/Qix-/color-string) from 1.5.4 to 1.5.5.
- [Release notes](https://github.com/Qix-/color-string/releases)
- [Changelog](https://github.com/Qix-/color-string/blob/master/CHANGELOG.md)
- [Commits](https://github.com/Qix-/color-string/compare/1.5.4...1.5.5)

---
updated-dependencies:
- dependency-name: color-string
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 0d7e304372..9883643f7e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -567,9 +567,9 @@ color-name@^1.0.0, color-name@~1.1.4:
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
 color-string@^1.5.4:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.4.tgz#dd51cd25cfee953d138fe4002372cc3d0e504cb6"
-  integrity sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.5.tgz#65474a8f0e7439625f3d27a6a19d89fc45223014"
+  integrity sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==
   dependencies:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"

From 239259cee85ff42a12c706d27dbff325911d7da4 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Mon, 28 Jun 2021 18:00:32 +0200
Subject: [PATCH 358/524] Fixes `dist/plugins/console-record.min.js` needed for
 tests #601 (#603)

---
 rollup.config.js | 49 +++++++++++++++++++++++++++++++++---------------
 1 file changed, 34 insertions(+), 15 deletions(-)

diff --git a/rollup.config.js b/rollup.config.js
index 25bd0dff34..c4cd1c2569 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -162,27 +162,46 @@ for (const c of baseConfigs) {
 }
 
 if (process.env.BROWSER_ONLY) {
-  configs = {
-    input: './src/index.ts',
-    plugins: [
+  const browserOnlyBaseConfigs = [
+    {
+      input: './src/index.ts',
+      name: 'rrweb',
+      pathFn: (p) => p,
+    },
+    {
+      input: './src/plugins/console/record/index.ts',
+      name: 'rrwebConsoleRecord',
+      pathFn: toPluginPath('console', 'record'),
+    },
+  ];
+
+  configs = [];
+
+  for (const c of browserOnlyBaseConfigs) {
+    const plugins = [
       resolve({ browser: true }),
       typescript(),
       postcss({
-        extract: true,
-        minimize: true,
+        extract: false,
+        inject: false,
         sourceMap: true,
       }),
       terser(),
-    ],
-    output: [
-      {
-        name: 'rrweb',
-        format: 'iife',
-        file: toMinPath(pkg.unpkg),
-        sourcemap: true,
-      },
-    ],
-  };
+    ];
+
+    configs.push({
+      input: c.input,
+      plugins,
+      output: [
+        {
+          name: c.name,
+          format: 'iife',
+          file: toMinPath(c.pathFn(pkg.unpkg)),
+          sourcemap: true,
+        },
+      ],
+    });
+  }
 }
 
 export default configs;

From ec08be02410a329bb3cb5712ab7c6512f2eb1d8e Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Tue, 29 Jun 2021 10:37:16 +0200
Subject: [PATCH 359/524] Docs: update link to list of input values (#604)

* Update url to list of types

* Docs: Update list of inputs (zh_CN)
---
 guide.md       | 2 +-
 guide.zh_CN.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/guide.md b/guide.md
index f40bc4074b..957b5b6736 100644
--- a/guide.md
+++ b/guide.md
@@ -146,7 +146,7 @@ The parameter of `rrweb.record` accepts the following options.
 | maskTextClass    | 'rr-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-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L72)          |
+| maskInputOptions | { password: true } | mask some kinds of input \*<br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/0bb95f1ee77fef03166a68f75b959ad997171442/src/types.ts#L77-L95)          |
 | maskInputFn      | -                  | customize mask input content recording logic                                                                                                                             |
 | maskTextFn       | -                  | customize mask text content recording logic                                                                                                                              |
 | slimDOMOptions   | {}                 | remove unnecessary parts of the DOM <br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91) |
diff --git a/guide.zh_CN.md b/guide.zh_CN.md
index b17d478bfd..c3eef6c5e8 100644
--- a/guide.zh_CN.md
+++ b/guide.zh_CN.md
@@ -142,7 +142,7 @@ setInterval(save, 10 * 1000);
 | maskTextClass    | 'rr-mask'          | 字符串或正则表达式，可用于自定义忽略元素text内容的类名，详见[“隐私”](#隐私)章节                                                                                    |
 | maskTextSelector | null               | 所有element.matches(maskTextSelector)为true的元素及其子元素的text内容将会被屏蔽                                                                                    |
 | maskAllInputs    | false              | 将所有输入内容记录为 \*                                                                                                                                            |
-| maskInputOptions | { password: true } | 选择将特定类型的输入框内容记录为 \*<br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L72) |
+| maskInputOptions | { password: true } | 选择将特定类型的输入框内容记录为 \*<br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/0bb95f1ee77fef03166a68f75b959ad997171442/src/types.ts#L77-L95) |
 | maskInputFn      | -                  | 自定义特定类型的输入框内容记录逻辑                                                                                                                                 |
 | maskTextFn       | -                  | 自定义文字内容的记录逻辑                                                                                                                                           |
 | slimDOMOptions   | {}                 | 去除 DOM 中不必要的部分 <br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91)            |

From b96e9e3632fc97ae5dd291f8bc27a41d84bce0df Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 29 Jun 2021 17:41:57 +0800
Subject: [PATCH 360/524] improve
 https://github.com/rrweb-io/rrweb-player/issues/12

---
 guide.md       |  7 ++++++-
 guide.zh_CN.md | 49 +++++++++++++++++++++++++++----------------------
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/guide.md b/guide.md
index 957b5b6736..8a44b28959 100644
--- a/guide.md
+++ b/guide.md
@@ -146,7 +146,7 @@ The parameter of `rrweb.record` accepts the following options.
 | maskTextClass    | 'rr-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-snapshot/blob/0bb95f1ee77fef03166a68f75b959ad997171442/src/types.ts#L77-L95)          |
+| maskInputOptions | { password: true } | mask some kinds of input \*<br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/0bb95f1ee77fef03166a68f75b959ad997171442/src/types.ts#L77-L95)      |
 | maskInputFn      | -                  | customize mask input content recording logic                                                                                                                             |
 | maskTextFn       | -                  | customize mask text content recording logic                                                                                                                              |
 | slimDOMOptions   | {}                 | remove unnecessary parts of the DOM <br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91) |
@@ -323,6 +323,11 @@ Or installed by using NPM：
 npm install --save rrweb-player
 ```
 
+```js
+import rrwebPlayer from 'rrweb-player';
+import 'rrweb-player/dist/style.css';
+```
+
 ##### Usage
 
 ```js
diff --git a/guide.zh_CN.md b/guide.zh_CN.md
index c3eef6c5e8..87661f8b52 100644
--- a/guide.zh_CN.md
+++ b/guide.zh_CN.md
@@ -131,28 +131,28 @@ setInterval(save, 10 * 1000);
 
 `rrweb.record(config)` 的 config 部分接受以下参数
 
-| key              | 默认值             | 功能                                                                                                                                                               |
-| ---------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| emit             | 必填               | 获取当前录制的数据                                                                                                                                                 |
-| checkoutEveryNth | -                  | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                       |
-| checkoutEveryNms | -                  | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                         |
-| blockClass       | 'rr-block'         | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节                                                                                            |
-| blockSelector    | null               | 所有element.matches(blockSelector)为true的元素都不会被录制，回放时取而代之的是一个同等宽高的占位元素                                                               |
-| ignoreClass      | 'rr-ignore'        | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节                                                                                            |
-| maskTextClass    | 'rr-mask'          | 字符串或正则表达式，可用于自定义忽略元素text内容的类名，详见[“隐私”](#隐私)章节                                                                                    |
-| maskTextSelector | null               | 所有element.matches(maskTextSelector)为true的元素及其子元素的text内容将会被屏蔽                                                                                    |
-| maskAllInputs    | false              | 将所有输入内容记录为 \*                                                                                                                                            |
+| key              | 默认值             | 功能                                                                                                                                                                   |
+| ---------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| emit             | 必填               | 获取当前录制的数据                                                                                                                                                     |
+| checkoutEveryNth | -                  | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                           |
+| checkoutEveryNms | -                  | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                             |
+| blockClass       | 'rr-block'         | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节                                                                                                |
+| blockSelector    | null               | 所有 element.matches(blockSelector)为 true 的元素都不会被录制，回放时取而代之的是一个同等宽高的占位元素                                                                |
+| ignoreClass      | 'rr-ignore'        | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节                                                                                                |
+| maskTextClass    | 'rr-mask'          | 字符串或正则表达式，可用于自定义忽略元素 text 内容的类名，详见[“隐私”](#隐私)章节                                                                                      |
+| maskTextSelector | null               | 所有 element.matches(maskTextSelector)为 true 的元素及其子元素的 text 内容将会被屏蔽                                                                                   |
+| maskAllInputs    | false              | 将所有输入内容记录为 \*                                                                                                                                                |
 | maskInputOptions | { password: true } | 选择将特定类型的输入框内容记录为 \*<br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/0bb95f1ee77fef03166a68f75b959ad997171442/src/types.ts#L77-L95) |
-| maskInputFn      | -                  | 自定义特定类型的输入框内容记录逻辑                                                                                                                                 |
-| maskTextFn       | -                  | 自定义文字内容的记录逻辑                                                                                                                                           |
-| slimDOMOptions   | {}                 | 去除 DOM 中不必要的部分 <br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91)            |
-| inlineStylesheet | true               | 是否将样式表内联                                                                                                                                                   |
-| hooks            | {}                 | 各类事件的回调<br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                              |
-| packFn           | -                  | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                         |
-| sampling         | -                  | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                         |
-| recordCanvas     | false              | 是否记录 canvas 内容                                                                                                                                               |
-| collectFonts     | false              | 是否记录页面中的字体文件                                                                                                                                           |
-| recordLog        | false              | 是否记录 console 输出，详见[console 录制和播放](./docs/recipes/console.zh_CN.md)                                                                                   |
+| maskInputFn      | -                  | 自定义特定类型的输入框内容记录逻辑                                                                                                                                     |
+| maskTextFn       | -                  | 自定义文字内容的记录逻辑                                                                                                                                               |
+| slimDOMOptions   | {}                 | 去除 DOM 中不必要的部分 <br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91)                |
+| inlineStylesheet | true               | 是否将样式表内联                                                                                                                                                       |
+| hooks            | {}                 | 各类事件的回调<br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                                  |
+| packFn           | -                  | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                             |
+| sampling         | -                  | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                             |
+| recordCanvas     | false              | 是否记录 canvas 内容                                                                                                                                                   |
+| collectFonts     | false              | 是否记录页面中的字体文件                                                                                                                                               |
+| recordLog        | false              | 是否记录 console 输出，详见[console 录制和播放](./docs/recipes/console.zh_CN.md)                                                                                       |
 
 #### 隐私
 
@@ -160,7 +160,7 @@ setInterval(save, 10 * 1000);
 
 - 在 HTML 元素中添加类名 `.rr-block` 将会避免该元素及其子元素被录制，回放时取而代之的是一个同等宽高的占位元素。
 - 在 HTML 元素中添加类名 `.rr-ignore` 将会避免录制该元素的输入事件。
-- 所有带有`.rr-mask`类名的元素及其子元素的text内容将会被屏蔽。
+- 所有带有`.rr-mask`类名的元素及其子元素的 text 内容将会被屏蔽。
 - `input[type="password"]` 类型的密码输入框默认不会录制输入事件。
 - 配置中还有更为丰富的隐私保护选项。
 
@@ -319,6 +319,11 @@ rrweb-player 同样可以使用 CDN 方式安装：
 npm install --save rrweb-player
 ```
 
+```js
+import rrwebPlayer from 'rrweb-player';
+import 'rrweb-player/dist/style.css';
+```
+
 ##### 使用
 
 通过 props 传入 events 数据及配置项

From b1a8b6926af336cded2b27668a4afd298b59321f Mon Sep 17 00:00:00 2001
From: bachmanity1 <81428651+bachmanity1@users.noreply.github.com>
Date: Tue, 29 Jun 2021 19:07:47 +0900
Subject: [PATCH 361/524] add keepIframeSrcFn option (#81)

* add allowIframe option to snapshot

* rename allowIframe to keepIframeSrcFn
---
 src/rebuild.ts        |  4 +---
 src/snapshot.ts       | 13 ++++++++++++-
 src/types.ts          |  3 +++
 typings/snapshot.d.ts |  4 +++-
 typings/types.d.ts    |  1 +
 5 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index be8cd8f00a..ecf94cc5d9 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -154,9 +154,7 @@ function buildNode(
             node.appendChild(child);
             continue;
           }
-          if (tagName === 'iframe' && name === 'src') {
-            continue;
-          }
+          
           try {
             if (n.isSVG && name === 'xlink:href') {
               node.setAttributeNS('http://www.w3.org/1999/xlink', name, value);
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 6d2fe8ff2d..2a80d75561 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -8,6 +8,7 @@ import {
   MaskInputOptions,
   SlimDOMOptions,
   MaskTextFn,
+  KeepIframeSrcFn,
 } from './types';
 import { isElement, isShadowRoot } from './utils';
 
@@ -348,6 +349,7 @@ function serializeNode(
     maskInputOptions: MaskInputOptions;
     maskTextFn: MaskTextFn | undefined;
     recordCanvas: boolean;
+    keepIframeSrcFn: KeepIframeSrcFn;
   },
 ): serializedNode | false {
   const {
@@ -360,6 +362,7 @@ function serializeNode(
     maskInputOptions = {},
     maskTextFn,
     recordCanvas,
+    keepIframeSrcFn
   } = options;
   // Only record root id when document object is not the base document
   let rootId: number | undefined;
@@ -483,7 +486,7 @@ function serializeNode(
         };
       }
       // iframe
-      if (tagName === 'iframe') {
+      if (tagName === 'iframe' && !keepIframeSrcFn(attributes.src as string)) {
         delete attributes.src;
       }
       return {
@@ -648,6 +651,7 @@ export function serializeNodeWithId(
     maskInputOptions?: MaskInputOptions;
     maskTextFn: MaskTextFn | undefined;
     slimDOMOptions: SlimDOMOptions;
+    keepIframeSrcFn?: KeepIframeSrcFn;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
@@ -671,6 +675,7 @@ export function serializeNodeWithId(
     onSerialize,
     onIframeLoad,
     iframeLoadTimeout = 5000,
+    keepIframeSrcFn = () => false,
   } = options;
   let { preserveWhiteSpace = true } = options;
   const _serializedNode = serializeNode(n, {
@@ -683,6 +688,7 @@ export function serializeNodeWithId(
     maskInputOptions,
     maskTextFn,
     recordCanvas,
+    keepIframeSrcFn,
   });
   if (!_serializedNode) {
     // TODO: dev only
@@ -750,6 +756,7 @@ export function serializeNodeWithId(
       onSerialize,
       onIframeLoad,
       iframeLoadTimeout,
+      keepIframeSrcFn,
     };
     for (const childN of Array.from(n.childNodes)) {
       const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
@@ -800,6 +807,7 @@ export function serializeNodeWithId(
             onSerialize,
             onIframeLoad,
             iframeLoadTimeout,
+            keepIframeSrcFn,
           });
 
           if (serializedIframeNode) {
@@ -830,6 +838,7 @@ function snapshot(
     onSerialize?: (n: INode) => unknown;
     onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
     iframeLoadTimeout?: number;
+    keepIframeSrcFn?: KeepIframeSrcFn;
   },
 ): [serializedNodeWithId | null, idNodeMap] {
   const {
@@ -846,6 +855,7 @@ function snapshot(
     onSerialize,
     onIframeLoad,
     iframeLoadTimeout,
+    keepIframeSrcFn = () => false,
   } = options || {};
   const idNodeMap: idNodeMap = {};
   const maskInputOptions: MaskInputOptions =
@@ -909,6 +919,7 @@ function snapshot(
       onSerialize,
       onIframeLoad,
       iframeLoadTimeout,
+      keepIframeSrcFn,
     }),
     idNodeMap,
   ];
diff --git a/src/types.ts b/src/types.ts
index 0a3d2ce2fc..9b2a62866e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -108,3 +108,6 @@ export type SlimDOMOptions = Partial<{
 }>;
 
 export type MaskTextFn = (text: string) => string;
+
+export type KeepIframeSrcFn = (src: string) => boolean;
+
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index 0581fedafe..6db21b7155 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -1,4 +1,4 @@
-import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions, SlimDOMOptions, MaskTextFn } from './types';
+import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions, SlimDOMOptions, MaskTextFn, KeepIframeSrcFn } from './types';
 export declare const IGNORED_NODE = -2;
 export declare function absoluteToStylesheet(cssText: string | null, href: string): string;
 export declare function absoluteToDoc(doc: Document, attributeValue: string): string;
@@ -17,6 +17,7 @@ export declare function serializeNodeWithId(n: Node | INode, options: {
     maskInputOptions?: MaskInputOptions;
     maskTextFn: MaskTextFn | undefined;
     slimDOMOptions: SlimDOMOptions;
+    keepIframeSrcFn?: KeepIframeSrcFn;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
@@ -37,6 +38,7 @@ declare function snapshot(n: Document, options?: {
     onSerialize?: (n: INode) => unknown;
     onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
     iframeLoadTimeout?: number;
+    keepIframeSrcFn?: KeepIframeSrcFn;
 }): [serializedNodeWithId | null, idNodeMap];
 export declare function visitSnapshot(node: serializedNodeWithId, onVisit: (node: serializedNodeWithId) => unknown): void;
 export declare function cleanupSnapshot(): void;
diff --git a/typings/types.d.ts b/typings/types.d.ts
index c43cccbe6c..93267fa20e 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -88,3 +88,4 @@ export declare type SlimDOMOptions = Partial<{
     headMetaVerification: boolean;
 }>;
 export declare type MaskTextFn = (text: string) => string;
+export declare type KeepIframeSrcFn = (src: string) => boolean;

From 778b22dc8163fbf9c5bb4b5ed16857b297e52fb6 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 29 Jun 2021 18:37:49 +0800
Subject: [PATCH 362/524] format code

---
 src/rebuild.ts  | 6 +++---
 src/snapshot.ts | 6 +++---
 src/types.ts    | 1 -
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/rebuild.ts b/src/rebuild.ts
index ecf94cc5d9..c932253647 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -154,7 +154,7 @@ function buildNode(
             node.appendChild(child);
             continue;
           }
-          
+
           try {
             if (n.isSVG && name === 'xlink:href') {
               node.setAttributeNS('http://www.w3.org/1999/xlink', name, value);
@@ -269,7 +269,7 @@ export function buildNodeWithSN(
   }
   if (n.rootId) {
     console.assert(
-      (map[n.rootId] as unknown as Document) === doc,
+      ((map[n.rootId] as unknown) as Document) === doc,
       'Target document should has the same root id.',
     );
   }
@@ -332,7 +332,7 @@ function handleScroll(node: INode) {
   if (n.type !== NodeType.Element) {
     return;
   }
-  const el = node as Node as HTMLElement;
+  const el = (node as Node) as HTMLElement;
   for (const name in n.attributes) {
     if (!(n.attributes.hasOwnProperty(name) && name.startsWith('rr_'))) {
       continue;
diff --git a/src/snapshot.ts b/src/snapshot.ts
index 2a80d75561..7e5da9e3fb 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -362,12 +362,12 @@ function serializeNode(
     maskInputOptions = {},
     maskTextFn,
     recordCanvas,
-    keepIframeSrcFn
+    keepIframeSrcFn,
   } = options;
   // Only record root id when document object is not the base document
   let rootId: number | undefined;
-  if ((doc as unknown as INode).__sn) {
-    const docId = (doc as unknown as INode).__sn.id;
+  if (((doc as unknown) as INode).__sn) {
+    const docId = ((doc as unknown) as INode).__sn.id;
     rootId = docId === 1 ? undefined : docId;
   }
   switch (n.nodeType) {
diff --git a/src/types.ts b/src/types.ts
index 9b2a62866e..baa52211d9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -110,4 +110,3 @@ export type SlimDOMOptions = Partial<{
 export type MaskTextFn = (text: string) => string;
 
 export type KeepIframeSrcFn = (src: string) => boolean;
-

From 5175b08a5a2ddae92b816c08fe293263e712cdae Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 29 Jun 2021 18:45:11 +0800
Subject: [PATCH 363/524] Release 1.1.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ca98a8020d..5b3e68b39a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",

From dee0457ffeda8fae303c797d4a7d28ca2c6265c1 Mon Sep 17 00:00:00 2001
From: bachmanity1 <81428651+bachmanity1@users.noreply.github.com>
Date: Wed, 30 Jun 2021 12:51:27 +0900
Subject: [PATCH 364/524] add keepIframeSrcFn option (#592)

* rename allowIframe to keepIframeSrcFn

* update rrweb-snapshot to 1.1.5
---
 package.json        | 2 +-
 src/record/index.ts | 2 ++
 src/types.ts        | 3 +++
 typings/types.d.ts  | 2 ++
 4 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4c30560d12..a463308a74 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,6 @@
     "@xstate/fsm": "^1.4.0",
     "fflate": "^0.4.4",
     "mitt": "^1.1.3",
-    "rrweb-snapshot": "^1.1.4"
+    "rrweb-snapshot": "^1.1.5"
   }
 }
diff --git a/src/record/index.ts b/src/record/index.ts
index 69b350f209..c3529597ff 100644
--- a/src/record/index.ts
+++ b/src/record/index.ts
@@ -59,6 +59,7 @@ function record<T = eventWithTime>(
     recordCanvas = false,
     collectFonts = false,
     plugins,
+    keepIframeSrcFn = () => false,
   } = options;
   // runtime checks for user options
   if (!emit) {
@@ -236,6 +237,7 @@ function record<T = eventWithTime>(
       onIframeLoad: (iframe, childSn) => {
         iframeManager.attachIframe(iframe, childSn);
       },
+      keepIframeSrcFn,
     });
 
     if (!node) {
diff --git a/src/types.ts b/src/types.ts
index 0acb0a1604..df06686432 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -220,6 +220,7 @@ export type recordOptions<T> = {
   plugins?: RecordPlugin[];
   // departed, please use sampling options
   mousemoveWait?: number;
+  keepIframeSrcFn?: KeepIframeSrcFn;
 };
 
 export type observerParam = {
@@ -552,3 +553,5 @@ export type ElementState = {
   // [scrollLeft,scrollTop]
   scroll?: [number, number];
 };
+
+export type KeepIframeSrcFn = (src: string) => boolean;
diff --git a/typings/types.d.ts b/typings/types.d.ts
index a80334e47e..802ccbef0b 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -147,6 +147,7 @@ export declare type recordOptions<T> = {
     collectFonts?: boolean;
     plugins?: RecordPlugin[];
     mousemoveWait?: number;
+    keepIframeSrcFn?: KeepIframeSrcFn;
 };
 export declare type observerParam = {
     mutationCb: mutationCallBack;
@@ -417,4 +418,5 @@ export declare type MaskTextFn = (text: string) => string;
 export declare type ElementState = {
     scroll?: [number, number];
 };
+export declare type KeepIframeSrcFn = (src: string) => boolean;
 export {};

From bf8d9d0f89bb147458b2bd7d62bb269e212b4a76 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 30 Jun 2021 16:06:46 +0800
Subject: [PATCH 365/524] update yarn.lock

---
 yarn.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 9883643f7e..73bc1ae28b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2845,10 +2845,10 @@ rollup@^2.3.3:
   optionalDependencies:
     fsevents "~2.1.2"
 
-rrweb-snapshot@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.4.tgz#a71d812004c340aaa5313d313a7bd343eb8c260d"
-  integrity sha512-0iVRbsWSVOVEjgE8MA0+zYwlLMSwkVsUA7KhmvVaBK+viYcbx79SKRB8PkeFz1/1Jnn9fnkzPHlh42F+xFuwbQ==
+rrweb-snapshot@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.5.tgz#7784a01e7d2ccd067ec56cdec38a1fc2a77cbe86"
+  integrity sha512-U5mfiySoK85WkLCljFTh+ShgTDrOMXWrh1qpou8WwW3AEXba7CSv/sTtoXp3QfG5oxe1YOc+fC3tB4kHMdI00w==
 
 run-async@^2.2.0:
   version "2.4.1"

From c1158d88df1587fae43697f9bbc00dc9eb4e2b42 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Wed, 30 Jun 2021 15:39:00 +0100
Subject: [PATCH 366/524] Fix an incorrected finish which halted playback
 prematurely. The scenario was that there were events being rapidly added to
 the recording. (#606)

---
 src/replay/index.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index 0bdd644283..0e5aec9bcb 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -493,13 +493,16 @@ export class Replayer {
       this.service.send({ type: 'CAST_EVENT', payload: { event } });
 
       // events are kept sorted by timestamp, check if this is the last event
+      let last_index = this.service.state.context.events.length - 1;
       if (
         event ===
-        this.service.state.context.events[
-          this.service.state.context.events.length - 1
-        ]
+        this.service.state.context.events[last_index]
       ) {
         const finish = () => {
+          if (last_index < this.service.state.context.events.length - 1) {
+            // more events have been added since the setTimeout
+            return;
+          }
           this.backToNormal();
           this.service.send('END');
           this.emitter.emit(ReplayerEvents.Finish);

From 775291042d8661af1a512832e2c3e44077466a4a Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Wed, 30 Jun 2021 16:41:37 +0200
Subject: [PATCH 367/524] move maskInputValue to rrweb-snapshot (#83)

More info: https://github.com/rrweb-io/rrweb/pull/602#discussion_r660434998
---
 src/snapshot.ts       | 29 +++++++++++++++++++++--------
 src/types.ts          |  1 +
 src/utils.ts          | 29 ++++++++++++++++++++++++++++-
 typings/snapshot.d.ts |  4 +++-
 typings/types.d.ts    |  1 +
 typings/utils.d.ts    |  9 ++++++++-
 6 files changed, 62 insertions(+), 11 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 7e5da9e3fb..27b882bebd 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -8,9 +8,10 @@ import {
   MaskInputOptions,
   SlimDOMOptions,
   MaskTextFn,
+  MaskInputFn,
   KeepIframeSrcFn,
 } from './types';
-import { isElement, isShadowRoot } from './utils';
+import { isElement, isShadowRoot, maskInputValue } from './utils';
 
 let _id = 1;
 const tagNameRegex = RegExp('[^a-z0-9-_:]');
@@ -348,6 +349,7 @@ function serializeNode(
     inlineStylesheet: boolean;
     maskInputOptions: MaskInputOptions;
     maskTextFn: MaskTextFn | undefined;
+    maskInputFn: MaskInputFn | undefined;
     recordCanvas: boolean;
     keepIframeSrcFn: KeepIframeSrcFn;
   },
@@ -361,13 +363,14 @@ function serializeNode(
     inlineStylesheet,
     maskInputOptions = {},
     maskTextFn,
+    maskInputFn,
     recordCanvas,
     keepIframeSrcFn,
   } = options;
   // Only record root id when document object is not the base document
   let rootId: number | undefined;
-  if (((doc as unknown) as INode).__sn) {
-    const docId = ((doc as unknown) as INode).__sn.id;
+  if ((doc as unknown as INode).__sn) {
+    const docId = (doc as unknown as INode).__sn.id;
     rootId = docId === 1 ? undefined : docId;
   }
   switch (n.nodeType) {
@@ -443,11 +446,13 @@ function serializeNode(
           attributes.type !== 'button' &&
           value
         ) {
-          attributes.value =
-            maskInputOptions[attributes.type as keyof MaskInputOptions] ||
-            maskInputOptions[tagName as keyof MaskInputOptions]
-              ? '*'.repeat(value.length)
-              : value;
+          attributes.value = maskInputValue({
+            type: attributes.type,
+            tagName,
+            value,
+            maskInputOptions,
+            maskInputFn,
+          });
         } else if ((n as HTMLInputElement).checked) {
           attributes.checked = (n as HTMLInputElement).checked;
         }
@@ -650,6 +655,7 @@ export function serializeNodeWithId(
     inlineStylesheet: boolean;
     maskInputOptions?: MaskInputOptions;
     maskTextFn: MaskTextFn | undefined;
+    maskInputFn: MaskInputFn | undefined;
     slimDOMOptions: SlimDOMOptions;
     keepIframeSrcFn?: KeepIframeSrcFn;
     recordCanvas?: boolean;
@@ -670,6 +676,7 @@ export function serializeNodeWithId(
     inlineStylesheet = true,
     maskInputOptions = {},
     maskTextFn,
+    maskInputFn,
     slimDOMOptions,
     recordCanvas = false,
     onSerialize,
@@ -687,6 +694,7 @@ export function serializeNodeWithId(
     inlineStylesheet,
     maskInputOptions,
     maskTextFn,
+    maskInputFn,
     recordCanvas,
     keepIframeSrcFn,
   });
@@ -750,6 +758,7 @@ export function serializeNodeWithId(
       inlineStylesheet,
       maskInputOptions,
       maskTextFn,
+      maskInputFn,
       slimDOMOptions,
       recordCanvas,
       preserveWhiteSpace,
@@ -801,6 +810,7 @@ export function serializeNodeWithId(
             inlineStylesheet,
             maskInputOptions,
             maskTextFn,
+            maskInputFn,
             slimDOMOptions,
             recordCanvas,
             preserveWhiteSpace,
@@ -832,6 +842,7 @@ function snapshot(
     inlineStylesheet?: boolean;
     maskAllInputs?: boolean | MaskInputOptions;
     maskTextFn?: MaskTextFn;
+    maskInputFn?: MaskTextFn;
     slimDOM?: boolean | SlimDOMOptions;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
@@ -850,6 +861,7 @@ function snapshot(
     recordCanvas = false,
     maskAllInputs = false,
     maskTextFn,
+    maskInputFn,
     slimDOM = false,
     preserveWhiteSpace,
     onSerialize,
@@ -913,6 +925,7 @@ function snapshot(
       inlineStylesheet,
       maskInputOptions,
       maskTextFn,
+      maskInputFn,
       slimDOMOptions,
       recordCanvas,
       preserveWhiteSpace,
diff --git a/src/types.ts b/src/types.ts
index baa52211d9..ffeef690c8 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -108,5 +108,6 @@ export type SlimDOMOptions = Partial<{
 }>;
 
 export type MaskTextFn = (text: string) => string;
+export type MaskInputFn = (text: string) => string;
 
 export type KeepIframeSrcFn = (src: string) => boolean;
diff --git a/src/utils.ts b/src/utils.ts
index df6cf20ba5..ed5c5f7565 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,4 +1,4 @@
-import { INode } from './types';
+import { INode, MaskInputFn, MaskInputOptions } from './types';
 
 export function isElement(n: Node | INode): n is Element {
   return n.nodeType === n.ELEMENT_NODE;
@@ -8,3 +8,30 @@ export function isShadowRoot(n: Node): n is ShadowRoot {
   const host: Element | null = (n as ShadowRoot)?.host;
   return Boolean(host && host.shadowRoot && host.shadowRoot === n);
 }
+
+export function maskInputValue({
+  maskInputOptions,
+  tagName,
+  type,
+  value,
+  maskInputFn,
+}: {
+  maskInputOptions: MaskInputOptions;
+  tagName: string;
+  type: string | number | boolean | null;
+  value: string | null;
+  maskInputFn?: MaskInputFn;
+}): string {
+  let text = value || '';
+  if (
+    maskInputOptions[tagName.toLowerCase() as keyof MaskInputOptions] ||
+    maskInputOptions[type as keyof MaskInputOptions]
+  ) {
+    if (maskInputFn) {
+      text = maskInputFn(text);
+    } else {
+      text = '*'.repeat(text.length);
+    }
+  }
+  return text;
+}
diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts
index 6db21b7155..9ccb147aa1 100644
--- a/typings/snapshot.d.ts
+++ b/typings/snapshot.d.ts
@@ -1,4 +1,4 @@
-import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions, SlimDOMOptions, MaskTextFn, KeepIframeSrcFn } from './types';
+import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions, SlimDOMOptions, MaskTextFn, MaskInputFn, KeepIframeSrcFn } from './types';
 export declare const IGNORED_NODE = -2;
 export declare function absoluteToStylesheet(cssText: string | null, href: string): string;
 export declare function absoluteToDoc(doc: Document, attributeValue: string): string;
@@ -16,6 +16,7 @@ export declare function serializeNodeWithId(n: Node | INode, options: {
     inlineStylesheet: boolean;
     maskInputOptions?: MaskInputOptions;
     maskTextFn: MaskTextFn | undefined;
+    maskInputFn: MaskInputFn | undefined;
     slimDOMOptions: SlimDOMOptions;
     keepIframeSrcFn?: KeepIframeSrcFn;
     recordCanvas?: boolean;
@@ -32,6 +33,7 @@ declare function snapshot(n: Document, options?: {
     inlineStylesheet?: boolean;
     maskAllInputs?: boolean | MaskInputOptions;
     maskTextFn?: MaskTextFn;
+    maskInputFn?: MaskTextFn;
     slimDOM?: boolean | SlimDOMOptions;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
diff --git a/typings/types.d.ts b/typings/types.d.ts
index 93267fa20e..8524801cf2 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -88,4 +88,5 @@ export declare type SlimDOMOptions = Partial<{
     headMetaVerification: boolean;
 }>;
 export declare type MaskTextFn = (text: string) => string;
+export declare type MaskInputFn = (text: string) => string;
 export declare type KeepIframeSrcFn = (src: string) => boolean;
diff --git a/typings/utils.d.ts b/typings/utils.d.ts
index a896748e61..dfb1b70a8d 100644
--- a/typings/utils.d.ts
+++ b/typings/utils.d.ts
@@ -1,3 +1,10 @@
-import { INode } from './types';
+import { INode, MaskInputFn, MaskInputOptions } from './types';
 export declare function isElement(n: Node | INode): n is Element;
 export declare function isShadowRoot(n: Node): n is ShadowRoot;
+export declare function maskInputValue({ maskInputOptions, tagName, type, value, maskInputFn, }: {
+    maskInputOptions: MaskInputOptions;
+    tagName: string;
+    type: string | number | boolean | null;
+    value: string | null;
+    maskInputFn?: MaskInputFn;
+}): string;

From 583db220169d2a41b757269019f8a8c81edaeb5a Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 30 Jun 2021 22:42:47 +0800
Subject: [PATCH 368/524] Release 1.1.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5b3e68b39a..2c611aea74 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",

From ed37401f635e7ca9d4891b8292cc945a4ac0d546 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Wed, 30 Jun 2021 17:26:16 +0200
Subject: [PATCH 369/524] Mask value attribute changes for elements in
 maskInputOptions (#602)

* mask value attribute changes for elements in maskInputOptions

* refactor initInputObserver to use maskInputValue

* add todo

* Fix typo

* upgrade rrweb-snapshot to 1.1.6

* move maskInputValue to rrweb-snapshot
---
 package.json                                |   2 +-
 src/record/index.ts                         |   1 +
 src/record/mutation.ts                      |  19 +-
 src/record/observer.ts                      |  36 +-
 src/record/shadow-dom-manager.ts            |  10 +-
 src/types.ts                                |   6 +-
 src/utils.ts                                |  24 +-
 test/__snapshots__/integration.test.ts.snap | 354 ++++++++++++++++++++
 test/html/password.html                     |  17 +
 test/integration.test.ts                    |  17 +
 typings/record/mutation.d.ts                |   7 +-
 typings/record/observer.d.ts                |   6 +-
 typings/record/shadow-dom-manager.d.ts      |   5 +-
 typings/types.d.ts                          |   4 +-
 yarn.lock                                   |   8 +-
 15 files changed, 469 insertions(+), 47 deletions(-)
 create mode 100644 test/html/password.html

diff --git a/package.json b/package.json
index a463308a74..a19f566241 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,6 @@
     "@xstate/fsm": "^1.4.0",
     "fflate": "^0.4.4",
     "mitt": "^1.1.3",
-    "rrweb-snapshot": "^1.1.5"
+    "rrweb-snapshot": "^1.1.6"
   }
 }
diff --git a/src/record/index.ts b/src/record/index.ts
index c3529597ff..df225ea39d 100644
--- a/src/record/index.ts
+++ b/src/record/index.ts
@@ -194,6 +194,7 @@ function record<T = eventWithTime>(
       inlineStylesheet,
       maskInputOptions,
       maskTextFn,
+      maskInputFn,
       recordCanvas,
       sampling,
       slimDOMOptions,
diff --git a/src/record/mutation.ts b/src/record/mutation.ts
index 43d470e924..04f0065b80 100644
--- a/src/record/mutation.ts
+++ b/src/record/mutation.ts
@@ -7,6 +7,9 @@ import {
   IGNORED_NODE,
   isShadowRoot,
   needMaskingText,
+  maskInputValue,
+  MaskTextFn,
+  MaskInputFn,
 } from 'rrweb-snapshot';
 import {
   mutationRecord,
@@ -17,7 +20,6 @@ import {
   attributeCursor,
   removedNodeMutation,
   addedNodeMutation,
-  MaskTextFn,
   Mirror,
 } from '../types';
 import {
@@ -167,6 +169,7 @@ export default class MutationBuffer {
   private inlineStylesheet: boolean;
   private maskInputOptions: MaskInputOptions;
   private maskTextFn: MaskTextFn | undefined;
+  private maskInputFn: MaskInputFn | undefined;
   private recordCanvas: boolean;
   private slimDOMOptions: SlimDOMOptions;
   private doc: Document;
@@ -184,6 +187,7 @@ export default class MutationBuffer {
     inlineStylesheet: boolean,
     maskInputOptions: MaskInputOptions,
     maskTextFn: MaskTextFn | undefined,
+    maskInputFn: MaskInputFn | undefined,
     recordCanvas: boolean,
     slimDOMOptions: SlimDOMOptions,
     doc: Document,
@@ -198,6 +202,7 @@ export default class MutationBuffer {
     this.inlineStylesheet = inlineStylesheet;
     this.maskInputOptions = maskInputOptions;
     this.maskTextFn = maskTextFn;
+    this.maskInputFn = maskInputFn;
     this.recordCanvas = recordCanvas;
     this.slimDOMOptions = slimDOMOptions;
     this.emissionCallback = cb;
@@ -287,6 +292,7 @@ export default class MutationBuffer {
         inlineStylesheet: this.inlineStylesheet,
         maskInputOptions: this.maskInputOptions,
         maskTextFn: this.maskTextFn,
+        maskInputFn: this.maskInputFn,
         slimDOMOptions: this.slimDOMOptions,
         recordCanvas: this.recordCanvas,
         onSerialize: (currentN) => {
@@ -443,7 +449,16 @@ export default class MutationBuffer {
         break;
       }
       case 'attributes': {
-        const value = (m.target as HTMLElement).getAttribute(m.attributeName!);
+        let value = (m.target as HTMLElement).getAttribute(m.attributeName!);
+        if (m.attributeName === 'value') {
+          value = maskInputValue({
+            maskInputOptions: this.maskInputOptions,
+            tagName: (m.target as HTMLElement).tagName,
+            type: (m.target as HTMLElement).getAttribute('type'),
+            value,
+            maskInputFn: this.maskInputFn,
+          });
+        }
         if (isBlocked(m.target, this.blockClass) || value === m.oldValue) {
           return;
         }
diff --git a/src/record/observer.ts b/src/record/observer.ts
index 6665162a41..7abcb77957 100644
--- a/src/record/observer.ts
+++ b/src/record/observer.ts
@@ -1,4 +1,11 @@
-import { INode, MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
+import {
+  INode,
+  MaskInputOptions,
+  SlimDOMOptions,
+  maskInputValue,
+  MaskInputFn,
+  MaskTextFn,
+} from 'rrweb-snapshot';
 import { FontFaceDescriptors, FontFaceSet } from 'css-font-loading-module';
 import {
   throttle,
@@ -35,8 +42,6 @@ import {
   canvasMutationCallback,
   fontCallback,
   fontParam,
-  MaskInputFn,
-  MaskTextFn,
   Mirror,
 } from '../types';
 import MutationBuffer from './mutation';
@@ -83,6 +88,7 @@ export function initMutationObserver(
   inlineStylesheet: boolean,
   maskInputOptions: MaskInputOptions,
   maskTextFn: MaskTextFn | undefined,
+  maskInputFn: MaskInputFn | undefined,
   recordCanvas: boolean,
   slimDOMOptions: SlimDOMOptions,
   mirror: Mirror,
@@ -102,6 +108,7 @@ export function initMutationObserver(
     inlineStylesheet,
     maskInputOptions,
     maskTextFn,
+    maskInputFn,
     recordCanvas,
     slimDOMOptions,
     doc,
@@ -366,11 +373,13 @@ function initInputObserver(
       ] ||
       maskInputOptions[type as keyof MaskInputOptions]
     ) {
-      if (maskInputFn) {
-        text = maskInputFn(text);
-      } else {
-        text = '*'.repeat(text.length);
-      }
+      text = maskInputValue({
+        maskInputOptions,
+        tagName: (target as HTMLElement).tagName,
+        type,
+        value: text,
+        maskInputFn,
+      });
     }
     cbWithDedup(target, { text, isChecked });
     // if a radio was checked
@@ -476,7 +485,7 @@ function initMediaInteractionObserver(
   blockClass: blockClass,
   mirror: Mirror,
 ): listenerHandler {
-  const handler = (type: MediaInteractions ) => (event: Event) => {
+  const handler = (type: MediaInteractions) => (event: Event) => {
     const target = getEventTarget(event);
     if (!target || isBlocked(target as Node, blockClass)) {
       return;
@@ -484,13 +493,13 @@ function initMediaInteractionObserver(
     mediaInteractionCb({
       type,
       id: mirror.getId(target as INode),
-      currentTime: (target as HTMLMediaElement).currentTime
+      currentTime: (target as HTMLMediaElement).currentTime,
     });
   };
   const handlers = [
-    on('play', handler(MediaInteractions.Play)), 
-    on('pause', handler(MediaInteractions.Pause)), 
-    on('seeked', handler(MediaInteractions.Seeked))
+    on('play', handler(MediaInteractions.Play)),
+    on('pause', handler(MediaInteractions.Pause)),
+    on('seeked', handler(MediaInteractions.Seeked)),
   ];
   return () => {
     handlers.forEach((h) => h());
@@ -716,6 +725,7 @@ export function initObservers(
     o.inlineStylesheet,
     o.maskInputOptions,
     o.maskTextFn,
+    o.maskInputFn,
     o.recordCanvas,
     o.slimDOMOptions,
     o.mirror,
diff --git a/src/record/shadow-dom-manager.ts b/src/record/shadow-dom-manager.ts
index 119ca99219..e068bb645d 100644
--- a/src/record/shadow-dom-manager.ts
+++ b/src/record/shadow-dom-manager.ts
@@ -2,12 +2,16 @@ import {
   mutationCallBack,
   blockClass,
   maskTextClass,
-  MaskTextFn,
   Mirror,
   scrollCallback,
   SamplingStrategy,
 } from '../types';
-import { MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
+import {
+  MaskInputOptions,
+  SlimDOMOptions,
+  MaskTextFn,
+  MaskInputFn,
+} from 'rrweb-snapshot';
 import { IframeManager } from './iframe-manager';
 import { initMutationObserver, initScrollObserver } from './observer';
 
@@ -19,6 +23,7 @@ type BypassOptions = {
   inlineStylesheet: boolean;
   maskInputOptions: MaskInputOptions;
   maskTextFn: MaskTextFn | undefined;
+  maskInputFn: MaskInputFn | undefined;
   recordCanvas: boolean;
   sampling: SamplingStrategy;
   slimDOMOptions: SlimDOMOptions;
@@ -54,6 +59,7 @@ export class ShadowDomManager {
       this.bypassOptions.inlineStylesheet,
       this.bypassOptions.maskInputOptions,
       this.bypassOptions.maskTextFn,
+      this.bypassOptions.maskInputFn,
       this.bypassOptions.recordCanvas,
       this.bypassOptions.slimDOMOptions,
       this.mirror,
diff --git a/src/types.ts b/src/types.ts
index df06686432..10ee8b313e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -4,6 +4,8 @@ import {
   INode,
   MaskInputOptions,
   SlimDOMOptions,
+  MaskInputFn,
+  MaskTextFn,
 } from 'rrweb-snapshot';
 import { PackFn, UnpackFn } from './packer/base';
 import { FontFaceDescriptors } from 'css-font-loading-module';
@@ -544,10 +546,6 @@ export enum ReplayerEvents {
   PlayBack = 'play-back',
 }
 
-export type MaskInputFn = (text: string) => string;
-
-export type MaskTextFn = (text: string) => string;
-
 // store the state that would be changed during the process(unmount from dom and mount again)
 export type ElementState = {
   // [scrollLeft,scrollTop]
diff --git a/src/utils.ts b/src/utils.ts
index 9161afb00e..88f4f7dc08 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -53,7 +53,7 @@ export function createMirror(): Mirror {
       delete this.map[id];
       if (n.childNodes) {
         n.childNodes.forEach((child) =>
-          this.removeNodeFromMap(child as Node as INode),
+          this.removeNodeFromMap((child as Node) as INode),
         );
       }
     },
@@ -275,7 +275,7 @@ export function isAncestorRemoved(target: INode, mirror: Mirror): boolean {
   if (!target.parentNode) {
     return true;
   }
-  return isAncestorRemoved(target.parentNode as unknown as INode, mirror);
+  return isAncestorRemoved((target.parentNode as unknown) as INode, mirror);
 }
 
 export function isTouchEvent(
@@ -286,13 +286,13 @@ export function isTouchEvent(
 
 export function polyfill(win = window) {
   if ('NodeList' in win && !win.NodeList.prototype.forEach) {
-    win.NodeList.prototype.forEach = Array.prototype
-      .forEach as unknown as NodeList['forEach'];
+    win.NodeList.prototype.forEach = (Array.prototype
+      .forEach as unknown) as NodeList['forEach'];
   }
 
   if ('DOMTokenList' in win && !win.DOMTokenList.prototype.forEach) {
-    win.DOMTokenList.prototype.forEach = Array.prototype
-      .forEach as unknown as DOMTokenList['forEach'];
+    win.DOMTokenList.prototype.forEach = (Array.prototype
+      .forEach as unknown) as DOMTokenList['forEach'];
   }
 
   // https://github.com/Financial-Times/polyfill-service/pull/183
@@ -396,7 +396,7 @@ export class TreeIndex {
       const node = mirror.getNode(id);
       node?.childNodes.forEach((childNode) => {
         if ('__sn' in childNode) {
-          deepRemoveFromMirror((childNode as unknown as INode).__sn.id);
+          deepRemoveFromMirror(((childNode as unknown) as INode).__sn.id);
         }
       });
     };
@@ -460,8 +460,12 @@ export class TreeIndex {
     scrollMap: TreeIndex['scrollMap'];
     inputMap: TreeIndex['inputMap'];
   } {
-    const { tree, removeNodeMutations, textMutations, attributeMutations } =
-      this;
+    const {
+      tree,
+      removeNodeMutations,
+      textMutations,
+      attributeMutations,
+    } = this;
 
     const batchMutationData: mutationData = {
       source: IncrementalSource.Mutation,
@@ -650,5 +654,5 @@ export function getBaseDimension(
 export function hasShadowRoot<T extends Node>(
   n: T,
 ): n is T & { shadowRoot: ShadowRoot } {
-  return Boolean((n as unknown as Element)?.shadowRoot);
+  return Boolean(((n as unknown) as Element)?.shadowRoot);
 }
diff --git a/test/__snapshots__/integration.test.ts.snap b/test/__snapshots__/integration.test.ts.snap
index b033fee9c5..ea136c2a1a 100644
--- a/test/__snapshots__/integration.test.ts.snap
+++ b/test/__snapshots__/integration.test.ts.snap
@@ -5461,6 +5461,360 @@ exports[`maskInputOptions 1`] = `
 ]"
 `;
 
+exports[`maskPassword 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 1,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {
+              \\"lang\\": \\"en\\"
+            },
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 4
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"charset\\": \\"UTF-8\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 5
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"http-equiv\\": \\"X-UA-Compatible\\",
+                      \\"content\\": \\"IE=edge\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 8
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"name\\": \\"viewport\\",
+                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 10
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"title\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"Document\\",
+                        \\"id\\": 12
+                      }
+                    ],
+                    \\"id\\": 11
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 13
+                  }
+                ],
+                \\"id\\": 3
+              },
+              {
+                \\"type\\": 3,
+                \\"textContent\\": \\"\\\\n  \\",
+                \\"id\\": 14
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 16
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"input\\",
+                    \\"attributes\\": {
+                      \\"type\\": \\"password\\",
+                      \\"id\\": \\"password\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 17
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 18
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 20
+                      }
+                    ],
+                    \\"id\\": 19
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
+                    \\"id\\": 21
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 23
+                      }
+                    ],
+                    \\"id\\": 22
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 24
+                  }
+                ],
+                \\"id\\": 15
+              }
+            ],
+            \\"id\\": 2
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 17
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*\\",
+      \\"isChecked\\": false,
+      \\"id\\": 17
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 17,
+          \\"attributes\\": {
+            \\"value\\": \\"*\\"
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"**\\",
+      \\"isChecked\\": false,
+      \\"id\\": 17
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 17,
+          \\"attributes\\": {
+            \\"value\\": \\"**\\"
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"***\\",
+      \\"isChecked\\": false,
+      \\"id\\": 17
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 17,
+          \\"attributes\\": {
+            \\"value\\": \\"***\\"
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"****\\",
+      \\"isChecked\\": false,
+      \\"id\\": 17
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 17,
+          \\"attributes\\": {
+            \\"value\\": \\"****\\"
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*****\\",
+      \\"isChecked\\": false,
+      \\"id\\": 17
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 17,
+          \\"attributes\\": {
+            \\"value\\": \\"*****\\"
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"******\\",
+      \\"isChecked\\": false,
+      \\"id\\": 17
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 17,
+          \\"attributes\\": {
+            \\"value\\": \\"******\\"
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
+    }
+  }
+]"
+`;
+
 exports[`move-node-1 1`] = `
 "[
   {
diff --git a/test/html/password.html b/test/html/password.html
new file mode 100644
index 0000000000..434899a8e0
--- /dev/null
+++ b/test/html/password.html
@@ -0,0 +1,17 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <input type="password" id="password" />
+    <script>
+      const password = document.getElementById('password');
+      password.addEventListener('keyup', (event) => {
+        password.setAttribute('value', password.value);
+      });
+    </script>
+  </body>
+</html>
diff --git a/test/integration.test.ts b/test/integration.test.ts
index 29168e292a..a851fcf565 100644
--- a/test/integration.test.ts
+++ b/test/integration.test.ts
@@ -267,6 +267,23 @@ describe('record integration tests', function (this: ISuite) {
     assertSnapshot(snapshots, __filename, 'maskInputOptions');
   });
 
+  it('should mask value attribute with maskInputOptions', async () => {
+    const page: puppeteer.Page = await this.browser.newPage();
+    await page.goto('about:blank');
+    await page.setContent(
+      getHtml.call(this, 'password.html', {
+        maskInputOptions: {
+          password: true,
+        },
+      }),
+    );
+
+    await page.type('input[type="password"]', 'secr3t');
+
+    const snapshots = await page.evaluate('window.snapshots');
+    assertSnapshot(snapshots, __filename, 'maskPassword');
+  });
+
   it('should not record blocked elements and its child nodes', async () => {
     const page: puppeteer.Page = await this.browser.newPage();
     await page.goto('about:blank');
diff --git a/typings/record/mutation.d.ts b/typings/record/mutation.d.ts
index a512942c08..b67548e30b 100644
--- a/typings/record/mutation.d.ts
+++ b/typings/record/mutation.d.ts
@@ -1,5 +1,5 @@
-import { MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
-import { mutationRecord, blockClass, maskTextClass, mutationCallBack, MaskTextFn, Mirror } from '../types';
+import { MaskInputOptions, SlimDOMOptions, MaskTextFn, MaskInputFn } from 'rrweb-snapshot';
+import { mutationRecord, blockClass, maskTextClass, mutationCallBack, Mirror } from '../types';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
 export default class MutationBuffer {
@@ -21,13 +21,14 @@ export default class MutationBuffer {
     private inlineStylesheet;
     private maskInputOptions;
     private maskTextFn;
+    private maskInputFn;
     private recordCanvas;
     private slimDOMOptions;
     private doc;
     private mirror;
     private iframeManager;
     private shadowDomManager;
-    init(cb: mutationCallBack, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, doc: Document, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager): void;
+    init(cb: mutationCallBack, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, doc: Document, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager): void;
     freeze(): void;
     unfreeze(): void;
     isFrozen(): boolean;
diff --git a/typings/record/observer.d.ts b/typings/record/observer.d.ts
index b77aa4ee3a..ffca5918e6 100644
--- a/typings/record/observer.d.ts
+++ b/typings/record/observer.d.ts
@@ -1,10 +1,10 @@
-import { MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
-import { mutationCallBack, observerParam, listenerHandler, scrollCallback, blockClass, maskTextClass, hooksParam, SamplingStrategy, MaskTextFn, Mirror } from '../types';
+import { MaskInputOptions, SlimDOMOptions, MaskInputFn, MaskTextFn } from 'rrweb-snapshot';
+import { mutationCallBack, observerParam, listenerHandler, scrollCallback, blockClass, maskTextClass, hooksParam, SamplingStrategy, Mirror } from '../types';
 import MutationBuffer from './mutation';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
 export declare const mutationBuffers: MutationBuffer[];
-export declare function initMutationObserver(cb: mutationCallBack, doc: Document, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager, rootEl: Node): MutationObserver;
+export declare function initMutationObserver(cb: mutationCallBack, doc: Document, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager, rootEl: Node): MutationObserver;
 export declare function initScrollObserver(cb: scrollCallback, doc: Document, mirror: Mirror, blockClass: blockClass, sampling: SamplingStrategy): listenerHandler;
 export declare const INPUT_TAGS: string[];
 export declare function initObservers(o: observerParam, hooks?: hooksParam): listenerHandler;
diff --git a/typings/record/shadow-dom-manager.d.ts b/typings/record/shadow-dom-manager.d.ts
index 0d7fca02dd..c3bbaef717 100644
--- a/typings/record/shadow-dom-manager.d.ts
+++ b/typings/record/shadow-dom-manager.d.ts
@@ -1,5 +1,5 @@
-import { mutationCallBack, blockClass, maskTextClass, MaskTextFn, Mirror, scrollCallback, SamplingStrategy } from '../types';
-import { MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
+import { mutationCallBack, blockClass, maskTextClass, Mirror, scrollCallback, SamplingStrategy } from '../types';
+import { MaskInputOptions, SlimDOMOptions, MaskTextFn, MaskInputFn } from 'rrweb-snapshot';
 import { IframeManager } from './iframe-manager';
 declare type BypassOptions = {
     blockClass: blockClass;
@@ -9,6 +9,7 @@ declare type BypassOptions = {
     inlineStylesheet: boolean;
     maskInputOptions: MaskInputOptions;
     maskTextFn: MaskTextFn | undefined;
+    maskInputFn: MaskInputFn | undefined;
     recordCanvas: boolean;
     sampling: SamplingStrategy;
     slimDOMOptions: SlimDOMOptions;
diff --git a/typings/types.d.ts b/typings/types.d.ts
index 802ccbef0b..bcd9797eb9 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -1,4 +1,4 @@
-import { serializedNodeWithId, idNodeMap, INode, MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
+import { serializedNodeWithId, idNodeMap, INode, MaskInputOptions, SlimDOMOptions, MaskInputFn, MaskTextFn } from 'rrweb-snapshot';
 import { PackFn, UnpackFn } from './packer/base';
 import { FontFaceDescriptors } from 'css-font-loading-module';
 import { IframeManager } from './record/iframe-manager';
@@ -413,8 +413,6 @@ export declare enum ReplayerEvents {
     StateChange = "state-change",
     PlayBack = "play-back"
 }
-export declare type MaskInputFn = (text: string) => string;
-export declare type MaskTextFn = (text: string) => string;
 export declare type ElementState = {
     scroll?: [number, number];
 };
diff --git a/yarn.lock b/yarn.lock
index 73bc1ae28b..670017a9d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2845,10 +2845,10 @@ rollup@^2.3.3:
   optionalDependencies:
     fsevents "~2.1.2"
 
-rrweb-snapshot@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.5.tgz#7784a01e7d2ccd067ec56cdec38a1fc2a77cbe86"
-  integrity sha512-U5mfiySoK85WkLCljFTh+ShgTDrOMXWrh1qpou8WwW3AEXba7CSv/sTtoXp3QfG5oxe1YOc+fC3tB4kHMdI00w==
+rrweb-snapshot@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.6.tgz#e598510e387b9b2c62ce0cfc586a37c89549b228"
+  integrity sha512-twvqV1WRuFwodO5UV0tzS4Q2w+ZYi5kwOx/uwbRkplfazcnbphDLFvy8x9IwMOZFhyRg1jDJjbnlC8wy4xq5bQ==
 
 run-async@^2.2.0:
   version "2.4.1"

From 8082b05254a4f281d4caa1ba3694e5b77b347144 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 1 Jul 2021 10:46:47 +0800
Subject: [PATCH 370/524] Release 1.0.0-beta.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a19f566241..c03adf534c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",

From ab1bc478343979753a1e3ad8a6faa02311d4ea67 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 1 Jul 2021 10:57:54 +0800
Subject: [PATCH 371/524] do not bundle es module multiple times

---
 rollup.config.js | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/rollup.config.js b/rollup.config.js
index c4cd1c2569..a1810bb6ff 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -80,7 +80,9 @@ const baseConfigs = [
     input: './src/entries/all.ts',
     name: 'rrweb',
     pathFn: toAllPath,
+    esm: true,
   },
+  // plugins
   {
     input: './src/plugins/console/record/index.ts',
     name: 'rrwebConsoleRecord',
@@ -146,19 +148,21 @@ for (const c of baseConfigs) {
       },
     ],
   });
-  // ES module
-  configs.push({
-    input: c.input,
-    plugins,
-    preserveModules: true,
-    output: [
-      {
-        format: 'esm',
-        dir: 'es/rrweb',
-        plugins: [renameNodeModules('ext')],
-      },
-    ],
-  });
+  if (c.esm) {
+    // ES module
+    configs.push({
+      input: c.input,
+      plugins,
+      preserveModules: true,
+      output: [
+        {
+          format: 'esm',
+          dir: 'es/rrweb',
+          plugins: [renameNodeModules('ext')],
+        },
+      ],
+    });
+  }
 }
 
 if (process.env.BROWSER_ONLY) {

From ea489104639c002d908d1fe48f8984bd3c8254cd Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 1 Jul 2021 11:01:42 +0800
Subject: [PATCH 372/524] rename console replay plugin

---
 src/plugins/console/replay/index.ts       | 6 +++---
 typings/plugins/console/replay/index.d.ts | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/plugins/console/replay/index.ts b/src/plugins/console/replay/index.ts
index d54c5e114c..8b68e72f19 100644
--- a/src/plugins/console/replay/index.ts
+++ b/src/plugins/console/replay/index.ts
@@ -108,9 +108,9 @@ class LogReplayPlugin {
   }
 }
 
-export const getLogReplayPlugin: (options?: LogReplayConfig) => ReplayPlugin = (
-  options,
-) => {
+export const getReplayConsolePlugin: (
+  options?: LogReplayConfig,
+) => ReplayPlugin = (options) => {
   const replayLogger =
     options?.replayLogger || new LogReplayPlugin(options).getConsoleLogger();
 
diff --git a/typings/plugins/console/replay/index.d.ts b/typings/plugins/console/replay/index.d.ts
index 8d0fc9c052..4f2bb8155c 100644
--- a/typings/plugins/console/replay/index.d.ts
+++ b/typings/plugins/console/replay/index.d.ts
@@ -5,5 +5,5 @@ declare type LogReplayConfig = {
     level?: LogLevel[] | undefined;
     replayLogger: ReplayLogger | undefined;
 };
-export declare const getLogReplayPlugin: (options?: LogReplayConfig) => ReplayPlugin;
+export declare const getReplayConsolePlugin: (options?: LogReplayConfig) => ReplayPlugin;
 export {};

From 924c8991da5997281bb9d9b4315d382f015bc031 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 1 Jul 2021 11:22:52 +0800
Subject: [PATCH 373/524] Release 1.0.0-beta.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c03adf534c..0146cd6814 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",

From 67ef7d57cff76b31ff247dcea3e154b1167b29ea Mon Sep 17 00:00:00 2001
From: Omair Nabiel <nabiel.omair@gmail.com>
Date: Fri, 2 Jul 2021 12:43:41 +0500
Subject: [PATCH 374/524] Update pagination.md (#610)

fix: typo lool to loop
---
 docs/recipes/pagination.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/recipes/pagination.md b/docs/recipes/pagination.md
index ac851b276c..7b439c8a03 100644
--- a/docs/recipes/pagination.md
+++ b/docs/recipes/pagination.md
@@ -12,7 +12,7 @@ replayer.addEvent(NEW_EVENT);
 
 When calling the `addEvent` API to add a new event, rrweb will resolve its timestamp and replay it as need.
 
-If you need to load several events, you can do a lool like this:
+If you need to load several events, you can do a loop like this:
 
 ```js
 const replayer = new rrweb.Replayer(events);

From 4def072934c21f2ad2399ebb7f0257be54b176f1 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 3 Jul 2021 22:34:12 +0800
Subject: [PATCH 375/524] update slack channel link and core team members

---
 README.md       | 53 +++++++++++++++++++++++++++++++++++++++++++++----
 README.zh_CN.md | 53 +++++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 98 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index c62942ed13..b928de5faf 100644
--- a/README.md
+++ b/README.md
@@ -7,14 +7,12 @@
 
 # rrweb
 
-**[🚀 Try storyteller, a no-code interactive tutorial builder build with rrweb](https://storyteller.webzard.io/?utm_source=rrweb&utm_medium=github)**
-
 **[The new adventure of the rrweb community](http://www.myriptide.com/rrweb-community/)**
 
-[![Build Status](https://travis-ci.org/rrweb-io/rrweb.svg?branch=master)](https://travis-ci.org/rrweb-io/rrweb)
-[![Join the chat at https://gitter.im/rrweb-io/rrweb](https://badges.gitter.im/rrweb-io/rrweb.svg)](https://gitter.im/rrweb-io/rrweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Join the chat at slack](https://img.shields.io/badge/slack-@rrweb-teal.svg?logo=slack)](https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg)
 ![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js?compression=gzip&label=total%20gzip%20size)
 ![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js?compression=gzip&label=recorder%20gzip%20size)
+[![](https://data.jsdelivr.com/v1/package/npm/rrweb/badge)](https://www.jsdelivr.com/package/npm/rrweb)
 
 [中文文档](./README.zh_CN.md)
 
@@ -75,6 +73,53 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
 
 [Using the REPL tool](./guide.md#REPL-tool)
 
+## Core Team Members
+
+<table>
+  <tr>
+    <td align="center">
+      <a href="https://github.com/Yuyz0112">
+        <img
+          src="https://avatars.githubusercontent.com/u/13651389?s=100"
+          width="100px;"
+          alt=""
+        />
+        <br /><sub><b>Yuyz0112</b></sub>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/Mark-Fenng">
+        <img
+          src="https://avatars.githubusercontent.com/u/27533910?s=100"
+          width="100px;"
+          alt=""
+        />
+        <br /><sub><b>Mark-Fenng</b></sub>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/eoghanmurray">
+        <img
+          src="https://avatars.githubusercontent.com/u/156780?s=100"
+          width="100px;"
+          alt=""
+        />
+        <br /><sub><b>eoghanmurray</b></sub>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/Juice10">
+        <img
+          src="https://avatars.githubusercontent.com/u/4106?s=100"
+          width="100px;"
+          alt=""
+        />
+        <br /><sub><b>Juice10</b></sub>
+      </a>
+    </td>
+  </tr>
+</table>
+
 ## Who's using rrweb
 
 <p align="center">
diff --git a/README.zh_CN.md b/README.zh_CN.md
index 0aa7d54d40..751f756841 100644
--- a/README.zh_CN.md
+++ b/README.zh_CN.md
@@ -7,14 +7,12 @@
 
 # rrweb
 
-**[🚀 Storyteller, 基于 rrweb 开发的无代码交互式教程编辑器](https://storyteller.webzard.io/?utm_source=rrweb&utm_medium=github)**
-
 **[rrweb 社区新的征程](http://www.myriptide.com/rrweb-community-cn/)**
 
-[![Build Status](https://travis-ci.org/rrweb-io/rrweb.svg?branch=master)](https://travis-ci.org/rrweb-io/rrweb)
-[![Join the chat at https://gitter.im/rrweb-io/rrweb](https://badges.gitter.im/rrweb-io/rrweb.svg)](https://gitter.im/rrweb-io/rrweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Join the chat at slack](https://img.shields.io/badge/slack-@rrweb-teal.svg?logo=slack)](https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg)
 ![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js?compression=gzip&label=total%20gzip%20size)
 ![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js?compression=gzip&label=recorder%20gzip%20size)
+[![](https://data.jsdelivr.com/v1/package/npm/rrweb/badge)](https://www.jsdelivr.com/package/npm/rrweb)
 
 > 我已开通 Github Sponsor， 您可以通过赞助的形式帮助 rrweb 的开发。
 
@@ -76,6 +74,53 @@ rrweb 主要由 3 部分组成：
 
 [使用 REPL 工具](./guide.zh_CN.md#REPL-工具)
 
+## Core Team Members
+
+<table>
+  <tr>
+    <td align="center">
+      <a href="https://github.com/Yuyz0112">
+        <img
+          src="https://avatars.githubusercontent.com/u/13651389?s=100"
+          width="100px;"
+          alt=""
+        />
+        <br /><sub><b>Yuyz0112</b></sub>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/Mark-Fenng">
+        <img
+          src="https://avatars.githubusercontent.com/u/27533910?s=100"
+          width="100px;"
+          alt=""
+        />
+        <br /><sub><b>Mark-Fenng</b></sub>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/eoghanmurray">
+        <img
+          src="https://avatars.githubusercontent.com/u/156780?s=100"
+          width="100px;"
+          alt=""
+        />
+        <br /><sub><b>eoghanmurray</b></sub>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/Juice10">
+        <img
+          src="https://avatars.githubusercontent.com/u/4106?s=100"
+          width="100px;"
+          alt=""
+        />
+        <br /><sub><b>Juice10</b></sub>
+      </a>
+    </td>
+  </tr>
+</table>
+
 ## Who's using rrweb
 
 <p align="center">

From 60fd6bf874f92f8365b57b3a1ee3307f6ccc4581 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 4 Jul 2021 11:28:25 +0800
Subject: [PATCH 376/524] update roadmap and remove v1.0 warning

---
 README.md       | 25 ++++++++++---------------
 README.zh_CN.md | 28 ++++++++++------------------
 2 files changed, 20 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index b928de5faf..01aae03e41 100644
--- a/README.md
+++ b/README.md
@@ -20,13 +20,11 @@
 
 rrweb refers to 'record and replay the web', which is a tool for recording and replaying users' interactions on the web.
 
-**Currently, rrweb has already solved many difficult problems in recording and replaying, but the data structure may still be changed before the release of Version 1.0. So please be cautious to use rrweb in the production environment.**
-
 ## Guide
 
 [**📚 Read the rrweb guide here. 📚**](./guide.md)
 
-[**Recipes**](./docs/recipes/index.md)
+[**🍳 Recipes 🍳**](./docs/recipes/index.md)
 
 ## Project Structure
 
@@ -38,18 +36,15 @@ rrweb is mainly composed of 3 parts:
 
 ## Roadmap
 
-- rrweb
-  - handle cross-domain request errors
-  - record in web worker
-  - implement transmission data compression
-  - verify recording in mobile browser
-- rrweb-player
-  - implement efficient progress bar drag and drop control
-  - add full screen mode
-- extensions
-  - hijack the console API and record corresponding events
-  - hijack Ajax/fetch API and record request events
-  - use TraceKit to log exception events
+- rrdom: an ad-hoc DOM for rrweb session data [#419](https://github.com/rrweb-io/rrweb/issues/419)
+- storage engine: do deduplication on a large number of rrweb sessions
+- more end-to-end tests
+- compact mutation data in common patterns
+- provide plugins via the new plugin API, including:
+  - XHR plugin
+  - fetch plugin
+  - GraphQL plugin
+  - ...
 
 ## Internal Design
 
diff --git a/README.zh_CN.md b/README.zh_CN.md
index 751f756841..5442d7da5e 100644
--- a/README.zh_CN.md
+++ b/README.zh_CN.md
@@ -18,13 +18,11 @@
 
 rrweb 是 'record and replay the web' 的简写，旨在利用现代浏览器所提供的强大 API 录制并回放任意 web 界面中的用户操作。
 
-**目前 rrweb 已经解决了许多录制与回放中的难点问题，但在 1.0 版本 release 之前数据结构仍有可能发生变化，请谨慎用于生产环境中。**
-
 ## 指南
 
 [**📚 rrweb 使用指南 📚**](./guide.zh_CN.md)
 
-[**场景示例**](./docs/recipes/index.zh_CN.md)
+[**🍳 场景示例 🍳**](./docs/recipes/index.zh_CN.md)
 
 ## 项目结构
 
@@ -36,21 +34,15 @@ rrweb 主要由 3 部分组成：
 
 ## Roadmap
 
-- rrweb
-  - 处理跨域请求错误
-  - 转移至 web worker 中执行
-  - 实现传输数据压缩
-  - 验证移动端录制效果
-- rrweb-player
-  - 实现高效的进度条拖拽功能
-  - 增加全屏模式
-- extensions
-  - 劫持 console API，记录对应的事件
-  - 劫持 Ajax/fetch API，记录请求事件
-  - 封装 TraceKit，记录异常事件
-- 测试
-  - 补充更多单元测试
-  - 随机在更多网站上运行集成测试
+- rrdom: rrweb 数据专用的 DOM 实现 [#419](https://github.com/rrweb-io/rrweb/issues/419)
+- storage engine: 对大规模 rrweb 数据进行去重
+- 更多的 E2E 测试
+- 在常见场景下对 mutation 数据进行压缩
+- 基于新的插件 API 提供更多插件，包括:
+  - XHR 插件
+  - fetch 插件
+  - GraphQL 插件
+  - ...
 
 ## Internal Design
 

From 65a45202d7fe52b61298f66f269dc0a594a57e6d Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 5 Jul 2021 22:38:31 +0800
Subject: [PATCH 377/524] update console recipes

---
 docs/recipes/console.md       | 39 +++++++++++++----------
 docs/recipes/console.zh_CN.md | 58 ++++++++++++++++++++---------------
 2 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/docs/recipes/console.md b/docs/recipes/console.md
index f8223d9306..5cace407b3 100644
--- a/docs/recipes/console.md
+++ b/docs/recipes/console.md
@@ -1,35 +1,38 @@
 # console recorder and replayer
 
-Starting with a later version of v0.9.11, we add the ability to record and play back console output. 
+Starting from v1.0.0, we add the plugin to record and play back console output.
 This feature aims to provide developers with more information about the bug scene. There are some options for recording and replaying console output.
 
 ### Enable recording console
+
 You can enable the logger using default option like this:
+
 ```js
 rrweb.record({
   emit: emit(event) {
     // you should use console.log in this way to avoid errors.
-    const defaultLog = console.log["__rrweb_original__"]?console.log["__rrweb_original__"]:console.log;
+    const defaultLog = console.log["__rrweb_original__"] ? console.log["__rrweb_original__"] : console.log;
     defaultLog(event);
   },
   // to use default record option
-  recordLog: true,
+  plugins: [rrweb.getRecordConsolePlugin()],
 });
 ```
 
 **alert**: You shouldn't call console.log(warn, error .etc) in the emit function or you would get the error: `Uncaught RangeError: Maximum call stack size exceeded`.
-You should call console.log.\_\_rrweb_original__() instead.
+You should call console.log.\_\_rrweb_original\_\_() instead.
 
 You can also customize the behavior of logger like this:
+
 ```js
 rrweb.record({
   emit: emit(event) {
     // you should use console.log in this way to avoid errors.
-    const defaultLog = console.log["__rrweb_original__"]?console.log["__rrweb_original__"]:console.log;
+    const defaultLog = console.log["__rrweb_original__"] ? console.log["__rrweb_original__"] : console.log;
     defaultLog(event);
   },
   // customized options
-  recordLog: {
+  plugins: [rrweb.getRecordConsolePlugin({
     level: ["info", "log", "warn", "error"],
     lengthThreshold: 10000,
     stringifyOptions: {
@@ -37,25 +40,29 @@ rrweb.record({
       numOfKeysLimit: 100,
     },
     logger: window.console,
-  },
+  })],
 });
 ```
+
 All recordLog options are described below:
-| key              | default                                                           | description                                                                                                                                                                                                                                                                                                                             |
+| key | default | description |
 | ---------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| level            | ['log','warn','error',...]                                        | Default value contains names of all console functions. You can override it by setting console levels you need.                                                                                                                                                                                                                          |
-| lengthThreshold  | 1000                                                              | Maximum number of records of console output.                                                                                                                                                                                                                                                                                            |
-| stringifyOptions | {        stringLengthLimit: undefined,       numOfKeysLimit: 50 } | If console output includes js objects, we need to stringify them. `stringLengthLimit` limits the string length of single value. `numOfKeysLimit` limits the number of keys in an object. If an object contains more keys than this limit, we would only save object's name. You can reduce the size of events by setting these options. |
-| logger           | window.console                                                    | the console object we would record.You can set a console object from another execution environment where you would like to record.                                                                                                                                                                                                      |
+| level | ['log','warn','error',...] | Default value contains names of all console functions. You can override it by setting console levels you need. |
+| lengthThreshold | 1000 | Maximum number of records of console output. |
+| stringifyOptions | { stringLengthLimit: undefined, numOfKeysLimit: 50 } | If console output includes js objects, we need to stringify them. `stringLengthLimit` limits the string length of single value. `numOfKeysLimit` limits the number of keys in an object. If an object contains more keys than this limit, we would only save object's name. You can reduce the size of events by setting these options. |
+| logger | window.console | the console object we would record.You can set a console object from another execution environment where you would like to record. |
 
 ## replay console
+
 If recorded events include data of console log type, we will automatically play them.
 
 ```js
 const replayer = new rrweb.Replayer(events, {
-  logConfig: {
-    level: ["info", "log", "warn", "error"]
-  },
+  plugins: [
+    rrweb.getReplayConsolePlugin({
+      level: ['info', 'log', 'warn', 'error'],
+    }),
+  ],
 });
 replayer.play();
 ```
@@ -65,4 +72,4 @@ Description of replay option is as follows:
 | key          | default                                                                                      | description                                                                                                                             |
 | ------------ | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
 | level        | ['log','warn','error',...]                                                                   | Same meaning as that option in recordLog. You can set this option to play levels of log you need.                                       |
-| replayLogger | a console based object that implements the interface [ReplayLogger](../../src/types.ts#L417) | You can also set a replay logger to replay the log messages in a simulated browser console by implementing the interface `ReplayLogger` |
\ No newline at end of file
+| replayLogger | a console based object that implements the interface [ReplayLogger](../../src/types.ts#L417) | You can also set a replay logger to replay the log messages in a simulated browser console by implementing the interface `ReplayLogger` |
diff --git a/docs/recipes/console.zh_CN.md b/docs/recipes/console.zh_CN.md
index 19e7a484ff..de0462174e 100644
--- a/docs/recipes/console.zh_CN.md
+++ b/docs/recipes/console.zh_CN.md
@@ -1,34 +1,37 @@
 # console 录制和播放
 
-从v0.9.11的下一个版本开始，我们增加了录制和播放控制台输出的功能。这个功能旨在为开发者提供更多的bug信息。对这项功能我们还提供了一些设置选项。
+从 v1.0.0 版本开始，我们以插件的形式增加了录制和播放控制台输出的功能。这个功能旨在为开发者提供更多的 bug 信息。对这项功能我们还提供了一些设置选项。
+
+### 开启录制 console 功能
 
-### 开启录制console功能
 可以通过如下代码使用默认的配置选项
+
 ```js
 rrweb.record({
   emit: emit(event) {
     // 如果要使用console来输出信息，请使用如下的写法
-    const defaultLog = console.log["__rrweb_original__"]?console.log["__rrweb_original__"]:console.log;
+    const defaultLog = console.log["__rrweb_original__"] ? console.log["__rrweb_original__"] : console.log;
     defaultLog(event);
   },
   // 使用默认的配置选项
-  recordLog: true,
+  plugins: [rrweb.getRecordConsolePlugin()],
 });
 ```
 
-**警告**: 在emit函数中你不应该直接调用console.log等函数，否则将会得到报错：`Uncaught RangeError: Maximum call stack size exceeded`。
-你应该调用console.log.\_\_rrweb_original__()来避免错误。
+**警告**: 在 emit 函数中你不应该直接调用 console.log 等函数，否则将会得到报错：`Uncaught RangeError: Maximum call stack size exceeded`。
+你应该调用 console.log.\_\_rrweb_original\_\_()来避免错误。
+
+你也可以定制录制 console 的选项
 
-你也可以定制录制console的选项
 ```js
 rrweb.record({
   emit: emit(event) {
     // 如果要使用console来输出信息，请使用如下的写法
-    const defaultLog = console.log["__rrweb_original__"]?console.log["__rrweb_original__"]:console.log;
+    const defaultLog = console.log["__rrweb_original__"] ? console.log["__rrweb_original__"] : console.log;
     defaultLog(event);
   },
   // 定制的选项
-  recordLog: {
+  plugins: [rrweb.getRecordConsolePlugin({
     level: ["info", "log", "warn", "error"],
     lengthThreshold: 10000,
     stringifyOptions: {
@@ -36,31 +39,36 @@ rrweb.record({
       numOfKeysLimit: 100,
     },
     logger: window.console,
-  },
+  })],
 });
 ```
+
 如下是配置选项的详细说明：
-| key              | 默认值                                                            | 功能                                                                                                                                                                                                                                                                               |
+| key | 默认值 | 功能 |
 | ---------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| level            | ['log','warn','error',...]                                        | 默认值包含了console的全部函数，你也可以传入想要录制的console函数。                                                                                                                                                                                                                 |
-| lengthThreshold  | 1000                                                              | 录制console输出信息的最大条数。                                                                                                                                                                                                                                                    |
-| stringifyOptions | {        stringLengthLimit: undefined,       numOfKeysLimit: 50 } | 如果console输出包含了js对象，我们需要对其进行序列化，`stringLengthLimit` 限制了单个值能转化的最大字符串长度，`numOfKeysLimit` 限制了一个被序列化的js对象能够包含的最大数量key，如果对象的key数量超过了这个限制，我们将只保留对象的名字。你能通过这些选项来减小生成的events的体积。 |
-| logger           | window.console                                                    | 要录制的console对象，你也可以传入一个想要录制的其他js执行环境的console对象。                                                                                                                                                                                                       |
+| level | ['log','warn','error',...] | 默认值包含了 console 的全部函数，你也可以传入想要录制的 console 函数。 |
+| lengthThreshold | 1000 | 录制 console 输出信息的最大条数。 |
+| stringifyOptions | { stringLengthLimit: undefined, numOfKeysLimit: 50 } | 如果 console 输出包含了 js 对象，我们需要对其进行序列化，`stringLengthLimit` 限制了单个值能转化的最大字符串长度，`numOfKeysLimit` 限制了一个被序列化的 js 对象能够包含的最大数量 key，如果对象的 key 数量超过了这个限制，我们将只保留对象的名字。你能通过这些选项来减小生成的 events 的体积。 |
+| logger | window.console | 要录制的 console 对象，你也可以传入一个想要录制的其他 js 执行环境的 console 对象。 |
+
+## 播放 console 数据
 
-## 播放console数据
-如果replayer传入的events中包含了console类型的数据，我们将自动播放这些数据。
+如果 replayer 传入的 events 中包含了 console 类型的数据，我们将自动播放这些数据。
 
 ```js
 const replayer = new rrweb.Replayer(events, {
-  logConfig: {
-    level: ["info", "log", "warn", "error"]
-  },
+  plugins: [
+    rrweb.getReplayConsolePlugin({
+      level: ['info', 'log', 'warn', 'error'],
+    }),
+  ],
 });
 replayer.play();
 ```
-如下是对replay选项的描述：
 
-| key          | 默认值                                                               | 功能                                                                                                    |
-| ------------ | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| level        | ['log','warn','error',...]                                           | 与recordLog设置选项的含义相同，你可以只播放想要的console函数类型                                        |
-| replayLogger | 一个基于console的对接口[ReplayLogger](../../src/types.ts#L417)的实现 | 你也可以通过传入一个`ReplayLogger`接口的自己的实现，用html模拟一个浏览器控制台，来播放录制的console数据 |
\ No newline at end of file
+如下是对 replay 选项的描述：
+
+| key          | 默认值                                                                 | 功能                                                                                                        |
+| ------------ | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| level        | ['log','warn','error',...]                                             | 与 recordLog 设置选项的含义相同，你可以只播放想要的 console 函数类型                                        |
+| replayLogger | 一个基于 console 的对接口[ReplayLogger](../../src/types.ts#L417)的实现 | 你也可以通过传入一个`ReplayLogger`接口的自己的实现，用 html 模拟一个浏览器控制台，来播放录制的 console 数据 |

From dbbb20f5e5965798bb99d997ca30780505feaa41 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 5 Jul 2021 22:52:52 +0800
Subject: [PATCH 378/524] add plugin API recipe

---
 docs/recipes/index.md        | 10 +++-
 docs/recipes/index.zh_CN.md  | 12 +++--
 docs/recipes/plugin.md       | 99 ++++++++++++++++++++++++++++++++++++
 docs/recipes/plugin.zh_CN.md | 99 ++++++++++++++++++++++++++++++++++++
 4 files changed, 215 insertions(+), 5 deletions(-)
 create mode 100644 docs/recipes/plugin.md
 create mode 100644 docs/recipes/plugin.zh_CN.md

diff --git a/docs/recipes/index.md b/docs/recipes/index.md
index 4aefd08d1b..aab31d0d48 100644
--- a/docs/recipes/index.md
+++ b/docs/recipes/index.md
@@ -68,7 +68,13 @@ Canvas is a special HTML element, which will not be recorded by rrweb by default
 
 ### Console Recorder and Replayer
 
-Starting with a later version of v0.9.11, we add the ability to record and play back console output. 
+Starting with a later version of v0.9.11, we add the ability to record and play back console output.
 This feature aims to provide developers with more information about the bug scene. There are some options for recording and replaying console output.
 
-[link](./console.md)
\ No newline at end of file
+[link](./console.md)
+
+### Plugin
+
+The plugin API is designed to extend the function of rrweb without bump the size and complexity of rrweb's core part.
+
+[link](./plugin.md)
diff --git a/docs/recipes/index.zh_CN.md b/docs/recipes/index.zh_CN.md
index 76c1d150c9..bc07dd5f10 100644
--- a/docs/recipes/index.zh_CN.md
+++ b/docs/recipes/index.zh_CN.md
@@ -64,8 +64,14 @@ Canvas 是一种特殊的 HTML 元素，默认情况下其内容不会被 rrweb
 
 [链接](./canvas.zh_CN.md)
 
-### console录制和播放
+### console 录制和播放
 
-从v0.9.11的下一个版本开始，我们增加了录制和播放控制台输出的功能。这个功能旨在为开发者提供更多的bug信息。对这项功能我们还提供了一些设置选项。
+从 v0.9.11 的下一个版本开始，我们增加了录制和播放控制台输出的功能。这个功能旨在为开发者提供更多的 bug 信息。对这项功能我们还提供了一些设置选项。
 
-[链接](./console.zh_CN.md)
\ No newline at end of file
+[链接](./console.zh_CN.md)
+
+### 插件
+
+插件 API 的设计目标是在不增加 rrweb 核心部分大小和复杂性的前提下，扩展 rrweb 的功能。
+
+[链接](./plugin.zh_CN.md)
diff --git a/docs/recipes/plugin.md b/docs/recipes/plugin.md
new file mode 100644
index 0000000000..b3fea11906
--- /dev/null
+++ b/docs/recipes/plugin.md
@@ -0,0 +1,99 @@
+# Plugin
+
+The plugin API is designed to extend the function of rrweb without bump the size and complexity of rrweb's core part.
+
+## Interface
+
+Same to with other functionality in rrweb, a plugin can implement record or replay or both features.
+
+```ts
+export type RecordPlugin<TOptions = unknown> = {
+  name: string;
+  observer: (cb: Function, options: TOptions) => listenerHandler;
+  options: TOptions;
+};
+
+export type ReplayPlugin = {
+  handler: (
+    event: eventWithTime,
+    isSync: boolean,
+    context: { replayer: Replayer },
+  ) => void;
+};
+```
+
+Both record and replay plugins have a type interface.
+
+### example
+
+#### record plugin
+
+```ts
+const exampleRecordPlugin: RecordPlugin<{ foo: string }> = {
+  name: 'my-scope/example@1',
+  observer(cb, options) {
+    const timer = setInterval(() => {
+      cb({
+        foo: options.foo,
+        timestamp: Date.now(),
+      });
+    }, 1000);
+    return () => clearInterval(timer);
+  },
+  options: {
+    foo: 'bar',
+  },
+};
+
+rrweb.record({
+  emit: emit(event) {},
+  plugins: [exampleRecordPlugin],
+});
+```
+
+In this example, the record plugin will emit events like this:
+
+```js
+{
+  type: 6,
+  data: {
+    plugin: 'my-scope/example@1',
+    payload: {
+      foo: 'bar',
+      timestamp: 1624693882345,
+    },
+  },
+  timestamp: 1624693882345,
+}
+```
+
+#### replay plugin
+
+```ts
+const exampleReplayPlugin: ReplayPlugin = {
+  handler(event, isSync, context) {
+    if (event.type === EventType.Plugin) {
+      // do something with event.data.payload
+      if (event.data.plugin === 'my-scope/example@1') {
+        // handle example plugin data
+      }
+    }
+  },
+};
+
+const replayer = new rrweb.Replayer(events, {
+  plugins: [exampleReplayPlugin],
+});
+```
+
+A replay plugin can interact with the replayer by using `context.replayer`.
+
+## naming a plugin
+
+A record plugin should have a unique name, and it will be stored in the event it emits.
+
+**Since we will have both plugins in the rrweb repo and plugins in users' own codebase, which may cause naming conflicts in the future, we strongly recommended users naming their own plugins in this way:**
+
+> scope/name@version
+
+For example `rrweb/console@1` or `github/pr@2`.
diff --git a/docs/recipes/plugin.zh_CN.md b/docs/recipes/plugin.zh_CN.md
new file mode 100644
index 0000000000..6918ab71c5
--- /dev/null
+++ b/docs/recipes/plugin.zh_CN.md
@@ -0,0 +1,99 @@
+# 插件
+
+插件 API 的设计目标是在不增加 rrweb 核心部分大小和复杂性的前提下，扩展 rrweb 的功能。
+
+## 接口
+
+与 rrweb 其它功能相似，插件可以包含同时包含录制、回放侧的功能，也可以只实现其中任一。
+
+```ts
+export type RecordPlugin<TOptions = unknown> = {
+  name: string;
+  observer: (cb: Function, options: TOptions) => listenerHandler;
+  options: TOptions;
+};
+
+export type ReplayPlugin = {
+  handler: (
+    event: eventWithTime,
+    isSync: boolean,
+    context: { replayer: Replayer },
+  ) => void;
+};
+```
+
+以上是录制和回放插件的接口类型。
+
+### 示例
+
+#### 录制侧插件
+
+```ts
+const exampleRecordPlugin: RecordPlugin<{ foo: string }> = {
+  name: 'my-scope/example@1',
+  observer(cb, options) {
+    const timer = setInterval(() => {
+      cb({
+        foo: options.foo,
+        timestamp: Date.now(),
+      });
+    }, 1000);
+    return () => clearInterval(timer);
+  },
+  options: {
+    foo: 'bar',
+  },
+};
+
+rrweb.record({
+  emit: emit(event) {},
+  plugins: [exampleRecordPlugin],
+});
+```
+
+在这个示例中，录制侧插件将会输出这样的事件：
+
+```js
+{
+  type: 6,
+  data: {
+    plugin: 'my-scope/example@1',
+    payload: {
+      foo: 'bar',
+      timestamp: 1624693882345,
+    },
+  },
+  timestamp: 1624693882345,
+}
+```
+
+#### 回放侧插件
+
+```ts
+const exampleReplayPlugin: ReplayPlugin = {
+  handler(event, isSync, context) {
+    if (event.type === EventType.Plugin) {
+      // 使用 event.data.payload
+      if (event.data.plugin === 'my-scope/example@1') {
+        // 处理示例插件录制的数据
+      }
+    }
+  },
+};
+
+const replayer = new rrweb.Replayer(events, {
+  plugins: [exampleReplayPlugin],
+});
+```
+
+回放侧插件可以通过 `context.replayer` 与播放器进行交互。
+
+## 插件命名
+
+录制侧插件应该拥有全局唯一的名称，并且其名称会被记录在输出的事件中。
+
+**由于会同时存在 rrweb 仓库中的官方插件与用户自行实现的自定义插件，所以我们推荐使用统一的命名规则避免冲突，命名方式如下：**
+
+> scope/name@version
+
+例如： `rrweb/console@1` 或 `github/pr@2`。

From 89bbcb3d0730de9130519d13ac6195a963968cc5 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 6 Jul 2021 00:18:40 +0800
Subject: [PATCH 379/524] close #489 add v1.0.0 changelog

---
 CHANGELOG.md                | 26 ++++++++++++++++++++++++++
 docs/recipes/index.md       |  2 +-
 docs/recipes/index.zh_CN.md |  2 +-
 3 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 CHANGELOG.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000000..8521fa79c2
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,26 @@
+# Changelog
+
+## v1.0.0
+
+### Featrues & Improvements
+
+- Support record same-origin non-sandboxed iframe.
+- Support record open-mode shadow DOM.
+- Implement the plugin API.
+- Export `record.takeFullSnapshot` as a public API
+- Record and replay drag events.
+- Add options to mask texts (#540).
+
+### Fixes
+
+- Get the original MutationObserver when Angular patched it.
+- Fix RangeError: Maximum call stack size exceeded (#479).
+- Fix the linked-list implementation in the recorder.
+- Don't perform newly added actions if the player is paused (#539).
+- Fix inaccurate mouse position (#522)
+
+### Breaking Changes
+
+- Deprecated the usage of `rrweb.mirror`. Please use `record.mirror` and `replayer.getMirror()` instead.
+- Deprecated the record option `recordLog `. See the new plugin API [here](./docs/recipes/console.md).
+- Deprecated the replay option ` `. See the new plugin API [here](./docs/recipes/console.md).
diff --git a/docs/recipes/index.md b/docs/recipes/index.md
index aab31d0d48..0a5426062a 100644
--- a/docs/recipes/index.md
+++ b/docs/recipes/index.md
@@ -68,7 +68,7 @@ Canvas is a special HTML element, which will not be recorded by rrweb by default
 
 ### Console Recorder and Replayer
 
-Starting with a later version of v0.9.11, we add the ability to record and play back console output.
+Starting from v1.0.0, we add the plugin to record and play back console output.
 This feature aims to provide developers with more information about the bug scene. There are some options for recording and replaying console output.
 
 [link](./console.md)
diff --git a/docs/recipes/index.zh_CN.md b/docs/recipes/index.zh_CN.md
index bc07dd5f10..b54e100bf6 100644
--- a/docs/recipes/index.zh_CN.md
+++ b/docs/recipes/index.zh_CN.md
@@ -66,7 +66,7 @@ Canvas 是一种特殊的 HTML 元素，默认情况下其内容不会被 rrweb
 
 ### console 录制和播放
 
-从 v0.9.11 的下一个版本开始，我们增加了录制和播放控制台输出的功能。这个功能旨在为开发者提供更多的 bug 信息。对这项功能我们还提供了一些设置选项。
+从 v1.0.0 版本开始，我们以插件的形式增加了录制和播放控制台输出的功能。这个功能旨在为开发者提供更多的 bug 信息。对这项功能我们还提供了一些设置选项。
 
 [链接](./console.zh_CN.md)
 

From 55f7f4f5d2d96c94134d60c385e287ad5fec7b49 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 6 Jul 2021 00:25:08 +0800
Subject: [PATCH 380/524] Release 1.0.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0146cd6814..013e5c6201 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",

From 6f17eb3a9da280e9113dcecb2eed3561f5f0bddb Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 6 Jul 2021 00:30:50 +0800
Subject: [PATCH 381/524] upgrade rrweb

---
 package.json |  2 +-
 yarn.lock    | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index a797193b10..66193accfd 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^1.0.0-beta.0"
+    "rrweb": "^1.0.0"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/yarn.lock b/yarn.lock
index 9043da0921..a7e33fc2f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1222,21 +1222,21 @@ rollup@^1.20.0:
     "@types/node" "*"
     acorn "^7.1.0"
 
-rrweb-snapshot@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.4.tgz#a71d812004c340aaa5313d313a7bd343eb8c260d"
-  integrity sha512-0iVRbsWSVOVEjgE8MA0+zYwlLMSwkVsUA7KhmvVaBK+viYcbx79SKRB8PkeFz1/1Jnn9fnkzPHlh42F+xFuwbQ==
+rrweb-snapshot@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.npmjs.org/rrweb-snapshot/download/rrweb-snapshot-1.1.6.tgz#e598510e387b9b2c62ce0cfc586a37c89549b228"
+  integrity sha1-5ZhRDjh7myxizgz8WGo3yJVJsig=
 
-rrweb@^1.0.0-beta.0:
-  version "1.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-1.0.0-beta.0.tgz#c781794ac4cf80e55e4c240090f246891b8bf704"
-  integrity sha512-mCDDCEEJpIDNsmL9kNMl0FYMtoMlza8/wpjcK1uWOVk09jGANyxRVc0+jjUl1D83k9KlFXx0kj1TTSTYHdanMw==
+rrweb@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/rrweb/download/rrweb-1.0.0.tgz#563b0dde4fd485fbdf4c0453e00446a8a3d41245"
+  integrity sha1-VjsN3k/UhfvfTART4ARGqKPUEkU=
   dependencies:
     "@types/css-font-loading-module" "0.0.4"
     "@xstate/fsm" "^1.4.0"
     fflate "^0.4.4"
     mitt "^1.1.3"
-    rrweb-snapshot "^1.1.4"
+    rrweb-snapshot "^1.1.6"
 
 sade@^1.4.0:
   version "1.7.3"

From 71baf5e7dcc071f3d5181b44bec95edf0fd735e7 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 6 Jul 2021 00:31:24 +0800
Subject: [PATCH 382/524] Release 0.7.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 66193accfd..87bd2878f4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From f99b00eb9d0c3fcdb274ccb61e50eeb1e7241547 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Tue, 6 Jul 2021 04:55:52 +0100
Subject: [PATCH 383/524] Ignore firstFullSnapshot once only after initial
 'poster' build (#608)

* Encountered a bug where firstFullSnapshot was played twice because timer was immediately started and reached the snapshot before the setTimeout returned

* Ignoring a FullSnapshot needs to be a one-time only thing, as otherwise we'll ignore it after scrubbing (restarting play head at a particular time). This is a problem if mutations have altered the player state, and we try to replay those mutations, so we e.g. try to remove an element that has already been removed because we haven't reset the FullSnapshot state

* Some `npm run typings` related fixups
---
 src/replay/index.ts       | 23 +++++++++++++++--------
 typings/replay/index.d.ts |  2 +-
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index 0e5aec9bcb..b411acf612 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -89,8 +89,8 @@ export class Replayer {
   private imageMap: Map<eventWithTime, HTMLImageElement> = new Map();
 
   private mirror: Mirror = createMirror();
-  /** The first time the player is playing. */
-  private firstPlayedEvent: eventWithTime | null = null;
+
+  private firstFullSnapshot: eventWithTime | true | null = null;
 
   private newDocumentQueue: addedNodeMutation[] = [];
 
@@ -145,7 +145,7 @@ export class Replayer {
       }
     });
     this.emitter.on(ReplayerEvents.PlayBack, () => {
-      this.firstPlayedEvent = null;
+      this.firstFullSnapshot = null;
       this.mirror.reset();
     });
 
@@ -207,10 +207,11 @@ export class Replayer {
     if (firstFullsnapshot) {
       setTimeout(() => {
         // when something has been played, there is no need to rebuild poster
-        if (this.firstPlayedEvent) {
+        if (this.firstFullSnapshot) {
+          // true if any other fullSnapshot has been executed by Timer already
           return;
         }
-        this.firstPlayedEvent = firstFullsnapshot;
+        this.firstFullSnapshot = firstFullsnapshot;
         this.rebuildFullSnapshot(
           firstFullsnapshot as fullSnapshotEvent & { timestamp: number },
         );
@@ -429,9 +430,15 @@ export class Replayer {
         break;
       case EventType.FullSnapshot:
         castFn = () => {
-          // Don't build a full snapshot during the first play through since we've already built it when the player was mounted.
-          if (this.firstPlayedEvent && this.firstPlayedEvent === event) {
-            return;
+          if (this.firstFullSnapshot) {
+            if (this.firstFullSnapshot === event) {
+              // we've already built this exact FullSnapshot when the player was mounted, and haven't built any other FullSnapshot since
+              this.firstFullSnapshot = true; // forget as we might need to re-execute this FullSnapshot later e.g. to rebuild after scrubbing
+              return;
+            }
+          } else {
+            // Timer (requestAnimationFrame) can be faster than setTimeout(..., 1)
+            this.firstFullSnapshot = true;
           }
           this.rebuildFullSnapshot(event, isSync);
           this.iframe.contentWindow!.scrollTo(event.data.initialOffset);
diff --git a/typings/replay/index.d.ts b/typings/replay/index.d.ts
index fc9302092b..0f021d3298 100644
--- a/typings/replay/index.d.ts
+++ b/typings/replay/index.d.ts
@@ -20,7 +20,7 @@ export declare class Replayer {
     private elementStateMap;
     private imageMap;
     private mirror;
-    private firstPlayedEvent;
+    private firstFullSnapshot;
     private newDocumentQueue;
     constructor(events: Array<eventWithTime | string>, config?: Partial<playerConfig>);
     on(event: string, handler: Handler): this;

From 4f08049ad0f14efe833aa5d810871805a506aa52 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 6 Jul 2021 12:11:21 +0800
Subject: [PATCH 384/524] add release to github

---
 .gitignore       | 2 ++
 .release-it.json | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/.gitignore b/.gitignore
index de1069e348..afbda82bac 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,5 @@ lib
 temp
 
 *.log
+
+.env
diff --git a/.release-it.json b/.release-it.json
index 72e1199133..413a96b8ec 100644
--- a/.release-it.json
+++ b/.release-it.json
@@ -5,5 +5,8 @@
   },
   "git": {
     "requireCleanWorkingDir": false
+  },
+  "github": {
+    "release": true
   }
 }
\ No newline at end of file

From c658ee9e01a936daa6986774b7a2d4a2543737ba Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 6 Jul 2021 12:13:25 +0800
Subject: [PATCH 385/524] Release 1.0.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 013e5c6201..0061eeeb77 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",

From 1f164e3bef3cf8601e80f2c05a400c424655b739 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 6 Jul 2021 12:15:31 +0800
Subject: [PATCH 386/524] upgrade rrweb

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 87bd2878f4..cde55e500e 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^1.0.0"
+    "rrweb": "^1.0.1"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/yarn.lock b/yarn.lock
index a7e33fc2f0..38c9b3f2fd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1227,10 +1227,10 @@ rrweb-snapshot@^1.1.6:
   resolved "https://registry.npmjs.org/rrweb-snapshot/download/rrweb-snapshot-1.1.6.tgz#e598510e387b9b2c62ce0cfc586a37c89549b228"
   integrity sha1-5ZhRDjh7myxizgz8WGo3yJVJsig=
 
-rrweb@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/rrweb/download/rrweb-1.0.0.tgz#563b0dde4fd485fbdf4c0453e00446a8a3d41245"
-  integrity sha1-VjsN3k/UhfvfTART4ARGqKPUEkU=
+rrweb@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-1.0.1.tgz#4a1fab4ab7fec4d7308443f012e591f9c1e4d209"
+  integrity sha512-T7aH4qcJt1KUK6utF7XzfRgMLgGqntzZ5IUZw36CQ8lrsO1UQm2gyzgMFSLbDV4EgplN0oIenAT29RKT9ET3Ig==
   dependencies:
     "@types/css-font-loading-module" "0.0.4"
     "@xstate/fsm" "^1.4.0"

From 8e654595f9ad6ecca0f066ac44356d857d385950 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 6 Jul 2021 12:17:27 +0800
Subject: [PATCH 387/524] Release 0.7.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index cde55e500e..fa7f88f2ae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From 7a0e04c5749254f9f8b38753424f4e7a9c9caf23 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Thu, 8 Jul 2021 16:27:21 +0200
Subject: [PATCH 388/524] Add `userTriggered` (#495)

* add `userTriggered`

* update snapshots to add userTriggered

* add `userTriggered`

* update snapshots to add userTriggered

* update snapshot to include userTrigger

* only set userTriggered on `userTriggeredOnInput: true`

* What is user triggered?

* correct snapshot

* add second radio to demonstrate userTriggered
---
 guide.md                                    |   45 +-
 guide.zh_CN.md                              |   45 +-
 src/record/index.ts                         |    2 +
 src/record/observer.ts                      |   35 +-
 src/replay/index.ts                         |    6 +-
 src/types.ts                                |    9 +
 test/__snapshots__/integration.test.ts.snap | 1617 +++++++++++++++----
 test/html/form.html                         |   67 +-
 test/integration.test.ts                    |   19 +
 9 files changed, 1458 insertions(+), 387 deletions(-)

diff --git a/guide.md b/guide.md
index 8a44b28959..8932ba7a56 100644
--- a/guide.md
+++ b/guide.md
@@ -135,28 +135,29 @@ setInterval(save, 10 * 1000);
 
 The parameter of `rrweb.record` accepts the following options.
 
-| key              | default            | description                                                                                                                                                              |
-| ---------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| 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                                                           |
-| 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                                                           |
-| maskTextClass    | 'rr-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-snapshot/blob/0bb95f1ee77fef03166a68f75b959ad997171442/src/types.ts#L77-L95)      |
-| maskInputFn      | -                  | customize mask input content recording logic                                                                                                                             |
-| maskTextFn       | -                  | customize mask text content recording logic                                                                                                                              |
-| slimDOMOptions   | {}                 | remove unnecessary parts of the DOM <br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91) |
-| inlineStylesheet | true               | whether to inline the stylesheet in the events                                                                                                                           |
-| hooks            | {}                 | hooks for events<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                             |
-| packFn           | -                  | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                           |
-| sampling         | -                  | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                           |
-| recordCanvas     | false              | whether to record the canvas element                                                                                                                                     |
-| collectFonts     | false              | whether to collect fonts in the website                                                                                                                                  |
-| recordLog        | false              | whether to record console output, refer to the [console recipe](./docs/recipes/console.md)                                                                               |
+| key                  | default            | description                                                                                                                                                                                   |
+| -------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 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                                                                                |
+| 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                                                                                |
+| maskTextClass        | 'rr-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-snapshot/blob/0bb95f1ee77fef03166a68f75b959ad997171442/src/types.ts#L77-L95)                           |
+| maskInputFn          | -                  | customize mask input content recording logic                                                                                                                                                  |
+| maskTextFn           | -                  | customize mask text content recording logic                                                                                                                                                   |
+| slimDOMOptions       | {}                 | remove unnecessary parts of the DOM <br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91)                      |
+| inlineStylesheet     | true               | whether to inline the stylesheet in the events                                                                                                                                                |
+| hooks                | {}                 | hooks for events<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                                                  |
+| packFn               | -                  | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                                                |
+| sampling             | -                  | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                                                |
+| recordCanvas         | false              | whether to record the canvas element                                                                                                                                                          |
+| collectFonts         | false              | whether to collect fonts in the website                                                                                                                                                       |
+| recordLog            | false              | whether to record console output, refer to the [console recipe](./docs/recipes/console.md)                                                                                                    |
+| userTriggeredOnInput | false              | whether to add `userTriggered` on input events that indicates if this event was triggered directly by the user or not. [What is `userTriggered`?](https://github.com/rrweb-io/rrweb/pull/495) |
 
 #### Privacy
 
diff --git a/guide.zh_CN.md b/guide.zh_CN.md
index 87661f8b52..86f02b93a8 100644
--- a/guide.zh_CN.md
+++ b/guide.zh_CN.md
@@ -131,28 +131,29 @@ setInterval(save, 10 * 1000);
 
 `rrweb.record(config)` 的 config 部分接受以下参数
 
-| key              | 默认值             | 功能                                                                                                                                                                   |
-| ---------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| emit             | 必填               | 获取当前录制的数据                                                                                                                                                     |
-| checkoutEveryNth | -                  | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                           |
-| checkoutEveryNms | -                  | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                             |
-| blockClass       | 'rr-block'         | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节                                                                                                |
-| blockSelector    | null               | 所有 element.matches(blockSelector)为 true 的元素都不会被录制，回放时取而代之的是一个同等宽高的占位元素                                                                |
-| ignoreClass      | 'rr-ignore'        | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节                                                                                                |
-| maskTextClass    | 'rr-mask'          | 字符串或正则表达式，可用于自定义忽略元素 text 内容的类名，详见[“隐私”](#隐私)章节                                                                                      |
-| maskTextSelector | null               | 所有 element.matches(maskTextSelector)为 true 的元素及其子元素的 text 内容将会被屏蔽                                                                                   |
-| maskAllInputs    | false              | 将所有输入内容记录为 \*                                                                                                                                                |
-| maskInputOptions | { password: true } | 选择将特定类型的输入框内容记录为 \*<br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/0bb95f1ee77fef03166a68f75b959ad997171442/src/types.ts#L77-L95) |
-| maskInputFn      | -                  | 自定义特定类型的输入框内容记录逻辑                                                                                                                                     |
-| maskTextFn       | -                  | 自定义文字内容的记录逻辑                                                                                                                                               |
-| slimDOMOptions   | {}                 | 去除 DOM 中不必要的部分 <br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91)                |
-| inlineStylesheet | true               | 是否将样式表内联                                                                                                                                                       |
-| hooks            | {}                 | 各类事件的回调<br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                                  |
-| packFn           | -                  | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                             |
-| sampling         | -                  | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                             |
-| recordCanvas     | false              | 是否记录 canvas 内容                                                                                                                                                   |
-| collectFonts     | false              | 是否记录页面中的字体文件                                                                                                                                               |
-| recordLog        | false              | 是否记录 console 输出，详见[console 录制和播放](./docs/recipes/console.zh_CN.md)                                                                                       |
+| key                  | 默认值             | 功能                                                                                                                                                                   |
+| -------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| emit                 | 必填               | 获取当前录制的数据                                                                                                                                                     |
+| checkoutEveryNth     | -                  | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                           |
+| checkoutEveryNms     | -                  | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                             |
+| blockClass           | 'rr-block'         | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节                                                                                                |
+| blockSelector        | null               | 所有 element.matches(blockSelector)为 true 的元素都不会被录制，回放时取而代之的是一个同等宽高的占位元素                                                                |
+| ignoreClass          | 'rr-ignore'        | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节                                                                                                |
+| maskTextClass        | 'rr-mask'          | 字符串或正则表达式，可用于自定义忽略元素 text 内容的类名，详见[“隐私”](#隐私)章节                                                                                      |
+| maskTextSelector     | null               | 所有 element.matches(maskTextSelector)为 true 的元素及其子元素的 text 内容将会被屏蔽                                                                                   |
+| maskAllInputs        | false              | 将所有输入内容记录为 \*                                                                                                                                                |
+| maskInputOptions     | { password: true } | 选择将特定类型的输入框内容记录为 \*<br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/0bb95f1ee77fef03166a68f75b959ad997171442/src/types.ts#L77-L95) |
+| maskInputFn          | -                  | 自定义特定类型的输入框内容记录逻辑                                                                                                                                     |
+| maskTextFn           | -                  | 自定义文字内容的记录逻辑                                                                                                                                               |
+| slimDOMOptions       | {}                 | 去除 DOM 中不必要的部分 <br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91)                |
+| inlineStylesheet     | true               | 是否将样式表内联                                                                                                                                                       |
+| hooks                | {}                 | 各类事件的回调<br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                                  |
+| packFn               | -                  | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                             |
+| sampling             | -                  | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                             |
+| recordCanvas         | false              | 是否记录 canvas 内容                                                                                                                                                   |
+| collectFonts         | false              | 是否记录页面中的字体文件                                                                                                                                               |
+| recordLog            | false              | 是否记录 console 输出，详见[console 录制和播放](./docs/recipes/console.zh_CN.md)                                                                                       |
+| userTriggeredOnInput | false              | [什么是 `userTriggered`](https://github.com/rrweb-io/rrweb/pull/495)                                                                                                   |
 
 #### 隐私
 
diff --git a/src/record/index.ts b/src/record/index.ts
index df225ea39d..d99097c383 100644
--- a/src/record/index.ts
+++ b/src/record/index.ts
@@ -57,6 +57,7 @@ function record<T = eventWithTime>(
     sampling = {},
     mousemoveWait,
     recordCanvas = false,
+    userTriggeredOnInput = false,
     collectFonts = false,
     plugins,
     keepIframeSrcFn = () => false,
@@ -379,6 +380,7 @@ function record<T = eventWithTime>(
           inlineStylesheet,
           sampling,
           recordCanvas,
+          userTriggeredOnInput,
           collectFonts,
           doc,
           maskInputFn,
diff --git a/src/record/observer.ts b/src/record/observer.ts
index 7abcb77957..2c96c8f768 100644
--- a/src/record/observer.ts
+++ b/src/record/observer.ts
@@ -337,6 +337,15 @@ function initViewportResizeObserver(
   return on('resize', updateDimension, window);
 }
 
+function wrapEventWithUserTriggeredFlag(
+  v: inputValue,
+  enable: boolean,
+): inputValue {
+  const value = { ...v };
+  if (!enable) delete value.userTriggered;
+  return value;
+}
+
 export const INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT'];
 const lastInputValueMap: WeakMap<EventTarget, inputValue> = new WeakMap();
 function initInputObserver(
@@ -348,9 +357,11 @@ function initInputObserver(
   maskInputOptions: MaskInputOptions,
   maskInputFn: MaskInputFn | undefined,
   sampling: SamplingStrategy,
+  userTriggeredOnInput: boolean,
 ): listenerHandler {
   function eventHandler(event: Event) {
     const target = getEventTarget(event);
+    const userTriggered = event.isTrusted;
     if (
       !target ||
       !(target as Element).tagName ||
@@ -381,7 +392,13 @@ function initInputObserver(
         maskInputFn,
       });
     }
-    cbWithDedup(target, { text, isChecked });
+    cbWithDedup(
+      target,
+      wrapEventWithUserTriggeredFlag(
+        { text, isChecked, userTriggered },
+        userTriggeredOnInput,
+      ),
+    );
     // if a radio was checked
     // the other radios with the same name attribute will be unchecked.
     const name: string | undefined = (target as HTMLInputElement).name;
@@ -390,10 +407,17 @@ function initInputObserver(
         .querySelectorAll(`input[type="radio"][name="${name}"]`)
         .forEach((el) => {
           if (el !== target) {
-            cbWithDedup(el, {
-              text: (el as HTMLInputElement).value,
-              isChecked: !isChecked,
-            });
+            cbWithDedup(
+              el,
+              wrapEventWithUserTriggeredFlag(
+                {
+                  text: (el as HTMLInputElement).value,
+                  isChecked: !isChecked,
+                  userTriggered: false,
+                },
+                userTriggeredOnInput,
+              ),
+            );
           }
         });
     }
@@ -763,6 +787,7 @@ export function initObservers(
     o.maskInputOptions,
     o.maskInputFn,
     o.sampling,
+    o.userTriggeredOnInput,
   );
   const mediaInteractionHandler = initMediaInteractionObserver(
     o.mediaInteractionCb,
diff --git a/src/replay/index.ts b/src/replay/index.ts
index b411acf612..67531c6136 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -115,6 +115,7 @@ export class Replayer {
       triggerFocus: true,
       UNSAFE_replayCanvas: false,
       pauseAnimation: true,
+      userTriggeredOnInput: true,
       mouseTail: defaultMouseTailConfig,
     };
     this.config = Object.assign({}, defaultConfig, config);
@@ -501,10 +502,7 @@ export class Replayer {
 
       // events are kept sorted by timestamp, check if this is the last event
       let last_index = this.service.state.context.events.length - 1;
-      if (
-        event ===
-        this.service.state.context.events[last_index]
-      ) {
+      if (event === this.service.state.context.events[last_index]) {
         const finish = () => {
           if (last_index < this.service.state.context.events.length - 1) {
             // more events have been added since the setTimeout
diff --git a/src/types.ts b/src/types.ts
index 10ee8b313e..d90ea4f845 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -218,6 +218,7 @@ export type recordOptions<T> = {
   packFn?: PackFn;
   sampling?: SamplingStrategy;
   recordCanvas?: boolean;
+  userTriggeredOnInput?: boolean;
   collectFonts?: boolean;
   plugins?: RecordPlugin[];
   // departed, please use sampling options
@@ -247,6 +248,7 @@ export type observerParam = {
   fontCb: fontCallback;
   sampling: SamplingStrategy;
   recordCanvas: boolean;
+  userTriggeredOnInput: boolean;
   collectFonts: boolean;
   slimDOMOptions: SlimDOMOptions;
   doc: Document;
@@ -419,6 +421,12 @@ export type viewportResizeCallback = (d: viewportResizeDimension) => void;
 export type inputValue = {
   text: string;
   isChecked: boolean;
+
+  // `userTriggered` indicates if this event was triggered directly by user (userTriggered: true)
+  // or was triggered indirectly (userTriggered: false)
+  // Example of `userTriggered` in action:
+  // User clicks on radio element (userTriggered: true) which triggers the other radio element to change (userTriggered: false)
+  userTriggered?: boolean;
 };
 
 export type inputCallback = (v: inputValue & { id: number }) => void;
@@ -484,6 +492,7 @@ export type playerConfig = {
   triggerFocus: boolean;
   UNSAFE_replayCanvas: boolean;
   pauseAnimation?: boolean;
+  userTriggeredOnInput: boolean;
   mouseTail:
     | boolean
     | {
diff --git a/test/__snapshots__/integration.test.ts.snap b/test/__snapshots__/integration.test.ts.snap
index ea136c2a1a..35294f80f4 100644
--- a/test/__snapshots__/integration.test.ts.snap
+++ b/test/__snapshots__/integration.test.ts.snap
@@ -917,7 +917,7 @@ exports[`form 1`] = `
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 5
                   },
                   {
@@ -931,7 +931,7 @@ exports[`form 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 7
                   },
                   {
@@ -946,7 +946,7 @@ exports[`form 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 9
                   },
                   {
@@ -961,7 +961,7 @@ exports[`form 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 11
                   },
                   {
@@ -979,7 +979,7 @@ exports[`form 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\",
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 14
                   }
                 ],
@@ -987,7 +987,7 @@ exports[`form 1`] = `
               },
               {
                 \\"type\\": 3,
-                \\"textContent\\": \\"\\\\n\\\\n\\",
+                \\"textContent\\": \\"\\\\n\\\\n  \\",
                 \\"id\\": 15
               },
               {
@@ -997,7 +997,7 @@ exports[`form 1`] = `
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 17
                   },
                   {
@@ -1007,7 +1007,7 @@ exports[`form 1`] = `
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 19
                       },
                       {
@@ -1019,7 +1019,7 @@ exports[`form 1`] = `
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"textContent\\": \\"\\\\n        \\",
                             \\"id\\": 21
                           },
                           {
@@ -1033,7 +1033,7 @@ exports[`form 1`] = `
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"textContent\\": \\"\\\\n      \\",
                             \\"id\\": 23
                           }
                         ],
@@ -1041,33 +1041,33 @@ exports[`form 1`] = `
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 24
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"radio\\"
-                        },
+                        \\"attributes\\": {},
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"textContent\\": \\"\\\\n        \\",
                             \\"id\\": 26
                           },
                           {
                             \\"type\\": 2,
                             \\"tagName\\": \\"input\\",
                             \\"attributes\\": {
-                              \\"type\\": \\"radio\\"
+                              \\"type\\": \\"radio\\",
+                              \\"name\\": \\"toggle\\",
+                              \\"value\\": \\"on\\"
                             },
                             \\"childNodes\\": [],
                             \\"id\\": 27
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"textContent\\": \\"\\\\n      \\",
                             \\"id\\": 28
                           }
                         ],
@@ -1075,33 +1075,34 @@ exports[`form 1`] = `
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 29
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"checkbox\\"
-                        },
+                        \\"attributes\\": {},
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"textContent\\": \\"\\\\n        \\",
                             \\"id\\": 31
                           },
                           {
                             \\"type\\": 2,
                             \\"tagName\\": \\"input\\",
                             \\"attributes\\": {
-                              \\"type\\": \\"checkbox\\"
+                              \\"type\\": \\"radio\\",
+                              \\"name\\": \\"toggle\\",
+                              \\"value\\": \\"off\\",
+                              \\"checked\\": true
                             },
                             \\"childNodes\\": [],
                             \\"id\\": 32
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"textContent\\": \\"\\\\n      \\",
                             \\"id\\": 33
                           }
                         ],
@@ -1109,21 +1110,55 @@ exports[`form 1`] = `
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 34
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"label\\",
                         \\"attributes\\": {
-                          \\"for\\": \\"textarea\\"
+                          \\"for\\": \\"checkbox\\"
                         },
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"textContent\\": \\"\\\\n        \\",
                             \\"id\\": 36
                           },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"input\\",
+                            \\"attributes\\": {
+                              \\"type\\": \\"checkbox\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 37
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 38
+                          }
+                        ],
+                        \\"id\\": 35
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 39
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"textarea\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 41
+                          },
                           {
                             \\"type\\": 2,
                             \\"tagName\\": \\"textarea\\",
@@ -1134,20 +1169,20 @@ exports[`form 1`] = `
                               \\"rows\\": \\"10\\"
                             },
                             \\"childNodes\\": [],
-                            \\"id\\": 37
+                            \\"id\\": 42
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
-                            \\"id\\": 38
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 43
                           }
                         ],
-                        \\"id\\": 35
+                        \\"id\\": 40
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 39
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 44
                       },
                       {
                         \\"type\\": 2,
@@ -1158,8 +1193,8 @@ exports[`form 1`] = `
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 41
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 46
                           },
                           {
                             \\"type\\": 2,
@@ -1172,8 +1207,8 @@ exports[`form 1`] = `
                             \\"childNodes\\": [
                               {
                                 \\"type\\": 3,
-                                \\"textContent\\": \\"\\\\n        \\",
-                                \\"id\\": 43
+                                \\"textContent\\": \\"\\\\n          \\",
+                                \\"id\\": 48
                               },
                               {
                                 \\"type\\": 2,
@@ -1186,15 +1221,15 @@ exports[`form 1`] = `
                                   {
                                     \\"type\\": 3,
                                     \\"textContent\\": \\"1\\",
-                                    \\"id\\": 45
+                                    \\"id\\": 50
                                   }
                                 ],
-                                \\"id\\": 44
+                                \\"id\\": 49
                               },
                               {
                                 \\"type\\": 3,
-                                \\"textContent\\": \\"\\\\n        \\",
-                                \\"id\\": 46
+                                \\"textContent\\": \\"\\\\n          \\",
+                                \\"id\\": 51
                               },
                               {
                                 \\"type\\": 2,
@@ -1206,31 +1241,31 @@ exports[`form 1`] = `
                                   {
                                     \\"type\\": 3,
                                     \\"textContent\\": \\"2\\",
-                                    \\"id\\": 48
+                                    \\"id\\": 53
                                   }
                                 ],
-                                \\"id\\": 47
+                                \\"id\\": 52
                               },
                               {
                                 \\"type\\": 3,
-                                \\"textContent\\": \\"\\\\n      \\",
-                                \\"id\\": 49
+                                \\"textContent\\": \\"\\\\n        \\",
+                                \\"id\\": 54
                               }
                             ],
-                            \\"id\\": 42
+                            \\"id\\": 47
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
-                            \\"id\\": 50
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 55
                           }
                         ],
-                        \\"id\\": 40
+                        \\"id\\": 45
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 51
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 56
                       },
                       {
                         \\"type\\": 2,
@@ -1241,8 +1276,8 @@ exports[`form 1`] = `
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 53
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 58
                           },
                           {
                             \\"type\\": 2,
@@ -1251,28 +1286,28 @@ exports[`form 1`] = `
                               \\"type\\": \\"password\\"
                             },
                             \\"childNodes\\": [],
-                            \\"id\\": 54
+                            \\"id\\": 59
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
-                            \\"id\\": 55
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 60
                           }
                         ],
-                        \\"id\\": 52
+                        \\"id\\": 57
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n  \\",
-                        \\"id\\": 56
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 61
                       }
                     ],
                     \\"id\\": 18
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 57
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
+                    \\"id\\": 62
                   },
                   {
                     \\"type\\": 2,
@@ -1282,15 +1317,15 @@ exports[`form 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 59
+                        \\"id\\": 64
                       }
                     ],
-                    \\"id\\": 58
+                    \\"id\\": 63
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\\\n\\",
-                    \\"id\\": 60
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 65
                   }
                 ],
                 \\"id\\": 16
@@ -1400,12 +1435,21 @@ exports[`form 1`] = `
       \\"id\\": 27
     }
   },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"off\\",
+      \\"isChecked\\": false,
+      \\"id\\": 32
+    }
+  },
   {
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 1,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -1421,7 +1465,7 @@ exports[`form 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 5,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -1429,7 +1473,7 @@ exports[`form 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 0,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -1437,7 +1481,7 @@ exports[`form 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 2,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -1446,7 +1490,7 @@ exports[`form 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"on\\",
       \\"isChecked\\": true,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -1454,7 +1498,7 @@ exports[`form 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 6,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -1462,7 +1506,7 @@ exports[`form 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 5,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -1471,7 +1515,7 @@ exports[`form 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"t\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -1480,7 +1524,7 @@ exports[`form 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"te\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -1489,7 +1533,7 @@ exports[`form 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"tex\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -1498,7 +1542,7 @@ exports[`form 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"text\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -1507,7 +1551,7 @@ exports[`form 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"texta\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -1516,7 +1560,7 @@ exports[`form 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"textar\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -1525,7 +1569,7 @@ exports[`form 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"textare\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -1534,7 +1578,7 @@ exports[`form 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"textarea\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -1543,7 +1587,7 @@ exports[`form 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"textarea \\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -1552,7 +1596,7 @@ exports[`form 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"textarea t\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -1561,7 +1605,7 @@ exports[`form 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"textarea te\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -1570,7 +1614,7 @@ exports[`form 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"textarea tes\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -1579,7 +1623,7 @@ exports[`form 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"textarea test\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -1588,7 +1632,7 @@ exports[`form 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"1\\",
       \\"isChecked\\": false,
-      \\"id\\": 42
+      \\"id\\": 47
     }
   }
 ]"
@@ -3146,7 +3190,7 @@ exports[`mask 1`] = `
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 5
                   },
                   {
@@ -3160,7 +3204,7 @@ exports[`mask 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 7
                   },
                   {
@@ -3175,7 +3219,7 @@ exports[`mask 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 9
                   },
                   {
@@ -3190,7 +3234,7 @@ exports[`mask 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 11
                   },
                   {
@@ -3208,7 +3252,7 @@ exports[`mask 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\",
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 14
                   }
                 ],
@@ -3216,7 +3260,7 @@ exports[`mask 1`] = `
               },
               {
                 \\"type\\": 3,
-                \\"textContent\\": \\"\\\\n\\\\n\\",
+                \\"textContent\\": \\"\\\\n\\\\n  \\",
                 \\"id\\": 15
               },
               {
@@ -3226,7 +3270,7 @@ exports[`mask 1`] = `
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 17
                   },
                   {
@@ -3236,7 +3280,7 @@ exports[`mask 1`] = `
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 19
                       },
                       {
@@ -3248,7 +3292,7 @@ exports[`mask 1`] = `
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"textContent\\": \\"\\\\n        \\",
                             \\"id\\": 21
                           },
                           {
@@ -3262,7 +3306,7 @@ exports[`mask 1`] = `
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"textContent\\": \\"\\\\n      \\",
                             \\"id\\": 23
                           }
                         ],
@@ -3270,33 +3314,33 @@ exports[`mask 1`] = `
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 24
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"radio\\"
-                        },
+                        \\"attributes\\": {},
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"textContent\\": \\"\\\\n        \\",
                             \\"id\\": 26
                           },
                           {
                             \\"type\\": 2,
                             \\"tagName\\": \\"input\\",
                             \\"attributes\\": {
-                              \\"type\\": \\"radio\\"
+                              \\"type\\": \\"radio\\",
+                              \\"name\\": \\"toggle\\",
+                              \\"value\\": \\"on\\"
                             },
                             \\"childNodes\\": [],
                             \\"id\\": 27
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"textContent\\": \\"\\\\n      \\",
                             \\"id\\": 28
                           }
                         ],
@@ -3304,33 +3348,34 @@ exports[`mask 1`] = `
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 29
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"checkbox\\"
-                        },
+                        \\"attributes\\": {},
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"textContent\\": \\"\\\\n        \\",
                             \\"id\\": 31
                           },
                           {
                             \\"type\\": 2,
                             \\"tagName\\": \\"input\\",
                             \\"attributes\\": {
-                              \\"type\\": \\"checkbox\\"
+                              \\"type\\": \\"radio\\",
+                              \\"name\\": \\"toggle\\",
+                              \\"value\\": \\"off\\",
+                              \\"checked\\": true
                             },
                             \\"childNodes\\": [],
                             \\"id\\": 32
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"textContent\\": \\"\\\\n      \\",
                             \\"id\\": 33
                           }
                         ],
@@ -3338,36 +3383,33 @@ exports[`mask 1`] = `
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 34
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"label\\",
                         \\"attributes\\": {
-                          \\"for\\": \\"textarea\\"
+                          \\"for\\": \\"checkbox\\"
                         },
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"textContent\\": \\"\\\\n        \\",
                             \\"id\\": 36
                           },
                           {
                             \\"type\\": 2,
-                            \\"tagName\\": \\"textarea\\",
+                            \\"tagName\\": \\"input\\",
                             \\"attributes\\": {
-                              \\"name\\": \\"\\",
-                              \\"id\\": \\"\\",
-                              \\"cols\\": \\"30\\",
-                              \\"rows\\": \\"10\\"
+                              \\"type\\": \\"checkbox\\"
                             },
                             \\"childNodes\\": [],
                             \\"id\\": 37
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"textContent\\": \\"\\\\n      \\",
                             \\"id\\": 38
                           }
                         ],
@@ -3375,55 +3417,92 @@ exports[`mask 1`] = `
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 39
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"label\\",
                         \\"attributes\\": {
-                          \\"for\\": \\"select\\"
+                          \\"for\\": \\"textarea\\"
                         },
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"textContent\\": \\"\\\\n        \\",
                             \\"id\\": 41
                           },
                           {
                             \\"type\\": 2,
-                            \\"tagName\\": \\"select\\",
+                            \\"tagName\\": \\"textarea\\",
                             \\"attributes\\": {
                               \\"name\\": \\"\\",
                               \\"id\\": \\"\\",
-                              \\"value\\": \\"*\\"
+                              \\"cols\\": \\"30\\",
+                              \\"rows\\": \\"10\\"
                             },
-                            \\"childNodes\\": [
-                              {
-                                \\"type\\": 3,
-                                \\"textContent\\": \\"\\\\n        \\",
-                                \\"id\\": 43
-                              },
-                              {
-                                \\"type\\": 2,
-                                \\"tagName\\": \\"option\\",
-                                \\"attributes\\": {
-                                  \\"value\\": \\"1\\",
-                                  \\"selected\\": true
-                                },
-                                \\"childNodes\\": [
-                                  {
-                                    \\"type\\": 3,
-                                    \\"textContent\\": \\"1\\",
-                                    \\"id\\": 45
-                                  }
-                                ],
-                                \\"id\\": 44
-                              },
-                              {
-                                \\"type\\": 3,
-                                \\"textContent\\": \\"\\\\n        \\",
-                                \\"id\\": 46
+                            \\"childNodes\\": [],
+                            \\"id\\": 42
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 43
+                          }
+                        ],
+                        \\"id\\": 40
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 44
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"select\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 46
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"select\\",
+                            \\"attributes\\": {
+                              \\"name\\": \\"\\",
+                              \\"id\\": \\"\\",
+                              \\"value\\": \\"*\\"
+                            },
+                            \\"childNodes\\": [
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"\\\\n          \\",
+                                \\"id\\": 48
+                              },
+                              {
+                                \\"type\\": 2,
+                                \\"tagName\\": \\"option\\",
+                                \\"attributes\\": {
+                                  \\"value\\": \\"1\\",
+                                  \\"selected\\": true
+                                },
+                                \\"childNodes\\": [
+                                  {
+                                    \\"type\\": 3,
+                                    \\"textContent\\": \\"1\\",
+                                    \\"id\\": 50
+                                  }
+                                ],
+                                \\"id\\": 49
+                              },
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"\\\\n          \\",
+                                \\"id\\": 51
                               },
                               {
                                 \\"type\\": 2,
@@ -3435,31 +3514,31 @@ exports[`mask 1`] = `
                                   {
                                     \\"type\\": 3,
                                     \\"textContent\\": \\"2\\",
-                                    \\"id\\": 48
+                                    \\"id\\": 53
                                   }
                                 ],
-                                \\"id\\": 47
+                                \\"id\\": 52
                               },
                               {
                                 \\"type\\": 3,
-                                \\"textContent\\": \\"\\\\n      \\",
-                                \\"id\\": 49
+                                \\"textContent\\": \\"\\\\n        \\",
+                                \\"id\\": 54
                               }
                             ],
-                            \\"id\\": 42
+                            \\"id\\": 47
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
-                            \\"id\\": 50
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 55
                           }
                         ],
-                        \\"id\\": 40
+                        \\"id\\": 45
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 51
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 56
                       },
                       {
                         \\"type\\": 2,
@@ -3470,8 +3549,8 @@ exports[`mask 1`] = `
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 53
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 58
                           },
                           {
                             \\"type\\": 2,
@@ -3480,28 +3559,28 @@ exports[`mask 1`] = `
                               \\"type\\": \\"password\\"
                             },
                             \\"childNodes\\": [],
-                            \\"id\\": 54
+                            \\"id\\": 59
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
-                            \\"id\\": 55
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 60
                           }
                         ],
-                        \\"id\\": 52
+                        \\"id\\": 57
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n  \\",
-                        \\"id\\": 56
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 61
                       }
                     ],
                     \\"id\\": 18
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 57
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
+                    \\"id\\": 62
                   },
                   {
                     \\"type\\": 2,
@@ -3511,15 +3590,15 @@ exports[`mask 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 59
+                        \\"id\\": 64
                       }
                     ],
-                    \\"id\\": 58
+                    \\"id\\": 63
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\\\n\\",
-                    \\"id\\": 60
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 65
                   }
                 ],
                 \\"id\\": 16
@@ -3629,12 +3708,21 @@ exports[`mask 1`] = `
       \\"id\\": 27
     }
   },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"off\\",
+      \\"isChecked\\": false,
+      \\"id\\": 32
+    }
+  },
   {
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 1,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -3650,7 +3738,7 @@ exports[`mask 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 5,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -3658,7 +3746,7 @@ exports[`mask 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 0,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -3666,7 +3754,7 @@ exports[`mask 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 2,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -3675,7 +3763,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"on\\",
       \\"isChecked\\": true,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -3683,7 +3771,7 @@ exports[`mask 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 6,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -3691,7 +3779,7 @@ exports[`mask 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 5,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -3700,7 +3788,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"*\\",
       \\"isChecked\\": false,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -3709,7 +3797,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"**\\",
       \\"isChecked\\": false,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -3718,7 +3806,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"***\\",
       \\"isChecked\\": false,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -3727,7 +3815,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"****\\",
       \\"isChecked\\": false,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -3736,7 +3824,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"*****\\",
       \\"isChecked\\": false,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -3745,7 +3833,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"******\\",
       \\"isChecked\\": false,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -3754,7 +3842,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"*******\\",
       \\"isChecked\\": false,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -3763,7 +3851,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"********\\",
       \\"isChecked\\": false,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -3771,7 +3859,7 @@ exports[`mask 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 6,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -3779,7 +3867,7 @@ exports[`mask 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 5,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -3788,7 +3876,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"*\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -3797,7 +3885,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"**\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -3806,7 +3894,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"***\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -3815,7 +3903,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"****\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -3824,7 +3912,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"*****\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -3833,7 +3921,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"******\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -3842,7 +3930,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"*******\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -3851,7 +3939,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"********\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -3860,7 +3948,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"*********\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -3869,7 +3957,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"**********\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -3878,7 +3966,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"***********\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -3887,7 +3975,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"************\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -3896,7 +3984,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"*************\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -3905,7 +3993,7 @@ exports[`mask 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"*\\",
       \\"isChecked\\": false,
-      \\"id\\": 42
+      \\"id\\": 47
     }
   }
 ]"
@@ -4696,7 +4784,7 @@ exports[`maskInputOptions 1`] = `
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 5
                   },
                   {
@@ -4710,7 +4798,7 @@ exports[`maskInputOptions 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 7
                   },
                   {
@@ -4725,7 +4813,7 @@ exports[`maskInputOptions 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 9
                   },
                   {
@@ -4740,7 +4828,7 @@ exports[`maskInputOptions 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 11
                   },
                   {
@@ -4758,7 +4846,7 @@ exports[`maskInputOptions 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\",
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 14
                   }
                 ],
@@ -4766,7 +4854,7 @@ exports[`maskInputOptions 1`] = `
               },
               {
                 \\"type\\": 3,
-                \\"textContent\\": \\"\\\\n\\\\n\\",
+                \\"textContent\\": \\"\\\\n\\\\n  \\",
                 \\"id\\": 15
               },
               {
@@ -4776,7 +4864,7 @@ exports[`maskInputOptions 1`] = `
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 17
                   },
                   {
@@ -4786,7 +4874,7 @@ exports[`maskInputOptions 1`] = `
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 19
                       },
                       {
@@ -4798,7 +4886,7 @@ exports[`maskInputOptions 1`] = `
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"textContent\\": \\"\\\\n        \\",
                             \\"id\\": 21
                           },
                           {
@@ -4812,7 +4900,7 @@ exports[`maskInputOptions 1`] = `
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"textContent\\": \\"\\\\n      \\",
                             \\"id\\": 23
                           }
                         ],
@@ -4820,33 +4908,33 @@ exports[`maskInputOptions 1`] = `
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 24
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"radio\\"
-                        },
+                        \\"attributes\\": {},
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"textContent\\": \\"\\\\n        \\",
                             \\"id\\": 26
                           },
                           {
                             \\"type\\": 2,
                             \\"tagName\\": \\"input\\",
                             \\"attributes\\": {
-                              \\"type\\": \\"radio\\"
+                              \\"type\\": \\"radio\\",
+                              \\"name\\": \\"toggle\\",
+                              \\"value\\": \\"on\\"
                             },
                             \\"childNodes\\": [],
                             \\"id\\": 27
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"textContent\\": \\"\\\\n      \\",
                             \\"id\\": 28
                           }
                         ],
@@ -4854,33 +4942,34 @@ exports[`maskInputOptions 1`] = `
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 29
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"checkbox\\"
-                        },
+                        \\"attributes\\": {},
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"textContent\\": \\"\\\\n        \\",
                             \\"id\\": 31
                           },
                           {
                             \\"type\\": 2,
                             \\"tagName\\": \\"input\\",
                             \\"attributes\\": {
-                              \\"type\\": \\"checkbox\\"
+                              \\"type\\": \\"radio\\",
+                              \\"name\\": \\"toggle\\",
+                              \\"value\\": \\"off\\",
+                              \\"checked\\": true
                             },
                             \\"childNodes\\": [],
                             \\"id\\": 32
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"textContent\\": \\"\\\\n      \\",
                             \\"id\\": 33
                           }
                         ],
@@ -4888,21 +4977,55 @@ exports[`maskInputOptions 1`] = `
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 34
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"label\\",
                         \\"attributes\\": {
-                          \\"for\\": \\"textarea\\"
+                          \\"for\\": \\"checkbox\\"
                         },
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"textContent\\": \\"\\\\n        \\",
                             \\"id\\": 36
                           },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"input\\",
+                            \\"attributes\\": {
+                              \\"type\\": \\"checkbox\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 37
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 38
+                          }
+                        ],
+                        \\"id\\": 35
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 39
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"textarea\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 41
+                          },
                           {
                             \\"type\\": 2,
                             \\"tagName\\": \\"textarea\\",
@@ -4913,20 +5036,20 @@ exports[`maskInputOptions 1`] = `
                               \\"rows\\": \\"10\\"
                             },
                             \\"childNodes\\": [],
-                            \\"id\\": 37
+                            \\"id\\": 42
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
-                            \\"id\\": 38
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 43
                           }
                         ],
-                        \\"id\\": 35
+                        \\"id\\": 40
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 39
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 44
                       },
                       {
                         \\"type\\": 2,
@@ -4937,8 +5060,8 @@ exports[`maskInputOptions 1`] = `
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 41
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 46
                           },
                           {
                             \\"type\\": 2,
@@ -4951,8 +5074,8 @@ exports[`maskInputOptions 1`] = `
                             \\"childNodes\\": [
                               {
                                 \\"type\\": 3,
-                                \\"textContent\\": \\"\\\\n        \\",
-                                \\"id\\": 43
+                                \\"textContent\\": \\"\\\\n          \\",
+                                \\"id\\": 48
                               },
                               {
                                 \\"type\\": 2,
@@ -4965,15 +5088,15 @@ exports[`maskInputOptions 1`] = `
                                   {
                                     \\"type\\": 3,
                                     \\"textContent\\": \\"1\\",
-                                    \\"id\\": 45
+                                    \\"id\\": 50
                                   }
                                 ],
-                                \\"id\\": 44
+                                \\"id\\": 49
                               },
                               {
                                 \\"type\\": 3,
-                                \\"textContent\\": \\"\\\\n        \\",
-                                \\"id\\": 46
+                                \\"textContent\\": \\"\\\\n          \\",
+                                \\"id\\": 51
                               },
                               {
                                 \\"type\\": 2,
@@ -4985,31 +5108,31 @@ exports[`maskInputOptions 1`] = `
                                   {
                                     \\"type\\": 3,
                                     \\"textContent\\": \\"2\\",
-                                    \\"id\\": 48
+                                    \\"id\\": 53
                                   }
                                 ],
-                                \\"id\\": 47
+                                \\"id\\": 52
                               },
                               {
                                 \\"type\\": 3,
-                                \\"textContent\\": \\"\\\\n      \\",
-                                \\"id\\": 49
+                                \\"textContent\\": \\"\\\\n        \\",
+                                \\"id\\": 54
                               }
                             ],
-                            \\"id\\": 42
+                            \\"id\\": 47
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
-                            \\"id\\": 50
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 55
                           }
                         ],
-                        \\"id\\": 40
+                        \\"id\\": 45
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 51
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 56
                       },
                       {
                         \\"type\\": 2,
@@ -5020,8 +5143,8 @@ exports[`maskInputOptions 1`] = `
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 53
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 58
                           },
                           {
                             \\"type\\": 2,
@@ -5030,28 +5153,28 @@ exports[`maskInputOptions 1`] = `
                               \\"type\\": \\"password\\"
                             },
                             \\"childNodes\\": [],
-                            \\"id\\": 54
+                            \\"id\\": 59
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    \\",
-                            \\"id\\": 55
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 60
                           }
                         ],
-                        \\"id\\": 52
+                        \\"id\\": 57
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n  \\",
-                        \\"id\\": 56
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 61
                       }
                     ],
                     \\"id\\": 18
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 57
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
+                    \\"id\\": 62
                   },
                   {
                     \\"type\\": 2,
@@ -5061,15 +5184,15 @@ exports[`maskInputOptions 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 59
+                        \\"id\\": 64
                       }
                     ],
-                    \\"id\\": 58
+                    \\"id\\": 63
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\\\n\\",
-                    \\"id\\": 60
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 65
                   }
                 ],
                 \\"id\\": 16
@@ -5179,12 +5302,21 @@ exports[`maskInputOptions 1`] = `
       \\"id\\": 27
     }
   },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"off\\",
+      \\"isChecked\\": false,
+      \\"id\\": 32
+    }
+  },
   {
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 1,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -5200,7 +5332,7 @@ exports[`maskInputOptions 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 5,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -5208,7 +5340,7 @@ exports[`maskInputOptions 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 0,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -5216,7 +5348,7 @@ exports[`maskInputOptions 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 2,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -5225,7 +5357,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"on\\",
       \\"isChecked\\": true,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -5233,7 +5365,7 @@ exports[`maskInputOptions 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 6,
-      \\"id\\": 32
+      \\"id\\": 37
     }
   },
   {
@@ -5241,7 +5373,7 @@ exports[`maskInputOptions 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 5,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -5250,7 +5382,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"t\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -5259,7 +5391,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"te\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -5268,7 +5400,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"tex\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -5277,7 +5409,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"text\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -5286,7 +5418,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"texta\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -5295,7 +5427,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"textar\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -5304,7 +5436,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"textare\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -5313,7 +5445,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"textarea\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -5322,7 +5454,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"textarea \\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -5331,7 +5463,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"textarea t\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -5340,7 +5472,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"textarea te\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -5349,7 +5481,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"textarea tes\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -5358,7 +5490,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"textarea test\\",
       \\"isChecked\\": false,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -5366,7 +5498,7 @@ exports[`maskInputOptions 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 6,
-      \\"id\\": 37
+      \\"id\\": 42
     }
   },
   {
@@ -5374,7 +5506,7 @@ exports[`maskInputOptions 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 5,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -5383,7 +5515,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"*\\",
       \\"isChecked\\": false,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -5392,7 +5524,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"**\\",
       \\"isChecked\\": false,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -5401,7 +5533,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"***\\",
       \\"isChecked\\": false,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -5410,7 +5542,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"****\\",
       \\"isChecked\\": false,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -5419,7 +5551,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"*****\\",
       \\"isChecked\\": false,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -5428,7 +5560,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"******\\",
       \\"isChecked\\": false,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -5437,7 +5569,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"*******\\",
       \\"isChecked\\": false,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -5446,7 +5578,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"********\\",
       \\"isChecked\\": false,
-      \\"id\\": 54
+      \\"id\\": 59
     }
   },
   {
@@ -5455,7 +5587,7 @@ exports[`maskInputOptions 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"1\\",
       \\"isChecked\\": false,
-      \\"id\\": 42
+      \\"id\\": 47
     }
   }
 ]"
@@ -8301,3 +8433,886 @@ exports[`shadow-dom 1`] = `
   }
 ]"
 `;
+
+exports[`userTriggered 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 1,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {
+              \\"lang\\": \\"en\\"
+            },
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 5
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"charset\\": \\"UTF-8\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"name\\": \\"viewport\\",
+                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 8
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"http-equiv\\": \\"X-UA-Compatible\\",
+                      \\"content\\": \\"ie=edge\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 10
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 11
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"title\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"form fields\\",
+                        \\"id\\": 13
+                      }
+                    ],
+                    \\"id\\": 12
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 14
+                  }
+                ],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 3,
+                \\"textContent\\": \\"\\\\n\\\\n  \\",
+                \\"id\\": 15
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 17
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"form\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 19
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"text\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 21
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"input\\",
+                            \\"attributes\\": {
+                              \\"type\\": \\"text\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 22
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 23
+                          }
+                        ],
+                        \\"id\\": 20
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 24
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 26
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"input\\",
+                            \\"attributes\\": {
+                              \\"type\\": \\"radio\\",
+                              \\"name\\": \\"toggle\\",
+                              \\"value\\": \\"on\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 27
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 28
+                          }
+                        ],
+                        \\"id\\": 25
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 29
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 31
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"input\\",
+                            \\"attributes\\": {
+                              \\"type\\": \\"radio\\",
+                              \\"name\\": \\"toggle\\",
+                              \\"value\\": \\"off\\",
+                              \\"checked\\": true
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 32
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 33
+                          }
+                        ],
+                        \\"id\\": 30
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 34
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"checkbox\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 36
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"input\\",
+                            \\"attributes\\": {
+                              \\"type\\": \\"checkbox\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 37
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 38
+                          }
+                        ],
+                        \\"id\\": 35
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 39
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"textarea\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 41
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"textarea\\",
+                            \\"attributes\\": {
+                              \\"name\\": \\"\\",
+                              \\"id\\": \\"\\",
+                              \\"cols\\": \\"30\\",
+                              \\"rows\\": \\"10\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 42
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 43
+                          }
+                        ],
+                        \\"id\\": 40
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 44
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"select\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 46
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"select\\",
+                            \\"attributes\\": {
+                              \\"name\\": \\"\\",
+                              \\"id\\": \\"\\",
+                              \\"value\\": \\"1\\"
+                            },
+                            \\"childNodes\\": [
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"\\\\n          \\",
+                                \\"id\\": 48
+                              },
+                              {
+                                \\"type\\": 2,
+                                \\"tagName\\": \\"option\\",
+                                \\"attributes\\": {
+                                  \\"value\\": \\"1\\",
+                                  \\"selected\\": true
+                                },
+                                \\"childNodes\\": [
+                                  {
+                                    \\"type\\": 3,
+                                    \\"textContent\\": \\"1\\",
+                                    \\"id\\": 50
+                                  }
+                                ],
+                                \\"id\\": 49
+                              },
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"\\\\n          \\",
+                                \\"id\\": 51
+                              },
+                              {
+                                \\"type\\": 2,
+                                \\"tagName\\": \\"option\\",
+                                \\"attributes\\": {
+                                  \\"value\\": \\"2\\"
+                                },
+                                \\"childNodes\\": [
+                                  {
+                                    \\"type\\": 3,
+                                    \\"textContent\\": \\"2\\",
+                                    \\"id\\": 53
+                                  }
+                                ],
+                                \\"id\\": 52
+                              },
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"\\\\n        \\",
+                                \\"id\\": 54
+                              }
+                            ],
+                            \\"id\\": 47
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 55
+                          }
+                        ],
+                        \\"id\\": 45
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 56
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"password\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 58
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"input\\",
+                            \\"attributes\\": {
+                              \\"type\\": \\"password\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 59
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 60
+                          }
+                        ],
+                        \\"id\\": 57
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 61
+                      }
+                    ],
+                    \\"id\\": 18
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
+                    \\"id\\": 62
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 64
+                      }
+                    ],
+                    \\"id\\": 63
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 65
+                  }
+                ],
+                \\"id\\": 16
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"t\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"te\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"tes\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"test\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 1,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 6,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 0,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 2,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"on\\",
+      \\"isChecked\\": true,
+      \\"userTriggered\\": true,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"off\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": false,
+      \\"id\\": 32
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 1,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 6,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 0,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 2,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"on\\",
+      \\"isChecked\\": true,
+      \\"userTriggered\\": true,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 6,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"**\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"***\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"****\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*****\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"******\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*******\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"********\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 6,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"t\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"te\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"tex\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"text\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"texta\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textar\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textare\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea \\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea t\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea te\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea tes\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea test\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"1\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": false,
+      \\"id\\": 47
+    }
+  }
+]"
+`;
diff --git a/test/html/form.html b/test/html/form.html
index 9d4a0c7116..a89f11ff74 100644
--- a/test/html/form.html
+++ b/test/html/form.html
@@ -1,37 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>form fields</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>form fields</title>
-</head>
-
-<body>
-  <form>
-    <label for="text">
-      <input type="text">
-    </label>
-    <label for="radio">
-      <input type="radio">
-    </label>
-    <label for="checkbox">
-      <input type="checkbox">
-    </label>
-    <label for="textarea">
-      <textarea name="" id="" cols="30" rows="10"></textarea>
-    </label>
-    <label for="select">
-      <select name="" id="">
-        <option value="1">1</option>
-        <option value="2">2</option>
-      </select>
-    </label>
-    <label for="password">
-      <input type="password" />
-    </label>
-  </form>
-</body>
-
+  <body>
+    <form>
+      <label for="text">
+        <input type="text" />
+      </label>
+      <label>
+        <input type="radio" name="toggle" value="on" />
+      </label>
+      <label>
+        <input type="radio" name="toggle" value="off" checked />
+      </label>
+      <label for="checkbox">
+        <input type="checkbox" />
+      </label>
+      <label for="textarea">
+        <textarea name="" id="" cols="30" rows="10"></textarea>
+      </label>
+      <label for="select">
+        <select name="" id="">
+          <option value="1">1</option>
+          <option value="2">2</option>
+        </select>
+      </label>
+      <label for="password">
+        <input type="password" />
+      </label>
+    </form>
+  </body>
 </html>
diff --git a/test/integration.test.ts b/test/integration.test.ts
index a851fcf565..9c0c52c867 100644
--- a/test/integration.test.ts
+++ b/test/integration.test.ts
@@ -75,6 +75,7 @@ describe('record integration tests', function (this: ISuite) {
         maskTextSelector: ${JSON.stringify(options.maskTextSelector)},
         maskAllInputs: ${options.maskAllInputs},
         maskInputOptions: ${JSON.stringify(options.maskAllInputs)},
+        userTriggeredOnInput: ${options.userTriggeredOnInput},
         maskTextFn: ${options.maskTextFn},
         recordCanvas: ${options.recordCanvas},
         plugins: ${options.plugins}        
@@ -284,6 +285,24 @@ describe('record integration tests', function (this: ISuite) {
     assertSnapshot(snapshots, __filename, 'maskPassword');
   });
 
+  it('should record input userTriggered values if userTriggeredOnInput is enabled', async () => {
+    const page: puppeteer.Page = await this.browser.newPage();
+    await page.goto('about:blank');
+    await page.setContent(
+      getHtml.call(this, 'form.html', { userTriggeredOnInput: true }),
+    );
+
+    await page.type('input[type="text"]', 'test');
+    await page.click('input[type="radio"]');
+    await page.click('input[type="checkbox"]');
+    await page.type('input[type="password"]', 'password');
+    await page.type('textarea', 'textarea test');
+    await page.select('select', '1');
+
+    const snapshots = await page.evaluate('window.snapshots');
+    assertSnapshot(snapshots, __filename, 'userTriggered');
+  });
+
   it('should not record blocked elements and its child nodes', async () => {
     const page: puppeteer.Page = await this.browser.newPage();
     await page.goto('about:blank');

From 39c8ba1a244880d4d154bd42571429cf76200fb7 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Thu, 8 Jul 2021 16:34:02 +0200
Subject: [PATCH 389/524] Buffer modifications to virtual stylesheets (#618)

* Fix sheet insertion

Restore skip duration

Use virtualStyleRulesMap to re-populate stylesheet on Flush event

Clear virtualStyleRulesMap after flush applied

* Support rule deletion in virtual processing

* Simply restoreNodeSheet with early aborts

* Encountered a bug where firstFullSnapshot was played twice because timer was immediately started and reached the snapshot before the setTimeout returned

* Ignoring a FullSnapshot needs to be a one-time only thing, as otherwise we'll ignore it after scrubbing (restarting play head at a particular time). This is a problem if mutations have altered the player state, and we try to replay those mutations, so we e.g. try to remove an element that has already been removed because we haven't reset the FullSnapshot state

* Some `npm run typings` related fixups

* add basic html snapshot functionality

* move restoreNodeSheet to it's own module

* Refactor virtual style rules to buffer changes.
Only applies changes on flush.

`virtualStyleRulesMap` now works with strings instead of CSSRules.
CSSRules can only be via made `.insertRule` on CSSStyleSheet in most browsers.
And `new CSSStyleSheet()` only works in Chrome currently.

* remove unused code

* move VirtualStyleRules from CSSRule to string in tests

* correct paths for tests

* naming

* create and restore style snapshots for virtual nodes

* update replayer snapshot

* move storeCSSRules to virtual-styles.ts

* try/catch access to .sheet in case of access errors

* clean up tests

Co-authored-by: Vladimir Milenko <vladimir.milenko@uber.com>
Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
---
 package.json                             |    9 +-
 src/replay/index.ts                      |  113 ++-
 src/replay/virtual-styles.ts             |  119 +++
 test/__snapshots__/replayer.test.ts.snap |  187 ++++
 test/events/style-sheet-rule-events.ts   |   51 +-
 test/replay/virtual-styles.test.ts       |  113 +++
 test/replayer.test.ts                    |   66 ++
 test/utils.ts                            |   92 +-
 yarn.lock                                | 1170 +++++++++++++++++++++-
 9 files changed, 1851 insertions(+), 69 deletions(-)
 create mode 100644 src/replay/virtual-styles.ts
 create mode 100644 test/__snapshots__/replayer.test.ts.snap
 create mode 100644 test/replay/virtual-styles.test.ts

diff --git a/package.json b/package.json
index 0061eeeb77..eb8d69dcc6 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "prepare": "npm run prepack",
     "prepack": "npm run bundle",
-    "test": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.test.ts",
+    "test": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register -r ignore-styles -r jsdom-global/register test/**.test.ts",
+    "test:headless": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true PUPPETEER_HEADLESS=true mocha -r ts-node/register -r ignore-styles -r jsdom-global/register test/**.test.ts",
     "test:watch": "PUPPETEER_HEADLESS=true npm run test -- --watch --watch-extensions js,ts",
     "repl": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true ts-node scripts/repl.ts",
     "bundle:browser": "cross-env BROWSER_ONLY=true rollup --config",
@@ -39,14 +40,20 @@
   "devDependencies": {
     "@types/chai": "^4.1.6",
     "@types/inquirer": "0.0.43",
+    "@types/jsdom": "^16.2.12",
     "@types/mocha": "^5.2.5",
     "@types/node": "^10.11.7",
     "@types/puppeteer": "^5.4.3",
     "chai": "^4.2.0",
     "cross-env": "^5.2.0",
+    "fast-mhtml": "^1.1.9",
+    "ignore-styles": "^5.0.1",
     "inquirer": "^6.2.1",
     "jest-snapshot": "^23.6.0",
+    "jsdom": "^16.6.0",
+    "jsdom-global": "^3.0.2",
     "mocha": "^5.2.0",
+    "node-libtidy": "^0.4.0",
     "prettier": "2.2.1",
     "puppeteer": "^9.1.1",
     "rollup": "^2.3.3",
diff --git a/src/replay/index.ts b/src/replay/index.ts
index 67531c6136..b5cbacb95c 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -42,6 +42,13 @@ import {
 } from '../utils';
 import getInjectStyleRules from './styles/inject-style';
 import './styles/style.css';
+import {
+  applyVirtualStyleRulesToNode,
+  storeCSSRules,
+  StyleRuleType,
+  VirtualStyleRules,
+  VirtualStyleRulesMap,
+} from './virtual-styles';
 
 const SKIP_TIME_THRESHOLD = 10 * 1000;
 const SKIP_TIME_INTERVAL = 5 * 1000;
@@ -85,6 +92,8 @@ export class Replayer {
   private treeIndex!: TreeIndex;
   private fragmentParentMap!: Map<INode, INode>;
   private elementStateMap!: Map<INode, ElementState>;
+  // Hold the list of CSSRules for in-memory state restoration
+  private virtualStyleRulesMap!: VirtualStyleRulesMap;
 
   private imageMap: Map<eventWithTime, HTMLImageElement> = new Map();
 
@@ -129,14 +138,21 @@ export class Replayer {
     this.treeIndex = new TreeIndex();
     this.fragmentParentMap = new Map<INode, INode>();
     this.elementStateMap = new Map<INode, ElementState>();
+    this.virtualStyleRulesMap = new Map();
+
     this.emitter.on(ReplayerEvents.Flush, () => {
       const { scrollMap, inputMap } = this.treeIndex.flush();
 
       this.fragmentParentMap.forEach((parent, frag) =>
         this.restoreRealParent(frag, parent),
       );
+      for (const node of this.virtualStyleRulesMap.keys()) {
+        // restore css rules of style elements after they are mounted
+        this.restoreNodeSheet(node);
+      }
       this.fragmentParentMap.clear();
       this.elementStateMap.clear();
+      this.virtualStyleRulesMap.clear();
 
       for (const d of scrollMap.values()) {
         this.applyScroll(d);
@@ -909,64 +925,73 @@ export class Replayer {
         const styleEl = (target as Node) as HTMLStyleElement;
         const parent = (target.parentNode as unknown) as INode;
         const usingVirtualParent = this.fragmentParentMap.has(parent);
-        let placeholderNode;
 
-        if (usingVirtualParent) {
+        /**
+         * Always use existing DOM node, when it's there.
+         * In in-memory replay, there is virtual node, but it's `sheet` is inaccessible.
+         * Hence, we buffer all style changes in virtualStyleRulesMap.
+         */
+        const styleSheet = usingVirtualParent ? null : styleEl.sheet;
+        let rules: VirtualStyleRules;
+
+        if (!styleSheet) {
           /**
            * styleEl.sheet is only accessible if the styleEl is part of the
-           * dom. This doesn't work on DocumentFragments so we have to re-add
-           * it to the dom temporarily.
+           * dom. This doesn't work on DocumentFragments so we have to add the
+           * style mutations to the virtualStyleRulesMap.
            */
-          const domParent = this.fragmentParentMap.get(
-            (target.parentNode as unknown) as INode,
-          );
-          placeholderNode = document.createTextNode('');
-          parent.replaceChild(placeholderNode, target);
-          domParent!.appendChild(target);
-        }
 
-        const styleSheet: CSSStyleSheet = styleEl.sheet!;
+          if (this.virtualStyleRulesMap.has(target)) {
+            rules = this.virtualStyleRulesMap.get(target) as VirtualStyleRules;
+          } else {
+            rules = [];
+            this.virtualStyleRulesMap.set(target, rules);
+          }
+        }
 
         if (d.adds) {
           d.adds.forEach(({ rule, index }) => {
-            try {
-              const _index =
-                index === undefined
-                  ? undefined
-                  : Math.min(index, styleSheet.rules.length);
+            if (styleSheet) {
               try {
-                styleSheet.insertRule(rule, _index);
+                const _index =
+                  index === undefined
+                    ? undefined
+                    : Math.min(index, styleSheet.cssRules.length);
+                try {
+                  styleSheet.insertRule(rule, _index);
+                } catch (e) {
+                  /**
+                   * sometimes we may capture rules with browser prefix
+                   * insert rule with prefixs in other browsers may cause Error
+                   */
+                }
               } catch (e) {
                 /**
-                 * sometimes we may capture rules with browser prefix
-                 * insert rule with prefixs in other browsers may cause Error
+                 * accessing styleSheet rules may cause SecurityError
+                 * for specific access control settings
                  */
               }
-            } catch (e) {
-              /**
-               * accessing styleSheet rules may cause SecurityError
-               * for specific access control settings
-               */
+            } else {
+              rules?.push({ cssText: rule, index, type: StyleRuleType.Insert });
             }
           });
         }
 
         if (d.removes) {
           d.removes.forEach(({ index }) => {
-            try {
-              styleSheet.deleteRule(index);
-            } catch (e) {
-              /**
-               * same as insertRule
-               */
+            if (usingVirtualParent) {
+              rules?.push({ index, type: StyleRuleType.Remove });
+            } else {
+              try {
+                styleSheet?.deleteRule(index);
+              } catch (e) {
+                /**
+                 * same as insertRule
+                 */
+              }
             }
           });
         }
-
-        if (usingVirtualParent && placeholderNode) {
-          parent.replaceChild(target, placeholderNode);
-        }
-
         break;
       }
       case IncrementalSource.CanvasMutation: {
@@ -1496,6 +1521,11 @@ export class Replayer {
             scroll: [parentElement.scrollLeft, parentElement.scrollTop],
           });
         }
+        if (parentElement.tagName === 'STYLE')
+          storeCSSRules(
+            parentElement as HTMLStyleElement,
+            this.virtualStyleRulesMap,
+          );
         const children = parentElement.children;
         for (const child of Array.from(children)) {
           this.storeState((child as unknown) as INode);
@@ -1527,6 +1557,17 @@ export class Replayer {
     }
   }
 
+  private restoreNodeSheet(node: INode) {
+    const storedRules = this.virtualStyleRulesMap.get(node);
+    if (node.nodeName !== 'STYLE') return;
+
+    if (!storedRules) return;
+
+    const styleNode = (node as unknown) as HTMLStyleElement;
+
+    applyVirtualStyleRulesToNode(storedRules, styleNode);
+  }
+
   private warnNodeNotFound(d: incrementalData, id: number) {
     this.warn(`Node with id '${id}' not found in`, d);
   }
diff --git a/src/replay/virtual-styles.ts b/src/replay/virtual-styles.ts
new file mode 100644
index 0000000000..43c48be914
--- /dev/null
+++ b/src/replay/virtual-styles.ts
@@ -0,0 +1,119 @@
+import { INode } from 'rrweb-snapshot';
+
+export enum StyleRuleType {
+  Insert,
+  Remove,
+  Snapshot,
+}
+
+type InsertRule = {
+  cssText: string;
+  type: StyleRuleType.Insert;
+  index?: number;
+};
+type RemoveRule = {
+  type: StyleRuleType.Remove;
+  index: number;
+};
+type SnapshotRule = {
+  type: StyleRuleType.Snapshot;
+  cssTexts: string[];
+};
+
+export type VirtualStyleRules = Array<InsertRule | RemoveRule | SnapshotRule>;
+export type VirtualStyleRulesMap = Map<INode, VirtualStyleRules>;
+
+export function applyVirtualStyleRulesToNode(
+  storedRules: VirtualStyleRules,
+  styleNode: HTMLStyleElement,
+) {
+  storedRules.forEach((rule) => {
+    if (rule.type === StyleRuleType.Insert) {
+      try {
+        styleNode.sheet?.insertRule(rule.cssText, rule.index);
+      } catch (e) {
+        /**
+         * sometimes we may capture rules with browser prefix
+         * insert rule with prefixs in other browsers may cause Error
+         */
+      }
+    } else if (rule.type === StyleRuleType.Remove) {
+      try {
+        styleNode.sheet?.deleteRule(rule.index);
+      } catch (e) {
+        /**
+         * accessing styleSheet rules may cause SecurityError
+         * for specific access control settings
+         */
+      }
+    } else if (rule.type === StyleRuleType.Snapshot) {
+      restoreSnapshotOfStyleRulesToNode(rule.cssTexts, styleNode);
+    }
+  });
+}
+
+function restoreSnapshotOfStyleRulesToNode(
+  cssTexts: string[],
+  styleNode: HTMLStyleElement,
+) {
+  try {
+    const existingRules = Array.from(styleNode.sheet?.cssRules || []).map(
+      (rule) => rule.cssText,
+    );
+    const existingRulesReversed = Object.entries(existingRules).reverse();
+    let lastMatch = existingRules.length;
+    existingRulesReversed.forEach(([index, rule]) => {
+      const indexOf = cssTexts.indexOf(rule);
+      if (indexOf === -1 || indexOf > lastMatch) {
+        try {
+          styleNode.sheet?.deleteRule(Number(index));
+        } catch (e) {
+          /**
+           * accessing styleSheet rules may cause SecurityError
+           * for specific access control settings
+           */
+        }
+      }
+      lastMatch = indexOf;
+    });
+    cssTexts.forEach((cssText, index) => {
+      try {
+        if (styleNode.sheet?.cssRules[index]?.cssText !== cssText) {
+          styleNode.sheet?.insertRule(cssText, index);
+        }
+      } catch (e) {
+        /**
+         * sometimes we may capture rules with browser prefix
+         * insert rule with prefixs in other browsers may cause Error
+         */
+      }
+    });
+  } catch (e) {
+    /**
+     * accessing styleSheet rules may cause SecurityError
+     * for specific access control settings
+     */
+  }
+}
+
+export function storeCSSRules(
+  parentElement: HTMLStyleElement,
+  virtualStyleRulesMap: VirtualStyleRulesMap,
+) {
+  try {
+    const cssTexts = Array.from(
+      (parentElement as HTMLStyleElement).sheet?.cssRules || [],
+    ).map((rule) => rule.cssText);
+    virtualStyleRulesMap.set((parentElement as unknown) as INode, [
+      {
+        type: StyleRuleType.Snapshot,
+        cssTexts,
+      },
+    ]);
+  } catch (e) {
+    /**
+     * accessing styleSheet rules may cause SecurityError
+     * for specific access control settings
+     */
+  }
+}
diff --git a/test/__snapshots__/replayer.test.ts.snap b/test/__snapshots__/replayer.test.ts.snap
new file mode 100644
index 0000000000..c6f8e3866d
--- /dev/null
+++ b/test/__snapshots__/replayer.test.ts.snap
@@ -0,0 +1,187 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`style-sheet-remove-events-play-at-2500 1`] = `
+"file-frame-1
+<html>
+<head>
+  <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
+  <title></title>
+</head>
+<body>
+  <div class=\\"replayer-wrapper\\">
+    <div class=\\"replayer-mouse\\"></div>
+    <canvas class=\\"replayer-mouse-tail\\" width=\\"1000\\" height=\\"800\\" style=
+    \\"display: inherit;\\"></canvas><iframe sandbox=\\"allow-same-origin\\" scrolling=
+    \\"no\\" width=\\"1000\\" height=\\"800\\" style=
+    \\"display: inherit; pointer-events: none;\\"></iframe>
+  </div>
+</body>
+</html>
+
+
+file-frame-2
+<html>
+<head>
+  <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
+  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\">
+  <title></title>
+</head>
+<body>
+</body>
+</html>
+
+
+file-cid-0
+@charset \\"utf-8\\";
+
+.rr-block { background: rgb(204, 204, 204); }
+
+noscript { display: none !important; }
+
+html.rrweb-paused * { animation-play-state: paused !important; }
+"
+`;
+
+exports[`style-sheet-rule-events-pause-at-2500 1`] = `
+"file-frame-4
+<html>
+<head>
+  <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
+  <title></title>
+</head>
+<body>
+  <div class=\\"replayer-wrapper\\">
+    <div class=\\"replayer-mouse\\"></div>
+    <canvas class=\\"replayer-mouse-tail\\" width=\\"1000\\" height=\\"800\\" style=
+    \\"display: inherit;\\"></canvas><iframe sandbox=\\"allow-same-origin\\" scrolling=
+    \\"no\\" width=\\"1000\\" height=\\"800\\" style=
+    \\"display: inherit; pointer-events: none;\\"></iframe>
+  </div>
+</body>
+</html>
+
+
+file-frame-5
+<!DOCTYPE html>
+<html lang=\\"en\\">
+<head>
+  <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
+  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\">
+  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\">
+  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-2\\">
+  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-3\\">
+  <title></title>
+</head>
+<body>
+  <a class=\\"css-added-at-1000-deleted-at-2500\\">string</a>
+</body>
+</html>
+
+
+file-cid-0
+@charset \\"utf-8\\";
+
+.rr-block { background: rgb(204, 204, 204); }
+
+noscript { display: none !important; }
+
+html.rrweb-paused * { animation-play-state: paused !important; }
+
+
+file-cid-1
+@charset \\"utf-8\\";
+
+.c011xx { padding: 1.3125rem; flex: 0 0 auto; width: 100%; }
+
+
+file-cid-2
+@charset \\"utf-8\\";
+
+.c01x { opacity: 1; transform: translateX(0px); }
+
+.css-added-at-400 { border: 1px solid blue; }
+
+
+file-cid-3
+@charset \\"utf-8\\";
+
+.css-1uxxxx3 { position: fixed; top: 0px; right: 0px; left: 4rem; z-index: 15; flex-shrink: 0; height: 0.25rem; overflow: hidden; background-color: rgb(17, 171, 209); }
+
+.css-1c9xxxx { height: 0.25rem; background-color: rgb(190, 232, 242); opacity: 0; transition: opacity 0.5s ease 0s; }
+
+.css-lsxxx { padding-left: 4rem; }
+"
+`;
+
+exports[`style-sheet-rule-events-play-at-1500 1`] = `
+"file-frame-4
+<html>
+<head>
+  <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
+  <title></title>
+</head>
+<body>
+  <div class=\\"replayer-wrapper\\">
+    <div class=\\"replayer-mouse\\"></div>
+    <canvas class=\\"replayer-mouse-tail\\" width=\\"1000\\" height=\\"800\\" style=
+    \\"display: inherit;\\"></canvas><iframe sandbox=\\"allow-same-origin\\" scrolling=
+    \\"no\\" width=\\"1000\\" height=\\"800\\" style=
+    \\"display: inherit; pointer-events: none;\\"></iframe>
+  </div>
+</body>
+</html>
+
+
+file-frame-5
+<!DOCTYPE html>
+<html lang=\\"en\\">
+<head>
+  <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
+  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\">
+  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\">
+  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-2\\">
+  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-3\\">
+  <title></title>
+</head>
+<body>
+  <a class=\\"css-added-at-1000-deleted-at-2500\\">string</a>
+</body>
+</html>
+
+
+file-cid-0
+@charset \\"utf-8\\";
+
+.rr-block { background: rgb(204, 204, 204); }
+
+noscript { display: none !important; }
+
+html.rrweb-paused * { animation-play-state: paused !important; }
+
+
+file-cid-1
+@charset \\"utf-8\\";
+
+.c011xx { padding: 1.3125rem; flex: 0 0 auto; width: 100%; }
+
+
+file-cid-2
+@charset \\"utf-8\\";
+
+.c01x { opacity: 1; transform: translateX(0px); }
+
+.css-added-at-400 { border: 1px solid blue; }
+
+
+file-cid-3
+@charset \\"utf-8\\";
+
+.css-1uxxxx3 { position: fixed; top: 0px; right: 0px; left: 4rem; z-index: 15; flex-shrink: 0; height: 0.25rem; overflow: hidden; background-color: rgb(17, 171, 209); }
+
+.css-1c9xxxx { height: 0.25rem; background-color: rgb(190, 232, 242); opacity: 0; transition: opacity 0.5s ease 0s; }
+
+.css-added-at-1000-deleted-at-2500 { display: flex; flex-direction: column; min-width: 60rem; min-height: 100vh; color: blue; }
+
+.css-lsxxx { padding-left: 4rem; }
+"
+`;
diff --git a/test/events/style-sheet-rule-events.ts b/test/events/style-sheet-rule-events.ts
index 5740f50215..0e26673916 100644
--- a/test/events/style-sheet-rule-events.ts
+++ b/test/events/style-sheet-rule-events.ts
@@ -46,8 +46,7 @@ const events: eventWithTime[] = [
                     type: 2,
                     tagName: 'style',
                     attributes: {
-                      'data-jss': '',
-                      'data-meta': 'sk, Unthemed, Static',
+                      'data-meta': 'from full-snapshot, gets rule added at 500',
                     },
                     childNodes: [
                       {
@@ -79,7 +78,23 @@ const events: eventWithTime[] = [
                 type: 2,
                 tagName: 'body',
                 attributes: {},
-                childNodes: [],
+                childNodes: [
+                  {
+                    id: 108,
+                    type: 2,
+                    tagName: 'a',
+                    attributes: {
+                      class: 'css-added-at-1000-deleted-at-2500',
+                    },
+                    childNodes: [
+                      {
+                        id: 109,
+                        type: 3,
+                        textContent: 'string',
+                      },
+                    ],
+                  },
+                ],
               },
             ],
           },
@@ -90,6 +105,21 @@ const events: eventWithTime[] = [
     type: EventType.FullSnapshot,
     timestamp: now + 100,
   },
+  // mutation that adds style rule to existing stylesheet
+  {
+    data: {
+      id: 101,
+      adds: [
+        {
+          rule: '.css-added-at-400{border: 1px solid blue;}',
+          index: 1,
+        },
+      ],
+      source: IncrementalSource.StyleSheetRule,
+    },
+    type: EventType.IncrementalSnapshot,
+    timestamp: now + 400,
+  },
   // mutation that adds stylesheet
   {
     data: {
@@ -132,7 +162,7 @@ const events: eventWithTime[] = [
       adds: [
         {
           rule:
-            '.css-1fbxx79{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;}',
+            '.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,
         },
       ],
@@ -141,6 +171,19 @@ const events: eventWithTime[] = [
     type: EventType.IncrementalSnapshot,
     timestamp: now + 1000,
   },
+  {
+    data: {
+      id: 105,
+      removes: [
+        {
+          index: 2,
+        },
+      ],
+      source: IncrementalSource.StyleSheetRule,
+    },
+    type: EventType.IncrementalSnapshot,
+    timestamp: now + 2500,
+  },
 ];
 
 export default events;
diff --git a/test/replay/virtual-styles.test.ts b/test/replay/virtual-styles.test.ts
new file mode 100644
index 0000000000..ef2524033e
--- /dev/null
+++ b/test/replay/virtual-styles.test.ts
@@ -0,0 +1,113 @@
+import { expect } from 'chai';
+import { JSDOM } from 'jsdom';
+import {
+  applyVirtualStyleRulesToNode,
+  StyleRuleType,
+  VirtualStyleRules,
+} from '../../src/replay/virtual-styles';
+
+describe('virtual styles', () => {
+  describe('applyVirtualStyleRulesToNode', () => {
+    it('should insert rule at index 0 in empty sheet', () => {
+      const dom = new JSDOM(`
+        <style></style>
+      `);
+      const styleEl = dom.window.document.getElementsByTagName('style')[0];
+
+      const cssText = '.added-rule {border: 1px solid yellow;}';
+
+      const virtualStyleRules: VirtualStyleRules = [
+        { cssText, index: 0, type: StyleRuleType.Insert },
+      ];
+      applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
+
+      expect(styleEl.sheet?.cssRules?.length).to.equal(1);
+      expect(styleEl.sheet?.cssRules[0].cssText).to.equal(cssText);
+    });
+
+    it('should insert rule at index 0 and keep exsisting rules', () => {
+      const dom = new JSDOM(`
+        <style>
+          a {color: blue}
+          div {color: black}
+        </style>
+      `);
+      const styleEl = dom.window.document.getElementsByTagName('style')[0];
+
+      const cssText = '.added-rule {border: 1px solid yellow;}';
+      const virtualStyleRules: VirtualStyleRules = [
+        { cssText, index: 0, type: StyleRuleType.Insert },
+      ];
+      applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
+
+      expect(styleEl.sheet?.cssRules?.length).to.equal(3);
+      expect(styleEl.sheet?.cssRules[0].cssText).to.equal(cssText);
+    });
+
+    it('should delete rule at index 1', () => {
+      const dom = new JSDOM(`
+        <style>
+          a {color: blue;}
+          div {color: black;}
+        </style>
+      `);
+      const styleEl = dom.window.document.getElementsByTagName('style')[0];
+
+      const virtualStyleRules: VirtualStyleRules = [
+        { index: 0, type: StyleRuleType.Remove },
+      ];
+      applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
+
+      expect(styleEl.sheet?.cssRules?.length).to.equal(1);
+      expect(styleEl.sheet?.cssRules[0].cssText).to.equal(
+        'div {color: black;}',
+      );
+    });
+
+    it('should restore a snapshot by inserting missing rules', () => {
+      const dom = new JSDOM(`
+        <style>
+          a {color: blue;}
+          .deleted-rule {color: pink;}
+          div {color: black;}
+        </style>
+      `);
+      const styleEl = dom.window.document.getElementsByTagName('style')[0];
+
+      const virtualStyleRules: VirtualStyleRules = [
+        {
+          cssTexts: ['a {color: blue;}', 'div {color: black;}'],
+          type: StyleRuleType.Snapshot,
+        },
+      ];
+      applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
+
+      expect(styleEl.sheet?.cssRules?.length).to.equal(2);
+    });
+
+    it('should restore a snapshot by fixing order of rules', () => {
+      const dom = new JSDOM(`
+        <style>
+          div {color: black;}
+          a {color: blue;}
+        </style>
+      `);
+      const styleEl = dom.window.document.getElementsByTagName('style')[0];
+
+      const cssTexts = ['a {color: blue;}', 'div {color: black;}'];
+
+      const virtualStyleRules: VirtualStyleRules = [
+        {
+          cssTexts,
+          type: StyleRuleType.Snapshot,
+        },
+      ];
+      applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
+
+      expect(styleEl.sheet?.cssRules?.length).to.equal(2);
+      expect(
+        Array.from(styleEl.sheet?.cssRules || []).map((rule) => rule.cssText),
+      ).to.have.ordered.members(cssTexts);
+    });
+  });
+});
diff --git a/test/replayer.test.ts b/test/replayer.test.ts
index e61c3d3714..bc37e32f35 100644
--- a/test/replayer.test.ts
+++ b/test/replayer.test.ts
@@ -6,6 +6,7 @@ import * as puppeteer from 'puppeteer';
 import { expect } from 'chai';
 import { Suite } from 'mocha';
 import {
+  assertDomSnapshot,
   launchPuppeteer,
   sampleEvents as events,
   sampleStyleSheetRemoveEvents as stylesheetRemoveEvents,
@@ -146,11 +147,35 @@ describe('replayer', function (this: ISuite) {
       replayer.play(1500);
       replayer['timer']['actions'].length;
     `);
+
     expect(actionLength).to.equal(
       styleSheetRuleEvents.filter(
         (e) => e.timestamp - styleSheetRuleEvents[0].timestamp >= 1500,
       ).length,
     );
+
+    await assertDomSnapshot(
+      this.page,
+      __filename,
+      'style-sheet-rule-events-play-at-1500',
+    );
+  });
+
+  it('should apply fast forwarded StyleSheetRules that where added', async () => {
+    await this.page.evaluate(
+      `events = ${JSON.stringify(styleSheetRuleEvents)}`,
+    );
+    const result = await this.page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+      replayer.pause(1500);
+      const rules = [...replayer.iframe.contentDocument.styleSheets].map(
+        (sheet) => [...sheet.rules],
+      ).flat();
+      rules.some((x) => x.selectorText === '.css-added-at-1000-deleted-at-2500');
+    `);
+
+    expect(result).to.equal(true);
   });
 
   it('can handle removing style elements', async () => {
@@ -168,6 +193,47 @@ describe('replayer', function (this: ISuite) {
         (e) => e.timestamp - stylesheetRemoveEvents[0].timestamp >= 2500,
       ).length,
     );
+
+    await assertDomSnapshot(
+      this.page,
+      __filename,
+      'style-sheet-remove-events-play-at-2500',
+    );
+  });
+
+  it('can fast forward past StyleSheetRule deletion on virtual elements', async () => {
+    await this.page.evaluate(
+      `events = ${JSON.stringify(styleSheetRuleEvents)}`,
+    );
+    const actionLength = await this.page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+      replayer.play(2500);
+      replayer['timer']['actions'].length;
+    `);
+
+    await assertDomSnapshot(
+      this.page,
+      __filename,
+      'style-sheet-rule-events-play-at-2500',
+    );
+  });
+
+  it('should delete fast forwarded StyleSheetRules that where removed', async () => {
+    await this.page.evaluate(
+      `events = ${JSON.stringify(styleSheetRuleEvents)}`,
+    );
+    const result = await this.page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+      replayer.pause(3000);
+      const rules = [...replayer.iframe.contentDocument.styleSheets].map(
+        (sheet) => [...sheet.rules],
+      ).flat();
+      rules.some((x) => x.selectorText === '.css-added-at-1000-deleted-at-2500');
+    `);
+
+    expect(result).to.equal(false);
   });
 
   it('can stream events in live mode', async () => {
diff --git a/test/utils.ts b/test/utils.ts
index 3b21e30f23..348bed7164 100644
--- a/test/utils.ts
+++ b/test/utils.ts
@@ -8,6 +8,7 @@ import {
   MouseInteractions,
 } from '../src/types';
 import * as puppeteer from 'puppeteer';
+import { TidyDoc } from 'node-libtidy';
 
 export async function launchPuppeteer() {
   return await puppeteer.launch({
@@ -61,7 +62,7 @@ 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
@@ -78,7 +79,10 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
               'style' in a.attributes &&
               coordinatesReg.test(a.attributes.style!)
             ) {
-              a.attributes.style = a.attributes.style!.replace(coordinatesReg, '$1: Npx');
+              a.attributes.style = a.attributes.style!.replace(
+                coordinatesReg,
+                '$1: Npx',
+              );
             }
           });
           s.data.adds.forEach((add) => {
@@ -88,7 +92,10 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
               typeof add.node.attributes.style === 'string' &&
               coordinatesReg.test(add.node.attributes.style)
             ) {
-              add.node.attributes.style = add.node.attributes.style.replace(coordinatesReg, '$1: Npx');
+              add.node.attributes.style = add.node.attributes.style.replace(
+                coordinatesReg,
+                '$1: Npx',
+              );
             }
           });
         }
@@ -100,6 +107,49 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
   );
 }
 
+function stringifyDomSnapshot(mhtml: string): string {
+  const { Parser } = require('fast-mhtml');
+  const resources: string[] = [];
+  const p = new Parser({
+    rewriteFn: (filename: string): string => {
+      const index = resources.indexOf(filename);
+      const prefix = /^\w+/.exec(filename);
+      if (index !== -1) {
+        return `file-${prefix}-${index}`;
+      } else {
+        return `file-${prefix}-${resources.push(filename) - 1}`;
+      }
+    },
+  });
+  const result = p
+    .parse(mhtml) // parse file
+    .rewrite() // rewrite all links
+    .spit(); // return all contents
+
+  const newResult: { filename: string; content: string }[] = result.map(
+    (asset: { filename: string; content: string }) => {
+      let { filename, content } = asset;
+      let res: string | undefined;
+      if (filename.includes('frame')) {
+        const doc = TidyDoc();
+        doc.options = {
+          indent: 'auto',
+          indent_spaces: 2,
+          wrap: 80,
+          markup: true,
+          quote_marks: true,
+          break_before_br: true,
+          tidy_mark: false,
+        };
+        doc.parseBufferSync(Buffer.from(content));
+        res = doc.saveBufferSync().toString();
+      }
+      return { filename, content: res || content };
+    },
+  );
+  return newResult.map((asset) => Object.values(asset).join('\n')).join('\n\n');
+}
+
 export function assertSnapshot(
   snapshots: eventWithTime[],
   filename: string,
@@ -109,6 +159,20 @@ export function assertSnapshot(
   assert(result.pass, result.pass ? '' : result.report());
 }
 
+export async function assertDomSnapshot(
+  page: puppeteer.Page,
+  filename: string,
+  name: string,
+) {
+  const cdp = await page.target().createCDPSession();
+  const { data } = await cdp.send('Page.captureSnapshot', {
+    format: 'mhtml',
+  });
+
+  const result = matchSnapshot(stringifyDomSnapshot(data), filename, name);
+  assert(result.pass, result.pass ? '' : result.report());
+}
+
 const now = Date.now();
 export const sampleEvents: eventWithTime[] = [
   {
@@ -241,23 +305,23 @@ export const sampleStyleSheetRemoveEvents: eventWithTime[] = [
                 childNodes: [
                   {
                     type: 2,
-                    tagName: "style",
+                    tagName: 'style',
                     attributes: {
-                      "data-jss": "",
-                      "data-meta": "OverlayDrawer",
-                      _cssText: ".OverlayDrawer-modal-187 { }.OverlayDrawer-paper-188 { width: 100%; }@media (min-width: 48em) {\n  .OverlayDrawer-paper-188 { width: 38rem; }\n}@media (min-width: 48em) {\n}@media (min-width: 48em) {\n}"
+                      'data-jss': '',
+                      'data-meta': 'OverlayDrawer',
+                      _cssText:
+                        '.OverlayDrawer-modal-187 { }.OverlayDrawer-paper-188 { width: 100%; }@media (min-width: 48em) {\n  .OverlayDrawer-paper-188 { width: 38rem; }\n}@media (min-width: 48em) {\n}@media (min-width: 48em) {\n}',
                     },
                     childNodes: [
                       {
                         type: 3,
-                        textContent: "\n",
+                        textContent: '\n',
                         isStyle: true,
-                        id: 5
+                        id: 5,
                       },
                     ],
-                    id: 4
+                    id: 4,
                   },
-
                 ],
                 id: 3,
               },
@@ -290,10 +354,10 @@ export const sampleStyleSheetRemoveEvents: eventWithTime[] = [
       removes: [
         {
           parentId: 3,
-          id: 4
-        }
+          id: 4,
+        },
       ],
-      adds: []
+      adds: [],
     },
     timestamp: now + 2000,
   },
diff --git a/yarn.lock b/yarn.lock
index 670017a9d5..5fd09b5914 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -23,6 +23,11 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@tootallnate/once@1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
+  integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
+
 "@types/chai@^4.1.6":
   version "4.2.14"
   resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.2.14.tgz#44d2dd0b5de6185089375d976b4ec5caf6861193"
@@ -41,6 +46,15 @@
     "@types/rx" "*"
     "@types/through" "*"
 
+"@types/jsdom@^16.2.12":
+  version "16.2.12"
+  resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-16.2.12.tgz#2d47f5c9f7e40b4d5d9b5f0534c736dc475f9569"
+  integrity sha512-rD68Q2XSKBYOl38Tb9jbPuqZeTtpw09dFeuKWi7yhlZVfY8rV4xnQmISNQQZfhkQJGpJWp2qCmmrWjhiqDFNvA==
+  dependencies:
+    "@types/node" "*"
+    "@types/parse5" "*"
+    "@types/tough-cookie" "*"
+
 "@types/mocha@^5.2.5":
   version "5.2.7"
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-5.2.7.tgz#315d570ccb56c53452ff8638738df60726d5b6ea"
@@ -56,6 +70,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.42.tgz#90dd71b26fe4f4e2929df6b07e72ef2e9648a173"
   integrity sha512-HElxYF7C/MSkuvlaHB2c+82zhXiuO49Cq056Dol8AQuTph7oJtduo2n6J8rFa+YhJyNgQ/Lm20ZaxqD0vxU0+Q==
 
+"@types/parse5@*":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.0.tgz#38590dc2c3cf5717154064e3ee9b6947ee21b299"
+  integrity sha512-oPwPSj4a1wu9rsXTEGIJz91ISU725t0BmSnUhb57sI+M8XEmvUop84lzuiYdq0Y5M6xLY8DBPg0C2xEQKLyvBA==
+
 "@types/puppeteer@^5.4.3":
   version "5.4.3"
   resolved "https://registry.yarnpkg.com/@types/puppeteer/-/puppeteer-5.4.3.tgz#cdca84aa7751d77448d8a477dbfa0af1f11485f2"
@@ -176,6 +195,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/tough-cookie@*":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.1.tgz#8f80dd965ad81f3e1bc26d6f5c727e132721ff40"
+  integrity sha512-Y0K95ThC3esLEYD6ZuqNek29lNX2EM1qxV8y2FTLUB0ff5wWrk7az+mLrnNFUnaXcgKye22+sFBRXOgpPILZNg==
+
 "@types/yauzl@^2.9.1":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.1.tgz#d10f69f9f522eef3cf98e30afb684a1e1ec923af"
@@ -188,6 +212,47 @@
   resolved "https://registry.yarnpkg.com/@xstate/fsm/-/fsm-1.5.1.tgz#b1ebedc77b11e4956fda0a6429cef986cd17979e"
   integrity sha512-t8blLI0e90jCE71yUQHLH5uEljD1v0aC8PKkHUtNWEnXt81EOj7xBjnlwmaHn/8cmE2aSygiBElUpkRZUV9hXA==
 
+abab@^2.0.3, abab@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
+  integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
+
+accepts@~1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
+  integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
+  dependencies:
+    mime-types "~2.1.24"
+    negotiator "0.6.2"
+
+acorn-globals@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
+  integrity sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==
+  dependencies:
+    acorn "^7.1.1"
+    acorn-walk "^7.1.1"
+
+acorn-walk@^7.1.1:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
+  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
+
+acorn@^7.1.1:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
+acorn@^8.2.4:
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.4.1.tgz#56c36251fc7cabc7096adc18f05afe814321a28c"
+  integrity sha512-asabaBSkEKosYKMITunzX177CXxQ4Q8BSSzMTKD+FefUhipQC70gfW5SiUDhYQ3vk8G+81HqQk7Fv9OXwwn9KA==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -246,6 +311,19 @@ ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+aproba@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
+
+are-we-there-yet@~1.1.2:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
+  integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.6"
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -265,6 +343,11 @@ arr-flatten@^1.0.1:
   resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
   integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
 
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
+
 array-unique@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
@@ -280,6 +363,11 @@ assertion-error@^1.1.0:
   resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
   integrity sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
+
 babel-code-frame@^6.20.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -331,6 +419,27 @@ bl@^4.0.3:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
+bluebird@^3.5.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
+body-parser@1.19.0:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
+  integrity sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
+  dependencies:
+    bytes "3.1.0"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.2"
+    http-errors "1.7.2"
+    iconv-lite "0.4.24"
+    on-finished "~2.3.0"
+    qs "6.7.0"
+    raw-body "2.4.0"
+    type-is "~1.6.17"
+
 boolbase@^1.0.0, boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
@@ -366,6 +475,11 @@ braces@^1.8.2:
     preserve "^0.2.0"
     repeat-element "^1.1.2"
 
+browser-process-hrtime@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
+  integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
+
 browser-resolve@^1.11.3:
   version "1.11.3"
   resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
@@ -412,6 +526,11 @@ builtin-modules@^2.0.0:
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-2.0.0.tgz#60b7ef5ae6546bd7deefa74b08b62a43a232648e"
   integrity sha512-3U5kUA5VPsRUA3nofm/BXX7GVHKfxz0hOBAPxXrIvHzlDRkQVqEn6yi8QJegxl4LzOHLdvb7XF5dVawa/VVYBg==
 
+bytes@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
+  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
+
 caller-callsite@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
@@ -506,6 +625,30 @@ check-error@^1.0.2:
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
   integrity sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=
 
+cheerio-select@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-1.5.0.tgz#faf3daeb31b17c5e1a9dabcee288aaf8aafa5823"
+  integrity sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==
+  dependencies:
+    css-select "^4.1.3"
+    css-what "^5.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+    domutils "^2.7.0"
+
+cheerio@^1.0.0-rc.3:
+  version "1.0.0-rc.10"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.10.tgz#2ba3dcdfcc26e7956fc1f440e61d51c643379f3e"
+  integrity sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==
+  dependencies:
+    cheerio-select "^1.5.0"
+    dom-serializer "^1.3.2"
+    domhandler "^4.2.0"
+    htmlparser2 "^6.1.0"
+    parse5 "^6.0.1"
+    parse5-htmlparser2-tree-adapter "^6.0.1"
+    tslib "^2.2.0"
+
 chownr@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
@@ -542,6 +685,11 @@ coa@^2.0.2:
     chalk "^2.4.1"
     q "^1.1.2"
 
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+  integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
+
 color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -592,6 +740,13 @@ colors@^1.1.2:
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
   integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 commander@2.15.1:
   version "2.15.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
@@ -626,11 +781,43 @@ configstore@^3.0.0:
     write-file-atomic "^2.0.0"
     xdg-basedir "^3.0.0"
 
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+  integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
+
+content-disposition@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
+  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
+  dependencies:
+    safe-buffer "5.1.2"
+
+content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
+
+cookie@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
+  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
+
 core-js@^2.4.0:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
+core-util-is@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
+
 cosmiconfig@^5.0.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
@@ -720,6 +907,17 @@ css-select@^2.0.0:
     domutils "^1.7.0"
     nth-check "^1.0.2"
 
+css-select@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.1.3.tgz#a70440f70317f2669118ad74ff105e65849c7067"
+  integrity sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^5.0.0"
+    domhandler "^4.2.0"
+    domutils "^2.6.0"
+    nth-check "^2.0.0"
+
 css-selector-tokenizer@^0.7.0:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz#735f26186e67c749aaf275783405cf0661fae8f1"
@@ -744,11 +942,24 @@ css-tree@1.0.0-alpha.39:
     mdn-data "2.0.6"
     source-map "^0.6.1"
 
+css-tree@^1.0.0-alpha.39:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
 css-what@^3.2.1:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
   integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
 
+css-what@^5.0.0, css-what@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad"
+  integrity sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -829,6 +1040,39 @@ csso@^4.0.2:
   dependencies:
     css-tree "1.0.0-alpha.39"
 
+cssom@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
+  integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
+
+cssom@~0.3.6:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
+cssstyle@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.3.0.tgz#ff665a0ddbdc31864b09647f34163443d90b0852"
+  integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
+  dependencies:
+    cssom "~0.3.6"
+
+data-urls@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
+  integrity sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==
+  dependencies:
+    abab "^2.0.3"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.0.0"
+
+debug@2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
 debug@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
@@ -843,6 +1087,18 @@ debug@4, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "2.1.2"
 
+debug@^3.2.6:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+decimal.js@^10.2.1:
+  version "10.3.1"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.3.1.tgz#d8c3a444a9c6774ba60ca6ad7261c3a94fd5e783"
+  integrity sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==
+
 deep-eql@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-3.0.1.tgz#dfc9404400ad1c8fe023e7da1df1c147c4b444df"
@@ -855,6 +1111,11 @@ deep-extend@^0.6.0:
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
+deep-is@~0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
+
 define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -862,6 +1123,31 @@ define-properties@^1.1.3:
   dependencies:
     object-keys "^1.0.12"
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
+
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
+
+detect-libc@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
+
 devtools-protocol@0.0.869402:
   version "0.0.869402"
   resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.869402.tgz#03ade701761742e43ae4de5dc188bcd80f156d8d"
@@ -880,6 +1166,15 @@ dom-serializer@0:
     domelementtype "^2.0.1"
     entities "^2.0.0"
 
+dom-serializer@^1.0.1, dom-serializer@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
+  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
 domelementtype@1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
@@ -890,6 +1185,25 @@ domelementtype@^2.0.1:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.2.tgz#f3b6e549201e46f588b59463dd77187131fe6971"
   integrity sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA==
 
+domelementtype@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
+  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+
+domexception@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
+  integrity sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==
+  dependencies:
+    webidl-conversions "^5.0.0"
+
+domhandler@^4.0.0, domhandler@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.2.0.tgz#f9768a5f034be60a89a27c2e4d0f74eba0d8b059"
+  integrity sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==
+  dependencies:
+    domelementtype "^2.2.0"
+
 domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
@@ -898,6 +1212,15 @@ domutils@^1.7.0:
     dom-serializer "0"
     domelementtype "1"
 
+domutils@^2.5.2, domutils@^2.6.0, domutils@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.7.0.tgz#8ebaf0c41ebafcf55b0b72ec31c56323712c5442"
+  integrity sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
 dot-prop@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.1.tgz#45884194a71fc2cda71cbb4bceb3a4dd2f433ba4"
@@ -917,6 +1240,11 @@ duplexer3@^0.1.4:
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
   integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
 
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+
 electron-to-chromium@^1.3.723:
   version "1.3.739"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.739.tgz#f07756aa92cabd5a6eec6f491525a64fe62f98b9"
@@ -927,6 +1255,11 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
+
 end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -995,16 +1328,38 @@ escalade@^3.1.1:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
+
 escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
-esprima@^4.0.0:
+escodegen@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.0.0.tgz#5e32b12833e8aa8fa35e1bf0befa89380484c7dd"
+  integrity sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^5.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
+esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
+estraverse@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
+  integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
+
 estree-walker@^0.6.0, estree-walker@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
@@ -1020,6 +1375,11 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
+
 eventemitter3@^4.0.4:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -1052,6 +1412,42 @@ expand-range@^1.8.1:
   dependencies:
     fill-range "^2.1.0"
 
+express@^4.16.4:
+  version "4.17.1"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
+  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
+  dependencies:
+    accepts "~1.3.7"
+    array-flatten "1.1.1"
+    body-parser "1.19.0"
+    content-disposition "0.5.3"
+    content-type "~1.0.4"
+    cookie "0.4.0"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "~1.1.2"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "~1.1.2"
+    fresh "0.5.2"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.5"
+    qs "6.7.0"
+    range-parser "~1.2.1"
+    safe-buffer "5.1.2"
+    send "0.17.1"
+    serve-static "1.14.1"
+    setprototypeof "1.1.1"
+    statuses "~1.5.0"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
 external-editor@^3.0.3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
@@ -1079,6 +1475,22 @@ extract-zip@^2.0.0:
   optionalDependencies:
     "@types/yauzl" "^2.9.1"
 
+fast-levenshtein@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
+
+fast-mhtml@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/fast-mhtml/-/fast-mhtml-1.1.9.tgz#2c31e0727e0eb93423938a0812b001f67a3f6575"
+  integrity sha512-o+oAIqvK0xlb3o0wbReLxYXdSszbJW4gBeTFAOB3N+ByxBou2cYepTtlIkzXnlQUii4HSixJFMDVYNO4ei2s/w==
+  dependencies:
+    bluebird "^3.5.2"
+    cheerio "^1.0.0-rc.3"
+    css-tree "^1.0.0-alpha.39"
+    express "^4.16.4"
+    filenamify "^2.1.0"
+
 fastparse@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
@@ -1108,6 +1520,20 @@ filename-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
   integrity sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=
 
+filename-reserved-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz#abf73dfab735d045440abfea2d91f389ebbfa229"
+  integrity sha1-q/c9+rc10EVECr/qLZHzieu/oik=
+
+filenamify@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/filenamify/-/filenamify-2.1.0.tgz#88faf495fb1b47abfd612300002a16228c677ee9"
+  integrity sha512-ICw7NTT6RsDp2rnYKVd8Fu4cr6ITzGy3+u4vUujPkabyaz+03F24NWEX7fs5fp+kBonlaqPH8fAO2NM+SXt/JA==
+  dependencies:
+    filename-reserved-regex "^2.0.0"
+    strip-outer "^1.0.0"
+    trim-repeated "^1.0.0"
+
 fill-range@^2.1.0:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.4.tgz#eb1e773abb056dcd8df2bfdf6af59b8b3a936565"
@@ -1119,6 +1545,19 @@ fill-range@^2.1.0:
     repeat-element "^1.1.2"
     repeat-string "^1.5.2"
 
+finalhandler@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
+  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.3"
+    statuses "~1.5.0"
+    unpipe "~1.0.0"
+
 find-up@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
@@ -1146,11 +1585,37 @@ for-own@^0.1.4:
   dependencies:
     for-in "^1.0.1"
 
+form-data@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f"
+  integrity sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
+forwarded@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
+
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
+
 fs-constants@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
+fs-minipass@^1.2.5:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
+  integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
+  dependencies:
+    minipass "^2.6.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -1166,6 +1631,20 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
+gauge@~2.7.3:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
+  integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
+  dependencies:
+    aproba "^1.0.3"
+    console-control-strings "^1.0.0"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
 generic-names@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-2.0.1.tgz#f8a378ead2ccaa7a34f0317b05554832ae41b872"
@@ -1301,6 +1780,11 @@ has-symbols@^1.0.1:
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
   integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
 
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+  integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
+
 has@^1.0.0, has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
@@ -1333,6 +1817,54 @@ html-comment-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
   integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
 
+html-encoding-sniffer@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
+  integrity sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==
+  dependencies:
+    whatwg-encoding "^1.0.5"
+
+htmlparser2@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
+  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.0.0"
+    domutils "^2.5.2"
+    entities "^2.0.0"
+
+http-errors@1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
+  integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
+http-errors@~1.7.2:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
+  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.4"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
+http-proxy-agent@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz#8a8c8ef7f5932ccf953c296ca8291b95aa74aa3a"
+  integrity sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==
+  dependencies:
+    "@tootallnate/once" "1"
+    agent-base "6"
+    debug "4"
+
 https-proxy-agent@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
@@ -1341,7 +1873,7 @@ https-proxy-agent@^5.0.0:
     agent-base "6"
     debug "4"
 
-iconv-lite@^0.4.24:
+iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -1358,6 +1890,18 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
+ignore-styles@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-styles/-/ignore-styles-5.0.1.tgz#b49ef2274bdafcd8a4880a966bfe38d1a0bf4671"
+  integrity sha1-tJ7yJ0va/NikiAqWa/440aC/RnE=
+
+ignore-walk@^3.0.1:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.4.tgz#c9a09f69b7c7b479a5d74ac1a3c0d4236d2a6335"
+  integrity sha512-PY6Ii8o1jMRA1z4F2hRkH/xN59ox43DavKvD3oDpfurRlOJyAHpifIwpbdv1n4jt4ov0jSpw3kQ4GhJnpBL6WQ==
+  dependencies:
+    minimatch "^3.0.4"
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -1417,11 +1961,16 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.3, inherits@^2.0.4:
+inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
+inherits@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+
 ini@^1.3.4, ini@~1.3.0:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
@@ -1446,6 +1995,11 @@ inquirer@^6.2.1:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
+ipaddr.js@1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
+  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
+
 is-absolute-url@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
@@ -1529,6 +2083,13 @@ is-extglob@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
   integrity sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=
 
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  integrity sha1-754xOG8DGn8NZDr4L95QxFfvAMs=
+  dependencies:
+    number-is-nan "^1.0.0"
+
 is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
@@ -1598,6 +2159,11 @@ is-posix-bracket@^0.1.0:
   resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
   integrity sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=
 
+is-potential-custom-element-name@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
+  integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
+
 is-primitive@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
@@ -1644,7 +2210,7 @@ is-symbol@^1.0.2:
   dependencies:
     has-symbols "^1.0.1"
 
-isarray@1.0.0:
+isarray@1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
@@ -1747,6 +2313,44 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+jsdom-global@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/jsdom-global/-/jsdom-global-3.0.2.tgz#6bd299c13b0c4626b2da2c0393cd4385d606acb9"
+  integrity sha1-a9KZwTsMRiay2iwDk81DhdYGrLk=
+
+jsdom@^16.6.0:
+  version "16.6.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.6.0.tgz#f79b3786682065492a3da6a60a4695da983805ac"
+  integrity sha512-Ty1vmF4NHJkolaEmdjtxTfSfkdb8Ywarwf63f+F8/mDD1uLSSWDxDuMiZxiPhwunLrn9LOSVItWj4bLYsLN3Dg==
+  dependencies:
+    abab "^2.0.5"
+    acorn "^8.2.4"
+    acorn-globals "^6.0.0"
+    cssom "^0.4.4"
+    cssstyle "^2.3.0"
+    data-urls "^2.0.0"
+    decimal.js "^10.2.1"
+    domexception "^2.0.1"
+    escodegen "^2.0.0"
+    form-data "^3.0.0"
+    html-encoding-sniffer "^2.0.1"
+    http-proxy-agent "^4.0.1"
+    https-proxy-agent "^5.0.0"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.0"
+    parse5 "6.0.1"
+    saxes "^5.0.1"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.0.0"
+    w3c-hr-time "^1.0.2"
+    w3c-xmlserializer "^2.0.0"
+    webidl-conversions "^6.1.0"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.5.0"
+    ws "^7.4.5"
+    xml-name-validator "^3.0.0"
+
 json-parse-better-errors@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
@@ -1778,6 +2382,14 @@ latest-version@^3.0.0:
   dependencies:
     package-json "^4.0.0"
 
+levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
 loader-utils@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
@@ -1809,7 +2421,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.12, lodash@^4.17.4:
+lodash@^4.17.12, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -1851,6 +2463,11 @@ math-random@^1.0.1:
   resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c"
   integrity sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==
 
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
 mdn-data@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
@@ -1861,11 +2478,26 @@ mdn-data@2.0.6:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.6.tgz#852dc60fcaa5daa2e8cf6c9189c440ed3e042978"
   integrity sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==
 
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
+
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+  integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
+
 micromatch@^2.3.11:
   version "2.3.11"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
@@ -1885,6 +2517,23 @@ micromatch@^2.3.11:
     parse-glob "^3.0.4"
     regex-cache "^0.4.2"
 
+mime-db@1.48.0:
+  version "1.48.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.48.0.tgz#e35b31045dd7eada3aaad537ed88a33afbef2d1d"
+  integrity sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==
+
+mime-types@^2.1.12, mime-types@~2.1.24:
+  version "2.1.31"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.31.tgz#a00d76b74317c61f9c2db2218b8e9f8e9c5c9e6b"
+  integrity sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==
+  dependencies:
+    mime-db "1.48.0"
+
+mime@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
@@ -1912,6 +2561,21 @@ minimist@~0.0.1:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
   integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
 
+minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
+  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
+  dependencies:
+    safe-buffer "^5.1.2"
+    yallist "^3.0.0"
+
+minizlib@^1.2.1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
+  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
+  dependencies:
+    minipass "^2.9.0"
+
 mitt@^1.1.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mitt/-/mitt-1.2.0.tgz#cb24e6569c806e31bd4e3995787fe38a04fdf90d"
@@ -1929,7 +2593,7 @@ mkdirp@0.5.1:
   dependencies:
     minimist "0.0.8"
 
-mkdirp@^0.5.1, mkdirp@~0.5.1:
+mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.5, mkdirp@~0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
   integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
@@ -1958,21 +2622,50 @@ ms@2.0.0:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
   integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
 
+ms@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
+  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
 mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
   integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
 
+nan@^2.14.2:
+  version "2.14.2"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
+  integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
+needle@^2.5.2:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-2.7.0.tgz#90e020b9a1e33253fcf009d22927b130c8b2fd8b"
+  integrity sha512-b4f4JgOl7GZVM1p+xuWBAsHwflng1s2yOu9lOThKAzULRW7eqSFYfN4gbuUFOMuE0hVAPWJnSz/90LMOlEGErw==
+  dependencies:
+    debug "^3.2.6"
+    iconv-lite "^0.4.4"
+    sax "^1.2.4"
+
+negotiator@0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
+  integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -1983,11 +2676,43 @@ node-fetch@^2.6.1:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
 
+node-libtidy@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/node-libtidy/-/node-libtidy-0.4.0.tgz#794ee52f41e39c8125bc41503539b111c8a37c3c"
+  integrity sha512-9GMDD68Li87rLUjPI3z/N4KgXGWo3xmk0z5PWvfBlXle1d6EwxenmbBaAwFSVxwo1RwUnP2FTarKrVAIQSfLiA==
+  dependencies:
+    nan "^2.14.2"
+    node-pre-gyp "^0.17.0"
+
+node-pre-gyp@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.17.0.tgz#5af3f7b4c3848b5ed00edc3d298ff836daae5f1d"
+  integrity sha512-abzZt1hmOjkZez29ppg+5gGqdPLUuJeAEwVPtHYEJgx0qzttCbcKFpxrCQn2HYbwCv2c+7JwH4BgEzFkUGpn4A==
+  dependencies:
+    detect-libc "^1.0.3"
+    mkdirp "^0.5.5"
+    needle "^2.5.2"
+    nopt "^4.0.3"
+    npm-packlist "^1.4.8"
+    npmlog "^4.1.2"
+    rc "^1.2.8"
+    rimraf "^2.7.1"
+    semver "^5.7.1"
+    tar "^4.4.13"
+
 node-releases@^1.1.71:
   version "1.1.72"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe"
   integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==
 
+nopt@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"
+  integrity sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==
+  dependencies:
+    abbrev "1"
+    osenv "^0.1.4"
+
 normalize-path@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
@@ -2000,6 +2725,27 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
+npm-bundled@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.2.tgz#944c78789bd739035b70baa2ca5cc32b8d860bc1"
+  integrity sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==
+  dependencies:
+    npm-normalize-package-bin "^1.0.1"
+
+npm-normalize-package-bin@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
+  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
+
+npm-packlist@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
+  integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
+  dependencies:
+    ignore-walk "^3.0.1"
+    npm-bundled "^1.0.1"
+    npm-normalize-package-bin "^1.0.1"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -2007,6 +2753,16 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
+npmlog@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
 nth-check@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
@@ -2014,6 +2770,28 @@ nth-check@^1.0.2:
   dependencies:
     boolbase "~1.0.0"
 
+nth-check@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.0.0.tgz#1bb4f6dac70072fc313e8c9cd1417b5074c0a125"
+  integrity sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==
+  dependencies:
+    boolbase "^1.0.0"
+
+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
+
+nwsapi@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
+  integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
+
+object-assign@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
 object-inspect@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
@@ -2060,6 +2838,13 @@ object.values@^1.1.0:
     function-bind "^1.1.1"
     has "^1.0.3"
 
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
+  dependencies:
+    ee-first "1.1.1"
+
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -2082,11 +2867,36 @@ optimist@~0.6.0:
     minimist "~0.0.1"
     wordwrap "~0.0.2"
 
-os-tmpdir@~1.0.2:
+optionator@^0.8.1:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
+  integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
+  dependencies:
+    deep-is "~0.1.3"
+    fast-levenshtein "~2.0.6"
+    levn "~0.3.0"
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+    word-wrap "~1.2.3"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
+
+os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
+osenv@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
+  integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
@@ -2154,6 +2964,23 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
+parse5-htmlparser2-tree-adapter@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
+  integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
+  dependencies:
+    parse5 "^6.0.1"
+
+parse5@6.0.1, parse5@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
+  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
+
+parseurl@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -2179,6 +3006,11 @@ path-parse@^1.0.6:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
   integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
 
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
+
 pathval@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.0.tgz#b942e6d4bde653005ef6b71361def8727d0645e0"
@@ -2559,6 +3391,11 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.27:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+  integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
+
 prepend-http@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
@@ -2582,6 +3419,11 @@ pretty-format@^23.6.0:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
 progress@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
@@ -2592,6 +3434,14 @@ promise.series@^0.2.0:
   resolved "https://registry.yarnpkg.com/promise.series/-/promise.series-0.2.0.tgz#2cc7ebe959fc3a6619c04ab4dbdc9e452d864bbd"
   integrity sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=
 
+proxy-addr@~2.0.5:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
+  dependencies:
+    forwarded "0.2.0"
+    ipaddr.js "1.9.1"
+
 proxy-from-env@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
@@ -2602,6 +3452,11 @@ pseudomap@^1.0.2:
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
   integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
 
+psl@^1.1.33:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
+  integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
+
 pump@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
@@ -2610,6 +3465,11 @@ pump@^3.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
+punycode@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
 puppeteer@^9.1.1:
   version "9.1.1"
   resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-9.1.1.tgz#f74b7facf86887efd6c6b9fabb7baae6fdce012c"
@@ -2633,6 +3493,11 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qs@6.7.0:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
+  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
+
 randomatic@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed"
@@ -2649,7 +3514,22 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
-rc@^1.0.1, rc@^1.1.6:
+range-parser@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
+  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
+
+raw-body@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
+  integrity sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==
+  dependencies:
+    bytes "3.1.0"
+    http-errors "1.7.2"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
   integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
@@ -2659,6 +3539,19 @@ rc@^1.0.1, rc@^1.1.6:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+readable-stream@^2.0.6:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
+  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
 readable-stream@^3.1.1, readable-stream@^3.4.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
@@ -2758,6 +3651,13 @@ rgba-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
+rimraf@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.3"
+
 rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -2862,7 +3762,12 @@ rxjs@^6.4.0:
   dependencies:
     tslib "^1.9.0"
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
+safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -2877,11 +3782,18 @@ safe-identifier@^0.4.1:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sax@~1.2.4:
+sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+saxes@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
+  integrity sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==
+  dependencies:
+    xmlchars "^2.2.0"
+
 semver-diff@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
@@ -2889,11 +3801,30 @@ semver-diff@^2.0.0:
   dependencies:
     semver "^5.0.3"
 
-semver@^5.0.3, semver@^5.1.0, semver@^5.5.0:
+semver@^5.0.3, semver@^5.1.0, semver@^5.5.0, semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
+send@0.17.1:
+  version "0.17.1"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
+  integrity sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.2"
+    destroy "~1.0.4"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "~1.7.2"
+    mime "1.6.0"
+    ms "2.1.1"
+    on-finished "~2.3.0"
+    range-parser "~1.2.1"
+    statuses "~1.5.0"
+
 serialize-javascript@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
@@ -2901,6 +3832,26 @@ serialize-javascript@^4.0.0:
   dependencies:
     randombytes "^2.1.0"
 
+serve-static@1.14.1:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
+  integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.17.1"
+
+set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
+
+setprototypeof@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
+  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -2968,12 +3919,26 @@ stack-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
   integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==
 
+"statuses@>= 1.5.0 < 2", statuses@~1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
+
 string-hash@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
   integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=
 
-string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
+string-width@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
   integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
@@ -3004,7 +3969,14 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-strip-ansi@^3.0.0:
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
+strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
   integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
@@ -3035,6 +4007,13 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
+strip-outer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/strip-outer/-/strip-outer-1.0.1.tgz#b2fd2abf6604b9d1e6013057195df836b8a9d631"
+  integrity sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==
+  dependencies:
+    escape-string-regexp "^1.0.2"
+
 style-inject@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/style-inject/-/style-inject-0.3.0.tgz#d21c477affec91811cc82355832a700d22bf8dd3"
@@ -3108,6 +4087,11 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+symbol-tree@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
+  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
+
 tar-fs@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
@@ -3129,6 +4113,19 @@ tar-stream@^2.1.4:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
+tar@^4.4.13:
+  version "4.4.13"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
+  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
+  dependencies:
+    chownr "^1.1.1"
+    fs-minipass "^1.2.5"
+    minipass "^2.8.6"
+    minizlib "^1.2.1"
+    mkdirp "^0.5.0"
+    safe-buffer "^5.1.2"
+    yallist "^3.0.3"
+
 term-size@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
@@ -3172,6 +4169,34 @@ to-fast-properties@^1.0.3:
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
   integrity sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=
 
+toidentifier@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
+  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
+
+tough-cookie@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
+  integrity sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==
+  dependencies:
+    psl "^1.1.33"
+    punycode "^2.1.1"
+    universalify "^0.1.2"
+
+tr46@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.1.0.tgz#fa87aa81ca5d5941da8cbf1f9b749dc969a4e240"
+  integrity sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==
+  dependencies:
+    punycode "^2.1.1"
+
+trim-repeated@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/trim-repeated/-/trim-repeated-1.0.0.tgz#e3646a2ea4e891312bf7eace6cfb05380bc01c21"
+  integrity sha1-42RqLqTokTEr9+rObPsFOAvAHCE=
+  dependencies:
+    escape-string-regexp "^1.0.2"
+
 ts-node@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-7.0.1.tgz#9562dc2d1e6d248d24bc55f773e3f614337d9baf"
@@ -3191,6 +4216,11 @@ tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslint@^4.5.1:
   version "4.5.1"
   resolved "https://registry.yarnpkg.com/tslint/-/tslint-4.5.1.tgz#05356871bef23a434906734006fc188336ba824b"
@@ -3211,11 +4241,26 @@ tsutils@^1.1.0:
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-1.9.1.tgz#b9f9ab44e55af9681831d5f28d0aeeaf5c750cb0"
   integrity sha1-ufmrROVa+WgYMdXyjQrur1x1DLA=
 
+type-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  integrity sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=
+  dependencies:
+    prelude-ls "~1.1.2"
+
 type-detect@^4.0.0, type-detect@^4.0.5:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
 
+type-is@~1.6.17, type-is@~1.6.18:
+  version "1.6.18"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.24"
+
 typescript@^3.9.5:
   version "3.9.7"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
@@ -3246,6 +4291,16 @@ unique-string@^1.0.0:
   dependencies:
     crypto-random-string "^1.0.0"
 
+universalify@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
+
 unquote@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
@@ -3279,7 +4334,7 @@ url-parse-lax@^1.0.0:
   dependencies:
     prepend-http "^1.0.1"
 
-util-deprecate@^1.0.1, util-deprecate@^1.0.2:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
@@ -3294,11 +4349,66 @@ util.promisify@^1.0.0, util.promisify@~1.0.0:
     has-symbols "^1.0.1"
     object.getownpropertydescriptors "^2.1.0"
 
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
+
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+
 vendors@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
   integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
 
+w3c-hr-time@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
+  integrity sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==
+  dependencies:
+    browser-process-hrtime "^1.0.0"
+
+w3c-xmlserializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz#3e7104a05b75146cc60f564380b7f683acf1020a"
+  integrity sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==
+  dependencies:
+    xml-name-validator "^3.0.0"
+
+webidl-conversions@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
+  integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==
+
+webidl-conversions@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
+  integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
+
+whatwg-encoding@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
+  integrity sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==
+  dependencies:
+    iconv-lite "0.4.24"
+
+whatwg-mimetype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
+  integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
+
+whatwg-url@^8.0.0, whatwg-url@^8.5.0:
+  version "8.7.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.7.0.tgz#656a78e510ff8f3937bc0bcbe9f5c0ac35941b77"
+  integrity sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==
+  dependencies:
+    lodash "^4.7.0"
+    tr46 "^2.1.0"
+    webidl-conversions "^6.1.0"
+
 which@^1.2.9:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
@@ -3306,6 +4416,13 @@ which@^1.2.9:
   dependencies:
     isexe "^2.0.0"
 
+wide-align@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
+  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
+  dependencies:
+    string-width "^1.0.2 || 2"
+
 widest-line@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-2.0.1.tgz#7438764730ec7ef4381ce4df82fb98a53142a3fc"
@@ -3313,6 +4430,11 @@ widest-line@^2.0.0:
   dependencies:
     string-width "^2.1.1"
 
+word-wrap@~1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+
 wordwrap@~0.0.2:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
@@ -3337,16 +4459,36 @@ ws@^7.2.3:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
   integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
 
+ws@^7.4.5:
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.1.tgz#44fc000d87edb1d9c53e51fbc69a0ac1f6871d66"
+  integrity sha512-2c6faOUH/nhoQN6abwMloF7Iyl0ZS2E9HGtsiLrWn0zOOMWlhtDmdf/uihDt6jnuCxgtwGBNy6Onsoy2s2O2Ow==
+
 xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
   integrity sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ=
 
+xml-name-validator@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
+  integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
+
+xmlchars@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
+  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+
 yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
   integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
 
+yallist@^3.0.0, yallist@^3.0.3:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"

From 10eead6d42be4974500102896c30d4fab0922a46 Mon Sep 17 00:00:00 2001
From: AssafKr <assafk88@gmail.com>
Date: Sun, 11 Jul 2021 11:47:58 +0300
Subject: [PATCH 390/524] Handle quoted strings in data url (#84)

* handle quoted strings in data url

* unrefactor

* update package json

* Revert "update package json"

This reverts commit 9446109b0f94d9e569a961642f1e57b1a67793ee.

* change background-image to border-image
---
 src/snapshot.ts                        | 2 +-
 test/__snapshots__/integration.ts.snap | 4 ++--
 test/css/style.css                     | 1 +
 test/snapshot.test.ts                  | 8 ++++++++
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/snapshot.ts b/src/snapshot.ts
index 27b882bebd..f412cbfd81 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -69,7 +69,7 @@ function extractOrigin(url: string): string {
   return origin;
 }
 
-const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")([^"]*)"|([^)]*))\)/gm;
+const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm;
 const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/|#).*/;
 const DATA_URI = /^(data:)([^,]*),(.*)/i;
 export function absoluteToStylesheet(
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index afa7b2a04e..cd30b31c02 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -297,7 +297,7 @@ exports[`[html file]: with-style-sheet.html 1`] = `
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
   <title>with style sheet</title>
-  <style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body &gt; p { color: yellow; }</style>
+  <style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); border-image: url(\\"data:image/svg+xml;utf8,&lt;svg xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\" x=\\\\\\"0px\\\\\\" y=\\\\\\"0px\\\\\\" viewBox=\\\\\\"0 0 256 256\\\\\\"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points=\\\\\\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\\\\\\"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;\\") 100% / 1 / 0 stretch; }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body &gt; p { color: yellow; }</style>
 </head><body>
 </body></html>"
 `;
@@ -308,7 +308,7 @@ exports[`[html file]: with-style-sheet-with-import.html 1`] = `
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
   <title>with style sheet with import</title>
-  <style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body &gt; p { color: yellow; }</style>
+  <style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); border-image: url(\\"data:image/svg+xml;utf8,&lt;svg xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\" x=\\\\\\"0px\\\\\\" y=\\\\\\"0px\\\\\\" viewBox=\\\\\\"0 0 256 256\\\\\\"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points=\\\\\\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\\\\\\"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;\\") 100% / 1 / 0 stretch; }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body &gt; p { color: yellow; }</style>
 </head><body>
 </body></html>"
 `;
diff --git a/test/css/style.css b/test/css/style.css
index fe10f55d70..2b3faf2a77 100644
--- a/test/css/style.css
+++ b/test/css/style.css
@@ -1,6 +1,7 @@
 body {
   margin: 0;
   background: url('../a.jpg');
+  border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 256 256"><g><g><polygon points="79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128"/></g></g></svg>');
 }
 p {
   color: red;
diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts
index 025fac6cab..4d96a02b40 100644
--- a/test/snapshot.test.ts
+++ b/test/snapshot.test.ts
@@ -89,6 +89,14 @@ describe('absolute url to stylesheet', () => {
     ).to.equal(
       'url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')',
     );
+    expect(
+      absoluteToStylesheet(
+        'url("data:image/svg+xml;utf8,<svg width=\"28\" height=\"32\" viewBox=\"0 0 28 32\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M27 14C28\" fill=\"white\"/></svg>")',
+        href,
+      ),
+    ).to.equal(
+      'url("data:image/svg+xml;utf8,<svg width=\"28\" height=\"32\" viewBox=\"0 0 28 32\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M27 14C28\" fill=\"white\"/></svg>")',
+    );
   });
   it('can handle empty path', () => {
     expect(absoluteToStylesheet(`url('')`, href)).to.equal(`url('')`);

From 9875a3df0bf515f92bb2daade5cca5e3e9029c5f Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Sun, 11 Jul 2021 13:04:42 +0100
Subject: [PATCH 391/524] Compact style mutation (#464)

* Don't store the full style attribute change, as small mutations to single style properties result in storage of a rewrite for the full style attribute, which may be very large.

Had an example of a website using http://schillmania.com/projects/snowstorm/ where many direct style changes were happening every second across many 'snowflake' elements, with each attribute change looking like:
"style":"color: rgb(255, 255, 255); position: absolute; width: 8px; height: 8px; font-family: arial, verdana; overflow: hidden; font-weight: normal; z-index: 0; display: block; bottom: auto; opacity: 1; padding: 0px; margin: 0px; font-size: 10px; line-height: 10px; text-align: center; vertical-align: baseline; left: 242.807px; top: 85.7332px;"
even though maybe just the left/top position had been changed

* More compact storage for the much more common attribute value without an `!important` flag - saves 6 chars per style attr in the json :)

* Fix bug: attributes weren't getting removed after changes to treatment of 'style' attributes
---
 src/record/mutation.ts                      | 44 +++++++++++++++++----
 src/replay/index.ts                         | 30 +++++++++-----
 src/types.ts                                |  8 +++-
 test/__snapshots__/integration.test.ts.snap | 36 ++++++++++++++++-
 test/integration.test.ts                    |  3 +-
 test/utils.ts                               | 23 +++++++----
 6 files changed, 114 insertions(+), 30 deletions(-)

diff --git a/src/record/mutation.ts b/src/record/mutation.ts
index 04f0065b80..2344265c27 100644
--- a/src/record/mutation.ts
+++ b/src/record/mutation.ts
@@ -449,6 +449,7 @@ export default class MutationBuffer {
         break;
       }
       case 'attributes': {
+        const target = (m.target as HTMLElement);
         let value = (m.target as HTMLElement).getAttribute(m.attributeName!);
         if (m.attributeName === 'value') {
           value = maskInputValue({
@@ -472,13 +473,42 @@ export default class MutationBuffer {
           };
           this.attributes.push(item);
         }
-        // overwrite attribute if the mutations was triggered in same time
-        item.attributes[m.attributeName!] = transformAttribute(
-          this.doc,
-          (m.target as HTMLElement).tagName,
-          m.attributeName!,
-          value!,
-        );
+        if (m.attributeName === 'style') {
+          const old = this.doc.createElement('span');
+          old.setAttribute('style', m.oldValue);
+          if (item.attributes['style'] === undefined) {
+            item.attributes['style'] = {};
+          }
+          for (let i=0; i<target.style.length; i++) {
+            let pname = target.style[i];
+            const newValue = target.style.getPropertyValue(pname);
+            const newPriority = target.style.getPropertyPriority(pname);
+            if (newValue != old.style.getPropertyValue(pname) ||
+                newPriority != old.style.getPropertyPriority(pname)) {
+              if (newPriority == '') {
+                item.attributes['style'][pname] = newValue;
+              } else {
+                item.attributes['style'][pname] = [newValue, newPriority];
+              }
+            }
+          }
+          for (let i=0; i<old.style.length; i++) {
+            let pname = old.style[i];
+            if (target.style.getPropertyValue(pname) === '' ||
+                !target.style.getPropertyValue(pname)  // covering potential non-standard browsers
+               ) {
+              item.attributes['style'][pname] = false;  // delete
+            }
+          }
+        } else {
+          // overwrite attribute if the mutations was triggered in same time
+          item.attributes[m.attributeName!] = transformAttribute(
+            this.doc,
+            (m.target as HTMLElement).tagName,
+            m.attributeName!,
+            value!,
+          );
+        }
         break;
       }
       case 'childList': {
diff --git a/src/replay/index.ts b/src/replay/index.ts
index b5cbacb95c..a9d2152c7b 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -1310,18 +1310,28 @@ export class Replayer {
       for (const attributeName in mutation.attributes) {
         if (typeof attributeName === 'string') {
           const value = mutation.attributes[attributeName];
-          try {
-            if (value !== null) {
+          if (value === null) {
+            ((target as Node) as Element).removeAttribute(attributeName);
+          } else if (typeof value === 'string') {
+            try {
               ((target as Node) as Element).setAttribute(attributeName, value);
-            } else {
-              ((target as Node) as Element).removeAttribute(attributeName);
+            } catch (error) {
+              if (this.config.showWarning) {
+                console.warn(
+                  'An error occurred may due to the checkout feature.',
+                  error,
+                );
+              }
             }
-          } catch (error) {
-            if (this.config.showWarning) {
-              console.warn(
-                'An error occurred may due to the checkout feature.',
-                error,
-              );
+          } else if (attributeName === 'style') {
+            for (var s in value) {
+              if (value[s] === false) {
+                ((target as Node) as Element).style.removeProperty(s);
+              } else if (Array.isArray(value[s])) {
+                ((target as Node) as Element).style.setProperty(s, value[s][0], value[s][1]);
+              } else {
+                ((target as Node) as Element).style.setProperty(s, value[s]);
+              }
             }
           }
         }
diff --git a/src/types.ts b/src/types.ts
index d90ea4f845..baa50b47a9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -294,16 +294,20 @@ export type textMutation = {
   value: string | null;
 };
 
+export type styleAttributeValue = {
+  [key:string]: [string, string] | string | false;
+};
+
 export type attributeCursor = {
   node: Node;
   attributes: {
-    [key: string]: string | null;
+    [key: string]: string | styleAttributeValue | null;
   };
 };
 export type attributeMutation = {
   id: number;
   attributes: {
-    [key: string]: string | null;
+    [key: string]: string | styleAttributeValue | null;
   };
 };
 
diff --git a/test/__snapshots__/integration.test.ts.snap b/test/__snapshots__/integration.test.ts.snap
index 35294f80f4..ca16fefbef 100644
--- a/test/__snapshots__/integration.test.ts.snap
+++ b/test/__snapshots__/integration.test.ts.snap
@@ -7428,14 +7428,24 @@ exports[`select2 1`] = `
           \\"id\\": 36,
           \\"attributes\\": {
             \\"id\\": \\"select2-drop\\",
-            \\"style\\": \\"left: Npx; width: Npx; top: Npx; bottom: auto; display: block;\\",
+            \\"style\\": {
+              \\"left\\": \\"Npx\\",
+              \\"width\\": \\"Npx\\",
+              \\"top\\": \\"Npx\\",
+              \\"bottom\\": \\"auto\\",
+              \\"display\\": \\"block\\",
+              \\"position\\": false,
+              \\"visibility\\": false
+            },
             \\"class\\": \\"select2-drop select2-display-none select2-with-searchbox select2-drop-active\\"
           }
         },
         {
           \\"id\\": 70,
           \\"attributes\\": {
-            \\"style\\": \\"\\"
+            \\"style\\": {
+              \\"display\\": false
+            }
           }
         },
         {
@@ -7850,6 +7860,28 @@ exports[`select2 1`] = `
       \\"type\\": 0,
       \\"id\\": 70
     }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 36,
+          \\"attributes\\": {
+            \\"style\\": {
+              \\"color\\": [
+                \\"black\\",
+                \\"important\\"
+              ]
+            }
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
+    }
   }
 ]"
 `;
diff --git a/test/integration.test.ts b/test/integration.test.ts
index 9c0c52c867..5949b75325 100644
--- a/test/integration.test.ts
+++ b/test/integration.test.ts
@@ -184,7 +184,8 @@ describe('record integration tests', function (this: ISuite) {
 
     // toggle the select box
     await page.click('.select2-container', { clickCount: 2, delay: 100 });
-
+    // test storage of !important style
+    await page.evaluate('document.getElementById("select2-drop").setAttribute("style", document.getElementById("select2-drop").style.cssText + "color:black !important")');
     const snapshots = await page.evaluate('window.snapshots');
     assertSnapshot(snapshots, __filename, 'select2');
   });
diff --git a/test/utils.ts b/test/utils.ts
index 348bed7164..d920501182 100644
--- a/test/utils.ts
+++ b/test/utils.ts
@@ -75,14 +75,20 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
           s.data.source === IncrementalSource.Mutation
         ) {
           s.data.attributes.forEach((a) => {
-            if (
-              'style' in a.attributes &&
-              coordinatesReg.test(a.attributes.style!)
-            ) {
-              a.attributes.style = a.attributes.style!.replace(
-                coordinatesReg,
-                '$1: Npx',
-              );
+            if ('style' in a.attributes && a.attributes.style && typeof a.attributes.style === 'object') {
+	            for (const [k, v] of Object.entries(a.attributes.style)) {
+		            if (Array.isArray(v)) {
+		              if (coordinatesReg.test(k + ': ' + v[0])) {
+		                // TODO: could round the number here instead depending on what's coming out of various test envs
+		                a.attributes.style[k] = ['Npx', v[1]];
+		              }
+		            } else if (typeof v === 'string') {
+		              if (coordinatesReg.test(k + ': ' + v)) {
+		                a.attributes.style[k] = 'Npx';
+		              }
+		            }
+		            coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
+	            }
             }
           });
           s.data.adds.forEach((add) => {
@@ -97,6 +103,7 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
                 '$1: Npx',
               );
             }
+            coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
           });
         }
         delete s.timestamp;

From 47b555a46fc65f74ff32907204208e8b9f81efd1 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 13 Jul 2021 22:29:22 +0800
Subject: [PATCH 392/524] ignore prefetch and preload script links

related to:
1. https://github.com/rrweb-io/rrweb/issues/52
2. https://github.com/rrweb-io/rrweb/issues/297
3. https://github.com/rrweb-io/rrweb/issues/597
---
 src/rebuild.ts                         | 23 +++++++++++++++++++----
 src/snapshot.ts                        | 13 ++++++++++---
 test/__snapshots__/integration.ts.snap | 11 +++++++++++
 test/html/preload.html                 | 11 +++++++++++
 4 files changed, 51 insertions(+), 7 deletions(-)
 create mode 100644 test/html/preload.html

diff --git a/src/rebuild.ts b/src/rebuild.ts
index c932253647..a0778a0c9b 100644
--- a/src/rebuild.ts
+++ b/src/rebuild.ts
@@ -58,8 +58,8 @@ function getTagName(n: elementNode): string {
 }
 
 // based on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
-function escapeRegExp(string: string) {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+function escapeRegExp(str: string) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 }
 
 const HOVER_SELECTOR = /([^\\]):hover/;
@@ -84,7 +84,9 @@ export function addHoverClass(cssText: string): string {
     }
   });
 
-  if (selectors.length === 0) return cssText;
+  if (selectors.length === 0) {
+    return cssText;
+  }
 
   const selectorMatcher = new RegExp(
     selectors
@@ -170,12 +172,25 @@ function buildNode(
             } else if (
               tagName === 'meta' &&
               n.attributes['http-equiv'] === 'Content-Security-Policy' &&
-              name == 'content'
+              name === 'content'
             ) {
               // If CSP contains style-src and inline-style is disabled, there will be an error "Refused to apply inline style because it violates the following Content Security Policy directive: style-src '*'".
               // And the function insertStyleRules in rrweb replayer will throw an error "Uncaught TypeError: Cannot read property 'insertRule' of null".
               node.setAttribute('csp-content', value);
               continue;
+            } else if (
+              tagName === 'link' &&
+              n.attributes.rel === 'preload' &&
+              n.attributes.as === 'script'
+            ) {
+              // ignore
+            } else if (
+              tagName === 'link' &&
+              n.attributes.rel === 'prefetch' &&
+              typeof n.attributes.href === 'string' &&
+              n.attributes.href.endsWith('.js')
+            ) {
+              // ignore
             } else {
               node.setAttribute(name, value);
             }
diff --git a/src/snapshot.ts b/src/snapshot.ts
index f412cbfd81..49c2e13c29 100644
--- a/src/snapshot.ts
+++ b/src/snapshot.ts
@@ -369,8 +369,8 @@ function serializeNode(
   } = options;
   // Only record root id when document object is not the base document
   let rootId: number | undefined;
-  if ((doc as unknown as INode).__sn) {
-    const docId = (doc as unknown as INode).__sn.id;
+  if (((doc as unknown) as INode).__sn) {
+    const docId = ((doc as unknown) as INode).__sn.id;
     rootId = docId === 1 ? undefined : docId;
   }
   switch (n.nodeType) {
@@ -568,10 +568,17 @@ function slimDOMExcluded(
   } else if (sn.type === NodeType.Element) {
     if (
       slimDOMOptions.script &&
+      // script tag
       (sn.tagName === 'script' ||
+        // preload link
         (sn.tagName === 'link' &&
           sn.attributes.rel === 'preload' &&
-          sn.attributes.as === 'script'))
+          sn.attributes.as === 'script') ||
+        // prefetch link
+        (sn.tagName === 'link' &&
+          sn.attributes.rel === 'prefetch' &&
+          typeof sn.attributes.href === 'string' &&
+          sn.attributes.href.endsWith('.js')))
     ) {
       return true;
     } else if (
diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap
index cd30b31c02..e087f79b2c 100644
--- a/test/__snapshots__/integration.ts.snap
+++ b/test/__snapshots__/integration.ts.snap
@@ -226,6 +226,17 @@ exports[`[html file]: picture.html 1`] = `
   </body></html>"
 `;
 
+exports[`[html file]: preload.html 1`] = `
+"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+    <meta charset=\\"UTF-8\\" />
+    <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+    <title>Document</title>
+    <link />
+    <link />
+  </head>
+  <body></body></html>"
+`;
+
 exports[`[html file]: shadow-dom.html 1`] = `
 "<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
diff --git a/test/html/preload.html b/test/html/preload.html
new file mode 100644
index 0000000000..32e84a260d
--- /dev/null
+++ b/test/html/preload.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="preload" href="https://example/path/to/preload.js" as="script" />
+    <link rel="prefetch" href="https://example/path/to/prefetch.js" />
+  </head>
+  <body></body>
+</html>

From 016ad909737cce852ea41d5b7994d685eba4d3e0 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Tue, 13 Jul 2021 16:31:45 +0200
Subject: [PATCH 393/524] Add type checking to ci (#626)

* Add type checking to ci

* Update @types/node to version 12

We are using node 12 on ci
---
 .travis.yml  | 1 +
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index ff245c5f32..6484f9dd16 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -11,4 +11,5 @@ install:
   - yarn
 
 script:
+  - tsc --noEmit
   - xvfb-run --server-args="-screen 0 1920x1080x24" npm test
diff --git a/package.json b/package.json
index eb8d69dcc6..ce42d91cea 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "@types/inquirer": "0.0.43",
     "@types/jsdom": "^16.2.12",
     "@types/mocha": "^5.2.5",
-    "@types/node": "^10.11.7",
+    "@types/node": "^12.20.16",
     "@types/puppeteer": "^5.4.3",
     "chai": "^4.2.0",
     "cross-env": "^5.2.0",
diff --git a/yarn.lock b/yarn.lock
index 5fd09b5914..77bc40002b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -65,10 +65,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.2.tgz#d25295f9e4ca5989a2c610754dc02a9721235eeb"
   integrity sha512-jeYJU2kl7hL9U5xuI/BhKPZ4vqGM/OmK6whiFAXVhlstzZhVamWhDSmHyGLIp+RVyuF9/d0dqr2P85aFj4BvJg==
 
-"@types/node@^10.11.7":
-  version "10.17.42"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.42.tgz#90dd71b26fe4f4e2929df6b07e72ef2e9648a173"
-  integrity sha512-HElxYF7C/MSkuvlaHB2c+82zhXiuO49Cq056Dol8AQuTph7oJtduo2n6J8rFa+YhJyNgQ/Lm20ZaxqD0vxU0+Q==
+"@types/node@^12.20.16":
+  version "12.20.16"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.16.tgz#1acf34f6456208f495dac0434dd540488d17f991"
+  integrity sha512-6CLxw83vQf6DKqXxMPwl8qpF8I7THFZuIwLt4TnNsumxkp1VsRZWT8txQxncT/Rl2UojTsFzWgDG4FRMwafrlA==
 
 "@types/parse5@*":
   version "6.0.0"

From 6ef260089ff3513f1f39389c9ed94e01dfc42d8d Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Tue, 13 Jul 2021 17:46:45 +0200
Subject: [PATCH 394/524] Add check-types to package.json (#627)

* Add type checking to ci

* Update @types/node to version 12

We are using node 12 on ci

* Add check-types to package.json
---
 .travis.yml  | 4 ++--
 package.json | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 6484f9dd16..be3721f648 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -11,5 +11,5 @@ install:
   - yarn
 
 script:
-  - tsc --noEmit
-  - xvfb-run --server-args="-screen 0 1920x1080x24" npm test
+  - yarn check-types
+  - xvfb-run --server-args="-screen 0 1920x1080x24" yarn test
diff --git a/package.json b/package.json
index ce42d91cea..90d714a704 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "repl": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true ts-node scripts/repl.ts",
     "bundle:browser": "cross-env BROWSER_ONLY=true rollup --config",
     "bundle": "rollup --config",
-    "typings": "tsc -d --declarationDir typings"
+    "typings": "tsc -d --declarationDir typings",
+    "check-types": "tsc -noEmit"
   },
   "repository": {
     "type": "git",

From 788fb1d5ff049b4ea0d5495491784ad60070b74a Mon Sep 17 00:00:00 2001
From: qun <6063479+qun27@users.noreply.github.com>
Date: Wed, 14 Jul 2021 16:37:44 +0800
Subject: [PATCH 395/524] Update index.zh_CN.md (#632)

wrongly written characters
---
 docs/recipes/index.zh_CN.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/recipes/index.zh_CN.md b/docs/recipes/index.zh_CN.md
index b54e100bf6..708965a96f 100644
--- a/docs/recipes/index.zh_CN.md
+++ b/docs/recipes/index.zh_CN.md
@@ -6,7 +6,7 @@
 
 ### 录制与回放
 
-录制与回放时最常用的使用方式，适用于任何需要采集用户行为数据并重新查看的场景。
+录制与回放是最常用的使用方式，适用于任何需要采集用户行为数据并重新查看的场景。
 
 [链接](./record-and-replay.zh_CN.md)
 

From 0800f7aa46956d53d1caabf1132b2ab2eac586c7 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Wed, 14 Jul 2021 14:12:28 +0200
Subject: [PATCH 396/524] Remove userTriggeredOnInput in player config (#633)

The flag is only used on record, not replay
---
 src/replay/index.ts | 1 -
 src/types.ts        | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index a9d2152c7b..565e4cea78 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -124,7 +124,6 @@ export class Replayer {
       triggerFocus: true,
       UNSAFE_replayCanvas: false,
       pauseAnimation: true,
-      userTriggeredOnInput: true,
       mouseTail: defaultMouseTailConfig,
     };
     this.config = Object.assign({}, defaultConfig, config);
diff --git a/src/types.ts b/src/types.ts
index baa50b47a9..08d972a855 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -496,7 +496,6 @@ export type playerConfig = {
   triggerFocus: boolean;
   UNSAFE_replayCanvas: boolean;
   pauseAnimation?: boolean;
-  userTriggeredOnInput: boolean;
   mouseTail:
     | boolean
     | {

From eb6b336106afb9ed0af752bec362674a223f3ded Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Thu, 15 Jul 2021 13:39:25 +0200
Subject: [PATCH 397/524] Fixes to #628 to help it pass typescript's type
 checking (#634)

* My best interpretation of what the typings should look like after merge of #464

* Apply variable name changes as per Juice10 review

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

* fix types

Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
---
 src/record/mutation.ts | 36 +++++++++++++++++++++++-------------
 src/replay/index.ts    | 18 ++++++++++++------
 src/types.ts           |  4 +++-
 typings/types.d.ts     |  8 ++++++--
 4 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/src/record/mutation.ts b/src/record/mutation.ts
index 2344265c27..216c76a392 100644
--- a/src/record/mutation.ts
+++ b/src/record/mutation.ts
@@ -21,6 +21,7 @@ import {
   removedNodeMutation,
   addedNodeMutation,
   Mirror,
+  styleAttributeValue,
 } from '../types';
 import {
   isBlocked,
@@ -449,7 +450,7 @@ export default class MutationBuffer {
         break;
       }
       case 'attributes': {
-        const target = (m.target as HTMLElement);
+        const target = m.target as HTMLElement;
         let value = (m.target as HTMLElement).getAttribute(m.attributeName!);
         if (m.attributeName === 'value') {
           value = maskInputValue({
@@ -475,29 +476,38 @@ export default class MutationBuffer {
         }
         if (m.attributeName === 'style') {
           const old = this.doc.createElement('span');
-          old.setAttribute('style', m.oldValue);
-          if (item.attributes['style'] === undefined) {
+          if (m.oldValue) {
+            old.setAttribute('style', m.oldValue);
+          }
+          if (
+            item.attributes['style'] === undefined ||
+            item.attributes['style'] === null
+          ) {
             item.attributes['style'] = {};
           }
-          for (let i=0; i<target.style.length; i++) {
+          const styleObj = item.attributes['style'] as styleAttributeValue;
+          for (let i = 0; i < target.style.length; i++) {
             let pname = target.style[i];
             const newValue = target.style.getPropertyValue(pname);
             const newPriority = target.style.getPropertyPriority(pname);
-            if (newValue != old.style.getPropertyValue(pname) ||
-                newPriority != old.style.getPropertyPriority(pname)) {
+            if (
+              newValue != old.style.getPropertyValue(pname) ||
+              newPriority != old.style.getPropertyPriority(pname)
+            ) {
               if (newPriority == '') {
-                item.attributes['style'][pname] = newValue;
+                styleObj[pname] = newValue;
               } else {
-                item.attributes['style'][pname] = [newValue, newPriority];
+                styleObj[pname] = [newValue, newPriority];
               }
             }
           }
-          for (let i=0; i<old.style.length; i++) {
+          for (let i = 0; i < old.style.length; i++) {
             let pname = old.style[i];
-            if (target.style.getPropertyValue(pname) === '' ||
-                !target.style.getPropertyValue(pname)  // covering potential non-standard browsers
-               ) {
-              item.attributes['style'][pname] = false;  // delete
+            if (
+              target.style.getPropertyValue(pname) === '' ||
+              !target.style.getPropertyValue(pname) // covering potential non-standard browsers
+            ) {
+              styleObj[pname] = false; // delete
             }
           }
         } else {
diff --git a/src/replay/index.ts b/src/replay/index.ts
index 565e4cea78..4ba93330d9 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -28,6 +28,8 @@ import {
   canvasMutationData,
   Mirror,
   ElementState,
+  styleAttributeValue,
+  styleValueWithPriority,
 } from '../types';
 import {
   createMirror,
@@ -1323,13 +1325,17 @@ export class Replayer {
               }
             }
           } else if (attributeName === 'style') {
-            for (var s in value) {
-              if (value[s] === false) {
-                ((target as Node) as Element).style.removeProperty(s);
-              } else if (Array.isArray(value[s])) {
-                ((target as Node) as Element).style.setProperty(s, value[s][0], value[s][1]);
+            let styleValues = (value as styleAttributeValue);
+            const targetEl = ((target as Node) as HTMLElement);
+            for (var s in styleValues) {
+              if (styleValues[s] === false) {
+                targetEl.style.removeProperty(s);
+              } else if (styleValues[s] instanceof Array) {
+                const svp = (styleValues[s] as styleValueWithPriority);
+                targetEl.style.setProperty(s, svp[0], svp[1]);
               } else {
-                ((target as Node) as Element).style.setProperty(s, value[s]);
+                const svs = (styleValues[s] as string)
+                targetEl.style.setProperty(s, svs);
               }
             }
           }
diff --git a/src/types.ts b/src/types.ts
index 08d972a855..463f9293a4 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -295,9 +295,11 @@ export type textMutation = {
 };
 
 export type styleAttributeValue = {
-  [key:string]: [string, string] | string | false;
+  [key:string]: styleValueWithPriority | string | false;
 };
 
+export type styleValueWithPriority = [string, string];
+
 export type attributeCursor = {
   node: Node;
   attributes: {
diff --git a/typings/types.d.ts b/typings/types.d.ts
index bcd9797eb9..1bec3d70dc 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -211,16 +211,20 @@ export declare type textMutation = {
     id: number;
     value: string | null;
 };
+export declare type styleAttributeValue = {
+    [key: string]: styleValueWithPriority | string | false;
+};
+export declare type styleValueWithPriority = [string, string];
 export declare type attributeCursor = {
     node: Node;
     attributes: {
-        [key: string]: string | null;
+        [key: string]: string | styleAttributeValue | null;
     };
 };
 export declare type attributeMutation = {
     id: number;
     attributes: {
-        [key: string]: string | null;
+        [key: string]: string | styleAttributeValue | null;
     };
 };
 export declare type removedNodeMutation = {

From 7210eaa7b2d587a8a6c14f4c61e8b8f126d77d59 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Thu, 15 Jul 2021 17:26:43 +0200
Subject: [PATCH 398/524] yarn typings (#635)

---
 typings/replay/index.d.ts          |  2 ++
 typings/replay/virtual-styles.d.ts | 24 ++++++++++++++++++++++++
 typings/types.d.ts                 |  3 +++
 3 files changed, 29 insertions(+)
 create mode 100644 typings/replay/virtual-styles.d.ts

diff --git a/typings/replay/index.d.ts b/typings/replay/index.d.ts
index 0f021d3298..5fd7ad4779 100644
--- a/typings/replay/index.d.ts
+++ b/typings/replay/index.d.ts
@@ -18,6 +18,7 @@ export declare class Replayer {
     private treeIndex;
     private fragmentParentMap;
     private elementStateMap;
+    private virtualStyleRulesMap;
     private imageMap;
     private mirror;
     private firstFullSnapshot;
@@ -59,6 +60,7 @@ export declare class Replayer {
     private restoreRealParent;
     private storeState;
     private restoreState;
+    private restoreNodeSheet;
     private warnNodeNotFound;
     private warnCanvasMutationFailed;
     private debugNodeNotFound;
diff --git a/typings/replay/virtual-styles.d.ts b/typings/replay/virtual-styles.d.ts
new file mode 100644
index 0000000000..107e07855a
--- /dev/null
+++ b/typings/replay/virtual-styles.d.ts
@@ -0,0 +1,24 @@
+import { INode } from 'rrweb-snapshot';
+export declare enum StyleRuleType {
+    Insert = 0,
+    Remove = 1,
+    Snapshot = 2
+}
+declare type InsertRule = {
+    cssText: string;
+    type: StyleRuleType.Insert;
+    index?: number;
+};
+declare type RemoveRule = {
+    type: StyleRuleType.Remove;
+    index: number;
+};
+declare type SnapshotRule = {
+    type: StyleRuleType.Snapshot;
+    cssTexts: string[];
+};
+export declare type VirtualStyleRules = Array<InsertRule | RemoveRule | SnapshotRule>;
+export declare type VirtualStyleRulesMap = Map<INode, VirtualStyleRules>;
+export declare function applyVirtualStyleRulesToNode(storedRules: VirtualStyleRules, styleNode: HTMLStyleElement): void;
+export declare function storeCSSRules(parentElement: HTMLStyleElement, virtualStyleRulesMap: VirtualStyleRulesMap): void;
+export {};
diff --git a/typings/types.d.ts b/typings/types.d.ts
index 1bec3d70dc..73654ec505 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -144,6 +144,7 @@ export declare type recordOptions<T> = {
     packFn?: PackFn;
     sampling?: SamplingStrategy;
     recordCanvas?: boolean;
+    userTriggeredOnInput?: boolean;
     collectFonts?: boolean;
     plugins?: RecordPlugin[];
     mousemoveWait?: number;
@@ -171,6 +172,7 @@ export declare type observerParam = {
     fontCb: fontCallback;
     sampling: SamplingStrategy;
     recordCanvas: boolean;
+    userTriggeredOnInput: boolean;
     collectFonts: boolean;
     slimDOMOptions: SlimDOMOptions;
     doc: Document;
@@ -313,6 +315,7 @@ export declare type viewportResizeCallback = (d: viewportResizeDimension) => voi
 export declare type inputValue = {
     text: string;
     isChecked: boolean;
+    userTriggered?: boolean;
 };
 export declare type inputCallback = (v: inputValue & {
     id: number;

From 69cb5dece0b244761b1e15492d2f60048655759f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 17 Jul 2021 15:09:00 +0800
Subject: [PATCH 399/524] Release 1.1.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2c611aea74..bd31293572 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",

From ca8317b56f4e91613587d4fc639f45aadabd3b34 Mon Sep 17 00:00:00 2001
From: yz-yu <yanzhen@smartx.com>
Date: Sun, 18 Jul 2021 10:49:16 +0800
Subject: [PATCH 400/524] use prettier instead of node-libtidy (#638)

---
 package.json                             |   2 +-
 test/__snapshots__/replayer.test.ts.snap | 179 +++++++++----
 test/utils.ts                            |  49 ++--
 yarn.lock                                | 312 ++---------------------
 4 files changed, 176 insertions(+), 366 deletions(-)

diff --git a/package.json b/package.json
index 90d714a704..97da1916a0 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@types/jsdom": "^16.2.12",
     "@types/mocha": "^5.2.5",
     "@types/node": "^12.20.16",
+    "@types/prettier": "^2.3.2",
     "@types/puppeteer": "^5.4.3",
     "chai": "^4.2.0",
     "cross-env": "^5.2.0",
@@ -54,7 +55,6 @@
     "jsdom": "^16.6.0",
     "jsdom-global": "^3.0.2",
     "mocha": "^5.2.0",
-    "node-libtidy": "^0.4.0",
     "prettier": "2.2.1",
     "puppeteer": "^9.1.1",
     "rollup": "^2.3.3",
diff --git a/test/__snapshots__/replayer.test.ts.snap b/test/__snapshots__/replayer.test.ts.snap
index c6f8e3866d..de5db0c3fd 100644
--- a/test/__snapshots__/replayer.test.ts.snap
+++ b/test/__snapshots__/replayer.test.ts.snap
@@ -3,31 +3,37 @@
 exports[`style-sheet-remove-events-play-at-2500 1`] = `
 "file-frame-1
 <html>
-<head>
-  <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
-  <title></title>
-</head>
-<body>
-  <div class=\\"replayer-wrapper\\">
-    <div class=\\"replayer-mouse\\"></div>
-    <canvas class=\\"replayer-mouse-tail\\" width=\\"1000\\" height=\\"800\\" style=
-    \\"display: inherit;\\"></canvas><iframe sandbox=\\"allow-same-origin\\" scrolling=
-    \\"no\\" width=\\"1000\\" height=\\"800\\" style=
-    \\"display: inherit; pointer-events: none;\\"></iframe>
-  </div>
-</body>
+  <head>
+    <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
+  </head>
+  <body>
+    <div class=\\"replayer-wrapper\\">
+      <div class=\\"replayer-mouse\\"></div>
+      <canvas
+        class=\\"replayer-mouse-tail\\"
+        width=\\"1000\\"
+        height=\\"800\\"
+        style=\\"display: inherit\\"
+      ></canvas
+      ><iframe
+        sandbox=\\"allow-same-origin\\"
+        scrolling=\\"no\\"
+        width=\\"1000\\"
+        height=\\"800\\"
+        style=\\"display: inherit; pointer-events: none\\"
+      ></iframe>
+    </div>
+  </body>
 </html>
 
 
 file-frame-2
 <html>
-<head>
-  <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
-  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\">
-  <title></title>
-</head>
-<body>
-</body>
+  <head>
+    <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
+  </head>
+  <body></body>
 </html>
 
 
@@ -116,36 +122,43 @@ file-cid-3
 exports[`style-sheet-rule-events-play-at-1500 1`] = `
 "file-frame-4
 <html>
-<head>
-  <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
-  <title></title>
-</head>
-<body>
-  <div class=\\"replayer-wrapper\\">
-    <div class=\\"replayer-mouse\\"></div>
-    <canvas class=\\"replayer-mouse-tail\\" width=\\"1000\\" height=\\"800\\" style=
-    \\"display: inherit;\\"></canvas><iframe sandbox=\\"allow-same-origin\\" scrolling=
-    \\"no\\" width=\\"1000\\" height=\\"800\\" style=
-    \\"display: inherit; pointer-events: none;\\"></iframe>
-  </div>
-</body>
+  <head>
+    <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
+  </head>
+  <body>
+    <div class=\\"replayer-wrapper\\">
+      <div class=\\"replayer-mouse\\"></div>
+      <canvas
+        class=\\"replayer-mouse-tail\\"
+        width=\\"1000\\"
+        height=\\"800\\"
+        style=\\"display: inherit\\"
+      ></canvas
+      ><iframe
+        sandbox=\\"allow-same-origin\\"
+        scrolling=\\"no\\"
+        width=\\"1000\\"
+        height=\\"800\\"
+        style=\\"display: inherit; pointer-events: none\\"
+      ></iframe>
+    </div>
+  </body>
 </html>
 
 
 file-frame-5
 <!DOCTYPE html>
 <html lang=\\"en\\">
-<head>
-  <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
-  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\">
-  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\">
-  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-2\\">
-  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-3\\">
-  <title></title>
-</head>
-<body>
-  <a class=\\"css-added-at-1000-deleted-at-2500\\">string</a>
-</body>
+  <head>
+    <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-2\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-3\\" />
+  </head>
+  <body>
+    <a class=\\"css-added-at-1000-deleted-at-2500\\">string</a>
+  </body>
 </html>
 
 
@@ -185,3 +198,81 @@ file-cid-3
 .css-lsxxx { padding-left: 4rem; }
 "
 `;
+
+exports[`style-sheet-rule-events-play-at-2500 1`] = `
+"file-frame-4
+<html>
+  <head>
+    <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
+  </head>
+  <body>
+    <div class=\\"replayer-wrapper\\">
+      <div class=\\"replayer-mouse\\"></div>
+      <canvas
+        class=\\"replayer-mouse-tail\\"
+        width=\\"1000\\"
+        height=\\"800\\"
+        style=\\"display: inherit\\"
+      ></canvas
+      ><iframe
+        sandbox=\\"allow-same-origin\\"
+        scrolling=\\"no\\"
+        width=\\"1000\\"
+        height=\\"800\\"
+        style=\\"display: inherit; pointer-events: none\\"
+      ></iframe>
+    </div>
+  </body>
+</html>
+
+
+file-frame-5
+<!DOCTYPE html>
+<html lang=\\"en\\">
+  <head>
+    <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-2\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-3\\" />
+  </head>
+  <body>
+    <a class=\\"css-added-at-1000-deleted-at-2500\\">string</a>
+  </body>
+</html>
+
+
+file-cid-0
+@charset \\"utf-8\\";
+
+.rr-block { background: rgb(204, 204, 204); }
+
+noscript { display: none !important; }
+
+html.rrweb-paused * { animation-play-state: paused !important; }
+
+
+file-cid-1
+@charset \\"utf-8\\";
+
+.c011xx { padding: 1.3125rem; flex: 0 0 auto; width: 100%; }
+
+
+file-cid-2
+@charset \\"utf-8\\";
+
+.c01x { opacity: 1; transform: translateX(0px); }
+
+.css-added-at-400 { border: 1px solid blue; }
+
+
+file-cid-3
+@charset \\"utf-8\\";
+
+.css-1uxxxx3 { position: fixed; top: 0px; right: 0px; left: 4rem; z-index: 15; flex-shrink: 0; height: 0.25rem; overflow: hidden; background-color: rgb(17, 171, 209); }
+
+.css-1c9xxxx { height: 0.25rem; background-color: rgb(190, 232, 242); opacity: 0; transition: opacity 0.5s ease 0s; }
+
+.css-lsxxx { padding-left: 4rem; }
+"
+`;
diff --git a/test/utils.ts b/test/utils.ts
index d920501182..6a2ac5811b 100644
--- a/test/utils.ts
+++ b/test/utils.ts
@@ -8,7 +8,7 @@ import {
   MouseInteractions,
 } from '../src/types';
 import * as puppeteer from 'puppeteer';
-import { TidyDoc } from 'node-libtidy';
+import { format } from 'prettier';
 
 export async function launchPuppeteer() {
   return await puppeteer.launch({
@@ -75,20 +75,24 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
           s.data.source === IncrementalSource.Mutation
         ) {
           s.data.attributes.forEach((a) => {
-            if ('style' in a.attributes && a.attributes.style && typeof a.attributes.style === 'object') {
-	            for (const [k, v] of Object.entries(a.attributes.style)) {
-		            if (Array.isArray(v)) {
-		              if (coordinatesReg.test(k + ': ' + v[0])) {
-		                // TODO: could round the number here instead depending on what's coming out of various test envs
-		                a.attributes.style[k] = ['Npx', v[1]];
-		              }
-		            } else if (typeof v === 'string') {
-		              if (coordinatesReg.test(k + ': ' + v)) {
-		                a.attributes.style[k] = 'Npx';
-		              }
-		            }
-		            coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
-	            }
+            if (
+              'style' in a.attributes &&
+              a.attributes.style &&
+              typeof a.attributes.style === 'object'
+            ) {
+              for (const [k, v] of Object.entries(a.attributes.style)) {
+                if (Array.isArray(v)) {
+                  if (coordinatesReg.test(k + ': ' + v[0])) {
+                    // TODO: could round the number here instead depending on what's coming out of various test envs
+                    a.attributes.style[k] = ['Npx', v[1]];
+                  }
+                } else if (typeof v === 'string') {
+                  if (coordinatesReg.test(k + ': ' + v)) {
+                    a.attributes.style[k] = 'Npx';
+                  }
+                }
+                coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
+              }
             }
           });
           s.data.adds.forEach((add) => {
@@ -138,18 +142,9 @@ function stringifyDomSnapshot(mhtml: string): string {
       let { filename, content } = asset;
       let res: string | undefined;
       if (filename.includes('frame')) {
-        const doc = TidyDoc();
-        doc.options = {
-          indent: 'auto',
-          indent_spaces: 2,
-          wrap: 80,
-          markup: true,
-          quote_marks: true,
-          break_before_br: true,
-          tidy_mark: false,
-        };
-        doc.parseBufferSync(Buffer.from(content));
-        res = doc.saveBufferSync().toString();
+        res = format(content, {
+          parser: 'html',
+        });
       }
       return { filename, content: res || content };
     },
diff --git a/yarn.lock b/yarn.lock
index 77bc40002b..3b1588c5c6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -75,6 +75,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.0.tgz#38590dc2c3cf5717154064e3ee9b6947ee21b299"
   integrity sha512-oPwPSj4a1wu9rsXTEGIJz91ISU725t0BmSnUhb57sI+M8XEmvUop84lzuiYdq0Y5M6xLY8DBPg0C2xEQKLyvBA==
 
+"@types/prettier@^2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.3.2.tgz#fc8c2825e4ed2142473b4a81064e6e081463d1b3"
+  integrity sha512-eI5Yrz3Qv4KPUa/nSIAi0h+qX0XyewOliug5F2QAtuRg6Kjg6jfmxe1GIwoIRhZspD1A0RP8ANrPwvEXXtRFog==
+
 "@types/puppeteer@^5.4.3":
   version "5.4.3"
   resolved "https://registry.yarnpkg.com/@types/puppeteer/-/puppeteer-5.4.3.tgz#cdca84aa7751d77448d8a477dbfa0af1f11485f2"
@@ -217,11 +222,6 @@ abab@^2.0.3, abab@^2.0.5:
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
   integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
 
-abbrev@1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
-  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
-
 accepts@~1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
@@ -311,19 +311,6 @@ ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
-aproba@^1.0.3:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
-  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
-
-are-we-there-yet@~1.1.2:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
-  integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==
-  dependencies:
-    delegates "^1.0.0"
-    readable-stream "^2.0.6"
-
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -685,11 +672,6 @@ coa@^2.0.2:
     chalk "^2.4.1"
     q "^1.1.2"
 
-code-point-at@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
-  integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
-
 color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -781,11 +763,6 @@ configstore@^3.0.0:
     write-file-atomic "^2.0.0"
     xdg-basedir "^3.0.0"
 
-console-control-strings@^1.0.0, console-control-strings@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
-  integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
-
 content-disposition@0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
@@ -813,11 +790,6 @@ core-js@^2.4.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
-core-util-is@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
-  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
-
 cosmiconfig@^5.0.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
@@ -1087,13 +1059,6 @@ debug@4, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "2.1.2"
 
-debug@^3.2.6:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
-  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
-  dependencies:
-    ms "^2.1.1"
-
 decimal.js@^10.2.1:
   version "10.3.1"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.3.1.tgz#d8c3a444a9c6774ba60ca6ad7261c3a94fd5e783"
@@ -1128,11 +1093,6 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
-delegates@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
-  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
-
 depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
@@ -1143,11 +1103,6 @@ destroy@~1.0.4:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
   integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
-detect-libc@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
-  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
-
 devtools-protocol@0.0.869402:
   version "0.0.869402"
   resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.869402.tgz#03ade701761742e43ae4de5dc188bcd80f156d8d"
@@ -1609,13 +1564,6 @@ fs-constants@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
-fs-minipass@^1.2.5:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
-  integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
-  dependencies:
-    minipass "^2.6.0"
-
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -1631,20 +1579,6 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
-gauge@~2.7.3:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
-  integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
-  dependencies:
-    aproba "^1.0.3"
-    console-control-strings "^1.0.0"
-    has-unicode "^2.0.0"
-    object-assign "^4.1.0"
-    signal-exit "^3.0.0"
-    string-width "^1.0.1"
-    strip-ansi "^3.0.1"
-    wide-align "^1.1.0"
-
 generic-names@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-2.0.1.tgz#f8a378ead2ccaa7a34f0317b05554832ae41b872"
@@ -1780,11 +1714,6 @@ has-symbols@^1.0.1:
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
   integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
 
-has-unicode@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
-  integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
-
 has@^1.0.0, has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
@@ -1873,7 +1802,7 @@ https-proxy-agent@^5.0.0:
     agent-base "6"
     debug "4"
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
+iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -1895,13 +1824,6 @@ ignore-styles@^5.0.1:
   resolved "https://registry.yarnpkg.com/ignore-styles/-/ignore-styles-5.0.1.tgz#b49ef2274bdafcd8a4880a966bfe38d1a0bf4671"
   integrity sha1-tJ7yJ0va/NikiAqWa/440aC/RnE=
 
-ignore-walk@^3.0.1:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.4.tgz#c9a09f69b7c7b479a5d74ac1a3c0d4236d2a6335"
-  integrity sha512-PY6Ii8o1jMRA1z4F2hRkH/xN59ox43DavKvD3oDpfurRlOJyAHpifIwpbdv1n4jt4ov0jSpw3kQ4GhJnpBL6WQ==
-  dependencies:
-    minimatch "^3.0.4"
-
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -1961,7 +1883,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -2083,13 +2005,6 @@ is-extglob@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
   integrity sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=
 
-is-fullwidth-code-point@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
-  integrity sha1-754xOG8DGn8NZDr4L95QxFfvAMs=
-  dependencies:
-    number-is-nan "^1.0.0"
-
 is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
@@ -2210,7 +2125,7 @@ is-symbol@^1.0.2:
   dependencies:
     has-symbols "^1.0.1"
 
-isarray@1.0.0, isarray@~1.0.0:
+isarray@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
@@ -2561,21 +2476,6 @@ minimist@~0.0.1:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
   integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
 
-minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
-  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
-  dependencies:
-    safe-buffer "^5.1.2"
-    yallist "^3.0.0"
-
-minizlib@^1.2.1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
-  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
-  dependencies:
-    minipass "^2.9.0"
-
 mitt@^1.1.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mitt/-/mitt-1.2.0.tgz#cb24e6569c806e31bd4e3995787fe38a04fdf90d"
@@ -2593,7 +2493,7 @@ mkdirp@0.5.1:
   dependencies:
     minimist "0.0.8"
 
-mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.5, mkdirp@~0.5.1:
+mkdirp@^0.5.1, mkdirp@~0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
   integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
@@ -2632,35 +2532,16 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@^2.1.1:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
-  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
-
 mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
   integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
 
-nan@^2.14.2:
-  version "2.14.2"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
-  integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
-
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-needle@^2.5.2:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.7.0.tgz#90e020b9a1e33253fcf009d22927b130c8b2fd8b"
-  integrity sha512-b4f4JgOl7GZVM1p+xuWBAsHwflng1s2yOu9lOThKAzULRW7eqSFYfN4gbuUFOMuE0hVAPWJnSz/90LMOlEGErw==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -2676,43 +2557,11 @@ node-fetch@^2.6.1:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
 
-node-libtidy@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/node-libtidy/-/node-libtidy-0.4.0.tgz#794ee52f41e39c8125bc41503539b111c8a37c3c"
-  integrity sha512-9GMDD68Li87rLUjPI3z/N4KgXGWo3xmk0z5PWvfBlXle1d6EwxenmbBaAwFSVxwo1RwUnP2FTarKrVAIQSfLiA==
-  dependencies:
-    nan "^2.14.2"
-    node-pre-gyp "^0.17.0"
-
-node-pre-gyp@^0.17.0:
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.17.0.tgz#5af3f7b4c3848b5ed00edc3d298ff836daae5f1d"
-  integrity sha512-abzZt1hmOjkZez29ppg+5gGqdPLUuJeAEwVPtHYEJgx0qzttCbcKFpxrCQn2HYbwCv2c+7JwH4BgEzFkUGpn4A==
-  dependencies:
-    detect-libc "^1.0.3"
-    mkdirp "^0.5.5"
-    needle "^2.5.2"
-    nopt "^4.0.3"
-    npm-packlist "^1.4.8"
-    npmlog "^4.1.2"
-    rc "^1.2.8"
-    rimraf "^2.7.1"
-    semver "^5.7.1"
-    tar "^4.4.13"
-
 node-releases@^1.1.71:
   version "1.1.72"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe"
   integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==
 
-nopt@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"
-  integrity sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==
-  dependencies:
-    abbrev "1"
-    osenv "^0.1.4"
-
 normalize-path@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
@@ -2725,27 +2574,6 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
-npm-bundled@^1.0.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.2.tgz#944c78789bd739035b70baa2ca5cc32b8d860bc1"
-  integrity sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==
-  dependencies:
-    npm-normalize-package-bin "^1.0.1"
-
-npm-normalize-package-bin@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
-  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
-
-npm-packlist@^1.4.8:
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
-  integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
-  dependencies:
-    ignore-walk "^3.0.1"
-    npm-bundled "^1.0.1"
-    npm-normalize-package-bin "^1.0.1"
-
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -2753,16 +2581,6 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-npmlog@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
-  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
-  dependencies:
-    are-we-there-yet "~1.1.2"
-    console-control-strings "~1.1.0"
-    gauge "~2.7.3"
-    set-blocking "~2.0.0"
-
 nth-check@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
@@ -2777,21 +2595,11 @@ nth-check@^2.0.0:
   dependencies:
     boolbase "^1.0.0"
 
-number-is-nan@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
-  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
-
 nwsapi@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
   integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
 
-object-assign@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
 object-inspect@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
@@ -2879,24 +2687,11 @@ optionator@^0.8.1:
     type-check "~0.3.2"
     word-wrap "~1.2.3"
 
-os-homedir@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
-  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
-
-os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
+os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-osenv@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
-  integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
-  dependencies:
-    os-homedir "^1.0.0"
-    os-tmpdir "^1.0.0"
-
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
@@ -3419,11 +3214,6 @@ pretty-format@^23.6.0:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
-process-nextick-args@~2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
-  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
-
 progress@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
@@ -3529,7 +3319,7 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
+rc@^1.0.1, rc@^1.1.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
   integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
@@ -3539,19 +3329,6 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-readable-stream@^2.0.6:
-  version "2.3.7"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
-  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
 readable-stream@^3.1.1, readable-stream@^3.4.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
@@ -3651,13 +3428,6 @@ rgba-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
-rimraf@^2.7.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
-  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
-  dependencies:
-    glob "^7.1.3"
-
 rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -3762,12 +3532,12 @@ rxjs@^6.4.0:
   dependencies:
     tslib "^1.9.0"
 
-safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
+safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -3782,7 +3552,7 @@ safe-identifier@^0.4.1:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sax@^1.2.4, sax@~1.2.4:
+sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -3801,7 +3571,7 @@ semver-diff@^2.0.0:
   dependencies:
     semver "^5.0.3"
 
-semver@^5.0.3, semver@^5.1.0, semver@^5.5.0, semver@^5.7.1:
+semver@^5.0.3, semver@^5.1.0, semver@^5.5.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -3842,11 +3612,6 @@ serve-static@1.14.1:
     parseurl "~1.3.3"
     send "0.17.1"
 
-set-blocking@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
-  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
-
 setprototypeof@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
@@ -3929,16 +3694,7 @@ string-hash@^1.1.1:
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
   integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=
 
-string-width@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
-  integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
-  dependencies:
-    code-point-at "^1.0.0"
-    is-fullwidth-code-point "^1.0.0"
-    strip-ansi "^3.0.0"
-
-"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
+string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
   integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
@@ -3969,14 +3725,7 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
-
-strip-ansi@^3.0.0, strip-ansi@^3.0.1:
+strip-ansi@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
   integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
@@ -4113,19 +3862,6 @@ tar-stream@^2.1.4:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
-tar@^4.4.13:
-  version "4.4.13"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
-  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
-  dependencies:
-    chownr "^1.1.1"
-    fs-minipass "^1.2.5"
-    minipass "^2.8.6"
-    minizlib "^1.2.1"
-    mkdirp "^0.5.0"
-    safe-buffer "^5.1.2"
-    yallist "^3.0.3"
-
 term-size@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
@@ -4334,7 +4070,7 @@ url-parse-lax@^1.0.0:
   dependencies:
     prepend-http "^1.0.1"
 
-util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
@@ -4416,13 +4152,6 @@ which@^1.2.9:
   dependencies:
     isexe "^2.0.0"
 
-wide-align@^1.1.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
-  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
-  dependencies:
-    string-width "^1.0.2 || 2"
-
 widest-line@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-2.0.1.tgz#7438764730ec7ef4381ce4df82fb98a53142a3fc"
@@ -4484,11 +4213,6 @@ yallist@^2.1.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
   integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
 
-yallist@^3.0.0, yallist@^3.0.3:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
-  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
-
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"

From 6b01f2489b604d17182b5552604c53417daf5cb8 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 18 Jul 2021 14:08:03 +0800
Subject: [PATCH 401/524] upgrade rrweb-snapshot to 1.1.7

ignore prefetch and preload script links
close #52, #297, #597

Handle quoted strings in data url
---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 97da1916a0..32ce61d9f2 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,6 @@
     "@xstate/fsm": "^1.4.0",
     "fflate": "^0.4.4",
     "mitt": "^1.1.3",
-    "rrweb-snapshot": "^1.1.6"
+    "rrweb-snapshot": "^1.1.7"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 3b1588c5c6..30d9e62042 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3515,10 +3515,10 @@ rollup@^2.3.3:
   optionalDependencies:
     fsevents "~2.1.2"
 
-rrweb-snapshot@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.6.tgz#e598510e387b9b2c62ce0cfc586a37c89549b228"
-  integrity sha512-twvqV1WRuFwodO5UV0tzS4Q2w+ZYi5kwOx/uwbRkplfazcnbphDLFvy8x9IwMOZFhyRg1jDJjbnlC8wy4xq5bQ==
+rrweb-snapshot@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.7.tgz#92a3b47b1112a1b566c2fae2edb02fa48a6f6653"
+  integrity sha512-+f2kCCvIQ1hbEeCWnV7mPVPDEdWEExqwcYqMd/r1nfK52QE7qU52jefUOyTe85Vy67rZGqWnfK/B25e/OTSgYg==
 
 run-async@^2.2.0:
   version "2.4.1"

From c45fd2b20a0cb0d8a71f4547e0ff71411e39a688 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Mon, 19 Jul 2021 11:59:32 +0100
Subject: [PATCH 402/524] Add more concrete "node not found" warnings (#620)

* Show whether a node was not found because it was never there, or because some other mutation already removed it

* Be more careful applying mutations as replay-stopping things can go wrong, e.g. node removal parent belongs to a different FullSnapshot and has e.g. a text nodeType

* Don't warn when a modified node has been removed in the same mutation - or the parent node for a removed node has been already removed
---
 src/replay/index.ts | 46 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index 4ba93330d9..f8c91582d4 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -769,7 +769,11 @@ export class Replayer {
           d.attributes.forEach((m) => this.treeIndex.attribute(m));
           d.removes.forEach((m) => this.treeIndex.remove(m, this.mirror));
         }
-        this.applyMutation(d, isSync);
+        try {
+          this.applyMutation(d, isSync);
+        } catch (error) {
+          this.warn(`Exception in mutation ${error.message || error}`, d);
+        }
         break;
       }
       case IncrementalSource.Drag:
@@ -1056,6 +1060,10 @@ export class Replayer {
     d.removes.forEach((mutation) => {
       const target = this.mirror.getNode(mutation.id);
       if (!target) {
+        if (d.removes.find((r) => r.id === mutation.parentId)) {
+          // no need to warn, parent was already removed
+          return;
+        }
         return this.warnNodeNotFound(d, mutation.id);
       }
       let parent: INode | null | ShadowRoot = this.mirror.getNode(
@@ -1070,20 +1078,28 @@ export class Replayer {
       // target may be removed with its parents before
       this.mirror.removeNodeFromMap(target);
       if (parent) {
+        let realTarget = null;
         const realParent =
           '__sn' in parent ? this.fragmentParentMap.get(parent) : undefined;
         if (realParent && realParent.contains(target)) {
-          realParent.removeChild(target);
+          parent = realParent;
         } else if (this.fragmentParentMap.has(target)) {
           /**
            * the target itself is a fragment document and it's not in the dom
            * so we should remove the real target from its parent
            */
-          const realTarget = this.fragmentParentMap.get(target)!;
-          parent.removeChild(realTarget);
+          realTarget = this.fragmentParentMap.get(target)!;
           this.fragmentParentMap.delete(target);
-        } else {
+          target = realTarget;
+        }
+        try {
           parent.removeChild(target);
+        } catch (error) {
+          if (error instanceof DOMException) {
+            this.warn('parent could not remove child in mutation', parent, realParent, target, realTarget , d);
+          } else {
+            throw error;
+          }
         }
       }
     });
@@ -1290,6 +1306,10 @@ export class Replayer {
     d.texts.forEach((mutation) => {
       let target = this.mirror.getNode(mutation.id);
       if (!target) {
+        if (d.removes.find((r) => r.id === mutation.id)) {
+          // no need to warn, element was already removed
+          return;
+        }
         return this.warnNodeNotFound(d, mutation.id);
       }
       /**
@@ -1303,6 +1323,10 @@ export class Replayer {
     d.attributes.forEach((mutation) => {
       let target = this.mirror.getNode(mutation.id);
       if (!target) {
+        if (d.removes.find((r) => r.id === mutation.id)) {
+          // no need to warn, element was already removed
+          return;
+        }
         return this.warnNodeNotFound(d, mutation.id);
       }
       if (this.fragmentParentMap.has(target)) {
@@ -1584,7 +1608,11 @@ export class Replayer {
   }
 
   private warnNodeNotFound(d: incrementalData, id: number) {
-    this.warn(`Node with id '${id}' not found in`, d);
+    if (this.treeIndex.removeIdSet.has(id)) {
+      this.warn(`Node with id '${id}' was previously removed. `, d);
+    } else {
+      this.warn(`Node with id '${id}' not found. `, d);
+    }
   }
 
   private warnCanvasMutationFailed(
@@ -1602,7 +1630,11 @@ export class Replayer {
      * is microtask, so events fired on a removed DOM may emit
      * snapshots in the reverse order.
      */
-    this.debug(REPLAY_CONSOLE_PREFIX, `Node with id '${id}' not found in`, d);
+    if (this.treeIndex.removeIdSet.has(id)) {
+      this.debug(REPLAY_CONSOLE_PREFIX, `Node with id '${id}' was previously removed. `, d);
+    } else {
+      this.debug(REPLAY_CONSOLE_PREFIX, `Node with id '${id}' not found. `, d);
+    }
   }
 
   private warn(...args: Parameters<typeof console.warn>) {

From 2e60d42da5203ad63a4f3de9c4fd71c8ad0e9cd9 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 19 Jul 2021 22:21:28 +0800
Subject: [PATCH 403/524] fix typings

---
 src/replay/index.ts | 37 ++++++++++++++++++++++++++-----------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index f8c91582d4..a15e345113 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -1058,7 +1058,7 @@ export class Replayer {
 
   private applyMutation(d: mutationData, useVirtualParent: boolean) {
     d.removes.forEach((mutation) => {
-      const target = this.mirror.getNode(mutation.id);
+      let target = this.mirror.getNode(mutation.id);
       if (!target) {
         if (d.removes.find((r) => r.id === mutation.parentId)) {
           // no need to warn, parent was already removed
@@ -1096,7 +1096,14 @@ export class Replayer {
           parent.removeChild(target);
         } catch (error) {
           if (error instanceof DOMException) {
-            this.warn('parent could not remove child in mutation', parent, realParent, target, realTarget , d);
+            this.warn(
+              'parent could not remove child in mutation',
+              parent,
+              realParent,
+              target,
+              realTarget,
+              d,
+            );
           } else {
             throw error;
           }
@@ -1349,16 +1356,16 @@ export class Replayer {
               }
             }
           } else if (attributeName === 'style') {
-            let styleValues = (value as styleAttributeValue);
-            const targetEl = ((target as Node) as HTMLElement);
+            let styleValues = value as styleAttributeValue;
+            const targetEl = (target as Node) as HTMLElement;
             for (var s in styleValues) {
               if (styleValues[s] === false) {
                 targetEl.style.removeProperty(s);
               } else if (styleValues[s] instanceof Array) {
-                const svp = (styleValues[s] as styleValueWithPriority);
+                const svp = styleValues[s] as styleValueWithPriority;
                 targetEl.style.setProperty(s, svp[0], svp[1]);
               } else {
-                const svs = (styleValues[s] as string)
+                const svs = styleValues[s] as string;
                 targetEl.style.setProperty(s, svs);
               }
             }
@@ -1598,9 +1605,13 @@ export class Replayer {
 
   private restoreNodeSheet(node: INode) {
     const storedRules = this.virtualStyleRulesMap.get(node);
-    if (node.nodeName !== 'STYLE') return;
+    if (node.nodeName !== 'STYLE') {
+      return;
+    }
 
-    if (!storedRules) return;
+    if (!storedRules) {
+      return;
+    }
 
     const styleNode = (node as unknown) as HTMLStyleElement;
 
@@ -1608,7 +1619,7 @@ export class Replayer {
   }
 
   private warnNodeNotFound(d: incrementalData, id: number) {
-    if (this.treeIndex.removeIdSet.has(id)) {
+    if (this.treeIndex['removeIdSet'].has(id)) {
       this.warn(`Node with id '${id}' was previously removed. `, d);
     } else {
       this.warn(`Node with id '${id}' not found. `, d);
@@ -1630,8 +1641,12 @@ export class Replayer {
      * is microtask, so events fired on a removed DOM may emit
      * snapshots in the reverse order.
      */
-    if (this.treeIndex.removeIdSet.has(id)) {
-      this.debug(REPLAY_CONSOLE_PREFIX, `Node with id '${id}' was previously removed. `, d);
+    if (this.treeIndex['removeIdSet'].has(id)) {
+      this.debug(
+        REPLAY_CONSOLE_PREFIX,
+        `Node with id '${id}' was previously removed. `,
+        d,
+      );
     } else {
       this.debug(REPLAY_CONSOLE_PREFIX, `Node with id '${id}' not found. `, d);
     }

From ca8d9701fa945d26d251b2b2157d88e82ea85e57 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 19 Jul 2021 22:29:20 +0800
Subject: [PATCH 404/524] Release 1.0.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 32ce61d9f2..9b4cc86195 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",

From 901c272c11f743c0fdc2b00ee37e0d1658bb175c Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Mon, 19 Jul 2021 16:40:43 +0200
Subject: [PATCH 405/524] add idRemoved to TreeIndex (#640)

---
 src/replay/index.ts | 4 ++--
 src/utils.ts        | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/replay/index.ts b/src/replay/index.ts
index a15e345113..5707feb2c4 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -1619,7 +1619,7 @@ export class Replayer {
   }
 
   private warnNodeNotFound(d: incrementalData, id: number) {
-    if (this.treeIndex['removeIdSet'].has(id)) {
+    if (this.treeIndex.idRemoved(id)) {
       this.warn(`Node with id '${id}' was previously removed. `, d);
     } else {
       this.warn(`Node with id '${id}' not found. `, d);
@@ -1641,7 +1641,7 @@ export class Replayer {
      * is microtask, so events fired on a removed DOM may emit
      * snapshots in the reverse order.
      */
-    if (this.treeIndex['removeIdSet'].has(id)) {
+    if (this.treeIndex.idRemoved(id)) {
       this.debug(
         REPLAY_CONSOLE_PREFIX,
         `Node with id '${id}' was previously removed. `,
diff --git a/src/utils.ts b/src/utils.ts
index 88f4f7dc08..fcad16e8af 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -534,6 +534,10 @@ export class TreeIndex {
     this.scrollMap = new Map();
     this.inputMap = new Map();
   }
+
+  public idRemoved(id: number): boolean {
+    return this.removeIdSet.has(id);
+  }
 }
 
 type ResolveTree = {

From 66e90f51f7740dae13135a366866f84a16196bce Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 21 Jul 2021 21:52:43 +0800
Subject: [PATCH 406/524] Release 0.7.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d0c7e162ba..d47c45f09b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",

From bc319d510c60dcf1f2b700c2ea7fcd3157a0a0f7 Mon Sep 17 00:00:00 2001
From: Mark-fenng <f18846188605@gmail.com>
Date: Thu, 22 Jul 2021 17:54:51 +0800
Subject: [PATCH 407/524] moved rrweb-snapshot into packages/rrweb-snapshot

---
 .release-it.json => packages/rrweb-snapshot/.release-it.json      | 0
 LICENSE => packages/rrweb-snapshot/LICENSE                        | 0
 README.md => packages/rrweb-snapshot/README.md                    | 0
 package.json => packages/rrweb-snapshot/package.json              | 0
 rollup.config.js => packages/rrweb-snapshot/rollup.config.js      | 0
 {src => packages/rrweb-snapshot/src}/css.ts                       | 0
 {src => packages/rrweb-snapshot/src}/index.ts                     | 0
 {src => packages/rrweb-snapshot/src}/rebuild.ts                   | 0
 {src => packages/rrweb-snapshot/src}/snapshot.ts                  | 0
 {src => packages/rrweb-snapshot/src}/types.ts                     | 0
 {src => packages/rrweb-snapshot/src}/utils.ts                     | 0
 test.d.ts => packages/rrweb-snapshot/test.d.ts                    | 0
 .../rrweb-snapshot/test}/__snapshots__/integration.ts.snap        | 0
 {test => packages/rrweb-snapshot/test}/css.test.ts                | 0
 {test => packages/rrweb-snapshot/test}/css/benchmark.css          | 0
 {test => packages/rrweb-snapshot/test}/css/style-with-import.css  | 0
 {test => packages/rrweb-snapshot/test}/css/style.css              | 0
 {test => packages/rrweb-snapshot/test}/html/about-mozilla.html    | 0
 {test => packages/rrweb-snapshot/test}/html/basic.html            | 0
 {test => packages/rrweb-snapshot/test}/html/block-element.html    | 0
 {test => packages/rrweb-snapshot/test}/html/cors-style-sheet.html | 0
 .../rrweb-snapshot/test}/html/dynamic-stylesheet.html             | 0
 {test => packages/rrweb-snapshot/test}/html/form-fields.html      | 0
 {test => packages/rrweb-snapshot/test}/html/hover.html            | 0
 {test => packages/rrweb-snapshot/test}/html/iframe-inner.html     | 0
 {test => packages/rrweb-snapshot/test}/html/iframe.html           | 0
 .../rrweb-snapshot/test}/html/invalid-attribute.html              | 0
 {test => packages/rrweb-snapshot/test}/html/invalid-doctype.html  | 0
 {test => packages/rrweb-snapshot/test}/html/invalid-tagname.html  | 0
 {test => packages/rrweb-snapshot/test}/html/mask-text.html        | 0
 {test => packages/rrweb-snapshot/test}/html/picture.html          | 0
 {test => packages/rrweb-snapshot/test}/html/preload.html          | 0
 {test => packages/rrweb-snapshot/test}/html/shadow-dom.html       | 0
 {test => packages/rrweb-snapshot/test}/html/video.html            | 0
 .../rrweb-snapshot/test}/html/with-relative-res.html              | 0
 {test => packages/rrweb-snapshot/test}/html/with-script.html      | 0
 .../rrweb-snapshot/test}/html/with-style-sheet-with-import.html   | 0
 {test => packages/rrweb-snapshot/test}/html/with-style-sheet.html | 0
 {test => packages/rrweb-snapshot/test}/iframe-html/frame1.html    | 0
 {test => packages/rrweb-snapshot/test}/iframe-html/frame2.html    | 0
 {test => packages/rrweb-snapshot/test}/iframe-html/main.html      | 0
 {test => packages/rrweb-snapshot/test}/integration.ts             | 0
 {test => packages/rrweb-snapshot/test}/js/a.js                    | 0
 {test => packages/rrweb-snapshot/test}/rebuild.test.ts            | 0
 {test => packages/rrweb-snapshot/test}/snapshot.test.ts           | 0
 tsconfig.json => packages/rrweb-snapshot/tsconfig.json            | 0
 tslint.json => packages/rrweb-snapshot/tslint.json                | 0
 {typings => packages/rrweb-snapshot/typings}/css.d.ts             | 0
 {typings => packages/rrweb-snapshot/typings}/index.d.ts           | 0
 {typings => packages/rrweb-snapshot/typings}/rebuild.d.ts         | 0
 {typings => packages/rrweb-snapshot/typings}/snapshot.d.ts        | 0
 {typings => packages/rrweb-snapshot/typings}/types.d.ts           | 0
 {typings => packages/rrweb-snapshot/typings}/utils.d.ts           | 0
 53 files changed, 0 insertions(+), 0 deletions(-)
 rename .release-it.json => packages/rrweb-snapshot/.release-it.json (100%)
 rename LICENSE => packages/rrweb-snapshot/LICENSE (100%)
 rename README.md => packages/rrweb-snapshot/README.md (100%)
 rename package.json => packages/rrweb-snapshot/package.json (100%)
 rename rollup.config.js => packages/rrweb-snapshot/rollup.config.js (100%)
 rename {src => packages/rrweb-snapshot/src}/css.ts (100%)
 rename {src => packages/rrweb-snapshot/src}/index.ts (100%)
 rename {src => packages/rrweb-snapshot/src}/rebuild.ts (100%)
 rename {src => packages/rrweb-snapshot/src}/snapshot.ts (100%)
 rename {src => packages/rrweb-snapshot/src}/types.ts (100%)
 rename {src => packages/rrweb-snapshot/src}/utils.ts (100%)
 rename test.d.ts => packages/rrweb-snapshot/test.d.ts (100%)
 rename {test => packages/rrweb-snapshot/test}/__snapshots__/integration.ts.snap (100%)
 rename {test => packages/rrweb-snapshot/test}/css.test.ts (100%)
 rename {test => packages/rrweb-snapshot/test}/css/benchmark.css (100%)
 rename {test => packages/rrweb-snapshot/test}/css/style-with-import.css (100%)
 rename {test => packages/rrweb-snapshot/test}/css/style.css (100%)
 rename {test => packages/rrweb-snapshot/test}/html/about-mozilla.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/basic.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/block-element.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/cors-style-sheet.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/dynamic-stylesheet.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/form-fields.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/hover.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/iframe-inner.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/iframe.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/invalid-attribute.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/invalid-doctype.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/invalid-tagname.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/mask-text.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/picture.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/preload.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/shadow-dom.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/video.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/with-relative-res.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/with-script.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/with-style-sheet-with-import.html (100%)
 rename {test => packages/rrweb-snapshot/test}/html/with-style-sheet.html (100%)
 rename {test => packages/rrweb-snapshot/test}/iframe-html/frame1.html (100%)
 rename {test => packages/rrweb-snapshot/test}/iframe-html/frame2.html (100%)
 rename {test => packages/rrweb-snapshot/test}/iframe-html/main.html (100%)
 rename {test => packages/rrweb-snapshot/test}/integration.ts (100%)
 rename {test => packages/rrweb-snapshot/test}/js/a.js (100%)
 rename {test => packages/rrweb-snapshot/test}/rebuild.test.ts (100%)
 rename {test => packages/rrweb-snapshot/test}/snapshot.test.ts (100%)
 rename tsconfig.json => packages/rrweb-snapshot/tsconfig.json (100%)
 rename tslint.json => packages/rrweb-snapshot/tslint.json (100%)
 rename {typings => packages/rrweb-snapshot/typings}/css.d.ts (100%)
 rename {typings => packages/rrweb-snapshot/typings}/index.d.ts (100%)
 rename {typings => packages/rrweb-snapshot/typings}/rebuild.d.ts (100%)
 rename {typings => packages/rrweb-snapshot/typings}/snapshot.d.ts (100%)
 rename {typings => packages/rrweb-snapshot/typings}/types.d.ts (100%)
 rename {typings => packages/rrweb-snapshot/typings}/utils.d.ts (100%)

diff --git a/.release-it.json b/packages/rrweb-snapshot/.release-it.json
similarity index 100%
rename from .release-it.json
rename to packages/rrweb-snapshot/.release-it.json
diff --git a/LICENSE b/packages/rrweb-snapshot/LICENSE
similarity index 100%
rename from LICENSE
rename to packages/rrweb-snapshot/LICENSE
diff --git a/README.md b/packages/rrweb-snapshot/README.md
similarity index 100%
rename from README.md
rename to packages/rrweb-snapshot/README.md
diff --git a/package.json b/packages/rrweb-snapshot/package.json
similarity index 100%
rename from package.json
rename to packages/rrweb-snapshot/package.json
diff --git a/rollup.config.js b/packages/rrweb-snapshot/rollup.config.js
similarity index 100%
rename from rollup.config.js
rename to packages/rrweb-snapshot/rollup.config.js
diff --git a/src/css.ts b/packages/rrweb-snapshot/src/css.ts
similarity index 100%
rename from src/css.ts
rename to packages/rrweb-snapshot/src/css.ts
diff --git a/src/index.ts b/packages/rrweb-snapshot/src/index.ts
similarity index 100%
rename from src/index.ts
rename to packages/rrweb-snapshot/src/index.ts
diff --git a/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
similarity index 100%
rename from src/rebuild.ts
rename to packages/rrweb-snapshot/src/rebuild.ts
diff --git a/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
similarity index 100%
rename from src/snapshot.ts
rename to packages/rrweb-snapshot/src/snapshot.ts
diff --git a/src/types.ts b/packages/rrweb-snapshot/src/types.ts
similarity index 100%
rename from src/types.ts
rename to packages/rrweb-snapshot/src/types.ts
diff --git a/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts
similarity index 100%
rename from src/utils.ts
rename to packages/rrweb-snapshot/src/utils.ts
diff --git a/test.d.ts b/packages/rrweb-snapshot/test.d.ts
similarity index 100%
rename from test.d.ts
rename to packages/rrweb-snapshot/test.d.ts
diff --git a/test/__snapshots__/integration.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.ts.snap
similarity index 100%
rename from test/__snapshots__/integration.ts.snap
rename to packages/rrweb-snapshot/test/__snapshots__/integration.ts.snap
diff --git a/test/css.test.ts b/packages/rrweb-snapshot/test/css.test.ts
similarity index 100%
rename from test/css.test.ts
rename to packages/rrweb-snapshot/test/css.test.ts
diff --git a/test/css/benchmark.css b/packages/rrweb-snapshot/test/css/benchmark.css
similarity index 100%
rename from test/css/benchmark.css
rename to packages/rrweb-snapshot/test/css/benchmark.css
diff --git a/test/css/style-with-import.css b/packages/rrweb-snapshot/test/css/style-with-import.css
similarity index 100%
rename from test/css/style-with-import.css
rename to packages/rrweb-snapshot/test/css/style-with-import.css
diff --git a/test/css/style.css b/packages/rrweb-snapshot/test/css/style.css
similarity index 100%
rename from test/css/style.css
rename to packages/rrweb-snapshot/test/css/style.css
diff --git a/test/html/about-mozilla.html b/packages/rrweb-snapshot/test/html/about-mozilla.html
similarity index 100%
rename from test/html/about-mozilla.html
rename to packages/rrweb-snapshot/test/html/about-mozilla.html
diff --git a/test/html/basic.html b/packages/rrweb-snapshot/test/html/basic.html
similarity index 100%
rename from test/html/basic.html
rename to packages/rrweb-snapshot/test/html/basic.html
diff --git a/test/html/block-element.html b/packages/rrweb-snapshot/test/html/block-element.html
similarity index 100%
rename from test/html/block-element.html
rename to packages/rrweb-snapshot/test/html/block-element.html
diff --git a/test/html/cors-style-sheet.html b/packages/rrweb-snapshot/test/html/cors-style-sheet.html
similarity index 100%
rename from test/html/cors-style-sheet.html
rename to packages/rrweb-snapshot/test/html/cors-style-sheet.html
diff --git a/test/html/dynamic-stylesheet.html b/packages/rrweb-snapshot/test/html/dynamic-stylesheet.html
similarity index 100%
rename from test/html/dynamic-stylesheet.html
rename to packages/rrweb-snapshot/test/html/dynamic-stylesheet.html
diff --git a/test/html/form-fields.html b/packages/rrweb-snapshot/test/html/form-fields.html
similarity index 100%
rename from test/html/form-fields.html
rename to packages/rrweb-snapshot/test/html/form-fields.html
diff --git a/test/html/hover.html b/packages/rrweb-snapshot/test/html/hover.html
similarity index 100%
rename from test/html/hover.html
rename to packages/rrweb-snapshot/test/html/hover.html
diff --git a/test/html/iframe-inner.html b/packages/rrweb-snapshot/test/html/iframe-inner.html
similarity index 100%
rename from test/html/iframe-inner.html
rename to packages/rrweb-snapshot/test/html/iframe-inner.html
diff --git a/test/html/iframe.html b/packages/rrweb-snapshot/test/html/iframe.html
similarity index 100%
rename from test/html/iframe.html
rename to packages/rrweb-snapshot/test/html/iframe.html
diff --git a/test/html/invalid-attribute.html b/packages/rrweb-snapshot/test/html/invalid-attribute.html
similarity index 100%
rename from test/html/invalid-attribute.html
rename to packages/rrweb-snapshot/test/html/invalid-attribute.html
diff --git a/test/html/invalid-doctype.html b/packages/rrweb-snapshot/test/html/invalid-doctype.html
similarity index 100%
rename from test/html/invalid-doctype.html
rename to packages/rrweb-snapshot/test/html/invalid-doctype.html
diff --git a/test/html/invalid-tagname.html b/packages/rrweb-snapshot/test/html/invalid-tagname.html
similarity index 100%
rename from test/html/invalid-tagname.html
rename to packages/rrweb-snapshot/test/html/invalid-tagname.html
diff --git a/test/html/mask-text.html b/packages/rrweb-snapshot/test/html/mask-text.html
similarity index 100%
rename from test/html/mask-text.html
rename to packages/rrweb-snapshot/test/html/mask-text.html
diff --git a/test/html/picture.html b/packages/rrweb-snapshot/test/html/picture.html
similarity index 100%
rename from test/html/picture.html
rename to packages/rrweb-snapshot/test/html/picture.html
diff --git a/test/html/preload.html b/packages/rrweb-snapshot/test/html/preload.html
similarity index 100%
rename from test/html/preload.html
rename to packages/rrweb-snapshot/test/html/preload.html
diff --git a/test/html/shadow-dom.html b/packages/rrweb-snapshot/test/html/shadow-dom.html
similarity index 100%
rename from test/html/shadow-dom.html
rename to packages/rrweb-snapshot/test/html/shadow-dom.html
diff --git a/test/html/video.html b/packages/rrweb-snapshot/test/html/video.html
similarity index 100%
rename from test/html/video.html
rename to packages/rrweb-snapshot/test/html/video.html
diff --git a/test/html/with-relative-res.html b/packages/rrweb-snapshot/test/html/with-relative-res.html
similarity index 100%
rename from test/html/with-relative-res.html
rename to packages/rrweb-snapshot/test/html/with-relative-res.html
diff --git a/test/html/with-script.html b/packages/rrweb-snapshot/test/html/with-script.html
similarity index 100%
rename from test/html/with-script.html
rename to packages/rrweb-snapshot/test/html/with-script.html
diff --git a/test/html/with-style-sheet-with-import.html b/packages/rrweb-snapshot/test/html/with-style-sheet-with-import.html
similarity index 100%
rename from test/html/with-style-sheet-with-import.html
rename to packages/rrweb-snapshot/test/html/with-style-sheet-with-import.html
diff --git a/test/html/with-style-sheet.html b/packages/rrweb-snapshot/test/html/with-style-sheet.html
similarity index 100%
rename from test/html/with-style-sheet.html
rename to packages/rrweb-snapshot/test/html/with-style-sheet.html
diff --git a/test/iframe-html/frame1.html b/packages/rrweb-snapshot/test/iframe-html/frame1.html
similarity index 100%
rename from test/iframe-html/frame1.html
rename to packages/rrweb-snapshot/test/iframe-html/frame1.html
diff --git a/test/iframe-html/frame2.html b/packages/rrweb-snapshot/test/iframe-html/frame2.html
similarity index 100%
rename from test/iframe-html/frame2.html
rename to packages/rrweb-snapshot/test/iframe-html/frame2.html
diff --git a/test/iframe-html/main.html b/packages/rrweb-snapshot/test/iframe-html/main.html
similarity index 100%
rename from test/iframe-html/main.html
rename to packages/rrweb-snapshot/test/iframe-html/main.html
diff --git a/test/integration.ts b/packages/rrweb-snapshot/test/integration.ts
similarity index 100%
rename from test/integration.ts
rename to packages/rrweb-snapshot/test/integration.ts
diff --git a/test/js/a.js b/packages/rrweb-snapshot/test/js/a.js
similarity index 100%
rename from test/js/a.js
rename to packages/rrweb-snapshot/test/js/a.js
diff --git a/test/rebuild.test.ts b/packages/rrweb-snapshot/test/rebuild.test.ts
similarity index 100%
rename from test/rebuild.test.ts
rename to packages/rrweb-snapshot/test/rebuild.test.ts
diff --git a/test/snapshot.test.ts b/packages/rrweb-snapshot/test/snapshot.test.ts
similarity index 100%
rename from test/snapshot.test.ts
rename to packages/rrweb-snapshot/test/snapshot.test.ts
diff --git a/tsconfig.json b/packages/rrweb-snapshot/tsconfig.json
similarity index 100%
rename from tsconfig.json
rename to packages/rrweb-snapshot/tsconfig.json
diff --git a/tslint.json b/packages/rrweb-snapshot/tslint.json
similarity index 100%
rename from tslint.json
rename to packages/rrweb-snapshot/tslint.json
diff --git a/typings/css.d.ts b/packages/rrweb-snapshot/typings/css.d.ts
similarity index 100%
rename from typings/css.d.ts
rename to packages/rrweb-snapshot/typings/css.d.ts
diff --git a/typings/index.d.ts b/packages/rrweb-snapshot/typings/index.d.ts
similarity index 100%
rename from typings/index.d.ts
rename to packages/rrweb-snapshot/typings/index.d.ts
diff --git a/typings/rebuild.d.ts b/packages/rrweb-snapshot/typings/rebuild.d.ts
similarity index 100%
rename from typings/rebuild.d.ts
rename to packages/rrweb-snapshot/typings/rebuild.d.ts
diff --git a/typings/snapshot.d.ts b/packages/rrweb-snapshot/typings/snapshot.d.ts
similarity index 100%
rename from typings/snapshot.d.ts
rename to packages/rrweb-snapshot/typings/snapshot.d.ts
diff --git a/typings/types.d.ts b/packages/rrweb-snapshot/typings/types.d.ts
similarity index 100%
rename from typings/types.d.ts
rename to packages/rrweb-snapshot/typings/types.d.ts
diff --git a/typings/utils.d.ts b/packages/rrweb-snapshot/typings/utils.d.ts
similarity index 100%
rename from typings/utils.d.ts
rename to packages/rrweb-snapshot/typings/utils.d.ts

From 407c09ed373fa022426279531e2a972e0e944072 Mon Sep 17 00:00:00 2001
From: Mark-fenng <f18846188605@gmail.com>
Date: Thu, 22 Jul 2021 18:09:32 +0800
Subject: [PATCH 408/524] moved rrweb-player into packages/rrweb-player

---
 .../rrweb-player/.eslintrc.json               |    0
 .../rrweb-player/.release-it.json             |    0
 README.md => packages/rrweb-player/README.md  |    0
 .../rrweb-player/package.json                 |    0
 .../rrweb-player/public}/events.js            |    0
 .../rrweb-player/public}/global.css           |    0
 .../rrweb-player/public}/index.html           |    0
 .../rrweb-player/rollup.config.js             |    0
 .../rrweb-player/src}/Controller.svelte       |    0
 .../rrweb-player/src}/Player.svelte           |    0
 .../src}/components/Switch.svelte             |    0
 {src => packages/rrweb-player/src}/main.ts    |    0
 {src => packages/rrweb-player/src}/utils.ts   |    0
 .../rrweb-player/tsconfig.json                |    0
 .../rrweb-player/typings}/index.d.ts          |    0
 yarn.lock                                     | 1524 -----------------
 16 files changed, 1524 deletions(-)
 rename .eslintrc.json => packages/rrweb-player/.eslintrc.json (100%)
 rename .release-it.json => packages/rrweb-player/.release-it.json (100%)
 rename README.md => packages/rrweb-player/README.md (100%)
 rename package.json => packages/rrweb-player/package.json (100%)
 rename {public => packages/rrweb-player/public}/events.js (100%)
 rename {public => packages/rrweb-player/public}/global.css (100%)
 rename {public => packages/rrweb-player/public}/index.html (100%)
 rename rollup.config.js => packages/rrweb-player/rollup.config.js (100%)
 rename {src => packages/rrweb-player/src}/Controller.svelte (100%)
 rename {src => packages/rrweb-player/src}/Player.svelte (100%)
 rename {src => packages/rrweb-player/src}/components/Switch.svelte (100%)
 rename {src => packages/rrweb-player/src}/main.ts (100%)
 rename {src => packages/rrweb-player/src}/utils.ts (100%)
 rename tsconfig.json => packages/rrweb-player/tsconfig.json (100%)
 rename {typings => packages/rrweb-player/typings}/index.d.ts (100%)
 delete mode 100644 yarn.lock

diff --git a/.eslintrc.json b/packages/rrweb-player/.eslintrc.json
similarity index 100%
rename from .eslintrc.json
rename to packages/rrweb-player/.eslintrc.json
diff --git a/.release-it.json b/packages/rrweb-player/.release-it.json
similarity index 100%
rename from .release-it.json
rename to packages/rrweb-player/.release-it.json
diff --git a/README.md b/packages/rrweb-player/README.md
similarity index 100%
rename from README.md
rename to packages/rrweb-player/README.md
diff --git a/package.json b/packages/rrweb-player/package.json
similarity index 100%
rename from package.json
rename to packages/rrweb-player/package.json
diff --git a/public/events.js b/packages/rrweb-player/public/events.js
similarity index 100%
rename from public/events.js
rename to packages/rrweb-player/public/events.js
diff --git a/public/global.css b/packages/rrweb-player/public/global.css
similarity index 100%
rename from public/global.css
rename to packages/rrweb-player/public/global.css
diff --git a/public/index.html b/packages/rrweb-player/public/index.html
similarity index 100%
rename from public/index.html
rename to packages/rrweb-player/public/index.html
diff --git a/rollup.config.js b/packages/rrweb-player/rollup.config.js
similarity index 100%
rename from rollup.config.js
rename to packages/rrweb-player/rollup.config.js
diff --git a/src/Controller.svelte b/packages/rrweb-player/src/Controller.svelte
similarity index 100%
rename from src/Controller.svelte
rename to packages/rrweb-player/src/Controller.svelte
diff --git a/src/Player.svelte b/packages/rrweb-player/src/Player.svelte
similarity index 100%
rename from src/Player.svelte
rename to packages/rrweb-player/src/Player.svelte
diff --git a/src/components/Switch.svelte b/packages/rrweb-player/src/components/Switch.svelte
similarity index 100%
rename from src/components/Switch.svelte
rename to packages/rrweb-player/src/components/Switch.svelte
diff --git a/src/main.ts b/packages/rrweb-player/src/main.ts
similarity index 100%
rename from src/main.ts
rename to packages/rrweb-player/src/main.ts
diff --git a/src/utils.ts b/packages/rrweb-player/src/utils.ts
similarity index 100%
rename from src/utils.ts
rename to packages/rrweb-player/src/utils.ts
diff --git a/tsconfig.json b/packages/rrweb-player/tsconfig.json
similarity index 100%
rename from tsconfig.json
rename to packages/rrweb-player/tsconfig.json
diff --git a/typings/index.d.ts b/packages/rrweb-player/typings/index.d.ts
similarity index 100%
rename from typings/index.d.ts
rename to packages/rrweb-player/typings/index.d.ts
diff --git a/yarn.lock b/yarn.lock
deleted file mode 100644
index 414c707354..0000000000
--- a/yarn.lock
+++ /dev/null
@@ -1,1524 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@babel/code-frame@^7.0.0":
-  version "7.10.4"
-  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
-  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
-  dependencies:
-    "@babel/highlight" "^7.10.4"
-
-"@babel/code-frame@^7.10.4":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658"
-  integrity sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==
-  dependencies:
-    "@babel/highlight" "^7.12.13"
-
-"@babel/helper-validator-identifier@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
-  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
-
-"@babel/helper-validator-identifier@^7.12.11":
-  version "7.12.11"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
-  integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
-
-"@babel/highlight@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
-  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.10.4"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
-
-"@babel/highlight@^7.12.13":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.13.10.tgz#a8b2a66148f5b27d666b15d81774347a731d52d1"
-  integrity sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.12.11"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
-
-"@polka/url@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.npmjs.org/@polka/url/-/url-0.5.0.tgz#b21510597fd601e5d7c95008b76bf0d254ebfd31"
-  integrity sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==
-
-"@rollup/plugin-commonjs@^11.0.0":
-  version "11.1.0"
-  resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.1.0.tgz#60636c7a722f54b41e419e1709df05c7234557ef"
-  integrity sha512-Ycr12N3ZPN96Fw2STurD21jMqzKwL9QuFhms3SD7KKRK7oaXUsBU9Zt0jL/rOPHiPYisI21/rXGO3jr9BnLHUA==
-  dependencies:
-    "@rollup/pluginutils" "^3.0.8"
-    commondir "^1.0.1"
-    estree-walker "^1.0.1"
-    glob "^7.1.2"
-    is-reference "^1.1.2"
-    magic-string "^0.25.2"
-    resolve "^1.11.0"
-
-"@rollup/plugin-node-resolve@^7.0.0":
-  version "7.1.3"
-  resolved "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
-  integrity sha512-RxtSL3XmdTAE2byxekYLnx+98kEUOrPHF/KRVjLH+DEIHy6kjIw7YINQzn+NXiH/NTrQLAwYs0GWB+csWygA9Q==
-  dependencies:
-    "@rollup/pluginutils" "^3.0.8"
-    "@types/resolve" "0.0.8"
-    builtin-modules "^3.1.0"
-    is-module "^1.0.0"
-    resolve "^1.14.2"
-
-"@rollup/plugin-typescript@^4.0.0":
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-4.1.2.tgz#6f910430276ae3e53a47a12ad65820627e7b6ad9"
-  integrity sha512-+7UlGat/99e2JbmGNnIauxwEhYLwrL7adO/tSJxUN57xrrS3Ps+ZzYpLCDGPZJ57j+ZJTZLLN89KXW9JMEB+jg==
-  dependencies:
-    "@rollup/pluginutils" "^3.0.1"
-    resolve "^1.14.1"
-
-"@rollup/pluginutils@4":
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.0.tgz#0dcc61c780e39257554feb7f77207dceca13c838"
-  integrity sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ==
-  dependencies:
-    estree-walker "^2.0.1"
-    picomatch "^2.2.2"
-
-"@rollup/pluginutils@^3.0.1", "@rollup/pluginutils@^3.0.8":
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
-  integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
-  dependencies:
-    "@types/estree" "0.0.39"
-    estree-walker "^1.0.1"
-    picomatch "^2.2.2"
-
-"@tsconfig/svelte@^1.0.0":
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-1.0.3.tgz#7e29c4fd771af94faa3e5dde4b717a1ad8625583"
-  integrity sha512-rk+BuV7fNAE33bywtzgNCbPSVEITOeR9zFPeHHJaD9lTcmjZQQRe5fOGJtsdyG3JJKoAZ4JSYVbll4CvWhC3sA==
-
-"@types/color-name@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
-  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
-
-"@types/css-font-loading-module@0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@types/css-font-loading-module/-/css-font-loading-module-0.0.4.tgz#94a835e27d1af444c65cba88523533c174463d64"
-  integrity sha512-ENdXf7MW4m9HeDojB2Ukbi7lYMIuQNBHVf98dbzaiG4EEJREBd6oleVAjrLRCrp7dm6CK1mmdmU9tcgF61acbw==
-
-"@types/eslint-visitor-keys@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
-  integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
-
-"@types/estree@*":
-  version "0.0.47"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.47.tgz#d7a51db20f0650efec24cd04994f523d93172ed4"
-  integrity sha512-c5ciR06jK8u9BstrmJyO97m+klJrrhCf9u3rLu3DEAJBirxRqSCvDQoYKmxuYwQI5SZChAWu+tq9oVlGRuzPAg==
-
-"@types/estree@0.0.39":
-  version "0.0.39"
-  resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
-  integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
-
-"@types/json-schema@^7.0.3":
-  version "7.0.5"
-  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
-  integrity sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==
-
-"@types/node@*":
-  version "14.14.41"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.41.tgz#d0b939d94c1d7bd53d04824af45f1139b8c45615"
-  integrity sha512-dueRKfaJL4RTtSa7bWeTK1M+VH+Gns73oCgzvYfHZywRCoPSd8EkXBL0mZ9unPTveBn+D9phZBaxuzpwjWkW0g==
-
-"@types/pug@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@types/pug/-/pug-2.0.4.tgz#8772fcd0418e3cd2cc171555d73007415051f4b2"
-  integrity sha1-h3L80EGOPNLMFxVV1zAHQVBR9LI=
-
-"@types/resolve@0.0.8":
-  version "0.0.8"
-  resolved "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
-  integrity sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==
-  dependencies:
-    "@types/node" "*"
-
-"@types/sass@^1.16.0":
-  version "1.16.0"
-  resolved "https://registry.yarnpkg.com/@types/sass/-/sass-1.16.0.tgz#b41ac1c17fa68ffb57d43e2360486ef526b3d57d"
-  integrity sha512-2XZovu4NwcqmtZtsBR5XYLw18T8cBCnU2USFHTnYLLHz9fkhnoEMoDsqShJIOFsFhn5aJHjweiUUdTrDGujegA==
-  dependencies:
-    "@types/node" "*"
-
-"@typescript-eslint/eslint-plugin@^3.7.0":
-  version "3.7.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.7.0.tgz#0f91aa3c83d019591719e597fbdb73a59595a263"
-  integrity sha512-4OEcPON3QIx0ntsuiuFP/TkldmBGXf0uKxPQlGtS/W2F3ndYm8Vgdpj/woPJkzUc65gd3iR+qi3K8SDQP/obFg==
-  dependencies:
-    "@typescript-eslint/experimental-utils" "3.7.0"
-    debug "^4.1.1"
-    functional-red-black-tree "^1.0.1"
-    regexpp "^3.0.0"
-    semver "^7.3.2"
-    tsutils "^3.17.1"
-
-"@typescript-eslint/experimental-utils@3.7.0":
-  version "3.7.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.7.0.tgz#0ee21f6c48b2b30c63211da23827725078d5169a"
-  integrity sha512-xpfXXAfZqhhqs5RPQBfAFrWDHoNxD5+sVB5A46TF58Bq1hRfVROrWHcQHHUM9aCBdy9+cwATcvCbRg8aIRbaHQ==
-  dependencies:
-    "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/types" "3.7.0"
-    "@typescript-eslint/typescript-estree" "3.7.0"
-    eslint-scope "^5.0.0"
-    eslint-utils "^2.0.0"
-
-"@typescript-eslint/parser@^3.7.0":
-  version "3.7.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.7.0.tgz#3e9cd9df9ea644536feb6e5acdb8279ecff96ce9"
-  integrity sha512-2LZauVUt7jAWkcIW7djUc3kyW+fSarNEuM3RF2JdLHR9BfX/nDEnyA4/uWz0wseoWVZbDXDF7iF9Jc342flNqQ==
-  dependencies:
-    "@types/eslint-visitor-keys" "^1.0.0"
-    "@typescript-eslint/experimental-utils" "3.7.0"
-    "@typescript-eslint/types" "3.7.0"
-    "@typescript-eslint/typescript-estree" "3.7.0"
-    eslint-visitor-keys "^1.1.0"
-
-"@typescript-eslint/types@3.7.0":
-  version "3.7.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-3.7.0.tgz#09897fab0cb95479c01166b10b2c03c224821077"
-  integrity sha512-reCaK+hyKkKF+itoylAnLzFeNYAEktB0XVfSQvf0gcVgpz1l49Lt6Vo9x4MVCCxiDydA0iLAjTF/ODH0pbfnpg==
-
-"@typescript-eslint/typescript-estree@3.7.0":
-  version "3.7.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.7.0.tgz#66872e6da120caa4b64e6b4ca5c8702afc74738d"
-  integrity sha512-xr5oobkYRebejlACGr1TJ0Z/r0a2/HUf0SXqPvlgUMwiMqOCu/J+/Dr9U3T0IxpE5oLFSkqMx1FE/dKaZ8KsOQ==
-  dependencies:
-    "@typescript-eslint/types" "3.7.0"
-    "@typescript-eslint/visitor-keys" "3.7.0"
-    debug "^4.1.1"
-    glob "^7.1.6"
-    is-glob "^4.0.1"
-    lodash "^4.17.15"
-    semver "^7.3.2"
-    tsutils "^3.17.1"
-
-"@typescript-eslint/visitor-keys@3.7.0":
-  version "3.7.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-3.7.0.tgz#ac0417d382a136e4571a0b0dcfe52088cb628177"
-  integrity sha512-k5PiZdB4vklUpUX4NBncn5RBKty8G3ihTY+hqJsCdMuD0v4jofI5xuqwnVcWxfv6iTm2P/dfEa2wMUnsUY8ODw==
-  dependencies:
-    eslint-visitor-keys "^1.1.0"
-
-"@xstate/fsm@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/@xstate/fsm/-/fsm-1.4.0.tgz#6fd082336fde4d026e9e448576189ee5265fa51a"
-  integrity sha512-uTHDeu2xI5E1IFwf37JFQM31RrH7mY7877RqPBS4ZqSNUwoLDuct8AhBWaXGnVizBAYyimVwgCyGa9z/NiRhXA==
-
-acorn-jsx@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
-  integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==
-
-acorn@^7.3.1:
-  version "7.3.1"
-  resolved "https://registry.npmjs.org/acorn/-/acorn-7.3.1.tgz#85010754db53c3fbaf3b9ea3e083aa5c5d147ffd"
-  integrity sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA==
-
-ajv@^6.10.0, ajv@^6.10.2:
-  version "6.12.3"
-  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz#18c5af38a111ddeb4f2697bd78d68abc1cabd706"
-  integrity sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==
-  dependencies:
-    fast-deep-equal "^3.1.1"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.4.1"
-    uri-js "^4.2.2"
-
-ansi-colors@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
-  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
-
-ansi-regex@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
-  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
-
-ansi-regex@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
-  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
-
-ansi-styles@^3.2.0, ansi-styles@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  dependencies:
-    color-convert "^1.9.0"
-
-ansi-styles@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
-  integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==
-  dependencies:
-    "@types/color-name" "^1.1.1"
-    color-convert "^2.0.1"
-
-anymatch@~3.1.1:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
-  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
-  dependencies:
-    normalize-path "^3.0.0"
-    picomatch "^2.0.4"
-
-argparse@^1.0.7:
-  version "1.0.10"
-  resolved "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
-  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
-  dependencies:
-    sprintf-js "~1.0.2"
-
-array-union@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
-  integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
-  dependencies:
-    array-uniq "^1.0.1"
-
-array-uniq@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
-  integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
-
-astral-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
-  integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
-
-async-limiter@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
-  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
-
-balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
-
-binary-extensions@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
-  integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
-
-brace-expansion@^1.1.7:
-  version "1.1.11"
-  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
-  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
-braces@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
-  dependencies:
-    fill-range "^7.0.1"
-
-buffer-from@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
-  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
-
-builtin-modules@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484"
-  integrity sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==
-
-callsites@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
-  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
-
-chalk@^2.0.0, chalk@^2.4.1:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
-chalk@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
-  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
-chokidar@^3.3.0:
-  version "3.4.1"
-  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.4.1.tgz#e905bdecf10eaa0a0b1db0c664481cc4cbc22ba1"
-  integrity sha512-TQTJyr2stihpC4Sya9hs2Xh+O2wf+igjL36Y75xx2WdHuiICcn/XJza46Jwt0eT5hVpQOzo3FpY3cj3RVYLX0g==
-  dependencies:
-    anymatch "~3.1.1"
-    braces "~3.0.2"
-    glob-parent "~5.1.0"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.4.0"
-  optionalDependencies:
-    fsevents "~2.1.2"
-
-chokidar@^3.4.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
-  integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
-  dependencies:
-    anymatch "~3.1.1"
-    braces "~3.0.2"
-    glob-parent "~5.1.0"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.5.0"
-  optionalDependencies:
-    fsevents "~2.3.1"
-
-color-convert@^1.9.0:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
-color-convert@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
-  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
-  dependencies:
-    color-name "~1.1.4"
-
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-
-color-name@~1.1.4:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
-  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
-commander@^2.20.0:
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
-commondir@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
-  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
-
-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
-
-console-clear@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz#995e20cbfbf14dd792b672cde387bd128d674bf7"
-  integrity sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==
-
-cross-spawn@^7.0.2:
-  version "7.0.3"
-  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
-  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
-  dependencies:
-    path-key "^3.1.0"
-    shebang-command "^2.0.0"
-    which "^2.0.1"
-
-debug@^4.0.1, debug@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
-  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
-  dependencies:
-    ms "^2.1.1"
-
-deep-is@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
-  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
-
-detect-indent@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
-  integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==
-
-doctrine@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
-  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
-  dependencies:
-    esutils "^2.0.2"
-
-emoji-regex@^7.0.1:
-  version "7.0.3"
-  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
-  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
-
-enquirer@^2.3.5:
-  version "2.3.6"
-  resolved "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
-  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
-  dependencies:
-    ansi-colors "^4.1.1"
-
-escape-string-regexp@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
-  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
-
-eslint-config-google@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.npmjs.org/eslint-config-google/-/eslint-config-google-0.11.0.tgz#fd0fc70be2e9114df097cac93a9b5b0d4e1c6830"
-  integrity sha512-z541Fs5TFaY7/35v/z100InQ2f3V2J7e3u/0yKrnImgsHjh6JWgSRngfC/mZepn/+XN16jUydt64k//kxXc1fw==
-
-eslint-plugin-svelte3@^2.7.3:
-  version "2.7.3"
-  resolved "https://registry.npmjs.org/eslint-plugin-svelte3/-/eslint-plugin-svelte3-2.7.3.tgz#e793b646b848e717674fe668c21b909cfa025eb3"
-  integrity sha512-p6HhxyICX9x/x+8WSy6AVk2bmv9ayoznoTSyCvK47th/k/07ksuJixMwbGX9qxJVAmPBaYMjEIMSEZtJHPIN7w==
-
-eslint-scope@^5.0.0, eslint-scope@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.0.tgz#d0f971dfe59c69e0cada684b23d49dbf82600ce5"
-  integrity sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==
-  dependencies:
-    esrecurse "^4.1.0"
-    estraverse "^4.1.1"
-
-eslint-utils@^2.0.0, eslint-utils@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
-  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
-  dependencies:
-    eslint-visitor-keys "^1.1.0"
-
-eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
-  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
-
-eslint@^7.5.0:
-  version "7.5.0"
-  resolved "https://registry.npmjs.org/eslint/-/eslint-7.5.0.tgz#9ecbfad62216d223b82ac9ffea7ef3444671d135"
-  integrity sha512-vlUP10xse9sWt9SGRtcr1LAC67BENcQMFeV+w5EvLEoFe3xJ8cF1Skd0msziRx/VMC+72B4DxreCE+OR12OA6Q==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    ajv "^6.10.0"
-    chalk "^4.0.0"
-    cross-spawn "^7.0.2"
-    debug "^4.0.1"
-    doctrine "^3.0.0"
-    enquirer "^2.3.5"
-    eslint-scope "^5.1.0"
-    eslint-utils "^2.1.0"
-    eslint-visitor-keys "^1.3.0"
-    espree "^7.2.0"
-    esquery "^1.2.0"
-    esutils "^2.0.2"
-    file-entry-cache "^5.0.1"
-    functional-red-black-tree "^1.0.1"
-    glob-parent "^5.0.0"
-    globals "^12.1.0"
-    ignore "^4.0.6"
-    import-fresh "^3.0.0"
-    imurmurhash "^0.1.4"
-    is-glob "^4.0.0"
-    js-yaml "^3.13.1"
-    json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.4.1"
-    lodash "^4.17.19"
-    minimatch "^3.0.4"
-    natural-compare "^1.4.0"
-    optionator "^0.9.1"
-    progress "^2.0.0"
-    regexpp "^3.1.0"
-    semver "^7.2.1"
-    strip-ansi "^6.0.0"
-    strip-json-comments "^3.1.0"
-    table "^5.2.3"
-    text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
-
-espree@^7.2.0:
-  version "7.2.0"
-  resolved "https://registry.npmjs.org/espree/-/espree-7.2.0.tgz#1c263d5b513dbad0ac30c4991b93ac354e948d69"
-  integrity sha512-H+cQ3+3JYRMEIOl87e7QdHX70ocly5iW4+dttuR8iYSPr/hXKFb+7dBsZ7+u1adC4VrnPlTkv0+OwuPnDop19g==
-  dependencies:
-    acorn "^7.3.1"
-    acorn-jsx "^5.2.0"
-    eslint-visitor-keys "^1.3.0"
-
-esprima@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
-  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
-
-esquery@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.npmjs.org/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
-  integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
-  dependencies:
-    estraverse "^5.1.0"
-
-esrecurse@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
-  integrity sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==
-  dependencies:
-    estraverse "^4.1.0"
-
-estraverse@^4.1.0, estraverse@^4.1.1:
-  version "4.3.0"
-  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
-  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
-
-estraverse@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.1.0.tgz#374309d39fd935ae500e7b92e8a6b4c720e59642"
-  integrity sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==
-
-estree-walker@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
-  integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
-
-estree-walker@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
-  integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
-
-estree-walker@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
-  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
-
-esutils@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
-  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
-
-fast-deep-equal@^3.1.1:
-  version "3.1.3"
-  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
-  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
-
-fast-json-stable-stringify@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
-  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
-
-fast-levenshtein@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
-  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
-
-fflate@^0.4.4:
-  version "0.4.8"
-  resolved "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
-  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
-
-file-entry-cache@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
-  integrity sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==
-  dependencies:
-    flat-cache "^2.0.1"
-
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
-  dependencies:
-    to-regex-range "^5.0.1"
-
-flat-cache@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
-  integrity sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==
-  dependencies:
-    flatted "^2.0.0"
-    rimraf "2.6.3"
-    write "1.0.3"
-
-flatted@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
-  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
-
-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
-  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
-
-fsevents@~2.1.2:
-  version "2.1.3"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
-  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
-
-fsevents@~2.3.1:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
-
-function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
-  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
-
-functional-red-black-tree@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
-  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
-
-get-port@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
-  integrity sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=
-
-glob-parent@^5.0.0, glob-parent@~5.1.0:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
-  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
-  dependencies:
-    is-glob "^4.0.1"
-
-glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.6:
-  version "7.1.6"
-  resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-globals@^12.1.0:
-  version "12.4.0"
-  resolved "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8"
-  integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
-  dependencies:
-    type-fest "^0.8.1"
-
-globby@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
-  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
-  dependencies:
-    array-union "^1.0.1"
-    glob "^7.0.3"
-    object-assign "^4.0.1"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
-
-has-flag@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
-  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
-
-has-flag@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
-  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
-
-has@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
-  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
-  dependencies:
-    function-bind "^1.1.1"
-
-ignore@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
-  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
-
-import-fresh@^3.0.0, import-fresh@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
-  integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==
-  dependencies:
-    parent-module "^1.0.0"
-    resolve-from "^4.0.0"
-
-imurmurhash@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
-  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
-
-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
-  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
-
-inherits@2:
-  version "2.0.4"
-  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
-  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
-
-is-binary-path@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
-  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
-  dependencies:
-    binary-extensions "^2.0.0"
-
-is-core-module@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a"
-  integrity sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==
-  dependencies:
-    has "^1.0.3"
-
-is-extglob@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
-  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
-
-is-fullwidth-code-point@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
-  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
-
-is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
-  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
-  dependencies:
-    is-extglob "^2.1.1"
-
-is-module@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
-  integrity sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=
-
-is-number@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
-  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
-
-is-reference@^1.1.2:
-  version "1.2.1"
-  resolved "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
-  integrity sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==
-  dependencies:
-    "@types/estree" "*"
-
-isexe@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
-  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
-
-jest-worker@^26.2.1:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
-  integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
-  dependencies:
-    "@types/node" "*"
-    merge-stream "^2.0.0"
-    supports-color "^7.0.0"
-
-js-tokens@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
-  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
-
-js-yaml@^3.13.1:
-  version "3.14.0"
-  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz#a7a34170f26a21bb162424d8adacb4113a69e482"
-  integrity sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
-json-schema-traverse@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
-  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
-
-json-stable-stringify-without-jsonify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
-  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
-
-kleur@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
-  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
-
-levn@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
-  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
-  dependencies:
-    prelude-ls "^1.2.1"
-    type-check "~0.4.0"
-
-livereload-js@^3.1.0:
-  version "3.2.4"
-  resolved "https://registry.npmjs.org/livereload-js/-/livereload-js-3.2.4.tgz#21a05f8a7bd04c9531a7c63dfb6ff4b677d30f43"
-  integrity sha512-kgTCrrYAfwnb5469+7bB2hxIct8Giq0RemDnxOESIzyRwRqYGGMZh5VIveYqJiDvpglH0dpd074BU1zJj4NaNw==
-
-livereload@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.npmjs.org/livereload/-/livereload-0.9.1.tgz#65125dabdf2db4fd3f1169e953fe56e3bcc6f477"
-  integrity sha512-9g7sua11kkyZNo2hLRCG3LuZZwqexoyEyecSlV8cAsfAVVCZqLzVir6XDqmH0r+Vzgnd5LrdHDMyjtFnJQLAYw==
-  dependencies:
-    chokidar "^3.3.0"
-    livereload-js "^3.1.0"
-    opts ">= 1.2.0"
-    ws "^6.2.1"
-
-local-access@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/local-access/-/local-access-1.0.1.tgz#5121258146d64e869046c642ea4f1dd39ff942bb"
-  integrity sha512-ykt2pgN0aqIy6KQC1CqdWTWkmUwNgaOS6dcpHVjyBJONA+Xi7AtSB1vuxC/U/0tjIP3wcRudwQk1YYzUvzk2bA==
-
-lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
-magic-string@^0.25.2:
-  version "0.25.7"
-  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
-  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
-  dependencies:
-    sourcemap-codec "^1.4.4"
-
-merge-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
-  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
-
-mime@^2.3.1:
-  version "2.4.6"
-  resolved "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz#e5b407c90db442f2beb5b162373d07b69affa4d1"
-  integrity sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==
-
-min-indent@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
-  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
-
-minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
-  dependencies:
-    brace-expansion "^1.1.7"
-
-minimist@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
-
-mitt@^1.1.3:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/mitt/-/mitt-1.2.0.tgz#cb24e6569c806e31bd4e3995787fe38a04fdf90d"
-  integrity sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw==
-
-mkdirp@^0.5.1:
-  version "0.5.5"
-  resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
-  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
-  dependencies:
-    minimist "^1.2.5"
-
-mri@^1.1.0:
-  version "1.1.6"
-  resolved "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"
-  integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==
-
-ms@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
-  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
-
-natural-compare@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
-  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
-
-normalize-path@^3.0.0, normalize-path@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
-  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
-
-object-assign@^4.0.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
-once@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
-  dependencies:
-    wrappy "1"
-
-optionator@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
-  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
-  dependencies:
-    deep-is "^0.1.3"
-    fast-levenshtein "^2.0.6"
-    levn "^0.4.1"
-    prelude-ls "^1.2.1"
-    type-check "^0.4.0"
-    word-wrap "^1.2.3"
-
-"opts@>= 1.2.0":
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/opts/-/opts-2.0.0.tgz#c0b2cebdf53eaeafc21ed844e34773758dcf41e2"
-  integrity sha512-rPleeyX48sBEc4aj7rAok5dCbvRdYpdbIdSRR4gnIK98a7Rvd4l3wlv4YHQr2mwPQTpKQiw8uipi/WoyItDINg==
-
-parent-module@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
-  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
-  dependencies:
-    callsites "^3.0.0"
-
-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
-  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
-
-path-key@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
-  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
-
-path-parse@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
-  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
-
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
-  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
-
-pify@^2.0.0, pify@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
-  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
-
-pify@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
-  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
-
-pinkie-promise@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
-  integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
-  dependencies:
-    pinkie "^2.0.0"
-
-pinkie@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
-  integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
-
-postcss-easy-import@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-easy-import/-/postcss-easy-import-3.0.0.tgz#8eaaf5ae59566083d0cae98735dfd803e3ab194d"
-  integrity sha512-cfNsear/v8xlkl9v5Wm8y4Do/puiDQTFF+WX2Fo++h7oKt1fKWVVW/5Ca8hslYDQWnjndrg813cA23Pt1jsYdg==
-  dependencies:
-    globby "^6.1.0"
-    is-glob "^4.0.0"
-    lodash "^4.17.4"
-    object-assign "^4.0.1"
-    pify "^3.0.0"
-    postcss "^6.0.11"
-    postcss-import "^10.0.0"
-    resolve "^1.1.7"
-
-postcss-import@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-10.0.0.tgz#4c85c97b099136cc5ea0240dc1dfdbfde4e2ebbe"
-  integrity sha1-TIXJewmRNsxeoCQNwd/b/eTi674=
-  dependencies:
-    object-assign "^4.0.1"
-    postcss "^6.0.1"
-    postcss-value-parser "^3.2.3"
-    read-cache "^1.0.0"
-    resolve "^1.1.7"
-
-postcss-value-parser@^3.2.3:
-  version "3.3.1"
-  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
-  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
-
-postcss@^6.0.1, postcss@^6.0.11:
-  version "6.0.23"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
-  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
-  dependencies:
-    chalk "^2.4.1"
-    source-map "^0.6.1"
-    supports-color "^5.4.0"
-
-prelude-ls@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
-  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
-
-progress@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
-  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
-
-punycode@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
-  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
-
-randombytes@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
-  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
-  dependencies:
-    safe-buffer "^5.1.0"
-
-read-cache@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
-  integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=
-  dependencies:
-    pify "^2.3.0"
-
-readdirp@~3.4.0:
-  version "3.4.0"
-  resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
-  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
-  dependencies:
-    picomatch "^2.2.1"
-
-readdirp@~3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
-  integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==
-  dependencies:
-    picomatch "^2.2.1"
-
-regexpp@^3.0.0, regexpp@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
-  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
-
-require-relative@^0.8.7:
-  version "0.8.7"
-  resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
-  integrity sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=
-
-resolve-from@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
-  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
-
-resolve@^1.1.7, resolve@^1.11.0, resolve@^1.14.2:
-  version "1.17.0"
-  resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
-  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
-  dependencies:
-    path-parse "^1.0.6"
-
-resolve@^1.14.1:
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
-  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
-  dependencies:
-    is-core-module "^2.2.0"
-    path-parse "^1.0.6"
-
-rimraf@2.6.3:
-  version "2.6.3"
-  resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
-  integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
-  dependencies:
-    glob "^7.1.3"
-
-rollup-plugin-css-only@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-css-only/-/rollup-plugin-css-only-3.1.0.tgz#6a701cc5b051c6b3f0961e69b108a9a118e1b1df"
-  integrity sha512-TYMOE5uoD76vpj+RTkQLzC9cQtbnJNktHPB507FzRWBVaofg7KhIqq1kGbcVOadARSozWF883Ho9KpSPKH8gqA==
-  dependencies:
-    "@rollup/pluginutils" "4"
-
-rollup-plugin-livereload@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.0.tgz#d3928d74e8cf2ae4286c5dd46b770fd3f3b82313"
-  integrity sha512-oC/8NqumGYuphkqrfszOHUUIwzKsaHBICw6QRwT5uD07gvePTS+HW+GFwu6f9K8W02CUuTvtIM9AWJrbj4wE1A==
-  dependencies:
-    livereload "^0.9.1"
-
-rollup-plugin-svelte@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-svelte/-/rollup-plugin-svelte-7.1.0.tgz#d45f2b92b1014be4eb46b55aa033fb9a9c65f04d"
-  integrity sha512-vopCUq3G+25sKjwF5VilIbiY6KCuMNHP1PFvx2Vr3REBNMDllKHFZN2B9jwwC+MqNc3UPKkjXnceLPEjTjXGXg==
-  dependencies:
-    require-relative "^0.8.7"
-    rollup-pluginutils "^2.8.2"
-
-rollup-plugin-terser@^7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
-  integrity sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    jest-worker "^26.2.1"
-    serialize-javascript "^4.0.0"
-    terser "^5.0.0"
-
-rollup-pluginutils@^2.8.2:
-  version "2.8.2"
-  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
-  integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
-  dependencies:
-    estree-walker "^0.6.1"
-
-rollup@^2.45.2:
-  version "2.45.2"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.45.2.tgz#8fb85917c9f35605720e92328f3ccbfba6f78b48"
-  integrity sha512-kRRU7wXzFHUzBIv0GfoFFIN3m9oteY4uAsKllIpQDId5cfnkWF2J130l+27dzDju0E6MScKiV0ZM5Bw8m4blYQ==
-  optionalDependencies:
-    fsevents "~2.3.1"
-
-rrweb-snapshot@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.npmjs.org/rrweb-snapshot/download/rrweb-snapshot-1.1.6.tgz#e598510e387b9b2c62ce0cfc586a37c89549b228"
-  integrity sha1-5ZhRDjh7myxizgz8WGo3yJVJsig=
-
-rrweb@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-1.0.1.tgz#4a1fab4ab7fec4d7308443f012e591f9c1e4d209"
-  integrity sha512-T7aH4qcJt1KUK6utF7XzfRgMLgGqntzZ5IUZw36CQ8lrsO1UQm2gyzgMFSLbDV4EgplN0oIenAT29RKT9ET3Ig==
-  dependencies:
-    "@types/css-font-loading-module" "0.0.4"
-    "@xstate/fsm" "^1.4.0"
-    fflate "^0.4.4"
-    mitt "^1.1.3"
-    rrweb-snapshot "^1.1.6"
-
-sade@^1.4.0:
-  version "1.7.3"
-  resolved "https://registry.npmjs.org/sade/-/sade-1.7.3.tgz#a217ccc4fb4abb2d271648bf48f6628b2636fa1b"
-  integrity sha512-m4BctppMvJ60W1dXnHq7jMmFe3hPJZDAH85kQ3ACTo7XZNVUuTItCQ+2HfyaMeV5cKrbw7l4vD/6We3GBxvdJw==
-  dependencies:
-    mri "^1.1.0"
-
-safe-buffer@^5.1.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
-  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
-
-semver@^7.2.1, semver@^7.3.2:
-  version "7.3.2"
-  resolved "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
-  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
-
-serialize-javascript@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
-  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
-  dependencies:
-    randombytes "^2.1.0"
-
-shebang-command@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
-  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
-  dependencies:
-    shebang-regex "^3.0.0"
-
-shebang-regex@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
-  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
-
-sirv-cli@^0.4.4:
-  version "0.4.6"
-  resolved "https://registry.npmjs.org/sirv-cli/-/sirv-cli-0.4.6.tgz#c28ab20deb3b34637f5a60863dc350f055abca04"
-  integrity sha512-/Vj85/kBvPL+n9ibgX6FicLE8VjidC1BhlX67PYPBfbBAphzR6i0k0HtU5c2arejfU3uzq8l3SYPCwl1x7z6Ww==
-  dependencies:
-    console-clear "^1.1.0"
-    get-port "^3.2.0"
-    kleur "^3.0.0"
-    local-access "^1.0.1"
-    sade "^1.4.0"
-    sirv "^0.4.6"
-    tinydate "^1.0.0"
-
-sirv@^0.4.6:
-  version "0.4.6"
-  resolved "https://registry.npmjs.org/sirv/-/sirv-0.4.6.tgz#185e44eb93d24009dd183b7494285c5180b81f22"
-  integrity sha512-rYpOXlNbpHiY4nVXxuDf4mXPvKz1reZGap/LkWp9TvcZ84qD/nPBjjH/6GZsgIjVMbOslnY8YYULAyP8jMn1GQ==
-  dependencies:
-    "@polka/url" "^0.5.0"
-    mime "^2.3.1"
-
-slice-ansi@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
-  integrity sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==
-  dependencies:
-    ansi-styles "^3.2.0"
-    astral-regex "^1.0.0"
-    is-fullwidth-code-point "^2.0.0"
-
-source-map-support@~0.5.19:
-  version "0.5.19"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
-  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
-source-map@^0.6.0, source-map@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
-source-map@^0.7.3, source-map@~0.7.2:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
-  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
-
-sourcemap-codec@^1.4.4:
-  version "1.4.8"
-  resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
-  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
-
-sprintf-js@~1.0.2:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
-  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
-
-string-width@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
-  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
-  dependencies:
-    emoji-regex "^7.0.1"
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^5.1.0"
-
-strip-ansi@^5.1.0:
-  version "5.2.0"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
-  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
-  dependencies:
-    ansi-regex "^4.1.0"
-
-strip-ansi@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
-  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
-  dependencies:
-    ansi-regex "^5.0.0"
-
-strip-indent@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
-  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
-  dependencies:
-    min-indent "^1.0.0"
-
-strip-json-comments@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
-  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
-
-supports-color@^5.3.0, supports-color@^5.4.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
-supports-color@^7.0.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
-  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
-  dependencies:
-    has-flag "^4.0.0"
-
-supports-color@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
-  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
-  dependencies:
-    has-flag "^4.0.0"
-
-svelte-check@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-1.4.0.tgz#5d15f6ce22564fab137d28abb3f6c48aa1a22a12"
-  integrity sha512-fcACzU7EJEQBxbbUub8o/3tm5gp0txdGXin9fzHHvtHfgyS9RHSfA5poTWlteeVigu2MSqrTpvMPGT/DazyK0g==
-  dependencies:
-    chalk "^4.0.0"
-    chokidar "^3.4.1"
-    glob "^7.1.6"
-    import-fresh "^3.2.1"
-    minimist "^1.2.5"
-    source-map "^0.7.3"
-    svelte-preprocess "^4.0.0"
-    typescript "*"
-
-svelte-preprocess@^4.0.0:
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.7.2.tgz#e16bf5cc152df8097485ce8c7842073a83a12b1e"
-  integrity sha512-EToG+08rEsA33btv+C5g2qnRArwpTc5AoU0QBB3ZEkYagxAb2yPNsy0qsmtvbJOTBMy6o3oyijDdl3DMpMvpEg==
-  dependencies:
-    "@types/pug" "^2.0.4"
-    "@types/sass" "^1.16.0"
-    detect-indent "^6.0.0"
-    strip-indent "^3.0.0"
-
-svelte@^3.2.0:
-  version "3.24.0"
-  resolved "https://registry.npmjs.org/svelte/-/svelte-3.24.0.tgz#6565a42c9705796fa66c6abb4fedc09f4323a4a8"
-  integrity sha512-VFXom6EP2DK83kxy4ZlBbaZklSbZIrpNH3oNXlPYHJUuW4q1OuAr3ZoYbfIVTVYPDgrI7Yq0gQcOhDlAtO4qfw==
-
-table@^5.2.3:
-  version "5.4.6"
-  resolved "https://registry.npmjs.org/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
-  integrity sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==
-  dependencies:
-    ajv "^6.10.2"
-    lodash "^4.17.14"
-    slice-ansi "^2.1.0"
-    string-width "^3.0.0"
-
-terser@^5.0.0:
-  version "5.6.1"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.6.1.tgz#a48eeac5300c0a09b36854bf90d9c26fb201973c"
-  integrity sha512-yv9YLFQQ+3ZqgWCUk+pvNJwgUTdlIxUk1WTN+RnaFJe2L7ipG2csPT0ra2XRm7Cs8cxN7QXmK1rFzEwYEQkzXw==
-  dependencies:
-    commander "^2.20.0"
-    source-map "~0.7.2"
-    source-map-support "~0.5.19"
-
-text-table@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
-  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
-
-tinydate@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz#e6ca8e5a22b51bb4ea1c3a2a4fd1352dbd4c57fb"
-  integrity sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==
-
-to-regex-range@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
-  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
-  dependencies:
-    is-number "^7.0.0"
-
-tslib@^1.8.1:
-  version "1.13.0"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
-  integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
-
-tslib@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz#18d13fc2dce04051e20f074cc8387fd8089ce4f3"
-  integrity sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==
-
-tsutils@^3.17.1:
-  version "3.17.1"
-  resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
-  integrity sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==
-  dependencies:
-    tslib "^1.8.1"
-
-type-check@^0.4.0, type-check@~0.4.0:
-  version "0.4.0"
-  resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
-  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
-  dependencies:
-    prelude-ls "^1.2.1"
-
-type-fest@^0.8.1:
-  version "0.8.1"
-  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
-  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
-
-typescript@*, typescript@^3.9.7:
-  version "3.9.7"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
-  integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==
-
-uri-js@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
-  integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==
-  dependencies:
-    punycode "^2.1.0"
-
-v8-compile-cache@^2.0.3:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745"
-  integrity sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==
-
-which@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
-  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
-  dependencies:
-    isexe "^2.0.0"
-
-word-wrap@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
-  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
-
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
-  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
-
-write@1.0.3:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
-  integrity sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==
-  dependencies:
-    mkdirp "^0.5.1"
-
-ws@^6.2.1:
-  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"
-  integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==
-  dependencies:
-    async-limiter "~1.0.0"

From 6c34ffa7ce71377f51619ad3e8e8ffe7ec3ed18a Mon Sep 17 00:00:00 2001
From: Mark-fenng <f18846188605@gmail.com>
Date: Thu, 22 Jul 2021 23:43:52 +0800
Subject: [PATCH 409/524] moved rrweb into packages/rrweb

---
 .gitignore                                    |    4 -
 .travis.yml                                   |    6 +-
 package.json                                  |   69 +-
 packages/rrweb-player/package.json            |    2 +-
 packages/rrweb-snapshot/.gitignore            |    8 +
 packages/rrweb-snapshot/LICENSE               |   21 -
 packages/rrweb/.gitignore                     |   15 +
 .../rrweb/.release-it.json                    |    0
 packages/rrweb/package.json                   |   79 +
 .../rrweb/rollup.config.js                    |    0
 {scripts => packages/rrweb/scripts}/repl.ts   |    0
 {src => packages/rrweb/src}/entries/all.ts    |    0
 .../rrweb/src}/entries/record-pack.ts         |    0
 .../rrweb/src}/entries/replay-unpack.ts       |    0
 {src => packages/rrweb/src}/index.ts          |    0
 {src => packages/rrweb/src}/packer/base.ts    |    0
 {src => packages/rrweb/src}/packer/index.ts   |    0
 {src => packages/rrweb/src}/packer/pack.ts    |    0
 {src => packages/rrweb/src}/packer/unpack.ts  |    0
 .../console/record/error-stack-parser.ts      |    0
 .../src}/plugins/console/record/index.ts      |    0
 .../src}/plugins/console/record/stringify.ts  |    0
 .../src}/plugins/console/replay/index.ts      |    0
 .../rrweb/src}/record/iframe-manager.ts       |    0
 {src => packages/rrweb/src}/record/index.ts   |    0
 .../rrweb/src}/record/mutation.ts             |    0
 .../rrweb/src}/record/observer.ts             |    0
 .../rrweb/src}/record/shadow-dom-manager.ts   |    0
 {src => packages/rrweb/src}/replay/index.ts   |    0
 {src => packages/rrweb/src}/replay/machine.ts |    0
 .../rrweb/src}/replay/smoothscroll.ts         |    0
 .../rrweb/src}/replay/styles/inject-style.ts  |    0
 .../rrweb/src}/replay/styles/style.css        |    0
 {src => packages/rrweb/src}/replay/timer.ts   |    0
 .../rrweb/src}/replay/virtual-styles.ts       |    0
 {src => packages/rrweb/src}/rrdom/index.ts    |    0
 .../rrweb/src}/rrdom/tree-node.ts             |    0
 {src => packages/rrweb/src}/types.ts          |    0
 {src => packages/rrweb/src}/utils.ts          |    0
 test.d.ts => packages/rrweb/test.d.ts         |    0
 .../__snapshots__/integration.test.ts.snap    |    0
 .../test}/__snapshots__/packer.test.ts.snap   |  Bin
 .../test}/__snapshots__/record.test.ts.snap   |    0
 .../test}/__snapshots__/replayer.test.ts.snap |    0
 .../test}/events/style-sheet-rule-events.ts   |    0
 {test => packages/rrweb/test}/html/block.html |    0
 .../rrweb/test}/html/canvas.html              |    0
 {test => packages/rrweb/test}/html/form.html  |    0
 .../rrweb/test}/html/frame1.html              |    0
 .../rrweb/test}/html/frame2.html              |    0
 .../rrweb/test}/html/ignore.html              |    0
 {test => packages/rrweb/test}/html/log.html   |    0
 {test => packages/rrweb/test}/html/main.html  |    0
 .../rrweb/test}/html/mask-text.html           |    0
 .../rrweb/test}/html/move-node.html           |    0
 .../rrweb/test}/html/mutation-observer.html   |    0
 .../rrweb/test}/html/password.html            |    0
 .../test}/html/react-styled-components.html   |    0
 .../rrweb/test}/html/select2.html             |    0
 .../rrweb/test}/html/shadow-dom.html          |    0
 .../rrweb/test}/html/shuffle.html             |    0
 .../rrweb/test}/integration.test.ts           |    0
 {test => packages/rrweb/test}/machine.test.ts |    0
 {test => packages/rrweb/test}/packer.test.ts  |    0
 {test => packages/rrweb/test}/record.test.ts  |    0
 .../rrweb/test}/replay/virtual-styles.test.ts |    0
 .../rrweb/test}/replayer.test.ts              |    0
 {test => packages/rrweb/test}/utils.ts        |    0
 tsconfig.json => packages/rrweb/tsconfig.json |    0
 tslint.json => packages/rrweb/tslint.json     |    0
 .../rrweb/typings}/boost.d.ts                 |    0
 .../rrweb/typings}/entries/all.d.ts           |    0
 .../rrweb/typings}/entries/record-pack.d.ts   |    0
 .../rrweb/typings}/entries/replay-unpack.d.ts |    0
 .../rrweb/typings}/index.d.ts                 |    0
 .../rrweb/typings}/packer/base.d.ts           |    0
 .../rrweb/typings}/packer/index.d.ts          |    0
 .../rrweb/typings}/packer/pack.d.ts           |    0
 .../rrweb/typings}/packer/unpack.d.ts         |    0
 .../console/record/error-stack-parser.d.ts    |    0
 .../plugins/console/record/index.d.ts         |    0
 .../plugins/console/record/stringify.d.ts     |    0
 .../plugins/console/replay/index.d.ts         |    0
 .../rrweb/typings}/record/collection.d.ts     |    0
 .../typings}/record/error-stack-parser.d.ts   |    0
 .../rrweb/typings}/record/iframe-manager.d.ts |    0
 .../rrweb/typings}/record/index.d.ts          |    0
 .../rrweb/typings}/record/mutation.d.ts       |    0
 .../rrweb/typings}/record/observer.d.ts       |    0
 .../typings}/record/shadow-dom-manager.d.ts   |    0
 .../rrweb/typings}/record/stringify.d.ts      |    0
 .../rrweb/typings}/replay/index.d.ts          |    0
 .../rrweb/typings}/replay/machine.d.ts        |    0
 .../rrweb/typings}/replay/smoothscroll.d.ts   |    0
 .../typings}/replay/styles/inject-style.d.ts  |    0
 .../rrweb/typings}/replay/timer.d.ts          |    0
 .../rrweb/typings}/replay/virtual-styles.d.ts |    0
 .../rrweb/typings}/rrdom/index.d.ts           |    0
 .../rrweb/typings}/rrdom/tree-node.d.ts       |    0
 .../rrweb/typings}/types.d.ts                 |    0
 .../rrweb/typings}/utils.d.ts                 |    1 +
 yarn.lock                                     | 1868 ++++++++++++++---
 102 files changed, 1674 insertions(+), 399 deletions(-)
 create mode 100644 packages/rrweb-snapshot/.gitignore
 delete mode 100644 packages/rrweb-snapshot/LICENSE
 create mode 100644 packages/rrweb/.gitignore
 rename .release-it.json => packages/rrweb/.release-it.json (100%)
 create mode 100644 packages/rrweb/package.json
 rename rollup.config.js => packages/rrweb/rollup.config.js (100%)
 rename {scripts => packages/rrweb/scripts}/repl.ts (100%)
 rename {src => packages/rrweb/src}/entries/all.ts (100%)
 rename {src => packages/rrweb/src}/entries/record-pack.ts (100%)
 rename {src => packages/rrweb/src}/entries/replay-unpack.ts (100%)
 rename {src => packages/rrweb/src}/index.ts (100%)
 rename {src => packages/rrweb/src}/packer/base.ts (100%)
 rename {src => packages/rrweb/src}/packer/index.ts (100%)
 rename {src => packages/rrweb/src}/packer/pack.ts (100%)
 rename {src => packages/rrweb/src}/packer/unpack.ts (100%)
 rename {src => packages/rrweb/src}/plugins/console/record/error-stack-parser.ts (100%)
 rename {src => packages/rrweb/src}/plugins/console/record/index.ts (100%)
 rename {src => packages/rrweb/src}/plugins/console/record/stringify.ts (100%)
 rename {src => packages/rrweb/src}/plugins/console/replay/index.ts (100%)
 rename {src => packages/rrweb/src}/record/iframe-manager.ts (100%)
 rename {src => packages/rrweb/src}/record/index.ts (100%)
 rename {src => packages/rrweb/src}/record/mutation.ts (100%)
 rename {src => packages/rrweb/src}/record/observer.ts (100%)
 rename {src => packages/rrweb/src}/record/shadow-dom-manager.ts (100%)
 rename {src => packages/rrweb/src}/replay/index.ts (100%)
 rename {src => packages/rrweb/src}/replay/machine.ts (100%)
 rename {src => packages/rrweb/src}/replay/smoothscroll.ts (100%)
 rename {src => packages/rrweb/src}/replay/styles/inject-style.ts (100%)
 rename {src => packages/rrweb/src}/replay/styles/style.css (100%)
 rename {src => packages/rrweb/src}/replay/timer.ts (100%)
 rename {src => packages/rrweb/src}/replay/virtual-styles.ts (100%)
 rename {src => packages/rrweb/src}/rrdom/index.ts (100%)
 rename {src => packages/rrweb/src}/rrdom/tree-node.ts (100%)
 rename {src => packages/rrweb/src}/types.ts (100%)
 rename {src => packages/rrweb/src}/utils.ts (100%)
 rename test.d.ts => packages/rrweb/test.d.ts (100%)
 rename {test => packages/rrweb/test}/__snapshots__/integration.test.ts.snap (100%)
 rename {test => packages/rrweb/test}/__snapshots__/packer.test.ts.snap (100%)
 rename {test => packages/rrweb/test}/__snapshots__/record.test.ts.snap (100%)
 rename {test => packages/rrweb/test}/__snapshots__/replayer.test.ts.snap (100%)
 rename {test => packages/rrweb/test}/events/style-sheet-rule-events.ts (100%)
 rename {test => packages/rrweb/test}/html/block.html (100%)
 rename {test => packages/rrweb/test}/html/canvas.html (100%)
 rename {test => packages/rrweb/test}/html/form.html (100%)
 rename {test => packages/rrweb/test}/html/frame1.html (100%)
 rename {test => packages/rrweb/test}/html/frame2.html (100%)
 rename {test => packages/rrweb/test}/html/ignore.html (100%)
 rename {test => packages/rrweb/test}/html/log.html (100%)
 rename {test => packages/rrweb/test}/html/main.html (100%)
 rename {test => packages/rrweb/test}/html/mask-text.html (100%)
 rename {test => packages/rrweb/test}/html/move-node.html (100%)
 rename {test => packages/rrweb/test}/html/mutation-observer.html (100%)
 rename {test => packages/rrweb/test}/html/password.html (100%)
 rename {test => packages/rrweb/test}/html/react-styled-components.html (100%)
 rename {test => packages/rrweb/test}/html/select2.html (100%)
 rename {test => packages/rrweb/test}/html/shadow-dom.html (100%)
 rename {test => packages/rrweb/test}/html/shuffle.html (100%)
 rename {test => packages/rrweb/test}/integration.test.ts (100%)
 rename {test => packages/rrweb/test}/machine.test.ts (100%)
 rename {test => packages/rrweb/test}/packer.test.ts (100%)
 rename {test => packages/rrweb/test}/record.test.ts (100%)
 rename {test => packages/rrweb/test}/replay/virtual-styles.test.ts (100%)
 rename {test => packages/rrweb/test}/replayer.test.ts (100%)
 rename {test => packages/rrweb/test}/utils.ts (100%)
 rename tsconfig.json => packages/rrweb/tsconfig.json (100%)
 rename tslint.json => packages/rrweb/tslint.json (100%)
 rename {typings => packages/rrweb/typings}/boost.d.ts (100%)
 rename {typings => packages/rrweb/typings}/entries/all.d.ts (100%)
 rename {typings => packages/rrweb/typings}/entries/record-pack.d.ts (100%)
 rename {typings => packages/rrweb/typings}/entries/replay-unpack.d.ts (100%)
 rename {typings => packages/rrweb/typings}/index.d.ts (100%)
 rename {typings => packages/rrweb/typings}/packer/base.d.ts (100%)
 rename {typings => packages/rrweb/typings}/packer/index.d.ts (100%)
 rename {typings => packages/rrweb/typings}/packer/pack.d.ts (100%)
 rename {typings => packages/rrweb/typings}/packer/unpack.d.ts (100%)
 rename {typings => packages/rrweb/typings}/plugins/console/record/error-stack-parser.d.ts (100%)
 rename {typings => packages/rrweb/typings}/plugins/console/record/index.d.ts (100%)
 rename {typings => packages/rrweb/typings}/plugins/console/record/stringify.d.ts (100%)
 rename {typings => packages/rrweb/typings}/plugins/console/replay/index.d.ts (100%)
 rename {typings => packages/rrweb/typings}/record/collection.d.ts (100%)
 rename {typings => packages/rrweb/typings}/record/error-stack-parser.d.ts (100%)
 rename {typings => packages/rrweb/typings}/record/iframe-manager.d.ts (100%)
 rename {typings => packages/rrweb/typings}/record/index.d.ts (100%)
 rename {typings => packages/rrweb/typings}/record/mutation.d.ts (100%)
 rename {typings => packages/rrweb/typings}/record/observer.d.ts (100%)
 rename {typings => packages/rrweb/typings}/record/shadow-dom-manager.d.ts (100%)
 rename {typings => packages/rrweb/typings}/record/stringify.d.ts (100%)
 rename {typings => packages/rrweb/typings}/replay/index.d.ts (100%)
 rename {typings => packages/rrweb/typings}/replay/machine.d.ts (100%)
 rename {typings => packages/rrweb/typings}/replay/smoothscroll.d.ts (100%)
 rename {typings => packages/rrweb/typings}/replay/styles/inject-style.d.ts (100%)
 rename {typings => packages/rrweb/typings}/replay/timer.d.ts (100%)
 rename {typings => packages/rrweb/typings}/replay/virtual-styles.d.ts (100%)
 rename {typings => packages/rrweb/typings}/rrdom/index.d.ts (100%)
 rename {typings => packages/rrweb/typings}/rrdom/tree-node.d.ts (100%)
 rename {typings => packages/rrweb/typings}/types.d.ts (100%)
 rename {typings => packages/rrweb/typings}/utils.d.ts (98%)

diff --git a/.gitignore b/.gitignore
index afbda82bac..e098495263 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,10 +3,6 @@
 node_modules
 package-lock.json
 # yarn.lock
-build
-dist
-es
-lib
 
 temp
 
diff --git a/.travis.yml b/.travis.yml
index be3721f648..4b51e6a40e 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -11,5 +11,9 @@ install:
   - yarn
 
 script:
+  - cd packages/rrweb-snapshot
+  - yarn bundle
+  - yarn test
+  - cd ../rrweb
   - yarn check-types
-  - xvfb-run --server-args="-screen 0 1920x1080x24" yarn test
+  - xvfb-run --server-args="-screen 0 1920x1080x24" yarn test 
\ No newline at end of file
diff --git a/package.json b/package.json
index 9b4cc86195..3082e1b1c2 100644
--- a/package.json
+++ b/package.json
@@ -1,19 +1,5 @@
 {
-  "name": "rrweb",
-  "version": "1.0.2",
   "description": "record and replay the web",
-  "scripts": {
-    "prepare": "npm run prepack",
-    "prepack": "npm run bundle",
-    "test": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register -r ignore-styles -r jsdom-global/register test/**.test.ts",
-    "test:headless": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true PUPPETEER_HEADLESS=true mocha -r ts-node/register -r ignore-styles -r jsdom-global/register test/**.test.ts",
-    "test:watch": "PUPPETEER_HEADLESS=true npm run test -- --watch --watch-extensions js,ts",
-    "repl": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true ts-node scripts/repl.ts",
-    "bundle:browser": "cross-env BROWSER_ONLY=true rollup --config",
-    "bundle": "rollup --config",
-    "typings": "tsc -d --declarationDir typings",
-    "check-types": "tsc -noEmit"
-  },
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/rrweb-io/rrweb.git"
@@ -21,59 +7,16 @@
   "keywords": [
     "rrweb"
   ],
-  "main": "lib/rrweb-all.js",
-  "module": "es/rrweb/src/entries/all.js",
-  "unpkg": "dist/rrweb.js",
-  "sideEffects": false,
-  "typings": "typings/entries/all.d.ts",
-  "files": [
-    "dist",
-    "lib",
-    "es",
-    "typings"
-  ],
   "author": "yanzhen@smartx.com",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/rrweb-io/rrweb/issues"
   },
+  "private": true,
   "homepage": "https://github.com/rrweb-io/rrweb#readme",
-  "devDependencies": {
-    "@types/chai": "^4.1.6",
-    "@types/inquirer": "0.0.43",
-    "@types/jsdom": "^16.2.12",
-    "@types/mocha": "^5.2.5",
-    "@types/node": "^12.20.16",
-    "@types/prettier": "^2.3.2",
-    "@types/puppeteer": "^5.4.3",
-    "chai": "^4.2.0",
-    "cross-env": "^5.2.0",
-    "fast-mhtml": "^1.1.9",
-    "ignore-styles": "^5.0.1",
-    "inquirer": "^6.2.1",
-    "jest-snapshot": "^23.6.0",
-    "jsdom": "^16.6.0",
-    "jsdom-global": "^3.0.2",
-    "mocha": "^5.2.0",
-    "prettier": "2.2.1",
-    "puppeteer": "^9.1.1",
-    "rollup": "^2.3.3",
-    "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-node-resolve": "^3.4.0",
-    "rollup-plugin-postcss": "^3.1.1",
-    "rollup-plugin-rename-node-modules": "^1.1.0",
-    "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-typescript": "^1.0.0",
-    "ts-node": "^7.0.1",
-    "tslib": "^1.9.3",
-    "tslint": "^4.5.1",
-    "typescript": "^3.9.5"
-  },
-  "dependencies": {
-    "@types/css-font-loading-module": "0.0.4",
-    "@xstate/fsm": "^1.4.0",
-    "fflate": "^0.4.4",
-    "mitt": "^1.1.3",
-    "rrweb-snapshot": "^1.1.7"
-  }
+  "workspaces": [
+    "packages/rrweb",
+    "packages/rrweb-snapshot",
+    "packages/rrweb-player"
+  ]
 }
diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
index d47c45f09b..12e1f9c1d0 100644
--- a/packages/rrweb-player/package.json
+++ b/packages/rrweb-player/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^1.0.1"
+    "rrweb": "^1.0.2"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/packages/rrweb-snapshot/.gitignore b/packages/rrweb-snapshot/.gitignore
new file mode 100644
index 0000000000..3365d49249
--- /dev/null
+++ b/packages/rrweb-snapshot/.gitignore
@@ -0,0 +1,8 @@
+.vscode
+node_modules
+package-lock.json
+build
+dist
+es
+lib
+temp
diff --git a/packages/rrweb-snapshot/LICENSE b/packages/rrweb-snapshot/LICENSE
deleted file mode 100644
index 0b2f1b2f72..0000000000
--- a/packages/rrweb-snapshot/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Contributors (https://github.com/rrweb-io/rrweb-snapshot/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/.gitignore b/packages/rrweb/.gitignore
new file mode 100644
index 0000000000..afbda82bac
--- /dev/null
+++ b/packages/rrweb/.gitignore
@@ -0,0 +1,15 @@
+.vscode
+.idea
+node_modules
+package-lock.json
+# yarn.lock
+build
+dist
+es
+lib
+
+temp
+
+*.log
+
+.env
diff --git a/.release-it.json b/packages/rrweb/.release-it.json
similarity index 100%
rename from .release-it.json
rename to packages/rrweb/.release-it.json
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
new file mode 100644
index 0000000000..9b4cc86195
--- /dev/null
+++ b/packages/rrweb/package.json
@@ -0,0 +1,79 @@
+{
+  "name": "rrweb",
+  "version": "1.0.2",
+  "description": "record and replay the web",
+  "scripts": {
+    "prepare": "npm run prepack",
+    "prepack": "npm run bundle",
+    "test": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register -r ignore-styles -r jsdom-global/register test/**.test.ts",
+    "test:headless": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true PUPPETEER_HEADLESS=true mocha -r ts-node/register -r ignore-styles -r jsdom-global/register test/**.test.ts",
+    "test:watch": "PUPPETEER_HEADLESS=true npm run test -- --watch --watch-extensions js,ts",
+    "repl": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true ts-node scripts/repl.ts",
+    "bundle:browser": "cross-env BROWSER_ONLY=true rollup --config",
+    "bundle": "rollup --config",
+    "typings": "tsc -d --declarationDir typings",
+    "check-types": "tsc -noEmit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/rrweb-io/rrweb.git"
+  },
+  "keywords": [
+    "rrweb"
+  ],
+  "main": "lib/rrweb-all.js",
+  "module": "es/rrweb/src/entries/all.js",
+  "unpkg": "dist/rrweb.js",
+  "sideEffects": false,
+  "typings": "typings/entries/all.d.ts",
+  "files": [
+    "dist",
+    "lib",
+    "es",
+    "typings"
+  ],
+  "author": "yanzhen@smartx.com",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rrweb-io/rrweb/issues"
+  },
+  "homepage": "https://github.com/rrweb-io/rrweb#readme",
+  "devDependencies": {
+    "@types/chai": "^4.1.6",
+    "@types/inquirer": "0.0.43",
+    "@types/jsdom": "^16.2.12",
+    "@types/mocha": "^5.2.5",
+    "@types/node": "^12.20.16",
+    "@types/prettier": "^2.3.2",
+    "@types/puppeteer": "^5.4.3",
+    "chai": "^4.2.0",
+    "cross-env": "^5.2.0",
+    "fast-mhtml": "^1.1.9",
+    "ignore-styles": "^5.0.1",
+    "inquirer": "^6.2.1",
+    "jest-snapshot": "^23.6.0",
+    "jsdom": "^16.6.0",
+    "jsdom-global": "^3.0.2",
+    "mocha": "^5.2.0",
+    "prettier": "2.2.1",
+    "puppeteer": "^9.1.1",
+    "rollup": "^2.3.3",
+    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-node-resolve": "^3.4.0",
+    "rollup-plugin-postcss": "^3.1.1",
+    "rollup-plugin-rename-node-modules": "^1.1.0",
+    "rollup-plugin-terser": "^5.3.0",
+    "rollup-plugin-typescript": "^1.0.0",
+    "ts-node": "^7.0.1",
+    "tslib": "^1.9.3",
+    "tslint": "^4.5.1",
+    "typescript": "^3.9.5"
+  },
+  "dependencies": {
+    "@types/css-font-loading-module": "0.0.4",
+    "@xstate/fsm": "^1.4.0",
+    "fflate": "^0.4.4",
+    "mitt": "^1.1.3",
+    "rrweb-snapshot": "^1.1.7"
+  }
+}
diff --git a/rollup.config.js b/packages/rrweb/rollup.config.js
similarity index 100%
rename from rollup.config.js
rename to packages/rrweb/rollup.config.js
diff --git a/scripts/repl.ts b/packages/rrweb/scripts/repl.ts
similarity index 100%
rename from scripts/repl.ts
rename to packages/rrweb/scripts/repl.ts
diff --git a/src/entries/all.ts b/packages/rrweb/src/entries/all.ts
similarity index 100%
rename from src/entries/all.ts
rename to packages/rrweb/src/entries/all.ts
diff --git a/src/entries/record-pack.ts b/packages/rrweb/src/entries/record-pack.ts
similarity index 100%
rename from src/entries/record-pack.ts
rename to packages/rrweb/src/entries/record-pack.ts
diff --git a/src/entries/replay-unpack.ts b/packages/rrweb/src/entries/replay-unpack.ts
similarity index 100%
rename from src/entries/replay-unpack.ts
rename to packages/rrweb/src/entries/replay-unpack.ts
diff --git a/src/index.ts b/packages/rrweb/src/index.ts
similarity index 100%
rename from src/index.ts
rename to packages/rrweb/src/index.ts
diff --git a/src/packer/base.ts b/packages/rrweb/src/packer/base.ts
similarity index 100%
rename from src/packer/base.ts
rename to packages/rrweb/src/packer/base.ts
diff --git a/src/packer/index.ts b/packages/rrweb/src/packer/index.ts
similarity index 100%
rename from src/packer/index.ts
rename to packages/rrweb/src/packer/index.ts
diff --git a/src/packer/pack.ts b/packages/rrweb/src/packer/pack.ts
similarity index 100%
rename from src/packer/pack.ts
rename to packages/rrweb/src/packer/pack.ts
diff --git a/src/packer/unpack.ts b/packages/rrweb/src/packer/unpack.ts
similarity index 100%
rename from src/packer/unpack.ts
rename to packages/rrweb/src/packer/unpack.ts
diff --git a/src/plugins/console/record/error-stack-parser.ts b/packages/rrweb/src/plugins/console/record/error-stack-parser.ts
similarity index 100%
rename from src/plugins/console/record/error-stack-parser.ts
rename to packages/rrweb/src/plugins/console/record/error-stack-parser.ts
diff --git a/src/plugins/console/record/index.ts b/packages/rrweb/src/plugins/console/record/index.ts
similarity index 100%
rename from src/plugins/console/record/index.ts
rename to packages/rrweb/src/plugins/console/record/index.ts
diff --git a/src/plugins/console/record/stringify.ts b/packages/rrweb/src/plugins/console/record/stringify.ts
similarity index 100%
rename from src/plugins/console/record/stringify.ts
rename to packages/rrweb/src/plugins/console/record/stringify.ts
diff --git a/src/plugins/console/replay/index.ts b/packages/rrweb/src/plugins/console/replay/index.ts
similarity index 100%
rename from src/plugins/console/replay/index.ts
rename to packages/rrweb/src/plugins/console/replay/index.ts
diff --git a/src/record/iframe-manager.ts b/packages/rrweb/src/record/iframe-manager.ts
similarity index 100%
rename from src/record/iframe-manager.ts
rename to packages/rrweb/src/record/iframe-manager.ts
diff --git a/src/record/index.ts b/packages/rrweb/src/record/index.ts
similarity index 100%
rename from src/record/index.ts
rename to packages/rrweb/src/record/index.ts
diff --git a/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
similarity index 100%
rename from src/record/mutation.ts
rename to packages/rrweb/src/record/mutation.ts
diff --git a/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
similarity index 100%
rename from src/record/observer.ts
rename to packages/rrweb/src/record/observer.ts
diff --git a/src/record/shadow-dom-manager.ts b/packages/rrweb/src/record/shadow-dom-manager.ts
similarity index 100%
rename from src/record/shadow-dom-manager.ts
rename to packages/rrweb/src/record/shadow-dom-manager.ts
diff --git a/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
similarity index 100%
rename from src/replay/index.ts
rename to packages/rrweb/src/replay/index.ts
diff --git a/src/replay/machine.ts b/packages/rrweb/src/replay/machine.ts
similarity index 100%
rename from src/replay/machine.ts
rename to packages/rrweb/src/replay/machine.ts
diff --git a/src/replay/smoothscroll.ts b/packages/rrweb/src/replay/smoothscroll.ts
similarity index 100%
rename from src/replay/smoothscroll.ts
rename to packages/rrweb/src/replay/smoothscroll.ts
diff --git a/src/replay/styles/inject-style.ts b/packages/rrweb/src/replay/styles/inject-style.ts
similarity index 100%
rename from src/replay/styles/inject-style.ts
rename to packages/rrweb/src/replay/styles/inject-style.ts
diff --git a/src/replay/styles/style.css b/packages/rrweb/src/replay/styles/style.css
similarity index 100%
rename from src/replay/styles/style.css
rename to packages/rrweb/src/replay/styles/style.css
diff --git a/src/replay/timer.ts b/packages/rrweb/src/replay/timer.ts
similarity index 100%
rename from src/replay/timer.ts
rename to packages/rrweb/src/replay/timer.ts
diff --git a/src/replay/virtual-styles.ts b/packages/rrweb/src/replay/virtual-styles.ts
similarity index 100%
rename from src/replay/virtual-styles.ts
rename to packages/rrweb/src/replay/virtual-styles.ts
diff --git a/src/rrdom/index.ts b/packages/rrweb/src/rrdom/index.ts
similarity index 100%
rename from src/rrdom/index.ts
rename to packages/rrweb/src/rrdom/index.ts
diff --git a/src/rrdom/tree-node.ts b/packages/rrweb/src/rrdom/tree-node.ts
similarity index 100%
rename from src/rrdom/tree-node.ts
rename to packages/rrweb/src/rrdom/tree-node.ts
diff --git a/src/types.ts b/packages/rrweb/src/types.ts
similarity index 100%
rename from src/types.ts
rename to packages/rrweb/src/types.ts
diff --git a/src/utils.ts b/packages/rrweb/src/utils.ts
similarity index 100%
rename from src/utils.ts
rename to packages/rrweb/src/utils.ts
diff --git a/test.d.ts b/packages/rrweb/test.d.ts
similarity index 100%
rename from test.d.ts
rename to packages/rrweb/test.d.ts
diff --git a/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
similarity index 100%
rename from test/__snapshots__/integration.test.ts.snap
rename to packages/rrweb/test/__snapshots__/integration.test.ts.snap
diff --git a/test/__snapshots__/packer.test.ts.snap b/packages/rrweb/test/__snapshots__/packer.test.ts.snap
similarity index 100%
rename from test/__snapshots__/packer.test.ts.snap
rename to packages/rrweb/test/__snapshots__/packer.test.ts.snap
diff --git a/test/__snapshots__/record.test.ts.snap b/packages/rrweb/test/__snapshots__/record.test.ts.snap
similarity index 100%
rename from test/__snapshots__/record.test.ts.snap
rename to packages/rrweb/test/__snapshots__/record.test.ts.snap
diff --git a/test/__snapshots__/replayer.test.ts.snap b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
similarity index 100%
rename from test/__snapshots__/replayer.test.ts.snap
rename to packages/rrweb/test/__snapshots__/replayer.test.ts.snap
diff --git a/test/events/style-sheet-rule-events.ts b/packages/rrweb/test/events/style-sheet-rule-events.ts
similarity index 100%
rename from test/events/style-sheet-rule-events.ts
rename to packages/rrweb/test/events/style-sheet-rule-events.ts
diff --git a/test/html/block.html b/packages/rrweb/test/html/block.html
similarity index 100%
rename from test/html/block.html
rename to packages/rrweb/test/html/block.html
diff --git a/test/html/canvas.html b/packages/rrweb/test/html/canvas.html
similarity index 100%
rename from test/html/canvas.html
rename to packages/rrweb/test/html/canvas.html
diff --git a/test/html/form.html b/packages/rrweb/test/html/form.html
similarity index 100%
rename from test/html/form.html
rename to packages/rrweb/test/html/form.html
diff --git a/test/html/frame1.html b/packages/rrweb/test/html/frame1.html
similarity index 100%
rename from test/html/frame1.html
rename to packages/rrweb/test/html/frame1.html
diff --git a/test/html/frame2.html b/packages/rrweb/test/html/frame2.html
similarity index 100%
rename from test/html/frame2.html
rename to packages/rrweb/test/html/frame2.html
diff --git a/test/html/ignore.html b/packages/rrweb/test/html/ignore.html
similarity index 100%
rename from test/html/ignore.html
rename to packages/rrweb/test/html/ignore.html
diff --git a/test/html/log.html b/packages/rrweb/test/html/log.html
similarity index 100%
rename from test/html/log.html
rename to packages/rrweb/test/html/log.html
diff --git a/test/html/main.html b/packages/rrweb/test/html/main.html
similarity index 100%
rename from test/html/main.html
rename to packages/rrweb/test/html/main.html
diff --git a/test/html/mask-text.html b/packages/rrweb/test/html/mask-text.html
similarity index 100%
rename from test/html/mask-text.html
rename to packages/rrweb/test/html/mask-text.html
diff --git a/test/html/move-node.html b/packages/rrweb/test/html/move-node.html
similarity index 100%
rename from test/html/move-node.html
rename to packages/rrweb/test/html/move-node.html
diff --git a/test/html/mutation-observer.html b/packages/rrweb/test/html/mutation-observer.html
similarity index 100%
rename from test/html/mutation-observer.html
rename to packages/rrweb/test/html/mutation-observer.html
diff --git a/test/html/password.html b/packages/rrweb/test/html/password.html
similarity index 100%
rename from test/html/password.html
rename to packages/rrweb/test/html/password.html
diff --git a/test/html/react-styled-components.html b/packages/rrweb/test/html/react-styled-components.html
similarity index 100%
rename from test/html/react-styled-components.html
rename to packages/rrweb/test/html/react-styled-components.html
diff --git a/test/html/select2.html b/packages/rrweb/test/html/select2.html
similarity index 100%
rename from test/html/select2.html
rename to packages/rrweb/test/html/select2.html
diff --git a/test/html/shadow-dom.html b/packages/rrweb/test/html/shadow-dom.html
similarity index 100%
rename from test/html/shadow-dom.html
rename to packages/rrweb/test/html/shadow-dom.html
diff --git a/test/html/shuffle.html b/packages/rrweb/test/html/shuffle.html
similarity index 100%
rename from test/html/shuffle.html
rename to packages/rrweb/test/html/shuffle.html
diff --git a/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
similarity index 100%
rename from test/integration.test.ts
rename to packages/rrweb/test/integration.test.ts
diff --git a/test/machine.test.ts b/packages/rrweb/test/machine.test.ts
similarity index 100%
rename from test/machine.test.ts
rename to packages/rrweb/test/machine.test.ts
diff --git a/test/packer.test.ts b/packages/rrweb/test/packer.test.ts
similarity index 100%
rename from test/packer.test.ts
rename to packages/rrweb/test/packer.test.ts
diff --git a/test/record.test.ts b/packages/rrweb/test/record.test.ts
similarity index 100%
rename from test/record.test.ts
rename to packages/rrweb/test/record.test.ts
diff --git a/test/replay/virtual-styles.test.ts b/packages/rrweb/test/replay/virtual-styles.test.ts
similarity index 100%
rename from test/replay/virtual-styles.test.ts
rename to packages/rrweb/test/replay/virtual-styles.test.ts
diff --git a/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts
similarity index 100%
rename from test/replayer.test.ts
rename to packages/rrweb/test/replayer.test.ts
diff --git a/test/utils.ts b/packages/rrweb/test/utils.ts
similarity index 100%
rename from test/utils.ts
rename to packages/rrweb/test/utils.ts
diff --git a/tsconfig.json b/packages/rrweb/tsconfig.json
similarity index 100%
rename from tsconfig.json
rename to packages/rrweb/tsconfig.json
diff --git a/tslint.json b/packages/rrweb/tslint.json
similarity index 100%
rename from tslint.json
rename to packages/rrweb/tslint.json
diff --git a/typings/boost.d.ts b/packages/rrweb/typings/boost.d.ts
similarity index 100%
rename from typings/boost.d.ts
rename to packages/rrweb/typings/boost.d.ts
diff --git a/typings/entries/all.d.ts b/packages/rrweb/typings/entries/all.d.ts
similarity index 100%
rename from typings/entries/all.d.ts
rename to packages/rrweb/typings/entries/all.d.ts
diff --git a/typings/entries/record-pack.d.ts b/packages/rrweb/typings/entries/record-pack.d.ts
similarity index 100%
rename from typings/entries/record-pack.d.ts
rename to packages/rrweb/typings/entries/record-pack.d.ts
diff --git a/typings/entries/replay-unpack.d.ts b/packages/rrweb/typings/entries/replay-unpack.d.ts
similarity index 100%
rename from typings/entries/replay-unpack.d.ts
rename to packages/rrweb/typings/entries/replay-unpack.d.ts
diff --git a/typings/index.d.ts b/packages/rrweb/typings/index.d.ts
similarity index 100%
rename from typings/index.d.ts
rename to packages/rrweb/typings/index.d.ts
diff --git a/typings/packer/base.d.ts b/packages/rrweb/typings/packer/base.d.ts
similarity index 100%
rename from typings/packer/base.d.ts
rename to packages/rrweb/typings/packer/base.d.ts
diff --git a/typings/packer/index.d.ts b/packages/rrweb/typings/packer/index.d.ts
similarity index 100%
rename from typings/packer/index.d.ts
rename to packages/rrweb/typings/packer/index.d.ts
diff --git a/typings/packer/pack.d.ts b/packages/rrweb/typings/packer/pack.d.ts
similarity index 100%
rename from typings/packer/pack.d.ts
rename to packages/rrweb/typings/packer/pack.d.ts
diff --git a/typings/packer/unpack.d.ts b/packages/rrweb/typings/packer/unpack.d.ts
similarity index 100%
rename from typings/packer/unpack.d.ts
rename to packages/rrweb/typings/packer/unpack.d.ts
diff --git a/typings/plugins/console/record/error-stack-parser.d.ts b/packages/rrweb/typings/plugins/console/record/error-stack-parser.d.ts
similarity index 100%
rename from typings/plugins/console/record/error-stack-parser.d.ts
rename to packages/rrweb/typings/plugins/console/record/error-stack-parser.d.ts
diff --git a/typings/plugins/console/record/index.d.ts b/packages/rrweb/typings/plugins/console/record/index.d.ts
similarity index 100%
rename from typings/plugins/console/record/index.d.ts
rename to packages/rrweb/typings/plugins/console/record/index.d.ts
diff --git a/typings/plugins/console/record/stringify.d.ts b/packages/rrweb/typings/plugins/console/record/stringify.d.ts
similarity index 100%
rename from typings/plugins/console/record/stringify.d.ts
rename to packages/rrweb/typings/plugins/console/record/stringify.d.ts
diff --git a/typings/plugins/console/replay/index.d.ts b/packages/rrweb/typings/plugins/console/replay/index.d.ts
similarity index 100%
rename from typings/plugins/console/replay/index.d.ts
rename to packages/rrweb/typings/plugins/console/replay/index.d.ts
diff --git a/typings/record/collection.d.ts b/packages/rrweb/typings/record/collection.d.ts
similarity index 100%
rename from typings/record/collection.d.ts
rename to packages/rrweb/typings/record/collection.d.ts
diff --git a/typings/record/error-stack-parser.d.ts b/packages/rrweb/typings/record/error-stack-parser.d.ts
similarity index 100%
rename from typings/record/error-stack-parser.d.ts
rename to packages/rrweb/typings/record/error-stack-parser.d.ts
diff --git a/typings/record/iframe-manager.d.ts b/packages/rrweb/typings/record/iframe-manager.d.ts
similarity index 100%
rename from typings/record/iframe-manager.d.ts
rename to packages/rrweb/typings/record/iframe-manager.d.ts
diff --git a/typings/record/index.d.ts b/packages/rrweb/typings/record/index.d.ts
similarity index 100%
rename from typings/record/index.d.ts
rename to packages/rrweb/typings/record/index.d.ts
diff --git a/typings/record/mutation.d.ts b/packages/rrweb/typings/record/mutation.d.ts
similarity index 100%
rename from typings/record/mutation.d.ts
rename to packages/rrweb/typings/record/mutation.d.ts
diff --git a/typings/record/observer.d.ts b/packages/rrweb/typings/record/observer.d.ts
similarity index 100%
rename from typings/record/observer.d.ts
rename to packages/rrweb/typings/record/observer.d.ts
diff --git a/typings/record/shadow-dom-manager.d.ts b/packages/rrweb/typings/record/shadow-dom-manager.d.ts
similarity index 100%
rename from typings/record/shadow-dom-manager.d.ts
rename to packages/rrweb/typings/record/shadow-dom-manager.d.ts
diff --git a/typings/record/stringify.d.ts b/packages/rrweb/typings/record/stringify.d.ts
similarity index 100%
rename from typings/record/stringify.d.ts
rename to packages/rrweb/typings/record/stringify.d.ts
diff --git a/typings/replay/index.d.ts b/packages/rrweb/typings/replay/index.d.ts
similarity index 100%
rename from typings/replay/index.d.ts
rename to packages/rrweb/typings/replay/index.d.ts
diff --git a/typings/replay/machine.d.ts b/packages/rrweb/typings/replay/machine.d.ts
similarity index 100%
rename from typings/replay/machine.d.ts
rename to packages/rrweb/typings/replay/machine.d.ts
diff --git a/typings/replay/smoothscroll.d.ts b/packages/rrweb/typings/replay/smoothscroll.d.ts
similarity index 100%
rename from typings/replay/smoothscroll.d.ts
rename to packages/rrweb/typings/replay/smoothscroll.d.ts
diff --git a/typings/replay/styles/inject-style.d.ts b/packages/rrweb/typings/replay/styles/inject-style.d.ts
similarity index 100%
rename from typings/replay/styles/inject-style.d.ts
rename to packages/rrweb/typings/replay/styles/inject-style.d.ts
diff --git a/typings/replay/timer.d.ts b/packages/rrweb/typings/replay/timer.d.ts
similarity index 100%
rename from typings/replay/timer.d.ts
rename to packages/rrweb/typings/replay/timer.d.ts
diff --git a/typings/replay/virtual-styles.d.ts b/packages/rrweb/typings/replay/virtual-styles.d.ts
similarity index 100%
rename from typings/replay/virtual-styles.d.ts
rename to packages/rrweb/typings/replay/virtual-styles.d.ts
diff --git a/typings/rrdom/index.d.ts b/packages/rrweb/typings/rrdom/index.d.ts
similarity index 100%
rename from typings/rrdom/index.d.ts
rename to packages/rrweb/typings/rrdom/index.d.ts
diff --git a/typings/rrdom/tree-node.d.ts b/packages/rrweb/typings/rrdom/tree-node.d.ts
similarity index 100%
rename from typings/rrdom/tree-node.d.ts
rename to packages/rrweb/typings/rrdom/tree-node.d.ts
diff --git a/typings/types.d.ts b/packages/rrweb/typings/types.d.ts
similarity index 100%
rename from typings/types.d.ts
rename to packages/rrweb/typings/types.d.ts
diff --git a/typings/utils.d.ts b/packages/rrweb/typings/utils.d.ts
similarity index 98%
rename from typings/utils.d.ts
rename to packages/rrweb/typings/utils.d.ts
index 763fa503c3..e259f17697 100644
--- a/typings/utils.d.ts
+++ b/packages/rrweb/typings/utils.d.ts
@@ -46,6 +46,7 @@ export declare class TreeIndex {
         inputMap: TreeIndex['inputMap'];
     };
     private reset;
+    idRemoved(id: number): boolean;
 }
 declare type ResolveTree = {
     value: addedNodeMutation;
diff --git a/yarn.lock b/yarn.lock
index 30d9e62042..e0138bfbe5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,42 +2,152 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@^7.0.0-beta.35", "@babel/code-frame@^7.5.5":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
-  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+"@babel/code-frame@7.12.11":
+  version "7.12.11"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
+  integrity sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/helper-validator-identifier@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
-  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.0.0-beta.35", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.5.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
+  integrity sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==
+  dependencies:
+    "@babel/highlight" "^7.14.5"
+
+"@babel/helper-validator-identifier@^7.14.5":
+  version "7.14.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.8.tgz#32be33a756f29e278a0d644fa08a2c9e0f88a34c"
+  integrity sha512-ZGy6/XQjllhYQrNw/3zfWRwZCTVSiBLZ9DHVZxn9n2gip/7ab8mv2TWlKPIBk26RwedCBoWdjLmn+t9na2Gcow==
 
-"@babel/highlight@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
-  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+"@babel/highlight@^7.10.4", "@babel/highlight@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
+  integrity sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.10.4"
+    "@babel/helper-validator-identifier" "^7.14.5"
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@eslint/eslintrc@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
+  integrity sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.1.1"
+    espree "^7.3.0"
+    globals "^13.9.0"
+    ignore "^4.0.6"
+    import-fresh "^3.2.1"
+    js-yaml "^3.13.1"
+    minimatch "^3.0.4"
+    strip-json-comments "^3.1.1"
+
+"@humanwhocodes/config-array@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
+  integrity sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==
+  dependencies:
+    "@humanwhocodes/object-schema" "^1.2.0"
+    debug "^4.1.1"
+    minimatch "^3.0.4"
+
+"@humanwhocodes/object-schema@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf"
+  integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
+
+"@polka/url@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-0.5.0.tgz#b21510597fd601e5d7c95008b76bf0d254ebfd31"
+  integrity sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==
+
+"@rollup/plugin-commonjs@^11.0.0":
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-11.1.0.tgz#60636c7a722f54b41e419e1709df05c7234557ef"
+  integrity sha512-Ycr12N3ZPN96Fw2STurD21jMqzKwL9QuFhms3SD7KKRK7oaXUsBU9Zt0jL/rOPHiPYisI21/rXGO3jr9BnLHUA==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.8"
+    commondir "^1.0.1"
+    estree-walker "^1.0.1"
+    glob "^7.1.2"
+    is-reference "^1.1.2"
+    magic-string "^0.25.2"
+    resolve "^1.11.0"
+
+"@rollup/plugin-node-resolve@^7.0.0":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
+  integrity sha512-RxtSL3XmdTAE2byxekYLnx+98kEUOrPHF/KRVjLH+DEIHy6kjIw7YINQzn+NXiH/NTrQLAwYs0GWB+csWygA9Q==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.8"
+    "@types/resolve" "0.0.8"
+    builtin-modules "^3.1.0"
+    is-module "^1.0.0"
+    resolve "^1.14.2"
+
+"@rollup/plugin-typescript@^4.0.0":
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-4.1.2.tgz#6f910430276ae3e53a47a12ad65820627e7b6ad9"
+  integrity sha512-+7UlGat/99e2JbmGNnIauxwEhYLwrL7adO/tSJxUN57xrrS3Ps+ZzYpLCDGPZJ57j+ZJTZLLN89KXW9JMEB+jg==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.1"
+    resolve "^1.14.1"
+
+"@rollup/pluginutils@4":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec"
+  integrity sha512-clDjivHqWGXi7u+0d2r2sBi4Ie6VLEAzWMIkvJLnDmxoOhBYOTfzGbOQBA32THHm11/LiJbd01tJUpJsbshSWQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
+"@rollup/pluginutils@^3.0.1", "@rollup/pluginutils@^3.0.8":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
+  integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
+  dependencies:
+    "@types/estree" "0.0.39"
+    estree-walker "^1.0.1"
+    picomatch "^2.2.2"
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
-"@types/chai@^4.1.6":
-  version "4.2.14"
-  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.2.14.tgz#44d2dd0b5de6185089375d976b4ec5caf6861193"
-  integrity sha512-G+ITQPXkwTrslfG5L/BksmbLUA0M1iybEsmCWPqzSxsRRhJZimBKJkoMi8fr/CPygPTj4zO5pJH7I2/cm9M7SQ==
+"@tsconfig/svelte@^1.0.0":
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/@tsconfig/svelte/-/svelte-1.0.13.tgz#2fa34376627192c0d643ce54964915e2bd3a58e4"
+  integrity sha512-5lYJP45Xllo4yE/RUBccBT32eBlRDbqN8r1/MIvQbKxW3aFqaYPCNgm8D5V20X4ShHcwvYWNlKg3liDh1MlBoA==
+
+"@types/chai@^4.1.4", "@types/chai@^4.1.6":
+  version "4.2.21"
+  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.2.21.tgz#9f35a5643129df132cf3b5c1ec64046ea1af0650"
+  integrity sha512-yd+9qKmJxm496BOV9CMNaey8TWsikaZOwMRwPHQIjcOJM9oV+fi9ZMNw3JsVnbEEbo2gRTDnGEBv8pjyn67hNg==
 
 "@types/css-font-loading-module@0.0.4":
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/@types/css-font-loading-module/-/css-font-loading-module-0.0.4.tgz#94a835e27d1af444c65cba88523533c174463d64"
   integrity sha512-ENdXf7MW4m9HeDojB2Ukbi7lYMIuQNBHVf98dbzaiG4EEJREBd6oleVAjrLRCrp7dm6CK1mmdmU9tcgF61acbw==
 
+"@types/eslint-visitor-keys@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
+  integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
+
+"@types/estree@*":
+  version "0.0.50"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83"
+  integrity sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==
+
+"@types/estree@0.0.39":
+  version "0.0.39"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
+  integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
+
 "@types/inquirer@0.0.43":
   version "0.0.43"
   resolved "https://registry.yarnpkg.com/@types/inquirer/-/inquirer-0.0.43.tgz#1eb0bbb4648e6cc568bd396c1e989f620ad01273"
@@ -46,24 +156,34 @@
     "@types/rx" "*"
     "@types/through" "*"
 
-"@types/jsdom@^16.2.12":
-  version "16.2.12"
-  resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-16.2.12.tgz#2d47f5c9f7e40b4d5d9b5f0534c736dc475f9569"
-  integrity sha512-rD68Q2XSKBYOl38Tb9jbPuqZeTtpw09dFeuKWi7yhlZVfY8rV4xnQmISNQQZfhkQJGpJWp2qCmmrWjhiqDFNvA==
+"@types/jsdom@^16.2.12", "@types/jsdom@^16.2.4":
+  version "16.2.13"
+  resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-16.2.13.tgz#126c8b7441b159d6234610a48de77b6066f1823f"
+  integrity sha512-8JQCjdeAidptSsOcRWk2iTm9wCcwn9l+kRG6k5bzUacrnm1ezV4forq0kWjUih/tumAeoG+OspOvQEbbRucBTw==
   dependencies:
     "@types/node" "*"
     "@types/parse5" "*"
     "@types/tough-cookie" "*"
 
+"@types/json-schema@^7.0.3":
+  version "7.0.8"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.8.tgz#edf1bf1dbf4e04413ca8e5b17b3b7d7d54b59818"
+  integrity sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==
+
 "@types/mocha@^5.2.5":
   version "5.2.7"
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-5.2.7.tgz#315d570ccb56c53452ff8638738df60726d5b6ea"
   integrity sha512-NYrtPht0wGzhwe9+/idPaBB+TqkY9AhTvOLMkThm0IoEfLaiVQZwBwyJ5puCkO3AUCWrmcoePjp2mbFocKy4SQ==
 
 "@types/node@*":
-  version "14.14.2"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.2.tgz#d25295f9e4ca5989a2c610754dc02a9721235eeb"
-  integrity sha512-jeYJU2kl7hL9U5xuI/BhKPZ4vqGM/OmK6whiFAXVhlstzZhVamWhDSmHyGLIp+RVyuF9/d0dqr2P85aFj4BvJg==
+  version "16.4.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.0.tgz#2c219eaa3b8d1e4d04f4dd6e40bc68c7467d5272"
+  integrity sha512-HrJuE7Mlqcjj+00JqMWpZ3tY8w7EUd+S0U3L1+PQSWiXZbOgyQDvi+ogoUxaHApPJq5diKxYBQwA3iIlNcPqOg==
+
+"@types/node@^10.11.3":
+  version "10.17.60"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.60.tgz#35f3d6213daed95da7f0f73e75bcc6980e90597b"
+  integrity sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==
 
 "@types/node@^12.20.16":
   version "12.20.16"
@@ -71,26 +191,45 @@
   integrity sha512-6CLxw83vQf6DKqXxMPwl8qpF8I7THFZuIwLt4TnNsumxkp1VsRZWT8txQxncT/Rl2UojTsFzWgDG4FRMwafrlA==
 
 "@types/parse5@*":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.0.tgz#38590dc2c3cf5717154064e3ee9b6947ee21b299"
-  integrity sha512-oPwPSj4a1wu9rsXTEGIJz91ISU725t0BmSnUhb57sI+M8XEmvUop84lzuiYdq0Y5M6xLY8DBPg0C2xEQKLyvBA==
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.1.tgz#f8ae4fbcd2b9ba4ff934698e28778961f9cb22ca"
+  integrity sha512-ARATsLdrGPUnaBvxLhUlnltcMgn7pQG312S8ccdYlnyijabrX9RN/KN/iGj9Am96CoW8e/K9628BA7Bv4XHdrA==
 
 "@types/prettier@^2.3.2":
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.3.2.tgz#fc8c2825e4ed2142473b4a81064e6e081463d1b3"
   integrity sha512-eI5Yrz3Qv4KPUa/nSIAi0h+qX0XyewOliug5F2QAtuRg6Kjg6jfmxe1GIwoIRhZspD1A0RP8ANrPwvEXXtRFog==
 
+"@types/pug@^2.0.4":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@types/pug/-/pug-2.0.5.tgz#69bc700934dd473c7ab97270bd2dbacefe562231"
+  integrity sha512-LOnASQoeNZMkzexRuyqcBBDZ6rS+rQxUMkmj5A0PkhhiSZivLIuz6Hxyr1mkGoEZEkk66faROmpMi4fFkrKsBA==
+
+"@types/puppeteer@^1.12.4":
+  version "1.20.8"
+  resolved "https://registry.yarnpkg.com/@types/puppeteer/-/puppeteer-1.20.8.tgz#fadbf64f7ac497e9248297beb6ed6a01705c0918"
+  integrity sha512-yJZzz9NeEmTxRGaZzUxUtBIEAoVXTtAx40mG8K0eDPwEeWyuxXKC7Lredxs6uNcgbvMDc8xzYy4v54jbbpoqrg==
+  dependencies:
+    "@types/node" "*"
+
 "@types/puppeteer@^5.4.3":
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/@types/puppeteer/-/puppeteer-5.4.3.tgz#cdca84aa7751d77448d8a477dbfa0af1f11485f2"
-  integrity sha512-3nE8YgR9DIsgttLW+eJf6mnXxq8Ge+27m5SU3knWmrlfl6+KOG0Bf9f7Ua7K+C4BnaTMAh3/UpySqdAYvrsvjg==
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/@types/puppeteer/-/puppeteer-5.4.4.tgz#e92abeccc4f46207c3e1b38934a1246be080ccd0"
+  integrity sha512-3Nau+qi69CN55VwZb0ATtdUAlYlqOOQ3OfQfq0Hqgc4JMFXiQT/XInlwQ9g6LbicDslE6loIFsXFklGh5XmI6Q==
   dependencies:
     "@types/node" "*"
 
 "@types/q@^1.5.1":
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
-  integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
+  integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
+
+"@types/resolve@0.0.8":
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
+  integrity sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==
+  dependencies:
+    "@types/node" "*"
 
 "@types/rx-core-binding@*":
   version "4.0.4"
@@ -193,6 +332,13 @@
     "@types/rx-lite-time" "*"
     "@types/rx-lite-virtualtime" "*"
 
+"@types/sass@^1.16.0":
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/@types/sass/-/sass-1.16.1.tgz#cf465bd1fea486d0331f760db023de14daf4980d"
+  integrity sha512-iZUcRrGuz/Tbg3loODpW7vrQJkUtpY2fFSf4ELqqkApcS2TkZ1msk7ie8iZPB86lDOP8QOTTmuvWjc5S0R9OjQ==
+  dependencies:
+    "@types/node" "*"
+
 "@types/through@*":
   version "0.0.30"
   resolved "https://registry.yarnpkg.com/@types/through/-/through-0.0.30.tgz#e0e42ce77e897bd6aead6f6ea62aeb135b8a3895"
@@ -206,16 +352,76 @@
   integrity sha512-Y0K95ThC3esLEYD6ZuqNek29lNX2EM1qxV8y2FTLUB0ff5wWrk7az+mLrnNFUnaXcgKye22+sFBRXOgpPILZNg==
 
 "@types/yauzl@^2.9.1":
-  version "2.9.1"
-  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.1.tgz#d10f69f9f522eef3cf98e30afb684a1e1ec923af"
-  integrity sha512-A1b8SU4D10uoPjwb0lnHmmu8wZhR9d+9o2PKBQT2jU5YPTKsxac6M2qGAdY7VcL+dHHhARVUDmeg0rOrcd9EjA==
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.2.tgz#c48e5d56aff1444409e39fa164b0b4d4552a7b7a"
+  integrity sha512-8uALY5LTvSuHgloDVUvWP3pIauILm+8/0pDMokuDYIoNsOkSwd5AiHBTSEJjKTDcZr5z8UpgOWZkxBF4iJftoA==
   dependencies:
     "@types/node" "*"
 
+"@typescript-eslint/eslint-plugin@^3.7.0":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.10.1.tgz#7e061338a1383f59edc204c605899f93dc2e2c8f"
+  integrity sha512-PQg0emRtzZFWq6PxBcdxRH3QIQiyFO3WCVpRL3fgj5oQS3CDs3AeAKfv4DxNhzn8ITdNJGJ4D3Qw8eAJf3lXeQ==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "3.10.1"
+    debug "^4.1.1"
+    functional-red-black-tree "^1.0.1"
+    regexpp "^3.0.0"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
+"@typescript-eslint/experimental-utils@3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.10.1.tgz#e179ffc81a80ebcae2ea04e0332f8b251345a686"
+  integrity sha512-DewqIgscDzmAfd5nOGe4zm6Bl7PKtMG2Ad0KG8CUZAHlXfAKTF9Ol5PXhiMh39yRL2ChRH1cuuUGOcVyyrhQIw==
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+    "@typescript-eslint/types" "3.10.1"
+    "@typescript-eslint/typescript-estree" "3.10.1"
+    eslint-scope "^5.0.0"
+    eslint-utils "^2.0.0"
+
+"@typescript-eslint/parser@^3.7.0":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-3.10.1.tgz#1883858e83e8b442627e1ac6f408925211155467"
+  integrity sha512-Ug1RcWcrJP02hmtaXVS3axPPTTPnZjupqhgj+NnZ6BCkwSImWk/283347+x9wN+lqOdK9Eo3vsyiyDHgsmiEJw==
+  dependencies:
+    "@types/eslint-visitor-keys" "^1.0.0"
+    "@typescript-eslint/experimental-utils" "3.10.1"
+    "@typescript-eslint/types" "3.10.1"
+    "@typescript-eslint/typescript-estree" "3.10.1"
+    eslint-visitor-keys "^1.1.0"
+
+"@typescript-eslint/types@3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.10.1.tgz#1d7463fa7c32d8a23ab508a803ca2fe26e758727"
+  integrity sha512-+3+FCUJIahE9q0lDi1WleYzjCwJs5hIsbugIgnbB+dSCYUxl8L6PwmsyOPFZde2hc1DlTo/xnkOgiTLSyAbHiQ==
+
+"@typescript-eslint/typescript-estree@3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.10.1.tgz#fd0061cc38add4fad45136d654408569f365b853"
+  integrity sha512-QbcXOuq6WYvnB3XPsZpIwztBoquEYLXh2MtwVU+kO8jgYCiv4G5xrSP/1wg4tkvrEE+esZVquIPX/dxPlePk1w==
+  dependencies:
+    "@typescript-eslint/types" "3.10.1"
+    "@typescript-eslint/visitor-keys" "3.10.1"
+    debug "^4.1.1"
+    glob "^7.1.6"
+    is-glob "^4.0.1"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
+"@typescript-eslint/visitor-keys@3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.10.1.tgz#cd4274773e3eb63b2e870ac602274487ecd1e931"
+  integrity sha512-9JgC82AaQeglebjZMgYR5wgmfUdUc+EitGUUMW8u2nDckaeimzW+VsoLV6FoimPv2id3VQzfjwBxEMVz08ameQ==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
 "@xstate/fsm@^1.4.0":
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/@xstate/fsm/-/fsm-1.5.1.tgz#b1ebedc77b11e4956fda0a6429cef986cd17979e"
-  integrity sha512-t8blLI0e90jCE71yUQHLH5uEljD1v0aC8PKkHUtNWEnXt81EOj7xBjnlwmaHn/8cmE2aSygiBElUpkRZUV9hXA==
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@xstate/fsm/-/fsm-1.6.1.tgz#c92972b835540c4e3c5e14277f40dbcbdaee9571"
+  integrity sha512-xYKDNuPR36/fUK+jmhM+oauBmbdUAfuJKnDjg3/7NbN+Pj03TX7e94LXnzkwGgAR+U/HWoMqM5UPTuGIYfIx9g==
 
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.5"
@@ -238,12 +444,17 @@ acorn-globals@^6.0.0:
     acorn "^7.1.1"
     acorn-walk "^7.1.1"
 
+acorn-jsx@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
 acorn-walk@^7.1.1:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
-acorn@^7.1.1:
+acorn@^7.1.1, acorn@^7.4.0:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
@@ -260,6 +471,33 @@ agent-base@6:
   dependencies:
     debug "4"
 
+agent-base@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
+  integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==
+  dependencies:
+    es6-promisify "^5.0.0"
+
+ajv@^6.10.0, ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ajv@^8.0.1:
+  version "8.6.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.6.2.tgz#2fb45e0e5fcbc0813326c1c3da535d1881bb0571"
+  integrity sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
 alphanum-sort@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
@@ -272,6 +510,11 @@ ansi-align@^2.0.0:
   dependencies:
     string-width "^2.0.0"
 
+ansi-colors@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
+  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
+
 ansi-escapes@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
@@ -292,6 +535,11 @@ ansi-regex@^4.1.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
   integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
 
+ansi-regex@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
+  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -304,13 +552,21 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
-ansi-styles@^4.1.0:
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
   integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
   dependencies:
     color-convert "^2.0.1"
 
+anymatch@~3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -335,6 +591,18 @@ array-flatten@1.1.1:
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
   integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
 
+array-union@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
+  dependencies:
+    array-uniq "^1.0.1"
+
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+  integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
+
 array-unique@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
@@ -350,6 +618,16 @@ assertion-error@^1.1.0:
   resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
   integrity sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==
 
+astral-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
+  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
+
+async-limiter@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
+  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -383,9 +661,9 @@ babel-types@^6.0.0:
     to-fast-properties "^1.0.3"
 
 balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
 base64-js@^1.3.1:
   version "1.5.1"
@@ -397,6 +675,11 @@ big.js@^5.2.2:
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
 bl@^4.0.3:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
@@ -462,6 +745,13 @@ braces@^1.8.2:
     preserve "^0.2.0"
     repeat-element "^1.1.2"
 
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
 browser-process-hrtime@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
@@ -513,11 +803,24 @@ builtin-modules@^2.0.0:
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-2.0.0.tgz#60b7ef5ae6546bd7deefa74b08b62a43a232648e"
   integrity sha512-3U5kUA5VPsRUA3nofm/BXX7GVHKfxz0hOBAPxXrIvHzlDRkQVqEn6yi8QJegxl4LzOHLdvb7XF5dVawa/VVYBg==
 
+builtin-modules@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.2.0.tgz#45d5db99e7ee5e6bc4f362e008bf917ab5049887"
+  integrity sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==
+
 bytes@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
   integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
 
+call-bind@^1.0.0, call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
 caller-callsite@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
@@ -537,6 +840,11 @@ callsites@^2.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
   integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
 
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
 camelcase@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
@@ -553,25 +861,25 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001219:
-  version "1.0.30001230"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz#8135c57459854b2240b57a4a6786044bdc5a9f71"
-  integrity sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==
+  version "1.0.30001246"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001246.tgz#fe17d9919f87124d6bb416ef7b325356d69dc76c"
+  integrity sha512-Tc+ff0Co/nFNbLOrziBXmMVtpt9S2c2Y+Z9Nk9Khj09J+0zR9ejvIW5qkZAErCbOrVODCx/MN+GpB5FNBs5GFA==
 
 capture-stack-trace@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
   integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==
 
-chai@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-4.2.0.tgz#760aa72cf20e3795e84b12877ce0e83737aa29e5"
-  integrity sha512-XQU3bhBukrOsQCuwZndwGcCVQHyZi53fQ6Ys1Fym7E4olpIqqZZhhoFJoaKVvV17lWQoXYwgWN2nF5crA8J2jw==
+chai@^4.1.2, chai@^4.2.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.4.tgz#b55e655b31e1eac7099be4c08c21964fce2e6c49"
+  integrity sha512-yS5H68VYOCtN1cjfwumDSuzn/9c+yza4f3reKXlE5rUg7SFcCEy90gJvydNgOYtblyf4Zi6jIWRnXOgErta0KA==
   dependencies:
     assertion-error "^1.1.0"
     check-error "^1.0.2"
     deep-eql "^3.0.1"
     get-func-name "^2.0.0"
-    pathval "^1.1.0"
+    pathval "^1.1.1"
     type-detect "^4.0.5"
 
 chalk@^1.1.3:
@@ -595,9 +903,9 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.1, chalk@^2.4.2:
     supports-color "^5.3.0"
 
 chalk@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
-  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.1.tgz#c80b3fab28bf6371e6863325eee67e618b77e6ad"
+  integrity sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==
   dependencies:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
@@ -636,6 +944,21 @@ cheerio@^1.0.0-rc.3:
     parse5-htmlparser2-tree-adapter "^6.0.1"
     tslib "^2.2.0"
 
+chokidar@^3.4.1, chokidar@^3.5.0:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
+  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chownr@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
@@ -672,7 +995,7 @@ coa@^2.0.2:
     chalk "^2.4.1"
     q "^1.1.2"
 
-color-convert@^1.9.0, color-convert@^1.9.1:
+color-convert@^1.9.0, color-convert@^1.9.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -696,21 +1019,21 @@ color-name@^1.0.0, color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.5.4:
-  version "1.5.5"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.5.tgz#65474a8f0e7439625f3d27a6a19d89fc45223014"
-  integrity sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==
+color-string@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.6.0.tgz#c3915f61fe267672cb7e1e064c9d692219f6c312"
+  integrity sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==
   dependencies:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
 color@^3.0.0:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
-  integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
+  integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
   dependencies:
-    color-convert "^1.9.1"
-    color-string "^1.5.4"
+    color-convert "^1.9.3"
+    color-string "^1.6.0"
 
 colorette@^1.2.2:
   version "1.2.2"
@@ -734,16 +1057,31 @@ commander@2.15.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
   integrity sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==
 
-commander@^2.20.0:
+commander@^2.19.0, commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
+concat-stream@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
 concat-with-sourcemaps@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz#d4ea93f05ae25790951b99e7b3b09e3908a4082e"
@@ -763,6 +1101,11 @@ configstore@^3.0.0:
     write-file-atomic "^2.0.0"
     xdg-basedir "^3.0.0"
 
+console-clear@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/console-clear/-/console-clear-1.1.1.tgz#995e20cbfbf14dd792b672cde387bd128d674bf7"
+  integrity sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==
+
 content-disposition@0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
@@ -786,9 +1129,14 @@ cookie@0.4.0:
   integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
 
 core-js@^2.4.0:
-  version "2.6.11"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
-  integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
+core-util-is@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
 cosmiconfig@^5.0.0:
   version "5.2.1"
@@ -834,6 +1182,15 @@ cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+cross-spawn@^7.0.2:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
 crypto-random-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
@@ -906,15 +1263,7 @@ css-tree@1.0.0-alpha.37:
     mdn-data "2.0.4"
     source-map "^0.6.1"
 
-css-tree@1.0.0-alpha.39:
-  version "1.0.0-alpha.39"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.39.tgz#2bff3ffe1bb3f776cf7eefd91ee5cba77a149eeb"
-  integrity sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==
-  dependencies:
-    mdn-data "2.0.6"
-    source-map "^0.6.1"
-
-css-tree@^1.0.0-alpha.39:
+css-tree@^1.0.0-alpha.39, css-tree@^1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
   integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
@@ -937,10 +1286,10 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-cssnano-preset-default@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
-  integrity sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==
+cssnano-preset-default@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.8.tgz#920622b1fc1e95a34e8838203f1397a504f2d3ff"
+  integrity sha512-LdAyHuq+VRyeVREFmuxUZR1TXjQm8QQU/ktoo/x7bz+SdOge1YKc5eMN6pRW7YWBmyq59CqYba1dJ5cUukEjLQ==
   dependencies:
     css-declaration-sorter "^4.0.1"
     cssnano-util-raw-cache "^4.0.1"
@@ -970,7 +1319,7 @@ cssnano-preset-default@^4.0.7:
     postcss-ordered-values "^4.1.2"
     postcss-reduce-initial "^4.0.3"
     postcss-reduce-transforms "^4.0.2"
-    postcss-svgo "^4.0.2"
+    postcss-svgo "^4.0.3"
     postcss-unique-selectors "^4.0.1"
 
 cssnano-util-get-arguments@^4.0.0:
@@ -996,21 +1345,21 @@ cssnano-util-same-parent@^4.0.0:
   integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
 
 cssnano@^4.1.10:
-  version "4.1.10"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
-  integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==
+  version "4.1.11"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.11.tgz#c7b5f5b81da269cb1fd982cb960c1200910c9a99"
+  integrity sha512-6gZm2htn7xIPJOHY824ERgj8cNPgPxyCSnkXc4v7YvNW+TdVfzgngHcEhy/8D11kUWRUMbke+tC+AUcUsnMz2g==
   dependencies:
     cosmiconfig "^5.0.0"
-    cssnano-preset-default "^4.0.7"
+    cssnano-preset-default "^4.0.8"
     is-resolvable "^1.0.0"
     postcss "^7.0.0"
 
 csso@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-4.0.3.tgz#0d9985dc852c7cc2b2cacfbbe1079014d1a8e903"
-  integrity sha512-NL3spysxUkcrOgnpsT4Xdl2aiEiBG6bXswAABQVHcMrfjjBisFOKwLDOmf4wf32aPdcJws1zds2B0Rg+jqMyHQ==
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
+  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
   dependencies:
-    css-tree "1.0.0-alpha.39"
+    css-tree "^1.1.2"
 
 cssom@^0.4.4:
   version "0.4.4"
@@ -1038,7 +1387,7 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-debug@2.6.9:
+debug@2.6.9, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -1052,13 +1401,20 @@ debug@3.1.0:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.1.0, debug@^4.1.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
-  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
+debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
+  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
   dependencies:
     ms "2.1.2"
 
+debug@^3.1.0:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
 decimal.js@^10.2.1:
   version "10.3.1"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.3.1.tgz#d8c3a444a9c6774ba60ca6ad7261c3a94fd5e783"
@@ -1076,7 +1432,7 @@ deep-extend@^0.6.0:
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
-deep-is@~0.1.3:
+deep-is@^0.1.3, deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
@@ -1103,6 +1459,11 @@ destroy@~1.0.4:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
   integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
+detect-indent@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
+  integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
+
 devtools-protocol@0.0.869402:
   version "0.0.869402"
   resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.869402.tgz#03ade701761742e43ae4de5dc188bcd80f156d8d"
@@ -1113,6 +1474,13 @@ diff@3.5.0, diff@^3.0.1, diff@^3.1.0, diff@^3.2.0:
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
   integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
 
+doctrine@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
+  dependencies:
+    esutils "^2.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -1135,12 +1503,7 @@ domelementtype@1:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
   integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
 
-domelementtype@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.2.tgz#f3b6e549201e46f588b59463dd77187131fe6971"
-  integrity sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA==
-
-domelementtype@^2.2.0:
+domelementtype@^2.0.1, domelementtype@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
   integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
@@ -1201,9 +1564,14 @@ ee-first@1.1.1:
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 electron-to-chromium@^1.3.723:
-  version "1.3.739"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.739.tgz#f07756aa92cabd5a6eec6f491525a64fe62f98b9"
-  integrity sha512-+LPJVRsN7hGZ9EIUUiWCpO7l4E3qBYHNadazlucBfsXBbccDFNKUBAgzE68FnkWGJPwD/AfKhSzL+G+Iqb8A4A==
+  version "1.3.784"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.784.tgz#c370be79374b02b7f13e8a8fb0d7a02641161dac"
+  integrity sha512-JTPxdUibkefeomWNaYs8lI/x/Zb4cOhZWX+d7kpzsNKzUd07pNuo/AcHeNJ/qgEchxM1IAxda9aaGUhKN/poOg==
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
 emojis-list@^3.0.0:
   version "3.0.0"
@@ -1222,10 +1590,17 @@ end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   dependencies:
     once "^1.4.0"
 
+enquirer@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
+  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
+  dependencies:
+    ansi-colors "^4.1.1"
+
 entities@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
-  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
 error-ex@^1.3.1:
   version "1.3.2"
@@ -1234,40 +1609,27 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.17.0-next.1, es-abstract@^1.17.2:
-  version "1.17.7"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
-  integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.2.2"
-    is-regex "^1.1.1"
-    object-inspect "^1.8.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
-
-es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
-  version "1.18.0-next.1"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
-  integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
+es-abstract@^1.17.2, es-abstract@^1.18.0-next.2, es-abstract@^1.18.2:
+  version "1.18.3"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.3.tgz#25c4c3380a27aa203c44b2b685bba94da31b63e0"
+  integrity sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==
   dependencies:
+    call-bind "^1.0.2"
     es-to-primitive "^1.2.1"
     function-bind "^1.1.1"
+    get-intrinsic "^1.1.1"
     has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.2.2"
-    is-negative-zero "^2.0.0"
-    is-regex "^1.1.1"
-    object-inspect "^1.8.0"
+    has-symbols "^1.0.2"
+    is-callable "^1.2.3"
+    is-negative-zero "^2.0.1"
+    is-regex "^1.1.3"
+    is-string "^1.0.6"
+    object-inspect "^1.10.3"
     object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
+    object.assign "^4.1.2"
+    string.prototype.trimend "^1.0.4"
+    string.prototype.trimstart "^1.0.4"
+    unbox-primitive "^1.0.1"
 
 es-to-primitive@^1.2.1:
   version "1.2.1"
@@ -1278,6 +1640,18 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+es6-promise@^4.0.3:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
+  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
+
+es6-promisify@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
+  integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
+  dependencies:
+    es6-promise "^4.0.3"
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -1293,6 +1667,16 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
 escodegen@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.0.0.tgz#5e32b12833e8aa8fa35e1bf0befa89380484c7dd"
@@ -1305,12 +1689,121 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
+eslint-config-google@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-google/-/eslint-config-google-0.11.0.tgz#fd0fc70be2e9114df097cac93a9b5b0d4e1c6830"
+  integrity sha512-z541Fs5TFaY7/35v/z100InQ2f3V2J7e3u/0yKrnImgsHjh6JWgSRngfC/mZepn/+XN16jUydt64k//kxXc1fw==
+
+eslint-plugin-svelte3@^2.7.3:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-svelte3/-/eslint-plugin-svelte3-2.7.3.tgz#e793b646b848e717674fe668c21b909cfa025eb3"
+  integrity sha512-p6HhxyICX9x/x+8WSy6AVk2bmv9ayoznoTSyCvK47th/k/07ksuJixMwbGX9qxJVAmPBaYMjEIMSEZtJHPIN7w==
+
+eslint-scope@^5.0.0, eslint-scope@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+eslint-utils@^2.0.0, eslint-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
+eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
+
+eslint-visitor-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
+  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
+
+eslint@^7.5.0:
+  version "7.31.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.31.0.tgz#f972b539424bf2604907a970860732c5d99d3aca"
+  integrity sha512-vafgJpSh2ia8tnTkNUkwxGmnumgckLh5aAbLa1xRmIn9+owi8qBNGKL+B881kNKNTy7FFqTEkpNkUvmw0n6PkA==
+  dependencies:
+    "@babel/code-frame" "7.12.11"
+    "@eslint/eslintrc" "^0.4.3"
+    "@humanwhocodes/config-array" "^0.5.0"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    enquirer "^2.3.5"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^2.1.0"
+    eslint-visitor-keys "^2.0.0"
+    espree "^7.3.1"
+    esquery "^1.4.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^5.1.2"
+    globals "^13.6.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.0.4"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    progress "^2.0.0"
+    regexpp "^3.1.0"
+    semver "^7.2.1"
+    strip-ansi "^6.0.0"
+    strip-json-comments "^3.1.0"
+    table "^6.0.9"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
+espree@^7.3.0, espree@^7.3.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6"
+  integrity sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==
+  dependencies:
+    acorn "^7.4.0"
+    acorn-jsx "^5.3.1"
+    eslint-visitor-keys "^1.3.0"
+
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-estraverse@^5.2.0:
+esquery@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.1.0, estraverse@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
   integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
@@ -1320,6 +1813,11 @@ estree-walker@^0.6.0, estree-walker@^0.6.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
   integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
 
+estree-walker@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
+  integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
+
 estree-walker@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
@@ -1419,6 +1917,16 @@ extglob@^0.3.1:
   dependencies:
     is-extglob "^1.0.0"
 
+extract-zip@^1.6.6:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.7.0.tgz#556cc3ae9df7f452c493a0cfb51cc30277940927"
+  integrity sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==
+  dependencies:
+    concat-stream "^1.6.2"
+    debug "^2.6.9"
+    mkdirp "^0.5.4"
+    yauzl "^2.10.0"
+
 extract-zip@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-2.0.1.tgz#663dca56fe46df890d5f131ef4a06d22bb8ba13a"
@@ -1430,7 +1938,17 @@ extract-zip@^2.0.0:
   optionalDependencies:
     "@types/yauzl" "^2.9.1"
 
-fast-levenshtein@~2.0.6:
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
@@ -1459,9 +1977,9 @@ fd-slicer@~1.1.0:
     pend "~1.2.0"
 
 fflate@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.4.tgz#b23c3f53a687bbce62a091af98f621ca7f68a191"
-  integrity sha512-BBKysCIvETp1l5wTUvjCR+tfFmlvSWtzNZe3SkQN1xDeTD9dscGypw5NZEZIkyPazKGOnpaKFlMwOmuTgApiJQ==
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
+  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
 
 figures@^2.0.0:
   version "2.0.0"
@@ -1470,6 +1988,13 @@ figures@^2.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@@ -1500,6 +2025,13 @@ fill-range@^2.1.0:
     repeat-element "^1.1.2"
     repeat-string "^1.5.2"
 
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 finalhandler@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@@ -1528,6 +2060,26 @@ findup-sync@~0.3.0:
   dependencies:
     glob "~5.0.0"
 
+flat-cache@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
+  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  dependencies:
+    flatted "^3.1.0"
+    rimraf "^3.0.2"
+
+flatted@^3.1.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.1.tgz#bbef080d95fca6709362c73044a1634f7c6e7d05"
+  integrity sha512-OMQjaErSFHmHqZe+PSidH5n8j3O0F2DdnVh8JB4j4eUQ2k6KvB0qGfrKIhapvez5JerBbmWkaLYUYWISaESoXg==
+
+for-each@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
+  integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
+  dependencies:
+    is-callable "^1.1.3"
+
 for-in@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -1569,16 +2121,21 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@~2.1.2:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
-  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
+functional-red-black-tree@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
+  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
+
 generic-names@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-2.0.1.tgz#f8a378ead2ccaa7a34f0317b05554832ae41b872"
@@ -1591,6 +2148,20 @@ get-func-name@^2.0.0:
   resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
   integrity sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=
 
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
+get-port@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
+  integrity sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=
+
 get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -1618,6 +2189,13 @@ glob-parent@^2.0.0:
   dependencies:
     is-glob "^2.0.0"
 
+glob-parent@^5.1.2, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob@7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
@@ -1630,10 +2208,10 @@ glob@7.1.2:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.1, glob@^7.1.3:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.6:
+  version "7.1.7"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
@@ -1660,6 +2238,24 @@ global-dirs@^0.1.0:
   dependencies:
     ini "^1.3.4"
 
+globals@^13.6.0, globals@^13.9.0:
+  version "13.10.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.10.0.tgz#60ba56c3ac2ca845cfbf4faeca727ad9dd204676"
+  integrity sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==
+  dependencies:
+    type-fest "^0.20.2"
+
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
+  dependencies:
+    array-union "^1.0.1"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
 got@^6.7.1:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
@@ -1678,9 +2274,9 @@ got@^6.7.1:
     url-parse-lax "^1.0.0"
 
 graceful-fs@^4.1.11, graceful-fs@^4.1.2:
-  version "4.2.4"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
-  integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
+  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
 growl@1.10.5:
   version "1.10.5"
@@ -1694,6 +2290,11 @@ has-ansi@^2.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
+has-bigints@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
+  integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
+
 has-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
@@ -1709,10 +2310,10 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-has-symbols@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
-  integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
+has-symbols@^1.0.1, has-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
+  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
 
 has@^1.0.0, has@^1.0.3:
   version "1.0.3"
@@ -1741,11 +2342,6 @@ hsla-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
   integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
 
-html-comment-regex@^1.1.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
-  integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
-
 html-encoding-sniffer@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
@@ -1794,6 +2390,14 @@ http-proxy-agent@^4.0.1:
     agent-base "6"
     debug "4"
 
+https-proxy-agent@^2.2.1:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz#4ee7a737abd92678a293d9b34a1af4d0d08c787b"
+  integrity sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==
+  dependencies:
+    agent-base "^4.3.0"
+    debug "^3.1.0"
+
 https-proxy-agent@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
@@ -1824,6 +2428,11 @@ ignore-styles@^5.0.1:
   resolved "https://registry.yarnpkg.com/ignore-styles/-/ignore-styles-5.0.1.tgz#b49ef2274bdafcd8a4880a966bfe38d1a0bf4671"
   integrity sha1-tJ7yJ0va/NikiAqWa/440aC/RnE=
 
+ignore@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -1846,6 +2455,14 @@ import-fresh@^2.0.0:
     caller-path "^2.0.0"
     resolve-from "^3.0.0"
 
+import-fresh@^3.0.0, import-fresh@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
 import-from@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
@@ -1883,7 +2500,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4:
+inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -1937,15 +2554,34 @@ is-arrayish@^0.3.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
   integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
 
+is-bigint@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.2.tgz#ffb381442503235ad245ea89e45b3dbff040ee5a"
+  integrity sha512-0JV5+SOCQkIdzjBK9buARcV804Ddu7A0Qet6sHi3FimE9ne6m4BGQZfRn+NZiXbBk4F4XmHfDZIipLj9pX8dSA==
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-boolean-object@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.1.tgz#3c0878f035cb821228d350d2e1e36719716a3de8"
+  integrity sha512-bXdQWkECBUIAcCkeH1unwJLIpZYaa5VvuygSyS/c2lf719mTKZDU5UdDRlpd01UjADgmW8RfqaP+mRaVPdr/Ng==
+  dependencies:
+    call-bind "^1.0.2"
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
-is-callable@^1.1.4, is-callable@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9"
-  integrity sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==
+is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.3.tgz#8b1e0500b73a1d76c70487636f368e519de8db8e"
+  integrity sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==
 
 is-ci@^1.0.10:
   version "1.2.1"
@@ -1966,17 +2602,17 @@ is-color-stop@^1.0.0:
     rgb-regex "^1.0.1"
     rgba-regex "^1.0.0"
 
-is-core-module@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.0.0.tgz#58531b70aed1db7c0e8d4eb1a0a2d1ddd64bd12d"
-  integrity sha512-jq1AH6C8MuteOoBPwkxHafmByhL9j5q4OaPGdbuD+ZtQJVzH+i6E3BJDQcBA09k57i2Hh2yQbEG8yObZ0jdlWw==
+is-core-module@^2.2.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.5.0.tgz#f754843617c70bfd29b7bd87327400cda5c18491"
+  integrity sha512-TXCMSDsEHMEEZ6eCA8rwRDbLu55MRGmrctljsBX/2v1d9/GzqHOxW5c5oPSgrUt2vBFXebu9rGqckXGPWOlYpg==
   dependencies:
     has "^1.0.3"
 
 is-date-object@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
-  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.4.tgz#550cfcc03afada05eea3dd30981c7b09551f73e5"
+  integrity sha512-/b4ZVsG7Z5XVtIxs/h9W8nvfLgSAyKYdtGWQLbqy6jA1icmgjf8WCoTKgeS4wy5tYaPePouzFMANbnj94c2Z+A==
 
 is-directory@^0.3.1:
   version "0.3.1"
@@ -2005,11 +2641,21 @@ is-extglob@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
   integrity sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=
 
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
 is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
   integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
 
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
 is-glob@^2.0.0, is-glob@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
@@ -2017,6 +2663,13 @@ is-glob@^2.0.0, is-glob@^2.0.1:
   dependencies:
     is-extglob "^1.0.0"
 
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
+  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
+  dependencies:
+    is-extglob "^2.1.1"
+
 is-installed-globally@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
@@ -2030,16 +2683,21 @@ is-module@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
   integrity sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=
 
-is-negative-zero@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
-  integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
+is-negative-zero@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.1.tgz#3de746c18dda2319241a53675908d8f766f11c24"
+  integrity sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==
 
 is-npm@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
   integrity sha1-8vtjpl5JBbQGyGBydloaTceTufQ=
 
+is-number-object@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.5.tgz#6edfaeed7950cff19afedce9fbfca9ee6dd289eb"
+  integrity sha512-RU0lI/n95pMoUKu9v1BZP5MBcZuNSVJkMkAG2dJqC4z2GlkGUNeH68SuHuBKBD/XFe+LHZ+f9BKkLET60Niedw==
+
 is-number@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
@@ -2052,6 +2710,11 @@ is-number@^4.0.0:
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
   integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==
 
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
 is-obj@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
@@ -2089,12 +2752,20 @@ is-redirect@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
   integrity sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=
 
-is-regex@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
-  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
+is-reference@^1.1.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
+  integrity sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==
   dependencies:
-    has-symbols "^1.0.1"
+    "@types/estree" "*"
+
+is-regex@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.3.tgz#d029f9aff6448b93ebbe3f33dac71511fdcbef9f"
+  integrity sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==
+  dependencies:
+    call-bind "^1.0.2"
+    has-symbols "^1.0.2"
 
 is-resolvable@^1.0.0:
   version "1.1.0"
@@ -2111,21 +2782,19 @@ is-stream@^1.0.0, is-stream@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
-is-svg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-3.0.0.tgz#9321dbd29c212e5ca99c4fa9794c714bcafa2f75"
-  integrity sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==
-  dependencies:
-    html-comment-regex "^1.1.0"
+is-string@^1.0.5, is-string@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.6.tgz#3fe5d5992fb0d93404f32584d4b0179a71b54a5f"
+  integrity sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w==
 
-is-symbol@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
-  integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
+is-symbol@^1.0.2, is-symbol@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
+  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
   dependencies:
-    has-symbols "^1.0.1"
+    has-symbols "^1.0.2"
 
-isarray@1.0.0:
+isarray@1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
@@ -2202,6 +2871,13 @@ jest-snapshot@^23.6.0:
     pretty-format "^23.6.0"
     semver "^5.5.0"
 
+jest-worker@^23.2.0:
+  version "23.2.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-23.2.0.tgz#faf706a8da36fae60eb26957257fa7b5d8ea02b9"
+  integrity sha1-+vcGqNo2+uYOsmlXJX+ntdjqArk=
+  dependencies:
+    merge-stream "^1.0.1"
+
 jest-worker@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
@@ -2210,6 +2886,15 @@ jest-worker@^24.9.0:
     merge-stream "^2.0.0"
     supports-color "^6.1.0"
 
+jest-worker@^26.2.1:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
+  integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
+
 js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
@@ -2221,9 +2906,9 @@ js-tokens@^4.0.0:
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
 js-yaml@^3.13.1:
-  version "3.14.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.0.tgz#a7a34170f26a21bb162424d8adacb4113a69e482"
-  integrity sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
   dependencies:
     argparse "^1.0.7"
     esprima "^4.0.0"
@@ -2233,7 +2918,7 @@ jsdom-global@^3.0.2:
   resolved "https://registry.yarnpkg.com/jsdom-global/-/jsdom-global-3.0.2.tgz#6bd299c13b0c4626b2da2c0393cd4385d606acb9"
   integrity sha1-a9KZwTsMRiay2iwDk81DhdYGrLk=
 
-jsdom@^16.6.0:
+jsdom@^16.4.0, jsdom@^16.6.0:
   version "16.6.0"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.6.0.tgz#f79b3786682065492a3da6a60a4695da983805ac"
   integrity sha512-Ty1vmF4NHJkolaEmdjtxTfSfkdb8Ywarwf63f+F8/mDD1uLSSWDxDuMiZxiPhwunLrn9LOSVItWj4bLYsLN3Dg==
@@ -2271,6 +2956,21 @@ json-parse-better-errors@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-schema-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
+
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -2290,6 +2990,11 @@ kind-of@^6.0.0:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
+kleur@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
+  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
+
 latest-version@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
@@ -2297,6 +3002,14 @@ latest-version@^3.0.0:
   dependencies:
     package-json "^4.0.0"
 
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
 levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
@@ -2305,6 +3018,21 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+livereload-js@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/livereload-js/-/livereload-js-3.3.2.tgz#c88b009c6e466b15b91faa26fd7c99d620e12651"
+  integrity sha512-w677WnINxFkuixAoUEXOStewzLYGI76XVag+0JWMMEyjJQKs0ibWZMxkTlB96Lm3EjZ7IeOxVziBEbtxVQqQZA==
+
+livereload@^0.9.1:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/livereload/-/livereload-0.9.3.tgz#a714816375ed52471408bede8b49b2ee6a0c55b1"
+  integrity sha512-q7Z71n3i4X0R9xthAryBdNGVGAO2R5X+/xXpmKeuPMrteg+W2U8VusTKV3YiJbXZwKsOlFlHe+go6uSNjfxrZw==
+  dependencies:
+    chokidar "^3.5.0"
+    livereload-js "^3.3.1"
+    opts ">= 1.2.0"
+    ws "^7.4.3"
+
 loader-utils@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
@@ -2314,6 +3042,11 @@ loader-utils@^1.1.0:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+local-access@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/local-access/-/local-access-1.1.0.tgz#e007c76ba2ca83d5877ba1a125fc8dfe23ba4798"
+  integrity sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==
+
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
@@ -2326,17 +3059,32 @@ lodash.camelcase@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
   integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
 
+lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+lodash.truncate@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
+  integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.12, lodash@^4.17.4, lodash@^4.7.0:
+lodash@^4.17.12, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -2354,6 +3102,13 @@ lru-cache@^4.0.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
 magic-string@^0.25.2, magic-string@^0.25.7:
   version "0.25.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
@@ -2388,11 +3143,6 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-mdn-data@2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.6.tgz#852dc60fcaa5daa2e8cf6c9189c440ed3e042978"
-  integrity sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==
-
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -2403,6 +3153,13 @@ merge-descriptors@1.0.1:
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
   integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
 
+merge-stream@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-1.0.1.tgz#4041202d508a342ba00174008df0c251b8c135e1"
+  integrity sha1-QEEgLVCKNCugAXQAjfDCUbjBNeE=
+  dependencies:
+    readable-stream "^2.0.1"
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -2449,11 +3206,21 @@ mime@1.6.0:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
+mime@^2.0.3, mime@^2.3.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
+  integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
+
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
   integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
 
+min-indent@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
+
 "minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
@@ -2493,7 +3260,7 @@ mkdirp@0.5.1:
   dependencies:
     minimist "0.0.8"
 
-mkdirp@^0.5.1, mkdirp@~0.5.1:
+mkdirp@^0.5.1, mkdirp@^0.5.4, mkdirp@~0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
   integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
@@ -2517,6 +3284,11 @@ mocha@^5.2.0:
     mkdirp "0.5.1"
     supports-color "5.4.0"
 
+mri@^1.1.0:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"
+  integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -2532,6 +3304,11 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
 mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
@@ -2558,9 +3335,9 @@ node-fetch@^2.6.1:
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
 
 node-releases@^1.1.71:
-  version "1.1.72"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe"
-  integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==
+  version "1.1.73"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.73.tgz#dd4e81ddd5277ff846b80b52bb40c49edf7a7b20"
+  integrity sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==
 
 normalize-path@^2.0.1:
   version "2.1.1"
@@ -2569,6 +3346,11 @@ normalize-path@^2.0.1:
   dependencies:
     remove-trailing-separator "^1.0.1"
 
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
 normalize-url@^3.0.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
@@ -2600,33 +3382,39 @@ nwsapi@^2.2.0:
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
   integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
 
-object-inspect@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
-  integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
+object-assign@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
+object-inspect@^1.10.3:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.11.0.tgz#9dceb146cedd4148a0d9e51ab88d34cf509922b1"
+  integrity sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==
 
 object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object.assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.1.tgz#303867a666cdd41936ecdedfb1f8f3e32a478cdd"
-  integrity sha512-VT/cxmx5yaoHSOTSyrCygIDFco+RsibY2NM0a4RdEeY/4KgqezwFtK1yr3U67xYhqJSlASm2pKhLVzPj2lr4bA==
+object.assign@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
+  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
   dependencies:
+    call-bind "^1.0.0"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.0"
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
-object.getownpropertydescriptors@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649"
-  integrity sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==
+object.getownpropertydescriptors@^2.1.0, object.getownpropertydescriptors@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.2.tgz#1bd63aeacf0d5d2d2f31b5e393b03a7c601a23f7"
+  integrity sha512-WtxeKSzfBjlzL+F9b7M7hewDzMwy+C8NRssHd1YrNlzHzIDrXcXiNOMrezdAEM4UXixgV+vvnyBeN7Rygl2ttQ==
   dependencies:
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
+    es-abstract "^1.18.0-next.2"
 
 object.omit@^2.0.0:
   version "2.0.1"
@@ -2637,14 +3425,13 @@ object.omit@^2.0.0:
     is-extendable "^0.1.1"
 
 object.values@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.1.tgz#68a99ecde356b7e9295a3c5e0ce31dc8c953de5e"
-  integrity sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.4.tgz#0d273762833e816b693a637d30073e7051535b30"
+  integrity sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg==
   dependencies:
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
+    es-abstract "^1.18.2"
 
 on-finished@~2.3.0:
   version "2.3.0"
@@ -2687,6 +3474,23 @@ optionator@^0.8.1:
     type-check "~0.3.2"
     word-wrap "~1.2.3"
 
+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
+
+"opts@>= 1.2.0":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/opts/-/opts-2.0.2.tgz#a17e189fbbfee171da559edd8a42423bc5993ce1"
+  integrity sha512-k41FwbcLnlgnFh69f4qdUfvDQ+5vaSDnVPFI/y5XuhKRq97EnVVneO9F1ESVCdiVu4fCS2L8usX3mU331hB7pg==
+
 os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
@@ -2741,6 +3545,13 @@ package-json@^4.0.0:
     registry-url "^3.0.3"
     semver "^5.1.0"
 
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
 parse-glob@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
@@ -2796,26 +3607,41 @@ path-key@^2.0.0, path-key@^2.0.1:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
   integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
 
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
 path-parse@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
-  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
 path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
-pathval@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.0.tgz#b942e6d4bde653005ef6b71361def8727d0645e0"
-  integrity sha1-uULm1L3mUwBe9rcTYd74cn0GReA=
+pathval@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.1.tgz#8534e77a77ce7ac5a2512ea21e0fdb8fcf6c3d8d"
+  integrity sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==
 
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
   integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
 
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
+  integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
+
+pify@^2.0.0, pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
+
 pify@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
@@ -2826,6 +3652,18 @@ pify@^5.0.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-5.0.0.tgz#1f5eca3f5e87ebec28cc6d54a0e4aaf00acc127f"
   integrity sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==
 
+pinkie-promise@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+  integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
+
 pkg-dir@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
@@ -2889,6 +3727,31 @@ postcss-discard-overridden@^4.0.1:
   dependencies:
     postcss "^7.0.0"
 
+postcss-easy-import@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-easy-import/-/postcss-easy-import-3.0.0.tgz#8eaaf5ae59566083d0cae98735dfd803e3ab194d"
+  integrity sha512-cfNsear/v8xlkl9v5Wm8y4Do/puiDQTFF+WX2Fo++h7oKt1fKWVVW/5Ca8hslYDQWnjndrg813cA23Pt1jsYdg==
+  dependencies:
+    globby "^6.1.0"
+    is-glob "^4.0.0"
+    lodash "^4.17.4"
+    object-assign "^4.0.1"
+    pify "^3.0.0"
+    postcss "^6.0.11"
+    postcss-import "^10.0.0"
+    resolve "^1.1.7"
+
+postcss-import@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-10.0.0.tgz#4c85c97b099136cc5ea0240dc1dfdbfde4e2ebbe"
+  integrity sha1-TIXJewmRNsxeoCQNwd/b/eTi674=
+  dependencies:
+    object-assign "^4.0.1"
+    postcss "^6.0.1"
+    postcss-value-parser "^3.2.3"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
 postcss-load-config@^2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.2.tgz#c5ea504f2c4aef33c7359a34de3573772ad7502a"
@@ -3121,21 +3984,18 @@ postcss-selector-parser@^3.0.0:
     uniq "^1.0.1"
 
 postcss-selector-parser@^6.0.2:
-  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
-  integrity sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==
+  version "6.0.6"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea"
+  integrity sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==
   dependencies:
     cssesc "^3.0.0"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
     util-deprecate "^1.0.2"
 
-postcss-svgo@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258"
-  integrity sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==
+postcss-svgo@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.3.tgz#343a2cdbac9505d416243d496f724f38894c941e"
+  integrity sha512-NoRbrcMWTtUghzuKSoIm6XV+sJdvZ7GZSc3wdBN0W19FTtp2ko8NqLsgoh/m9CzNhU3KLPvQmjIwtaNFkaFTvw==
   dependencies:
-    is-svg "^3.0.0"
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
     svgo "^1.0.0"
@@ -3149,7 +4009,7 @@ postcss-unique-selectors@^4.0.1:
     postcss "^7.0.0"
     uniqs "^2.0.0"
 
-postcss-value-parser@^3.0.0:
+postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
@@ -3168,7 +4028,7 @@ postcss@6.0.1:
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.1:
+postcss@^6.0.1, postcss@^6.0.11:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
   integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
@@ -3178,14 +4038,19 @@ postcss@^6.0.1:
     supports-color "^5.4.0"
 
 postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.27:
-  version "7.0.35"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
-  integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
+  version "7.0.36"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb"
+  integrity sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==
   dependencies:
     chalk "^2.4.2"
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -3214,7 +4079,12 @@ pretty-format@^23.6.0:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
-progress@^2.0.1:
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
+progress@^2.0.0, progress@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
@@ -3232,7 +4102,7 @@ proxy-addr@~2.0.5:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
-proxy-from-env@^1.1.0:
+proxy-from-env@^1.0.0, proxy-from-env@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
@@ -3255,11 +4125,25 @@ pump@^3.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
-punycode@^2.1.1:
+punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+puppeteer@^1.15.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-1.20.0.tgz#e3d267786f74e1d87cf2d15acc59177f471bbe38"
+  integrity sha512-bt48RDBy2eIwZPrkgbcwHtb51mj2nKvHOPMaSH2IsWiv7lOG9k9zhaRzpDZafrk05ajMc3cu+lSQYYOfH2DkVQ==
+  dependencies:
+    debug "^4.1.0"
+    extract-zip "^1.6.6"
+    https-proxy-agent "^2.2.1"
+    mime "^2.0.3"
+    progress "^2.0.1"
+    proxy-from-env "^1.0.0"
+    rimraf "^2.6.1"
+    ws "^6.1.0"
+
 puppeteer@^9.1.1:
   version "9.1.1"
   resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-9.1.1.tgz#f74b7facf86887efd6c6b9fabb7baae6fdce012c"
@@ -3329,6 +4213,26 @@ rc@^1.0.1, rc@^1.1.6:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=
+  dependencies:
+    pify "^2.3.0"
+
+readable-stream@^2.0.1, readable-stream@^2.2.2:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
+  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
 readable-stream@^3.1.1, readable-stream@^3.4.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
@@ -3338,6 +4242,13 @@ readable-stream@^3.1.1, readable-stream@^3.4.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
 realpath-native@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
@@ -3357,6 +4268,11 @@ regex-cache@^0.4.2:
   dependencies:
     is-equal-shallow "^0.1.3"
 
+regexpp@^3.0.0, regexpp@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
+  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
+
 registry-auth-token@^3.0.1:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.4.0.tgz#d7446815433f5d5ed6431cd5dca21048f66b397e"
@@ -3378,20 +4294,35 @@ remove-trailing-separator@^1.0.1:
   integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
 
 repeat-element@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
-  integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
+  integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
 
 repeat-string@^1.5.2:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
 
+require-from-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
+require-relative@^0.8.7:
+  version "0.8.7"
+  resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
+  integrity sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=
+
 resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
   integrity sha1-six699nWiBvItuZTM17rywoYh0g=
 
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
 resolve-from@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
@@ -3402,12 +4333,12 @@ resolve@1.1.7:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.16.1:
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.18.1.tgz#018fcb2c5b207d2a6424aee361c5a266da8f4130"
-  integrity sha512-lDfCPaMKfOJXjy0dPayzPdF1phampNWr3qFCjAu+rw/qbQmr5jWH5xN2hwh9QKfw9E5v4hwV7A+jrCmL8yjjqA==
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.14.1, resolve@^1.14.2, resolve@^1.16.1:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
   dependencies:
-    is-core-module "^2.0.0"
+    is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
 restore-cursor@^2.0.0:
@@ -3428,6 +4359,13 @@ rgba-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
+rimraf@^2.6.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.3"
+
 rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -3445,6 +4383,20 @@ rollup-plugin-commonjs@^9.2.0:
     resolve "^1.10.0"
     rollup-pluginutils "^2.6.0"
 
+rollup-plugin-css-only@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-css-only/-/rollup-plugin-css-only-3.1.0.tgz#6a701cc5b051c6b3f0961e69b108a9a118e1b1df"
+  integrity sha512-TYMOE5uoD76vpj+RTkQLzC9cQtbnJNktHPB507FzRWBVaofg7KhIqq1kGbcVOadARSozWF883Ho9KpSPKH8gqA==
+  dependencies:
+    "@rollup/pluginutils" "4"
+
+rollup-plugin-livereload@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.5.tgz#4747fa292a2cceb0c972c573d71b3d66b4252b37"
+  integrity sha512-vqQZ/UQowTW7VoiKEM5ouNW90wE5/GZLfdWuR0ELxyKOJUIaj+uismPZZaICU4DnWPVjnpCDDxEqwU7pcKY/PA==
+  dependencies:
+    livereload "^0.9.1"
+
 rollup-plugin-node-resolve@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.4.0.tgz#908585eda12e393caac7498715a01e08606abc89"
@@ -3482,6 +4434,24 @@ rollup-plugin-rename-node-modules@^1.1.0:
     estree-walker "^2.0.1"
     magic-string "^0.25.7"
 
+rollup-plugin-svelte@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-svelte/-/rollup-plugin-svelte-7.1.0.tgz#d45f2b92b1014be4eb46b55aa033fb9a9c65f04d"
+  integrity sha512-vopCUq3G+25sKjwF5VilIbiY6KCuMNHP1PFvx2Vr3REBNMDllKHFZN2B9jwwC+MqNc3UPKkjXnceLPEjTjXGXg==
+  dependencies:
+    require-relative "^0.8.7"
+    rollup-pluginutils "^2.8.2"
+
+rollup-plugin-terser@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-3.0.0.tgz#045bd7cf625ee1affcfe6971dab6fffe6fb48c65"
+  integrity sha512-Ed9zRD7OoCBnh0XGlEAJle5TCUsFXMLClwKzZWnS1zbNO4MelHjfCSdFZxCAdH70M40nhZ1nRrY2GZQJhSMcjA==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    jest-worker "^23.2.0"
+    serialize-javascript "^1.5.0"
+    terser "^3.8.2"
+
 rollup-plugin-terser@^5.3.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-5.3.1.tgz#8c650062c22a8426c64268548957463bf981b413"
@@ -3493,6 +4463,16 @@ rollup-plugin-terser@^5.3.0:
     serialize-javascript "^4.0.0"
     terser "^4.6.2"
 
+rollup-plugin-terser@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
+  integrity sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    jest-worker "^26.2.1"
+    serialize-javascript "^4.0.0"
+    terser "^5.0.0"
+
 rollup-plugin-typescript@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/rollup-plugin-typescript/-/rollup-plugin-typescript-1.0.1.tgz#86565033b714c3d1f3aba510aad3dc519f7091e9"
@@ -3508,17 +4488,20 @@ rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.6.0, rollup-pluginutils@^2.8.2:
   dependencies:
     estree-walker "^0.6.1"
 
-rollup@^2.3.3:
-  version "2.32.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.32.1.tgz#625a92c54f5b4d28ada12d618641491d4dbb548c"
-  integrity sha512-Op2vWTpvK7t6/Qnm1TTh7VjEZZkN8RWgf0DHbkKzQBwNf748YhXbozHVefqpPp/Fuyk/PQPAnYsBxAEtlMvpUw==
-  optionalDependencies:
-    fsevents "~2.1.2"
+rollup@^0.66.4:
+  version "0.66.6"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.66.6.tgz#ce7d6185beb7acea644ce220c25e71ae03275482"
+  integrity sha512-J7/SWanrcb83vfIHqa8+aVVGzy457GcjA6GVZEnD0x2u4OnOd0Q1pCrEoNe8yLwM6z6LZP02zBT2uW0yh5TqOw==
+  dependencies:
+    "@types/estree" "0.0.39"
+    "@types/node" "*"
 
-rrweb-snapshot@^1.1.7:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.7.tgz#92a3b47b1112a1b566c2fae2edb02fa48a6f6653"
-  integrity sha512-+f2kCCvIQ1hbEeCWnV7mPVPDEdWEExqwcYqMd/r1nfK52QE7qU52jefUOyTe85Vy67rZGqWnfK/B25e/OTSgYg==
+rollup@^2.3.3, rollup@^2.45.2:
+  version "2.53.3"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.53.3.tgz#14b0e57f0874d4ad23bdbb13050cf70bcd1eabf7"
+  integrity sha512-79QIGP5DXz5ZHYnCPi3tLz+elOQi6gudp9YINdaJdjG0Yddubo6JRFUM//qCZ0Bap/GJrsUoEBVdSOc4AkMlRA==
+  optionalDependencies:
+    fsevents "~2.3.2"
 
 run-async@^2.2.0:
   version "2.4.1"
@@ -3526,13 +4509,20 @@ run-async@^2.2.0:
   integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
 
 rxjs@^6.4.0:
-  version "6.6.3"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.3.tgz#8ca84635c4daa900c0d3967a6ee7ac60271ee552"
-  integrity sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==
+  version "6.6.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
+  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
   dependencies:
     tslib "^1.9.0"
 
-safe-buffer@5.1.2:
+sade@^1.4.0, sade@^1.7.4:
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/sade/-/sade-1.7.4.tgz#ea681e0c65d248d2095c90578c03ca0bb1b54691"
+  integrity sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==
+  dependencies:
+    mri "^1.1.0"
+
+safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
@@ -3576,6 +4566,13 @@ semver@^5.0.3, semver@^5.1.0, semver@^5.5.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
+semver@^7.2.1, semver@^7.3.2:
+  version "7.3.5"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
+  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.17.1:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -3595,6 +4592,11 @@ send@0.17.1:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
+serialize-javascript@^1.5.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb"
+  integrity sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A==
+
 serialize-javascript@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
@@ -3624,11 +4626,23 @@ shebang-command@^1.2.0:
   dependencies:
     shebang-regex "^1.0.0"
 
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
 shebang-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
   integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
 
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -3641,12 +4655,42 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
+sirv-cli@^0.4.4:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/sirv-cli/-/sirv-cli-0.4.6.tgz#c28ab20deb3b34637f5a60863dc350f055abca04"
+  integrity sha512-/Vj85/kBvPL+n9ibgX6FicLE8VjidC1BhlX67PYPBfbBAphzR6i0k0HtU5c2arejfU3uzq8l3SYPCwl1x7z6Ww==
+  dependencies:
+    console-clear "^1.1.0"
+    get-port "^3.2.0"
+    kleur "^3.0.0"
+    local-access "^1.0.1"
+    sade "^1.4.0"
+    sirv "^0.4.6"
+    tinydate "^1.0.0"
+
+sirv@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-0.4.6.tgz#185e44eb93d24009dd183b7494285c5180b81f22"
+  integrity sha512-rYpOXlNbpHiY4nVXxuDf4mXPvKz1reZGap/LkWp9TvcZ84qD/nPBjjH/6GZsgIjVMbOslnY8YYULAyP8jMn1GQ==
+  dependencies:
+    "@polka/url" "^0.5.0"
+    mime "^2.3.1"
+
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
   integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
 
-source-map-support@^0.5.6, source-map-support@~0.5.12:
+slice-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
+  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
+source-map-support@^0.5.6, source-map-support@~0.5.10, source-map-support@~0.5.12, source-map-support@~0.5.19:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
   integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
@@ -3664,6 +4708,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+source-map@^0.7.3, source-map@~0.7.2:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
 sourcemap-codec@^1.4.4:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
@@ -3680,9 +4729,11 @@ stable@^0.1.8:
   integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
 
 stack-utils@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
-  integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.5.tgz#a19b0b01947e0029c8e451d5d61a498f5bb1471b"
+  integrity sha512-KZiTzuV3CnSnSvgMRrARVCj+Ht7rMbauGDK0LdVFRGyenwdylpajAp4Q0i6SX8rEmbTpMMf6ryq2gb8pPq2WgQ==
+  dependencies:
+    escape-string-regexp "^2.0.0"
 
 "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
   version "1.5.0"
@@ -3702,21 +4753,30 @@ string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string.prototype.trimend@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.2.tgz#6ddd9a8796bc714b489a3ae22246a208f37bfa46"
-  integrity sha512-8oAG/hi14Z4nOVP0z6mdiVZ/wqjDtWSLygMigTzAb+7aPEDTleeFf+WrF+alzecxIRkckkJVn+dTlwzJXORATw==
+string-width@^4.2.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
+  integrity sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.0"
+
+string.prototype.trimend@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
+  integrity sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==
   dependencies:
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
 
-string.prototype.trimstart@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.2.tgz#22d45da81015309cd0cdd79787e8919fc5c613e7"
-  integrity sha512-7F6CdBTl5zyu30BJFdzSTlSlLPwODC23Od+iLoVH8X6+3fvDPPuBVVj9iaB1GOsSTSIgVfsfm27R2FGrAPznWg==
+string.prototype.trimstart@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz#b36399af4ab2999b4c9c648bd7a3fb2bb26feeed"
+  integrity sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==
   dependencies:
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
 
 string_decoder@^1.1.1:
   version "1.3.0"
@@ -3725,6 +4785,13 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
 strip-ansi@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
@@ -3746,11 +4813,30 @@ strip-ansi@^5.1.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
+  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
+  dependencies:
+    ansi-regex "^5.0.0"
+
 strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
   integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=
 
+strip-indent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+  dependencies:
+    min-indent "^1.0.0"
+
+strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
 strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
@@ -3810,13 +4896,43 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^7.1.0:
+supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
   dependencies:
     has-flag "^4.0.0"
 
+svelte-check@^1.4.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-1.6.0.tgz#fcc7b28252a89be0e4cd369c58bbf8e76e81295f"
+  integrity sha512-nQTlbFJWhwoeLY5rkhgbjzGQSwk5F1pRdEXait0EFaQSrE/iJF+PIjrQlk0BjL/ogk9HaR9ZI0DQSYrl7jl3IQ==
+  dependencies:
+    chalk "^4.0.0"
+    chokidar "^3.4.1"
+    glob "^7.1.6"
+    import-fresh "^3.2.1"
+    minimist "^1.2.5"
+    sade "^1.7.4"
+    source-map "^0.7.3"
+    svelte-preprocess "^4.0.0"
+    typescript "*"
+
+svelte-preprocess@^4.0.0:
+  version "4.7.4"
+  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.7.4.tgz#e4d5208ab25c2aaaf19e837f7d7bbf7930e61d2b"
+  integrity sha512-mDAmaltQl6e5zU2VEtoWEf7eLTfuOTGr9zt+BpA3AGHo8MIhKiNSPE9OLTCTOMgj0vj/uL9QBbaNmpG4G1CgIA==
+  dependencies:
+    "@types/pug" "^2.0.4"
+    "@types/sass" "^1.16.0"
+    detect-indent "^6.0.0"
+    strip-indent "^3.0.0"
+
+svelte@^3.2.0:
+  version "3.40.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.40.0.tgz#777d47b0aad840bb4dd2eea74400e8caccfb7a5a"
+  integrity sha512-PCof5NCkxw7ZIkypiHwmjk8jCnnlmJ62NQIcGr/keBCOCx2FdAYmpjLjAey8hGy58xKK4WtwLUgFNcQZK2fPLQ==
+
 svgo@^1.0.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
@@ -3841,6 +4957,18 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+table@^6.0.9:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2"
+  integrity sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==
+  dependencies:
+    ajv "^8.0.1"
+    lodash.clonedeep "^4.5.0"
+    lodash.truncate "^4.4.2"
+    slice-ansi "^4.0.0"
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+
 tar-fs@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
@@ -3869,6 +4997,15 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
+terser@^3.8.2:
+  version "3.17.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-3.17.0.tgz#f88ffbeda0deb5637f9d24b0da66f4e15ab10cb2"
+  integrity sha512-/FQzzPJmCpjAH9Xvk2paiWrFq+5M6aVOf+2KRbwhByISDX/EujxsK+BAvrhb6H+2rtrLCHK9N01wO014vrIwVQ==
+  dependencies:
+    commander "^2.19.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.10"
+
 terser@^4.6.2:
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
@@ -3878,6 +5015,20 @@ terser@^4.6.2:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
+terser@^5.0.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.7.1.tgz#2dc7a61009b66bb638305cb2a824763b116bf784"
+  integrity sha512-b3e+d5JbHAe/JSjwsC3Zn55wsBIM7AsHLjKxT31kGCldgbpFePaFo+PiddtO6uwRZWRw7sPXmAN8dTW61xmnSg==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.7.2"
+    source-map-support "~0.5.19"
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
+
 through@^2.3.6, through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
@@ -3893,6 +5044,11 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tinydate@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/tinydate/-/tinydate-1.3.0.tgz#e6ca8e5a22b51bb4ea1c3a2a4fd1352dbd4c57fb"
+  integrity sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -3905,6 +5061,13 @@ to-fast-properties@^1.0.3:
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
   integrity sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=
 
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
@@ -3947,12 +5110,12 @@ ts-node@^7.0.1:
     source-map-support "^0.5.6"
     yn "^2.0.0"
 
-tslib@^1.9.0, tslib@^1.9.3:
+tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.2.0:
+tslib@^2.0.0, tslib@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
   integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
@@ -3977,6 +5140,20 @@ tsutils@^1.1.0:
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-1.9.1.tgz#b9f9ab44e55af9681831d5f28d0aeeaf5c750cb0"
   integrity sha1-ufmrROVa+WgYMdXyjQrur1x1DLA=
 
+tsutils@^3.17.1:
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
+  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
+  dependencies:
+    tslib "^1.8.1"
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
 type-check@~0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
@@ -3989,6 +5166,11 @@ type-detect@^4.0.0, type-detect@^4.0.5:
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
 
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
 type-is@~1.6.17, type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
@@ -3997,10 +5179,30 @@ type-is@~1.6.17, type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-typescript@^3.9.5:
-  version "3.9.7"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
-  integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
+
+typescript@*:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
+  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
+
+typescript@^3.4.1, typescript@^3.9.5, typescript@^3.9.7:
+  version "3.9.10"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8"
+  integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==
+
+unbox-primitive@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
+  integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==
+  dependencies:
+    function-bind "^1.1.1"
+    has-bigints "^1.0.1"
+    has-symbols "^1.0.2"
+    which-boxed-primitive "^1.0.2"
 
 unbzip2-stream@^1.3.3:
   version "1.4.3"
@@ -4063,6 +5265,13 @@ update-notifier@^2.0.0:
     semver-diff "^2.0.0"
     xdg-basedir "^3.0.0"
 
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
 url-parse-lax@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
@@ -4070,12 +5279,23 @@ url-parse-lax@^1.0.0:
   dependencies:
     prepend-http "^1.0.1"
 
-util-deprecate@^1.0.1, util-deprecate@^1.0.2:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
-util.promisify@^1.0.0, util.promisify@~1.0.0:
+util.promisify@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.1.1.tgz#77832f57ced2c9478174149cae9b96e9918cd54b"
+  integrity sha512-/s3UsZUrIfa6xDhr7zZhnE9SLQ5RIXyYfiVnMMyMDzOc8WhWN4Nbh36H842OyurKbCDAesZOJaVyvmSl6fhGQw==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    for-each "^0.3.3"
+    has-symbols "^1.0.1"
+    object.getownpropertydescriptors "^2.1.1"
+
+util.promisify@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.1.tgz#6baf7774b80eeb0f7520d8b81d07982a59abbaee"
   integrity sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==
@@ -4090,6 +5310,11 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
+v8-compile-cache@^2.0.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
+  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -4145,6 +5370,17 @@ whatwg-url@^8.0.0, whatwg-url@^8.5.0:
     tr46 "^2.1.0"
     webidl-conversions "^6.1.0"
 
+which-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
 which@^1.2.9:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
@@ -4152,6 +5388,13 @@ which@^1.2.9:
   dependencies:
     isexe "^2.0.0"
 
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
 widest-line@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-2.0.1.tgz#7438764730ec7ef4381ce4df82fb98a53142a3fc"
@@ -4159,7 +5402,7 @@ widest-line@^2.0.0:
   dependencies:
     string-width "^2.1.1"
 
-word-wrap@~1.2.3:
+word-wrap@^1.2.3, word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
@@ -4183,15 +5426,17 @@ write-file-atomic@^2.0.0:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.2"
 
-ws@^7.2.3:
-  version "7.4.6"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
-  integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
+ws@^6.1.0:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"
+  integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==
+  dependencies:
+    async-limiter "~1.0.0"
 
-ws@^7.4.5:
-  version "7.5.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.1.tgz#44fc000d87edb1d9c53e51fbc69a0ac1f6871d66"
-  integrity sha512-2c6faOUH/nhoQN6abwMloF7Iyl0ZS2E9HGtsiLrWn0zOOMWlhtDmdf/uihDt6jnuCxgtwGBNy6Onsoy2s2O2Ow==
+ws@^7.2.3, ws@^7.4.3, ws@^7.4.5:
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.3.tgz#160835b63c7d97bfab418fc1b8a9fced2ac01a74"
+  integrity sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==
 
 xdg-basedir@^3.0.0:
   version "3.0.0"
@@ -4213,6 +5458,11 @@ yallist@^2.1.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
   integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
 
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"

From 4f0d21a05345cfc3f275f78b7a5a985ce32cf716 Mon Sep 17 00:00:00 2001
From: Mark-fenng <f18846188605@gmail.com>
Date: Fri, 23 Jul 2021 08:45:29 +0800
Subject: [PATCH 410/524] update links of packages and README

---
 packages/rrweb-player/package.json   | 6 +++---
 packages/rrweb-snapshot/README.md    | 2 +-
 packages/rrweb-snapshot/package.json | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
index 12e1f9c1d0..eba1f8d39f 100644
--- a/packages/rrweb-player/package.json
+++ b/packages/rrweb-player/package.json
@@ -46,7 +46,7 @@
   "typings": "typings/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/rrweb-io/rrweb-player.git"
+    "url": "git+https://github.com/rrweb-io/rrweb.git"
   },
   "keywords": [
     "rrweb"
@@ -54,7 +54,7 @@
   "author": "yanzhen@smartx.com",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/rrweb-io/rrweb-player/issues"
+    "url": "https://github.com/rrweb-io/rrweb/issues"
   },
-  "homepage": "https://github.com/rrweb-io/rrweb-player#readme"
+  "homepage": "https://github.com/rrweb-io/rrweb#readme"
 }
diff --git a/packages/rrweb-snapshot/README.md b/packages/rrweb-snapshot/README.md
index 46f1702b5d..934f903483 100644
--- a/packages/rrweb-snapshot/README.md
+++ b/packages/rrweb-snapshot/README.md
@@ -1,6 +1,6 @@
 # rrweb-snapshot
 
-[![Build Status](https://travis-ci.org/rrweb-io/rrweb-snapshot.svg?branch=master)](https://travis-ci.org/rrweb-io/rrweb-snapshot) [![Join the chat at https://gitter.im/rrweb-io/rrweb-snapshot](https://badges.gitter.im/rrweb-io/rrweb-snapshot.svg)](https://gitter.im/rrweb-io/rrweb-snapshot?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Build Status](https://travis-ci.org/rrweb-io/rrweb.svg?branch=master)](https://travis-ci.org/rrweb-io/rrweb) [![Join the chat at slack](https://img.shields.io/badge/slack-@rrweb-teal.svg?logo=slack)](https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg)
 
 Snapshot the DOM into a stateful and serializable data structure.
 Also, provide the ability to rebuild the DOM via snapshot.
diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
index bd31293572..1025d7c388 100644
--- a/packages/rrweb-snapshot/package.json
+++ b/packages/rrweb-snapshot/package.json
@@ -11,7 +11,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/rrweb-io/rrweb-snapshot.git"
+    "url": "git+https://github.com/rrweb-io/rrweb.git"
   },
   "keywords": [
     "rrweb",
@@ -31,9 +31,9 @@
   "author": "yanzhen@smartx.com",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/rrweb-io/rrweb-snapshot/issues"
+    "url": "https://github.com/rrweb-io/rrweb/issues"
   },
-  "homepage": "https://github.com/rrweb-io/rrweb-snapshot#readme",
+  "homepage": "https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-snapshot#readme",
   "devDependencies": {
     "@types/chai": "^4.1.4",
     "@types/jsdom": "^16.2.4",

From 588164aa12f1d94576f89ae0210b98f6e971c895 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Mon, 26 Jul 2021 16:13:03 +0200
Subject: [PATCH 411/524] Cache addHoverClass as it is quite expensive (#643)

* Add cache and cache purging

Needed for https://github.com/rrweb-io/rrweb-snapshot/pull/85

* Add cache and cache purging

Needed for https://github.com/rrweb-io/rrweb-snapshot/pull/85

* Cache addHoverClass as it is quite expensive

https://github.com/rrweb-io/rrweb-snapshot/pull/85

* Make cache non-optional

* Make cache required on addHoverClass
---
 packages/rrweb-snapshot/src/index.ts         |  7 ++-
 packages/rrweb-snapshot/src/rebuild.ts       | 43 ++++++++++++---
 packages/rrweb-snapshot/src/types.ts         |  4 ++
 packages/rrweb-snapshot/test/rebuild.test.ts | 57 +++++++++++++++-----
 packages/rrweb-snapshot/typings/index.d.ts   |  4 +-
 packages/rrweb-snapshot/typings/rebuild.d.ts |  7 ++-
 packages/rrweb-snapshot/typings/types.d.ts   |  3 ++
 packages/rrweb/src/replay/index.ts           | 23 +++++++-
 8 files changed, 122 insertions(+), 26 deletions(-)

diff --git a/packages/rrweb-snapshot/src/index.ts b/packages/rrweb-snapshot/src/index.ts
index 8335768f5f..5bb5eea687 100644
--- a/packages/rrweb-snapshot/src/index.ts
+++ b/packages/rrweb-snapshot/src/index.ts
@@ -6,7 +6,11 @@ import snapshot, {
   needMaskingText,
   IGNORED_NODE,
 } from './snapshot';
-import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
+import rebuild, {
+  buildNodeWithSN,
+  addHoverClass,
+  createCache,
+} from './rebuild';
 export * from './types';
 export * from './utils';
 
@@ -16,6 +20,7 @@ export {
   rebuild,
   buildNodeWithSN,
   addHoverClass,
+  createCache,
   transformAttribute,
   visitSnapshot,
   cleanupSnapshot,
diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index a0778a0c9b..f1b7fbb844 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -6,6 +6,7 @@ import {
   elementNode,
   idNodeMap,
   INode,
+  BuildCache,
 } from './types';
 import { isElement } from './utils';
 
@@ -64,7 +65,10 @@ function escapeRegExp(str: string) {
 
 const HOVER_SELECTOR = /([^\\]):hover/;
 const HOVER_SELECTOR_GLOBAL = new RegExp(HOVER_SELECTOR, 'g');
-export function addHoverClass(cssText: string): string {
+export function addHoverClass(cssText: string, cache: BuildCache): string {
+  const cachedStyle = cache?.stylesWithHoverClass.get(cssText);
+  if (cachedStyle) return cachedStyle;
+
   const ast = parse(cssText, {
     silent: true,
   });
@@ -99,10 +103,19 @@ export function addHoverClass(cssText: string): string {
     'g',
   );
 
-  return cssText.replace(selectorMatcher, (selector) => {
+  const result = cssText.replace(selectorMatcher, (selector) => {
     const newSelector = selector.replace(HOVER_SELECTOR_GLOBAL, '$1.\\:hover');
     return `${selector}, ${newSelector}`;
   });
+  cache?.stylesWithHoverClass.set(cssText, result);
+  return result;
+}
+
+export function createCache(): BuildCache {
+  const stylesWithHoverClass: Map<string, string> = new Map();
+  return {
+    stylesWithHoverClass,
+  };
 }
 
 function buildNode(
@@ -110,9 +123,10 @@ function buildNode(
   options: {
     doc: Document;
     hackCss: boolean;
+    cache: BuildCache;
   },
 ): Node | null {
-  const { doc, hackCss } = options;
+  const { doc, hackCss, cache } = options;
   switch (n.type) {
     case NodeType.Document:
       return doc.implementation.createDocument(null, '', null);
@@ -143,7 +157,7 @@ function buildNode(
           const isRemoteOrDynamicCss =
             tagName === 'style' && name === '_cssText';
           if (isRemoteOrDynamicCss && hackCss) {
-            value = addHoverClass(value);
+            value = addHoverClass(value, cache);
           }
           if (isTextarea || isRemoteOrDynamicCss) {
             const child = doc.createTextNode(value);
@@ -256,7 +270,9 @@ function buildNode(
       return node;
     case NodeType.Text:
       return doc.createTextNode(
-        n.isStyle && hackCss ? addHoverClass(n.textContent) : n.textContent,
+        n.isStyle && hackCss
+          ? addHoverClass(n.textContent, cache)
+          : n.textContent,
       );
     case NodeType.CDATA:
       return doc.createCDATASection(n.textContent);
@@ -275,10 +291,18 @@ export function buildNodeWithSN(
     skipChild?: boolean;
     hackCss: boolean;
     afterAppend?: (n: INode) => unknown;
+    cache: BuildCache;
   },
 ): INode | null {
-  const { doc, map, skipChild = false, hackCss = true, afterAppend } = options;
-  let node = buildNode(n, { doc, hackCss });
+  const {
+    doc,
+    map,
+    skipChild = false,
+    hackCss = true,
+    afterAppend,
+    cache,
+  } = options;
+  let node = buildNode(n, { doc, hackCss, cache });
   if (!node) {
     return null;
   }
@@ -310,6 +334,7 @@ export function buildNodeWithSN(
         skipChild: false,
         hackCss,
         afterAppend,
+        cache,
       });
       if (!childNode) {
         console.warn('Failed to rebuild', childN);
@@ -369,9 +394,10 @@ function rebuild(
     onVisit?: (node: INode) => unknown;
     hackCss?: boolean;
     afterAppend?: (n: INode) => unknown;
+    cache: BuildCache;
   },
 ): [Node | null, idNodeMap] {
-  const { doc, onVisit, hackCss = true, afterAppend } = options;
+  const { doc, onVisit, hackCss = true, afterAppend, cache } = options;
   const idNodeMap: idNodeMap = {};
   const node = buildNodeWithSN(n, {
     doc,
@@ -379,6 +405,7 @@ function rebuild(
     skipChild: false,
     hackCss,
     afterAppend,
+    cache,
   });
   visit(idNodeMap, (visitedNode) => {
     if (onVisit) {
diff --git a/packages/rrweb-snapshot/src/types.ts b/packages/rrweb-snapshot/src/types.ts
index ffeef690c8..e482394b57 100644
--- a/packages/rrweb-snapshot/src/types.ts
+++ b/packages/rrweb-snapshot/src/types.ts
@@ -111,3 +111,7 @@ export type MaskTextFn = (text: string) => string;
 export type MaskInputFn = (text: string) => string;
 
 export type KeepIframeSrcFn = (src: string) => boolean;
+
+export type BuildCache = {
+  stylesWithHoverClass: Map<string, string>;
+};
diff --git a/packages/rrweb-snapshot/test/rebuild.test.ts b/packages/rrweb-snapshot/test/rebuild.test.ts
index a343e780b3..1ace39aded 100644
--- a/packages/rrweb-snapshot/test/rebuild.test.ts
+++ b/packages/rrweb-snapshot/test/rebuild.test.ts
@@ -1,53 +1,67 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import 'mocha';
+import { Suite } from 'mocha';
 import { expect } from 'chai';
-import { addHoverClass } from '../src/rebuild';
+import { addHoverClass, createCache } from '../src/rebuild';
+import { BuildCache } from '../src/types';
+
+function getDuration(hrtime: [number, number]) {
+  const [seconds, nanoseconds] = hrtime;
+  return seconds * 1000 + nanoseconds / 1000000;
+}
+
+interface ISuite extends Suite {
+  cache: BuildCache;
+}
+
+describe('add hover class to hover selector related rules', function (this: ISuite) {
+  beforeEach(() => {
+    this.cache = createCache();
+  });
 
-describe('add hover class to hover selector related rules', () => {
   it('will do nothing to css text without :hover', () => {
     const cssText = 'body { color: white }';
-    expect(addHoverClass(cssText)).to.equal(cssText);
+    expect(addHoverClass(cssText, this.cache)).to.equal(cssText);
   });
 
   it('can add hover class to css text', () => {
     const cssText = '.a:hover { color: white }';
-    expect(addHoverClass(cssText)).to.equal(
+    expect(addHoverClass(cssText, this.cache)).to.equal(
       '.a:hover, .a.\\:hover { color: white }',
     );
   });
 
   it('can add hover class when there is multi selector', () => {
     const cssText = '.a, .b:hover, .c { color: white }';
-    expect(addHoverClass(cssText)).to.equal(
+    expect(addHoverClass(cssText, this.cache)).to.equal(
       '.a, .b:hover, .b.\\:hover, .c { color: white }',
     );
   });
 
   it('can add hover class when there is a multi selector with the same prefix', () => {
     const cssText = '.a:hover, .a:hover::after { color: white }';
-    expect(addHoverClass(cssText)).to.equal(
+    expect(addHoverClass(cssText, this.cache)).to.equal(
       '.a:hover, .a.\\:hover, .a:hover::after, .a.\\:hover::after { color: white }',
     );
   });
 
   it('can add hover class when :hover is not the end of selector', () => {
     const cssText = 'div:hover::after { color: white }';
-    expect(addHoverClass(cssText)).to.equal(
+    expect(addHoverClass(cssText, this.cache)).to.equal(
       'div:hover::after, div.\\:hover::after { color: white }',
     );
   });
 
   it('can add hover class when the selector has multi :hover', () => {
     const cssText = 'a:hover b:hover { color: white }';
-    expect(addHoverClass(cssText)).to.equal(
+    expect(addHoverClass(cssText, this.cache)).to.equal(
       'a:hover b:hover, a.\\:hover b.\\:hover { color: white }',
     );
   });
 
   it('will ignore :hover in css value', () => {
     const cssText = '.a::after { content: ":hover" }';
-    expect(addHoverClass(cssText)).to.equal(cssText);
+    expect(addHoverClass(cssText, this.cache)).to.equal(cssText);
   });
 
   it('benchmark', () => {
@@ -56,9 +70,28 @@ describe('add hover class to hover selector related rules', () => {
       'utf8',
     );
     const start = process.hrtime();
-    addHoverClass(cssText);
+    addHoverClass(cssText, this.cache);
     const end = process.hrtime(start);
-    const duration = end[0] * 1_000 + end[1] / 1_000_000;
+    const duration = getDuration(end);
     expect(duration).to.below(100);
   });
+
+  it('should be a lot faster to add a hover class to a previously processed css string', () => {
+    const factor = 100;
+
+    let cssText = fs.readFileSync(
+      path.resolve(__dirname, './css/benchmark.css'),
+      'utf8',
+    );
+
+    const start = process.hrtime();
+    addHoverClass(cssText, this.cache);
+    const end = process.hrtime(start);
+
+    const cachedStart = process.hrtime();
+    addHoverClass(cssText, this.cache);
+    const cachedEnd = process.hrtime(cachedStart);
+
+    expect(getDuration(cachedEnd) * factor).to.below(getDuration(end));
+  });
 });
diff --git a/packages/rrweb-snapshot/typings/index.d.ts b/packages/rrweb-snapshot/typings/index.d.ts
index 000750d007..efd1fb347e 100644
--- a/packages/rrweb-snapshot/typings/index.d.ts
+++ b/packages/rrweb-snapshot/typings/index.d.ts
@@ -1,5 +1,5 @@
 import snapshot, { serializeNodeWithId, transformAttribute, visitSnapshot, cleanupSnapshot, needMaskingText, IGNORED_NODE } from './snapshot';
-import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
+import rebuild, { buildNodeWithSN, addHoverClass, createCache } from './rebuild';
 export * from './types';
 export * from './utils';
-export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, transformAttribute, visitSnapshot, cleanupSnapshot, needMaskingText, IGNORED_NODE, };
+export { snapshot, serializeNodeWithId, rebuild, buildNodeWithSN, addHoverClass, createCache, transformAttribute, visitSnapshot, cleanupSnapshot, needMaskingText, IGNORED_NODE, };
diff --git a/packages/rrweb-snapshot/typings/rebuild.d.ts b/packages/rrweb-snapshot/typings/rebuild.d.ts
index 6ab9f04b94..64a564cfd7 100644
--- a/packages/rrweb-snapshot/typings/rebuild.d.ts
+++ b/packages/rrweb-snapshot/typings/rebuild.d.ts
@@ -1,16 +1,19 @@
-import { serializedNodeWithId, idNodeMap, INode } from './types';
-export declare function addHoverClass(cssText: string): string;
+import { serializedNodeWithId, idNodeMap, INode, BuildCache } from './types';
+export declare function addHoverClass(cssText: string, cache: BuildCache): string;
+export declare function createCache(): BuildCache;
 export declare function buildNodeWithSN(n: serializedNodeWithId, options: {
     doc: Document;
     map: idNodeMap;
     skipChild?: boolean;
     hackCss: boolean;
     afterAppend?: (n: INode) => unknown;
+    cache: BuildCache;
 }): INode | null;
 declare function rebuild(n: serializedNodeWithId, options: {
     doc: Document;
     onVisit?: (node: INode) => unknown;
     hackCss?: boolean;
     afterAppend?: (n: INode) => unknown;
+    cache: BuildCache;
 }): [Node | null, idNodeMap];
 export default rebuild;
diff --git a/packages/rrweb-snapshot/typings/types.d.ts b/packages/rrweb-snapshot/typings/types.d.ts
index 8524801cf2..e83cd8b895 100644
--- a/packages/rrweb-snapshot/typings/types.d.ts
+++ b/packages/rrweb-snapshot/typings/types.d.ts
@@ -90,3 +90,6 @@ export declare type SlimDOMOptions = Partial<{
 export declare type MaskTextFn = (text: string) => string;
 export declare type MaskInputFn = (text: string) => string;
 export declare type KeepIframeSrcFn = (src: string) => boolean;
+export declare type BuildCache = {
+    stylesWithHoverClass: Map<string, string>;
+};
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 5707feb2c4..9b49eba4ad 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -1,4 +1,11 @@
-import { rebuild, buildNodeWithSN, INode, NodeType } from 'rrweb-snapshot';
+import {
+  rebuild,
+  buildNodeWithSN,
+  INode,
+  NodeType,
+  BuildCache,
+  createCache,
+} from 'rrweb-snapshot';
 import * as mittProxy from 'mitt';
 import { polyfill as smoothscrollPolyfill } from './smoothscroll';
 import { Timer } from './timer';
@@ -97,6 +104,9 @@ export class Replayer {
   // Hold the list of CSSRules for in-memory state restoration
   private virtualStyleRulesMap!: VirtualStyleRulesMap;
 
+  // The replayer uses the cache to speed up replay and scrubbing.
+  private cache: BuildCache = createCache();
+
   private imageMap: Map<eventWithTime, HTMLImageElement> = new Map();
 
   private mirror: Mirror = createMirror();
@@ -376,6 +386,14 @@ export class Replayer {
     this.iframe.style.pointerEvents = 'none';
   }
 
+  /**
+   * Empties the replayer's cache and reclaims memory.
+   * The replayer will use this cache to speed up the playback.
+   */
+  public resetCache() {
+    this.cache = createCache();
+  }
+
   private setupDom() {
     this.wrapper = document.createElement('div');
     this.wrapper.classList.add('replayer-wrapper');
@@ -566,6 +584,7 @@ export class Replayer {
       afterAppend: (builtNode) => {
         this.collectIframeAndAttachDocument(collected, builtNode);
       },
+      cache: this.cache,
     })[1];
     for (const { mutationInQueue, builtNode } of collected) {
       this.attachDocumentToIframe(mutationInQueue, builtNode);
@@ -639,6 +658,7 @@ export class Replayer {
       afterAppend: (builtNode) => {
         this.collectIframeAndAttachDocument(collected, builtNode);
       },
+      cache: this.cache,
     });
     for (const { mutationInQueue, builtNode } of collected) {
       this.attachDocumentToIframe(mutationInQueue, builtNode);
@@ -1217,6 +1237,7 @@ export class Replayer {
         map: this.mirror.map,
         skipChild: true,
         hackCss: true,
+        cache: this.cache,
       }) as INode;
 
       // legacy data, we should not have -1 siblings any more

From 1dc8d688d21a137251e796a6a9b9140d321d1ba9 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Fri, 30 Jul 2021 17:15:34 +0100
Subject: [PATCH 412/524] Provide an option to only build rrweb-snapshot for
 inclusion in rrweb (#649)

---
 packages/rrweb-snapshot/package.json     |  1 +
 packages/rrweb-snapshot/rollup.config.js | 33 +++++++++++++++---------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
index 1025d7c388..7df242fba0 100644
--- a/packages/rrweb-snapshot/package.json
+++ b/packages/rrweb-snapshot/package.json
@@ -7,6 +7,7 @@
     "prepack": "npm run bundle && npm run typings",
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
     "bundle": "rollup --config",
+    "bundle:es-only": "cross-env ES_ONLY=true rollup --config",
     "typings": "tsc -d --declarationDir typings"
   },
   "repository": {
diff --git a/packages/rrweb-snapshot/rollup.config.js b/packages/rrweb-snapshot/rollup.config.js
index 942cc62f63..7101942126 100644
--- a/packages/rrweb-snapshot/rollup.config.js
+++ b/packages/rrweb-snapshot/rollup.config.js
@@ -6,7 +6,20 @@ function toMinPath(path) {
   return path.replace(/\.js$/, '.min.js');
 }
 
-export default [
+let configs = [
+  // ES module - for building rrweb
+  {
+    input: './src/index.ts',
+    plugins: [typescript()],
+    output: [
+      {
+        format: 'esm',
+        file: pkg.module,
+      },
+    ],
+  },
+];
+let extra_configs = [
   // browser
   {
     input: './src/index.ts',
@@ -42,17 +55,7 @@ export default [
       },
     ],
   },
-  // ES module
-  {
-    input: './src/index.ts',
-    plugins: [typescript()],
-    output: [
-      {
-        format: 'esm',
-        file: pkg.module,
-      },
-    ],
-  },
+  // ES module (packed)
   {
     input: './src/index.ts',
     plugins: [typescript(), terser()],
@@ -65,3 +68,9 @@ export default [
     ],
   },
 ];
+
+if (!process.env.ES_ONLY) {
+  configs.push(...extra_configs);
+}
+
+export default configs;

From 33010388695cc82942557a0360692ef8f966109f Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Sat, 31 Jul 2021 08:02:41 +0100
Subject: [PATCH 413/524] Reference packages directly in docs (removing direct
 references to the old rrweb-snapshot and rrweb-player repositories) (#647)

---
 README.md                                | 4 ++--
 README.zh_CN.md                          | 4 ++--
 docs/recipes/customize-replayer.md       | 2 +-
 docs/recipes/customize-replayer.zh_CN.md | 2 +-
 guide.md                                 | 4 ++--
 guide.zh_CN.md                           | 4 ++--
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 01aae03e41..d079db6d23 100644
--- a/README.md
+++ b/README.md
@@ -30,9 +30,9 @@ rrweb refers to 'record and replay the web', which is a tool for recording and r
 
 rrweb is mainly composed of 3 parts:
 
-- **[rrweb-snapshot](https://github.com/rrweb-io/rrweb-snapshot)**, including both snapshot and rebuilding features. The snapshot is used to convert the DOM and its state into a serializable data structure with a unique identifier; the rebuilding feature is to rebuild the snapshot into corresponding DOM.
+- **[rrweb-snapshot](https://github.com/rrweb-io/rrweb/packages/rrweb-snapshot/)**, including both snapshot and rebuilding features. The snapshot is used to convert the DOM and its state into a serializable data structure with a unique identifier; the rebuilding feature is to rebuild the snapshot into corresponding DOM.
 - **[rrweb](https://github.com/rrweb-io/rrweb)**, including two functions, record and replay. The record function is used to record all the mutations in the DOM; the replay is to replay the recorded mutations one by one according to the corresponding timestamp.
-- **[rrweb-player](https://github.com/rrweb-io/rrweb-player)**, is a player UI for rrweb, providing GUI-based functions like pause, fast-forward, drag and drop to play at any time.
+- **[rrweb-player](https://github.com/rrweb-io/rrweb/packages/rrweb-player/)**, is a player UI for rrweb, providing GUI-based functions like pause, fast-forward, drag and drop to play at any time.
 
 ## Roadmap
 
diff --git a/README.zh_CN.md b/README.zh_CN.md
index 5442d7da5e..34c8a320c8 100644
--- a/README.zh_CN.md
+++ b/README.zh_CN.md
@@ -28,9 +28,9 @@ rrweb 是 'record and replay the web' 的简写，旨在利用现代浏览器所
 
 rrweb 主要由 3 部分组成：
 
-- **[rrweb-snapshot](https://github.com/rrweb-io/rrweb-snapshot)**，包含 snapshot 和 rebuild 两个功能。snapshot 用于将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识；rebuild 则是将 snapshot 记录的数据结构重建为对应的 DOM。
+- **[rrweb-snapshot](https://github.com/rrweb-io/rrweb/packages/rrweb-snapshot/)**，包含 snapshot 和 rebuild 两个功能。snapshot 用于将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识；rebuild 则是将 snapshot 记录的数据结构重建为对应的 DOM。
 - **[rrweb](https://github.com/rrweb-io/rrweb)**，包含 record 和 replay 两个功能。record 用于记录 DOM 中的所有变更（mutation）；replay 则是将记录的变更按照对应的时间一一重放。
-- **[rrweb-player](https://github.com/rrweb-io/rrweb-player)**，为 rrweb 提供一套 UI 控件，提供基于 GUI 的暂停、快进、拖拽至任意时间点播放等功能。
+- **[rrweb-player](https://github.com/rrweb-io/rrweb/packages/rrweb-player/)**，为 rrweb 提供一套 UI 控件，提供基于 GUI 的暂停、快进、拖拽至任意时间点播放等功能。
 
 ## Roadmap
 
diff --git a/docs/recipes/customize-replayer.md b/docs/recipes/customize-replayer.md
index a066f19970..75e0473917 100644
--- a/docs/recipes/customize-replayer.md
+++ b/docs/recipes/customize-replayer.md
@@ -69,4 +69,4 @@ rrwebPlayer.addEventListener('ui-update-progress', (event) => {
 
 ## Develop a new replayer UI with rrweb's Replayer.
 
-Please refer [rrweb-player](https://github.com/rrweb-io/rrweb-player).
+Please refer [rrweb-player](https://github.com/rrweb-io/rrweb/packages/rrweb-player/).
diff --git a/docs/recipes/customize-replayer.zh_CN.md b/docs/recipes/customize-replayer.zh_CN.md
index 7d76e2ab33..96a34c0ab3 100644
--- a/docs/recipes/customize-replayer.zh_CN.md
+++ b/docs/recipes/customize-replayer.zh_CN.md
@@ -69,4 +69,4 @@ rrwebPlayer.addEventListener('ui-update-progress', (event) => {
 
 ## 基于 rrweb Replayer 开发自己的回放器 UI
 
-可以参照 [rrweb-player](https://github.com/rrweb-io/rrweb-player) 的方式进行开发。
+可以参照 [rrweb-player](https://github.com/rrweb-io/rrweb/packages/rrweb-player/) 的方式进行开发。
diff --git a/guide.md b/guide.md
index 8932ba7a56..19f26bc204 100644
--- a/guide.md
+++ b/guide.md
@@ -146,10 +146,10 @@ The parameter of `rrweb.record` accepts the following options.
 | maskTextClass        | 'rr-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-snapshot/blob/0bb95f1ee77fef03166a68f75b959ad997171442/src/types.ts#L77-L95)                           |
+| 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)                           |
 | maskInputFn          | -                  | customize mask input content recording logic                                                                                                                                                  |
 | maskTextFn           | -                  | customize mask text content recording logic                                                                                                                                                   |
-| slimDOMOptions       | {}                 | remove unnecessary parts of the DOM <br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91)                      |
+| slimDOMOptions       | {}                 | remove unnecessary parts of the DOM <br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108)                      |
 | inlineStylesheet     | true               | whether to inline the stylesheet in the events                                                                                                                                                |
 | hooks                | {}                 | hooks for events<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                                                  |
 | packFn               | -                  | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                                                |
diff --git a/guide.zh_CN.md b/guide.zh_CN.md
index 86f02b93a8..4478a29570 100644
--- a/guide.zh_CN.md
+++ b/guide.zh_CN.md
@@ -142,10 +142,10 @@ setInterval(save, 10 * 1000);
 | maskTextClass        | 'rr-mask'          | 字符串或正则表达式，可用于自定义忽略元素 text 内容的类名，详见[“隐私”](#隐私)章节                                                                                      |
 | maskTextSelector     | null               | 所有 element.matches(maskTextSelector)为 true 的元素及其子元素的 text 内容将会被屏蔽                                                                                   |
 | maskAllInputs        | false              | 将所有输入内容记录为 \*                                                                                                                                                |
-| maskInputOptions     | { password: true } | 选择将特定类型的输入框内容记录为 \*<br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/0bb95f1ee77fef03166a68f75b959ad997171442/src/types.ts#L77-L95) |
+| maskInputOptions     | { password: true } | 选择将特定类型的输入框内容记录为 \*<br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L77-L95) |
 | maskInputFn          | -                  | 自定义特定类型的输入框内容记录逻辑                                                                                                                                     |
 | maskTextFn           | -                  | 自定义文字内容的记录逻辑                                                                                                                                               |
-| slimDOMOptions       | {}                 | 去除 DOM 中不必要的部分 <br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91)                |
+| slimDOMOptions       | {}                 | 去除 DOM 中不必要的部分 <br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108)                |
 | inlineStylesheet     | true               | 是否将样式表内联                                                                                                                                                       |
 | hooks                | {}                 | 各类事件的回调<br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                                  |
 | packFn               | -                  | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                             |

From da721e4f5a565c14b14256ee48f8b91619c0d279 Mon Sep 17 00:00:00 2001
From: dbseel <david.seel@noibu.com>
Date: Sat, 31 Jul 2021 03:18:02 -0400
Subject: [PATCH 414/524] DragEvent handling, null check fixes (#630)

---
 packages/rrweb/src/record/mutation.ts | 22 +++++++----
 packages/rrweb/src/record/observer.ts | 55 +++++++++++++++++++--------
 2 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index 216c76a392..fd4ac71060 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -271,7 +271,10 @@ export default class MutationBuffer {
       const shadowHost: Element | null = n.getRootNode
         ? (n.getRootNode() as ShadowRoot)?.host
         : null;
-      const notInDoc = !this.doc.contains(n) && !this.doc.contains(shadowHost);
+      // ensure shadowHost is a Node, or doc.contains will throw an error
+      const notInDoc =
+        !this.doc.contains(n) &&
+        (!(shadowHost instanceof Node) || !this.doc.contains(shadowHost));
       if (!n.parentNode || notInDoc) {
         return;
       }
@@ -359,13 +362,16 @@ export default class MutationBuffer {
       if (!node) {
         for (let index = addList.length - 1; index >= 0; index--) {
           const _node = addList.get(index)!;
-          const parentId = this.mirror.getId(
-            (_node.value.parentNode as Node) as INode,
-          );
-          const nextId = getNextId(_node.value);
-          if (parentId !== -1 && nextId !== -1) {
-            node = _node;
-            break;
+          // ensure _node is defined before attempting to find value
+          if (_node) {
+            const parentId = this.mirror.getId(
+              (_node.value.parentNode as Node) as INode,
+            );
+            const nextId = getNextId(_node.value);
+            if (parentId !== -1 && nextId !== -1) {
+              node = _node;
+              break;
+            }
           }
         }
       }
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index 2c96c8f768..bd4ecca4f5 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -194,21 +194,43 @@ function initMoveObserver(
     },
     callbackThreshold,
   );
-  const updatePosition = throttle<MouseEvent | TouchEvent | DragEvent>(
+
+  // update position for mouse, touch, and drag events (drag event extends mouse event)
+  function handleUpdatePositionEvent(evt: MouseEvent | TouchEvent) {
+    const target = getEventTarget(evt);
+    const { clientX, clientY } = isTouchEvent(evt)
+      ? evt.changedTouches[0]
+      : evt;
+    if (!timeBaseline) {
+      timeBaseline = Date.now();
+    }
+    positions.push({
+      x: clientX,
+      y: clientY,
+      id: mirror.getId(target as INode),
+      timeOffset: Date.now() - timeBaseline,
+    });
+  }
+
+  // separate call for non-drag events, in case DragEvent is not defined
+  const updatePosition = throttle<MouseEvent | TouchEvent>(
     (evt) => {
-      const target = getEventTarget(evt);
-      const { clientX, clientY } = isTouchEvent(evt)
-        ? evt.changedTouches[0]
-        : evt;
-      if (!timeBaseline) {
-        timeBaseline = Date.now();
-      }
-      positions.push({
-        x: clientX,
-        y: clientY,
-        id: mirror.getId(target as INode),
-        timeOffset: Date.now() - timeBaseline,
-      });
+      handleUpdatePositionEvent(evt);
+      wrappedCb(
+        evt instanceof MouseEvent
+          ? IncrementalSource.MouseMove
+          : IncrementalSource.TouchMove,
+      );
+    },
+    threshold,
+    {
+      trailing: false,
+    },
+  );
+  // call for drag events, when DragEvent is defined
+  const updateDragPosition = throttle<MouseEvent | TouchEvent | DragEvent>(
+    (evt) => {
+      handleUpdatePositionEvent(evt);
       wrappedCb(
         evt instanceof DragEvent
           ? IncrementalSource.Drag
@@ -222,10 +244,13 @@ function initMoveObserver(
       trailing: false,
     },
   );
+  // it is possible DragEvent is undefined even on devices
+  // that support event 'drag'
+  const dragEventDefined = typeof DragEvent !== 'undefined';
   const handlers = [
     on('mousemove', updatePosition, doc),
     on('touchmove', updatePosition, doc),
-    on('drag', updatePosition, doc),
+    on('drag', dragEventDefined ? updateDragPosition : updatePosition, doc),
   ];
   return () => {
     handlers.forEach((h) => h());

From 2cd978b335fce8e857c5cf783663f2089233969b Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 1 Aug 2021 21:42:49 +0800
Subject: [PATCH 415/524] update git ignore

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index e098495263..753186ec16 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,5 @@ temp
 *.log
 
 .env
+
+.DS_Store

From 838287a16da7f361d56c0676d464b5f74af75bbf Mon Sep 17 00:00:00 2001
From: Olivia Osborn <44754360+olivia-osborn@users.noreply.github.com>
Date: Tue, 3 Aug 2021 01:09:43 -0400
Subject: [PATCH 416/524] Removed sn undefined warning (#572)

---
 packages/rrweb/src/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts
index fcad16e8af..30ba583696 100644
--- a/packages/rrweb/src/utils.ts
+++ b/packages/rrweb/src/utils.ts
@@ -39,7 +39,7 @@ export function createMirror(): Mirror {
     map: {},
     getId(n) {
       // if n is not a serialized INode, use -1 as its id.
-      if (!n.__sn) {
+      if (!n || !n.__sn) {
         return -1;
       }
       return n.__sn.id;

From 8d40e52010f9e1986bbc29620e04054e99a87178 Mon Sep 17 00:00:00 2001
From: Peter Chen <13093023233@163.com>
Date: Sat, 7 Aug 2021 23:06:50 +0800
Subject: [PATCH 417/524] fix: fix console plugin's OOM problem (#656)

* fix: fix console plugin's OOM problem

* fix: fix console plugin

* feat: patch

* feat: patch

* feat: patch

Co-authored-by: chenyangbj01 <chenyangbj01@fenbi.com>
---
 .gitignore                                    |  3 ++
 docs/recipes/console.md                       | 13 ++---
 docs/recipes/console.zh_CN.md                 | 13 ++---
 .../rrweb/src/plugins/console/record/index.ts |  9 +++-
 .../src/plugins/console/record/stringify.ts   | 50 ++++++++++++++++---
 .../typings/plugins/console/record/index.d.ts |  4 +-
 6 files changed, 70 insertions(+), 22 deletions(-)

diff --git a/.gitignore b/.gitignore
index 753186ec16..3a22b849b7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,6 @@ temp
 .env
 
 .DS_Store
+
+build
+dist
diff --git a/docs/recipes/console.md b/docs/recipes/console.md
index 5cace407b3..a9fa14b6d1 100644
--- a/docs/recipes/console.md
+++ b/docs/recipes/console.md
@@ -38,6 +38,7 @@ rrweb.record({
     stringifyOptions: {
       stringLengthLimit: 1000,
       numOfKeysLimit: 100,
+      depthOfLimit: 1
     },
     logger: window.console,
   })],
@@ -45,12 +46,12 @@ rrweb.record({
 ```
 
 All recordLog options are described below:
-| key | default | description |
-| ---------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| level | ['log','warn','error',...] | Default value contains names of all console functions. You can override it by setting console levels you need. |
-| lengthThreshold | 1000 | Maximum number of records of console output. |
-| stringifyOptions | { stringLengthLimit: undefined, numOfKeysLimit: 50 } | If console output includes js objects, we need to stringify them. `stringLengthLimit` limits the string length of single value. `numOfKeysLimit` limits the number of keys in an object. If an object contains more keys than this limit, we would only save object's name. You can reduce the size of events by setting these options. |
-| logger | window.console | the console object we would record.You can set a console object from another execution environment where you would like to record. |
+| key              | default                                                               | description                                                                                                                                                                                                                                                                                                                                                                        |
+| ---------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| level            | ['log','warn','error',...]                                            | Default value contains names of all console functions. You can override it by setting console levels you need.                                                                                                                                                                                                                                                                     |
+| lengthThreshold  | 1000                                                                  | Maximum number of records of console output.                                                                                                                                                                                                                                                                                                                                       |
+| stringifyOptions | { stringLengthLimit: undefined, numOfKeysLimit: 50, depthOfLimit: 4 } | If console output includes js objects, we need to stringify them. `stringLengthLimit` limits the string length of single value. `numOfKeysLimit` limits the number of keys in an object. `depthOfLimit` limits the depth of object. If an object contains more keys than this limit, we would only save object's name. You can reduce the size of events by setting these options. |
+| logger           | window.console                                                        | the console object we would record.You can set a console object from another execution environment where you would like to record.                                                                                                                                                                                                                                                 |
 
 ## replay console
 
diff --git a/docs/recipes/console.zh_CN.md b/docs/recipes/console.zh_CN.md
index de0462174e..e5d895252e 100644
--- a/docs/recipes/console.zh_CN.md
+++ b/docs/recipes/console.zh_CN.md
@@ -37,6 +37,7 @@ rrweb.record({
     stringifyOptions: {
       stringLengthLimit: 1000,
       numOfKeysLimit: 100,
+      depthOfLimit: 1
     },
     logger: window.console,
   })],
@@ -44,12 +45,12 @@ rrweb.record({
 ```
 
 如下是配置选项的详细说明：
-| key | 默认值 | 功能 |
-| ---------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| level | ['log','warn','error',...] | 默认值包含了 console 的全部函数，你也可以传入想要录制的 console 函数。 |
-| lengthThreshold | 1000 | 录制 console 输出信息的最大条数。 |
-| stringifyOptions | { stringLengthLimit: undefined, numOfKeysLimit: 50 } | 如果 console 输出包含了 js 对象，我们需要对其进行序列化，`stringLengthLimit` 限制了单个值能转化的最大字符串长度，`numOfKeysLimit` 限制了一个被序列化的 js 对象能够包含的最大数量 key，如果对象的 key 数量超过了这个限制，我们将只保留对象的名字。你能通过这些选项来减小生成的 events 的体积。 |
-| logger | window.console | 要录制的 console 对象，你也可以传入一个想要录制的其他 js 执行环境的 console 对象。 |
+| key              | 默认值                                                                | 功能                                                                                                                                                                                                                                                                                                                                                                 |
+| ---------------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| level            | ['log','warn','error',...]                                            | 默认值包含了 console 的全部函数，你也可以传入想要录制的 console 函数。                                                                                                                                                                                                                                                                                               |
+| lengthThreshold  | 1000                                                                  | 录制 console 输出信息的最大条数。                                                                                                                                                                                                                                                                                                                                    |
+| stringifyOptions | { stringLengthLimit: undefined, numOfKeysLimit: 50, depthOfLimit: 4 } | 如果 console 输出包含了 js 对象，我们需要对其进行序列化，`stringLengthLimit` 限制了单个值能转化的最大字符串长度，`numOfKeysLimit` 限制了一个被序列化的 js 对象能够包含的最大数量 key，`depthOfLimit` 限制了一个被序列化的 js 对象能够拥有的对象深度（层数），如果对象的 key 数量超过了这个限制，我们将只保留对象的名字。你能通过这些选项来减小生成的 events 的体积。 |
+| logger           | window.console                                                        | 要录制的 console 对象，你也可以传入一个想要录制的其他 js 执行环境的 console 对象。                                                                                                                                                                                                                                                                                   |
 
 ## 播放 console 数据
 
diff --git a/packages/rrweb/src/plugins/console/record/index.ts b/packages/rrweb/src/plugins/console/record/index.ts
index 250ffd2bbe..b7c83555e7 100644
--- a/packages/rrweb/src/plugins/console/record/index.ts
+++ b/packages/rrweb/src/plugins/console/record/index.ts
@@ -1,7 +1,7 @@
 import { listenerHandler, RecordPlugin } from '../../../types';
-import { stringify } from './stringify';
-import { StackFrame, ErrorStackParser } from './error-stack-parser';
 import { patch } from '../../../utils';
+import { ErrorStackParser, StackFrame } from './error-stack-parser';
+import { stringify } from './stringify';
 
 export type StringifyOptions = {
   // limit of string length
@@ -11,6 +11,11 @@ export type StringifyOptions = {
    * if an object contains more keys than this limit, we would call its toString function directly
    */
   numOfKeysLimit: number;
+  /**
+   * limit number of depth in an object
+   * if an object is too deep, toString process may cause browser OOM
+   */
+  depthOfLimit: number;
 };
 
 type LogRecordOptions = {
diff --git a/packages/rrweb/src/plugins/console/record/stringify.ts b/packages/rrweb/src/plugins/console/record/stringify.ts
index e67c35a982..f7bfac3226 100644
--- a/packages/rrweb/src/plugins/console/record/stringify.ts
+++ b/packages/rrweb/src/plugins/console/record/stringify.ts
@@ -48,6 +48,31 @@ function pathToSelector(node: HTMLElement): string | '' {
   return path;
 }
 
+/**
+ * judge is object
+ */
+function isObject(obj: any): boolean {
+  return Object.prototype.toString.call(obj) === '[object Object]';
+}
+
+/**
+ * judge the object's depth
+ */
+function isObjTooDeep(obj: any, limit: number): boolean {
+  if (limit === 0) {
+    return true;
+  }
+
+  const keys = Object.keys(obj);
+  for (const key of keys) {
+    if (isObject(obj[key]) && isObjTooDeep(obj[key], limit - 1)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
 /**
  * stringify any js object
  * @param obj the object to stringify
@@ -58,6 +83,7 @@ export function stringify(
 ): string {
   const options: StringifyOptions = {
     numOfKeysLimit: 50,
+    depthOfLimit: 4,
   };
   Object.assign(options, stringifyOptions);
   const stack: any[] = [];
@@ -89,7 +115,7 @@ export function stringify(
     if (value === null || value === undefined) {
       return value;
     }
-    if (shouldToString(value)) {
+    if (shouldIgnore(value)) {
       return toString(value);
     }
     if (value instanceof Event) {
@@ -115,18 +141,28 @@ export function stringify(
   });
 
   /**
-   * whether we should call toString function of this object
+   * whether we should ignore obj's info and call toString() function instead
    */
-  function shouldToString(_obj: object): boolean {
-    if (
-      typeof _obj === 'object' &&
-      Object.keys(_obj).length > options.numOfKeysLimit
-    ) {
+  function shouldIgnore(_obj: object): boolean {
+    // outof keys limit
+    if (isObject(_obj) && Object.keys(_obj).length > options.numOfKeysLimit) {
       return true;
     }
+
+    // is function
     if (typeof _obj === 'function') {
       return true;
     }
+
+    /**
+     * judge object's depth to avoid browser's OOM
+     *
+     * issues: https://github.com/rrweb-io/rrweb/issues/653
+     */
+    if (isObject(_obj) && isObjTooDeep(_obj, options.depthOfLimit)) {
+      return true;
+    }
+
     return false;
   }
 
diff --git a/packages/rrweb/typings/plugins/console/record/index.d.ts b/packages/rrweb/typings/plugins/console/record/index.d.ts
index 9461dd1dfb..b13a522ab7 100644
--- a/packages/rrweb/typings/plugins/console/record/index.d.ts
+++ b/packages/rrweb/typings/plugins/console/record/index.d.ts
@@ -2,6 +2,7 @@ import { RecordPlugin } from '../../../types';
 export declare type StringifyOptions = {
     stringLengthLimit?: number;
     numOfKeysLimit: number;
+    depthOfLimit: number;
 };
 declare type LogRecordOptions = {
     level?: LogLevel[] | undefined;
@@ -38,4 +39,5 @@ export declare type Logger = {
 };
 export declare const PLUGIN_NAME = "rrweb/console@1";
 export declare const getRecordConsolePlugin: (options?: LogRecordOptions) => RecordPlugin;
-export {};
+export { };
+

From 188f31eea90b0a33167107653b1391193b33ec82 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Mon, 9 Aug 2021 11:18:32 +0100
Subject: [PATCH 418/524] Correct links in #647; think they were only working
 previously with an auto-redirect (#658)

---
 README.md                                | 4 ++--
 README.zh_CN.md                          | 4 ++--
 docs/recipes/customize-replayer.md       | 2 +-
 docs/recipes/customize-replayer.zh_CN.md | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index d079db6d23..a50c2ec7b4 100644
--- a/README.md
+++ b/README.md
@@ -30,9 +30,9 @@ rrweb refers to 'record and replay the web', which is a tool for recording and r
 
 rrweb is mainly composed of 3 parts:
 
-- **[rrweb-snapshot](https://github.com/rrweb-io/rrweb/packages/rrweb-snapshot/)**, including both snapshot and rebuilding features. The snapshot is used to convert the DOM and its state into a serializable data structure with a unique identifier; the rebuilding feature is to rebuild the snapshot into corresponding DOM.
+- **[rrweb-snapshot](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-snapshot/)**, including both snapshot and rebuilding features. The snapshot is used to convert the DOM and its state into a serializable data structure with a unique identifier; the rebuilding feature is to rebuild the snapshot into corresponding DOM.
 - **[rrweb](https://github.com/rrweb-io/rrweb)**, including two functions, record and replay. The record function is used to record all the mutations in the DOM; the replay is to replay the recorded mutations one by one according to the corresponding timestamp.
-- **[rrweb-player](https://github.com/rrweb-io/rrweb/packages/rrweb-player/)**, is a player UI for rrweb, providing GUI-based functions like pause, fast-forward, drag and drop to play at any time.
+- **[rrweb-player](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-player/)**, is a player UI for rrweb, providing GUI-based functions like pause, fast-forward, drag and drop to play at any time.
 
 ## Roadmap
 
diff --git a/README.zh_CN.md b/README.zh_CN.md
index 34c8a320c8..ca3a2c3275 100644
--- a/README.zh_CN.md
+++ b/README.zh_CN.md
@@ -28,9 +28,9 @@ rrweb 是 'record and replay the web' 的简写，旨在利用现代浏览器所
 
 rrweb 主要由 3 部分组成：
 
-- **[rrweb-snapshot](https://github.com/rrweb-io/rrweb/packages/rrweb-snapshot/)**，包含 snapshot 和 rebuild 两个功能。snapshot 用于将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识；rebuild 则是将 snapshot 记录的数据结构重建为对应的 DOM。
+- **[rrweb-snapshot](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-snapshot/)**，包含 snapshot 和 rebuild 两个功能。snapshot 用于将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识；rebuild 则是将 snapshot 记录的数据结构重建为对应的 DOM。
 - **[rrweb](https://github.com/rrweb-io/rrweb)**，包含 record 和 replay 两个功能。record 用于记录 DOM 中的所有变更（mutation）；replay 则是将记录的变更按照对应的时间一一重放。
-- **[rrweb-player](https://github.com/rrweb-io/rrweb/packages/rrweb-player/)**，为 rrweb 提供一套 UI 控件，提供基于 GUI 的暂停、快进、拖拽至任意时间点播放等功能。
+- **[rrweb-player](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-player/)**，为 rrweb 提供一套 UI 控件，提供基于 GUI 的暂停、快进、拖拽至任意时间点播放等功能。
 
 ## Roadmap
 
diff --git a/docs/recipes/customize-replayer.md b/docs/recipes/customize-replayer.md
index 75e0473917..d30462326f 100644
--- a/docs/recipes/customize-replayer.md
+++ b/docs/recipes/customize-replayer.md
@@ -69,4 +69,4 @@ rrwebPlayer.addEventListener('ui-update-progress', (event) => {
 
 ## Develop a new replayer UI with rrweb's Replayer.
 
-Please refer [rrweb-player](https://github.com/rrweb-io/rrweb/packages/rrweb-player/).
+Please refer [rrweb-player](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-player/).
diff --git a/docs/recipes/customize-replayer.zh_CN.md b/docs/recipes/customize-replayer.zh_CN.md
index 96a34c0ab3..58f6553fc0 100644
--- a/docs/recipes/customize-replayer.zh_CN.md
+++ b/docs/recipes/customize-replayer.zh_CN.md
@@ -69,4 +69,4 @@ rrwebPlayer.addEventListener('ui-update-progress', (event) => {
 
 ## 基于 rrweb Replayer 开发自己的回放器 UI
 
-可以参照 [rrweb-player](https://github.com/rrweb-io/rrweb/packages/rrweb-player/) 的方式进行开发。
+可以参照 [rrweb-player](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-player/) 的方式进行开发。

From 009d73ab79cbc3ac66bb255dee9065dc6b1d84ec Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Mon, 9 Aug 2021 17:03:24 +0100
Subject: [PATCH 419/524] Fix that timer.addAction reverses order when splicing
 multiple events at same timestamp (#611)

* Add test for event ordering utilizing final html testing method added by Justin (with thanks)

* Found an error where two mutation events had the same timestamp, but one removed a node added in the other. The `actions.splice` method was reversing their order and triggering a 'Node with id [...] not found' error
---
 packages/rrweb/src/replay/timer.ts            |   4 +-
 .../test/__snapshots__/replayer.test.ts.snap  |  51 ++++++++
 packages/rrweb/test/events/ordering.ts        | 123 ++++++++++++++++++
 packages/rrweb/test/replayer.test.ts          |  41 ++++++
 4 files changed, 218 insertions(+), 1 deletion(-)
 create mode 100644 packages/rrweb/test/events/ordering.ts

diff --git a/packages/rrweb/src/replay/timer.ts b/packages/rrweb/src/replay/timer.ts
index 2d2d7c236d..684c3ff06c 100644
--- a/packages/rrweb/src/replay/timer.ts
+++ b/packages/rrweb/src/replay/timer.ts
@@ -88,7 +88,9 @@ export class Timer {
       } else if (this.actions[mid].delay > action.delay) {
         end = mid - 1;
       } else {
-        return mid;
+        // already an action with same delay (timestamp)
+        // the plus one will splice the new one after the existing one
+        return mid + 1;
       }
     }
     return start;
diff --git a/packages/rrweb/test/__snapshots__/replayer.test.ts.snap b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
index de5db0c3fd..c95a251b66 100644
--- a/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
@@ -1,5 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ordering-events 1`] = `
+"file-frame-1
+<html>
+  <head>
+    <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
+  </head>
+  <body>
+    <div class=\\"replayer-wrapper\\">
+      <div class=\\"replayer-mouse\\"></div>
+      <canvas
+        class=\\"replayer-mouse-tail\\"
+        width=\\"1000\\"
+        height=\\"800\\"
+        style=\\"display: inherit\\"
+      ></canvas
+      ><iframe
+        sandbox=\\"allow-same-origin\\"
+        scrolling=\\"no\\"
+        width=\\"1000\\"
+        height=\\"800\\"
+        style=\\"display: inherit; pointer-events: none\\"
+      ></iframe>
+    </div>
+  </body>
+</html>
+
+
+file-frame-2
+<!DOCTYPE html>
+<html lang=\\"en\\">
+  <head>
+    <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
+  </head>
+  <body>
+    <span>Final - correct</span>
+  </body>
+</html>
+
+
+file-cid-0
+@charset \\"utf-8\\";
+
+.rr-block { background: rgb(204, 204, 204); }
+
+noscript { display: none !important; }
+
+html.rrweb-paused * { animation-play-state: paused !important; }
+"
+`;
+
 exports[`style-sheet-remove-events-play-at-2500 1`] = `
 "file-frame-1
 <html>
diff --git a/packages/rrweb/test/events/ordering.ts b/packages/rrweb/test/events/ordering.ts
new file mode 100644
index 0000000000..083c687011
--- /dev/null
+++ b/packages/rrweb/test/events/ordering.ts
@@ -0,0 +1,123 @@
+import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
+
+const now = Date.now();
+const events: eventWithTime[] = [
+  {
+    type: EventType.DomContentLoaded,
+    data: {},
+    timestamp: now,
+  },
+  {
+    type: EventType.Load,
+    data: {},
+    timestamp: now + 10,
+  },
+  {
+    type: EventType.Meta,
+    data: {
+      href: 'http://localhost',
+      width: 1000,
+      height: 800,
+    },
+    timestamp: now + 10,
+  },
+  // full snapshot:
+  {
+    data: {
+      node: {
+        id: 1,
+        type: 0,
+        childNodes: [
+          { id: 2, name: 'html', type: 1, publicId: '', systemId: '' },
+          {
+            id: 3,
+            type: 2,
+            tagName: 'html',
+            attributes: { lang: 'en' },
+            childNodes: [
+              {
+                id: 4,
+                type: 2,
+                tagName: 'head',
+                attributes: {},
+                childNodes: [],
+              },
+              {
+                id: 100,
+                type: 2,
+                tagName: 'body',
+                attributes: {},
+                childNodes: [
+                  {
+                    id: 101,
+                    type: 2,
+                    tagName: 'span',
+                    attributes: {},
+                    childNodes: [
+                      {
+                        id: 102,
+                        type: 3,
+                        textContent: 'Initial',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      initialOffset: { top: 0, left: 0 },
+    },
+    type: EventType.FullSnapshot,
+    timestamp: now + 20,
+  },
+  // 1st mutation that modifies text content
+  {
+    data: {
+      adds: [],
+      texts: [
+        {
+          id: 102,
+          value: 'Intermediate - incorrect',
+        }
+      ],
+      source: IncrementalSource.Mutation,
+      removes: [],
+      attributes: [],
+    },
+    type: EventType.IncrementalSnapshot,
+    timestamp: now + 30,
+  },
+  // 2nd mutation (with same timestamp) that modifies text content
+  {
+    data: {
+      adds: [],
+      texts: [
+        {
+          id: 102,
+          value: 'Final - correct',
+        }
+      ],
+      source: IncrementalSource.Mutation,
+      removes: [],
+      attributes: [],
+    },
+    type: EventType.IncrementalSnapshot,
+    timestamp: now + 30,
+  },
+  // dummy - presence triggers a bug
+  {
+    data: {
+      adds: [],
+      texts: [],
+      source: IncrementalSource.Mutation,
+      removes: [],
+      attributes: [],
+    },
+    type: EventType.IncrementalSnapshot,
+    timestamp: now + 35,
+  },
+];
+
+export default events;
diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts
index bc37e32f35..4ffd9b9f76 100644
--- a/packages/rrweb/test/replayer.test.ts
+++ b/packages/rrweb/test/replayer.test.ts
@@ -12,6 +12,7 @@ import {
   sampleStyleSheetRemoveEvents as stylesheetRemoveEvents,
 } from './utils';
 import styleSheetRuleEvents from './events/style-sheet-rule-events';
+import orderingEvents from './events/ordering';
 
 interface ISuite extends Suite {
   code: string;
@@ -247,4 +248,44 @@ describe('replayer', function (this: ISuite) {
     `);
     expect(status).to.equal('live');
   });
+
+  it('replays same timestamp events in correct order', async () => {
+    await this.page.evaluate(
+      `events = ${JSON.stringify(orderingEvents)}`,
+    );
+    await this.page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+      replayer.play();
+    `);
+    await this.page.waitForTimeout(50);
+
+    await assertDomSnapshot(
+      this.page,
+      __filename,
+      'ordering-events',
+    );
+  });
+
+  it('replays same timestamp events in correct order (with addAction)', async () => {
+    await this.page.evaluate(
+      `events = ${JSON.stringify(orderingEvents)}`,
+    );
+    await this.page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events.slice(0, events.length-2));
+      replayer.play();
+      replayer.addEvent(events[events.length-2]);
+      replayer.addEvent(events[events.length-1]);
+    `);
+    await this.page.waitForTimeout(50);
+
+    await assertDomSnapshot(
+      this.page,
+      __filename,
+      'ordering-events',
+    );
+  });
+
+
 });

From c0fbfa77747929c34bf83a1ee2e11fbfc6577b35 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Sat, 14 Aug 2021 07:56:57 +0100
Subject: [PATCH 420/524] Revert some of the non-essential changes of #630 (for
 ease of merging other branches) (#652)

---
 packages/rrweb/src/record/observer.ts | 59 ++++++++-------------------
 1 file changed, 18 insertions(+), 41 deletions(-)

diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index bd4ecca4f5..57fa0463e1 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -194,45 +194,25 @@ function initMoveObserver(
     },
     callbackThreshold,
   );
-
-  // update position for mouse, touch, and drag events (drag event extends mouse event)
-  function handleUpdatePositionEvent(evt: MouseEvent | TouchEvent) {
-    const target = getEventTarget(evt);
-    const { clientX, clientY } = isTouchEvent(evt)
-      ? evt.changedTouches[0]
-      : evt;
-    if (!timeBaseline) {
-      timeBaseline = Date.now();
-    }
-    positions.push({
-      x: clientX,
-      y: clientY,
-      id: mirror.getId(target as INode),
-      timeOffset: Date.now() - timeBaseline,
-    });
-  }
-
-  // separate call for non-drag events, in case DragEvent is not defined
-  const updatePosition = throttle<MouseEvent | TouchEvent>(
-    (evt) => {
-      handleUpdatePositionEvent(evt);
-      wrappedCb(
-        evt instanceof MouseEvent
-          ? IncrementalSource.MouseMove
-          : IncrementalSource.TouchMove,
-      );
-    },
-    threshold,
-    {
-      trailing: false,
-    },
-  );
-  // call for drag events, when DragEvent is defined
-  const updateDragPosition = throttle<MouseEvent | TouchEvent | DragEvent>(
+  const updatePosition = throttle<MouseEvent | TouchEvent | DragEvent>(
     (evt) => {
-      handleUpdatePositionEvent(evt);
+      const target = getEventTarget(evt);
+      const { clientX, clientY } = isTouchEvent(evt)
+        ? evt.changedTouches[0]
+        : evt;
+      if (!timeBaseline) {
+        timeBaseline = Date.now();
+      }
+      positions.push({
+        x: clientX,
+        y: clientY,
+        id: mirror.getId(target as INode),
+        timeOffset: Date.now() - timeBaseline,
+      });
+      // it is possible DragEvent is undefined even on devices
+      // that support event 'drag'
       wrappedCb(
-        evt instanceof DragEvent
+        typeof DragEvent !== 'undefined' && evt instanceof DragEvent
           ? IncrementalSource.Drag
           : evt instanceof MouseEvent
           ? IncrementalSource.MouseMove
@@ -244,13 +224,10 @@ function initMoveObserver(
       trailing: false,
     },
   );
-  // it is possible DragEvent is undefined even on devices
-  // that support event 'drag'
-  const dragEventDefined = typeof DragEvent !== 'undefined';
   const handlers = [
     on('mousemove', updatePosition, doc),
     on('touchmove', updatePosition, doc),
-    on('drag', dragEventDefined ? updateDragPosition : updatePosition, doc),
+    on('drag', updatePosition, doc),
   ];
   return () => {
     handlers.forEach((h) => h());

From e5b0750e90e8b9d0ff2535e11882f4d6b8ba08b6 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Sat, 14 Aug 2021 08:17:17 +0100
Subject: [PATCH 421/524] Don't trust the html 'value' attribute on <option> -
 the DOM `.selected` is the one we want I think. (#651)

- encountered inconsistent html with multiple <option> elements with the same value attribute
 - due to check `attributes.selected = (n as HTMLOptionElement).selected;` the extra ones were being stored as `selected: false`; furthermore, the `false` value was being ignored upon replay, and so the last of the extra ones was being chosen as the 'selected' option
---
 packages/rrweb-snapshot/src/rebuild.ts  | 4 ++++
 packages/rrweb-snapshot/src/snapshot.ts | 9 ++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index f1b7fbb844..8459c379ce 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -149,6 +149,10 @@ function buildNode(
           continue;
         }
         let value = n.attributes[name];
+        if (tagName === 'option' && name === 'selected' && value === false) {
+          // legacy fix (TODO: if `value === false` can be generated for other attrs, should we also omit those other attrs from build?)
+          continue;
+        }
         value =
           typeof value === 'boolean' || typeof value === 'number' ? '' : value;
         // attribute names start with rr_ are internal attributes added by rrweb
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 49c2e13c29..f2eccf5c4e 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -458,9 +458,12 @@ function serializeNode(
         }
       }
       if (tagName === 'option') {
-        const selectValue = (n as HTMLOptionElement).parentElement;
-        if (attributes.value === (selectValue as HTMLSelectElement).value) {
-          attributes.selected = (n as HTMLOptionElement).selected;
+        if ((n as HTMLOptionElement).selected) {
+          attributes.selected = true;
+        } else {
+          // ignore the html attribute (which corresponds to DOM (n as HTMLOptionElement).defaultSelected)
+          // if it's already been changed
+          delete attributes.selected;
         }
       }
       // canvas image data

From 9571c36d80ad0846913660217b0ecf65261f91ee Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 14 Aug 2021 23:58:56 +0800
Subject: [PATCH 422/524] add lerna to manage monorepo

---
 .travis.yml                                   |    9 +-
 lerna.json                                    |   10 +
 package.json                                  |    5 +-
 packages/rrweb-player/package.json            |    3 +-
 packages/rrweb-snapshot/package.json          |    3 +-
 packages/rrweb/package.json                   |    3 +-
 .../typings/plugins/console/record/index.d.ts |    3 +-
 packages/rrweb/typings/replay/index.d.ts      |    2 +
 yarn.lock                                     | 3413 ++++++++++++++++-
 9 files changed, 3386 insertions(+), 65 deletions(-)
 create mode 100644 lerna.json

diff --git a/.travis.yml b/.travis.yml
index 4b51e6a40e..9d5753868e 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -11,9 +11,6 @@ install:
   - yarn
 
 script:
-  - cd packages/rrweb-snapshot
-  - yarn bundle
-  - yarn test
-  - cd ../rrweb
-  - yarn check-types
-  - xvfb-run --server-args="-screen 0 1920x1080x24" yarn test 
\ No newline at end of file
+  - yarn lerna run prepublish
+  - yarn lerna run check-types
+  - xvfb-run --server-args="-screen 0 1920x1080x24" yarn lerna run test
diff --git a/lerna.json b/lerna.json
new file mode 100644
index 0000000000..5dabe20e89
--- /dev/null
+++ b/lerna.json
@@ -0,0 +1,10 @@
+{
+  "version": "independent",
+  "npmClient": "yarn",
+  "useWorkspaces": true,
+  "command": {
+    "publish": {
+      "message": "chore(release): publish %s"
+    }
+  }
+}
diff --git a/package.json b/package.json
index 3082e1b1c2..4de9a14422 100644
--- a/package.json
+++ b/package.json
@@ -18,5 +18,8 @@
     "packages/rrweb",
     "packages/rrweb-snapshot",
     "packages/rrweb-player"
-  ]
+  ],
+  "devDependencies": {
+    "lerna": "^4.0.0"
+  }
 }
diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
index eba1f8d39f..a58b074f6f 100644
--- a/packages/rrweb-player/package.json
+++ b/packages/rrweb-player/package.json
@@ -32,7 +32,8 @@
     "dev": "rollup -c -w",
     "prepublishOnly": "yarn build",
     "start": "sirv public",
-    "validate": "svelte-check"
+    "validate": "svelte-check",
+    "prepublish": "yarn build"
   },
   "description": "rrweb's replayer UI",
   "main": "lib/index.js",
diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
index 7df242fba0..13290cbc60 100644
--- a/packages/rrweb-snapshot/package.json
+++ b/packages/rrweb-snapshot/package.json
@@ -8,7 +8,8 @@
     "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
     "bundle": "rollup --config",
     "bundle:es-only": "cross-env ES_ONLY=true rollup --config",
-    "typings": "tsc -d --declarationDir typings"
+    "typings": "tsc -d --declarationDir typings",
+    "prepublish": "npm run typings && npm run bundle"
   },
   "repository": {
     "type": "git",
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 9b4cc86195..b708dc30c6 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -12,7 +12,8 @@
     "bundle:browser": "cross-env BROWSER_ONLY=true rollup --config",
     "bundle": "rollup --config",
     "typings": "tsc -d --declarationDir typings",
-    "check-types": "tsc -noEmit"
+    "check-types": "tsc -noEmit",
+    "prepublish": "npm run typings && npm run bundle"
   },
   "repository": {
     "type": "git",
diff --git a/packages/rrweb/typings/plugins/console/record/index.d.ts b/packages/rrweb/typings/plugins/console/record/index.d.ts
index b13a522ab7..22d9c9ce15 100644
--- a/packages/rrweb/typings/plugins/console/record/index.d.ts
+++ b/packages/rrweb/typings/plugins/console/record/index.d.ts
@@ -39,5 +39,4 @@ export declare type Logger = {
 };
 export declare const PLUGIN_NAME = "rrweb/console@1";
 export declare const getRecordConsolePlugin: (options?: LogRecordOptions) => RecordPlugin;
-export { };
-
+export {};
diff --git a/packages/rrweb/typings/replay/index.d.ts b/packages/rrweb/typings/replay/index.d.ts
index 5fd7ad4779..0511749f4f 100644
--- a/packages/rrweb/typings/replay/index.d.ts
+++ b/packages/rrweb/typings/replay/index.d.ts
@@ -19,6 +19,7 @@ export declare class Replayer {
     private fragmentParentMap;
     private elementStateMap;
     private virtualStyleRulesMap;
+    private cache;
     private imageMap;
     private mirror;
     private firstFullSnapshot;
@@ -38,6 +39,7 @@ export declare class Replayer {
     addEvent(rawEvent: eventWithTime | string): void;
     enableInteract(): void;
     disableInteract(): void;
+    resetCache(): void;
     private setupDom;
     private handleResize;
     private getCastFn;
diff --git a/yarn.lock b/yarn.lock
index e0138bfbe5..6798637266 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -59,6 +59,867 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf"
   integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
 
+"@hutson/parse-repository-url@^3.0.0":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
+  integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==
+
+"@lerna/add@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/add/-/add-4.0.0.tgz#c36f57d132502a57b9e7058d1548b7a565ef183f"
+  integrity sha512-cpmAH1iS3k8JBxNvnMqrGTTjbY/ZAiKa1ChJzFevMYY3eeqbvhsBKnBcxjRXtdrJ6bd3dCQM+ZtK+0i682Fhng==
+  dependencies:
+    "@lerna/bootstrap" "4.0.0"
+    "@lerna/command" "4.0.0"
+    "@lerna/filter-options" "4.0.0"
+    "@lerna/npm-conf" "4.0.0"
+    "@lerna/validation-error" "4.0.0"
+    dedent "^0.7.0"
+    npm-package-arg "^8.1.0"
+    p-map "^4.0.0"
+    pacote "^11.2.6"
+    semver "^7.3.4"
+
+"@lerna/bootstrap@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/bootstrap/-/bootstrap-4.0.0.tgz#5f5c5e2c6cfc8fcec50cb2fbe569a8c607101891"
+  integrity sha512-RkS7UbeM2vu+kJnHzxNRCLvoOP9yGNgkzRdy4UV2hNalD7EP41bLvRVOwRYQ7fhc2QcbhnKNdOBihYRL0LcKtw==
+  dependencies:
+    "@lerna/command" "4.0.0"
+    "@lerna/filter-options" "4.0.0"
+    "@lerna/has-npm-version" "4.0.0"
+    "@lerna/npm-install" "4.0.0"
+    "@lerna/package-graph" "4.0.0"
+    "@lerna/pulse-till-done" "4.0.0"
+    "@lerna/rimraf-dir" "4.0.0"
+    "@lerna/run-lifecycle" "4.0.0"
+    "@lerna/run-topologically" "4.0.0"
+    "@lerna/symlink-binary" "4.0.0"
+    "@lerna/symlink-dependencies" "4.0.0"
+    "@lerna/validation-error" "4.0.0"
+    dedent "^0.7.0"
+    get-port "^5.1.1"
+    multimatch "^5.0.0"
+    npm-package-arg "^8.1.0"
+    npmlog "^4.1.2"
+    p-map "^4.0.0"
+    p-map-series "^2.1.0"
+    p-waterfall "^2.1.1"
+    read-package-tree "^5.3.1"
+    semver "^7.3.4"
+
+"@lerna/changed@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/changed/-/changed-4.0.0.tgz#b9fc76cea39b9292a6cd263f03eb57af85c9270b"
+  integrity sha512-cD+KuPRp6qiPOD+BO6S6SN5cARspIaWSOqGBpGnYzLb4uWT8Vk4JzKyYtc8ym1DIwyoFXHosXt8+GDAgR8QrgQ==
+  dependencies:
+    "@lerna/collect-updates" "4.0.0"
+    "@lerna/command" "4.0.0"
+    "@lerna/listable" "4.0.0"
+    "@lerna/output" "4.0.0"
+
+"@lerna/check-working-tree@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/check-working-tree/-/check-working-tree-4.0.0.tgz#257e36a602c00142e76082a19358e3e1ae8dbd58"
+  integrity sha512-/++bxM43jYJCshBiKP5cRlCTwSJdRSxVmcDAXM+1oUewlZJVSVlnks5eO0uLxokVFvLhHlC5kHMc7gbVFPHv6Q==
+  dependencies:
+    "@lerna/collect-uncommitted" "4.0.0"
+    "@lerna/describe-ref" "4.0.0"
+    "@lerna/validation-error" "4.0.0"
+
+"@lerna/child-process@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/child-process/-/child-process-4.0.0.tgz#341b96a57dffbd9705646d316e231df6fa4df6e1"
+  integrity sha512-XtCnmCT9eyVsUUHx6y/CTBYdV9g2Cr/VxyseTWBgfIur92/YKClfEtJTbOh94jRT62hlKLqSvux/UhxXVh613Q==
+  dependencies:
+    chalk "^4.1.0"
+    execa "^5.0.0"
+    strong-log-transformer "^2.1.0"
+
+"@lerna/clean@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/clean/-/clean-4.0.0.tgz#8f778b6f2617aa2a936a6b5e085ae62498e57dc5"
+  integrity sha512-uugG2iN9k45ITx2jtd8nEOoAtca8hNlDCUM0N3lFgU/b1mEQYAPRkqr1qs4FLRl/Y50ZJ41wUz1eazS+d/0osA==
+  dependencies:
+    "@lerna/command" "4.0.0"
+    "@lerna/filter-options" "4.0.0"
+    "@lerna/prompt" "4.0.0"
+    "@lerna/pulse-till-done" "4.0.0"
+    "@lerna/rimraf-dir" "4.0.0"
+    p-map "^4.0.0"
+    p-map-series "^2.1.0"
+    p-waterfall "^2.1.1"
+
+"@lerna/cli@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/cli/-/cli-4.0.0.tgz#8eabd334558836c1664df23f19acb95e98b5bbf3"
+  integrity sha512-Neaw3GzFrwZiRZv2g7g6NwFjs3er1vhraIniEs0jjVLPMNC4eata0na3GfE5yibkM/9d3gZdmihhZdZ3EBdvYA==
+  dependencies:
+    "@lerna/global-options" "4.0.0"
+    dedent "^0.7.0"
+    npmlog "^4.1.2"
+    yargs "^16.2.0"
+
+"@lerna/collect-uncommitted@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/collect-uncommitted/-/collect-uncommitted-4.0.0.tgz#855cd64612969371cfc2453b90593053ff1ba779"
+  integrity sha512-ufSTfHZzbx69YNj7KXQ3o66V4RC76ffOjwLX0q/ab//61bObJ41n03SiQEhSlmpP+gmFbTJ3/7pTe04AHX9m/g==
+  dependencies:
+    "@lerna/child-process" "4.0.0"
+    chalk "^4.1.0"
+    npmlog "^4.1.2"
+
+"@lerna/collect-updates@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/collect-updates/-/collect-updates-4.0.0.tgz#8e208b1bafd98a372ff1177f7a5e288f6bea8041"
+  integrity sha512-bnNGpaj4zuxsEkyaCZLka9s7nMs58uZoxrRIPJ+nrmrZYp1V5rrd+7/NYTuunOhY2ug1sTBvTAxj3NZQ+JKnOw==
+  dependencies:
+    "@lerna/child-process" "4.0.0"
+    "@lerna/describe-ref" "4.0.0"
+    minimatch "^3.0.4"
+    npmlog "^4.1.2"
+    slash "^3.0.0"
+
+"@lerna/command@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/command/-/command-4.0.0.tgz#991c7971df8f5bf6ae6e42c808869a55361c1b98"
+  integrity sha512-LM9g3rt5FsPNFqIHUeRwWXLNHJ5NKzOwmVKZ8anSp4e1SPrv2HNc1V02/9QyDDZK/w+5POXH5lxZUI1CHaOK/A==
+  dependencies:
+    "@lerna/child-process" "4.0.0"
+    "@lerna/package-graph" "4.0.0"
+    "@lerna/project" "4.0.0"
+    "@lerna/validation-error" "4.0.0"
+    "@lerna/write-log-file" "4.0.0"
+    clone-deep "^4.0.1"
+    dedent "^0.7.0"
+    execa "^5.0.0"
+    is-ci "^2.0.0"
+    npmlog "^4.1.2"
+
+"@lerna/conventional-commits@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/conventional-commits/-/conventional-commits-4.0.0.tgz#660fb2c7b718cb942ead70110df61f18c6f99750"
+  integrity sha512-CSUQRjJHFrH8eBn7+wegZLV3OrNc0Y1FehYfYGhjLE2SIfpCL4bmfu/ViYuHh9YjwHaA+4SX6d3hR+xkeseKmw==
+  dependencies:
+    "@lerna/validation-error" "4.0.0"
+    conventional-changelog-angular "^5.0.12"
+    conventional-changelog-core "^4.2.2"
+    conventional-recommended-bump "^6.1.0"
+    fs-extra "^9.1.0"
+    get-stream "^6.0.0"
+    lodash.template "^4.5.0"
+    npm-package-arg "^8.1.0"
+    npmlog "^4.1.2"
+    pify "^5.0.0"
+    semver "^7.3.4"
+
+"@lerna/create-symlink@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/create-symlink/-/create-symlink-4.0.0.tgz#8c5317ce5ae89f67825443bd7651bf4121786228"
+  integrity sha512-I0phtKJJdafUiDwm7BBlEUOtogmu8+taxq6PtIrxZbllV9hWg59qkpuIsiFp+no7nfRVuaasNYHwNUhDAVQBig==
+  dependencies:
+    cmd-shim "^4.1.0"
+    fs-extra "^9.1.0"
+    npmlog "^4.1.2"
+
+"@lerna/create@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/create/-/create-4.0.0.tgz#b6947e9b5dfb6530321952998948c3e63d64d730"
+  integrity sha512-mVOB1niKByEUfxlbKTM1UNECWAjwUdiioIbRQZEeEabtjCL69r9rscIsjlGyhGWCfsdAG5wfq4t47nlDXdLLag==
+  dependencies:
+    "@lerna/child-process" "4.0.0"
+    "@lerna/command" "4.0.0"
+    "@lerna/npm-conf" "4.0.0"
+    "@lerna/validation-error" "4.0.0"
+    dedent "^0.7.0"
+    fs-extra "^9.1.0"
+    globby "^11.0.2"
+    init-package-json "^2.0.2"
+    npm-package-arg "^8.1.0"
+    p-reduce "^2.1.0"
+    pacote "^11.2.6"
+    pify "^5.0.0"
+    semver "^7.3.4"
+    slash "^3.0.0"
+    validate-npm-package-license "^3.0.4"
+    validate-npm-package-name "^3.0.0"
+    whatwg-url "^8.4.0"
+    yargs-parser "20.2.4"
+
+"@lerna/describe-ref@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/describe-ref/-/describe-ref-4.0.0.tgz#53c53b4ea65fdceffa072a62bfebe6772c45d9ec"
+  integrity sha512-eTU5+xC4C5Gcgz+Ey4Qiw9nV2B4JJbMulsYJMW8QjGcGh8zudib7Sduj6urgZXUYNyhYpRs+teci9M2J8u+UvQ==
+  dependencies:
+    "@lerna/child-process" "4.0.0"
+    npmlog "^4.1.2"
+
+"@lerna/diff@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/diff/-/diff-4.0.0.tgz#6d3071817aaa4205a07bf77cfc6e932796d48b92"
+  integrity sha512-jYPKprQVg41+MUMxx6cwtqsNm0Yxx9GDEwdiPLwcUTFx+/qKCEwifKNJ1oGIPBxyEHX2PFCOjkK39lHoj2qiag==
+  dependencies:
+    "@lerna/child-process" "4.0.0"
+    "@lerna/command" "4.0.0"
+    "@lerna/validation-error" "4.0.0"
+    npmlog "^4.1.2"
+
+"@lerna/exec@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/exec/-/exec-4.0.0.tgz#eb6cb95cb92d42590e9e2d628fcaf4719d4a8be6"
+  integrity sha512-VGXtL/b/JfY84NB98VWZpIExfhLOzy0ozm/0XaS4a2SmkAJc5CeUfrhvHxxkxiTBLkU+iVQUyYEoAT0ulQ8PCw==
+  dependencies:
+    "@lerna/child-process" "4.0.0"
+    "@lerna/command" "4.0.0"
+    "@lerna/filter-options" "4.0.0"
+    "@lerna/profiler" "4.0.0"
+    "@lerna/run-topologically" "4.0.0"
+    "@lerna/validation-error" "4.0.0"
+    p-map "^4.0.0"
+
+"@lerna/filter-options@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/filter-options/-/filter-options-4.0.0.tgz#ac94cc515d7fa3b47e2f7d74deddeabb1de5e9e6"
+  integrity sha512-vV2ANOeZhOqM0rzXnYcFFCJ/kBWy/3OA58irXih9AMTAlQLymWAK0akWybl++sUJ4HB9Hx12TOqaXbYS2NM5uw==
+  dependencies:
+    "@lerna/collect-updates" "4.0.0"
+    "@lerna/filter-packages" "4.0.0"
+    dedent "^0.7.0"
+    npmlog "^4.1.2"
+
+"@lerna/filter-packages@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/filter-packages/-/filter-packages-4.0.0.tgz#b1f70d70e1de9cdd36a4e50caa0ac501f8d012f2"
+  integrity sha512-+4AJIkK7iIiOaqCiVTYJxh/I9qikk4XjNQLhE3kixaqgMuHl1NQ99qXRR0OZqAWB9mh8Z1HA9bM5K1HZLBTOqA==
+  dependencies:
+    "@lerna/validation-error" "4.0.0"
+    multimatch "^5.0.0"
+    npmlog "^4.1.2"
+
+"@lerna/get-npm-exec-opts@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/get-npm-exec-opts/-/get-npm-exec-opts-4.0.0.tgz#dc955be94a4ae75c374ef9bce91320887d34608f"
+  integrity sha512-yvmkerU31CTWS2c7DvmAWmZVeclPBqI7gPVr5VATUKNWJ/zmVcU4PqbYoLu92I9Qc4gY1TuUplMNdNuZTSL7IQ==
+  dependencies:
+    npmlog "^4.1.2"
+
+"@lerna/get-packed@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/get-packed/-/get-packed-4.0.0.tgz#0989d61624ac1f97e393bdad2137c49cd7a37823"
+  integrity sha512-rfWONRsEIGyPJTxFzC8ECb3ZbsDXJbfqWYyeeQQDrJRPnEJErlltRLPLgC2QWbxFgFPsoDLeQmFHJnf0iDfd8w==
+  dependencies:
+    fs-extra "^9.1.0"
+    ssri "^8.0.1"
+    tar "^6.1.0"
+
+"@lerna/github-client@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/github-client/-/github-client-4.0.0.tgz#2ced67721363ef70f8e12ffafce4410918f4a8a4"
+  integrity sha512-2jhsldZtTKXYUBnOm23Lb0Fx8G4qfSXF9y7UpyUgWUj+YZYd+cFxSuorwQIgk5P4XXrtVhsUesIsli+BYSThiw==
+  dependencies:
+    "@lerna/child-process" "4.0.0"
+    "@octokit/plugin-enterprise-rest" "^6.0.1"
+    "@octokit/rest" "^18.1.0"
+    git-url-parse "^11.4.4"
+    npmlog "^4.1.2"
+
+"@lerna/gitlab-client@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/gitlab-client/-/gitlab-client-4.0.0.tgz#00dad73379c7b38951d4b4ded043504c14e2b67d"
+  integrity sha512-OMUpGSkeDWFf7BxGHlkbb35T7YHqVFCwBPSIR6wRsszY8PAzCYahtH3IaJzEJyUg6vmZsNl0FSr3pdA2skhxqA==
+  dependencies:
+    node-fetch "^2.6.1"
+    npmlog "^4.1.2"
+    whatwg-url "^8.4.0"
+
+"@lerna/global-options@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/global-options/-/global-options-4.0.0.tgz#c7d8b0de6a01d8a845e2621ea89e7f60f18c6a5f"
+  integrity sha512-TRMR8afAHxuYBHK7F++Ogop2a82xQjoGna1dvPOY6ltj/pEx59pdgcJfYcynYqMkFIk8bhLJJN9/ndIfX29FTQ==
+
+"@lerna/has-npm-version@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/has-npm-version/-/has-npm-version-4.0.0.tgz#d3fc3292c545eb28bd493b36e6237cf0279f631c"
+  integrity sha512-LQ3U6XFH8ZmLCsvsgq1zNDqka0Xzjq5ibVN+igAI5ccRWNaUsE/OcmsyMr50xAtNQMYMzmpw5GVLAivT2/YzCg==
+  dependencies:
+    "@lerna/child-process" "4.0.0"
+    semver "^7.3.4"
+
+"@lerna/import@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/import/-/import-4.0.0.tgz#bde656c4a451fa87ae41733ff8a8da60547c5465"
+  integrity sha512-FaIhd+4aiBousKNqC7TX1Uhe97eNKf5/SC7c5WZANVWtC7aBWdmswwDt3usrzCNpj6/Wwr9EtEbYROzxKH8ffg==
+  dependencies:
+    "@lerna/child-process" "4.0.0"
+    "@lerna/command" "4.0.0"
+    "@lerna/prompt" "4.0.0"
+    "@lerna/pulse-till-done" "4.0.0"
+    "@lerna/validation-error" "4.0.0"
+    dedent "^0.7.0"
+    fs-extra "^9.1.0"
+    p-map-series "^2.1.0"
+
+"@lerna/info@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/info/-/info-4.0.0.tgz#b9fb0e479d60efe1623603958a831a88b1d7f1fc"
+  integrity sha512-8Uboa12kaCSZEn4XRfPz5KU9XXoexSPS4oeYGj76s2UQb1O1GdnEyfjyNWoUl1KlJ2i/8nxUskpXIftoFYH0/Q==
+  dependencies:
+    "@lerna/command" "4.0.0"
+    "@lerna/output" "4.0.0"
+    envinfo "^7.7.4"
+
+"@lerna/init@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/init/-/init-4.0.0.tgz#dadff67e6dfb981e8ccbe0e6a310e837962f6c7a"
+  integrity sha512-wY6kygop0BCXupzWj5eLvTUqdR7vIAm0OgyV9WHpMYQGfs1V22jhztt8mtjCloD/O0nEe4tJhdG62XU5aYmPNQ==
+  dependencies:
+    "@lerna/child-process" "4.0.0"
+    "@lerna/command" "4.0.0"
+    fs-extra "^9.1.0"
+    p-map "^4.0.0"
+    write-json-file "^4.3.0"
+
+"@lerna/link@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/link/-/link-4.0.0.tgz#c3a38aabd44279d714e90f2451e31b63f0fb65ba"
+  integrity sha512-KlvPi7XTAcVOByfaLlOeYOfkkDcd+bejpHMCd1KcArcFTwijOwXOVi24DYomIeHvy6HsX/IUquJ4PPUJIeB4+w==
+  dependencies:
+    "@lerna/command" "4.0.0"
+    "@lerna/package-graph" "4.0.0"
+    "@lerna/symlink-dependencies" "4.0.0"
+    p-map "^4.0.0"
+    slash "^3.0.0"
+
+"@lerna/list@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/list/-/list-4.0.0.tgz#24b4e6995bd73f81c556793fe502b847efd9d1d7"
+  integrity sha512-L2B5m3P+U4Bif5PultR4TI+KtW+SArwq1i75QZ78mRYxPc0U/piau1DbLOmwrdqr99wzM49t0Dlvl6twd7GHFg==
+  dependencies:
+    "@lerna/command" "4.0.0"
+    "@lerna/filter-options" "4.0.0"
+    "@lerna/listable" "4.0.0"
+    "@lerna/output" "4.0.0"
+
+"@lerna/listable@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/listable/-/listable-4.0.0.tgz#d00d6cb4809b403f2b0374fc521a78e318b01214"
+  integrity sha512-/rPOSDKsOHs5/PBLINZOkRIX1joOXUXEtyUs5DHLM8q6/RP668x/1lFhw6Dx7/U+L0+tbkpGtZ1Yt0LewCLgeQ==
+  dependencies:
+    "@lerna/query-graph" "4.0.0"
+    chalk "^4.1.0"
+    columnify "^1.5.4"
+
+"@lerna/log-packed@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/log-packed/-/log-packed-4.0.0.tgz#95168fe2e26ac6a71e42f4be857519b77e57a09f"
+  integrity sha512-+dpCiWbdzgMAtpajLToy9PO713IHoE6GV/aizXycAyA07QlqnkpaBNZ8DW84gHdM1j79TWockGJo9PybVhrrZQ==
+  dependencies:
+    byte-size "^7.0.0"
+    columnify "^1.5.4"
+    has-unicode "^2.0.1"
+    npmlog "^4.1.2"
+
+"@lerna/npm-conf@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/npm-conf/-/npm-conf-4.0.0.tgz#b259fd1e1cee2bf5402b236e770140ff9ade7fd2"
+  integrity sha512-uS7H02yQNq3oejgjxAxqq/jhwGEE0W0ntr8vM3EfpCW1F/wZruwQw+7bleJQ9vUBjmdXST//tk8mXzr5+JXCfw==
+  dependencies:
+    config-chain "^1.1.12"
+    pify "^5.0.0"
+
+"@lerna/npm-dist-tag@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/npm-dist-tag/-/npm-dist-tag-4.0.0.tgz#d1e99b4eccd3414142f0548ad331bf2d53f3257a"
+  integrity sha512-F20sg28FMYTgXqEQihgoqSfwmq+Id3zT23CnOwD+XQMPSy9IzyLf1fFVH319vXIw6NF6Pgs4JZN2Qty6/CQXGw==
+  dependencies:
+    "@lerna/otplease" "4.0.0"
+    npm-package-arg "^8.1.0"
+    npm-registry-fetch "^9.0.0"
+    npmlog "^4.1.2"
+
+"@lerna/npm-install@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/npm-install/-/npm-install-4.0.0.tgz#31180be3ab3b7d1818a1a0c206aec156b7094c78"
+  integrity sha512-aKNxq2j3bCH3eXl3Fmu4D54s/YLL9WSwV8W7X2O25r98wzrO38AUN6AB9EtmAx+LV/SP15et7Yueg9vSaanRWg==
+  dependencies:
+    "@lerna/child-process" "4.0.0"
+    "@lerna/get-npm-exec-opts" "4.0.0"
+    fs-extra "^9.1.0"
+    npm-package-arg "^8.1.0"
+    npmlog "^4.1.2"
+    signal-exit "^3.0.3"
+    write-pkg "^4.0.0"
+
+"@lerna/npm-publish@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/npm-publish/-/npm-publish-4.0.0.tgz#84eb62e876fe949ae1fd62c60804423dbc2c4472"
+  integrity sha512-vQb7yAPRo5G5r77DRjHITc9piR9gvEKWrmfCH7wkfBnGWEqu7n8/4bFQ7lhnkujvc8RXOsYpvbMQkNfkYibD/w==
+  dependencies:
+    "@lerna/otplease" "4.0.0"
+    "@lerna/run-lifecycle" "4.0.0"
+    fs-extra "^9.1.0"
+    libnpmpublish "^4.0.0"
+    npm-package-arg "^8.1.0"
+    npmlog "^4.1.2"
+    pify "^5.0.0"
+    read-package-json "^3.0.0"
+
+"@lerna/npm-run-script@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/npm-run-script/-/npm-run-script-4.0.0.tgz#dfebf4f4601442e7c0b5214f9fb0d96c9350743b"
+  integrity sha512-Jmyh9/IwXJjOXqKfIgtxi0bxi1pUeKe5bD3S81tkcy+kyng/GNj9WSqD5ZggoNP2NP//s4CLDAtUYLdP7CU9rA==
+  dependencies:
+    "@lerna/child-process" "4.0.0"
+    "@lerna/get-npm-exec-opts" "4.0.0"
+    npmlog "^4.1.2"
+
+"@lerna/otplease@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/otplease/-/otplease-4.0.0.tgz#84972eb43448f8a1077435ba1c5e59233b725850"
+  integrity sha512-Sgzbqdk1GH4psNiT6hk+BhjOfIr/5KhGBk86CEfHNJTk9BK4aZYyJD4lpDbDdMjIV4g03G7pYoqHzH765T4fxw==
+  dependencies:
+    "@lerna/prompt" "4.0.0"
+
+"@lerna/output@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/output/-/output-4.0.0.tgz#b1d72215c0e35483e4f3e9994debc82c621851f2"
+  integrity sha512-Un1sHtO1AD7buDQrpnaYTi2EG6sLF+KOPEAMxeUYG5qG3khTs2Zgzq5WE3dt2N/bKh7naESt20JjIW6tBELP0w==
+  dependencies:
+    npmlog "^4.1.2"
+
+"@lerna/pack-directory@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/pack-directory/-/pack-directory-4.0.0.tgz#8b617db95d20792f043aaaa13a9ccc0e04cb4c74"
+  integrity sha512-NJrmZNmBHS+5aM+T8N6FVbaKFScVqKlQFJNY2k7nsJ/uklNKsLLl6VhTQBPwMTbf6Tf7l6bcKzpy7aePuq9UiQ==
+  dependencies:
+    "@lerna/get-packed" "4.0.0"
+    "@lerna/package" "4.0.0"
+    "@lerna/run-lifecycle" "4.0.0"
+    npm-packlist "^2.1.4"
+    npmlog "^4.1.2"
+    tar "^6.1.0"
+    temp-write "^4.0.0"
+
+"@lerna/package-graph@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/package-graph/-/package-graph-4.0.0.tgz#16a00253a8ac810f72041481cb46bcee8d8123dd"
+  integrity sha512-QED2ZCTkfXMKFoTGoccwUzjHtZMSf3UKX14A4/kYyBms9xfFsesCZ6SLI5YeySEgcul8iuIWfQFZqRw+Qrjraw==
+  dependencies:
+    "@lerna/prerelease-id-from-version" "4.0.0"
+    "@lerna/validation-error" "4.0.0"
+    npm-package-arg "^8.1.0"
+    npmlog "^4.1.2"
+    semver "^7.3.4"
+
+"@lerna/package@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/package/-/package-4.0.0.tgz#1b4c259c4bcff45c876ee1d591a043aacbc0d6b7"
+  integrity sha512-l0M/izok6FlyyitxiQKr+gZLVFnvxRQdNhzmQ6nRnN9dvBJWn+IxxpM+cLqGACatTnyo9LDzNTOj2Db3+s0s8Q==
+  dependencies:
+    load-json-file "^6.2.0"
+    npm-package-arg "^8.1.0"
+    write-pkg "^4.0.0"
+
+"@lerna/prerelease-id-from-version@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/prerelease-id-from-version/-/prerelease-id-from-version-4.0.0.tgz#c7e0676fcee1950d85630e108eddecdd5b48c916"
+  integrity sha512-GQqguzETdsYRxOSmdFZ6zDBXDErIETWOqomLERRY54f4p+tk4aJjoVdd9xKwehC9TBfIFvlRbL1V9uQGHh1opg==
+  dependencies:
+    semver "^7.3.4"
+
+"@lerna/profiler@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/profiler/-/profiler-4.0.0.tgz#8a53ab874522eae15d178402bff90a14071908e9"
+  integrity sha512-/BaEbqnVh1LgW/+qz8wCuI+obzi5/vRE8nlhjPzdEzdmWmZXuCKyWSEzAyHOJWw1ntwMiww5dZHhFQABuoFz9Q==
+  dependencies:
+    fs-extra "^9.1.0"
+    npmlog "^4.1.2"
+    upath "^2.0.1"
+
+"@lerna/project@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/project/-/project-4.0.0.tgz#ff84893935833533a74deff30c0e64ddb7f0ba6b"
+  integrity sha512-o0MlVbDkD5qRPkFKlBZsXZjoNTWPyuL58564nSfZJ6JYNmgAptnWPB2dQlAc7HWRZkmnC2fCkEdoU+jioPavbg==
+  dependencies:
+    "@lerna/package" "4.0.0"
+    "@lerna/validation-error" "4.0.0"
+    cosmiconfig "^7.0.0"
+    dedent "^0.7.0"
+    dot-prop "^6.0.1"
+    glob-parent "^5.1.1"
+    globby "^11.0.2"
+    load-json-file "^6.2.0"
+    npmlog "^4.1.2"
+    p-map "^4.0.0"
+    resolve-from "^5.0.0"
+    write-json-file "^4.3.0"
+
+"@lerna/prompt@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/prompt/-/prompt-4.0.0.tgz#5ec69a803f3f0db0ad9f221dad64664d3daca41b"
+  integrity sha512-4Ig46oCH1TH5M7YyTt53fT6TuaKMgqUUaqdgxvp6HP6jtdak6+amcsqB8YGz2eQnw/sdxunx84DfI9XpoLj4bQ==
+  dependencies:
+    inquirer "^7.3.3"
+    npmlog "^4.1.2"
+
+"@lerna/publish@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/publish/-/publish-4.0.0.tgz#f67011305adeba120066a3b6d984a5bb5fceef65"
+  integrity sha512-K8jpqjHrChH22qtkytA5GRKIVFEtqBF6JWj1I8dWZtHs4Jywn8yB1jQ3BAMLhqmDJjWJtRck0KXhQQKzDK2UPg==
+  dependencies:
+    "@lerna/check-working-tree" "4.0.0"
+    "@lerna/child-process" "4.0.0"
+    "@lerna/collect-updates" "4.0.0"
+    "@lerna/command" "4.0.0"
+    "@lerna/describe-ref" "4.0.0"
+    "@lerna/log-packed" "4.0.0"
+    "@lerna/npm-conf" "4.0.0"
+    "@lerna/npm-dist-tag" "4.0.0"
+    "@lerna/npm-publish" "4.0.0"
+    "@lerna/otplease" "4.0.0"
+    "@lerna/output" "4.0.0"
+    "@lerna/pack-directory" "4.0.0"
+    "@lerna/prerelease-id-from-version" "4.0.0"
+    "@lerna/prompt" "4.0.0"
+    "@lerna/pulse-till-done" "4.0.0"
+    "@lerna/run-lifecycle" "4.0.0"
+    "@lerna/run-topologically" "4.0.0"
+    "@lerna/validation-error" "4.0.0"
+    "@lerna/version" "4.0.0"
+    fs-extra "^9.1.0"
+    libnpmaccess "^4.0.1"
+    npm-package-arg "^8.1.0"
+    npm-registry-fetch "^9.0.0"
+    npmlog "^4.1.2"
+    p-map "^4.0.0"
+    p-pipe "^3.1.0"
+    pacote "^11.2.6"
+    semver "^7.3.4"
+
+"@lerna/pulse-till-done@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/pulse-till-done/-/pulse-till-done-4.0.0.tgz#04bace7d483a8205c187b806bcd8be23d7bb80a3"
+  integrity sha512-Frb4F7QGckaybRhbF7aosLsJ5e9WuH7h0KUkjlzSByVycxY91UZgaEIVjS2oN9wQLrheLMHl6SiFY0/Pvo0Cxg==
+  dependencies:
+    npmlog "^4.1.2"
+
+"@lerna/query-graph@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/query-graph/-/query-graph-4.0.0.tgz#09dd1c819ac5ee3f38db23931143701f8a6eef63"
+  integrity sha512-YlP6yI3tM4WbBmL9GCmNDoeQyzcyg1e4W96y/PKMZa5GbyUvkS2+Jc2kwPD+5KcXou3wQZxSPzR3Te5OenaDdg==
+  dependencies:
+    "@lerna/package-graph" "4.0.0"
+
+"@lerna/resolve-symlink@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/resolve-symlink/-/resolve-symlink-4.0.0.tgz#6d006628a210c9b821964657a9e20a8c9a115e14"
+  integrity sha512-RtX8VEUzqT+uLSCohx8zgmjc6zjyRlh6i/helxtZTMmc4+6O4FS9q5LJas2uGO2wKvBlhcD6siibGt7dIC3xZA==
+  dependencies:
+    fs-extra "^9.1.0"
+    npmlog "^4.1.2"
+    read-cmd-shim "^2.0.0"
+
+"@lerna/rimraf-dir@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/rimraf-dir/-/rimraf-dir-4.0.0.tgz#2edf3b62d4eb0ef4e44e430f5844667d551ec25a"
+  integrity sha512-QNH9ABWk9mcMJh2/muD9iYWBk1oQd40y6oH+f3wwmVGKYU5YJD//+zMiBI13jxZRtwBx0vmBZzkBkK1dR11cBg==
+  dependencies:
+    "@lerna/child-process" "4.0.0"
+    npmlog "^4.1.2"
+    path-exists "^4.0.0"
+    rimraf "^3.0.2"
+
+"@lerna/run-lifecycle@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/run-lifecycle/-/run-lifecycle-4.0.0.tgz#e648a46f9210a9bcd7c391df6844498cb5079334"
+  integrity sha512-IwxxsajjCQQEJAeAaxF8QdEixfI7eLKNm4GHhXHrgBu185JcwScFZrj9Bs+PFKxwb+gNLR4iI5rpUdY8Y0UdGQ==
+  dependencies:
+    "@lerna/npm-conf" "4.0.0"
+    npm-lifecycle "^3.1.5"
+    npmlog "^4.1.2"
+
+"@lerna/run-topologically@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/run-topologically/-/run-topologically-4.0.0.tgz#af846eeee1a09b0c2be0d1bfb5ef0f7b04bb1827"
+  integrity sha512-EVZw9hGwo+5yp+VL94+NXRYisqgAlj0jWKWtAIynDCpghRxCE5GMO3xrQLmQgqkpUl9ZxQFpICgYv5DW4DksQA==
+  dependencies:
+    "@lerna/query-graph" "4.0.0"
+    p-queue "^6.6.2"
+
+"@lerna/run@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/run/-/run-4.0.0.tgz#4bc7fda055a729487897c23579694f6183c91262"
+  integrity sha512-9giulCOzlMPzcZS/6Eov6pxE9gNTyaXk0Man+iCIdGJNMrCnW7Dme0Z229WWP/UoxDKg71F2tMsVVGDiRd8fFQ==
+  dependencies:
+    "@lerna/command" "4.0.0"
+    "@lerna/filter-options" "4.0.0"
+    "@lerna/npm-run-script" "4.0.0"
+    "@lerna/output" "4.0.0"
+    "@lerna/profiler" "4.0.0"
+    "@lerna/run-topologically" "4.0.0"
+    "@lerna/timer" "4.0.0"
+    "@lerna/validation-error" "4.0.0"
+    p-map "^4.0.0"
+
+"@lerna/symlink-binary@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/symlink-binary/-/symlink-binary-4.0.0.tgz#21009f62d53a425f136cb4c1a32c6b2a0cc02d47"
+  integrity sha512-zualodWC4q1QQc1pkz969hcFeWXOsVYZC5AWVtAPTDfLl+TwM7eG/O6oP+Rr3fFowspxo6b1TQ6sYfDV6HXNWA==
+  dependencies:
+    "@lerna/create-symlink" "4.0.0"
+    "@lerna/package" "4.0.0"
+    fs-extra "^9.1.0"
+    p-map "^4.0.0"
+
+"@lerna/symlink-dependencies@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/symlink-dependencies/-/symlink-dependencies-4.0.0.tgz#8910eca084ae062642d0490d8972cf2d98e9ebbd"
+  integrity sha512-BABo0MjeUHNAe2FNGty1eantWp8u83BHSeIMPDxNq0MuW2K3CiQRaeWT3EGPAzXpGt0+hVzBrA6+OT0GPn7Yuw==
+  dependencies:
+    "@lerna/create-symlink" "4.0.0"
+    "@lerna/resolve-symlink" "4.0.0"
+    "@lerna/symlink-binary" "4.0.0"
+    fs-extra "^9.1.0"
+    p-map "^4.0.0"
+    p-map-series "^2.1.0"
+
+"@lerna/timer@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/timer/-/timer-4.0.0.tgz#a52e51bfcd39bfd768988049ace7b15c1fd7a6da"
+  integrity sha512-WFsnlaE7SdOvjuyd05oKt8Leg3ENHICnvX3uYKKdByA+S3g+TCz38JsNs7OUZVt+ba63nC2nbXDlUnuT2Xbsfg==
+
+"@lerna/validation-error@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/validation-error/-/validation-error-4.0.0.tgz#af9d62fe8304eaa2eb9a6ba1394f9aa807026d35"
+  integrity sha512-1rBOM5/koiVWlRi3V6dB863E1YzJS8v41UtsHgMr6gB2ncJ2LsQtMKlJpi3voqcgh41H8UsPXR58RrrpPpufyw==
+  dependencies:
+    npmlog "^4.1.2"
+
+"@lerna/version@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/version/-/version-4.0.0.tgz#532659ec6154d8a8789c5ab53878663e244e3228"
+  integrity sha512-otUgiqs5W9zGWJZSCCMRV/2Zm2A9q9JwSDS7s/tlKq4mWCYriWo7+wsHEA/nPTMDyYyBO5oyZDj+3X50KDUzeA==
+  dependencies:
+    "@lerna/check-working-tree" "4.0.0"
+    "@lerna/child-process" "4.0.0"
+    "@lerna/collect-updates" "4.0.0"
+    "@lerna/command" "4.0.0"
+    "@lerna/conventional-commits" "4.0.0"
+    "@lerna/github-client" "4.0.0"
+    "@lerna/gitlab-client" "4.0.0"
+    "@lerna/output" "4.0.0"
+    "@lerna/prerelease-id-from-version" "4.0.0"
+    "@lerna/prompt" "4.0.0"
+    "@lerna/run-lifecycle" "4.0.0"
+    "@lerna/run-topologically" "4.0.0"
+    "@lerna/validation-error" "4.0.0"
+    chalk "^4.1.0"
+    dedent "^0.7.0"
+    load-json-file "^6.2.0"
+    minimatch "^3.0.4"
+    npmlog "^4.1.2"
+    p-map "^4.0.0"
+    p-pipe "^3.1.0"
+    p-reduce "^2.1.0"
+    p-waterfall "^2.1.1"
+    semver "^7.3.4"
+    slash "^3.0.0"
+    temp-write "^4.0.0"
+    write-json-file "^4.3.0"
+
+"@lerna/write-log-file@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@lerna/write-log-file/-/write-log-file-4.0.0.tgz#18221a38a6a307d6b0a5844dd592ad53fa27091e"
+  integrity sha512-XRG5BloiArpXRakcnPHmEHJp+4AtnhRtpDIHSghmXD5EichI1uD73J7FgPp30mm2pDRq3FdqB0NbwSEsJ9xFQg==
+  dependencies:
+    npmlog "^4.1.2"
+    write-file-atomic "^3.0.3"
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@npmcli/ci-detect@^1.0.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@npmcli/ci-detect/-/ci-detect-1.3.0.tgz#6c1d2c625fb6ef1b9dea85ad0a5afcbef85ef22a"
+  integrity sha512-oN3y7FAROHhrAt7Rr7PnTSwrHrZVRTS2ZbyxeQwSSYD0ifwM3YNgQqbaRmjcWoPyq77MjchusjJDspbzMmip1Q==
+
+"@npmcli/git@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@npmcli/git/-/git-2.1.0.tgz#2fbd77e147530247d37f325930d457b3ebe894f6"
+  integrity sha512-/hBFX/QG1b+N7PZBFs0bi+evgRZcK9nWBxQKZkGoXUT5hJSwl5c4d7y8/hm+NQZRPhQ67RzFaj5UM9YeyKoryw==
+  dependencies:
+    "@npmcli/promise-spawn" "^1.3.2"
+    lru-cache "^6.0.0"
+    mkdirp "^1.0.4"
+    npm-pick-manifest "^6.1.1"
+    promise-inflight "^1.0.1"
+    promise-retry "^2.0.1"
+    semver "^7.3.5"
+    which "^2.0.2"
+
+"@npmcli/installed-package-contents@^1.0.6":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@npmcli/installed-package-contents/-/installed-package-contents-1.0.7.tgz#ab7408c6147911b970a8abe261ce512232a3f4fa"
+  integrity sha512-9rufe0wnJusCQoLpV9ZPKIVP55itrM5BxOXs10DmdbRfgWtHy1LDyskbwRnBghuB0PrF7pNPOqREVtpz4HqzKw==
+  dependencies:
+    npm-bundled "^1.1.1"
+    npm-normalize-package-bin "^1.0.1"
+
+"@npmcli/move-file@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@npmcli/move-file/-/move-file-1.1.2.tgz#1a82c3e372f7cae9253eb66d72543d6b8685c674"
+  integrity sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==
+  dependencies:
+    mkdirp "^1.0.4"
+    rimraf "^3.0.2"
+
+"@npmcli/node-gyp@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@npmcli/node-gyp/-/node-gyp-1.0.2.tgz#3cdc1f30e9736dbc417373ed803b42b1a0a29ede"
+  integrity sha512-yrJUe6reVMpktcvagumoqD9r08fH1iRo01gn1u0zoCApa9lnZGEigVKUd2hzsCId4gdtkZZIVscLhNxMECKgRg==
+
+"@npmcli/promise-spawn@^1.2.0", "@npmcli/promise-spawn@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@npmcli/promise-spawn/-/promise-spawn-1.3.2.tgz#42d4e56a8e9274fba180dabc0aea6e38f29274f5"
+  integrity sha512-QyAGYo/Fbj4MXeGdJcFzZ+FkDkomfRBrPM+9QYJSg+PxgAUL+LU3FneQk37rKR2/zjqkCV1BLHccX98wRXG3Sg==
+  dependencies:
+    infer-owner "^1.0.4"
+
+"@npmcli/run-script@^1.8.2":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@npmcli/run-script/-/run-script-1.8.5.tgz#f250a0c5e1a08a792d775a315d0ff42fc3a51e1d"
+  integrity sha512-NQspusBCpTjNwNRFMtz2C5MxoxyzlbuJ4YEhxAKrIonTiirKDtatsZictx9RgamQIx6+QuHMNmPl0wQdoESs9A==
+  dependencies:
+    "@npmcli/node-gyp" "^1.0.2"
+    "@npmcli/promise-spawn" "^1.3.2"
+    infer-owner "^1.0.4"
+    node-gyp "^7.1.0"
+    read-package-json-fast "^2.0.1"
+
+"@octokit/auth-token@^2.4.4":
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/@octokit/auth-token/-/auth-token-2.4.5.tgz#568ccfb8cb46f36441fac094ce34f7a875b197f3"
+  integrity sha512-BpGYsPgJt05M7/L/5FoE1PiAbdxXFZkX/3kDYcsvd1v6UhlnE5e96dTDr0ezX/EFwciQxf3cNV0loipsURU+WA==
+  dependencies:
+    "@octokit/types" "^6.0.3"
+
+"@octokit/core@^3.5.0":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@octokit/core/-/core-3.5.1.tgz#8601ceeb1ec0e1b1b8217b960a413ed8e947809b"
+  integrity sha512-omncwpLVxMP+GLpLPgeGJBF6IWJFjXDS5flY5VbppePYX9XehevbDykRH9PdCdvqt9TS5AOTiDide7h0qrkHjw==
+  dependencies:
+    "@octokit/auth-token" "^2.4.4"
+    "@octokit/graphql" "^4.5.8"
+    "@octokit/request" "^5.6.0"
+    "@octokit/request-error" "^2.0.5"
+    "@octokit/types" "^6.0.3"
+    before-after-hook "^2.2.0"
+    universal-user-agent "^6.0.0"
+
+"@octokit/endpoint@^6.0.1":
+  version "6.0.12"
+  resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-6.0.12.tgz#3b4d47a4b0e79b1027fb8d75d4221928b2d05658"
+  integrity sha512-lF3puPwkQWGfkMClXb4k/eUT/nZKQfxinRWJrdZaJO85Dqwo/G0yOC434Jr2ojwafWJMYqFGFa5ms4jJUgujdA==
+  dependencies:
+    "@octokit/types" "^6.0.3"
+    is-plain-object "^5.0.0"
+    universal-user-agent "^6.0.0"
+
+"@octokit/graphql@^4.5.8":
+  version "4.6.4"
+  resolved "https://registry.yarnpkg.com/@octokit/graphql/-/graphql-4.6.4.tgz#0c3f5bed440822182e972317122acb65d311a5ed"
+  integrity sha512-SWTdXsVheRmlotWNjKzPOb6Js6tjSqA2a8z9+glDJng0Aqjzti8MEWOtuT8ZSu6wHnci7LZNuarE87+WJBG4vg==
+  dependencies:
+    "@octokit/request" "^5.6.0"
+    "@octokit/types" "^6.0.3"
+    universal-user-agent "^6.0.0"
+
+"@octokit/openapi-types@^9.5.0":
+  version "9.7.0"
+  resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-9.7.0.tgz#9897cdefd629cd88af67b8dbe2e5fb19c63426b2"
+  integrity sha512-TUJ16DJU8mekne6+KVcMV5g6g/rJlrnIKn7aALG9QrNpnEipFc1xjoarh0PKaAWf2Hf+HwthRKYt+9mCm5RsRg==
+
+"@octokit/plugin-enterprise-rest@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-enterprise-rest/-/plugin-enterprise-rest-6.0.1.tgz#e07896739618dab8da7d4077c658003775f95437"
+  integrity sha512-93uGjlhUD+iNg1iWhUENAtJata6w5nE+V4urXOAlIXdco6xNZtUSfYY8dzp3Udy74aqO/B5UZL80x/YMa5PKRw==
+
+"@octokit/plugin-paginate-rest@^2.6.2":
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.15.1.tgz#264189dd3ce881c6c33758824aac05a4002e056a"
+  integrity sha512-47r52KkhQDkmvUKZqXzA1lKvcyJEfYh3TKAIe5+EzMeyDM3d+/s5v11i2gTk8/n6No6DPi3k5Ind6wtDbo/AEg==
+  dependencies:
+    "@octokit/types" "^6.24.0"
+
+"@octokit/plugin-request-log@^1.0.2":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz#5e50ed7083a613816b1e4a28aeec5fb7f1462e85"
+  integrity sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==
+
+"@octokit/plugin-rest-endpoint-methods@5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.7.0.tgz#80b69452c17597738d4692c79829b72d9e72ccec"
+  integrity sha512-G7sgccWRYQMwcHJXkDY/sDxbXeKiZkFQqUtzBCwmrzCNj2GQf3VygQ4T/BFL2crLVpIbenkE/c0ErhYOte2MPw==
+  dependencies:
+    "@octokit/types" "^6.24.0"
+    deprecation "^2.3.1"
+
+"@octokit/request-error@^2.0.5", "@octokit/request-error@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@octokit/request-error/-/request-error-2.1.0.tgz#9e150357831bfc788d13a4fd4b1913d60c74d677"
+  integrity sha512-1VIvgXxs9WHSjicsRwq8PlR2LR2x6DwsJAaFgzdi0JfJoGSO8mYI/cHJQ+9FbN21aa+DrgNLnwObmyeSC8Rmpg==
+  dependencies:
+    "@octokit/types" "^6.0.3"
+    deprecation "^2.0.0"
+    once "^1.4.0"
+
+"@octokit/request@^5.6.0":
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.6.1.tgz#f97aff075c37ab1d427c49082fefeef0dba2d8ce"
+  integrity sha512-Ls2cfs1OfXaOKzkcxnqw5MR6drMA/zWX/LIS/p8Yjdz7QKTPQLMsB3R+OvoxE6XnXeXEE2X7xe4G4l4X0gRiKQ==
+  dependencies:
+    "@octokit/endpoint" "^6.0.1"
+    "@octokit/request-error" "^2.1.0"
+    "@octokit/types" "^6.16.1"
+    is-plain-object "^5.0.0"
+    node-fetch "^2.6.1"
+    universal-user-agent "^6.0.0"
+
+"@octokit/rest@^18.1.0":
+  version "18.9.0"
+  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-18.9.0.tgz#e5cc23fa199a2bdeea9efbe6096f81d7d6156fe9"
+  integrity sha512-VrmrE8gjpuOoDAGjrQq2j9ZhOE6LxaqxaQg0yMrrEnnQZy2ZcAnr5qbVfKsMF0up/48PRV/VFS/2GSMhA7nTdA==
+  dependencies:
+    "@octokit/core" "^3.5.0"
+    "@octokit/plugin-paginate-rest" "^2.6.2"
+    "@octokit/plugin-request-log" "^1.0.2"
+    "@octokit/plugin-rest-endpoint-methods" "5.7.0"
+
+"@octokit/types@^6.0.3", "@octokit/types@^6.16.1", "@octokit/types@^6.24.0":
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.25.0.tgz#c8e37e69dbe7ce55ed98ee63f75054e7e808bf1a"
+  integrity sha512-bNvyQKfngvAd/08COlYIN54nRgxskmejgywodizQNyiKoXmWRAjKup2/LYwm+T9V0gsKH6tuld1gM0PzmOiB4Q==
+  dependencies:
+    "@octokit/openapi-types" "^9.5.0"
+
 "@polka/url@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-0.5.0.tgz#b21510597fd601e5d7c95008b76bf0d254ebfd31"
@@ -170,6 +1031,16 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.8.tgz#edf1bf1dbf4e04413ca8e5b17b3b7d7d54b59818"
   integrity sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==
 
+"@types/minimatch@^3.0.3":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
+  integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
+
+"@types/minimist@^1.2.0":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
+  integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
+
 "@types/mocha@^5.2.5":
   version "5.2.7"
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-5.2.7.tgz#315d570ccb56c53452ff8638738df60726d5b6ea"
@@ -190,6 +1061,16 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.16.tgz#1acf34f6456208f495dac0434dd540488d17f991"
   integrity sha512-6CLxw83vQf6DKqXxMPwl8qpF8I7THFZuIwLt4TnNsumxkp1VsRZWT8txQxncT/Rl2UojTsFzWgDG4FRMwafrlA==
 
+"@types/normalize-package-data@^2.4.0":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
+  integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
+
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+
 "@types/parse5@*":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.1.tgz#f8ae4fbcd2b9ba4ff934698e28778961f9cb22ca"
@@ -423,11 +1304,24 @@
   resolved "https://registry.yarnpkg.com/@xstate/fsm/-/fsm-1.6.1.tgz#c92972b835540c4e3c5e14277f40dbcbdaee9571"
   integrity sha512-xYKDNuPR36/fUK+jmhM+oauBmbdUAfuJKnDjg3/7NbN+Pj03TX7e94LXnzkwGgAR+U/HWoMqM5UPTuGIYfIx9g==
 
+JSONStream@^1.0.4:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
+  integrity sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==
+  dependencies:
+    jsonparse "^1.2.0"
+    through ">=2.2.7 <3"
+
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
   integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
 
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
+
 accepts@~1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
@@ -464,7 +1358,12 @@ acorn@^8.2.4:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.4.1.tgz#56c36251fc7cabc7096adc18f05afe814321a28c"
   integrity sha512-asabaBSkEKosYKMITunzX177CXxQ4Q8BSSzMTKD+FefUhipQC70gfW5SiUDhYQ3vk8G+81HqQk7Fv9OXwwn9KA==
 
-agent-base@6:
+add-stream@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
+  integrity sha1-anmQQ3ynNtXhKI25K9MmbV9csqo=
+
+agent-base@6, agent-base@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
   integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
@@ -478,7 +1377,24 @@ agent-base@^4.3.0:
   dependencies:
     es6-promisify "^5.0.0"
 
-ajv@^6.10.0, ajv@^6.12.4:
+agentkeepalive@^4.1.3:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-4.1.4.tgz#d928028a4862cb11718e55227872e842a44c945b"
+  integrity sha512-+V/rGa3EuU74H6wR04plBb7Ks10FbtUQgRj/FQOG7uUIEuaINI+AiqJR1k6t3SVNs7o7ZjIdus6706qqzVq8jQ==
+  dependencies:
+    debug "^4.1.0"
+    depd "^1.1.2"
+    humanize-ms "^1.2.1"
+
+aggregate-error@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
+  integrity sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==
+  dependencies:
+    clean-stack "^2.0.0"
+    indent-string "^4.0.0"
+
+ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -520,6 +1436,13 @@ ansi-escapes@^3.2.0:
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
   integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
 
+ansi-escapes@^4.2.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
+  dependencies:
+    type-fest "^0.21.3"
+
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -567,6 +1490,24 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+aproba@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
+
+aproba@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc"
+  integrity sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==
+
+are-we-there-yet@~1.1.2:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
+  integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.6"
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -586,11 +1527,21 @@ arr-flatten@^1.0.1:
   resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
   integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
 
+array-differ@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-3.0.0.tgz#3cbb3d0f316810eafcc47624734237d6aee4ae6b"
+  integrity sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==
+
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
   integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
 
+array-ify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-ify/-/array-ify-1.0.0.tgz#9e528762b4a9066ad163a6962a364418e9626ece"
+  integrity sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=
+
 array-union@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
@@ -598,6 +1549,11 @@ array-union@^1.0.1:
   dependencies:
     array-uniq "^1.0.1"
 
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
 array-uniq@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
@@ -608,11 +1564,33 @@ array-unique@^0.2.1:
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
   integrity sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=
 
-arrify@^1.0.0:
+arrify@^1.0.0, arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
 
+arrify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
+  integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
+
+asap@^2.0.0:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
+
+asn1@~0.2.3:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
+  integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
+  dependencies:
+    safer-buffer "~2.1.0"
+
+assert-plus@1.0.0, assert-plus@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+  integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
+
 assertion-error@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
@@ -633,6 +1611,21 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
 
+at-least-node@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+  integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
+
+aws4@^1.8.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
+  integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
+
 babel-code-frame@^6.20.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -670,6 +1663,18 @@ base64-js@^1.3.1:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
+  integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
+  dependencies:
+    tweetnacl "^0.14.3"
+
+before-after-hook@^2.2.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.2.tgz#a6e8ca41028d90ee2c24222f201c90956091613e"
+  integrity sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -745,7 +1750,7 @@ braces@^1.8.2:
     preserve "^0.2.0"
     repeat-element "^1.1.2"
 
-braces@~3.0.2:
+braces@^3.0.1, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -808,11 +1813,49 @@ builtin-modules@^3.1.0:
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.2.0.tgz#45d5db99e7ee5e6bc4f362e008bf917ab5049887"
   integrity sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==
 
+builtins@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
+  integrity sha1-y5T662HIaWRR2zZTThQi+U8K7og=
+
+byline@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/byline/-/byline-5.0.0.tgz#741c5216468eadc457b03410118ad77de8c1ddb1"
+  integrity sha1-dBxSFkaOrcRXsDQQEYrXfejB3bE=
+
+byte-size@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/byte-size/-/byte-size-7.0.1.tgz#b1daf3386de7ab9d706b941a748dbfc71130dee3"
+  integrity sha512-crQdqyCwhokxwV1UyDzLZanhkugAgft7vt0qbbdt60C6Zf3CAiGmtUCylbtYwrU6loOUw3euGrNtW1J651ot1A==
+
 bytes@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
   integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
 
+cacache@^15.0.5, cacache@^15.2.0:
+  version "15.2.0"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.2.0.tgz#73af75f77c58e72d8c630a7a2858cb18ef523389"
+  integrity sha512-uKoJSHmnrqXgthDFx/IU6ED/5xd+NNGe+Bb+kLZy7Ku4P+BaiWEUflAKPZ7eAzsYGcsAGASJZsybXp+quEcHTw==
+  dependencies:
+    "@npmcli/move-file" "^1.0.1"
+    chownr "^2.0.0"
+    fs-minipass "^2.0.0"
+    glob "^7.1.4"
+    infer-owner "^1.0.4"
+    lru-cache "^6.0.0"
+    minipass "^3.1.1"
+    minipass-collect "^1.0.2"
+    minipass-flush "^1.0.5"
+    minipass-pipeline "^1.2.2"
+    mkdirp "^1.0.3"
+    p-map "^4.0.0"
+    promise-inflight "^1.0.1"
+    rimraf "^3.0.2"
+    ssri "^8.0.1"
+    tar "^6.0.2"
+    unique-filename "^1.1.1"
+
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
@@ -845,11 +1888,25 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camelcase-keys@^6.2.2:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-6.2.2.tgz#5e755d6ba51aa223ec7d3d52f25778210f9dc3c0"
+  integrity sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==
+  dependencies:
+    camelcase "^5.3.1"
+    map-obj "^4.0.0"
+    quick-lru "^4.0.1"
+
 camelcase@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
   integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
 
+camelcase@^5.0.0, camelcase@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
+  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -870,6 +1927,11 @@ capture-stack-trace@^1.0.0:
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
   integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==
 
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
+
 chai@^4.1.2, chai@^4.2.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.4.tgz#b55e655b31e1eac7099be4c08c21964fce2e6c49"
@@ -910,6 +1972,14 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chalk@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -959,16 +2029,31 @@ chokidar@^3.4.1, chokidar@^3.5.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-chownr@^1.1.1:
+chownr@^1.1.1, chownr@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
 
+chownr@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
+  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
+
 ci-info@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
   integrity sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==
 
+ci-info@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
+
+clean-stack@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
+  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
+
 cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
@@ -981,11 +2066,53 @@ cli-cursor@^2.1.0:
   dependencies:
     restore-cursor "^2.0.0"
 
+cli-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
+  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
+  dependencies:
+    restore-cursor "^3.1.0"
+
 cli-width@^2.0.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.1.tgz#b0433d0b4e9c847ef18868a4ef16fd5fc8271c48"
   integrity sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==
 
+cli-width@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
+  integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
+
+cliui@^7.0.2:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^7.0.0"
+
+clone-deep@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
+  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
+  dependencies:
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.2"
+    shallow-clone "^3.0.0"
+
+clone@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+  integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
+
+cmd-shim@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-4.1.0.tgz#b3a904a6743e9fede4148c6f3800bf2a08135bdd"
+  integrity sha512-lb9L7EM4I/ZRVuljLPEtUJOP+xiQVknZ4ZMpMgEp4JzNldPb27HU03hi6K1/6CoIuit/Zm/LQXySErFeXxDprw==
+  dependencies:
+    mkdirp-infer-owner "^2.0.0"
+
 coa@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
@@ -995,6 +2122,11 @@ coa@^2.0.2:
     chalk "^2.4.1"
     q "^1.1.2"
 
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+  integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
+
 color-convert@^1.9.0, color-convert@^1.9.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -1045,7 +2177,15 @@ colors@^1.1.2:
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
   integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
 
-combined-stream@^1.0.8:
+columnify@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/columnify/-/columnify-1.5.4.tgz#4737ddf1c7b69a8a7c340570782e947eec8e78bb"
+  integrity sha1-Rzfd8ce2mop8NAVweC6UfuyOeLs=
+  dependencies:
+    strip-ansi "^3.0.0"
+    wcwidth "^1.0.0"
+
+combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
   integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
@@ -1067,6 +2207,14 @@ commondir@^1.0.1:
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
 
+compare-func@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/compare-func/-/compare-func-2.0.0.tgz#fb65e75edbddfd2e568554e8b5b05fff7a51fcb3"
+  integrity sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==
+  dependencies:
+    array-ify "^1.0.0"
+    dot-prop "^5.1.0"
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -1082,6 +2230,16 @@ concat-stream@^1.6.2:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+concat-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-2.0.0.tgz#414cf5af790a48c60ab9be4527d56d5e41133cb1"
+  integrity sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^3.0.2"
+    typedarray "^0.0.6"
+
 concat-with-sourcemaps@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz#d4ea93f05ae25790951b99e7b3b09e3908a4082e"
@@ -1089,6 +2247,14 @@ concat-with-sourcemaps@^1.1.0:
   dependencies:
     source-map "^0.6.1"
 
+config-chain@^1.1.12:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.13.tgz#fad0795aa6a6cdaff9ed1b68e9dff94372c232f4"
+  integrity sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==
+  dependencies:
+    ini "^1.3.4"
+    proto-list "~1.2.1"
+
 configstore@^3.0.0:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.5.tgz#e9af331fadc14dabd544d3e7e76dc446a09a530f"
@@ -1106,6 +2272,11 @@ console-clear@^1.1.0:
   resolved "https://registry.yarnpkg.com/console-clear/-/console-clear-1.1.1.tgz#995e20cbfbf14dd792b672cde387bd128d674bf7"
   integrity sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==
 
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+  integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
+
 content-disposition@0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
@@ -1118,6 +2289,89 @@ content-type@~1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
+conventional-changelog-angular@^5.0.12:
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.12.tgz#c979b8b921cbfe26402eb3da5bbfda02d865a2b9"
+  integrity sha512-5GLsbnkR/7A89RyHLvvoExbiGbd9xKdKqDTrArnPbOqBqG/2wIosu0fHwpeIRI8Tl94MhVNBXcLJZl92ZQ5USw==
+  dependencies:
+    compare-func "^2.0.0"
+    q "^1.5.1"
+
+conventional-changelog-core@^4.2.2:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-4.2.3.tgz#ce44d4bbba4032e3dc14c00fcd5b53fc00b66433"
+  integrity sha512-MwnZjIoMRL3jtPH5GywVNqetGILC7g6RQFvdb8LRU/fA/338JbeWAku3PZ8yQ+mtVRViiISqJlb0sOz0htBZig==
+  dependencies:
+    add-stream "^1.0.0"
+    conventional-changelog-writer "^5.0.0"
+    conventional-commits-parser "^3.2.0"
+    dateformat "^3.0.0"
+    get-pkg-repo "^4.0.0"
+    git-raw-commits "^2.0.8"
+    git-remote-origin-url "^2.0.0"
+    git-semver-tags "^4.1.1"
+    lodash "^4.17.15"
+    normalize-package-data "^3.0.0"
+    q "^1.5.1"
+    read-pkg "^3.0.0"
+    read-pkg-up "^3.0.0"
+    through2 "^4.0.0"
+
+conventional-changelog-preset-loader@^2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-2.3.4.tgz#14a855abbffd59027fd602581f1f34d9862ea44c"
+  integrity sha512-GEKRWkrSAZeTq5+YjUZOYxdHq+ci4dNwHvpaBC3+ENalzFWuCWa9EZXSuZBpkr72sMdKB+1fyDV4takK1Lf58g==
+
+conventional-changelog-writer@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-5.0.0.tgz#c4042f3f1542f2f41d7d2e0d6cad23aba8df8eec"
+  integrity sha512-HnDh9QHLNWfL6E1uHz6krZEQOgm8hN7z/m7tT16xwd802fwgMN0Wqd7AQYVkhpsjDUx/99oo+nGgvKF657XP5g==
+  dependencies:
+    conventional-commits-filter "^2.0.7"
+    dateformat "^3.0.0"
+    handlebars "^4.7.6"
+    json-stringify-safe "^5.0.1"
+    lodash "^4.17.15"
+    meow "^8.0.0"
+    semver "^6.0.0"
+    split "^1.0.0"
+    through2 "^4.0.0"
+
+conventional-commits-filter@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-2.0.7.tgz#f8d9b4f182fce00c9af7139da49365b136c8a0b3"
+  integrity sha512-ASS9SamOP4TbCClsRHxIHXRfcGCnIoQqkvAzCSbZzTFLfcTqJVugB0agRgsEELsqaeWgsXv513eS116wnlSSPA==
+  dependencies:
+    lodash.ismatch "^4.4.0"
+    modify-values "^1.0.0"
+
+conventional-commits-parser@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-3.2.1.tgz#ba44f0b3b6588da2ee9fd8da508ebff50d116ce2"
+  integrity sha512-OG9kQtmMZBJD/32NEw5IhN5+HnBqVjy03eC+I71I0oQRFA5rOgA4OtPOYG7mz1GkCfCNxn3gKIX8EiHJYuf1cA==
+  dependencies:
+    JSONStream "^1.0.4"
+    is-text-path "^1.0.1"
+    lodash "^4.17.15"
+    meow "^8.0.0"
+    split2 "^3.0.0"
+    through2 "^4.0.0"
+    trim-off-newlines "^1.0.0"
+
+conventional-recommended-bump@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/conventional-recommended-bump/-/conventional-recommended-bump-6.1.0.tgz#cfa623285d1de554012f2ffde70d9c8a22231f55"
+  integrity sha512-uiApbSiNGM/kkdL9GTOLAqC4hbptObFo4wW2QRyHsKciGAfQuLU1ShZ1BIVI/+K2BE/W1AWYQMCXAsv4dyKPaw==
+  dependencies:
+    concat-stream "^2.0.0"
+    conventional-changelog-preset-loader "^2.3.4"
+    conventional-commits-filter "^2.0.7"
+    conventional-commits-parser "^3.2.0"
+    git-raw-commits "^2.0.8"
+    git-semver-tags "^4.1.1"
+    meow "^8.0.0"
+    q "^1.5.1"
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
@@ -1133,7 +2387,7 @@ core-js@^2.4.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
-core-util-is@~1.0.0:
+core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
@@ -1148,6 +2402,17 @@ cosmiconfig@^5.0.0:
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
+cosmiconfig@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.0.tgz#ef9b44d773959cae63ddecd122de23853b60f8d3"
+  integrity sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 create-error-class@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
@@ -1182,7 +2447,7 @@ cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^7.0.2:
+cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -1378,6 +2643,18 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+dargs@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/dargs/-/dargs-7.0.0.tgz#04015c41de0bcb69ec84050f3d9be0caf8d6d5cc"
+  integrity sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
+  dependencies:
+    assert-plus "^1.0.0"
+
 data-urls@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
@@ -1387,6 +2664,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+dateformat@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
+  integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
+
 debug@2.6.9, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -1415,11 +2697,39 @@ debug@^3.1.0:
   dependencies:
     ms "^2.1.1"
 
+debuglog@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
+  integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
+
+decamelize-keys@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
+  integrity sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=
+  dependencies:
+    decamelize "^1.1.0"
+    map-obj "^1.0.0"
+
+decamelize@^1.1.0, decamelize@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
+
 decimal.js@^10.2.1:
   version "10.3.1"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.3.1.tgz#d8c3a444a9c6774ba60ca6ad7261c3a94fd5e783"
   integrity sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==
 
+decode-uri-component@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
+
+dedent@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
+  integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
+
 deep-eql@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-3.0.1.tgz#dfc9404400ad1c8fe023e7da1df1c147c4b444df"
@@ -1437,6 +2747,13 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+defaults@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
+  integrity sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=
+  dependencies:
+    clone "^1.0.2"
+
 define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -1449,16 +2766,31 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
-depd@~1.1.2:
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
+
+depd@^1.1.2, depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
+deprecation@^2.0.0, deprecation@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
+  integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
+
 destroy@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
   integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
+detect-indent@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
+  integrity sha1-OHHMCmoALow+Wzz38zYmRnXwa50=
+
 detect-indent@^6.0.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
@@ -1469,11 +2801,26 @@ devtools-protocol@0.0.869402:
   resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.869402.tgz#03ade701761742e43ae4de5dc188bcd80f156d8d"
   integrity sha512-VvlVYY+VDJe639yHs5PHISzdWTLL3Aw8rO4cvUtwvoxFd6FHbE4OpHHcde52M6096uYYazAmd4l0o5VuFRO2WA==
 
+dezalgo@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/dezalgo/-/dezalgo-1.0.3.tgz#7f742de066fc748bc8db820569dddce49bf0d456"
+  integrity sha1-f3Qt4Gb8dIvI24IFad3c5Jvw1FY=
+  dependencies:
+    asap "^2.0.0"
+    wrappy "1"
+
 diff@3.5.0, diff@^3.0.1, diff@^3.1.0, diff@^3.2.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
   integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
 
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
 doctrine@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
@@ -1546,18 +2893,38 @@ dot-prop@^4.2.1:
   dependencies:
     is-obj "^1.0.0"
 
-dot-prop@^5.2.0:
+dot-prop@^5.1.0, dot-prop@^5.2.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
   integrity sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==
   dependencies:
     is-obj "^2.0.0"
 
+dot-prop@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-6.0.1.tgz#fc26b3cf142b9e59b74dbd39ed66ce620c681083"
+  integrity sha512-tE7ztYzXHIeyvc7N+hR3oi7FIbf/NIjVP9hmAt3yMXzrQ072/fpjGLx2GxNxGxUl5V73MEqYzioOMoVhGMJ5cA==
+  dependencies:
+    is-obj "^2.0.0"
+
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
   integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
 
+duplexer@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
+  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
+
+ecc-jsbn@~0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
+  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
+  dependencies:
+    jsbn "~0.1.0"
+    safer-buffer "^2.1.0"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -1583,6 +2950,13 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
+encoding@^0.1.12:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
 end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -1602,6 +2976,21 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+env-paths@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
+  integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
+
+envinfo@^7.7.4:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
+  integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==
+
+err-code@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
+  integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==
+
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -1851,6 +3240,21 @@ execa@^0.7.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+execa@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.0"
+
 expand-brackets@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
@@ -1901,6 +3305,11 @@ express@^4.16.4:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
+extend@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
 external-editor@^3.0.3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
@@ -1938,11 +3347,32 @@ extract-zip@^2.0.0:
   optionalDependencies:
     "@types/yauzl" "^2.9.1"
 
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+  integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-glob@^3.1.1:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
+  integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -1969,6 +3399,13 @@ fastparse@^1.1.2:
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
   integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
 
+fastq@^1.6.0:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.11.1.tgz#5d8175aae17db61947f8b162cfc7f63264d22807"
+  integrity sha512-HOnr8Mc60eNYl1gzwp6r5RoUyAn5/glBolUzP/Ez6IFVPMPirxn/9phgL6zhOtaTy7ISwPvQ+wT+hfcRZh/bzw==
+  dependencies:
+    reusify "^1.0.4"
+
 fd-slicer@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
@@ -1988,6 +3425,13 @@ figures@^2.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
+figures@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
+  integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -2032,6 +3476,11 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+filter-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
+  integrity sha1-mzERErxsYSehbgFsbF1/GeCAXFs=
+
 finalhandler@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@@ -2045,7 +3494,14 @@ finalhandler@~1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.0"
 
-find-up@^4.0.0:
+find-up@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
+  dependencies:
+    locate-path "^2.0.0"
+
+find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
   integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
@@ -2092,6 +3548,11 @@ for-own@^0.1.4:
   dependencies:
     for-in "^1.0.1"
 
+forever-agent@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
+  integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
+
 form-data@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f"
@@ -2101,6 +3562,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
+  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.6"
+    mime-types "^2.1.12"
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -2116,6 +3586,30 @@ fs-constants@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
+fs-extra@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
+  integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+fs-minipass@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
+  integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
+  dependencies:
+    minipass "^2.6.0"
+
+fs-minipass@^2.0.0, fs-minipass@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
+  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
+  dependencies:
+    minipass "^3.0.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -2136,6 +3630,20 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
+gauge@~2.7.3:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
+  integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
+  dependencies:
+    aproba "^1.0.3"
+    console-control-strings "^1.0.0"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
 generic-names@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-2.0.1.tgz#f8a378ead2ccaa7a34f0317b05554832ae41b872"
@@ -2143,6 +3651,11 @@ generic-names@^2.0.1:
   dependencies:
     loader-utils "^1.1.0"
 
+get-caller-file@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
 get-func-name@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
@@ -2157,11 +3670,26 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-pkg-repo@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/get-pkg-repo/-/get-pkg-repo-4.1.2.tgz#c4ffd60015cf091be666a0212753fc158f01a4c0"
+  integrity sha512-/FjamZL9cBYllEbReZkxF2IMh80d8TJoC4e3bmLNif8ibHw95aj0N/tzqK0kZz9eU/3w3dL6lF4fnnX/sDdW3A==
+  dependencies:
+    "@hutson/parse-repository-url" "^3.0.0"
+    hosted-git-info "^4.0.0"
+    meow "^7.0.0"
+    through2 "^2.0.0"
+
 get-port@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
   integrity sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=
 
+get-port@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/get-port/-/get-port-5.1.1.tgz#0469ed07563479de6efb986baf053dcd7d4e3193"
+  integrity sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==
+
 get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -2174,6 +3702,67 @@ get-stream@^5.1.0:
   dependencies:
     pump "^3.0.0"
 
+get-stream@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  integrity sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=
+  dependencies:
+    assert-plus "^1.0.0"
+
+git-raw-commits@^2.0.8:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-2.0.10.tgz#e2255ed9563b1c9c3ea6bd05806410290297bbc1"
+  integrity sha512-sHhX5lsbG9SOO6yXdlwgEMQ/ljIn7qMpAbJZCGfXX2fq5T8M5SrDnpYk9/4HswTildcIqatsWa91vty6VhWSaQ==
+  dependencies:
+    dargs "^7.0.0"
+    lodash "^4.17.15"
+    meow "^8.0.0"
+    split2 "^3.0.0"
+    through2 "^4.0.0"
+
+git-remote-origin-url@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz#5282659dae2107145a11126112ad3216ec5fa65f"
+  integrity sha1-UoJlna4hBxRaERJhEq0yFuxfpl8=
+  dependencies:
+    gitconfiglocal "^1.0.0"
+    pify "^2.3.0"
+
+git-semver-tags@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-4.1.1.tgz#63191bcd809b0ec3e151ba4751c16c444e5b5780"
+  integrity sha512-OWyMt5zBe7xFs8vglMmhM9lRQzCWL3WjHtxNNfJTMngGym7pC1kh8sP6jevfydJ6LP3ZvGxfb6ABYgPUM0mtsA==
+  dependencies:
+    meow "^8.0.0"
+    semver "^6.0.0"
+
+git-up@^4.0.0:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/git-up/-/git-up-4.0.5.tgz#e7bb70981a37ea2fb8fe049669800a1f9a01d759"
+  integrity sha512-YUvVDg/vX3d0syBsk/CKUTib0srcQME0JyHkL5BaYdwLsiCslPWmDSi8PUMo9pXYjrryMcmsCoCgsTpSCJEQaA==
+  dependencies:
+    is-ssh "^1.3.0"
+    parse-url "^6.0.0"
+
+git-url-parse@^11.4.4:
+  version "11.5.0"
+  resolved "https://registry.yarnpkg.com/git-url-parse/-/git-url-parse-11.5.0.tgz#acaaf65239cb1536185b19165a24bbc754b3f764"
+  integrity sha512-TZYSMDeM37r71Lqg1mbnMlOqlHd7BSij9qN7XwTkRqSAYFMihGLGhfHwgqQob3GUhEneKnV4nskN9rbQw2KGxA==
+  dependencies:
+    git-up "^4.0.0"
+
+gitconfiglocal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz#41d045f3851a5ea88f03f24ca1c6178114464b9b"
+  integrity sha1-QdBF84UaXqiPA/JMocYXgRRGS5s=
+  dependencies:
+    ini "^1.3.2"
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -2189,7 +3778,7 @@ glob-parent@^2.0.0:
   dependencies:
     is-glob "^2.0.0"
 
-glob-parent@^5.1.2, glob-parent@~5.1.2:
+glob-parent@^5.1.1, glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -2208,7 +3797,7 @@ glob@7.1.2:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.6:
+glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
   integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
@@ -2245,6 +3834,18 @@ globals@^13.6.0, globals@^13.9.0:
   dependencies:
     type-fest "^0.20.2"
 
+globby@^11.0.2:
+  version "11.0.4"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5"
+  integrity sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.1.1"
+    ignore "^5.1.4"
+    merge2 "^1.3.0"
+    slash "^3.0.0"
+
 globby@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
@@ -2278,11 +3879,46 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
+graceful-fs@^4.1.15, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.3:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
+  integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
+
 growl@1.10.5:
   version "1.10.5"
   resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
   integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==
 
+handlebars@^4.7.6:
+  version "4.7.7"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
+  integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
+  dependencies:
+    minimist "^1.2.5"
+    neo-async "^2.6.0"
+    source-map "^0.6.1"
+    wordwrap "^1.0.0"
+  optionalDependencies:
+    uglify-js "^3.1.4"
+
+har-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+  integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
+
+har-validator@~5.1.3:
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
+  integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
+  dependencies:
+    ajv "^6.12.3"
+    har-schema "^2.0.0"
+
+hard-rejection@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
+  integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -2315,6 +3951,11 @@ has-symbols@^1.0.1, has-symbols@^1.0.2:
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
   integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
 
+has-unicode@^2.0.0, has-unicode@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+  integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
+
 has@^1.0.0, has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
@@ -2332,6 +3973,18 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+hosted-git-info@^2.1.4:
+  version "2.8.9"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
+
+hosted-git-info@^4.0.0, hosted-git-info@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-4.0.2.tgz#5e425507eede4fea846b7262f0838456c4209961"
+  integrity sha512-c9OGXbZ3guC/xOlCg1Ci/VgWlwsqDv1yMQL1CWqXDL0hDjXuNcq0zuR4xqPSuasI3kqFDhqSyTjREz5gzq0fXg==
+  dependencies:
+    lru-cache "^6.0.0"
+
 hsl-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
@@ -2359,6 +4012,11 @@ htmlparser2@^6.1.0:
     domutils "^2.5.2"
     entities "^2.0.0"
 
+http-cache-semantics@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
+  integrity sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==
+
 http-errors@1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
@@ -2390,6 +4048,15 @@ http-proxy-agent@^4.0.1:
     agent-base "6"
     debug "4"
 
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  integrity sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
 https-proxy-agent@^2.2.1:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz#4ee7a737abd92678a293d9b34a1af4d0d08c787b"
@@ -2406,6 +4073,18 @@ https-proxy-agent@^5.0.0:
     agent-base "6"
     debug "4"
 
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
+humanize-ms@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/humanize-ms/-/humanize-ms-1.2.1.tgz#c46e3159a293f6b896da29316d8b6fe8bb79bbed"
+  integrity sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=
+  dependencies:
+    ms "^2.0.0"
+
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -2413,6 +4092,13 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+iconv-lite@^0.6.2:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 icss-replace-symbols@1.1.0, icss-replace-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
@@ -2428,11 +4114,23 @@ ignore-styles@^5.0.1:
   resolved "https://registry.yarnpkg.com/ignore-styles/-/ignore-styles-5.0.1.tgz#b49ef2274bdafcd8a4880a966bfe38d1a0bf4671"
   integrity sha1-tJ7yJ0va/NikiAqWa/440aC/RnE=
 
+ignore-walk@^3.0.3:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.4.tgz#c9a09f69b7c7b479a5d74ac1a3c0d4236d2a6335"
+  integrity sha512-PY6Ii8o1jMRA1z4F2hRkH/xN59ox43DavKvD3oDpfurRlOJyAHpifIwpbdv1n4jt4ov0jSpw3kQ4GhJnpBL6WQ==
+  dependencies:
+    minimatch "^3.0.4"
+
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
+ignore@^5.1.4:
+  version "5.1.8"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
+  integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -2482,16 +4180,34 @@ import-lazy@^2.1.0:
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
   integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=
 
+import-local@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.0.2.tgz#a8cfd0431d1de4a2199703d003e3e62364fa6db6"
+  integrity sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
+indent-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
+  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
+
 indexes-of@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
   integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
 
+infer-owner@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
+  integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -2510,11 +4226,25 @@ inherits@2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
-ini@^1.3.4, ini@~1.3.0:
+ini@^1.3.2, ini@^1.3.4, ini@~1.3.0:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
+init-package-json@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/init-package-json/-/init-package-json-2.0.3.tgz#c8ae4f2a4ad353bcbc089e5ffe98a8f1a314e8fd"
+  integrity sha512-tk/gAgbMMxR6fn1MgMaM1HpU1ryAmBWWitnxG5OhuNXeX0cbpbgV5jA4AIpQJVNoyOfOevTtO6WX+rPs+EFqaQ==
+  dependencies:
+    glob "^7.1.1"
+    npm-package-arg "^8.1.2"
+    promzard "^0.3.0"
+    read "~1.0.1"
+    read-package-json "^3.0.1"
+    semver "^7.3.5"
+    validate-npm-package-license "^3.0.4"
+    validate-npm-package-name "^3.0.0"
+
 inquirer@^6.2.1:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.2.tgz#ad50942375d036d327ff528c08bd5fab089928ca"
@@ -2534,6 +4264,30 @@ inquirer@^6.2.1:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
+inquirer@^7.3.3:
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.3.tgz#04d176b2af04afc157a83fd7c100e98ee0aad003"
+  integrity sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    chalk "^4.1.0"
+    cli-cursor "^3.1.0"
+    cli-width "^3.0.0"
+    external-editor "^3.0.3"
+    figures "^3.0.0"
+    lodash "^4.17.19"
+    mute-stream "0.0.8"
+    run-async "^2.4.0"
+    rxjs "^6.6.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+    through "^2.3.6"
+
+ip@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
+  integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
+
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@@ -2590,6 +4344,13 @@ is-ci@^1.0.10:
   dependencies:
     ci-info "^1.5.0"
 
+is-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
+  dependencies:
+    ci-info "^2.0.0"
+
 is-color-stop@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
@@ -2646,6 +4407,13 @@ is-extglob@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  integrity sha1-754xOG8DGn8NZDr4L95QxFfvAMs=
+  dependencies:
+    number-is-nan "^1.0.0"
+
 is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
@@ -2678,6 +4446,11 @@ is-installed-globally@^0.1.0:
     global-dirs "^0.1.0"
     is-path-inside "^1.0.0"
 
+is-lambda@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-lambda/-/is-lambda-1.0.1.tgz#3d9877899e6a53efc0160504cde15f82e6f061d5"
+  integrity sha1-PZh3iZ5qU+/AFgUEzeFfgubwYdU=
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -2732,6 +4505,28 @@ is-path-inside@^1.0.0:
   dependencies:
     path-is-inside "^1.0.1"
 
+is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+  integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
+
+is-plain-obj@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
+  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
+
+is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
+  dependencies:
+    isobject "^3.0.1"
+
+is-plain-object@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
+  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
 is-posix-bracket@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
@@ -2777,11 +4572,23 @@ is-retry-allowed@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4"
   integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==
 
+is-ssh@^1.3.0:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/is-ssh/-/is-ssh-1.3.3.tgz#7f133285ccd7f2c2c7fc897b771b53d95a2b2c7e"
+  integrity sha512-NKzJmQzJfEEma3w5cJNcUMxoXfDjz0Zj0eyCalHn2E6VOwlzjZo0yuO2fcBSf8zhFuVCL/82/r5gRcoi6aEPVQ==
+  dependencies:
+    protocols "^1.1.0"
+
 is-stream@^1.0.0, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
+is-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
 is-string@^1.0.5, is-string@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.6.tgz#3fe5d5992fb0d93404f32584d4b0179a71b54a5f"
@@ -2794,6 +4601,18 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.2"
 
+is-text-path@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-text-path/-/is-text-path-1.0.1.tgz#4e1aa0fb51bfbcb3e92688001397202c1775b66e"
+  integrity sha1-Thqg+1G/vLPpJogAE5cgLBd1tm4=
+  dependencies:
+    text-extensions "^1.0.0"
+
+is-typedarray@^1.0.0, is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
+
 isarray@1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -2811,6 +4630,16 @@ isobject@^2.0.0:
   dependencies:
     isarray "1.0.0"
 
+isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
+
 jest-diff@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-23.6.0.tgz#1500f3f16e850bb3d71233408089be099f610c7d"
@@ -2913,6 +4742,11 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
+
 jsdom-global@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/jsdom-global/-/jsdom-global-3.0.2.tgz#6bd299c13b0c4626b2da2c0393cd4385d606acb9"
@@ -2956,6 +4790,11 @@ json-parse-better-errors@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -2966,11 +4805,21 @@ json-schema-traverse@^1.0.0:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
+json-schema@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+  integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
+
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
+json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+  integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
+
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -2978,6 +4827,30 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
+jsonfile@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
+  dependencies:
+    universalify "^2.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsonparse@^1.2.0, jsonparse@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
+  integrity sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  integrity sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
 kind-of@^3.0.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -2985,7 +4858,7 @@ kind-of@^3.0.2:
   dependencies:
     is-buffer "^1.1.5"
 
-kind-of@^6.0.0:
+kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
@@ -3002,6 +4875,30 @@ latest-version@^3.0.0:
   dependencies:
     package-json "^4.0.0"
 
+lerna@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/lerna/-/lerna-4.0.0.tgz#b139d685d50ea0ca1be87713a7c2f44a5b678e9e"
+  integrity sha512-DD/i1znurfOmNJb0OBw66NmNqiM8kF6uIrzrJ0wGE3VNdzeOhz9ziWLYiRaZDGGwgbcjOo6eIfcx9O5Qynz+kg==
+  dependencies:
+    "@lerna/add" "4.0.0"
+    "@lerna/bootstrap" "4.0.0"
+    "@lerna/changed" "4.0.0"
+    "@lerna/clean" "4.0.0"
+    "@lerna/cli" "4.0.0"
+    "@lerna/create" "4.0.0"
+    "@lerna/diff" "4.0.0"
+    "@lerna/exec" "4.0.0"
+    "@lerna/import" "4.0.0"
+    "@lerna/info" "4.0.0"
+    "@lerna/init" "4.0.0"
+    "@lerna/link" "4.0.0"
+    "@lerna/list" "4.0.0"
+    "@lerna/publish" "4.0.0"
+    "@lerna/run" "4.0.0"
+    "@lerna/version" "4.0.0"
+    import-local "^3.0.2"
+    npmlog "^4.1.2"
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -3018,6 +4915,32 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+libnpmaccess@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/libnpmaccess/-/libnpmaccess-4.0.3.tgz#dfb0e5b0a53c315a2610d300e46b4ddeb66e7eec"
+  integrity sha512-sPeTSNImksm8O2b6/pf3ikv4N567ERYEpeKRPSmqlNt1dTZbvgpJIzg5vAhXHpw2ISBsELFRelk0jEahj1c6nQ==
+  dependencies:
+    aproba "^2.0.0"
+    minipass "^3.1.1"
+    npm-package-arg "^8.1.2"
+    npm-registry-fetch "^11.0.0"
+
+libnpmpublish@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/libnpmpublish/-/libnpmpublish-4.0.2.tgz#be77e8bf5956131bcb45e3caa6b96a842dec0794"
+  integrity sha512-+AD7A2zbVeGRCFI2aO//oUmapCwy7GHqPXFJh3qpToSRNU+tXKJ2YFUgjt04LPPAf2dlEH95s6EhIHM1J7bmOw==
+  dependencies:
+    normalize-package-data "^3.0.2"
+    npm-package-arg "^8.1.2"
+    npm-registry-fetch "^11.0.0"
+    semver "^7.1.3"
+    ssri "^8.0.1"
+
+lines-and-columns@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
+  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+
 livereload-js@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/livereload-js/-/livereload-js-3.3.2.tgz#c88b009c6e466b15b91faa26fd7c99d620e12651"
@@ -3033,6 +4956,26 @@ livereload@^0.9.1:
     opts ">= 1.2.0"
     ws "^7.4.3"
 
+load-json-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+    strip-bom "^3.0.0"
+
+load-json-file@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-6.2.0.tgz#5c7770b42cafa97074ca2848707c61662f4251a1"
+  integrity sha512-gUD/epcRms75Cw8RT1pUdHugZYM5ce64ucs2GEISABwkRsOQr0q2wm/MV2TKThycIe5e0ytRweW2RZxclogCdQ==
+  dependencies:
+    graceful-fs "^4.1.15"
+    parse-json "^5.0.0"
+    strip-bom "^4.0.0"
+    type-fest "^0.6.0"
+
 loader-utils@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
@@ -3047,6 +4990,14 @@ local-access@^1.0.1:
   resolved "https://registry.yarnpkg.com/local-access/-/local-access-1.1.0.tgz#e007c76ba2ca83d5877ba1a125fc8dfe23ba4798"
   integrity sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==
 
+locate-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
+  dependencies:
+    p-locate "^2.0.0"
+    path-exists "^3.0.0"
+
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
@@ -3054,6 +5005,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash._reinterpolate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
+
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
@@ -3064,6 +5020,11 @@ lodash.clonedeep@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
   integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
 
+lodash.ismatch@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37"
+  integrity sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -3074,6 +5035,21 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash.template@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
+  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+    lodash.templatesettings "^4.0.0"
+
+lodash.templatesettings@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
+  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+
 lodash.truncate@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
@@ -3084,7 +5060,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.12, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.7.0:
+lodash@^4.17.12, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -3123,11 +5099,79 @@ make-dir@^1.0.0:
   dependencies:
     pify "^3.0.0"
 
+make-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
+  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
+  dependencies:
+    pify "^4.0.1"
+    semver "^5.6.0"
+
+make-dir@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.0.0"
+
 make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
 
+make-fetch-happen@^8.0.9:
+  version "8.0.14"
+  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-8.0.14.tgz#aaba73ae0ab5586ad8eaa68bd83332669393e222"
+  integrity sha512-EsS89h6l4vbfJEtBZnENTOFk8mCRpY5ru36Xe5bcX1KYIli2mkSHqoFsp5O1wMDvTJJzxe/4THpCTtygjeeGWQ==
+  dependencies:
+    agentkeepalive "^4.1.3"
+    cacache "^15.0.5"
+    http-cache-semantics "^4.1.0"
+    http-proxy-agent "^4.0.1"
+    https-proxy-agent "^5.0.0"
+    is-lambda "^1.0.1"
+    lru-cache "^6.0.0"
+    minipass "^3.1.3"
+    minipass-collect "^1.0.2"
+    minipass-fetch "^1.3.2"
+    minipass-flush "^1.0.5"
+    minipass-pipeline "^1.2.4"
+    promise-retry "^2.0.1"
+    socks-proxy-agent "^5.0.0"
+    ssri "^8.0.0"
+
+make-fetch-happen@^9.0.1:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-9.0.4.tgz#ceaa100e60e0ef9e8d1ede94614bb2ba83c8bb24"
+  integrity sha512-sQWNKMYqSmbAGXqJg2jZ+PmHh5JAybvwu0xM8mZR/bsTjGiTASj3ldXJV7KFHy1k/IJIBkjxQFoWIVsv9+PQMg==
+  dependencies:
+    agentkeepalive "^4.1.3"
+    cacache "^15.2.0"
+    http-cache-semantics "^4.1.0"
+    http-proxy-agent "^4.0.1"
+    https-proxy-agent "^5.0.0"
+    is-lambda "^1.0.1"
+    lru-cache "^6.0.0"
+    minipass "^3.1.3"
+    minipass-collect "^1.0.2"
+    minipass-fetch "^1.3.2"
+    minipass-flush "^1.0.5"
+    minipass-pipeline "^1.2.4"
+    negotiator "^0.6.2"
+    promise-retry "^2.0.1"
+    socks-proxy-agent "^5.0.0"
+    ssri "^8.0.0"
+
+map-obj@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
+  integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=
+
+map-obj@^4.0.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.2.1.tgz#e4ea399dbc979ae735c83c863dd31bdf364277b7"
+  integrity sha512-+WA2/1sPmDj1dlvvJmB5G6JKfY9dpn7EVBUL06+y6PoljPkh+6V1QihwxNkbcGxCRjt2b0F9K0taiCuo7MbdFQ==
+
 math-random@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c"
@@ -3148,6 +5192,40 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
+meow@^7.0.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-7.1.1.tgz#7c01595e3d337fcb0ec4e8eed1666ea95903d306"
+  integrity sha512-GWHvA5QOcS412WCo8vwKDlTelGLsCGBVevQB5Kva961rmNfun0PCbv5+xta2kUMFJyR8/oWnn7ddeKdosbAPbA==
+  dependencies:
+    "@types/minimist" "^1.2.0"
+    camelcase-keys "^6.2.2"
+    decamelize-keys "^1.1.0"
+    hard-rejection "^2.1.0"
+    minimist-options "4.1.0"
+    normalize-package-data "^2.5.0"
+    read-pkg-up "^7.0.1"
+    redent "^3.0.0"
+    trim-newlines "^3.0.0"
+    type-fest "^0.13.1"
+    yargs-parser "^18.1.3"
+
+meow@^8.0.0:
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-8.1.2.tgz#bcbe45bda0ee1729d350c03cffc8395a36c4e897"
+  integrity sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==
+  dependencies:
+    "@types/minimist" "^1.2.0"
+    camelcase-keys "^6.2.2"
+    decamelize-keys "^1.1.0"
+    hard-rejection "^2.1.0"
+    minimist-options "4.1.0"
+    normalize-package-data "^3.0.0"
+    read-pkg-up "^7.0.1"
+    redent "^3.0.0"
+    trim-newlines "^3.0.0"
+    type-fest "^0.18.0"
+    yargs-parser "^20.2.3"
+
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -3165,6 +5243,11 @@ merge-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
+merge2@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
@@ -3189,11 +5272,24 @@ micromatch@^2.3.11:
     parse-glob "^3.0.4"
     regex-cache "^0.4.2"
 
+micromatch@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
+  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.2.3"
+
 mime-db@1.48.0:
   version "1.48.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.48.0.tgz#e35b31045dd7eada3aaad537ed88a33afbef2d1d"
   integrity sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==
 
+mime-db@1.49.0:
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.49.0.tgz#f3dfde60c99e9cf3bc9701d687778f537001cbed"
+  integrity sha512-CIc8j9URtOVApSFCQIF+VBkX1RwXp/oMMOrqdyXSBXq5RWNEsRfyj1kiRnQgmNXmHxPoFIxOroKA3zcU9P+nAA==
+
 mime-types@^2.1.12, mime-types@~2.1.24:
   version "2.1.31"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.31.tgz#a00d76b74317c61f9c2db2218b8e9f8e9c5c9e6b"
@@ -3201,6 +5297,13 @@ mime-types@^2.1.12, mime-types@~2.1.24:
   dependencies:
     mime-db "1.48.0"
 
+mime-types@~2.1.19:
+  version "2.1.32"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.32.tgz#1d00e89e7de7fe02008db61001d9e02852670fd5"
+  integrity sha512-hJGaVS4G4c9TSMYh2n6SQAGrC4RnfU+daP8G7cSCmaqNjiOoUY0VHCMS42pxnQmVF1GWwFhbHWn3RIxCqTmZ9A==
+  dependencies:
+    mime-db "1.49.0"
+
 mime@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
@@ -3216,6 +5319,11 @@ mimic-fn@^1.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
   integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
 
+mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+
 min-indent@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@@ -3228,6 +5336,15 @@ min-indent@^1.0.0:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimist-options@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
+  integrity sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==
+  dependencies:
+    arrify "^1.0.1"
+    is-plain-obj "^1.1.0"
+    kind-of "^6.0.3"
+
 minimist@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
@@ -3243,6 +5360,83 @@ minimist@~0.0.1:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
   integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
 
+minipass-collect@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
+  integrity sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==
+  dependencies:
+    minipass "^3.0.0"
+
+minipass-fetch@^1.3.0, minipass-fetch@^1.3.2:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/minipass-fetch/-/minipass-fetch-1.3.4.tgz#63f5af868a38746ca7b33b03393ddf8c291244fe"
+  integrity sha512-TielGogIzbUEtd1LsjZFs47RWuHHfhl6TiCx1InVxApBAmQ8bL0dL5ilkLGcRvuyW/A9nE+Lvn855Ewz8S0PnQ==
+  dependencies:
+    minipass "^3.1.0"
+    minipass-sized "^1.0.3"
+    minizlib "^2.0.0"
+  optionalDependencies:
+    encoding "^0.1.12"
+
+minipass-flush@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/minipass-flush/-/minipass-flush-1.0.5.tgz#82e7135d7e89a50ffe64610a787953c4c4cbb373"
+  integrity sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==
+  dependencies:
+    minipass "^3.0.0"
+
+minipass-json-stream@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minipass-json-stream/-/minipass-json-stream-1.0.1.tgz#7edbb92588fbfc2ff1db2fc10397acb7b6b44aa7"
+  integrity sha512-ODqY18UZt/I8k+b7rl2AENgbWE8IDYam+undIJONvigAz8KR5GWblsFTEfQs0WODsjbSXWlm+JHEv8Gr6Tfdbg==
+  dependencies:
+    jsonparse "^1.3.1"
+    minipass "^3.0.0"
+
+minipass-pipeline@^1.2.2, minipass-pipeline@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz#68472f79711c084657c067c5c6ad93cddea8214c"
+  integrity sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==
+  dependencies:
+    minipass "^3.0.0"
+
+minipass-sized@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/minipass-sized/-/minipass-sized-1.0.3.tgz#70ee5a7c5052070afacfbc22977ea79def353b70"
+  integrity sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==
+  dependencies:
+    minipass "^3.0.0"
+
+minipass@^2.6.0, minipass@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
+  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
+  dependencies:
+    safe-buffer "^5.1.2"
+    yallist "^3.0.0"
+
+minipass@^3.0.0, minipass@^3.1.0, minipass@^3.1.1, minipass@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.3.tgz#7d42ff1f39635482e15f9cdb53184deebd5815fd"
+  integrity sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==
+  dependencies:
+    yallist "^4.0.0"
+
+minizlib@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
+  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
+  dependencies:
+    minipass "^2.9.0"
+
+minizlib@^2.0.0, minizlib@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
+  integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
+  dependencies:
+    minipass "^3.0.0"
+    yallist "^4.0.0"
+
 mitt@^1.1.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mitt/-/mitt-1.2.0.tgz#cb24e6569c806e31bd4e3995787fe38a04fdf90d"
@@ -3253,6 +5447,15 @@ mkdirp-classic@^0.5.2:
   resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
   integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
 
+mkdirp-infer-owner@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mkdirp-infer-owner/-/mkdirp-infer-owner-2.0.0.tgz#55d3b368e7d89065c38f32fd38e638f0ab61d316"
+  integrity sha512-sdqtiFt3lkOaYvTXSRIUjkIdPTcxgv5+fgqYE/5qgwdw12cOrAuzzgzvVExIkH/ul1oeHN3bCLOWSG3XOqbKKw==
+  dependencies:
+    chownr "^2.0.0"
+    infer-owner "^1.0.4"
+    mkdirp "^1.0.3"
+
 mkdirp@0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -3260,13 +5463,18 @@ mkdirp@0.5.1:
   dependencies:
     minimist "0.0.8"
 
-mkdirp@^0.5.1, mkdirp@^0.5.4, mkdirp@~0.5.1:
+mkdirp@^0.5.1, mkdirp@^0.5.4, mkdirp@^0.5.5, mkdirp@~0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
   integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
   dependencies:
     minimist "^1.2.5"
 
+mkdirp@^1.0.3, mkdirp@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
+  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+
 mocha@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/mocha/-/mocha-5.2.0.tgz#6d8ae508f59167f940f2b5b3c4a612ae50c90ae6"
@@ -3284,6 +5492,11 @@ mocha@^5.2.0:
     mkdirp "0.5.1"
     supports-color "5.4.0"
 
+modify-values@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
+  integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
+
 mri@^1.1.0:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"
@@ -3304,26 +5517,47 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@^2.1.1:
+ms@^2.0.0, ms@^2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+multimatch@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-5.0.0.tgz#932b800963cea7a31a033328fa1e0c3a1874dbe6"
+  integrity sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==
+  dependencies:
+    "@types/minimatch" "^3.0.3"
+    array-differ "^3.0.0"
+    array-union "^2.1.0"
+    arrify "^2.0.1"
+    minimatch "^3.0.4"
+
 mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
   integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
 
+mute-stream@0.0.8, mute-stream@~0.0.4:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
+  integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-negotiator@0.6.2:
+negotiator@0.6.2, negotiator@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
   integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
 
+neo-async@^2.6.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -3334,11 +5568,79 @@ node-fetch@^2.6.1:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
 
+node-gyp@^5.0.2:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-5.1.1.tgz#eb915f7b631c937d282e33aed44cb7a025f62a3e"
+  integrity sha512-WH0WKGi+a4i4DUt2mHnvocex/xPLp9pYt5R6M2JdFB7pJ7Z34hveZ4nDTGTiLXCkitA9T8HFZjhinBCiVHYcWw==
+  dependencies:
+    env-paths "^2.2.0"
+    glob "^7.1.4"
+    graceful-fs "^4.2.2"
+    mkdirp "^0.5.1"
+    nopt "^4.0.1"
+    npmlog "^4.1.2"
+    request "^2.88.0"
+    rimraf "^2.6.3"
+    semver "^5.7.1"
+    tar "^4.4.12"
+    which "^1.3.1"
+
+node-gyp@^7.1.0:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-7.1.2.tgz#21a810aebb187120251c3bcec979af1587b188ae"
+  integrity sha512-CbpcIo7C3eMu3dL1c3d0xw449fHIGALIJsRP4DDPHpyiW8vcriNY7ubh9TE4zEKfSxscY7PjeFnshE7h75ynjQ==
+  dependencies:
+    env-paths "^2.2.0"
+    glob "^7.1.4"
+    graceful-fs "^4.2.3"
+    nopt "^5.0.0"
+    npmlog "^4.1.2"
+    request "^2.88.2"
+    rimraf "^3.0.2"
+    semver "^7.3.2"
+    tar "^6.0.2"
+    which "^2.0.2"
+
 node-releases@^1.1.71:
   version "1.1.73"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.73.tgz#dd4e81ddd5277ff846b80b52bb40c49edf7a7b20"
   integrity sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==
 
+nopt@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"
+  integrity sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==
+  dependencies:
+    abbrev "1"
+    osenv "^0.1.4"
+
+nopt@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
+  integrity sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==
+  dependencies:
+    abbrev "1"
+
+normalize-package-data@^2.0.0, normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
+  dependencies:
+    hosted-git-info "^2.1.4"
+    resolve "^1.10.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+
+normalize-package-data@^3.0.0, normalize-package-data@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-3.0.2.tgz#cae5c410ae2434f9a6c1baa65d5bc3b9366c8699"
+  integrity sha512-6CdZocmfGaKnIHPVFhJJZ3GuR8SsLKvDANFp47Jmy51aKIr8akjAWTSxtpI+MBgBFdSMRyo4hMpDlT6dTffgZg==
+  dependencies:
+    hosted-git-info "^4.0.1"
+    resolve "^1.20.0"
+    semver "^7.3.4"
+    validate-npm-package-license "^3.0.1"
+
 normalize-path@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
@@ -3356,6 +5658,99 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
+normalize-url@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
+  integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
+
+npm-bundled@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.2.tgz#944c78789bd739035b70baa2ca5cc32b8d860bc1"
+  integrity sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==
+  dependencies:
+    npm-normalize-package-bin "^1.0.1"
+
+npm-install-checks@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/npm-install-checks/-/npm-install-checks-4.0.0.tgz#a37facc763a2fde0497ef2c6d0ac7c3fbe00d7b4"
+  integrity sha512-09OmyDkNLYwqKPOnbI8exiOZU2GVVmQp7tgez2BPi5OZC8M82elDAps7sxC4l//uSUtotWqoEIDwjRvWH4qz8w==
+  dependencies:
+    semver "^7.1.1"
+
+npm-lifecycle@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/npm-lifecycle/-/npm-lifecycle-3.1.5.tgz#9882d3642b8c82c815782a12e6a1bfeed0026309"
+  integrity sha512-lDLVkjfZmvmfvpvBzA4vzee9cn+Me4orq0QF8glbswJVEbIcSNWib7qGOffolysc3teCqbbPZZkzbr3GQZTL1g==
+  dependencies:
+    byline "^5.0.0"
+    graceful-fs "^4.1.15"
+    node-gyp "^5.0.2"
+    resolve-from "^4.0.0"
+    slide "^1.1.6"
+    uid-number "0.0.6"
+    umask "^1.1.0"
+    which "^1.3.1"
+
+npm-normalize-package-bin@^1.0.0, npm-normalize-package-bin@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
+  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
+
+npm-package-arg@^8.0.0, npm-package-arg@^8.0.1, npm-package-arg@^8.1.0, npm-package-arg@^8.1.2:
+  version "8.1.5"
+  resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-8.1.5.tgz#3369b2d5fe8fdc674baa7f1786514ddc15466e44"
+  integrity sha512-LhgZrg0n0VgvzVdSm1oiZworPbTxYHUJCgtsJW8mGvlDpxTM1vSJc3m5QZeUkhAHIzbz3VCHd/R4osi1L1Tg/Q==
+  dependencies:
+    hosted-git-info "^4.0.1"
+    semver "^7.3.4"
+    validate-npm-package-name "^3.0.0"
+
+npm-packlist@^2.1.4:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-2.2.2.tgz#076b97293fa620f632833186a7a8f65aaa6148c8"
+  integrity sha512-Jt01acDvJRhJGthnUJVF/w6gumWOZxO7IkpY/lsX9//zqQgnF7OJaxgQXcerd4uQOLu7W5bkb4mChL9mdfm+Zg==
+  dependencies:
+    glob "^7.1.6"
+    ignore-walk "^3.0.3"
+    npm-bundled "^1.1.1"
+    npm-normalize-package-bin "^1.0.1"
+
+npm-pick-manifest@^6.0.0, npm-pick-manifest@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/npm-pick-manifest/-/npm-pick-manifest-6.1.1.tgz#7b5484ca2c908565f43b7f27644f36bb816f5148"
+  integrity sha512-dBsdBtORT84S8V8UTad1WlUyKIY9iMsAmqxHbLdeEeBNMLQDlDWWra3wYUx9EBEIiG/YwAy0XyNHDd2goAsfuA==
+  dependencies:
+    npm-install-checks "^4.0.0"
+    npm-normalize-package-bin "^1.0.1"
+    npm-package-arg "^8.1.2"
+    semver "^7.3.4"
+
+npm-registry-fetch@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/npm-registry-fetch/-/npm-registry-fetch-11.0.0.tgz#68c1bb810c46542760d62a6a965f85a702d43a76"
+  integrity sha512-jmlgSxoDNuhAtxUIG6pVwwtz840i994dL14FoNVZisrmZW5kWd63IUTNv1m/hyRSGSqWjCUp/YZlS1BJyNp9XA==
+  dependencies:
+    make-fetch-happen "^9.0.1"
+    minipass "^3.1.3"
+    minipass-fetch "^1.3.0"
+    minipass-json-stream "^1.0.1"
+    minizlib "^2.0.0"
+    npm-package-arg "^8.0.0"
+
+npm-registry-fetch@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/npm-registry-fetch/-/npm-registry-fetch-9.0.0.tgz#86f3feb4ce00313bc0b8f1f8f69daae6face1661"
+  integrity sha512-PuFYYtnQ8IyVl6ib9d3PepeehcUeHN9IO5N/iCRhyg9tStQcqGQBRVHmfmMWPDERU3KwZoHFvbJ4FPXPspvzbA==
+  dependencies:
+    "@npmcli/ci-detect" "^1.0.0"
+    lru-cache "^6.0.0"
+    make-fetch-happen "^8.0.9"
+    minipass "^3.1.3"
+    minipass-fetch "^1.3.0"
+    minipass-json-stream "^1.0.1"
+    minizlib "^2.0.0"
+    npm-package-arg "^8.0.0"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -3363,6 +5758,23 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
+npm-run-path@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.0"
+
+npmlog@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
 nth-check@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
@@ -3377,17 +5789,27 @@ nth-check@^2.0.0:
   dependencies:
     boolbase "^1.0.0"
 
+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
+
 nwsapi@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
   integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
 
-object-assign@^4.0.1:
+oauth-sign@~0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
+  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
+
+object-assign@^4.0.1, object-assign@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
 
-object-inspect@^1.10.3:
+object-inspect@^1.10.3, object-inspect@^1.9.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.11.0.tgz#9dceb146cedd4148a0d9e51ab88d34cf509922b1"
   integrity sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==
@@ -3407,7 +5829,7 @@ object.assign@^4.1.2:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
-object.getownpropertydescriptors@^2.1.0, object.getownpropertydescriptors@^2.1.1:
+object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.0, object.getownpropertydescriptors@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.2.tgz#1bd63aeacf0d5d2d2f31b5e393b03a7c601a23f7"
   integrity sha512-WtxeKSzfBjlzL+F9b7M7hewDzMwy+C8NRssHd1YrNlzHzIDrXcXiNOMrezdAEM4UXixgV+vvnyBeN7Rygl2ttQ==
@@ -3454,6 +5876,13 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+onetime@^5.1.0, onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
 optimist@~0.6.0:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
@@ -3491,16 +5920,36 @@ optionator@^0.9.1:
   resolved "https://registry.yarnpkg.com/opts/-/opts-2.0.2.tgz#a17e189fbbfee171da559edd8a42423bc5993ce1"
   integrity sha512-k41FwbcLnlgnFh69f4qdUfvDQ+5vaSDnVPFI/y5XuhKRq97EnVVneO9F1ESVCdiVu4fCS2L8usX3mU331hB7pg==
 
-os-tmpdir@~1.0.2:
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
+
+os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
+osenv@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
+  integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
   integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
 
+p-limit@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
+  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
+  dependencies:
+    p-try "^1.0.0"
+
 p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
@@ -3508,6 +5957,13 @@ p-limit@^2.2.0:
   dependencies:
     p-try "^2.0.0"
 
+p-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
+  dependencies:
+    p-limit "^1.1.0"
+
 p-locate@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
@@ -3515,7 +5971,24 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
-p-queue@^6.3.0:
+p-map-series@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-map-series/-/p-map-series-2.1.0.tgz#7560d4c452d9da0c07e692fdbfe6e2c81a2a91f2"
+  integrity sha512-RpYIIK1zXSNEOdwxcfe7FdvGcs7+y5n8rifMhMNWvaxRNMPINJHF5GDeuVxWqnfrcHPSCnp7Oo5yNXHId9Av2Q==
+
+p-map@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
+  integrity sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==
+  dependencies:
+    aggregate-error "^3.0.0"
+
+p-pipe@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-pipe/-/p-pipe-3.1.0.tgz#48b57c922aa2e1af6a6404cb7c6bf0eb9cc8e60e"
+  integrity sha512-08pj8ATpzMR0Y80x50yJHn37NF6vjrqHutASaX5LiH5npS9XPvrUmscd9MF5R4fuYRHOxQR1FfMIlF7AzwoPqw==
+
+p-queue@^6.3.0, p-queue@^6.6.2:
   version "6.6.2"
   resolved "https://registry.yarnpkg.com/p-queue/-/p-queue-6.6.2.tgz#2068a9dcf8e67dd0ec3e7a2bcb76810faa85e426"
   integrity sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==
@@ -3523,6 +5996,11 @@ p-queue@^6.3.0:
     eventemitter3 "^4.0.4"
     p-timeout "^3.2.0"
 
+p-reduce@^2.0.0, p-reduce@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-2.1.0.tgz#09408da49507c6c274faa31f28df334bc712b64a"
+  integrity sha512-2USApvnsutq8uoxZBGbbWM0JIYLiEMJ9RlaN7fAzVNb9OZN0SHjjTTfIcb667XynS5Y1VhwDJVDa72TnPzAYWw==
+
 p-timeout@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-3.2.0.tgz#c7e17abc971d2a7962ef83626b35d635acf23dfe"
@@ -3530,11 +6008,23 @@ p-timeout@^3.2.0:
   dependencies:
     p-finally "^1.0.0"
 
+p-try@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
+
 p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
+p-waterfall@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/p-waterfall/-/p-waterfall-2.1.1.tgz#63153a774f472ccdc4eb281cdb2967fcf158b2ee"
+  integrity sha512-RRTnDb2TBG/epPRI2yYXsimO0v3BXC8Yd3ogr1545IaqKK17VGhbWVeGGN+XfCm/08OK8635nH31c8bATkHuSw==
+  dependencies:
+    p-reduce "^2.0.0"
+
 package-json@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/package-json/-/package-json-4.0.1.tgz#8869a0401253661c4c4ca3da6c2121ed555f5eed"
@@ -3545,6 +6035,31 @@ package-json@^4.0.0:
     registry-url "^3.0.3"
     semver "^5.1.0"
 
+pacote@^11.2.6:
+  version "11.3.5"
+  resolved "https://registry.yarnpkg.com/pacote/-/pacote-11.3.5.tgz#73cf1fc3772b533f575e39efa96c50be8c3dc9d2"
+  integrity sha512-fT375Yczn4zi+6Hkk2TBe1x1sP8FgFsEIZ2/iWaXY2r/NkhDJfxbcn5paz1+RTFCyNf+dPnaoBDJoAxXSU8Bkg==
+  dependencies:
+    "@npmcli/git" "^2.1.0"
+    "@npmcli/installed-package-contents" "^1.0.6"
+    "@npmcli/promise-spawn" "^1.2.0"
+    "@npmcli/run-script" "^1.8.2"
+    cacache "^15.0.5"
+    chownr "^2.0.0"
+    fs-minipass "^2.1.0"
+    infer-owner "^1.0.4"
+    minipass "^3.1.3"
+    mkdirp "^1.0.3"
+    npm-package-arg "^8.0.1"
+    npm-packlist "^2.1.4"
+    npm-pick-manifest "^6.0.0"
+    npm-registry-fetch "^11.0.0"
+    promise-retry "^2.0.1"
+    read-package-json-fast "^2.0.1"
+    rimraf "^3.0.2"
+    ssri "^8.0.1"
+    tar "^6.1.0"
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -3570,6 +6085,36 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
+parse-json@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+parse-path@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/parse-path/-/parse-path-4.0.3.tgz#82d81ec3e071dcc4ab49aa9f2c9c0b8966bb22bf"
+  integrity sha512-9Cepbp2asKnWTJ9x2kpw6Fe8y9JDbqwahGCTvklzd/cEq5C5JC59x2Xb0Kx+x0QZ8bvNquGO8/BWP0cwBHzSAA==
+  dependencies:
+    is-ssh "^1.3.0"
+    protocols "^1.4.0"
+    qs "^6.9.4"
+    query-string "^6.13.8"
+
+parse-url@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/parse-url/-/parse-url-6.0.0.tgz#f5dd262a7de9ec00914939220410b66cff09107d"
+  integrity sha512-cYyojeX7yIIwuJzledIHeLUBVJ6COVLeT4eF+2P6aKVzwvgKQPndCBv3+yQ7pcWjqToYwaligxzSYNNmGoMAvw==
+  dependencies:
+    is-ssh "^1.3.0"
+    normalize-url "^6.1.0"
+    parse-path "^4.0.0"
+    protocols "^1.4.0"
+
 parse5-htmlparser2-tree-adapter@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
@@ -3587,6 +6132,11 @@ parseurl@~1.3.3:
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -3607,7 +6157,7 @@ path-key@^2.0.0, path-key@^2.0.1:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
   integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
 
-path-key@^3.1.0:
+path-key@^3.0.0, path-key@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
@@ -3622,6 +6172,18 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
+  dependencies:
+    pify "^3.0.0"
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
 pathval@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.1.tgz#8534e77a77ce7ac5a2512ea21e0fdb8fcf6c3d8d"
@@ -3632,7 +6194,12 @@ pend@~1.2.0:
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
   integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
 
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2:
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
+
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
   integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
@@ -3647,6 +6214,11 @@ pify@^3.0.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
   integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
 
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+
 pify@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-5.0.0.tgz#1f5eca3f5e87ebec28cc6d54a0e4aaf00acc127f"
@@ -4089,11 +6661,41 @@ progress@^2.0.0, progress@^2.0.1:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
+promise-inflight@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
+  integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
+
+promise-retry@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/promise-retry/-/promise-retry-2.0.1.tgz#ff747a13620ab57ba688f5fc67855410c370da22"
+  integrity sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==
+  dependencies:
+    err-code "^2.0.2"
+    retry "^0.12.0"
+
 promise.series@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/promise.series/-/promise.series-0.2.0.tgz#2cc7ebe959fc3a6619c04ab4dbdc9e452d864bbd"
   integrity sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=
 
+promzard@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/promzard/-/promzard-0.3.0.tgz#26a5d6ee8c7dee4cb12208305acfb93ba382a9ee"
+  integrity sha1-JqXW7ox97kyxIggwWs+5O6OCqe4=
+  dependencies:
+    read "1"
+
+proto-list@~1.2.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
+  integrity sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=
+
+protocols@^1.1.0, protocols@^1.4.0:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/protocols/-/protocols-1.4.8.tgz#48eea2d8f58d9644a4a32caae5d5db290a075ce8"
+  integrity sha512-IgjKyaUSjsROSO8/D49Ab7hP8mJgTYcqApOqdPhLoPxAplXmkp+zRvsrSQjFn5by0rhm4VH0GAUELIPpx7B1yg==
+
 proxy-addr@~2.0.5:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -4112,7 +6714,7 @@ pseudomap@^1.0.2:
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
   integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
 
-psl@^1.1.33:
+psl@^1.1.28, psl@^1.1.33:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
   integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
@@ -4162,7 +6764,7 @@ puppeteer@^9.1.1:
     unbzip2-stream "^1.3.3"
     ws "^7.2.3"
 
-q@^1.1.2:
+q@^1.1.2, q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
@@ -4172,6 +6774,38 @@ qs@6.7.0:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
   integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
+qs@^6.9.4:
+  version "6.10.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.1.tgz#4931482fa8d647a5aab799c5271d2133b981fb6a"
+  integrity sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==
+  dependencies:
+    side-channel "^1.0.4"
+
+qs@~6.5.2:
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
+  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
+
+query-string@^6.13.8:
+  version "6.14.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a"
+  integrity sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    filter-obj "^1.1.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+quick-lru@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
+  integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
+
 randomatic@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed"
@@ -4220,7 +6854,101 @@ read-cache@^1.0.0:
   dependencies:
     pify "^2.3.0"
 
-readable-stream@^2.0.1, readable-stream@^2.2.2:
+read-cmd-shim@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-2.0.0.tgz#4a50a71d6f0965364938e9038476f7eede3928d9"
+  integrity sha512-HJpV9bQpkl6KwjxlJcBoqu9Ba0PQg8TqSNIOrulGt54a0uup0HtevreFHzYzkm0lpnleRdNBzXznKrgxglEHQw==
+
+read-package-json-fast@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/read-package-json-fast/-/read-package-json-fast-2.0.3.tgz#323ca529630da82cb34b36cc0b996693c98c2b83"
+  integrity sha512-W/BKtbL+dUjTuRL2vziuYhp76s5HZ9qQhd/dKfWIZveD0O40453QNyZhC0e63lqZrAQ4jiOapVoeJ7JrszenQQ==
+  dependencies:
+    json-parse-even-better-errors "^2.3.0"
+    npm-normalize-package-bin "^1.0.1"
+
+read-package-json@^2.0.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/read-package-json/-/read-package-json-2.1.2.tgz#6992b2b66c7177259feb8eaac73c3acd28b9222a"
+  integrity sha512-D1KmuLQr6ZSJS0tW8hf3WGpRlwszJOXZ3E8Yd/DNRaM5d+1wVRZdHlpGBLAuovjr28LbWvjpWkBHMxpRGGjzNA==
+  dependencies:
+    glob "^7.1.1"
+    json-parse-even-better-errors "^2.3.0"
+    normalize-package-data "^2.0.0"
+    npm-normalize-package-bin "^1.0.0"
+
+read-package-json@^3.0.0, read-package-json@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/read-package-json/-/read-package-json-3.0.1.tgz#c7108f0b9390257b08c21e3004d2404c806744b9"
+  integrity sha512-aLcPqxovhJTVJcsnROuuzQvv6oziQx4zd3JvG0vGCL5MjTONUc4uJ90zCBC6R7W7oUKBNoR/F8pkyfVwlbxqng==
+  dependencies:
+    glob "^7.1.1"
+    json-parse-even-better-errors "^2.3.0"
+    normalize-package-data "^3.0.0"
+    npm-normalize-package-bin "^1.0.0"
+
+read-package-tree@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/read-package-tree/-/read-package-tree-5.3.1.tgz#a32cb64c7f31eb8a6f31ef06f9cedf74068fe636"
+  integrity sha512-mLUDsD5JVtlZxjSlPPx1RETkNjjvQYuweKwNVt1Sn8kP5Jh44pvYuUHCp6xSVDZWbNxVxG5lyZJ921aJH61sTw==
+  dependencies:
+    read-package-json "^2.0.0"
+    readdir-scoped-modules "^1.0.0"
+    util-promisify "^2.1.0"
+
+read-pkg-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
+  integrity sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^3.0.0"
+
+read-pkg-up@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
+  integrity sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==
+  dependencies:
+    find-up "^4.1.0"
+    read-pkg "^5.2.0"
+    type-fest "^0.8.1"
+
+read-pkg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
+  dependencies:
+    load-json-file "^4.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^3.0.0"
+
+read-pkg@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
+  integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
+  dependencies:
+    "@types/normalize-package-data" "^2.4.0"
+    normalize-package-data "^2.5.0"
+    parse-json "^5.0.0"
+    type-fest "^0.6.0"
+
+read@1, read@~1.0.1:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/read/-/read-1.0.7.tgz#b3da19bd052431a97671d44a42634adf710b40c4"
+  integrity sha1-s9oZvQUkMal2cdRKQmNK33ELQMQ=
+  dependencies:
+    mute-stream "~0.0.4"
+
+readable-stream@3, readable-stream@^3.0.0, readable-stream@^3.0.2, readable-stream@^3.1.1, readable-stream@^3.4.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
+  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readable-stream@^2.0.1, readable-stream@^2.0.6, readable-stream@^2.2.2, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -4233,14 +6961,15 @@ readable-stream@^2.0.1, readable-stream@^2.2.2:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@^3.1.1, readable-stream@^3.4.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
-  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+readdir-scoped-modules@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz#8d45407b4f870a0dcaebc0e28670d18e74514309"
+  integrity sha512-asaikDeqAQg7JifRsZn1NJZXo9E+VwlyCfbkZhwyISinqk5zNS6266HS5kah6P0SaQKGF6SkNnZVHUzHFYxYDw==
   dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
+    debuglog "^1.0.1"
+    dezalgo "^1.0.0"
+    graceful-fs "^4.1.2"
+    once "^1.3.0"
 
 readdirp@~3.6.0:
   version "3.6.0"
@@ -4256,6 +6985,14 @@ realpath-native@^1.0.0:
   dependencies:
     util.promisify "^1.0.0"
 
+redent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
+  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
+  dependencies:
+    indent-string "^4.0.0"
+    strip-indent "^3.0.0"
+
 regenerator-runtime@^0.11.0:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
@@ -4303,6 +7040,37 @@ repeat-string@^1.5.2:
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
 
+request@^2.88.0, request@^2.88.2:
+  version "2.88.2"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
+  integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
+    forever-agent "~0.6.1"
+    form-data "~2.3.2"
+    har-validator "~5.1.3"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
+    performance-now "^2.1.0"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.5.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.3.2"
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
+
 require-from-string@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
@@ -4313,6 +7081,13 @@ require-relative@^0.8.7:
   resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
   integrity sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=
 
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
 resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
@@ -4333,7 +7108,7 @@ resolve@1.1.7:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.14.1, resolve@^1.14.2, resolve@^1.16.1:
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.14.1, resolve@^1.14.2, resolve@^1.16.1, resolve@^1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -4349,6 +7124,24 @@ restore-cursor@^2.0.0:
     onetime "^2.0.0"
     signal-exit "^3.0.2"
 
+restore-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
+  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
+  dependencies:
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+
+retry@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
+  integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
 rgb-regex@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
@@ -4359,7 +7152,7 @@ rgba-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
-rimraf@^2.6.1:
+rimraf@^2.6.1, rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -4503,12 +7296,19 @@ rollup@^2.3.3, rollup@^2.45.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
-run-async@^2.2.0:
+run-async@^2.2.0, run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
   integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
 
-rxjs@^6.4.0:
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+rxjs@^6.4.0, rxjs@^6.6.0:
   version "6.6.7"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
   integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
@@ -4527,7 +7327,7 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
+safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@^5.2.1, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -4537,7 +7337,7 @@ safe-identifier@^0.4.1:
   resolved "https://registry.yarnpkg.com/safe-identifier/-/safe-identifier-0.4.2.tgz#cf6bfca31c2897c588092d1750d30ef501d59fcb"
   integrity sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w==
 
-"safer-buffer@>= 2.1.2 < 3":
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -4561,12 +7361,17 @@ semver-diff@^2.0.0:
   dependencies:
     semver "^5.0.3"
 
-semver@^5.0.3, semver@^5.1.0, semver@^5.5.0:
+"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.5.0, semver@^5.6.0, semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
-semver@^7.2.1, semver@^7.3.2:
+semver@^6.0.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+semver@^7.1.1, semver@^7.1.3, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
   version "7.3.5"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
   integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
@@ -4614,11 +7419,23 @@ serve-static@1.14.1:
     parseurl "~1.3.3"
     send "0.17.1"
 
+set-blocking@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
+
 setprototypeof@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
   integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
 
+shallow-clone@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
+  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
+  dependencies:
+    kind-of "^6.0.2"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -4643,7 +7460,16 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-signal-exit@^3.0.0, signal-exit@^3.0.2:
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
+signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
@@ -4681,6 +7507,11 @@ slash@^1.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
   integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
 
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
 slice-ansi@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
@@ -4690,6 +7521,47 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
+slide@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
+  integrity sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=
+
+smart-buffer@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
+  integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
+
+socks-proxy-agent@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-5.0.1.tgz#032fb583048a29ebffec2e6a73fca0761f48177e"
+  integrity sha512-vZdmnjb9a2Tz6WEQVIurybSwElwPxMZaIc7PzqbJTrezcKNznv6giT7J7tZDZ1BojVaa1jvO/UiUdhDVB0ACoQ==
+  dependencies:
+    agent-base "^6.0.2"
+    debug "4"
+    socks "^2.3.3"
+
+socks@^2.3.3:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/socks/-/socks-2.6.1.tgz#989e6534a07cf337deb1b1c94aaa44296520d30e"
+  integrity sha512-kLQ9N5ucj8uIcxrDwjm0Jsqk06xdpBjGNQtpXy4Q8/QY2k+fY7nZH8CARy+hkbG+SGAovmzzuauCpBlb8FrnBA==
+  dependencies:
+    ip "^1.1.5"
+    smart-buffer "^4.1.0"
+
+sort-keys@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128"
+  integrity sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=
+  dependencies:
+    is-plain-obj "^1.0.0"
+
+sort-keys@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-4.2.0.tgz#6b7638cee42c506fff8c1cecde7376d21315be18"
+  integrity sha512-aUYIEU/UviqPgc8mHR6IW1EGxkAXpeRETYcrzg8cLAvUPZcpAlleSXHV2mY7G12GphSH6Gzv+4MMVSSkbdteHg==
+  dependencies:
+    is-plain-obj "^2.0.0"
+
 source-map-support@^0.5.6, source-map-support@~0.5.10, source-map-support@~0.5.12, source-map-support@~0.5.19:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
@@ -4718,11 +7590,78 @@ sourcemap-codec@^1.4.4:
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
+spdx-correct@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.10.tgz#0d9becccde7003d6c658d487dd48a32f0bf3014b"
+  integrity sha512-oie3/+gKf7QtpitB0LYLETe+k8SifzsX4KixvpOsbI6S0kRiRQ5MKOio8eMSAKQ17N06+wdEOXRiId+zOxo0hA==
+
+split-on-first@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
+  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
+
+split2@^3.0.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/split2/-/split2-3.2.2.tgz#bf2cf2a37d838312c249c89206fd7a17dd12365f"
+  integrity sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==
+  dependencies:
+    readable-stream "^3.0.0"
+
+split@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
+  integrity sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==
+  dependencies:
+    through "2"
+
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
+sshpk@^1.7.0:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
+  integrity sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    bcrypt-pbkdf "^1.0.0"
+    dashdash "^1.12.0"
+    ecc-jsbn "~0.1.1"
+    getpass "^0.1.1"
+    jsbn "~0.1.0"
+    safer-buffer "^2.0.2"
+    tweetnacl "~0.14.0"
+
+ssri@^8.0.0, ssri@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-8.0.1.tgz#638e4e439e2ffbd2cd289776d5ca457c4f51a2af"
+  integrity sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==
+  dependencies:
+    minipass "^3.1.1"
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
@@ -4740,12 +7679,26 @@ stack-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
 
+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
+
 string-hash@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
   integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=
 
-string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
+string-width@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
   integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
@@ -4753,7 +7706,7 @@ string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string-width@^4.2.0:
+string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
   integrity sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==
@@ -4792,7 +7745,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-strip-ansi@^3.0.0:
+strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
   integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
@@ -4820,11 +7773,26 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
+
+strip-bom@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
+  integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
+
 strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
   integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=
 
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
 strip-indent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
@@ -4849,6 +7817,15 @@ strip-outer@^1.0.0:
   dependencies:
     escape-string-regexp "^1.0.2"
 
+strong-log-transformer@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz#0f5ed78d325e0421ac6f90f7f10e691d6ae3ae10"
+  integrity sha512-B3Hgul+z0L9a236FAUC9iZsL+nVHgoCJnqCbN588DjYxvGXaXaaFbfmQ/JhvKjZwsOukuR72XbHv71Qkug0HxA==
+  dependencies:
+    duplexer "^0.1.1"
+    minimist "^1.2.0"
+    through "^2.3.4"
+
 style-inject@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/style-inject/-/style-inject-0.3.0.tgz#d21c477affec91811cc82355832a700d22bf8dd3"
@@ -4990,6 +7967,47 @@ tar-stream@^2.1.4:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
+tar@^4.4.12:
+  version "4.4.17"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.17.tgz#44be5e3fa8353ee1d11db3b1401561223a5c3985"
+  integrity sha512-q7OwXq6NTdcYIa+k58nEMV3j1euhDhGCs/VRw9ymx/PbH0jtIM2+VTgDE/BW3rbLkrBUXs5fzEKgic5oUciu7g==
+  dependencies:
+    chownr "^1.1.4"
+    fs-minipass "^1.2.7"
+    minipass "^2.9.0"
+    minizlib "^1.3.3"
+    mkdirp "^0.5.5"
+    safe-buffer "^5.2.1"
+    yallist "^3.1.1"
+
+tar@^6.0.2, tar@^6.1.0:
+  version "6.1.8"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.8.tgz#4fc50cfe56511c538ce15b71e05eebe66530cbd4"
+  integrity sha512-sb9b0cp855NbkMJcskdSYA7b11Q8JsX4qe4pyUAfHp+Y6jBjJeek2ZVlwEfWayshEIwlIzXx0Fain3QG9JPm2A==
+  dependencies:
+    chownr "^2.0.0"
+    fs-minipass "^2.0.0"
+    minipass "^3.0.0"
+    minizlib "^2.1.1"
+    mkdirp "^1.0.3"
+    yallist "^4.0.0"
+
+temp-dir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"
+  integrity sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=
+
+temp-write@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/temp-write/-/temp-write-4.0.0.tgz#cd2e0825fc826ae72d201dc26eef3bf7e6fc9320"
+  integrity sha512-HIeWmj77uOOHb0QX7siN3OtwV3CTntquin6TNVg6SHOqCP3hYKmox90eeFOGaY1MqJ9WYDDjkyZrW6qS5AWpbw==
+  dependencies:
+    graceful-fs "^4.1.15"
+    is-stream "^2.0.0"
+    make-dir "^3.0.0"
+    temp-dir "^1.0.0"
+    uuid "^3.3.2"
+
 term-size@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
@@ -5024,12 +8042,32 @@ terser@^5.0.0:
     source-map "~0.7.2"
     source-map-support "~0.5.19"
 
+text-extensions@^1.0.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-1.9.0.tgz#1853e45fee39c945ce6f6c36b2d659b5aabc2a26"
+  integrity sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-through@^2.3.6, through@^2.3.8:
+through2@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
+  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
+  dependencies:
+    readable-stream "~2.3.6"
+    xtend "~4.0.1"
+
+through2@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-4.0.2.tgz#a7ce3ac2a7a8b0b966c80e7c49f0484c3b239764"
+  integrity sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==
+  dependencies:
+    readable-stream "3"
+
+through@2, "through@>=2.2.7 <3", through@^2.3.4, through@^2.3.6, through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
@@ -5082,6 +8120,14 @@ tough-cookie@^4.0.0:
     punycode "^2.1.1"
     universalify "^0.1.2"
 
+tough-cookie@~2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
+  integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
+  dependencies:
+    psl "^1.1.28"
+    punycode "^2.1.1"
+
 tr46@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.1.0.tgz#fa87aa81ca5d5941da8cbf1f9b749dc969a4e240"
@@ -5089,6 +8135,16 @@ tr46@^2.1.0:
   dependencies:
     punycode "^2.1.1"
 
+trim-newlines@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144"
+  integrity sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==
+
+trim-off-newlines@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3"
+  integrity sha1-n5up2e+odkw4dpi8v+sshI8RrbM=
+
 trim-repeated@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-repeated/-/trim-repeated-1.0.0.tgz#e3646a2ea4e891312bf7eace6cfb05380bc01c21"
@@ -5147,6 +8203,18 @@ tsutils@^3.17.1:
   dependencies:
     tslib "^1.8.1"
 
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  integrity sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=
+  dependencies:
+    safe-buffer "^5.0.1"
+
+tweetnacl@^0.14.3, tweetnacl@~0.14.0:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+  integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -5166,11 +8234,41 @@ type-detect@^4.0.0, type-detect@^4.0.5:
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
 
+type-fest@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934"
+  integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==
+
+type-fest@^0.18.0:
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.18.1.tgz#db4bc151a4a2cf4eebf9add5db75508db6cc841f"
+  integrity sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==
+
 type-fest@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
+type-fest@^0.21.3:
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+
+type-fest@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.4.1.tgz#8bdf77743385d8a4f13ba95f610f5ccd68c728f8"
+  integrity sha512-IwzA/LSfD2vC1/YDYMv/zHP4rDF1usCwllsDpbolT3D4fUepIO7f9K70jjmUewU/LmGUKJcwcVtDCpnKk4BPMw==
+
+type-fest@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
+  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
+
+type-fest@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
+  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
+
 type-is@~1.6.17, type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
@@ -5179,6 +8277,13 @@ type-is@~1.6.17, type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+typedarray-to-buffer@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
+  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
+  dependencies:
+    is-typedarray "^1.0.0"
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -5194,6 +8299,21 @@ typescript@^3.4.1, typescript@^3.9.5, typescript@^3.9.7:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8"
   integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==
 
+uglify-js@^3.1.4:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.14.1.tgz#e2cb9fe34db9cb4cf7e35d1d26dfea28e09a7d06"
+  integrity sha512-JhS3hmcVaXlp/xSo3PKY5R0JqKs5M3IV+exdLHW99qKvKivPO4Z8qbej6mte17SOPqAOVMjt/XGgWacnFSzM3g==
+
+uid-number@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+  integrity sha1-DqEOgDXo61uOREnwbaHHMGY7qoE=
+
+umask@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/umask/-/umask-1.1.0.tgz#f29cebf01df517912bb58ff9c4e50fde8e33320d"
+  integrity sha1-8pzr8B31F5ErtY/5xOUP3o4zMg0=
+
 unbox-primitive@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
@@ -5222,6 +8342,20 @@ uniqs@^2.0.0:
   resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
   integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI=
 
+unique-filename@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
+  integrity sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==
+  dependencies:
+    unique-slug "^2.0.0"
+
+unique-slug@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.2.tgz#baabce91083fc64e945b0f3ad613e264f7cd4e6c"
+  integrity sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==
+  dependencies:
+    imurmurhash "^0.1.4"
+
 unique-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-1.0.0.tgz#9e1057cca851abb93398f8b33ae187b99caec11a"
@@ -5229,11 +8363,21 @@ unique-string@^1.0.0:
   dependencies:
     crypto-random-string "^1.0.0"
 
+universal-user-agent@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-6.0.0.tgz#3381f8503b251c0d9cd21bc1de939ec9df5480ee"
+  integrity sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==
+
 universalify@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
   integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
 
+universalify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
+  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
+
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -5249,6 +8393,11 @@ unzip-response@^2.0.1:
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
   integrity sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c=
 
+upath@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-2.0.1.tgz#50c73dea68d6f6b990f51d279ce6081665d61a8b"
+  integrity sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==
+
 update-notifier@^2.0.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.5.0.tgz#d0744593e13f161e406acb1d9408b72cad08aff6"
@@ -5284,6 +8433,13 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
+util-promisify@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/util-promisify/-/util-promisify-2.1.0.tgz#3c2236476c4d32c5ff3c47002add7c13b9a82a53"
+  integrity sha1-PCI2R2xNMsX/PEcAKt18E7moKlM=
+  dependencies:
+    object.getownpropertydescriptors "^2.0.3"
+
 util.promisify@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.1.1.tgz#77832f57ced2c9478174149cae9b96e9918cd54b"
@@ -5310,11 +8466,31 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
+uuid@^3.3.2:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
+  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
+
 v8-compile-cache@^2.0.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
   integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
 
+validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+  dependencies:
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
+
+validate-npm-package-name@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz#5fa912d81eb7d0c74afc140de7317f0ca7df437e"
+  integrity sha1-X6kS2B630MdK/BQN5zF/DKffQ34=
+  dependencies:
+    builtins "^1.0.3"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -5325,6 +8501,15 @@ vendors@^1.0.0:
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
   integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
 
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  integrity sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
@@ -5339,6 +8524,13 @@ w3c-xmlserializer@^2.0.0:
   dependencies:
     xml-name-validator "^3.0.0"
 
+wcwidth@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
+  integrity sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=
+  dependencies:
+    defaults "^1.0.3"
+
 webidl-conversions@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
@@ -5361,7 +8553,7 @@ whatwg-mimetype@^2.3.0:
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
   integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
 
-whatwg-url@^8.0.0, whatwg-url@^8.5.0:
+whatwg-url@^8.0.0, whatwg-url@^8.4.0, whatwg-url@^8.5.0:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.7.0.tgz#656a78e510ff8f3937bc0bcbe9f5c0ac35941b77"
   integrity sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==
@@ -5381,20 +8573,27 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
-which@^1.2.9:
+which@^1.2.9, which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
   dependencies:
     isexe "^2.0.0"
 
-which@^2.0.1:
+which@^2.0.1, which@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
   integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
   dependencies:
     isexe "^2.0.0"
 
+wide-align@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
+  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
+  dependencies:
+    string-width "^1.0.2 || 2"
+
 widest-line@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-2.0.1.tgz#7438764730ec7ef4381ce4df82fb98a53142a3fc"
@@ -5407,17 +8606,31 @@ word-wrap@^1.2.3, word-wrap@~1.2.3:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
+wordwrap@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
+
 wordwrap@~0.0.2:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
   integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-write-file-atomic@^2.0.0:
+write-file-atomic@^2.0.0, write-file-atomic@^2.4.2:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.3.tgz#1fd2e9ae1df3e75b8d8c367443c692d4ca81f481"
   integrity sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==
@@ -5426,6 +8639,49 @@ write-file-atomic@^2.0.0:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.2"
 
+write-file-atomic@^3.0.0, write-file-atomic@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
+  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
+  dependencies:
+    imurmurhash "^0.1.4"
+    is-typedarray "^1.0.0"
+    signal-exit "^3.0.2"
+    typedarray-to-buffer "^3.1.5"
+
+write-json-file@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/write-json-file/-/write-json-file-3.2.0.tgz#65bbdc9ecd8a1458e15952770ccbadfcff5fe62a"
+  integrity sha512-3xZqT7Byc2uORAatYiP3DHUUAVEkNOswEWNs9H5KXiicRTvzYzYqKjYc4G7p+8pltvAw641lVByKVtMpf+4sYQ==
+  dependencies:
+    detect-indent "^5.0.0"
+    graceful-fs "^4.1.15"
+    make-dir "^2.1.0"
+    pify "^4.0.1"
+    sort-keys "^2.0.0"
+    write-file-atomic "^2.4.2"
+
+write-json-file@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/write-json-file/-/write-json-file-4.3.0.tgz#908493d6fd23225344af324016e4ca8f702dd12d"
+  integrity sha512-PxiShnxf0IlnQuMYOPPhPkhExoCQuTUNPOa/2JWCYTmBquU9njyyDuwRKN26IZBlp4yn1nt+Agh2HOOBl+55HQ==
+  dependencies:
+    detect-indent "^6.0.0"
+    graceful-fs "^4.1.15"
+    is-plain-obj "^2.0.0"
+    make-dir "^3.0.0"
+    sort-keys "^4.0.0"
+    write-file-atomic "^3.0.0"
+
+write-pkg@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/write-pkg/-/write-pkg-4.0.0.tgz#675cc04ef6c11faacbbc7771b24c0abbf2a20039"
+  integrity sha512-v2UQ+50TNf2rNHJ8NyWttfm/EJUBWMJcx6ZTYZr6Qp52uuegWw/lBkCtCbnYZEmPRNL61m+u67dAmGxo+HTULA==
+  dependencies:
+    sort-keys "^2.0.0"
+    type-fest "^0.4.1"
+    write-json-file "^3.2.0"
+
 ws@^6.1.0:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"
@@ -5453,16 +8709,67 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xtend@~4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
 yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
   integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
 
+yallist@^3.0.0, yallist@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
+yaml@^1.10.0:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+yargs-parser@20.2.4:
+  version "20.2.4"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
+  integrity sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==
+
+yargs-parser@^18.1.3:
+  version "18.1.3"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
+  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs-parser@^20.2.2, yargs-parser@^20.2.3:
+  version "20.2.9"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
+  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
+
+yargs@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
+  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"

From 8d881b178354db15913663a0d4b6fc7d2c9b62a2 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 15 Aug 2021 15:13:46 +0800
Subject: [PATCH 423/524] chore(release): publish %s

 - rrweb@1.0.3
 - rrweb-player@0.7.5
 - rrweb-snapshot@1.1.8
---
 packages/rrweb-player/package.json   | 4 ++--
 packages/rrweb-snapshot/package.json | 2 +-
 packages/rrweb/package.json          | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
index a58b074f6f..15d07f4373 100644
--- a/packages/rrweb-player/package.json
+++ b/packages/rrweb-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^1.0.2"
+    "rrweb": "^1.0.3"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
index 13290cbc60..0d7208a08b 100644
--- a/packages/rrweb-snapshot/package.json
+++ b/packages/rrweb-snapshot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index b708dc30c6..9d758aa6e3 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",
@@ -75,6 +75,6 @@
     "@xstate/fsm": "^1.4.0",
     "fflate": "^0.4.4",
     "mitt": "^1.1.3",
-    "rrweb-snapshot": "^1.1.7"
+    "rrweb-snapshot": "^1.1.8"
   }
 }

From e6f181014411fda4b93454a319541aca3dbe7530 Mon Sep 17 00:00:00 2001
From: yz-yu <yanzhen@smartx.com>
Date: Sun, 15 Aug 2021 15:48:17 +0800
Subject: [PATCH 424/524] Record and replay nested stylesheet rules (#666)

* fix typo

* record nested style rules

* Replay nested style rules

* handle index array in replayer

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
---
 docs/observer.md                              |  14 +-
 packages/rrweb/package.json                   |   2 +-
 packages/rrweb/src/record/observer.ts         |  54 +++++++
 packages/rrweb/src/replay/index.ts            |  34 ++++-
 packages/rrweb/src/replay/virtual-styles.ts   |  44 +++++-
 packages/rrweb/src/types.ts                   |   6 +-
 .../test/__snapshots__/record.test.ts.snap    | 142 ++++++++++++++++++
 packages/rrweb/test/record.test.ts            |  46 ++++++
 .../rrweb/test/replay/virtual-styles.test.ts  |  57 ++++++-
 yarn.lock                                     |  73 ++++++++-
 10 files changed, 452 insertions(+), 20 deletions(-)

diff --git a/docs/observer.md b/docs/observer.md
index 20417b42c6..aed6cf4ee2 100644
--- a/docs/observer.md
+++ b/docs/observer.md
@@ -1,4 +1,5 @@
 # Incremental snapshots
+
 After completing a full snapshot, we need to record events that change the state.
 
 Right now, rrweb records the following events (we will expand upon this):
@@ -18,9 +19,11 @@ Right now, rrweb records the following events (we will expand upon this):
 - Input
 
 ## Mutation Observer
+
 Since we don't execute any JavaScript during replay, we instead need to record all changes scripts make to the document.
 
 Consider this example:
+
 > User clicks a button. A dropdown menu appears. User selects the first item. The dropdown menu disappears.
 
 During replay, the dropdown menu does not automatically appear after the "click button" is executed, because the original JavaScript is not part of the recording. Thus, we need to record the creation of the dropdown menu DOM nodes, the selection of the first item, and subsequent deletion of the dropdown menu DOM nodes. This is the most difficult part.
@@ -33,9 +36,10 @@ The first thing to understand is that MutationObserver uses a **Bulk Asynchronou
 
 This mechanism is not problematic for normal use, because we do not only have the mutation record, but we can also directly access the DOM object of the mutated node as well as any parent, child and sibling nodes.
 
-However in rrweb, since we have a serialization process, we need more sophisticated soluation to be able to deal with various scenarios.
+However in rrweb, since we have a serialization process, we need more sophisticated solution to be able to deal with various scenarios.
 
 ### Add node
+
 For example, the following two operations generate the same DOM structure, but produce a different set of mutation records:
 
 ```
@@ -63,32 +67,40 @@ We already introduced in the [serialization design document](./serialization.md)
 As you can see, since we have delayed serialization of the newly added nodes, all mutation records also need to be processed first, and only then the new nodes can be de-duplicated without causing trouble.
 
 ### Remove node
+
 When processing mutation records, we may encounter a removed node that has not yet been serialized. That indicates that it is a newly added node, and the "add node" mutation record is also somewhere in the mutation records we received. We label these nodes as "dropped nodes".
 
 There are two cases we need to handle here:
+
 1. Since the node was removed already, there is no need to replay it, and thus we remove it from the newly added node pool.
 2. This also applies to descendants of the dropped node, thus when processing newly added nodes we need to check if it has a dropped node as an ancestor.
 
 ### Attribute change
+
 Although MutationObserver is an asynchronous batch callback, we can still assume that the time interval between mutations occurring in a callback is extremely short, so we can optimize the size of the incremental snapshot by overwriting some data when recording the DOM property changes.
 
 For example, resizing a `<textarea>` will trigger a large number of mutation records with varying width and height properties. While a full record will make replay more realistic, it can also result in a large increase in the number of incremental snapshots. After making a trade-off, we think that only the final value of an attribute of the same node needs to be recorded in a single mutation callback, that is, each subsequent mutation record will overwrite the attribute change part of the mutation record that existing before the write.
 
 ## Mouse movement
+
 By recording the mouse movement position, we can simulate the mouse movement trajectory during replay.
 
 Try to ensure that the mouse moves smoothly during replay and also minimize the number of corresponding incremental snapshots, so we need to perform two layers of throttling while listening to mousemove. The first layer records the mouse coordinates at most once every 20 ms, the second layer transmits the mouse coordinate set at most once every 500 ms to ensure a single snapshot doesn't accumulate a lot of mouse position data and becomes too large.
 
 ### Time reversal
+
 We record a timestamp when each incremental snapshot is generated so that during replay it can be applied at the correct time. However, due to the effect of throttling, the timestamps of the mouse movement corresponding to the incremental snapshot will be later than the actual recording time, so we need to record a negative time difference for correction and time calibration during replay.
 
 ## Input
+
 We need to observe the input of the three elements `<input>`, `<textarea>`, `<select>`, including human input and programmatic changes.
 
 ### Human input
+
 For human input, we mainly rely on listening to the input and change events. It is necessary to deduplicate different events triggered for the same the human input action. In addition, `<input type="radio" />` is also a special kind of control. If the multiple radio elements have the same name attribute, then when one is selected, the others will be reversed, but no event will be triggered on those others, so this needs to be handled separately.
 
 ### Programmatic changes
+
 Setting the properties of these elements directly through the code will not trigger the MutationObserver. We can still achieve monitoring by hijacking the setter of the corresponding property. The sample code is as follows:
 
 ```typescript
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 9d758aa6e3..bdb87e22ec 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -53,7 +53,7 @@
     "ignore-styles": "^5.0.1",
     "inquirer": "^6.2.1",
     "jest-snapshot": "^23.6.0",
-    "jsdom": "^16.6.0",
+    "jsdom": "^17.0.0",
     "jsdom-global": "^3.0.2",
     "mocha": "^5.2.0",
     "prettier": "2.2.1",
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index 57fa0463e1..9281c63c8c 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -472,6 +472,23 @@ function initInputObserver(
   };
 }
 
+function getNestedCSSRulePositions(rule: CSSStyleRule): number[] {
+  const positions: Array<number> = [];
+  function recurse(rule: CSSRule, pos: number[]) {
+    if (rule.parentRule instanceof CSSGroupingRule) {
+      const rules = Array.from((rule.parentRule as CSSGroupingRule).cssRules);
+      const index = rules.indexOf(rule);
+      pos.unshift(index);
+    } else {
+      const rules = Array.from(rule.parentStyleSheet!.cssRules);
+      const index = rules.indexOf(rule);
+      pos.unshift(index);
+    }
+    return pos;
+  }
+  return recurse(rule, positions);
+}
+
 function initStyleSheetObserver(
   cb: styleSheetRuleCallback,
   mirror: Mirror,
@@ -500,9 +517,46 @@ function initStyleSheetObserver(
     return deleteRule.apply(this, arguments);
   };
 
+  const groupingInsertRule = CSSGroupingRule.prototype.insertRule;
+  CSSGroupingRule.prototype.insertRule = function (
+    rule: string,
+    index?: number,
+  ) {
+    const id = mirror.getId(this.parentStyleSheet.ownerNode as INode);
+    if (id !== -1) {
+      cb({
+        id,
+        adds: [
+          {
+            rule,
+            index: [
+              ...getNestedCSSRulePositions(this),
+              index || 0, // defaults to 0
+            ],
+          },
+        ],
+      });
+    }
+    return groupingInsertRule.apply(this, arguments);
+  };
+
+  const groupingDeleteRule = CSSGroupingRule.prototype.deleteRule;
+  CSSGroupingRule.prototype.deleteRule = function (index: number) {
+    const id = mirror.getId(this.parentStyleSheet.ownerNode as INode);
+    if (id !== -1) {
+      cb({
+        id,
+        removes: [{ index: [...getNestedCSSRulePositions(this), index] }],
+      });
+    }
+    return groupingDeleteRule.apply(this, arguments);
+  };
+
   return () => {
     CSSStyleSheet.prototype.insertRule = insertRule;
     CSSStyleSheet.prototype.deleteRule = deleteRule;
+    CSSGroupingRule.prototype.insertRule = groupingInsertRule;
+    CSSGroupingRule.prototype.deleteRule = groupingDeleteRule;
   };
 }
 
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 9b49eba4ad..6d822569b6 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -57,6 +57,7 @@ import {
   StyleRuleType,
   VirtualStyleRules,
   VirtualStyleRulesMap,
+  getNestedRule,
 } from './virtual-styles';
 
 const SKIP_TIME_THRESHOLD = 10 * 1000;
@@ -978,19 +979,26 @@ export class Replayer {
           d.adds.forEach(({ rule, index }) => {
             if (styleSheet) {
               try {
-                const _index =
+                if (Array.isArray(index)) {
+                  const positions = [...index];
+                  const insertAt = positions.pop();
+                  const nestedRule = getNestedRule(
+                    styleSheet.cssRules,
+                    positions,
+                  );
+                  nestedRule.insertRule(rule, insertAt);
+                } else {
+                  const _index =
                   index === undefined
                     ? undefined
                     : Math.min(index, styleSheet.cssRules.length);
-                try {
                   styleSheet.insertRule(rule, _index);
-                } catch (e) {
-                  /**
-                   * sometimes we may capture rules with browser prefix
-                   * insert rule with prefixs in other browsers may cause Error
-                   */
                 }
               } catch (e) {
+                /**
+                 * sometimes we may capture rules with browser prefix
+                 * insert rule with prefixs in other browsers may cause Error
+                 */
                 /**
                  * accessing styleSheet rules may cause SecurityError
                  * for specific access control settings
@@ -1008,7 +1016,17 @@ export class Replayer {
               rules?.push({ index, type: StyleRuleType.Remove });
             } else {
               try {
-                styleSheet?.deleteRule(index);
+                if (Array.isArray(index)) {
+                  const positions = [...index];
+                  const deleteAt = positions.pop();
+                  const nestedRule = getNestedRule(
+                    styleSheet!.cssRules,
+                    positions,
+                  );
+                  nestedRule.deleteRule(deleteAt || 0);
+                } else {
+                  styleSheet?.deleteRule(index);
+                }
               } catch (e) {
                 /**
                  * same as insertRule
diff --git a/packages/rrweb/src/replay/virtual-styles.ts b/packages/rrweb/src/replay/virtual-styles.ts
index 43c48be914..e9086eedd6 100644
--- a/packages/rrweb/src/replay/virtual-styles.ts
+++ b/packages/rrweb/src/replay/virtual-styles.ts
@@ -9,11 +9,11 @@ export enum StyleRuleType {
 type InsertRule = {
   cssText: string;
   type: StyleRuleType.Insert;
-  index?: number;
+  index?: number | number[];
 };
 type RemoveRule = {
   type: StyleRuleType.Remove;
-  index: number;
+  index: number | number[];
 };
 type SnapshotRule = {
   type: StyleRuleType.Snapshot;
@@ -23,6 +23,22 @@ type SnapshotRule = {
 export type VirtualStyleRules = Array<InsertRule | RemoveRule | SnapshotRule>;
 export type VirtualStyleRulesMap = Map<INode, VirtualStyleRules>;
 
+export function getNestedRule(
+  rules: CSSRuleList,
+  position: number[],
+): CSSGroupingRule {
+  const rule = rules[position[0]] as CSSGroupingRule;
+  if (position.length === 1) {
+    return rule;
+  } else {
+    return getNestedRule(
+      ((rule as CSSGroupingRule).cssRules[position[1]] as CSSGroupingRule)
+        .cssRules,
+      position.slice(2),
+    );
+  }
+}
+
 export function applyVirtualStyleRulesToNode(
   storedRules: VirtualStyleRules,
   styleNode: HTMLStyleElement,
@@ -30,7 +46,17 @@ export function applyVirtualStyleRulesToNode(
   storedRules.forEach((rule) => {
     if (rule.type === StyleRuleType.Insert) {
       try {
-        styleNode.sheet?.insertRule(rule.cssText, rule.index);
+        if (Array.isArray(rule.index)) {
+          const positions = [...rule.index];
+          const insertAt = positions.pop();
+          const nestedRule = getNestedRule(
+            styleNode.sheet!.cssRules,
+            positions,
+          );
+          nestedRule.insertRule(rule.cssText, insertAt);
+        } else {
+          styleNode.sheet?.insertRule(rule.cssText, rule.index);
+        }
       } catch (e) {
         /**
          * sometimes we may capture rules with browser prefix
@@ -39,7 +65,17 @@ export function applyVirtualStyleRulesToNode(
       }
     } else if (rule.type === StyleRuleType.Remove) {
       try {
-        styleNode.sheet?.deleteRule(rule.index);
+        if (Array.isArray(rule.index)) {
+          const positions = [...rule.index];
+          const deleteAt = positions.pop();
+          const nestedRule = getNestedRule(
+            styleNode.sheet!.cssRules,
+            positions,
+          );
+          nestedRule.deleteRule(deleteAt || 0);
+        } else {
+          styleNode.sheet?.deleteRule(rule.index);
+        }
       } catch (e) {
         /**
          * accessing styleSheet rules may cause SecurityError
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index 463f9293a4..a79e701f7d 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -295,7 +295,7 @@ export type textMutation = {
 };
 
 export type styleAttributeValue = {
-  [key:string]: styleValueWithPriority | string | false;
+  [key: string]: styleValueWithPriority | string | false;
 };
 
 export type styleValueWithPriority = [string, string];
@@ -384,11 +384,11 @@ export type scrollCallback = (p: scrollPosition) => void;
 
 export type styleSheetAddRule = {
   rule: string;
-  index?: number;
+  index?: number | number[];
 };
 
 export type styleSheetDeleteRule = {
-  index: number;
+  index: number | number[];
 };
 
 export type styleSheetRuleParam = {
diff --git a/packages/rrweb/test/__snapshots__/record.test.ts.snap b/packages/rrweb/test/__snapshots__/record.test.ts.snap
index f2278deda4..4845431bd9 100644
--- a/packages/rrweb/test/__snapshots__/record.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/record.test.ts.snap
@@ -329,6 +329,148 @@ exports[`custom-event 1`] = `
 ]"
 `;
 
+exports[`nested-stylesheet-rules 1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 3
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 5
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"input\\",
+                    \\"attributes\\": {
+                      \\"type\\": \\"text\\",
+                      \\"size\\": \\"40\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
+                    \\"id\\": 7
+                  }
+                ],
+                \\"id\\": 4
+              }
+            ],
+            \\"id\\": 2
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 3,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"style\\",
+            \\"attributes\\": {
+              \\"_cssText\\": \\"@media  {\\\\n  body { background: rgb(0, 0, 0); }\\\\n}\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 8
+          }
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 8,
+      \\"id\\": 8,
+      \\"adds\\": [
+        {
+          \\"rule\\": \\"body { color: #fff; }\\",
+          \\"index\\": [
+            0,
+            0
+          ]
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 8,
+      \\"id\\": 8,
+      \\"removes\\": [
+        {
+          \\"index\\": [
+            0,
+            0
+          ]
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 8,
+      \\"id\\": 8,
+      \\"adds\\": [
+        {
+          \\"rule\\": \\"body { color: #ccc; }\\",
+          \\"index\\": [
+            0,
+            0
+          ]
+        }
+      ]
+    }
+  }
+]"
+`;
+
 exports[`stylesheet-rules 1`] = `
 "[
   {
diff --git a/packages/rrweb/test/record.test.ts b/packages/rrweb/test/record.test.ts
index fd78052e4c..8dbbe5a7f0 100644
--- a/packages/rrweb/test/record.test.ts
+++ b/packages/rrweb/test/record.test.ts
@@ -250,6 +250,52 @@ describe('record', function (this: ISuite) {
     expect(removeRuleCount).to.equal(1);
     assertSnapshot(this.events, __filename, 'stylesheet-rules');
   });
+
+  it('captures nested stylesheet rules', async () => {
+    await this.page.evaluate(() => {
+      const { record } = ((window as unknown) as IWindow).rrweb;
+
+      record({
+        emit: ((window as unknown) as IWindow).emit,
+      });
+
+      const styleElement = document.createElement('style');
+      document.head.appendChild(styleElement);
+
+      const styleSheet = <CSSStyleSheet>styleElement.sheet;
+      styleSheet.insertRule('@media {}');
+      const atMediaRule = styleSheet.cssRules[0] as CSSMediaRule;
+
+      const ruleIdx0 = atMediaRule.insertRule('body { background: #000; }', 0);
+      const ruleIdx1 = atMediaRule.insertRule('body { background: #111; }', 0);
+      atMediaRule.deleteRule(ruleIdx1);
+      setTimeout(() => {
+        atMediaRule.insertRule('body { color: #fff; }', 0);
+      }, 0);
+      setTimeout(() => {
+        atMediaRule.deleteRule(ruleIdx0);
+      }, 5);
+      setTimeout(() => {
+        atMediaRule.insertRule('body { color: #ccc; }', 0);
+      }, 10);
+    });
+    await this.page.waitForTimeout(50);
+    const styleSheetRuleEvents = this.events.filter(
+      (e) =>
+        e.type === EventType.IncrementalSnapshot &&
+        e.data.source === IncrementalSource.StyleSheetRule,
+    );
+    const addRuleCount = styleSheetRuleEvents.filter((e) =>
+      Boolean((e.data as styleSheetRuleData).adds),
+    ).length;
+    const removeRuleCount = styleSheetRuleEvents.filter((e) =>
+      Boolean((e.data as styleSheetRuleData).removes),
+    ).length;
+    // sync insert/delete should be ignored
+    expect(addRuleCount).to.equal(2);
+    expect(removeRuleCount).to.equal(1);
+    assertSnapshot(this.events, __filename, 'nested-stylesheet-rules');
+  });
 });
 
 describe('record iframes', function (this: ISuite) {
diff --git a/packages/rrweb/test/replay/virtual-styles.test.ts b/packages/rrweb/test/replay/virtual-styles.test.ts
index ef2524033e..ba82bc4397 100644
--- a/packages/rrweb/test/replay/virtual-styles.test.ts
+++ b/packages/rrweb/test/replay/virtual-styles.test.ts
@@ -44,7 +44,7 @@ describe('virtual styles', () => {
       expect(styleEl.sheet?.cssRules[0].cssText).to.equal(cssText);
     });
 
-    it('should delete rule at index 1', () => {
+    it('should delete rule at index 0', () => {
       const dom = new JSDOM(`
         <style>
           a {color: blue;}
@@ -109,5 +109,60 @@ describe('virtual styles', () => {
         Array.from(styleEl.sheet?.cssRules || []).map((rule) => rule.cssText),
       ).to.have.ordered.members(cssTexts);
     });
+
+    // JSDOM/CSSOM is currently broken for this test
+    // remove '.skip' once https://github.com/NV/CSSOM/pull/113#issue-712485075 is merged
+    it.skip('should insert rule at index [0,0] and keep exsisting rules', () => {
+      const dom = new JSDOM(`
+        <style>
+          @media {
+            a {color: blue}
+            div {color: black}
+          }
+        </style>
+      `);
+      const styleEl = dom.window.document.getElementsByTagName('style')[0];
+
+      const cssText = '.added-rule {border: 1px solid yellow;}';
+      const virtualStyleRules: VirtualStyleRules = [
+        { cssText, index: [0, 0], type: StyleRuleType.Insert },
+      ];
+      applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
+
+      console.log(
+        Array.from((styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules),
+      );
+
+      expect(
+        (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
+      ).to.equal(3);
+      expect(
+        (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText,
+      ).to.equal(cssText);
+    });
+
+    it('should delete rule at index [0,1]', () => {
+      const dom = new JSDOM(`
+        <style>
+          @media {
+            a {color: blue;}
+            div {color: black;}
+          }
+        </style>
+      `);
+      const styleEl = dom.window.document.getElementsByTagName('style')[0];
+
+      const virtualStyleRules: VirtualStyleRules = [
+        { index: [0, 1], type: StyleRuleType.Remove },
+      ];
+      applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
+
+      expect(
+        (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
+      ).to.equal(1);
+      expect(
+        (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText,
+      ).to.equal('a {color: blue;}');
+    });
   });
 });
diff --git a/yarn.lock b/yarn.lock
index 6798637266..4613c41abd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1353,7 +1353,7 @@ acorn@^7.1.1, acorn@^7.4.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.2.4:
+acorn@^8.2.4, acorn@^8.4.1:
   version "8.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.4.1.tgz#56c36251fc7cabc7096adc18f05afe814321a28c"
   integrity sha512-asabaBSkEKosYKMITunzX177CXxQ4Q8BSSzMTKD+FefUhipQC70gfW5SiUDhYQ3vk8G+81HqQk7Fv9OXwwn9KA==
@@ -2631,6 +2631,11 @@ cssom@^0.4.4:
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
   integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
 
+cssom@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
+  integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==
+
 cssom@~0.3.6:
   version "0.3.8"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
@@ -2664,11 +2669,20 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+data-urls@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.0.tgz#3ff551c986d7c6234a0ac4bbf20a269e1cd6b378"
+  integrity sha512-4AefxbTTdFtxDUdh0BuMBs2qJVL25Mow2zlcuuePegQwgD6GEmQao42LLEeksOui8nL4RcNEugIpFP7eRd33xg==
+  dependencies:
+    abab "^2.0.3"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^9.0.0"
 dateformat@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
+
 debug@2.6.9, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -2697,6 +2711,8 @@ debug@^3.1.0:
   dependencies:
     ms "^2.1.1"
 
+decimal.js@^10.2.1, decimal.js@^10.3.1:
+=======
 debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
@@ -3562,6 +3578,13 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
 form-data@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
@@ -4752,7 +4775,7 @@ jsdom-global@^3.0.2:
   resolved "https://registry.yarnpkg.com/jsdom-global/-/jsdom-global-3.0.2.tgz#6bd299c13b0c4626b2da2c0393cd4385d606acb9"
   integrity sha1-a9KZwTsMRiay2iwDk81DhdYGrLk=
 
-jsdom@^16.4.0, jsdom@^16.6.0:
+jsdom@^16.4.0:
   version "16.6.0"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.6.0.tgz#f79b3786682065492a3da6a60a4695da983805ac"
   integrity sha512-Ty1vmF4NHJkolaEmdjtxTfSfkdb8Ywarwf63f+F8/mDD1uLSSWDxDuMiZxiPhwunLrn9LOSVItWj4bLYsLN3Dg==
@@ -4785,6 +4808,39 @@ jsdom@^16.4.0, jsdom@^16.6.0:
     ws "^7.4.5"
     xml-name-validator "^3.0.0"
 
+jsdom@^17.0.0:
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-17.0.0.tgz#3ec82d1d30030649c8defedc45fff6aa3e5d06ae"
+  integrity sha512-MUq4XdqwtNurZDVeKScENMPHnkgmdIvMzZ1r1NSwHkDuaqI6BouPjr+17COo4/19oLNnmdpFDPOHVpgIZmZ+VA==
+  dependencies:
+    abab "^2.0.5"
+    acorn "^8.4.1"
+    acorn-globals "^6.0.0"
+    cssom "^0.5.0"
+    cssstyle "^2.3.0"
+    data-urls "^3.0.0"
+    decimal.js "^10.3.1"
+    domexception "^2.0.1"
+    escodegen "^2.0.0"
+    form-data "^4.0.0"
+    html-encoding-sniffer "^2.0.1"
+    http-proxy-agent "^4.0.1"
+    https-proxy-agent "^5.0.0"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.0"
+    parse5 "6.0.1"
+    saxes "^5.0.1"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.0.0"
+    w3c-hr-time "^1.0.2"
+    w3c-xmlserializer "^2.0.0"
+    webidl-conversions "^6.1.0"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^9.0.0"
+    ws "^8.0.0"
+    xml-name-validator "^3.0.0"
+
 json-parse-better-errors@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
@@ -8562,6 +8618,14 @@ whatwg-url@^8.0.0, whatwg-url@^8.4.0, whatwg-url@^8.5.0:
     tr46 "^2.1.0"
     webidl-conversions "^6.1.0"
 
+whatwg-url@^9.0.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-9.1.0.tgz#1b112cf237d72cd64fa7882b9c3f6234a1c3050d"
+  integrity sha512-CQ0UcrPHyomtlOCot1TL77WyMIm/bCwrJ2D6AOKGwEczU9EpyoqAokfqrf/MioU9kHcMsmJZcg1egXix2KYEsA==
+  dependencies:
+    tr46 "^2.1.0"
+    webidl-conversions "^6.1.0"
+
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
@@ -8694,6 +8758,11 @@ ws@^7.2.3, ws@^7.4.3, ws@^7.4.5:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.3.tgz#160835b63c7d97bfab418fc1b8a9fced2ac01a74"
   integrity sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==
 
+ws@^8.0.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.1.0.tgz#75e5ec608f66d3d3934ec6dbc4ebc8a34a68638c"
+  integrity sha512-0UWlCD2s3RSclw8FN+D0zDTUyMO+1kHwJQQJzkgUh16S8d3NYON0AKCEQPffE0ez4JyRFu76QDA9KR5bOG/7jw==
+
 xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"

From f95ee4dfecea85debac871e1b4688fa03f3d10c4 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 15 Aug 2021 15:53:29 +0800
Subject: [PATCH 425/524] update yarn.lock

---
 yarn.lock | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 4613c41abd..a31b0d723e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2633,8 +2633,8 @@ cssom@^0.4.4:
 
 cssom@^0.5.0:
   version "0.5.0"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
-  integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==
+  resolved "http://192.168.26.29:7001/cssom/download/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
+  integrity sha1-0lT6ks2Lb72DgRufuu00ZjzBfDY=
 
 cssom@~0.3.6:
   version "0.3.8"
@@ -2671,18 +2671,18 @@ data-urls@^2.0.0:
 
 data-urls@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.0.tgz#3ff551c986d7c6234a0ac4bbf20a269e1cd6b378"
-  integrity sha512-4AefxbTTdFtxDUdh0BuMBs2qJVL25Mow2zlcuuePegQwgD6GEmQao42LLEeksOui8nL4RcNEugIpFP7eRd33xg==
+  resolved "http://192.168.26.29:7001/data-urls/download/data-urls-3.0.0.tgz#3ff551c986d7c6234a0ac4bbf20a269e1cd6b378"
+  integrity sha1-P/VRyYbXxiNKCsS78gomnhzWs3g=
   dependencies:
     abab "^2.0.3"
     whatwg-mimetype "^2.3.0"
     whatwg-url "^9.0.0"
+
 dateformat@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
-
 debug@2.6.9, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -2711,8 +2711,6 @@ debug@^3.1.0:
   dependencies:
     ms "^2.1.1"
 
-decimal.js@^10.2.1, decimal.js@^10.3.1:
-=======
 debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
@@ -2731,7 +2729,7 @@ decamelize@^1.1.0, decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
-decimal.js@^10.2.1:
+decimal.js@^10.2.1, decimal.js@^10.3.1:
   version "10.3.1"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.3.1.tgz#d8c3a444a9c6774ba60ca6ad7261c3a94fd5e783"
   integrity sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==
@@ -3580,11 +3578,13 @@ form-data@^3.0.0:
 
 form-data@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
-  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  resolved "http://192.168.26.29:7001/form-data/download/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha1-k5Gdrq82HuUpWEubMWZNwSyfpFI=
   dependencies:
     asynckit "^0.4.0"
     combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 form-data@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
@@ -4810,8 +4810,8 @@ jsdom@^16.4.0:
 
 jsdom@^17.0.0:
   version "17.0.0"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-17.0.0.tgz#3ec82d1d30030649c8defedc45fff6aa3e5d06ae"
-  integrity sha512-MUq4XdqwtNurZDVeKScENMPHnkgmdIvMzZ1r1NSwHkDuaqI6BouPjr+17COo4/19oLNnmdpFDPOHVpgIZmZ+VA==
+  resolved "http://192.168.26.29:7001/jsdom/download/jsdom-17.0.0.tgz#3ec82d1d30030649c8defedc45fff6aa3e5d06ae"
+  integrity sha1-PsgtHTADBknI3v7cRf/2qj5dBq4=
   dependencies:
     abab "^2.0.5"
     acorn "^8.4.1"
@@ -8620,8 +8620,8 @@ whatwg-url@^8.0.0, whatwg-url@^8.4.0, whatwg-url@^8.5.0:
 
 whatwg-url@^9.0.0:
   version "9.1.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-9.1.0.tgz#1b112cf237d72cd64fa7882b9c3f6234a1c3050d"
-  integrity sha512-CQ0UcrPHyomtlOCot1TL77WyMIm/bCwrJ2D6AOKGwEczU9EpyoqAokfqrf/MioU9kHcMsmJZcg1egXix2KYEsA==
+  resolved "http://192.168.26.29:7001/whatwg-url/download/whatwg-url-9.1.0.tgz#1b112cf237d72cd64fa7882b9c3f6234a1c3050d"
+  integrity sha1-GxEs8jfXLNZPp4grnD9iNKHDBQ0=
   dependencies:
     tr46 "^2.1.0"
     webidl-conversions "^6.1.0"
@@ -8760,8 +8760,8 @@ ws@^7.2.3, ws@^7.4.3, ws@^7.4.5:
 
 ws@^8.0.0:
   version "8.1.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.1.0.tgz#75e5ec608f66d3d3934ec6dbc4ebc8a34a68638c"
-  integrity sha512-0UWlCD2s3RSclw8FN+D0zDTUyMO+1kHwJQQJzkgUh16S8d3NYON0AKCEQPffE0ez4JyRFu76QDA9KR5bOG/7jw==
+  resolved "http://192.168.26.29:7001/ws/download/ws-8.1.0.tgz#75e5ec608f66d3d3934ec6dbc4ebc8a34a68638c"
+  integrity sha1-deXsYI9m09OTTsbbxOvIo0poY4w=
 
 xdg-basedir@^3.0.0:
   version "3.0.0"

From 997e960feb46bd752876a67af0a1e1d50b47ab2e Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 15 Aug 2021 16:15:31 +0800
Subject: [PATCH 426/524] fix registry in lock file

---
 yarn.lock | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index a31b0d723e..a7b965d054 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2633,8 +2633,8 @@ cssom@^0.4.4:
 
 cssom@^0.5.0:
   version "0.5.0"
-  resolved "http://192.168.26.29:7001/cssom/download/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
-  integrity sha1-0lT6ks2Lb72DgRufuu00ZjzBfDY=
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
+  integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==
 
 cssom@~0.3.6:
   version "0.3.8"
@@ -2671,8 +2671,8 @@ data-urls@^2.0.0:
 
 data-urls@^3.0.0:
   version "3.0.0"
-  resolved "http://192.168.26.29:7001/data-urls/download/data-urls-3.0.0.tgz#3ff551c986d7c6234a0ac4bbf20a269e1cd6b378"
-  integrity sha1-P/VRyYbXxiNKCsS78gomnhzWs3g=
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.0.tgz#3ff551c986d7c6234a0ac4bbf20a269e1cd6b378"
+  integrity sha512-4AefxbTTdFtxDUdh0BuMBs2qJVL25Mow2zlcuuePegQwgD6GEmQao42LLEeksOui8nL4RcNEugIpFP7eRd33xg==
   dependencies:
     abab "^2.0.3"
     whatwg-mimetype "^2.3.0"
@@ -3578,8 +3578,8 @@ form-data@^3.0.0:
 
 form-data@^4.0.0:
   version "4.0.0"
-  resolved "http://192.168.26.29:7001/form-data/download/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
-  integrity sha1-k5Gdrq82HuUpWEubMWZNwSyfpFI=
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
   dependencies:
     asynckit "^0.4.0"
     combined-stream "^1.0.8"
@@ -4810,8 +4810,8 @@ jsdom@^16.4.0:
 
 jsdom@^17.0.0:
   version "17.0.0"
-  resolved "http://192.168.26.29:7001/jsdom/download/jsdom-17.0.0.tgz#3ec82d1d30030649c8defedc45fff6aa3e5d06ae"
-  integrity sha1-PsgtHTADBknI3v7cRf/2qj5dBq4=
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-17.0.0.tgz#3ec82d1d30030649c8defedc45fff6aa3e5d06ae"
+  integrity sha512-MUq4XdqwtNurZDVeKScENMPHnkgmdIvMzZ1r1NSwHkDuaqI6BouPjr+17COo4/19oLNnmdpFDPOHVpgIZmZ+VA==
   dependencies:
     abab "^2.0.5"
     acorn "^8.4.1"
@@ -8620,8 +8620,8 @@ whatwg-url@^8.0.0, whatwg-url@^8.4.0, whatwg-url@^8.5.0:
 
 whatwg-url@^9.0.0:
   version "9.1.0"
-  resolved "http://192.168.26.29:7001/whatwg-url/download/whatwg-url-9.1.0.tgz#1b112cf237d72cd64fa7882b9c3f6234a1c3050d"
-  integrity sha1-GxEs8jfXLNZPp4grnD9iNKHDBQ0=
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-9.1.0.tgz#1b112cf237d72cd64fa7882b9c3f6234a1c3050d"
+  integrity sha512-CQ0UcrPHyomtlOCot1TL77WyMIm/bCwrJ2D6AOKGwEczU9EpyoqAokfqrf/MioU9kHcMsmJZcg1egXix2KYEsA==
   dependencies:
     tr46 "^2.1.0"
     webidl-conversions "^6.1.0"
@@ -8760,8 +8760,8 @@ ws@^7.2.3, ws@^7.4.3, ws@^7.4.5:
 
 ws@^8.0.0:
   version "8.1.0"
-  resolved "http://192.168.26.29:7001/ws/download/ws-8.1.0.tgz#75e5ec608f66d3d3934ec6dbc4ebc8a34a68638c"
-  integrity sha1-deXsYI9m09OTTsbbxOvIo0poY4w=
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.1.0.tgz#75e5ec608f66d3d3934ec6dbc4ebc8a34a68638c"
+  integrity sha512-0UWlCD2s3RSclw8FN+D0zDTUyMO+1kHwJQQJzkgUh16S8d3NYON0AKCEQPffE0ez4JyRFu76QDA9KR5bOG/7jw==
 
 xdg-basedir@^3.0.0:
   version "3.0.0"

From 0bf53089da5db0c9defadf1331f4dbaa755fb131 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Sun, 15 Aug 2021 10:41:40 +0200
Subject: [PATCH 427/524] refactor nested style code (#667)

---
 packages/rrweb/src/replay/index.ts            | 43 +++++++++++--------
 packages/rrweb/src/replay/virtual-styles.ts   | 16 ++++---
 .../rrweb/typings/replay/virtual-styles.d.ts  |  5 ++-
 packages/rrweb/typings/types.d.ts             |  4 +-
 4 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 6d822569b6..0556abae4a 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -58,6 +58,7 @@ import {
   VirtualStyleRules,
   VirtualStyleRulesMap,
   getNestedRule,
+  getPositionsAndIndex,
 } from './virtual-styles';
 
 const SKIP_TIME_THRESHOLD = 10 * 1000;
@@ -976,23 +977,24 @@ export class Replayer {
         }
 
         if (d.adds) {
-          d.adds.forEach(({ rule, index }) => {
+          d.adds.forEach(({ rule, index: nestedIndex }) => {
             if (styleSheet) {
               try {
-                if (Array.isArray(index)) {
-                  const positions = [...index];
-                  const insertAt = positions.pop();
+                if (Array.isArray(nestedIndex)) {
+                  const { positions, index } = getPositionsAndIndex(
+                    nestedIndex,
+                  );
                   const nestedRule = getNestedRule(
                     styleSheet.cssRules,
                     positions,
                   );
-                  nestedRule.insertRule(rule, insertAt);
+                  nestedRule.insertRule(rule, index);
                 } else {
-                  const _index =
-                  index === undefined
-                    ? undefined
-                    : Math.min(index, styleSheet.cssRules.length);
-                  styleSheet.insertRule(rule, _index);
+                  const index =
+                    nestedIndex === undefined
+                      ? undefined
+                      : Math.min(nestedIndex, styleSheet.cssRules.length);
+                  styleSheet.insertRule(rule, index);
                 }
               } catch (e) {
                 /**
@@ -1005,27 +1007,32 @@ export class Replayer {
                  */
               }
             } else {
-              rules?.push({ cssText: rule, index, type: StyleRuleType.Insert });
+              rules?.push({
+                cssText: rule,
+                index: nestedIndex,
+                type: StyleRuleType.Insert,
+              });
             }
           });
         }
 
         if (d.removes) {
-          d.removes.forEach(({ index }) => {
+          d.removes.forEach(({ index: nestedIndex }) => {
             if (usingVirtualParent) {
-              rules?.push({ index, type: StyleRuleType.Remove });
+              rules?.push({ index: nestedIndex, type: StyleRuleType.Remove });
             } else {
               try {
-                if (Array.isArray(index)) {
-                  const positions = [...index];
-                  const deleteAt = positions.pop();
+                if (Array.isArray(nestedIndex)) {
+                  const { positions, index } = getPositionsAndIndex(
+                    nestedIndex,
+                  );
                   const nestedRule = getNestedRule(
                     styleSheet!.cssRules,
                     positions,
                   );
-                  nestedRule.deleteRule(deleteAt || 0);
+                  nestedRule.deleteRule(index || 0);
                 } else {
-                  styleSheet?.deleteRule(index);
+                  styleSheet?.deleteRule(nestedIndex);
                 }
               } catch (e) {
                 /**
diff --git a/packages/rrweb/src/replay/virtual-styles.ts b/packages/rrweb/src/replay/virtual-styles.ts
index e9086eedd6..a878bfc4ef 100644
--- a/packages/rrweb/src/replay/virtual-styles.ts
+++ b/packages/rrweb/src/replay/virtual-styles.ts
@@ -39,6 +39,12 @@ export function getNestedRule(
   }
 }
 
+export function getPositionsAndIndex(nestedIndex: number[]) {
+  const positions = [...nestedIndex];
+  const index = positions.pop();
+  return { positions, index };
+}
+
 export function applyVirtualStyleRulesToNode(
   storedRules: VirtualStyleRules,
   styleNode: HTMLStyleElement,
@@ -47,13 +53,12 @@ export function applyVirtualStyleRulesToNode(
     if (rule.type === StyleRuleType.Insert) {
       try {
         if (Array.isArray(rule.index)) {
-          const positions = [...rule.index];
-          const insertAt = positions.pop();
+          const { positions, index } = getPositionsAndIndex(rule.index);
           const nestedRule = getNestedRule(
             styleNode.sheet!.cssRules,
             positions,
           );
-          nestedRule.insertRule(rule.cssText, insertAt);
+          nestedRule.insertRule(rule.cssText, index);
         } else {
           styleNode.sheet?.insertRule(rule.cssText, rule.index);
         }
@@ -66,13 +71,12 @@ export function applyVirtualStyleRulesToNode(
     } else if (rule.type === StyleRuleType.Remove) {
       try {
         if (Array.isArray(rule.index)) {
-          const positions = [...rule.index];
-          const deleteAt = positions.pop();
+          const { positions, index } = getPositionsAndIndex(rule.index);
           const nestedRule = getNestedRule(
             styleNode.sheet!.cssRules,
             positions,
           );
-          nestedRule.deleteRule(deleteAt || 0);
+          nestedRule.deleteRule(index || 0);
         } else {
           styleNode.sheet?.deleteRule(rule.index);
         }
diff --git a/packages/rrweb/typings/replay/virtual-styles.d.ts b/packages/rrweb/typings/replay/virtual-styles.d.ts
index 107e07855a..b219f8b946 100644
--- a/packages/rrweb/typings/replay/virtual-styles.d.ts
+++ b/packages/rrweb/typings/replay/virtual-styles.d.ts
@@ -7,11 +7,11 @@ export declare enum StyleRuleType {
 declare type InsertRule = {
     cssText: string;
     type: StyleRuleType.Insert;
-    index?: number;
+    index?: number | number[];
 };
 declare type RemoveRule = {
     type: StyleRuleType.Remove;
-    index: number;
+    index: number | number[];
 };
 declare type SnapshotRule = {
     type: StyleRuleType.Snapshot;
@@ -19,6 +19,7 @@ declare type SnapshotRule = {
 };
 export declare type VirtualStyleRules = Array<InsertRule | RemoveRule | SnapshotRule>;
 export declare type VirtualStyleRulesMap = Map<INode, VirtualStyleRules>;
+export declare function getNestedRule(rules: CSSRuleList, position: number[]): CSSGroupingRule;
 export declare function applyVirtualStyleRulesToNode(storedRules: VirtualStyleRules, styleNode: HTMLStyleElement): void;
 export declare function storeCSSRules(parentElement: HTMLStyleElement, virtualStyleRulesMap: VirtualStyleRulesMap): void;
 export {};
diff --git a/packages/rrweb/typings/types.d.ts b/packages/rrweb/typings/types.d.ts
index 73654ec505..22aa1020ab 100644
--- a/packages/rrweb/typings/types.d.ts
+++ b/packages/rrweb/typings/types.d.ts
@@ -282,10 +282,10 @@ export declare type scrollPosition = {
 export declare type scrollCallback = (p: scrollPosition) => void;
 export declare type styleSheetAddRule = {
     rule: string;
-    index?: number;
+    index?: number | number[];
 };
 export declare type styleSheetDeleteRule = {
-    index: number;
+    index: number | number[];
 };
 export declare type styleSheetRuleParam = {
     id: number;

From 9e226b593f470dae1957904a16dbb91f73b52f77 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Tue, 17 Aug 2021 08:05:47 +0100
Subject: [PATCH 428/524] The desktop pointer cursor is not representative of
 mobile (#662)

* Simplify css for click animation

* Refactor to transfer responsibility for casting multiple synchronous to index.ts from machine.ts (so they can be dealt with in bulk)

* During synchronous application of a batch of events, move the mouse to the last position so that it's in the correct place when the timer starts

 - previous `needCastInSyncMode` added in 4bf533a675c8a4430ef4718fa8f55cb0984be5ad meant that the isSync versions of MouseMove/TouchMove were being accidentally ignored
 - each synchronous MouseMove would have resulted in a separate mouse position update
 - the Click/TouchStart/TouchEnd events didn't have an async version

* The desktop pointer cursor is not representative of what is happening on a mobile device.

Instead, check a recording for any presence of a Touch event, and switch to a touch visualisation mode for the entire recording.
(for now, we use this mode even for mixed touch/mouse devices - this could be improved upon in future)

Show a round circle representing the users' finger which is visible only between TouchStart and TouchEnd events
Again this can be evolved upon, but this change should be a good start in the right direction.

* It's more correct to not have a transition for repositioning of touch as user can lift finger off screen and place elsewhere; however we can now have much smoother touch movement during the .touch-active phase as we know the finger is on the screen. This has a .25s delaying effect on the touch position which IMO is acceptable; e.g. scroll position can lag behind a touch movement and this seems to bring them more in sync

* Ensure we end up with the correct touch-active state after a series of synchronous events

* Important to discontinue tail animations and position transitions when user has lifted their finger and placed it into a new position. This is apparent in a replay session where the user is scrolling the page using repeated TouchMove bottom-to-top movements

* Simplify by unwrapping `mouseState.touchActive` and `mouseState.pos` into their own global vars
---
 packages/rrweb/src/replay/index.ts         | 132 ++++++++++++++++++---
 packages/rrweb/src/replay/machine.ts       |  16 ++-
 packages/rrweb/src/replay/styles/style.css |  46 +++++--
 packages/rrweb/src/types.ts                |   8 ++
 packages/rrweb/src/utils.ts                |  32 -----
 packages/rrweb/typings/utils.d.ts          |   1 -
 6 files changed, 168 insertions(+), 67 deletions(-)

diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 0556abae4a..83522a1e9e 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -37,6 +37,7 @@ import {
   ElementState,
   styleAttributeValue,
   styleValueWithPriority,
+  mouseMovePos,
 } from '../types';
 import {
   createMirror,
@@ -77,6 +78,13 @@ const defaultMouseTailConfig = {
   strokeStyle: 'red',
 } as const;
 
+function indicatesTouchDevice(e: eventWithTime) {
+  return e.type == EventType.IncrementalSnapshot &&
+    (e.data.source == IncrementalSource.TouchMove ||
+     (e.data.source == IncrementalSource.MouseInteraction &&
+      e.data.type == MouseInteractions.TouchStart));
+}
+
 export class Replayer {
   public wrapper: HTMLDivElement;
   public iframe: HTMLIFrameElement;
@@ -117,6 +125,9 @@ export class Replayer {
 
   private newDocumentQueue: addedNodeMutation[] = [];
 
+  private mousePos: mouseMovePos | null = null;
+  private touchActive: boolean | null = null;
+
   constructor(
     events: Array<eventWithTime | string>,
     config?: Partial<playerConfig>,
@@ -144,6 +155,7 @@ export class Replayer {
 
     this.handleResize = this.handleResize.bind(this);
     this.getCastFn = this.getCastFn.bind(this);
+    this.applyEventsSynchronously = this.applyEventsSynchronously.bind(this);
     this.emitter.on(ReplayerEvents.Resize, this.handleResize as Handler);
 
     this.setupDom();
@@ -197,6 +209,7 @@ export class Replayer {
       },
       {
         getCastFn: this.getCastFn,
+        applyEventsSynchronously: this.applyEventsSynchronously,
         emitter: this.emitter,
       },
     );
@@ -250,6 +263,10 @@ export class Replayer {
         );
       }, 1);
     }
+    if (this.service.state.context.events.find(indicatesTouchDevice)) {
+      this.mouse.classList.add('touch-device');
+    }
+
   }
 
   public on(event: string, handler: Handler) {
@@ -373,6 +390,9 @@ export class Replayer {
     const event = this.config.unpackFn
       ? this.config.unpackFn(rawEvent as string)
       : (rawEvent as eventWithTime);
+    if (indicatesTouchDevice(event)) {
+      this.mouse.classList.add('touch-device');
+    }
     Promise.resolve().then(() =>
       this.service.send({ type: 'ADD_EVENT', payload: { event } }),
     );
@@ -443,6 +463,43 @@ export class Replayer {
     }
   }
 
+  private applyEventsSynchronously(events: Array<eventWithTime>) {
+    for (const event of events) {
+      switch (event.type) {
+        case EventType.DomContentLoaded:
+        case EventType.Load:
+        case EventType.Custom:
+          continue;
+        case EventType.FullSnapshot:
+        case EventType.Meta:
+        case EventType.Plugin:
+          break;
+        case EventType.IncrementalSnapshot:
+          switch (event.data.source) {
+            case IncrementalSource.MediaInteraction:
+              continue;
+            default:
+              break;
+          }
+          break;
+        default:
+          break;
+      }
+      const castFn = this.getCastFn(event, true);
+      castFn();
+    }
+    if (this.mousePos) {
+      this.moveAndHover(this.mousePos.x, this.mousePos.y, this.mousePos.id, true, this.mousePos.debugData);
+    }
+    this.mousePos = null;
+    if (this.touchActive === true) {
+      this.mouse.classList.add('touch-active');
+    } else if (this.touchActive === false) {
+      this.mouse.classList.remove('touch-active');
+    }
+    this.touchActive = null;
+  }
+
   private getCastFn(event: eventWithTime, isSync = false) {
     let castFn: undefined | (() => void);
     switch (event.type) {
@@ -803,12 +860,17 @@ export class Replayer {
       case IncrementalSource.MouseMove:
         if (isSync) {
           const lastPosition = d.positions[d.positions.length - 1];
-          this.moveAndHover(d, lastPosition.x, lastPosition.y, lastPosition.id);
+          this.mousePos = {
+            x: lastPosition.x,
+            y: lastPosition.y,
+            id: lastPosition.id,
+            debugData: d,
+          };
         } else {
           d.positions.forEach((p) => {
             const action = {
               doAction: () => {
-                this.moveAndHover(d, p.x, p.y, p.id);
+                this.moveAndHover(p.x, p.y, p.id, isSync, d);
               },
               delay:
                 p.timeOffset +
@@ -857,19 +919,51 @@ export class Replayer {
           case MouseInteractions.Click:
           case MouseInteractions.TouchStart:
           case MouseInteractions.TouchEnd:
-            /**
-             * Click has no visual impact when replaying and may
-             * trigger navigation when apply to an <a> link.
-             * So we will not call click(), instead we add an
-             * animation to the mouse element which indicate user
-             * clicked at this moment.
-             */
-            if (!isSync) {
-              this.moveAndHover(d, d.x, d.y, d.id);
-              this.mouse.classList.remove('active');
-              // tslint:disable-next-line
-              void this.mouse.offsetWidth;
-              this.mouse.classList.add('active');
+            if (isSync) {
+              let touchActive: boolean | undefined;
+              if (d.type === MouseInteractions.TouchStart) {
+                this.touchActive = true;
+              } else if (d.type === MouseInteractions.TouchEnd) {
+                this.touchActive = false;
+              }
+              this.mousePos = {
+                x: d.x,
+                y: d.y,
+                id: d.id,
+                debugData: d,
+              };
+            } else {
+              if (d.type === MouseInteractions.TouchStart) {
+                // don't draw a trail as user has lifted finger and is placing at a new point
+                this.tailPositions.length = 0;
+              }
+              this.moveAndHover(d.x, d.y, d.id, isSync, d);
+              if (d.type === MouseInteractions.Click) {
+                /*
+                 * don't want target.click() here as could trigger an iframe navigation
+                 * instead any effects of the click should already be covered by mutations
+                 */
+                /*
+                 * removal and addition of .active class (along with void line to trigger repaint)
+                 * triggers the 'click' css animation in styles/style.css
+                 */
+                this.mouse.classList.remove('active');
+                // tslint:disable-next-line
+                void this.mouse.offsetWidth;
+                this.mouse.classList.add('active');
+              } else if (d.type === MouseInteractions.TouchStart) {
+                void this.mouse.offsetWidth;  // needed for the position update of moveAndHover to apply without the .touch-active transition
+                this.mouse.classList.add('touch-active');
+              } else if (d.type === MouseInteractions.TouchEnd) {
+                this.mouse.classList.remove('touch-active');
+              }
+            }
+            break;
+        case MouseInteractions.TouchCancel:
+            if (isSync) {
+              this.touchActive = false;
+            } else {
+              this.mouse.classList.remove('touch-active');
             }
             break;
           default:
@@ -1487,10 +1581,10 @@ export class Replayer {
     }
   }
 
-  private moveAndHover(d: incrementalData, x: number, y: number, id: number) {
+  private moveAndHover(x: number, y: number, id: number, isSync: boolean, debugData: incrementalData) {
     const target = this.mirror.getNode(id);
     if (!target) {
-      return this.debugNodeNotFound(d, id);
+      return this.debugNodeNotFound(debugData, id);
     }
 
     const base = getBaseDimension(target, this.iframe);
@@ -1499,7 +1593,9 @@ export class Replayer {
 
     this.mouse.style.left = `${_x}px`;
     this.mouse.style.top = `${_y}px`;
-    this.drawMouseTail({ x: _x, y: _y });
+    if (!isSync) {
+      this.drawMouseTail({ x: _x, y: _y });
+    }
     this.hoverElements((target as Node) as Element);
   }
 
diff --git a/packages/rrweb/src/replay/machine.ts b/packages/rrweb/src/replay/machine.ts
index 9a9d38fa1f..2dbc512b9c 100644
--- a/packages/rrweb/src/replay/machine.ts
+++ b/packages/rrweb/src/replay/machine.ts
@@ -9,7 +9,6 @@ import {
   IncrementalSource,
 } from '../types';
 import { Timer, addDelay } from './timer';
-import { needCastInSyncMode } from '../utils';
 
 export type PlayerContext = {
   events: eventWithTime[];
@@ -77,11 +76,12 @@ export function discardPriorSnapshots(
 
 type PlayerAssets = {
   emitter: Emitter;
+  applyEventsSynchronously(events: Array<eventWithTime>): void;
   getCastFn(event: eventWithTime, isSync: boolean): () => void;
 };
 export function createPlayerService(
   context: PlayerContext,
-  { getCastFn, emitter }: PlayerAssets,
+  { getCastFn, applyEventsSynchronously, emitter }: PlayerAssets,
 ) {
   const playerMachine = createMachine<PlayerContext, PlayerEvent, PlayerState>(
     {
@@ -186,6 +186,7 @@ export function createPlayerService(
             emitter.emit(ReplayerEvents.PlayBack);
           }
 
+          const syncEvents = new Array<eventWithTime>();
           const actions = new Array<actionWithDelay>();
           for (const event of neededEvents) {
             if (
@@ -196,14 +197,10 @@ export function createPlayerService(
             ) {
               continue;
             }
-            const isSync = event.timestamp < baselineTime;
-            if (isSync && !needCastInSyncMode(event)) {
-              continue;
-            }
-            const castFn = getCastFn(event, isSync);
-            if (isSync) {
-              castFn();
+            if (event.timestamp < baselineTime) {
+              syncEvents.push(event);
             } else {
+              const castFn = getCastFn(event, false);
               actions.push({
                 doAction: () => {
                   castFn();
@@ -213,6 +210,7 @@ export function createPlayerService(
               });
             }
           }
+          applyEventsSynchronously(syncEvents);
           emitter.emit(ReplayerEvents.Flush);
           timer.addActions(actions);
           timer.start();
diff --git a/packages/rrweb/src/replay/styles/style.css b/packages/rrweb/src/replay/styles/style.css
index 9ed07b7981..b459e51578 100644
--- a/packages/rrweb/src/replay/styles/style.css
+++ b/packages/rrweb/src/replay/styles/style.css
@@ -5,25 +5,48 @@
   position: absolute;
   width: 20px;
   height: 20px;
-  transition: 0.05s linear;
+  transition: left 0.05s linear, top 0.05s linear;
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
   background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDUwIDUwIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPkRlc2lnbl90bnA8L3RpdGxlPjxwYXRoIGQ9Ik00OC43MSw0Mi45MUwzNC4wOCwyOC4yOSw0NC4zMywxOEExLDEsMCwwLDAsNDQsMTYuMzlMMi4zNSwxLjA2QTEsMSwwLDAsMCwxLjA2LDIuMzVMMTYuMzksNDRhMSwxLDAsMCwwLDEuNjUuMzZMMjguMjksMzQuMDgsNDIuOTEsNDguNzFhMSwxLDAsMCwwLDEuNDEsMGw0LjM4LTQuMzhBMSwxLDAsMCwwLDQ4LjcxLDQyLjkxWm0tNS4wOSwzLjY3TDI5LDMyYTEsMSwwLDAsMC0xLjQxLDBsLTkuODUsOS44NUwzLjY5LDMuNjlsMzguMTIsMTRMMzIsMjcuNThBMSwxLDAsMCwwLDMyLDI5TDQ2LjU5LDQzLjYyWiI+PC9wYXRoPjwvc3ZnPg==');
+  border-color: transparent;  /* otherwise we transition from black when .touch-device class is added */
 }
 .replayer-mouse::after {
   content: '';
   display: inline-block;
   width: 20px;
   height: 20px;
-  border-radius: 10px;
   background: rgb(73, 80, 246);
-  transform: translate(-10px, -10px);
+  border-radius: 100%;
+  transform: translate(-50%, -50%);
   opacity: 0.3;
 }
 .replayer-mouse.active::after {
   animation: click 0.2s ease-in-out 1;
 }
+.replayer-mouse.touch-device {
+  background-image: none;  /* there's no passive cursor on touch-only screens */
+  width: 70px;
+  height: 70px;
+  border-width: 4px;
+  border-style: solid;
+  border-radius: 100%;
+  margin-left: -37px;
+  margin-top: -37px;
+  border-color: rgba(73, 80, 246, 0);
+  transition: left 0s linear, top 0s linear, border-color 0.2s ease-in-out;
+}
+.replayer-mouse.touch-device.touch-active {
+  border-color: rgba(73, 80, 246, 1);
+  transition: left 0.25s linear, top 0.25s linear, border-color 0.2s ease-in-out;
+}
+.replayer-mouse.touch-device::after {
+  opacity: 0;  /* there's no passive cursor on touch-only screens */
+}
+.replayer-mouse.touch-device.active::after {
+  animation: touch-click 0.2s ease-in-out 1;
+}
 .replayer-mouse-tail {
   position: absolute;
   pointer-events: none;
@@ -34,14 +57,23 @@
     opacity: 0.3;
     width: 20px;
     height: 20px;
-    border-radius: 10px;
-    transform: translate(-10px, -10px);
   }
   50% {
     opacity: 0.5;
     width: 10px;
     height: 10px;
-    border-radius: 5px;
-    transform: translate(-5px, -5px);
+  }
+}
+
+@keyframes touch-click {
+  0% {
+    opacity: 0;
+    width: 20px;
+    height: 20px;
+  }
+  50% {
+    opacity: 0.5;
+    width: 10px;
+    height: 10px;
   }
 }
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index a79e701f7d..16d28f30ba 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -352,6 +352,13 @@ export type mousePosition = {
   timeOffset: number;
 };
 
+export type mouseMovePos = {
+  x: number;
+  y: number;
+  id: number;
+  debugData: incrementalData;
+};
+
 export enum MouseInteractions {
   MouseUp,
   MouseDown,
@@ -363,6 +370,7 @@ export enum MouseInteractions {
   TouchStart,
   TouchMove_Departed, // we will start a separate observer for touch move event
   TouchEnd,
+  TouchCancel,
 }
 
 type mouseInteractionParam = {
diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts
index 30ba583696..b92b44e929 100644
--- a/packages/rrweb/src/utils.ts
+++ b/packages/rrweb/src/utils.ts
@@ -314,38 +314,6 @@ export function polyfill(win = window) {
   }
 }
 
-export function needCastInSyncMode(event: eventWithTime): boolean {
-  switch (event.type) {
-    case EventType.DomContentLoaded:
-    case EventType.Load:
-    case EventType.Custom:
-      return false;
-    case EventType.FullSnapshot:
-    case EventType.Meta:
-    case EventType.Plugin:
-      return true;
-    default:
-      break;
-  }
-
-  switch (event.data.source) {
-    case IncrementalSource.MouseMove:
-    case IncrementalSource.MouseInteraction:
-    case IncrementalSource.TouchMove:
-    case IncrementalSource.MediaInteraction:
-      return false;
-    case IncrementalSource.ViewportResize:
-    case IncrementalSource.StyleSheetRule:
-    case IncrementalSource.Scroll:
-    case IncrementalSource.Input:
-      return true;
-    default:
-      break;
-  }
-
-  return true;
-}
-
 export type TreeNode = {
   id: number;
   mutation: addedNodeMutation;
diff --git a/packages/rrweb/typings/utils.d.ts b/packages/rrweb/typings/utils.d.ts
index e259f17697..a9139a8494 100644
--- a/packages/rrweb/typings/utils.d.ts
+++ b/packages/rrweb/typings/utils.d.ts
@@ -15,7 +15,6 @@ export declare function isIgnored(n: Node | INode): boolean;
 export declare function isAncestorRemoved(target: INode, mirror: Mirror): boolean;
 export declare function isTouchEvent(event: MouseEvent | TouchEvent): event is TouchEvent;
 export declare function polyfill(win?: Window & typeof globalThis): void;
-export declare function needCastInSyncMode(event: eventWithTime): boolean;
 export declare type TreeNode = {
     id: number;
     mutation: addedNodeMutation;

From 5dcbfa530f3a1c6d7cadaba076be25e4b263de39 Mon Sep 17 00:00:00 2001
From: yz-yu <yanzhen@smartx.com>
Date: Mon, 23 Aug 2021 12:22:23 +0800
Subject: [PATCH 429/524] impl #650, CSS declaration observer (#671)

---
 packages/rrweb/src/record/index.ts          | 10 +++
 packages/rrweb/src/record/observer.ts       | 85 +++++++++++++++++++--
 packages/rrweb/src/replay/index.ts          | 85 +++++++++++++++++++--
 packages/rrweb/src/replay/virtual-styles.ts | 30 +++++++-
 packages/rrweb/src/types.ts                 | 25 +++++-
 5 files changed, 217 insertions(+), 18 deletions(-)

diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
index d99097c383..5930913a8a 100644
--- a/packages/rrweb/src/record/index.ts
+++ b/packages/rrweb/src/record/index.ts
@@ -352,6 +352,16 @@ function record<T = eventWithTime>(
                 },
               }),
             ),
+          styleDeclarationCb: (r) =>
+            wrappedEmit(
+              wrapEvent({
+                type: EventType.IncrementalSnapshot,
+                data: {
+                  source: IncrementalSource.StyleDeclaration,
+                  ...r,
+                },
+              }),
+            ),
           canvasMutationCb: (p) =>
             wrappedEmit(
               wrapEvent({
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index 9281c63c8c..afa38201be 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -43,6 +43,7 @@ import {
   fontCallback,
   fontParam,
   Mirror,
+  styleDeclarationCallback,
 } from '../types';
 import MutationBuffer from './mutation';
 import { IframeManager } from './iframe-manager';
@@ -472,16 +473,18 @@ function initInputObserver(
   };
 }
 
-function getNestedCSSRulePositions(rule: CSSStyleRule): number[] {
-  const positions: Array<number> = [];
-  function recurse(rule: CSSRule, pos: number[]) {
-    if (rule.parentRule instanceof CSSGroupingRule) {
-      const rules = Array.from((rule.parentRule as CSSGroupingRule).cssRules);
-      const index = rules.indexOf(rule);
+function getNestedCSSRulePositions(rule: CSSRule): number[] {
+  const positions: number[] = [];
+  function recurse(childRule: CSSRule, pos: number[]) {
+    if (childRule.parentRule instanceof CSSGroupingRule) {
+      const rules = Array.from(
+        (childRule.parentRule as CSSGroupingRule).cssRules,
+      );
+      const index = rules.indexOf(childRule);
       pos.unshift(index);
     } else {
-      const rules = Array.from(rule.parentStyleSheet!.cssRules);
-      const index = rules.indexOf(rule);
+      const rules = Array.from(childRule.parentStyleSheet!.cssRules);
+      const index = rules.indexOf(childRule);
       pos.unshift(index);
     }
     return pos;
@@ -560,6 +563,60 @@ function initStyleSheetObserver(
   };
 }
 
+function initStyleDeclarationObserver(
+  cb: styleDeclarationCallback,
+  mirror: Mirror,
+): listenerHandler {
+  const setProperty = CSSStyleDeclaration.prototype.setProperty;
+  CSSStyleDeclaration.prototype.setProperty = function (
+    this: CSSStyleDeclaration,
+    property,
+    value,
+    priority,
+  ) {
+    const id = mirror.getId(
+      (this.parentRule?.parentStyleSheet?.ownerNode as unknown) as INode,
+    );
+    if (id !== -1) {
+      cb({
+        id,
+        set: {
+          property,
+          value,
+          priority,
+        },
+        index: getNestedCSSRulePositions(this.parentRule!),
+      });
+    }
+    return setProperty.apply(this, arguments);
+  };
+
+  const removeProperty = CSSStyleDeclaration.prototype.removeProperty;
+  CSSStyleDeclaration.prototype.removeProperty = function (
+    this: CSSStyleDeclaration,
+    property,
+  ) {
+    const id = mirror.getId(
+      (this.parentRule?.parentStyleSheet?.ownerNode as unknown) as INode,
+    );
+    if (id !== -1) {
+      cb({
+        id,
+        remove: {
+          property,
+        },
+        index: getNestedCSSRulePositions(this.parentRule!),
+      });
+    }
+    return removeProperty.apply(this, arguments);
+  };
+
+  return () => {
+    CSSStyleDeclaration.prototype.setProperty = setProperty;
+    CSSStyleDeclaration.prototype.removeProperty = removeProperty;
+  };
+}
+
 function initMediaInteractionObserver(
   mediaInteractionCb: mediaInteractionCallback,
   blockClass: blockClass,
@@ -725,6 +782,7 @@ function mergeHooks(o: observerParam, hooks: hooksParam) {
     inputCb,
     mediaInteractionCb,
     styleSheetRuleCb,
+    styleDeclarationCb,
     canvasMutationCb,
     fontCb,
   } = o;
@@ -776,6 +834,12 @@ function mergeHooks(o: observerParam, hooks: hooksParam) {
     }
     styleSheetRuleCb(...p);
   };
+  o.styleDeclarationCb = (...p: Arguments<styleDeclarationCallback>) => {
+    if (hooks.styleDeclaration) {
+      hooks.styleDeclaration(...p);
+    }
+    styleDeclarationCb(...p);
+  };
   o.canvasMutationCb = (...p: Arguments<canvasMutationCallback>) => {
     if (hooks.canvasMutation) {
       hooks.canvasMutation(...p);
@@ -854,6 +918,10 @@ export function initObservers(
     o.styleSheetRuleCb,
     o.mirror,
   );
+  const styleDeclarationObserver = initStyleDeclarationObserver(
+    o.styleDeclarationCb,
+    o.mirror,
+  );
   const canvasMutationObserver = o.recordCanvas
     ? initCanvasMutationObserver(o.canvasMutationCb, o.blockClass, o.mirror)
     : () => {};
@@ -873,6 +941,7 @@ export function initObservers(
     inputHandler();
     mediaInteractionHandler();
     styleSheetObserver();
+    styleDeclarationObserver();
     canvasMutationObserver();
     fontObserver();
     pluginHandlers.forEach((h) => h());
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 83522a1e9e..39bb6f468c 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -79,10 +79,12 @@ const defaultMouseTailConfig = {
 } as const;
 
 function indicatesTouchDevice(e: eventWithTime) {
-  return e.type == EventType.IncrementalSnapshot &&
+  return (
+    e.type == EventType.IncrementalSnapshot &&
     (e.data.source == IncrementalSource.TouchMove ||
-     (e.data.source == IncrementalSource.MouseInteraction &&
-      e.data.type == MouseInteractions.TouchStart));
+      (e.data.source == IncrementalSource.MouseInteraction &&
+        e.data.type == MouseInteractions.TouchStart))
+  );
 }
 
 export class Replayer {
@@ -266,7 +268,6 @@ export class Replayer {
     if (this.service.state.context.events.find(indicatesTouchDevice)) {
       this.mouse.classList.add('touch-device');
     }
-
   }
 
   public on(event: string, handler: Handler) {
@@ -489,7 +490,13 @@ export class Replayer {
       castFn();
     }
     if (this.mousePos) {
-      this.moveAndHover(this.mousePos.x, this.mousePos.y, this.mousePos.id, true, this.mousePos.debugData);
+      this.moveAndHover(
+        this.mousePos.x,
+        this.mousePos.y,
+        this.mousePos.id,
+        true,
+        this.mousePos.debugData,
+      );
     }
     this.mousePos = null;
     if (this.touchActive === true) {
@@ -952,14 +959,14 @@ export class Replayer {
                 void this.mouse.offsetWidth;
                 this.mouse.classList.add('active');
               } else if (d.type === MouseInteractions.TouchStart) {
-                void this.mouse.offsetWidth;  // needed for the position update of moveAndHover to apply without the .touch-active transition
+                void this.mouse.offsetWidth; // needed for the position update of moveAndHover to apply without the .touch-active transition
                 this.mouse.classList.add('touch-active');
               } else if (d.type === MouseInteractions.TouchEnd) {
                 this.mouse.classList.remove('touch-active');
               }
             }
             break;
-        case MouseInteractions.TouchCancel:
+          case MouseInteractions.TouchCancel:
             if (isSync) {
               this.touchActive = false;
             } else {
@@ -1138,6 +1145,62 @@ export class Replayer {
         }
         break;
       }
+      case IncrementalSource.StyleDeclaration: {
+        // same with StyleSheetRule
+        const target = this.mirror.getNode(d.id);
+        if (!target) {
+          return this.debugNodeNotFound(d, d.id);
+        }
+
+        const styleEl = (target as Node) as HTMLStyleElement;
+        const parent = (target.parentNode as unknown) as INode;
+        const usingVirtualParent = this.fragmentParentMap.has(parent);
+
+        const styleSheet = usingVirtualParent ? null : styleEl.sheet;
+        let rules: VirtualStyleRules = [];
+
+        if (!styleSheet) {
+          if (this.virtualStyleRulesMap.has(target)) {
+            rules = this.virtualStyleRulesMap.get(target) as VirtualStyleRules;
+          } else {
+            rules = [];
+            this.virtualStyleRulesMap.set(target, rules);
+          }
+        }
+
+        if (d.set) {
+          if (styleSheet) {
+            const rule = (getNestedRule(
+              styleSheet.rules,
+              d.index,
+            ) as unknown) as CSSStyleRule;
+            rule.style.setProperty(d.set.property, d.set.value, d.set.priority);
+          } else {
+            rules.push({
+              type: StyleRuleType.SetProperty,
+              index: d.index,
+              ...d.set,
+            });
+          }
+        }
+
+        if (d.remove) {
+          if (styleSheet) {
+            const rule = (getNestedRule(
+              styleSheet.rules,
+              d.index,
+            ) as unknown) as CSSStyleRule;
+            rule.style.removeProperty(d.remove.property);
+          } else {
+            rules.push({
+              type: StyleRuleType.RemoveProperty,
+              index: d.index,
+              ...d.remove,
+            });
+          }
+        }
+        break;
+      }
       case IncrementalSource.CanvasMutation: {
         if (!this.config.UNSAFE_replayCanvas) {
           return;
@@ -1581,7 +1644,13 @@ export class Replayer {
     }
   }
 
-  private moveAndHover(x: number, y: number, id: number, isSync: boolean, debugData: incrementalData) {
+  private moveAndHover(
+    x: number,
+    y: number,
+    id: number,
+    isSync: boolean,
+    debugData: incrementalData,
+  ) {
     const target = this.mirror.getNode(id);
     if (!target) {
       return this.debugNodeNotFound(debugData, id);
diff --git a/packages/rrweb/src/replay/virtual-styles.ts b/packages/rrweb/src/replay/virtual-styles.ts
index a878bfc4ef..5b3d51f977 100644
--- a/packages/rrweb/src/replay/virtual-styles.ts
+++ b/packages/rrweb/src/replay/virtual-styles.ts
@@ -4,6 +4,8 @@ export enum StyleRuleType {
   Insert,
   Remove,
   Snapshot,
+  SetProperty,
+  RemoveProperty,
 }
 
 type InsertRule = {
@@ -19,8 +21,22 @@ type SnapshotRule = {
   type: StyleRuleType.Snapshot;
   cssTexts: string[];
 };
+type SetPropertyRule = {
+  type: StyleRuleType.SetProperty;
+  index: number[];
+  property: string;
+  value: string | null;
+  priority: string | undefined;
+};
+type RemovePropertyRule = {
+  type: StyleRuleType.RemoveProperty;
+  index: number[];
+  property: string;
+};
 
-export type VirtualStyleRules = Array<InsertRule | RemoveRule | SnapshotRule>;
+export type VirtualStyleRules = Array<
+  InsertRule | RemoveRule | SnapshotRule | SetPropertyRule | RemovePropertyRule
+>;
 export type VirtualStyleRulesMap = Map<INode, VirtualStyleRules>;
 
 export function getNestedRule(
@@ -88,6 +104,18 @@ export function applyVirtualStyleRulesToNode(
       }
     } else if (rule.type === StyleRuleType.Snapshot) {
       restoreSnapshotOfStyleRulesToNode(rule.cssTexts, styleNode);
+    } else if (rule.type === StyleRuleType.SetProperty) {
+      const nativeRule = (getNestedRule(
+        styleNode.sheet!.cssRules,
+        rule.index,
+      ) as unknown) as CSSStyleRule;
+      nativeRule.style.setProperty(rule.property, rule.value, rule.priority);
+    } else if (rule.type === StyleRuleType.RemoveProperty) {
+      const nativeRule = (getNestedRule(
+        styleNode.sheet!.cssRules,
+        rule.index,
+      ) as unknown) as CSSStyleRule;
+      nativeRule.style.removeProperty(rule.property);
     }
   });
 }
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index 16d28f30ba..a596f64630 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -90,6 +90,7 @@ export enum IncrementalSource {
   Font,
   Log,
   Drag,
+  StyleDeclaration,
 }
 
 export type mutationData = {
@@ -129,6 +130,10 @@ export type styleSheetRuleData = {
   source: IncrementalSource.StyleSheetRule;
 } & styleSheetRuleParam;
 
+export type styleDeclarationData = {
+  source: IncrementalSource.StyleDeclaration;
+} & styleDeclarationParam;
+
 export type canvasMutationData = {
   source: IncrementalSource.CanvasMutation;
 } & canvasMutationParam;
@@ -147,7 +152,8 @@ export type incrementalData =
   | mediaInteractionData
   | styleSheetRuleData
   | canvasMutationData
-  | fontData;
+  | fontData
+  | styleDeclarationData;
 
 export type event =
   | domContentLoadedEvent
@@ -244,6 +250,7 @@ export type observerParam = {
   maskTextFn?: MaskTextFn;
   inlineStylesheet: boolean;
   styleSheetRuleCb: styleSheetRuleCallback;
+  styleDeclarationCb: styleDeclarationCallback;
   canvasMutationCb: canvasMutationCallback;
   fontCb: fontCallback;
   sampling: SamplingStrategy;
@@ -271,6 +278,7 @@ export type hooksParam = {
   input?: inputCallback;
   mediaInteaction?: mediaInteractionCallback;
   styleSheetRule?: styleSheetRuleCallback;
+  styleDeclaration?: styleDeclarationCallback;
   canvasMutation?: canvasMutationCallback;
   font?: fontCallback;
 };
@@ -407,6 +415,21 @@ export type styleSheetRuleParam = {
 
 export type styleSheetRuleCallback = (s: styleSheetRuleParam) => void;
 
+export type styleDeclarationParam = {
+  id: number;
+  index: number[];
+  set?: {
+    property: string;
+    value: string | null;
+    priority: string | undefined;
+  };
+  remove?: {
+    property: string;
+  };
+};
+
+export type styleDeclarationCallback = (s: styleDeclarationParam) => void;
+
 export type canvasMutationCallback = (p: canvasMutationParam) => void;
 
 export type canvasMutationParam = {

From 5857c7b718a62395a595744c57c989cf69e5f397 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 29 Aug 2021 22:42:03 +0800
Subject: [PATCH 430/524] update typing files

---
 packages/rrweb/typings/replay/index.d.ts      |  3 ++
 packages/rrweb/typings/replay/machine.d.ts    |  3 +-
 .../rrweb/typings/replay/virtual-styles.d.ts  | 22 +++++++++++--
 packages/rrweb/typings/types.d.ts             | 32 +++++++++++++++++--
 packages/rrweb/typings/utils.d.ts             |  2 +-
 5 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/packages/rrweb/typings/replay/index.d.ts b/packages/rrweb/typings/replay/index.d.ts
index 0511749f4f..2c49091b4b 100644
--- a/packages/rrweb/typings/replay/index.d.ts
+++ b/packages/rrweb/typings/replay/index.d.ts
@@ -24,6 +24,8 @@ export declare class Replayer {
     private mirror;
     private firstFullSnapshot;
     private newDocumentQueue;
+    private mousePos;
+    private touchActive;
     constructor(events: Array<eventWithTime | string>, config?: Partial<playerConfig>);
     on(event: string, handler: Handler): this;
     off(event: string, handler: Handler): this;
@@ -42,6 +44,7 @@ export declare class Replayer {
     resetCache(): void;
     private setupDom;
     private handleResize;
+    private applyEventsSynchronously;
     private getCastFn;
     private rebuildFullSnapshot;
     private insertStyleRules;
diff --git a/packages/rrweb/typings/replay/machine.d.ts b/packages/rrweb/typings/replay/machine.d.ts
index 3d82c1ec8a..5331d0092c 100644
--- a/packages/rrweb/typings/replay/machine.d.ts
+++ b/packages/rrweb/typings/replay/machine.d.ts
@@ -46,9 +46,10 @@ export declare type PlayerState = {
 export declare function discardPriorSnapshots(events: eventWithTime[], baselineTime: number): eventWithTime[];
 declare type PlayerAssets = {
     emitter: Emitter;
+    applyEventsSynchronously(events: Array<eventWithTime>): void;
     getCastFn(event: eventWithTime, isSync: boolean): () => void;
 };
-export declare function createPlayerService(context: PlayerContext, { getCastFn, emitter }: PlayerAssets): StateMachine.Service<PlayerContext, PlayerEvent, PlayerState>;
+export declare function createPlayerService(context: PlayerContext, { getCastFn, applyEventsSynchronously, emitter }: PlayerAssets): StateMachine.Service<PlayerContext, PlayerEvent, PlayerState>;
 export declare type SpeedContext = {
     normalSpeed: playerConfig['speed'];
     timer: Timer;
diff --git a/packages/rrweb/typings/replay/virtual-styles.d.ts b/packages/rrweb/typings/replay/virtual-styles.d.ts
index b219f8b946..11ebf52d1b 100644
--- a/packages/rrweb/typings/replay/virtual-styles.d.ts
+++ b/packages/rrweb/typings/replay/virtual-styles.d.ts
@@ -2,7 +2,9 @@ import { INode } from 'rrweb-snapshot';
 export declare enum StyleRuleType {
     Insert = 0,
     Remove = 1,
-    Snapshot = 2
+    Snapshot = 2,
+    SetProperty = 3,
+    RemoveProperty = 4
 }
 declare type InsertRule = {
     cssText: string;
@@ -17,9 +19,25 @@ declare type SnapshotRule = {
     type: StyleRuleType.Snapshot;
     cssTexts: string[];
 };
-export declare type VirtualStyleRules = Array<InsertRule | RemoveRule | SnapshotRule>;
+declare type SetPropertyRule = {
+    type: StyleRuleType.SetProperty;
+    index: number[];
+    property: string;
+    value: string | null;
+    priority: string | undefined;
+};
+declare type RemovePropertyRule = {
+    type: StyleRuleType.RemoveProperty;
+    index: number[];
+    property: string;
+};
+export declare type VirtualStyleRules = Array<InsertRule | RemoveRule | SnapshotRule | SetPropertyRule | RemovePropertyRule>;
 export declare type VirtualStyleRulesMap = Map<INode, VirtualStyleRules>;
 export declare function getNestedRule(rules: CSSRuleList, position: number[]): CSSGroupingRule;
+export declare function getPositionsAndIndex(nestedIndex: number[]): {
+    positions: number[];
+    index: number | undefined;
+};
 export declare function applyVirtualStyleRulesToNode(storedRules: VirtualStyleRules, styleNode: HTMLStyleElement): void;
 export declare function storeCSSRules(parentElement: HTMLStyleElement, virtualStyleRulesMap: VirtualStyleRulesMap): void;
 export {};
diff --git a/packages/rrweb/typings/types.d.ts b/packages/rrweb/typings/types.d.ts
index 22aa1020ab..3becc33017 100644
--- a/packages/rrweb/typings/types.d.ts
+++ b/packages/rrweb/typings/types.d.ts
@@ -71,7 +71,8 @@ export declare enum IncrementalSource {
     CanvasMutation = 9,
     Font = 10,
     Log = 11,
-    Drag = 12
+    Drag = 12,
+    StyleDeclaration = 13
 }
 export declare type mutationData = {
     source: IncrementalSource.Mutation;
@@ -99,13 +100,16 @@ export declare type mediaInteractionData = {
 export declare type styleSheetRuleData = {
     source: IncrementalSource.StyleSheetRule;
 } & styleSheetRuleParam;
+export declare type styleDeclarationData = {
+    source: IncrementalSource.StyleDeclaration;
+} & styleDeclarationParam;
 export declare type canvasMutationData = {
     source: IncrementalSource.CanvasMutation;
 } & canvasMutationParam;
 export declare type fontData = {
     source: IncrementalSource.Font;
 } & fontParam;
-export declare type incrementalData = mutationData | mousemoveData | mouseInteractionData | scrollData | viewportResizeData | inputData | mediaInteractionData | styleSheetRuleData | canvasMutationData | fontData;
+export declare type incrementalData = mutationData | mousemoveData | mouseInteractionData | scrollData | viewportResizeData | inputData | mediaInteractionData | styleSheetRuleData | canvasMutationData | fontData | styleDeclarationData;
 export declare type event = domContentLoadedEvent | loadedEvent | fullSnapshotEvent | incrementalSnapshotEvent | metaEvent | customEvent | pluginEvent;
 export declare type eventWithTime = event & {
     timestamp: number;
@@ -168,6 +172,7 @@ export declare type observerParam = {
     maskTextFn?: MaskTextFn;
     inlineStylesheet: boolean;
     styleSheetRuleCb: styleSheetRuleCallback;
+    styleDeclarationCb: styleDeclarationCallback;
     canvasMutationCb: canvasMutationCallback;
     fontCb: fontCallback;
     sampling: SamplingStrategy;
@@ -194,6 +199,7 @@ export declare type hooksParam = {
     input?: inputCallback;
     mediaInteaction?: mediaInteractionCallback;
     styleSheetRule?: styleSheetRuleCallback;
+    styleDeclaration?: styleDeclarationCallback;
     canvasMutation?: canvasMutationCallback;
     font?: fontCallback;
 };
@@ -255,6 +261,12 @@ export declare type mousePosition = {
     id: number;
     timeOffset: number;
 };
+export declare type mouseMovePos = {
+    x: number;
+    y: number;
+    id: number;
+    debugData: incrementalData;
+};
 export declare enum MouseInteractions {
     MouseUp = 0,
     MouseDown = 1,
@@ -265,7 +277,8 @@ export declare enum MouseInteractions {
     Blur = 6,
     TouchStart = 7,
     TouchMove_Departed = 8,
-    TouchEnd = 9
+    TouchEnd = 9,
+    TouchCancel = 10
 }
 declare type mouseInteractionParam = {
     type: MouseInteractions;
@@ -293,6 +306,19 @@ export declare type styleSheetRuleParam = {
     adds?: styleSheetAddRule[];
 };
 export declare type styleSheetRuleCallback = (s: styleSheetRuleParam) => void;
+export declare type styleDeclarationParam = {
+    id: number;
+    index: number[];
+    set?: {
+        property: string;
+        value: string | null;
+        priority: string | undefined;
+    };
+    remove?: {
+        property: string;
+    };
+};
+export declare type styleDeclarationCallback = (s: styleDeclarationParam) => void;
 export declare type canvasMutationCallback = (p: canvasMutationParam) => void;
 export declare type canvasMutationParam = {
     id: number;
diff --git a/packages/rrweb/typings/utils.d.ts b/packages/rrweb/typings/utils.d.ts
index a9139a8494..a3d0253285 100644
--- a/packages/rrweb/typings/utils.d.ts
+++ b/packages/rrweb/typings/utils.d.ts
@@ -1,4 +1,4 @@
-import { Mirror, throttleOptions, listenerHandler, hookResetter, blockClass, eventWithTime, addedNodeMutation, removedNodeMutation, textMutation, attributeMutation, mutationData, scrollData, inputData, DocumentDimension } from './types';
+import { Mirror, throttleOptions, listenerHandler, hookResetter, blockClass, addedNodeMutation, removedNodeMutation, textMutation, attributeMutation, mutationData, scrollData, inputData, DocumentDimension } from './types';
 import { INode, serializedNodeWithId } from 'rrweb-snapshot';
 export declare function on(type: string, fn: EventListenerOrEventListenerObject, target?: Document | Window): listenerHandler;
 export declare function createMirror(): Mirror;

From b711ff9114201a00028498ea9021452c113b3032 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 30 Aug 2021 21:40:58 +0800
Subject: [PATCH 431/524] hotfix rrweb es entry

---
 packages/rrweb/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index bdb87e22ec..3b28a333a1 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -23,7 +23,7 @@
     "rrweb"
   ],
   "main": "lib/rrweb-all.js",
-  "module": "es/rrweb/src/entries/all.js",
+  "module": "es/rrweb/packages/rrweb/src/entries/all.js",
   "unpkg": "dist/rrweb.js",
   "sideEffects": false,
   "typings": "typings/entries/all.d.ts",

From df75d58fb0d3b662b41a63a585c3ce2f7ef21f3c Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 30 Aug 2021 21:41:48 +0800
Subject: [PATCH 432/524] chore(release): publish %s

 - rrweb@1.0.4
 - rrweb-player@0.7.6
---
 packages/rrweb-player/package.json | 4 ++--
 packages/rrweb/package.json        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
index 15d07f4373..0c6c6d80ce 100644
--- a/packages/rrweb-player/package.json
+++ b/packages/rrweb-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^1.0.3"
+    "rrweb": "^1.0.4"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 3b28a333a1..66ae18555e 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",

From e9db702b48d9f54aa52e642c8bb5222a0e594964 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 1 Sep 2021 10:22:42 +0800
Subject: [PATCH 433/524] Bump tar from 4.4.17 to 4.4.19 (#686)

Bumps [tar](https://github.com/npm/node-tar) from 4.4.17 to 4.4.19.
- [Release notes](https://github.com/npm/node-tar/releases)
- [Changelog](https://github.com/npm/node-tar/blob/main/CHANGELOG.md)
- [Commits](https://github.com/npm/node-tar/compare/v4.4.17...v4.4.19)

---
updated-dependencies:
- dependency-name: tar
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index a7b965d054..26c0380c16 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8024,9 +8024,9 @@ tar-stream@^2.1.4:
     readable-stream "^3.1.1"
 
 tar@^4.4.12:
-  version "4.4.17"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.17.tgz#44be5e3fa8353ee1d11db3b1401561223a5c3985"
-  integrity sha512-q7OwXq6NTdcYIa+k58nEMV3j1euhDhGCs/VRw9ymx/PbH0jtIM2+VTgDE/BW3rbLkrBUXs5fzEKgic5oUciu7g==
+  version "4.4.19"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.19.tgz#2e4d7263df26f2b914dee10c825ab132123742f3"
+  integrity sha512-a20gEsvHnWe0ygBY8JbxoM4w3SJdhc7ZAuxkLqh+nvNQN2IOt0B5lLgM490X5Hl8FF0dl0tOf2ewFYAlIFgzVA==
   dependencies:
     chownr "^1.1.4"
     fs-minipass "^1.2.7"

From b068241f8e90f139cbfbb419c73eb128206ea793 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 2 Sep 2021 15:55:39 +0800
Subject: [PATCH 434/524] close #688, remove legacy counter A previous patch
 has refactored the canvas image loading process and it does not use <img />
 anymore, so the counter is no longer need.

commit: 4a72ff0b3cdf9920ea38bca8f69eedbfe52c99904a0036f3fc1cd7c1e0248a37R725
---
 packages/rrweb/src/replay/index.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 39bb6f468c..07d09b58d9 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -818,8 +818,6 @@ export class Replayer {
     };
     this.emitter.on(ReplayerEvents.Start, stateHandler);
     this.emitter.on(ReplayerEvents.Pause, stateHandler);
-    let count = 0;
-    let resolved = 0;
     for (const event of this.service.state.context.events) {
       if (
         event.type === EventType.IncrementalSnapshot &&
@@ -828,7 +826,6 @@ export class Replayer {
         typeof event.data.args[0] === 'string' &&
         !this.imageMap.has(event)
       ) {
-        count++;
         const canvas = document.createElement('canvas');
         const ctx = canvas.getContext('2d');
         const imgd = ctx?.createImageData(canvas.width, canvas.height);
@@ -837,9 +834,6 @@ export class Replayer {
         ctx?.putImageData(imgd!, 0, 0);
       }
     }
-    if (count !== resolved) {
-      this.service.send({ type: 'PAUSE' });
-    }
   }
 
   private applyIncremental(

From 5b40470dcf4b280fb2f41f6b369755898be7baed Mon Sep 17 00:00:00 2001
From: Yuku Kotani <poyo0315@gmail.com>
Date: Fri, 10 Sep 2021 00:51:33 +0900
Subject: [PATCH 435/524] chek is CSSGroupingRule supported (#693)

---
 packages/rrweb/src/record/observer.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index afa38201be..a97e114f88 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -60,6 +60,8 @@ type WindowWithAngularZone = Window & {
 
 export const mutationBuffers: MutationBuffer[] = [];
 
+const isCSSGroupingRuleSupported = typeof CSSGroupingRule !== "undefined"
+
 function getEventTarget(event: Event): EventTarget | null {
   try {
     if ('composedPath' in event) {
@@ -476,7 +478,7 @@ function initInputObserver(
 function getNestedCSSRulePositions(rule: CSSRule): number[] {
   const positions: number[] = [];
   function recurse(childRule: CSSRule, pos: number[]) {
-    if (childRule.parentRule instanceof CSSGroupingRule) {
+    if (isCSSGroupingRuleSupported && childRule.parentRule instanceof CSSGroupingRule) {
       const rules = Array.from(
         (childRule.parentRule as CSSGroupingRule).cssRules,
       );
@@ -520,6 +522,13 @@ function initStyleSheetObserver(
     return deleteRule.apply(this, arguments);
   };
 
+  if (!isCSSGroupingRuleSupported) {
+    return () => {
+      CSSStyleSheet.prototype.insertRule = insertRule;
+      CSSStyleSheet.prototype.deleteRule = deleteRule;
+    };
+  }
+
   const groupingInsertRule = CSSGroupingRule.prototype.insertRule;
   CSSGroupingRule.prototype.insertRule = function (
     rule: string,

From 83ef4138aa71c267a9ab127480b63826ba81cb57 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 11 Sep 2021 22:46:06 +0800
Subject: [PATCH 436/524] update lerna scripts

---
 lerna.json   | 2 +-
 package.json | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/lerna.json b/lerna.json
index 5dabe20e89..cfec287607 100644
--- a/lerna.json
+++ b/lerna.json
@@ -4,7 +4,7 @@
   "useWorkspaces": true,
   "command": {
     "publish": {
-      "message": "chore(release): publish %s"
+      "message": "chore(release): publish new version"
     }
   }
 }
diff --git a/package.json b/package.json
index 4de9a14422..9b90a36033 100644
--- a/package.json
+++ b/package.json
@@ -21,5 +21,8 @@
   ],
   "devDependencies": {
     "lerna": "^4.0.0"
+  },
+  "scripts": {
+    "lerna": "lerna"
   }
 }

From c864e5b0e9de1a18296dde2ef39d896cf4acae69 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 11 Sep 2021 22:46:25 +0800
Subject: [PATCH 437/524] chore(release): publish new version

 - rrweb@1.0.5
 - rrweb-player@0.7.7
---
 packages/rrweb-player/package.json | 4 ++--
 packages/rrweb/package.json        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
index 0c6c6d80ce..cdd2a9516f 100644
--- a/packages/rrweb-player/package.json
+++ b/packages/rrweb-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^1.0.4"
+    "rrweb": "^1.0.5"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 66ae18555e..2154750623 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",

From e630cfb88e089dae57ea8e94f1f31dff1a229cb8 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Mon, 13 Sep 2021 14:06:25 +0200
Subject: [PATCH 438/524] Keep blocked root elements as placeholders (#696)

* Keep blocked root elements as placeholders

`serializeNode` turns blocked elements into placeholder nodes so we need to make sure we don't remove these elements from the mutations when they get added.
We do however need to keep removing any children of these blocked elements from getting added or mutated.

* Update packages/rrweb/src/record/mutation.ts
---
 packages/rrweb/src/record/mutation.ts         |  19 +-
 .../__snapshots__/integration.test.ts.snap    | 206 ++++++++++++++++++
 packages/rrweb/test/integration.test.ts       |  24 +-
 3 files changed, 236 insertions(+), 13 deletions(-)

diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index fd4ac71060..4ba50a5407 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -262,9 +262,6 @@ export default class MutationBuffer {
         ns = ns && ns.nextSibling;
         nextId = ns && this.mirror.getId((ns as unknown) as INode);
       }
-      if (nextId === -1 && isBlocked(n.nextSibling, this.blockClass)) {
-        nextId = null;
-      }
       return nextId;
     };
     const pushAdd = (n: Node) => {
@@ -534,11 +531,7 @@ export default class MutationBuffer {
           const parentId = isShadowRoot(m.target)
             ? this.mirror.getId((m.target.host as unknown) as INode)
             : this.mirror.getId(m.target as INode);
-          if (
-            isBlocked(n, this.blockClass) ||
-            isBlocked(m.target, this.blockClass) ||
-            isIgnored(n)
-          ) {
+          if (isBlocked(m.target, this.blockClass) || isIgnored(n)) {
             return;
           }
           // removed node has not been serialized yet, just remove it from the Set
@@ -582,9 +575,7 @@ export default class MutationBuffer {
   };
 
   private genAdds = (n: Node | INode, target?: Node | INode) => {
-    if (isBlocked(n, this.blockClass)) {
-      return;
-    }
+    // parent was blocked, so we can ignore this node
     if (target && isBlocked(target, this.blockClass)) {
       return;
     }
@@ -604,7 +595,11 @@ export default class MutationBuffer {
       this.addedSet.add(n);
       this.droppedSet.delete(n);
     }
-    n.childNodes.forEach((childN) => this.genAdds(childN));
+
+    // if this node is blocked `serializeNode` will turn it into a placeholder element
+    // but we have to remove it's children otherwise they will be added as placeholders too
+    if (!isBlocked(n, this.blockClass))
+      n.childNodes.forEach((childN) => this.genAdds(childN));
   };
 }
 
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index ca16fefbef..d336859c8b 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -332,6 +332,212 @@ exports[`block 1`] = `
 ]"
 `;
 
+exports[`block 2 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 1,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {
+              \\"lang\\": \\"en\\"
+            },
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 5
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"charset\\": \\"UTF-8\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"name\\": \\"viewport\\",
+                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 8
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"http-equiv\\": \\"X-UA-Compatible\\",
+                      \\"content\\": \\"ie=edge\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 10
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 11
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"title\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"Block record\\",
+                        \\"id\\": 13
+                      }
+                    ],
+                    \\"id\\": 12
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 14
+                  }
+                ],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 3,
+                \\"textContent\\": \\"\\\\n  \\",
+                \\"id\\": 15
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 17
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"div\\",
+                    \\"attributes\\": {
+                      \\"class\\": \\"rr-block\\",
+                      \\"rr_width\\": \\"50px\\",
+                      \\"rr_height\\": \\"50px\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 18
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
+                    \\"id\\": 19
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 21
+                      }
+                    ],
+                    \\"id\\": 20
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 22
+                  }
+                ],
+                \\"id\\": 16
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 16,
+          \\"nextId\\": 18,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"button\\",
+            \\"attributes\\": {
+              \\"class\\": \\"rr-block\\",
+              \\"rr_width\\": \\"100px\\",
+              \\"rr_height\\": \\"100px\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 23
+          }
+        }
+      ]
+    }
+  }
+]"
+`;
+
 exports[`canvas 1`] = `
 "[
   {
diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
index 5949b75325..723f890076 100644
--- a/packages/rrweb/test/integration.test.ts
+++ b/packages/rrweb/test/integration.test.ts
@@ -185,7 +185,9 @@ describe('record integration tests', function (this: ISuite) {
     // toggle the select box
     await page.click('.select2-container', { clickCount: 2, delay: 100 });
     // test storage of !important style
-    await page.evaluate('document.getElementById("select2-drop").setAttribute("style", document.getElementById("select2-drop").style.cssText + "color:black !important")');
+    await page.evaluate(
+      'document.getElementById("select2-drop").setAttribute("style", document.getElementById("select2-drop").style.cssText + "color:black !important")',
+    );
     const snapshots = await page.evaluate('window.snapshots');
     assertSnapshot(snapshots, __filename, 'select2');
   });
@@ -317,6 +319,26 @@ describe('record integration tests', function (this: ISuite) {
     assertSnapshot(snapshots, __filename, 'block');
   });
 
+  it('should not record blocked elements dynamically added', async () => {
+    const page: puppeteer.Page = await this.browser.newPage();
+    await page.goto('about:blank');
+    await page.setContent(getHtml.call(this, 'block.html'));
+
+    await page.evaluate(() => {
+      const el = document.createElement('button');
+      el.className = 'rr-block';
+      el.style.width = '100px';
+      el.style.height = '100px';
+      el.innerText = 'Should not be recorded';
+
+      const nextElement = document.querySelector('.rr-block')!;
+      nextElement.parentNode!.insertBefore(el, nextElement);
+    });
+
+    const snapshots = await page.evaluate('window.snapshots');
+    assertSnapshot(snapshots, __filename, 'block 2');
+  });
+
   it('should record DOM node movement 1', async () => {
     const page: puppeteer.Page = await this.browser.newPage();
     await page.goto('about:blank');

From 875e3c5bd29a83893476eeba9cc56d3e5f14eb32 Mon Sep 17 00:00:00 2001
From: Lucky Feng <f18846188605@gmail.com>
Date: Wed, 15 Sep 2021 19:25:19 +0800
Subject: [PATCH 439/524] improve config definition in the console plugin
 (#704)

One user encountered a type problem(https://rrweb.slack.com/archives/C01BYDC5C93/p1631683830050900). It turns out that definition of LogReplayConfig isn't perfect
---
 packages/rrweb/src/plugins/console/record/index.ts       | 2 +-
 packages/rrweb/src/plugins/console/replay/index.ts       | 4 ++--
 packages/rrweb/typings/plugins/console/record/index.d.ts | 2 +-
 packages/rrweb/typings/plugins/console/replay/index.d.ts | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/rrweb/src/plugins/console/record/index.ts b/packages/rrweb/src/plugins/console/record/index.ts
index b7c83555e7..6f2547d6f0 100644
--- a/packages/rrweb/src/plugins/console/record/index.ts
+++ b/packages/rrweb/src/plugins/console/record/index.ts
@@ -19,7 +19,7 @@ export type StringifyOptions = {
 };
 
 type LogRecordOptions = {
-  level?: LogLevel[] | undefined;
+  level?: LogLevel[];
   lengthThreshold?: number;
   stringifyOptions?: StringifyOptions;
   logger?: Logger;
diff --git a/packages/rrweb/src/plugins/console/replay/index.ts b/packages/rrweb/src/plugins/console/replay/index.ts
index 8b68e72f19..372a770a40 100644
--- a/packages/rrweb/src/plugins/console/replay/index.ts
+++ b/packages/rrweb/src/plugins/console/replay/index.ts
@@ -13,8 +13,8 @@ import {
 type ReplayLogger = Partial<Record<LogLevel, (data: LogData) => void>>;
 
 type LogReplayConfig = {
-  level?: LogLevel[] | undefined;
-  replayLogger: ReplayLogger | undefined;
+  level?: LogLevel[];
+  replayLogger?: ReplayLogger;
 };
 
 const ORIGINAL_ATTRIBUTE_NAME = '__rrweb_original__';
diff --git a/packages/rrweb/typings/plugins/console/record/index.d.ts b/packages/rrweb/typings/plugins/console/record/index.d.ts
index 22d9c9ce15..ffda9a87a1 100644
--- a/packages/rrweb/typings/plugins/console/record/index.d.ts
+++ b/packages/rrweb/typings/plugins/console/record/index.d.ts
@@ -5,7 +5,7 @@ export declare type StringifyOptions = {
     depthOfLimit: number;
 };
 declare type LogRecordOptions = {
-    level?: LogLevel[] | undefined;
+    level?: LogLevel[];
     lengthThreshold?: number;
     stringifyOptions?: StringifyOptions;
     logger?: Logger;
diff --git a/packages/rrweb/typings/plugins/console/replay/index.d.ts b/packages/rrweb/typings/plugins/console/replay/index.d.ts
index 4f2bb8155c..823560cc9c 100644
--- a/packages/rrweb/typings/plugins/console/replay/index.d.ts
+++ b/packages/rrweb/typings/plugins/console/replay/index.d.ts
@@ -2,8 +2,8 @@ import { LogLevel, LogData } from '../record';
 import { ReplayPlugin } from '../../../types';
 declare type ReplayLogger = Partial<Record<LogLevel, (data: LogData) => void>>;
 declare type LogReplayConfig = {
-    level?: LogLevel[] | undefined;
-    replayLogger: ReplayLogger | undefined;
+    level?: LogLevel[];
+    replayLogger?: ReplayLogger;
 };
 export declare const getReplayConsolePlugin: (options?: LogReplayConfig) => ReplayPlugin;
 export {};

From e441a05928c8ad92407a26cd67280a68227707ab Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Thu, 16 Sep 2021 12:59:39 +0200
Subject: [PATCH 440/524] prefer yarn over npm (#705)

---
 README.md       | 2 +-
 README.zh_CN.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index a50c2ec7b4..b4e539fd74 100644
--- a/README.md
+++ b/README.md
@@ -60,7 +60,7 @@ Since we want the record and replay sides to share a strongly typed data structu
 [Typescript handbook](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html)
 
 1. Fork the rrweb component repository you want to patch.
-2. Run `npm install` to install required dependencies.
+2. Run `yarn install` to install required dependencies.
 3. Patch the code and pass all the tests.
 4. Push the code and create a pull request.
 
diff --git a/README.zh_CN.md b/README.zh_CN.md
index ca3a2c3275..c6431ff66a 100644
--- a/README.zh_CN.md
+++ b/README.zh_CN.md
@@ -58,7 +58,7 @@ rrweb 主要由 3 部分组成：
 [Typescript 手册](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html)
 
 1. Fork 需要修改的 rrweb 组件仓库
-2. `npm install` 安装所需依赖
+2. `yarn install` 安装所需依赖
 3. 修改代码并通过测试
 4. 提交代码，创建 pull request
 

From e67eb1cd09d5db9e3921f94d94d00ef04cd56dd3 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Tue, 21 Sep 2021 16:36:45 +0200
Subject: [PATCH 441/524] Fixes #690 (#701)

Add nested css recording for safari
---
 packages/rrweb/src/record/observer.ts | 134 +++++++++++++++++---------
 packages/rrweb/test/record.test.ts    |  17 +++-
 2 files changed, 107 insertions(+), 44 deletions(-)

diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index a97e114f88..c5d6c8da5a 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -60,7 +60,10 @@ type WindowWithAngularZone = Window & {
 
 export const mutationBuffers: MutationBuffer[] = [];
 
-const isCSSGroupingRuleSupported = typeof CSSGroupingRule !== "undefined"
+const isCSSGroupingRuleSupported = typeof CSSGroupingRule !== 'undefined';
+const isCSSMediaRuleSupported = typeof CSSMediaRule !== 'undefined';
+const isCSSSupportsRuleSupported = typeof CSSSupportsRule !== 'undefined';
+const isCSSConditionRuleSupported = typeof CSSConditionRule !== 'undefined';
 
 function getEventTarget(event: Event): EventTarget | null {
   try {
@@ -475,12 +478,32 @@ function initInputObserver(
   };
 }
 
+type GroupingCSSRule =
+  | CSSGroupingRule
+  | CSSMediaRule
+  | CSSSupportsRule
+  | CSSConditionRule;
+type GroupingCSSRuleTypes =
+  | typeof CSSGroupingRule
+  | typeof CSSMediaRule
+  | typeof CSSSupportsRule
+  | typeof CSSConditionRule;
+
 function getNestedCSSRulePositions(rule: CSSRule): number[] {
   const positions: number[] = [];
   function recurse(childRule: CSSRule, pos: number[]) {
-    if (isCSSGroupingRuleSupported && childRule.parentRule instanceof CSSGroupingRule) {
+    if (
+      (isCSSGroupingRuleSupported &&
+        childRule.parentRule instanceof CSSGroupingRule) ||
+      (isCSSMediaRuleSupported &&
+        childRule.parentRule instanceof CSSMediaRule) ||
+      (isCSSSupportsRuleSupported &&
+        childRule.parentRule instanceof CSSSupportsRule) ||
+      (isCSSConditionRuleSupported &&
+        childRule.parentRule instanceof CSSConditionRule)
+    ) {
       const rules = Array.from(
-        (childRule.parentRule as CSSGroupingRule).cssRules,
+        (childRule.parentRule as GroupingCSSRule).cssRules,
       );
       const index = rules.indexOf(childRule);
       pos.unshift(index);
@@ -522,53 +545,78 @@ function initStyleSheetObserver(
     return deleteRule.apply(this, arguments);
   };
 
-  if (!isCSSGroupingRuleSupported) {
-    return () => {
-      CSSStyleSheet.prototype.insertRule = insertRule;
-      CSSStyleSheet.prototype.deleteRule = deleteRule;
-    };
+  const supportedNestedCSSRuleTypes: {
+    [key: string]: GroupingCSSRuleTypes;
+  } = {};
+  if (isCSSGroupingRuleSupported) {
+    supportedNestedCSSRuleTypes['CSSGroupingRule'] = CSSGroupingRule;
+  } else {
+    // Some browsers (Safari) don't support CSSGroupingRule
+    // https://caniuse.com/?search=cssgroupingrule
+    // fall back to monkey patching classes that would have inherited from CSSGroupingRule
+
+    if (isCSSMediaRuleSupported) {
+      supportedNestedCSSRuleTypes['CSSMediaRule'] = CSSMediaRule;
+    }
+    if (isCSSConditionRuleSupported) {
+      supportedNestedCSSRuleTypes['CSSConditionRule'] = CSSConditionRule;
+    }
+    if (isCSSSupportsRuleSupported) {
+      supportedNestedCSSRuleTypes['CSSSupportsRule'] = CSSSupportsRule;
+    }
   }
 
-  const groupingInsertRule = CSSGroupingRule.prototype.insertRule;
-  CSSGroupingRule.prototype.insertRule = function (
-    rule: string,
-    index?: number,
-  ) {
-    const id = mirror.getId(this.parentStyleSheet.ownerNode as INode);
-    if (id !== -1) {
-      cb({
-        id,
-        adds: [
-          {
-            rule,
-            index: [
-              ...getNestedCSSRulePositions(this),
-              index || 0, // defaults to 0
-            ],
-          },
-        ],
-      });
-    }
-    return groupingInsertRule.apply(this, arguments);
-  };
+  const unmodifiedFunctions: {
+    [key: string]: {
+      insertRule: (rule: string, index?: number) => number;
+      deleteRule: (index: number) => void;
+    };
+  } = {};
 
-  const groupingDeleteRule = CSSGroupingRule.prototype.deleteRule;
-  CSSGroupingRule.prototype.deleteRule = function (index: number) {
-    const id = mirror.getId(this.parentStyleSheet.ownerNode as INode);
-    if (id !== -1) {
-      cb({
-        id,
-        removes: [{ index: [...getNestedCSSRulePositions(this), index] }],
-      });
-    }
-    return groupingDeleteRule.apply(this, arguments);
-  };
+  Object.entries(supportedNestedCSSRuleTypes).forEach(([typeKey, type]) => {
+    unmodifiedFunctions[typeKey] = {
+      insertRule: (type as GroupingCSSRuleTypes).prototype.insertRule,
+      deleteRule: (type as GroupingCSSRuleTypes).prototype.deleteRule,
+    };
+
+    type.prototype.insertRule = function (rule: string, index?: number) {
+      const id = mirror.getId(this.parentStyleSheet.ownerNode as INode);
+      if (id !== -1) {
+        cb({
+          id,
+          adds: [
+            {
+              rule,
+              index: [
+                ...getNestedCSSRulePositions(this),
+                index || 0, // defaults to 0
+              ],
+            },
+          ],
+        });
+      }
+      return unmodifiedFunctions[typeKey].insertRule.apply(this, arguments);
+    };
+
+    type.prototype.deleteRule = function (index: number) {
+      const id = mirror.getId(this.parentStyleSheet.ownerNode as INode);
+      if (id !== -1) {
+        cb({
+          id,
+          removes: [{ index: [...getNestedCSSRulePositions(this), index] }],
+        });
+      }
+      return unmodifiedFunctions[typeKey].deleteRule.apply(this, arguments);
+    };
+  });
 
   return () => {
     CSSStyleSheet.prototype.insertRule = insertRule;
     CSSStyleSheet.prototype.deleteRule = deleteRule;
-    CSSGroupingRule.prototype.insertRule = groupingInsertRule;
-    CSSGroupingRule.prototype.deleteRule = groupingDeleteRule;
+    Object.entries(supportedNestedCSSRuleTypes).forEach(([typeKey, type]) => {
+      type.prototype.insertRule = unmodifiedFunctions[typeKey].insertRule;
+      type.prototype.deleteRule = unmodifiedFunctions[typeKey].deleteRule;
+    });
   };
 }
 
diff --git a/packages/rrweb/test/record.test.ts b/packages/rrweb/test/record.test.ts
index 8dbbe5a7f0..a14c7cd10b 100644
--- a/packages/rrweb/test/record.test.ts
+++ b/packages/rrweb/test/record.test.ts
@@ -251,7 +251,7 @@ describe('record', function (this: ISuite) {
     assertSnapshot(this.events, __filename, 'stylesheet-rules');
   });
 
-  it('captures nested stylesheet rules', async () => {
+  const captureNestedStylesheetRulesTest = async () => {
     await this.page.evaluate(() => {
       const { record } = ((window as unknown) as IWindow).rrweb;
 
@@ -295,6 +295,21 @@ describe('record', function (this: ISuite) {
     expect(addRuleCount).to.equal(2);
     expect(removeRuleCount).to.equal(1);
     assertSnapshot(this.events, __filename, 'nested-stylesheet-rules');
+  };
+  it('captures nested stylesheet rules', captureNestedStylesheetRulesTest);
+
+  describe('without CSSGroupingRule support', () => {
+    // Safari currently doesn't support CSSGroupingRule, let's test without that
+    // https://caniuse.com/?search=CSSGroupingRule
+    beforeEach(async () => {
+      await this.page.evaluate(() => {
+        /* @ts-ignore: override CSSGroupingRule */
+        CSSGroupingRule = undefined;
+      });
+      // load a fresh rrweb recorder without CSSGroupingRule
+      await this.page.evaluate(this.code);
+    });
+    it('captures nested stylesheet rules', captureNestedStylesheetRulesTest);
   });
 });
 

From 971c08adc1217c8cf0adb336bf017583e23d6112 Mon Sep 17 00:00:00 2001
From: John Pham <john@highlight.run>
Date: Sat, 25 Sep 2021 08:54:49 -0700
Subject: [PATCH 442/524] Set the blockClass element's background color to the
 inherited color (#707)

* Set the blockClass element's background color to the inherited color

* Update snapshot

* Update snapshot
---
 packages/rrweb/src/replay/styles/inject-style.ts       |  2 +-
 .../rrweb/test/__snapshots__/replayer.test.ts.snap     | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/rrweb/src/replay/styles/inject-style.ts b/packages/rrweb/src/replay/styles/inject-style.ts
index b8b7f09f75..f501856194 100644
--- a/packages/rrweb/src/replay/styles/inject-style.ts
+++ b/packages/rrweb/src/replay/styles/inject-style.ts
@@ -1,5 +1,5 @@
 const rules: (blockClass: string) => string[] = (blockClass: string) => [
-  `.${blockClass} { background: #ccc }`,
+  `.${blockClass} { background: currentColor }`,
   'noscript { display: none !important; }',
 ];
 
diff --git a/packages/rrweb/test/__snapshots__/replayer.test.ts.snap b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
index c95a251b66..31f96f22e2 100644
--- a/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
@@ -43,7 +43,7 @@ file-frame-2
 file-cid-0
 @charset \\"utf-8\\";
 
-.rr-block { background: rgb(204, 204, 204); }
+.rr-block { background: currentcolor; }
 
 noscript { display: none !important; }
 
@@ -91,7 +91,7 @@ file-frame-2
 file-cid-0
 @charset \\"utf-8\\";
 
-.rr-block { background: rgb(204, 204, 204); }
+.rr-block { background: currentcolor; }
 
 noscript { display: none !important; }
 
@@ -138,7 +138,7 @@ file-frame-5
 file-cid-0
 @charset \\"utf-8\\";
 
-.rr-block { background: rgb(204, 204, 204); }
+.rr-block { background: currentcolor; }
 
 noscript { display: none !important; }
 
@@ -216,7 +216,7 @@ file-frame-5
 file-cid-0
 @charset \\"utf-8\\";
 
-.rr-block { background: rgb(204, 204, 204); }
+.rr-block { background: currentcolor; }
 
 noscript { display: none !important; }
 
@@ -296,7 +296,7 @@ file-frame-5
 file-cid-0
 @charset \\"utf-8\\";
 
-.rr-block { background: rgb(204, 204, 204); }
+.rr-block { background: currentcolor; }
 
 noscript { display: none !important; }
 

From fe4386037692139289845680dd1fa061133a13b8 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 29 Sep 2021 17:56:50 +0800
Subject: [PATCH 443/524] fix props typo

---
 packages/rrweb/src/record/observer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index c5d6c8da5a..205483c81d 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -820,7 +820,7 @@ function initFontObserver(cb: fontCallback): listenerHandler {
 
   handlers.push(() => {
     // tslint:disable-next-line: no-any
-    (window as any).FonFace = originalFontFace;
+    (window as any).FontFace = originalFontFace;
   });
   handlers.push(restoreHandler);
 

From b2f2b8e4ef6f68cca59185916346dcf88a0fb56e Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Fri, 1 Oct 2021 07:56:17 +0100
Subject: [PATCH 444/524] Monkeypatch each iframe (#716)

* `setTimeout` and `clearTimeout` are global functions. Think the window versions of them were for the following reason: https://stackoverflow.com/questions/60245787/

* Comments and extra test here helped me understand which inserts were expected and which are to be ignored

* Add a test for the style setProperty/removeProperty added in #671

* Add a test to ensure that listeners get added correctly in nested iframes - particularly important for those which rely on prototype monkeypatching

* Pass in the window object from the current iframe so that monkeypatching applies to all windows

* Satisfy typings

* No need to insert an iframe as there's one already set up for us

* Enable the console logger to also intercept log messages within iframes

* There's no tests for FontFace but presumably the monkeypatching here works similarly to the others
---
 .../rrweb/src/plugins/console/record/index.ts |  15 +-
 packages/rrweb/src/record/observer.ts         |  87 +++--
 packages/rrweb/src/replay/index.ts            |   6 +-
 packages/rrweb/src/types.ts                   |   2 +-
 packages/rrweb/src/utils.ts                   |   6 +-
 .../__snapshots__/integration.test.ts.snap    |  82 ++++
 .../test/__snapshots__/record.test.ts.snap    | 350 ++++++++++++++++++
 packages/rrweb/test/integration.test.ts       |   7 +
 packages/rrweb/test/record.test.ts            |  91 ++++-
 .../typings/plugins/console/record/index.d.ts |   2 +-
 packages/rrweb/typings/types.d.ts             |   2 +-
 11 files changed, 600 insertions(+), 50 deletions(-)

diff --git a/packages/rrweb/src/plugins/console/record/index.ts b/packages/rrweb/src/plugins/console/record/index.ts
index 6f2547d6f0..7fc0040bf6 100644
--- a/packages/rrweb/src/plugins/console/record/index.ts
+++ b/packages/rrweb/src/plugins/console/record/index.ts
@@ -22,7 +22,7 @@ type LogRecordOptions = {
   level?: LogLevel[];
   lengthThreshold?: number;
   stringifyOptions?: StringifyOptions;
-  logger?: Logger;
+  logger?: Logger | string;
 };
 
 const defaultLogOptions: LogRecordOptions = {
@@ -48,7 +48,7 @@ const defaultLogOptions: LogRecordOptions = {
     'warn',
   ],
   lengthThreshold: 1000,
-  logger: console,
+  logger: 'console',
 };
 
 export type LogData = {
@@ -106,12 +106,19 @@ export type Logger = {
 
 function initLogObserver(
   cb: logCallback,
+  win: Window,  // top window or in an iframe
   logOptions: LogRecordOptions,
 ): listenerHandler {
-  const logger = logOptions.logger;
-  if (!logger) {
+  const loggerType = logOptions.logger;
+  if (!loggerType) {
     return () => {};
   }
+  let logger: Logger;
+  if (typeof loggerType === 'string') {
+    logger = (win as any)[loggerType];
+  } else {
+    logger = loggerType;
+  }
   let logCount = 0;
   const cancelHandlers: listenerHandler[] = [];
   // add listener to thrown errors
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index 205483c81d..a944418363 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -519,10 +519,11 @@ function getNestedCSSRulePositions(rule: CSSRule): number[] {
 
 function initStyleSheetObserver(
   cb: styleSheetRuleCallback,
+  win: Window,
   mirror: Mirror,
 ): listenerHandler {
-  const insertRule = CSSStyleSheet.prototype.insertRule;
-  CSSStyleSheet.prototype.insertRule = function (rule: string, index?: number) {
+  const insertRule = (win as any).CSSStyleSheet.prototype.insertRule;
+  (win as any).CSSStyleSheet.prototype.insertRule = function (rule: string, index?: number) {
     const id = mirror.getId(this.ownerNode as INode);
     if (id !== -1) {
       cb({
@@ -533,8 +534,8 @@ function initStyleSheetObserver(
     return insertRule.apply(this, arguments);
   };
 
-  const deleteRule = CSSStyleSheet.prototype.deleteRule;
-  CSSStyleSheet.prototype.deleteRule = function (index: number) {
+  const deleteRule = (win as any).CSSStyleSheet.prototype.deleteRule;
+  (win as any).CSSStyleSheet.prototype.deleteRule = function (index: number) {
     const id = mirror.getId(this.ownerNode as INode);
     if (id !== -1) {
       cb({
@@ -549,20 +550,20 @@ function initStyleSheetObserver(
     [key: string]: GroupingCSSRuleTypes;
   } = {};
   if (isCSSGroupingRuleSupported) {
-    supportedNestedCSSRuleTypes['CSSGroupingRule'] = CSSGroupingRule;
+    supportedNestedCSSRuleTypes['CSSGroupingRule'] = (win as any).CSSGroupingRule;
   } else {
     // Some browsers (Safari) don't support CSSGroupingRule
     // https://caniuse.com/?search=cssgroupingrule
     // fall back to monkey patching classes that would have inherited from CSSGroupingRule
 
     if (isCSSMediaRuleSupported) {
-      supportedNestedCSSRuleTypes['CSSMediaRule'] = CSSMediaRule;
+      supportedNestedCSSRuleTypes['CSSMediaRule'] = (win as any).CSSMediaRule;
     }
     if (isCSSConditionRuleSupported) {
-      supportedNestedCSSRuleTypes['CSSConditionRule'] = CSSConditionRule;
+      supportedNestedCSSRuleTypes['CSSConditionRule'] = (win as any).CSSConditionRule;
     }
     if (isCSSSupportsRuleSupported) {
-      supportedNestedCSSRuleTypes['CSSSupportsRule'] = CSSSupportsRule;
+      supportedNestedCSSRuleTypes['CSSSupportsRule'] = (win as any).CSSSupportsRule;
     }
   }
 
@@ -611,8 +612,8 @@ function initStyleSheetObserver(
   });
 
   return () => {
-    CSSStyleSheet.prototype.insertRule = insertRule;
-    CSSStyleSheet.prototype.deleteRule = deleteRule;
+    (win as any).CSSStyleSheet.prototype.insertRule = insertRule;
+    (win as any).CSSStyleSheet.prototype.deleteRule = deleteRule;
     Object.entries(supportedNestedCSSRuleTypes).forEach(([typeKey, type]) => {
       type.prototype.insertRule = unmodifiedFunctions[typeKey].insertRule;
       type.prototype.deleteRule = unmodifiedFunctions[typeKey].deleteRule;
@@ -622,14 +623,15 @@ function initStyleSheetObserver(
 
 function initStyleDeclarationObserver(
   cb: styleDeclarationCallback,
+  win: Window,
   mirror: Mirror,
 ): listenerHandler {
-  const setProperty = CSSStyleDeclaration.prototype.setProperty;
-  CSSStyleDeclaration.prototype.setProperty = function (
+  const setProperty = (win as any).CSSStyleDeclaration.prototype.setProperty;
+  (win as any).CSSStyleDeclaration.prototype.setProperty = function (
     this: CSSStyleDeclaration,
-    property,
-    value,
-    priority,
+    property: string,
+    value: string,
+    priority: string,
   ) {
     const id = mirror.getId(
       (this.parentRule?.parentStyleSheet?.ownerNode as unknown) as INode,
@@ -648,10 +650,10 @@ function initStyleDeclarationObserver(
     return setProperty.apply(this, arguments);
   };
 
-  const removeProperty = CSSStyleDeclaration.prototype.removeProperty;
-  CSSStyleDeclaration.prototype.removeProperty = function (
+  const removeProperty = (win as any).CSSStyleDeclaration.prototype.removeProperty;
+  (win as any).CSSStyleDeclaration.prototype.removeProperty = function (
     this: CSSStyleDeclaration,
-    property,
+    property: string,
   ) {
     const id = mirror.getId(
       (this.parentRule?.parentStyleSheet?.ownerNode as unknown) as INode,
@@ -669,8 +671,8 @@ function initStyleDeclarationObserver(
   };
 
   return () => {
-    CSSStyleDeclaration.prototype.setProperty = setProperty;
-    CSSStyleDeclaration.prototype.removeProperty = removeProperty;
+    (win as any).CSSStyleDeclaration.prototype.setProperty = setProperty;
+    (win as any).CSSStyleDeclaration.prototype.removeProperty = removeProperty;
   };
 }
 
@@ -702,22 +704,23 @@ function initMediaInteractionObserver(
 
 function initCanvasMutationObserver(
   cb: canvasMutationCallback,
+  win: Window,
   blockClass: blockClass,
   mirror: Mirror,
 ): listenerHandler {
-  const props = Object.getOwnPropertyNames(CanvasRenderingContext2D.prototype);
+  const props = Object.getOwnPropertyNames((win as any).CanvasRenderingContext2D.prototype);
   const handlers: listenerHandler[] = [];
   for (const prop of props) {
     try {
       if (
-        typeof CanvasRenderingContext2D.prototype[
+        typeof (win as any).CanvasRenderingContext2D.prototype[
           prop as keyof CanvasRenderingContext2D
         ] !== 'function'
       ) {
         continue;
       }
       const restoreHandler = patch(
-        CanvasRenderingContext2D.prototype,
+        (win as any).CanvasRenderingContext2D.prototype,
         prop,
         function (original) {
           return function (
@@ -758,7 +761,7 @@ function initCanvasMutationObserver(
       handlers.push(restoreHandler);
     } catch {
       const hookHandler = hookSetter<CanvasRenderingContext2D>(
-        CanvasRenderingContext2D.prototype,
+        (win as any).CanvasRenderingContext2D.prototype,
         prop,
         {
           set(v) {
@@ -779,14 +782,19 @@ function initCanvasMutationObserver(
   };
 }
 
-function initFontObserver(cb: fontCallback): listenerHandler {
+function initFontObserver(
+  cb: fontCallback,
+  doc: Document,
+): listenerHandler {
+  const win = doc.defaultView;
+
   const handlers: listenerHandler[] = [];
 
   const fontMap = new WeakMap<FontFace, fontParam>();
 
-  const originalFontFace = FontFace;
+  const originalFontFace = (win as any).FontFace;
   // tslint:disable-next-line: no-any
-  (window as any).FontFace = function FontFace(
+  (win as any).FontFace = function FontFace(
     family: string,
     source: string | ArrayBufferView,
     descriptors?: FontFaceDescriptors,
@@ -805,7 +813,7 @@ function initFontObserver(cb: fontCallback): listenerHandler {
     return fontFace;
   };
 
-  const restoreHandler = patch(document.fonts, 'add', function (original) {
+  const restoreHandler = patch(doc.fonts, 'add', function (original) {
     return function (this: FontFaceSet, fontFace: FontFace) {
       setTimeout(() => {
         const p = fontMap.get(fontFace);
@@ -820,7 +828,7 @@ function initFontObserver(cb: fontCallback): listenerHandler {
 
   handlers.push(() => {
     // tslint:disable-next-line: no-any
-    (window as any).FontFace = originalFontFace;
+    (win as any).FontFace = originalFontFace;
   });
   handlers.push(restoreHandler);
 
@@ -971,22 +979,35 @@ export function initObservers(
     o.blockClass,
     o.mirror,
   );
+
+  const currentWindow = o.doc.defaultView as Window;  // basically document.window
+
   const styleSheetObserver = initStyleSheetObserver(
     o.styleSheetRuleCb,
+    currentWindow,
     o.mirror,
   );
   const styleDeclarationObserver = initStyleDeclarationObserver(
     o.styleDeclarationCb,
+    currentWindow,
     o.mirror,
   );
   const canvasMutationObserver = o.recordCanvas
-    ? initCanvasMutationObserver(o.canvasMutationCb, o.blockClass, o.mirror)
-    : () => {};
-  const fontObserver = o.collectFonts ? initFontObserver(o.fontCb) : () => {};
+    ? initCanvasMutationObserver(
+      o.canvasMutationCb,
+      currentWindow,
+      o.blockClass,
+      o.mirror,
+    ) : () => {};
+  const fontObserver = o.collectFonts ? initFontObserver(o.fontCb, o.doc) : () => {};
   // plugins
   const pluginHandlers: listenerHandler[] = [];
   for (const plugin of o.plugins) {
-    pluginHandlers.push(plugin.observer(plugin.callback, plugin.options));
+    pluginHandlers.push(plugin.observer(
+      plugin.callback,
+      currentWindow,
+      plugin.options,
+    ));
   }
 
   return () => {
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 07d09b58d9..40e4726775 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -759,7 +759,7 @@ export class Replayer {
     const head = this.iframe.contentDocument?.head;
     if (head) {
       const unloadSheets: Set<HTMLLinkElement> = new Set();
-      let timer: number;
+      let timer: ReturnType<typeof setTimeout> | -1;
       let beforeLoadState = this.service.state;
       const stateHandler = () => {
         beforeLoadState = this.service.state;
@@ -784,7 +784,7 @@ export class Replayer {
                 }
                 this.emitter.emit(ReplayerEvents.LoadStylesheetEnd);
                 if (timer) {
-                  window.clearTimeout(timer);
+                  clearTimeout(timer);
                 }
                 unsubscribe();
               }
@@ -796,7 +796,7 @@ export class Replayer {
         // find some unload sheets after iterate
         this.service.send({ type: 'PAUSE' });
         this.emitter.emit(ReplayerEvents.LoadStylesheetStart);
-        timer = window.setTimeout(() => {
+        timer = setTimeout(() => {
           if (beforeLoadState.matches('playing')) {
             this.play(this.getCurrentTime());
           }
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index a596f64630..7442456735 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -201,7 +201,7 @@ export type SamplingStrategy = Partial<{
 
 export type RecordPlugin<TOptions = unknown> = {
   name: string;
-  observer: (cb: Function, options: TOptions) => listenerHandler;
+  observer: (cb: Function, win: Window, options: TOptions) => listenerHandler;
   options: TOptions;
 };
 
diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts
index b92b44e929..c61f7afdf7 100644
--- a/packages/rrweb/src/utils.ts
+++ b/packages/rrweb/src/utils.ts
@@ -111,7 +111,7 @@ export function throttle<T>(
   wait: number,
   options: throttleOptions = {},
 ) {
-  let timeout: number | null = null;
+  let timeout: ReturnType<typeof setTimeout> | null = null;
   let previous = 0;
   // tslint:disable-next-line: only-arrow-functions
   return function (arg: T) {
@@ -124,13 +124,13 @@ export function throttle<T>(
     let args = arguments;
     if (remaining <= 0 || remaining > wait) {
       if (timeout) {
-        window.clearTimeout(timeout);
+        clearTimeout(timeout);
         timeout = null;
       }
       previous = now;
       func.apply(context, args);
     } else if (!timeout && options.trailing !== false) {
-      timeout = window.setTimeout(() => {
+      timeout = setTimeout(() => {
         previous = options.leading === false ? 0 : Date.now();
         timeout = null;
         func.apply(context, args);
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index d336859c8b..33a448051f 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -3347,6 +3347,88 @@ exports[`log 1`] = `
         \\"payload\\": []
       }
     }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 16,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"iframe\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"id\\": 21
+          }
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"adds\\": [
+        {
+          \\"parentId\\": 21,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 0,
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"html\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"head\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 22,
+                    \\"id\\": 24
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"body\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 22,
+                    \\"id\\": 25
+                  }
+                ],
+                \\"rootId\\": 22,
+                \\"id\\": 23
+              }
+            ],
+            \\"id\\": 22
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"isAttachIframe\\": true
+    }
+  },
+  {
+    \\"type\\": 6,
+    \\"data\\": {
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"log\\",
+        \\"trace\\": [],
+        \\"payload\\": [
+          \\"\\\\\\"from iframe\\\\\\"\\"
+        ]
+      }
+    }
   }
 ]"
 `;
diff --git a/packages/rrweb/test/__snapshots__/record.test.ts.snap b/packages/rrweb/test/__snapshots__/record.test.ts.snap
index 4845431bd9..23b50a5615 100644
--- a/packages/rrweb/test/__snapshots__/record.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/record.test.ts.snap
@@ -329,6 +329,234 @@ exports[`custom-event 1`] = `
 ]"
 `;
 
+exports[`iframe-stylesheet-mutations 1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 3
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 5
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"iframe\\",
+                    \\"attributes\\": {
+                      \\"srcdoc\\": \\"<button>Mysterious Button</button>\\"
+                    },
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n        </body>\\\\n      </html>\\\\n    \\",
+                        \\"id\\": 7
+                      }
+                    ],
+                    \\"id\\": 6
+                  }
+                ],
+                \\"id\\": 4
+              }
+            ],
+            \\"id\\": 2
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"adds\\": [
+        {
+          \\"parentId\\": 6,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 0,
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"html\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"head\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 8,
+                    \\"id\\": 10
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"body\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"button\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"Mysterious Button\\",
+                            \\"rootId\\": 8,
+                            \\"id\\": 13
+                          }
+                        ],
+                        \\"rootId\\": 8,
+                        \\"id\\": 12
+                      }
+                    ],
+                    \\"rootId\\": 8,
+                    \\"id\\": 11
+                  }
+                ],
+                \\"rootId\\": 8,
+                \\"id\\": 9
+              }
+            ],
+            \\"id\\": 8
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"isAttachIframe\\": true
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 10,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"style\\",
+            \\"attributes\\": {
+              \\"_cssText\\": \\"body { background: rgb(0, 0, 0); }@media  {\\\\n  body { background: rgb(0, 0, 0); }\\\\n}\\"
+            },
+            \\"childNodes\\": [],
+            \\"rootId\\": 8,
+            \\"id\\": 14
+          }
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 8,
+      \\"id\\": 14,
+      \\"adds\\": [
+        {
+          \\"rule\\": \\"body { color: #fff; }\\"
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 8,
+      \\"id\\": 14,
+      \\"adds\\": [
+        {
+          \\"rule\\": \\"body { color: #ccc; }\\",
+          \\"index\\": [
+            2,
+            0
+          ]
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 8,
+      \\"id\\": 14,
+      \\"removes\\": [
+        {
+          \\"index\\": 0
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 13,
+      \\"id\\": 14,
+      \\"set\\": {
+        \\"property\\": \\"color\\",
+        \\"value\\": \\"green\\"
+      },
+      \\"index\\": [
+        0
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 8,
+      \\"id\\": 14,
+      \\"removes\\": [
+        {
+          \\"index\\": [
+            1,
+            0
+          ]
+        }
+      ]
+    }
+  }
+]"
+`;
+
 exports[`nested-stylesheet-rules 1`] = `
 "[
   {
@@ -471,6 +699,128 @@ exports[`nested-stylesheet-rules 1`] = `
 ]"
 `;
 
+exports[`stylesheet-properties 1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 3
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 5
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"input\\",
+                    \\"attributes\\": {
+                      \\"type\\": \\"text\\",
+                      \\"size\\": \\"40\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
+                    \\"id\\": 7
+                  }
+                ],
+                \\"id\\": 4
+              }
+            ],
+            \\"id\\": 2
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 3,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"style\\",
+            \\"attributes\\": {
+              \\"_cssText\\": \\"body { background: rgb(0, 0, 0); }\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 8
+          }
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 13,
+      \\"id\\": 8,
+      \\"set\\": {
+        \\"property\\": \\"color\\",
+        \\"value\\": \\"green\\"
+      },
+      \\"index\\": [
+        0
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 13,
+      \\"id\\": 8,
+      \\"remove\\": {
+        \\"property\\": \\"background\\"
+      },
+      \\"index\\": [
+        0
+      ]
+    }
+  }
+]"
+`;
+
 exports[`stylesheet-rules 1`] = `
 "[
   {
diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
index 723f890076..7a9c77950e 100644
--- a/packages/rrweb/test/integration.test.ts
+++ b/packages/rrweb/test/integration.test.ts
@@ -471,8 +471,15 @@ describe('record integration tests', function (this: ISuite) {
       console.trace('trace');
       console.warn('warn');
       console.clear();
+      const iframe = document.createElement('iframe');
+      document.body.appendChild(iframe);
     });
 
+    await page.frames()[1].evaluate(() => {
+      console.log('from iframe');
+    });
+
+
     const snapshots = await page.evaluate('window.snapshots');
     assertSnapshot(snapshots, __filename, 'log');
   });
diff --git a/packages/rrweb/test/record.test.ts b/packages/rrweb/test/record.test.ts
index a14c7cd10b..884a274933 100644
--- a/packages/rrweb/test/record.test.ts
+++ b/packages/rrweb/test/record.test.ts
@@ -220,9 +220,11 @@ describe('record', function (this: ISuite) {
       document.head.appendChild(styleElement);
 
       const styleSheet = <CSSStyleSheet>styleElement.sheet;
+      // begin: pre-serialization
       const ruleIdx0 = styleSheet.insertRule('body { background: #000; }');
       const ruleIdx1 = styleSheet.insertRule('body { background: #111; }');
       styleSheet.deleteRule(ruleIdx1);
+      // end: pre-serialization
       setTimeout(() => {
         styleSheet.insertRule('body { color: #fff; }');
       }, 0);
@@ -239,14 +241,15 @@ describe('record', function (this: ISuite) {
         e.type === EventType.IncrementalSnapshot &&
         e.data.source === IncrementalSource.StyleSheetRule,
     );
-    const addRuleCount = styleSheetRuleEvents.filter((e) =>
+    const addRules = styleSheetRuleEvents.filter((e) =>
       Boolean((e.data as styleSheetRuleData).adds),
-    ).length;
+    );
     const removeRuleCount = styleSheetRuleEvents.filter((e) =>
       Boolean((e.data as styleSheetRuleData).removes),
     ).length;
-    // sync insert/delete should be ignored
-    expect(addRuleCount).to.equal(2);
+    // pre-serialization insert/delete should be ignored
+    expect(addRules.length).to.equal(2);
+    expect((addRules[0].data as styleSheetRuleData).adds).to.deep.include({rule: "body { color: #fff; }"});
     expect(removeRuleCount).to.equal(1);
     assertSnapshot(this.events, __filename, 'stylesheet-rules');
   });
@@ -311,6 +314,30 @@ describe('record', function (this: ISuite) {
     });
     it('captures nested stylesheet rules', captureNestedStylesheetRulesTest);
   });
+
+  it('captures style property changes', async () => {
+    await this.page.evaluate(() => {
+      const { record } = ((window as unknown) as IWindow).rrweb;
+
+      record({
+        emit: ((window as unknown) as IWindow).emit,
+      });
+
+      const styleElement = document.createElement('style');
+      document.head.appendChild(styleElement);
+
+      const styleSheet = <CSSStyleSheet>styleElement.sheet;
+      styleSheet.insertRule('body { background: #000; }');
+      setTimeout(() => {
+        (styleSheet.cssRules[0] as CSSStyleRule).style.setProperty('color', 'green');
+        (styleSheet.cssRules[0] as CSSStyleRule).style.removeProperty('background');
+      }, 0);
+    });
+    await this.page.waitForTimeout(50);
+    assertSnapshot(this.events, __filename, 'stylesheet-properties');
+  });
+
+
 });
 
 describe('record iframes', function (this: ISuite) {
@@ -350,4 +377,60 @@ describe('record iframes', function (this: ISuite) {
       EventType.IncrementalSnapshot,
     ]);
   });
+
+  it('captures stylesheet mutations in iframes', async () => {
+    await this.page.evaluate(() => {
+      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,
+      });
+
+      const iframe = document.querySelector('iframe');
+      // outer timeout is needed to wait for initStyleSheetObserver on iframe to be set up
+      setTimeout(() => {
+
+        const idoc = (iframe as HTMLIFrameElement).contentDocument!;
+        const styleElement = idoc.createElement('style');
+
+        idoc.head.appendChild(styleElement);
+
+        const styleSheet = <CSSStyleSheet>styleElement.sheet;
+        styleSheet.insertRule('@media {}');
+        const atMediaRule = styleSheet.cssRules[0] as CSSMediaRule;
+        const atRuleIdx0 = atMediaRule.insertRule('body { background: #000; }', 0);
+        const ruleIdx0 = styleSheet.insertRule('body { background: #000; }');  // inserted before above
+        // pre-serialization insert/delete above should be ignored
+        setTimeout(() => {
+          styleSheet.insertRule('body { color: #fff; }');
+          atMediaRule.insertRule('body { color: #ccc; }', 0);
+        }, 0);
+        setTimeout(() => {
+          styleSheet.deleteRule(ruleIdx0);
+          (styleSheet.cssRules[0] as CSSStyleRule).style.setProperty('color', 'green');
+        }, 5);
+        setTimeout(() =>{
+          atMediaRule.deleteRule(atRuleIdx0);
+        }, 10);
+      }, 10);
+    });
+    await this.page.waitForTimeout(50);
+    const styleRelatedEvents = this.events.filter(
+      (e) =>
+        e.type === EventType.IncrementalSnapshot &&
+        (e.data.source === IncrementalSource.StyleSheetRule ||
+         e.data.source === IncrementalSource.StyleDeclaration),
+    );
+    const addRuleCount = styleRelatedEvents.filter((e) =>
+      Boolean((e.data as styleSheetRuleData).adds),
+    ).length;
+    const removeRuleCount = styleRelatedEvents.filter((e) =>
+      Boolean((e.data as styleSheetRuleData).removes),
+    ).length;
+    expect(styleRelatedEvents.length).to.equal(5);
+    expect(addRuleCount).to.equal(2);
+    expect(removeRuleCount).to.equal(2);
+    assertSnapshot(this.events, __filename, 'iframe-stylesheet-mutations');
+  });
+
 });
diff --git a/packages/rrweb/typings/plugins/console/record/index.d.ts b/packages/rrweb/typings/plugins/console/record/index.d.ts
index ffda9a87a1..a41ee5506b 100644
--- a/packages/rrweb/typings/plugins/console/record/index.d.ts
+++ b/packages/rrweb/typings/plugins/console/record/index.d.ts
@@ -8,7 +8,7 @@ declare type LogRecordOptions = {
     level?: LogLevel[];
     lengthThreshold?: number;
     stringifyOptions?: StringifyOptions;
-    logger?: Logger;
+    logger?: Logger | string;
 };
 export declare type LogData = {
     level: LogLevel;
diff --git a/packages/rrweb/typings/types.d.ts b/packages/rrweb/typings/types.d.ts
index 3becc33017..dda8f4b434 100644
--- a/packages/rrweb/typings/types.d.ts
+++ b/packages/rrweb/typings/types.d.ts
@@ -126,7 +126,7 @@ export declare type SamplingStrategy = Partial<{
 }>;
 export declare type RecordPlugin<TOptions = unknown> = {
     name: string;
-    observer: (cb: Function, options: TOptions) => listenerHandler;
+    observer: (cb: Function, win: Window, options: TOptions) => listenerHandler;
     options: TOptions;
 };
 export declare type recordOptions<T> = {

From 10375632ec1999db53d8eb3ed52f0c461dc3837c Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 1 Oct 2021 15:05:28 +0800
Subject: [PATCH 445/524] fix lint warning

---
 packages/rrweb/src/record/mutation.ts | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index 4ba50a5407..be6fe19b9d 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -483,29 +483,27 @@ export default class MutationBuffer {
             old.setAttribute('style', m.oldValue);
           }
           if (
-            item.attributes['style'] === undefined ||
-            item.attributes['style'] === null
+            item.attributes.style === undefined ||
+            item.attributes.style === null
           ) {
-            item.attributes['style'] = {};
+            item.attributes.style = {};
           }
-          const styleObj = item.attributes['style'] as styleAttributeValue;
-          for (let i = 0; i < target.style.length; i++) {
-            let pname = target.style[i];
+          const styleObj = item.attributes.style as styleAttributeValue;
+          for (const pname of Array.from(target.style)) {
             const newValue = target.style.getPropertyValue(pname);
             const newPriority = target.style.getPropertyPriority(pname);
             if (
-              newValue != old.style.getPropertyValue(pname) ||
-              newPriority != old.style.getPropertyPriority(pname)
+              newValue !== old.style.getPropertyValue(pname) ||
+              newPriority !== old.style.getPropertyPriority(pname)
             ) {
-              if (newPriority == '') {
+              if (newPriority === '') {
                 styleObj[pname] = newValue;
               } else {
                 styleObj[pname] = [newValue, newPriority];
               }
             }
           }
-          for (let i = 0; i < old.style.length; i++) {
-            let pname = old.style[i];
+          for (const pname of Array.from(old.style)) {
             if (
               target.style.getPropertyValue(pname) === '' ||
               !target.style.getPropertyValue(pname) // covering potential non-standard browsers

From 53492c1ee4bfac647ac15aaa0c4c563235ea978b Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Fri, 1 Oct 2021 15:27:45 +0800
Subject: [PATCH 446/524] improve type assertion, from #716

---
 .../rrweb/src/plugins/console/record/index.ts |   8 +-
 packages/rrweb/src/record/observer.ts         | 106 ++++++++++--------
 packages/rrweb/src/replay/index.ts            |   3 +-
 packages/rrweb/src/types.ts                   |  10 +-
 packages/rrweb/src/utils.ts                   |   5 +-
 5 files changed, 74 insertions(+), 58 deletions(-)

diff --git a/packages/rrweb/src/plugins/console/record/index.ts b/packages/rrweb/src/plugins/console/record/index.ts
index 7fc0040bf6..bd4e57495b 100644
--- a/packages/rrweb/src/plugins/console/record/index.ts
+++ b/packages/rrweb/src/plugins/console/record/index.ts
@@ -1,4 +1,4 @@
-import { listenerHandler, RecordPlugin } from '../../../types';
+import { listenerHandler, RecordPlugin, IWindow } from '../../../types';
 import { patch } from '../../../utils';
 import { ErrorStackParser, StackFrame } from './error-stack-parser';
 import { stringify } from './stringify';
@@ -22,7 +22,7 @@ type LogRecordOptions = {
   level?: LogLevel[];
   lengthThreshold?: number;
   stringifyOptions?: StringifyOptions;
-  logger?: Logger | string;
+  logger?: Logger | 'console';
 };
 
 const defaultLogOptions: LogRecordOptions = {
@@ -106,7 +106,7 @@ export type Logger = {
 
 function initLogObserver(
   cb: logCallback,
-  win: Window,  // top window or in an iframe
+  win: IWindow, // top window or in an iframe
   logOptions: LogRecordOptions,
 ): listenerHandler {
   const loggerType = logOptions.logger;
@@ -115,7 +115,7 @@ function initLogObserver(
   }
   let logger: Logger;
   if (typeof loggerType === 'string') {
-    logger = (win as any)[loggerType];
+    logger = win[loggerType];
   } else {
     logger = loggerType;
   }
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index a944418363..26cd1ef75f 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -44,15 +44,16 @@ import {
   fontParam,
   Mirror,
   styleDeclarationCallback,
+  IWindow,
 } from '../types';
 import MutationBuffer from './mutation';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
 
-type WindowWithStoredMutationObserver = Window & {
+type WindowWithStoredMutationObserver = IWindow & {
   __rrMutationObserver?: MutationObserver;
 };
-type WindowWithAngularZone = Window & {
+type WindowWithAngularZone = IWindow & {
   Zone?: {
     __symbol__?: (key: string) => string;
   };
@@ -519,11 +520,14 @@ function getNestedCSSRulePositions(rule: CSSRule): number[] {
 
 function initStyleSheetObserver(
   cb: styleSheetRuleCallback,
-  win: Window,
+  win: IWindow,
   mirror: Mirror,
 ): listenerHandler {
-  const insertRule = (win as any).CSSStyleSheet.prototype.insertRule;
-  (win as any).CSSStyleSheet.prototype.insertRule = function (rule: string, index?: number) {
+  const insertRule = win.CSSStyleSheet.prototype.insertRule;
+  win.CSSStyleSheet.prototype.insertRule = function (
+    rule: string,
+    index?: number,
+  ) {
     const id = mirror.getId(this.ownerNode as INode);
     if (id !== -1) {
       cb({
@@ -534,8 +538,8 @@ function initStyleSheetObserver(
     return insertRule.apply(this, arguments);
   };
 
-  const deleteRule = (win as any).CSSStyleSheet.prototype.deleteRule;
-  (win as any).CSSStyleSheet.prototype.deleteRule = function (index: number) {
+  const deleteRule = win.CSSStyleSheet.prototype.deleteRule;
+  win.CSSStyleSheet.prototype.deleteRule = function (index: number) {
     const id = mirror.getId(this.ownerNode as INode);
     if (id !== -1) {
       cb({
@@ -550,20 +554,20 @@ function initStyleSheetObserver(
     [key: string]: GroupingCSSRuleTypes;
   } = {};
   if (isCSSGroupingRuleSupported) {
-    supportedNestedCSSRuleTypes['CSSGroupingRule'] = (win as any).CSSGroupingRule;
+    supportedNestedCSSRuleTypes.CSSGroupingRule = win.CSSGroupingRule;
   } else {
     // Some browsers (Safari) don't support CSSGroupingRule
     // https://caniuse.com/?search=cssgroupingrule
     // fall back to monkey patching classes that would have inherited from CSSGroupingRule
 
     if (isCSSMediaRuleSupported) {
-      supportedNestedCSSRuleTypes['CSSMediaRule'] = (win as any).CSSMediaRule;
+      supportedNestedCSSRuleTypes.CSSMediaRule = win.CSSMediaRule;
     }
     if (isCSSConditionRuleSupported) {
-      supportedNestedCSSRuleTypes['CSSConditionRule'] = (win as any).CSSConditionRule;
+      supportedNestedCSSRuleTypes.CSSConditionRule = win.CSSConditionRule;
     }
     if (isCSSSupportsRuleSupported) {
-      supportedNestedCSSRuleTypes['CSSSupportsRule'] = (win as any).CSSSupportsRule;
+      supportedNestedCSSRuleTypes.CSSSupportsRule = win.CSSSupportsRule;
     }
   }
 
@@ -612,8 +616,8 @@ function initStyleSheetObserver(
   });
 
   return () => {
-    (win as any).CSSStyleSheet.prototype.insertRule = insertRule;
-    (win as any).CSSStyleSheet.prototype.deleteRule = deleteRule;
+    win.CSSStyleSheet.prototype.insertRule = insertRule;
+    win.CSSStyleSheet.prototype.deleteRule = deleteRule;
     Object.entries(supportedNestedCSSRuleTypes).forEach(([typeKey, type]) => {
       type.prototype.insertRule = unmodifiedFunctions[typeKey].insertRule;
       type.prototype.deleteRule = unmodifiedFunctions[typeKey].deleteRule;
@@ -623,11 +627,11 @@ function initStyleSheetObserver(
 
 function initStyleDeclarationObserver(
   cb: styleDeclarationCallback,
-  win: Window,
+  win: IWindow,
   mirror: Mirror,
 ): listenerHandler {
-  const setProperty = (win as any).CSSStyleDeclaration.prototype.setProperty;
-  (win as any).CSSStyleDeclaration.prototype.setProperty = function (
+  const setProperty = win.CSSStyleDeclaration.prototype.setProperty;
+  win.CSSStyleDeclaration.prototype.setProperty = function (
     this: CSSStyleDeclaration,
     property: string,
     value: string,
@@ -650,8 +654,8 @@ function initStyleDeclarationObserver(
     return setProperty.apply(this, arguments);
   };
 
-  const removeProperty = (win as any).CSSStyleDeclaration.prototype.removeProperty;
-  (win as any).CSSStyleDeclaration.prototype.removeProperty = function (
+  const removeProperty = win.CSSStyleDeclaration.prototype.removeProperty;
+  win.CSSStyleDeclaration.prototype.removeProperty = function (
     this: CSSStyleDeclaration,
     property: string,
   ) {
@@ -671,8 +675,8 @@ function initStyleDeclarationObserver(
   };
 
   return () => {
-    (win as any).CSSStyleDeclaration.prototype.setProperty = setProperty;
-    (win as any).CSSStyleDeclaration.prototype.removeProperty = removeProperty;
+    win.CSSStyleDeclaration.prototype.setProperty = setProperty;
+    win.CSSStyleDeclaration.prototype.removeProperty = removeProperty;
   };
 }
 
@@ -704,23 +708,25 @@ function initMediaInteractionObserver(
 
 function initCanvasMutationObserver(
   cb: canvasMutationCallback,
-  win: Window,
+  win: IWindow,
   blockClass: blockClass,
   mirror: Mirror,
 ): listenerHandler {
-  const props = Object.getOwnPropertyNames((win as any).CanvasRenderingContext2D.prototype);
+  const props = Object.getOwnPropertyNames(
+    win.CanvasRenderingContext2D.prototype,
+  );
   const handlers: listenerHandler[] = [];
   for (const prop of props) {
     try {
       if (
-        typeof (win as any).CanvasRenderingContext2D.prototype[
+        typeof win.CanvasRenderingContext2D.prototype[
           prop as keyof CanvasRenderingContext2D
         ] !== 'function'
       ) {
         continue;
       }
       const restoreHandler = patch(
-        (win as any).CanvasRenderingContext2D.prototype,
+        win.CanvasRenderingContext2D.prototype,
         prop,
         function (original) {
           return function (
@@ -761,7 +767,7 @@ function initCanvasMutationObserver(
       handlers.push(restoreHandler);
     } catch {
       const hookHandler = hookSetter<CanvasRenderingContext2D>(
-        (win as any).CanvasRenderingContext2D.prototype,
+        win.CanvasRenderingContext2D.prototype,
         prop,
         {
           set(v) {
@@ -782,19 +788,18 @@ function initCanvasMutationObserver(
   };
 }
 
-function initFontObserver(
-  cb: fontCallback,
-  doc: Document,
-): listenerHandler {
-  const win = doc.defaultView;
+function initFontObserver(cb: fontCallback, doc: Document): listenerHandler {
+  const win = doc.defaultView as IWindow;
+  if (!win) {
+    return () => {};
+  }
 
   const handlers: listenerHandler[] = [];
 
   const fontMap = new WeakMap<FontFace, fontParam>();
 
-  const originalFontFace = (win as any).FontFace;
-  // tslint:disable-next-line: no-any
-  (win as any).FontFace = function FontFace(
+  const originalFontFace = win.FontFace;
+  win.FontFace = (function FontFace(
     family: string,
     source: string | ArrayBufferView,
     descriptors?: FontFaceDescriptors,
@@ -811,7 +816,7 @@ function initFontObserver(
             JSON.stringify(Array.from(new Uint8Array(source as any))),
     });
     return fontFace;
-  };
+  } as unknown) as typeof FontFace;
 
   const restoreHandler = patch(doc.fonts, 'add', function (original) {
     return function (this: FontFaceSet, fontFace: FontFace) {
@@ -827,8 +832,7 @@ function initFontObserver(
   });
 
   handlers.push(() => {
-    // tslint:disable-next-line: no-any
-    (win as any).FontFace = originalFontFace;
+    win.FontFace = originalFontFace;
   });
   handlers.push(restoreHandler);
 
@@ -923,6 +927,11 @@ export function initObservers(
   o: observerParam,
   hooks: hooksParam = {},
 ): listenerHandler {
+  const currentWindow = o.doc.defaultView; // basically document.window
+  if (!currentWindow) {
+    return () => {};
+  }
+
   mergeHooks(o, hooks);
   const mutationObserver = initMutationObserver(
     o.mutationCb,
@@ -980,8 +989,6 @@ export function initObservers(
     o.mirror,
   );
 
-  const currentWindow = o.doc.defaultView as Window;  // basically document.window
-
   const styleSheetObserver = initStyleSheetObserver(
     o.styleSheetRuleCb,
     currentWindow,
@@ -994,20 +1001,21 @@ export function initObservers(
   );
   const canvasMutationObserver = o.recordCanvas
     ? initCanvasMutationObserver(
-      o.canvasMutationCb,
-      currentWindow,
-      o.blockClass,
-      o.mirror,
-    ) : () => {};
-  const fontObserver = o.collectFonts ? initFontObserver(o.fontCb, o.doc) : () => {};
+        o.canvasMutationCb,
+        currentWindow,
+        o.blockClass,
+        o.mirror,
+      )
+    : () => {};
+  const fontObserver = o.collectFonts
+    ? initFontObserver(o.fontCb, o.doc)
+    : () => {};
   // plugins
   const pluginHandlers: listenerHandler[] = [];
   for (const plugin of o.plugins) {
-    pluginHandlers.push(plugin.observer(
-      plugin.callback,
-      currentWindow,
-      plugin.options,
-    ));
+    pluginHandlers.push(
+      plugin.observer(plugin.callback, currentWindow, plugin.options),
+    );
   }
 
   return () => {
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 40e4726775..cd54819d6f 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -38,6 +38,7 @@ import {
   styleAttributeValue,
   styleValueWithPriority,
   mouseMovePos,
+  IWindow,
 } from '../types';
 import {
   createMirror,
@@ -449,7 +450,7 @@ export class Replayer {
         this.iframe.contentDocument,
       );
 
-      polyfill(this.iframe.contentWindow as Window & typeof globalThis);
+      polyfill(this.iframe.contentWindow as IWindow);
     }
   }
 
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index 7442456735..4f881ecb26 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -201,7 +201,7 @@ export type SamplingStrategy = Partial<{
 
 export type RecordPlugin<TOptions = unknown> = {
   name: string;
-  observer: (cb: Function, win: Window, options: TOptions) => listenerHandler;
+  observer: (cb: Function, win: IWindow, options: TOptions) => listenerHandler;
   options: TOptions;
 };
 
@@ -598,3 +598,11 @@ export type ElementState = {
 };
 
 export type KeepIframeSrcFn = (src: string) => boolean;
+
+declare global {
+  interface Window {
+    FontFace: typeof FontFace;
+  }
+}
+
+export type IWindow = Window & typeof globalThis;
diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts
index c61f7afdf7..8ae1635fe6 100644
--- a/packages/rrweb/src/utils.ts
+++ b/packages/rrweb/src/utils.ts
@@ -4,8 +4,6 @@ import {
   listenerHandler,
   hookResetter,
   blockClass,
-  eventWithTime,
-  EventType,
   IncrementalSource,
   addedNodeMutation,
   removedNodeMutation,
@@ -15,6 +13,7 @@ import {
   scrollData,
   inputData,
   DocumentDimension,
+  IWindow,
 } from './types';
 import {
   INode,
@@ -27,7 +26,7 @@ import {
 export function on(
   type: string,
   fn: EventListenerOrEventListenerObject,
-  target: Document | Window = document,
+  target: Document | IWindow = document,
 ): listenerHandler {
   const options = { capture: true, passive: true };
   target.addEventListener(type, fn, options);

From fe4342e8b8b60033862812805d2b2e8d13dba50a Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 2 Oct 2021 22:15:46 +0800
Subject: [PATCH 447/524] gc virtual style map when DOM has been removed

---
 packages/rrweb/src/replay/index.ts          |  4 +++-
 packages/rrweb/src/replay/virtual-styles.ts | 25 +++++++++++----------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index cd54819d6f..b2f7998d13 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -922,7 +922,6 @@ export class Replayer {
           case MouseInteractions.TouchStart:
           case MouseInteractions.TouchEnd:
             if (isSync) {
-              let touchActive: boolean | undefined;
               if (d.type === MouseInteractions.TouchStart) {
                 this.touchActive = true;
               } else if (d.type === MouseInteractions.TouchEnd) {
@@ -1263,6 +1262,9 @@ export class Replayer {
         }
         return this.warnNodeNotFound(d, mutation.id);
       }
+      if (this.virtualStyleRulesMap.has(target)) {
+        this.virtualStyleRulesMap.delete(target);
+      }
       let parent: INode | null | ShadowRoot = this.mirror.getNode(
         mutation.parentId,
       );
diff --git a/packages/rrweb/src/replay/virtual-styles.ts b/packages/rrweb/src/replay/virtual-styles.ts
index 5b3d51f977..f850df27c9 100644
--- a/packages/rrweb/src/replay/virtual-styles.ts
+++ b/packages/rrweb/src/replay/virtual-styles.ts
@@ -65,18 +65,22 @@ export function applyVirtualStyleRulesToNode(
   storedRules: VirtualStyleRules,
   styleNode: HTMLStyleElement,
 ) {
+  const { sheet } = styleNode;
+  if (!sheet) {
+    // styleNode without sheet means the DOM has been removed
+    // so the rules no longer need to be applied
+    return;
+  }
+
   storedRules.forEach((rule) => {
     if (rule.type === StyleRuleType.Insert) {
       try {
         if (Array.isArray(rule.index)) {
           const { positions, index } = getPositionsAndIndex(rule.index);
-          const nestedRule = getNestedRule(
-            styleNode.sheet!.cssRules,
-            positions,
-          );
+          const nestedRule = getNestedRule(sheet.cssRules, positions);
           nestedRule.insertRule(rule.cssText, index);
         } else {
-          styleNode.sheet?.insertRule(rule.cssText, rule.index);
+          sheet.insertRule(rule.cssText, rule.index);
         }
       } catch (e) {
         /**
@@ -88,13 +92,10 @@ export function applyVirtualStyleRulesToNode(
       try {
         if (Array.isArray(rule.index)) {
           const { positions, index } = getPositionsAndIndex(rule.index);
-          const nestedRule = getNestedRule(
-            styleNode.sheet!.cssRules,
-            positions,
-          );
+          const nestedRule = getNestedRule(sheet.cssRules, positions);
           nestedRule.deleteRule(index || 0);
         } else {
-          styleNode.sheet?.deleteRule(rule.index);
+          sheet.deleteRule(rule.index);
         }
       } catch (e) {
         /**
@@ -106,13 +107,13 @@ export function applyVirtualStyleRulesToNode(
       restoreSnapshotOfStyleRulesToNode(rule.cssTexts, styleNode);
     } else if (rule.type === StyleRuleType.SetProperty) {
       const nativeRule = (getNestedRule(
-        styleNode.sheet!.cssRules,
+        sheet.cssRules,
         rule.index,
       ) as unknown) as CSSStyleRule;
       nativeRule.style.setProperty(rule.property, rule.value, rule.priority);
     } else if (rule.type === StyleRuleType.RemoveProperty) {
       const nativeRule = (getNestedRule(
-        styleNode.sheet!.cssRules,
+        sheet.cssRules,
         rule.index,
       ) as unknown) as CSSStyleRule;
       nativeRule.style.removeProperty(rule.property);

From 179e7e77d7cbcddb186e92ea1d46a4ff94fd16d4 Mon Sep 17 00:00:00 2001
From: Phil Leggetter <phil@leggetter.co.uk>
Date: Wed, 6 Oct 2021 02:11:23 +0100
Subject: [PATCH 448/524] adds PostHog as users to the README (#719)

---
 README.md       | 19 ++++++++++++++-----
 README.zh_CN.md | 19 ++++++++++++++-----
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index b4e539fd74..cdcde1b4f5 100644
--- a/README.md
+++ b/README.md
@@ -117,8 +117,17 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
 
 ## Who's using rrweb
 
-<p align="center">
-  <a href="http://www.smartx.com/" target="_blank">
-    <img width="260px" src="https://www.rrweb.io/logos/smartx.png">
-  </a>
-</p>
+<table>
+  <tr>
+    <td align="center">
+      <a href="http://www.smartx.com/" target="_blank">
+        <img width="260px" src="https://www.rrweb.io/logos/smartx.png">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship" target="_blank">
+        <img width="260px" src="https://www.rrweb.io/logos/posthog.png">
+      </a>
+    </td>
+  </tr>
+</table>
diff --git a/README.zh_CN.md b/README.zh_CN.md
index c6431ff66a..6fc4d71620 100644
--- a/README.zh_CN.md
+++ b/README.zh_CN.md
@@ -115,8 +115,17 @@ rrweb 主要由 3 部分组成：
 
 ## Who's using rrweb
 
-<p align="center">
-  <a href="http://www.smartx.com/" target="_blank">
-    <img width="260px" src="https://www.rrweb.io/logos/smartx.png">
-  </a>
-</p>
+<table>
+  <tr>
+    <td align="center">
+      <a href="http://www.smartx.com/" target="_blank">
+        <img width="260px" src="https://www.rrweb.io/logos/smartx.png">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship" target="_blank">
+        <img width="260px" src="https://www.rrweb.io/logos/posthog.png">
+      </a>
+    </td>
+  </tr>
+</table>

From 4ff6e41877b9d0d4a3f6ddc1fc8ed9711c48a5ee Mon Sep 17 00:00:00 2001
From: Pavel Hurieiev <gppavel94@gmail.com>
Date: Wed, 6 Oct 2021 03:20:41 +0200
Subject: [PATCH 449/524] fix(rrweb-snapshot): don't exclude @import CSS rules
 from the output and use CSSRule.cssText instead when they throw an exception
 while accessing their CSSStyleSheet.cssRules property (#720)

---
 packages/rrweb-snapshot/src/snapshot.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index f2eccf5c4e..6f346e6e27 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -49,9 +49,13 @@ function getCssRulesString(s: CSSStyleSheet): string | null {
 }
 
 function getCssRuleString(rule: CSSRule): string {
-  return isCSSImportRule(rule)
-    ? getCssRulesString(rule.styleSheet) || ''
-    : rule.cssText;
+  let cssStringified = rule.cssText;
+  if (isCSSImportRule(rule)) {
+    try {
+      cssStringified = getCssRulesString(rule.styleSheet) || cssStringified;
+    } catch {}
+  }
+  return cssStringified;
 }
 
 function isCSSImportRule(rule: CSSRule): rule is CSSImportRule {

From 333ba182399190b8196f9d8eec759f2d574ada7e Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Wed, 6 Oct 2021 02:34:22 +0100
Subject: [PATCH 450/524] Record when a doc is in `compatMode` and trigger this
 mode upon replay (#697)

* Hygiene: clean up the xhtml namespace attribute; this is an artefact of the `serializeToString` method which we are using (I think) to be consistent with whitespace and to clean up invalid attributes. I'm removing as was confused as am adding tests related to doctypes

* Record when a document is in `compatMode` and trigger this mode on the iframe upon replay

 https://developer.mozilla.org/en-US/docs/Web/API/Document/compatMode

 the included DOCTYPE was picked up from https://stackoverflow.com/questions/18976213/ - there may be better ways of triggering compatMode

* Don't write an extra DOCTYPE if there's one already present in the snapshot. Rely instead on whatever doctype is there to trigger the BackCompat mode

* Modify to write the correct doctype if we can sniff xhtml - don't have any evidence that this will make a difference

* Dev convenience: Ignore files generated by editors

* Typo fix

* Was getting a 2000ms timeout on the 'before' hook I believe

* Change certain tests to go directly to their localhost page instead of loading the html content programmatically in order to avoid triggering an incorrect BackCompat mode (incorrect in that the html content has a correct doctype)

* Add test based on motivating site that had images lined up in a square which were all different sizes; very old style percentage width/height attributes were doing the right thing in quirksmode, which is what we are testing for here

* Fixup rrweb test html to include a valid doctype and avoid BackCompat to ensure we're not accidentally testing against quirks modes. I didn't find an elegant way of avoiding the `BackCompat` when adding a minimal iframe, so some BackCompat has slipped in here, I don't think there's much harm
---
 packages/rrweb-snapshot/src/rebuild.ts        |  14 +
 packages/rrweb-snapshot/src/snapshot.ts       |  20 +-
 packages/rrweb-snapshot/src/types.ts          |   1 +
 .../test/__snapshots__/integration.ts.snap    |  58 +-
 .../rrweb-snapshot/test/html/compat-mode.html |  14 +
 .../rrweb-snapshot/test/html/picture.html     |   2 +-
 .../test/images/compat-bottom.png             | Bin 0 -> 2503 bytes
 .../test/images/compat-top-left.png           | Bin 0 -> 2693 bytes
 .../test/images/compat-top-right.png          | Bin 0 -> 3049 bytes
 packages/rrweb-snapshot/test/integration.ts   |  78 ++-
 packages/rrweb-snapshot/typings/types.d.ts    |   1 +
 .../__snapshots__/integration.test.ts.snap    | 563 ++++++++++--------
 .../test/__snapshots__/record.test.ts.snap    | 233 +++++---
 packages/rrweb/test/html/move-node.html       |   1 +
 .../rrweb/test/html/mutation-observer.html    |   1 +
 packages/rrweb/test/html/password.html        |   1 +
 packages/rrweb/test/record.test.ts            |   2 +
 17 files changed, 607 insertions(+), 382 deletions(-)
 create mode 100644 packages/rrweb-snapshot/test/html/compat-mode.html
 create mode 100644 packages/rrweb-snapshot/test/images/compat-bottom.png
 create mode 100644 packages/rrweb-snapshot/test/images/compat-top-left.png
 create mode 100644 packages/rrweb-snapshot/test/images/compat-top-right.png

diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index 8459c379ce..2bcfa8b1e1 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -321,6 +321,20 @@ export function buildNodeWithSN(
     // close before open to make sure document was closed
     doc.close();
     doc.open();
+    if (n.compatMode === 'BackCompat' &&
+        (n.childNodes && n.childNodes[0].type !== NodeType.DocumentType)  // there isn't one already defined
+       ) {
+      // Trigger compatMode in the iframe
+      // this is needed as document.createElement('iframe') otherwise inherits a CSS1Compat mode from the parent replayer environment
+      if (n.childNodes[0].type === NodeType.Element &&
+          'xmlns' in n.childNodes[0].attributes &&
+          n.childNodes[0].attributes.xmlns === 'http://www.w3.org/1999/xhtml') {
+        // might as well use an xhtml doctype if we've got an xhtml namespace
+        doc.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">');
+      } else {
+        doc.write('<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "">');
+      }
+    }
     node = doc;
   }
 
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 6f346e6e27..ef312841d5 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -10,6 +10,7 @@ import {
   MaskTextFn,
   MaskInputFn,
   KeepIframeSrcFn,
+  documentNode,
 } from './types';
 import { isElement, isShadowRoot, maskInputValue } from './utils';
 
@@ -379,11 +380,20 @@ function serializeNode(
   }
   switch (n.nodeType) {
     case n.DOCUMENT_NODE:
-      return {
-        type: NodeType.Document,
-        childNodes: [],
-        rootId,
-      };
+      if ((n as HTMLDocument).compatMode !== 'CSS1Compat') {
+        return {
+          type: NodeType.Document,
+          childNodes: [],
+          compatMode: (n as HTMLDocument).compatMode,  // probably "BackCompat"
+          rootId,
+        }
+      } else {
+        return {
+          type: NodeType.Document,
+          childNodes: [],
+          rootId,
+        }
+      }
     case n.DOCUMENT_TYPE_NODE:
       return {
         type: NodeType.DocumentType,
diff --git a/packages/rrweb-snapshot/src/types.ts b/packages/rrweb-snapshot/src/types.ts
index e482394b57..8720783ee5 100644
--- a/packages/rrweb-snapshot/src/types.ts
+++ b/packages/rrweb-snapshot/src/types.ts
@@ -10,6 +10,7 @@ export enum NodeType {
 export type documentNode = {
   type: NodeType.Document;
   childNodes: serializedNodeWithId[];
+  compatMode?: string;
 };
 
 export type documentTypeNode = {
diff --git a/packages/rrweb-snapshot/test/__snapshots__/integration.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.ts.snap
index e087f79b2c..bb92551cde 100644
--- a/packages/rrweb-snapshot/test/__snapshots__/integration.ts.snap
+++ b/packages/rrweb-snapshot/test/__snapshots__/integration.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`[html file]: about-mozilla.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head>
+"<!DOCTYPE html><html><head>
   <title>The Book of Mozilla, 11:9</title>
   <style type=\\"text/css\\">
     html {
@@ -40,7 +40,7 @@ exports[`[html file]: about-mozilla.html 1`] = `
 `;
 
 exports[`[html file]: basic.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+"<!DOCTYPE html><html lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
@@ -50,7 +50,7 @@ exports[`[html file]: basic.html 1`] = `
 `;
 
 exports[`[html file]: block-element.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+"<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
     <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
@@ -74,8 +74,22 @@ exports[`[html file]: block-element.html 1`] = `
   </body></html>"
 `;
 
+exports[`[html file]: compat-mode.html 1`] = `
+"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><!-- no doctype! --><html><head>
+  <title>Compat Mode; image resizing</title>
+</head>
+<body>
+  <center>
+	<a href=\\"http://localhost:3030/html#\\" class=\\"should-be-square-shaped\\">
+	  <img width=\\"40%\\" height=\\"35%\\" src=\\"http://localhost:3030/images/compat-top-left.png\\" />
+	  <img width=\\"40%\\" height=\\"35%\\" src=\\"http://localhost:3030/images/compat-top-right.png\\" />
+	  <br /><img width=\\"80%\\" height=\\"20%\\" src=\\"http://localhost:3030/images/compat-bottom.png\\" /></a>
+  </center>
+</body></html>"
+`;
+
 exports[`[html file]: cors-style-sheet.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+"<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
     <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
@@ -87,7 +101,7 @@ exports[`[html file]: cors-style-sheet.html 1`] = `
 `;
 
 exports[`[html file]: dynamic-stylesheet.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+"<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
     <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
@@ -101,7 +115,7 @@ exports[`[html file]: dynamic-stylesheet.html 1`] = `
 `;
 
 exports[`[html file]: form-fields.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+"<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
     <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
@@ -135,7 +149,7 @@ exports[`[html file]: form-fields.html 1`] = `
 `;
 
 exports[`[html file]: hover.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+"<!DOCTYPE html><html lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
@@ -158,7 +172,7 @@ exports[`[html file]: hover.html 1`] = `
 `;
 
 exports[`[html file]: iframe.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+"<!DOCTYPE html><html lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
@@ -170,17 +184,17 @@ exports[`[html file]: iframe.html 1`] = `
 `;
 
 exports[`[html file]: iframe-inner.html 1`] = `
-"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body><button>inner iframe button</button>
+"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><html><head></head><body><button>inner iframe button</button>
 </body></html>"
 `;
 
 exports[`[html file]: invalid-attribute.html 1`] = `
-"<html xmlns=\\"http://www.w3.org/1999/xhtml\\" foo=\\"bar\\"><head></head><body>
+"<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><html foo=\\"bar\\"><head></head><body>
 </body></html>"
 `;
 
 exports[`[html file]: invalid-doctype.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+"<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
     <title>Invalid Doctype</title>
@@ -189,7 +203,7 @@ exports[`[html file]: invalid-doctype.html 1`] = `
 `;
 
 exports[`[html file]: invalid-tagname.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+"<!DOCTYPE html><html lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
@@ -203,7 +217,7 @@ exports[`[html file]: invalid-tagname.html 1`] = `
 `;
 
 exports[`[html file]: mask-text.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+"<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
     <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
@@ -218,7 +232,7 @@ exports[`[html file]: mask-text.html 1`] = `
 `;
 
 exports[`[html file]: picture.html 1`] = `
-"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
+"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\"><html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
     <picture>
       <source type=\\"image/webp\\" srcset=\\"http://localhost:3030/assets/img/characters/robot.webp\\" />
       <img src=\\"http://localhost:3030/assets/img/characters/robot.png\\" />
@@ -227,7 +241,7 @@ exports[`[html file]: picture.html 1`] = `
 `;
 
 exports[`[html file]: preload.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+"<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
     <title>Document</title>
@@ -238,7 +252,7 @@ exports[`[html file]: preload.html 1`] = `
 `;
 
 exports[`[html file]: shadow-dom.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+"<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
     <title>shadow DOM</title>
@@ -257,7 +271,7 @@ exports[`[html file]: shadow-dom.html 1`] = `
 `;
 
 exports[`[html file]: video.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+"<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
     <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
@@ -272,7 +286,7 @@ exports[`[html file]: video.html 1`] = `
 `;
 
 exports[`[html file]: with-relative-res.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+"<!DOCTYPE html><html lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
@@ -292,7 +306,7 @@ exports[`[html file]: with-relative-res.html 1`] = `
 `;
 
 exports[`[html file]: with-script.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+"<!DOCTYPE html><html lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
@@ -303,7 +317,7 @@ exports[`[html file]: with-script.html 1`] = `
 `;
 
 exports[`[html file]: with-style-sheet.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+"<!DOCTYPE html><html lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
@@ -314,7 +328,7 @@ exports[`[html file]: with-style-sheet.html 1`] = `
 `;
 
 exports[`[html file]: with-style-sheet-with-import.html 1`] = `
-"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
+"<!DOCTYPE html><html lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
@@ -456,7 +470,7 @@ exports[`iframe integration tests 1`] = `
 }"
 `;
 
-exports[`shadown DOM integration tests 1`] = `
+exports[`shadow DOM integration tests 1`] = `
 "{
   \\"type\\": 0,
   \\"childNodes\\": [
diff --git a/packages/rrweb-snapshot/test/html/compat-mode.html b/packages/rrweb-snapshot/test/html/compat-mode.html
new file mode 100644
index 0000000000..61b1544d38
--- /dev/null
+++ b/packages/rrweb-snapshot/test/html/compat-mode.html
@@ -0,0 +1,14 @@
+<!-- no doctype! -->
+<html>
+<head>
+  <title>Compat Mode; image resizing</title>
+</head>
+<body>
+  <center>
+	<a href="#" class="should-be-square-shaped">
+	  <img width="40%" height="35%" src="/images/compat-top-left.png">
+	  <img width="40%" height="35%" src="/images/compat-top-right.png">
+	  <br><img width="80%" height="20%" src="/images/compat-bottom.png"></a>
+  </center>
+</body>
+</html>
diff --git a/packages/rrweb-snapshot/test/html/picture.html b/packages/rrweb-snapshot/test/html/picture.html
index 27d83686e0..90d0b421a1 100644
--- a/packages/rrweb-snapshot/test/html/picture.html
+++ b/packages/rrweb-snapshot/test/html/picture.html
@@ -1,4 +1,4 @@
-<html>
+<html xmlns="http://www.w3.org/1999/xhtml">
   <body>
     <picture>
       <source type="image/webp" srcset="assets/img/characters/robot.webp" />
diff --git a/packages/rrweb-snapshot/test/images/compat-bottom.png b/packages/rrweb-snapshot/test/images/compat-bottom.png
new file mode 100644
index 0000000000000000000000000000000000000000..bc0267a61964622717d410067075a758e0fc0487
GIT binary patch
literal 2503
zcmb_e`BxGM7j;ffOqSR(Wuu{!HZrYF<D|JD6If=8mbs#%nG3n%iiCoVMou*iV`Y?<
zM(zue;u?X2M&-ESic5exiX;k}AOZp(^V|0a%sc0ucg{Wc-FMIZ>D{^H>27RfW@KPs
zVC-?$&D+3WlgPl}i&n!;dgQ<}&KCXHl6W>S#lYa0^}qcErVNVKgGVo2@Hw4VbzP^^
z@n^Xz^*Xhkv>*|#%2zu38vD7O&l_-~yq?$ZD<4ymN?U$w>MZ^n9~Yt*``N?oln-WN
ziPw+XhXetp*keiflY7M9c@|Xq)_R{RvkEh$SnYVUuZ>Nz@`Vih<RcE|8tw<4&3|SD
zWH=hK2=GiY;Fz3j>UqpNCHv5R05G^<&3navd;j8uwC|0y$H@+D-?RE`Mmf=kg{ql$
zt9{N=8CGxkzpnn9)KDy4w_q-{L};oI8&mQTma`?#bajmW`5IIq5t4_C>umj3O<Oj?
zTD&1Eg-txD8ukVoLxFzo?1fjh%$!<NlYk+*2r1h*L~?1C)*jriTfm6GekyfHY&-vt
zrUK3txd33BkXUj!FH1`w8L$MIXln4H{82IGB%ca|_=W}>hkhLN1Y7A8q1o+@W~z;V
zD9v2&WAPFuU>CL;pRzH+;1YUF-)U#BizYP-in3@%FCPNJzQk8&9kA>|9+j~>CI_Lk
zp%@0JL=y4orre$FuPEnO(jSuWT3XfyvK8Dq8N(RiL%z{3SqVytl_SMEWy{9ZwKp7v
ziY-Ozv}tQn8fA2{-g_7Jr7H>5b30PFI*dxSk+Bro!mn_yE(3@Ud^*eXo*bQ_@DWw1
zdY9dnq~qxurPgHIECn8aE@l4!-GsRppVlx8b)d9_E3zE@cVJ%@DI`!3u5Bbwt4R_;
zwPK;j#eS!1bbYP1%2jZU!QgA0cay;jO62lC10=g~l0v70>)5Cq*1crWji519LDrF<
zZkNl^i$xe??VtL*+U>M4p0$>vNy10xZWYCc@V|jlL2=D~C~7*?x$s{?6a5o5?CiAn
zJRIuh^05#2&H+)=!lj4Se5Fs@c3&M5usZK#iM7Y9_$6g7QAQUiAKqn2D&Srtw54wL
zO50ptF4H^iN#KwM9V_?y*gb)ClKJ4uhhNdkv&zI|<omEfw$z!6VC)VWFLDH7tF^tn
zqy72l&*mT#NJdHDtsqZgd^AFDsQm#D64?HlK8I+XI~9E%04Fwf%U><oQ%w6zXcO%E
zcoT8|ieyfZw+#|#+aeAxYZkCL^M7YdQ4(EBq8U>$(bw@|6y{R=95?nM87z)1gRFPm
z^$35y1u`ktT#Xw-pS(HHXpyla=P>*0&G|VIv`(+fhh(WZ#m(?bX6#RI3C-0UYjtb=
z#f#$8v4nvK8`jC>=Je2oGPu{Mb*^b{;@g!)0-pBq$a^!?5H?P9WSdYHqxnlDDN-h%
z7ImpIO9M&fSqhloP-s}uR$^MgXbE6~WzsX^)$|mkakG-8Y9eN5v<TG?G&?f&5#VrC
zM>wrqex24c5xGom3s!c_p8+N7X^^#ZeoiNxc9}pvv!E8uL_Nn%eK8{`yX{EJnXd0(
zUfgh8ALWk=MO8+S$+ACC1twmM!qM)Eg>dH;=MjbNA_yB_3a3^g-Ax5|_q~lvb&?T2
zeEA!DiV=$-?sX2f1@*kA-`*IEcahyyRpiA&iGO#(f7z;Wo82Z%UFM&lxZeT`=Z4lA
zc;!l%EeLyBgPxsT`IUpTCKFECQ`~3ai71H!eW8su?#N@OihSiYc^p)F%re9bTYDHt
zUo4kD(XiIWE@jp#EIi-dxgFw5Oq(mV=$O+YkI1gnD~^9fiG~P=`4Q~44xbtyDZZHm
zWK=UjTQue{;{8BEj^9P`<)D%~F)a)8K@k8ocaZEqYTZc~`G)|5Hgcfm5*h8!7|-IU
z?C#_BoWo*RaS>;AW$k`ub80V}xHR<)x(6Hii|Ao4lL?&~Y%Jn?L0x+hRqa&AMMgN;
zpBqlLyti#E^|&nM1lhi_LcOT{T-?Cd+?(LzP^B(Av1t%{m5r=oh@sfiKx9uC+I`>B
z8EUzO@wzUf_$5b?U_&*x>GGVVR=}xMTX6+20lmIesI7Qf{|SBP#**b$oC<(M-+#Ov
zLsm^%+}Erni%z8F*j=&PMi+-<Js_NG!0F0TE7Q_CUkxR*B6agIqytWluG9NnLDerM
z+1-u72xD~1iPh2uPM@qAPN}9hIvsuZeYS!bHQ_y)0WAhL)g|m?H(nr_3G;0|((0M%
zg0r~@e}`XU5H@Ev-x$GhmpTaCYx)bjtScgoQWJmlO?Mv3>5v}0t!I6SJ(qyqYazbx
z7sU)|7Z4|&mP(>>54KSbt_KfWNKXKH@fU}ZHidJb!xrrhK%VjMSCVRy6TL~Hk@U<b
zWV-K-LwmmaFn3;s^K-D_x}@IQd4cuWdYUyXpP)Y~%uP_{RRvxbtuMz>5+K<^a?o|r
zx99IZM^P+}BQR0r!n@d2&aU%!c}rN4dpl-|k2|WYt?DY|#r1j=u{VK@8I3*jB?XZ`
zn*`Vvj?<}g)2z{NTri@tNSNu-U9Y)65K~W0)#hpj_){LenPX?jLEG02&SwFfKb6Zd
zKXra<^F+x%A`=Y?`qNxxGgcafku-P+>#=UE0RH5<W=J;OqYMp@4v)w_-FW6c_8Qz)
zNVzNm;hwq2i`+M+idHo1TCFA#CKcsm#K4J=Yq2yombJb^-D8+u>97T|_FLU~7<49g
zWp`h%*S-j_`T#k7H7v7J6Tlk3Hff#_CuAp2#$B>)FL(ida&_eC8FKM42s)(-EVIV{
zB|%R!AO8b5*@%6>p(}6lRGfQWdu^YebfA#T_`I3EY1K5rRls(SCfXGF-3n1~)aCM@
zm1e5vUG$G&BgT4OCbgmr$uz5Bc&m0_6cZk*>c@YqP&K6-D<Cji&6uraAhL-wFaL!M
zQF<jIfO-Lwo%X_<z*qY(&un(U!Ym2(&4RD5Jx>`@1%%?6b?;G*GCo+HrRau`rHWr|
zfm@~T>|znrlQD&}<G@~+6z8}&O@c1&02X9w1}8QC0*vm}f){t*@(t4oGhd=k-uz#`
f8UL?$^PLt@U3NA$`LNaR|Kc8}J>BYHSF`^IHlzZ=

literal 0
HcmV?d00001

diff --git a/packages/rrweb-snapshot/test/images/compat-top-left.png b/packages/rrweb-snapshot/test/images/compat-top-left.png
new file mode 100644
index 0000000000000000000000000000000000000000..40dc35b6d2c7b51ba827bc307fa6e79bc5dff5e9
GIT binary patch
literal 2693
zcmdT``!^Ge8~5hx?V>16$nD#!7o$jZLNU=;qEVtUr1A2WHn$nW_@ch<^O8`++nA9=
z$lT@<Gq+iDTdZwz$rz)#%w?Oee*FFk?{m)QJm-8q=RD7Ip7VLmd6J!>kRyjq9+Huf
zIbweud|O6l-+zAMfb1S~<+%B=y>u|>`u$KD86%ya_$7j1h2A4CIXm95)hrgg>01}9
zN$ymxh_<C->F%^Zyt}(gpW4DU32_~(ZQ~*%g21olNA1wY)w1O;bK5<f&Cu?g>AkA!
z_F(Hf5fe*nR{Yybs=qp$8%DH?V#mGeF4*lqtpQFA@T{M<13eWVJhk|<;Xfl*+OkGz
zt&Xesp5eNdLjDu-O>O=vy|h0dM2Rf|i>61iZNpsdxVjRUGd11ye5@DSKHm|=J<3K{
zO)OO54c_84)n<SeCw9sZxv?Y<0Mii#%MdW%7<LBV5??wn+mqpkWew8tEEI~Q8Tj_`
z2LN5iDzYbv1gleFATBjcetO{6Pl#ZqfTJ%03lZitFp0s#4;JqZmYM)_rWLN9ub!vl
zZlN5qKij&V4L_+j4Z7U$1K*N_Okk`FAefs9<FgUH3hRwD2r;4$LdauFFi{|1YJWL$
zXr;}|mPF=7qOSyM*_kNr3Y?=;mKqGNe&N-1)IUE*1*2f8MrIlDRj`6)qw&OmV?}T!
zT$ch-_2Oj;)-9LyO<$PGt5^2))~@?ERuoiInrx|S#eAx3K>1r4xIo>-NY-+|DER|}
z#lLr_#|)Asrwl0G2P$L6PAls%5WuFv)iO(?a7W=814=)F@5xMd*zTSCz{?40b|dD>
zW!TrG-uPiry}pgs^2f8FDC^AVomYu+srV3;TsUateskE`AfDxjdi}?m61PU750?iB
z^nVnoA(m$#bep_20vK*HB*CBPV4$5wCkz;Rlx>ISpYh3(+x@tvnmhGlEX}u*0M%(q
z2QxpaI~=|{7Ov+3P9a$Vb&M_&c=g9T=dO<Jo9hWQ3}M@rM&QcvLyulJPU_n3ygNnH
zv#b8b<J^WAJO6%BboXfzpg)i1gji6p?b@HPMV-BcsxZ}|#7jzwWTm07^S@DGh8rmk
zG;?^~3_3~poac7ecvCK8{#t@*0o)@!B<1mq=DGyQNTjeNGaW+8`aVwUDzEGTUZ(UM
zzqsJLd`5OP&c4_Bmk4FH`qx9r<C=}!6n;x8^h0v9IJ;9;q1j%gVP0->qZkH}l5o9Q
z0WZJ1W)f$m(Mg~)ZPc2t6r$>VDqUZcPjs<)rFPuzk~aG!G-C(js8yKUE6O}Fuoc*7
zRREva!W43HqaxGuy<}ppq4*otQt~F3HY2s{^l9B*?tDr^?(IkEY)BVEY{`7r)+aAz
zdZ7Y?V`J7p9Cw8Wt^GL8ckdKxPyXzBK{A4z+c-I8_RULR3Km5&t8L1PEFQ+<EHxfh
zT*!l;zz})o0?xf@wA2V*kRF`f&mcq80ZR0uYOdAUa;MjHZG}?ReCU&j;=Xosxk(b3
z#L;&&*?hV>44hk9_7L6zj%5P9z7xJ+NTx#Qk6ei8@%+-Ik<UUU`odbt&h5RO$3fc%
zl3&<UJFhGi>|2S#!w{<Hj@T(?T|-;=CC)sgb*_3tYT4-yCdrk5&Ee+un?~1C_XSNo
z*$zxb612UmOFV)s8wxtDc$T*jbZ<ctAfH*fNj!X5x39of1d2_`m2{SUXHO)~UOh3#
z?sqv;ifiCXpZUe@Tgk^ql~a%A>m{gS$rP^J4E^<gI{?N0X~bHW7Gqh~7Jm-wgff)M
zRMGiF!DTczsy4WBI3f-pA~D(*#lE)k4D#~+FA@~j1luG7W@~prKI(K_{-wixBb^5#
z{<>I^oe)o6vU;zXpjPB+UzC!mgTliaRiZVuy7Z06mDj0i(uY0=V^wNt7Z}*jiq+v3
zi=VlFjnG5fkr%^WQjIq<tlHgCfjJ5pfJOATueGH_<@uJJmdTi*cL3vgZ>lSbZ{TCc
z?*zrNhCiKd1_E)d#a;u=Z!ispU;B!AoXYfo3?vc8d2Q2}pFOn@n(`^UeMXN#_H<TO
zc0%@Ywc^N8GIQbCZ|34s==rW{8&8ij$PZj7OVr9q^DyjoOMcGOCT4b3tAiXR4>N2M
zIlOH!#Eg$l_)^-1C~c81ZT-DsR+3<8p-0|^^<wJLpGV<l6!fUSJU_8lxMvmEi7lIK
zER&@V9R*MY=qJyJ6}yfauh*3-s!{}D!b~8#uzT3WBNUtLWA0a4!yD5|e96E$I+-As
z3jT2WG9N(*%uEvaG<8fH&dc5Q2u}a-x1XVkn!LD>H#Yw)P21t#Z<O<;km@dj)NlI^
zhUT2!{>1ZIxZRaj%8?ozewYl%zr`OI)Gz6;=9^$#IaO(bkA1<S=R@ooVE0#`JDjkz
zDmj0zSLp)0^>mX;s{2CI4sKfs$Z>mR?6vhi&Z@%pflA)-O-%;beZ>6yj~7nbtMxA?
zPc`he+M8ML>NnB<Oz`n@)yjbezYyIFdlw({O5(i|zIR5wEAIt*0?3HEXy{GMgxFLN
z_CCJ)s@kR;qmrRG2(h?7e5PoM&o!T@J@hGNqqc*Ufn+1En~0x$d$a|pz1tSHHMFPv
zAze5C%RnwUOim7u>L`x*w}iKfZkWbm^C}^v?dt>W+e$tn9V5!5g_M=$S<&bpJj6Yc
zN46R3E`~Xn-7LY@e;WKENpdg|CtD0CH2iCoqt}`#d=wZiI2p&nAuX+8ch;&*+|oeT
zGl3kZY(*pGaCy2@bM98l=bbAc{U%dI${p8WQXhQfD1Gxqi;l}-Sk~LO6RW4LctOLS
zyNxco`A*^>o&%OQSm{VtW|F$~G^8KyqT%6-5zfqZbhP?)XZW%hl^(we645?=UuitR
zl^g`-Ui9M$Gq<jHxglt^1{x2vq+<3+le`Jo?}a*N(v^pay$>RlPxzviRnsu_+VdrG
zCC7lEs8NSe=o9d(yqENKF&vw~AQOx|HVQjwb!^q=Q<5?Y`{ZMnWuLL&bng-RT0cJO
zuD{vRK#<i|Lz?<bS^r?A6XF_NooTDf3*0kuIm?PZSV&x^JY3X=Nme4$4G_A4l6&17
zvMMkCZX@tGEcJ5w&UsquZ}k59@>&uCbhfJ39>qPT`OkQV{(nlbwpcbo)4AvOu+WyD
NioGoq{NBbp{(oAF>iqx!

literal 0
HcmV?d00001

diff --git a/packages/rrweb-snapshot/test/images/compat-top-right.png b/packages/rrweb-snapshot/test/images/compat-top-right.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e7a6d2866345fdee552e08f311c5cc752b3c17d
GIT binary patch
literal 3049
zcmb`J`7;}e7RQs?uKnKj7PWR$Qbo1)eW|9_v}h4ZO0}_Xv4%)#DZMDQv=l)RRoaV4
zs%m*HvC}3JK_snRYAvD?@!a>z`v>lsIdf({=R0T4oSE;;Nx$w078j8f0RRBvHrK8=
z0RTtP005A{&v!^vPTM&g7U8gK?vVh1#+iQ-7+Yl)eF)EAw|B9o_--E@9BhnnnT5MN
z?g5w0n@HFh58C<B!`YtM|FyzfX#O=*y-Uwve;ddx1^`6;Y_3?i#7?YCO$MHI2NE|f
z(QMfEY-5+2OT~BZow6W)c-pI)p;<iGJ@`XVx3Tz<yObg8p|xvyltOn`+Lmc7vPdjh
zvfW-$yRPx+y|#B1PapSwca}Q+I4N_<IkDD|ZCe%~$VE-(k_wl-%OaOwI@hRW94`Cs
z#`?i5c#XR{R~)0XkBh6mpR`1JJ4N6uLLdv^;)DgNCWE_jzsRqhNFKTMom?`~lA-i%
zOy4vSb+ltLLF6Zg+q0BYqR8ZC+i|m^XUZp&C}xX3MH|UZ*BNrgF}P-a$Y+*bM&UtV
zSXdu%z>x5S#{K>|EN{U#5$*g$?UPE!EsEBv;SufpjvO(`ka^5Y-@4`*`A;{Z#ek?&
z>{&=&<X^aPMNDl%#2I!Uv`T&|$+rxERCg18*OH6eOlbNn6(lk0!b{_VISwENW~wXt
zqtqMz*gvzs$spCq@|f~A4Fyk-_nMi{TY%9XfTi}eX#qNigZZMXBj%d+8y|{{+cD`X
zp|{%iyKa(hI0i5BO*tNL>NI&w4>LVPE-=XGh;|-ZB7U{6m~j9b370Z#N~%%8@=h+9
zA@}r_@Gyh2=9L7E%RU4rFHv0-$|^2?G;?MU#=5xsJG5<e5R$6$BwNQ`J=R+MU4cTI
zi&S?Y&ep#xUD@0@PQ@tpSA#y;)k<mdVJwZ^n8PEJlP3ev?C#!h5ZlM7s+s9-hfdwh
zfOk<jNf~crbhrMF;u`Wov@`v5I-}daWcYeYD#F-)W&y&Z*S&`Hpc~ughz~s0QyK4T
zjofH1d~e>&)=lZzEnz>T<h*!W>^<Sa`<Re#hpc;a6uO=;ptiuL)A@P}p|#rj<wCiD
zcd51z{Jiv#ubH=KuE(A16{`+i>QJ196Q414f5h(>g5Yc^ih>J|x@bVD4-ihJ;z>b@
zO1sxSzY$dB{d6lWG?ri_Kl6<|yzNF=T%6Y>rD%no(5V}=V_J1U4O>PyqMVbx@E^fl
zbF$o_XjAxo+?9%B#uC#4UOVyQ{*W3$RaqP7)j#dv%A5j#!(2tu`&Wnz3!~>8l<z=D
z1Sv-rqrYfSWjpeyBrw`LqE8<4x2OE7RTVKwW|NuK)}9+8>L{fRyfr3r0ctaF=`QrT
zN^aAzRGaJzKJ5bh98Y-#Rw|B?2#*#S^8(lMt2zdfmepj>y`<)~SuZSOkF7N4$Q&xy
zs&6{4{%tut)~!FD2yLYxJ(N4|w;sgyeQ<QmuSM^U*puEv5pao7&uR7NHwuOBTg7NL
znX0?ZR`X+*oLho!2Dr-7s>8j*TbNhxN{qTSEM?VLvPW;eJx@<``AQbR)`l#QZ9(dj
zI<LI6+{0R!9tD8Rxz^>Da+m%uFWJj3kUf*aqnHVY8qK)ATQip-`fH`vGVHX3<^e-<
zMVCD%_>T;0mz@}to8BX<_0hqQ<}$yx4Ap#qbbg58N=;4h7zkx@P?LB%uAH$b1}qwg
z0#_I?bAq;y#dY8-I5;aSQB#T__LpTHr97^^f6Nyr$U5zf=Z9-hagSO!;v?E(+?n;p
zu?H;zBUdK?*3#7)62w5t%@T_m{E8R%s5*iukE!z9>KUo4E3@gWy=J7)oOmX38-=oo
zS)QT_x}}eqz7LU9j+waW*uQtanBta*F4$ayJKhIBaOEdyoQk=lpA!fP9uMvXX58pf
z7}~t@2{jEVO1)G5`tl-i3kdE1u<yL-))X&o*m;ll-T!p(FhS2)!@!*WnW{y8{X@dF
zvyiTK!dWdPhAaqIqdFwuk3dpCl%31b%w&XsvT0-?EXV#hv1oD!hNv!<WkKPg6&2#6
zw;J9jKhtHQ2lDB_{=sy_hN;=RdcR?h%~SpyBQScq>ycu%1qNPTIK(Kxc~TjPXT#8R
z!;6~pKkI6w*E%9}9KswLv?6nqJIAo&FmHrh@&4uUD5U7LObfw=G@O!F0GM;niYi42
zru1-%u)pOa^q;Y)(wD7n8*~<hoL>=Hw|M)^9-k+#FCD=FSBj28r@veX%sURN)RQSa
zI(Ei`$f7-X7K2U?yc@IEb>%6ZK10^AOAA!j6WmQ80653PRP_3LH8g|nBb!eGs}o6E
z??6V-^+Ut$Y-$PWtBKby{8ZnK9|v^HN6pudo2ZxchRA*4hifYNqB%~II-WNg79>vF
zqnFNaX&M)t&Tf?aUlWY}Xu9sUS}u5sK5~0oEaK>iAYzn+fA=)TbqHwKPYgdwyRJ8u
z-mp|h>u8WktDXqQ7<Ep-s0k!ma$06r7@g|bASYCCj2YP<v|+o0k@^8_2ng7A$UZS!
zE4?D=F|1tC5#$e|X7YUy#n^NL*yPl_Nwdw9-VT=bbEyjTtoYZ9YI;MV^XHX_E{=mg
zezJVWe)yOhnN3Q*d;SzfIbOE1IL0;i=(rmSQlk1KYZp8pe6!(T8(MRFxJa$}W&RRF
zA;o+nBr@k?Dy={2PJZLd{MqxCt$vL<@Bms|Nwh^&`)G2&j&TArq>D9=_MDrTmyNf;
z)!UqGN~u-PbZRTyQkeOGIJ>xe@@8#e9$!ShT;Z10s>U*Wf*EG@(5-$7F92`FZduMM
zmJujUYc@}AN0>K6%ve{QWm;GHIiu53G(!5MVBZFcUZl=KhZwnDV2R$FrtJeo;zLL=
zJ~C35B=9HUU8y@?m=|Q?QU`LNCgFlKWh7GuR>P!Z+4l@b4)p>lJviK_>4)_|DY|D~
zEq<7BJ5!!Ht}Fcla(Wmb8WK7nhWJkBp36RZM4q_Q(i$Z*BeCArTGh6~wJsxQ;P<Sk
zo_DtZG5PdL)Q2x3zgOOyF`rPt_&*6H8SK+K2;Z=;D}~_W-;p2~y6E;hAMLQqo1)k0
zcN-?(V3u?p!514o=2r?~LoQK+Z~b=h_zme}vZcUk=bUOTB2bgWP&N7H_J_QQxz<U7
z-vOa=Z?yeom0XObs;}Z)nl5SBf|<<VZK^iDEujsFn>D+OoWQgWp=h~iS!PaxY&4G?
zxXbE!=2P?eJCHIr<g3gj*HwFeP3qI@jEn%cuqM#d6F<P%?nld38vv33+p4zpjez)d
z&qAAmS=_J!15o!hbY=PPDNq2_Nivl&b}t>+QpLEV04njpG(C=R|2eML2?DJNHJpI%
z08Np{u8ORCwLin=ZKSX`UneytBrbPCculzB`!R#pfLSvt2Rd|0R@4Ci|AdaHC_u&%
zKbi%;0@U<`lhRFw<|`Bq0D&~tv(?Gc*^xF=BYv>(#r@P=uj3b%T2xe)cXVgK(CDey
z1<eMzwQIg+WhSrB2t5C|;aLAlZf&bY_^zH?16bh51q4eaZYO+bjXix|BJ2Vl1<g~j
z?7Nc#$S=;O`x{U;y<HZ%{RFU62^VORO3a7yn7B{fn~(7w&aN<H6zGx@+V}lFy&_bA
zEab)%{7X7dr!)BAUQ{)J7{PZH^nhLA1C$~Nz&&2XllP5wngsL<JkTfuj$&Ya1<=v2
zZe4U3$F<TSQ3pgX#-Eua*tQA>hwkQ-W(J$=ZNl*u6rAfqKMxDcn$zw5!r&a=XHy(0
zzhel0#KcPvR!9CqGNQbM6=3YEQ~qn7-!lo7c*t4-YGzgCAdX^PvUO`c=}GCK2l2^f
gS^w@&`u}Np%p@6}Scu;k^5Z|y#@g{pgC#8azu-~MsQ>@~

literal 0
HcmV?d00001

diff --git a/packages/rrweb-snapshot/test/integration.ts b/packages/rrweb-snapshot/test/integration.ts
index 751fbeedca..ec4b6f04ee 100644
--- a/packages/rrweb-snapshot/test/integration.ts
+++ b/packages/rrweb-snapshot/test/integration.ts
@@ -74,6 +74,8 @@ interface ISuite extends Suite {
 }
 
 describe('integration tests', function (this: ISuite) {
+  this.timeout(10_000);
+
   before(async () => {
     this.server = await server();
     this.browser = await puppeteer.launch({
@@ -97,32 +99,84 @@ describe('integration tests', function (this: ISuite) {
   });
 
   for (const html of htmls) {
+    if (html.filePath.substring(html.filePath.length - 1) === '~') {
+      continue;
+    }
     const title = '[html file]: ' + html.filePath;
     it(title, async () => {
       const page: puppeteer.Page = await this.browser.newPage();
       // console for debug
       // tslint:disable-next-line: no-console
       page.on('console', (msg) => console.log(msg.text()));
-      await page.goto(`http://localhost:3030/html`);
-      await page.setContent(html.src, {
-        waitUntil: 'load',
-      });
+      if (html.filePath === 'iframe.html') {
+        // loading directly is needed to ensure we don't trigger compatMode='BackCompat'
+        // which happens before setContent can be called
+        await page.goto(`http://localhost:3030/html/${html.filePath}`, {
+          waitUntil: 'load',
+        });
+        const outerCompatMode = await page.evaluate('document.compatMode');
+        const innerCompatMode = await page.evaluate('document.querySelector("iframe").contentDocument.compatMode');
+        assert(outerCompatMode === 'CSS1Compat', outerCompatMode + ' for outer iframe.html should be CSS1Compat as it has "<!DOCTYPE html>"');
+        // inner omits a doctype so gets rendered in backwards compat mode
+        // although this was originally accidental, we'll add a synthetic doctype to the rebuild to recreate this
+        assert(innerCompatMode === 'BackCompat', innerCompatMode + ' for iframe-inner.html should be BackCompat as it lacks "<!DOCTYPE html>"');
+      } else {
+        // loading indirectly is improtant for relative path testing
+        await page.goto(`http://localhost:3030/html`);
+        await page.setContent(html.src, {
+          waitUntil: 'load',
+        });
+      }
       const rebuildHtml = (
         await page.evaluate(`${this.code}
         const x = new XMLSerializer();
         const [snap] = rrweb.snapshot(document);
-        x.serializeToString(rrweb.rebuild(snap, { doc: document })[0]);
+        let out = x.serializeToString(rrweb.rebuild(snap, { doc: document })[0]);
+        if (document.querySelector('html').getAttribute('xmlns') !== 'http://www.w3.org/1999/xhtml') {
+          // this is just an artefact of serializeToString
+          out = out.replace(' xmlns=\"http://www.w3.org/1999/xhtml\"', '');
+        }
+        out;  // return
       `)
       ).replace(/\n\n/g, '');
       const result = matchSnapshot(rebuildHtml, __filename, title);
       assert(result.pass, result.pass ? '' : result.report());
     }).timeout(5000);
   }
+
+  it('correctly triggers backCompat mode and rendering', async () => {
+    const page: puppeteer.Page = await this.browser.newPage();
+    // console for debug
+    // tslint:disable-next-line: no-console
+    page.on('console', (msg) => console.log(msg.text()));
+
+    await page.goto('http://localhost:3030/html/compat-mode.html', {
+      waitUntil: 'load',
+    });
+    const compatMode = await page.evaluate('document.compatMode');
+    assert(compatMode === 'BackCompat', compatMode + ' for compat-mode.html should be BackCompat as DOCTYPE is deliberately omitted');
+    const renderedHeight = await page.evaluate('document.querySelector("center").clientHeight');
+    // can remove following assertion if dimensions of page change
+    assert(renderedHeight < 400, `pre-check: images will be rendered ~326px high in BackCompat mode, and ~588px in CSS1Compat mode; getting: ${renderedHeight}px`)
+    const rebuildRenderedHeight = await page.evaluate(`${this.code}
+const [snap] = rrweb.snapshot(document);
+const iframe = document.createElement('iframe');
+iframe.setAttribute('width', document.body.clientWidth)
+iframe.setAttribute('height', document.body.clientHeight)
+iframe.style.transform = 'scale(0.3)'; // mini-me
+document.body.appendChild(iframe);
+// magic here! rebuild in a new iframe
+const rebuildNode = rrweb.rebuild(snap, { doc: iframe.contentDocument })[0];
+iframe.contentDocument.querySelector('center').clientHeight
+`);
+    const rebuildCompatMode = await page.evaluate('document.querySelector("iframe").contentDocument.compatMode');
+    assert(rebuildCompatMode === 'BackCompat', 'rebuilt compatMode should match source compatMode, but doesn\'t: ' + rebuildCompatMode);
+    assert(rebuildRenderedHeight === renderedHeight, 'rebuilt height (${rebuildRenderedHeight}) should equal original height (${renderedHeight})')
+    }).timeout(5000);
+
 });
 
 describe('iframe integration tests', function (this: ISuite) {
-  const iframeHtml = path.join(__dirname, 'iframe-html/main.html');
-  const raw = fs.readFileSync(iframeHtml, 'utf-8');
 
   before(async () => {
     this.server = await server();
@@ -151,8 +205,7 @@ describe('iframe integration tests', function (this: ISuite) {
     // console for debug
     // tslint:disable-next-line: no-console
     page.on('console', (msg) => console.log(msg.text()));
-    await page.goto(`http://localhost:3030/html`);
-    await page.setContent(raw, {
+    await page.goto(`http://localhost:3030/iframe-html/main.html`, {
       waitUntil: 'load',
     });
     const snapshotResult = JSON.stringify(
@@ -167,9 +220,7 @@ describe('iframe integration tests', function (this: ISuite) {
   }).timeout(5000);
 });
 
-describe('shadown DOM integration tests', function (this: ISuite) {
-  const shadowDomHtml = path.join(__dirname, 'html/shadow-dom.html');
-  const raw = fs.readFileSync(shadowDomHtml, 'utf-8');
+describe('shadow DOM integration tests', function (this: ISuite) {
 
   before(async () => {
     this.server = await server();
@@ -198,8 +249,7 @@ describe('shadown DOM integration tests', function (this: ISuite) {
     // console for debug
     // tslint:disable-next-line: no-console
     page.on('console', (msg) => console.log(msg.text()));
-    await page.goto(`http://localhost:3030/html`);
-    await page.setContent(raw, {
+    await page.goto(`http://localhost:3030/html/shadow-dom.html`, {
       waitUntil: 'load',
     });
     const snapshotResult = JSON.stringify(
diff --git a/packages/rrweb-snapshot/typings/types.d.ts b/packages/rrweb-snapshot/typings/types.d.ts
index e83cd8b895..5831c7b5fa 100644
--- a/packages/rrweb-snapshot/typings/types.d.ts
+++ b/packages/rrweb-snapshot/typings/types.d.ts
@@ -9,6 +9,7 @@ export declare enum NodeType {
 export declare type documentNode = {
     type: NodeType.Document;
     childNodes: serializedNodeWithId[];
+    compatMode?: string;
 };
 export declare type documentTypeNode = {
     type: NodeType.DocumentType;
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index 33a448051f..bbee79de93 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -24,6 +24,13 @@ exports[`attributes 1`] = `
       \\"node\\": {
         \\"type\\": 0,
         \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
@@ -34,7 +41,7 @@ exports[`attributes 1`] = `
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
                 \\"childNodes\\": [],
-                \\"id\\": 3
+                \\"id\\": 4
               },
               {
                 \\"type\\": 2,
@@ -44,7 +51,7 @@ exports[`attributes 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 5
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 2,
@@ -54,15 +61,15 @@ exports[`attributes 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"mutation observer\\",
-                        \\"id\\": 7
+                        \\"id\\": 8
                       }
                     ],
-                    \\"id\\": 6
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 8
+                    \\"id\\": 9
                   },
                   {
                     \\"type\\": 2,
@@ -72,27 +79,27 @@ exports[`attributes 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 10
+                        \\"id\\": 11
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"li\\",
                         \\"attributes\\": {},
                         \\"childNodes\\": [],
-                        \\"id\\": 11
+                        \\"id\\": 12
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n  \\",
-                        \\"id\\": 12
+                        \\"id\\": 13
                       }
                     ],
-                    \\"id\\": 9
+                    \\"id\\": 10
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 13
+                    \\"id\\": 14
                   },
                   {
                     \\"type\\": 2,
@@ -102,21 +109,21 @@ exports[`attributes 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 15
+                        \\"id\\": 16
                       }
                     ],
-                    \\"id\\": 14
+                    \\"id\\": 15
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\",
-                    \\"id\\": 16
+                    \\"id\\": 17
                   }
                 ],
-                \\"id\\": 4
+                \\"id\\": 5
               }
             ],
-            \\"id\\": 2
+            \\"id\\": 3
           }
         ],
         \\"id\\": 1
@@ -134,7 +141,7 @@ exports[`attributes 1`] = `
       \\"texts\\": [],
       \\"attributes\\": [
         {
-          \\"id\\": 4,
+          \\"id\\": 5,
           \\"attributes\\": {
             \\"test\\": \\"true\\"
           }
@@ -142,8 +149,8 @@ exports[`attributes 1`] = `
       ],
       \\"removes\\": [
         {
-          \\"parentId\\": 4,
-          \\"id\\": 9
+          \\"parentId\\": 5,
+          \\"id\\": 10
         }
       ],
       \\"adds\\": []
@@ -786,6 +793,13 @@ exports[`character-data 1`] = `
       \\"node\\": {
         \\"type\\": 0,
         \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
@@ -796,7 +810,7 @@ exports[`character-data 1`] = `
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
                 \\"childNodes\\": [],
-                \\"id\\": 3
+                \\"id\\": 4
               },
               {
                 \\"type\\": 2,
@@ -806,7 +820,7 @@ exports[`character-data 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 5
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 2,
@@ -816,15 +830,15 @@ exports[`character-data 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"mutation observer\\",
-                        \\"id\\": 7
+                        \\"id\\": 8
                       }
                     ],
-                    \\"id\\": 6
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 8
+                    \\"id\\": 9
                   },
                   {
                     \\"type\\": 2,
@@ -834,27 +848,27 @@ exports[`character-data 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 10
+                        \\"id\\": 11
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"li\\",
                         \\"attributes\\": {},
                         \\"childNodes\\": [],
-                        \\"id\\": 11
+                        \\"id\\": 12
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n  \\",
-                        \\"id\\": 12
+                        \\"id\\": 13
                       }
                     ],
-                    \\"id\\": 9
+                    \\"id\\": 10
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 13
+                    \\"id\\": 14
                   },
                   {
                     \\"type\\": 2,
@@ -864,21 +878,21 @@ exports[`character-data 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 15
+                        \\"id\\": 16
                       }
                     ],
-                    \\"id\\": 14
+                    \\"id\\": 15
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\",
-                    \\"id\\": 16
+                    \\"id\\": 17
                   }
                 ],
-                \\"id\\": 4
+                \\"id\\": 5
               }
             ],
-            \\"id\\": 2
+            \\"id\\": 3
           }
         ],
         \\"id\\": 1
@@ -897,22 +911,22 @@ exports[`character-data 1`] = `
       \\"attributes\\": [],
       \\"removes\\": [
         {
-          \\"parentId\\": 4,
-          \\"id\\": 9
+          \\"parentId\\": 5,
+          \\"id\\": 10
         },
         {
-          \\"parentId\\": 6,
-          \\"id\\": 7
+          \\"parentId\\": 7,
+          \\"id\\": 8
         }
       ],
       \\"adds\\": [
         {
-          \\"parentId\\": 6,
+          \\"parentId\\": 7,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"mutated\\",
-            \\"id\\": 17
+            \\"id\\": 18
           }
         }
       ]
@@ -945,6 +959,13 @@ exports[`child-list 1`] = `
       \\"node\\": {
         \\"type\\": 0,
         \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
@@ -955,7 +976,7 @@ exports[`child-list 1`] = `
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
                 \\"childNodes\\": [],
-                \\"id\\": 3
+                \\"id\\": 4
               },
               {
                 \\"type\\": 2,
@@ -965,7 +986,7 @@ exports[`child-list 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 5
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 2,
@@ -975,15 +996,15 @@ exports[`child-list 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"mutation observer\\",
-                        \\"id\\": 7
+                        \\"id\\": 8
                       }
                     ],
-                    \\"id\\": 6
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 8
+                    \\"id\\": 9
                   },
                   {
                     \\"type\\": 2,
@@ -993,27 +1014,27 @@ exports[`child-list 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 10
+                        \\"id\\": 11
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"li\\",
                         \\"attributes\\": {},
                         \\"childNodes\\": [],
-                        \\"id\\": 11
+                        \\"id\\": 12
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n  \\",
-                        \\"id\\": 12
+                        \\"id\\": 13
                       }
                     ],
-                    \\"id\\": 9
+                    \\"id\\": 10
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 13
+                    \\"id\\": 14
                   },
                   {
                     \\"type\\": 2,
@@ -1023,21 +1044,21 @@ exports[`child-list 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 15
+                        \\"id\\": 16
                       }
                     ],
-                    \\"id\\": 14
+                    \\"id\\": 15
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\",
-                    \\"id\\": 16
+                    \\"id\\": 17
                   }
                 ],
-                \\"id\\": 4
+                \\"id\\": 5
               }
             ],
-            \\"id\\": 2
+            \\"id\\": 3
           }
         ],
         \\"id\\": 1
@@ -1056,20 +1077,20 @@ exports[`child-list 1`] = `
       \\"attributes\\": [],
       \\"removes\\": [
         {
-          \\"parentId\\": 4,
-          \\"id\\": 9
+          \\"parentId\\": 5,
+          \\"id\\": 10
         }
       ],
       \\"adds\\": [
         {
-          \\"parentId\\": 6,
+          \\"parentId\\": 7,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"span\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 17
+            \\"id\\": 18
           }
         }
       ]
@@ -1868,6 +1889,13 @@ exports[`frozen 1`] = `
       \\"node\\": {
         \\"type\\": 0,
         \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
@@ -1878,7 +1906,7 @@ exports[`frozen 1`] = `
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
                 \\"childNodes\\": [],
-                \\"id\\": 3
+                \\"id\\": 4
               },
               {
                 \\"type\\": 2,
@@ -1888,7 +1916,7 @@ exports[`frozen 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 5
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 2,
@@ -1898,15 +1926,15 @@ exports[`frozen 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"mutation observer\\",
-                        \\"id\\": 7
+                        \\"id\\": 8
                       }
                     ],
-                    \\"id\\": 6
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 8
+                    \\"id\\": 9
                   },
                   {
                     \\"type\\": 2,
@@ -1916,27 +1944,27 @@ exports[`frozen 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 10
+                        \\"id\\": 11
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"li\\",
                         \\"attributes\\": {},
                         \\"childNodes\\": [],
-                        \\"id\\": 11
+                        \\"id\\": 12
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n  \\",
-                        \\"id\\": 12
+                        \\"id\\": 13
                       }
                     ],
-                    \\"id\\": 9
+                    \\"id\\": 10
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 13
+                    \\"id\\": 14
                   },
                   {
                     \\"type\\": 2,
@@ -1946,21 +1974,21 @@ exports[`frozen 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 15
+                        \\"id\\": 16
                       }
                     ],
-                    \\"id\\": 14
+                    \\"id\\": 15
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\",
-                    \\"id\\": 16
+                    \\"id\\": 17
                   }
                 ],
-                \\"id\\": 4
+                \\"id\\": 5
               }
             ],
-            \\"id\\": 2
+            \\"id\\": 3
           }
         ],
         \\"id\\": 1
@@ -1978,13 +2006,13 @@ exports[`frozen 1`] = `
       \\"texts\\": [],
       \\"attributes\\": [
         {
-          \\"id\\": 17,
+          \\"id\\": 18,
           \\"attributes\\": {
             \\"foo\\": \\"bar\\"
           }
         },
         {
-          \\"id\\": 4,
+          \\"id\\": 5,
           \\"attributes\\": {
             \\"test\\": \\"true\\"
           }
@@ -1993,7 +2021,7 @@ exports[`frozen 1`] = `
       \\"removes\\": [],
       \\"adds\\": [
         {
-          \\"parentId\\": 9,
+          \\"parentId\\": 10,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
@@ -2002,7 +2030,7 @@ exports[`frozen 1`] = `
               \\"foo\\": \\"bar\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 17
+            \\"id\\": 18
           }
         }
       ]
@@ -2245,6 +2273,7 @@ exports[`iframe 1`] = `
                 \\"id\\": 28
               }
             ],
+            \\"compatMode\\": \\"BackCompat\\",
             \\"id\\": 27
           }
         }
@@ -2481,6 +2510,7 @@ exports[`iframe 1`] = `
                 \\"id\\": 52
               }
             ],
+            \\"compatMode\\": \\"BackCompat\\",
             \\"id\\": 51
           }
         }
@@ -2705,6 +2735,7 @@ exports[`iframe 1`] = `
                 \\"id\\": 75
               }
             ],
+            \\"compatMode\\": \\"BackCompat\\",
             \\"id\\": 74
           }
         }
@@ -3407,6 +3438,7 @@ exports[`log 1`] = `
                 \\"id\\": 23
               }
             ],
+            \\"compatMode\\": \\"BackCompat\\",
             \\"id\\": 22
           }
         }
@@ -4311,6 +4343,13 @@ exports[`mask-character-data 1`] = `
       \\"node\\": {
         \\"type\\": 0,
         \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
@@ -4321,7 +4360,7 @@ exports[`mask-character-data 1`] = `
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
                 \\"childNodes\\": [],
-                \\"id\\": 3
+                \\"id\\": 4
               },
               {
                 \\"type\\": 2,
@@ -4331,7 +4370,7 @@ exports[`mask-character-data 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 5
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 2,
@@ -4341,15 +4380,15 @@ exports[`mask-character-data 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"mutation observer\\",
-                        \\"id\\": 7
+                        \\"id\\": 8
                       }
                     ],
-                    \\"id\\": 6
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 8
+                    \\"id\\": 9
                   },
                   {
                     \\"type\\": 2,
@@ -4359,27 +4398,27 @@ exports[`mask-character-data 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 10
+                        \\"id\\": 11
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"li\\",
                         \\"attributes\\": {},
                         \\"childNodes\\": [],
-                        \\"id\\": 11
+                        \\"id\\": 12
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n  \\",
-                        \\"id\\": 12
+                        \\"id\\": 13
                       }
                     ],
-                    \\"id\\": 9
+                    \\"id\\": 10
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 13
+                    \\"id\\": 14
                   },
                   {
                     \\"type\\": 2,
@@ -4389,21 +4428,21 @@ exports[`mask-character-data 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 15
+                        \\"id\\": 16
                       }
                     ],
-                    \\"id\\": 14
+                    \\"id\\": 15
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\",
-                    \\"id\\": 16
+                    \\"id\\": 17
                   }
                 ],
-                \\"id\\": 4
+                \\"id\\": 5
               }
             ],
-            \\"id\\": 2
+            \\"id\\": 3
           }
         ],
         \\"id\\": 1
@@ -4421,7 +4460,7 @@ exports[`mask-character-data 1`] = `
       \\"texts\\": [],
       \\"attributes\\": [
         {
-          \\"id\\": 6,
+          \\"id\\": 7,
           \\"attributes\\": {
             \\"class\\": \\"rr-mask\\"
           }
@@ -4429,13 +4468,13 @@ exports[`mask-character-data 1`] = `
       ],
       \\"removes\\": [
         {
-          \\"parentId\\": 6,
-          \\"id\\": 7
+          \\"parentId\\": 7,
+          \\"id\\": 8
         }
       ],
       \\"adds\\": [
         {
-          \\"parentId\\": 9,
+          \\"parentId\\": 10,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
@@ -4444,25 +4483,25 @@ exports[`mask-character-data 1`] = `
               \\"class\\": \\"rr-mask\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 17
+            \\"id\\": 18
           }
         },
         {
-          \\"parentId\\": 17,
+          \\"parentId\\": 18,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"*** **** ****\\",
-            \\"id\\": 18
+            \\"id\\": 19
           }
         },
         {
-          \\"parentId\\": 6,
+          \\"parentId\\": 7,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"*******\\",
-            \\"id\\": 19
+            \\"id\\": 20
           }
         }
       ]
@@ -5905,6 +5944,13 @@ exports[`maskPassword 1`] = `
       \\"node\\": {
         \\"type\\": 0,
         \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
@@ -5920,7 +5966,7 @@ exports[`maskPassword 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 4
+                    \\"id\\": 5
                   },
                   {
                     \\"type\\": 2,
@@ -5929,12 +5975,12 @@ exports[`maskPassword 1`] = `
                       \\"charset\\": \\"UTF-8\\"
                     },
                     \\"childNodes\\": [],
-                    \\"id\\": 5
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 6
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 2,
@@ -5944,12 +5990,12 @@ exports[`maskPassword 1`] = `
                       \\"content\\": \\"IE=edge\\"
                     },
                     \\"childNodes\\": [],
-                    \\"id\\": 7
+                    \\"id\\": 8
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 8
+                    \\"id\\": 9
                   },
                   {
                     \\"type\\": 2,
@@ -5959,12 +6005,12 @@ exports[`maskPassword 1`] = `
                       \\"content\\": \\"width=device-width, initial-scale=1.0\\"
                     },
                     \\"childNodes\\": [],
-                    \\"id\\": 9
+                    \\"id\\": 10
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 10
+                    \\"id\\": 11
                   },
                   {
                     \\"type\\": 2,
@@ -5974,23 +6020,23 @@ exports[`maskPassword 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"Document\\",
-                        \\"id\\": 12
+                        \\"id\\": 13
                       }
                     ],
-                    \\"id\\": 11
+                    \\"id\\": 12
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 13
+                    \\"id\\": 14
                   }
                 ],
-                \\"id\\": 3
+                \\"id\\": 4
               },
               {
                 \\"type\\": 3,
                 \\"textContent\\": \\"\\\\n  \\",
-                \\"id\\": 14
+                \\"id\\": 15
               },
               {
                 \\"type\\": 2,
@@ -6000,7 +6046,7 @@ exports[`maskPassword 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 16
+                    \\"id\\": 17
                   },
                   {
                     \\"type\\": 2,
@@ -6010,12 +6056,12 @@ exports[`maskPassword 1`] = `
                       \\"id\\": \\"password\\"
                     },
                     \\"childNodes\\": [],
-                    \\"id\\": 17
+                    \\"id\\": 18
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 18
+                    \\"id\\": 19
                   },
                   {
                     \\"type\\": 2,
@@ -6025,15 +6071,15 @@ exports[`maskPassword 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 20
+                        \\"id\\": 21
                       }
                     ],
-                    \\"id\\": 19
+                    \\"id\\": 20
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 21
+                    \\"id\\": 22
                   },
                   {
                     \\"type\\": 2,
@@ -6043,21 +6089,21 @@ exports[`maskPassword 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 23
+                        \\"id\\": 24
                       }
                     ],
-                    \\"id\\": 22
+                    \\"id\\": 23
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 24
+                    \\"id\\": 25
                   }
                 ],
-                \\"id\\": 15
+                \\"id\\": 16
               }
             ],
-            \\"id\\": 2
+            \\"id\\": 3
           }
         ],
         \\"id\\": 1
@@ -6073,7 +6119,7 @@ exports[`maskPassword 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 5,
-      \\"id\\": 17
+      \\"id\\": 18
     }
   },
   {
@@ -6082,7 +6128,7 @@ exports[`maskPassword 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"*\\",
       \\"isChecked\\": false,
-      \\"id\\": 17
+      \\"id\\": 18
     }
   },
   {
@@ -6092,7 +6138,7 @@ exports[`maskPassword 1`] = `
       \\"texts\\": [],
       \\"attributes\\": [
         {
-          \\"id\\": 17,
+          \\"id\\": 18,
           \\"attributes\\": {
             \\"value\\": \\"*\\"
           }
@@ -6108,7 +6154,7 @@ exports[`maskPassword 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"**\\",
       \\"isChecked\\": false,
-      \\"id\\": 17
+      \\"id\\": 18
     }
   },
   {
@@ -6118,7 +6164,7 @@ exports[`maskPassword 1`] = `
       \\"texts\\": [],
       \\"attributes\\": [
         {
-          \\"id\\": 17,
+          \\"id\\": 18,
           \\"attributes\\": {
             \\"value\\": \\"**\\"
           }
@@ -6134,7 +6180,7 @@ exports[`maskPassword 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"***\\",
       \\"isChecked\\": false,
-      \\"id\\": 17
+      \\"id\\": 18
     }
   },
   {
@@ -6144,7 +6190,7 @@ exports[`maskPassword 1`] = `
       \\"texts\\": [],
       \\"attributes\\": [
         {
-          \\"id\\": 17,
+          \\"id\\": 18,
           \\"attributes\\": {
             \\"value\\": \\"***\\"
           }
@@ -6160,7 +6206,7 @@ exports[`maskPassword 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"****\\",
       \\"isChecked\\": false,
-      \\"id\\": 17
+      \\"id\\": 18
     }
   },
   {
@@ -6170,7 +6216,7 @@ exports[`maskPassword 1`] = `
       \\"texts\\": [],
       \\"attributes\\": [
         {
-          \\"id\\": 17,
+          \\"id\\": 18,
           \\"attributes\\": {
             \\"value\\": \\"****\\"
           }
@@ -6186,7 +6232,7 @@ exports[`maskPassword 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"*****\\",
       \\"isChecked\\": false,
-      \\"id\\": 17
+      \\"id\\": 18
     }
   },
   {
@@ -6196,7 +6242,7 @@ exports[`maskPassword 1`] = `
       \\"texts\\": [],
       \\"attributes\\": [
         {
-          \\"id\\": 17,
+          \\"id\\": 18,
           \\"attributes\\": {
             \\"value\\": \\"*****\\"
           }
@@ -6212,7 +6258,7 @@ exports[`maskPassword 1`] = `
       \\"source\\": 5,
       \\"text\\": \\"******\\",
       \\"isChecked\\": false,
-      \\"id\\": 17
+      \\"id\\": 18
     }
   },
   {
@@ -6222,7 +6268,7 @@ exports[`maskPassword 1`] = `
       \\"texts\\": [],
       \\"attributes\\": [
         {
-          \\"id\\": 17,
+          \\"id\\": 18,
           \\"attributes\\": {
             \\"value\\": \\"******\\"
           }
@@ -6259,6 +6305,13 @@ exports[`move-node-1 1`] = `
       \\"node\\": {
         \\"type\\": 0,
         \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
@@ -6269,7 +6322,7 @@ exports[`move-node-1 1`] = `
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
                 \\"childNodes\\": [],
-                \\"id\\": 3
+                \\"id\\": 4
               },
               {
                 \\"type\\": 2,
@@ -6279,7 +6332,7 @@ exports[`move-node-1 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 5
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 2,
@@ -6289,27 +6342,27 @@ exports[`move-node-1 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 7
+                        \\"id\\": 8
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"p\\",
                         \\"attributes\\": {},
                         \\"childNodes\\": [],
-                        \\"id\\": 8
+                        \\"id\\": 9
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 9
+                        \\"id\\": 10
                       }
                     ],
-                    \\"id\\": 6
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 10
+                    \\"id\\": 11
                   },
                   {
                     \\"type\\": 2,
@@ -6319,7 +6372,7 @@ exports[`move-node-1 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 12
+                        \\"id\\": 13
                       },
                       {
                         \\"type\\": 2,
@@ -6329,7 +6382,7 @@ exports[`move-node-1 1`] = `
                           {
                             \\"type\\": 3,
                             \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 14
+                            \\"id\\": 15
                           },
                           {
                             \\"type\\": 2,
@@ -6339,31 +6392,31 @@ exports[`move-node-1 1`] = `
                               {
                                 \\"type\\": 3,
                                 \\"textContent\\": \\"1\\",
-                                \\"id\\": 16
+                                \\"id\\": 17
                               }
                             ],
-                            \\"id\\": 15
+                            \\"id\\": 16
                           },
                           {
                             \\"type\\": 3,
                             \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 17
+                            \\"id\\": 18
                           }
                         ],
-                        \\"id\\": 13
+                        \\"id\\": 14
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 18
+                        \\"id\\": 19
                       }
                     ],
-                    \\"id\\": 11
+                    \\"id\\": 12
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 19
+                    \\"id\\": 20
                   },
                   {
                     \\"type\\": 2,
@@ -6373,21 +6426,21 @@ exports[`move-node-1 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 21
+                        \\"id\\": 22
                       }
                     ],
-                    \\"id\\": 20
+                    \\"id\\": 21
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 22
+                    \\"id\\": 23
                   }
                 ],
-                \\"id\\": 4
+                \\"id\\": 5
               }
             ],
-            \\"id\\": 2
+            \\"id\\": 3
           }
         ],
         \\"id\\": 1
@@ -6406,87 +6459,87 @@ exports[`move-node-1 1`] = `
       \\"attributes\\": [],
       \\"removes\\": [
         {
-          \\"parentId\\": 4,
-          \\"id\\": 11
+          \\"parentId\\": 5,
+          \\"id\\": 12
         }
       ],
       \\"adds\\": [
         {
-          \\"parentId\\": 6,
+          \\"parentId\\": 7,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"span\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 11
+            \\"id\\": 12
           }
         },
         {
-          \\"parentId\\": 11,
-          \\"nextId\\": 13,
+          \\"parentId\\": 12,
+          \\"nextId\\": 14,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"\\\\n      \\",
-            \\"id\\": 12
+            \\"id\\": 13
           }
         },
         {
-          \\"parentId\\": 11,
-          \\"nextId\\": 18,
+          \\"parentId\\": 12,
+          \\"nextId\\": 19,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"i\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 13
+            \\"id\\": 14
           }
         },
         {
-          \\"parentId\\": 13,
-          \\"nextId\\": 15,
+          \\"parentId\\": 14,
+          \\"nextId\\": 16,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"\\\\n        \\",
-            \\"id\\": 14
+            \\"id\\": 15
           }
         },
         {
-          \\"parentId\\": 13,
-          \\"nextId\\": 17,
+          \\"parentId\\": 14,
+          \\"nextId\\": 18,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"b\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 15
+            \\"id\\": 16
           }
         },
         {
-          \\"parentId\\": 15,
+          \\"parentId\\": 16,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"1\\",
-            \\"id\\": 16
+            \\"id\\": 17
           }
         },
         {
-          \\"parentId\\": 13,
+          \\"parentId\\": 14,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"\\\\n      \\",
-            \\"id\\": 17
+            \\"id\\": 18
           }
         },
         {
-          \\"parentId\\": 11,
+          \\"parentId\\": 12,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"\\\\n    \\",
-            \\"id\\": 18
+            \\"id\\": 19
           }
         }
       ]
@@ -6519,6 +6572,13 @@ exports[`move-node-2 1`] = `
       \\"node\\": {
         \\"type\\": 0,
         \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
@@ -6529,7 +6589,7 @@ exports[`move-node-2 1`] = `
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
                 \\"childNodes\\": [],
-                \\"id\\": 3
+                \\"id\\": 4
               },
               {
                 \\"type\\": 2,
@@ -6539,7 +6599,7 @@ exports[`move-node-2 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 5
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 2,
@@ -6549,27 +6609,27 @@ exports[`move-node-2 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 7
+                        \\"id\\": 8
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"p\\",
                         \\"attributes\\": {},
                         \\"childNodes\\": [],
-                        \\"id\\": 8
+                        \\"id\\": 9
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 9
+                        \\"id\\": 10
                       }
                     ],
-                    \\"id\\": 6
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 10
+                    \\"id\\": 11
                   },
                   {
                     \\"type\\": 2,
@@ -6579,7 +6639,7 @@ exports[`move-node-2 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 12
+                        \\"id\\": 13
                       },
                       {
                         \\"type\\": 2,
@@ -6589,7 +6649,7 @@ exports[`move-node-2 1`] = `
                           {
                             \\"type\\": 3,
                             \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 14
+                            \\"id\\": 15
                           },
                           {
                             \\"type\\": 2,
@@ -6599,31 +6659,31 @@ exports[`move-node-2 1`] = `
                               {
                                 \\"type\\": 3,
                                 \\"textContent\\": \\"1\\",
-                                \\"id\\": 16
+                                \\"id\\": 17
                               }
                             ],
-                            \\"id\\": 15
+                            \\"id\\": 16
                           },
                           {
                             \\"type\\": 3,
                             \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 17
+                            \\"id\\": 18
                           }
                         ],
-                        \\"id\\": 13
+                        \\"id\\": 14
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 18
+                        \\"id\\": 19
                       }
                     ],
-                    \\"id\\": 11
+                    \\"id\\": 12
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 19
+                    \\"id\\": 20
                   },
                   {
                     \\"type\\": 2,
@@ -6633,21 +6693,21 @@ exports[`move-node-2 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 21
+                        \\"id\\": 22
                       }
                     ],
-                    \\"id\\": 20
+                    \\"id\\": 21
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 22
+                    \\"id\\": 23
                   }
                 ],
-                \\"id\\": 4
+                \\"id\\": 5
               }
             ],
-            \\"id\\": 2
+            \\"id\\": 3
           }
         ],
         \\"id\\": 1
@@ -6666,98 +6726,98 @@ exports[`move-node-2 1`] = `
       \\"attributes\\": [],
       \\"removes\\": [
         {
-          \\"parentId\\": 4,
-          \\"id\\": 11
+          \\"parentId\\": 5,
+          \\"id\\": 12
         }
       ],
       \\"adds\\": [
         {
-          \\"parentId\\": 11,
-          \\"nextId\\": 13,
+          \\"parentId\\": 12,
+          \\"nextId\\": 14,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"\\\\n      \\",
-            \\"id\\": 12
+            \\"id\\": 13
           }
         },
         {
-          \\"parentId\\": 11,
-          \\"nextId\\": 18,
+          \\"parentId\\": 12,
+          \\"nextId\\": 19,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"i\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 13
+            \\"id\\": 14
           }
         },
         {
-          \\"parentId\\": 13,
-          \\"nextId\\": 15,
+          \\"parentId\\": 14,
+          \\"nextId\\": 16,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"\\\\n        \\",
-            \\"id\\": 14
+            \\"id\\": 15
           }
         },
         {
-          \\"parentId\\": 13,
-          \\"nextId\\": 17,
+          \\"parentId\\": 14,
+          \\"nextId\\": 18,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"b\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 15
+            \\"id\\": 16
           }
         },
         {
-          \\"parentId\\": 15,
+          \\"parentId\\": 16,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"1\\",
-            \\"id\\": 16
+            \\"id\\": 17
           }
         },
         {
-          \\"parentId\\": 13,
+          \\"parentId\\": 14,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"\\\\n      \\",
-            \\"id\\": 17
+            \\"id\\": 18
           }
         },
         {
-          \\"parentId\\": 11,
+          \\"parentId\\": 12,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"\\\\n    \\",
-            \\"id\\": 18
+            \\"id\\": 19
           }
         },
         {
-          \\"parentId\\": 4,
+          \\"parentId\\": 5,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"div\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 23
+            \\"id\\": 24
           }
         },
         {
-          \\"parentId\\": 23,
+          \\"parentId\\": 24,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"span\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 11
+            \\"id\\": 12
           }
         }
       ]
@@ -8198,6 +8258,13 @@ exports[`serialize-before-record 1`] = `
       \\"node\\": {
         \\"type\\": 0,
         \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
@@ -8208,7 +8275,7 @@ exports[`serialize-before-record 1`] = `
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
                 \\"childNodes\\": [],
-                \\"id\\": 3
+                \\"id\\": 4
               },
               {
                 \\"type\\": 2,
@@ -8218,7 +8285,7 @@ exports[`serialize-before-record 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 5
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 2,
@@ -8228,15 +8295,15 @@ exports[`serialize-before-record 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"mutation observer\\",
-                        \\"id\\": 7
+                        \\"id\\": 8
                       }
                     ],
-                    \\"id\\": 6
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 8
+                    \\"id\\": 9
                   },
                   {
                     \\"type\\": 2,
@@ -8246,27 +8313,27 @@ exports[`serialize-before-record 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 10
+                        \\"id\\": 11
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"li\\",
                         \\"attributes\\": {},
                         \\"childNodes\\": [],
-                        \\"id\\": 11
+                        \\"id\\": 12
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n  \\",
-                        \\"id\\": 12
+                        \\"id\\": 13
                       }
                     ],
-                    \\"id\\": 9
+                    \\"id\\": 10
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 13
+                    \\"id\\": 14
                   },
                   {
                     \\"type\\": 2,
@@ -8276,21 +8343,21 @@ exports[`serialize-before-record 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 15
+                        \\"id\\": 16
                       }
                     ],
-                    \\"id\\": 14
+                    \\"id\\": 15
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\",
-                    \\"id\\": 16
+                    \\"id\\": 17
                   }
                 ],
-                \\"id\\": 4
+                \\"id\\": 5
               }
             ],
-            \\"id\\": 2
+            \\"id\\": 3
           }
         ],
         \\"id\\": 1
@@ -8310,36 +8377,36 @@ exports[`serialize-before-record 1`] = `
       \\"removes\\": [],
       \\"adds\\": [
         {
-          \\"parentId\\": 9,
+          \\"parentId\\": 10,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"li\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 17
+            \\"id\\": 18
           }
         },
         {
-          \\"parentId\\": 9,
-          \\"nextId\\": 17,
+          \\"parentId\\": 10,
+          \\"nextId\\": 18,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"li\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 18
+            \\"id\\": 19
           }
         },
         {
-          \\"parentId\\": 9,
-          \\"nextId\\": 18,
+          \\"parentId\\": 10,
+          \\"nextId\\": 19,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"li\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 19
+            \\"id\\": 20
           }
         }
       ]
diff --git a/packages/rrweb/test/__snapshots__/record.test.ts.snap b/packages/rrweb/test/__snapshots__/record.test.ts.snap
index 23b50a5615..2da23bf644 100644
--- a/packages/rrweb/test/__snapshots__/record.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/record.test.ts.snap
@@ -16,6 +16,13 @@ exports[`async-checkout 1`] = `
       \\"node\\": {
         \\"type\\": 0,
         \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
@@ -26,7 +33,7 @@ exports[`async-checkout 1`] = `
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
                 \\"childNodes\\": [],
-                \\"id\\": 3
+                \\"id\\": 4
               },
               {
                 \\"type\\": 2,
@@ -36,7 +43,7 @@ exports[`async-checkout 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n          \\",
-                    \\"id\\": 5
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 2,
@@ -46,18 +53,18 @@ exports[`async-checkout 1`] = `
                       \\"size\\": \\"40\\"
                     },
                     \\"childNodes\\": [],
-                    \\"id\\": 6
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
-                    \\"id\\": 7
+                    \\"id\\": 8
                   }
                 ],
-                \\"id\\": 4
+                \\"id\\": 5
               }
             ],
-            \\"id\\": 2
+            \\"id\\": 3
           }
         ],
         \\"id\\": 1
@@ -76,31 +83,31 @@ exports[`async-checkout 1`] = `
       \\"attributes\\": [],
       \\"removes\\": [
         {
-          \\"parentId\\": 4,
-          \\"id\\": 6
+          \\"parentId\\": 5,
+          \\"id\\": 7
         }
       ],
       \\"adds\\": [
         {
-          \\"parentId\\": 4,
+          \\"parentId\\": 5,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"p\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 8
+            \\"id\\": 9
           }
         },
         {
-          \\"parentId\\": 8,
+          \\"parentId\\": 9,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"span\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 9
+            \\"id\\": 10
           }
         }
       ]
@@ -115,12 +122,12 @@ exports[`async-checkout 1`] = `
       \\"removes\\": [],
       \\"adds\\": [
         {
-          \\"parentId\\": 9,
+          \\"parentId\\": 10,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"test\\",
-            \\"id\\": 10
+            \\"id\\": 11
           }
         }
       ]
@@ -140,6 +147,13 @@ exports[`async-checkout 1`] = `
       \\"node\\": {
         \\"type\\": 0,
         \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
@@ -150,7 +164,7 @@ exports[`async-checkout 1`] = `
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
                 \\"childNodes\\": [],
-                \\"id\\": 3
+                \\"id\\": 4
               },
               {
                 \\"type\\": 2,
@@ -160,12 +174,12 @@ exports[`async-checkout 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n          \\",
-                    \\"id\\": 5
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
-                    \\"id\\": 7
+                    \\"id\\": 8
                   },
                   {
                     \\"type\\": 2,
@@ -180,19 +194,19 @@ exports[`async-checkout 1`] = `
                           {
                             \\"type\\": 3,
                             \\"textContent\\": \\"test\\",
-                            \\"id\\": 10
+                            \\"id\\": 11
                           }
                         ],
-                        \\"id\\": 9
+                        \\"id\\": 10
                       }
                     ],
-                    \\"id\\": 8
+                    \\"id\\": 9
                   }
                 ],
-                \\"id\\": 4
+                \\"id\\": 5
               }
             ],
-            \\"id\\": 2
+            \\"id\\": 3
           }
         ],
         \\"id\\": 1
@@ -211,29 +225,29 @@ exports[`async-checkout 1`] = `
       \\"attributes\\": [],
       \\"removes\\": [
         {
-          \\"parentId\\": 8,
-          \\"id\\": 9
+          \\"parentId\\": 9,
+          \\"id\\": 10
         }
       ],
       \\"adds\\": [
         {
-          \\"parentId\\": 4,
+          \\"parentId\\": 5,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"span\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 9
+            \\"id\\": 10
           }
         },
         {
-          \\"parentId\\": 9,
+          \\"parentId\\": 10,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"test\\",
-            \\"id\\": 10
+            \\"id\\": 11
           }
         }
       ]
@@ -258,6 +272,13 @@ exports[`custom-event 1`] = `
       \\"node\\": {
         \\"type\\": 0,
         \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
@@ -268,7 +289,7 @@ exports[`custom-event 1`] = `
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
                 \\"childNodes\\": [],
-                \\"id\\": 3
+                \\"id\\": 4
               },
               {
                 \\"type\\": 2,
@@ -278,7 +299,7 @@ exports[`custom-event 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n          \\",
-                    \\"id\\": 5
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 2,
@@ -288,18 +309,18 @@ exports[`custom-event 1`] = `
                       \\"size\\": \\"40\\"
                     },
                     \\"childNodes\\": [],
-                    \\"id\\": 6
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
-                    \\"id\\": 7
+                    \\"id\\": 8
                   }
                 ],
-                \\"id\\": 4
+                \\"id\\": 5
               }
             ],
-            \\"id\\": 2
+            \\"id\\": 3
           }
         ],
         \\"id\\": 1
@@ -345,6 +366,13 @@ exports[`iframe-stylesheet-mutations 1`] = `
       \\"node\\": {
         \\"type\\": 0,
         \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
@@ -355,7 +383,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
                 \\"childNodes\\": [],
-                \\"id\\": 3
+                \\"id\\": 4
               },
               {
                 \\"type\\": 2,
@@ -365,7 +393,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n          \\",
-                    \\"id\\": 5
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 2,
@@ -377,16 +405,16 @@ exports[`iframe-stylesheet-mutations 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n        </body>\\\\n      </html>\\\\n    \\",
-                        \\"id\\": 7
+                        \\"id\\": 8
                       }
                     ],
-                    \\"id\\": 6
+                    \\"id\\": 7
                   }
                 ],
-                \\"id\\": 4
+                \\"id\\": 5
               }
             ],
-            \\"id\\": 2
+            \\"id\\": 3
           }
         ],
         \\"id\\": 1
@@ -403,7 +431,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
       \\"source\\": 0,
       \\"adds\\": [
         {
-          \\"parentId\\": 6,
+          \\"parentId\\": 7,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 0,
@@ -418,8 +446,8 @@ exports[`iframe-stylesheet-mutations 1`] = `
                     \\"tagName\\": \\"head\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [],
-                    \\"rootId\\": 8,
-                    \\"id\\": 10
+                    \\"rootId\\": 9,
+                    \\"id\\": 11
                   },
                   {
                     \\"type\\": 2,
@@ -434,23 +462,23 @@ exports[`iframe-stylesheet-mutations 1`] = `
                           {
                             \\"type\\": 3,
                             \\"textContent\\": \\"Mysterious Button\\",
-                            \\"rootId\\": 8,
-                            \\"id\\": 13
+                            \\"rootId\\": 9,
+                            \\"id\\": 14
                           }
                         ],
-                        \\"rootId\\": 8,
-                        \\"id\\": 12
+                        \\"rootId\\": 9,
+                        \\"id\\": 13
                       }
                     ],
-                    \\"rootId\\": 8,
-                    \\"id\\": 11
+                    \\"rootId\\": 9,
+                    \\"id\\": 12
                   }
                 ],
-                \\"rootId\\": 8,
-                \\"id\\": 9
+                \\"rootId\\": 9,
+                \\"id\\": 10
               }
             ],
-            \\"id\\": 8
+            \\"id\\": 9
           }
         }
       ],
@@ -469,7 +497,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
       \\"removes\\": [],
       \\"adds\\": [
         {
-          \\"parentId\\": 10,
+          \\"parentId\\": 11,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
@@ -478,8 +506,8 @@ exports[`iframe-stylesheet-mutations 1`] = `
               \\"_cssText\\": \\"body { background: rgb(0, 0, 0); }@media  {\\\\n  body { background: rgb(0, 0, 0); }\\\\n}\\"
             },
             \\"childNodes\\": [],
-            \\"rootId\\": 8,
-            \\"id\\": 14
+            \\"rootId\\": 9,
+            \\"id\\": 15
           }
         }
       ]
@@ -489,7 +517,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 8,
-      \\"id\\": 14,
+      \\"id\\": 15,
       \\"adds\\": [
         {
           \\"rule\\": \\"body { color: #fff; }\\"
@@ -501,7 +529,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 8,
-      \\"id\\": 14,
+      \\"id\\": 15,
       \\"adds\\": [
         {
           \\"rule\\": \\"body { color: #ccc; }\\",
@@ -517,7 +545,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 8,
-      \\"id\\": 14,
+      \\"id\\": 15,
       \\"removes\\": [
         {
           \\"index\\": 0
@@ -529,7 +557,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 13,
-      \\"id\\": 14,
+      \\"id\\": 15,
       \\"set\\": {
         \\"property\\": \\"color\\",
         \\"value\\": \\"green\\"
@@ -543,7 +571,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 8,
-      \\"id\\": 14,
+      \\"id\\": 15,
       \\"removes\\": [
         {
           \\"index\\": [
@@ -573,6 +601,13 @@ exports[`nested-stylesheet-rules 1`] = `
       \\"node\\": {
         \\"type\\": 0,
         \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
@@ -583,7 +618,7 @@ exports[`nested-stylesheet-rules 1`] = `
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
                 \\"childNodes\\": [],
-                \\"id\\": 3
+                \\"id\\": 4
               },
               {
                 \\"type\\": 2,
@@ -593,7 +628,7 @@ exports[`nested-stylesheet-rules 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n          \\",
-                    \\"id\\": 5
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 2,
@@ -603,18 +638,18 @@ exports[`nested-stylesheet-rules 1`] = `
                       \\"size\\": \\"40\\"
                     },
                     \\"childNodes\\": [],
-                    \\"id\\": 6
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
-                    \\"id\\": 7
+                    \\"id\\": 8
                   }
                 ],
-                \\"id\\": 4
+                \\"id\\": 5
               }
             ],
-            \\"id\\": 2
+            \\"id\\": 3
           }
         ],
         \\"id\\": 1
@@ -634,7 +669,7 @@ exports[`nested-stylesheet-rules 1`] = `
       \\"removes\\": [],
       \\"adds\\": [
         {
-          \\"parentId\\": 3,
+          \\"parentId\\": 4,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
@@ -643,7 +678,7 @@ exports[`nested-stylesheet-rules 1`] = `
               \\"_cssText\\": \\"@media  {\\\\n  body { background: rgb(0, 0, 0); }\\\\n}\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 8
+            \\"id\\": 9
           }
         }
       ]
@@ -653,7 +688,7 @@ exports[`nested-stylesheet-rules 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 8,
-      \\"id\\": 8,
+      \\"id\\": 9,
       \\"adds\\": [
         {
           \\"rule\\": \\"body { color: #fff; }\\",
@@ -669,7 +704,7 @@ exports[`nested-stylesheet-rules 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 8,
-      \\"id\\": 8,
+      \\"id\\": 9,
       \\"removes\\": [
         {
           \\"index\\": [
@@ -684,7 +719,7 @@ exports[`nested-stylesheet-rules 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 8,
-      \\"id\\": 8,
+      \\"id\\": 9,
       \\"adds\\": [
         {
           \\"rule\\": \\"body { color: #ccc; }\\",
@@ -715,6 +750,13 @@ exports[`stylesheet-properties 1`] = `
       \\"node\\": {
         \\"type\\": 0,
         \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
@@ -725,7 +767,7 @@ exports[`stylesheet-properties 1`] = `
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
                 \\"childNodes\\": [],
-                \\"id\\": 3
+                \\"id\\": 4
               },
               {
                 \\"type\\": 2,
@@ -735,7 +777,7 @@ exports[`stylesheet-properties 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n          \\",
-                    \\"id\\": 5
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 2,
@@ -745,18 +787,18 @@ exports[`stylesheet-properties 1`] = `
                       \\"size\\": \\"40\\"
                     },
                     \\"childNodes\\": [],
-                    \\"id\\": 6
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
-                    \\"id\\": 7
+                    \\"id\\": 8
                   }
                 ],
-                \\"id\\": 4
+                \\"id\\": 5
               }
             ],
-            \\"id\\": 2
+            \\"id\\": 3
           }
         ],
         \\"id\\": 1
@@ -776,7 +818,7 @@ exports[`stylesheet-properties 1`] = `
       \\"removes\\": [],
       \\"adds\\": [
         {
-          \\"parentId\\": 3,
+          \\"parentId\\": 4,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
@@ -785,7 +827,7 @@ exports[`stylesheet-properties 1`] = `
               \\"_cssText\\": \\"body { background: rgb(0, 0, 0); }\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 8
+            \\"id\\": 9
           }
         }
       ]
@@ -795,7 +837,7 @@ exports[`stylesheet-properties 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 13,
-      \\"id\\": 8,
+      \\"id\\": 9,
       \\"set\\": {
         \\"property\\": \\"color\\",
         \\"value\\": \\"green\\"
@@ -809,7 +851,7 @@ exports[`stylesheet-properties 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 13,
-      \\"id\\": 8,
+      \\"id\\": 9,
       \\"remove\\": {
         \\"property\\": \\"background\\"
       },
@@ -837,6 +879,13 @@ exports[`stylesheet-rules 1`] = `
       \\"node\\": {
         \\"type\\": 0,
         \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
@@ -847,7 +896,7 @@ exports[`stylesheet-rules 1`] = `
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
                 \\"childNodes\\": [],
-                \\"id\\": 3
+                \\"id\\": 4
               },
               {
                 \\"type\\": 2,
@@ -857,7 +906,7 @@ exports[`stylesheet-rules 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n          \\",
-                    \\"id\\": 5
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 2,
@@ -867,18 +916,18 @@ exports[`stylesheet-rules 1`] = `
                       \\"size\\": \\"40\\"
                     },
                     \\"childNodes\\": [],
-                    \\"id\\": 6
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
-                    \\"id\\": 7
+                    \\"id\\": 8
                   }
                 ],
-                \\"id\\": 4
+                \\"id\\": 5
               }
             ],
-            \\"id\\": 2
+            \\"id\\": 3
           }
         ],
         \\"id\\": 1
@@ -898,7 +947,7 @@ exports[`stylesheet-rules 1`] = `
       \\"removes\\": [],
       \\"adds\\": [
         {
-          \\"parentId\\": 3,
+          \\"parentId\\": 4,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
@@ -907,7 +956,7 @@ exports[`stylesheet-rules 1`] = `
               \\"_cssText\\": \\"body { background: rgb(0, 0, 0); }\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 8
+            \\"id\\": 9
           }
         }
       ]
@@ -917,7 +966,7 @@ exports[`stylesheet-rules 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 8,
-      \\"id\\": 8,
+      \\"id\\": 9,
       \\"adds\\": [
         {
           \\"rule\\": \\"body { color: #fff; }\\"
@@ -929,7 +978,7 @@ exports[`stylesheet-rules 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 8,
-      \\"id\\": 8,
+      \\"id\\": 9,
       \\"removes\\": [
         {
           \\"index\\": 0
@@ -941,7 +990,7 @@ exports[`stylesheet-rules 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 8,
-      \\"id\\": 8,
+      \\"id\\": 9,
       \\"adds\\": [
         {
           \\"rule\\": \\"body { color: #ccc; }\\"
diff --git a/packages/rrweb/test/html/move-node.html b/packages/rrweb/test/html/move-node.html
index bbe607b700..cf08e23406 100644
--- a/packages/rrweb/test/html/move-node.html
+++ b/packages/rrweb/test/html/move-node.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <body>
     <div>
diff --git a/packages/rrweb/test/html/mutation-observer.html b/packages/rrweb/test/html/mutation-observer.html
index d5b8405972..0175a31901 100644
--- a/packages/rrweb/test/html/mutation-observer.html
+++ b/packages/rrweb/test/html/mutation-observer.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <body>
   <p>mutation observer</p>
   <ul>
diff --git a/packages/rrweb/test/html/password.html b/packages/rrweb/test/html/password.html
index 434899a8e0..59ab933101 100644
--- a/packages/rrweb/test/html/password.html
+++ b/packages/rrweb/test/html/password.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/packages/rrweb/test/record.test.ts b/packages/rrweb/test/record.test.ts
index 884a274933..dfb9153dd5 100644
--- a/packages/rrweb/test/record.test.ts
+++ b/packages/rrweb/test/record.test.ts
@@ -72,6 +72,7 @@ describe('record', function (this: ISuite) {
   setup.call(
     this,
     `
+      <!DOCTYPE html>
       <html>
         <body>
           <input type="text" size="40" />
@@ -346,6 +347,7 @@ describe('record iframes', function (this: ISuite) {
   setup.call(
     this,
     `
+      <!DOCTYPE html>
       <html>
         <body>
           <iframe srcdoc="<button>Mysterious Button</button>" />

From 2afd4a27e6617390d58f9e29db741e85f795a542 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 6 Oct 2021 12:13:55 +0800
Subject: [PATCH 451/524] upgrade rollup and rollup plugins

---
 packages/rrweb-snapshot/package.json          |   8 +-
 packages/rrweb-snapshot/rollup.config.js      |   2 +-
 packages/rrweb-snapshot/tsconfig.json         |   5 +-
 packages/rrweb/package.json                   |   9 +-
 packages/rrweb/rollup.config.js               |  95 +++++++------
 packages/rrweb/tsconfig.json                  |   5 +-
 packages/rrweb/typings/boost.d.ts             |   2 -
 .../typings/plugins/console/record/index.d.ts |   2 +-
 packages/rrweb/typings/record/collection.d.ts |   4 -
 .../typings/record/error-stack-parser.d.ts    |  37 -----
 packages/rrweb/typings/record/stringify.d.ts  |   2 -
 packages/rrweb/typings/types.d.ts             |   8 +-
 packages/rrweb/typings/utils.d.ts             |   4 +-
 yarn.lock                                     | 134 +++---------------
 14 files changed, 93 insertions(+), 224 deletions(-)
 delete mode 100644 packages/rrweb/typings/boost.d.ts
 delete mode 100644 packages/rrweb/typings/record/collection.d.ts
 delete mode 100644 packages/rrweb/typings/record/error-stack-parser.d.ts
 delete mode 100644 packages/rrweb/typings/record/stringify.d.ts

diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
index 0d7208a08b..a3b5af93e6 100644
--- a/packages/rrweb-snapshot/package.json
+++ b/packages/rrweb-snapshot/package.json
@@ -37,6 +37,7 @@
   },
   "homepage": "https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-snapshot#readme",
   "devDependencies": {
+    "@rollup/plugin-typescript": "^8.2.5",
     "@types/chai": "^4.1.4",
     "@types/jsdom": "^16.2.4",
     "@types/mocha": "^5.2.5",
@@ -48,12 +49,11 @@
     "jsdom": "^16.4.0",
     "mocha": "^5.2.0",
     "puppeteer": "^1.15.0",
-    "rollup": "^0.66.4",
-    "rollup-plugin-terser": "^3.0.0",
-    "rollup-plugin-typescript": "^1.0.0",
+    "rollup": "^2.45.2",
+    "rollup-plugin-terser": "^7.0.2",
     "ts-node": "^7.0.1",
     "tslib": "^1.9.3",
     "tslint": "^4.5.1",
-    "typescript": "^3.4.1"
+    "typescript": "^3.9.7"
   }
 }
diff --git a/packages/rrweb-snapshot/rollup.config.js b/packages/rrweb-snapshot/rollup.config.js
index 7101942126..6a8b0a0933 100644
--- a/packages/rrweb-snapshot/rollup.config.js
+++ b/packages/rrweb-snapshot/rollup.config.js
@@ -1,4 +1,4 @@
-import typescript from 'rollup-plugin-typescript';
+import typescript from '@rollup/plugin-typescript';
 import { terser } from 'rollup-plugin-terser';
 import pkg from './package.json';
 
diff --git a/packages/rrweb-snapshot/tsconfig.json b/packages/rrweb-snapshot/tsconfig.json
index d58ee54673..3ec2570072 100644
--- a/packages/rrweb-snapshot/tsconfig.json
+++ b/packages/rrweb-snapshot/tsconfig.json
@@ -1,16 +1,15 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "noImplicitAny": true,
     "strictNullChecks": true,
     "removeComments": true,
     "preserveConstEnums": true,
-    "sourceMap": true,
     "rootDir": "src",
     "outDir": "build",
     "lib": ["es6", "dom"]
   },
-  "compileOnSave": true,
   "exclude": ["test"],
   "include": ["src", "test.d.ts"]
 }
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 2154750623..e8437fddba 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -40,6 +40,7 @@
   },
   "homepage": "https://github.com/rrweb-io/rrweb#readme",
   "devDependencies": {
+    "@rollup/plugin-typescript": "^8.2.5",
     "@types/chai": "^4.1.6",
     "@types/inquirer": "0.0.43",
     "@types/jsdom": "^16.2.12",
@@ -58,13 +59,11 @@
     "mocha": "^5.2.0",
     "prettier": "2.2.1",
     "puppeteer": "^9.1.1",
-    "rollup": "^2.3.3",
-    "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-node-resolve": "^3.4.0",
+    "rollup": "^2.45.2",
+    "@rollup/plugin-node-resolve": "^7.0.0",
     "rollup-plugin-postcss": "^3.1.1",
     "rollup-plugin-rename-node-modules": "^1.1.0",
-    "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-typescript": "^1.0.0",
+    "rollup-plugin-terser": "^7.0.2",
     "ts-node": "^7.0.1",
     "tslib": "^1.9.3",
     "tslint": "^4.5.1",
diff --git a/packages/rrweb/rollup.config.js b/packages/rrweb/rollup.config.js
index a1810bb6ff..f97ceb2347 100644
--- a/packages/rrweb/rollup.config.js
+++ b/packages/rrweb/rollup.config.js
@@ -1,9 +1,10 @@
-import typescript from 'rollup-plugin-typescript';
-import resolve from 'rollup-plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import resolve from '@rollup/plugin-node-resolve';
 import { terser } from 'rollup-plugin-terser';
 import postcss from 'rollup-plugin-postcss';
 import renameNodeModules from 'rollup-plugin-rename-node-modules';
 import pkg from './package.json';
+const tsConfig = require('./tsconfig.json');
 
 function toRecordPath(path) {
   return path
@@ -46,35 +47,35 @@ function toMinPath(path) {
 
 const baseConfigs = [
   // record only
-  {
-    input: './src/record/index.ts',
-    name: 'rrwebRecord',
-    pathFn: toRecordPath,
-  },
-  // record and pack
-  {
-    input: './src/entries/record-pack.ts',
-    name: 'rrwebRecord',
-    pathFn: toRecordPackPath,
-  },
-  // replay only
-  {
-    input: './src/replay/index.ts',
-    name: 'rrwebReplay',
-    pathFn: toReplayPath,
-  },
-  // replay and unpack
-  {
-    input: './src/entries/replay-unpack.ts',
-    name: 'rrwebReplay',
-    pathFn: toReplayUnpackPath,
-  },
-  // record and replay
-  {
-    input: './src/index.ts',
-    name: 'rrweb',
-    pathFn: (p) => p,
-  },
+  // {
+  //   input: './src/record/index.ts',
+  //   name: 'rrwebRecord',
+  //   pathFn: toRecordPath,
+  // },
+  // // record and pack
+  // {
+  //   input: './src/entries/record-pack.ts',
+  //   name: 'rrwebRecord',
+  //   pathFn: toRecordPackPath,
+  // },
+  // // replay only
+  // {
+  //   input: './src/replay/index.ts',
+  //   name: 'rrwebReplay',
+  //   pathFn: toReplayPath,
+  // },
+  // // replay and unpack
+  // {
+  //   input: './src/entries/replay-unpack.ts',
+  //   name: 'rrwebReplay',
+  //   pathFn: toReplayUnpackPath,
+  // },
+  // // record and replay
+  // {
+  //   input: './src/index.ts',
+  //   name: 'rrweb',
+  //   pathFn: (p) => p,
+  // },
   // all in one
   {
     input: './src/entries/all.ts',
@@ -83,22 +84,28 @@ const baseConfigs = [
     esm: true,
   },
   // plugins
-  {
-    input: './src/plugins/console/record/index.ts',
-    name: 'rrwebConsoleRecord',
-    pathFn: toPluginPath('console', 'record'),
-  },
-  {
-    input: './src/plugins/console/replay/index.ts',
-    name: 'rrwebConsoleReplay',
-    pathFn: toPluginPath('console', 'replay'),
-  },
+  // {
+  //   input: './src/plugins/console/record/index.ts',
+  //   name: 'rrwebConsoleRecord',
+  //   pathFn: toPluginPath('console', 'record'),
+  // },
+  // {
+  //   input: './src/plugins/console/replay/index.ts',
+  //   name: 'rrwebConsoleReplay',
+  //   pathFn: toPluginPath('console', 'replay'),
+  // },
 ];
 
 let configs = [];
 
 for (const c of baseConfigs) {
-  const basePlugins = [resolve({ browser: true }), typescript()];
+  const basePlugins = [
+    resolve({ browser: true }),
+    typescript({
+      // a trick to avoid @rollup/plugin-typescript error
+      outDir: 'es/rrweb',
+    }),
+  ];
   const plugins = basePlugins.concat(
     postcss({
       extract: false,
@@ -184,7 +191,9 @@ if (process.env.BROWSER_ONLY) {
   for (const c of browserOnlyBaseConfigs) {
     const plugins = [
       resolve({ browser: true }),
-      typescript(),
+      typescript({
+        outDir: null,
+      }),
       postcss({
         extract: false,
         inject: false,
diff --git a/packages/rrweb/tsconfig.json b/packages/rrweb/tsconfig.json
index cdbc63f088..b36dde7532 100644
--- a/packages/rrweb/tsconfig.json
+++ b/packages/rrweb/tsconfig.json
@@ -1,18 +1,17 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "target": "ES5",
     "noImplicitAny": true,
     "strictNullChecks": true,
     "removeComments": true,
     "preserveConstEnums": true,
-    "sourceMap": true,
     "rootDir": "src",
     "outDir": "build",
     "lib": ["es6", "dom"],
     "downlevelIteration": true
   },
-  "compileOnSave": true,
   "exclude": ["test"],
   "include": [
     "src",
diff --git a/packages/rrweb/typings/boost.d.ts b/packages/rrweb/typings/boost.d.ts
deleted file mode 100644
index 52bd640bae..0000000000
--- a/packages/rrweb/typings/boost.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './index';
-export * from './packer';
diff --git a/packages/rrweb/typings/plugins/console/record/index.d.ts b/packages/rrweb/typings/plugins/console/record/index.d.ts
index a41ee5506b..0c3bc2fd61 100644
--- a/packages/rrweb/typings/plugins/console/record/index.d.ts
+++ b/packages/rrweb/typings/plugins/console/record/index.d.ts
@@ -8,7 +8,7 @@ declare type LogRecordOptions = {
     level?: LogLevel[];
     lengthThreshold?: number;
     stringifyOptions?: StringifyOptions;
-    logger?: Logger | string;
+    logger?: Logger | 'console';
 };
 export declare type LogData = {
     level: LogLevel;
diff --git a/packages/rrweb/typings/record/collection.d.ts b/packages/rrweb/typings/record/collection.d.ts
deleted file mode 100644
index 1f6c5b9a29..0000000000
--- a/packages/rrweb/typings/record/collection.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { removedNodeMutation } from '../types';
-export declare function deepDelete(addsSet: Set<Node>, n: Node): void;
-export declare function isParentRemoved(removes: removedNodeMutation[], n: Node): boolean;
-export declare function isAncestorInSet(set: Set<Node>, n: Node): boolean;
diff --git a/packages/rrweb/typings/record/error-stack-parser.d.ts b/packages/rrweb/typings/record/error-stack-parser.d.ts
deleted file mode 100644
index 86a961da9b..0000000000
--- a/packages/rrweb/typings/record/error-stack-parser.d.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-export declare class StackFrame {
-    private fileName;
-    private functionName;
-    private lineNumber?;
-    private columnNumber?;
-    constructor(obj: {
-        fileName?: string;
-        functionName?: string;
-        lineNumber?: number;
-        columnNumber?: number;
-    });
-    toString(): string;
-}
-export declare const ErrorStackParser: {
-    parse: (error: Error) => StackFrame[];
-    extractLocation: (urlLike: string) => (string | undefined)[];
-    parseV8OrIE: (error: {
-        stack: string;
-    }) => StackFrame[];
-    parseFFOrSafari: (error: {
-        stack: string;
-    }) => StackFrame[];
-    parseOpera: (e: {
-        stacktrace?: string;
-        message: string;
-        stack?: string;
-    }) => StackFrame[];
-    parseOpera9: (e: {
-        message: string;
-    }) => StackFrame[];
-    parseOpera10: (e: {
-        stacktrace: string;
-    }) => StackFrame[];
-    parseOpera11: (error: {
-        stack: string;
-    }) => StackFrame[];
-};
diff --git a/packages/rrweb/typings/record/stringify.d.ts b/packages/rrweb/typings/record/stringify.d.ts
deleted file mode 100644
index d861956be3..0000000000
--- a/packages/rrweb/typings/record/stringify.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import { StringifyOptions } from '../types';
-export declare function stringify(obj: any, stringifyOptions?: StringifyOptions): string;
diff --git a/packages/rrweb/typings/types.d.ts b/packages/rrweb/typings/types.d.ts
index dda8f4b434..7d9c049435 100644
--- a/packages/rrweb/typings/types.d.ts
+++ b/packages/rrweb/typings/types.d.ts
@@ -126,7 +126,7 @@ export declare type SamplingStrategy = Partial<{
 }>;
 export declare type RecordPlugin<TOptions = unknown> = {
     name: string;
-    observer: (cb: Function, win: Window, options: TOptions) => listenerHandler;
+    observer: (cb: Function, win: IWindow, options: TOptions) => listenerHandler;
     options: TOptions;
 };
 export declare type recordOptions<T> = {
@@ -450,4 +450,10 @@ export declare type ElementState = {
     scroll?: [number, number];
 };
 export declare type KeepIframeSrcFn = (src: string) => boolean;
+declare global {
+    interface Window {
+        FontFace: typeof FontFace;
+    }
+}
+export declare type IWindow = Window & typeof globalThis;
 export {};
diff --git a/packages/rrweb/typings/utils.d.ts b/packages/rrweb/typings/utils.d.ts
index a3d0253285..bdd5d741d2 100644
--- a/packages/rrweb/typings/utils.d.ts
+++ b/packages/rrweb/typings/utils.d.ts
@@ -1,6 +1,6 @@
-import { Mirror, throttleOptions, listenerHandler, hookResetter, blockClass, addedNodeMutation, removedNodeMutation, textMutation, attributeMutation, mutationData, scrollData, inputData, DocumentDimension } from './types';
+import { Mirror, throttleOptions, listenerHandler, hookResetter, blockClass, addedNodeMutation, removedNodeMutation, textMutation, attributeMutation, mutationData, scrollData, inputData, DocumentDimension, IWindow } from './types';
 import { INode, serializedNodeWithId } from 'rrweb-snapshot';
-export declare function on(type: string, fn: EventListenerOrEventListenerObject, target?: Document | Window): listenerHandler;
+export declare function on(type: string, fn: EventListenerOrEventListenerObject, target?: Document | IWindow): listenerHandler;
 export declare function createMirror(): Mirror;
 export declare let _mirror: Mirror;
 export declare function throttle<T>(func: (arg: T) => void, wait: number, options?: throttleOptions): (arg: T) => void;
diff --git a/yarn.lock b/yarn.lock
index 26c0380c16..9310846578 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9,7 +9,7 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.0.0-beta.35", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.5.5":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.0.0-beta.35", "@babel/code-frame@^7.10.4":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
   integrity sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==
@@ -957,6 +957,14 @@
     "@rollup/pluginutils" "^3.0.1"
     resolve "^1.14.1"
 
+"@rollup/plugin-typescript@^8.2.5":
+  version "8.2.5"
+  resolved "http://192.168.26.29:7001/@rollup/plugin-typescript/download/@rollup/plugin-typescript-8.2.5.tgz#e0319761b2b5105615e5a0c371ae05bc2984b7de"
+  integrity sha1-4DGXYbK1EFYV5aDDca4FvCmEt94=
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    resolve "^1.17.0"
+
 "@rollup/pluginutils@4":
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec"
@@ -965,7 +973,7 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
-"@rollup/pluginutils@^3.0.1", "@rollup/pluginutils@^3.0.8":
+"@rollup/pluginutils@^3.0.1", "@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
   integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
@@ -1803,11 +1811,6 @@ buffer@^5.2.1, buffer@^5.5.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
-builtin-modules@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-2.0.0.tgz#60b7ef5ae6546bd7deefa74b08b62a43a232648e"
-  integrity sha512-3U5kUA5VPsRUA3nofm/BXX7GVHKfxz0hOBAPxXrIvHzlDRkQVqEn6yi8QJegxl4LzOHLdvb7XF5dVawa/VVYBg==
-
 builtin-modules@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.2.0.tgz#45d5db99e7ee5e6bc4f362e008bf917ab5049887"
@@ -2197,7 +2200,7 @@ commander@2.15.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
   integrity sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==
 
-commander@^2.19.0, commander@^2.20.0:
+commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -3211,7 +3214,7 @@ estraverse@^5.1.0, estraverse@^5.2.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
   integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
 
-estree-walker@^0.6.0, estree-walker@^0.6.1:
+estree-walker@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
   integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
@@ -4723,21 +4726,6 @@ jest-snapshot@^23.6.0:
     pretty-format "^23.6.0"
     semver "^5.5.0"
 
-jest-worker@^23.2.0:
-  version "23.2.0"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-23.2.0.tgz#faf706a8da36fae60eb26957257fa7b5d8ea02b9"
-  integrity sha1-+vcGqNo2+uYOsmlXJX+ntdjqArk=
-  dependencies:
-    merge-stream "^1.0.1"
-
-jest-worker@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
-  integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
-  dependencies:
-    merge-stream "^2.0.0"
-    supports-color "^6.1.0"
-
 jest-worker@^26.2.1:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
@@ -5287,13 +5275,6 @@ merge-descriptors@1.0.1:
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
   integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
 
-merge-stream@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-1.0.1.tgz#4041202d508a342ba00174008df0c251b8c135e1"
-  integrity sha1-QEEgLVCKNCugAXQAjfDCUbjBNeE=
-  dependencies:
-    readable-stream "^2.0.1"
-
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -7004,7 +6985,7 @@ readable-stream@3, readable-stream@^3.0.0, readable-stream@^3.0.2, readable-stre
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
-readable-stream@^2.0.1, readable-stream@^2.0.6, readable-stream@^2.2.2, readable-stream@~2.3.6:
+readable-stream@^2.0.6, readable-stream@^2.2.2, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -7164,7 +7145,7 @@ resolve@1.1.7:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.14.1, resolve@^1.14.2, resolve@^1.16.1, resolve@^1.20.0:
+resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.14.1, resolve@^1.14.2, resolve@^1.16.1, resolve@^1.17.0, resolve@^1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -7222,16 +7203,6 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rollup-plugin-commonjs@^9.2.0:
-  version "9.3.4"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-9.3.4.tgz#2b3dddbbbded83d45c36ff101cdd29e924fd23bc"
-  integrity sha512-DTZOvRoiVIHHLFBCL4pFxOaJt8pagxsVldEXBOn6wl3/V21wVaj17HFfyzTsQUuou3sZL3lEJZVWKPFblJfI6w==
-  dependencies:
-    estree-walker "^0.6.0"
-    magic-string "^0.25.2"
-    resolve "^1.10.0"
-    rollup-pluginutils "^2.6.0"
-
 rollup-plugin-css-only@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-css-only/-/rollup-plugin-css-only-3.1.0.tgz#6a701cc5b051c6b3f0961e69b108a9a118e1b1df"
@@ -7246,15 +7217,6 @@ rollup-plugin-livereload@^2.0.0:
   dependencies:
     livereload "^0.9.1"
 
-rollup-plugin-node-resolve@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.4.0.tgz#908585eda12e393caac7498715a01e08606abc89"
-  integrity sha512-PJcd85dxfSBWih84ozRtBkB731OjXk0KnzN0oGp7WOWcarAFkVa71cV5hTJg2qpVsV2U8EUwrzHP3tvy9vS3qg==
-  dependencies:
-    builtin-modules "^2.0.0"
-    is-module "^1.0.0"
-    resolve "^1.1.6"
-
 rollup-plugin-postcss@^3.1.1:
   version "3.1.8"
   resolved "https://registry.yarnpkg.com/rollup-plugin-postcss/-/rollup-plugin-postcss-3.1.8.tgz#d1bcaf8eb0fcb0936e3684c22dd8628d13a82fd1"
@@ -7291,27 +7253,6 @@ rollup-plugin-svelte@^7.1.0:
     require-relative "^0.8.7"
     rollup-pluginutils "^2.8.2"
 
-rollup-plugin-terser@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-3.0.0.tgz#045bd7cf625ee1affcfe6971dab6fffe6fb48c65"
-  integrity sha512-Ed9zRD7OoCBnh0XGlEAJle5TCUsFXMLClwKzZWnS1zbNO4MelHjfCSdFZxCAdH70M40nhZ1nRrY2GZQJhSMcjA==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    jest-worker "^23.2.0"
-    serialize-javascript "^1.5.0"
-    terser "^3.8.2"
-
-rollup-plugin-terser@^5.3.0:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-5.3.1.tgz#8c650062c22a8426c64268548957463bf981b413"
-  integrity sha512-1pkwkervMJQGFYvM9nscrUoncPwiKR/K+bHdjv6PFgRo3cgPHoRT83y2Aa3GvINj4539S15t/tpFPb775TDs6w==
-  dependencies:
-    "@babel/code-frame" "^7.5.5"
-    jest-worker "^24.9.0"
-    rollup-pluginutils "^2.8.2"
-    serialize-javascript "^4.0.0"
-    terser "^4.6.2"
-
 rollup-plugin-terser@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
@@ -7322,30 +7263,14 @@ rollup-plugin-terser@^7.0.2:
     serialize-javascript "^4.0.0"
     terser "^5.0.0"
 
-rollup-plugin-typescript@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-typescript/-/rollup-plugin-typescript-1.0.1.tgz#86565033b714c3d1f3aba510aad3dc519f7091e9"
-  integrity sha512-rwJDNn9jv/NsKZuyBb/h0jsclP4CJ58qbvZt2Q9zDIGILF2LtdtvCqMOL+Gq9IVq5MTrTlHZNrn8h7VjQgd8tw==
-  dependencies:
-    resolve "^1.10.0"
-    rollup-pluginutils "^2.5.0"
-
-rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.6.0, rollup-pluginutils@^2.8.2:
+rollup-pluginutils@^2.8.2:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
   integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
   dependencies:
     estree-walker "^0.6.1"
 
-rollup@^0.66.4:
-  version "0.66.6"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.66.6.tgz#ce7d6185beb7acea644ce220c25e71ae03275482"
-  integrity sha512-J7/SWanrcb83vfIHqa8+aVVGzy457GcjA6GVZEnD0x2u4OnOd0Q1pCrEoNe8yLwM6z6LZP02zBT2uW0yh5TqOw==
-  dependencies:
-    "@types/estree" "0.0.39"
-    "@types/node" "*"
-
-rollup@^2.3.3, rollup@^2.45.2:
+rollup@^2.45.2:
   version "2.53.3"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.53.3.tgz#14b0e57f0874d4ad23bdbb13050cf70bcd1eabf7"
   integrity sha512-79QIGP5DXz5ZHYnCPi3tLz+elOQi6gudp9YINdaJdjG0Yddubo6JRFUM//qCZ0Bap/GJrsUoEBVdSOc4AkMlRA==
@@ -7453,11 +7378,6 @@ send@0.17.1:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
-serialize-javascript@^1.5.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb"
-  integrity sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A==
-
 serialize-javascript@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
@@ -7618,7 +7538,7 @@ sort-keys@^4.0.0:
   dependencies:
     is-plain-obj "^2.0.0"
 
-source-map-support@^0.5.6, source-map-support@~0.5.10, source-map-support@~0.5.12, source-map-support@~0.5.19:
+source-map-support@^0.5.6, source-map-support@~0.5.19:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
   integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
@@ -8071,24 +7991,6 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
-terser@^3.8.2:
-  version "3.17.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-3.17.0.tgz#f88ffbeda0deb5637f9d24b0da66f4e15ab10cb2"
-  integrity sha512-/FQzzPJmCpjAH9Xvk2paiWrFq+5M6aVOf+2KRbwhByISDX/EujxsK+BAvrhb6H+2rtrLCHK9N01wO014vrIwVQ==
-  dependencies:
-    commander "^2.19.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.10"
-
-terser@^4.6.2:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
-  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
-  dependencies:
-    commander "^2.20.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.12"
-
 terser@^5.0.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.7.1.tgz#2dc7a61009b66bb638305cb2a824763b116bf784"
@@ -8350,7 +8252,7 @@ typescript@*:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
   integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
 
-typescript@^3.4.1, typescript@^3.9.5, typescript@^3.9.7:
+typescript@^3.9.5, typescript@^3.9.7:
   version "3.9.10"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8"
   integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==

From 5622738e611db0934c386c50885a4d812ac74aee Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 6 Oct 2021 13:19:53 +0800
Subject: [PATCH 452/524] fix lock file registry

---
 packages/rrweb/package.json | 2 +-
 yarn.lock                   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index e8437fddba..c86b298aa9 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -40,6 +40,7 @@
   },
   "homepage": "https://github.com/rrweb-io/rrweb#readme",
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "^7.0.0",
     "@rollup/plugin-typescript": "^8.2.5",
     "@types/chai": "^4.1.6",
     "@types/inquirer": "0.0.43",
@@ -60,7 +61,6 @@
     "prettier": "2.2.1",
     "puppeteer": "^9.1.1",
     "rollup": "^2.45.2",
-    "@rollup/plugin-node-resolve": "^7.0.0",
     "rollup-plugin-postcss": "^3.1.1",
     "rollup-plugin-rename-node-modules": "^1.1.0",
     "rollup-plugin-terser": "^7.0.2",
diff --git a/yarn.lock b/yarn.lock
index 9310846578..03349d1167 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -959,8 +959,8 @@
 
 "@rollup/plugin-typescript@^8.2.5":
   version "8.2.5"
-  resolved "http://192.168.26.29:7001/@rollup/plugin-typescript/download/@rollup/plugin-typescript-8.2.5.tgz#e0319761b2b5105615e5a0c371ae05bc2984b7de"
-  integrity sha1-4DGXYbK1EFYV5aDDca4FvCmEt94=
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-8.2.5.tgz#e0319761b2b5105615e5a0c371ae05bc2984b7de"
+  integrity sha512-QL/LvDol/PAGB2O0S7/+q2HpSUNodpw7z6nGn9BfoVCPOZ0r4EALrojFU29Bkoi2Hr2jgTocTejJ5GGWZfOxbQ==
   dependencies:
     "@rollup/pluginutils" "^3.1.0"
     resolve "^1.17.0"

From 18e4356be9d0c25c10a24d94c0faa7176190852b Mon Sep 17 00:00:00 2001
From: yz-yu <yanzhen@smartx.com>
Date: Wed, 6 Oct 2021 15:31:42 +0800
Subject: [PATCH 453/524] migrate to jest (#721)

* migrate rrweb-snapshot tests to jest

* migrate rrweb tests to jest
---
 packages/rrweb-snapshot/jest.config.js        |     6 +
 packages/rrweb-snapshot/package.json          |     8 +-
 packages/rrweb-snapshot/test.d.ts             |    21 -
 ...ation.ts.snap => integration.test.ts.snap} |   310 +-
 packages/rrweb-snapshot/test/css.test.ts      |    66 +-
 .../{integration.ts => integration.test.ts}   |   180 +-
 packages/rrweb-snapshot/test/rebuild.test.ts  |    35 +-
 packages/rrweb-snapshot/test/snapshot.test.ts |    46 +-
 packages/rrweb-snapshot/tsconfig.json         |     2 +-
 packages/rrweb/jest.config.js                 |     6 +
 packages/rrweb/package.json                   |    12 +-
 packages/rrweb/test.d.ts                      |    16 -
 .../__snapshots__/integration.test.ts.snap    | 10708 ++++++++--------
 .../test/__snapshots__/packer.test.ts.snap    |   Bin 150 -> 165 bytes
 .../test/__snapshots__/record.test.ts.snap    |   511 +-
 .../test/__snapshots__/replayer.test.ts.snap  |   193 +-
 packages/rrweb/test/html/main.html            |     2 +-
 packages/rrweb/test/integration.test.ts       |   131 +-
 packages/rrweb/test/machine.test.ts           |     9 +-
 packages/rrweb/test/packer.test.ts            |    13 +-
 packages/rrweb/test/record.test.ts            |   231 +-
 .../rrweb/test/replay/virtual-styles.test.ts  |    29 +-
 packages/rrweb/test/replayer.test.ts          |   147 +-
 packages/rrweb/test/utils.ts                  |    34 +-
 packages/rrweb/tsconfig.json                  |     6 +-
 yarn.lock                                     |  1620 ++-
 26 files changed, 7836 insertions(+), 6506 deletions(-)
 create mode 100644 packages/rrweb-snapshot/jest.config.js
 delete mode 100644 packages/rrweb-snapshot/test.d.ts
 rename packages/rrweb-snapshot/test/__snapshots__/{integration.ts.snap => integration.test.ts.snap} (95%)
 rename packages/rrweb-snapshot/test/{integration.ts => integration.test.ts} (60%)
 create mode 100644 packages/rrweb/jest.config.js
 delete mode 100644 packages/rrweb/test.d.ts

diff --git a/packages/rrweb-snapshot/jest.config.js b/packages/rrweb-snapshot/jest.config.js
new file mode 100644
index 0000000000..46cb05c37d
--- /dev/null
+++ b/packages/rrweb-snapshot/jest.config.js
@@ -0,0 +1,6 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  testMatch: ['**/**.test.ts'],
+};
diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
index a3b5af93e6..f95517cbe9 100644
--- a/packages/rrweb-snapshot/package.json
+++ b/packages/rrweb-snapshot/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "prepare": "npm run prepack",
     "prepack": "npm run bundle && npm run typings",
-    "test": "cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.ts",
+    "test": "jest",
     "bundle": "rollup --config",
     "bundle:es-only": "cross-env ES_ONLY=true rollup --config",
     "typings": "tsc -d --declarationDir typings",
@@ -39,18 +39,18 @@
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.2.5",
     "@types/chai": "^4.1.4",
+    "@types/jest": "^27.0.2",
     "@types/jsdom": "^16.2.4",
-    "@types/mocha": "^5.2.5",
     "@types/node": "^10.11.3",
     "@types/puppeteer": "^1.12.4",
-    "chai": "^4.1.2",
     "cross-env": "^5.2.0",
+    "jest": "^27.2.4",
     "jest-snapshot": "^23.6.0",
     "jsdom": "^16.4.0",
-    "mocha": "^5.2.0",
     "puppeteer": "^1.15.0",
     "rollup": "^2.45.2",
     "rollup-plugin-terser": "^7.0.2",
+    "ts-jest": "^27.0.5",
     "ts-node": "^7.0.1",
     "tslib": "^1.9.3",
     "tslint": "^4.5.1",
diff --git a/packages/rrweb-snapshot/test.d.ts b/packages/rrweb-snapshot/test.d.ts
deleted file mode 100644
index a3b614eedb..0000000000
--- a/packages/rrweb-snapshot/test.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-declare module 'rollup-plugin-typescript' {
-  function typescript(): any;
-  export = typescript;
-}
-
-declare module 'jest-snapshot' {
-  export class SnapshotState {
-    constructor(testFile: string, options: any);
-
-    save(): any;
-  }
-  type matchResult = {
-    pass: boolean;
-    report(): string;
-  };
-  export function toMatchSnapshot(
-    received: any,
-    propertyMatchers?: any,
-    testName?: string,
-  ): matchResult;
-}
diff --git a/packages/rrweb-snapshot/test/__snapshots__/integration.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
similarity index 95%
rename from packages/rrweb-snapshot/test/__snapshots__/integration.ts.snap
rename to packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
index bb92551cde..c3399843d1 100644
--- a/packages/rrweb-snapshot/test/__snapshots__/integration.ts.snap
+++ b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
@@ -1,6 +1,138 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[html file]: about-mozilla.html 1`] = `
+exports[`iframe integration tests snapshot async iframes 1`] = `
+"{
+  \\"type\\": 0,
+  \\"childNodes\\": [
+    {
+      \\"type\\": 1,
+      \\"name\\": \\"html\\",
+      \\"publicId\\": \\"\\",
+      \\"systemId\\": \\"\\",
+      \\"id\\": 2
+    },
+    {
+      \\"type\\": 2,
+      \\"tagName\\": \\"html\\",
+      \\"attributes\\": {
+        \\"lang\\": \\"en\\"
+      },
+      \\"childNodes\\": [
+        {
+          \\"type\\": 2,
+          \\"tagName\\": \\"head\\",
+          \\"attributes\\": {},
+          \\"childNodes\\": [
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n    \\",
+              \\"id\\": 5
+            },
+            {
+              \\"type\\": 2,
+              \\"tagName\\": \\"meta\\",
+              \\"attributes\\": {
+                \\"charset\\": \\"UTF-8\\"
+              },
+              \\"childNodes\\": [],
+              \\"id\\": 6
+            },
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n    \\",
+              \\"id\\": 7
+            },
+            {
+              \\"type\\": 2,
+              \\"tagName\\": \\"meta\\",
+              \\"attributes\\": {
+                \\"name\\": \\"viewport\\",
+                \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+              },
+              \\"childNodes\\": [],
+              \\"id\\": 8
+            },
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n    \\",
+              \\"id\\": 9
+            },
+            {
+              \\"type\\": 2,
+              \\"tagName\\": \\"title\\",
+              \\"attributes\\": {},
+              \\"childNodes\\": [
+                {
+                  \\"type\\": 3,
+                  \\"textContent\\": \\"Main\\",
+                  \\"id\\": 11
+                }
+              ],
+              \\"id\\": 10
+            },
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n  \\",
+              \\"id\\": 12
+            }
+          ],
+          \\"id\\": 4
+        },
+        {
+          \\"type\\": 3,
+          \\"textContent\\": \\"\\\\n  \\",
+          \\"id\\": 13
+        },
+        {
+          \\"type\\": 2,
+          \\"tagName\\": \\"body\\",
+          \\"attributes\\": {},
+          \\"childNodes\\": [
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n    \\",
+              \\"id\\": 15
+            },
+            {
+              \\"type\\": 2,
+              \\"tagName\\": \\"iframe\\",
+              \\"attributes\\": {
+                \\"id\\": \\"one\\"
+              },
+              \\"childNodes\\": [],
+              \\"id\\": 16
+            },
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n    \\",
+              \\"id\\": 17
+            },
+            {
+              \\"type\\": 2,
+              \\"tagName\\": \\"iframe\\",
+              \\"attributes\\": {
+                \\"id\\": \\"two\\"
+              },
+              \\"childNodes\\": [],
+              \\"id\\": 18
+            },
+            {
+              \\"type\\": 3,
+              \\"textContent\\": \\"\\\\n  \\\\n\\\\n\\",
+              \\"id\\": 19
+            }
+          ],
+          \\"id\\": 14
+        }
+      ],
+      \\"id\\": 3
+    }
+  ],
+  \\"id\\": 1
+}"
+`;
+
+exports[`integration tests [html file]: about-mozilla.html 1`] = `
 "<!DOCTYPE html><html><head>
   <title>The Book of Mozilla, 11:9</title>
   <style type=\\"text/css\\">
@@ -39,7 +171,7 @@ exports[`[html file]: about-mozilla.html 1`] = `
   </p></body></html>"
 `;
 
-exports[`[html file]: basic.html 1`] = `
+exports[`integration tests [html file]: basic.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -49,7 +181,7 @@ exports[`[html file]: basic.html 1`] = `
   <h1>Title</h1></body></html>"
 `;
 
-exports[`[html file]: block-element.html 1`] = `
+exports[`integration tests [html file]: block-element.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -74,7 +206,7 @@ exports[`[html file]: block-element.html 1`] = `
   </body></html>"
 `;
 
-exports[`[html file]: compat-mode.html 1`] = `
+exports[`integration tests [html file]: compat-mode.html 1`] = `
 "<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><!-- no doctype! --><html><head>
   <title>Compat Mode; image resizing</title>
 </head>
@@ -88,7 +220,7 @@ exports[`[html file]: compat-mode.html 1`] = `
 </body></html>"
 `;
 
-exports[`[html file]: cors-style-sheet.html 1`] = `
+exports[`integration tests [html file]: cors-style-sheet.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -100,7 +232,7 @@ exports[`[html file]: cors-style-sheet.html 1`] = `
   <body></body></html>"
 `;
 
-exports[`[html file]: dynamic-stylesheet.html 1`] = `
+exports[`integration tests [html file]: dynamic-stylesheet.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -114,7 +246,7 @@ exports[`[html file]: dynamic-stylesheet.html 1`] = `
   </body></html>"
 `;
 
-exports[`[html file]: form-fields.html 1`] = `
+exports[`integration tests [html file]: form-fields.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -148,7 +280,7 @@ exports[`[html file]: form-fields.html 1`] = `
   <noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
 `;
 
-exports[`[html file]: hover.html 1`] = `
+exports[`integration tests [html file]: hover.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -171,7 +303,7 @@ exports[`[html file]: hover.html 1`] = `
 </body></html>"
 `;
 
-exports[`[html file]: iframe.html 1`] = `
+exports[`integration tests [html file]: iframe.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -183,17 +315,17 @@ exports[`[html file]: iframe.html 1`] = `
 </body></html>"
 `;
 
-exports[`[html file]: iframe-inner.html 1`] = `
+exports[`integration tests [html file]: iframe-inner.html 1`] = `
 "<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><html><head></head><body><button>inner iframe button</button>
 </body></html>"
 `;
 
-exports[`[html file]: invalid-attribute.html 1`] = `
+exports[`integration tests [html file]: invalid-attribute.html 1`] = `
 "<!DOCTYPE html PUBLIC \\"-//W3C//DTD HTML 4.0 Transitional//EN\\"><html foo=\\"bar\\"><head></head><body>
 </body></html>"
 `;
 
-exports[`[html file]: invalid-doctype.html 1`] = `
+exports[`integration tests [html file]: invalid-doctype.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -202,7 +334,7 @@ exports[`[html file]: invalid-doctype.html 1`] = `
   <body></body></html>"
 `;
 
-exports[`[html file]: invalid-tagname.html 1`] = `
+exports[`integration tests [html file]: invalid-tagname.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -216,7 +348,7 @@ exports[`[html file]: invalid-tagname.html 1`] = `
 </body></html>"
 `;
 
-exports[`[html file]: mask-text.html 1`] = `
+exports[`integration tests [html file]: mask-text.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -231,7 +363,7 @@ exports[`[html file]: mask-text.html 1`] = `
   </body></html>"
 `;
 
-exports[`[html file]: picture.html 1`] = `
+exports[`integration tests [html file]: picture.html 1`] = `
 "<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\"><html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
     <picture>
       <source type=\\"image/webp\\" srcset=\\"http://localhost:3030/assets/img/characters/robot.webp\\" />
@@ -240,7 +372,7 @@ exports[`[html file]: picture.html 1`] = `
   </body></html>"
 `;
 
-exports[`[html file]: preload.html 1`] = `
+exports[`integration tests [html file]: preload.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -251,7 +383,7 @@ exports[`[html file]: preload.html 1`] = `
   <body></body></html>"
 `;
 
-exports[`[html file]: shadow-dom.html 1`] = `
+exports[`integration tests [html file]: shadow-dom.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -270,7 +402,7 @@ exports[`[html file]: shadow-dom.html 1`] = `
   </body></html>"
 `;
 
-exports[`[html file]: video.html 1`] = `
+exports[`integration tests [html file]: video.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -285,7 +417,7 @@ exports[`[html file]: video.html 1`] = `
   </body></html>"
 `;
 
-exports[`[html file]: with-relative-res.html 1`] = `
+exports[`integration tests [html file]: with-relative-res.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -305,7 +437,7 @@ exports[`[html file]: with-relative-res.html 1`] = `
   <img src=\\"http://localhost:3030/a.jpg\\" alt=\\"\\" srcset=\\"http://localhost:3030/300,400/a.jpg 300w, http://localhost:3030/b.png\\" /></body></html>"
 `;
 
-exports[`[html file]: with-script.html 1`] = `
+exports[`integration tests [html file]: with-script.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -316,7 +448,7 @@ exports[`[html file]: with-script.html 1`] = `
   <noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
 `;
 
-exports[`[html file]: with-style-sheet.html 1`] = `
+exports[`integration tests [html file]: with-style-sheet.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -327,7 +459,7 @@ exports[`[html file]: with-style-sheet.html 1`] = `
 </body></html>"
 `;
 
-exports[`[html file]: with-style-sheet-with-import.html 1`] = `
+exports[`integration tests [html file]: with-style-sheet-with-import.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
   <meta charset=\\"UTF-8\\" />
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
@@ -338,139 +470,7 @@ exports[`[html file]: with-style-sheet-with-import.html 1`] = `
 </body></html>"
 `;
 
-exports[`iframe integration tests 1`] = `
-"{
-  \\"type\\": 0,
-  \\"childNodes\\": [
-    {
-      \\"type\\": 1,
-      \\"name\\": \\"html\\",
-      \\"publicId\\": \\"\\",
-      \\"systemId\\": \\"\\",
-      \\"id\\": 2
-    },
-    {
-      \\"type\\": 2,
-      \\"tagName\\": \\"html\\",
-      \\"attributes\\": {
-        \\"lang\\": \\"en\\"
-      },
-      \\"childNodes\\": [
-        {
-          \\"type\\": 2,
-          \\"tagName\\": \\"head\\",
-          \\"attributes\\": {},
-          \\"childNodes\\": [
-            {
-              \\"type\\": 3,
-              \\"textContent\\": \\"\\\\n    \\",
-              \\"id\\": 5
-            },
-            {
-              \\"type\\": 2,
-              \\"tagName\\": \\"meta\\",
-              \\"attributes\\": {
-                \\"charset\\": \\"UTF-8\\"
-              },
-              \\"childNodes\\": [],
-              \\"id\\": 6
-            },
-            {
-              \\"type\\": 3,
-              \\"textContent\\": \\"\\\\n    \\",
-              \\"id\\": 7
-            },
-            {
-              \\"type\\": 2,
-              \\"tagName\\": \\"meta\\",
-              \\"attributes\\": {
-                \\"name\\": \\"viewport\\",
-                \\"content\\": \\"width=device-width, initial-scale=1.0\\"
-              },
-              \\"childNodes\\": [],
-              \\"id\\": 8
-            },
-            {
-              \\"type\\": 3,
-              \\"textContent\\": \\"\\\\n    \\",
-              \\"id\\": 9
-            },
-            {
-              \\"type\\": 2,
-              \\"tagName\\": \\"title\\",
-              \\"attributes\\": {},
-              \\"childNodes\\": [
-                {
-                  \\"type\\": 3,
-                  \\"textContent\\": \\"Main\\",
-                  \\"id\\": 11
-                }
-              ],
-              \\"id\\": 10
-            },
-            {
-              \\"type\\": 3,
-              \\"textContent\\": \\"\\\\n  \\",
-              \\"id\\": 12
-            }
-          ],
-          \\"id\\": 4
-        },
-        {
-          \\"type\\": 3,
-          \\"textContent\\": \\"\\\\n  \\",
-          \\"id\\": 13
-        },
-        {
-          \\"type\\": 2,
-          \\"tagName\\": \\"body\\",
-          \\"attributes\\": {},
-          \\"childNodes\\": [
-            {
-              \\"type\\": 3,
-              \\"textContent\\": \\"\\\\n    \\",
-              \\"id\\": 15
-            },
-            {
-              \\"type\\": 2,
-              \\"tagName\\": \\"iframe\\",
-              \\"attributes\\": {
-                \\"id\\": \\"one\\"
-              },
-              \\"childNodes\\": [],
-              \\"id\\": 16
-            },
-            {
-              \\"type\\": 3,
-              \\"textContent\\": \\"\\\\n    \\",
-              \\"id\\": 17
-            },
-            {
-              \\"type\\": 2,
-              \\"tagName\\": \\"iframe\\",
-              \\"attributes\\": {
-                \\"id\\": \\"two\\"
-              },
-              \\"childNodes\\": [],
-              \\"id\\": 18
-            },
-            {
-              \\"type\\": 3,
-              \\"textContent\\": \\"\\\\n  \\\\n\\\\n\\",
-              \\"id\\": 19
-            }
-          ],
-          \\"id\\": 14
-        }
-      ],
-      \\"id\\": 3
-    }
-  ],
-  \\"id\\": 1
-}"
-`;
-
-exports[`shadow DOM integration tests 1`] = `
+exports[`shadow DOM integration tests snapshot shadow DOM 1`] = `
 "{
   \\"type\\": 0,
   \\"childNodes\\": [
diff --git a/packages/rrweb-snapshot/test/css.test.ts b/packages/rrweb-snapshot/test/css.test.ts
index f94c06d7d9..4461022beb 100644
--- a/packages/rrweb-snapshot/test/css.test.ts
+++ b/packages/rrweb-snapshot/test/css.test.ts
@@ -1,5 +1,3 @@
-import 'mocha';
-import { expect } from 'chai';
 import { parse, Rule, Media } from '../src/css';
 
 describe('css parser', () => {
@@ -9,50 +7,50 @@ describe('css parser', () => {
       source: 'booty.css',
     });
 
-    expect(ast.stylesheet!.source).to.equal('booty.css');
+    expect(ast.stylesheet!.source).toEqual('booty.css');
 
     const position = ast.stylesheet!.rules[0].position!;
-    expect(position.start).to.be.ok;
-    expect(position.end).to.be.ok;
-    expect(position.source).to.equal('booty.css');
-    expect(position.content).to.equal(css);
+    expect(position.start).toBeTruthy();
+    expect(position.end).toBeTruthy();
+    expect(position.source).toEqual('booty.css');
+    expect(position.content).toEqual(css);
   });
 
   it('should throw when a selector is missing', () => {
     expect(() => {
       parse('{size: large}');
-    }).to.throw();
+    }).toThrow();
 
     expect(() => {
       parse('b { color: red; }\n{ color: green; }\na { color: blue; }');
-    }).to.throw();
+    }).toThrow();
   });
 
   it('should throw when a broken comment is found', () => {
     expect(() => {
       parse('thing { color: red; } /* b { color: blue; }');
-    }).to.throw();
+    }).toThrow();
 
     expect(() => {
       parse('/*');
-    }).to.throw();
+    }).toThrow();
 
     /* Nested comments should be fine */
     expect(() => {
       parse('/* /* */');
-    }).to.not.throw();
+    }).not.toThrow();
   });
 
   it('should allow empty property value', () => {
     expect(() => {
       parse('p { color:; }');
-    }).to.not.throw();
+    }).not.toThrow();
   });
 
   it('should not throw with silent option', () => {
     expect(() => {
       parse('thing { color: red; } /* b { color: blue; }', { silent: true });
-    }).to.not.throw();
+    }).not.toThrow();
   });
 
   it('should list the parsing errors and continue parsing', () => {
@@ -65,18 +63,18 @@ describe('css parser', () => {
     );
 
     const rules = result.stylesheet!.rules;
-    expect(rules.length).to.above(2);
+    expect(rules.length).toBeGreaterThan(2);
 
     const errors = result.stylesheet!.parsingErrors!;
-    expect(errors.length).to.equal(2);
-
-    expect(errors[0]).to.have.property('message');
-    expect(errors[0]).to.have.property('reason');
-    expect(errors[0]).to.have.property('filename');
-    expect(errors[0]).to.have.property('line');
-    expect(errors[0]).to.have.property('column');
-    expect(errors[0]).to.have.property('source');
-    expect(errors[0].filename).to.equal('foo.css');
+    expect(errors.length).toEqual(2);
+
+    expect(errors[0]).toHaveProperty('message');
+    expect(errors[0]).toHaveProperty('reason');
+    expect(errors[0]).toHaveProperty('filename');
+    expect(errors[0]).toHaveProperty('line');
+    expect(errors[0]).toHaveProperty('column');
+    expect(errors[0]).toHaveProperty('source');
+    expect(errors[0].filename).toEqual('foo.css');
   });
 
   it('should set parent property', () => {
@@ -85,27 +83,27 @@ describe('css parser', () => {
         '@media (min-width: 100px) { thing { test: value; } }',
     );
 
-    expect(result.parent).to.equal(null);
+    expect(result.parent).toEqual(null);
 
     const rules = result.stylesheet!.rules;
-    expect(rules.length).to.equal(2);
+    expect(rules.length).toEqual(2);
 
     let rule = rules[0] as Rule;
-    expect(rule.parent).to.equal(result);
-    expect(rule.declarations!.length).to.equal(1);
+    expect(rule.parent).toEqual(result);
+    expect(rule.declarations!.length).toEqual(1);
 
     let decl = rule.declarations![0];
-    expect(decl.parent).to.equal(rule);
+    expect(decl.parent).toEqual(rule);
 
     const media = rules[1] as Media;
-    expect(media.parent).to.equal(result);
-    expect(media.rules!.length).to.equal(1);
+    expect(media.parent).toEqual(result);
+    expect(media.rules!.length).toEqual(1);
 
     rule = media.rules![0] as Rule;
-    expect(rule.parent).to.equal(media);
+    expect(rule.parent).toEqual(media);
 
-    expect(rule.declarations!.length).to.equal(1);
+    expect(rule.declarations!.length).toEqual(1);
     decl = rule.declarations![0];
-    expect(decl.parent).to.equal(rule);
+    expect(decl.parent).toEqual(rule);
   });
 });
diff --git a/packages/rrweb-snapshot/test/integration.ts b/packages/rrweb-snapshot/test/integration.test.ts
similarity index 60%
rename from packages/rrweb-snapshot/test/integration.ts
rename to packages/rrweb-snapshot/test/integration.test.ts
index ec4b6f04ee..53c6e6e81f 100644
--- a/packages/rrweb-snapshot/test/integration.ts
+++ b/packages/rrweb-snapshot/test/integration.test.ts
@@ -2,13 +2,12 @@ import * as fs from 'fs';
 import * as path from 'path';
 import * as http from 'http';
 import * as url from 'url';
-import 'mocha';
 import * as puppeteer from 'puppeteer';
 import * as rollup from 'rollup';
-import typescript = require('rollup-plugin-typescript');
-import { assert } from 'chai';
-import { SnapshotState, toMatchSnapshot } from 'jest-snapshot';
-import { Suite } from 'mocha';
+import * as typescript from '@rollup/plugin-typescript';
+import * as assert from 'assert';
+
+const _typescript = (typescript as unknown) as typeof typescript.default;
 
 const htmlFolder = path.join(__dirname, 'html');
 const htmls = fs.readdirSync(htmlFolder).map((filePath) => {
@@ -23,7 +22,7 @@ interface IMimeType {
   [key: string]: string;
 }
 
-const server = () =>
+const startServer = () =>
   new Promise<http.Server>((resolve) => {
     const mimeType: IMimeType = {
       '.html': 'text/html',
@@ -53,49 +52,40 @@ const server = () =>
     });
   });
 
-function matchSnapshot(actual: string, testFile: string, testTitle: string) {
-  const snapshotState = new SnapshotState(testFile, {
-    updateSnapshot: process.env.SNAPSHOT_UPDATE ? 'all' : 'new',
-  });
-
-  const matcher = toMatchSnapshot.bind({
-    snapshotState,
-    currentTestName: testTitle,
-  });
-  const result = matcher(actual);
-  snapshotState.save();
-  return result;
-}
-
-interface ISuite extends Suite {
+interface ISuite {
   server: http.Server;
   browser: puppeteer.Browser;
   code: string;
 }
 
 describe('integration tests', function (this: ISuite) {
-  this.timeout(10_000);
+  jest.setTimeout(30_000);
+  let server: ISuite['server'];
+  let browser: ISuite['browser'];
+  let code: ISuite['code'];
 
-  before(async () => {
-    this.server = await server();
-    this.browser = await puppeteer.launch({
+  beforeAll(async () => {
+    server = await startServer();
+    browser = await puppeteer.launch({
       // headless: false,
     });
 
     const bundle = await rollup.rollup({
       input: path.resolve(__dirname, '../src/index.ts'),
-      plugins: [typescript()],
+      plugins: [_typescript()],
     });
-    const { code } = await bundle.generate({
+    const {
+      output: [{ code: _code }],
+    } = await bundle.generate({
       name: 'rrweb',
       format: 'iife',
     });
-    this.code = code;
+    code = _code;
   });
 
-  after(async () => {
-    await this.browser.close();
-    await this.server.close();
+  afterAll(async () => {
+    await browser.close();
+    await server.close();
   });
 
   for (const html of htmls) {
@@ -104,7 +94,7 @@ describe('integration tests', function (this: ISuite) {
     }
     const title = '[html file]: ' + html.filePath;
     it(title, async () => {
-      const page: puppeteer.Page = await this.browser.newPage();
+      const page: puppeteer.Page = await browser.newPage();
       // console for debug
       // tslint:disable-next-line: no-console
       page.on('console', (msg) => console.log(msg.text()));
@@ -115,11 +105,21 @@ describe('integration tests', function (this: ISuite) {
           waitUntil: 'load',
         });
         const outerCompatMode = await page.evaluate('document.compatMode');
-        const innerCompatMode = await page.evaluate('document.querySelector("iframe").contentDocument.compatMode');
-        assert(outerCompatMode === 'CSS1Compat', outerCompatMode + ' for outer iframe.html should be CSS1Compat as it has "<!DOCTYPE html>"');
+        const innerCompatMode = await page.evaluate(
+          'document.querySelector("iframe").contentDocument.compatMode',
+        );
+        assert(
+          outerCompatMode === 'CSS1Compat',
+          outerCompatMode +
+            ' for outer iframe.html should be CSS1Compat as it has "<!DOCTYPE html>"',
+        );
         // inner omits a doctype so gets rendered in backwards compat mode
         // although this was originally accidental, we'll add a synthetic doctype to the rebuild to recreate this
-        assert(innerCompatMode === 'BackCompat', innerCompatMode + ' for iframe-inner.html should be BackCompat as it lacks "<!DOCTYPE html>"');
+        assert(
+          innerCompatMode === 'BackCompat',
+          innerCompatMode +
+            ' for iframe-inner.html should be BackCompat as it lacks "<!DOCTYPE html>"',
+        );
       } else {
         // loading indirectly is improtant for relative path testing
         await page.goto(`http://localhost:3030/html`);
@@ -128,7 +128,7 @@ describe('integration tests', function (this: ISuite) {
         });
       }
       const rebuildHtml = (
-        await page.evaluate(`${this.code}
+        await page.evaluate(`${code}
         const x = new XMLSerializer();
         const [snap] = rrweb.snapshot(document);
         let out = x.serializeToString(rrweb.rebuild(snap, { doc: document })[0]);
@@ -139,13 +139,12 @@ describe('integration tests', function (this: ISuite) {
         out;  // return
       `)
       ).replace(/\n\n/g, '');
-      const result = matchSnapshot(rebuildHtml, __filename, title);
-      assert(result.pass, result.pass ? '' : result.report());
-    }).timeout(5000);
+      expect(rebuildHtml).toMatchSnapshot();
+    });
   }
 
   it('correctly triggers backCompat mode and rendering', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     // console for debug
     // tslint:disable-next-line: no-console
     page.on('console', (msg) => console.log(msg.text()));
@@ -154,11 +153,20 @@ describe('integration tests', function (this: ISuite) {
       waitUntil: 'load',
     });
     const compatMode = await page.evaluate('document.compatMode');
-    assert(compatMode === 'BackCompat', compatMode + ' for compat-mode.html should be BackCompat as DOCTYPE is deliberately omitted');
-    const renderedHeight = await page.evaluate('document.querySelector("center").clientHeight');
+    assert(
+      compatMode === 'BackCompat',
+      compatMode +
+        ' for compat-mode.html should be BackCompat as DOCTYPE is deliberately omitted',
+    );
+    const renderedHeight = await page.evaluate(
+      'document.querySelector("center").clientHeight',
+    );
     // can remove following assertion if dimensions of page change
-    assert(renderedHeight < 400, `pre-check: images will be rendered ~326px high in BackCompat mode, and ~588px in CSS1Compat mode; getting: ${renderedHeight}px`)
-    const rebuildRenderedHeight = await page.evaluate(`${this.code}
+    assert(
+      renderedHeight < 400,
+      `pre-check: images will be rendered ~326px high in BackCompat mode, and ~588px in CSS1Compat mode; getting: ${renderedHeight}px`,
+    );
+    const rebuildRenderedHeight = await page.evaluate(`${code}
 const [snap] = rrweb.snapshot(document);
 const iframe = document.createElement('iframe');
 iframe.setAttribute('width', document.body.clientWidth)
@@ -169,39 +177,53 @@ document.body.appendChild(iframe);
 const rebuildNode = rrweb.rebuild(snap, { doc: iframe.contentDocument })[0];
 iframe.contentDocument.querySelector('center').clientHeight
 `);
-    const rebuildCompatMode = await page.evaluate('document.querySelector("iframe").contentDocument.compatMode');
-    assert(rebuildCompatMode === 'BackCompat', 'rebuilt compatMode should match source compatMode, but doesn\'t: ' + rebuildCompatMode);
-    assert(rebuildRenderedHeight === renderedHeight, 'rebuilt height (${rebuildRenderedHeight}) should equal original height (${renderedHeight})')
-    }).timeout(5000);
-
+    const rebuildCompatMode = await page.evaluate(
+      'document.querySelector("iframe").contentDocument.compatMode',
+    );
+    assert(
+      rebuildCompatMode === 'BackCompat',
+      "rebuilt compatMode should match source compatMode, but doesn't: " +
+        rebuildCompatMode,
+    );
+    assert(
+      rebuildRenderedHeight === renderedHeight,
+      'rebuilt height (${rebuildRenderedHeight}) should equal original height (${renderedHeight})',
+    );
+  });
 });
 
 describe('iframe integration tests', function (this: ISuite) {
+  jest.setTimeout(30_000);
+  let server: ISuite['server'];
+  let browser: ISuite['browser'];
+  let code: ISuite['code'];
 
-  before(async () => {
-    this.server = await server();
-    this.browser = await puppeteer.launch({
+  beforeAll(async () => {
+    server = await startServer();
+    browser = await puppeteer.launch({
       // headless: false,
     });
 
     const bundle = await rollup.rollup({
       input: path.resolve(__dirname, '../src/index.ts'),
-      plugins: [typescript()],
+      plugins: [_typescript()],
     });
-    const { code } = await bundle.generate({
+    const {
+      output: [{ code: _code }],
+    } = await bundle.generate({
       name: 'rrweb',
       format: 'iife',
     });
-    this.code = code;
+    code = _code;
   });
 
-  after(async () => {
-    await this.browser.close();
-    await this.server.close();
+  afterAll(async () => {
+    await browser.close();
+    await server.close();
   });
 
   it('snapshot async iframes', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     // console for debug
     // tslint:disable-next-line: no-console
     page.on('console', (msg) => console.log(msg.text()));
@@ -209,43 +231,48 @@ describe('iframe integration tests', function (this: ISuite) {
       waitUntil: 'load',
     });
     const snapshotResult = JSON.stringify(
-      await page.evaluate(`${this.code};
+      await page.evaluate(`${code};
       rrweb.snapshot(document)[0];
     `),
       null,
       2,
     );
-    const result = matchSnapshot(snapshotResult, __filename, this.title);
-    assert(result.pass, result.pass ? '' : result.report());
-  }).timeout(5000);
+    expect(snapshotResult).toMatchSnapshot();
+  });
 });
 
 describe('shadow DOM integration tests', function (this: ISuite) {
+  jest.setTimeout(30_000);
+  let server: ISuite['server'];
+  let browser: ISuite['browser'];
+  let code: ISuite['code'];
 
-  before(async () => {
-    this.server = await server();
-    this.browser = await puppeteer.launch({
+  beforeAll(async () => {
+    server = await startServer();
+    browser = await puppeteer.launch({
       // headless: false,
     });
 
     const bundle = await rollup.rollup({
       input: path.resolve(__dirname, '../src/index.ts'),
-      plugins: [typescript()],
+      plugins: [_typescript()],
     });
-    const { code } = await bundle.generate({
+    const {
+      output: [{ code: _code }],
+    } = await bundle.generate({
       name: 'rrweb',
       format: 'iife',
     });
-    this.code = code;
+    code = _code;
   });
 
-  after(async () => {
-    await this.browser.close();
-    await this.server.close();
+  afterAll(async () => {
+    await browser.close();
+    await server.close();
   });
 
   it('snapshot shadow DOM', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     // console for debug
     // tslint:disable-next-line: no-console
     page.on('console', (msg) => console.log(msg.text()));
@@ -253,13 +280,12 @@ describe('shadow DOM integration tests', function (this: ISuite) {
       waitUntil: 'load',
     });
     const snapshotResult = JSON.stringify(
-      await page.evaluate(`${this.code};
+      await page.evaluate(`${code};
       rrweb.snapshot(document)[0];
     `),
       null,
       2,
     );
-    const result = matchSnapshot(snapshotResult, __filename, this.title);
-    assert(result.pass, result.pass ? '' : result.report());
-  }).timeout(5000);
+    expect(snapshotResult).toMatchSnapshot();
+  });
 });
diff --git a/packages/rrweb-snapshot/test/rebuild.test.ts b/packages/rrweb-snapshot/test/rebuild.test.ts
index 1ace39aded..e669a29a95 100644
--- a/packages/rrweb-snapshot/test/rebuild.test.ts
+++ b/packages/rrweb-snapshot/test/rebuild.test.ts
@@ -1,67 +1,62 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import { Suite } from 'mocha';
-import { expect } from 'chai';
 import { addHoverClass, createCache } from '../src/rebuild';
-import { BuildCache } from '../src/types';
 
 function getDuration(hrtime: [number, number]) {
   const [seconds, nanoseconds] = hrtime;
   return seconds * 1000 + nanoseconds / 1000000;
 }
 
-interface ISuite extends Suite {
-  cache: BuildCache;
-}
+describe('add hover class to hover selector related rules', function () {
+  let cache: ReturnType<typeof createCache>;
 
-describe('add hover class to hover selector related rules', function (this: ISuite) {
   beforeEach(() => {
-    this.cache = createCache();
+    cache = createCache();
   });
 
   it('will do nothing to css text without :hover', () => {
     const cssText = 'body { color: white }';
-    expect(addHoverClass(cssText, this.cache)).to.equal(cssText);
+    expect(addHoverClass(cssText, cache)).toEqual(cssText);
   });
 
   it('can add hover class to css text', () => {
     const cssText = '.a:hover { color: white }';
-    expect(addHoverClass(cssText, this.cache)).to.equal(
+    expect(addHoverClass(cssText, cache)).toEqual(
       '.a:hover, .a.\\:hover { color: white }',
     );
   });
 
   it('can add hover class when there is multi selector', () => {
     const cssText = '.a, .b:hover, .c { color: white }';
-    expect(addHoverClass(cssText, this.cache)).to.equal(
+    expect(addHoverClass(cssText, cache)).toEqual(
       '.a, .b:hover, .b.\\:hover, .c { color: white }',
     );
   });
 
   it('can add hover class when there is a multi selector with the same prefix', () => {
     const cssText = '.a:hover, .a:hover::after { color: white }';
-    expect(addHoverClass(cssText, this.cache)).to.equal(
+    expect(addHoverClass(cssText, cache)).toEqual(
       '.a:hover, .a.\\:hover, .a:hover::after, .a.\\:hover::after { color: white }',
     );
   });
 
   it('can add hover class when :hover is not the end of selector', () => {
     const cssText = 'div:hover::after { color: white }';
-    expect(addHoverClass(cssText, this.cache)).to.equal(
+    expect(addHoverClass(cssText, cache)).toEqual(
       'div:hover::after, div.\\:hover::after { color: white }',
     );
   });
 
   it('can add hover class when the selector has multi :hover', () => {
     const cssText = 'a:hover b:hover { color: white }';
-    expect(addHoverClass(cssText, this.cache)).to.equal(
+    expect(addHoverClass(cssText, cache)).toEqual(
       'a:hover b:hover, a.\\:hover b.\\:hover { color: white }',
     );
   });
 
   it('will ignore :hover in css value', () => {
     const cssText = '.a::after { content: ":hover" }';
-    expect(addHoverClass(cssText, this.cache)).to.equal(cssText);
+    expect(addHoverClass(cssText, cache)).toEqual(cssText);
   });
 
   it('benchmark', () => {
@@ -70,10 +65,10 @@ describe('add hover class to hover selector related rules', function (this: ISui
       'utf8',
     );
     const start = process.hrtime();
-    addHoverClass(cssText, this.cache);
+    addHoverClass(cssText, cache);
     const end = process.hrtime(start);
     const duration = getDuration(end);
-    expect(duration).to.below(100);
+    expect(duration).toBeLessThan(100);
   });
 
   it('should be a lot faster to add a hover class to a previously processed css string', () => {
@@ -85,13 +80,13 @@ describe('add hover class to hover selector related rules', function (this: ISui
     );
 
     const start = process.hrtime();
-    addHoverClass(cssText, this.cache);
+    addHoverClass(cssText, cache);
     const end = process.hrtime(start);
 
     const cachedStart = process.hrtime();
-    addHoverClass(cssText, this.cache);
+    addHoverClass(cssText, cache);
     const cachedEnd = process.hrtime(cachedStart);
 
-    expect(getDuration(cachedEnd) * factor).to.below(getDuration(end));
+    expect(getDuration(cachedEnd) * factor).toBeLessThan(getDuration(end));
   });
 });
diff --git a/packages/rrweb-snapshot/test/snapshot.test.ts b/packages/rrweb-snapshot/test/snapshot.test.ts
index 4d96a02b40..5b9810c57c 100644
--- a/packages/rrweb-snapshot/test/snapshot.test.ts
+++ b/packages/rrweb-snapshot/test/snapshot.test.ts
@@ -1,49 +1,47 @@
-import 'mocha';
 import { JSDOM } from 'jsdom';
-import { expect } from 'chai';
 import { absoluteToStylesheet, _isBlockedElement } from '../src/snapshot';
 
 describe('absolute url to stylesheet', () => {
   const href = 'http://localhost/css/style.css';
 
   it('can handle relative path', () => {
-    expect(absoluteToStylesheet('url(a.jpg)', href)).to.equal(
+    expect(absoluteToStylesheet('url(a.jpg)', href)).toEqual(
       `url(http://localhost/css/a.jpg)`,
     );
   });
 
   it('can handle same level path', () => {
-    expect(absoluteToStylesheet('url("./a.jpg")', href)).to.equal(
+    expect(absoluteToStylesheet('url("./a.jpg")', href)).toEqual(
       `url("http://localhost/css/a.jpg")`,
     );
   });
 
   it('can handle parent level path', () => {
-    expect(absoluteToStylesheet('url("../a.jpg")', href)).to.equal(
+    expect(absoluteToStylesheet('url("../a.jpg")', href)).toEqual(
       `url("http://localhost/a.jpg")`,
     );
   });
 
   it('can handle absolute path', () => {
-    expect(absoluteToStylesheet('url("/a.jpg")', href)).to.equal(
+    expect(absoluteToStylesheet('url("/a.jpg")', href)).toEqual(
       `url("http://localhost/a.jpg")`,
     );
   });
 
   it('can handle external path', () => {
-    expect(
-      absoluteToStylesheet('url("http://localhost/a.jpg")', href),
-    ).to.equal(`url("http://localhost/a.jpg")`);
+    expect(absoluteToStylesheet('url("http://localhost/a.jpg")', href)).toEqual(
+      `url("http://localhost/a.jpg")`,
+    );
   });
 
   it('can handle single quote path', () => {
-    expect(absoluteToStylesheet(`url('./a.jpg')`, href)).to.equal(
+    expect(absoluteToStylesheet(`url('./a.jpg')`, href)).toEqual(
       `url('http://localhost/css/a.jpg')`,
     );
   });
 
   it('can handle no quote path', () => {
-    expect(absoluteToStylesheet('url(./a.jpg)', href)).to.equal(
+    expect(absoluteToStylesheet('url(./a.jpg)', href)).toEqual(
       `url(http://localhost/css/a.jpg)`,
     );
   });
@@ -54,7 +52,7 @@ describe('absolute url to stylesheet', () => {
         'background-image: url(images/b.jpg);background: #aabbcc url(images/a.jpg) 50% 50% repeat;',
         href,
       ),
-    ).to.equal(
+    ).toEqual(
       `background-image: url(http://localhost/css/images/b.jpg);` +
         `background: #aabbcc url(http://localhost/css/images/a.jpg) 50% 50% repeat;`,
     );
@@ -63,13 +61,13 @@ describe('absolute url to stylesheet', () => {
   it('can handle data url image', () => {
     expect(
       absoluteToStylesheet('url(data:image/gif;base64,ABC)', href),
-    ).to.equal('url(data:image/gif;base64,ABC)');
+    ).toEqual('url(data:image/gif;base64,ABC)');
     expect(
       absoluteToStylesheet(
         'url(data:application/font-woff;base64,d09GMgABAAAAAAm)',
         href,
       ),
-    ).to.equal('url(data:application/font-woff;base64,d09GMgABAAAAAAm)');
+    ).toEqual('url(data:application/font-woff;base64,d09GMgABAAAAAAm)');
   });
 
   it('preserves quotes around inline svgs with spaces', () => {
@@ -78,7 +76,7 @@ describe('absolute url to stylesheet', () => {
         "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")",
         href,
       ),
-    ).to.equal(
+    ).toEqual(
       "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")",
     );
     expect(
@@ -86,20 +84,20 @@ describe('absolute url to stylesheet', () => {
         'url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')',
         href,
       ),
-    ).to.equal(
+    ).toEqual(
       'url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')',
     );
     expect(
       absoluteToStylesheet(
-        'url("data:image/svg+xml;utf8,<svg width=\"28\" height=\"32\" viewBox=\"0 0 28 32\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M27 14C28\" fill=\"white\"/></svg>")',
+        'url("data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>")',
         href,
       ),
-    ).to.equal(
-      'url("data:image/svg+xml;utf8,<svg width=\"28\" height=\"32\" viewBox=\"0 0 28 32\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M27 14C28\" fill=\"white\"/></svg>")',
+    ).toEqual(
+      'url("data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>")',
     );
   });
   it('can handle empty path', () => {
-    expect(absoluteToStylesheet(`url('')`, href)).to.equal(`url('')`);
+    expect(absoluteToStylesheet(`url('')`, href)).toEqual(`url('')`);
   });
 });
 
@@ -111,20 +109,20 @@ describe('isBlockedElement()', () => {
     JSDOM.fragment(html).querySelector('div')!;
 
   it('can handle empty elements', () => {
-    expect(subject('<div />')).to.equal(false);
+    expect(subject('<div />')).toEqual(false);
   });
 
   it('blocks prohibited className', () => {
-    expect(subject('<div class="foo rr-block bar" />')).to.equal(true);
+    expect(subject('<div class="foo rr-block bar" />')).toEqual(true);
   });
 
   it('does not block random data selector', () => {
-    expect(subject('<div data-rr-block />')).to.equal(false);
+    expect(subject('<div data-rr-block />')).toEqual(false);
   });
 
   it('blocks blocked selector', () => {
     expect(
       subject('<div data-rr-block />', { blockSelector: '[data-rr-block]' }),
-    ).to.equal(true);
+    ).toEqual(true);
   });
 });
diff --git a/packages/rrweb-snapshot/tsconfig.json b/packages/rrweb-snapshot/tsconfig.json
index 3ec2570072..2b6d703290 100644
--- a/packages/rrweb-snapshot/tsconfig.json
+++ b/packages/rrweb-snapshot/tsconfig.json
@@ -11,5 +11,5 @@
     "lib": ["es6", "dom"]
   },
   "exclude": ["test"],
-  "include": ["src", "test.d.ts"]
+  "include": ["src"]
 }
diff --git a/packages/rrweb/jest.config.js b/packages/rrweb/jest.config.js
new file mode 100644
index 0000000000..46cb05c37d
--- /dev/null
+++ b/packages/rrweb/jest.config.js
@@ -0,0 +1,6 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  testMatch: ['**/**.test.ts'],
+};
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index c86b298aa9..136c4723bb 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -5,9 +5,9 @@
   "scripts": {
     "prepare": "npm run prepack",
     "prepack": "npm run bundle",
-    "test": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register -r ignore-styles -r jsdom-global/register test/**.test.ts",
-    "test:headless": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true PUPPETEER_HEADLESS=true mocha -r ts-node/register -r ignore-styles -r jsdom-global/register test/**.test.ts",
-    "test:watch": "PUPPETEER_HEADLESS=true npm run test -- --watch --watch-extensions js,ts",
+    "test": "npm run bundle:browser && jest",
+    "test:headless": "npm run bundle:browser && PUPPETEER_HEADLESS=true jest",
+    "test:watch": "PUPPETEER_HEADLESS=true npm run test -- --watch",
     "repl": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true ts-node scripts/repl.ts",
     "bundle:browser": "cross-env BROWSER_ONLY=true rollup --config",
     "bundle": "rollup --config",
@@ -44,26 +44,26 @@
     "@rollup/plugin-typescript": "^8.2.5",
     "@types/chai": "^4.1.6",
     "@types/inquirer": "0.0.43",
+    "@types/jest": "^27.0.2",
     "@types/jsdom": "^16.2.12",
-    "@types/mocha": "^5.2.5",
     "@types/node": "^12.20.16",
     "@types/prettier": "^2.3.2",
     "@types/puppeteer": "^5.4.3",
-    "chai": "^4.2.0",
     "cross-env": "^5.2.0",
     "fast-mhtml": "^1.1.9",
     "ignore-styles": "^5.0.1",
     "inquirer": "^6.2.1",
+    "jest": "^27.2.4",
     "jest-snapshot": "^23.6.0",
     "jsdom": "^17.0.0",
     "jsdom-global": "^3.0.2",
-    "mocha": "^5.2.0",
     "prettier": "2.2.1",
     "puppeteer": "^9.1.1",
     "rollup": "^2.45.2",
     "rollup-plugin-postcss": "^3.1.1",
     "rollup-plugin-rename-node-modules": "^1.1.0",
     "rollup-plugin-terser": "^7.0.2",
+    "ts-jest": "^27.0.5",
     "ts-node": "^7.0.1",
     "tslib": "^1.9.3",
     "tslint": "^4.5.1",
diff --git a/packages/rrweb/test.d.ts b/packages/rrweb/test.d.ts
deleted file mode 100644
index 487e39a55b..0000000000
--- a/packages/rrweb/test.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-declare module 'jest-snapshot' {
-  export class SnapshotState {
-    constructor(testFile: string, options: any);
-
-    save(): any;
-  }
-  type matchResult = {
-    pass: boolean;
-    report(): string;
-  };
-  export function toMatchSnapshot(
-    received: any,
-    propertyMatchers?: any,
-    testName?: string,
-  ): matchResult;
-}
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index bbee79de93..df33590626 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`attributes 1`] = `
+exports[`record integration tests can freeze mutations 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -140,6 +140,12 @@ exports[`attributes 1`] = `
       \\"source\\": 0,
       \\"texts\\": [],
       \\"attributes\\": [
+        {
+          \\"id\\": 18,
+          \\"attributes\\": {
+            \\"foo\\": \\"bar\\"
+          }
+        },
         {
           \\"id\\": 5,
           \\"attributes\\": {
@@ -147,19 +153,28 @@ exports[`attributes 1`] = `
           }
         }
       ],
-      \\"removes\\": [
+      \\"removes\\": [],
+      \\"adds\\": [
         {
-          \\"parentId\\": 5,
-          \\"id\\": 10
+          \\"parentId\\": 10,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"li\\",
+            \\"attributes\\": {
+              \\"foo\\": \\"bar\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 18
+          }
         }
-      ],
-      \\"adds\\": []
+      ]
     }
   }
 ]"
 `;
 
-exports[`block 1`] = `
+exports[`record integration tests can mask character data mutations 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -193,115 +208,72 @@ exports[`block 1`] = `
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
-            \\"attributes\\": {
-              \\"lang\\": \\"en\\"
-            },
+            \\"attributes\\": {},
             \\"childNodes\\": [
               {
                 \\"type\\": 2,
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 5
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"charset\\": \\"UTF-8\\"
-                    },
-                    \\"childNodes\\": [],
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 6
                   },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 7
-                  },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"name\\": \\"viewport\\",
-                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 8
+                    \\"tagName\\": \\"p\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"mutation observer\\",
+                        \\"id\\": 8
+                      }
+                    ],
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 9
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"http-equiv\\": \\"X-UA-Compatible\\",
-                      \\"content\\": \\"ie=edge\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 10
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 11
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"title\\",
+                    \\"tagName\\": \\"ul\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"Block record\\",
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 11
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"li\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [],
+                        \\"id\\": 12
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n  \\",
                         \\"id\\": 13
                       }
                     ],
-                    \\"id\\": 12
+                    \\"id\\": 10
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n\\\\n    \\",
                     \\"id\\": 14
-                  }
-                ],
-                \\"id\\": 4
-              },
-              {
-                \\"type\\": 3,
-                \\"textContent\\": \\"\\\\n  \\",
-                \\"id\\": 15
-              },
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"body\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 17
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"div\\",
-                    \\"attributes\\": {
-                      \\"class\\": \\"rr-block\\",
-                      \\"rr_width\\": \\"50px\\",
-                      \\"rr_height\\": \\"50px\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 18
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 19
                   },
                   {
                     \\"type\\": 2,
@@ -311,18 +283,18 @@ exports[`block 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 21
+                        \\"id\\": 16
                       }
                     ],
-                    \\"id\\": 20
+                    \\"id\\": 15
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 22
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\",
+                    \\"id\\": 17
                   }
                 ],
-                \\"id\\": 16
+                \\"id\\": 5
               }
             ],
             \\"id\\": 3
@@ -335,11 +307,65 @@ exports[`block 1`] = `
         \\"top\\": 0
       }
     }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 7,
+          \\"attributes\\": {
+            \\"class\\": \\"rr-mask\\"
+          }
+        }
+      ],
+      \\"removes\\": [
+        {
+          \\"parentId\\": 7,
+          \\"id\\": 8
+        }
+      ],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 10,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"li\\",
+            \\"attributes\\": {
+              \\"class\\": \\"rr-mask\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 18
+          }
+        },
+        {
+          \\"parentId\\": 18,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"*** **** ****\\",
+            \\"id\\": 19
+          }
+        },
+        {
+          \\"parentId\\": 7,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"*******\\",
+            \\"id\\": 20
+          }
+        }
+      ]
+    }
   }
 ]"
 `;
 
-exports[`block 2 1`] = `
+exports[`record integration tests can record attribute mutation 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -373,115 +399,72 @@ exports[`block 2 1`] = `
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
-            \\"attributes\\": {
-              \\"lang\\": \\"en\\"
-            },
+            \\"attributes\\": {},
             \\"childNodes\\": [
               {
                 \\"type\\": 2,
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 5
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"charset\\": \\"UTF-8\\"
-                    },
-                    \\"childNodes\\": [],
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 6
                   },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 7
-                  },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"name\\": \\"viewport\\",
-                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 8
+                    \\"tagName\\": \\"p\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"mutation observer\\",
+                        \\"id\\": 8
+                      }
+                    ],
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 9
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"http-equiv\\": \\"X-UA-Compatible\\",
-                      \\"content\\": \\"ie=edge\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 10
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 11
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"title\\",
+                    \\"tagName\\": \\"ul\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"Block record\\",
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 11
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"li\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [],
+                        \\"id\\": 12
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n  \\",
                         \\"id\\": 13
                       }
                     ],
-                    \\"id\\": 12
+                    \\"id\\": 10
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n\\\\n    \\",
                     \\"id\\": 14
-                  }
-                ],
-                \\"id\\": 4
-              },
-              {
-                \\"type\\": 3,
-                \\"textContent\\": \\"\\\\n  \\",
-                \\"id\\": 15
-              },
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"body\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 17
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"div\\",
-                    \\"attributes\\": {
-                      \\"class\\": \\"rr-block\\",
-                      \\"rr_width\\": \\"50px\\",
-                      \\"rr_height\\": \\"50px\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 18
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 19
                   },
                   {
                     \\"type\\": 2,
@@ -491,18 +474,18 @@ exports[`block 2 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 21
+                        \\"id\\": 16
                       }
                     ],
-                    \\"id\\": 20
+                    \\"id\\": 15
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 22
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\",
+                    \\"id\\": 17
                   }
                 ],
-                \\"id\\": 16
+                \\"id\\": 5
               }
             ],
             \\"id\\": 3
@@ -521,31 +504,27 @@ exports[`block 2 1`] = `
     \\"data\\": {
       \\"source\\": 0,
       \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"removes\\": [],
-      \\"adds\\": [
+      \\"attributes\\": [
         {
-          \\"parentId\\": 16,
-          \\"nextId\\": 18,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"button\\",
-            \\"attributes\\": {
-              \\"class\\": \\"rr-block\\",
-              \\"rr_width\\": \\"100px\\",
-              \\"rr_height\\": \\"100px\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 23
+          \\"id\\": 5,
+          \\"attributes\\": {
+            \\"test\\": \\"true\\"
           }
         }
-      ]
+      ],
+      \\"removes\\": [
+        {
+          \\"parentId\\": 5,
+          \\"id\\": 10
+        }
+      ],
+      \\"adds\\": []
     }
   }
 ]"
 `;
 
-exports[`canvas 1`] = `
+exports[`record integration tests can record character data muatations 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -579,75 +558,15 @@ exports[`canvas 1`] = `
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
-            \\"attributes\\": {
-              \\"lang\\": \\"en\\"
-            },
+            \\"attributes\\": {},
             \\"childNodes\\": [
               {
                 \\"type\\": 2,
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 5
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"charset\\": \\"UTF-8\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 6
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 7
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"name\\": \\"viewport\\",
-                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 8
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 9
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"title\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"canvas\\",
-                        \\"id\\": 11
-                      }
-                    ],
-                    \\"id\\": 10
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 12
-                  }
-                ],
+                \\"childNodes\\": [],
                 \\"id\\": 4
               },
-              {
-                \\"type\\": 3,
-                \\"textContent\\": \\"\\\\n  \\",
-                \\"id\\": 13
-              },
               {
                 \\"type\\": 2,
                 \\"tagName\\": \\"body\\",
@@ -655,50 +574,56 @@ exports[`canvas 1`] = `
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 15
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"canvas\\",
-                    \\"attributes\\": {
-                      \\"id\\": \\"myCanvas\\",
-                      \\"width\\": \\"200\\",
-                      \\"height\\": \\"100\\",
-                      \\"style\\": \\"border: 1px solid #000000;\\",
-                      \\"rr_dataURL\\": \\"LOOKS LIKE WE COULD NOT GET STABLE BASE64 FROM SAME IMAGE.\\"
-                    },
+                    \\"tagName\\": \\"p\\",
+                    \\"attributes\\": {},
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 17
+                        \\"textContent\\": \\"mutation observer\\",
+                        \\"id\\": 8
                       }
                     ],
-                    \\"id\\": 16
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 18
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 9
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
+                    \\"tagName\\": \\"ul\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 20
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 11
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"li\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [],
+                        \\"id\\": 12
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n  \\",
+                        \\"id\\": 13
                       }
                     ],
-                    \\"id\\": 19
+                    \\"id\\": 10
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 21
+                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"id\\": 14
                   },
                   {
                     \\"type\\": 2,
@@ -708,18 +633,18 @@ exports[`canvas 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 23
+                        \\"id\\": 16
                       }
                     ],
-                    \\"id\\": 22
+                    \\"id\\": 15
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 24
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\",
+                    \\"id\\": 17
                   }
                 ],
-                \\"id\\": 14
+                \\"id\\": 5
               }
             ],
             \\"id\\": 3
@@ -736,206 +661,36 @@ exports[`canvas 1`] = `
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 9,
-      \\"id\\": 16,
-      \\"property\\": \\"moveTo\\",
-      \\"args\\": [
-        0,
-        0
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 9,
-      \\"id\\": 16,
-      \\"property\\": \\"lineTo\\",
-      \\"args\\": [
-        200,
-        100
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 9,
-      \\"id\\": 16,
-      \\"property\\": \\"stroke\\",
-      \\"args\\": []
-    }
-  }
-]"
-`;
-
-exports[`character-data 1`] = `
-"[
-  {
-    \\"type\\": 0,
-    \\"data\\": {}
-  },
-  {
-    \\"type\\": 1,
-    \\"data\\": {}
-  },
-  {
-    \\"type\\": 4,
-    \\"data\\": {
-      \\"href\\": \\"about:blank\\",
-      \\"width\\": 1920,
-      \\"height\\": 1080
-    }
-  },
-  {
-    \\"type\\": 2,
-    \\"data\\": {
-      \\"node\\": {
-        \\"type\\": 0,
-        \\"childNodes\\": [
-          {
-            \\"type\\": 1,
-            \\"name\\": \\"html\\",
-            \\"publicId\\": \\"\\",
-            \\"systemId\\": \\"\\",
-            \\"id\\": 2
-          },
-          {
-            \\"type\\": 2,
-            \\"tagName\\": \\"html\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"head\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [],
-                \\"id\\": 4
-              },
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"body\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 6
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"p\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"mutation observer\\",
-                        \\"id\\": 8
-                      }
-                    ],
-                    \\"id\\": 7
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 9
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"ul\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 11
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"li\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [],
-                        \\"id\\": 12
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n  \\",
-                        \\"id\\": 13
-                      }
-                    ],
-                    \\"id\\": 10
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 14
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 16
-                      }
-                    ],
-                    \\"id\\": 15
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\",
-                    \\"id\\": 17
-                  }
-                ],
-                \\"id\\": 5
-              }
-            ],
-            \\"id\\": 3
-          }
-        ],
-        \\"id\\": 1
-      },
-      \\"initialOffset\\": {
-        \\"left\\": 0,
-        \\"top\\": 0
-      }
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"removes\\": [
-        {
-          \\"parentId\\": 5,
-          \\"id\\": 10
-        },
-        {
-          \\"parentId\\": 7,
-          \\"id\\": 8
-        }
-      ],
-      \\"adds\\": [
-        {
-          \\"parentId\\": 7,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"mutated\\",
-            \\"id\\": 18
-          }
-        }
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [
+        {
+          \\"parentId\\": 5,
+          \\"id\\": 10
+        },
+        {
+          \\"parentId\\": 7,
+          \\"id\\": 8
+        }
+      ],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 7,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"mutated\\",
+            \\"id\\": 18
+          }
+        }
       ]
     }
   }
 ]"
 `;
 
-exports[`child-list 1`] = `
+exports[`record integration tests can record childList mutations 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -1099,7 +854,7 @@ exports[`child-list 1`] = `
 ]"
 `;
 
-exports[`form 1`] = `
+exports[`record integration tests can record form interactions 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -1865,7 +1620,7 @@ exports[`form 1`] = `
 ]"
 `;
 
-exports[`frozen 1`] = `
+exports[`record integration tests can record node mutations 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -1899,38 +1654,44 @@ exports[`frozen 1`] = `
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
-            \\"attributes\\": {},
+            \\"attributes\\": {
+              \\"lang\\": \\"en\\"
+            },
             \\"childNodes\\": [
               {
                 \\"type\\": 2,
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
-                \\"childNodes\\": [],
-                \\"id\\": 4
-              },
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"body\\",
-                \\"attributes\\": {},
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 6
+                    \\"id\\": 5
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"p\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"mutation observer\\",
-                        \\"id\\": 8
-                      }
-                    ],
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"charset\\": \\"UTF-8\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 7
                   },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"name\\": \\"viewport\\",
+                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 8
+                  },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
@@ -1938,228 +1699,59 @@ exports[`frozen 1`] = `
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"ul\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 11
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"li\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [],
-                        \\"id\\": 12
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n  \\",
-                        \\"id\\": 13
-                      }
-                    ],
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"http-equiv\\": \\"X-UA-Compatible\\",
+                      \\"content\\": \\"ie=edge\\"
+                    },
+                    \\"childNodes\\": [],
                     \\"id\\": 10
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 14
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 11
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
+                    \\"tagName\\": \\"title\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 16
+                        \\"textContent\\": \\"Select2 3.5\\",
+                        \\"id\\": 13
                       }
                     ],
-                    \\"id\\": 15
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\",
-                    \\"id\\": 17
-                  }
-                ],
-                \\"id\\": 5
-              }
-            ],
-            \\"id\\": 3
-          }
-        ],
-        \\"id\\": 1
-      },
-      \\"initialOffset\\": {
-        \\"left\\": 0,
-        \\"top\\": 0
-      }
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [
-        {
-          \\"id\\": 18,
-          \\"attributes\\": {
-            \\"foo\\": \\"bar\\"
-          }
-        },
-        {
-          \\"id\\": 5,
-          \\"attributes\\": {
-            \\"test\\": \\"true\\"
-          }
-        }
-      ],
-      \\"removes\\": [],
-      \\"adds\\": [
-        {
-          \\"parentId\\": 10,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"li\\",
-            \\"attributes\\": {
-              \\"foo\\": \\"bar\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 18
-          }
-        }
-      ]
-    }
-  }
-]"
-`;
-
-exports[`iframe 1`] = `
-"[
-  {
-    \\"type\\": 0,
-    \\"data\\": {}
-  },
-  {
-    \\"type\\": 1,
-    \\"data\\": {}
-  },
-  {
-    \\"type\\": 4,
-    \\"data\\": {
-      \\"href\\": \\"about:blank\\",
-      \\"width\\": 1920,
-      \\"height\\": 1080
-    }
-  },
-  {
-    \\"type\\": 2,
-    \\"data\\": {
-      \\"node\\": {
-        \\"type\\": 0,
-        \\"childNodes\\": [
-          {
-            \\"type\\": 1,
-            \\"name\\": \\"html\\",
-            \\"publicId\\": \\"\\",
-            \\"systemId\\": \\"\\",
-            \\"id\\": 2
-          },
-          {
-            \\"type\\": 2,
-            \\"tagName\\": \\"html\\",
-            \\"attributes\\": {
-              \\"lang\\": \\"en\\"
-            },
-            \\"childNodes\\": [
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"head\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 5
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"charset\\": \\"UTF-8\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 6
+                    \\"id\\": 12
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 7
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 14
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
+                    \\"tagName\\": \\"link\\",
                     \\"attributes\\": {
-                      \\"name\\": \\"viewport\\",
-                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                      \\"rel\\": \\"stylesheet\\",
+                      \\"href\\": \\"https://cdn.jsdelivr.net/npm/select2@3.5.1/select2.css\\"
                     },
                     \\"childNodes\\": [],
-                    \\"id\\": 8
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 9
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"title\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"Main\\",
-                        \\"id\\": 11
-                      }
-                    ],
-                    \\"id\\": 10
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 12
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"style\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      iframe {\\\\n        width: 500px;\\\\n        height: 500px;\\\\n      }\\\\n    \\",
-                        \\"isStyle\\": true,
-                        \\"id\\": 14
-                      }
-                    ],
-                    \\"id\\": 13
+                    \\"id\\": 15
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 15
+                    \\"textContent\\": \\"\\\\n\\",
+                    \\"id\\": 16
                   }
                 ],
                 \\"id\\": 4
               },
               {
                 \\"type\\": 3,
-                \\"textContent\\": \\"\\\\n  \\",
-                \\"id\\": 16
+                \\"textContent\\": \\"\\\\n\\",
+                \\"id\\": 17
               },
               {
                 \\"type\\": 2,
@@ -2168,788 +1760,375 @@ exports[`iframe 1`] = `
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 18
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"iframe\\",
-                    \\"attributes\\": {
-                      \\"id\\": \\"one\\"
-                    },
-                    \\"childNodes\\": [],
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 19
                   },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 20
-                  },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
+                    \\"tagName\\": \\"blockquote\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"textContent\\": \\"\\\\n    Select2 is a jQuery replacement for select boxes.\\\\n    \\",
+                        \\"id\\": 21
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"br\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [],
                         \\"id\\": 22
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    In the 3.5 version it use a quite complicated DOM generation strategy which is a good battle-test for rrweb's recorder.\\\\n  \\",
+                        \\"id\\": 23
                       }
                     ],
-                    \\"id\\": 21
+                    \\"id\\": 20
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n  \\",
-                    \\"id\\": 23
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 24
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
-                    \\"attributes\\": {},
+                    \\"tagName\\": \\"div\\",
+                    \\"attributes\\": {
+                      \\"class\\": \\"select2-container\\",
+                      \\"id\\": \\"s2id_el\\"
+                    },
                     \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 25
-                      }
-                    ],
-                    \\"id\\": 24
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\\\n\\",
-                    \\"id\\": 26
-                  }
-                ],
-                \\"id\\": 17
-              }
-            ],
-            \\"id\\": 3
-          }
-        ],
-        \\"id\\": 1
-      },
-      \\"initialOffset\\": {
-        \\"left\\": 0,
-        \\"top\\": 0
-      }
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"adds\\": [
-        {
-          \\"parentId\\": 19,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 0,
-            \\"childNodes\\": [
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"html\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"head\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [],
-                    \\"rootId\\": 27,
-                    \\"id\\": 29
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"body\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [],
-                    \\"rootId\\": 27,
-                    \\"id\\": 30
-                  }
-                ],
-                \\"rootId\\": 27,
-                \\"id\\": 28
-              }
-            ],
-            \\"compatMode\\": \\"BackCompat\\",
-            \\"id\\": 27
-          }
-        }
-      ],
-      \\"removes\\": [],
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"isAttachIframe\\": true
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"removes\\": [],
-      \\"adds\\": [
-        {
-          \\"parentId\\": 17,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"iframe\\",
-            \\"attributes\\": {
-              \\"id\\": \\"two\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 31
-          }
-        }
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"adds\\": [
-        {
-          \\"parentId\\": 31,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 0,
-            \\"childNodes\\": [
-              {
-                \\"type\\": 1,
-                \\"name\\": \\"html\\",
-                \\"publicId\\": \\"\\",
-                \\"systemId\\": \\"\\",
-                \\"rootId\\": 32,
-                \\"id\\": 33
-              },
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"html\\",
-                \\"attributes\\": {
-                  \\"lang\\": \\"en\\"
-                },
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"head\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"rootId\\": 32,
-                        \\"id\\": 36
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"meta\\",
-                        \\"attributes\\": {
-                          \\"charset\\": \\"UTF-8\\"
-                        },
-                        \\"childNodes\\": [],
-                        \\"rootId\\": 32,
-                        \\"id\\": 37
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"rootId\\": 32,
-                        \\"id\\": 38
-                      },
                       {
                         \\"type\\": 2,
-                        \\"tagName\\": \\"meta\\",
+                        \\"tagName\\": \\"a\\",
                         \\"attributes\\": {
-                          \\"name\\": \\"viewport\\",
-                          \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                          \\"href\\": \\"javascript:void(0)\\",
+                          \\"class\\": \\"select2-choice\\",
+                          \\"tabindex\\": \\"-1\\"
                         },
-                        \\"childNodes\\": [],
-                        \\"rootId\\": 32,
-                        \\"id\\": 39
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"rootId\\": 32,
-                        \\"id\\": 40
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"title\\",
-                        \\"attributes\\": {},
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"Frame 1\\",
-                            \\"rootId\\": 32,
-                            \\"id\\": 42
+                            \\"textContent\\": \\"   \\",
+                            \\"id\\": 27
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"span\\",
+                            \\"attributes\\": {
+                              \\"class\\": \\"select2-chosen\\",
+                              \\"id\\": \\"select2-chosen-1\\"
+                            },
+                            \\"childNodes\\": [
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"A\\",
+                                \\"id\\": 29
+                              }
+                            ],
+                            \\"id\\": 28
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"abbr\\",
+                            \\"attributes\\": {
+                              \\"class\\": \\"select2-search-choice-close\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 30
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"   \\",
+                            \\"id\\": 31
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"span\\",
+                            \\"attributes\\": {
+                              \\"class\\": \\"select2-arrow\\",
+                              \\"role\\": \\"presentation\\"
+                            },
+                            \\"childNodes\\": [
+                              {
+                                \\"type\\": 2,
+                                \\"tagName\\": \\"b\\",
+                                \\"attributes\\": {
+                                  \\"role\\": \\"presentation\\"
+                                },
+                                \\"childNodes\\": [],
+                                \\"id\\": 33
+                              }
+                            ],
+                            \\"id\\": 32
                           }
                         ],
-                        \\"rootId\\": 32,
-                        \\"id\\": 41
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n  \\",
-                        \\"rootId\\": 32,
-                        \\"id\\": 43
-                      }
-                    ],
-                    \\"rootId\\": 32,
-                    \\"id\\": 35
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"rootId\\": 32,
-                    \\"id\\": 44
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"body\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    frame 1\\\\n    \\",
-                        \\"rootId\\": 32,
-                        \\"id\\": 46
+                        \\"id\\": 26
                       },
                       {
                         \\"type\\": 2,
-                        \\"tagName\\": \\"iframe\\",
+                        \\"tagName\\": \\"label\\",
                         \\"attributes\\": {
-                          \\"id\\": \\"three\\",
-                          \\"frameborder\\": \\"0\\"
+                          \\"for\\": \\"s2id_autogen1\\",
+                          \\"class\\": \\"select2-offscreen\\"
                         },
                         \\"childNodes\\": [],
-                        \\"rootId\\": 32,
-                        \\"id\\": 47
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"rootId\\": 32,
-                        \\"id\\": 48
+                        \\"id\\": 34
                       },
                       {
                         \\"type\\": 2,
-                        \\"tagName\\": \\"iframe\\",
+                        \\"tagName\\": \\"input\\",
                         \\"attributes\\": {
-                          \\"id\\": \\"four\\",
-                          \\"frameborder\\": \\"0\\"
+                          \\"class\\": \\"select2-focusser select2-offscreen\\",
+                          \\"type\\": \\"text\\",
+                          \\"aria-haspopup\\": \\"true\\",
+                          \\"role\\": \\"button\\",
+                          \\"aria-labelledby\\": \\"select2-chosen-1\\",
+                          \\"id\\": \\"s2id_autogen1\\"
                         },
                         \\"childNodes\\": [],
-                        \\"rootId\\": 32,
-                        \\"id\\": 49
+                        \\"id\\": 35
                       },
                       {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n  \\\\n\\\\n\\",
-                        \\"rootId\\": 32,
-                        \\"id\\": 50
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"div\\",
+                        \\"attributes\\": {
+                          \\"class\\": \\"select2-drop select2-display-none select2-with-searchbox\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"   \\",
+                            \\"id\\": 37
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"div\\",
+                            \\"attributes\\": {
+                              \\"class\\": \\"select2-search\\"
+                            },
+                            \\"childNodes\\": [
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"       \\",
+                                \\"id\\": 39
+                              },
+                              {
+                                \\"type\\": 2,
+                                \\"tagName\\": \\"label\\",
+                                \\"attributes\\": {
+                                  \\"for\\": \\"s2id_autogen1_search\\",
+                                  \\"class\\": \\"select2-offscreen\\"
+                                },
+                                \\"childNodes\\": [],
+                                \\"id\\": 40
+                              },
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"       \\",
+                                \\"id\\": 41
+                              },
+                              {
+                                \\"type\\": 2,
+                                \\"tagName\\": \\"input\\",
+                                \\"attributes\\": {
+                                  \\"type\\": \\"text\\",
+                                  \\"autocomplete\\": \\"off\\",
+                                  \\"autocorrect\\": \\"off\\",
+                                  \\"autocapitalize\\": \\"off\\",
+                                  \\"spellcheck\\": \\"false\\",
+                                  \\"class\\": \\"select2-input\\",
+                                  \\"role\\": \\"combobox\\",
+                                  \\"aria-expanded\\": \\"true\\",
+                                  \\"aria-autocomplete\\": \\"list\\",
+                                  \\"aria-owns\\": \\"select2-results-1\\",
+                                  \\"id\\": \\"s2id_autogen1_search\\",
+                                  \\"placeholder\\": \\"\\"
+                                },
+                                \\"childNodes\\": [],
+                                \\"id\\": 42
+                              },
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"   \\",
+                                \\"id\\": 43
+                              }
+                            ],
+                            \\"id\\": 38
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"   \\",
+                            \\"id\\": 44
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"ul\\",
+                            \\"attributes\\": {
+                              \\"class\\": \\"select2-results\\",
+                              \\"role\\": \\"listbox\\",
+                              \\"id\\": \\"select2-results-1\\"
+                            },
+                            \\"childNodes\\": [
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"   \\",
+                                \\"id\\": 46
+                              }
+                            ],
+                            \\"id\\": 45
+                          }
+                        ],
+                        \\"id\\": 36
                       }
                     ],
-                    \\"rootId\\": 32,
-                    \\"id\\": 45
-                  }
-                ],
-                \\"rootId\\": 32,
-                \\"id\\": 34
-              }
-            ],
-            \\"id\\": 32
-          }
-        }
-      ],
-      \\"removes\\": [],
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"isAttachIframe\\": true
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"adds\\": [
-        {
-          \\"parentId\\": 47,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 0,
-            \\"childNodes\\": [
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"html\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"head\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [],
-                    \\"rootId\\": 51,
-                    \\"id\\": 53
+                    \\"id\\": 25
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"body\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [],
-                    \\"rootId\\": 51,
-                    \\"id\\": 54
-                  }
-                ],
-                \\"rootId\\": 51,
-                \\"id\\": 52
-              }
-            ],
-            \\"compatMode\\": \\"BackCompat\\",
-            \\"id\\": 51
-          }
-        }
-      ],
-      \\"removes\\": [],
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"isAttachIframe\\": true
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"adds\\": [
-        {
-          \\"parentId\\": 49,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 0,
-            \\"childNodes\\": [
-              {
-                \\"type\\": 1,
-                \\"name\\": \\"html\\",
-                \\"publicId\\": \\"\\",
-                \\"systemId\\": \\"\\",
-                \\"rootId\\": 55,
-                \\"id\\": 56
-              },
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"html\\",
-                \\"attributes\\": {
-                  \\"lang\\": \\"en\\"
-                },
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"head\\",
-                    \\"attributes\\": {},
+                    \\"tagName\\": \\"select\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"el\\",
+                      \\"tabindex\\": \\"-1\\",
+                      \\"title\\": \\"\\",
+                      \\"style\\": \\"display: none;\\",
+                      \\"value\\": \\"a\\"
+                    },
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"rootId\\": 55,
-                        \\"id\\": 59
+                        \\"id\\": 48
                       },
                       {
                         \\"type\\": 2,
-                        \\"tagName\\": \\"meta\\",
+                        \\"tagName\\": \\"option\\",
                         \\"attributes\\": {
-                          \\"charset\\": \\"UTF-8\\"
+                          \\"value\\": \\"a\\",
+                          \\"selected\\": true
                         },
-                        \\"childNodes\\": [],
-                        \\"rootId\\": 55,
-                        \\"id\\": 60
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"A\\",
+                            \\"id\\": 50
+                          }
+                        ],
+                        \\"id\\": 49
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"rootId\\": 55,
-                        \\"id\\": 61
+                        \\"id\\": 51
                       },
                       {
                         \\"type\\": 2,
-                        \\"tagName\\": \\"meta\\",
+                        \\"tagName\\": \\"option\\",
                         \\"attributes\\": {
-                          \\"name\\": \\"viewport\\",
-                          \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                          \\"value\\": \\"b\\"
                         },
-                        \\"childNodes\\": [],
-                        \\"rootId\\": 55,
-                        \\"id\\": 62
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"rootId\\": 55,
-                        \\"id\\": 63
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"title\\",
-                        \\"attributes\\": {},
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"Frame 2\\",
-                            \\"rootId\\": 55,
-                            \\"id\\": 65
+                            \\"textContent\\": \\"B\\",
+                            \\"id\\": 53
                           }
                         ],
-                        \\"rootId\\": 55,
-                        \\"id\\": 64
+                        \\"id\\": 52
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n  \\",
-                        \\"rootId\\": 55,
-                        \\"id\\": 66
+                        \\"id\\": 54
                       }
                     ],
-                    \\"rootId\\": 55,
-                    \\"id\\": 58
+                    \\"id\\": 47
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"rootId\\": 55,
-                    \\"id\\": 67
+                    \\"id\\": 55
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"body\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    frame 2\\\\n  \\\\n  \\",
-                        \\"rootId\\": 55,
-                        \\"id\\": 69
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"script\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                            \\"rootId\\": 55,
-                            \\"id\\": 71
-                          }
-                        ],
-                        \\"rootId\\": 55,
-                        \\"id\\": 70
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n\\\\n\\",
-                        \\"rootId\\": 55,
-                        \\"id\\": 72
-                      }
-                    ],
-                    \\"rootId\\": 55,
-                    \\"id\\": 68
-                  }
-                ],
-                \\"rootId\\": 55,
-                \\"id\\": 57
-              }
-            ],
-            \\"id\\": 55
-          }
-        }
-      ],
-      \\"removes\\": [],
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"isAttachIframe\\": true
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"removes\\": [],
-      \\"adds\\": [
-        {
-          \\"parentId\\": 68,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"iframe\\",
-            \\"attributes\\": {
-              \\"id\\": \\"five\\"
-            },
-            \\"childNodes\\": [],
-            \\"rootId\\": 55,
-            \\"id\\": 73
-          }
-        }
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"adds\\": [
-        {
-          \\"parentId\\": 73,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 0,
-            \\"childNodes\\": [
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"html\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"head\\",
-                    \\"attributes\\": {},
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {
+                      \\"src\\": \\"https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js\\"
+                    },
                     \\"childNodes\\": [],
-                    \\"rootId\\": 74,
-                    \\"id\\": 76
+                    \\"id\\": 56
                   },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"body\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [],
-                    \\"rootId\\": 74,
-                    \\"id\\": 77
-                  }
-                ],
-                \\"rootId\\": 74,
-                \\"id\\": 75
-              }
-            ],
-            \\"compatMode\\": \\"BackCompat\\",
-            \\"id\\": 74
-          }
-        }
-      ],
-      \\"removes\\": [],
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"isAttachIframe\\": true
-    }
-  }
-]"
-`;
-
-exports[`ignore 1`] = `
-"[
-  {
-    \\"type\\": 0,
-    \\"data\\": {}
-  },
-  {
-    \\"type\\": 1,
-    \\"data\\": {}
-  },
-  {
-    \\"type\\": 4,
-    \\"data\\": {
-      \\"href\\": \\"about:blank\\",
-      \\"width\\": 1920,
-      \\"height\\": 1080
-    }
-  },
-  {
-    \\"type\\": 2,
-    \\"data\\": {
-      \\"node\\": {
-        \\"type\\": 0,
-        \\"childNodes\\": [
-          {
-            \\"type\\": 1,
-            \\"name\\": \\"html\\",
-            \\"publicId\\": \\"\\",
-            \\"systemId\\": \\"\\",
-            \\"id\\": 2
-          },
-          {
-            \\"type\\": 2,
-            \\"tagName\\": \\"html\\",
-            \\"attributes\\": {
-              \\"lang\\": \\"en\\"
-            },
-            \\"childNodes\\": [
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"head\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 5
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 57
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
+                    \\"tagName\\": \\"script\\",
                     \\"attributes\\": {
-                      \\"charset\\": \\"UTF-8\\"
+                      \\"src\\": \\"https://cdn.jsdelivr.net/npm/select2@3.5.2-browserify/select2.min.js\\"
                     },
                     \\"childNodes\\": [],
-                    \\"id\\": 6
+                    \\"id\\": 58
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 7
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 59
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"name\\": \\"viewport\\",
-                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 8
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 9
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 61
+                      }
+                    ],
+                    \\"id\\": 60
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
+                    \\"tagName\\": \\"span\\",
                     \\"attributes\\": {
-                      \\"http-equiv\\": \\"X-UA-Compatible\\",
-                      \\"content\\": \\"ie=edge\\"
+                      \\"role\\": \\"status\\",
+                      \\"aria-live\\": \\"polite\\",
+                      \\"class\\": \\"select2-hidden-accessible\\"
                     },
                     \\"childNodes\\": [],
-                    \\"id\\": 10
+                    \\"id\\": 62
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 11
+                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"id\\": 63
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"title\\",
+                    \\"tagName\\": \\"script\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"ignore fields\\",
-                        \\"id\\": 13
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 65
                       }
                     ],
-                    \\"id\\": 12
+                    \\"id\\": 64
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 14
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\",
+                    \\"id\\": 66
                   }
                 ],
-                \\"id\\": 4
-              },
-              {
-                \\"type\\": 3,
-                \\"textContent\\": \\"\\\\n\\\\n  \\",
-                \\"id\\": 15
-              },
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"body\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 17
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"form\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 19
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"ignore text\\"
-                        },
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\" \\",
-                            \\"id\\": 21
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"input\\",
-                            \\"attributes\\": {
-                              \\"type\\": \\"text\\",
-                              \\"class\\": \\"rr-ignore\\"
-                            },
-                            \\"childNodes\\": [],
-                            \\"id\\": 22
-                          },
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\" \\",
-                            \\"id\\": 23
-                          }
-                        ],
-                        \\"id\\": 20
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 24
-                      }
-                    ],
-                    \\"id\\": 18
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 25
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 27
-                      }
-                    ],
-                    \\"id\\": 26
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 28
-                  }
-                ],
-                \\"id\\": 16
+                \\"id\\": 18
               }
             ],
             \\"id\\": 3
@@ -2967,1333 +2146,446 @@ exports[`ignore 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 2,
-      \\"type\\": 5,
-      \\"id\\": 22
+      \\"type\\": 1,
+      \\"id\\": 26
     }
-  }
-]"
-`;
-
-exports[`log 1`] = `
-"[
-  {
-    \\"type\\": 0,
-    \\"data\\": {}
-  },
-  {
-    \\"type\\": 1,
-    \\"data\\": {}
   },
   {
-    \\"type\\": 4,
+    \\"type\\": 3,
     \\"data\\": {
-      \\"href\\": \\"about:blank\\",
-      \\"width\\": 1920,
-      \\"height\\": 1080
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 42
     }
   },
   {
-    \\"type\\": 2,
+    \\"type\\": 3,
     \\"data\\": {
-      \\"node\\": {
-        \\"type\\": 0,
-        \\"childNodes\\": [
-          {
-            \\"type\\": 1,
-            \\"name\\": \\"html\\",
-            \\"publicId\\": \\"\\",
-            \\"systemId\\": \\"\\",
-            \\"id\\": 2
-          },
-          {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 25,
+          \\"attributes\\": {
+            \\"class\\": \\"select2-container select2-dropdown-open select2-container-active\\"
+          }
+        },
+        {
+          \\"id\\": 36,
+          \\"attributes\\": {
+            \\"id\\": \\"select2-drop\\",
+            \\"style\\": {
+              \\"left\\": \\"Npx\\",
+              \\"width\\": \\"Npx\\",
+              \\"top\\": \\"Npx\\",
+              \\"bottom\\": \\"auto\\",
+              \\"display\\": \\"block\\",
+              \\"position\\": false,
+              \\"visibility\\": false
+            },
+            \\"class\\": \\"select2-drop select2-display-none select2-with-searchbox select2-drop-active\\"
+          }
+        },
+        {
+          \\"id\\": 70,
+          \\"attributes\\": {
+            \\"style\\": {
+              \\"display\\": false
+            }
+          }
+        },
+        {
+          \\"id\\": 42,
+          \\"attributes\\": {
+            \\"class\\": \\"select2-input select2-focused\\",
+            \\"aria-activedescendant\\": \\"select2-result-label-2\\"
+          }
+        },
+        {
+          \\"id\\": 35,
+          \\"attributes\\": {
+            \\"disabled\\": \\"\\"
+          }
+        },
+        {
+          \\"id\\": 72,
+          \\"attributes\\": {
+            \\"class\\": \\"select2-results-dept-0 select2-result select2-result-selectable select2-highlighted\\"
+          }
+        }
+      ],
+      \\"removes\\": [
+        {
+          \\"parentId\\": 25,
+          \\"id\\": 26
+        },
+        {
+          \\"parentId\\": 25,
+          \\"id\\": 36
+        },
+        {
+          \\"parentId\\": 45,
+          \\"id\\": 46
+        }
+      ],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 25,
+          \\"nextId\\": 34,
+          \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"html\\",
+            \\"tagName\\": \\"a\\",
             \\"attributes\\": {
-              \\"lang\\": \\"en\\"
+              \\"href\\": \\"javascript:void(0)\\",
+              \\"class\\": \\"select2-choice\\",
+              \\"tabindex\\": \\"-1\\"
             },
-            \\"childNodes\\": [
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"head\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 5
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"charset\\": \\"UTF-8\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 6
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 7
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"name\\": \\"viewport\\",
-                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 8
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 9
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"http-equiv\\": \\"X-UA-Compatible\\",
-                      \\"content\\": \\"ie=edge\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 10
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 11
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"title\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"Log record\\",
-                        \\"id\\": 13
-                      }
-                    ],
-                    \\"id\\": 12
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 14
-                  }
-                ],
-                \\"id\\": 4
-              },
-              {
-                \\"type\\": 3,
-                \\"textContent\\": \\"\\\\n  \\",
-                \\"id\\": 15
-              },
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"body\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 17
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 19
-                      }
-                    ],
-                    \\"id\\": 18
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 20
-                  }
-                ],
-                \\"id\\": 16
-              }
-            ],
-            \\"id\\": 3
+            \\"childNodes\\": [],
+            \\"id\\": 26
           }
-        ],
-        \\"id\\": 1
-      },
-      \\"initialOffset\\": {
-        \\"left\\": 0,
-        \\"top\\": 0
-      }
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"assert\\",
-        \\"trace\\": [
-          \\"__puppeteer_evaluation_script__:2:37\\"
-        ],
-        \\"payload\\": [
-          \\"true\\",
-          \\"\\\\\\"assert\\\\\\"\\"
-        ]
-      }
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"count\\",
-        \\"trace\\": [
-          \\"__puppeteer_evaluation_script__:3:37\\"
-        ],
-        \\"payload\\": [
-          \\"\\\\\\"count\\\\\\"\\"
-        ]
-      }
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"countReset\\",
-        \\"trace\\": [
-          \\"__puppeteer_evaluation_script__:4:37\\"
-        ],
-        \\"payload\\": [
-          \\"\\\\\\"count\\\\\\"\\"
-        ]
-      }
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"debug\\",
-        \\"trace\\": [
-          \\"__puppeteer_evaluation_script__:5:37\\"
-        ],
-        \\"payload\\": [
-          \\"\\\\\\"debug\\\\\\"\\"
-        ]
-      }
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"dir\\",
-        \\"trace\\": [
-          \\"__puppeteer_evaluation_script__:6:37\\"
-        ],
-        \\"payload\\": [
-          \\"\\\\\\"dir\\\\\\"\\"
-        ]
-      }
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"dirxml\\",
-        \\"trace\\": [
-          \\"__puppeteer_evaluation_script__:7:37\\"
-        ],
-        \\"payload\\": [
-          \\"\\\\\\"dirxml\\\\\\"\\"
-        ]
-      }
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"group\\",
-        \\"trace\\": [
-          \\"__puppeteer_evaluation_script__:8:37\\"
-        ],
-        \\"payload\\": []
-      }
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"groupCollapsed\\",
-        \\"trace\\": [
-          \\"__puppeteer_evaluation_script__:9:37\\"
-        ],
-        \\"payload\\": []
-      }
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"info\\",
-        \\"trace\\": [
-          \\"__puppeteer_evaluation_script__:10:37\\"
-        ],
-        \\"payload\\": [
-          \\"\\\\\\"info\\\\\\"\\"
-        ]
-      }
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"log\\",
-        \\"trace\\": [
-          \\"__puppeteer_evaluation_script__:11:37\\"
-        ],
-        \\"payload\\": [
-          \\"\\\\\\"log\\\\\\"\\"
-        ]
-      }
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"table\\",
-        \\"trace\\": [
-          \\"__puppeteer_evaluation_script__:12:37\\"
-        ],
-        \\"payload\\": [
-          \\"\\\\\\"table\\\\\\"\\"
-        ]
-      }
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"time\\",
-        \\"trace\\": [
-          \\"__puppeteer_evaluation_script__:13:37\\"
-        ],
-        \\"payload\\": []
-      }
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"timeEnd\\",
-        \\"trace\\": [
-          \\"__puppeteer_evaluation_script__:14:37\\"
-        ],
-        \\"payload\\": []
-      }
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"timeLog\\",
-        \\"trace\\": [
-          \\"__puppeteer_evaluation_script__:15:37\\"
-        ],
-        \\"payload\\": []
-      }
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"trace\\",
-        \\"trace\\": [
-          \\"__puppeteer_evaluation_script__:16:37\\"
-        ],
-        \\"payload\\": [
-          \\"\\\\\\"trace\\\\\\"\\"
-        ]
-      }
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"warn\\",
-        \\"trace\\": [
-          \\"__puppeteer_evaluation_script__:17:37\\"
-        ],
-        \\"payload\\": [
-          \\"\\\\\\"warn\\\\\\"\\"
-        ]
-      }
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"clear\\",
-        \\"trace\\": [
-          \\"__puppeteer_evaluation_script__:18:37\\"
-        ],
-        \\"payload\\": []
-      }
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"removes\\": [],
-      \\"adds\\": [
+        },
         {
-          \\"parentId\\": 16,
+          \\"parentId\\": 26,
+          \\"nextId\\": 28,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"   \\",
+            \\"id\\": 27
+          }
+        },
+        {
+          \\"parentId\\": 26,
+          \\"nextId\\": 30,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"span\\",
+            \\"attributes\\": {
+              \\"class\\": \\"select2-chosen\\",
+              \\"id\\": \\"select2-chosen-1\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 28
+          }
+        },
+        {
+          \\"parentId\\": 28,
           \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"A\\",
+            \\"id\\": 29
+          }
+        },
+        {
+          \\"parentId\\": 26,
+          \\"nextId\\": 31,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"iframe\\",
-            \\"attributes\\": {},
+            \\"tagName\\": \\"abbr\\",
+            \\"attributes\\": {
+              \\"class\\": \\"select2-search-choice-close\\"
+            },
             \\"childNodes\\": [],
-            \\"id\\": 21
+            \\"id\\": 30
           }
-        }
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"adds\\": [
+        },
         {
-          \\"parentId\\": 21,
+          \\"parentId\\": 26,
+          \\"nextId\\": 32,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"   \\",
+            \\"id\\": 31
+          }
+        },
+        {
+          \\"parentId\\": 26,
           \\"nextId\\": null,
           \\"node\\": {
-            \\"type\\": 0,
-            \\"childNodes\\": [
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"html\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"head\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [],
-                    \\"rootId\\": 22,
-                    \\"id\\": 24
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"body\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [],
-                    \\"rootId\\": 22,
-                    \\"id\\": 25
-                  }
-                ],
-                \\"rootId\\": 22,
-                \\"id\\": 23
-              }
-            ],
-            \\"compatMode\\": \\"BackCompat\\",
-            \\"id\\": 22
+            \\"type\\": 2,
+            \\"tagName\\": \\"span\\",
+            \\"attributes\\": {
+              \\"class\\": \\"select2-arrow\\",
+              \\"role\\": \\"presentation\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 32
           }
-        }
-      ],
-      \\"removes\\": [],
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"isAttachIframe\\": true
-    }
-  },
-  {
-    \\"type\\": 6,
-    \\"data\\": {
-      \\"plugin\\": \\"rrweb/console@1\\",
-      \\"payload\\": {
-        \\"level\\": \\"log\\",
-        \\"trace\\": [],
-        \\"payload\\": [
-          \\"\\\\\\"from iframe\\\\\\"\\"
-        ]
-      }
-    }
-  }
-]"
-`;
-
-exports[`mask 1`] = `
-"[
-  {
-    \\"type\\": 0,
-    \\"data\\": {}
-  },
-  {
-    \\"type\\": 1,
-    \\"data\\": {}
-  },
-  {
-    \\"type\\": 4,
-    \\"data\\": {
-      \\"href\\": \\"about:blank\\",
-      \\"width\\": 1920,
-      \\"height\\": 1080
-    }
-  },
-  {
-    \\"type\\": 2,
-    \\"data\\": {
-      \\"node\\": {
-        \\"type\\": 0,
-        \\"childNodes\\": [
-          {
-            \\"type\\": 1,
-            \\"name\\": \\"html\\",
-            \\"publicId\\": \\"\\",
-            \\"systemId\\": \\"\\",
-            \\"id\\": 2
-          },
-          {
+        },
+        {
+          \\"parentId\\": 32,
+          \\"nextId\\": null,
+          \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"html\\",
+            \\"tagName\\": \\"b\\",
             \\"attributes\\": {
-              \\"lang\\": \\"en\\"
+              \\"role\\": \\"presentation\\"
             },
-            \\"childNodes\\": [
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"head\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 5
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"charset\\": \\"UTF-8\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 6
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 7
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"name\\": \\"viewport\\",
-                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 8
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 9
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"http-equiv\\": \\"X-UA-Compatible\\",
-                      \\"content\\": \\"ie=edge\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 10
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 11
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"title\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"form fields\\",
-                        \\"id\\": 13
-                      }
-                    ],
-                    \\"id\\": 12
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 14
-                  }
-                ],
-                \\"id\\": 4
-              },
-              {
-                \\"type\\": 3,
-                \\"textContent\\": \\"\\\\n\\\\n  \\",
-                \\"id\\": 15
-              },
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"body\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 17
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"form\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 19
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"text\\"
-                        },
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 21
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"input\\",
-                            \\"attributes\\": {
-                              \\"type\\": \\"text\\"
-                            },
-                            \\"childNodes\\": [],
-                            \\"id\\": 22
-                          },
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 23
-                          }
-                        ],
-                        \\"id\\": 20
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 24
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 26
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"input\\",
-                            \\"attributes\\": {
-                              \\"type\\": \\"radio\\",
-                              \\"name\\": \\"toggle\\",
-                              \\"value\\": \\"on\\"
-                            },
-                            \\"childNodes\\": [],
-                            \\"id\\": 27
-                          },
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 28
-                          }
-                        ],
-                        \\"id\\": 25
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 29
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 31
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"input\\",
-                            \\"attributes\\": {
-                              \\"type\\": \\"radio\\",
-                              \\"name\\": \\"toggle\\",
-                              \\"value\\": \\"off\\",
-                              \\"checked\\": true
-                            },
-                            \\"childNodes\\": [],
-                            \\"id\\": 32
-                          },
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 33
-                          }
-                        ],
-                        \\"id\\": 30
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 34
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"checkbox\\"
-                        },
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 36
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"input\\",
-                            \\"attributes\\": {
-                              \\"type\\": \\"checkbox\\"
-                            },
-                            \\"childNodes\\": [],
-                            \\"id\\": 37
-                          },
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 38
-                          }
-                        ],
-                        \\"id\\": 35
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 39
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"textarea\\"
-                        },
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 41
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"textarea\\",
-                            \\"attributes\\": {
-                              \\"name\\": \\"\\",
-                              \\"id\\": \\"\\",
-                              \\"cols\\": \\"30\\",
-                              \\"rows\\": \\"10\\"
-                            },
-                            \\"childNodes\\": [],
-                            \\"id\\": 42
-                          },
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 43
-                          }
-                        ],
-                        \\"id\\": 40
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 44
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"select\\"
-                        },
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 46
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"select\\",
-                            \\"attributes\\": {
-                              \\"name\\": \\"\\",
-                              \\"id\\": \\"\\",
-                              \\"value\\": \\"*\\"
-                            },
-                            \\"childNodes\\": [
-                              {
-                                \\"type\\": 3,
-                                \\"textContent\\": \\"\\\\n          \\",
-                                \\"id\\": 48
-                              },
-                              {
-                                \\"type\\": 2,
-                                \\"tagName\\": \\"option\\",
-                                \\"attributes\\": {
-                                  \\"value\\": \\"1\\",
-                                  \\"selected\\": true
-                                },
-                                \\"childNodes\\": [
-                                  {
-                                    \\"type\\": 3,
-                                    \\"textContent\\": \\"1\\",
-                                    \\"id\\": 50
-                                  }
-                                ],
-                                \\"id\\": 49
-                              },
-                              {
-                                \\"type\\": 3,
-                                \\"textContent\\": \\"\\\\n          \\",
-                                \\"id\\": 51
-                              },
-                              {
-                                \\"type\\": 2,
-                                \\"tagName\\": \\"option\\",
-                                \\"attributes\\": {
-                                  \\"value\\": \\"2\\"
-                                },
-                                \\"childNodes\\": [
-                                  {
-                                    \\"type\\": 3,
-                                    \\"textContent\\": \\"2\\",
-                                    \\"id\\": 53
-                                  }
-                                ],
-                                \\"id\\": 52
-                              },
-                              {
-                                \\"type\\": 3,
-                                \\"textContent\\": \\"\\\\n        \\",
-                                \\"id\\": 54
-                              }
-                            ],
-                            \\"id\\": 47
-                          },
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 55
-                          }
-                        ],
-                        \\"id\\": 45
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 56
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"password\\"
-                        },
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 58
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"input\\",
-                            \\"attributes\\": {
-                              \\"type\\": \\"password\\"
-                            },
-                            \\"childNodes\\": [],
-                            \\"id\\": 59
-                          },
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 60
-                          }
-                        ],
-                        \\"id\\": 57
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 61
-                      }
-                    ],
-                    \\"id\\": 18
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 62
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 64
-                      }
-                    ],
-                    \\"id\\": 63
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 65
-                  }
-                ],
-                \\"id\\": 16
-              }
-            ],
-            \\"id\\": 3
-          }
-        ],
-        \\"id\\": 1
-      },
-      \\"initialOffset\\": {
-        \\"left\\": 0,
-        \\"top\\": 0
-      }
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 5,
-      \\"id\\": 22
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"*\\",
-      \\"isChecked\\": false,
-      \\"id\\": 22
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"**\\",
-      \\"isChecked\\": false,
-      \\"id\\": 22
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"***\\",
-      \\"isChecked\\": false,
-      \\"id\\": 22
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"****\\",
-      \\"isChecked\\": false,
-      \\"id\\": 22
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 1,
-      \\"id\\": 27
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 6,
-      \\"id\\": 22
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 5,
-      \\"id\\": 27
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 0,
-      \\"id\\": 27
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 2,
-      \\"id\\": 27
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"on\\",
-      \\"isChecked\\": true,
-      \\"id\\": 27
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"off\\",
-      \\"isChecked\\": false,
-      \\"id\\": 32
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 1,
-      \\"id\\": 37
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 6,
-      \\"id\\": 27
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 5,
-      \\"id\\": 37
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 0,
-      \\"id\\": 37
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 2,
-      \\"id\\": 37
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"on\\",
-      \\"isChecked\\": true,
-      \\"id\\": 37
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 6,
-      \\"id\\": 37
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 5,
-      \\"id\\": 59
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"*\\",
-      \\"isChecked\\": false,
-      \\"id\\": 59
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"**\\",
-      \\"isChecked\\": false,
-      \\"id\\": 59
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"***\\",
-      \\"isChecked\\": false,
-      \\"id\\": 59
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"****\\",
-      \\"isChecked\\": false,
-      \\"id\\": 59
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"*****\\",
-      \\"isChecked\\": false,
-      \\"id\\": 59
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"******\\",
-      \\"isChecked\\": false,
-      \\"id\\": 59
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"*******\\",
-      \\"isChecked\\": false,
-      \\"id\\": 59
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"********\\",
-      \\"isChecked\\": false,
-      \\"id\\": 59
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 6,
-      \\"id\\": 59
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 5,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"*\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"**\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"***\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"****\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"*****\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"******\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"*******\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"********\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"*********\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"**********\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"***********\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
+            \\"childNodes\\": [],
+            \\"id\\": 33
+          }
+        },
+        {
+          \\"parentId\\": 18,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"div\\",
+            \\"attributes\\": {
+              \\"class\\": \\"select2-drop select2-display-none select2-with-searchbox select2-drop-active\\",
+              \\"id\\": \\"select2-drop\\",
+              \\"style\\": \\"left: Npx; width: Npx; top: Npx; bottom: auto; display: block;\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 36
+          }
+        },
+        {
+          \\"parentId\\": 36,
+          \\"nextId\\": 38,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"   \\",
+            \\"id\\": 37
+          }
+        },
+        {
+          \\"parentId\\": 36,
+          \\"nextId\\": 44,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"div\\",
+            \\"attributes\\": {
+              \\"class\\": \\"select2-search\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 38
+          }
+        },
+        {
+          \\"parentId\\": 38,
+          \\"nextId\\": 40,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"       \\",
+            \\"id\\": 39
+          }
+        },
+        {
+          \\"parentId\\": 38,
+          \\"nextId\\": 41,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"label\\",
+            \\"attributes\\": {
+              \\"for\\": \\"s2id_autogen1_search\\",
+              \\"class\\": \\"select2-offscreen\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 40
+          }
+        },
+        {
+          \\"parentId\\": 38,
+          \\"nextId\\": 42,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"       \\",
+            \\"id\\": 41
+          }
+        },
+        {
+          \\"parentId\\": 38,
+          \\"nextId\\": 43,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"input\\",
+            \\"attributes\\": {
+              \\"type\\": \\"text\\",
+              \\"autocomplete\\": \\"off\\",
+              \\"autocorrect\\": \\"off\\",
+              \\"autocapitalize\\": \\"off\\",
+              \\"spellcheck\\": \\"false\\",
+              \\"class\\": \\"select2-input select2-focused\\",
+              \\"role\\": \\"combobox\\",
+              \\"aria-expanded\\": \\"true\\",
+              \\"aria-autocomplete\\": \\"list\\",
+              \\"aria-owns\\": \\"select2-results-1\\",
+              \\"id\\": \\"s2id_autogen1_search\\",
+              \\"placeholder\\": \\"\\",
+              \\"aria-activedescendant\\": \\"select2-result-label-2\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 42
+          }
+        },
+        {
+          \\"parentId\\": 38,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"   \\",
+            \\"id\\": 43
+          }
+        },
+        {
+          \\"parentId\\": 36,
+          \\"nextId\\": 45,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"   \\",
+            \\"id\\": 44
+          }
+        },
+        {
+          \\"parentId\\": 36,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"ul\\",
+            \\"attributes\\": {
+              \\"class\\": \\"select2-results\\",
+              \\"role\\": \\"listbox\\",
+              \\"id\\": \\"select2-results-1\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 45
+          }
+        },
+        {
+          \\"parentId\\": 45,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"li\\",
+            \\"attributes\\": {
+              \\"class\\": \\"select2-results-dept-0 select2-result select2-result-selectable\\",
+              \\"role\\": \\"presentation\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 67
+          }
+        },
+        {
+          \\"parentId\\": 67,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"div\\",
+            \\"attributes\\": {
+              \\"class\\": \\"select2-result-label\\",
+              \\"id\\": \\"select2-result-label-3\\",
+              \\"role\\": \\"option\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 68
+          }
+        },
+        {
+          \\"parentId\\": 68,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"B\\",
+            \\"id\\": 69
+          }
+        },
+        {
+          \\"parentId\\": 18,
+          \\"nextId\\": 36,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"div\\",
+            \\"attributes\\": {
+              \\"id\\": \\"select2-drop-mask\\",
+              \\"class\\": \\"select2-drop-mask\\",
+              \\"style\\": \\"\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 70
+          }
+        },
+        {
+          \\"parentId\\": 62,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"2 results are available, use up and down arrow keys to navigate.\\",
+            \\"id\\": 71
+          }
+        },
+        {
+          \\"parentId\\": 45,
+          \\"nextId\\": 67,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"li\\",
+            \\"attributes\\": {
+              \\"class\\": \\"select2-results-dept-0 select2-result select2-result-selectable select2-highlighted\\",
+              \\"role\\": \\"presentation\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 72
+          }
+        },
+        {
+          \\"parentId\\": 72,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"div\\",
+            \\"attributes\\": {
+              \\"class\\": \\"select2-result-label\\",
+              \\"id\\": \\"select2-result-label-2\\",
+              \\"role\\": \\"option\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 73
+          }
+        },
+        {
+          \\"parentId\\": 73,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"A\\",
+            \\"id\\": 74
+          }
+        },
+        {
+          \\"parentId\\": 73,
+          \\"nextId\\": 74,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"span\\",
+            \\"attributes\\": {
+              \\"class\\": \\"select2-match\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 75
+          }
+        },
+        {
+          \\"parentId\\": 68,
+          \\"nextId\\": 69,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"span\\",
+            \\"attributes\\": {
+              \\"class\\": \\"select2-match\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 76
+          }
+        }
+      ]
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 5,
-      \\"text\\": \\"************\\",
+      \\"text\\": \\"\\",
       \\"isChecked\\": false,
       \\"id\\": 42
     }
@@ -4302,215 +2594,45 @@ exports[`mask 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 5,
-      \\"text\\": \\"*************\\",
+      \\"text\\": \\"\\",
       \\"isChecked\\": false,
-      \\"id\\": 42
+      \\"id\\": 35
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"*\\",
-      \\"isChecked\\": false,
-      \\"id\\": 47
-    }
-  }
-]"
-`;
-
-exports[`mask-character-data 1`] = `
-"[
-  {
-    \\"type\\": 0,
-    \\"data\\": {}
-  },
-  {
-    \\"type\\": 1,
-    \\"data\\": {}
-  },
-  {
-    \\"type\\": 4,
-    \\"data\\": {
-      \\"href\\": \\"about:blank\\",
-      \\"width\\": 1920,
-      \\"height\\": 1080
-    }
-  },
-  {
-    \\"type\\": 2,
-    \\"data\\": {
-      \\"node\\": {
-        \\"type\\": 0,
-        \\"childNodes\\": [
-          {
-            \\"type\\": 1,
-            \\"name\\": \\"html\\",
-            \\"publicId\\": \\"\\",
-            \\"systemId\\": \\"\\",
-            \\"id\\": 2
-          },
-          {
-            \\"type\\": 2,
-            \\"tagName\\": \\"html\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"head\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [],
-                \\"id\\": 4
-              },
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"body\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 6
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"p\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"mutation observer\\",
-                        \\"id\\": 8
-                      }
-                    ],
-                    \\"id\\": 7
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 9
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"ul\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 11
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"li\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [],
-                        \\"id\\": 12
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n  \\",
-                        \\"id\\": 13
-                      }
-                    ],
-                    \\"id\\": 10
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 14
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 16
-                      }
-                    ],
-                    \\"id\\": 15
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\",
-                    \\"id\\": 17
-                  }
-                ],
-                \\"id\\": 5
-              }
-            ],
-            \\"id\\": 3
-          }
-        ],
-        \\"id\\": 1
-      },
-      \\"initialOffset\\": {
-        \\"left\\": 0,
-        \\"top\\": 0
-      }
+      \\"source\\": 2,
+      \\"type\\": 0,
+      \\"id\\": 70
     }
   },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [
-        {
-          \\"id\\": 7,
-          \\"attributes\\": {
-            \\"class\\": \\"rr-mask\\"
-          }
-        }
-      ],
-      \\"removes\\": [
-        {
-          \\"parentId\\": 7,
-          \\"id\\": 8
-        }
-      ],
-      \\"adds\\": [
-        {
-          \\"parentId\\": 10,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"li\\",
-            \\"attributes\\": {
-              \\"class\\": \\"rr-mask\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 18
-          }
-        },
-        {
-          \\"parentId\\": 18,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"*** **** ****\\",
-            \\"id\\": 19
-          }
-        },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
         {
-          \\"parentId\\": 7,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"*******\\",
-            \\"id\\": 20
+          \\"id\\": 36,
+          \\"attributes\\": {
+            \\"style\\": {
+              \\"color\\": [
+                \\"black\\",
+                \\"important\\"
+              ]
+            }
           }
         }
-      ]
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
     }
   }
 ]"
 `;
 
-exports[`mask-text 1`] = `
+exports[`record integration tests can use maskInputOptions to configure which type of inputs should be masked 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -4609,7 +2731,7 @@ exports[`mask-text 1`] = `
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"Mask text\\",
+                        \\"textContent\\": \\"form fields\\",
                         \\"id\\": 13
                       }
                     ],
@@ -4625,7 +2747,7 @@ exports[`mask-text 1`] = `
               },
               {
                 \\"type\\": 3,
-                \\"textContent\\": \\"\\\\n  \\",
+                \\"textContent\\": \\"\\\\n\\\\n  \\",
                 \\"id\\": 15
               },
               {
@@ -4640,117 +2762,312 @@ exports[`mask-text 1`] = `
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"p\\",
-                    \\"attributes\\": {
-                      \\"class\\": \\"rr-mask\\"
-                    },
+                    \\"tagName\\": \\"form\\",
+                    \\"attributes\\": {},
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"*****\\",
+                        \\"textContent\\": \\"\\\\n      \\",
                         \\"id\\": 19
-                      }
-                    ],
-                    \\"id\\": 18
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 20
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"div\\",
-                    \\"attributes\\": {
-                      \\"class\\": \\"rr-mask\\"
-                    },
-                    \\"childNodes\\": [
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"text\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 21
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"input\\",
+                            \\"attributes\\": {
+                              \\"type\\": \\"text\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 22
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 23
+                          }
+                        ],
+                        \\"id\\": 20
+                      },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 22
+                        \\"id\\": 24
                       },
                       {
                         \\"type\\": 2,
-                        \\"tagName\\": \\"span\\",
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 26
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"input\\",
+                            \\"attributes\\": {
+                              \\"type\\": \\"radio\\",
+                              \\"name\\": \\"toggle\\",
+                              \\"value\\": \\"on\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 27
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 28
+                          }
+                        ],
+                        \\"id\\": 25
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 29
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
                         \\"attributes\\": {},
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"*****\\",
-                            \\"id\\": 24
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 31
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"input\\",
+                            \\"attributes\\": {
+                              \\"type\\": \\"radio\\",
+                              \\"name\\": \\"toggle\\",
+                              \\"value\\": \\"off\\",
+                              \\"checked\\": true
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 32
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 33
+                          }
+                        ],
+                        \\"id\\": 30
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 34
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"checkbox\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 36
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"input\\",
+                            \\"attributes\\": {
+                              \\"type\\": \\"checkbox\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 37
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 38
+                          }
+                        ],
+                        \\"id\\": 35
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 39
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"textarea\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 41
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"textarea\\",
+                            \\"attributes\\": {
+                              \\"name\\": \\"\\",
+                              \\"id\\": \\"\\",
+                              \\"cols\\": \\"30\\",
+                              \\"rows\\": \\"10\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 42
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 43
+                          }
+                        ],
+                        \\"id\\": 40
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 44
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"select\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 46
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"select\\",
+                            \\"attributes\\": {
+                              \\"name\\": \\"\\",
+                              \\"id\\": \\"\\",
+                              \\"value\\": \\"1\\"
+                            },
+                            \\"childNodes\\": [
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"\\\\n          \\",
+                                \\"id\\": 48
+                              },
+                              {
+                                \\"type\\": 2,
+                                \\"tagName\\": \\"option\\",
+                                \\"attributes\\": {
+                                  \\"value\\": \\"1\\",
+                                  \\"selected\\": true
+                                },
+                                \\"childNodes\\": [
+                                  {
+                                    \\"type\\": 3,
+                                    \\"textContent\\": \\"1\\",
+                                    \\"id\\": 50
+                                  }
+                                ],
+                                \\"id\\": 49
+                              },
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"\\\\n          \\",
+                                \\"id\\": 51
+                              },
+                              {
+                                \\"type\\": 2,
+                                \\"tagName\\": \\"option\\",
+                                \\"attributes\\": {
+                                  \\"value\\": \\"2\\"
+                                },
+                                \\"childNodes\\": [
+                                  {
+                                    \\"type\\": 3,
+                                    \\"textContent\\": \\"2\\",
+                                    \\"id\\": 53
+                                  }
+                                ],
+                                \\"id\\": 52
+                              },
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"\\\\n        \\",
+                                \\"id\\": 54
+                              }
+                            ],
+                            \\"id\\": 47
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 55
                           }
                         ],
-                        \\"id\\": 23
+                        \\"id\\": 45
                       },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 25
-                      }
-                    ],
-                    \\"id\\": 21
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 26
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"div\\",
-                    \\"attributes\\": {
-                      \\"data-masking\\": \\"true\\"
-                    },
-                    \\"childNodes\\": [
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 28
+                        \\"id\\": 56
                       },
                       {
                         \\"type\\": 2,
-                        \\"tagName\\": \\"div\\",
-                        \\"attributes\\": {},
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"password\\"
+                        },
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
                             \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 30
+                            \\"id\\": 58
                           },
                           {
                             \\"type\\": 2,
-                            \\"tagName\\": \\"div\\",
-                            \\"attributes\\": {},
-                            \\"childNodes\\": [
-                              {
-                                \\"type\\": 3,
-                                \\"textContent\\": \\"*****\\",
-                                \\"id\\": 32
-                              }
-                            ],
-                            \\"id\\": 31
+                            \\"tagName\\": \\"input\\",
+                            \\"attributes\\": {
+                              \\"type\\": \\"password\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 59
                           },
                           {
                             \\"type\\": 3,
                             \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 33
+                            \\"id\\": 60
                           }
                         ],
-                        \\"id\\": 29
+                        \\"id\\": 57
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 34
+                        \\"id\\": 61
                       }
                     ],
-                    \\"id\\": 27
+                    \\"id\\": 18
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 35
+                    \\"id\\": 62
                   },
                   {
                     \\"type\\": 2,
@@ -4760,15 +3077,15 @@ exports[`mask-text 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 37
+                        \\"id\\": 64
                       }
                     ],
-                    \\"id\\": 36
+                    \\"id\\": 63
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 38
+                    \\"id\\": 65
                   }
                 ],
                 \\"id\\": 16
@@ -4784,11 +3101,392 @@ exports[`mask-text 1`] = `
         \\"top\\": 0
       }
     }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"t\\",
+      \\"isChecked\\": false,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"te\\",
+      \\"isChecked\\": false,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"tes\\",
+      \\"isChecked\\": false,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"test\\",
+      \\"isChecked\\": false,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 1,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 6,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 0,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 2,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"on\\",
+      \\"isChecked\\": true,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"off\\",
+      \\"isChecked\\": false,
+      \\"id\\": 32
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 1,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 6,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 0,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 2,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"on\\",
+      \\"isChecked\\": true,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 6,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"t\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"te\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"tex\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"text\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"texta\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textar\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textare\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea \\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea t\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea te\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea tes\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea test\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 6,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*\\",
+      \\"isChecked\\": false,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"**\\",
+      \\"isChecked\\": false,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"***\\",
+      \\"isChecked\\": false,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"****\\",
+      \\"isChecked\\": false,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*****\\",
+      \\"isChecked\\": false,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"******\\",
+      \\"isChecked\\": false,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*******\\",
+      \\"isChecked\\": false,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"********\\",
+      \\"isChecked\\": false,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"1\\",
+      \\"isChecked\\": false,
+      \\"id\\": 47
+    }
   }
 ]"
 `;
 
-exports[`mask-text-fn 1`] = `
+exports[`record integration tests should mask texts 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -4925,7 +3623,7 @@ exports[`mask-text-fn 1`] = `
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"****1\\",
+                        \\"textContent\\": \\"*****\\",
                         \\"id\\": 19
                       }
                     ],
@@ -4955,7 +3653,7 @@ exports[`mask-text-fn 1`] = `
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"****2\\",
+                            \\"textContent\\": \\"*****\\",
                             \\"id\\": 24
                           }
                         ],
@@ -5003,7 +3701,7 @@ exports[`mask-text-fn 1`] = `
                             \\"childNodes\\": [
                               {
                                 \\"type\\": 3,
-                                \\"textContent\\": \\"****3\\",
+                                \\"textContent\\": \\"*****\\",
                                 \\"id\\": 32
                               }
                             ],
@@ -5066,7 +3764,7 @@ exports[`mask-text-fn 1`] = `
 ]"
 `;
 
-exports[`maskInputOptions 1`] = `
+exports[`record integration tests should mask texts using maskTextFn 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -5165,7 +3863,7 @@ exports[`maskInputOptions 1`] = `
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"form fields\\",
+                        \\"textContent\\": \\"Mask text\\",
                         \\"id\\": 13
                       }
                     ],
@@ -5181,7 +3879,7 @@ exports[`maskInputOptions 1`] = `
               },
               {
                 \\"type\\": 3,
-                \\"textContent\\": \\"\\\\n\\\\n  \\",
+                \\"textContent\\": \\"\\\\n  \\",
                 \\"id\\": 15
               },
               {
@@ -5192,316 +3890,318 @@ exports[`maskInputOptions 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 17
+                    \\"id\\": 17
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"p\\",
+                    \\"attributes\\": {
+                      \\"class\\": \\"rr-mask\\"
+                    },
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"****1\\",
+                        \\"id\\": 19
+                      }
+                    ],
+                    \\"id\\": 18
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 20
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"form\\",
-                    \\"attributes\\": {},
+                    \\"tagName\\": \\"div\\",
+                    \\"attributes\\": {
+                      \\"class\\": \\"rr-mask\\"
+                    },
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 19
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"text\\"
-                        },
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 21
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"input\\",
-                            \\"attributes\\": {
-                              \\"type\\": \\"text\\"
-                            },
-                            \\"childNodes\\": [],
-                            \\"id\\": 22
-                          },
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 23
-                          }
-                        ],
-                        \\"id\\": 20
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 24
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 26
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"input\\",
-                            \\"attributes\\": {
-                              \\"type\\": \\"radio\\",
-                              \\"name\\": \\"toggle\\",
-                              \\"value\\": \\"on\\"
-                            },
-                            \\"childNodes\\": [],
-                            \\"id\\": 27
-                          },
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 28
-                          }
-                        ],
-                        \\"id\\": 25
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 29
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 31
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"input\\",
-                            \\"attributes\\": {
-                              \\"type\\": \\"radio\\",
-                              \\"name\\": \\"toggle\\",
-                              \\"value\\": \\"off\\",
-                              \\"checked\\": true
-                            },
-                            \\"childNodes\\": [],
-                            \\"id\\": 32
-                          },
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 33
-                          }
-                        ],
-                        \\"id\\": 30
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 34
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"checkbox\\"
-                        },
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 36
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"input\\",
-                            \\"attributes\\": {
-                              \\"type\\": \\"checkbox\\"
-                            },
-                            \\"childNodes\\": [],
-                            \\"id\\": 37
-                          },
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 38
-                          }
-                        ],
-                        \\"id\\": 35
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 39
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"textarea\\"
-                        },
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 41
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"textarea\\",
-                            \\"attributes\\": {
-                              \\"name\\": \\"\\",
-                              \\"id\\": \\"\\",
-                              \\"cols\\": \\"30\\",
-                              \\"rows\\": \\"10\\"
-                            },
-                            \\"childNodes\\": [],
-                            \\"id\\": 42
-                          },
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 43
-                          }
-                        ],
-                        \\"id\\": 40
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 44
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"select\\"
-                        },
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 46
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"select\\",
-                            \\"attributes\\": {
-                              \\"name\\": \\"\\",
-                              \\"id\\": \\"\\",
-                              \\"value\\": \\"1\\"
-                            },
-                            \\"childNodes\\": [
-                              {
-                                \\"type\\": 3,
-                                \\"textContent\\": \\"\\\\n          \\",
-                                \\"id\\": 48
-                              },
-                              {
-                                \\"type\\": 2,
-                                \\"tagName\\": \\"option\\",
-                                \\"attributes\\": {
-                                  \\"value\\": \\"1\\",
-                                  \\"selected\\": true
-                                },
-                                \\"childNodes\\": [
-                                  {
-                                    \\"type\\": 3,
-                                    \\"textContent\\": \\"1\\",
-                                    \\"id\\": 50
-                                  }
-                                ],
-                                \\"id\\": 49
-                              },
-                              {
-                                \\"type\\": 3,
-                                \\"textContent\\": \\"\\\\n          \\",
-                                \\"id\\": 51
-                              },
-                              {
-                                \\"type\\": 2,
-                                \\"tagName\\": \\"option\\",
-                                \\"attributes\\": {
-                                  \\"value\\": \\"2\\"
-                                },
-                                \\"childNodes\\": [
-                                  {
-                                    \\"type\\": 3,
-                                    \\"textContent\\": \\"2\\",
-                                    \\"id\\": 53
-                                  }
-                                ],
-                                \\"id\\": 52
-                              },
-                              {
-                                \\"type\\": 3,
-                                \\"textContent\\": \\"\\\\n        \\",
-                                \\"id\\": 54
-                              }
-                            ],
-                            \\"id\\": 47
-                          },
+                        \\"id\\": 22
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"span\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 55
+                            \\"textContent\\": \\"****2\\",
+                            \\"id\\": 24
                           }
                         ],
-                        \\"id\\": 45
+                        \\"id\\": 23
                       },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 25
+                      }
+                    ],
+                    \\"id\\": 21
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 26
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"div\\",
+                    \\"attributes\\": {
+                      \\"data-masking\\": \\"true\\"
+                    },
+                    \\"childNodes\\": [
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 56
+                        \\"id\\": 28
                       },
                       {
                         \\"type\\": 2,
-                        \\"tagName\\": \\"label\\",
-                        \\"attributes\\": {
-                          \\"for\\": \\"password\\"
-                        },
+                        \\"tagName\\": \\"div\\",
+                        \\"attributes\\": {},
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
                             \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 58
+                            \\"id\\": 30
                           },
                           {
                             \\"type\\": 2,
-                            \\"tagName\\": \\"input\\",
-                            \\"attributes\\": {
-                              \\"type\\": \\"password\\"
-                            },
-                            \\"childNodes\\": [],
-                            \\"id\\": 59
+                            \\"tagName\\": \\"div\\",
+                            \\"attributes\\": {},
+                            \\"childNodes\\": [
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"****3\\",
+                                \\"id\\": 32
+                              }
+                            ],
+                            \\"id\\": 31
                           },
                           {
                             \\"type\\": 3,
                             \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 60
+                            \\"id\\": 33
                           }
                         ],
-                        \\"id\\": 57
+                        \\"id\\": 29
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 61
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 34
+                      }
+                    ],
+                    \\"id\\": 27
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
+                    \\"id\\": 35
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 37
+                      }
+                    ],
+                    \\"id\\": 36
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 38
+                  }
+                ],
+                \\"id\\": 16
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  }
+]"
+`;
+
+exports[`record integration tests should mask value attribute with maskInputOptions 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 1,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {
+              \\"lang\\": \\"en\\"
+            },
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 5
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"charset\\": \\"UTF-8\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"http-equiv\\": \\"X-UA-Compatible\\",
+                      \\"content\\": \\"IE=edge\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 8
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"name\\": \\"viewport\\",
+                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 10
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 11
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"title\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"Document\\",
+                        \\"id\\": 13
+                      }
+                    ],
+                    \\"id\\": 12
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 14
+                  }
+                ],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 3,
+                \\"textContent\\": \\"\\\\n  \\",
+                \\"id\\": 15
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 17
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"input\\",
+                    \\"attributes\\": {
+                      \\"type\\": \\"password\\",
+                      \\"id\\": \\"password\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 18
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 19
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 21
                       }
                     ],
-                    \\"id\\": 18
+                    \\"id\\": 20
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 62
+                    \\"id\\": 22
                   },
                   {
                     \\"type\\": 2,
@@ -5511,15 +4211,15 @@ exports[`maskInputOptions 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 64
+                        \\"id\\": 24
                       }
                     ],
-                    \\"id\\": 63
+                    \\"id\\": 23
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 65
+                    \\"id\\": 25
                   }
                 ],
                 \\"id\\": 16
@@ -5541,646 +4241,800 @@ exports[`maskInputOptions 1`] = `
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 5,
-      \\"id\\": 22
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"t\\",
-      \\"isChecked\\": false,
-      \\"id\\": 22
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"te\\",
-      \\"isChecked\\": false,
-      \\"id\\": 22
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"tes\\",
-      \\"isChecked\\": false,
-      \\"id\\": 22
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"test\\",
-      \\"isChecked\\": false,
-      \\"id\\": 22
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 1,
-      \\"id\\": 27
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 6,
-      \\"id\\": 22
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 5,
-      \\"id\\": 27
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 0,
-      \\"id\\": 27
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 2,
-      \\"id\\": 27
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"on\\",
-      \\"isChecked\\": true,
-      \\"id\\": 27
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"off\\",
-      \\"isChecked\\": false,
-      \\"id\\": 32
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 1,
-      \\"id\\": 37
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 6,
-      \\"id\\": 27
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 5,
-      \\"id\\": 37
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 0,
-      \\"id\\": 37
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 2,
-      \\"id\\": 37
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"on\\",
-      \\"isChecked\\": true,
-      \\"id\\": 37
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 6,
-      \\"id\\": 37
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 5,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"t\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"te\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"tex\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"text\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"texta\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"textar\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
+      \\"id\\": 18
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 5,
-      \\"text\\": \\"textare\\",
+      \\"text\\": \\"*\\",
       \\"isChecked\\": false,
-      \\"id\\": 42
+      \\"id\\": 18
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"textarea\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 18,
+          \\"attributes\\": {
+            \\"value\\": \\"*\\"
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 5,
-      \\"text\\": \\"textarea \\",
+      \\"text\\": \\"**\\",
       \\"isChecked\\": false,
-      \\"id\\": 42
+      \\"id\\": 18
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"textarea t\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 18,
+          \\"attributes\\": {
+            \\"value\\": \\"**\\"
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 5,
-      \\"text\\": \\"textarea te\\",
+      \\"text\\": \\"***\\",
       \\"isChecked\\": false,
-      \\"id\\": 42
+      \\"id\\": 18
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"textarea tes\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 18,
+          \\"attributes\\": {
+            \\"value\\": \\"***\\"
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 5,
-      \\"text\\": \\"textarea test\\",
+      \\"text\\": \\"****\\",
       \\"isChecked\\": false,
-      \\"id\\": 42
+      \\"id\\": 18
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 6,
-      \\"id\\": 42
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 18,
+          \\"attributes\\": {
+            \\"value\\": \\"****\\"
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 5,
-      \\"id\\": 59
+      \\"source\\": 5,
+      \\"text\\": \\"*****\\",
+      \\"isChecked\\": false,
+      \\"id\\": 18
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"*\\",
-      \\"isChecked\\": false,
-      \\"id\\": 59
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 18,
+          \\"attributes\\": {
+            \\"value\\": \\"*****\\"
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 5,
-      \\"text\\": \\"**\\",
+      \\"text\\": \\"******\\",
       \\"isChecked\\": false,
-      \\"id\\": 59
+      \\"id\\": 18
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"***\\",
-      \\"isChecked\\": false,
-      \\"id\\": 59
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 18,
+          \\"attributes\\": {
+            \\"value\\": \\"******\\"
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
     }
+  }
+]"
+`;
+
+exports[`record integration tests should nest record iframe 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 1,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 4,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"****\\",
-      \\"isChecked\\": false,
-      \\"id\\": 59
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 2,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"*****\\",
-      \\"isChecked\\": false,
-      \\"id\\": 59
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {
+              \\"lang\\": \\"en\\"
+            },
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 5
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"charset\\": \\"UTF-8\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"name\\": \\"viewport\\",
+                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 8
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"title\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"Main\\",
+                        \\"id\\": 11
+                      }
+                    ],
+                    \\"id\\": 10
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 12
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"style\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      iframe {\\\\n        width: 500px;\\\\n        height: 500px;\\\\n      }\\\\n    \\",
+                        \\"isStyle\\": true,
+                        \\"id\\": 14
+                      }
+                    ],
+                    \\"id\\": 13
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 15
+                  }
+                ],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 3,
+                \\"textContent\\": \\"\\\\n  \\",
+                \\"id\\": 16
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 18
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"iframe\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"one\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 19
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
+                    \\"id\\": 20
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 22
+                      }
+                    ],
+                    \\"id\\": 21
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n  \\",
+                    \\"id\\": 23
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 25
+                      }
+                    ],
+                    \\"id\\": 24
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n\\\\n\\",
+                    \\"id\\": 26
+                  }
+                ],
+                \\"id\\": 17
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"******\\",
-      \\"isChecked\\": false,
-      \\"id\\": 59
+      \\"source\\": 0,
+      \\"adds\\": [
+        {
+          \\"parentId\\": 19,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 0,
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"html\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"head\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 27,
+                    \\"id\\": 29
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"body\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 27,
+                    \\"id\\": 30
+                  }
+                ],
+                \\"rootId\\": 27,
+                \\"id\\": 28
+              }
+            ],
+            \\"compatMode\\": \\"BackCompat\\",
+            \\"id\\": 27
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"isAttachIframe\\": true
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"*******\\",
-      \\"isChecked\\": false,
-      \\"id\\": 59
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 17,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"iframe\\",
+            \\"attributes\\": {
+              \\"id\\": \\"two\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 31
+          }
+        }
+      ]
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"********\\",
-      \\"isChecked\\": false,
-      \\"id\\": 59
+      \\"source\\": 0,
+      \\"adds\\": [
+        {
+          \\"parentId\\": 31,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 0,
+            \\"childNodes\\": [
+              {
+                \\"type\\": 1,
+                \\"name\\": \\"html\\",
+                \\"publicId\\": \\"\\",
+                \\"systemId\\": \\"\\",
+                \\"rootId\\": 32,
+                \\"id\\": 33
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"html\\",
+                \\"attributes\\": {
+                  \\"lang\\": \\"en\\"
+                },
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"head\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"rootId\\": 32,
+                        \\"id\\": 36
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"meta\\",
+                        \\"attributes\\": {
+                          \\"charset\\": \\"UTF-8\\"
+                        },
+                        \\"childNodes\\": [],
+                        \\"rootId\\": 32,
+                        \\"id\\": 37
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"rootId\\": 32,
+                        \\"id\\": 38
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"meta\\",
+                        \\"attributes\\": {
+                          \\"name\\": \\"viewport\\",
+                          \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                        },
+                        \\"childNodes\\": [],
+                        \\"rootId\\": 32,
+                        \\"id\\": 39
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"rootId\\": 32,
+                        \\"id\\": 40
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"title\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"Frame 1\\",
+                            \\"rootId\\": 32,
+                            \\"id\\": 42
+                          }
+                        ],
+                        \\"rootId\\": 32,
+                        \\"id\\": 41
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n  \\",
+                        \\"rootId\\": 32,
+                        \\"id\\": 43
+                      }
+                    ],
+                    \\"rootId\\": 32,
+                    \\"id\\": 35
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"rootId\\": 32,
+                    \\"id\\": 44
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"body\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    frame 1\\\\n    \\",
+                        \\"rootId\\": 32,
+                        \\"id\\": 46
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"iframe\\",
+                        \\"attributes\\": {
+                          \\"id\\": \\"three\\",
+                          \\"frameborder\\": \\"0\\"
+                        },
+                        \\"childNodes\\": [],
+                        \\"rootId\\": 32,
+                        \\"id\\": 47
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"rootId\\": 32,
+                        \\"id\\": 48
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"iframe\\",
+                        \\"attributes\\": {
+                          \\"id\\": \\"four\\",
+                          \\"frameborder\\": \\"0\\"
+                        },
+                        \\"childNodes\\": [],
+                        \\"rootId\\": 32,
+                        \\"id\\": 49
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n  \\\\n\\\\n\\",
+                        \\"rootId\\": 32,
+                        \\"id\\": 50
+                      }
+                    ],
+                    \\"rootId\\": 32,
+                    \\"id\\": 45
+                  }
+                ],
+                \\"rootId\\": 32,
+                \\"id\\": 34
+              }
+            ],
+            \\"id\\": 32
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"isAttachIframe\\": true
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"1\\",
-      \\"isChecked\\": false,
-      \\"id\\": 47
-    }
-  }
-]"
-`;
-
-exports[`maskPassword 1`] = `
-"[
-  {
-    \\"type\\": 0,
-    \\"data\\": {}
-  },
-  {
-    \\"type\\": 1,
-    \\"data\\": {}
-  },
-  {
-    \\"type\\": 4,
-    \\"data\\": {
-      \\"href\\": \\"about:blank\\",
-      \\"width\\": 1920,
-      \\"height\\": 1080
-    }
-  },
-  {
-    \\"type\\": 2,
-    \\"data\\": {
-      \\"node\\": {
-        \\"type\\": 0,
-        \\"childNodes\\": [
-          {
-            \\"type\\": 1,
-            \\"name\\": \\"html\\",
-            \\"publicId\\": \\"\\",
-            \\"systemId\\": \\"\\",
-            \\"id\\": 2
-          },
-          {
-            \\"type\\": 2,
-            \\"tagName\\": \\"html\\",
-            \\"attributes\\": {
-              \\"lang\\": \\"en\\"
-            },
+      \\"source\\": 0,
+      \\"adds\\": [
+        {
+          \\"parentId\\": 47,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 0,
             \\"childNodes\\": [
               {
                 \\"type\\": 2,
-                \\"tagName\\": \\"head\\",
+                \\"tagName\\": \\"html\\",
                 \\"attributes\\": {},
                 \\"childNodes\\": [
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 5
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"charset\\": \\"UTF-8\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 6
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 7
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"http-equiv\\": \\"X-UA-Compatible\\",
-                      \\"content\\": \\"IE=edge\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 8
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 9
-                  },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"meta\\",
-                    \\"attributes\\": {
-                      \\"name\\": \\"viewport\\",
-                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
-                    },
+                    \\"tagName\\": \\"head\\",
+                    \\"attributes\\": {},
                     \\"childNodes\\": [],
-                    \\"id\\": 10
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 11
+                    \\"rootId\\": 51,
+                    \\"id\\": 53
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"title\\",
+                    \\"tagName\\": \\"body\\",
                     \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"Document\\",
-                        \\"id\\": 13
-                      }
-                    ],
-                    \\"id\\": 12
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 14
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 51,
+                    \\"id\\": 54
                   }
                 ],
-                \\"id\\": 4
-              },
+                \\"rootId\\": 51,
+                \\"id\\": 52
+              }
+            ],
+            \\"compatMode\\": \\"BackCompat\\",
+            \\"id\\": 51
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"isAttachIframe\\": true
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"adds\\": [
+        {
+          \\"parentId\\": 49,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 0,
+            \\"childNodes\\": [
               {
-                \\"type\\": 3,
-                \\"textContent\\": \\"\\\\n  \\",
-                \\"id\\": 15
+                \\"type\\": 1,
+                \\"name\\": \\"html\\",
+                \\"publicId\\": \\"\\",
+                \\"systemId\\": \\"\\",
+                \\"rootId\\": 55,
+                \\"id\\": 56
               },
               {
                 \\"type\\": 2,
-                \\"tagName\\": \\"body\\",
-                \\"attributes\\": {},
+                \\"tagName\\": \\"html\\",
+                \\"attributes\\": {
+                  \\"lang\\": \\"en\\"
+                },
                 \\"childNodes\\": [
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 17
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"input\\",
-                    \\"attributes\\": {
-                      \\"type\\": \\"password\\",
-                      \\"id\\": \\"password\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 18
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 19
-                  },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
+                    \\"tagName\\": \\"head\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 21
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"rootId\\": 55,
+                        \\"id\\": 59
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"meta\\",
+                        \\"attributes\\": {
+                          \\"charset\\": \\"UTF-8\\"
+                        },
+                        \\"childNodes\\": [],
+                        \\"rootId\\": 55,
+                        \\"id\\": 60
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"rootId\\": 55,
+                        \\"id\\": 61
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"meta\\",
+                        \\"attributes\\": {
+                          \\"name\\": \\"viewport\\",
+                          \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                        },
+                        \\"childNodes\\": [],
+                        \\"rootId\\": 55,
+                        \\"id\\": 62
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"rootId\\": 55,
+                        \\"id\\": 63
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"title\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"Frame 2\\",
+                            \\"rootId\\": 55,
+                            \\"id\\": 65
+                          }
+                        ],
+                        \\"rootId\\": 55,
+                        \\"id\\": 64
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n  \\",
+                        \\"rootId\\": 55,
+                        \\"id\\": 66
                       }
                     ],
-                    \\"id\\": 20
+                    \\"rootId\\": 55,
+                    \\"id\\": 58
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 22
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"rootId\\": 55,
+                    \\"id\\": 67
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
+                    \\"tagName\\": \\"body\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 24
+                        \\"textContent\\": \\"\\\\n    frame 2\\\\n  \\\\n  \\",
+                        \\"rootId\\": 55,
+                        \\"id\\": 69
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"script\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                            \\"rootId\\": 55,
+                            \\"id\\": 71
+                          }
+                        ],
+                        \\"rootId\\": 55,
+                        \\"id\\": 70
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n\\\\n\\",
+                        \\"rootId\\": 55,
+                        \\"id\\": 72
                       }
                     ],
-                    \\"id\\": 23
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 25
+                    \\"rootId\\": 55,
+                    \\"id\\": 68
                   }
                 ],
-                \\"id\\": 16
+                \\"rootId\\": 55,
+                \\"id\\": 57
               }
             ],
-            \\"id\\": 3
-          }
-        ],
-        \\"id\\": 1
-      },
-      \\"initialOffset\\": {
-        \\"left\\": 0,
-        \\"top\\": 0
-      }
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 5,
-      \\"id\\": 18
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"*\\",
-      \\"isChecked\\": false,
-      \\"id\\": 18
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [
-        {
-          \\"id\\": 18,
-          \\"attributes\\": {
-            \\"value\\": \\"*\\"
+            \\"id\\": 55
           }
         }
       ],
       \\"removes\\": [],
-      \\"adds\\": []
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"**\\",
-      \\"isChecked\\": false,
-      \\"id\\": 18
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
       \\"texts\\": [],
-      \\"attributes\\": [
-        {
-          \\"id\\": 18,
-          \\"attributes\\": {
-            \\"value\\": \\"**\\"
-          }
-        }
-      ],
-      \\"removes\\": [],
-      \\"adds\\": []
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"***\\",
-      \\"isChecked\\": false,
-      \\"id\\": 18
+      \\"attributes\\": [],
+      \\"isAttachIframe\\": true
     }
   },
   {
@@ -6188,100 +5042,78 @@ exports[`maskPassword 1`] = `
     \\"data\\": {
       \\"source\\": 0,
       \\"texts\\": [],
-      \\"attributes\\": [
-        {
-          \\"id\\": 18,
-          \\"attributes\\": {
-            \\"value\\": \\"***\\"
-          }
-        }
-      ],
+      \\"attributes\\": [],
       \\"removes\\": [],
-      \\"adds\\": []
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"****\\",
-      \\"isChecked\\": false,
-      \\"id\\": 18
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [
+      \\"adds\\": [
         {
-          \\"id\\": 18,
-          \\"attributes\\": {
-            \\"value\\": \\"****\\"
+          \\"parentId\\": 68,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"iframe\\",
+            \\"attributes\\": {
+              \\"id\\": \\"five\\"
+            },
+            \\"childNodes\\": [],
+            \\"rootId\\": 55,
+            \\"id\\": 73
           }
         }
-      ],
-      \\"removes\\": [],
-      \\"adds\\": []
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"*****\\",
-      \\"isChecked\\": false,
-      \\"id\\": 18
+      ]
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [
+      \\"adds\\": [
         {
-          \\"id\\": 18,
-          \\"attributes\\": {
-            \\"value\\": \\"*****\\"
+          \\"parentId\\": 73,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 0,
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"html\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"head\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 74,
+                    \\"id\\": 76
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"body\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 74,
+                    \\"id\\": 77
+                  }
+                ],
+                \\"rootId\\": 74,
+                \\"id\\": 75
+              }
+            ],
+            \\"compatMode\\": \\"BackCompat\\",
+            \\"id\\": 74
           }
         }
       ],
       \\"removes\\": [],
-      \\"adds\\": []
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"******\\",
-      \\"isChecked\\": false,
-      \\"id\\": 18
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
       \\"texts\\": [],
-      \\"attributes\\": [
-        {
-          \\"id\\": 18,
-          \\"attributes\\": {
-            \\"value\\": \\"******\\"
-          }
-        }
-      ],
-      \\"removes\\": [],
-      \\"adds\\": []
+      \\"attributes\\": [],
+      \\"isAttachIframe\\": true
     }
   }
 ]"
 `;
 
-exports[`move-node-1 1`] = `
+exports[`record integration tests should not record blocked elements and its child nodes 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -6315,50 +5147,59 @@ exports[`move-node-1 1`] = `
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
-            \\"attributes\\": {},
+            \\"attributes\\": {
+              \\"lang\\": \\"en\\"
+            },
             \\"childNodes\\": [
               {
                 \\"type\\": 2,
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
-                \\"childNodes\\": [],
-                \\"id\\": 4
-              },
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"body\\",
-                \\"attributes\\": {},
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 6
+                    \\"id\\": 5
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"div\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 8
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"p\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [],
-                        \\"id\\": 9
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 10
-                      }
-                    ],
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"charset\\": \\"UTF-8\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 7
                   },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"name\\": \\"viewport\\",
+                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 8
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"http-equiv\\": \\"X-UA-Compatible\\",
+                      \\"content\\": \\"ie=edge\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 10
+                  },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
@@ -6366,189 +5207,93 @@ exports[`move-node-1 1`] = `
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"span\\",
+                    \\"tagName\\": \\"title\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"textContent\\": \\"Block record\\",
                         \\"id\\": 13
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"i\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 15
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"b\\",
-                            \\"attributes\\": {},
-                            \\"childNodes\\": [
-                              {
-                                \\"type\\": 3,
-                                \\"textContent\\": \\"1\\",
-                                \\"id\\": 17
-                              }
-                            ],
-                            \\"id\\": 16
-                          },
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 18
-                          }
-                        ],
-                        \\"id\\": 14
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 19
                       }
                     ],
                     \\"id\\": 12
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 20
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 14
+                  }
+                ],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 3,
+                \\"textContent\\": \\"\\\\n  \\",
+                \\"id\\": 15
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 17
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 22
-                      }
-                    ],
-                    \\"id\\": 21
+                    \\"tagName\\": \\"div\\",
+                    \\"attributes\\": {
+                      \\"class\\": \\"rr-block\\",
+                      \\"rr_width\\": \\"50px\\",
+                      \\"rr_height\\": \\"50px\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 18
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 23
-                  }
-                ],
-                \\"id\\": 5
-              }
-            ],
-            \\"id\\": 3
-          }
-        ],
-        \\"id\\": 1
-      },
-      \\"initialOffset\\": {
-        \\"left\\": 0,
-        \\"top\\": 0
-      }
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"removes\\": [
-        {
-          \\"parentId\\": 5,
-          \\"id\\": 12
-        }
-      ],
-      \\"adds\\": [
-        {
-          \\"parentId\\": 7,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"span\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
-            \\"id\\": 12
-          }
-        },
-        {
-          \\"parentId\\": 12,
-          \\"nextId\\": 14,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n      \\",
-            \\"id\\": 13
-          }
-        },
-        {
-          \\"parentId\\": 12,
-          \\"nextId\\": 19,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"i\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
-            \\"id\\": 14
-          }
-        },
-        {
-          \\"parentId\\": 14,
-          \\"nextId\\": 16,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n        \\",
-            \\"id\\": 15
-          }
-        },
-        {
-          \\"parentId\\": 14,
-          \\"nextId\\": 18,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"b\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
-            \\"id\\": 16
-          }
-        },
-        {
-          \\"parentId\\": 16,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"1\\",
-            \\"id\\": 17
-          }
-        },
-        {
-          \\"parentId\\": 14,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n      \\",
-            \\"id\\": 18
-          }
-        },
-        {
-          \\"parentId\\": 12,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n    \\",
-            \\"id\\": 19
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
+                    \\"id\\": 19
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 21
+                      }
+                    ],
+                    \\"id\\": 20
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 22
+                  }
+                ],
+                \\"id\\": 16
+              }
+            ],
+            \\"id\\": 3
           }
-        }
-      ]
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
     }
   }
 ]"
 `;
 
-exports[`move-node-2 1`] = `
+exports[`record integration tests should not record blocked elements dynamically added 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -6582,50 +5327,59 @@ exports[`move-node-2 1`] = `
           {
             \\"type\\": 2,
             \\"tagName\\": \\"html\\",
-            \\"attributes\\": {},
+            \\"attributes\\": {
+              \\"lang\\": \\"en\\"
+            },
             \\"childNodes\\": [
               {
                 \\"type\\": 2,
                 \\"tagName\\": \\"head\\",
                 \\"attributes\\": {},
-                \\"childNodes\\": [],
-                \\"id\\": 4
-              },
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"body\\",
-                \\"attributes\\": {},
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 6
+                    \\"id\\": 5
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"div\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 8
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"p\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [],
-                        \\"id\\": 9
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 10
-                      }
-                    ],
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"charset\\": \\"UTF-8\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 7
                   },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"name\\": \\"viewport\\",
+                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 8
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"http-equiv\\": \\"X-UA-Compatible\\",
+                      \\"content\\": \\"ie=edge\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 10
+                  },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
@@ -6633,57 +5387,55 @@ exports[`move-node-2 1`] = `
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"span\\",
+                    \\"tagName\\": \\"title\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"textContent\\": \\"Block record\\",
                         \\"id\\": 13
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"i\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n        \\",
-                            \\"id\\": 15
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"b\\",
-                            \\"attributes\\": {},
-                            \\"childNodes\\": [
-                              {
-                                \\"type\\": 3,
-                                \\"textContent\\": \\"1\\",
-                                \\"id\\": 17
-                              }
-                            ],
-                            \\"id\\": 16
-                          },
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n      \\",
-                            \\"id\\": 18
-                          }
-                        ],
-                        \\"id\\": 14
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 19
                       }
                     ],
                     \\"id\\": 12
                   },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 14
+                  }
+                ],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 3,
+                \\"textContent\\": \\"\\\\n  \\",
+                \\"id\\": 15
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 17
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"div\\",
+                    \\"attributes\\": {
+                      \\"class\\": \\"rr-block\\",
+                      \\"rr_width\\": \\"50px\\",
+                      \\"rr_height\\": \\"50px\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 18
+                  },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 20
+                    \\"id\\": 19
                   },
                   {
                     \\"type\\": 2,
@@ -6692,132 +5444,53 @@ exports[`move-node-2 1`] = `
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 22
-                      }
-                    ],
-                    \\"id\\": 21
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 23
-                  }
-                ],
-                \\"id\\": 5
-              }
-            ],
-            \\"id\\": 3
-          }
-        ],
-        \\"id\\": 1
-      },
-      \\"initialOffset\\": {
-        \\"left\\": 0,
-        \\"top\\": 0
-      }
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"removes\\": [
-        {
-          \\"parentId\\": 5,
-          \\"id\\": 12
-        }
-      ],
-      \\"adds\\": [
-        {
-          \\"parentId\\": 12,
-          \\"nextId\\": 14,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n      \\",
-            \\"id\\": 13
-          }
-        },
-        {
-          \\"parentId\\": 12,
-          \\"nextId\\": 19,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"i\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
-            \\"id\\": 14
-          }
-        },
-        {
-          \\"parentId\\": 14,
-          \\"nextId\\": 16,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n        \\",
-            \\"id\\": 15
-          }
-        },
-        {
-          \\"parentId\\": 14,
-          \\"nextId\\": 18,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"b\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
-            \\"id\\": 16
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 21
+                      }
+                    ],
+                    \\"id\\": 20
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 22
+                  }
+                ],
+                \\"id\\": 16
+              }
+            ],
+            \\"id\\": 3
           }
-        },
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
         {
           \\"parentId\\": 16,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"1\\",
-            \\"id\\": 17
-          }
-        },
-        {
-          \\"parentId\\": 14,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n      \\",
-            \\"id\\": 18
-          }
-        },
-        {
-          \\"parentId\\": 12,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"\\\\n    \\",
-            \\"id\\": 19
-          }
-        },
-        {
-          \\"parentId\\": 5,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"div\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
-            \\"id\\": 24
-          }
-        },
-        {
-          \\"parentId\\": 24,
-          \\"nextId\\": null,
+          \\"nextId\\": 18,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"span\\",
-            \\"attributes\\": {},
+            \\"tagName\\": \\"button\\",
+            \\"attributes\\": {
+              \\"class\\": \\"rr-block\\",
+              \\"rr_width\\": \\"100px\\",
+              \\"rr_height\\": \\"100px\\"
+            },
             \\"childNodes\\": [],
-            \\"id\\": 12
+            \\"id\\": 23
           }
         }
       ]
@@ -6826,7 +5499,7 @@ exports[`move-node-2 1`] = `
 ]"
 `;
 
-exports[`react-styled-components 1`] = `
+exports[`record integration tests should not record input events on ignored elements 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -6925,7 +5598,7 @@ exports[`react-styled-components 1`] = `
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"react styled components\\",
+                        \\"textContent\\": \\"ignore fields\\",
                         \\"id\\": 13
                       }
                     ],
@@ -6935,45 +5608,14 @@ exports[`react-styled-components 1`] = `
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 14
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 16
-                      }
-                    ],
-                    \\"id\\": 15
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"style\\",
-                    \\"attributes\\": {
-                      \\"data-styled\\": \\"active\\",
-                      \\"data-styled-version\\": \\"5.0.1\\",
-                      \\"_cssText\\": \\".ixzlRK { font-size: 1.5em; text-align: center; color: palevioletred; }.eOXmez { font-size: 1.5em; text-align: center; color: rebeccapurple; }.bJCmFu { padding: 4em; background: papayawhip; }\\"
-                    },
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\",
-                        \\"isStyle\\": true,
-                        \\"id\\": 18
-                      }
-                    ],
-                    \\"id\\": 17
                   }
                 ],
                 \\"id\\": 4
               },
               {
                 \\"type\\": 3,
-                \\"textContent\\": \\"\\\\n  \\",
-                \\"id\\": 19
+                \\"textContent\\": \\"\\\\n\\\\n  \\",
+                \\"id\\": 15
               },
               {
                 \\"type\\": 2,
@@ -6983,153 +5625,60 @@ exports[`react-styled-components 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 21
+                    \\"id\\": 17
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"div\\",
-                    \\"attributes\\": {
-                      \\"id\\": \\"app\\"
-                    },
+                    \\"tagName\\": \\"form\\",
+                    \\"attributes\\": {},
                     \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 19
+                      },
                       {
                         \\"type\\": 2,
-                        \\"tagName\\": \\"section\\",
+                        \\"tagName\\": \\"label\\",
                         \\"attributes\\": {
-                          \\"class\\": \\"sc-AxirZ bJCmFu\\"
+                          \\"for\\": \\"ignore text\\"
                         },
                         \\"childNodes\\": [
                           {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"h1\\",
-                            \\"attributes\\": {
-                              \\"class\\": \\"sc-AxjAm ixzlRK\\"
-                            },
-                            \\"childNodes\\": [
-                              {
-                                \\"type\\": 3,
-                                \\"textContent\\": \\"Hello World!\\",
-                                \\"id\\": 25
-                              }
-                            ],
-                            \\"id\\": 24
+                            \\"type\\": 3,
+                            \\"textContent\\": \\" \\",
+                            \\"id\\": 21
                           },
                           {
                             \\"type\\": 2,
-                            \\"tagName\\": \\"h1\\",
+                            \\"tagName\\": \\"input\\",
                             \\"attributes\\": {
-                              \\"class\\": \\"sc-AxjAm eOXmez toggle\\",
-                              \\"color\\": \\"rebeccapurple\\"
-                            },
-                            \\"childNodes\\": [
-                              {
-                                \\"type\\": 3,
-                                \\"textContent\\": \\"Hello World!\\",
-                                \\"id\\": 27
-                              }
-                            ],
-                            \\"id\\": 26
-                          }
-                        ],
-                        \\"id\\": 23
-                      }
-                    ],
-                    \\"id\\": 22
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 28
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
-                    \\"attributes\\": {
-                      \\"src\\": \\"https://cdn.jsdelivr.net/npm/react@16/umd/react.production.min.js\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 29
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 30
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
-                    \\"attributes\\": {
-                      \\"src\\": \\"https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 31
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 32
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
-                    \\"attributes\\": {
-                      \\"src\\": \\"https://cdn.jsdelivr.net/npm/react-is@16.13.1/umd/react-is.production.min.js\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 33
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 34
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
-                    \\"attributes\\": {
-                      \\"src\\": \\"https://cdn.jsdelivr.net/npm/styled-components@5.0.1/dist/styled-components.min.js\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 35
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 36
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
-                    \\"attributes\\": {
-                      \\"src\\": \\"https://cdn.jsdelivr.net/npm/babel-standalone@6/babel.min.js\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 37
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 38
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
-                    \\"attributes\\": {
-                      \\"type\\": \\"text/babel\\"
-                    },
-                    \\"childNodes\\": [
+                              \\"type\\": \\"text\\",
+                              \\"class\\": \\"rr-ignore\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 22
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\" \\",
+                            \\"id\\": 23
+                          }
+                        ],
+                        \\"id\\": 20
+                      },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 40
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 24
                       }
                     ],
-                    \\"id\\": 39
+                    \\"id\\": 18
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\\\n    \\",
-                    \\"id\\": 41
+                    \\"id\\": 25
                   },
                   {
                     \\"type\\": 2,
@@ -7139,18 +5688,18 @@ exports[`react-styled-components 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 43
+                        \\"id\\": 27
                       }
                     ],
-                    \\"id\\": 42
+                    \\"id\\": 26
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 44
+                    \\"id\\": 28
                   }
                 ],
-                \\"id\\": 20
+                \\"id\\": 16
               }
             ],
             \\"id\\": 3
@@ -7168,61 +5717,14 @@ exports[`react-styled-components 1`] = `
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 2,
-      \\"type\\": 1,
-      \\"id\\": 26
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 0,
-      \\"id\\": 26
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 2,
-      \\"id\\": 26
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 8,
-      \\"id\\": 17,
-      \\"adds\\": [
-        {
-          \\"rule\\": \\".pqkNE{font-size:1.5em;text-align:center;color:pink;}\\",
-          \\"index\\": 2
-        }
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [
-        {
-          \\"id\\": 26,
-          \\"attributes\\": {
-            \\"class\\": \\"sc-AxjAm pqkNE toggle\\",
-            \\"color\\": \\"pink\\"
-          }
-        }
-      ],
-      \\"removes\\": [],
-      \\"adds\\": []
+      \\"type\\": 5,
+      \\"id\\": 22
     }
   }
 ]"
 `;
 
-exports[`select2 1`] = `
+exports[`record integration tests should not record input values if maskAllInputs is enabled 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -7267,7 +5769,7 @@ exports[`select2 1`] = `
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 5
                   },
                   {
@@ -7281,7 +5783,7 @@ exports[`select2 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 7
                   },
                   {
@@ -7296,7 +5798,7 @@ exports[`select2 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 9
                   },
                   {
@@ -7311,7 +5813,7 @@ exports[`select2 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 11
                   },
                   {
@@ -7321,7 +5823,7 @@ exports[`select2 1`] = `
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"Select2 3.5\\",
+                        \\"textContent\\": \\"form fields\\",
                         \\"id\\": 13
                       }
                     ],
@@ -7331,29 +5833,14 @@ exports[`select2 1`] = `
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 14
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"link\\",
-                    \\"attributes\\": {
-                      \\"rel\\": \\"stylesheet\\",
-                      \\"href\\": \\"https://cdn.jsdelivr.net/npm/select2@3.5.1/select2.css\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 15
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\",
-                    \\"id\\": 16
                   }
                 ],
                 \\"id\\": 4
               },
               {
                 \\"type\\": 3,
-                \\"textContent\\": \\"\\\\n\\",
-                \\"id\\": 17
+                \\"textContent\\": \\"\\\\n\\\\n  \\",
+                \\"id\\": 15
               },
               {
                 \\"type\\": 2,
@@ -7362,354 +5849,871 @@ exports[`select2 1`] = `
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 19
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 17
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"blockquote\\",
+                    \\"tagName\\": \\"form\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    Select2 is a jQuery replacement for select boxes.\\\\n    \\",
-                        \\"id\\": 21
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 19
                       },
                       {
                         \\"type\\": 2,
-                        \\"tagName\\": \\"br\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [],
-                        \\"id\\": 22
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"text\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 21
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"input\\",
+                            \\"attributes\\": {
+                              \\"type\\": \\"text\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 22
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 23
+                          }
+                        ],
+                        \\"id\\": 20
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    In the 3.5 version it use a quite complicated DOM generation strategy which is a good battle-test for rrweb's recorder.\\\\n  \\",
-                        \\"id\\": 23
-                      }
-                    ],
-                    \\"id\\": 20
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 24
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"div\\",
-                    \\"attributes\\": {
-                      \\"class\\": \\"select2-container\\",
-                      \\"id\\": \\"s2id_el\\"
-                    },
-                    \\"childNodes\\": [
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 24
+                      },
                       {
                         \\"type\\": 2,
-                        \\"tagName\\": \\"a\\",
-                        \\"attributes\\": {
-                          \\"href\\": \\"javascript:void(0)\\",
-                          \\"class\\": \\"select2-choice\\",
-                          \\"tabindex\\": \\"-1\\"
-                        },
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {},
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"   \\",
-                            \\"id\\": 27
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 26
                           },
                           {
                             \\"type\\": 2,
-                            \\"tagName\\": \\"span\\",
+                            \\"tagName\\": \\"input\\",
                             \\"attributes\\": {
-                              \\"class\\": \\"select2-chosen\\",
-                              \\"id\\": \\"select2-chosen-1\\"
+                              \\"type\\": \\"radio\\",
+                              \\"name\\": \\"toggle\\",
+                              \\"value\\": \\"on\\"
                             },
-                            \\"childNodes\\": [
-                              {
-                                \\"type\\": 3,
-                                \\"textContent\\": \\"A\\",
-                                \\"id\\": 29
-                              }
-                            ],
+                            \\"childNodes\\": [],
+                            \\"id\\": 27
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
                             \\"id\\": 28
+                          }
+                        ],
+                        \\"id\\": 25
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 29
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 31
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"input\\",
+                            \\"attributes\\": {
+                              \\"type\\": \\"radio\\",
+                              \\"name\\": \\"toggle\\",
+                              \\"value\\": \\"off\\",
+                              \\"checked\\": true
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 32
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 33
+                          }
+                        ],
+                        \\"id\\": 30
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 34
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"checkbox\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 36
                           },
                           {
                             \\"type\\": 2,
-                            \\"tagName\\": \\"abbr\\",
+                            \\"tagName\\": \\"input\\",
                             \\"attributes\\": {
-                              \\"class\\": \\"select2-search-choice-close\\"
+                              \\"type\\": \\"checkbox\\"
                             },
                             \\"childNodes\\": [],
-                            \\"id\\": 30
+                            \\"id\\": 37
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"   \\",
-                            \\"id\\": 31
-                          },
-                          {
-                            \\"type\\": 2,
-                            \\"tagName\\": \\"span\\",
-                            \\"attributes\\": {
-                              \\"class\\": \\"select2-arrow\\",
-                              \\"role\\": \\"presentation\\"
-                            },
-                            \\"childNodes\\": [
-                              {
-                                \\"type\\": 2,
-                                \\"tagName\\": \\"b\\",
-                                \\"attributes\\": {
-                                  \\"role\\": \\"presentation\\"
-                                },
-                                \\"childNodes\\": [],
-                                \\"id\\": 33
-                              }
-                            ],
-                            \\"id\\": 32
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 38
                           }
                         ],
-                        \\"id\\": 26
+                        \\"id\\": 35
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 39
                       },
                       {
                         \\"type\\": 2,
                         \\"tagName\\": \\"label\\",
                         \\"attributes\\": {
-                          \\"for\\": \\"s2id_autogen1\\",
-                          \\"class\\": \\"select2-offscreen\\"
+                          \\"for\\": \\"textarea\\"
                         },
-                        \\"childNodes\\": [],
-                        \\"id\\": 34
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 41
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"textarea\\",
+                            \\"attributes\\": {
+                              \\"name\\": \\"\\",
+                              \\"id\\": \\"\\",
+                              \\"cols\\": \\"30\\",
+                              \\"rows\\": \\"10\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"id\\": 42
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 43
+                          }
+                        ],
+                        \\"id\\": 40
                       },
                       {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"input\\",
-                        \\"attributes\\": {
-                          \\"class\\": \\"select2-focusser select2-offscreen\\",
-                          \\"type\\": \\"text\\",
-                          \\"aria-haspopup\\": \\"true\\",
-                          \\"role\\": \\"button\\",
-                          \\"aria-labelledby\\": \\"select2-chosen-1\\",
-                          \\"id\\": \\"s2id_autogen1\\"
-                        },
-                        \\"childNodes\\": [],
-                        \\"id\\": 35
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 44
                       },
                       {
                         \\"type\\": 2,
-                        \\"tagName\\": \\"div\\",
+                        \\"tagName\\": \\"label\\",
                         \\"attributes\\": {
-                          \\"class\\": \\"select2-drop select2-display-none select2-with-searchbox\\"
+                          \\"for\\": \\"select\\"
                         },
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"   \\",
-                            \\"id\\": 37
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 46
                           },
                           {
                             \\"type\\": 2,
-                            \\"tagName\\": \\"div\\",
+                            \\"tagName\\": \\"select\\",
                             \\"attributes\\": {
-                              \\"class\\": \\"select2-search\\"
+                              \\"name\\": \\"\\",
+                              \\"id\\": \\"\\",
+                              \\"value\\": \\"*\\"
                             },
                             \\"childNodes\\": [
                               {
                                 \\"type\\": 3,
-                                \\"textContent\\": \\"       \\",
-                                \\"id\\": 39
+                                \\"textContent\\": \\"\\\\n          \\",
+                                \\"id\\": 48
                               },
                               {
                                 \\"type\\": 2,
-                                \\"tagName\\": \\"label\\",
+                                \\"tagName\\": \\"option\\",
                                 \\"attributes\\": {
-                                  \\"for\\": \\"s2id_autogen1_search\\",
-                                  \\"class\\": \\"select2-offscreen\\"
+                                  \\"value\\": \\"1\\",
+                                  \\"selected\\": true
                                 },
-                                \\"childNodes\\": [],
-                                \\"id\\": 40
+                                \\"childNodes\\": [
+                                  {
+                                    \\"type\\": 3,
+                                    \\"textContent\\": \\"1\\",
+                                    \\"id\\": 50
+                                  }
+                                ],
+                                \\"id\\": 49
                               },
                               {
                                 \\"type\\": 3,
-                                \\"textContent\\": \\"       \\",
-                                \\"id\\": 41
+                                \\"textContent\\": \\"\\\\n          \\",
+                                \\"id\\": 51
                               },
                               {
                                 \\"type\\": 2,
-                                \\"tagName\\": \\"input\\",
+                                \\"tagName\\": \\"option\\",
                                 \\"attributes\\": {
-                                  \\"type\\": \\"text\\",
-                                  \\"autocomplete\\": \\"off\\",
-                                  \\"autocorrect\\": \\"off\\",
-                                  \\"autocapitalize\\": \\"off\\",
-                                  \\"spellcheck\\": \\"false\\",
-                                  \\"class\\": \\"select2-input\\",
-                                  \\"role\\": \\"combobox\\",
-                                  \\"aria-expanded\\": \\"true\\",
-                                  \\"aria-autocomplete\\": \\"list\\",
-                                  \\"aria-owns\\": \\"select2-results-1\\",
-                                  \\"id\\": \\"s2id_autogen1_search\\",
-                                  \\"placeholder\\": \\"\\"
+                                  \\"value\\": \\"2\\"
                                 },
-                                \\"childNodes\\": [],
-                                \\"id\\": 42
+                                \\"childNodes\\": [
+                                  {
+                                    \\"type\\": 3,
+                                    \\"textContent\\": \\"2\\",
+                                    \\"id\\": 53
+                                  }
+                                ],
+                                \\"id\\": 52
                               },
                               {
                                 \\"type\\": 3,
-                                \\"textContent\\": \\"   \\",
-                                \\"id\\": 43
+                                \\"textContent\\": \\"\\\\n        \\",
+                                \\"id\\": 54
                               }
                             ],
-                            \\"id\\": 38
+                            \\"id\\": 47
                           },
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"   \\",
-                            \\"id\\": 44
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 55
+                          }
+                        ],
+                        \\"id\\": 45
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 56
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"label\\",
+                        \\"attributes\\": {
+                          \\"for\\": \\"password\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 58
                           },
                           {
                             \\"type\\": 2,
-                            \\"tagName\\": \\"ul\\",
+                            \\"tagName\\": \\"input\\",
                             \\"attributes\\": {
-                              \\"class\\": \\"select2-results\\",
-                              \\"role\\": \\"listbox\\",
-                              \\"id\\": \\"select2-results-1\\"
+                              \\"type\\": \\"password\\"
                             },
-                            \\"childNodes\\": [
-                              {
-                                \\"type\\": 3,
-                                \\"textContent\\": \\"   \\",
-                                \\"id\\": 46
-                              }
-                            ],
-                            \\"id\\": 45
+                            \\"childNodes\\": [],
+                            \\"id\\": 59
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 60
                           }
                         ],
-                        \\"id\\": 36
+                        \\"id\\": 57
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 61
                       }
                     ],
-                    \\"id\\": 25
+                    \\"id\\": 18
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
+                    \\"id\\": 62
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 64
+                      }
+                    ],
+                    \\"id\\": 63
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 65
+                  }
+                ],
+                \\"id\\": 16
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*\\",
+      \\"isChecked\\": false,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"**\\",
+      \\"isChecked\\": false,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"***\\",
+      \\"isChecked\\": false,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"****\\",
+      \\"isChecked\\": false,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 1,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 6,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 0,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 2,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"on\\",
+      \\"isChecked\\": true,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"off\\",
+      \\"isChecked\\": false,
+      \\"id\\": 32
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 1,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 6,
+      \\"id\\": 27
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 0,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 2,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"on\\",
+      \\"isChecked\\": true,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 6,
+      \\"id\\": 37
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*\\",
+      \\"isChecked\\": false,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"**\\",
+      \\"isChecked\\": false,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"***\\",
+      \\"isChecked\\": false,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"****\\",
+      \\"isChecked\\": false,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*****\\",
+      \\"isChecked\\": false,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"******\\",
+      \\"isChecked\\": false,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*******\\",
+      \\"isChecked\\": false,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"********\\",
+      \\"isChecked\\": false,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 6,
+      \\"id\\": 59
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"**\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"***\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"****\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*****\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"******\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*******\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"********\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*********\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"**********\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"***********\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"************\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*************\\",
+      \\"isChecked\\": false,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*\\",
+      \\"isChecked\\": false,
+      \\"id\\": 47
+    }
+  }
+]"
+`;
+
+exports[`record integration tests should record DOM node movement 1 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 1,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 6
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"select\\",
-                    \\"attributes\\": {
-                      \\"id\\": \\"el\\",
-                      \\"tabindex\\": \\"-1\\",
-                      \\"title\\": \\"\\",
-                      \\"style\\": \\"display: none;\\",
-                      \\"value\\": \\"a\\"
-                    },
+                    \\"tagName\\": \\"div\\",
+                    \\"attributes\\": {},
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 48
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 8
                       },
                       {
                         \\"type\\": 2,
-                        \\"tagName\\": \\"option\\",
-                        \\"attributes\\": {
-                          \\"value\\": \\"a\\",
-                          \\"selected\\": true
-                        },
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"A\\",
-                            \\"id\\": 50
-                          }
-                        ],
-                        \\"id\\": 49
+                        \\"tagName\\": \\"p\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [],
+                        \\"id\\": 9
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 51
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"option\\",
-                        \\"attributes\\": {
-                          \\"value\\": \\"b\\"
-                        },
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"B\\",
-                            \\"id\\": 53
-                          }
-                        ],
-                        \\"id\\": 52
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n  \\",
-                        \\"id\\": 54
+                        \\"id\\": 10
                       }
                     ],
-                    \\"id\\": 47
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 55
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
-                    \\"attributes\\": {
-                      \\"src\\": \\"https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 56
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 57
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
-                    \\"attributes\\": {
-                      \\"src\\": \\"https://cdn.jsdelivr.net/npm/select2@3.5.2-browserify/select2.min.js\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 58
+                    \\"id\\": 7
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 59
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 11
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
+                    \\"tagName\\": \\"span\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 61
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 13
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"i\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 15
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"b\\",
+                            \\"attributes\\": {},
+                            \\"childNodes\\": [
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"1\\",
+                                \\"id\\": 17
+                              }
+                            ],
+                            \\"id\\": 16
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 18
+                          }
+                        ],
+                        \\"id\\": 14
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 19
                       }
                     ],
-                    \\"id\\": 60
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"span\\",
-                    \\"attributes\\": {
-                      \\"role\\": \\"status\\",
-                      \\"aria-live\\": \\"polite\\",
-                      \\"class\\": \\"select2-hidden-accessible\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 62
+                    \\"id\\": 12
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 63
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
+                    \\"id\\": 20
                   },
                   {
                     \\"type\\": 2,
@@ -7719,18 +6723,18 @@ exports[`select2 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 65
+                        \\"id\\": 22
                       }
                     ],
-                    \\"id\\": 64
+                    \\"id\\": 21
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\",
-                    \\"id\\": 66
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 23
                   }
                 ],
-                \\"id\\": 18
+                \\"id\\": 5
               }
             ],
             \\"id\\": 3
@@ -7744,469 +6748,1008 @@ exports[`select2 1`] = `
       }
     }
   },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 1,
-      \\"id\\": 26
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 5,
-      \\"id\\": 42
-    }
-  },
   {
     \\"type\\": 3,
     \\"data\\": {
       \\"source\\": 0,
       \\"texts\\": [],
-      \\"attributes\\": [
-        {
-          \\"id\\": 25,
-          \\"attributes\\": {
-            \\"class\\": \\"select2-container select2-dropdown-open select2-container-active\\"
-          }
-        },
-        {
-          \\"id\\": 36,
-          \\"attributes\\": {
-            \\"id\\": \\"select2-drop\\",
-            \\"style\\": {
-              \\"left\\": \\"Npx\\",
-              \\"width\\": \\"Npx\\",
-              \\"top\\": \\"Npx\\",
-              \\"bottom\\": \\"auto\\",
-              \\"display\\": \\"block\\",
-              \\"position\\": false,
-              \\"visibility\\": false
-            },
-            \\"class\\": \\"select2-drop select2-display-none select2-with-searchbox select2-drop-active\\"
-          }
-        },
-        {
-          \\"id\\": 70,
-          \\"attributes\\": {
-            \\"style\\": {
-              \\"display\\": false
-            }
-          }
-        },
-        {
-          \\"id\\": 42,
-          \\"attributes\\": {
-            \\"class\\": \\"select2-input select2-focused\\",
-            \\"aria-activedescendant\\": \\"select2-result-label-2\\"
-          }
-        },
-        {
-          \\"id\\": 35,
-          \\"attributes\\": {
-            \\"disabled\\": \\"\\"
-          }
-        },
-        {
-          \\"id\\": 72,
-          \\"attributes\\": {
-            \\"class\\": \\"select2-results-dept-0 select2-result select2-result-selectable select2-highlighted\\"
-          }
-        }
-      ],
+      \\"attributes\\": [],
       \\"removes\\": [
         {
-          \\"parentId\\": 25,
-          \\"id\\": 26
-        },
-        {
-          \\"parentId\\": 25,
-          \\"id\\": 36
-        },
-        {
-          \\"parentId\\": 45,
-          \\"id\\": 46
+          \\"parentId\\": 5,
+          \\"id\\": 12
         }
       ],
       \\"adds\\": [
         {
-          \\"parentId\\": 25,
-          \\"nextId\\": 34,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"a\\",
-            \\"attributes\\": {
-              \\"href\\": \\"javascript:void(0)\\",
-              \\"class\\": \\"select2-choice\\",
-              \\"tabindex\\": \\"-1\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 26
-          }
-        },
-        {
-          \\"parentId\\": 26,
-          \\"nextId\\": 28,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"   \\",
-            \\"id\\": 27
-          }
-        },
-        {
-          \\"parentId\\": 26,
-          \\"nextId\\": 30,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"span\\",
-            \\"attributes\\": {
-              \\"class\\": \\"select2-chosen\\",
-              \\"id\\": \\"select2-chosen-1\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 28
-          }
-        },
-        {
-          \\"parentId\\": 28,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"A\\",
-            \\"id\\": 29
-          }
-        },
-        {
-          \\"parentId\\": 26,
-          \\"nextId\\": 31,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"abbr\\",
-            \\"attributes\\": {
-              \\"class\\": \\"select2-search-choice-close\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 30
-          }
-        },
-        {
-          \\"parentId\\": 26,
-          \\"nextId\\": 32,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"   \\",
-            \\"id\\": 31
-          }
-        },
-        {
-          \\"parentId\\": 26,
+          \\"parentId\\": 7,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"span\\",
-            \\"attributes\\": {
-              \\"class\\": \\"select2-arrow\\",
-              \\"role\\": \\"presentation\\"
-            },
+            \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 32
+            \\"id\\": 12
           }
         },
         {
-          \\"parentId\\": 32,
-          \\"nextId\\": null,
+          \\"parentId\\": 12,
+          \\"nextId\\": 14,
           \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"b\\",
-            \\"attributes\\": {
-              \\"role\\": \\"presentation\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 33
+            \\"type\\": 3,
+            \\"textContent\\": \\"\\\\n      \\",
+            \\"id\\": 13
           }
         },
         {
-          \\"parentId\\": 18,
-          \\"nextId\\": null,
+          \\"parentId\\": 12,
+          \\"nextId\\": 19,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"div\\",
-            \\"attributes\\": {
-              \\"class\\": \\"select2-drop select2-display-none select2-with-searchbox select2-drop-active\\",
-              \\"id\\": \\"select2-drop\\",
-              \\"style\\": \\"left: Npx; width: Npx; top: Npx; bottom: auto; display: block;\\"
-            },
+            \\"tagName\\": \\"i\\",
+            \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 36
+            \\"id\\": 14
           }
         },
         {
-          \\"parentId\\": 36,
-          \\"nextId\\": 38,
+          \\"parentId\\": 14,
+          \\"nextId\\": 16,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"   \\",
-            \\"id\\": 37
+            \\"textContent\\": \\"\\\\n        \\",
+            \\"id\\": 15
           }
         },
         {
-          \\"parentId\\": 36,
-          \\"nextId\\": 44,
+          \\"parentId\\": 14,
+          \\"nextId\\": 18,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"div\\",
-            \\"attributes\\": {
-              \\"class\\": \\"select2-search\\"
-            },
+            \\"tagName\\": \\"b\\",
+            \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 38
+            \\"id\\": 16
           }
         },
         {
-          \\"parentId\\": 38,
-          \\"nextId\\": 40,
+          \\"parentId\\": 16,
+          \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"       \\",
-            \\"id\\": 39
+            \\"textContent\\": \\"1\\",
+            \\"id\\": 17
           }
         },
         {
-          \\"parentId\\": 38,
-          \\"nextId\\": 41,
+          \\"parentId\\": 14,
+          \\"nextId\\": null,
           \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"label\\",
-            \\"attributes\\": {
-              \\"for\\": \\"s2id_autogen1_search\\",
-              \\"class\\": \\"select2-offscreen\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 40
+            \\"type\\": 3,
+            \\"textContent\\": \\"\\\\n      \\",
+            \\"id\\": 18
           }
         },
         {
-          \\"parentId\\": 38,
-          \\"nextId\\": 42,
+          \\"parentId\\": 12,
+          \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"       \\",
-            \\"id\\": 41
+            \\"textContent\\": \\"\\\\n    \\",
+            \\"id\\": 19
           }
-        },
-        {
-          \\"parentId\\": 38,
-          \\"nextId\\": 43,
-          \\"node\\": {
+        }
+      ]
+    }
+  }
+]"
+`;
+
+exports[`record integration tests should record DOM node movement 2 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 1,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
             \\"type\\": 2,
-            \\"tagName\\": \\"input\\",
-            \\"attributes\\": {
-              \\"type\\": \\"text\\",
-              \\"autocomplete\\": \\"off\\",
-              \\"autocorrect\\": \\"off\\",
-              \\"autocapitalize\\": \\"off\\",
-              \\"spellcheck\\": \\"false\\",
-              \\"class\\": \\"select2-input select2-focused\\",
-              \\"role\\": \\"combobox\\",
-              \\"aria-expanded\\": \\"true\\",
-              \\"aria-autocomplete\\": \\"list\\",
-              \\"aria-owns\\": \\"select2-results-1\\",
-              \\"id\\": \\"s2id_autogen1_search\\",
-              \\"placeholder\\": \\"\\",
-              \\"aria-activedescendant\\": \\"select2-result-label-2\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 42
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"div\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 8
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"p\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [],
+                        \\"id\\": 9
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 10
+                      }
+                    ],
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 11
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"span\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 13
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"i\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n        \\",
+                            \\"id\\": 15
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"b\\",
+                            \\"attributes\\": {},
+                            \\"childNodes\\": [
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"1\\",
+                                \\"id\\": 17
+                              }
+                            ],
+                            \\"id\\": 16
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"id\\": 18
+                          }
+                        ],
+                        \\"id\\": 14
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 19
+                      }
+                    ],
+                    \\"id\\": 12
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
+                    \\"id\\": 20
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 22
+                      }
+                    ],
+                    \\"id\\": 21
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 23
+                  }
+                ],
+                \\"id\\": 5
+              }
+            ],
+            \\"id\\": 3
           }
-        },
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [
         {
-          \\"parentId\\": 38,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"   \\",
-            \\"id\\": 43
-          }
-        },
+          \\"parentId\\": 5,
+          \\"id\\": 12
+        }
+      ],
+      \\"adds\\": [
         {
-          \\"parentId\\": 36,
-          \\"nextId\\": 45,
+          \\"parentId\\": 12,
+          \\"nextId\\": 14,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"   \\",
-            \\"id\\": 44
+            \\"textContent\\": \\"\\\\n      \\",
+            \\"id\\": 13
           }
         },
         {
-          \\"parentId\\": 36,
-          \\"nextId\\": null,
+          \\"parentId\\": 12,
+          \\"nextId\\": 19,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"ul\\",
-            \\"attributes\\": {
-              \\"class\\": \\"select2-results\\",
-              \\"role\\": \\"listbox\\",
-              \\"id\\": \\"select2-results-1\\"
-            },
+            \\"tagName\\": \\"i\\",
+            \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 45
+            \\"id\\": 14
           }
         },
         {
-          \\"parentId\\": 45,
-          \\"nextId\\": null,
+          \\"parentId\\": 14,
+          \\"nextId\\": 16,
           \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"li\\",
-            \\"attributes\\": {
-              \\"class\\": \\"select2-results-dept-0 select2-result select2-result-selectable\\",
-              \\"role\\": \\"presentation\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 67
+            \\"type\\": 3,
+            \\"textContent\\": \\"\\\\n        \\",
+            \\"id\\": 15
           }
         },
         {
-          \\"parentId\\": 67,
-          \\"nextId\\": null,
+          \\"parentId\\": 14,
+          \\"nextId\\": 18,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"div\\",
-            \\"attributes\\": {
-              \\"class\\": \\"select2-result-label\\",
-              \\"id\\": \\"select2-result-label-3\\",
-              \\"role\\": \\"option\\"
-            },
+            \\"tagName\\": \\"b\\",
+            \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 68
+            \\"id\\": 16
           }
         },
         {
-          \\"parentId\\": 68,
+          \\"parentId\\": 16,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"B\\",
-            \\"id\\": 69
-          }
-        },
-        {
-          \\"parentId\\": 18,
-          \\"nextId\\": 36,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"div\\",
-            \\"attributes\\": {
-              \\"id\\": \\"select2-drop-mask\\",
-              \\"class\\": \\"select2-drop-mask\\",
-              \\"style\\": \\"\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 70
+            \\"textContent\\": \\"1\\",
+            \\"id\\": 17
           }
         },
         {
-          \\"parentId\\": 62,
+          \\"parentId\\": 14,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
-            \\"textContent\\": \\"2 results are available, use up and down arrow keys to navigate.\\",
-            \\"id\\": 71
+            \\"textContent\\": \\"\\\\n      \\",
+            \\"id\\": 18
           }
         },
         {
-          \\"parentId\\": 45,
-          \\"nextId\\": 67,
+          \\"parentId\\": 12,
+          \\"nextId\\": null,
           \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"li\\",
-            \\"attributes\\": {
-              \\"class\\": \\"select2-results-dept-0 select2-result select2-result-selectable select2-highlighted\\",
-              \\"role\\": \\"presentation\\"
-            },
-            \\"childNodes\\": [],
-            \\"id\\": 72
+            \\"type\\": 3,
+            \\"textContent\\": \\"\\\\n    \\",
+            \\"id\\": 19
           }
         },
         {
-          \\"parentId\\": 72,
+          \\"parentId\\": 5,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"div\\",
-            \\"attributes\\": {
-              \\"class\\": \\"select2-result-label\\",
-              \\"id\\": \\"select2-result-label-2\\",
-              \\"role\\": \\"option\\"
-            },
+            \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 73
+            \\"id\\": 24
           }
         },
         {
-          \\"parentId\\": 73,
+          \\"parentId\\": 24,
           \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"A\\",
-            \\"id\\": 74
-          }
-        },
-        {
-          \\"parentId\\": 73,
-          \\"nextId\\": 74,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"span\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"id\\": 12
+          }
+        }
+      ]
+    }
+  }
+]"
+`;
+
+exports[`record integration tests should record canvas mutations 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 1,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
             \\"attributes\\": {
-              \\"class\\": \\"select2-match\\"
+              \\"lang\\": \\"en\\"
             },
-            \\"childNodes\\": [],
-            \\"id\\": 75
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 5
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"charset\\": \\"UTF-8\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"name\\": \\"viewport\\",
+                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 8
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"title\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"canvas\\",
+                        \\"id\\": 11
+                      }
+                    ],
+                    \\"id\\": 10
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 12
+                  }
+                ],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 3,
+                \\"textContent\\": \\"\\\\n  \\",
+                \\"id\\": 13
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 15
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"canvas\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"myCanvas\\",
+                      \\"width\\": \\"200\\",
+                      \\"height\\": \\"100\\",
+                      \\"style\\": \\"border: 1px solid #000000;\\",
+                      \\"rr_dataURL\\": \\"LOOKS LIKE WE COULD NOT GET STABLE BASE64 FROM SAME IMAGE.\\"
+                    },
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 17
+                      }
+                    ],
+                    \\"id\\": 16
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 18
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 20
+                      }
+                    ],
+                    \\"id\\": 19
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
+                    \\"id\\": 21
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 23
+                      }
+                    ],
+                    \\"id\\": 22
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 24
+                  }
+                ],
+                \\"id\\": 14
+              }
+            ],
+            \\"id\\": 3
           }
-        },
-        {
-          \\"parentId\\": 68,
-          \\"nextId\\": 69,
-          \\"node\\": {
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 16,
+      \\"property\\": \\"moveTo\\",
+      \\"args\\": [
+        0,
+        0
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 16,
+      \\"property\\": \\"lineTo\\",
+      \\"args\\": [
+        200,
+        100
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 16,
+      \\"property\\": \\"stroke\\",
+      \\"args\\": []
+    }
+  }
+]"
+`;
+
+exports[`record integration tests should record console messages 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 1,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
             \\"type\\": 2,
-            \\"tagName\\": \\"span\\",
+            \\"tagName\\": \\"html\\",
             \\"attributes\\": {
-              \\"class\\": \\"select2-match\\"
+              \\"lang\\": \\"en\\"
             },
-            \\"childNodes\\": [],
-            \\"id\\": 76
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 5
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"charset\\": \\"UTF-8\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"name\\": \\"viewport\\",
+                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 8
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"http-equiv\\": \\"X-UA-Compatible\\",
+                      \\"content\\": \\"ie=edge\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 10
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 11
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"title\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"Log record\\",
+                        \\"id\\": 13
+                      }
+                    ],
+                    \\"id\\": 12
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 14
+                  }
+                ],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 3,
+                \\"textContent\\": \\"\\\\n  \\",
+                \\"id\\": 15
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 17
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 19
+                      }
+                    ],
+                    \\"id\\": 18
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 20
+                  }
+                ],
+                \\"id\\": 16
+              }
+            ],
+            \\"id\\": 3
           }
-        }
-      ]
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"\\",
-      \\"isChecked\\": false,
-      \\"id\\": 42
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"assert\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:2:37\\"
+        ],
+        \\"payload\\": [
+          \\"true\\",
+          \\"\\\\\\"assert\\\\\\"\\"
+        ]
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"\\",
-      \\"isChecked\\": false,
-      \\"id\\": 35
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"count\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:3:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"count\\\\\\"\\"
+        ]
+      }
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 2,
-      \\"type\\": 0,
-      \\"id\\": 70
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"countReset\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:4:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"count\\\\\\"\\"
+        ]
+      }
+    }
+  },
+  {
+    \\"type\\": 6,
+    \\"data\\": {
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"debug\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:5:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"debug\\\\\\"\\"
+        ]
+      }
+    }
+  },
+  {
+    \\"type\\": 6,
+    \\"data\\": {
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"dir\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:6:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"dir\\\\\\"\\"
+        ]
+      }
+    }
+  },
+  {
+    \\"type\\": 6,
+    \\"data\\": {
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"dirxml\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:7:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"dirxml\\\\\\"\\"
+        ]
+      }
+    }
+  },
+  {
+    \\"type\\": 6,
+    \\"data\\": {
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"group\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:8:37\\"
+        ],
+        \\"payload\\": []
+      }
+    }
+  },
+  {
+    \\"type\\": 6,
+    \\"data\\": {
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"groupCollapsed\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:9:37\\"
+        ],
+        \\"payload\\": []
+      }
+    }
+  },
+  {
+    \\"type\\": 6,
+    \\"data\\": {
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"info\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:10:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"info\\\\\\"\\"
+        ]
+      }
+    }
+  },
+  {
+    \\"type\\": 6,
+    \\"data\\": {
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"log\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:11:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"log\\\\\\"\\"
+        ]
+      }
+    }
+  },
+  {
+    \\"type\\": 6,
+    \\"data\\": {
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"table\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:12:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"table\\\\\\"\\"
+        ]
+      }
+    }
+  },
+  {
+    \\"type\\": 6,
+    \\"data\\": {
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"time\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:13:37\\"
+        ],
+        \\"payload\\": []
+      }
+    }
+  },
+  {
+    \\"type\\": 6,
+    \\"data\\": {
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"timeEnd\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:14:37\\"
+        ],
+        \\"payload\\": []
+      }
+    }
+  },
+  {
+    \\"type\\": 6,
+    \\"data\\": {
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"timeLog\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:15:37\\"
+        ],
+        \\"payload\\": []
+      }
+    }
+  },
+  {
+    \\"type\\": 6,
+    \\"data\\": {
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"trace\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:16:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"trace\\\\\\"\\"
+        ]
+      }
+    }
+  },
+  {
+    \\"type\\": 6,
+    \\"data\\": {
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"warn\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:17:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"warn\\\\\\"\\"
+        ]
+      }
+    }
+  },
+  {
+    \\"type\\": 6,
+    \\"data\\": {
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"clear\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:18:37\\"
+        ],
+        \\"payload\\": []
+      }
     }
   },
   {
@@ -8214,208 +7757,88 @@ exports[`select2 1`] = `
     \\"data\\": {
       \\"source\\": 0,
       \\"texts\\": [],
-      \\"attributes\\": [
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
         {
-          \\"id\\": 36,
-          \\"attributes\\": {
-            \\"style\\": {
-              \\"color\\": [
-                \\"black\\",
-                \\"important\\"
-              ]
-            }
+          \\"parentId\\": 16,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"iframe\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"id\\": 21
           }
         }
-      ],
-      \\"removes\\": [],
-      \\"adds\\": []
-    }
-  }
-]"
-`;
-
-exports[`serialize-before-record 1`] = `
-"[
-  {
-    \\"type\\": 0,
-    \\"data\\": {}
-  },
-  {
-    \\"type\\": 1,
-    \\"data\\": {}
-  },
-  {
-    \\"type\\": 4,
-    \\"data\\": {
-      \\"href\\": \\"about:blank\\",
-      \\"width\\": 1920,
-      \\"height\\": 1080
+      ]
     }
   },
   {
-    \\"type\\": 2,
+    \\"type\\": 3,
     \\"data\\": {
-      \\"node\\": {
-        \\"type\\": 0,
-        \\"childNodes\\": [
-          {
-            \\"type\\": 1,
-            \\"name\\": \\"html\\",
-            \\"publicId\\": \\"\\",
-            \\"systemId\\": \\"\\",
-            \\"id\\": 2
-          },
-          {
-            \\"type\\": 2,
-            \\"tagName\\": \\"html\\",
-            \\"attributes\\": {},
+      \\"source\\": 0,
+      \\"adds\\": [
+        {
+          \\"parentId\\": 21,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 0,
             \\"childNodes\\": [
               {
                 \\"type\\": 2,
-                \\"tagName\\": \\"head\\",
-                \\"attributes\\": {},
-                \\"childNodes\\": [],
-                \\"id\\": 4
-              },
-              {
-                \\"type\\": 2,
-                \\"tagName\\": \\"body\\",
+                \\"tagName\\": \\"html\\",
                 \\"attributes\\": {},
                 \\"childNodes\\": [
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 6
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"p\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"mutation observer\\",
-                        \\"id\\": 8
-                      }
-                    ],
-                    \\"id\\": 7
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 9
-                  },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"ul\\",
+                    \\"tagName\\": \\"head\\",
                     \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 11
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"li\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [],
-                        \\"id\\": 12
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n  \\",
-                        \\"id\\": 13
-                      }
-                    ],
-                    \\"id\\": 10
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 14
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 22,
+                    \\"id\\": 24
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"script\\",
+                    \\"tagName\\": \\"body\\",
                     \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 16
-                      }
-                    ],
-                    \\"id\\": 15
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\",
-                    \\"id\\": 17
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 22,
+                    \\"id\\": 25
                   }
                 ],
-                \\"id\\": 5
+                \\"rootId\\": 22,
+                \\"id\\": 23
               }
             ],
-            \\"id\\": 3
+            \\"compatMode\\": \\"BackCompat\\",
+            \\"id\\": 22
           }
-        ],
-        \\"id\\": 1
-      },
-      \\"initialOffset\\": {
-        \\"left\\": 0,
-        \\"top\\": 0
-      }
+        }
+      ],
+      \\"removes\\": [],
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"isAttachIframe\\": true
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 6,
     \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"removes\\": [],
-      \\"adds\\": [
-        {
-          \\"parentId\\": 10,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"li\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
-            \\"id\\": 18
-          }
-        },
-        {
-          \\"parentId\\": 10,
-          \\"nextId\\": 18,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"li\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
-            \\"id\\": 19
-          }
-        },
-        {
-          \\"parentId\\": 10,
-          \\"nextId\\": 19,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"li\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
-            \\"id\\": 20
-          }
-        }
-      ]
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"log\\",
+        \\"trace\\": [],
+        \\"payload\\": [
+          \\"\\\\\\"from iframe\\\\\\"\\"
+        ]
+      }
     }
   }
 ]"
 `;
 
-exports[`shadow-dom 1`] = `
+exports[`record integration tests should record dynamic CSS changes 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -8492,6 +7915,21 @@ exports[`shadow-dom 1`] = `
                     \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 9
                   },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"http-equiv\\": \\"X-UA-Compatible\\",
+                      \\"content\\": \\"ie=edge\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 10
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 11
+                  },
                   {
                     \\"type\\": 2,
                     \\"tagName\\": \\"title\\",
@@ -8499,35 +7937,47 @@ exports[`shadow-dom 1`] = `
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"Shadow DOM Observer\\",
-                        \\"id\\": 11
+                        \\"textContent\\": \\"react styled components\\",
+                        \\"id\\": 13
+                      }
+                    ],
+                    \\"id\\": 12
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 14
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 16
                       }
                     ],
-                    \\"id\\": 10
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 12
+                    \\"id\\": 15
                   },
                   {
                     \\"type\\": 2,
                     \\"tagName\\": \\"style\\",
-                    \\"attributes\\": {},
+                    \\"attributes\\": {
+                      \\"data-styled\\": \\"active\\",
+                      \\"data-styled-version\\": \\"5.0.1\\",
+                      \\"_cssText\\": \\".ixzlRK { font-size: 1.5em; text-align: center; color: palevioletred; }.eOXmez { font-size: 1.5em; text-align: center; color: rebeccapurple; }.bJCmFu { padding: 4em; background: papayawhip; }\\"
+                    },
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      .my-element {\\\\n        margin: 0 0 1rem 0;\\\\n      }\\\\n      iframe {\\\\n        border: 0;\\\\n        width: 100%;\\\\n        padding: 0;\\\\n      }\\\\n\\\\n      body {\\\\n        max-width: 400px;\\\\n        margin: 1rem auto;\\\\n        padding: 0 1rem;\\\\n        font-family: 'comic sans ms';\\\\n      }\\\\n    \\",
+                        \\"textContent\\": \\"\\",
                         \\"isStyle\\": true,
-                        \\"id\\": 14
+                        \\"id\\": 18
                       }
                     ],
-                    \\"id\\": 13
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n  \\",
-                    \\"id\\": 15
+                    \\"id\\": 17
                   }
                 ],
                 \\"id\\": 4
@@ -8535,7 +7985,7 @@ exports[`shadow-dom 1`] = `
               {
                 \\"type\\": 3,
                 \\"textContent\\": \\"\\\\n  \\",
-                \\"id\\": 16
+                \\"id\\": 19
               },
               {
                 \\"type\\": 2,
@@ -8545,117 +7995,115 @@ exports[`shadow-dom 1`] = `
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
-                    \\"id\\": 18
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"p\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat odit\\\\n      officiis necessitatibus laborum asperiores et adipisci dolores corporis,\\\\n      vero distinctio voluptas, suscipit commodi architecto, aliquam fugit.\\\\n      Nesciunt labore reiciendis blanditiis!\\\\n    \\",
-                        \\"id\\": 20
-                      }
-                    ],
-                    \\"id\\": 19
-                  },
-                  {
-                    \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\\\n    \\",
                     \\"id\\": 21
                   },
                   {
                     \\"type\\": 2,
                     \\"tagName\\": \\"div\\",
                     \\"attributes\\": {
-                      \\"class\\": \\"my-element\\"
+                      \\"id\\": \\"app\\"
                     },
                     \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      \\",
-                        \\"id\\": 23
-                      },
-                      {
-                        \\"type\\": 5,
-                        \\"textContent\\": \\" Also could be a \\\\n    <custom-element />\\\\n  \\",
-                        \\"id\\": 24
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n    \\",
-                        \\"id\\": 25
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n  \\",
-                        \\"id\\": 26,
-                        \\"isShadow\\": true
-                      },
                       {
                         \\"type\\": 2,
-                        \\"tagName\\": \\"style\\",
-                        \\"attributes\\": {},
+                        \\"tagName\\": \\"section\\",
+                        \\"attributes\\": {
+                          \\"class\\": \\"sc-AxirZ bJCmFu\\"
+                        },
                         \\"childNodes\\": [
                           {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    body { /* for fallback iframe */\\\\n      margin: 0;\\\\n    }\\\\n    p { \\\\n      border: 1px solid #ccc;\\\\n      padding: 1rem;\\\\n      color: red;\\\\n      font-family: sans-serif;\\\\n    }\\\\n  \\",
-                            \\"isStyle\\": true,
-                            \\"id\\": 28
-                          }
-                        ],
-                        \\"id\\": 27,
-                        \\"isShadow\\": true
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n\\\\n  \\",
-                        \\"id\\": 29,
-                        \\"isShadow\\": true
-                      },
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"p\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"h1\\",
+                            \\"attributes\\": {
+                              \\"class\\": \\"sc-AxjAm ixzlRK\\"
+                            },
+                            \\"childNodes\\": [
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"Hello World!\\",
+                                \\"id\\": 25
+                              }
+                            ],
+                            \\"id\\": 24
+                          },
                           {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"Element with Shadow DOM\\",
-                            \\"id\\": 31
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"h1\\",
+                            \\"attributes\\": {
+                              \\"class\\": \\"sc-AxjAm eOXmez toggle\\",
+                              \\"color\\": \\"rebeccapurple\\"
+                            },
+                            \\"childNodes\\": [
+                              {
+                                \\"type\\": 3,
+                                \\"textContent\\": \\"Hello World!\\",
+                                \\"id\\": 27
+                              }
+                            ],
+                            \\"id\\": 26
                           }
                         ],
-                        \\"id\\": 30,
-                        \\"isShadow\\": true
-                      },
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n\\",
-                        \\"id\\": 32,
-                        \\"isShadow\\": true
+                        \\"id\\": 23
                       }
                     ],
-                    \\"id\\": 22,
-                    \\"isShadowHost\\": true
+                    \\"id\\": 22
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\\\n    \\",
-                    \\"id\\": 33
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 28
                   },
                   {
                     \\"type\\": 2,
-                    \\"tagName\\": \\"p\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat odit\\\\n      officiis necessitatibus laborum asperiores et adipisci dolores corporis,\\\\n      vero distinctio voluptas, suscipit commodi architecto, aliquam fugit.\\\\n      Nesciunt labore reiciendis blanditiis!\\\\n    \\",
-                        \\"id\\": 35
-                      }
-                    ],
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {
+                      \\"src\\": \\"https://cdn.jsdelivr.net/npm/react@16/umd/react.production.min.js\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 29
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 30
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {
+                      \\"src\\": \\"https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 31
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 32
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {
+                      \\"src\\": \\"https://cdn.jsdelivr.net/npm/react-is@16.13.1/umd/react-is.production.min.js\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 33
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
                     \\"id\\": 34
                   },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {
+                      \\"src\\": \\"https://cdn.jsdelivr.net/npm/styled-components@5.0.1/dist/styled-components.min.js\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 35
+                  },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\",
@@ -8664,20 +8112,36 @@ exports[`shadow-dom 1`] = `
                   {
                     \\"type\\": 2,
                     \\"tagName\\": \\"script\\",
-                    \\"attributes\\": {},
+                    \\"attributes\\": {
+                      \\"src\\": \\"https://cdn.jsdelivr.net/npm/babel-standalone@6/babel.min.js\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 37
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 38
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {
+                      \\"type\\": \\"text/babel\\"
+                    },
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 38
+                        \\"id\\": 40
                       }
                     ],
-                    \\"id\\": 37
+                    \\"id\\": 39
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n  \\\\n    \\",
-                    \\"id\\": 39
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
+                    \\"id\\": 41
                   },
                   {
                     \\"type\\": 2,
@@ -8687,18 +8151,18 @@ exports[`shadow-dom 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 41
+                        \\"id\\": 43
                       }
                     ],
-                    \\"id\\": 40
+                    \\"id\\": 42
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
-                    \\"id\\": 42
+                    \\"id\\": 44
                   }
                 ],
-                \\"id\\": 17
+                \\"id\\": 20
               }
             ],
             \\"id\\": 3
@@ -8707,88 +8171,44 @@ exports[`shadow-dom 1`] = `
         \\"id\\": 1
       },
       \\"initialOffset\\": {
-        \\"left\\": 0,
-        \\"top\\": 0
-      }
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"removes\\": [],
-      \\"adds\\": [
-        {
-          \\"parentId\\": 22,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"p\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
-            \\"id\\": 43,
-            \\"isShadow\\": true
-          }
-        }
-      ]
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"removes\\": [],
-      \\"adds\\": [
-        {
-          \\"parentId\\": 43,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"p\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
-            \\"id\\": 44
-          }
-        }
-      ]
+      \\"source\\": 2,
+      \\"type\\": 1,
+      \\"id\\": 26
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"removes\\": [
-        {
-          \\"parentId\\": 22,
-          \\"id\\": 30,
-          \\"isShadow\\": true
-        }
-      ],
-      \\"adds\\": []
+      \\"source\\": 2,
+      \\"type\\": 0,
+      \\"id\\": 26
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"removes\\": [],
+      \\"source\\": 2,
+      \\"type\\": 2,
+      \\"id\\": 26
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 8,
+      \\"id\\": 17,
       \\"adds\\": [
         {
-          \\"parentId\\": 44,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"hi\\",
-            \\"id\\": 45
-          }
+          \\"rule\\": \\".pqkNE{font-size:1.5em;text-align:center;color:pink;}\\",
+          \\"index\\": 2
         }
       ]
     }
@@ -8798,30 +8218,23 @@ exports[`shadow-dom 1`] = `
     \\"data\\": {
       \\"source\\": 0,
       \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"removes\\": [
-        {
-          \\"parentId\\": 44,
-          \\"id\\": 45
-        }
-      ],
-      \\"adds\\": [
+      \\"attributes\\": [
         {
-          \\"parentId\\": 44,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"123\\",
-            \\"id\\": 46
+          \\"id\\": 26,
+          \\"attributes\\": {
+            \\"class\\": \\"sc-AxjAm pqkNE toggle\\",
+            \\"color\\": \\"pink\\"
           }
         }
-      ]
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
     }
   }
 ]"
 `;
 
-exports[`userTriggered 1`] = `
+exports[`record integration tests should record input userTriggered values if userTriggeredOnInput is enabled 1`] = `
 "[
   {
     \\"type\\": 0,
@@ -9614,91 +9027,678 @@ exports[`userTriggered 1`] = `
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"textar\\",
-      \\"isChecked\\": false,
-      \\"userTriggered\\": true,
-      \\"id\\": 42
+      \\"source\\": 5,
+      \\"text\\": \\"textar\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textare\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea \\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea t\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea te\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea tes\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"textarea test\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": true,
+      \\"id\\": 42
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"1\\",
+      \\"isChecked\\": false,
+      \\"userTriggered\\": false,
+      \\"id\\": 47
+    }
+  }
+]"
+`;
+
+exports[`record integration tests should record shadow DOM 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 1,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {
+              \\"lang\\": \\"en\\"
+            },
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 5
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"charset\\": \\"UTF-8\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"name\\": \\"viewport\\",
+                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 8
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"title\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"Shadow DOM Observer\\",
+                        \\"id\\": 11
+                      }
+                    ],
+                    \\"id\\": 10
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 12
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"style\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      .my-element {\\\\n        margin: 0 0 1rem 0;\\\\n      }\\\\n      iframe {\\\\n        border: 0;\\\\n        width: 100%;\\\\n        padding: 0;\\\\n      }\\\\n\\\\n      body {\\\\n        max-width: 400px;\\\\n        margin: 1rem auto;\\\\n        padding: 0 1rem;\\\\n        font-family: 'comic sans ms';\\\\n      }\\\\n    \\",
+                        \\"isStyle\\": true,
+                        \\"id\\": 14
+                      }
+                    ],
+                    \\"id\\": 13
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 15
+                  }
+                ],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 3,
+                \\"textContent\\": \\"\\\\n  \\",
+                \\"id\\": 16
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 18
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"p\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat odit\\\\n      officiis necessitatibus laborum asperiores et adipisci dolores corporis,\\\\n      vero distinctio voluptas, suscipit commodi architecto, aliquam fugit.\\\\n      Nesciunt labore reiciendis blanditiis!\\\\n    \\",
+                        \\"id\\": 20
+                      }
+                    ],
+                    \\"id\\": 19
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"id\\": 21
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"div\\",
+                    \\"attributes\\": {
+                      \\"class\\": \\"my-element\\"
+                    },
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      \\",
+                        \\"id\\": 23
+                      },
+                      {
+                        \\"type\\": 5,
+                        \\"textContent\\": \\" Also could be a \\\\n    <custom-element />\\\\n  \\",
+                        \\"id\\": 24
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 25
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n  \\",
+                        \\"id\\": 26,
+                        \\"isShadow\\": true
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"style\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n    body { /* for fallback iframe */\\\\n      margin: 0;\\\\n    }\\\\n    p { \\\\n      border: 1px solid #ccc;\\\\n      padding: 1rem;\\\\n      color: red;\\\\n      font-family: sans-serif;\\\\n    }\\\\n  \\",
+                            \\"isStyle\\": true,
+                            \\"id\\": 28
+                          }
+                        ],
+                        \\"id\\": 27,
+                        \\"isShadow\\": true
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n\\\\n  \\",
+                        \\"id\\": 29,
+                        \\"isShadow\\": true
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"p\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"Element with Shadow DOM\\",
+                            \\"id\\": 31
+                          }
+                        ],
+                        \\"id\\": 30,
+                        \\"isShadow\\": true
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n\\",
+                        \\"id\\": 32,
+                        \\"isShadow\\": true
+                      }
+                    ],
+                    \\"id\\": 22,
+                    \\"isShadowHost\\": true
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"id\\": 33
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"p\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat odit\\\\n      officiis necessitatibus laborum asperiores et adipisci dolores corporis,\\\\n      vero distinctio voluptas, suscipit commodi architecto, aliquam fugit.\\\\n      Nesciunt labore reiciendis blanditiis!\\\\n    \\",
+                        \\"id\\": 35
+                      }
+                    ],
+                    \\"id\\": 34
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 36
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 38
+                      }
+                    ],
+                    \\"id\\": 37
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n  \\\\n    \\",
+                    \\"id\\": 39
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 41
+                      }
+                    ],
+                    \\"id\\": 40
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 42
+                  }
+                ],
+                \\"id\\": 17
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 22,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"p\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"id\\": 43,
+            \\"isShadow\\": true
+          }
+        }
+      ]
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"textare\\",
-      \\"isChecked\\": false,
-      \\"userTriggered\\": true,
-      \\"id\\": 42
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 43,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"p\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"id\\": 44
+          }
+        }
+      ]
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"textarea\\",
-      \\"isChecked\\": false,
-      \\"userTriggered\\": true,
-      \\"id\\": 42
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [
+        {
+          \\"parentId\\": 22,
+          \\"id\\": 30,
+          \\"isShadow\\": true
+        }
+      ],
+      \\"adds\\": []
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"textarea \\",
-      \\"isChecked\\": false,
-      \\"userTriggered\\": true,
-      \\"id\\": 42
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 44,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"hi\\",
+            \\"id\\": 45
+          }
+        }
+      ]
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"textarea t\\",
-      \\"isChecked\\": false,
-      \\"userTriggered\\": true,
-      \\"id\\": 42
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [
+        {
+          \\"parentId\\": 44,
+          \\"id\\": 45
+        }
+      ],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 44,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"123\\",
+            \\"id\\": 46
+          }
+        }
+      ]
     }
+  }
+]"
+`;
+
+exports[`record integration tests will serialize node before record 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
   },
   {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"textarea te\\",
-      \\"isChecked\\": false,
-      \\"userTriggered\\": true,
-      \\"id\\": 42
-    }
+    \\"type\\": 1,
+    \\"data\\": {}
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 4,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"textarea tes\\",
-      \\"isChecked\\": false,
-      \\"userTriggered\\": true,
-      \\"id\\": 42
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
     }
   },
   {
-    \\"type\\": 3,
+    \\"type\\": 2,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"textarea test\\",
-      \\"isChecked\\": false,
-      \\"userTriggered\\": true,
-      \\"id\\": 42
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"p\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"mutation observer\\",
+                        \\"id\\": 8
+                      }
+                    ],
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"ul\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 11
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"li\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [],
+                        \\"id\\": 12
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n  \\",
+                        \\"id\\": 13
+                      }
+                    ],
+                    \\"id\\": 10
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"id\\": 14
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 16
+                      }
+                    ],
+                    \\"id\\": 15
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\",
+                    \\"id\\": 17
+                  }
+                ],
+                \\"id\\": 5
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
     }
   },
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 5,
-      \\"text\\": \\"1\\",
-      \\"isChecked\\": false,
-      \\"userTriggered\\": false,
-      \\"id\\": 47
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 10,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"li\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"id\\": 18
+          }
+        },
+        {
+          \\"parentId\\": 10,
+          \\"nextId\\": 18,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"li\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"id\\": 19
+          }
+        },
+        {
+          \\"parentId\\": 10,
+          \\"nextId\\": 19,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"li\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"id\\": 20
+          }
+        }
+      ]
     }
   }
 ]"
diff --git a/packages/rrweb/test/__snapshots__/packer.test.ts.snap b/packages/rrweb/test/__snapshots__/packer.test.ts.snap
index e41538da08ec73e47796ce4263fb25c4ba05f683..2323b5a7af71cfb60b1d657ae462fe6ac4556885 100644
GIT binary patch
delta 24
fcmbQnxRh~%6<=~<o<c!la<)QhS!!O%M9WwJWaJ2N

delta 9
QcmZ3=IE`_F)kM!201#ILJ^%m!

diff --git a/packages/rrweb/test/__snapshots__/record.test.ts.snap b/packages/rrweb/test/__snapshots__/record.test.ts.snap
index 2da23bf644..011db6fc59 100644
--- a/packages/rrweb/test/__snapshots__/record.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/record.test.ts.snap
@@ -1,6 +1,100 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`async-checkout 1`] = `
+exports[`record can add custom event 1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"input\\",
+                    \\"attributes\\": {
+                      \\"type\\": \\"text\\",
+                      \\"size\\": \\"40\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
+                    \\"id\\": 8
+                  }
+                ],
+                \\"id\\": 5
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 5,
+    \\"data\\": {
+      \\"tag\\": \\"tag1\\",
+      \\"payload\\": 1
+    }
+  },
+  {
+    \\"type\\": 5,
+    \\"data\\": {
+      \\"tag\\": \\"tag2\\",
+      \\"payload\\": {
+        \\"a\\": \\"b\\"
+      }
+    }
+  }
+]"
+`;
+
+exports[`record captures nested stylesheet rules 1`] = `
 "[
   {
     \\"type\\": 4,
@@ -81,34 +175,20 @@ exports[`async-checkout 1`] = `
       \\"source\\": 0,
       \\"texts\\": [],
       \\"attributes\\": [],
-      \\"removes\\": [
-        {
-          \\"parentId\\": 5,
-          \\"id\\": 7
-        }
-      ],
+      \\"removes\\": [],
       \\"adds\\": [
         {
-          \\"parentId\\": 5,
+          \\"parentId\\": 4,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"p\\",
-            \\"attributes\\": {},
+            \\"tagName\\": \\"style\\",
+            \\"attributes\\": {
+              \\"_cssText\\": \\"@media  {\\\\n  body { background: rgb(0, 0, 0); }\\\\n}\\"
+            },
             \\"childNodes\\": [],
             \\"id\\": 9
           }
-        },
-        {
-          \\"parentId\\": 9,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 2,
-            \\"tagName\\": \\"span\\",
-            \\"attributes\\": {},
-            \\"childNodes\\": [],
-            \\"id\\": 10
-          }
         }
       ]
     }
@@ -116,23 +196,55 @@ exports[`async-checkout 1`] = `
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 0,
-      \\"texts\\": [],
-      \\"attributes\\": [],
-      \\"removes\\": [],
+      \\"source\\": 8,
+      \\"id\\": 9,
       \\"adds\\": [
         {
-          \\"parentId\\": 10,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"test\\",
-            \\"id\\": 11
-          }
+          \\"rule\\": \\"body { color: #fff; }\\",
+          \\"index\\": [
+            0,
+            0
+          ]
         }
       ]
     }
   },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 8,
+      \\"id\\": 9,
+      \\"removes\\": [
+        {
+          \\"index\\": [
+            0,
+            0
+          ]
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 8,
+      \\"id\\": 9,
+      \\"adds\\": [
+        {
+          \\"rule\\": \\"body { color: #ccc; }\\",
+          \\"index\\": [
+            0,
+            0
+          ]
+        }
+      ]
+    }
+  }
+]"
+`;
+
+exports[`record captures style property changes 1`] = `
+"[
   {
     \\"type\\": 4,
     \\"data\\": {
@@ -176,31 +288,20 @@ exports[`async-checkout 1`] = `
                     \\"textContent\\": \\"\\\\n          \\",
                     \\"id\\": 6
                   },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"input\\",
+                    \\"attributes\\": {
+                      \\"type\\": \\"text\\",
+                      \\"size\\": \\"40\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 7
+                  },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
                     \\"id\\": 8
-                  },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"p\\",
-                    \\"attributes\\": {},
-                    \\"childNodes\\": [
-                      {
-                        \\"type\\": 2,
-                        \\"tagName\\": \\"span\\",
-                        \\"attributes\\": {},
-                        \\"childNodes\\": [
-                          {
-                            \\"type\\": 3,
-                            \\"textContent\\": \\"test\\",
-                            \\"id\\": 11
-                          }
-                        ],
-                        \\"id\\": 10
-                      }
-                    ],
-                    \\"id\\": 9
                   }
                 ],
                 \\"id\\": 5
@@ -223,40 +324,55 @@ exports[`async-checkout 1`] = `
       \\"source\\": 0,
       \\"texts\\": [],
       \\"attributes\\": [],
-      \\"removes\\": [
-        {
-          \\"parentId\\": 9,
-          \\"id\\": 10
-        }
-      ],
+      \\"removes\\": [],
       \\"adds\\": [
         {
-          \\"parentId\\": 5,
+          \\"parentId\\": 4,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"span\\",
-            \\"attributes\\": {},
+            \\"tagName\\": \\"style\\",
+            \\"attributes\\": {
+              \\"_cssText\\": \\"body { background: rgb(0, 0, 0); }\\"
+            },
             \\"childNodes\\": [],
-            \\"id\\": 10
-          }
-        },
-        {
-          \\"parentId\\": 10,
-          \\"nextId\\": null,
-          \\"node\\": {
-            \\"type\\": 3,
-            \\"textContent\\": \\"test\\",
-            \\"id\\": 11
+            \\"id\\": 9
           }
         }
       ]
     }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 13,
+      \\"id\\": 9,
+      \\"set\\": {
+        \\"property\\": \\"color\\",
+        \\"value\\": \\"green\\"
+      },
+      \\"index\\": [
+        0
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 13,
+      \\"id\\": 9,
+      \\"remove\\": {
+        \\"property\\": \\"background\\"
+      },
+      \\"index\\": [
+        0
+      ]
+    }
   }
 ]"
 `;
 
-exports[`custom-event 1`] = `
+exports[`record captures stylesheet rules 1`] = `
 "[
   {
     \\"type\\": 4,
@@ -332,25 +448,69 @@ exports[`custom-event 1`] = `
     }
   },
   {
-    \\"type\\": 5,
+    \\"type\\": 3,
     \\"data\\": {
-      \\"tag\\": \\"tag1\\",
-      \\"payload\\": 1
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 4,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"style\\",
+            \\"attributes\\": {
+              \\"_cssText\\": \\"body { background: rgb(0, 0, 0); }\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 9
+          }
+        }
+      ]
     }
   },
   {
-    \\"type\\": 5,
+    \\"type\\": 3,
     \\"data\\": {
-      \\"tag\\": \\"tag2\\",
-      \\"payload\\": {
-        \\"a\\": \\"b\\"
-      }
+      \\"source\\": 8,
+      \\"id\\": 9,
+      \\"adds\\": [
+        {
+          \\"rule\\": \\"body { color: #fff; }\\"
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 8,
+      \\"id\\": 9,
+      \\"removes\\": [
+        {
+          \\"index\\": 0
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 8,
+      \\"id\\": 9,
+      \\"adds\\": [
+        {
+          \\"rule\\": \\"body { color: #ccc; }\\"
+        }
+      ]
     }
   }
 ]"
 `;
 
-exports[`iframe-stylesheet-mutations 1`] = `
+exports[`record iframes captures stylesheet mutations in iframes 1`] = `
 "[
   {
     \\"type\\": 4,
@@ -585,7 +745,7 @@ exports[`iframe-stylesheet-mutations 1`] = `
 ]"
 `;
 
-exports[`nested-stylesheet-rules 1`] = `
+exports[`record is safe to checkout during async callbacks 1`] = `
 "[
   {
     \\"type\\": 4,
@@ -666,51 +826,34 @@ exports[`nested-stylesheet-rules 1`] = `
       \\"source\\": 0,
       \\"texts\\": [],
       \\"attributes\\": [],
-      \\"removes\\": [],
+      \\"removes\\": [
+        {
+          \\"parentId\\": 5,
+          \\"id\\": 7
+        }
+      ],
       \\"adds\\": [
         {
-          \\"parentId\\": 4,
+          \\"parentId\\": 5,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"style\\",
-            \\"attributes\\": {
-              \\"_cssText\\": \\"@media  {\\\\n  body { background: rgb(0, 0, 0); }\\\\n}\\"
-            },
+            \\"tagName\\": \\"p\\",
+            \\"attributes\\": {},
             \\"childNodes\\": [],
             \\"id\\": 9
           }
-        }
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 8,
-      \\"id\\": 9,
-      \\"adds\\": [
-        {
-          \\"rule\\": \\"body { color: #fff; }\\",
-          \\"index\\": [
-            0,
-            0
-          ]
-        }
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 8,
-      \\"id\\": 9,
-      \\"removes\\": [
+        },
         {
-          \\"index\\": [
-            0,
-            0
-          ]
+          \\"parentId\\": 9,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"span\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"id\\": 10
+          }
         }
       ]
     }
@@ -718,24 +861,23 @@ exports[`nested-stylesheet-rules 1`] = `
   {
     \\"type\\": 3,
     \\"data\\": {
-      \\"source\\": 8,
-      \\"id\\": 9,
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
       \\"adds\\": [
         {
-          \\"rule\\": \\"body { color: #ccc; }\\",
-          \\"index\\": [
-            0,
-            0
-          ]
+          \\"parentId\\": 10,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"test\\",
+            \\"id\\": 11
+          }
         }
       ]
     }
-  }
-]"
-`;
-
-exports[`stylesheet-properties 1`] = `
-"[
+  },
   {
     \\"type\\": 4,
     \\"data\\": {
@@ -779,20 +921,31 @@ exports[`stylesheet-properties 1`] = `
                     \\"textContent\\": \\"\\\\n          \\",
                     \\"id\\": 6
                   },
-                  {
-                    \\"type\\": 2,
-                    \\"tagName\\": \\"input\\",
-                    \\"attributes\\": {
-                      \\"type\\": \\"text\\",
-                      \\"size\\": \\"40\\"
-                    },
-                    \\"childNodes\\": [],
-                    \\"id\\": 7
-                  },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
                     \\"id\\": 8
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"p\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"span\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"test\\",
+                            \\"id\\": 11
+                          }
+                        ],
+                        \\"id\\": 10
+                      }
+                    ],
+                    \\"id\\": 9
                   }
                 ],
                 \\"id\\": 5
@@ -815,55 +968,40 @@ exports[`stylesheet-properties 1`] = `
       \\"source\\": 0,
       \\"texts\\": [],
       \\"attributes\\": [],
-      \\"removes\\": [],
+      \\"removes\\": [
+        {
+          \\"parentId\\": 9,
+          \\"id\\": 10
+        }
+      ],
       \\"adds\\": [
         {
-          \\"parentId\\": 4,
+          \\"parentId\\": 5,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
-            \\"tagName\\": \\"style\\",
-            \\"attributes\\": {
-              \\"_cssText\\": \\"body { background: rgb(0, 0, 0); }\\"
-            },
+            \\"tagName\\": \\"span\\",
+            \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 9
+            \\"id\\": 10
+          }
+        },
+        {
+          \\"parentId\\": 10,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"test\\",
+            \\"id\\": 11
           }
         }
       ]
     }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 13,
-      \\"id\\": 9,
-      \\"set\\": {
-        \\"property\\": \\"color\\",
-        \\"value\\": \\"green\\"
-      },
-      \\"index\\": [
-        0
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 13,
-      \\"id\\": 9,
-      \\"remove\\": {
-        \\"property\\": \\"background\\"
-      },
-      \\"index\\": [
-        0
-      ]
-    }
   }
 ]"
 `;
 
-exports[`stylesheet-rules 1`] = `
+exports[`record without CSSGroupingRule support captures nested stylesheet rules 1`] = `
 "[
   {
     \\"type\\": 4,
@@ -953,7 +1091,7 @@ exports[`stylesheet-rules 1`] = `
             \\"type\\": 2,
             \\"tagName\\": \\"style\\",
             \\"attributes\\": {
-              \\"_cssText\\": \\"body { background: rgb(0, 0, 0); }\\"
+              \\"_cssText\\": \\"@media  {\\\\n  body { background: rgb(0, 0, 0); }\\\\n}\\"
             },
             \\"childNodes\\": [],
             \\"id\\": 9
@@ -969,7 +1107,11 @@ exports[`stylesheet-rules 1`] = `
       \\"id\\": 9,
       \\"adds\\": [
         {
-          \\"rule\\": \\"body { color: #fff; }\\"
+          \\"rule\\": \\"body { color: #fff; }\\",
+          \\"index\\": [
+            0,
+            0
+          ]
         }
       ]
     }
@@ -981,7 +1123,10 @@ exports[`stylesheet-rules 1`] = `
       \\"id\\": 9,
       \\"removes\\": [
         {
-          \\"index\\": 0
+          \\"index\\": [
+            0,
+            0
+          ]
         }
       ]
     }
@@ -993,7 +1138,11 @@ exports[`stylesheet-rules 1`] = `
       \\"id\\": 9,
       \\"adds\\": [
         {
-          \\"rule\\": \\"body { color: #ccc; }\\"
+          \\"rule\\": \\"body { color: #ccc; }\\",
+          \\"index\\": [
+            0,
+            0
+          ]
         }
       ]
     }
diff --git a/packages/rrweb/test/__snapshots__/replayer.test.ts.snap b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
index 31f96f22e2..25e10679ab 100644
--- a/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ordering-events 1`] = `
-"file-frame-1
+exports[`replayer can fast forward past StyleSheetRule changes on virtual elements 1`] = `
+"file-frame-4
 <html>
   <head>
     <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
@@ -27,15 +27,18 @@ exports[`ordering-events 1`] = `
 </html>
 
 
-file-frame-2
+file-frame-5
 <!DOCTYPE html>
 <html lang=\\"en\\">
   <head>
     <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
     <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-2\\" />
+    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-3\\" />
   </head>
   <body>
-    <span>Final - correct</span>
+    <a class=\\"css-added-at-1000-deleted-at-2500\\">string</a>
   </body>
 </html>
 
@@ -48,10 +51,47 @@ file-cid-0
 noscript { display: none !important; }
 
 html.rrweb-paused * { animation-play-state: paused !important; }
+
+
+file-cid-1
+@charset \\"utf-8\\";
+
+.c011xx { padding: 1.3125rem; flex: 0 0 auto; width: 100%; }
+
+
+file-cid-2
+@charset \\"utf-8\\";
+
+.c01x { opacity: 1; transform: translateX(0px); }
+
+.css-added-at-400 { border: 1px solid blue; }
+
+
+file-cid-3
+@charset \\"utf-8\\";
+
+.css-1uxxxx3 { position: fixed; top: 0px; right: 0px; left: 4rem; z-index: 15; flex-shrink: 0; height: 0.25rem; overflow: hidden; background-color: rgb(17, 171, 209); }
+
+.css-1c9xxxx { height: 0.25rem; background-color: rgb(190, 232, 242); opacity: 0; transition: opacity 0.5s ease 0s; }
+
+.css-added-at-1000-deleted-at-2500 { display: flex; flex-direction: column; min-width: 60rem; min-height: 100vh; color: blue; }
+
+.css-lsxxx { padding-left: 4rem; }
 "
 `;
 
-exports[`style-sheet-remove-events-play-at-2500 1`] = `
+exports[`replayer can fast forward past StyleSheetRule deletion on virtual elements 1`] = `
+"file-frame-0
+<html>
+  <head>
+    <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
+  </head>
+  <body></body>
+</html>
+"
+`;
+
+exports[`replayer can handle removing style elements 1`] = `
 "file-frame-1
 <html>
   <head>
@@ -99,79 +139,8 @@ html.rrweb-paused * { animation-play-state: paused !important; }
 "
 `;
 
-exports[`style-sheet-rule-events-pause-at-2500 1`] = `
-"file-frame-4
-<html>
-<head>
-  <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
-  <title></title>
-</head>
-<body>
-  <div class=\\"replayer-wrapper\\">
-    <div class=\\"replayer-mouse\\"></div>
-    <canvas class=\\"replayer-mouse-tail\\" width=\\"1000\\" height=\\"800\\" style=
-    \\"display: inherit;\\"></canvas><iframe sandbox=\\"allow-same-origin\\" scrolling=
-    \\"no\\" width=\\"1000\\" height=\\"800\\" style=
-    \\"display: inherit; pointer-events: none;\\"></iframe>
-  </div>
-</body>
-</html>
-
-
-file-frame-5
-<!DOCTYPE html>
-<html lang=\\"en\\">
-<head>
-  <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
-  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\">
-  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\">
-  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-2\\">
-  <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-3\\">
-  <title></title>
-</head>
-<body>
-  <a class=\\"css-added-at-1000-deleted-at-2500\\">string</a>
-</body>
-</html>
-
-
-file-cid-0
-@charset \\"utf-8\\";
-
-.rr-block { background: currentcolor; }
-
-noscript { display: none !important; }
-
-html.rrweb-paused * { animation-play-state: paused !important; }
-
-
-file-cid-1
-@charset \\"utf-8\\";
-
-.c011xx { padding: 1.3125rem; flex: 0 0 auto; width: 100%; }
-
-
-file-cid-2
-@charset \\"utf-8\\";
-
-.c01x { opacity: 1; transform: translateX(0px); }
-
-.css-added-at-400 { border: 1px solid blue; }
-
-
-file-cid-3
-@charset \\"utf-8\\";
-
-.css-1uxxxx3 { position: fixed; top: 0px; right: 0px; left: 4rem; z-index: 15; flex-shrink: 0; height: 0.25rem; overflow: hidden; background-color: rgb(17, 171, 209); }
-
-.css-1c9xxxx { height: 0.25rem; background-color: rgb(190, 232, 242); opacity: 0; transition: opacity 0.5s ease 0s; }
-
-.css-lsxxx { padding-left: 4rem; }
-"
-`;
-
-exports[`style-sheet-rule-events-play-at-1500 1`] = `
-"file-frame-4
+exports[`replayer replays same timestamp events in correct order (with addAction) 1`] = `
+"file-frame-1
 <html>
   <head>
     <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
@@ -197,18 +166,15 @@ exports[`style-sheet-rule-events-play-at-1500 1`] = `
 </html>
 
 
-file-frame-5
+file-frame-2
 <!DOCTYPE html>
 <html lang=\\"en\\">
   <head>
     <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
     <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
-    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\" />
-    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-2\\" />
-    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-3\\" />
   </head>
   <body>
-    <a class=\\"css-added-at-1000-deleted-at-2500\\">string</a>
+    <span>Final - correct</span>
   </body>
 </html>
 
@@ -221,37 +187,11 @@ file-cid-0
 noscript { display: none !important; }
 
 html.rrweb-paused * { animation-play-state: paused !important; }
-
-
-file-cid-1
-@charset \\"utf-8\\";
-
-.c011xx { padding: 1.3125rem; flex: 0 0 auto; width: 100%; }
-
-
-file-cid-2
-@charset \\"utf-8\\";
-
-.c01x { opacity: 1; transform: translateX(0px); }
-
-.css-added-at-400 { border: 1px solid blue; }
-
-
-file-cid-3
-@charset \\"utf-8\\";
-
-.css-1uxxxx3 { position: fixed; top: 0px; right: 0px; left: 4rem; z-index: 15; flex-shrink: 0; height: 0.25rem; overflow: hidden; background-color: rgb(17, 171, 209); }
-
-.css-1c9xxxx { height: 0.25rem; background-color: rgb(190, 232, 242); opacity: 0; transition: opacity 0.5s ease 0s; }
-
-.css-added-at-1000-deleted-at-2500 { display: flex; flex-direction: column; min-width: 60rem; min-height: 100vh; color: blue; }
-
-.css-lsxxx { padding-left: 4rem; }
 "
 `;
 
-exports[`style-sheet-rule-events-play-at-2500 1`] = `
-"file-frame-4
+exports[`replayer replays same timestamp events in correct order 1`] = `
+"file-frame-1
 <html>
   <head>
     <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
@@ -277,18 +217,15 @@ exports[`style-sheet-rule-events-play-at-2500 1`] = `
 </html>
 
 
-file-frame-5
+file-frame-2
 <!DOCTYPE html>
 <html lang=\\"en\\">
   <head>
     <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
     <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
-    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\" />
-    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-2\\" />
-    <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-3\\" />
   </head>
   <body>
-    <a class=\\"css-added-at-1000-deleted-at-2500\\">string</a>
+    <span>Final - correct</span>
   </body>
 </html>
 
@@ -301,29 +238,5 @@ file-cid-0
 noscript { display: none !important; }
 
 html.rrweb-paused * { animation-play-state: paused !important; }
-
-
-file-cid-1
-@charset \\"utf-8\\";
-
-.c011xx { padding: 1.3125rem; flex: 0 0 auto; width: 100%; }
-
-
-file-cid-2
-@charset \\"utf-8\\";
-
-.c01x { opacity: 1; transform: translateX(0px); }
-
-.css-added-at-400 { border: 1px solid blue; }
-
-
-file-cid-3
-@charset \\"utf-8\\";
-
-.css-1uxxxx3 { position: fixed; top: 0px; right: 0px; left: 4rem; z-index: 15; flex-shrink: 0; height: 0.25rem; overflow: hidden; background-color: rgb(17, 171, 209); }
-
-.css-1c9xxxx { height: 0.25rem; background-color: rgb(190, 232, 242); opacity: 0; transition: opacity 0.5s ease 0s; }
-
-.css-lsxxx { padding-left: 4rem; }
 "
 `;
diff --git a/packages/rrweb/test/html/main.html b/packages/rrweb/test/html/main.html
index a37d9bea35..9363103a49 100644
--- a/packages/rrweb/test/html/main.html
+++ b/packages/rrweb/test/html/main.html
@@ -20,6 +20,6 @@
     iframe2.src = './html/frame1.html';
     setTimeout(() => {
       document.body.appendChild(iframe2);
-    }, 10);
+    }, 100);
   </script>
 </html>
diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
index 7a9c77950e..acddfdf039 100644
--- a/packages/rrweb/test/integration.test.ts
+++ b/packages/rrweb/test/integration.test.ts
@@ -4,12 +4,10 @@ import * as http from 'http';
 import * as url from 'url';
 import * as puppeteer from 'puppeteer';
 import { assertSnapshot, launchPuppeteer } from './utils';
-import { Suite } from 'mocha';
-import { expect } from 'chai';
 import { recordOptions, eventWithTime, EventType } from '../src/types';
 import { visitSnapshot, NodeType } from 'rrweb-snapshot';
 
-interface ISuite extends Suite {
+interface ISuite {
   server: http.Server;
   code: string;
   browser: puppeteer.Browser;
@@ -19,7 +17,7 @@ interface IMimeType {
   [key: string]: string;
 }
 
-const server = () =>
+const startServer = () =>
   new Promise<http.Server>((resolve) => {
     const mimeType: IMimeType = {
       '.html': 'text/html',
@@ -53,7 +51,7 @@ const server = () =>
   });
 
 describe('record integration tests', function (this: ISuite) {
-  this.timeout(10_000);
+  jest.setTimeout(10_000);
 
   const getHtml = (
     fileName: string,
@@ -65,7 +63,7 @@ describe('record integration tests', function (this: ISuite) {
       '</body>',
       `
     <script>
-      ${this.code}
+      ${code}
       window.Date.now = () => new Date(Date.UTC(2018, 10, 15, 8)).valueOf();
       window.snapshots = [];
       rrweb.record({
@@ -86,9 +84,13 @@ describe('record integration tests', function (this: ISuite) {
     );
   };
 
-  before(async () => {
-    this.server = await server();
-    this.browser = await launchPuppeteer();
+  let server: ISuite['server'];
+  let code: ISuite['code'];
+  let browser: ISuite['browser'];
+
+  beforeAll(async () => {
+    server = await startServer();
+    browser = await launchPuppeteer();
 
     const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js');
     const pluginsCode = [
@@ -96,16 +98,16 @@ describe('record integration tests', function (this: ISuite) {
     ]
       .map((path) => fs.readFileSync(path, 'utf8'))
       .join();
-    this.code = fs.readFileSync(bundlePath, 'utf8') + pluginsCode;
+    code = fs.readFileSync(bundlePath, 'utf8') + pluginsCode;
   });
 
-  after(async () => {
-    await this.browser.close();
-    this.server.close();
+  afterAll(async () => {
+    await browser.close();
+    server.close();
   });
 
   it('can record form interactions', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'form.html'));
 
@@ -116,11 +118,11 @@ describe('record integration tests', function (this: ISuite) {
     await page.select('select', '1');
 
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'form');
+    assertSnapshot(snapshots);
   });
 
   it('can record childList mutations', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'mutation-observer.html'));
 
@@ -134,11 +136,11 @@ describe('record integration tests', function (this: ISuite) {
     });
 
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'child-list');
+    assertSnapshot(snapshots);
   });
 
   it('can record character data muatations', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'mutation-observer.html'));
 
@@ -154,11 +156,11 @@ describe('record integration tests', function (this: ISuite) {
     });
 
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'character-data');
+    assertSnapshot(snapshots);
   });
 
   it('can record attribute mutation', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'mutation-observer.html'));
 
@@ -172,11 +174,11 @@ describe('record integration tests', function (this: ISuite) {
     });
 
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'attributes');
+    assertSnapshot(snapshots);
   });
 
   it('can record node mutations', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'select2.html'), {
       waitUntil: 'networkidle0',
@@ -189,11 +191,11 @@ describe('record integration tests', function (this: ISuite) {
       'document.getElementById("select2-drop").setAttribute("style", document.getElementById("select2-drop").style.cssText + "color:black !important")',
     );
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'select2');
+    assertSnapshot(snapshots);
   });
 
   it('can freeze mutations', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'mutation-observer.html'));
 
@@ -215,22 +217,22 @@ describe('record integration tests', function (this: ISuite) {
       document.body.removeChild(ul);
     });
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'frozen');
+    assertSnapshot(snapshots);
   });
 
   it('should not record input events on ignored elements', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'ignore.html'));
 
     await page.type('.rr-ignore', 'secret');
 
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'ignore');
+    assertSnapshot(snapshots);
   });
 
   it('should not record input values if maskAllInputs is enabled', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(
       getHtml.call(this, 'form.html', { maskAllInputs: true }),
@@ -244,11 +246,11 @@ describe('record integration tests', function (this: ISuite) {
     await page.select('select', '1');
 
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'mask');
+    assertSnapshot(snapshots);
   });
 
   it('can use maskInputOptions to configure which type of inputs should be masked', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(
       getHtml.call(this, 'form.html', {
@@ -268,11 +270,11 @@ describe('record integration tests', function (this: ISuite) {
     await page.select('select', '1');
 
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'maskInputOptions');
+    assertSnapshot(snapshots);
   });
 
   it('should mask value attribute with maskInputOptions', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(
       getHtml.call(this, 'password.html', {
@@ -285,11 +287,11 @@ describe('record integration tests', function (this: ISuite) {
     await page.type('input[type="password"]', 'secr3t');
 
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'maskPassword');
+    assertSnapshot(snapshots);
   });
 
   it('should record input userTriggered values if userTriggeredOnInput is enabled', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(
       getHtml.call(this, 'form.html', { userTriggeredOnInput: true }),
@@ -303,11 +305,11 @@ describe('record integration tests', function (this: ISuite) {
     await page.select('select', '1');
 
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'userTriggered');
+    assertSnapshot(snapshots);
   });
 
   it('should not record blocked elements and its child nodes', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'block.html'));
 
@@ -316,11 +318,11 @@ describe('record integration tests', function (this: ISuite) {
     await page.click('#text');
 
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'block');
+    assertSnapshot(snapshots);
   });
 
   it('should not record blocked elements dynamically added', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'block.html'));
 
@@ -336,11 +338,11 @@ describe('record integration tests', function (this: ISuite) {
     });
 
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'block 2');
+    assertSnapshot(snapshots);
   });
 
   it('should record DOM node movement 1', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'move-node.html'));
 
@@ -354,11 +356,11 @@ describe('record integration tests', function (this: ISuite) {
       div.appendChild(span);
     });
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'move-node-1');
+    assertSnapshot(snapshots);
   });
 
   it('should record DOM node movement 2', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'move-node.html'));
 
@@ -369,20 +371,20 @@ describe('record integration tests', function (this: ISuite) {
       div.appendChild(span);
     });
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'move-node-2');
+    assertSnapshot(snapshots);
   });
 
   it('should record dynamic CSS changes', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'react-styled-components.html'));
     await page.click('.toggle');
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'react-styled-components');
+    assertSnapshot(snapshots);
   });
 
   it('should record canvas mutations', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(
       getHtml.call(this, 'canvas.html', {
@@ -400,11 +402,11 @@ describe('record integration tests', function (this: ISuite) {
         });
       }
     }
-    assertSnapshot(snapshots, __filename, 'canvas');
+    assertSnapshot(snapshots);
   });
 
   it('will serialize node before record', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'mutation-observer.html'));
 
@@ -419,11 +421,11 @@ describe('record integration tests', function (this: ISuite) {
     });
 
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'serialize-before-record');
+    assertSnapshot(snapshots);
   });
 
   it('will defer missing next node mutation', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'shuffle.html'));
 
@@ -441,11 +443,11 @@ describe('record integration tests', function (this: ISuite) {
       return parent.innerText;
     });
 
-    expect(text).to.equal('4\n3\n2\n1\n5');
+    expect(text).toEqual('4\n3\n2\n1\n5');
   });
 
   it('should record console messages', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(
       getHtml.call(this, 'log.html', {
@@ -454,7 +456,7 @@ describe('record integration tests', function (this: ISuite) {
     );
 
     await page.evaluate(() => {
-      console.assert(0 == 0, 'assert');
+      console.assert(0 === 0, 'assert');
       console.count('count');
       console.countReset('count');
       console.debug('debug');
@@ -479,23 +481,22 @@ describe('record integration tests', function (this: ISuite) {
       console.log('from iframe');
     });
 
-
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'log');
+    assertSnapshot(snapshots);
   });
 
   it('should nest record iframe', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto(`http://localhost:3030/html`);
     await page.setContent(getHtml.call(this, 'main.html'));
 
     await page.waitForTimeout(500);
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'iframe');
+    assertSnapshot(snapshots);
   });
 
   it('should record shadow DOM', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'shadow-dom.html'));
 
@@ -528,11 +529,11 @@ describe('record integration tests', function (this: ISuite) {
     await page.waitForTimeout(50);
 
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'shadow-dom');
+    assertSnapshot(snapshots);
   });
 
   it('should mask texts', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(
       getHtml.call(this, 'mask-text.html', {
@@ -541,11 +542,11 @@ describe('record integration tests', function (this: ISuite) {
     );
 
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'mask-text');
+    assertSnapshot(snapshots);
   });
 
   it('should mask texts using maskTextFn', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(
       getHtml.call(this, 'mask-text.html', {
@@ -555,11 +556,11 @@ describe('record integration tests', function (this: ISuite) {
     );
 
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'mask-text-fn');
+    assertSnapshot(snapshots);
   });
 
   it('can mask character data mutations', async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'mutation-observer.html'));
 
@@ -576,6 +577,6 @@ describe('record integration tests', function (this: ISuite) {
     });
 
     const snapshots = await page.evaluate('window.snapshots');
-    assertSnapshot(snapshots, __filename, 'mask-character-data');
+    assertSnapshot(snapshots);
   });
 });
diff --git a/packages/rrweb/test/machine.test.ts b/packages/rrweb/test/machine.test.ts
index 8e4e27fcbd..1260a5e64f 100644
--- a/packages/rrweb/test/machine.test.ts
+++ b/packages/rrweb/test/machine.test.ts
@@ -1,4 +1,3 @@
-import { expect } from 'chai';
 import { discardPriorSnapshots } from '../src/replay/machine';
 import { sampleEvents } from './utils';
 import { EventType } from '../src/types';
@@ -17,7 +16,7 @@ const nextNextEvents = nextEvents.map((e) => ({
 
 describe('get last session', () => {
   it('will return all the events when there is only one session', () => {
-    expect(discardPriorSnapshots(events, events[0].timestamp)).to.deep.equal(events);
+    expect(discardPriorSnapshots(events, events[0].timestamp)).toEqual(events);
   });
 
   it('will return last session when there is more than one in the events', () => {
@@ -27,7 +26,7 @@ describe('get last session', () => {
         multiple,
         nextNextEvents[nextNextEvents.length - 1].timestamp,
       ),
-    ).to.deep.equal(nextNextEvents);
+    ).toEqual(nextNextEvents);
   });
 
   it('will return last session when baseline time is future time', () => {
@@ -37,11 +36,11 @@ describe('get last session', () => {
         multiple,
         nextNextEvents[nextNextEvents.length - 1].timestamp + 1000,
       ),
-    ).to.deep.equal(nextNextEvents);
+    ).toEqual(nextNextEvents);
   });
 
   it('will return all sessions when baseline time is prior time', () => {
-    expect(discardPriorSnapshots(events, events[0].timestamp - 1000)).to.deep.equal(
+    expect(discardPriorSnapshots(events, events[0].timestamp - 1000)).toEqual(
       events,
     );
   });
diff --git a/packages/rrweb/test/packer.test.ts b/packages/rrweb/test/packer.test.ts
index 7b4dda54a5..f6ffaca92f 100644
--- a/packages/rrweb/test/packer.test.ts
+++ b/packages/rrweb/test/packer.test.ts
@@ -1,5 +1,3 @@
-import { expect } from 'chai';
-import { matchSnapshot } from './utils';
 import { pack, unpack } from '../src/packer';
 import { eventWithTime, EventType } from '../src/types';
 import { MARK } from '../src/packer/base';
@@ -13,30 +11,29 @@ const event: eventWithTime = {
 describe('pack', () => {
   it('can pack event', () => {
     const packedData = pack(event);
-    const result = matchSnapshot(packedData, __filename, 'pack');
-    expect(result.pass).to.true;
+    expect(packedData).toMatchSnapshot();
   });
 });
 
 describe('unpack', () => {
   it('is compatible with unpacked data 1', () => {
     const result = unpack((event as unknown) as string);
-    expect(result).to.deep.equal(event);
+    expect(result).toEqual(event);
   });
 
   it('is compatible with unpacked data 2', () => {
     const result = unpack(JSON.stringify(event));
-    expect(result).to.deep.equal(event);
+    expect(result).toEqual(event);
   });
 
   it('stop on unknown data format', () => {
-    expect(() => unpack('[""]')).to.throw('');
+    expect(() => unpack('[""]')).toThrow('');
   });
 
   it('can unpack packed data', () => {
     const packedData = pack(event);
     const result = unpack(packedData);
-    expect(result).to.deep.equal({
+    expect(result).toEqual({
       ...event,
       v: MARK,
     });
diff --git a/packages/rrweb/test/record.test.ts b/packages/rrweb/test/record.test.ts
index dfb9153dd5..5b9e82b851 100644
--- a/packages/rrweb/test/record.test.ts
+++ b/packages/rrweb/test/record.test.ts
@@ -3,7 +3,6 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import * as puppeteer from 'puppeteer';
-import { expect } from 'chai';
 import {
   recordOptions,
   listenerHandler,
@@ -13,9 +12,8 @@ import {
   styleSheetRuleData,
 } from '../src/types';
 import { assertSnapshot, launchPuppeteer } from './utils';
-import { Suite } from 'mocha';
 
-interface ISuite extends Suite {
+interface ISuite {
   code: string;
   browser: puppeteer.Browser;
   page: puppeteer.Page;
@@ -32,44 +30,47 @@ interface IWindow extends Window {
   emit: (e: eventWithTime) => undefined;
 }
 
-const setup = async function (this: ISuite, content: string) {
-  before(async () => {
-    this.browser = await launchPuppeteer();
+const setup = function (this: ISuite, content: string): ISuite {
+  const ctx = {} as ISuite;
+
+  beforeAll(async () => {
+    ctx.browser = await launchPuppeteer();
 
     const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js');
-    this.code = fs.readFileSync(bundlePath, 'utf8');
+    ctx.code = fs.readFileSync(bundlePath, 'utf8');
   });
 
   beforeEach(async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
-    await page.goto('about:blank');
-    await page.setContent(content);
-    await page.evaluate(this.code);
-    this.page = page;
-    this.events = [];
-    await this.page.exposeFunction('emit', (e: eventWithTime) => {
+    ctx.page = await ctx.browser.newPage();
+    await ctx.page.goto('about:blank');
+    await ctx.page.setContent(content);
+    await ctx.page.evaluate(ctx.code);
+    ctx.events = [];
+    await ctx.page.exposeFunction('emit', (e: eventWithTime) => {
       if (e.type === EventType.DomContentLoaded || e.type === EventType.Load) {
         return;
       }
-      this.events.push(e);
+      ctx.events.push(e);
     });
 
-    page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
+    ctx.page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
   });
 
   afterEach(async () => {
-    await this.page.close();
+    await ctx.page.close();
   });
 
-  after(async () => {
-    await this.browser.close();
+  afterAll(async () => {
+    await ctx.browser.close();
   });
+
+  return ctx;
 };
 
 describe('record', function (this: ISuite) {
-  this.timeout(10_000);
+  jest.setTimeout(10_000);
 
-  setup.call(
+  const ctx: ISuite = setup.call(
     this,
     `
       <!DOCTYPE html>
@@ -82,7 +83,7 @@ describe('record', function (this: ISuite) {
   );
 
   it('will only have one full snapshot without checkout config', async () => {
-    await this.page.evaluate(() => {
+    await ctx.page.evaluate(() => {
       const { record } = ((window as unknown) as IWindow).rrweb;
       record({
         emit: ((window as unknown) as IWindow).emit,
@@ -90,24 +91,23 @@ describe('record', function (this: ISuite) {
     });
     let count = 30;
     while (count--) {
-      await this.page.type('input', 'a');
+      await ctx.page.type('input', 'a');
     }
-    await this.page.waitForTimeout(10);
-    expect(this.events.length).to.equal(33);
+    await ctx.page.waitForTimeout(10);
+    expect(ctx.events.length).toEqual(33);
     expect(
-      this.events.filter(
-        (event: eventWithTime) => event.type === EventType.Meta,
-      ).length,
-    ).to.equal(1);
+      ctx.events.filter((event: eventWithTime) => event.type === EventType.Meta)
+        .length,
+    ).toEqual(1);
     expect(
-      this.events.filter(
+      ctx.events.filter(
         (event: eventWithTime) => event.type === EventType.FullSnapshot,
       ).length,
-    ).to.equal(1);
+    ).toEqual(1);
   });
 
   it('can checkout full snapshot by count', async () => {
-    await this.page.evaluate(() => {
+    await ctx.page.evaluate(() => {
       const { record } = ((window as unknown) as IWindow).rrweb;
       record({
         emit: ((window as unknown) as IWindow).emit,
@@ -116,28 +116,27 @@ describe('record', function (this: ISuite) {
     });
     let count = 30;
     while (count--) {
-      await this.page.type('input', 'a');
+      await ctx.page.type('input', 'a');
     }
-    await this.page.waitForTimeout(10);
-    expect(this.events.length).to.equal(39);
+    await ctx.page.waitForTimeout(10);
+    expect(ctx.events.length).toEqual(39);
     expect(
-      this.events.filter(
-        (event: eventWithTime) => event.type === EventType.Meta,
-      ).length,
-    ).to.equal(4);
+      ctx.events.filter((event: eventWithTime) => event.type === EventType.Meta)
+        .length,
+    ).toEqual(4);
     expect(
-      this.events.filter(
+      ctx.events.filter(
         (event: eventWithTime) => event.type === EventType.FullSnapshot,
       ).length,
-    ).to.equal(4);
-    expect(this.events[1].type).to.equal(EventType.FullSnapshot);
-    expect(this.events[13].type).to.equal(EventType.FullSnapshot);
-    expect(this.events[25].type).to.equal(EventType.FullSnapshot);
-    expect(this.events[37].type).to.equal(EventType.FullSnapshot);
+    ).toEqual(4);
+    expect(ctx.events[1].type).toEqual(EventType.FullSnapshot);
+    expect(ctx.events[13].type).toEqual(EventType.FullSnapshot);
+    expect(ctx.events[25].type).toEqual(EventType.FullSnapshot);
+    expect(ctx.events[37].type).toEqual(EventType.FullSnapshot);
   });
 
   it('can checkout full snapshot by time', async () => {
-    await this.page.evaluate(() => {
+    await ctx.page.evaluate(() => {
       const { record } = ((window as unknown) as IWindow).rrweb;
       record({
         emit: ((window as unknown) as IWindow).emit,
@@ -146,30 +145,29 @@ describe('record', function (this: ISuite) {
     });
     let count = 30;
     while (count--) {
-      await this.page.type('input', 'a');
+      await ctx.page.type('input', 'a');
     }
-    await this.page.waitForTimeout(300);
-    expect(this.events.length).to.equal(33); // before first automatic snapshot
-    await this.page.waitForTimeout(200); // could be 33 or 35 events by now depending on speed of test env
-    await this.page.type('input', 'a');
-    await this.page.waitForTimeout(10);
-    expect(this.events.length).to.equal(36); // additionally includes the 2 checkout events
+    await ctx.page.waitForTimeout(300);
+    expect(ctx.events.length).toEqual(33); // before first automatic snapshot
+    await ctx.page.waitForTimeout(200); // could be 33 or 35 events by now depending on speed of test env
+    await ctx.page.type('input', 'a');
+    await ctx.page.waitForTimeout(10);
+    expect(ctx.events.length).toEqual(36); // additionally includes the 2 checkout events
     expect(
-      this.events.filter(
-        (event: eventWithTime) => event.type === EventType.Meta,
-      ).length,
-    ).to.equal(2);
+      ctx.events.filter((event: eventWithTime) => event.type === EventType.Meta)
+        .length,
+    ).toEqual(2);
     expect(
-      this.events.filter(
+      ctx.events.filter(
         (event: eventWithTime) => event.type === EventType.FullSnapshot,
       ).length,
-    ).to.equal(2);
-    expect(this.events[1].type).to.equal(EventType.FullSnapshot);
-    expect(this.events[35].type).to.equal(EventType.FullSnapshot);
+    ).toEqual(2);
+    expect(ctx.events[1].type).toEqual(EventType.FullSnapshot);
+    expect(ctx.events[35].type).toEqual(EventType.FullSnapshot);
   });
 
   it('is safe to checkout during async callbacks', async () => {
-    await this.page.evaluate(() => {
+    await ctx.page.evaluate(() => {
       const { record } = ((window as unknown) as IWindow).rrweb;
       record({
         emit: ((window as unknown) as IWindow).emit,
@@ -190,12 +188,12 @@ describe('record', function (this: ISuite) {
         document.body.appendChild(span);
       }, 10);
     });
-    await this.page.waitForTimeout(100);
-    assertSnapshot(this.events, __filename, 'async-checkout');
+    await ctx.page.waitForTimeout(100);
+    assertSnapshot(ctx.events);
   });
 
   it('can add custom event', async () => {
-    await this.page.evaluate(() => {
+    await ctx.page.evaluate(() => {
       const { record, addCustomEvent } = ((window as unknown) as IWindow).rrweb;
       record({
         emit: ((window as unknown) as IWindow).emit,
@@ -205,12 +203,12 @@ describe('record', function (this: ISuite) {
         a: 'b',
       });
     });
-    await this.page.waitForTimeout(50);
-    assertSnapshot(this.events, __filename, 'custom-event');
+    await ctx.page.waitForTimeout(50);
+    assertSnapshot(ctx.events);
   });
 
   it('captures stylesheet rules', async () => {
-    await this.page.evaluate(() => {
+    await ctx.page.evaluate(() => {
       const { record } = ((window as unknown) as IWindow).rrweb;
 
       record({
@@ -236,8 +234,8 @@ describe('record', function (this: ISuite) {
         styleSheet.insertRule('body { color: #ccc; }');
       }, 10);
     });
-    await this.page.waitForTimeout(50);
-    const styleSheetRuleEvents = this.events.filter(
+    await ctx.page.waitForTimeout(50);
+    const styleSheetRuleEvents = ctx.events.filter(
       (e) =>
         e.type === EventType.IncrementalSnapshot &&
         e.data.source === IncrementalSource.StyleSheetRule,
@@ -249,14 +247,18 @@ describe('record', function (this: ISuite) {
       Boolean((e.data as styleSheetRuleData).removes),
     ).length;
     // pre-serialization insert/delete should be ignored
-    expect(addRules.length).to.equal(2);
-    expect((addRules[0].data as styleSheetRuleData).adds).to.deep.include({rule: "body { color: #fff; }"});
-    expect(removeRuleCount).to.equal(1);
-    assertSnapshot(this.events, __filename, 'stylesheet-rules');
+    expect(addRules.length).toEqual(2);
+    expect((addRules[0].data as styleSheetRuleData).adds).toEqual([
+      {
+        rule: 'body { color: #fff; }',
+      },
+    ]);
+    expect(removeRuleCount).toEqual(1);
+    assertSnapshot(ctx.events);
   });
 
   const captureNestedStylesheetRulesTest = async () => {
-    await this.page.evaluate(() => {
+    await ctx.page.evaluate(() => {
       const { record } = ((window as unknown) as IWindow).rrweb;
 
       record({
@@ -283,8 +285,8 @@ describe('record', function (this: ISuite) {
         atMediaRule.insertRule('body { color: #ccc; }', 0);
       }, 10);
     });
-    await this.page.waitForTimeout(50);
-    const styleSheetRuleEvents = this.events.filter(
+    await ctx.page.waitForTimeout(50);
+    const styleSheetRuleEvents = ctx.events.filter(
       (e) =>
         e.type === EventType.IncrementalSnapshot &&
         e.data.source === IncrementalSource.StyleSheetRule,
@@ -296,9 +298,9 @@ describe('record', function (this: ISuite) {
       Boolean((e.data as styleSheetRuleData).removes),
     ).length;
     // sync insert/delete should be ignored
-    expect(addRuleCount).to.equal(2);
-    expect(removeRuleCount).to.equal(1);
-    assertSnapshot(this.events, __filename, 'nested-stylesheet-rules');
+    expect(addRuleCount).toEqual(2);
+    expect(removeRuleCount).toEqual(1);
+    assertSnapshot(ctx.events);
   };
   it('captures nested stylesheet rules', captureNestedStylesheetRulesTest);
 
@@ -306,18 +308,18 @@ describe('record', function (this: ISuite) {
     // Safari currently doesn't support CSSGroupingRule, let's test without that
     // https://caniuse.com/?search=CSSGroupingRule
     beforeEach(async () => {
-      await this.page.evaluate(() => {
+      await ctx.page.evaluate(() => {
         /* @ts-ignore: override CSSGroupingRule */
         CSSGroupingRule = undefined;
       });
       // load a fresh rrweb recorder without CSSGroupingRule
-      await this.page.evaluate(this.code);
+      await ctx.page.evaluate(ctx.code);
     });
     it('captures nested stylesheet rules', captureNestedStylesheetRulesTest);
   });
 
   it('captures style property changes', async () => {
-    await this.page.evaluate(() => {
+    await ctx.page.evaluate(() => {
       const { record } = ((window as unknown) as IWindow).rrweb;
 
       record({
@@ -330,21 +332,24 @@ describe('record', function (this: ISuite) {
       const styleSheet = <CSSStyleSheet>styleElement.sheet;
       styleSheet.insertRule('body { background: #000; }');
       setTimeout(() => {
-        (styleSheet.cssRules[0] as CSSStyleRule).style.setProperty('color', 'green');
-        (styleSheet.cssRules[0] as CSSStyleRule).style.removeProperty('background');
+        (styleSheet.cssRules[0] as CSSStyleRule).style.setProperty(
+          'color',
+          'green',
+        );
+        (styleSheet.cssRules[0] as CSSStyleRule).style.removeProperty(
+          'background',
+        );
       }, 0);
     });
-    await this.page.waitForTimeout(50);
-    assertSnapshot(this.events, __filename, 'stylesheet-properties');
+    await ctx.page.waitForTimeout(50);
+    assertSnapshot(ctx.events);
   });
-
-
 });
 
 describe('record iframes', function (this: ISuite) {
-  this.timeout(10_000);
+  jest.setTimeout(10_000);
 
-  setup.call(
+  const ctx: ISuite = setup.call(
     this,
     `
       <!DOCTYPE html>
@@ -357,31 +362,31 @@ describe('record iframes', function (this: ISuite) {
   );
 
   it('captures iframe content in correct order', async () => {
-    await this.page.evaluate(() => {
+    await ctx.page.evaluate(() => {
       const { record } = ((window as unknown) as IWindow).rrweb;
       record({
         emit: ((window as unknown) as IWindow).emit,
       });
     });
-    await this.page.waitForTimeout(10);
-    // console.log(JSON.stringify(this.events));
+    await ctx.page.waitForTimeout(10);
+    // console.log(JSON.stringify(ctx.events));
 
-    expect(this.events.length).to.equal(3);
-    const eventTypes = this.events
+    expect(ctx.events.length).toEqual(3);
+    const eventTypes = ctx.events
       .filter(
         (e) =>
           e.type === EventType.IncrementalSnapshot ||
           e.type === EventType.FullSnapshot,
       )
       .map((e) => e.type);
-    expect(eventTypes).to.have.ordered.members([
+    expect(eventTypes).toEqual([
       EventType.FullSnapshot,
       EventType.IncrementalSnapshot,
     ]);
   });
 
   it('captures stylesheet mutations in iframes', async () => {
-    await this.page.evaluate(() => {
+    await ctx.page.evaluate(() => {
       const { record } = ((window as unknown) as IWindow).rrweb;
       record({
         // need to reference window.top for when we are in an iframe!
@@ -391,7 +396,6 @@ describe('record iframes', function (this: ISuite) {
       const iframe = document.querySelector('iframe');
       // outer timeout is needed to wait for initStyleSheetObserver on iframe to be set up
       setTimeout(() => {
-
         const idoc = (iframe as HTMLIFrameElement).contentDocument!;
         const styleElement = idoc.createElement('style');
 
@@ -400,8 +404,11 @@ describe('record iframes', function (this: ISuite) {
         const styleSheet = <CSSStyleSheet>styleElement.sheet;
         styleSheet.insertRule('@media {}');
         const atMediaRule = styleSheet.cssRules[0] as CSSMediaRule;
-        const atRuleIdx0 = atMediaRule.insertRule('body { background: #000; }', 0);
-        const ruleIdx0 = styleSheet.insertRule('body { background: #000; }');  // inserted before above
+        const atRuleIdx0 = atMediaRule.insertRule(
+          'body { background: #000; }',
+          0,
+        );
+        const ruleIdx0 = styleSheet.insertRule('body { background: #000; }'); // inserted before above
         // pre-serialization insert/delete above should be ignored
         setTimeout(() => {
           styleSheet.insertRule('body { color: #fff; }');
@@ -409,19 +416,22 @@ describe('record iframes', function (this: ISuite) {
         }, 0);
         setTimeout(() => {
           styleSheet.deleteRule(ruleIdx0);
-          (styleSheet.cssRules[0] as CSSStyleRule).style.setProperty('color', 'green');
+          (styleSheet.cssRules[0] as CSSStyleRule).style.setProperty(
+            'color',
+            'green',
+          );
         }, 5);
-        setTimeout(() =>{
+        setTimeout(() => {
           atMediaRule.deleteRule(atRuleIdx0);
         }, 10);
       }, 10);
     });
-    await this.page.waitForTimeout(50);
-    const styleRelatedEvents = this.events.filter(
+    await ctx.page.waitForTimeout(50);
+    const styleRelatedEvents = ctx.events.filter(
       (e) =>
         e.type === EventType.IncrementalSnapshot &&
         (e.data.source === IncrementalSource.StyleSheetRule ||
-         e.data.source === IncrementalSource.StyleDeclaration),
+          e.data.source === IncrementalSource.StyleDeclaration),
     );
     const addRuleCount = styleRelatedEvents.filter((e) =>
       Boolean((e.data as styleSheetRuleData).adds),
@@ -429,10 +439,9 @@ describe('record iframes', function (this: ISuite) {
     const removeRuleCount = styleRelatedEvents.filter((e) =>
       Boolean((e.data as styleSheetRuleData).removes),
     ).length;
-    expect(styleRelatedEvents.length).to.equal(5);
-    expect(addRuleCount).to.equal(2);
-    expect(removeRuleCount).to.equal(2);
-    assertSnapshot(this.events, __filename, 'iframe-stylesheet-mutations');
+    expect(styleRelatedEvents.length).toEqual(5);
+    expect(addRuleCount).toEqual(2);
+    expect(removeRuleCount).toEqual(2);
+    assertSnapshot(ctx.events);
   });
-
 });
diff --git a/packages/rrweb/test/replay/virtual-styles.test.ts b/packages/rrweb/test/replay/virtual-styles.test.ts
index ba82bc4397..44d27bd925 100644
--- a/packages/rrweb/test/replay/virtual-styles.test.ts
+++ b/packages/rrweb/test/replay/virtual-styles.test.ts
@@ -1,4 +1,3 @@
-import { expect } from 'chai';
 import { JSDOM } from 'jsdom';
 import {
   applyVirtualStyleRulesToNode,
@@ -21,8 +20,8 @@ describe('virtual styles', () => {
       ];
       applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
 
-      expect(styleEl.sheet?.cssRules?.length).to.equal(1);
-      expect(styleEl.sheet?.cssRules[0].cssText).to.equal(cssText);
+      expect(styleEl.sheet?.cssRules?.length).toEqual(1);
+      expect(styleEl.sheet?.cssRules[0].cssText).toEqual(cssText);
     });
 
     it('should insert rule at index 0 and keep exsisting rules', () => {
@@ -40,8 +39,8 @@ describe('virtual styles', () => {
       ];
       applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
 
-      expect(styleEl.sheet?.cssRules?.length).to.equal(3);
-      expect(styleEl.sheet?.cssRules[0].cssText).to.equal(cssText);
+      expect(styleEl.sheet?.cssRules?.length).toEqual(3);
+      expect(styleEl.sheet?.cssRules[0].cssText).toEqual(cssText);
     });
 
     it('should delete rule at index 0', () => {
@@ -58,10 +57,8 @@ describe('virtual styles', () => {
       ];
       applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
 
-      expect(styleEl.sheet?.cssRules?.length).to.equal(1);
-      expect(styleEl.sheet?.cssRules[0].cssText).to.equal(
-        'div {color: black;}',
-      );
+      expect(styleEl.sheet?.cssRules?.length).toEqual(1);
+      expect(styleEl.sheet?.cssRules[0].cssText).toEqual('div {color: black;}');
     });
 
     it('should restore a snapshot by inserting missing rules', () => {
@@ -82,7 +79,7 @@ describe('virtual styles', () => {
       ];
       applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
 
-      expect(styleEl.sheet?.cssRules?.length).to.equal(2);
+      expect(styleEl.sheet?.cssRules?.length).toEqual(2);
     });
 
     it('should restore a snapshot by fixing order of rules', () => {
@@ -104,10 +101,10 @@ describe('virtual styles', () => {
       ];
       applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
 
-      expect(styleEl.sheet?.cssRules?.length).to.equal(2);
+      expect(styleEl.sheet?.cssRules?.length).toEqual(2);
       expect(
         Array.from(styleEl.sheet?.cssRules || []).map((rule) => rule.cssText),
-      ).to.have.ordered.members(cssTexts);
+      ).toEqual(cssTexts);
     });
 
     // JSDOM/CSSOM is currently broken for this test
@@ -135,10 +132,10 @@ describe('virtual styles', () => {
 
       expect(
         (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
-      ).to.equal(3);
+      ).toEqual(3);
       expect(
         (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText,
-      ).to.equal(cssText);
+      ).toEqual(cssText);
     });
 
     it('should delete rule at index [0,1]', () => {
@@ -159,10 +156,10 @@ describe('virtual styles', () => {
 
       expect(
         (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
-      ).to.equal(1);
+      ).toEqual(1);
       expect(
         (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText,
-      ).to.equal('a {color: blue;}');
+      ).toEqual('a {color: blue;}');
     });
   });
 });
diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts
index 4ffd9b9f76..ef5b949bb4 100644
--- a/packages/rrweb/test/replayer.test.ts
+++ b/packages/rrweb/test/replayer.test.ts
@@ -3,8 +3,6 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import * as puppeteer from 'puppeteer';
-import { expect } from 'chai';
-import { Suite } from 'mocha';
 import {
   assertDomSnapshot,
   launchPuppeteer,
@@ -14,47 +12,50 @@ import {
 import styleSheetRuleEvents from './events/style-sheet-rule-events';
 import orderingEvents from './events/ordering';
 
-interface ISuite extends Suite {
+interface ISuite {
   code: string;
   browser: puppeteer.Browser;
   page: puppeteer.Page;
 }
 
-describe('replayer', function (this: ISuite) {
-  this.timeout(10_000);
+describe('replayer', function () {
+  jest.setTimeout(10_000);
 
-  before(async () => {
-    this.browser = await launchPuppeteer();
+  let code: ISuite['code'];
+  let browser: ISuite['browser'];
+  let page: ISuite['page'];
+
+  beforeAll(async () => {
+    browser = await launchPuppeteer();
 
     const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js');
-    this.code = fs.readFileSync(bundlePath, 'utf8');
+    code = fs.readFileSync(bundlePath, 'utf8');
   });
 
   beforeEach(async () => {
-    const page: puppeteer.Page = await this.browser.newPage();
+    page = await browser.newPage();
     await page.goto('about:blank');
-    await page.evaluate(this.code);
+    await page.evaluate(code);
     await page.evaluate(`let events = ${JSON.stringify(events)}`);
-    this.page = page;
 
     page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
   });
 
   afterEach(async () => {
-    await this.page.close();
+    await page.close();
   });
 
-  after(async () => {
-    await this.browser.close();
+  afterAll(async () => {
+    await browser.close();
   });
 
   it('can get meta data', async () => {
-    const meta = await this.page.evaluate(`
+    const meta = await page.evaluate(`
       const { Replayer } = rrweb;
       const replayer = new Replayer(events);
       replayer.getMetaData();
     `);
-    expect(meta).to.deep.equal({
+    expect(meta).toEqual({
       startTime: events[0].timestamp,
       endTime: events[events.length - 1].timestamp,
       totalTime: events[events.length - 1].timestamp - events[0].timestamp,
@@ -62,111 +63,107 @@ describe('replayer', function (this: ISuite) {
   });
 
   it('will start actions when play', async () => {
-    const actionLength = await this.page.evaluate(`
+    const actionLength = await page.evaluate(`
       const { Replayer } = rrweb;
       const replayer = new Replayer(events);
       replayer.play();
       replayer['timer']['actions'].length;
     `);
-    expect(actionLength).to.equal(events.length);
+    expect(actionLength).toEqual(events.length);
   });
 
   it('will clean actions when pause', async () => {
-    const actionLength = await this.page.evaluate(`
+    const actionLength = await page.evaluate(`
       const { Replayer } = rrweb;
       const replayer = new Replayer(events);
       replayer.play();
       replayer.pause();
       replayer['timer']['actions'].length;
     `);
-    expect(actionLength).to.equal(0);
+    expect(actionLength).toEqual(0);
   });
 
   it('can play at any time offset', async () => {
-    const actionLength = await this.page.evaluate(`
+    const actionLength = await page.evaluate(`
       const { Replayer } = rrweb;
       const replayer = new Replayer(events);
       replayer.play(1500);
       replayer['timer']['actions'].length;
     `);
-    expect(actionLength).to.equal(
+    expect(actionLength).toEqual(
       events.filter((e) => e.timestamp - events[0].timestamp >= 1500).length,
     );
   });
 
   it('can play a second time in the future', async () => {
-    const actionLength = await this.page.evaluate(`
+    const actionLength = await page.evaluate(`
       const { Replayer } = rrweb;
       const replayer = new Replayer(events);
       replayer.play(500);
       replayer.play(1500);
       replayer['timer']['actions'].length;
     `);
-    expect(actionLength).to.equal(
+    expect(actionLength).toEqual(
       events.filter((e) => e.timestamp - events[0].timestamp >= 1500).length,
     );
   });
 
   it('can play a second time to the past', async () => {
-    const actionLength = await this.page.evaluate(`
+    const actionLength = await page.evaluate(`
       const { Replayer } = rrweb;
       const replayer = new Replayer(events);
       replayer.play(1500);
       replayer.play(500);
       replayer['timer']['actions'].length;
     `);
-    expect(actionLength).to.equal(
+    expect(actionLength).toEqual(
       events.filter((e) => e.timestamp - events[0].timestamp >= 500).length,
     );
   });
 
   it('can pause at any time offset', async () => {
-    const actionLength = await this.page.evaluate(`
+    const actionLength = await page.evaluate(`
       const { Replayer } = rrweb;
       const replayer = new Replayer(events);
       replayer.pause(2500);
       replayer['timer']['actions'].length;
     `);
-    const currentTime = await this.page.evaluate(`
+    const currentTime = await page.evaluate(`
       replayer.getCurrentTime();
     `);
-    const currentState = await this.page.evaluate(`
+    const currentState = await page.evaluate(`
       replayer['service']['state']['value'];
     `);
-    expect(actionLength).to.equal(0);
-    expect(currentTime).to.equal(2500);
-    expect(currentState).to.equal('paused');
+    expect(actionLength).toEqual(0);
+    expect(currentTime).toEqual(2500);
+    expect(currentState).toEqual('paused');
   });
 
   it('can fast forward past StyleSheetRule changes on virtual elements', async () => {
-    await this.page.evaluate(
-      `events = ${JSON.stringify(styleSheetRuleEvents)}`,
-    );
-    const actionLength = await this.page.evaluate(`
+    await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`);
+    const actionLength = await page.evaluate(`
       const { Replayer } = rrweb;
       const replayer = new Replayer(events);
       replayer.play(1500);
       replayer['timer']['actions'].length;
     `);
 
-    expect(actionLength).to.equal(
+    expect(actionLength).toEqual(
       styleSheetRuleEvents.filter(
         (e) => e.timestamp - styleSheetRuleEvents[0].timestamp >= 1500,
       ).length,
     );
 
     await assertDomSnapshot(
-      this.page,
+      page,
       __filename,
       'style-sheet-rule-events-play-at-1500',
     );
   });
 
   it('should apply fast forwarded StyleSheetRules that where added', async () => {
-    await this.page.evaluate(
-      `events = ${JSON.stringify(styleSheetRuleEvents)}`,
-    );
-    const result = await this.page.evaluate(`
+    await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`);
+    const result = await page.evaluate(`
       const { Replayer } = rrweb;
       const replayer = new Replayer(events);
       replayer.pause(1500);
@@ -176,55 +173,43 @@ describe('replayer', function (this: ISuite) {
       rules.some((x) => x.selectorText === '.css-added-at-1000-deleted-at-2500');
     `);
 
-    expect(result).to.equal(true);
+    expect(result).toEqual(true);
   });
 
   it('can handle removing style elements', async () => {
-    await this.page.evaluate(
-      `events = ${JSON.stringify(stylesheetRemoveEvents)}`,
-    );
-    const actionLength = await this.page.evaluate(`
+    await page.evaluate(`events = ${JSON.stringify(stylesheetRemoveEvents)}`);
+    const actionLength = await page.evaluate(`
       const { Replayer } = rrweb;
       const replayer = new Replayer(events);
       replayer.play(2500);
       replayer['timer']['actions'].length;
     `);
-    expect(actionLength).to.equal(
+    expect(actionLength).toEqual(
       stylesheetRemoveEvents.filter(
         (e) => e.timestamp - stylesheetRemoveEvents[0].timestamp >= 2500,
       ).length,
     );
 
     await assertDomSnapshot(
-      this.page,
+      page,
       __filename,
       'style-sheet-remove-events-play-at-2500',
     );
   });
 
   it('can fast forward past StyleSheetRule deletion on virtual elements', async () => {
-    await this.page.evaluate(
-      `events = ${JSON.stringify(styleSheetRuleEvents)}`,
-    );
-    const actionLength = await this.page.evaluate(`
-      const { Replayer } = rrweb;
-      const replayer = new Replayer(events);
-      replayer.play(2500);
-      replayer['timer']['actions'].length;
-    `);
+    await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`);
 
     await assertDomSnapshot(
-      this.page,
+      page,
       __filename,
       'style-sheet-rule-events-play-at-2500',
     );
   });
 
   it('should delete fast forwarded StyleSheetRules that where removed', async () => {
-    await this.page.evaluate(
-      `events = ${JSON.stringify(styleSheetRuleEvents)}`,
-    );
-    const result = await this.page.evaluate(`
+    await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`);
+    const result = await page.evaluate(`
       const { Replayer } = rrweb;
       const replayer = new Replayer(events);
       replayer.pause(3000);
@@ -234,11 +219,11 @@ describe('replayer', function (this: ISuite) {
       rules.some((x) => x.selectorText === '.css-added-at-1000-deleted-at-2500');
     `);
 
-    expect(result).to.equal(false);
+    expect(result).toEqual(false);
   });
 
   it('can stream events in live mode', async () => {
-    const status = await this.page.evaluate(`
+    const status = await page.evaluate(`
       const { Replayer } = rrweb;
       const replayer = new Replayer(events, {
         liveMode: true
@@ -246,46 +231,32 @@ describe('replayer', function (this: ISuite) {
       replayer.startLive();
       replayer.service.state.value;
     `);
-    expect(status).to.equal('live');
+    expect(status).toEqual('live');
   });
 
   it('replays same timestamp events in correct order', async () => {
-    await this.page.evaluate(
-      `events = ${JSON.stringify(orderingEvents)}`,
-    );
-    await this.page.evaluate(`
+    await page.evaluate(`events = ${JSON.stringify(orderingEvents)}`);
+    await page.evaluate(`
       const { Replayer } = rrweb;
       const replayer = new Replayer(events);
       replayer.play();
     `);
-    await this.page.waitForTimeout(50);
+    await page.waitForTimeout(50);
 
-    await assertDomSnapshot(
-      this.page,
-      __filename,
-      'ordering-events',
-    );
+    await assertDomSnapshot(page, __filename, 'ordering-events');
   });
 
   it('replays same timestamp events in correct order (with addAction)', async () => {
-    await this.page.evaluate(
-      `events = ${JSON.stringify(orderingEvents)}`,
-    );
-    await this.page.evaluate(`
+    await page.evaluate(`events = ${JSON.stringify(orderingEvents)}`);
+    await page.evaluate(`
       const { Replayer } = rrweb;
       const replayer = new Replayer(events.slice(0, events.length-2));
       replayer.play();
       replayer.addEvent(events[events.length-2]);
       replayer.addEvent(events[events.length-1]);
     `);
-    await this.page.waitForTimeout(50);
+    await page.waitForTimeout(50);
 
-    await assertDomSnapshot(
-      this.page,
-      __filename,
-      'ordering-events',
-    );
+    await assertDomSnapshot(page, __filename, 'ordering-events');
   });
-
-
 });
diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts
index 6a2ac5811b..45d427eecf 100644
--- a/packages/rrweb/test/utils.ts
+++ b/packages/rrweb/test/utils.ts
@@ -1,6 +1,4 @@
-import { SnapshotState, toMatchSnapshot } from 'jest-snapshot';
 import { NodeType } from 'rrweb-snapshot';
-import { assert } from 'chai';
 import {
   EventType,
   IncrementalSource,
@@ -21,24 +19,6 @@ export async function launchPuppeteer() {
   });
 }
 
-export function matchSnapshot(
-  actual: string,
-  testFile: string,
-  testTitle: string,
-) {
-  const snapshotState = new SnapshotState(testFile, {
-    updateSnapshot: process.env.SNAPSHOT_UPDATE ? 'all' : 'new',
-  });
-
-  const matcher = toMatchSnapshot.bind({
-    snapshotState,
-    currentTestName: testTitle,
-  });
-  const result = matcher(actual);
-  snapshotState.save();
-  return result;
-}
-
 /**
  * Puppeteer may cast random mouse move which make our tests flaky.
  * So we only do snapshot test with filtered events.
@@ -137,7 +117,7 @@ function stringifyDomSnapshot(mhtml: string): string {
     .rewrite() // rewrite all links
     .spit(); // return all contents
 
-  const newResult: { filename: string; content: string }[] = result.map(
+  const newResult: Array<{ filename: string; content: string }> = result.map(
     (asset: { filename: string; content: string }) => {
       let { filename, content } = asset;
       let res: string | undefined;
@@ -152,13 +132,8 @@ function stringifyDomSnapshot(mhtml: string): string {
   return newResult.map((asset) => Object.values(asset).join('\n')).join('\n\n');
 }
 
-export function assertSnapshot(
-  snapshots: eventWithTime[],
-  filename: string,
-  name: string,
-) {
-  const result = matchSnapshot(stringifySnapshots(snapshots), filename, name);
-  assert(result.pass, result.pass ? '' : result.report());
+export function assertSnapshot(snapshots: eventWithTime[]) {
+  expect(stringifySnapshots(snapshots)).toMatchSnapshot();
 }
 
 export async function assertDomSnapshot(
@@ -171,8 +146,7 @@ export async function assertDomSnapshot(
     format: 'mhtml',
   });
 
-  const result = matchSnapshot(stringifyDomSnapshot(data), filename, name);
-  assert(result.pass, result.pass ? '' : result.report());
+  expect(stringifyDomSnapshot(data)).toMatchSnapshot();
 }
 
 const now = Date.now();
diff --git a/packages/rrweb/tsconfig.json b/packages/rrweb/tsconfig.json
index b36dde7532..624bc19af8 100644
--- a/packages/rrweb/tsconfig.json
+++ b/packages/rrweb/tsconfig.json
@@ -13,9 +13,5 @@
     "downlevelIteration": true
   },
   "exclude": ["test"],
-  "include": [
-    "src",
-    "test.d.ts",
-    "node_modules/@types/css-font-loading-module/index.d.ts"
-  ]
+  "include": ["src", "node_modules/@types/css-font-loading-module/index.d.ts"]
 }
diff --git a/yarn.lock b/yarn.lock
index 03349d1167..fe25937f5e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9,18 +9,169 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.0.0-beta.35", "@babel/code-frame@^7.10.4":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.0.0-beta.35", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
   integrity sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==
   dependencies:
     "@babel/highlight" "^7.14.5"
 
+"@babel/compat-data@^7.15.0":
+  version "7.15.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.15.0.tgz#2dbaf8b85334796cafbb0f5793a90a2fc010b176"
+  integrity sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA==
+
+"@babel/core@^7.1.0", "@babel/core@^7.7.2", "@babel/core@^7.7.5":
+  version "7.15.5"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.15.5.tgz#f8ed9ace730722544609f90c9bb49162dc3bf5b9"
+  integrity sha512-pYgXxiwAgQpgM1bNkZsDEq85f0ggXMA5L7c+o3tskGMh2BunCI9QUwB9Z4jpvXUOuMdyGKiGKQiRe11VS6Jzvg==
+  dependencies:
+    "@babel/code-frame" "^7.14.5"
+    "@babel/generator" "^7.15.4"
+    "@babel/helper-compilation-targets" "^7.15.4"
+    "@babel/helper-module-transforms" "^7.15.4"
+    "@babel/helpers" "^7.15.4"
+    "@babel/parser" "^7.15.5"
+    "@babel/template" "^7.15.4"
+    "@babel/traverse" "^7.15.4"
+    "@babel/types" "^7.15.4"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.1.2"
+    semver "^6.3.0"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.15.4", "@babel/generator@^7.7.2":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.15.4.tgz#85acb159a267ca6324f9793986991ee2022a05b0"
+  integrity sha512-d3itta0tu+UayjEORPNz6e1T3FtvWlP5N4V5M+lhp/CxT4oAA7/NcScnpRyspUMLK6tu9MNHmQHxRykuN2R7hw==
+  dependencies:
+    "@babel/types" "^7.15.4"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/helper-compilation-targets@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.15.4.tgz#cf6d94f30fbefc139123e27dd6b02f65aeedb7b9"
+  integrity sha512-rMWPCirulnPSe4d+gwdWXLfAXTTBj8M3guAf5xFQJ0nvFY7tfNAFnWdqaHegHlgDZOCT4qvhF3BYlSJag8yhqQ==
+  dependencies:
+    "@babel/compat-data" "^7.15.0"
+    "@babel/helper-validator-option" "^7.14.5"
+    browserslist "^4.16.6"
+    semver "^6.3.0"
+
+"@babel/helper-function-name@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.15.4.tgz#845744dafc4381a4a5fb6afa6c3d36f98a787ebc"
+  integrity sha512-Z91cOMM4DseLIGOnog+Z8OI6YseR9bua+HpvLAQ2XayUGU+neTtX+97caALaLdyu53I/fjhbeCnWnRH1O3jFOw==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.15.4"
+    "@babel/template" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-get-function-arity@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.15.4.tgz#098818934a137fce78b536a3e015864be1e2879b"
+  integrity sha512-1/AlxSF92CmGZzHnC515hm4SirTxtpDnLEJ0UyEMgTMZN+6bxXKg04dKhiRx5Enel+SUA1G1t5Ed/yQia0efrA==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-hoist-variables@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.15.4.tgz#09993a3259c0e918f99d104261dfdfc033f178df"
+  integrity sha512-VTy085egb3jUGVK9ycIxQiPbquesq0HUQ+tPO0uv5mPEBZipk+5FkRKiWq5apuyTE9FUrjENB0rCf8y+n+UuhA==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-member-expression-to-functions@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.4.tgz#bfd34dc9bba9824a4658b0317ec2fd571a51e6ef"
+  integrity sha512-cokOMkxC/BTyNP1AlY25HuBWM32iCEsLPI4BHDpJCHHm1FU2E7dKWWIXJgQgSFiu4lp8q3bL1BIKwqkSUviqtA==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-module-imports@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.15.4.tgz#e18007d230632dea19b47853b984476e7b4e103f"
+  integrity sha512-jeAHZbzUwdW/xHgHQ3QmWR4Jg6j15q4w/gCfwZvtqOxoo5DKtLHk8Bsf4c5RZRC7NmLEs+ohkdq8jFefuvIxAA==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-module-transforms@^7.15.4":
+  version "7.15.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.15.7.tgz#7da80c8cbc1f02655d83f8b79d25866afe50d226"
+  integrity sha512-ZNqjjQG/AuFfekFTY+7nY4RgBSklgTu970c7Rj3m/JOhIu5KPBUuTA9AY6zaKcUvk4g6EbDXdBnhi35FAssdSw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.15.4"
+    "@babel/helper-replace-supers" "^7.15.4"
+    "@babel/helper-simple-access" "^7.15.4"
+    "@babel/helper-split-export-declaration" "^7.15.4"
+    "@babel/helper-validator-identifier" "^7.15.7"
+    "@babel/template" "^7.15.4"
+    "@babel/traverse" "^7.15.4"
+    "@babel/types" "^7.15.6"
+
+"@babel/helper-optimise-call-expression@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz#f310a5121a3b9cc52d9ab19122bd729822dee171"
+  integrity sha512-E/z9rfbAOt1vDW1DR7k4SzhzotVV5+qMciWV6LaG1g4jeFrkDlJedjtV4h0i4Q/ITnUu+Pk08M7fczsB9GXBDw==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.8.0":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
+  integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
+
+"@babel/helper-replace-supers@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.15.4.tgz#52a8ab26ba918c7f6dee28628b07071ac7b7347a"
+  integrity sha512-/ztT6khaXF37MS47fufrKvIsiQkx1LBRvSJNzRqmbyeZnTwU9qBxXYLaaT/6KaxfKhjs2Wy8kG8ZdsFUuWBjzw==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.15.4"
+    "@babel/helper-optimise-call-expression" "^7.15.4"
+    "@babel/traverse" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-simple-access@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.15.4.tgz#ac368905abf1de8e9781434b635d8f8674bcc13b"
+  integrity sha512-UzazrDoIVOZZcTeHHEPYrr1MvTR/K+wgLg6MY6e1CJyaRhbibftF6fR2KU2sFRtI/nERUZR9fBd6aKgBlIBaPg==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-split-export-declaration@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.15.4.tgz#aecab92dcdbef6a10aa3b62ab204b085f776e257"
+  integrity sha512-HsFqhLDZ08DxCpBdEVtKmywj6PQbwnF6HHybur0MAnkAKnlS6uHkwnmRIkElB2Owpfb4xL4NwDmDLFubueDXsw==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
 "@babel/helper-validator-identifier@^7.14.5":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.8.tgz#32be33a756f29e278a0d644fa08a2c9e0f88a34c"
   integrity sha512-ZGy6/XQjllhYQrNw/3zfWRwZCTVSiBLZ9DHVZxn9n2gip/7ab8mv2TWlKPIBk26RwedCBoWdjLmn+t9na2Gcow==
 
+"@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.15.7":
+  version "7.15.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
+  integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
+
+"@babel/helper-validator-option@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
+  integrity sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==
+
+"@babel/helpers@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.15.4.tgz#5f40f02050a3027121a3cf48d497c05c555eaf43"
+  integrity sha512-V45u6dqEJ3w2rlryYYXf6i9rQ5YMNu4FLS6ngs8ikblhu2VdR1AqAd6aJjBzmf2Qzh6KOLqKHxEN9+TFbAkAVQ==
+  dependencies:
+    "@babel/template" "^7.15.4"
+    "@babel/traverse" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
@@ -30,6 +181,139 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/parser@^7.1.0", "@babel/parser@^7.15.4", "@babel/parser@^7.15.5", "@babel/parser@^7.7.2":
+  version "7.15.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.7.tgz#0c3ed4a2eb07b165dfa85b3cc45c727334c4edae"
+  integrity sha512-rycZXvQ+xS9QyIcJ9HXeDWf1uxqlbVFAUq0Rq0dbc50Zb/+wUe/ehyfzGfm9KZZF0kBejYgxltBXocP+gKdL2g==
+
+"@babel/plugin-syntax-async-generators@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-bigint@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
+  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.8.3":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
+  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-syntax-import-meta@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
+  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-top-level-await@^7.8.3":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
+  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-typescript@^7.7.2":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.14.5.tgz#b82c6ce471b165b5ce420cf92914d6fb46225716"
+  integrity sha512-u6OXzDaIXjEstBRRoBCQ/uKQKlbuaeE5in0RvWdA4pN6AhqxTIwUsnHPU1CFZA/amYObMsuWhYfRl3Ch90HD0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/template@^7.15.4", "@babel/template@^7.3.3":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.15.4.tgz#51898d35dcf3faa670c4ee6afcfd517ee139f194"
+  integrity sha512-UgBAfEa1oGuYgDIPM2G+aHa4Nlo9Lh6mGD2bDBGMTbYnc38vulXPuC1MGjYILIEmlwl6Rd+BPR9ee3gm20CBtg==
+  dependencies:
+    "@babel/code-frame" "^7.14.5"
+    "@babel/parser" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.7.2":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.4.tgz#ff8510367a144bfbff552d9e18e28f3e2889c22d"
+  integrity sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==
+  dependencies:
+    "@babel/code-frame" "^7.14.5"
+    "@babel/generator" "^7.15.4"
+    "@babel/helper-function-name" "^7.15.4"
+    "@babel/helper-hoist-variables" "^7.15.4"
+    "@babel/helper-split-export-declaration" "^7.15.4"
+    "@babel/parser" "^7.15.4"
+    "@babel/types" "^7.15.4"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.0.0", "@babel/types@^7.15.4", "@babel/types@^7.15.6", "@babel/types@^7.3.0", "@babel/types@^7.3.3":
+  version "7.15.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.6.tgz#99abdc48218b2881c058dd0a7ab05b99c9be758f"
+  integrity sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.14.9"
+    to-fast-properties "^2.0.0"
+
+"@bcoe/v8-coverage@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
+  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -64,6 +348,190 @@
   resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
   integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==
 
+"@istanbuljs/load-nyc-config@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
+  integrity sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==
+  dependencies:
+    camelcase "^5.3.1"
+    find-up "^4.1.0"
+    get-package-type "^0.1.0"
+    js-yaml "^3.13.1"
+    resolve-from "^5.0.0"
+
+"@istanbuljs/schema@^0.1.2":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
+  integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
+
+"@jest/console@^27.2.4":
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-27.2.4.tgz#2f1a4bf82b9940065d4818fac271def99ec55e5e"
+  integrity sha512-94znCKynPZpDpYHQ6esRJSc11AmONrVkBOBZiD7S+bSubHhrUfbS95EY5HIOxhm4PQO7cnvZkL3oJcY0oMA+Wg==
+  dependencies:
+    "@jest/types" "^27.2.4"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^27.2.4"
+    jest-util "^27.2.4"
+    slash "^3.0.0"
+
+"@jest/core@^27.2.4":
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.2.4.tgz#0b932da787d64848eab720dbb88e5b7a3f86e539"
+  integrity sha512-UNQLyy+rXoojNm2MGlapgzWhZD1CT1zcHZQYeiD0xE7MtJfC19Q6J5D/Lm2l7i4V97T30usKDoEtjI8vKwWcLg==
+  dependencies:
+    "@jest/console" "^27.2.4"
+    "@jest/reporters" "^27.2.4"
+    "@jest/test-result" "^27.2.4"
+    "@jest/transform" "^27.2.4"
+    "@jest/types" "^27.2.4"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.8.1"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-changed-files "^27.2.4"
+    jest-config "^27.2.4"
+    jest-haste-map "^27.2.4"
+    jest-message-util "^27.2.4"
+    jest-regex-util "^27.0.6"
+    jest-resolve "^27.2.4"
+    jest-resolve-dependencies "^27.2.4"
+    jest-runner "^27.2.4"
+    jest-runtime "^27.2.4"
+    jest-snapshot "^27.2.4"
+    jest-util "^27.2.4"
+    jest-validate "^27.2.4"
+    jest-watcher "^27.2.4"
+    micromatch "^4.0.4"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/environment@^27.2.4":
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.2.4.tgz#db3e60f7dd30ab950f6ce2d6d7293ed9a6b7cbcd"
+  integrity sha512-wkuui5yr3SSQW0XD0Qm3TATUbL/WE3LDEM3ulC+RCQhMf2yxhci8x7svGkZ4ivJ6Pc94oOzpZ6cdHBAMSYd1ew==
+  dependencies:
+    "@jest/fake-timers" "^27.2.4"
+    "@jest/types" "^27.2.4"
+    "@types/node" "*"
+    jest-mock "^27.2.4"
+
+"@jest/fake-timers@^27.2.4":
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.2.4.tgz#00df08bd60332bd59503cb5b6db21e4903785f86"
+  integrity sha512-cs/TzvwWUM7kAA6Qm/890SK6JJ2pD5RfDNM3SSEom6BmdyV6OiWP1qf/pqo6ts6xwpcM36oN0wSEzcZWc6/B6w==
+  dependencies:
+    "@jest/types" "^27.2.4"
+    "@sinonjs/fake-timers" "^8.0.1"
+    "@types/node" "*"
+    jest-message-util "^27.2.4"
+    jest-mock "^27.2.4"
+    jest-util "^27.2.4"
+
+"@jest/globals@^27.2.4":
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.2.4.tgz#0aeb22b011f8c8c4b8ff3b4dbd1ee0392fe0dd8a"
+  integrity sha512-DRsRs5dh0i+fA9mGHylTU19+8fhzNJoEzrgsu+zgJoZth3x8/0juCQ8nVVdW1er4Cqifb/ET7/hACYVPD0dBEA==
+  dependencies:
+    "@jest/environment" "^27.2.4"
+    "@jest/types" "^27.2.4"
+    expect "^27.2.4"
+
+"@jest/reporters@^27.2.4":
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.2.4.tgz#1482ff007f2e919d85c54b1563abb8b2ea2d5198"
+  integrity sha512-LHeSdDnDZkDnJ8kvnjcqV8P1Yv/32yL4d4XfR5gBiy3xGO0onwll1QEbvtW96fIwhx2nejug0GTaEdNDoyr3fQ==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^27.2.4"
+    "@jest/test-result" "^27.2.4"
+    "@jest/transform" "^27.2.4"
+    "@jest/types" "^27.2.4"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    graceful-fs "^4.2.4"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^4.0.3"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.0.2"
+    jest-haste-map "^27.2.4"
+    jest-resolve "^27.2.4"
+    jest-util "^27.2.4"
+    jest-worker "^27.2.4"
+    slash "^3.0.0"
+    source-map "^0.6.0"
+    string-length "^4.0.1"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^8.1.0"
+
+"@jest/source-map@^27.0.6":
+  version "27.0.6"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-27.0.6.tgz#be9e9b93565d49b0548b86e232092491fb60551f"
+  integrity sha512-Fek4mi5KQrqmlY07T23JRi0e7Z9bXTOOD86V/uS0EIW4PClvPDqZOyFlLpNJheS6QI0FNX1CgmPjtJ4EA/2M+g==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.2.4"
+    source-map "^0.6.0"
+
+"@jest/test-result@^27.2.4":
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.2.4.tgz#d1ca8298d168f1b0be834bfb543b1ac0294c05d7"
+  integrity sha512-eU+PRo0+lIS01b0dTmMdVZ0TtcRSxEaYquZTRFMQz6CvsehGhx9bRzi9Zdw6VROviJyv7rstU+qAMX5pNBmnfQ==
+  dependencies:
+    "@jest/console" "^27.2.4"
+    "@jest/types" "^27.2.4"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-sequencer@^27.2.4":
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.2.4.tgz#df66422a3e9e7440ce8b7498e255fa6b52c0bc03"
+  integrity sha512-fpk5eknU3/DXE2QCCG1wv/a468+cfPo3Asu6d6yUtM9LOPh709ubZqrhuUOYfM8hXMrIpIdrv1CdCrWWabX0rQ==
+  dependencies:
+    "@jest/test-result" "^27.2.4"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^27.2.4"
+    jest-runtime "^27.2.4"
+
+"@jest/transform@^27.2.4":
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.2.4.tgz#2fe5b6836895f7a1b8bdec442c51e83943c62733"
+  integrity sha512-n5FlX2TH0oQGwyVDKPxdJ5nI2sO7TJBFe3u3KaAtt7TOiV4yL+Y+rSFDl+Ic5MpbiA/eqXmLAQxjnBmWgS2rEA==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^27.2.4"
+    babel-plugin-istanbul "^6.0.0"
+    chalk "^4.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^27.2.4"
+    jest-regex-util "^27.0.6"
+    jest-util "^27.2.4"
+    micromatch "^4.0.4"
+    pirates "^4.0.1"
+    slash "^3.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "^3.0.0"
+
+"@jest/types@^27.2.4":
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.2.4.tgz#2430042a66e00dc5b140c3636f4474d464c21ee8"
+  integrity sha512-IDO2ezTxeMvQAHxzG/ZvEyA47q0aVfzT95rGFl7bZs/Go0aIucvfDbS2rmnoEdXxlLQhcolmoG/wvL/uKx4tKA==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^16.0.0"
+    chalk "^4.0.0"
+
 "@lerna/add@4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@lerna/add/-/add-4.0.0.tgz#c36f57d132502a57b9e7058d1548b7a565ef183f"
@@ -982,6 +1450,20 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@sinonjs/commons@^1.7.0":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
+  integrity sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==
+  dependencies:
+    type-detect "4.0.8"
+
+"@sinonjs/fake-timers@^8.0.1":
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-8.0.1.tgz#1c1c9a91419f804e59ae8df316a07dd1c3a76b94"
+  integrity sha512-AU7kwFxreVd6OAXcAFlKSmZquiRUU0FvYm44k1Y1QbK7Co4m0aqfGMhjykIeQp/H6rcl+nFmj0zfdUcGVs9Dew==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -992,6 +1474,39 @@
   resolved "https://registry.yarnpkg.com/@tsconfig/svelte/-/svelte-1.0.13.tgz#2fa34376627192c0d643ce54964915e2bd3a58e4"
   integrity sha512-5lYJP45Xllo4yE/RUBccBT32eBlRDbqN8r1/MIvQbKxW3aFqaYPCNgm8D5V20X4ShHcwvYWNlKg3liDh1MlBoA==
 
+"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14":
+  version "7.1.16"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.16.tgz#bc12c74b7d65e82d29876b5d0baf5c625ac58702"
+  integrity sha512-EAEHtisTMM+KaKwfWdC3oyllIqswlznXCIVCt7/oRNrh+DhgT4UEBNC/jlADNjvw7UnfbcdkGQcPVZ1xYiLcrQ==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__generator@*":
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.3.tgz#f456b4b2ce79137f768aa130d2423d2f0ccfaba5"
+  integrity sha512-/GWCmzJWqV7diQW54smJZzWbSFf4QYtF71WCKhcx6Ru/tFyQIY2eiiITcCAeuPbNSvT9YCGkVMqqvSk2Z0mXiA==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.1.tgz#3d1a48fd9d6c0edfd56f2ff578daed48f36c8969"
+  integrity sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.14.2.tgz#ffcd470bbb3f8bf30481678fb5502278ca833a43"
+  integrity sha512-K2waXdXBi2302XUdcHcR1jCeU0LL4TD9HRs/gk0N2Xvrht+G/BfJa4QObBQZfhMdxiCpV3COl5Nfq4uKTeTnJA==
+  dependencies:
+    "@babel/types" "^7.3.0"
+
 "@types/chai@^4.1.4", "@types/chai@^4.1.6":
   version "4.2.21"
   resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.2.21.tgz#9f35a5643129df132cf3b5c1ec64046ea1af0650"
@@ -1017,6 +1532,13 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/graceful-fs@^4.1.2":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
+  integrity sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/inquirer@0.0.43":
   version "0.0.43"
   resolved "https://registry.yarnpkg.com/@types/inquirer/-/inquirer-0.0.43.tgz#1eb0bbb4648e6cc568bd396c1e989f620ad01273"
@@ -1025,6 +1547,33 @@
     "@types/rx" "*"
     "@types/through" "*"
 
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
+  integrity sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==
+
+"@types/istanbul-lib-report@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
+  integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz#9153fe98bba2bd565a63add9436d6f0d7f8468ff"
+  integrity sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
+"@types/jest@^27.0.2":
+  version "27.0.2"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.0.2.tgz#ac383c4d4aaddd29bbf2b916d8d105c304a5fcd7"
+  integrity sha512-4dRxkS/AFX0c5XW6IPMNOydLn2tEhNhJV7DnYK+0bjoJZ+QTmfucBlihX7aoEsh/ocYtkLC73UbnBXBXIxsULA==
+  dependencies:
+    jest-diff "^27.0.0"
+    pretty-format "^27.0.0"
+
 "@types/jsdom@^16.2.12", "@types/jsdom@^16.2.4":
   version "16.2.13"
   resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-16.2.13.tgz#126c8b7441b159d6234610a48de77b6066f1823f"
@@ -1049,11 +1598,6 @@
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
-"@types/mocha@^5.2.5":
-  version "5.2.7"
-  resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-5.2.7.tgz#315d570ccb56c53452ff8638738df60726d5b6ea"
-  integrity sha512-NYrtPht0wGzhwe9+/idPaBB+TqkY9AhTvOLMkThm0IoEfLaiVQZwBwyJ5puCkO3AUCWrmcoePjp2mbFocKy4SQ==
-
 "@types/node@*":
   version "16.4.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.0.tgz#2c219eaa3b8d1e4d04f4dd6e40bc68c7467d5272"
@@ -1084,6 +1628,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.1.tgz#f8ae4fbcd2b9ba4ff934698e28778961f9cb22ca"
   integrity sha512-ARATsLdrGPUnaBvxLhUlnltcMgn7pQG312S8ccdYlnyijabrX9RN/KN/iGj9Am96CoW8e/K9628BA7Bv4XHdrA==
 
+"@types/prettier@^2.1.5":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.4.1.tgz#e1303048d5389563e130f5bdd89d37a99acb75eb"
+  integrity sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw==
+
 "@types/prettier@^2.3.2":
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.3.2.tgz#fc8c2825e4ed2142473b4a81064e6e081463d1b3"
@@ -1228,6 +1777,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/stack-utils@^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
+  integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
+
 "@types/through@*":
   version "0.0.30"
   resolved "https://registry.yarnpkg.com/@types/through/-/through-0.0.30.tgz#e0e42ce77e897bd6aead6f6ea62aeb135b8a3895"
@@ -1240,6 +1794,18 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.1.tgz#8f80dd965ad81f3e1bc26d6f5c727e132721ff40"
   integrity sha512-Y0K95ThC3esLEYD6ZuqNek29lNX2EM1qxV8y2FTLUB0ff5wWrk7az+mLrnNFUnaXcgKye22+sFBRXOgpPILZNg==
 
+"@types/yargs-parser@*":
+  version "20.2.1"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.1.tgz#3b9ce2489919d9e4fea439b76916abc34b2df129"
+  integrity sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw==
+
+"@types/yargs@^16.0.0":
+  version "16.0.4"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-16.0.4.tgz#26aad98dd2c2a38e421086ea9ad42b9e51642977"
+  integrity sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==
+  dependencies:
+    "@types/yargs-parser" "*"
+
 "@types/yauzl@^2.9.1":
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.2.tgz#c48e5d56aff1444409e39fa164b0b4d4552a7b7a"
@@ -1471,6 +2037,11 @@ ansi-regex@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
   integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -1490,7 +2061,12 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
-anymatch@~3.1.2:
+ansi-styles@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
+  integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
+
+anymatch@^3.0.3, anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
   integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
@@ -1599,11 +2175,6 @@ assert-plus@1.0.0, assert-plus@^1.0.0:
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
   integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
 
-assertion-error@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
-  integrity sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==
-
 astral-regex@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
@@ -1643,6 +2214,67 @@ babel-code-frame@^6.20.0:
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
+babel-jest@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.2.4.tgz#21ed6729d51bdd75470bbbf3c8b08d86209fb0dc"
+  integrity sha512-f24OmxyWymk5jfgLdlCMu4fTs4ldxFBIdn5sJdhvGC1m08rSkJ5hYbWkNmfBSvE/DjhCVNSHXepxsI6THGfGsg==
+  dependencies:
+    "@jest/transform" "^27.2.4"
+    "@jest/types" "^27.2.4"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.0.0"
+    babel-preset-jest "^27.2.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    slash "^3.0.0"
+
+babel-plugin-istanbul@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
+  integrity sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^4.0.0"
+    test-exclude "^6.0.0"
+
+babel-plugin-jest-hoist@^27.2.0:
+  version "27.2.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.2.0.tgz#79f37d43f7e5c4fdc4b2ca3e10cc6cf545626277"
+  integrity sha512-TOux9khNKdi64mW+0OIhcmbAn75tTlzKhxmiNXevQaPbrBYK7YKjP1jl6NHTJ6XR5UgUrJbCnWlKVnJn29dfjw==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.0.0"
+    "@types/babel__traverse" "^7.0.6"
+
+babel-preset-current-node-syntax@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
+  integrity sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==
+  dependencies:
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-bigint" "^7.8.3"
+    "@babel/plugin-syntax-class-properties" "^7.8.3"
+    "@babel/plugin-syntax-import-meta" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.8.3"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-top-level-await" "^7.8.3"
+
+babel-preset-jest@^27.2.0:
+  version "27.2.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-27.2.0.tgz#556bbbf340608fed5670ab0ea0c8ef2449fba885"
+  integrity sha512-z7MgQ3peBwN5L5aCqBKnF6iqdlvZvFUQynEhu0J+X9nHLU72jO3iY331lcYrg+AssJ8q7xsv5/3AICzVmJ/wvg==
+  dependencies:
+    babel-plugin-jest-hoist "^27.2.0"
+    babel-preset-current-node-syntax "^1.0.0"
+
 babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
@@ -1777,11 +2409,6 @@ browser-resolve@^1.11.3:
   dependencies:
     resolve "1.1.7"
 
-browser-stdout@1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
-  integrity sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==
-
 browserslist@^4.0.0:
   version "4.16.6"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
@@ -1793,6 +2420,31 @@ browserslist@^4.0.0:
     escalade "^3.1.1"
     node-releases "^1.1.71"
 
+browserslist@^4.16.6:
+  version "4.17.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.17.3.tgz#2844cd6eebe14d12384b0122d217550160d2d624"
+  integrity sha512-59IqHJV5VGdcJZ+GZ2hU5n4Kv3YiASzW6Xk5g9tf5a/MAzGeFwgGWU39fVzNIOVcgB3+Gp+kiQu0HEfTVU/3VQ==
+  dependencies:
+    caniuse-lite "^1.0.30001264"
+    electron-to-chromium "^1.3.857"
+    escalade "^3.1.1"
+    node-releases "^1.1.77"
+    picocolors "^0.2.1"
+
+bs-logger@0.x:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
+  integrity sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==
+  dependencies:
+    fast-json-stable-stringify "2.x"
+
+bser@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
+  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
+  dependencies:
+    node-int64 "^0.4.0"
+
 buffer-crc32@~0.2.3:
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
@@ -1910,6 +2562,11 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
+camelcase@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
+  integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -1925,6 +2582,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001219:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001246.tgz#fe17d9919f87124d6bb416ef7b325356d69dc76c"
   integrity sha512-Tc+ff0Co/nFNbLOrziBXmMVtpt9S2c2Y+Z9Nk9Khj09J+0zR9ejvIW5qkZAErCbOrVODCx/MN+GpB5FNBs5GFA==
 
+caniuse-lite@^1.0.30001264:
+  version "1.0.30001265"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001265.tgz#0613c9e6c922e422792e6fcefdf9a3afeee4f8c3"
+  integrity sha512-YzBnspggWV5hep1m9Z6sZVLOt7vrju8xWooFAgN6BA5qvy98qPAPb7vNUzypFaoh2pb3vlfzbDO8tB57UPGbtw==
+
 capture-stack-trace@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
@@ -1935,18 +2597,6 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
-chai@^4.1.2, chai@^4.2.0:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.4.tgz#b55e655b31e1eac7099be4c08c21964fce2e6c49"
-  integrity sha512-yS5H68VYOCtN1cjfwumDSuzn/9c+yza4f3reKXlE5rUg7SFcCEy90gJvydNgOYtblyf4Zi6jIWRnXOgErta0KA==
-  dependencies:
-    assertion-error "^1.1.0"
-    check-error "^1.0.2"
-    deep-eql "^3.0.1"
-    get-func-name "^2.0.0"
-    pathval "^1.1.1"
-    type-detect "^4.0.5"
-
 chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -1983,16 +2633,16 @@ chalk@^4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+char-regex@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
+  integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
+
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-check-error@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
-  integrity sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=
-
 cheerio-select@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-1.5.0.tgz#faf3daeb31b17c5e1a9dabcee288aaf8aafa5823"
@@ -2052,6 +2702,16 @@ ci-info@^2.0.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
+ci-info@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.2.0.tgz#2876cb948a498797b5236f0095bc057d0dca38b6"
+  integrity sha512-dVqRX7fLUm8J6FgHJ418XuIgDLZDkYcDFTeL6TA2gt5WlIZUQrrH6EZrNClwT/H0FateUsZkGIOPRrLbP+PR9A==
+
+cjs-module-lexer@^1.0.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
+  integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -2116,6 +2776,11 @@ cmd-shim@^4.1.0:
   dependencies:
     mkdirp-infer-owner "^2.0.0"
 
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
+
 coa@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
@@ -2130,6 +2795,11 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
+collect-v8-coverage@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
+  integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
+
 color-convert@^1.9.0, color-convert@^1.9.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -2195,11 +2865,6 @@ combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@2.15.1:
-  version "2.15.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
-  integrity sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==
-
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -2375,6 +3040,13 @@ conventional-recommended-bump@^6.1.0:
     meow "^8.0.0"
     q "^1.5.1"
 
+convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
+  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
@@ -2693,13 +3365,6 @@ debug@2.6.9, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
-  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
-  dependencies:
-    ms "2.0.0"
-
 debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
@@ -2747,13 +3412,6 @@ dedent@^0.7.0:
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
 
-deep-eql@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-3.0.1.tgz#dfc9404400ad1c8fe023e7da1df1c147c4b444df"
-  integrity sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==
-  dependencies:
-    type-detect "^4.0.0"
-
 deep-extend@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
@@ -2764,6 +3422,11 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 defaults@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
@@ -2813,6 +3476,11 @@ detect-indent@^6.0.0:
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
   integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
 
+detect-newline@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
+  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
+
 devtools-protocol@0.0.869402:
   version "0.0.869402"
   resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.869402.tgz#03ade701761742e43ae4de5dc188bcd80f156d8d"
@@ -2826,7 +3494,12 @@ dezalgo@^1.0.0:
     asap "^2.0.0"
     wrappy "1"
 
-diff@3.5.0, diff@^3.0.1, diff@^3.1.0, diff@^3.2.0:
+diff-sequences@^27.0.6:
+  version "27.0.6"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.0.6.tgz#3305cb2e55a033924054695cc66019fd7f8e5723"
+  integrity sha512-ag6wfpBFyNXZ0p8pcuIDS//D8H062ZQJ3fzYxjpmeKjnz8W4pekL3AI8VohmyZmsWW2PWaHgjsmqR6L13101VQ==
+
+diff@^3.0.1, diff@^3.1.0, diff@^3.2.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
   integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
@@ -2952,6 +3625,16 @@ electron-to-chromium@^1.3.723:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.784.tgz#c370be79374b02b7f13e8a8fb0d7a02641161dac"
   integrity sha512-JTPxdUibkefeomWNaYs8lI/x/Zb4cOhZWX+d7kpzsNKzUd07pNuo/AcHeNJ/qgEchxM1IAxda9aaGUhKN/poOg==
 
+electron-to-chromium@^1.3.857:
+  version "1.3.860"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.860.tgz#d612e54ed75fa524c12af8da3ad8121ebfe2802b"
+  integrity sha512-gWwGZ+Wv4Mou2SJRH6JQzhTPjL5f95SX7n6VkLTQ/Q/INsZLZNQ1vH2GlZjozKyvT0kkFuCmWTwIoCj+/hUDPw==
+
+emittery@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
+  integrity sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -3068,7 +3751,7 @@ escape-html@~1.0.3:
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
 
-escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@@ -3272,6 +3955,11 @@ execa@^5.0.0:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+  integrity sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=
+
 expand-brackets@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
@@ -3286,6 +3974,18 @@ expand-range@^1.8.1:
   dependencies:
     fill-range "^2.1.0"
 
+expect@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-27.2.4.tgz#4debf546050bcdad8914a8c95fec7662e02bf67c"
+  integrity sha512-gOtuonQ8TCnbNNCSw2fhVzRf8EFYDII4nB5NmG4IEV0rbUnW1I5zXvoTntU4iicB/Uh0oZr20NGlOLdJiwsOZA==
+  dependencies:
+    "@jest/types" "^27.2.4"
+    ansi-styles "^5.0.0"
+    jest-get-type "^27.0.6"
+    jest-matcher-utils "^27.2.4"
+    jest-message-util "^27.2.4"
+    jest-regex-util "^27.0.6"
+
 express@^4.16.4:
   version "4.17.1"
   resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
@@ -3390,7 +4090,7 @@ fast-glob@^3.1.1:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
-fast-json-stable-stringify@^2.0.0:
+fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
@@ -3423,6 +4123,13 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fb-watchman@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.1.tgz#fc84fb39d2709cf3ff6d743706157bb5708a8a85"
+  integrity sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==
+  dependencies:
+    bser "2.1.1"
+
 fd-slicer@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
@@ -3641,7 +4348,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@~2.3.2:
+fsevents@^2.3.2, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -3677,16 +4384,16 @@ generic-names@^2.0.1:
   dependencies:
     loader-utils "^1.1.0"
 
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
 get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-func-name@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
-  integrity sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=
-
 get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
@@ -3696,6 +4403,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-package-type@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
+  integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
+
 get-pkg-repo@^4.0.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/get-pkg-repo/-/get-pkg-repo-4.1.2.tgz#c4ffd60015cf091be666a0212753fc158f01a4c0"
@@ -3811,18 +4523,6 @@ glob-parent@^5.1.1, glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-glob@7.1.2:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
-  integrity sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
@@ -3853,6 +4553,11 @@ global-dirs@^0.1.0:
   dependencies:
     ini "^1.3.4"
 
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
 globals@^13.6.0, globals@^13.9.0:
   version "13.10.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.10.0.tgz#60ba56c3ac2ca845cfbf4faeca727ad9dd204676"
@@ -3905,16 +4610,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
-graceful-fs@^4.1.15, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.3:
+graceful-fs@^4.1.15, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.3, graceful-fs@^4.2.4:
   version "4.2.8"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
   integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
 
-growl@1.10.5:
-  version "1.10.5"
-  resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
-  integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==
-
 handlebars@^4.7.6:
   version "4.7.7"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
@@ -3989,11 +4689,6 @@ has@^1.0.0, has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-he@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
-  integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0=
-
 hex-color-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
@@ -4028,6 +4723,11 @@ html-encoding-sniffer@^2.0.1:
   dependencies:
     whatwg-encoding "^1.0.5"
 
+html-escaper@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
+  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
+
 htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
@@ -4377,6 +5077,13 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
+is-ci@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-3.0.0.tgz#c7e7be3c9d8eef7d0fa144390bd1e4b88dc4c994"
+  integrity sha512-kDXyttuLeslKAHYL/K28F2YkM3x5jvFPEw3yXbRptXydjD9rpLEz+C5K5iutY9ZiUu6AP41JdvRQwF4Iqs4ZCQ==
+  dependencies:
+    ci-info "^3.1.1"
+
 is-color-stop@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
@@ -4450,6 +5157,11 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-generator-fn@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
+  integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
+
 is-glob@^2.0.0, is-glob@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
@@ -4666,6 +5378,126 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
+istanbul-lib-coverage@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.1.tgz#e8900b3ed6069759229cf30f7067388d148aeb5e"
+  integrity sha512-GvCYYTxaCPqwMjobtVcVKvSHtAGe48MNhGjpK8LtVF8K0ISX7hCKl85LgtuaSneWVyQmaGcW3iXVV3GaZSLpmQ==
+
+istanbul-lib-instrument@^4.0.0, istanbul-lib-instrument@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz#873c6fff897450118222774696a3f28902d77c1d"
+  integrity sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==
+  dependencies:
+    "@babel/core" "^7.7.5"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.0.0"
+    semver "^6.3.0"
+
+istanbul-lib-report@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
+  integrity sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==
+  dependencies:
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^3.0.0"
+    supports-color "^7.1.0"
+
+istanbul-lib-source-maps@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.0.tgz#75743ce6d96bb86dc7ee4352cf6366a23f0b1ad9"
+  integrity sha512-c16LpFRkR8vQXyHZ5nLpY35JZtzj1PQY1iZmesUbf1FZHbIupcWfjgOXBY9YHkLEQ6puz1u4Dgj6qmU/DisrZg==
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^3.0.0"
+    source-map "^0.6.1"
+
+istanbul-reports@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.0.2.tgz#d593210e5000683750cb09fc0644e4b6e27fd53b"
+  integrity sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
+
+jest-changed-files@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.2.4.tgz#d7de46e90e5a599c47e260760f5ab53516e835e6"
+  integrity sha512-eeO1C1u4ex7pdTroYXezr+rbr957myyVoKGjcY4R1TJi3A+9v+4fu1Iv9J4eLq1bgFyT3O3iRWU9lZsEE7J72Q==
+  dependencies:
+    "@jest/types" "^27.2.4"
+    execa "^5.0.0"
+    throat "^6.0.1"
+
+jest-circus@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.2.4.tgz#3bd898a29dcaf6a506f3f1b780dff5f67ca83c23"
+  integrity sha512-TtheheTElrGjlsY9VxkzUU1qwIx05ItIusMVKnvNkMt4o/PeegLRcjq3Db2Jz0GGdBalJdbzLZBgeulZAJxJWA==
+  dependencies:
+    "@jest/environment" "^27.2.4"
+    "@jest/test-result" "^27.2.4"
+    "@jest/types" "^27.2.4"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^0.7.0"
+    expect "^27.2.4"
+    is-generator-fn "^2.0.0"
+    jest-each "^27.2.4"
+    jest-matcher-utils "^27.2.4"
+    jest-message-util "^27.2.4"
+    jest-runtime "^27.2.4"
+    jest-snapshot "^27.2.4"
+    jest-util "^27.2.4"
+    pretty-format "^27.2.4"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+    throat "^6.0.1"
+
+jest-cli@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.2.4.tgz#acda7f367aa6e674723fc1a7334e0ae1799448d2"
+  integrity sha512-4kpQQkg74HYLaXo3nzwtg4PYxSLgL7puz1LXHj5Tu85KmlIpxQFjRkXlx4V47CYFFIDoyl3rHA/cXOxUWyMpNg==
+  dependencies:
+    "@jest/core" "^27.2.4"
+    "@jest/test-result" "^27.2.4"
+    "@jest/types" "^27.2.4"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    import-local "^3.0.2"
+    jest-config "^27.2.4"
+    jest-util "^27.2.4"
+    jest-validate "^27.2.4"
+    prompts "^2.0.1"
+    yargs "^16.2.0"
+
+jest-config@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.2.4.tgz#0204969f5ae2e5190d47be2c14c04d631b7836e2"
+  integrity sha512-tWy0UxhdzqiKyp4l5Vq4HxLyD+gH5td+GCF3c22/DJ0bYAOsMo+qi2XtbJI6oYMH5JOJQs9nLW/r34nvFCehjA==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/test-sequencer" "^27.2.4"
+    "@jest/types" "^27.2.4"
+    babel-jest "^27.2.4"
+    chalk "^4.0.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.1"
+    graceful-fs "^4.2.4"
+    is-ci "^3.0.0"
+    jest-circus "^27.2.4"
+    jest-environment-jsdom "^27.2.4"
+    jest-environment-node "^27.2.4"
+    jest-get-type "^27.0.6"
+    jest-jasmine2 "^27.2.4"
+    jest-regex-util "^27.0.6"
+    jest-resolve "^27.2.4"
+    jest-runner "^27.2.4"
+    jest-util "^27.2.4"
+    jest-validate "^27.2.4"
+    micromatch "^4.0.4"
+    pretty-format "^27.2.4"
+
 jest-diff@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-23.6.0.tgz#1500f3f16e850bb3d71233408089be099f610c7d"
@@ -4676,11 +5508,121 @@ jest-diff@^23.6.0:
     jest-get-type "^22.1.0"
     pretty-format "^23.6.0"
 
+jest-diff@^27.0.0, jest-diff@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.2.4.tgz#171c51d3d2c105c457100fee6e7bf7cee51c8d8c"
+  integrity sha512-bLAVlDSCR3gqUPGv+4nzVpEXGsHh98HjUL7Vb2hVyyuBDoQmja8eJb0imUABsuxBeUVmf47taJSAd9nDrwWKEg==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^27.0.6"
+    jest-get-type "^27.0.6"
+    pretty-format "^27.2.4"
+
+jest-docblock@^27.0.6:
+  version "27.0.6"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-27.0.6.tgz#cc78266acf7fe693ca462cbbda0ea4e639e4e5f3"
+  integrity sha512-Fid6dPcjwepTFraz0YxIMCi7dejjJ/KL9FBjPYhBp4Sv1Y9PdhImlKZqYU555BlN4TQKaTc+F2Av1z+anVyGkA==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-each@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-27.2.4.tgz#b4f280aafd63129ba82e345f0e74c5a10200aeef"
+  integrity sha512-w9XVc+0EDBUTJS4xBNJ7N2JCcWItFd006lFjz77OarAQcQ10eFDBMrfDv2GBJMKlXe9aq0HrIIF51AXcZrRJyg==
+  dependencies:
+    "@jest/types" "^27.2.4"
+    chalk "^4.0.0"
+    jest-get-type "^27.0.6"
+    jest-util "^27.2.4"
+    pretty-format "^27.2.4"
+
+jest-environment-jsdom@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.2.4.tgz#39ae80bbb8675306bfaf0440be1e5f877554539a"
+  integrity sha512-X70pTXFSypD7AIzKT1mLnDi5hP9w9mdTRcOGOmoDoBrNyNEg4rYm6d4LQWFLc9ps1VnMuDOkFSG0wjSNYGjkng==
+  dependencies:
+    "@jest/environment" "^27.2.4"
+    "@jest/fake-timers" "^27.2.4"
+    "@jest/types" "^27.2.4"
+    "@types/node" "*"
+    jest-mock "^27.2.4"
+    jest-util "^27.2.4"
+    jsdom "^16.6.0"
+
+jest-environment-node@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.2.4.tgz#b79f98cb36e0c9111aac859c9c99f04eb2f74ff6"
+  integrity sha512-ZbVbFSnbzTvhLOIkqh5lcLuGCCFvtG4xTXIRPK99rV2KzQT3kNg16KZwfTnLNlIiWCE8do960eToeDfcqmpSAw==
+  dependencies:
+    "@jest/environment" "^27.2.4"
+    "@jest/fake-timers" "^27.2.4"
+    "@jest/types" "^27.2.4"
+    "@types/node" "*"
+    jest-mock "^27.2.4"
+    jest-util "^27.2.4"
+
 jest-get-type@^22.1.0:
   version "22.4.3"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-22.4.3.tgz#e3a8504d8479342dd4420236b322869f18900ce4"
   integrity sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==
 
+jest-get-type@^27.0.6:
+  version "27.0.6"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.0.6.tgz#0eb5c7f755854279ce9b68a9f1a4122f69047cfe"
+  integrity sha512-XTkK5exIeUbbveehcSR8w0bhH+c0yloW/Wpl+9vZrjzztCPWrxhHwkIFpZzCt71oRBsgxmuUfxEqOYoZI2macg==
+
+jest-haste-map@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.2.4.tgz#f8974807bedf07348ca9fd24e5861ab7c8e61aba"
+  integrity sha512-bkJ4bT00T2K+1NZXbRcyKnbJ42I6QBvoDNMTAQQDBhaGNnZreiQKUNqax0e6hLTx7E75pKDeltVu3V1HAdu+YA==
+  dependencies:
+    "@jest/types" "^27.2.4"
+    "@types/graceful-fs" "^4.1.2"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-regex-util "^27.0.6"
+    jest-serializer "^27.0.6"
+    jest-util "^27.2.4"
+    jest-worker "^27.2.4"
+    micromatch "^4.0.4"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
+jest-jasmine2@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.2.4.tgz#4a1608133dbdb4d68b5929bfd785503ed9c9ba51"
+  integrity sha512-fcffjO/xLWLVnW2ct3No4EksxM5RyPwHDYu9QU+90cC+/eSMLkFAxS55vkqsxexOO5zSsZ3foVpMQcg/amSeIQ==
+  dependencies:
+    "@babel/traverse" "^7.1.0"
+    "@jest/environment" "^27.2.4"
+    "@jest/source-map" "^27.0.6"
+    "@jest/test-result" "^27.2.4"
+    "@jest/types" "^27.2.4"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    expect "^27.2.4"
+    is-generator-fn "^2.0.0"
+    jest-each "^27.2.4"
+    jest-matcher-utils "^27.2.4"
+    jest-message-util "^27.2.4"
+    jest-runtime "^27.2.4"
+    jest-snapshot "^27.2.4"
+    jest-util "^27.2.4"
+    pretty-format "^27.2.4"
+    throat "^6.0.1"
+
+jest-leak-detector@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.2.4.tgz#9bb7eab26a73bb280e9298be8d80f389288ec8f1"
+  integrity sha512-SrcHWbe0EHg/bw2uBjVoHacTo5xosl068x2Q0aWsjr2yYuW2XwqrSkZV4lurUop0jhv1709ymG4or+8E4sH27Q==
+  dependencies:
+    jest-get-type "^27.0.6"
+    pretty-format "^27.2.4"
+
 jest-matcher-utils@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-23.6.0.tgz#726bcea0c5294261a7417afb6da3186b4b8cac80"
@@ -4690,6 +5632,16 @@ jest-matcher-utils@^23.6.0:
     jest-get-type "^22.1.0"
     pretty-format "^23.6.0"
 
+jest-matcher-utils@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.2.4.tgz#008fff018151415ad1b6cfc083fd70fe1e012525"
+  integrity sha512-nQeLfFAIPPkyhkDfifAPfP/U5wm1x0fLtAzqXZSSKckXDNuk2aaOfQiDYv1Mgf5GY6yOsxfUnvNm3dDjXM+BXw==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^27.2.4"
+    jest-get-type "^27.0.6"
+    pretty-format "^27.2.4"
+
 jest-message-util@^23.4.0:
   version "23.4.0"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-23.4.0.tgz#17610c50942349508d01a3d1e0bda2c079086a9f"
@@ -4701,6 +5653,48 @@ jest-message-util@^23.4.0:
     slash "^1.0.0"
     stack-utils "^1.0.1"
 
+jest-message-util@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.2.4.tgz#667e8c0f2b973156d1bac7398a7f677705cafaca"
+  integrity sha512-wbKT/BNGnBVB9nzi+IoaLkXt6fbSvqUxx+IYY66YFh96J3goY33BAaNG3uPqaw/Sh/FR9YpXGVDfd5DJdbh4nA==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^27.2.4"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    micromatch "^4.0.4"
+    pretty-format "^27.2.4"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-mock@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.2.4.tgz#c8f0ef33f73d8ff53e3f60b16d59f1128f4072ae"
+  integrity sha512-iVRU905rutaAoUcrt5Tm1JoHHWi24YabqEGXjPJI4tAyA6wZ7mzDi3GrZ+M7ebgWBqUkZE93GAx1STk7yCMIQA==
+  dependencies:
+    "@jest/types" "^27.2.4"
+    "@types/node" "*"
+
+jest-pnp-resolver@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
+  integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
+
+jest-regex-util@^27.0.6:
+  version "27.0.6"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.0.6.tgz#02e112082935ae949ce5d13b2675db3d8c87d9c5"
+  integrity sha512-SUhPzBsGa1IKm8hx2F4NfTGGp+r7BXJ4CulsZ1k2kI+mGLG+lxGrs76veN2LF/aUdGosJBzKgXmNCw+BzFqBDQ==
+
+jest-resolve-dependencies@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.2.4.tgz#20c41cc02b66aa45169b282356ec73b133013089"
+  integrity sha512-i5s7Uh9B3Q6uwxLpMhNKlgBf6pcemvWaORxsW1zNF/YCY3jd5EftvnGBI+fxVwJ1CBxkVfxqCvm1lpZkbaoGmg==
+  dependencies:
+    "@jest/types" "^27.2.4"
+    jest-regex-util "^27.0.6"
+    jest-snapshot "^27.2.4"
+
 jest-resolve@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-23.6.0.tgz#cf1d1a24ce7ee7b23d661c33ba2150f3aebfa0ae"
@@ -4710,6 +5704,91 @@ jest-resolve@^23.6.0:
     chalk "^2.0.1"
     realpath-native "^1.0.0"
 
+jest-resolve@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.2.4.tgz#d3b999f073ff84a8ae109ce99ff7f3223048701a"
+  integrity sha512-IsAO/3+3BZnKjI2I4f3835TBK/90dxR7Otgufn3mnrDFTByOSXclDi3G2XJsawGV4/18IMLARJ+V7Wm7t+J89Q==
+  dependencies:
+    "@jest/types" "^27.2.4"
+    chalk "^4.0.0"
+    escalade "^3.1.1"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^27.2.4"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^27.2.4"
+    jest-validate "^27.2.4"
+    resolve "^1.20.0"
+    slash "^3.0.0"
+
+jest-runner@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.2.4.tgz#d816f4cb4af04f3cba703afcf5a35a335b77cad4"
+  integrity sha512-hIo5PPuNUyVDidZS8EetntuuJbQ+4IHWxmHgYZz9FIDbG2wcZjrP6b52uMDjAEQiHAn8yn8ynNe+TL8UuGFYKg==
+  dependencies:
+    "@jest/console" "^27.2.4"
+    "@jest/environment" "^27.2.4"
+    "@jest/test-result" "^27.2.4"
+    "@jest/transform" "^27.2.4"
+    "@jest/types" "^27.2.4"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.8.1"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-docblock "^27.0.6"
+    jest-environment-jsdom "^27.2.4"
+    jest-environment-node "^27.2.4"
+    jest-haste-map "^27.2.4"
+    jest-leak-detector "^27.2.4"
+    jest-message-util "^27.2.4"
+    jest-resolve "^27.2.4"
+    jest-runtime "^27.2.4"
+    jest-util "^27.2.4"
+    jest-worker "^27.2.4"
+    source-map-support "^0.5.6"
+    throat "^6.0.1"
+
+jest-runtime@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.2.4.tgz#170044041e5d30625ab8d753516bbe503f213a5c"
+  integrity sha512-ICKzzYdjIi70P17MZsLLIgIQFCQmIjMFf+xYww3aUySiUA/QBPUTdUqo5B2eg4HOn9/KkUsV0z6GVgaqAPBJvg==
+  dependencies:
+    "@jest/console" "^27.2.4"
+    "@jest/environment" "^27.2.4"
+    "@jest/fake-timers" "^27.2.4"
+    "@jest/globals" "^27.2.4"
+    "@jest/source-map" "^27.0.6"
+    "@jest/test-result" "^27.2.4"
+    "@jest/transform" "^27.2.4"
+    "@jest/types" "^27.2.4"
+    "@types/yargs" "^16.0.0"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    execa "^5.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^27.2.4"
+    jest-message-util "^27.2.4"
+    jest-mock "^27.2.4"
+    jest-regex-util "^27.0.6"
+    jest-resolve "^27.2.4"
+    jest-snapshot "^27.2.4"
+    jest-util "^27.2.4"
+    jest-validate "^27.2.4"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+    yargs "^16.2.0"
+
+jest-serializer@^27.0.6:
+  version "27.0.6"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-27.0.6.tgz#93a6c74e0132b81a2d54623251c46c498bb5bec1"
+  integrity sha512-PtGdVK9EGC7dsaziskfqaAPib6wTViY3G8E5wz9tLVPhHyiDNTZn/xjZ4khAw+09QkoOVpn7vF5nPSN6dtBexA==
+  dependencies:
+    "@types/node" "*"
+    graceful-fs "^4.2.4"
+
 jest-snapshot@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-23.6.0.tgz#f9c2625d1b18acda01ec2d2b826c0ce58a5aa17a"
@@ -4726,6 +5805,73 @@ jest-snapshot@^23.6.0:
     pretty-format "^23.6.0"
     semver "^5.5.0"
 
+jest-snapshot@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-27.2.4.tgz#277b2269437e3ffcb91d95a73b24becf33c5a871"
+  integrity sha512-5DFxK31rYS8X8C6WXsFx8XxrxW3PGa6+9IrUcZdTLg1aEyXDGIeiBh4jbwvh655bg/9vTETbEj/njfZicHTZZw==
+  dependencies:
+    "@babel/core" "^7.7.2"
+    "@babel/generator" "^7.7.2"
+    "@babel/parser" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/traverse" "^7.7.2"
+    "@babel/types" "^7.0.0"
+    "@jest/transform" "^27.2.4"
+    "@jest/types" "^27.2.4"
+    "@types/babel__traverse" "^7.0.4"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^27.2.4"
+    graceful-fs "^4.2.4"
+    jest-diff "^27.2.4"
+    jest-get-type "^27.0.6"
+    jest-haste-map "^27.2.4"
+    jest-matcher-utils "^27.2.4"
+    jest-message-util "^27.2.4"
+    jest-resolve "^27.2.4"
+    jest-util "^27.2.4"
+    natural-compare "^1.4.0"
+    pretty-format "^27.2.4"
+    semver "^7.3.2"
+
+jest-util@^27.0.0, jest-util@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.2.4.tgz#3d7ce081b2e7f4cfe0156452ac01f3cb456cc656"
+  integrity sha512-mW++4u+fSvAt3YBWm5IpbmRAceUqa2B++JlUZTiuEt2AmNYn0Yw5oay4cP17TGsMINRNPSGiJ2zNnX60g+VbFg==
+  dependencies:
+    "@jest/types" "^27.2.4"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    is-ci "^3.0.0"
+    picomatch "^2.2.3"
+
+jest-validate@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.2.4.tgz#b66d462b2fb93d7e16a47d1aa8763d5600bf2cfa"
+  integrity sha512-VMtbxbkd7LHnIH7PChdDtrluCFRJ4b1YV2YJzNwwsASMWftq/HgqiqjvptBOWyWOtevgO3f14wPxkPcLlVBRog==
+  dependencies:
+    "@jest/types" "^27.2.4"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^27.0.6"
+    leven "^3.1.0"
+    pretty-format "^27.2.4"
+
+jest-watcher@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.2.4.tgz#b1d5c39ab94f59f4f35f66cc96f7761a10e0cfc4"
+  integrity sha512-LXC/0+dKxhK7cfF7reflRYlzDIaQE+fL4ynhKhzg8IMILNMuI4xcjXXfUJady7OR4/TZeMg7X8eHx8uan9vqaQ==
+  dependencies:
+    "@jest/test-result" "^27.2.4"
+    "@jest/types" "^27.2.4"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    jest-util "^27.2.4"
+    string-length "^4.0.1"
+
 jest-worker@^26.2.1:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
@@ -4735,6 +5881,24 @@ jest-worker@^26.2.1:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
+jest-worker@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.2.4.tgz#881455df75e22e7726a53f43703ab74d6b36f82d"
+  integrity sha512-Zq9A2Pw59KkVjBBKD1i3iE2e22oSjXhUKKuAK1HGX8flGwkm6NMozyEYzKd41hXc64dbd/0eWFeEEuxqXyhM+g==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jest@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-27.2.4.tgz#70e27bef873138afc123aa4769f7124c50ad3efb"
+  integrity sha512-h4uqb1EQLfPulWyUFFWv9e9Nn8sCqsJ/j3wk/KCY0p4s4s0ICCfP3iMf6hRf5hEhsDyvyrCgKiZXma63gMz16A==
+  dependencies:
+    "@jest/core" "^27.2.4"
+    import-local "^3.0.2"
+    jest-cli "^27.2.4"
+
 js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
@@ -4796,6 +5960,39 @@ jsdom@^16.4.0:
     ws "^7.4.5"
     xml-name-validator "^3.0.0"
 
+jsdom@^16.6.0:
+  version "16.7.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.7.0.tgz#918ae71965424b197c819f8183a754e18977b710"
+  integrity sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==
+  dependencies:
+    abab "^2.0.5"
+    acorn "^8.2.4"
+    acorn-globals "^6.0.0"
+    cssom "^0.4.4"
+    cssstyle "^2.3.0"
+    data-urls "^2.0.0"
+    decimal.js "^10.2.1"
+    domexception "^2.0.1"
+    escodegen "^2.0.0"
+    form-data "^3.0.0"
+    html-encoding-sniffer "^2.0.1"
+    http-proxy-agent "^4.0.1"
+    https-proxy-agent "^5.0.0"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.0"
+    parse5 "6.0.1"
+    saxes "^5.0.1"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.0.0"
+    w3c-hr-time "^1.0.2"
+    w3c-xmlserializer "^2.0.0"
+    webidl-conversions "^6.1.0"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.5.0"
+    ws "^7.4.6"
+    xml-name-validator "^3.0.0"
+
 jsdom@^17.0.0:
   version "17.0.0"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-17.0.0.tgz#3ec82d1d30030649c8defedc45fff6aa3e5d06ae"
@@ -4829,6 +6026,11 @@ jsdom@^17.0.0:
     ws "^8.0.0"
     xml-name-validator "^3.0.0"
 
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
 json-parse-better-errors@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
@@ -4864,6 +6066,13 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
+json5@2.x, json5@^2.1.2:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
+  integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
+  dependencies:
+    minimist "^1.2.5"
+
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -4907,7 +6116,7 @@ kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
-kleur@^3.0.0:
+kleur@^3.0.0, kleur@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
@@ -4943,6 +6152,11 @@ lerna@^4.0.0:
     import-local "^3.0.2"
     npmlog "^4.1.2"
 
+leven@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
+  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -5104,7 +6318,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.12, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.7.0:
+lodash@4.x, lodash@^4.17.12, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -5158,7 +6372,7 @@ make-dir@^3.0.0:
   dependencies:
     semver "^6.0.0"
 
-make-error@^1.1.1:
+make-error@1.x, make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
@@ -5206,6 +6420,13 @@ make-fetch-happen@^9.0.1:
     socks-proxy-agent "^5.0.0"
     ssri "^8.0.0"
 
+makeerror@1.0.x:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
+  integrity sha1-4BpckQnyr3lmDk6LlYd5AYT1qWw=
+  dependencies:
+    tmpl "1.0.x"
+
 map-obj@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
@@ -5366,7 +6587,7 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.4:
+"minimatch@2 || 3", minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -5382,11 +6603,6 @@ minimist-options@4.1.0:
     is-plain-obj "^1.1.0"
     kind-of "^6.0.3"
 
-minimist@0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
-  integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
-
 minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
@@ -5493,13 +6709,6 @@ mkdirp-infer-owner@^2.0.0:
     infer-owner "^1.0.4"
     mkdirp "^1.0.3"
 
-mkdirp@0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
-  integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
-  dependencies:
-    minimist "0.0.8"
-
 mkdirp@^0.5.1, mkdirp@^0.5.4, mkdirp@^0.5.5, mkdirp@~0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
@@ -5512,23 +6721,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-mocha@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/mocha/-/mocha-5.2.0.tgz#6d8ae508f59167f940f2b5b3c4a612ae50c90ae6"
-  integrity sha512-2IUgKDhc3J7Uug+FxMXuqIyYzH7gJjXECKe/w43IGgQHTSj3InJi+yAA7T24L9bQMRKiUEHxEX37G5JpVUGLcQ==
-  dependencies:
-    browser-stdout "1.3.1"
-    commander "2.15.1"
-    debug "3.1.0"
-    diff "3.5.0"
-    escape-string-regexp "1.0.5"
-    glob "7.1.2"
-    growl "1.10.5"
-    he "1.1.1"
-    minimatch "3.0.4"
-    mkdirp "0.5.1"
-    supports-color "5.4.0"
-
 modify-values@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
@@ -5638,11 +6830,26 @@ node-gyp@^7.1.0:
     tar "^6.0.2"
     which "^2.0.2"
 
+node-int64@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
+  integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
+
+node-modules-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
+  integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
+
 node-releases@^1.1.71:
   version "1.1.73"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.73.tgz#dd4e81ddd5277ff846b80b52bb40c49edf7a7b20"
   integrity sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==
 
+node-releases@^1.1.77:
+  version "1.1.77"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.77.tgz#50b0cfede855dd374e7585bf228ff34e57c1c32e"
+  integrity sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==
+
 nopt@^4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"
@@ -6221,11 +7428,6 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-pathval@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.1.tgz#8534e77a77ce7ac5a2512ea21e0fdb8fcf6c3d8d"
-  integrity sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==
-
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
@@ -6236,6 +7438,11 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+picocolors@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
+  integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
@@ -6273,6 +7480,13 @@ pinkie@^2.0.0:
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
   integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
 
+pirates@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
+  integrity sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==
+  dependencies:
+    node-modules-regexp "^1.0.0"
+
 pkg-dir@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
@@ -6688,6 +7902,16 @@ pretty-format@^23.6.0:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
+pretty-format@^27.0.0, pretty-format@^27.2.4:
+  version "27.2.4"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.2.4.tgz#08ea39c5eab41b082852d7093059a091f6ddc748"
+  integrity sha512-NUjw22WJHldzxyps2YjLZkUj6q1HvjqFezkB9Y2cklN8NtVZN/kZEXGZdFw4uny3oENzV5EEMESrkI0YDUH8vg==
+  dependencies:
+    "@jest/types" "^27.2.4"
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -6716,6 +7940,14 @@ promise.series@^0.2.0:
   resolved "https://registry.yarnpkg.com/promise.series/-/promise.series-0.2.0.tgz#2cc7ebe959fc3a6619c04ab4dbdc9e452d864bbd"
   integrity sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=
 
+prompts@^2.0.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.1.tgz#befd3b1195ba052f9fd2fde8a486c4e82ee77f61"
+  integrity sha512-EQyfIuO2hPDsX1L/blblV+H7I0knhgAd82cVneCwcdND9B8AuCDuRcBH6yIcG4dFzlOUqbazQqwGjx5xmsNLuQ==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.5"
+
 promzard@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/promzard/-/promzard-0.3.0.tgz#26a5d6ee8c7dee4cb12208305acfb93ba382a9ee"
@@ -6884,6 +8116,11 @@ rc@^1.0.1, rc@^1.1.6:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-is@^17.0.1:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -7196,7 +8433,7 @@ rimraf@^2.6.1, rimraf@^2.6.3:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^3.0.2:
+rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
@@ -7347,18 +8584,18 @@ semver-diff@^2.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
-semver@^6.0.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
-
-semver@^7.1.1, semver@^7.1.3, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
+semver@7.x, semver@^7.1.1, semver@^7.1.3, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
   version "7.3.5"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
   integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^6.0.0, semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
 send@0.17.1:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -7478,6 +8715,11 @@ sirv@^0.4.6:
     "@polka/url" "^0.5.0"
     mime "^2.3.1"
 
+sisteransi@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
+  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
+
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
@@ -7546,7 +8788,7 @@ source-map-support@^0.5.6, source-map-support@~0.5.19:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map@^0.5.6:
+source-map@^0.5.0, source-map@^0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -7650,6 +8892,13 @@ stack-utils@^1.0.1:
   dependencies:
     escape-string-regexp "^2.0.0"
 
+stack-utils@^2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.5.tgz#d25265fca995154659dbbfba3b49254778d2fdd5"
+  integrity sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
 "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
@@ -7665,6 +8914,14 @@ string-hash@^1.1.1:
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
   integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=
 
+string-length@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
+  integrity sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==
+  dependencies:
+    char-regex "^1.0.2"
+    strip-ansi "^6.0.0"
+
 string-width@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -7816,13 +9073,6 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
-supports-color@5.4.0:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.4.0.tgz#1c6b337402c2137605efe19f10fec390f6faab54"
-  integrity sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==
-  dependencies:
-    has-flag "^3.0.0"
-
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -7856,6 +9106,21 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+supports-color@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-hyperlinks@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.2.0.tgz#4f77b42488765891774b70c79babd87f9bd594bb"
+  integrity sha512-6sXEzV5+I5j8Bmq9/vUphGRM/RJNT9SCURJLjwfOg51heRtguGWDzcaBlgAzKhQa0EVNpPEKzQuBwZ8S8WaCeQ==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
 svelte-check@^1.4.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-1.6.0.tgz#fcc7b28252a89be0e4cd369c58bbf8e76e81295f"
@@ -7991,6 +9256,14 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
+terminal-link@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"
+  integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    supports-hyperlinks "^2.0.0"
+
 terser@^5.0.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.7.1.tgz#2dc7a61009b66bb638305cb2a824763b116bf784"
@@ -8000,6 +9273,15 @@ terser@^5.0.0:
     source-map "~0.7.2"
     source-map-support "~0.5.19"
 
+test-exclude@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
+  integrity sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==
+  dependencies:
+    "@istanbuljs/schema" "^0.1.2"
+    glob "^7.1.4"
+    minimatch "^3.0.4"
+
 text-extensions@^1.0.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-1.9.0.tgz#1853e45fee39c945ce6f6c36b2d659b5aabc2a26"
@@ -8010,6 +9292,11 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+throat@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"
+  integrity sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==
+
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@@ -8052,11 +9339,21 @@ tmp@^0.0.33:
   dependencies:
     os-tmpdir "~1.0.2"
 
+tmpl@1.0.x:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
+  integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
+
 to-fast-properties@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
   integrity sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=
 
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -8110,6 +9407,20 @@ trim-repeated@^1.0.0:
   dependencies:
     escape-string-regexp "^1.0.2"
 
+ts-jest@^27.0.5:
+  version "27.0.5"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-27.0.5.tgz#0b0604e2271167ec43c12a69770f0bb65ad1b750"
+  integrity sha512-lIJApzfTaSSbtlksfFNHkWOzLJuuSm4faFAfo5kvzOiRAuoN4/eKxVJ2zEAho8aecE04qX6K1pAzfH5QHL1/8w==
+  dependencies:
+    bs-logger "0.x"
+    fast-json-stable-stringify "2.x"
+    jest-util "^27.0.0"
+    json5 "2.x"
+    lodash "4.x"
+    make-error "1.x"
+    semver "7.x"
+    yargs-parser "20.x"
+
 ts-node@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-7.0.1.tgz#9562dc2d1e6d248d24bc55f773e3f614337d9baf"
@@ -8187,7 +9498,7 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-type-detect@^4.0.0, type-detect@^4.0.5:
+type-detect@4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
@@ -8434,6 +9745,15 @@ v8-compile-cache@^2.0.3:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
   integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
 
+v8-to-istanbul@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.1.0.tgz#0aeb763894f1a0a1676adf8a8b7612a38902446c"
+  integrity sha512-/PRhfd8aTNp9Ggr62HPzXg2XasNFGy5PBt0Rp04du7/8GNNSgxFL6WBTkgMKSL9bFjH+8kKEG3f37FmxiTqUUA==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+    source-map "^0.7.3"
+
 validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -8482,6 +9802,13 @@ w3c-xmlserializer@^2.0.0:
   dependencies:
     xml-name-validator "^3.0.0"
 
+walker@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
+  integrity sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=
+  dependencies:
+    makeerror "1.0.x"
+
 wcwidth@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
@@ -8660,6 +9987,11 @@ ws@^7.2.3, ws@^7.4.3, ws@^7.4.5:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.3.tgz#160835b63c7d97bfab418fc1b8a9fced2ac01a74"
   integrity sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==
 
+ws@^7.4.6:
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.5.tgz#8b4bc4af518cfabd0473ae4f99144287b33eb881"
+  integrity sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==
+
 ws@^8.0.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.1.0.tgz#75e5ec608f66d3d3934ec6dbc4ebc8a34a68638c"
@@ -8715,6 +10047,11 @@ yargs-parser@20.2.4:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
   integrity sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==
 
+yargs-parser@20.x, yargs-parser@^20.2.2, yargs-parser@^20.2.3:
+  version "20.2.9"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
+  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
+
 yargs-parser@^18.1.3:
   version "18.1.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
@@ -8723,11 +10060,6 @@ yargs-parser@^18.1.3:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^20.2.2, yargs-parser@^20.2.3:
-  version "20.2.9"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
-  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
-
 yargs@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"

From 6483a594ac836e2ce835a41b1e0ee0cab4fb295d Mon Sep 17 00:00:00 2001
From: yz-yu <yanzhen@smartx.com>
Date: Thu, 7 Oct 2021 14:14:58 +0800
Subject: [PATCH 454/524] update repl tools and script, close #338 (#722)

---
 package.json                                |  3 ++-
 packages/rrweb/package.json                 |  2 +-
 packages/rrweb/scripts/{repl.ts => repl.js} | 30 ++++++++++-----------
 3 files changed, 17 insertions(+), 18 deletions(-)
 rename packages/rrweb/scripts/{repl.ts => repl.js} (85%)

diff --git a/package.json b/package.json
index 9b90a36033..a9bb70e9f8 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "lerna": "^4.0.0"
   },
   "scripts": {
-    "lerna": "lerna"
+    "lerna": "lerna",
+    "repl": "cd packages/rrweb && npm run repl"
   }
 }
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 136c4723bb..3d085da9b5 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -8,7 +8,7 @@
     "test": "npm run bundle:browser && jest",
     "test:headless": "npm run bundle:browser && PUPPETEER_HEADLESS=true jest",
     "test:watch": "PUPPETEER_HEADLESS=true npm run test -- --watch",
-    "repl": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true ts-node scripts/repl.ts",
+    "repl": "npm run bundle:browser && node scripts/repl.js",
     "bundle:browser": "cross-env BROWSER_ONLY=true rollup --config",
     "bundle": "rollup --config",
     "typings": "tsc -d --declarationDir typings",
diff --git a/packages/rrweb/scripts/repl.ts b/packages/rrweb/scripts/repl.js
similarity index 85%
rename from packages/rrweb/scripts/repl.ts
rename to packages/rrweb/scripts/repl.js
index 1b933079a5..f868341898 100644
--- a/packages/rrweb/scripts/repl.ts
+++ b/packages/rrweb/scripts/repl.js
@@ -1,28 +1,27 @@
 /* tslint:disable: no-console */
 
-import * as fs from 'fs';
-import * as path from 'path';
-import * as EventEmitter from 'events';
-import * as inquirer from 'inquirer';
-import * as puppeteer from 'puppeteer';
-import { eventWithTime } from '../src/types';
+const fs = require('fs');
+const path = require('path');
+const EventEmitter = require('events');
+const inquirer = require('inquirer');
+const puppeteer = require('puppeteer');
 
 const emitter = new EventEmitter();
 
-function getCode(): string {
+function getCode() {
   const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js');
   return fs.readFileSync(bundlePath, 'utf8');
 }
 
 (async () => {
   const code = getCode();
-  let events: eventWithTime[] = [];
+  let events = [];
 
   start();
 
   async function start() {
     events = [];
-    const { url } = await inquirer.prompt<{ url: string }>([
+    const { url } = await inquirer.prompt([
       {
         type: 'input',
         name: 'url',
@@ -35,7 +34,7 @@ function getCode(): string {
     await record(url);
     console.log('Ready to record. You can do any interaction on the page.');
 
-    const { shouldReplay } = await inquirer.prompt<{ shouldReplay: boolean }>([
+    const { shouldReplay } = await inquirer.prompt([
       {
         type: 'confirm',
         name: 'shouldReplay',
@@ -45,7 +44,7 @@ function getCode(): string {
 
     emitter.emit('done', shouldReplay);
 
-    const { shouldStore } = await inquirer.prompt<{ shouldStore: boolean }>([
+    const { shouldStore } = await inquirer.prompt([
       {
         type: 'confirm',
         name: 'shouldStore',
@@ -57,9 +56,7 @@ function getCode(): string {
       saveEvents();
     }
 
-    const { shouldRecordAnother } = await inquirer.prompt<{
-      shouldRecordAnother: boolean;
-    }>([
+    const { shouldRecordAnother } = await inquirer.prompt([
       {
         type: 'confirm',
         name: 'shouldRecordAnother',
@@ -74,7 +71,7 @@ function getCode(): string {
     }
   }
 
-  async function record(url: string) {
+  async function record(url) {
     const browser = await puppeteer.launch({
       headless: false,
       defaultViewport: {
@@ -90,9 +87,10 @@ function getCode(): string {
     const page = await browser.newPage();
     await page.goto(url, {
       waitUntil: 'domcontentloaded',
+      timeout: 300000,
     });
 
-    await page.exposeFunction('_replLog', (event: eventWithTime) => {
+    await page.exposeFunction('_replLog', (event) => {
       events.push(event);
     });
     await page.evaluate(`;${code}

From f410668e3fa5ee15350b793103746cda1535dc71 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Thu, 7 Oct 2021 08:15:49 +0200
Subject: [PATCH 455/524] VSCode Workspace (#718)

* Add workspace file

* Only setup jest tests for rrdom

* Update .vscode/monorepo.code-workspace
---
 .gitignore                      |  3 ++-
 .vscode/monorepo.code-workspace | 26 ++++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 .vscode/monorepo.code-workspace

diff --git a/.gitignore b/.gitignore
index 3a22b849b7..c70cf42b7f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
-.vscode
+.vscode/*
+!/.vscode/monorepo.code-workspace
 .idea
 node_modules
 package-lock.json
diff --git a/.vscode/monorepo.code-workspace b/.vscode/monorepo.code-workspace
new file mode 100644
index 0000000000..4caba94749
--- /dev/null
+++ b/.vscode/monorepo.code-workspace
@@ -0,0 +1,26 @@
+{
+  "folders": [
+    {
+      "name": "Monorepo",
+      "path": ".."
+    },
+    {
+      "path": "../packages/rrdom"
+    },
+    {
+      "path": "../packages/rrweb"
+    },
+    {
+      "path": "../packages/rrweb-player"
+    },
+    {
+      "path": "../packages/rrweb-snapshot"
+    }
+  ],
+  "settings": {
+    "jest.disabledWorkspaceFolders": [
+      "Monorepo",
+      "rrweb-player"
+    ]
+  }
+}

From bcadd25f1f0f1f7c53a98087ae3dc154a4d9ec65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=AD=E5=85=89=E5=BF=97?= <411020382@qq.com>
Date: Wed, 13 Oct 2021 01:22:56 +0900
Subject: [PATCH 456/524] =?UTF-8?q?docs:=20=E5=BD=95=E5=88=B6=E4=B8=8E?=
 =?UTF-8?q?=E5=9B=9E=E6=94=BE=E6=97=B6=E6=9C=80=E5=B8=B8=E7=94=A8=E7=9A=84?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E6=96=B9=E5=BC=8F=20->=20=E5=BD=95=E5=88=B6?=
 =?UTF-8?q?=E4=B8=8E=E5=9B=9E=E6=94=BE=E6=98=AF=E6=9C=80=E5=B8=B8=E7=94=A8?=
 =?UTF-8?q?=E7=9A=84=E4=BD=BF=E7=94=A8=E6=96=B9=E5=BC=8F=20(#729)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/recipes/record-and-replay.zh_CN.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/recipes/record-and-replay.zh_CN.md b/docs/recipes/record-and-replay.zh_CN.md
index 39a40d598f..0c103fc1ec 100644
--- a/docs/recipes/record-and-replay.zh_CN.md
+++ b/docs/recipes/record-and-replay.zh_CN.md
@@ -1,6 +1,6 @@
 # 录制与回放
 
-录制与回放时最常用的使用方式，适用于任何需要采集用户行为数据并重新查看的场景。
+录制与回放是最常用的使用方式，适用于任何需要采集用户行为数据并重新查看的场景。
 
 仅需一个函数调用就可以录制当前页面：
 

From cabd5eb157175dbb6c9fc4e0b60e82cb246f7d3f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 13 Oct 2021 00:42:54 +0800
Subject: [PATCH 457/524] chore(release): publish new version

 - rrweb@1.0.6
 - rrweb-player@0.7.8
 - rrweb-snapshot@1.1.9
---
 packages/rrweb-player/package.json   | 4 ++--
 packages/rrweb-snapshot/package.json | 2 +-
 packages/rrweb/package.json          | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
index cdd2a9516f..64b903a233 100644
--- a/packages/rrweb-player/package.json
+++ b/packages/rrweb-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^1.0.5"
+    "rrweb": "^1.0.6"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
index f95517cbe9..0231d5766d 100644
--- a/packages/rrweb-snapshot/package.json
+++ b/packages/rrweb-snapshot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 3d085da9b5..01b04ba816 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",
@@ -74,6 +74,6 @@
     "@xstate/fsm": "^1.4.0",
     "fflate": "^0.4.4",
     "mitt": "^1.1.3",
-    "rrweb-snapshot": "^1.1.8"
+    "rrweb-snapshot": "^1.1.9"
   }
 }

From 5a2db77fd6c2ef77fa8a920aa8088a2e09ae8320 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 13 Oct 2021 01:09:14 +0800
Subject: [PATCH 458/524] add changelog config

---
 .release-it.json | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 .release-it.json

diff --git a/.release-it.json b/.release-it.json
new file mode 100644
index 0000000000..41e16cf33f
--- /dev/null
+++ b/.release-it.json
@@ -0,0 +1,15 @@
+{
+  "hooks": {},
+  "git": {
+    "commit": false,
+    "tag": false,
+    "push": false
+  },
+  "npm": {
+    "publish": false
+  },
+  "github": {
+    "release": true,
+    "releaseName": "Release ${version}"
+  }
+}
\ No newline at end of file

From 3d378c157b498c42a599320f65d8b6e995ce274a Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 13 Oct 2021 01:11:48 +0800
Subject: [PATCH 459/524] update documentary to readme

---
 README.md       | 2 +-
 README.zh_CN.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index cdcde1b4f5..0bfdbd1cf9 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 
 # rrweb
 
-**[The new adventure of the rrweb community](http://www.myriptide.com/rrweb-community/)**
+**[The rrweb documentary(in Chinese, with English subtitle)](https://www.bilibili.com/video/BV1wL4y1B7wN?share_source=copy_web)**
 
 [![Join the chat at slack](https://img.shields.io/badge/slack-@rrweb-teal.svg?logo=slack)](https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg)
 ![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js?compression=gzip&label=total%20gzip%20size)
diff --git a/README.zh_CN.md b/README.zh_CN.md
index 6fc4d71620..f04c088471 100644
--- a/README.zh_CN.md
+++ b/README.zh_CN.md
@@ -7,7 +7,7 @@
 
 # rrweb
 
-**[rrweb 社区新的征程](http://www.myriptide.com/rrweb-community-cn/)**
+**[rrweb 纪录片（中文）](https://www.bilibili.com/video/BV1wL4y1B7wN?share_source=copy_web)**
 
 [![Join the chat at slack](https://img.shields.io/badge/slack-@rrweb-teal.svg?logo=slack)](https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg)
 ![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js?compression=gzip&label=total%20gzip%20size)

From e9405c560a96985fc6db8bcc4d5993125a001a6e Mon Sep 17 00:00:00 2001
From: Omair Nabiel <nabiel.omair@gmail.com>
Date: Thu, 14 Oct 2021 10:40:50 +0500
Subject: [PATCH 460/524] fix: if handleProgressClick invoked after finished,
 start from where user clicked (#727)

---
 packages/rrweb-player/src/Controller.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/rrweb-player/src/Controller.svelte b/packages/rrweb-player/src/Controller.svelte
index e7e430e007..09e3437f6f 100644
--- a/packages/rrweb-player/src/Controller.svelte
+++ b/packages/rrweb-player/src/Controller.svelte
@@ -165,6 +165,7 @@
       percent = 1;
     }
     const timeOffset = meta.totalTime * percent;
+    finished = false
     goto(timeOffset);
   };
 

From da63418649909e2dee77fe95efa383a0f4e5b8c8 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Sat, 23 Oct 2021 16:06:14 +0100
Subject: [PATCH 461/524] Add Statcounter logo (#738)

---
 README.md       | 5 +++++
 README.zh_CN.md | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/README.md b/README.md
index 0bfdbd1cf9..f7395d69ef 100644
--- a/README.md
+++ b/README.md
@@ -129,5 +129,10 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
         <img width="260px" src="https://www.rrweb.io/logos/posthog.png">
       </a>
     </td>
+    <td align="center">
+      <a href="https://statcounter.com/session-replay/" target="_blank">
+        <img width="260px" src="https://statcounter.com/images/logo-statcounter-arc-blue.svg">
+      </a>
+    </td>
   </tr>
 </table>
diff --git a/README.zh_CN.md b/README.zh_CN.md
index f04c088471..6d37bbb19b 100644
--- a/README.zh_CN.md
+++ b/README.zh_CN.md
@@ -127,5 +127,10 @@ rrweb 主要由 3 部分组成：
         <img width="260px" src="https://www.rrweb.io/logos/posthog.png">
       </a>
     </td>
+    <td align="center">
+      <a href="https://statcounter.com/session-replay/" target="_blank">
+        <img width="260px" src="https://statcounter.com/images/logo-statcounter-arc-blue.svg">
+      </a>
+    </td>
   </tr>
 </table>

From d16bb35a5e65bed44da05ac3cdb6f6157e75b9c4 Mon Sep 17 00:00:00 2001
From: Kamil Walkowiak <kamil@cdev.pl>
Date: Mon, 25 Oct 2021 13:07:37 +0200
Subject: [PATCH 462/524] added CUX logo (#739)

---
 README.md | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index f7395d69ef..f62ec3a976 100644
--- a/README.md
+++ b/README.md
@@ -121,17 +121,22 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
   <tr>
     <td align="center">
       <a href="http://www.smartx.com/" target="_blank">
-        <img width="260px" src="https://www.rrweb.io/logos/smartx.png">
+        <img width="195px" src="https://www.rrweb.io/logos/smartx.png">
       </a>
     </td>
     <td align="center">
       <a href="https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship" target="_blank">
-        <img width="260px" src="https://www.rrweb.io/logos/posthog.png">
+        <img width="195px" src="https://www.rrweb.io/logos/posthog.png">
       </a>
     </td>
     <td align="center">
       <a href="https://statcounter.com/session-replay/" target="_blank">
-        <img width="260px" src="https://statcounter.com/images/logo-statcounter-arc-blue.svg">
+        <img width="195px" src="https://statcounter.com/images/logo-statcounter-arc-blue.svg">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://cux.io" target="_blank">
+        <img style="padding: 8px" alt="The first ever UX automation tool" width="195px" src="https://static.cux.io/logo.svg">
       </a>
     </td>
   </tr>

From c021134ae030bbb62e8b3fa6f4c77e020e605ab4 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Mon, 25 Oct 2021 13:24:22 +0200
Subject: [PATCH 463/524] Add Record Once (#740)

---
 README.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/README.md b/README.md
index f62ec3a976..23be7afd15 100644
--- a/README.md
+++ b/README.md
@@ -140,4 +140,11 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
       </a>
     </td>
   </tr>
+    <tr>
+    <td align="center">
+      <a href="https://recordonce.com/" target="_blank">
+        <img width="195px" src="https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg">
+      </a>
+    </td>
+  </tr>
 </table>

From ad2ca9ee550e0db1d03e82e464626885506181ff Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Mon, 25 Oct 2021 17:04:44 +0100
Subject: [PATCH 464/524] Don't throw away information about the iframe src
 (#733)

* Don't throw away information about the iframe src

* contentDocument is the important one as to whether we are recording an iframe directly
---
 packages/rrweb-snapshot/src/snapshot.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index ef312841d5..0f58d3758e 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -509,7 +509,12 @@ function serializeNode(
       }
       // iframe
       if (tagName === 'iframe' && !keepIframeSrcFn(attributes.src as string)) {
-        delete attributes.src;
+        if (!(n as HTMLIFrameElement).contentDocument) {
+          // we can't record it directly as we can't see into it
+          // preserve the src attribute so a decision can be taken at replay time
+          attributes.rr_src = attributes.src;
+        }
+        delete attributes.src;  // prevent auto loading
       }
       return {
         type: NodeType.Element,

From e039b5ca74439d3107d1802e6d8798432747c53a Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Fri, 29 Oct 2021 15:00:22 +0200
Subject: [PATCH 465/524] Fix typo

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 23be7afd15..392993c148 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 
 # rrweb
 
-**[The rrweb documentary(in Chinese, with English subtitle)](https://www.bilibili.com/video/BV1wL4y1B7wN?share_source=copy_web)**
+**[The rrweb documentary (in Chinese, with English subtitles)](https://www.bilibili.com/video/BV1wL4y1B7wN?share_source=copy_web)**
 
 [![Join the chat at slack](https://img.shields.io/badge/slack-@rrweb-teal.svg?logo=slack)](https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg)
 ![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js?compression=gzip&label=total%20gzip%20size)

From 18d66dca7c85279d08ae60591e9d975f364da00e Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 31 Oct 2021 11:24:41 +0800
Subject: [PATCH 466/524] do not transform xlink:href when the value is an id
 close #566, #741

---
 packages/rrweb-snapshot/src/snapshot.ts       | 14 +++--
 .../__snapshots__/integration.test.ts.snap    | 33 ++++++++++++
 packages/rrweb-snapshot/test/html/svg.html    | 54 +++++++++++++++++++
 .../test/images/symbol-defs.svg               | 12 +++++
 4 files changed, 108 insertions(+), 5 deletions(-)
 create mode 100644 packages/rrweb-snapshot/test/html/svg.html
 create mode 100644 packages/rrweb-snapshot/test/images/symbol-defs.svg

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 0f58d3758e..ca54833297 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -13,6 +13,7 @@ import {
   documentNode,
 } from './types';
 import { isElement, isShadowRoot, maskInputValue } from './utils';
+import { values } from 'puppeteer/DeviceDescriptors';
 
 let _id = 1;
 const tagNameRegex = RegExp('[^a-z0-9-_:]');
@@ -218,7 +219,10 @@ export function transformAttribute(
   value: string,
 ): string {
   // relative path in attribute
-  if (name === 'src' || ((name === 'href' || name === 'xlink:href') && value)) {
+  if (name === 'src' || (name === 'href' && value)) {
+    return absoluteToDoc(doc, value);
+  } else if (name === 'xlink:href' && value && value[0] !== '#') {
+    // xlink:href starts with # is an id pointer
     return absoluteToDoc(doc, value);
   } else if (
     name === 'background' &&
@@ -384,15 +388,15 @@ function serializeNode(
         return {
           type: NodeType.Document,
           childNodes: [],
-          compatMode: (n as HTMLDocument).compatMode,  // probably "BackCompat"
+          compatMode: (n as HTMLDocument).compatMode, // probably "BackCompat"
           rootId,
-        }
+        };
       } else {
         return {
           type: NodeType.Document,
           childNodes: [],
           rootId,
-        }
+        };
       }
     case n.DOCUMENT_TYPE_NODE:
       return {
@@ -514,7 +518,7 @@ function serializeNode(
           // preserve the src attribute so a decision can be taken at replay time
           attributes.rr_src = attributes.src;
         }
-        delete attributes.src;  // prevent auto loading
+        delete attributes.src; // prevent auto loading
       }
       return {
         type: NodeType.Element,
diff --git a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
index c3399843d1..10fad1b6fe 100644
--- a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
@@ -402,6 +402,39 @@ exports[`integration tests [html file]: shadow-dom.html 1`] = `
   </body></html>"
 `;
 
+exports[`integration tests [html file]: svg.html 1`] = `
+"<!DOCTYPE html><html><head>
+    <title>IcoMoon - SVG Icons</title>
+    <meta charset=\\"utf-8\\" />
+    <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\" />
+  </head>
+  <body>
+    <div class=\\"clearfix mhl ptl\\">
+      <h1 class=\\"mvm mtn fgc1\\">Grid Size: 0</h1>
+      <div class=\\"glyph fs1\\">
+        <div class=\\"clearfix pbs\\">
+          <svg xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"Icon Icon-behance\\">
+            <use xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xlink:href=\\"http://localhost:3030/images/symbol-defs.svg#Icon-behance\\"/></svg><span class=\\"name\\"> Icon-behance</span>
+        </div>
+      </div>
+      <div class=\\"glyph fs1\\">
+        <div class=\\"clearfix pbs\\">
+          <svg xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"Icon Icon-linkedin\\">
+            <use xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xlink:href=\\"http://localhost:3030/images/symbol-defs.svg#Icon-linkedin\\"/></svg><span class=\\"name\\"> Icon-linkedin</span>
+        </div>
+      </div>
+    </div>
+    <svg xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" viewBox=\\"0 -1035.6284324052635 9227.414882379479 1501.846702397534\\">
+      <defs>
+        <path id=\\"MJMAIN-39\\" stroke-width=\\"10\\" d=\\"M352 287Q304 211 232 211Q154 211 104 270T44 396Q42 412 42 436V444Q42 537 111 606Q171 666 243 666Q245 666 249 666T257 665H261Q273 665 286 663T323 651T370 619T413 560Q456 472 456 334Q456 194 396 97Q361 41 312 10T208 -22Q147 -22 108 7T68 93T121 149Q143 149 158 135T173 96Q173 78 164 65T148 49T135 44L131 43Q131 41 138 37T164 27T206 22H212Q272 22 313 86Q352 142 352 280V287ZM244 248Q292 248 321 297T351 430Q351 508 343 542Q341 552 337 562T323 588T293 615T246 625Q208 625 181 598Q160 576 154 546T147 441Q147 358 152 329T172 282Q197 248 244 248Z\\"/>
+      </defs>
+      <g stroke=\\"black\\" fill=\\"black\\" stroke-width=\\"0\\" transform=\\"matrix(1 0 0 -1 0 0)\\">
+        <use xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xlink:href=\\"#MJMAIN-39\\" x=\\"394\\" y=\\"0\\"/>
+      </g>
+    </svg>
+  </body></html>"
+`;
+
 exports[`integration tests [html file]: video.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />
diff --git a/packages/rrweb-snapshot/test/html/svg.html b/packages/rrweb-snapshot/test/html/svg.html
new file mode 100644
index 0000000000..3035cd3482
--- /dev/null
+++ b/packages/rrweb-snapshot/test/html/svg.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>IcoMoon - SVG Icons</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <div class="clearfix mhl ptl">
+      <h1 class="mvm mtn fgc1">Grid Size: 0</h1>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="Icon Icon-behance">
+            <use xlink:href="../images/symbol-defs.svg#Icon-behance"></use></svg
+          ><span class="name"> Icon-behance</span>
+        </div>
+      </div>
+      <div class="glyph fs1">
+        <div class="clearfix pbs">
+          <svg class="Icon Icon-linkedin">
+            <use
+              xlink:href="../images/symbol-defs.svg#Icon-linkedin"
+            ></use></svg
+          ><span class="name"> Icon-linkedin</span>
+        </div>
+      </div>
+    </div>
+    <svg
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      viewBox="0 -1035.6284324052635 9227.414882379479 1501.846702397534"
+    >
+      <defs>
+        <path
+          id="MJMAIN-39"
+          stroke-width="10"
+          d="M352 287Q304 211 232 211Q154 211 104 270T44 396Q42 412 42 436V444Q42 537 111 606Q171 666 243 666Q245 666 249 666T257 665H261Q273 665 286 663T323 651T370 619T413 560Q456 472 456 334Q456 194 396 97Q361 41 312 10T208 -22Q147 -22 108 7T68 93T121 149Q143 149 158 135T173 96Q173 78 164 65T148 49T135 44L131 43Q131 41 138 37T164 27T206 22H212Q272 22 313 86Q352 142 352 280V287ZM244 248Q292 248 321 297T351 430Q351 508 343 542Q341 552 337 562T323 588T293 615T246 625Q208 625 181 598Q160 576 154 546T147 441Q147 358 152 329T172 282Q197 248 244 248Z"
+        ></path>
+      </defs>
+      <g
+        stroke="black"
+        fill="black"
+        stroke-width="0"
+        transform="matrix(1 0 0 -1 0 0)"
+      >
+        <use
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          xlink:href="#MJMAIN-39"
+          x="394"
+          y="0"
+        ></use>
+      </g>
+    </svg>
+  </body>
+</html>
diff --git a/packages/rrweb-snapshot/test/images/symbol-defs.svg b/packages/rrweb-snapshot/test/images/symbol-defs.svg
new file mode 100644
index 0000000000..17edc194d4
--- /dev/null
+++ b/packages/rrweb-snapshot/test/images/symbol-defs.svg
@@ -0,0 +1,12 @@
+<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<defs>
+<symbol id="Icon-behance" viewBox="0 0 32 32">
+<title>behance</title>
+<path d="M27.657 9.6c0.343 0 0.571-0.229 0.571-0.571v-1.6c0-0.343-0.229-0.571-0.571-0.571h-6.629c-0.343 0-0.571 0.229-0.571 0.571v1.6c0 0.343 0.229 0.571 0.571 0.571h6.629zM24.571 14.171c1.371 0 2.514 0.686 3.2 1.829h-6.4c0.686-1.143 1.829-1.829 3.2-1.829zM32 18.171c0-4.229-3.314-7.657-7.429-7.657s-7.429 3.429-7.429 7.657c0 4.229 3.314 7.657 7.429 7.657 2.514 0 4.8-1.257 6.171-3.429 0.229-0.229 0.343-0.571 0.457-0.8s0-0.457-0.229-0.457h-3.657c-0.114 0-0.114 0-0.229 0.114-0.686 0.686-1.486 1.029-2.514 1.029-1.829 0-3.314-1.371-3.657-3.2h10.4c0.457 0 0.686-0.343 0.686-0.686v-0.229zM9.943 21.943h-6.4v-5.143h6.4c1.371 0 2.514 1.143 2.514 2.514 0.114 1.486-1.029 2.629-2.514 2.629zM3.543 9.714h5.371c1.029 0 1.829 0.8 1.829 1.829s-0.8 1.829-1.829 1.829h-5.371v-3.657zM13.486 14.4c0.571-0.914 0.914-1.943 0.8-2.971 0-2.971-2.514-5.257-5.486-5.257h-8.114c-0.343 0-0.686 0.343-0.686 0.686v18.171c0 0.343 0.343 0.686 0.686 0.686h9.257c3.429 0 6.286-2.743 6.286-6.171-0.114-2.171-1.143-4-2.743-5.143z"></path>
+</symbol>
+<symbol id="Icon-linkedin" viewBox="0 0 32 32">
+<title>linkedin</title>
+<path d="M32 19.52v11.84h-6.88v-11.040c0-2.72-0.96-4.64-3.52-4.64-1.92 0-3.040 1.28-3.52 2.56-0.16 0.48-0.16 1.12-0.16 1.6v11.52h-6.88c0 0 0.16-18.72 0-20.64h6.88v2.88c0 0 0 0 0 0v0 0c0.96-1.44 2.56-3.36 6.24-3.36 4.48 0 7.84 2.88 7.84 9.28zM3.84 0.64c-2.24 0-3.84 1.6-3.84 3.68 0 1.92 1.44 3.52 3.84 3.52v0c2.4 0 3.84-1.6 3.84-3.52 0-2.080-1.44-3.68-3.84-3.68zM0.48 31.36h6.88v-20.64h-6.88v20.64z"></path>
+</symbol>
+</defs>
+</svg>
\ No newline at end of file

From e9c792265f89e604a7f56eb5a0f4994739b063b6 Mon Sep 17 00:00:00 2001
From: Yun Feng <yun.feng@anu.edu.au>
Date: Thu, 4 Nov 2021 14:11:50 +0800
Subject: [PATCH 467/524] doc: update two outdated links

---
 docs/recipes/console.md       | 2 +-
 docs/recipes/console.zh_CN.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/recipes/console.md b/docs/recipes/console.md
index a9fa14b6d1..ec1d06ec87 100644
--- a/docs/recipes/console.md
+++ b/docs/recipes/console.md
@@ -73,4 +73,4 @@ Description of replay option is as follows:
 | key          | default                                                                                      | description                                                                                                                             |
 | ------------ | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
 | level        | ['log','warn','error',...]                                                                   | Same meaning as that option in recordLog. You can set this option to play levels of log you need.                                       |
-| replayLogger | a console based object that implements the interface [ReplayLogger](../../src/types.ts#L417) | You can also set a replay logger to replay the log messages in a simulated browser console by implementing the interface `ReplayLogger` |
+| replayLogger | a console based object that implements the interface [ReplayLogger](../../packages/rrweb/src/plugins/console/replay/index.ts#L13) | You can also set a replay logger to replay the log messages in a simulated browser console by implementing the interface `ReplayLogger` |
diff --git a/docs/recipes/console.zh_CN.md b/docs/recipes/console.zh_CN.md
index e5d895252e..ab3d19b9b3 100644
--- a/docs/recipes/console.zh_CN.md
+++ b/docs/recipes/console.zh_CN.md
@@ -72,4 +72,4 @@ replayer.play();
 | key          | 默认值                                                                 | 功能                                                                                                        |
 | ------------ | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
 | level        | ['log','warn','error',...]                                             | 与 recordLog 设置选项的含义相同，你可以只播放想要的 console 函数类型                                        |
-| replayLogger | 一个基于 console 的对接口[ReplayLogger](../../src/types.ts#L417)的实现 | 你也可以通过传入一个`ReplayLogger`接口的自己的实现，用 html 模拟一个浏览器控制台，来播放录制的 console 数据 |
+| replayLogger | 一个基于 console 的对接口[ReplayLogger](../../packages/rrweb/src/plugins/console/replay/index.ts#L13)的实现 | 你也可以通过传入一个`ReplayLogger`接口的自己的实现，用 html 模拟一个浏览器控制台，来播放录制的 console 数据 |

From a261f3d4de5c93b05e6ad11c620568593c86ab6c Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Sat, 6 Nov 2021 02:00:07 +0100
Subject: [PATCH 468/524] add root scripts and update contribution guide (#750)

---
 README.md                            | 12 ++++++++----
 package.json                         |  4 ++++
 packages/rrweb-snapshot/package.json |  2 ++
 packages/rrweb/package.json          |  1 +
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 392993c148..60f0528410 100644
--- a/README.md
+++ b/README.md
@@ -59,10 +59,14 @@ Since we want the record and replay sides to share a strongly typed data structu
 
 [Typescript handbook](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html)
 
-1. Fork the rrweb component repository you want to patch.
-2. Run `yarn install` to install required dependencies.
-3. Patch the code and pass all the tests.
-4. Push the code and create a pull request.
+1. Fork this repository.
+2. Run `yarn install` in the root to install required dependencies for all sub-packages (note: `npm install` is _not_ recommended).
+3. Run `yarn dev` in the root to get auto-building for all the sub-packages whenever you modify anything.
+4. Navigate to one of the sub-packages (in the `packages` folder) where you'd like to make a change.
+5. Patch the code and run `yarn test` to run the tests, make sure they pass before you commit anything.
+6. Push the code and create a pull request.
+
+Protip: You can run `yarn test` in the root folder to run all the tests.
 
 In addition to adding integration tests and unit tests, rrweb also provides a REPL testing tool.
 
diff --git a/package.json b/package.json
index a9bb70e9f8..16d69e7702 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,10 @@
   },
   "scripts": {
     "lerna": "lerna",
+    "build:all": "yarn lerna run prepublish",
+    "test": "yarn lerna run test",
+    "test:watch": "yarn lerna run test:watch --parallel",
+    "dev": "yarn lerna run dev --parallel",
     "repl": "cd packages/rrweb && npm run repl"
   }
 }
diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
index 0231d5766d..bc90502abb 100644
--- a/packages/rrweb-snapshot/package.json
+++ b/packages/rrweb-snapshot/package.json
@@ -6,8 +6,10 @@
     "prepare": "npm run prepack",
     "prepack": "npm run bundle && npm run typings",
     "test": "jest",
+    "test:watch": "jest --watch",
     "bundle": "rollup --config",
     "bundle:es-only": "cross-env ES_ONLY=true rollup --config",
+    "dev": "yarn bundle:es-only --watch",
     "typings": "tsc -d --declarationDir typings",
     "prepublish": "npm run typings && npm run bundle"
   },
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 01b04ba816..deb06da85d 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -9,6 +9,7 @@
     "test:headless": "npm run bundle:browser && PUPPETEER_HEADLESS=true jest",
     "test:watch": "PUPPETEER_HEADLESS=true npm run test -- --watch",
     "repl": "npm run bundle:browser && node scripts/repl.js",
+    "dev": "yarn bundle:browser --watch",
     "bundle:browser": "cross-env BROWSER_ONLY=true rollup --config",
     "bundle": "rollup --config",
     "typings": "tsc -d --declarationDir typings",

From 3d5b43890e28ea9b137d32dc7a454a698db1c695 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 7 Nov 2021 10:52:46 +0800
Subject: [PATCH 469/524] close #745, keep textarea text node clean

---
 packages/rrweb-snapshot/src/rebuild.ts | 24 ++++++++++++++++--------
 packages/rrweb/src/replay/index.ts     | 15 +++++++++++++++
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index 2bcfa8b1e1..5d3af4660c 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -321,18 +321,26 @@ export function buildNodeWithSN(
     // close before open to make sure document was closed
     doc.close();
     doc.open();
-    if (n.compatMode === 'BackCompat' &&
-        (n.childNodes && n.childNodes[0].type !== NodeType.DocumentType)  // there isn't one already defined
-       ) {
+    if (
+      n.compatMode === 'BackCompat' &&
+      n.childNodes &&
+      n.childNodes[0].type !== NodeType.DocumentType // there isn't one already defined
+    ) {
       // Trigger compatMode in the iframe
       // this is needed as document.createElement('iframe') otherwise inherits a CSS1Compat mode from the parent replayer environment
-      if (n.childNodes[0].type === NodeType.Element &&
-          'xmlns' in n.childNodes[0].attributes &&
-          n.childNodes[0].attributes.xmlns === 'http://www.w3.org/1999/xhtml') {
+      if (
+        n.childNodes[0].type === NodeType.Element &&
+        'xmlns' in n.childNodes[0].attributes &&
+        n.childNodes[0].attributes.xmlns === 'http://www.w3.org/1999/xhtml'
+      ) {
         // might as well use an xhtml doctype if we've got an xhtml namespace
-        doc.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">');
+        doc.write(
+          '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">',
+        );
       } else {
-        doc.write('<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "">');
+        doc.write(
+          '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "">',
+        );
       }
     }
     node = doc;
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index b2f7998d13..bac353d216 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -1428,6 +1428,21 @@ export class Replayer {
         return;
       }
 
+      if (
+        '__sn' in parent &&
+        parent.__sn.type === NodeType.Element &&
+        parent.__sn.tagName === 'textarea' &&
+        mutation.node.type === NodeType.Text
+      ) {
+        // https://github.com/rrweb-io/rrweb/issues/745
+        // parent is textarea, will only keep one child node as the value
+        for (const c of Array.from(parent.childNodes)) {
+          if (c.nodeType === parent.TEXT_NODE) {
+            parent.removeChild(c);
+          }
+        }
+      }
+
       if (previous && previous.nextSibling && previous.nextSibling.parentNode) {
         parent.insertBefore(target, previous.nextSibling);
       } else if (next && next.parentNode) {

From 78526a3aae6ba35016ad2836477ba3186eacf250 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 7 Nov 2021 14:39:43 +0800
Subject: [PATCH 470/524] fix #698, replay scroll on iframe document

---
 packages/rrweb/src/replay/index.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index bac353d216..59a7009c30 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -1601,6 +1601,13 @@ export class Replayer {
         left: d.x,
         behavior: 'smooth',
       });
+    } else if (target.__sn.type === NodeType.Document) {
+      // nest iframe content document
+      ((target as unknown) as Document).defaultView!.scrollTo({
+        top: d.y,
+        left: d.x,
+        behavior: 'smooth',
+      });
     } else {
       try {
         ((target as Node) as Element).scrollTop = d.y;

From 5066806e610cad1eb0b1d964503d622a774b674b Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 16 Nov 2021 02:17:19 +0800
Subject: [PATCH 471/524] fix bundle config

---
 packages/rrweb/rollup.config.js | 79 ++++++++++++++++-----------------
 1 file changed, 39 insertions(+), 40 deletions(-)

diff --git a/packages/rrweb/rollup.config.js b/packages/rrweb/rollup.config.js
index f97ceb2347..65cfafc4a8 100644
--- a/packages/rrweb/rollup.config.js
+++ b/packages/rrweb/rollup.config.js
@@ -4,7 +4,6 @@ import { terser } from 'rollup-plugin-terser';
 import postcss from 'rollup-plugin-postcss';
 import renameNodeModules from 'rollup-plugin-rename-node-modules';
 import pkg from './package.json';
-const tsConfig = require('./tsconfig.json');
 
 function toRecordPath(path) {
   return path
@@ -47,35 +46,35 @@ function toMinPath(path) {
 
 const baseConfigs = [
   // record only
-  // {
-  //   input: './src/record/index.ts',
-  //   name: 'rrwebRecord',
-  //   pathFn: toRecordPath,
-  // },
-  // // record and pack
-  // {
-  //   input: './src/entries/record-pack.ts',
-  //   name: 'rrwebRecord',
-  //   pathFn: toRecordPackPath,
-  // },
-  // // replay only
-  // {
-  //   input: './src/replay/index.ts',
-  //   name: 'rrwebReplay',
-  //   pathFn: toReplayPath,
-  // },
-  // // replay and unpack
-  // {
-  //   input: './src/entries/replay-unpack.ts',
-  //   name: 'rrwebReplay',
-  //   pathFn: toReplayUnpackPath,
-  // },
-  // // record and replay
-  // {
-  //   input: './src/index.ts',
-  //   name: 'rrweb',
-  //   pathFn: (p) => p,
-  // },
+  {
+    input: './src/record/index.ts',
+    name: 'rrwebRecord',
+    pathFn: toRecordPath,
+  },
+  // record and pack
+  {
+    input: './src/entries/record-pack.ts',
+    name: 'rrwebRecord',
+    pathFn: toRecordPackPath,
+  },
+  // replay only
+  {
+    input: './src/replay/index.ts',
+    name: 'rrwebReplay',
+    pathFn: toReplayPath,
+  },
+  // replay and unpack
+  {
+    input: './src/entries/replay-unpack.ts',
+    name: 'rrwebReplay',
+    pathFn: toReplayUnpackPath,
+  },
+  // record and replay
+  {
+    input: './src/index.ts',
+    name: 'rrweb',
+    pathFn: (p) => p,
+  },
   // all in one
   {
     input: './src/entries/all.ts',
@@ -84,16 +83,16 @@ const baseConfigs = [
     esm: true,
   },
   // plugins
-  // {
-  //   input: './src/plugins/console/record/index.ts',
-  //   name: 'rrwebConsoleRecord',
-  //   pathFn: toPluginPath('console', 'record'),
-  // },
-  // {
-  //   input: './src/plugins/console/replay/index.ts',
-  //   name: 'rrwebConsoleReplay',
-  //   pathFn: toPluginPath('console', 'replay'),
-  // },
+  {
+    input: './src/plugins/console/record/index.ts',
+    name: 'rrwebConsoleRecord',
+    pathFn: toPluginPath('console', 'record'),
+  },
+  {
+    input: './src/plugins/console/replay/index.ts',
+    name: 'rrwebConsoleReplay',
+    pathFn: toPluginPath('console', 'replay'),
+  },
 ];
 
 let configs = [];

From a01c97f70da6583400d2759f26a518037d4c2adf Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 16 Nov 2021 02:26:49 +0800
Subject: [PATCH 472/524] try to read style sheet content from JS API

---
 packages/rrweb-snapshot/src/snapshot.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index ca54833297..142f2b084b 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -347,6 +347,14 @@ function onceIframeLoaded(
   iframeEl.addEventListener('load', listener);
 }
 
+function stringifyStyleSheet(sheet: CSSStyleSheet): string {
+  return sheet.cssRules
+    ? Array.from(sheet.cssRules)
+        .map((rule) => rule.cssText || '')
+        .join('')
+    : '';
+}
+
 function serializeNode(
   n: Node,
   options: {
@@ -538,6 +546,16 @@ function serializeNode(
       const isStyle = parentTagName === 'STYLE' ? true : undefined;
       const isScript = parentTagName === 'SCRIPT' ? true : undefined;
       if (isStyle && textContent) {
+        try {
+          // try to read style sheet
+          if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
+            textContent = stringifyStyleSheet(
+              (n.parentNode as HTMLStyleElement).sheet!,
+            );
+          }
+        } catch {
+          // ignore error
+        }
         textContent = absoluteToStylesheet(textContent, getHref());
       }
       if (isScript) {

From 7223e929a3b73ae96402fac26b44d9c7bf536804 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 16 Nov 2021 02:27:22 +0800
Subject: [PATCH 473/524] chore(release): publish new version

 - rrweb@1.0.7
 - rrweb-player@0.7.9
 - rrweb-snapshot@1.1.10
---
 packages/rrweb-player/package.json   | 4 ++--
 packages/rrweb-snapshot/package.json | 2 +-
 packages/rrweb/package.json          | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
index 64b903a233..9f75b1f2b3 100644
--- a/packages/rrweb-player/package.json
+++ b/packages/rrweb-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.7.8",
+  "version": "0.7.9",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^1.0.6"
+    "rrweb": "^1.0.7"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
index bc90502abb..15001b7263 100644
--- a/packages/rrweb-snapshot/package.json
+++ b/packages/rrweb-snapshot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index deb06da85d..54ac01a867 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",
@@ -75,6 +75,6 @@
     "@xstate/fsm": "^1.4.0",
     "fflate": "^0.4.4",
     "mitt": "^1.1.3",
-    "rrweb-snapshot": "^1.1.9"
+    "rrweb-snapshot": "^1.1.10"
   }
 }

From 1f267082cb28982ad0c3d93b91b4d91d2f91efeb Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 16 Nov 2021 02:37:40 +0800
Subject: [PATCH 474/524] update test snapshots

---
 .../__snapshots__/integration.test.ts.snap    | 51 ++-----------------
 .../__snapshots__/integration.test.ts.snap    |  6 +--
 2 files changed, 7 insertions(+), 50 deletions(-)

diff --git a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
index 10fad1b6fe..a0aaace1b3 100644
--- a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
@@ -135,29 +135,7 @@ exports[`iframe integration tests snapshot async iframes 1`] = `
 exports[`integration tests [html file]: about-mozilla.html 1`] = `
 "<!DOCTYPE html><html><head>
   <title>The Book of Mozilla, 11:9</title>
-  <style type=\\"text/css\\">
-    html {
-      background: maroon;
-      color: white;
-      font-style: italic;
-    }    #moztext {
-      margin-top: 15%;
-      font-size: 1.1em;
-      font-family: serif;
-      text-align: center;
-      line-height: 1.5;
-    }    #from {
-      font-size: 1.95em;
-      font-family: serif;
-      text-align: right;
-    }    em {
-      font-size: 1.3em;
-      line-height: 0;
-    }    a {
-      text-decoration: none;
-      color: white;
-    }
-  </style>
+  <style type=\\"text/css\\">html { background: maroon; color: white; font-style: italic; }#moztext { margin-top: 15%; font-size: 1.1em; font-family: serif; text-align: center; line-height: 1.5; }#from { font-size: 1.95em; font-family: serif; text-align: right; }em { font-size: 1.3em; line-height: 0; }a { text-decoration: none; color: white; }</style>
 </head><body>  <p id=\\"moztext\\">
     Mammon slept. And the <em>beast reborn</em> spread over the earth and its numbers
     grew legion. And they proclaimed the times and <em>sacrificed</em> crops unto the
@@ -187,17 +165,7 @@ exports[`integration tests [html file]: block-element.html 1`] = `
     <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
     <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
     <title>Document</title>
-    <style>
-      .big {
-        width: 50px;
-        height: 50px;
-      }
-      .small {
-        width: 50px;
-        height: 100px;
-        float: left;
-      }
-    </style>
+    <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>record 2</div>
@@ -286,18 +254,7 @@ exports[`integration tests [html file]: hover.html 1`] = `
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
   <title>hover selector</title>
-  <style>    div:hover, div.\\\\:hover {
-      background: orange;
-    }    div:hover::after, div.\\\\:hover::after {
-      position: absolute;
-      left: 0;
-      top: 100%;
-      content: 'dropdown';
-      width: 100px;
-      height: 200px;
-      background: lightblue;
-    }
-  </style>
+  <style>div:hover, div.\\\\:hover { background: orange; }div:hover::after, div.\\\\:hover::after { position: absolute; left: 0px; top: 100%; content: \\"dropdown\\"; width: 100px; height: 200px; background: lightblue; }</style>
 </head><body>
   <div>hover me</div>
 </body></html>"
@@ -759,7 +716,7 @@ exports[`shadow DOM integration tests snapshot shadow DOM 1`] = `
                   \\"childNodes\\": [
                     {
                       \\"type\\": 3,
-                      \\"textContent\\": \\"\\\\n              :host {\\\\n                display: inline-block;\\\\n                width: 650px;\\\\n                font-family: 'Roboto Slab';\\\\n                contain: content;\\\\n              }\\\\n              :host([background]) {\\\\n                background: var(--background-color, #9E9E9E);\\\\n                border-radius: 10px;\\\\n                padding: 10px;\\\\n              }\\\\n              #panels {\\\\n                box-shadow: 0 2px 2px rgba(0, 0, 0, .3);\\\\n                background: white;\\\\n                border-radius: 3px;\\\\n                padding: 16px;\\\\n                height: 250px;\\\\n                overflow: auto;\\\\n              }\\\\n              #tabs {\\\\n                display: inline-flex;\\\\n                -webkit-user-select: none;\\\\n                user-select: none;\\\\n              }\\\\n              #tabs slot {\\\\n                display: inline-flex; /* Safari bug. Treats <slot> as a parent */\\\\n              }\\\\n              /* Safari does not support #id prefixes on ::slotted\\\\n                 See https://bugs.webkit.org/show_bug.cgi?id=160538 */\\\\n              #tabs ::slotted(*) {\\\\n                font: 400 16px/22px 'Roboto';\\\\n                padding: 16px 8px;\\\\n                margin: 0;\\\\n                text-align: center;\\\\n                width: 100px;\\\\n                text-overflow: ellipsis;\\\\n                white-space: nowrap;\\\\n                overflow: hidden;\\\\n                cursor: pointer;\\\\n                border-top-left-radius: 3px;\\\\n                border-top-right-radius: 3px;\\\\n                background: linear-gradient(#fafafa, #eee);\\\\n                border: none; /* if the user users a <button> */\\\\n              }\\\\n              #tabs ::slotted([aria-selected=\\\\\\"true\\\\\\"]) {\\\\n                font-weight: 600;\\\\n                background: white;\\\\n                box-shadow: none;\\\\n              }\\\\n              #tabs ::slotted(:focus) {\\\\n                z-index: 1; /* make sure focus ring doesn't get buried */\\\\n              }\\\\n              #panels ::slotted([aria-hidden=\\\\\\"true\\\\\\"]) {\\\\n                display: none;\\\\n              }\\\\n            \\",
+                      \\"textContent\\": \\":host { display: inline-block; width: 650px; font-family: \\\\\\"Roboto Slab\\\\\\"; contain: content; }:host([background]) { background: var(--background-color, #9E9E9E); border-radius: 10px; padding: 10px; }#panels { box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 2px; background: white; border-radius: 3px; padding: 16px; height: 250px; overflow: auto; }#tabs { display: inline-flex; user-select: none; }#tabs slot { display: inline-flex; }#tabs ::slotted(*) { font: 400 16px/22px Roboto; padding: 16px 8px; margin: 0px; text-align: center; width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; border-top-left-radius: 3px; border-top-right-radius: 3px; background: linear-gradient(rgb(250, 250, 250), rgb(238, 238, 238)); border: none; }#tabs ::slotted([aria-selected=\\\\\\"true\\\\\\"]) { font-weight: 600; background: white; box-shadow: none; }#tabs ::slotted(:focus) { z-index: 1; }#panels ::slotted([aria-hidden=\\\\\\"true\\\\\\"]) { display: none; }\\",
                       \\"isStyle\\": true,
                       \\"id\\": 38
                     }
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index df33590626..75440a372e 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -4505,7 +4505,7 @@ exports[`record integration tests should nest record iframe 1`] = `
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      iframe {\\\\n        width: 500px;\\\\n        height: 500px;\\\\n      }\\\\n    \\",
+                        \\"textContent\\": \\"iframe { width: 500px; height: 500px; }\\",
                         \\"isStyle\\": true,
                         \\"id\\": 14
                       }
@@ -9219,7 +9219,7 @@ exports[`record integration tests should record shadow DOM 1`] = `
                     \\"childNodes\\": [
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n      .my-element {\\\\n        margin: 0 0 1rem 0;\\\\n      }\\\\n      iframe {\\\\n        border: 0;\\\\n        width: 100%;\\\\n        padding: 0;\\\\n      }\\\\n\\\\n      body {\\\\n        max-width: 400px;\\\\n        margin: 1rem auto;\\\\n        padding: 0 1rem;\\\\n        font-family: 'comic sans ms';\\\\n      }\\\\n    \\",
+                        \\"textContent\\": \\".my-element { margin: 0px 0px 1rem; }iframe { border: 0px; width: 100%; padding: 0px; }body { max-width: 400px; margin: 1rem auto; padding: 0px 1rem; font-family: \\\\\\"comic sans ms\\\\\\"; }\\",
                         \\"isStyle\\": true,
                         \\"id\\": 14
                       }
@@ -9302,7 +9302,7 @@ exports[`record integration tests should record shadow DOM 1`] = `
                         \\"childNodes\\": [
                           {
                             \\"type\\": 3,
-                            \\"textContent\\": \\"\\\\n    body { /* for fallback iframe */\\\\n      margin: 0;\\\\n    }\\\\n    p { \\\\n      border: 1px solid #ccc;\\\\n      padding: 1rem;\\\\n      color: red;\\\\n      font-family: sans-serif;\\\\n    }\\\\n  \\",
+                            \\"textContent\\": \\"body { margin: 0px; }p { border: 1px solid rgb(204, 204, 204); padding: 1rem; color: red; font-family: sans-serif; }\\",
                             \\"isStyle\\": true,
                             \\"id\\": 28
                           }

From f75679015d839daa23bbd7852a61cf4e459c3de1 Mon Sep 17 00:00:00 2001
From: Lucky Feng <f18846188605@gmail.com>
Date: Tue, 30 Nov 2021 13:18:57 +0800
Subject: [PATCH 475/524] rrweb: replace onerror with
 addEventListener('error',handler) in the rrweb console plugin (#761)

---
 .../rrweb/src/plugins/console/record/index.ts  | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/rrweb/src/plugins/console/record/index.ts b/packages/rrweb/src/plugins/console/record/index.ts
index bd4e57495b..55b81d0f95 100644
--- a/packages/rrweb/src/plugins/console/record/index.ts
+++ b/packages/rrweb/src/plugins/console/record/index.ts
@@ -124,29 +124,21 @@ function initLogObserver(
   // add listener to thrown errors
   if (logOptions.level!.includes('error')) {
     if (window) {
-      const originalOnError = window.onerror;
-      window.onerror = (
-        msg: Event | string,
-        file: string,
-        line: number,
-        col: number,
-        error: Error,
-      ) => {
-        if (originalOnError) {
-          originalOnError.apply(this, [msg, file, line, col, error]);
-        }
+      const errorHandler = (event: ErrorEvent) => {
+        const { message, error } = event;
         const trace: string[] = ErrorStackParser.parse(
           error,
         ).map((stackFrame: StackFrame) => stackFrame.toString());
-        const payload = [stringify(msg, logOptions.stringifyOptions)];
+        const payload = [stringify(message, logOptions.stringifyOptions)];
         cb({
           level: 'error',
           trace,
           payload,
         });
       };
+      window.addEventListener('error', errorHandler);
       cancelHandlers.push(() => {
-        window.onerror = originalOnError;
+        if (window) window.removeEventListener('error', errorHandler);
       });
     }
   }

From ce9e97ffd2fc461a3801354a7514bf052b5df0a7 Mon Sep 17 00:00:00 2001
From: Cristi Constantin <1748317+croqaz@users.noreply.github.com>
Date: Thu, 2 Dec 2021 11:39:53 +0000
Subject: [PATCH 476/524] Small regex fix for older browsers (#762)

---
 packages/rrweb-snapshot/src/rebuild.ts  | 2 +-
 packages/rrweb-snapshot/src/snapshot.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index 5d3af4660c..6aef3c4e0f 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -64,7 +64,7 @@ function escapeRegExp(str: string) {
 }
 
 const HOVER_SELECTOR = /([^\\]):hover/;
-const HOVER_SELECTOR_GLOBAL = new RegExp(HOVER_SELECTOR, 'g');
+const HOVER_SELECTOR_GLOBAL = new RegExp(HOVER_SELECTOR.source, 'g');
 export function addHoverClass(cssText: string, cache: BuildCache): string {
   const cachedStyle = cache?.stylesWithHoverClass.get(cssText);
   if (cachedStyle) return cachedStyle;
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 142f2b084b..f32c794b49 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -16,7 +16,7 @@ import { isElement, isShadowRoot, maskInputValue } from './utils';
 import { values } from 'puppeteer/DeviceDescriptors';
 
 let _id = 1;
-const tagNameRegex = RegExp('[^a-z0-9-_:]');
+const tagNameRegex = new RegExp('[^a-z0-9-_:]');
 
 export const IGNORED_NODE = -2;
 

From ac592dc537264dc7c8ce8572670113df76b7f179 Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Thu, 9 Dec 2021 17:26:43 +0000
Subject: [PATCH 477/524] Fix bug where style.opacity was incorrectly deleted
 when style.opacity was set to zero (#765)

- this had the effect of making things visible which should have been invisible
 - not sure what I was thinking with 'potentially non-standard browsers', maybe I thought I was covering return values from getPropertyValue of null or false. Could potentially add explicit tests for null or false, but as there is no evidence for these non-standard browsers, leaving as-is
---
 packages/rrweb/src/record/mutation.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index be6fe19b9d..924c58cd2c 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -504,10 +504,7 @@ export default class MutationBuffer {
             }
           }
           for (const pname of Array.from(old.style)) {
-            if (
-              target.style.getPropertyValue(pname) === '' ||
-              !target.style.getPropertyValue(pname) // covering potential non-standard browsers
-            ) {
+            if (target.style.getPropertyValue(pname) === '') {  // "if not set, returns the empty string"
               styleObj[pname] = false; // delete
             }
           }

From a07a97cfb63c2a5106069f84918a184ac72dc33c Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 15 Dec 2021 15:05:17 +0800
Subject: [PATCH 478/524] close #736 #773 trigger meta update after add events

---
 packages/rrweb-player/src/Controller.svelte | 6 ++++++
 packages/rrweb-player/src/Player.svelte     | 1 +
 2 files changed, 7 insertions(+)

diff --git a/packages/rrweb-player/src/Controller.svelte b/packages/rrweb-player/src/Controller.svelte
index 09e3437f6f..33cfac775a 100644
--- a/packages/rrweb-player/src/Controller.svelte
+++ b/packages/rrweb-player/src/Controller.svelte
@@ -185,6 +185,12 @@
     skipInactive = !skipInactive;
   };
 
+  export const triggerUpdateMeta = () => {
+    Promise.resolve().then(() => {
+      meta = replayer.getMetaData();
+    })
+  }
+
   onMount(() => {
     playerState = replayer.service.state.value as typeof playerState;
     speedState = replayer.speedService.state.value as typeof speedState;
diff --git a/packages/rrweb-player/src/Player.svelte b/packages/rrweb-player/src/Player.svelte
index 1d5583c9bb..9e826ab199 100644
--- a/packages/rrweb-player/src/Player.svelte
+++ b/packages/rrweb-player/src/Player.svelte
@@ -90,6 +90,7 @@
 
   export const addEvent = (event: eventWithTime) => {
     replayer.addEvent(event);
+    controller.triggerUpdateMeta();
   };
   export const getMetaData = () => replayer.getMetaData();
   export const getReplayer = () => replayer;

From d7c37d98385b60fbf5652e1d01722d774979b2bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Zarach?= <michal.m.zarach@gmail.com>
Date: Mon, 20 Dec 2021 03:04:02 +0100
Subject: [PATCH 479/524] Added RemSupp logo (#774)

---
 README.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/README.md b/README.md
index 60f0528410..aa5b00ab21 100644
--- a/README.md
+++ b/README.md
@@ -150,5 +150,10 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
         <img width="195px" src="https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg">
       </a>
     </td>
+    <td align="center">
+      <a href="https://remsupp.com" target="_blank">
+        <img style="padding: 8px" alt="Remote Access & Co-Browsing" width="195px" src="https://remsupp.com/images/logo.png">
+      </a>
+    </td>
   </tr>
 </table>

From 0439967789b62364b22b5604aa82e186093ce90c Mon Sep 17 00:00:00 2001
From: John Pham <johnphammail@gmail.com>
Date: Wed, 22 Dec 2021 05:18:39 -0800
Subject: [PATCH 480/524] Fix animations on pseudo-elements not pausing when
 replayer is paused (#776)

---
 packages/rrweb/src/replay/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 59a7009c30..8e4b56d21a 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -690,7 +690,7 @@ export class Replayer {
     ).concat(this.config.insertStyleRules);
     if (this.config.pauseAnimation) {
       injectStylesRules.push(
-        'html.rrweb-paused * { animation-play-state: paused !important; }',
+        'html.rrweb-paused *, html.rrweb-paused *:before, html.rrweb-paused *:after { animation-play-state: paused !important; }',
       );
     }
     for (let idx = 0; idx < injectStylesRules.length; idx++) {

From 3a6ef74a1791c50f6ac9e64926d48f7ce945b395 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 22 Dec 2021 21:20:09 +0800
Subject: [PATCH 481/524] update test snapshot

---
 packages/rrweb/test/__snapshots__/replayer.test.ts.snap | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/rrweb/test/__snapshots__/replayer.test.ts.snap b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
index 25e10679ab..677562cfae 100644
--- a/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
@@ -50,7 +50,7 @@ file-cid-0
 
 noscript { display: none !important; }
 
-html.rrweb-paused * { animation-play-state: paused !important; }
+html.rrweb-paused *, html.rrweb-paused ::before, html.rrweb-paused ::after { animation-play-state: paused !important; }
 
 
 file-cid-1
@@ -135,7 +135,7 @@ file-cid-0
 
 noscript { display: none !important; }
 
-html.rrweb-paused * { animation-play-state: paused !important; }
+html.rrweb-paused *, html.rrweb-paused ::before, html.rrweb-paused ::after { animation-play-state: paused !important; }
 "
 `;
 
@@ -186,7 +186,7 @@ file-cid-0
 
 noscript { display: none !important; }
 
-html.rrweb-paused * { animation-play-state: paused !important; }
+html.rrweb-paused *, html.rrweb-paused ::before, html.rrweb-paused ::after { animation-play-state: paused !important; }
 "
 `;
 
@@ -237,6 +237,6 @@ file-cid-0
 
 noscript { display: none !important; }
 
-html.rrweb-paused * { animation-play-state: paused !important; }
+html.rrweb-paused *, html.rrweb-paused ::before, html.rrweb-paused ::after { animation-play-state: paused !important; }
 "
 `;

From 28cdbe77458b9cba5f83b595bf985948b27d6c47 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 22 Dec 2021 21:25:58 +0800
Subject: [PATCH 482/524] ignore invalid error event

---
 .../rrweb/src/plugins/console/record/error-stack-parser.ts    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/rrweb/src/plugins/console/record/error-stack-parser.ts b/packages/rrweb/src/plugins/console/record/error-stack-parser.ts
index da323a4f4c..d5244b9832 100644
--- a/packages/rrweb/src/plugins/console/record/error-stack-parser.ts
+++ b/packages/rrweb/src/plugins/console/record/error-stack-parser.ts
@@ -60,6 +60,10 @@ export const ErrorStackParser = {
    * @return {Array} of StackFrames
    */
   parse: function (error: Error): StackFrame[] {
+    // https://github.com/rrweb-io/rrweb/issues/782
+    if (!error) {
+      return [];
+    }
     if (
       // @ts-ignore
       typeof error.stacktrace !== 'undefined' ||

From 88d3ac152ce5fd12e1c3a41c9e724548186e1d77 Mon Sep 17 00:00:00 2001
From: champ <champion.ge@gmail.com>
Date: Thu, 23 Dec 2021 17:40:03 +0800
Subject: [PATCH 483/524] fix #783 (#785)

---
 packages/rrweb-snapshot/src/snapshot.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index f32c794b49..9aae55cb90 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -234,6 +234,8 @@ export function transformAttribute(
     return getAbsoluteSrcsetString(doc, value);
   } else if (name === 'style' && value) {
     return absoluteToStylesheet(value, getHref());
+  } else if (tagName === 'object' && name === 'data' && value) {
+    return absoluteToDoc(doc, value);
   } else {
     return value;
   }

From bdbd2041031fbd48a72be0416e41ac46da54740f Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 23 Dec 2021 23:07:03 +0800
Subject: [PATCH 484/524] chore(release): publish new version

 - rrweb@1.0.8
 - rrweb-player@0.7.10
 - rrweb-snapshot@1.1.11
---
 packages/rrweb-player/package.json   | 4 ++--
 packages/rrweb-snapshot/package.json | 2 +-
 packages/rrweb/package.json          | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
index 9f75b1f2b3..bc52e8b555 100644
--- a/packages/rrweb-player/package.json
+++ b/packages/rrweb-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.7.9",
+  "version": "0.7.10",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^1.0.7"
+    "rrweb": "^1.0.8"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
index 15001b7263..0fd7fb75c2 100644
--- a/packages/rrweb-snapshot/package.json
+++ b/packages/rrweb-snapshot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 54ac01a867..7f1ff947b6 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",
@@ -75,6 +75,6 @@
     "@xstate/fsm": "^1.4.0",
     "fflate": "^0.4.4",
     "mitt": "^1.1.3",
-    "rrweb-snapshot": "^1.1.10"
+    "rrweb-snapshot": "^1.1.11"
   }
 }

From 5a0a1353c5f12655866c3f3041f3566fcf170eb9 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 26 Dec 2021 20:46:17 +0800
Subject: [PATCH 485/524] fix lint

---
 packages/rrweb-snapshot/src/snapshot.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 9aae55cb90..6c6e136e0d 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -10,10 +10,8 @@ import {
   MaskTextFn,
   MaskInputFn,
   KeepIframeSrcFn,
-  documentNode,
 } from './types';
 import { isElement, isShadowRoot, maskInputValue } from './utils';
-import { values } from 'puppeteer/DeviceDescriptors';
 
 let _id = 1;
 const tagNameRegex = new RegExp('[^a-z0-9-_:]');
@@ -55,7 +53,9 @@ function getCssRuleString(rule: CSSRule): string {
   if (isCSSImportRule(rule)) {
     try {
       cssStringified = getCssRulesString(rule.styleSheet) || cssStringified;
-    } catch {}
+    } catch {
+      // ignore
+    }
   }
   return cssStringified;
 }
@@ -136,8 +136,8 @@ function getAbsoluteSrcsetString(doc: Document, attributeValue: string) {
   let pos = 0;
 
   function collectCharacters(regEx: RegExp) {
-    var chars,
-      match = regEx.exec(attributeValue.substring(pos));
+    let chars: string;
+    let match = regEx.exec(attributeValue.substring(pos));
     if (match) {
       chars = match[0];
       pos += chars.length;

From 588b3d6f623b9e3a50734c39aa64fcc46395478e Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Tue, 4 Jan 2022 02:42:19 +0100
Subject: [PATCH 486/524] Add option to spoof url in repl (#786)

Really helps when experiencing CORS issues or when loading images in webgl
---
 packages/rrweb/scripts/repl.js | 38 +++++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/packages/rrweb/scripts/repl.js b/packages/rrweb/scripts/repl.js
index f868341898..13d4937b66 100644
--- a/packages/rrweb/scripts/repl.js
+++ b/packages/rrweb/scripts/repl.js
@@ -19,6 +19,21 @@ function getCode() {
 
   start();
 
+  const fakeGoto = async (page, url) => {
+    const intercept = async (request) => {
+      await request.respond({
+        status: 200,
+        contentType: 'text/html',
+        body: ' ', // non-empty string or page will load indefinitely
+      });
+    };
+    await page.setRequestInterception(true);
+    page.on('request', intercept);
+    await page.goto(url);
+    await page.setRequestInterception(false);
+    page.off('request', intercept);
+  };
+
   async function start() {
     events = [];
     const { url } = await inquirer.prompt([
@@ -36,9 +51,17 @@ function getCode() {
 
     const { shouldReplay } = await inquirer.prompt([
       {
-        type: 'confirm',
+        type: 'list',
+        choices: [
+          { name: 'Start replay (default)', value: 'default' },
+          {
+            name: `Start replay on original url (helps when experiencing CORS issues)`,
+            value: 'replayWithFakeURL',
+          },
+          { name: 'Skip replay', value: false },
+        ],
         name: 'shouldReplay',
-        message: `Once you want to finish the recording, enter 'y' to start replay: `,
+        message: `Once you want to finish the recording, choose the following to start replay: `,
       },
     ]);
 
@@ -118,12 +141,12 @@ function getCode() {
     emitter.once('done', async (shouldReplay) => {
       await browser.close();
       if (shouldReplay) {
-        await replay();
+        await replay(url, shouldReplay === 'replayWithFakeURL');
       }
     });
   }
 
-  async function replay() {
+  async function replay(url, useSpoofedUrl) {
     const browser = await puppeteer.launch({
       headless: false,
       defaultViewport: {
@@ -133,7 +156,12 @@ function getCode() {
       args: ['--start-maximized', '--no-sandbox'],
     });
     const page = await browser.newPage();
-    await page.goto('about:blank');
+    if (useSpoofedUrl) {
+      await fakeGoto(page, url);
+    } else {
+      await page.goto('about:blank');
+    }
+
     await page.addStyleTag({
       path: path.resolve(__dirname, '../dist/rrweb.min.css'),
     });

From 320a454c49aa797511f16656c34390c509159ce6 Mon Sep 17 00:00:00 2001
From: Lucky Feng <f18846188605@gmail.com>
Date: Tue, 11 Jan 2022 23:15:57 +0800
Subject: [PATCH 487/524] rrdom (#613)

* create rrdom package

* test(rrdom): add unit tests for polyfill.ts

* fix(rrweb snapshot): type check errors

Errors are caused by the declaration similarity of @types/mocha and @types/jest if we install both of them in the whole project.

* Set tagNames to upper case by default

This mirrors the `Element.tagName` implementation:

```
For DOM trees which represent HTML documents, the returned tag name is always in the canonical upper-case form. For example, tagName called on a <div> element returns "DIV".
```
https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName

* Add workspace file

* VSCode settings for rrdom tests

* Add basic test for RRDocument

* Only setup jest tests for rrdom

* mock Node type and Event type for nodejs environment

* test(rrdom): add snapshot for document.test.ts

* fix issue of nwsapi import and add unit tests for rrdom

* fix: querySelectorAll returns nothing when querying elements with ids and classNames

* fix: error of unit test for Event polyfill

Since Event class is built in nodejs after v15.0.0

* add a dummy implementation of canvas

* add style element support

* add unit test for style element

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
---
 package.json                                  |   3 +-
 packages/rrdom/.gitignore                     |   4 +
 packages/rrdom/.vscode/extensions.json        |   3 +
 packages/rrdom/.vscode/launch.json            |  15 +
 packages/rrdom/.vscode/settings.json          |   3 +
 packages/rrdom/jest.config.js                 |   5 +
 packages/rrdom/package.json                   |  44 +
 packages/rrdom/rollup.config.js               | 103 ++
 packages/rrdom/src/document-nodejs.ts         | 787 ++++++++++++++
 packages/rrdom/src/index.ts                   |  13 +
 packages/rrdom/src/polyfill.ts                |  87 ++
 packages/rrdom/src/style.ts                   |  40 +
 .../document-nodejs.test.ts.snap              |  48 +
 packages/rrdom/test/document-nodejs.test.ts   | 259 +++++
 packages/rrdom/test/html/main.html            |  40 +
 packages/rrdom/test/polyfill.test.ts          |  83 ++
 packages/rrdom/test/util.ts                   |  19 +
 packages/rrdom/tsconfig.json                  |  19 +
 yarn.lock                                     | 998 +++++++++++++++++-
 19 files changed, 2566 insertions(+), 7 deletions(-)
 create mode 100644 packages/rrdom/.gitignore
 create mode 100644 packages/rrdom/.vscode/extensions.json
 create mode 100644 packages/rrdom/.vscode/launch.json
 create mode 100644 packages/rrdom/.vscode/settings.json
 create mode 100644 packages/rrdom/jest.config.js
 create mode 100644 packages/rrdom/package.json
 create mode 100644 packages/rrdom/rollup.config.js
 create mode 100644 packages/rrdom/src/document-nodejs.ts
 create mode 100644 packages/rrdom/src/index.ts
 create mode 100644 packages/rrdom/src/polyfill.ts
 create mode 100644 packages/rrdom/src/style.ts
 create mode 100644 packages/rrdom/test/__snapshots__/document-nodejs.test.ts.snap
 create mode 100644 packages/rrdom/test/document-nodejs.test.ts
 create mode 100644 packages/rrdom/test/html/main.html
 create mode 100644 packages/rrdom/test/polyfill.test.ts
 create mode 100644 packages/rrdom/test/util.ts
 create mode 100644 packages/rrdom/tsconfig.json

diff --git a/package.json b/package.json
index 16d69e7702..a9298f4111 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
   "workspaces": [
     "packages/rrweb",
     "packages/rrweb-snapshot",
-    "packages/rrweb-player"
+    "packages/rrweb-player",
+    "packages/rrdom"
   ],
   "devDependencies": {
     "lerna": "^4.0.0"
diff --git a/packages/rrdom/.gitignore b/packages/rrdom/.gitignore
new file mode 100644
index 0000000000..fb77b328d4
--- /dev/null
+++ b/packages/rrdom/.gitignore
@@ -0,0 +1,4 @@
+dist
+es
+lib
+typings
diff --git a/packages/rrdom/.vscode/extensions.json b/packages/rrdom/.vscode/extensions.json
new file mode 100644
index 0000000000..bd47279fb1
--- /dev/null
+++ b/packages/rrdom/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["orta.vscode-jest"]
+}
diff --git a/packages/rrdom/.vscode/launch.json b/packages/rrdom/.vscode/launch.json
new file mode 100644
index 0000000000..25d2357c25
--- /dev/null
+++ b/packages/rrdom/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+  "configurations": [
+    {
+      "type": "node",
+      "name": "vscode-jest-tests",
+      "request": "launch",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true,
+      "cwd": "${workspaceFolder}",
+      "runtimeExecutable": "yarn",
+      "args": ["test", "--runInBand", "--watchAll=false"]
+    }
+  ]
+}
diff --git a/packages/rrdom/.vscode/settings.json b/packages/rrdom/.vscode/settings.json
new file mode 100644
index 0000000000..634876effc
--- /dev/null
+++ b/packages/rrdom/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "jest.jestCommandLine": "yarn test"
+}
diff --git a/packages/rrdom/jest.config.js b/packages/rrdom/jest.config.js
new file mode 100644
index 0000000000..e86e13bab9
--- /dev/null
+++ b/packages/rrdom/jest.config.js
@@ -0,0 +1,5 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};
diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json
new file mode 100644
index 0000000000..abad628442
--- /dev/null
+++ b/packages/rrdom/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "rrdom",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "rollup -c -w",
+    "bundle": "rollup --config",
+    "bundle:es-only": "cross-env ES_ONLY=true rollup --config",
+    "test": "jest",
+    "prepublish": "npm run bundle"
+  },
+  "keywords": [
+    "rrweb",
+    "rrdom"
+  ],
+  "license": "MIT",
+  "main": "lib/rrdom.js",
+  "module": "es/rrdom.js",
+  "typings": "es",
+  "unpkg": "dist/rrdom.js",
+  "files": [
+    "dist",
+    "lib",
+    "es",
+    "typings"
+  ],
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@types/cssom": "^0.4.1",
+    "@types/jest": "^27.0.1",
+    "@types/nwsapi": "^2.2.2",
+    "jest": "^27.1.1",
+    "rollup": "^2.56.3",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.30.0",
+    "rrweb-snapshot": "^1.1.8",
+    "ts-jest": "^27.0.5",
+    "typescript": "^3.9.5"
+  },
+  "dependencies": {
+    "cssom": "^0.5.0",
+    "nwsapi": "^2.2.0"
+  }
+}
diff --git a/packages/rrdom/rollup.config.js b/packages/rrdom/rollup.config.js
new file mode 100644
index 0000000000..80baed3473
--- /dev/null
+++ b/packages/rrdom/rollup.config.js
@@ -0,0 +1,103 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import { terser } from 'rollup-plugin-terser';
+import typescript from 'rollup-plugin-typescript2';
+import pkg from './package.json';
+
+function toMinPath(path) {
+  return path.replace(/\.js$/, '.min.js');
+}
+
+const basePlugins = [
+  resolve({ browser: true }),
+  commonjs(),
+  typescript({
+    tsconfigOverride: { compilerOptions: { module: 'ESNext' } },
+  }),
+];
+
+const baseConfigs = [
+  {
+    input: './src/index.ts',
+    name: pkg.name,
+    path: pkg.name,
+  },
+  {
+    input: './src/document-nodejs.ts',
+    name: 'RRDocument',
+    path: 'document-nodejs',
+  },
+];
+
+let configs = [];
+let extraConfigs = [];
+for (let config of baseConfigs) {
+  configs.push(
+    // ES module
+    {
+      input: config.input,
+      plugins: basePlugins,
+      output: [
+        {
+          format: 'esm',
+          file: pkg.module.replace(pkg.name, config.path),
+        },
+      ],
+    },
+  );
+  extraConfigs.push(
+    // browser
+    {
+      input: config.input,
+      plugins: basePlugins,
+      output: [
+        {
+          name: config.name,
+          format: 'iife',
+          file: pkg.unpkg.replace(pkg.name, config.path),
+        },
+      ],
+    },
+    {
+      input: config.input,
+      plugins: basePlugins.concat(terser()),
+      output: [
+        {
+          name: config.name,
+          format: 'iife',
+          file: toMinPath(pkg.unpkg).replace(pkg.name, config.path),
+          sourcemap: true,
+        },
+      ],
+    },
+    // CommonJS
+    {
+      input: config.input,
+      plugins: basePlugins,
+      output: [
+        {
+          format: 'cjs',
+          file: pkg.main.replace(pkg.name, config.path),
+        },
+      ],
+    },
+    // ES module (packed)
+    {
+      input: config.input,
+      plugins: basePlugins.concat(terser()),
+      output: [
+        {
+          format: 'esm',
+          file: toMinPath(pkg.module).replace(pkg.name, config.path),
+          sourcemap: true,
+        },
+      ],
+    },
+  );
+}
+
+if (!process.env.ES_ONLY) {
+  configs.push(...extraConfigs);
+}
+
+export default configs;
diff --git a/packages/rrdom/src/document-nodejs.ts b/packages/rrdom/src/document-nodejs.ts
new file mode 100644
index 0000000000..aff8d90512
--- /dev/null
+++ b/packages/rrdom/src/document-nodejs.ts
@@ -0,0 +1,787 @@
+import { INode, NodeType, serializedNodeWithId } from 'rrweb-snapshot';
+import { NWSAPI } from 'nwsapi';
+import { parseCSSText, camelize, toCSSText } from './style';
+const nwsapi = require('nwsapi');
+const cssom = require('cssom');
+
+export abstract class RRNode {
+  __sn: serializedNodeWithId | undefined;
+  children: Array<RRNode> = [];
+  parentElement: RRElement | null = null;
+  parentNode: RRNode | null = null;
+  ownerDocument: RRDocument | null = null;
+  ELEMENT_NODE = 1;
+  TEXT_NODE = 3;
+
+  get firstChild() {
+    return this.children[0];
+  }
+
+  get nodeType() {
+    if (this instanceof RRDocument) return NodeType.Document;
+    if (this instanceof RRDocumentType) return NodeType.DocumentType;
+    if (this instanceof RRElement) return NodeType.Element;
+    if (this instanceof RRText) return NodeType.Text;
+    if (this instanceof RRCDATASection) return NodeType.CDATA;
+    if (this instanceof RRComment) return NodeType.Comment;
+  }
+
+  get childNodes() {
+    return this.children;
+  }
+
+  appendChild(newChild: RRNode): RRNode {
+    throw new Error(
+      `RRDomException: Failed to execute 'appendChild' on 'RRNode': This RRNode type does not support this method.`,
+    );
+  }
+
+  insertBefore(newChild: RRNode, refChild: RRNode | null): RRNode {
+    throw new Error(
+      `RRDomException: Failed to execute 'insertBefore' on 'RRNode': This RRNode type does not support this method.`,
+    );
+  }
+
+  contains(node: RRNode) {
+    if (node === this) return true;
+    for (const child of this.children) {
+      if (child.contains(node)) return true;
+    }
+    return false;
+  }
+
+  removeChild(node: RRNode) {
+    const indexOfChild = this.children.indexOf(node);
+    if (indexOfChild !== -1) {
+      this.children.splice(indexOfChild, 1);
+      node.parentElement = null;
+      node.parentNode = null;
+    }
+  }
+
+  toString(nodeName?: string) {
+    return `${JSON.stringify(this.__sn?.id) || ''} ${nodeName}`;
+  }
+}
+
+export class RRWindow {
+  scrollLeft = 0;
+  scrollTop = 0;
+  scrollTo(options?: ScrollToOptions) {
+    if (!options) return;
+    if (typeof options.left === 'number') this.scrollLeft = options.left;
+    if (typeof options.top === 'number') this.scrollTop = options.top;
+  }
+}
+
+export class RRDocument extends RRNode {
+  private mirror: Map<number, RRNode> = new Map();
+  private _nwsapi: NWSAPI;
+  get nwsapi() {
+    if (!this._nwsapi) {
+      this._nwsapi = nwsapi({
+        document: (this as unknown) as Document,
+        DOMException: (null as unknown) as new (
+          message?: string,
+          name?: string,
+        ) => DOMException,
+      });
+      this._nwsapi.configure({
+        LOGERRORS: false,
+        IDS_DUPES: true,
+        MIXEDCASE: true,
+      });
+    }
+    return this._nwsapi;
+  }
+
+  get documentElement(): RRElement {
+    return this.children.find(
+      (node) => node instanceof RRElement && node.tagName === 'HTML',
+    ) as RRElement;
+  }
+
+  get body() {
+    return (
+      this.documentElement?.children.find(
+        (node) => node instanceof RRElement && node.tagName === 'BODY',
+      ) || null
+    );
+  }
+
+  get head() {
+    return (
+      this.documentElement?.children.find(
+        (node) => node instanceof RRElement && node.tagName === 'HEAD',
+      ) || null
+    );
+  }
+
+  get implementation() {
+    return this;
+  }
+
+  get firstElementChild() {
+    return this.documentElement;
+  }
+
+  appendChild(childNode: RRNode) {
+    const nodeType = childNode.nodeType;
+    if (nodeType === NodeType.Element || nodeType === NodeType.DocumentType) {
+      if (this.children.some((s) => s.nodeType === nodeType)) {
+        throw new Error(
+          `RRDomException: Failed to execute 'appendChild' on 'RRNode': Only one ${
+            nodeType === NodeType.Element ? 'RRElement' : 'RRDoctype'
+          } on RRDocument allowed.`,
+        );
+      }
+    }
+    childNode.parentElement = null;
+    childNode.parentNode = this;
+    childNode.ownerDocument = this;
+    this.children.push(childNode);
+    return childNode;
+  }
+
+  insertBefore(newChild: RRNode, refChild: RRNode | null) {
+    if (refChild === null) return this.appendChild(newChild);
+    const childIndex = this.children.indexOf(refChild);
+    if (childIndex == -1)
+      throw new Error(
+        "Failed to execute 'insertBefore' on 'RRNode': The RRNode before which the new node is to be inserted is not a child of this RRNode.",
+      );
+    this.children.splice(childIndex, 0, newChild);
+    newChild.parentElement = null;
+    newChild.parentNode = this;
+    newChild.ownerDocument = this;
+    return newChild;
+  }
+
+  querySelectorAll(selectors: string): RRNode[] {
+    return (this.nwsapi.select(selectors) as unknown) as RRNode[];
+  }
+
+  getElementsByTagName(tagName: string): RRElement[] {
+    if (this.documentElement)
+      return (this.documentElement as RRElement).getElementsByTagName(tagName);
+    return [];
+  }
+
+  getElementsByClassName(className: string): RRElement[] {
+    if (this.documentElement)
+      return (this.documentElement as RRElement).getElementsByClassName(
+        className,
+      );
+    return [];
+  }
+
+  getElementById(elementId: string): RRElement | null {
+    if (this.documentElement)
+      return (this.documentElement as RRElement).getElementById(elementId);
+    return null;
+  }
+
+  createDocument(
+    _namespace: string | null,
+    _qualifiedName: string | null,
+    _doctype?: DocumentType | null,
+  ) {
+    return new RRDocument();
+  }
+
+  createDocumentType(
+    qualifiedName: string,
+    publicId: string,
+    systemId: string,
+  ) {
+    const documentTypeNode = new RRDocumentType(
+      qualifiedName,
+      publicId,
+      systemId,
+    );
+    documentTypeNode.ownerDocument = this;
+    return documentTypeNode;
+  }
+
+  createElement<K extends keyof HTMLElementTagNameMap>(
+    tagName: K,
+  ): RRElementType<K>;
+  createElement(tagName: string): RRElement;
+  createElement(tagName: string) {
+    const upperTagName = tagName.toUpperCase();
+    let element;
+    switch (upperTagName) {
+      case 'AUDIO':
+      case 'VIDEO':
+        element = new RRMediaElement(upperTagName);
+        break;
+      case 'IFRAME':
+        element = new RRIframeElement(upperTagName);
+        break;
+      case 'IMG':
+        element = new RRImageElement('IMG');
+        break;
+      case 'CANVAS':
+        element = new RRCanvasElement('CANVAS');
+        break;
+      case 'STYLE':
+        element = new RRStyleElement('STYLE');
+        break;
+      default:
+        element = new RRElement(upperTagName);
+        break;
+    }
+    element.ownerDocument = this;
+    return element;
+  }
+
+  createElementNS(
+    _namespaceURI: 'http://www.w3.org/2000/svg',
+    qualifiedName: string,
+  ) {
+    return this.createElement(qualifiedName as keyof HTMLElementTagNameMap);
+  }
+
+  createComment(data: string) {
+    const commentNode = new RRComment(data);
+    commentNode.ownerDocument = this;
+    return commentNode;
+  }
+
+  createCDATASection(data: string) {
+    const sectionNode = new RRCDATASection(data);
+    sectionNode.ownerDocument = this;
+    return sectionNode;
+  }
+
+  createTextNode(data: string) {
+    const textNode = new RRText(data);
+    textNode.ownerDocument = this;
+    return textNode;
+  }
+
+  /**
+   * This does come with some side effects. For example:
+   * 1. All event listeners currently registered on the document, nodes inside the document, or the document's window are removed.
+   * 2. All existing nodes are removed from the document.
+   */
+  open() {
+    this.children = [];
+  }
+
+  close() {}
+
+  buildFromDom(dom: Document) {
+    let notSerializedId = -1;
+    const NodeTypeMap: Record<number, number> = {};
+    NodeTypeMap[document.DOCUMENT_NODE] = NodeType.Document;
+    NodeTypeMap[document.DOCUMENT_TYPE_NODE] = NodeType.DocumentType;
+    NodeTypeMap[document.ELEMENT_NODE] = NodeType.Element;
+    NodeTypeMap[document.TEXT_NODE] = NodeType.Text;
+    NodeTypeMap[document.CDATA_SECTION_NODE] = NodeType.CDATA;
+    NodeTypeMap[document.COMMENT_NODE] = NodeType.Comment;
+
+    function getValidTagName(element: HTMLElement): string {
+      if (element instanceof HTMLFormElement) {
+        return 'FORM';
+      }
+      return element.tagName.toUpperCase().trim();
+    }
+
+    const walk = function (node: INode) {
+      let serializedNodeWithId = node.__sn;
+      let rrNode: RRNode;
+      if (!serializedNodeWithId) {
+        serializedNodeWithId = {
+          type: NodeTypeMap[node.nodeType],
+          textContent: '',
+          id: notSerializedId,
+        };
+        notSerializedId -= 1;
+        node.__sn = serializedNodeWithId;
+      }
+      if (!this.mirror.has(serializedNodeWithId.id)) {
+        switch (node.nodeType) {
+          case node.DOCUMENT_NODE:
+            if (
+              serializedNodeWithId.rootId &&
+              serializedNodeWithId.rootId !== serializedNodeWithId.id
+            )
+              rrNode = this.createDocument();
+            else rrNode = this;
+            break;
+          case node.DOCUMENT_TYPE_NODE:
+            const documentType = (node as unknown) as DocumentType;
+            rrNode = this.createDocumentType(
+              documentType.name,
+              documentType.publicId,
+              documentType.systemId,
+            );
+            break;
+          case node.ELEMENT_NODE:
+            const elementNode = (node as unknown) as HTMLElement;
+            const tagName = getValidTagName(elementNode);
+            rrNode = this.createElement(tagName);
+            const rrElement = rrNode as RRElement;
+            for (const { name, value } of Array.from(elementNode.attributes)) {
+              rrElement.attributes[name] = value;
+            }
+            // form fields
+            if (
+              tagName === 'INPUT' ||
+              tagName === 'TEXTAREA' ||
+              tagName === 'SELECT'
+            ) {
+              const value = (elementNode as
+                | HTMLInputElement
+                | HTMLTextAreaElement).value;
+              if (
+                ['RADIO', 'CHECKBOX', 'SUBMIT', 'BUTTON'].includes(
+                  rrElement.attributes.type as string,
+                ) &&
+                value
+              ) {
+                rrElement.attributes.value = value;
+              } else if ((elementNode as HTMLInputElement).checked) {
+                rrElement.attributes.checked = (elementNode as HTMLInputElement).checked;
+              }
+            }
+            if (tagName === 'OPTION') {
+              const selectValue = (elementNode as HTMLOptionElement)
+                .parentElement;
+              if (
+                rrElement.attributes.value ===
+                (selectValue as HTMLSelectElement).value
+              ) {
+                rrElement.attributes.selected = (elementNode as HTMLOptionElement).selected;
+              }
+            }
+            // canvas image data
+            if (tagName === 'CANVAS') {
+              rrElement.attributes.rr_dataURL = (elementNode as HTMLCanvasElement).toDataURL();
+            }
+            // media elements
+            if (tagName === 'AUDIO' || tagName === 'VIDEO') {
+              const rrMediaElement = rrElement as RRMediaElement;
+              rrMediaElement.paused = (elementNode as HTMLMediaElement).paused;
+              rrMediaElement.currentTime = (elementNode as HTMLMediaElement).currentTime;
+            }
+            // scroll
+            if (elementNode.scrollLeft) {
+              rrElement.scrollLeft = elementNode.scrollLeft;
+            }
+            if (elementNode.scrollTop) {
+              rrElement.scrollTop = elementNode.scrollTop;
+            }
+            break;
+          case node.TEXT_NODE:
+            rrNode = this.createTextNode(
+              ((node as unknown) as Text).textContent,
+            );
+            break;
+          case node.CDATA_SECTION_NODE:
+            rrNode = this.createCDATASection();
+            break;
+          case node.COMMENT_NODE:
+            rrNode = this.createComment(
+              ((node as unknown) as Comment).textContent || '',
+            );
+            break;
+          default:
+            return;
+        }
+        rrNode.__sn = serializedNodeWithId;
+        this.mirror.set(serializedNodeWithId.id, rrNode);
+      } else {
+        rrNode = this.mirror.get(serializedNodeWithId.id);
+        rrNode.parentElement = null;
+        rrNode.parentNode = null;
+        rrNode.children = [];
+      }
+      const parentNode = node.parentElement || node.parentNode;
+      if (parentNode) {
+        const parentSN = ((parentNode as unknown) as INode).__sn;
+        const parentRRNode = this.mirror.get(parentSN.id);
+        parentRRNode.appendChild(rrNode);
+        rrNode.parentNode = parentRRNode;
+        rrNode.parentElement =
+          parentRRNode instanceof RRElement ? parentRRNode : null;
+      }
+
+      if (
+        serializedNodeWithId.type === NodeType.Document ||
+        serializedNodeWithId.type === NodeType.Element
+      ) {
+        node.childNodes.forEach((node) => walk((node as unknown) as INode));
+      }
+    }.bind(this);
+
+    if (dom) {
+      this.destroyTree();
+      walk((dom as unknown) as INode);
+    }
+  }
+
+  destroyTree() {
+    this.children = [];
+    this.mirror.clear();
+  }
+
+  toString() {
+    return super.toString('RRDocument');
+  }
+}
+
+export class RRDocumentType extends RRNode {
+  readonly name: string;
+  readonly publicId: string;
+  readonly systemId: string;
+
+  constructor(qualifiedName: string, publicId: string, systemId: string) {
+    super();
+    this.name = qualifiedName;
+    this.publicId = publicId;
+    this.systemId = systemId;
+  }
+
+  toString() {
+    return super.toString('RRDocumentType');
+  }
+}
+
+export class RRElement extends RRNode {
+  tagName: string;
+  attributes: Record<string, string | number | boolean> = {};
+  scrollLeft: number = 0;
+  scrollTop: number = 0;
+  shadowRoot: RRElement | null = null;
+
+  constructor(tagName: string) {
+    super();
+    this.tagName = tagName;
+  }
+
+  get classList() {
+    return new ClassList(
+      this.attributes.class as string | undefined,
+      (newClassName) => {
+        this.attributes.class = newClassName;
+      },
+    );
+  }
+
+  get id() {
+    return this.attributes.id;
+  }
+
+  get className() {
+    return this.attributes.class || '';
+  }
+
+  get textContent() {
+    return '';
+  }
+
+  set textContent(newText: string) {}
+
+  get style() {
+    const style = (this.attributes.style
+      ? parseCSSText(this.attributes.style as string)
+      : {}) as Record<string, string> & {
+      setProperty: (
+        name: string,
+        value: string | null,
+        priority?: string | null,
+      ) => void;
+    };
+    style.setProperty = (name: string, value: string | null) => {
+      const normalizedName = camelize(name);
+      if (!value) delete style[normalizedName];
+      else style[normalizedName] = value;
+      this.attributes.style = toCSSText(style);
+    };
+    // This is used to bypass the smoothscroll polyfill in rrweb player.
+    style.scrollBehavior = '';
+    return style;
+  }
+
+  get firstElementChild(): RRElement | null {
+    for (let child of this.children)
+      if (child instanceof RRElement) return child;
+    return null;
+  }
+
+  get nextElementSibling(): RRElement | null {
+    let parentNode = this.parentNode;
+    if (!parentNode) return null;
+    const siblings = parentNode.children;
+    let index = siblings.indexOf(this);
+    for (let i = index + 1; i < siblings.length; i++)
+      if (siblings[i] instanceof RRElement) return siblings[i] as RRElement;
+    return null;
+  }
+
+  getAttribute(name: string) {
+    let upperName = name && name.toLowerCase();
+    if (upperName in this.attributes) return this.attributes[upperName];
+    return null;
+  }
+
+  setAttribute(name: string, attribute: string) {
+    this.attributes[name.toLowerCase()] = attribute;
+  }
+
+  hasAttribute(name: string) {
+    return (name && name.toLowerCase()) in this.attributes;
+  }
+
+  setAttributeNS(
+    _namespace: string | null,
+    qualifiedName: string,
+    value: string,
+  ): void {
+    this.setAttribute(qualifiedName, value);
+  }
+
+  removeAttribute(name: string) {
+    delete this.attributes[name];
+  }
+
+  appendChild(newChild: RRNode): RRNode {
+    this.children.push(newChild);
+    newChild.parentNode = this;
+    newChild.parentElement = this;
+    newChild.ownerDocument = this.ownerDocument;
+    return newChild;
+  }
+
+  insertBefore(newChild: RRNode, refChild: RRNode | null): RRNode {
+    if (refChild === null) return this.appendChild(newChild);
+    const childIndex = this.children.indexOf(refChild);
+    if (childIndex == -1)
+      throw new Error(
+        "Failed to execute 'insertBefore' on 'RRNode': The RRNode before which the new node is to be inserted is not a child of this RRNode.",
+      );
+    this.children.splice(childIndex, 0, newChild);
+    newChild.parentElement = null;
+    newChild.parentNode = this;
+    newChild.ownerDocument = this.ownerDocument;
+    return newChild;
+  }
+
+  querySelectorAll(selectors: string): RRNode[] {
+    if (this.ownerDocument !== null) {
+      return (this.ownerDocument.nwsapi.select(
+        selectors,
+        (this as unknown) as Element,
+      ) as unknown) as RRNode[];
+    }
+    return [];
+  }
+
+  getElementById(elementId: string): RRElement | null {
+    if (this instanceof RRElement && this.id === elementId) return this;
+    for (const child of this.children) {
+      if (child instanceof RRElement) {
+        const result = child.getElementById(elementId);
+        if (result !== null) return result;
+      }
+    }
+    return null;
+  }
+
+  getElementsByClassName(className: string): RRElement[] {
+    let elements: RRElement[] = [];
+    const queryClassList = new ClassList(className);
+    // Make sure this element has all queried class names.
+    if (
+      this instanceof RRElement &&
+      queryClassList.filter((queriedClassName) =>
+        this.classList.some((name) => name === queriedClassName),
+      ).length == queryClassList.length
+    )
+      elements.push(this);
+    for (const child of this.children) {
+      if (child instanceof RRElement)
+        elements = elements.concat(child.getElementsByClassName(className));
+    }
+    return elements;
+  }
+
+  getElementsByTagName(tagName: string): RRElement[] {
+    let elements: RRElement[] = [];
+    const normalizedTagName = tagName.toUpperCase();
+    if (this instanceof RRElement && this.tagName === normalizedTagName)
+      elements.push(this);
+    for (const child of this.children) {
+      if (child instanceof RRElement)
+        elements = elements.concat(child.getElementsByTagName(tagName));
+    }
+    return elements;
+  }
+
+  dispatchEvent(_event: Event) {
+    return true;
+  }
+
+  /**
+   * Creates a shadow root for element and returns it.
+   */
+  attachShadow(init: ShadowRootInit): RRElement {
+    this.shadowRoot = init.mode === 'open' ? this : null;
+    return this;
+  }
+
+  toString() {
+    let attributeString = '';
+    for (let attribute in this.attributes) {
+      attributeString += `${attribute}="${this.attributes[attribute]}" `;
+    }
+    return `${super.toString(this.tagName)} ${attributeString}`;
+  }
+}
+
+export class RRImageElement extends RRElement {
+  src: string;
+  width: number;
+  height: number;
+  onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+}
+
+export class RRMediaElement extends RRElement {
+  currentTime: number = 0;
+  paused: boolean = true;
+  async play() {
+    this.paused = false;
+  }
+  async pause() {
+    this.paused = true;
+  }
+}
+
+export class RRCanvasElement extends RRElement {
+  /**
+   * This is just a dummy implementation to prevent rrweb replayer from drawing mouse tail. If further analysis of canvas is needed, we may implement it with node-canvas.
+   */
+  getContext(): CanvasRenderingContext2D | null {
+    return null;
+  }
+}
+
+export class RRStyleElement extends RRElement {
+  private _sheet: CSSStyleSheet | null = null;
+
+  get sheet() {
+    if (!this._sheet) {
+      let result = '';
+      for (let child of this.childNodes)
+        if (child.nodeType === NodeType.Text)
+          result += (child as RRText).textContent;
+      this._sheet = cssom.parse(result);
+    }
+    return this._sheet;
+  }
+}
+
+export class RRIframeElement extends RRElement {
+  width: string = '';
+  height: string = '';
+  src: string = '';
+  contentDocument: RRDocument = new RRDocument();
+  contentWindow: RRWindow = new RRWindow();
+
+  constructor(tagName: string) {
+    super(tagName);
+    const htmlElement = this.contentDocument.createElement('HTML');
+    this.contentDocument.appendChild(htmlElement);
+    htmlElement.appendChild(this.contentDocument.createElement('HEAD'));
+    htmlElement.appendChild(this.contentDocument.createElement('BODY'));
+  }
+}
+
+export class RRText extends RRNode {
+  textContent: string;
+
+  constructor(data: string) {
+    super();
+    this.textContent = data;
+  }
+
+  toString() {
+    return `${super.toString('RRText')} text=${JSON.stringify(
+      this.textContent,
+    )}`;
+  }
+}
+
+export class RRComment extends RRNode {
+  data: string;
+
+  constructor(data: string) {
+    super();
+    this.data = data;
+  }
+
+  toString() {
+    return `${super.toString('RRComment')} data=${JSON.stringify(this.data)}`;
+  }
+}
+export class RRCDATASection extends RRNode {
+  data: string;
+
+  constructor(data: string) {
+    super();
+    this.data = data;
+  }
+
+  toString() {
+    return `${super.toString('RRCDATASection')} data=${JSON.stringify(
+      this.data,
+    )}`;
+  }
+}
+
+interface RRElementTagNameMap {
+  img: RRImageElement;
+  audio: RRMediaElement;
+  video: RRMediaElement;
+}
+
+type RRElementType<
+  K extends keyof HTMLElementTagNameMap
+> = K extends keyof RRElementTagNameMap ? RRElementTagNameMap[K] : RRElement;
+
+class ClassList extends Array {
+  private onChange: ((newClassText: string) => void) | undefined;
+
+  constructor(
+    classText?: string,
+    onChange?: ((newClassText: string) => void) | undefined,
+  ) {
+    super();
+    if (classText) {
+      const classes = classText.trim().split(/\s+/);
+      super.push(...classes);
+    }
+    this.onChange = onChange;
+  }
+
+  add = (...classNames: string[]) => {
+    for (const item of classNames) {
+      const className = String(item);
+      if (super.indexOf(className) >= 0) continue;
+      super.push(className);
+    }
+    this.onChange && this.onChange(super.join(' '));
+  };
+
+  remove = (...classNames: string[]) => {
+    for (const item of classNames) {
+      const className = String(item);
+      const index = super.indexOf(className);
+      if (index < 0) continue;
+      super.splice(index, 1);
+    }
+    this.onChange && this.onChange(super.join(' '));
+  };
+}
diff --git a/packages/rrdom/src/index.ts b/packages/rrdom/src/index.ts
new file mode 100644
index 0000000000..ac14bf73a4
--- /dev/null
+++ b/packages/rrdom/src/index.ts
@@ -0,0 +1,13 @@
+import {
+  polyfillPerformance,
+  polyfillRAF,
+  polyfillEvent,
+  polyfillNode,
+  polyfillDocument,
+} from './polyfill';
+polyfillPerformance();
+polyfillRAF();
+polyfillEvent();
+polyfillNode();
+polyfillDocument();
+export * from './document-nodejs';
diff --git a/packages/rrdom/src/polyfill.ts b/packages/rrdom/src/polyfill.ts
new file mode 100644
index 0000000000..271af35f56
--- /dev/null
+++ b/packages/rrdom/src/polyfill.ts
@@ -0,0 +1,87 @@
+import { RRDocument, RRNode } from './document-nodejs';
+
+/**
+ * Polyfill the performance for nodejs.
+ */
+export function polyfillPerformance() {
+  if (typeof window !== 'undefined' || 'performance' in global) return;
+  ((global as Window & typeof globalThis)
+    .performance as unknown) = require('perf_hooks').performance;
+}
+
+/**
+ * Polyfill requestAnimationFrame and cancelAnimationFrame for nodejs.
+ */
+export function polyfillRAF() {
+  if (typeof window !== 'undefined' || 'requestAnimationFrame' in global)
+    return;
+
+  const FPS = 60,
+    INTERVAL = 1_000 / FPS;
+  let timeoutHandle: NodeJS.Timeout | null = null,
+    rafCount = 0,
+    requests = Object.create(null);
+
+  function onFrameTimer() {
+    const currentRequests = requests;
+    requests = Object.create(null);
+    timeoutHandle = null;
+    Object.keys(currentRequests).forEach(function (id) {
+      const request = currentRequests[id];
+      if (request) request(Date.now());
+    });
+  }
+
+  function requestAnimationFrame(callback: (timestamp: number) => void) {
+    const cbHandle = ++rafCount;
+    requests[cbHandle] = callback;
+    if (timeoutHandle === null)
+      timeoutHandle = setTimeout(onFrameTimer, INTERVAL);
+    return cbHandle;
+  }
+
+  function cancelAnimationFrame(handleId: number) {
+    delete requests[handleId];
+    if (Object.keys(requests).length === 0 && timeoutHandle !== null) {
+      clearTimeout(timeoutHandle);
+      timeoutHandle = null;
+    }
+  }
+
+  (global as Window &
+    typeof globalThis).requestAnimationFrame = requestAnimationFrame;
+  (global as Window &
+    typeof globalThis).cancelAnimationFrame = cancelAnimationFrame;
+}
+
+/**
+ * Try to polyfill Event type.
+ * The implementation of Event so far is empty because rrweb doesn't strongly depend on it in nodejs mode.
+ * Note: The Event class is available through the global object from nodejs v15.0.0.
+ */
+export function polyfillEvent() {
+  if (typeof Event !== 'undefined') return;
+  (global.Event as unknown) = function () {};
+}
+
+/**
+ * Polyfill Node type with RRNode for nodejs.
+ */
+export function polyfillNode() {
+  if (typeof Node !== 'undefined') return;
+  (global.Node as unknown) = RRNode;
+}
+
+/**
+ *  Polyfill document object with RRDocument for nodejs.
+ */
+export function polyfillDocument() {
+  if (typeof document !== 'undefined') return;
+  const rrdom = new RRDocument();
+  (() => {
+    rrdom.appendChild(rrdom.createElement('html'));
+    rrdom.documentElement.appendChild(rrdom.createElement('head'));
+    rrdom.documentElement.appendChild(rrdom.createElement('body'));
+  })();
+  global.document = (rrdom as unknown) as Document;
+}
diff --git a/packages/rrdom/src/style.ts b/packages/rrdom/src/style.ts
new file mode 100644
index 0000000000..1e49b83619
--- /dev/null
+++ b/packages/rrdom/src/style.ts
@@ -0,0 +1,40 @@
+export function parseCSSText(cssText: string): Record<string, string> {
+	const res: Record<string, string> = {};
+	const listDelimiter = /;(?![^(]*\))/g;
+	const propertyDelimiter = /:(.+)/;
+	cssText.split(listDelimiter).forEach(function (item) {
+	  if (item) {
+		const tmp = item.split(propertyDelimiter);
+		tmp.length > 1 && (res[camelize(tmp[0].trim())] = tmp[1].trim());
+	  }
+	});
+	return res;
+  }
+  
+  export function toCSSText(style: Record<string, string>): string {
+	const properties = [];
+	for (let name in style) {
+	  const value = style[name];
+	  if (typeof value !== 'string') continue;
+	  const normalizedName = hyphenate(name);
+	  properties.push(`${normalizedName}:${value};`);
+	}
+	return properties.join(' ');
+  }
+  
+  /**
+   * Camelize a hyphen-delimited string.
+   */
+  const camelizeRE = /-(\w)/g;
+  export const camelize = (str: string): string => {
+	return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));
+  };
+  
+  /**
+   * Hyphenate a camelCase string.
+   */
+  const hyphenateRE = /\B([A-Z])/g;
+  export const hyphenate = (str: string): string => {
+	return str.replace(hyphenateRE, '-$1').toLowerCase();
+  };
+  
\ No newline at end of file
diff --git a/packages/rrdom/test/__snapshots__/document-nodejs.test.ts.snap b/packages/rrdom/test/__snapshots__/document-nodejs.test.ts.snap
new file mode 100644
index 0000000000..04748dd7a8
--- /dev/null
+++ b/packages/rrdom/test/__snapshots__/document-nodejs.test.ts.snap
@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RRDocument for nodejs environment buildFromDom should create an RRDocument from a html document 1`] = `
+"-1 RRDocument
+  -2 RRDocumentType
+  -3 HTML lang=\\"en\\" 
+    -4 HEAD 
+      -5 RRText text=\\"\\\\n    \\"
+      -6 META charset=\\"UTF-8\\" 
+      -7 RRText text=\\"\\\\n    \\"
+      -8 META name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" 
+      -9 RRText text=\\"\\\\n    \\"
+      -10 TITLE 
+        -11 RRText text=\\"Main\\"
+      -12 RRText text=\\"\\\\n    \\"
+      -13 LINK rel=\\"stylesheet\\" href=\\"somelink\\" 
+      -14 RRText text=\\"\\\\n    \\"
+      -15 STYLE 
+        -16 RRText text=\\"\\\\n      h1 {\\\\n        color: 'black';\\\\n      }\\\\n      .blocks {\\\\n        padding: 0;\\\\n      }\\\\n      .blocks1 {\\\\n        margin: 0;\\\\n      }\\\\n      #block1 {\\\\n        width: 100px;\\\\n        height: 200px;\\\\n      }\\\\n      @import url(\\\\\\"main.css\\\\\\");\\\\n    \\"
+      -17 RRText text=\\"\\\\n  \\"
+    -18 RRText text=\\"\\\\n  \\"
+    -19 BODY 
+      -20 RRText text=\\"\\\\n    \\"
+      -21 H1 
+        -22 RRText text=\\"This is a h1 heading\\"
+      -23 RRText text=\\"\\\\n    \\"
+      -24 H1 style=\\"font-size: 16px\\" 
+        -25 RRText text=\\"This is a h1 heading with styles\\"
+      -26 RRText text=\\"\\\\n    \\"
+      -27 DIV id=\\"block1\\" class=\\"blocks blocks1\\" 
+        -28 RRText text=\\"\\\\n      \\"
+        -29 DIV id=\\"block2\\" class=\\"blocks blocks1 :hover\\" 
+          -30 RRText text=\\"\\\\n        Text 1\\\\n        \\"
+          -31 DIV id=\\"block3\\" 
+            -32 RRText text=\\"\\\\n          \\"
+            -33 P 
+              -34 RRText text=\\"This is a paragraph\\"
+            -35 RRText text=\\"\\\\n          \\"
+            -36 BUTTON 
+              -37 RRText text=\\"button1\\"
+            -38 RRText text=\\"\\\\n        \\"
+          -39 RRText text=\\"\\\\n        Text 2\\\\n      \\"
+        -40 RRText text=\\"\\\\n      \\"
+        -41 IMG src=\\"somelink\\" alt=\\"This is an image\\" 
+        -42 RRText text=\\"\\\\n    \\"
+      -43 RRText text=\\"\\\\n  \\\\n\\\\n\\"
+"
+`;
diff --git a/packages/rrdom/test/document-nodejs.test.ts b/packages/rrdom/test/document-nodejs.test.ts
new file mode 100644
index 0000000000..774b7250dc
--- /dev/null
+++ b/packages/rrdom/test/document-nodejs.test.ts
@@ -0,0 +1,259 @@
+/**
+ * @jest-environment jsdom
+ */
+import * as fs from 'fs';
+import * as path from 'path';
+import { RRDocument, RRElement, RRStyleElement } from '../src/document-nodejs';
+import { printRRDom } from './util';
+
+describe('RRDocument for nodejs environment', () => {
+  describe('buildFromDom', () => {
+    it('should create an RRDocument from a html document', () => {
+      // setup document
+      document.write(getHtml('main.html'));
+
+      // create RRDocument from document
+      const rrdoc = new RRDocument();
+      rrdoc.buildFromDom(document);
+      expect(printRRDom(rrdoc)).toMatchSnapshot();
+    });
+  });
+
+  describe('RRDocument API', () => {
+    let rrdom: RRDocument;
+    beforeAll(() => {
+      // initialize rrdom
+      document.write(getHtml('main.html'));
+      rrdom = new RRDocument();
+      rrdom.buildFromDom(document);
+    });
+
+    it('get className', () => {
+      expect(rrdom.getElementsByTagName('DIV')[0].className).toEqual(
+        'blocks blocks1',
+      );
+      expect(rrdom.getElementsByTagName('DIV')[1].className).toEqual(
+        'blocks blocks1 :hover',
+      );
+    });
+
+    it('get id', () => {
+      expect(rrdom.getElementsByTagName('DIV')[0].id).toEqual('block1');
+      expect(rrdom.getElementsByTagName('DIV')[1].id).toEqual('block2');
+      expect(rrdom.getElementsByTagName('DIV')[2].id).toEqual('block3');
+    });
+
+    it('get attribute name', () => {
+      expect(
+        rrdom.getElementsByTagName('DIV')[0].getAttribute('class'),
+      ).toEqual('blocks blocks1');
+      expect(
+        rrdom.getElementsByTagName('dIv')[0].getAttribute('cLaSs'),
+      ).toEqual('blocks blocks1');
+      expect(rrdom.getElementsByTagName('DIV')[0].getAttribute('id')).toEqual(
+        'block1',
+      );
+      expect(rrdom.getElementsByTagName('div')[0].getAttribute('iD')).toEqual(
+        'block1',
+      );
+      expect(
+        rrdom.getElementsByTagName('p')[0].getAttribute('class'),
+      ).toBeNull();
+    });
+
+    it('get firstElementChild', () => {
+      expect(rrdom.firstElementChild).toBeDefined();
+      expect(rrdom.firstElementChild.tagName).toEqual('HTML');
+
+      const div1 = rrdom.getElementById('block1');
+      expect(div1).toBeDefined();
+      expect(div1!.firstElementChild).toBeDefined();
+      expect(div1!.firstElementChild!.id).toEqual('block2');
+      const div2 = div1!.firstElementChild;
+      expect(div2!.firstElementChild!.id).toEqual('block3');
+    });
+
+    it('get nextElementSibling', () => {
+      expect(rrdom.documentElement.firstElementChild).not.toBeNull();
+      expect(rrdom.documentElement.firstElementChild!.tagName).toEqual('HEAD');
+      expect(
+        rrdom.documentElement.firstElementChild!.nextElementSibling,
+      ).not.toBeNull();
+      expect(
+        rrdom.documentElement.firstElementChild!.nextElementSibling!.tagName,
+      ).toEqual('BODY');
+      expect(
+        rrdom.documentElement.firstElementChild!.nextElementSibling!
+          .nextElementSibling,
+      ).toBeNull();
+
+      expect(rrdom.getElementsByTagName('h1').length).toEqual(2);
+      const element1 = rrdom.getElementsByTagName('h1')[0];
+      const element2 = rrdom.getElementsByTagName('h1')[1];
+      expect(element1.tagName).toEqual('H1');
+      expect(element2.tagName).toEqual('H1');
+      expect(element1.nextElementSibling).toEqual(element2);
+      expect(element2.nextElementSibling).not.toBeNull();
+      expect(element2.nextElementSibling!.id).toEqual('block1');
+      expect(element2.nextElementSibling!.nextElementSibling).toBeNull();
+    });
+
+    it('getElementsByTagName', () => {
+      for (let tagname of [
+        'HTML',
+        'BODY',
+        'HEAD',
+        'STYLE',
+        'META',
+        'TITLE',
+        'SCRIPT',
+        'LINK',
+        'DIV',
+        'H1',
+        'P',
+        'BUTTON',
+        'IMG',
+        'CANVAS',
+      ]) {
+        const expectedResult = document.getElementsByTagName(tagname).length;
+        expect(rrdom.getElementsByTagName(tagname).length).toEqual(
+          expectedResult,
+        );
+        expect(
+          rrdom.getElementsByTagName(tagname.toLowerCase()).length,
+        ).toEqual(expectedResult);
+        for (let node of rrdom.getElementsByTagName(tagname)) {
+          expect(node.tagName).toEqual(tagname);
+        }
+      }
+    });
+
+    it('getElementsByClassName', () => {
+      for (let className of [
+        'blocks',
+        'blocks1',
+        ':hover',
+        'blocks1 blocks',
+        'blocks blocks1',
+        ':hover blocks1',
+        ':hover blocks1 blocks',
+        ':hover blocks1 block',
+      ]) {
+        const msg = `queried class name: '${className}'`;
+        expect({
+          message: msg,
+          result: rrdom.getElementsByClassName(className).length,
+        }).toEqual({
+          message: msg,
+          result: document.getElementsByClassName(className).length,
+        });
+      }
+    });
+
+    it('getElementById', () => {
+      for (let elementId of ['block1', 'block2', 'block3']) {
+        expect(rrdom.getElementById(elementId)).not.toBeNull();
+        expect(rrdom.getElementById(elementId)!.id).toEqual(elementId);
+      }
+      for (let elementId of ['block', 'blocks', 'blocks1'])
+        expect(rrdom.getElementById(elementId)).toBeNull();
+    });
+
+    it('querySelectorAll querying tag name', () => {
+      expect(rrdom.querySelectorAll('H1')).toHaveLength(2);
+      expect(rrdom.querySelectorAll('H1')[0]).toBeInstanceOf(RRElement);
+      expect((rrdom.querySelectorAll('H1')[0] as RRElement).tagName).toEqual(
+        'H1',
+      );
+      expect(rrdom.querySelectorAll('H1')[1]).toBeInstanceOf(RRElement);
+      expect((rrdom.querySelectorAll('H1')[1] as RRElement).tagName).toEqual(
+        'H1',
+      );
+    });
+
+    it('querySelectorAll querying class name', () => {
+      for (let className of [
+        '.blocks',
+        '.blocks1',
+        '.\\:hover',
+        '.blocks1.blocks',
+        '.blocks.blocks1',
+        '.\\:hover.blocks1',
+        '.\\:hover.blocks1.blocks',
+        '.\\:hover.blocks1.block',
+      ]) {
+        const msg = `queried class name: '${className}'`;
+        expect({
+          message: msg,
+          result: rrdom.querySelectorAll(className).length,
+        }).toEqual({
+          message: msg,
+          result: document.querySelectorAll(className).length,
+        });
+      }
+      for (let element of rrdom.querySelectorAll('.\\:hover')) {
+        expect(element).toBeInstanceOf(RRElement);
+        expect((element as RRElement).classList).toContain(':hover');
+      }
+    });
+
+    it('querySelectorAll querying id', () => {
+      for (let query of ['#block1', '#block2', '#block3']) {
+        expect(rrdom.querySelectorAll(query).length).toEqual(1);
+        const targetElement = rrdom.querySelectorAll(query)[0] as RRElement;
+        expect(targetElement.id).toEqual(query.substring(1, query.length));
+      }
+      for (let query of ['#block', '#blocks', '#block1#block2'])
+        expect(rrdom.querySelectorAll(query).length).toEqual(0);
+    });
+
+    it('querySelectorAll', () => {
+      expect(rrdom.querySelectorAll('link[rel="stylesheet"]').length).toEqual(
+        1,
+      );
+      const targetLink = rrdom.querySelectorAll(
+        'link[rel="stylesheet"]',
+      )[0] as RRElement;
+      expect(targetLink.tagName).toEqual('LINK');
+      expect(targetLink.getAttribute('rel')).toEqual('stylesheet');
+
+      expect(rrdom.querySelectorAll('.blocks#block1').length).toEqual(1);
+      expect(rrdom.querySelectorAll('.blocks#block3').length).toEqual(0);
+    });
+
+    it('style element', () => {
+      expect(rrdom.getElementsByTagName('style').length).not.toEqual(0);
+      expect(rrdom.getElementsByTagName('style')[0].tagName).toEqual('STYLE');
+      const styleElement = rrdom.getElementsByTagName(
+        'style',
+      )[0] as RRStyleElement;
+      expect(styleElement.sheet).toBeDefined();
+      expect(styleElement.sheet!.cssRules).toBeDefined();
+      expect(styleElement.sheet!.cssRules.length).toEqual(5);
+      const rules = styleElement.sheet!.cssRules;
+      expect(rules[0].cssText).toEqual(`h1 {color: 'black';}`);
+      expect(rules[1].cssText).toEqual(`.blocks {padding: 0;}`);
+      expect(rules[2].cssText).toEqual(`.blocks1 {margin: 0;}`);
+      expect(rules[3].cssText).toEqual(
+        `#block1 {width: 100px; height: 200px;}`,
+      );
+      expect(rules[4].cssText).toEqual(`@import url(main.css);`);
+      expect((rules[4] as CSSImportRule).href).toEqual('main.css');
+
+      expect(styleElement.sheet!.insertRule).toBeDefined();
+      const newRule = "p {color: 'black';}";
+      styleElement.sheet!.insertRule(newRule, 5);
+      expect(rules[5].cssText).toEqual(newRule);
+
+      expect(styleElement.sheet!.deleteRule).toBeDefined();
+      styleElement.sheet!.deleteRule(5);
+      expect(rules[5]).toBeUndefined();
+      expect(rules[4].cssText).toEqual(`@import url(main.css);`);
+    });
+  });
+});
+
+function getHtml(fileName: string) {
+  const filePath = path.resolve(__dirname, `./html/${fileName}`);
+  return fs.readFileSync(filePath, 'utf8');
+}
diff --git a/packages/rrdom/test/html/main.html b/packages/rrdom/test/html/main.html
new file mode 100644
index 0000000000..c9603b3066
--- /dev/null
+++ b/packages/rrdom/test/html/main.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Main</title>
+    <link rel="stylesheet" href="somelink">
+    <style>
+      h1 {
+        color: 'black';
+      }
+      .blocks {
+        padding: 0;
+      }
+      .blocks1 {
+        margin: 0;
+      }
+      #block1 {
+        width: 100px;
+        height: 200px;
+      }
+      @import url("main.css");
+    </style>
+  </head>
+  <body>
+    <h1>This is a h1 heading</h1>
+    <h1 style="font-size: 16px">This is a h1 heading with styles</h1>
+    <div id="block1" class="blocks blocks1">
+      <div id="block2" class="blocks blocks1 :hover">
+        Text 1
+        <div id="block3">
+          <p>This is a paragraph</p>
+          <button>button1</button>
+        </div>
+        Text 2
+      </div>
+      <img src="somelink" alt="This is an image" />
+    </div>
+  </body>
+</html>
diff --git a/packages/rrdom/test/polyfill.test.ts b/packages/rrdom/test/polyfill.test.ts
new file mode 100644
index 0000000000..6222f7de3f
--- /dev/null
+++ b/packages/rrdom/test/polyfill.test.ts
@@ -0,0 +1,83 @@
+import { RRDocument, RRNode } from '../src/document-nodejs';
+import {
+  polyfillPerformance,
+  polyfillRAF,
+  polyfillEvent,
+  polyfillNode,
+  polyfillDocument,
+} from '../src/polyfill';
+
+describe('polyfill for nodejs', () => {
+  it('should polyfill performance api', () => {
+    expect(global.performance).toBeUndefined();
+    polyfillPerformance();
+    expect(global.performance).toBeDefined();
+    expect(performance).toBeDefined();
+    expect(performance.now).toBeDefined();
+    expect(performance.now()).toBeCloseTo(
+      require('perf_hooks').performance.now(),
+      1e-10,
+    );
+  });
+
+  it('should polyfill requestAnimationFrame', () => {
+    expect(global.requestAnimationFrame).toBeUndefined();
+    expect(global.cancelAnimationFrame).toBeUndefined();
+    polyfillRAF();
+    expect(global.requestAnimationFrame).toBeDefined();
+    expect(global.cancelAnimationFrame).toBeDefined();
+    expect(requestAnimationFrame).toBeDefined();
+    expect(cancelAnimationFrame).toBeDefined();
+
+    jest.useFakeTimers();
+    const AnimationTime = 1_000; // target animation time(unit: ms)
+    const startTime = Date.now();
+    let frameCount = 0;
+    const rafCallback1 = () => {
+      const currentTime = Date.now();
+      frameCount++;
+      if (currentTime - startTime < AnimationTime) {
+        requestAnimationFrame(rafCallback1);
+      } else {
+        expect(frameCount).toBeGreaterThanOrEqual(55);
+        expect(frameCount).toBeLessThanOrEqual(65);
+      }
+    };
+    requestAnimationFrame(rafCallback1);
+    // Fast-forward until all timers have been executed
+    jest.runAllTimers();
+
+    let rafHandle;
+    const rafCallback2 = () => {
+      rafHandle = requestAnimationFrame(rafCallback2);
+    };
+    rafHandle = requestAnimationFrame(rafCallback2);
+
+    // If this function doesn't work, recursive function will never end.
+    cancelAnimationFrame(rafHandle);
+    jest.runAllTimers();
+    jest.useRealTimers();
+  });
+
+  it('should polyfill Event type', () => {
+    polyfillEvent();
+    expect(global.Event).toBeDefined();
+    expect(Event).toBeDefined();
+  });
+
+  it('should polyfill Node type', () => {
+    expect(global.Node).toBeUndefined();
+    polyfillNode();
+    expect(global.Node).toBeDefined();
+    expect(Node).toBeDefined();
+    expect(Node).toEqual(RRNode);
+  });
+
+  it('should polyfill document object', () => {
+    expect(global.document).toBeUndefined();
+    polyfillDocument();
+    expect(global.document).toBeDefined();
+    expect(document).toBeDefined();
+    expect(document).toBeInstanceOf(RRDocument);
+  });
+});
diff --git a/packages/rrdom/test/util.ts b/packages/rrdom/test/util.ts
new file mode 100644
index 0000000000..09b860fee0
--- /dev/null
+++ b/packages/rrdom/test/util.ts
@@ -0,0 +1,19 @@
+import { RRIframeElement, RRNode } from '../src/document-nodejs';
+
+/**
+ * Print the RRDom as a string.
+ * @param rootNode the root node of the RRDom tree
+ * @returns printed string
+ */
+export function printRRDom(rootNode: RRNode) {
+  return walk(rootNode, '');
+}
+
+function walk(node: RRNode, blankSpace: string) {
+  let printText = `${blankSpace}${node.toString()}\n`;
+  for (const child of node.childNodes)
+    printText += walk(child, blankSpace + '  ');
+  if (node instanceof RRIframeElement)
+    printText += walk(node.contentDocument, blankSpace + '  ');
+  return printText;
+}
diff --git a/packages/rrdom/tsconfig.json b/packages/rrdom/tsconfig.json
new file mode 100644
index 0000000000..15e1aac33c
--- /dev/null
+++ b/packages/rrdom/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "rootDir": "src",
+    "outDir": "build",
+    "lib": ["es6", "dom"],
+    "skipLibCheck": true,
+    "declaration": true
+  },
+  "compileOnSave": true,
+  "exclude": ["test"],
+  "include": ["src", "test.d.ts"]
+}
diff --git a/yarn.lock b/yarn.lock
index fe25937f5e..ee156c2731 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,11 +16,23 @@
   dependencies:
     "@babel/highlight" "^7.14.5"
 
+"@babel/code-frame@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
+  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
+  dependencies:
+    "@babel/highlight" "^7.16.7"
+
 "@babel/compat-data@^7.15.0":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.15.0.tgz#2dbaf8b85334796cafbb0f5793a90a2fc010b176"
   integrity sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA==
 
+"@babel/compat-data@^7.16.4":
+  version "7.16.4"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.16.4.tgz#081d6bbc336ec5c2435c6346b2ae1fb98b5ac68e"
+  integrity sha512-1o/jo7D+kC9ZjHX5v+EHrdjl3PhxMrLSOTGsOdHJ+KL8HCaEK6ehrVL2RS6oHDZp+L7xLirLrPmQtEng769J/Q==
+
 "@babel/core@^7.1.0", "@babel/core@^7.7.2", "@babel/core@^7.7.5":
   version "7.15.5"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.15.5.tgz#f8ed9ace730722544609f90c9bb49162dc3bf5b9"
@@ -42,6 +54,27 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
+"@babel/core@^7.12.3", "@babel/core@^7.8.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.16.7.tgz#db990f931f6d40cb9b87a0dc7d2adc749f1dcbcf"
+  integrity sha512-aeLaqcqThRNZYmbMqtulsetOQZ/5gbR/dWruUCJcpas4Qoyy+QeagfDsPdMrqwsPRDNxJvBlRiZxxX7THO7qtA==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.16.7"
+    "@babel/helper-compilation-targets" "^7.16.7"
+    "@babel/helper-module-transforms" "^7.16.7"
+    "@babel/helpers" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.16.7"
+    "@babel/types" "^7.16.7"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.1.2"
+    semver "^6.3.0"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.15.4", "@babel/generator@^7.7.2":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.15.4.tgz#85acb159a267ca6324f9793986991ee2022a05b0"
@@ -51,6 +84,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.16.7.tgz#b42bf46a3079fa65e1544135f32e7958f048adbb"
+  integrity sha512-/ST3Sg8MLGY5HVYmrjOgL60ENux/HfO/CsUh7y4MalThufhE/Ff/6EibFDHi4jiDCaWfJKoqbE6oTh21c5hrRg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/helper-compilation-targets@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.15.4.tgz#cf6d94f30fbefc139123e27dd6b02f65aeedb7b9"
@@ -61,6 +103,23 @@
     browserslist "^4.16.6"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.7.tgz#06e66c5f299601e6c7da350049315e83209d551b"
+  integrity sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==
+  dependencies:
+    "@babel/compat-data" "^7.16.4"
+    "@babel/helper-validator-option" "^7.16.7"
+    browserslist "^4.17.5"
+    semver "^6.3.0"
+
+"@babel/helper-environment-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
+  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-function-name@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.15.4.tgz#845744dafc4381a4a5fb6afa6c3d36f98a787ebc"
@@ -70,6 +129,15 @@
     "@babel/template" "^7.15.4"
     "@babel/types" "^7.15.4"
 
+"@babel/helper-function-name@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz#f1ec51551fb1c8956bc8dd95f38523b6cf375f8f"
+  integrity sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-get-function-arity@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.15.4.tgz#098818934a137fce78b536a3e015864be1e2879b"
@@ -77,6 +145,13 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
+"@babel/helper-get-function-arity@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
+  integrity sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-hoist-variables@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.15.4.tgz#09993a3259c0e918f99d104261dfdfc033f178df"
@@ -84,6 +159,13 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
+"@babel/helper-hoist-variables@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
+  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-member-expression-to-functions@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.4.tgz#bfd34dc9bba9824a4658b0317ec2fd571a51e6ef"
@@ -98,6 +180,13 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
+"@babel/helper-module-imports@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
+  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-module-transforms@^7.15.4":
   version "7.15.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.15.7.tgz#7da80c8cbc1f02655d83f8b79d25866afe50d226"
@@ -112,6 +201,20 @@
     "@babel/traverse" "^7.15.4"
     "@babel/types" "^7.15.6"
 
+"@babel/helper-module-transforms@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz#7665faeb721a01ca5327ddc6bba15a5cb34b6a41"
+  integrity sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-simple-access" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/helper-validator-identifier" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-optimise-call-expression@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz#f310a5121a3b9cc52d9ab19122bd729822dee171"
@@ -141,6 +244,13 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
+"@babel/helper-simple-access@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz#d656654b9ea08dbb9659b69d61063ccd343ff0f7"
+  integrity sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-split-export-declaration@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.15.4.tgz#aecab92dcdbef6a10aa3b62ab204b085f776e257"
@@ -148,6 +258,13 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
+"@babel/helper-split-export-declaration@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
+  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-validator-identifier@^7.14.5":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.8.tgz#32be33a756f29e278a0d644fa08a2c9e0f88a34c"
@@ -158,11 +275,21 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
   integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
 
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
 "@babel/helper-validator-option@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
   integrity sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==
 
+"@babel/helper-validator-option@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
+  integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
+
 "@babel/helpers@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.15.4.tgz#5f40f02050a3027121a3cf48d497c05c555eaf43"
@@ -172,6 +299,15 @@
     "@babel/traverse" "^7.15.4"
     "@babel/types" "^7.15.4"
 
+"@babel/helpers@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.16.7.tgz#7e3504d708d50344112767c3542fc5e357fffefc"
+  integrity sha512-9ZDoqtfY7AuEOt3cxchfii6C7GDyyMBffktR5B2jvWv8u2+efwvpnVKXMWzNehqy68tKgAfSwfdw/lWpthS2bw==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
@@ -181,11 +317,25 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.7.tgz#81a01d7d675046f0d96f82450d9d9578bdfd6b0b"
+  integrity sha512-aKpPMfLvGO3Q97V0qhw/V2SWNWlwfJknuwAunU7wZLSfrM4xTBvg7E5opUVi1kJTBKihE38CPg4nBiqX83PWYw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.15.4", "@babel/parser@^7.15.5", "@babel/parser@^7.7.2":
   version "7.15.7"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.7.tgz#0c3ed4a2eb07b165dfa85b3cc45c727334c4edae"
   integrity sha512-rycZXvQ+xS9QyIcJ9HXeDWf1uxqlbVFAUq0Rq0dbc50Zb/+wUe/ehyfzGfm9KZZF0kBejYgxltBXocP+gKdL2g==
 
+"@babel/parser@^7.14.7", "@babel/parser@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.7.tgz#d372dda9c89fcec340a82630a9f533f2fe15877e"
+  integrity sha512-sR4eaSrnM7BV7QPzGfEX5paG/6wrZM3I0HDzfIAK06ESvo9oy3xBuVBxE3MbQaKNhvg8g/ixjMWo2CGpzpHsDA==
+
 "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
@@ -286,6 +436,15 @@
     "@babel/parser" "^7.15.4"
     "@babel/types" "^7.15.4"
 
+"@babel/template@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
+  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/traverse@^7.1.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.7.2":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.4.tgz#ff8510367a144bfbff552d9e18e28f3e2889c22d"
@@ -301,6 +460,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.7.tgz#dac01236a72c2560073658dd1a285fe4e0865d76"
+  integrity sha512-8KWJPIb8c2VvY8AJrydh6+fVRo2ODx1wYBU2398xJVq0JomuLBZmVQzLPBblJgHIGYG4znCpUZUZ0Pt2vdmVYQ==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.16.7"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.15.4", "@babel/types@^7.15.6", "@babel/types@^7.3.0", "@babel/types@^7.3.3":
   version "7.15.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.6.tgz#99abdc48218b2881c058dd0a7ab05b99c9be758f"
@@ -309,6 +484,14 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.7.tgz#4ed19d51f840ed4bd5645be6ce40775fecf03159"
+  integrity sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -376,6 +559,18 @@
     jest-util "^27.2.4"
     slash "^3.0.0"
 
+"@jest/console@^27.4.6":
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-27.4.6.tgz#0742e6787f682b22bdad56f9db2a8a77f6a86107"
+  integrity sha512-jauXyacQD33n47A44KrlOVeiXHEXDqapSdfb9kTekOchH/Pd18kBIO1+xxJQRLuG+LUuljFCwTG92ra4NW7SpA==
+  dependencies:
+    "@jest/types" "^27.4.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^27.4.6"
+    jest-util "^27.4.2"
+    slash "^3.0.0"
+
 "@jest/core@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.2.4.tgz#0b932da787d64848eab720dbb88e5b7a3f86e539"
@@ -410,6 +605,40 @@
     slash "^3.0.0"
     strip-ansi "^6.0.0"
 
+"@jest/core@^27.4.7":
+  version "27.4.7"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.4.7.tgz#84eabdf42a25f1fa138272ed229bcf0a1b5e6913"
+  integrity sha512-n181PurSJkVMS+kClIFSX/LLvw9ExSb+4IMtD6YnfxZVerw9ANYtW0bPrm0MJu2pfe9SY9FJ9FtQ+MdZkrZwjg==
+  dependencies:
+    "@jest/console" "^27.4.6"
+    "@jest/reporters" "^27.4.6"
+    "@jest/test-result" "^27.4.6"
+    "@jest/transform" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.8.1"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-changed-files "^27.4.2"
+    jest-config "^27.4.7"
+    jest-haste-map "^27.4.6"
+    jest-message-util "^27.4.6"
+    jest-regex-util "^27.4.0"
+    jest-resolve "^27.4.6"
+    jest-resolve-dependencies "^27.4.6"
+    jest-runner "^27.4.6"
+    jest-runtime "^27.4.6"
+    jest-snapshot "^27.4.6"
+    jest-util "^27.4.2"
+    jest-validate "^27.4.6"
+    jest-watcher "^27.4.6"
+    micromatch "^4.0.4"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
 "@jest/environment@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.2.4.tgz#db3e60f7dd30ab950f6ce2d6d7293ed9a6b7cbcd"
@@ -420,6 +649,16 @@
     "@types/node" "*"
     jest-mock "^27.2.4"
 
+"@jest/environment@^27.4.6":
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.4.6.tgz#1e92885d64f48c8454df35ed9779fbcf31c56d8b"
+  integrity sha512-E6t+RXPfATEEGVidr84WngLNWZ8ffCPky8RqqRK6u1Bn0LK92INe0MDttyPl/JOzaq92BmDzOeuqk09TvM22Sg==
+  dependencies:
+    "@jest/fake-timers" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    "@types/node" "*"
+    jest-mock "^27.4.6"
+
 "@jest/fake-timers@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.2.4.tgz#00df08bd60332bd59503cb5b6db21e4903785f86"
@@ -432,6 +671,18 @@
     jest-mock "^27.2.4"
     jest-util "^27.2.4"
 
+"@jest/fake-timers@^27.4.6":
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.4.6.tgz#e026ae1671316dbd04a56945be2fa251204324e8"
+  integrity sha512-mfaethuYF8scV8ntPpiVGIHQgS0XIALbpY2jt2l7wb/bvq4Q5pDLk4EP4D7SAvYT1QrPOPVZAtbdGAOOyIgs7A==
+  dependencies:
+    "@jest/types" "^27.4.2"
+    "@sinonjs/fake-timers" "^8.0.1"
+    "@types/node" "*"
+    jest-message-util "^27.4.6"
+    jest-mock "^27.4.6"
+    jest-util "^27.4.2"
+
 "@jest/globals@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.2.4.tgz#0aeb22b011f8c8c4b8ff3b4dbd1ee0392fe0dd8a"
@@ -441,6 +692,15 @@
     "@jest/types" "^27.2.4"
     expect "^27.2.4"
 
+"@jest/globals@^27.4.6":
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.4.6.tgz#3f09bed64b0fd7f5f996920258bd4be8f52f060a"
+  integrity sha512-kAiwMGZ7UxrgPzu8Yv9uvWmXXxsy0GciNejlHvfPIfWkSxChzv6bgTS3YqBkGuHcis+ouMFI2696n2t+XYIeFw==
+  dependencies:
+    "@jest/environment" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    expect "^27.4.6"
+
 "@jest/reporters@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.2.4.tgz#1482ff007f2e919d85c54b1563abb8b2ea2d5198"
@@ -471,6 +731,37 @@
     terminal-link "^2.0.0"
     v8-to-istanbul "^8.1.0"
 
+"@jest/reporters@^27.4.6":
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.4.6.tgz#b53dec3a93baf9b00826abf95b932de919d6d8dd"
+  integrity sha512-+Zo9gV81R14+PSq4wzee4GC2mhAN9i9a7qgJWL90Gpx7fHYkWpTBvwWNZUXvJByYR9tAVBdc8VxDWqfJyIUrIQ==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^27.4.6"
+    "@jest/test-result" "^27.4.6"
+    "@jest/transform" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    graceful-fs "^4.2.4"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^5.1.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.1.3"
+    jest-haste-map "^27.4.6"
+    jest-resolve "^27.4.6"
+    jest-util "^27.4.2"
+    jest-worker "^27.4.6"
+    slash "^3.0.0"
+    source-map "^0.6.0"
+    string-length "^4.0.1"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^8.1.0"
+
 "@jest/source-map@^27.0.6":
   version "27.0.6"
   resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-27.0.6.tgz#be9e9b93565d49b0548b86e232092491fb60551f"
@@ -480,6 +771,15 @@
     graceful-fs "^4.2.4"
     source-map "^0.6.0"
 
+"@jest/source-map@^27.4.0":
+  version "27.4.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-27.4.0.tgz#2f0385d0d884fb3e2554e8f71f8fa957af9a74b6"
+  integrity sha512-Ntjx9jzP26Bvhbm93z/AKcPRj/9wrkI88/gK60glXDx1q+IeI0rf7Lw2c89Ch6ofonB0On/iRDreQuQ6te9pgQ==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.2.4"
+    source-map "^0.6.0"
+
 "@jest/test-result@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.2.4.tgz#d1ca8298d168f1b0be834bfb543b1ac0294c05d7"
@@ -490,6 +790,16 @@
     "@types/istanbul-lib-coverage" "^2.0.0"
     collect-v8-coverage "^1.0.0"
 
+"@jest/test-result@^27.4.6":
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.4.6.tgz#b3df94c3d899c040f602cea296979844f61bdf69"
+  integrity sha512-fi9IGj3fkOrlMmhQqa/t9xum8jaJOOAi/lZlm6JXSc55rJMXKHxNDN1oCP39B0/DhNOa2OMupF9BcKZnNtXMOQ==
+  dependencies:
+    "@jest/console" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
 "@jest/test-sequencer@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.2.4.tgz#df66422a3e9e7440ce8b7498e255fa6b52c0bc03"
@@ -500,6 +810,16 @@
     jest-haste-map "^27.2.4"
     jest-runtime "^27.2.4"
 
+"@jest/test-sequencer@^27.4.6":
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.4.6.tgz#447339b8a3d7b5436f50934df30854e442a9d904"
+  integrity sha512-3GL+nsf6E1PsyNsJuvPyIz+DwFuCtBdtvPpm/LMXVkBJbdFvQYCDpccYT56qq5BGniXWlE81n2qk1sdXfZebnw==
+  dependencies:
+    "@jest/test-result" "^27.4.6"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^27.4.6"
+    jest-runtime "^27.4.6"
+
 "@jest/transform@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.2.4.tgz#2fe5b6836895f7a1b8bdec442c51e83943c62733"
@@ -521,6 +841,27 @@
     source-map "^0.6.1"
     write-file-atomic "^3.0.0"
 
+"@jest/transform@^27.4.6":
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.4.6.tgz#153621940b1ed500305eacdb31105d415dc30231"
+  integrity sha512-9MsufmJC8t5JTpWEQJ0OcOOAXaH5ioaIX6uHVBLBMoCZPfKKQF+EqP8kACAvCZ0Y1h2Zr3uOccg8re+Dr5jxyw==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^27.4.2"
+    babel-plugin-istanbul "^6.1.1"
+    chalk "^4.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^27.4.6"
+    jest-regex-util "^27.4.0"
+    jest-util "^27.4.2"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
+    slash "^3.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "^3.0.0"
+
 "@jest/types@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.2.4.tgz#2430042a66e00dc5b140c3636f4474d464c21ee8"
@@ -532,6 +873,17 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@jest/types@^27.4.2":
+  version "27.4.2"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.4.2.tgz#96536ebd34da6392c2b7c7737d693885b5dd44a5"
+  integrity sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^16.0.0"
+    chalk "^4.0.0"
+
 "@lerna/add@4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@lerna/add/-/add-4.0.0.tgz#c36f57d132502a57b9e7058d1548b7a565ef183f"
@@ -1406,6 +1758,31 @@
     magic-string "^0.25.2"
     resolve "^1.11.0"
 
+"@rollup/plugin-commonjs@^20.0.0":
+  version "20.0.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-20.0.0.tgz#3246872dcbcb18a54aaa6277a8c7d7f1b155b745"
+  integrity sha512-5K0g5W2Ol8hAcTHqcTBHiA7M58tfmYi1o9KxeJuuRNpGaTa5iLjcyemBitCBcKXaHamOBBEH2dGom6v6Unmqjg==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    commondir "^1.0.1"
+    estree-walker "^2.0.1"
+    glob "^7.1.6"
+    is-reference "^1.2.1"
+    magic-string "^0.25.7"
+    resolve "^1.17.0"
+
+"@rollup/plugin-node-resolve@^13.0.4":
+  version "13.0.6"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.0.6.tgz#29629070bb767567be8157f575cfa8f2b8e9ef77"
+  integrity sha512-sFsPDMPd4gMqnh2gS0uIxELnoRUp5kBl5knxD2EO0778G1oOJv4G1vyT2cpWz75OU2jDVcXhjVUuTAczGyFNKA==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    "@types/resolve" "1.17.1"
+    builtin-modules "^3.1.0"
+    deepmerge "^4.2.2"
+    is-module "^1.0.0"
+    resolve "^1.19.0"
+
 "@rollup/plugin-node-resolve@^7.0.0":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
@@ -1433,7 +1810,7 @@
     "@rollup/pluginutils" "^3.1.0"
     resolve "^1.17.0"
 
-"@rollup/pluginutils@4":
+"@rollup/pluginutils@4", "@rollup/pluginutils@^4.1.0":
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec"
   integrity sha512-clDjivHqWGXi7u+0d2r2sBi4Ie6VLEAzWMIkvJLnDmxoOhBYOTfzGbOQBA32THHm11/LiJbd01tJUpJsbshSWQ==
@@ -1517,6 +1894,11 @@
   resolved "https://registry.yarnpkg.com/@types/css-font-loading-module/-/css-font-loading-module-0.0.4.tgz#94a835e27d1af444c65cba88523533c174463d64"
   integrity sha512-ENdXf7MW4m9HeDojB2Ukbi7lYMIuQNBHVf98dbzaiG4EEJREBd6oleVAjrLRCrp7dm6CK1mmdmU9tcgF61acbw==
 
+"@types/cssom@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@types/cssom/-/cssom-0.4.1.tgz#fb64e145b425bd6c1b0ed78ebd66ba43b6e088ab"
+  integrity sha512-hHGVfUuGZe5FpgCxpTJccH0gD1bui5gWceW0We0TyAzUr6wBaqDnSLG9Yr3xqS4AkGhnclNOwRSXH/LIfki3fQ==
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -1566,6 +1948,14 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
+"@types/jest@^27.0.1":
+  version "27.4.0"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.4.0.tgz#037ab8b872067cae842a320841693080f9cb84ed"
+  integrity sha512-gHl8XuC1RZ8H2j5sHv/JqsaxXkDDM9iDOgu0Wp8sjs4u/snb2PVehyWXJPr+ORA0RPpgw231mnutWI1+0hgjIQ==
+  dependencies:
+    jest-diff "^27.0.0"
+    pretty-format "^27.0.0"
+
 "@types/jest@^27.0.2":
   version "27.0.2"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.0.2.tgz#ac383c4d4aaddd29bbf2b916d8d105c304a5fcd7"
@@ -1618,6 +2008,11 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
   integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
 
+"@types/nwsapi@^2.2.2":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@types/nwsapi/-/nwsapi-2.2.2.tgz#1b1dccfc38b2b7e1b9ea71d5285796878375e862"
+  integrity sha512-C4G47l3cAra4729xbhL9y3PjTpO7LJwXd47Fn1mbnZ6WcTkFPo8iDJPyMGCIudxpc7aeM8K1Fmw+lZfOb5ya9g==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -1669,6 +2064,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/resolve@1.17.1":
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
+  integrity sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/rx-core-binding@*":
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/@types/rx-core-binding/-/rx-core-binding-4.0.4.tgz#d969d32f15a62b89e2862c17b3ee78fe329818d3"
@@ -2228,6 +2630,20 @@ babel-jest@^27.2.4:
     graceful-fs "^4.2.4"
     slash "^3.0.0"
 
+babel-jest@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.4.6.tgz#4d024e69e241cdf4f396e453a07100f44f7ce314"
+  integrity sha512-qZL0JT0HS1L+lOuH+xC2DVASR3nunZi/ozGhpgauJHgmI7f8rudxf6hUjEHympdQ/J64CdKmPkgfJ+A3U6QCrg==
+  dependencies:
+    "@jest/transform" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.1.1"
+    babel-preset-jest "^27.4.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    slash "^3.0.0"
+
 babel-plugin-istanbul@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
@@ -2239,6 +2655,17 @@ babel-plugin-istanbul@^6.0.0:
     istanbul-lib-instrument "^4.0.0"
     test-exclude "^6.0.0"
 
+babel-plugin-istanbul@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
+  integrity sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^5.0.4"
+    test-exclude "^6.0.0"
+
 babel-plugin-jest-hoist@^27.2.0:
   version "27.2.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.2.0.tgz#79f37d43f7e5c4fdc4b2ca3e10cc6cf545626277"
@@ -2249,6 +2676,16 @@ babel-plugin-jest-hoist@^27.2.0:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
+babel-plugin-jest-hoist@^27.4.0:
+  version "27.4.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.4.0.tgz#d7831fc0f93573788d80dee7e682482da4c730d6"
+  integrity sha512-Jcu7qS4OX5kTWBc45Hz7BMmgXuJqRnhatqpUhnzGC3OBYpOmf2tv6jFNwZpwM7wU7MUuv2r9IPS/ZlYOuburVw==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.0.0"
+    "@types/babel__traverse" "^7.0.6"
+
 babel-preset-current-node-syntax@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
@@ -2275,6 +2712,14 @@ babel-preset-jest@^27.2.0:
     babel-plugin-jest-hoist "^27.2.0"
     babel-preset-current-node-syntax "^1.0.0"
 
+babel-preset-jest@^27.4.0:
+  version "27.4.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-27.4.0.tgz#70d0e676a282ccb200fbabd7f415db5fdf393bca"
+  integrity sha512-NK4jGYpnBvNxcGo7/ZpZJr51jCGT+3bwwpVIDY2oNfTxJJldRtB4VAcYdgp1loDE50ODuTu+yBjpMAswv5tlpg==
+  dependencies:
+    babel-plugin-jest-hoist "^27.4.0"
+    babel-preset-current-node-syntax "^1.0.0"
+
 babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
@@ -2431,6 +2876,17 @@ browserslist@^4.16.6:
     node-releases "^1.1.77"
     picocolors "^0.2.1"
 
+browserslist@^4.17.5:
+  version "4.19.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.19.1.tgz#4ac0435b35ab655896c31d53018b6dd5e9e4c9a3"
+  integrity sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==
+  dependencies:
+    caniuse-lite "^1.0.30001286"
+    electron-to-chromium "^1.4.17"
+    escalade "^3.1.1"
+    node-releases "^2.0.1"
+    picocolors "^1.0.0"
+
 bs-logger@0.x:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
@@ -2587,6 +3043,11 @@ caniuse-lite@^1.0.30001264:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001265.tgz#0613c9e6c922e422792e6fcefdf9a3afeee4f8c3"
   integrity sha512-YzBnspggWV5hep1m9Z6sZVLOt7vrju8xWooFAgN6BA5qvy98qPAPb7vNUzypFaoh2pb3vlfzbDO8tB57UPGbtw==
 
+caniuse-lite@^1.0.30001286:
+  version "1.0.30001297"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001297.tgz#ea7776ccc4992956582cae5b8fea127fbebde430"
+  integrity sha512-6bbIbowYG8vFs/Lk4hU9jFt7NknGDleVAciK916tp6ft1j+D//ZwwL6LbF1wXMQ32DMSjeuUV8suhh6dlmFjcA==
+
 capture-stack-trace@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
@@ -2707,6 +3168,11 @@ ci-info@^3.1.1:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.2.0.tgz#2876cb948a498797b5236f0095bc057d0dca38b6"
   integrity sha512-dVqRX7fLUm8J6FgHJ418XuIgDLZDkYcDFTeL6TA2gt5WlIZUQrrH6EZrNClwT/H0FateUsZkGIOPRrLbP+PR9A==
 
+ci-info@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.3.0.tgz#b4ed1fb6818dea4803a55c623041f9165d2066b2"
+  integrity sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==
+
 cjs-module-lexer@^1.0.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
@@ -3499,6 +3965,11 @@ diff-sequences@^27.0.6:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.0.6.tgz#3305cb2e55a033924054695cc66019fd7f8e5723"
   integrity sha512-ag6wfpBFyNXZ0p8pcuIDS//D8H062ZQJ3fzYxjpmeKjnz8W4pekL3AI8VohmyZmsWW2PWaHgjsmqR6L13101VQ==
 
+diff-sequences@^27.4.0:
+  version "27.4.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.4.0.tgz#d783920ad8d06ec718a060d00196dfef25b132a5"
+  integrity sha512-YqiQzkrsmHMH5uuh8OdQFU9/ZpADnwzml8z0O5HvRNda+5UZsaX/xN+AAxfR2hWq1Y7HZnAzO9J5lJXOuDz2Ww==
+
 diff@^3.0.1, diff@^3.1.0, diff@^3.2.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
@@ -3630,6 +4101,11 @@ electron-to-chromium@^1.3.857:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.860.tgz#d612e54ed75fa524c12af8da3ad8121ebfe2802b"
   integrity sha512-gWwGZ+Wv4Mou2SJRH6JQzhTPjL5f95SX7n6VkLTQ/Q/INsZLZNQ1vH2GlZjozKyvT0kkFuCmWTwIoCj+/hUDPw==
 
+electron-to-chromium@^1.4.17:
+  version "1.4.37"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.37.tgz#eedd53cad229ae2d1632b958a92a3d7d7b27f553"
+  integrity sha512-XIvFB1omSAxYgHYX48sC+HR8i/p7lx7R+0cX9faElg1g++h9IilCrJ12+bQuY+d96Wp7zkBiJwMOv+AhLtLrTg==
+
 emittery@^0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
@@ -3986,6 +4462,16 @@ expect@^27.2.4:
     jest-message-util "^27.2.4"
     jest-regex-util "^27.0.6"
 
+expect@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-27.4.6.tgz#f335e128b0335b6ceb4fcab67ece7cbd14c942e6"
+  integrity sha512-1M/0kAALIaj5LaG66sFJTbRsWTADnylly82cu4bspI0nl+pgP4E6Bh/aqdHlTUjul06K7xQnnrAoqfxVU0+/ag==
+  dependencies:
+    "@jest/types" "^27.4.2"
+    jest-get-type "^27.4.0"
+    jest-matcher-utils "^27.4.6"
+    jest-message-util "^27.4.6"
+
 express@^4.16.4:
   version "4.17.1"
   resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
@@ -4218,6 +4704,15 @@ finalhandler@~1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.0"
 
+find-cache-dir@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
+  integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^3.0.2"
+    pkg-dir "^4.1.0"
+
 find-up@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@@ -4319,6 +4814,15 @@ fs-constants@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
+fs-extra@8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
+  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
 fs-extra@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
@@ -5285,7 +5789,7 @@ is-redirect@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
   integrity sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=
 
-is-reference@^1.1.2:
+is-reference@^1.1.2, is-reference@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
   integrity sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==
@@ -5383,6 +5887,11 @@ istanbul-lib-coverage@^3.0.0:
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.1.tgz#e8900b3ed6069759229cf30f7067388d148aeb5e"
   integrity sha512-GvCYYTxaCPqwMjobtVcVKvSHtAGe48MNhGjpK8LtVF8K0ISX7hCKl85LgtuaSneWVyQmaGcW3iXVV3GaZSLpmQ==
 
+istanbul-lib-coverage@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
+  integrity sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==
+
 istanbul-lib-instrument@^4.0.0, istanbul-lib-instrument@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz#873c6fff897450118222774696a3f28902d77c1d"
@@ -5393,6 +5902,17 @@ istanbul-lib-instrument@^4.0.0, istanbul-lib-instrument@^4.0.3:
     istanbul-lib-coverage "^3.0.0"
     semver "^6.3.0"
 
+istanbul-lib-instrument@^5.0.4, istanbul-lib-instrument@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.1.0.tgz#7b49198b657b27a730b8e9cb601f1e1bff24c59a"
+  integrity sha512-czwUz525rkOFDJxfKK6mYfIs9zBKILyrZQxjz3ABhjQXhbhFsSbo1HW/BFcsDnfJYJWA6thRR5/TUY2qs5W99Q==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/parser" "^7.14.7"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.2.0"
+    semver "^6.3.0"
+
 istanbul-lib-report@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
@@ -5419,6 +5939,14 @@ istanbul-reports@^3.0.2:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
+istanbul-reports@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.3.tgz#4bcae3103b94518117930d51283690960b50d3c2"
+  integrity sha512-x9LtDVtfm/t1GFiLl3NffC7hz+I1ragvgX1P/Lg1NlIagifZDKUkuuaAxH/qpwj2IuEfD8G2Bs/UKp+sZ/pKkg==
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
+
 jest-changed-files@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.2.4.tgz#d7de46e90e5a599c47e260760f5ab53516e835e6"
@@ -5428,6 +5956,15 @@ jest-changed-files@^27.2.4:
     execa "^5.0.0"
     throat "^6.0.1"
 
+jest-changed-files@^27.4.2:
+  version "27.4.2"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.4.2.tgz#da2547ea47c6e6a5f6ed336151bd2075736eb4a5"
+  integrity sha512-/9x8MjekuzUQoPjDHbBiXbNEBauhrPU2ct7m8TfCg69ywt1y/N+yYwGh3gCpnqUS3klYWDU/lSNgv+JhoD2k1A==
+  dependencies:
+    "@jest/types" "^27.4.2"
+    execa "^5.0.0"
+    throat "^6.0.1"
+
 jest-circus@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.2.4.tgz#3bd898a29dcaf6a506f3f1b780dff5f67ca83c23"
@@ -5453,6 +5990,31 @@ jest-circus@^27.2.4:
     stack-utils "^2.0.3"
     throat "^6.0.1"
 
+jest-circus@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.4.6.tgz#d3af34c0eb742a967b1919fbb351430727bcea6c"
+  integrity sha512-UA7AI5HZrW4wRM72Ro80uRR2Fg+7nR0GESbSI/2M+ambbzVuA63mn5T1p3Z/wlhntzGpIG1xx78GP2YIkf6PhQ==
+  dependencies:
+    "@jest/environment" "^27.4.6"
+    "@jest/test-result" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^0.7.0"
+    expect "^27.4.6"
+    is-generator-fn "^2.0.0"
+    jest-each "^27.4.6"
+    jest-matcher-utils "^27.4.6"
+    jest-message-util "^27.4.6"
+    jest-runtime "^27.4.6"
+    jest-snapshot "^27.4.6"
+    jest-util "^27.4.2"
+    pretty-format "^27.4.6"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+    throat "^6.0.1"
+
 jest-cli@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.2.4.tgz#acda7f367aa6e674723fc1a7334e0ae1799448d2"
@@ -5471,6 +6033,24 @@ jest-cli@^27.2.4:
     prompts "^2.0.1"
     yargs "^16.2.0"
 
+jest-cli@^27.4.7:
+  version "27.4.7"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.4.7.tgz#d00e759e55d77b3bcfea0715f527c394ca314e5a"
+  integrity sha512-zREYhvjjqe1KsGV15mdnxjThKNDgza1fhDT+iUsXWLCq3sxe9w5xnvyctcYVT5PcdLSjv7Y5dCwTS3FCF1tiuw==
+  dependencies:
+    "@jest/core" "^27.4.7"
+    "@jest/test-result" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    import-local "^3.0.2"
+    jest-config "^27.4.7"
+    jest-util "^27.4.2"
+    jest-validate "^27.4.6"
+    prompts "^2.0.1"
+    yargs "^16.2.0"
+
 jest-config@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.2.4.tgz#0204969f5ae2e5190d47be2c14c04d631b7836e2"
@@ -5498,6 +6078,34 @@ jest-config@^27.2.4:
     micromatch "^4.0.4"
     pretty-format "^27.2.4"
 
+jest-config@^27.4.7:
+  version "27.4.7"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.4.7.tgz#4f084b2acbd172c8b43aa4cdffe75d89378d3972"
+  integrity sha512-xz/o/KJJEedHMrIY9v2ParIoYSrSVY6IVeE4z5Z3i101GoA5XgfbJz+1C8EYPsv7u7f39dS8F9v46BHDhn0vlw==
+  dependencies:
+    "@babel/core" "^7.8.0"
+    "@jest/test-sequencer" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    babel-jest "^27.4.6"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.1"
+    graceful-fs "^4.2.4"
+    jest-circus "^27.4.6"
+    jest-environment-jsdom "^27.4.6"
+    jest-environment-node "^27.4.6"
+    jest-get-type "^27.4.0"
+    jest-jasmine2 "^27.4.6"
+    jest-regex-util "^27.4.0"
+    jest-resolve "^27.4.6"
+    jest-runner "^27.4.6"
+    jest-util "^27.4.2"
+    jest-validate "^27.4.6"
+    micromatch "^4.0.4"
+    pretty-format "^27.4.6"
+    slash "^3.0.0"
+
 jest-diff@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-23.6.0.tgz#1500f3f16e850bb3d71233408089be099f610c7d"
@@ -5518,6 +6126,16 @@ jest-diff@^27.0.0, jest-diff@^27.2.4:
     jest-get-type "^27.0.6"
     pretty-format "^27.2.4"
 
+jest-diff@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.4.6.tgz#93815774d2012a2cbb6cf23f84d48c7a2618f98d"
+  integrity sha512-zjaB0sh0Lb13VyPsd92V7HkqF6yKRH9vm33rwBt7rPYrpQvS1nCvlIy2pICbKta+ZjWngYLNn4cCK4nyZkjS/w==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^27.4.0"
+    jest-get-type "^27.4.0"
+    pretty-format "^27.4.6"
+
 jest-docblock@^27.0.6:
   version "27.0.6"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-27.0.6.tgz#cc78266acf7fe693ca462cbbda0ea4e639e4e5f3"
@@ -5525,6 +6143,13 @@ jest-docblock@^27.0.6:
   dependencies:
     detect-newline "^3.0.0"
 
+jest-docblock@^27.4.0:
+  version "27.4.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-27.4.0.tgz#06c78035ca93cbbb84faf8fce64deae79a59f69f"
+  integrity sha512-7TBazUdCKGV7svZ+gh7C8esAnweJoG+SvcF6Cjqj4l17zA2q1cMwx2JObSioubk317H+cjcHgP+7fTs60paulg==
+  dependencies:
+    detect-newline "^3.0.0"
+
 jest-each@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-27.2.4.tgz#b4f280aafd63129ba82e345f0e74c5a10200aeef"
@@ -5536,6 +6161,17 @@ jest-each@^27.2.4:
     jest-util "^27.2.4"
     pretty-format "^27.2.4"
 
+jest-each@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-27.4.6.tgz#e7e8561be61d8cc6dbf04296688747ab186c40ff"
+  integrity sha512-n6QDq8y2Hsmn22tRkgAk+z6MCX7MeVlAzxmZDshfS2jLcaBlyhpF3tZSJLR+kXmh23GEvS0ojMR8i6ZeRvpQcA==
+  dependencies:
+    "@jest/types" "^27.4.2"
+    chalk "^4.0.0"
+    jest-get-type "^27.4.0"
+    jest-util "^27.4.2"
+    pretty-format "^27.4.6"
+
 jest-environment-jsdom@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.2.4.tgz#39ae80bbb8675306bfaf0440be1e5f877554539a"
@@ -5549,6 +6185,19 @@ jest-environment-jsdom@^27.2.4:
     jest-util "^27.2.4"
     jsdom "^16.6.0"
 
+jest-environment-jsdom@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.4.6.tgz#c23a394eb445b33621dfae9c09e4c8021dea7b36"
+  integrity sha512-o3dx5p/kHPbUlRvSNjypEcEtgs6LmvESMzgRFQE6c+Prwl2JLA4RZ7qAnxc5VM8kutsGRTB15jXeeSbJsKN9iA==
+  dependencies:
+    "@jest/environment" "^27.4.6"
+    "@jest/fake-timers" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    "@types/node" "*"
+    jest-mock "^27.4.6"
+    jest-util "^27.4.2"
+    jsdom "^16.6.0"
+
 jest-environment-node@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.2.4.tgz#b79f98cb36e0c9111aac859c9c99f04eb2f74ff6"
@@ -5561,6 +6210,18 @@ jest-environment-node@^27.2.4:
     jest-mock "^27.2.4"
     jest-util "^27.2.4"
 
+jest-environment-node@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.4.6.tgz#ee8cd4ef458a0ef09d087c8cd52ca5856df90242"
+  integrity sha512-yfHlZ9m+kzTKZV0hVfhVu6GuDxKAYeFHrfulmy7Jxwsq4V7+ZK7f+c0XP/tbVDMQW7E4neG2u147hFkuVz0MlQ==
+  dependencies:
+    "@jest/environment" "^27.4.6"
+    "@jest/fake-timers" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    "@types/node" "*"
+    jest-mock "^27.4.6"
+    jest-util "^27.4.2"
+
 jest-get-type@^22.1.0:
   version "22.4.3"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-22.4.3.tgz#e3a8504d8479342dd4420236b322869f18900ce4"
@@ -5571,6 +6232,11 @@ jest-get-type@^27.0.6:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.0.6.tgz#0eb5c7f755854279ce9b68a9f1a4122f69047cfe"
   integrity sha512-XTkK5exIeUbbveehcSR8w0bhH+c0yloW/Wpl+9vZrjzztCPWrxhHwkIFpZzCt71oRBsgxmuUfxEqOYoZI2macg==
 
+jest-get-type@^27.4.0:
+  version "27.4.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.4.0.tgz#7503d2663fffa431638337b3998d39c5e928e9b5"
+  integrity sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==
+
 jest-haste-map@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.2.4.tgz#f8974807bedf07348ca9fd24e5861ab7c8e61aba"
@@ -5591,6 +6257,26 @@ jest-haste-map@^27.2.4:
   optionalDependencies:
     fsevents "^2.3.2"
 
+jest-haste-map@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.4.6.tgz#c60b5233a34ca0520f325b7e2cc0a0140ad0862a"
+  integrity sha512-0tNpgxg7BKurZeFkIOvGCkbmOHbLFf4LUQOxrQSMjvrQaQe3l6E8x6jYC1NuWkGo5WDdbr8FEzUxV2+LWNawKQ==
+  dependencies:
+    "@jest/types" "^27.4.2"
+    "@types/graceful-fs" "^4.1.2"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-regex-util "^27.4.0"
+    jest-serializer "^27.4.0"
+    jest-util "^27.4.2"
+    jest-worker "^27.4.6"
+    micromatch "^4.0.4"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
 jest-jasmine2@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.2.4.tgz#4a1608133dbdb4d68b5929bfd785503ed9c9ba51"
@@ -5615,6 +6301,29 @@ jest-jasmine2@^27.2.4:
     pretty-format "^27.2.4"
     throat "^6.0.1"
 
+jest-jasmine2@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.4.6.tgz#109e8bc036cb455950ae28a018f983f2abe50127"
+  integrity sha512-uAGNXF644I/whzhsf7/qf74gqy9OuhvJ0XYp8SDecX2ooGeaPnmJMjXjKt0mqh1Rl5dtRGxJgNrHlBQIBfS5Nw==
+  dependencies:
+    "@jest/environment" "^27.4.6"
+    "@jest/source-map" "^27.4.0"
+    "@jest/test-result" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    expect "^27.4.6"
+    is-generator-fn "^2.0.0"
+    jest-each "^27.4.6"
+    jest-matcher-utils "^27.4.6"
+    jest-message-util "^27.4.6"
+    jest-runtime "^27.4.6"
+    jest-snapshot "^27.4.6"
+    jest-util "^27.4.2"
+    pretty-format "^27.4.6"
+    throat "^6.0.1"
+
 jest-leak-detector@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.2.4.tgz#9bb7eab26a73bb280e9298be8d80f389288ec8f1"
@@ -5623,6 +6332,14 @@ jest-leak-detector@^27.2.4:
     jest-get-type "^27.0.6"
     pretty-format "^27.2.4"
 
+jest-leak-detector@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.4.6.tgz#ed9bc3ce514b4c582637088d9faf58a33bd59bf4"
+  integrity sha512-kkaGixDf9R7CjHm2pOzfTxZTQQQ2gHTIWKY/JZSiYTc90bZp8kSZnUMS3uLAfwTZwc0tcMRoEX74e14LG1WapA==
+  dependencies:
+    jest-get-type "^27.4.0"
+    pretty-format "^27.4.6"
+
 jest-matcher-utils@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-23.6.0.tgz#726bcea0c5294261a7417afb6da3186b4b8cac80"
@@ -5642,6 +6359,16 @@ jest-matcher-utils@^27.2.4:
     jest-get-type "^27.0.6"
     pretty-format "^27.2.4"
 
+jest-matcher-utils@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.4.6.tgz#53ca7f7b58170638590e946f5363b988775509b8"
+  integrity sha512-XD4PKT3Wn1LQnRAq7ZsTI0VRuEc9OrCPFiO1XL7bftTGmfNF0DcEwMHRgqiu7NGf8ZoZDREpGrCniDkjt79WbA==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^27.4.6"
+    jest-get-type "^27.4.0"
+    pretty-format "^27.4.6"
+
 jest-message-util@^23.4.0:
   version "23.4.0"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-23.4.0.tgz#17610c50942349508d01a3d1e0bda2c079086a9f"
@@ -5668,6 +6395,21 @@ jest-message-util@^27.2.4:
     slash "^3.0.0"
     stack-utils "^2.0.3"
 
+jest-message-util@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.4.6.tgz#9fdde41a33820ded3127465e1a5896061524da31"
+  integrity sha512-0p5szriFU0U74czRSFjH6RyS7UYIAkn/ntwMuOwTGWrQIOh5NzXXrq72LOqIkJKKvFbPq+byZKuBz78fjBERBA==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^27.4.2"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    micromatch "^4.0.4"
+    pretty-format "^27.4.6"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
 jest-mock@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.2.4.tgz#c8f0ef33f73d8ff53e3f60b16d59f1128f4072ae"
@@ -5676,6 +6418,14 @@ jest-mock@^27.2.4:
     "@jest/types" "^27.2.4"
     "@types/node" "*"
 
+jest-mock@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.4.6.tgz#77d1ba87fbd33ccb8ef1f061697e7341b7635195"
+  integrity sha512-kvojdYRkst8iVSZ1EJ+vc1RRD9llueBjKzXzeCytH3dMM7zvPV/ULcfI2nr0v0VUgm3Bjt3hBCQvOeaBz+ZTHw==
+  dependencies:
+    "@jest/types" "^27.4.2"
+    "@types/node" "*"
+
 jest-pnp-resolver@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
@@ -5686,6 +6436,11 @@ jest-regex-util@^27.0.6:
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.0.6.tgz#02e112082935ae949ce5d13b2675db3d8c87d9c5"
   integrity sha512-SUhPzBsGa1IKm8hx2F4NfTGGp+r7BXJ4CulsZ1k2kI+mGLG+lxGrs76veN2LF/aUdGosJBzKgXmNCw+BzFqBDQ==
 
+jest-regex-util@^27.4.0:
+  version "27.4.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.4.0.tgz#e4c45b52653128843d07ad94aec34393ea14fbca"
+  integrity sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==
+
 jest-resolve-dependencies@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.2.4.tgz#20c41cc02b66aa45169b282356ec73b133013089"
@@ -5695,6 +6450,15 @@ jest-resolve-dependencies@^27.2.4:
     jest-regex-util "^27.0.6"
     jest-snapshot "^27.2.4"
 
+jest-resolve-dependencies@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.4.6.tgz#fc50ee56a67d2c2183063f6a500cc4042b5e2327"
+  integrity sha512-W85uJZcFXEVZ7+MZqIPCscdjuctruNGXUZ3OHSXOfXR9ITgbUKeHj+uGcies+0SsvI5GtUfTw4dY7u9qjTvQOw==
+  dependencies:
+    "@jest/types" "^27.4.2"
+    jest-regex-util "^27.4.0"
+    jest-snapshot "^27.4.6"
+
 jest-resolve@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-23.6.0.tgz#cf1d1a24ce7ee7b23d661c33ba2150f3aebfa0ae"
@@ -5720,6 +6484,22 @@ jest-resolve@^27.2.4:
     resolve "^1.20.0"
     slash "^3.0.0"
 
+jest-resolve@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.4.6.tgz#2ec3110655e86d5bfcfa992e404e22f96b0b5977"
+  integrity sha512-SFfITVApqtirbITKFAO7jOVN45UgFzcRdQanOFzjnbd+CACDoyeX7206JyU92l4cRr73+Qy/TlW51+4vHGt+zw==
+  dependencies:
+    "@jest/types" "^27.4.2"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^27.4.6"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^27.4.2"
+    jest-validate "^27.4.6"
+    resolve "^1.20.0"
+    resolve.exports "^1.1.0"
+    slash "^3.0.0"
+
 jest-runner@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.2.4.tgz#d816f4cb4af04f3cba703afcf5a35a335b77cad4"
@@ -5748,6 +6528,34 @@ jest-runner@^27.2.4:
     source-map-support "^0.5.6"
     throat "^6.0.1"
 
+jest-runner@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.4.6.tgz#1d390d276ec417e9b4d0d081783584cbc3e24773"
+  integrity sha512-IDeFt2SG4DzqalYBZRgbbPmpwV3X0DcntjezPBERvnhwKGWTW7C5pbbA5lVkmvgteeNfdd/23gwqv3aiilpYPg==
+  dependencies:
+    "@jest/console" "^27.4.6"
+    "@jest/environment" "^27.4.6"
+    "@jest/test-result" "^27.4.6"
+    "@jest/transform" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.8.1"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-docblock "^27.4.0"
+    jest-environment-jsdom "^27.4.6"
+    jest-environment-node "^27.4.6"
+    jest-haste-map "^27.4.6"
+    jest-leak-detector "^27.4.6"
+    jest-message-util "^27.4.6"
+    jest-resolve "^27.4.6"
+    jest-runtime "^27.4.6"
+    jest-util "^27.4.2"
+    jest-worker "^27.4.6"
+    source-map-support "^0.5.6"
+    throat "^6.0.1"
+
 jest-runtime@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.2.4.tgz#170044041e5d30625ab8d753516bbe503f213a5c"
@@ -5781,6 +6589,34 @@ jest-runtime@^27.2.4:
     strip-bom "^4.0.0"
     yargs "^16.2.0"
 
+jest-runtime@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.4.6.tgz#83ae923818e3ea04463b22f3597f017bb5a1cffa"
+  integrity sha512-eXYeoR/MbIpVDrjqy5d6cGCFOYBFFDeKaNWqTp0h6E74dK0zLHzASQXJpl5a2/40euBmKnprNLJ0Kh0LCndnWQ==
+  dependencies:
+    "@jest/environment" "^27.4.6"
+    "@jest/fake-timers" "^27.4.6"
+    "@jest/globals" "^27.4.6"
+    "@jest/source-map" "^27.4.0"
+    "@jest/test-result" "^27.4.6"
+    "@jest/transform" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    execa "^5.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^27.4.6"
+    jest-message-util "^27.4.6"
+    jest-mock "^27.4.6"
+    jest-regex-util "^27.4.0"
+    jest-resolve "^27.4.6"
+    jest-snapshot "^27.4.6"
+    jest-util "^27.4.2"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+
 jest-serializer@^27.0.6:
   version "27.0.6"
   resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-27.0.6.tgz#93a6c74e0132b81a2d54623251c46c498bb5bec1"
@@ -5789,6 +6625,14 @@ jest-serializer@^27.0.6:
     "@types/node" "*"
     graceful-fs "^4.2.4"
 
+jest-serializer@^27.4.0:
+  version "27.4.0"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-27.4.0.tgz#34866586e1cae2388b7d12ffa2c7819edef5958a"
+  integrity sha512-RDhpcn5f1JYTX2pvJAGDcnsNTnsV9bjYPU8xcV+xPwOXnUPOQwf4ZEuiU6G9H1UztH+OapMgu/ckEVwO87PwnQ==
+  dependencies:
+    "@types/node" "*"
+    graceful-fs "^4.2.4"
+
 jest-snapshot@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-23.6.0.tgz#f9c2625d1b18acda01ec2d2b826c0ce58a5aa17a"
@@ -5835,6 +6679,34 @@ jest-snapshot@^27.2.4:
     pretty-format "^27.2.4"
     semver "^7.3.2"
 
+jest-snapshot@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-27.4.6.tgz#e2a3b4fff8bdce3033f2373b2e525d8b6871f616"
+  integrity sha512-fafUCDLQfzuNP9IRcEqaFAMzEe7u5BF7mude51wyWv7VRex60WznZIC7DfKTgSIlJa8aFzYmXclmN328aqSDmQ==
+  dependencies:
+    "@babel/core" "^7.7.2"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/traverse" "^7.7.2"
+    "@babel/types" "^7.0.0"
+    "@jest/transform" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    "@types/babel__traverse" "^7.0.4"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^27.4.6"
+    graceful-fs "^4.2.4"
+    jest-diff "^27.4.6"
+    jest-get-type "^27.4.0"
+    jest-haste-map "^27.4.6"
+    jest-matcher-utils "^27.4.6"
+    jest-message-util "^27.4.6"
+    jest-util "^27.4.2"
+    natural-compare "^1.4.0"
+    pretty-format "^27.4.6"
+    semver "^7.3.2"
+
 jest-util@^27.0.0, jest-util@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.2.4.tgz#3d7ce081b2e7f4cfe0156452ac01f3cb456cc656"
@@ -5847,6 +6719,18 @@ jest-util@^27.0.0, jest-util@^27.2.4:
     is-ci "^3.0.0"
     picomatch "^2.2.3"
 
+jest-util@^27.4.2:
+  version "27.4.2"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.4.2.tgz#ed95b05b1adfd761e2cda47e0144c6a58e05a621"
+  integrity sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==
+  dependencies:
+    "@jest/types" "^27.4.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.4"
+    picomatch "^2.2.3"
+
 jest-validate@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.2.4.tgz#b66d462b2fb93d7e16a47d1aa8763d5600bf2cfa"
@@ -5859,6 +6743,18 @@ jest-validate@^27.2.4:
     leven "^3.1.0"
     pretty-format "^27.2.4"
 
+jest-validate@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.4.6.tgz#efc000acc4697b6cf4fa68c7f3f324c92d0c4f1f"
+  integrity sha512-872mEmCPVlBqbA5dToC57vA3yJaMRfIdpCoD3cyHWJOMx+SJwLNw0I71EkWs41oza/Er9Zno9XuTkRYCPDUJXQ==
+  dependencies:
+    "@jest/types" "^27.4.2"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^27.4.0"
+    leven "^3.1.0"
+    pretty-format "^27.4.6"
+
 jest-watcher@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.2.4.tgz#b1d5c39ab94f59f4f35f66cc96f7761a10e0cfc4"
@@ -5872,6 +6768,19 @@ jest-watcher@^27.2.4:
     jest-util "^27.2.4"
     string-length "^4.0.1"
 
+jest-watcher@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.4.6.tgz#673679ebeffdd3f94338c24f399b85efc932272d"
+  integrity sha512-yKQ20OMBiCDigbD0quhQKLkBO+ObGN79MO4nT7YaCuQ5SM+dkBNWE8cZX0FjU6czwMvWw6StWbe+Wv4jJPJ+fw==
+  dependencies:
+    "@jest/test-result" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    jest-util "^27.4.2"
+    string-length "^4.0.1"
+
 jest-worker@^26.2.1:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
@@ -5890,6 +6799,24 @@ jest-worker@^27.2.4:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
+jest-worker@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.4.6.tgz#5d2d93db419566cb680752ca0792780e71b3273e"
+  integrity sha512-gHWJF/6Xi5CTG5QCvROr6GcmpIqNYpDJyc8A1h/DyXqH1tD6SnRCM0d3U5msV31D2LB/U+E0M+W4oyvKV44oNw==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jest@^27.1.1:
+  version "27.4.7"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-27.4.7.tgz#87f74b9026a1592f2da05b4d258e57505f28eca4"
+  integrity sha512-8heYvsx7nV/m8m24Vk26Y87g73Ba6ueUd0MWed/NXMhSZIm62U/llVbS0PJe1SHunbyXjJ/BqG1z9bFjGUIvTg==
+  dependencies:
+    "@jest/core" "^27.4.7"
+    import-local "^3.0.2"
+    jest-cli "^27.4.7"
+
 jest@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest/-/jest-27.2.4.tgz#70e27bef873138afc123aa4769f7124c50ad3efb"
@@ -6080,6 +7007,13 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
+jsonfile@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
 jsonfile@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
@@ -6365,7 +7299,7 @@ make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.0:
+make-dir@^3.0.0, make-dir@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -6850,6 +7784,11 @@ node-releases@^1.1.77:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.77.tgz#50b0cfede855dd374e7585bf228ff34e57c1c32e"
   integrity sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==
 
+node-releases@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.1.tgz#3d1d395f204f1f2f29a54358b9fb678765ad2fc5"
+  integrity sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==
+
 nopt@^4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"
@@ -7443,6 +8382,11 @@ picocolors@^0.2.1:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
   integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
 
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
@@ -7487,7 +8431,12 @@ pirates@^4.0.1:
   dependencies:
     node-modules-regexp "^1.0.0"
 
-pkg-dir@^4.2.0:
+pirates@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.4.tgz#07df81e61028e402735cdd49db701e4885b4e6e6"
+  integrity sha512-ZIrVPH+A52Dw84R0L3/VS9Op04PuQ2SEoJL6bkshmiTic/HldyW9Tf7oH5mhJZBK7NmDx27vSMrYEXPXclpDKw==
+
+pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
   integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
@@ -7912,6 +8861,15 @@ pretty-format@^27.0.0, pretty-format@^27.2.4:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
+pretty-format@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.4.6.tgz#1b784d2f53c68db31797b2348fa39b49e31846b7"
+  integrity sha512-NblstegA1y/RJW2VyML+3LlpFjzx62cUrtBIKIWDXEDkjNeleA7Od7nrzcs/VLQvAeV4CgSYhrN39DRN88Qi/g==
+  dependencies:
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -8377,12 +9335,17 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve.exports@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9"
+  integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
+
 resolve@1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.14.1, resolve@^1.14.2, resolve@^1.16.1, resolve@^1.17.0, resolve@^1.20.0:
+resolve@1.20.0, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.14.1, resolve@^1.14.2, resolve@^1.16.1, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -8500,6 +9463,17 @@ rollup-plugin-terser@^7.0.2:
     serialize-javascript "^4.0.0"
     terser "^5.0.0"
 
+rollup-plugin-typescript2@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.30.0.tgz#1cc99ac2309bf4b9d0a3ebdbc2002aecd56083d3"
+  integrity sha512-NUFszIQyhgDdhRS9ya/VEmsnpTe+GERDMmFo0Y+kf8ds51Xy57nPNGglJY+W6x1vcouA7Au7nsTgsLFj2I0PxQ==
+  dependencies:
+    "@rollup/pluginutils" "^4.1.0"
+    find-cache-dir "^3.3.1"
+    fs-extra "8.1.0"
+    resolve "1.20.0"
+    tslib "2.1.0"
+
 rollup-pluginutils@^2.8.2:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
@@ -8514,6 +9488,13 @@ rollup@^2.45.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
+rollup@^2.56.3:
+  version "2.60.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.60.2.tgz#3f45ace36a9b10b4297181831ea0719922513463"
+  integrity sha512-1Bgjpq61sPjgoZzuiDSGvbI1tD91giZABgjCQBKM5aYLnzjq52GoDuWVwT/cm/MCxCMPU8gqQvkj8doQ5C8Oqw==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 run-async@^2.2.0, run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
@@ -9435,6 +10416,11 @@ ts-node@^7.0.1:
     source-map-support "^0.5.6"
     yn "^2.0.0"
 
+tslib@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
+  integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
+
 tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -9637,7 +10623,7 @@ universal-user-agent@^6.0.0:
   resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-6.0.0.tgz#3381f8503b251c0d9cd21bc1de939ec9df5480ee"
   integrity sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==
 
-universalify@^0.1.2:
+universalify@^0.1.0, universalify@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
   integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==

From 69a1b9ffe67dbf8ba72fc5647f90fcb07ed23550 Mon Sep 17 00:00:00 2001
From: Cristi Constantin <1748317+croqaz@users.noreply.github.com>
Date: Tue, 11 Jan 2022 15:54:58 +0000
Subject: [PATCH 488/524] Save images offline, in the snapshot (#770)

* Implemented image restore from rr_dataURL

* Implement saving images in the snapshot

* Fixed image saving, added a test

* Rename data-src to data-rrweb-src

* Updated the guide

* Rename recordImages to inlineImages and try catch
---
 guide.md                                      |   1 +
 packages/rrweb-snapshot/src/rebuild.ts        |  18 +++++---
 packages/rrweb-snapshot/src/snapshot.ts       |  40 ++++++++++++++++++
 .../__snapshots__/integration.test.ts.snap    |   1 +
 .../rrweb-snapshot/test/html/picture.html     |   1 +
 packages/rrweb-snapshot/test/images/robot.png | Bin 0 -> 11004 bytes
 .../rrweb-snapshot/test/integration.test.ts   |  20 +++++++++
 packages/rrweb-snapshot/typings/snapshot.d.ts |   2 +
 8 files changed, 77 insertions(+), 6 deletions(-)
 create mode 100644 packages/rrweb-snapshot/test/images/robot.png

diff --git a/guide.md b/guide.md
index 19f26bc204..3c6ed36ff3 100644
--- a/guide.md
+++ b/guide.md
@@ -155,6 +155,7 @@ The parameter of `rrweb.record` accepts the following options.
 | packFn               | -                  | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                                                |
 | sampling             | -                  | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                                                |
 | recordCanvas         | false              | whether to record the canvas element                                                                                                                                                          |
+| inlineImages         | false              | whether to record the image content                                                                                                                                                          |
 | collectFonts         | false              | whether to collect fonts in the website                                                                                                                                                       |
 | recordLog            | false              | whether to record console output, refer to the [console recipe](./docs/recipes/console.md)                                                                                                    |
 | userTriggeredOnInput | false              | whether to add `userTriggered` on input events that indicates if this event was triggered directly by the user or not. [What is `userTriggered`?](https://github.com/rrweb-io/rrweb/pull/495) |
diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index 6aef3c4e0f..1719569c36 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -226,18 +226,24 @@ function buildNode(
                 ctx.drawImage(image, 0, 0, image.width, image.height);
               }
             };
+          } else if (tagName === 'img' && name === 'rr_dataURL') {
+            const image = (node as HTMLImageElement);
+            if (!image.currentSrc.startsWith('data:')) {
+              // backup original img src
+              image.setAttribute('data-rrweb-src', image.currentSrc);
+              image.src = value;
+            }
+            image.removeAttribute(name);
           }
+
           if (name === 'rr_width') {
             (node as HTMLElement).style.width = value;
-          }
-          if (name === 'rr_height') {
+          } else if (name === 'rr_height') {
             (node as HTMLElement).style.height = value;
-          }
-          if (name === 'rr_mediaCurrentTime') {
+          } else if (name === 'rr_mediaCurrentTime') {
             (node as HTMLMediaElement).currentTime = n.attributes
               .rr_mediaCurrentTime as number;
-          }
-          if (name === 'rr_mediaState') {
+          } else if (name === 'rr_mediaState') {
             switch (value) {
               case 'played':
                 (node as HTMLMediaElement)
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 6c6e136e0d..e666eb4ade 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -75,6 +75,20 @@ function extractOrigin(url: string): string {
   return origin;
 }
 
+let canvasService: HTMLCanvasElement | null;
+let canvasCtx: CanvasRenderingContext2D | null;
+
+function initCanvasService(doc: Document) {
+  if (!canvasService) {
+      canvasService = doc.createElement('canvas');
+  }
+  if (!canvasCtx) {
+      canvasCtx = canvasService.getContext('2d');
+  }
+  canvasService.width = 0;
+  canvasService.height = 0;
+}
+
 const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm;
 const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/|#).*/;
 const DATA_URI = /^(data:)([^,]*),(.*)/i;
@@ -369,6 +383,7 @@ function serializeNode(
     maskInputOptions: MaskInputOptions;
     maskTextFn: MaskTextFn | undefined;
     maskInputFn: MaskInputFn | undefined;
+    inlineImages: boolean;
     recordCanvas: boolean;
     keepIframeSrcFn: KeepIframeSrcFn;
   },
@@ -383,6 +398,7 @@ function serializeNode(
     maskInputOptions = {},
     maskTextFn,
     maskInputFn,
+    inlineImages,
     recordCanvas,
     keepIframeSrcFn,
   } = options;
@@ -498,6 +514,19 @@ function serializeNode(
       if (tagName === 'canvas' && recordCanvas) {
         attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL();
       }
+      // save image offline
+      if (tagName === 'img' && inlineImages && canvasService && canvasCtx) {
+        const image = (n as HTMLImageElement);
+        image.crossOrigin = 'anonymous';
+        try {
+          canvasService.width = image.naturalWidth;
+          canvasService.height = image.naturalHeight;
+          canvasCtx.drawImage(image, 0, 0);
+          attributes.rr_dataURL = canvasService.toDataURL();
+        } catch {
+          // ignore error
+        }
+      }
       // media elements
       if (tagName === 'audio' || tagName === 'video') {
         attributes.rr_mediaState = (n as HTMLMediaElement).paused
@@ -711,6 +740,7 @@ export function serializeNodeWithId(
     maskInputFn: MaskInputFn | undefined;
     slimDOMOptions: SlimDOMOptions;
     keepIframeSrcFn?: KeepIframeSrcFn;
+    inlineImages?: boolean;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
@@ -731,6 +761,7 @@ export function serializeNodeWithId(
     maskTextFn,
     maskInputFn,
     slimDOMOptions,
+    inlineImages = false,
     recordCanvas = false,
     onSerialize,
     onIframeLoad,
@@ -748,6 +779,7 @@ export function serializeNodeWithId(
     maskInputOptions,
     maskTextFn,
     maskInputFn,
+    inlineImages,
     recordCanvas,
     keepIframeSrcFn,
   });
@@ -800,6 +832,9 @@ export function serializeNodeWithId(
     ) {
       preserveWhiteSpace = false;
     }
+    if (inlineImages) {
+      initCanvasService(doc);
+    }
     const bypassOptions = {
       doc,
       map,
@@ -813,6 +848,7 @@ export function serializeNodeWithId(
       maskTextFn,
       maskInputFn,
       slimDOMOptions,
+      inlineImages,
       recordCanvas,
       preserveWhiteSpace,
       onSerialize,
@@ -865,6 +901,7 @@ export function serializeNodeWithId(
             maskTextFn,
             maskInputFn,
             slimDOMOptions,
+            inlineImages,
             recordCanvas,
             preserveWhiteSpace,
             onSerialize,
@@ -897,6 +934,7 @@ function snapshot(
     maskTextFn?: MaskTextFn;
     maskInputFn?: MaskTextFn;
     slimDOM?: boolean | SlimDOMOptions;
+    inlineImages?: boolean;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
@@ -911,6 +949,7 @@ function snapshot(
     maskTextClass = 'rr-mask',
     maskTextSelector = null,
     inlineStylesheet = true,
+    inlineImages = false,
     recordCanvas = false,
     maskAllInputs = false,
     maskTextFn,
@@ -980,6 +1019,7 @@ function snapshot(
       maskTextFn,
       maskInputFn,
       slimDOMOptions,
+      inlineImages,
       recordCanvas,
       preserveWhiteSpace,
       onSerialize,
diff --git a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
index a0aaace1b3..0706eba11c 100644
--- a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
@@ -326,6 +326,7 @@ exports[`integration tests [html file]: picture.html 1`] = `
       <source type=\\"image/webp\\" srcset=\\"http://localhost:3030/assets/img/characters/robot.webp\\" />
       <img src=\\"http://localhost:3030/assets/img/characters/robot.png\\" />
     </picture>
+    <img src=\\"http://localhost:3030/images/robot.png\\" alt=\\"This is a robot\\" />
   </body></html>"
 `;
 
diff --git a/packages/rrweb-snapshot/test/html/picture.html b/packages/rrweb-snapshot/test/html/picture.html
index 90d0b421a1..e005310b77 100644
--- a/packages/rrweb-snapshot/test/html/picture.html
+++ b/packages/rrweb-snapshot/test/html/picture.html
@@ -4,5 +4,6 @@
       <source type="image/webp" srcset="assets/img/characters/robot.webp" />
       <img src="assets/img/characters/robot.png" />
     </picture>
+    <img src="/images/robot.png" alt="This is a robot" />
   </body>
 </html>
diff --git a/packages/rrweb-snapshot/test/images/robot.png b/packages/rrweb-snapshot/test/images/robot.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc486cc8b70680b0dfd72828b6530e0a4e9183ad
GIT binary patch
literal 11004
zcmV<YDg)JtP)<h;3K|Lk000e1NJLTq002w?003YJ0ssI2IGY1800009a7bBm001r{
z001r{0eGc9b^rh%07*naRCt`tym^?NS9vG+p5@!WyVqVNmG)hhyi4AMv1Nm?F^hqu
z`^hkbAtZE~PG_c*p+l0Vp&JN2y(H;QC!JvkA%P|Y7@J@M#s<8~wrp$PRZ^8|zxUQ%
zzwK=A{BcXNO=ve*mZ#r8?sKc|Q+2-Ieb@7z-+Rd2zi}`8|0JX*KydjN*poMWA^wK{
z$Dc(grHCk`P+DF>MG57cTg)be7&LF-a&I<BN~l58jXM^1hWkdx2FJ_!K4T05F16~j
z)e8$tvsz2ra(iFI8?xw|3X)QmWHD#f9XGyx&$V}s^{;TaqcvvA7_GI@?QVN&e)7eW
z`;JUJFJxkI7vBh#k~hsKDWy@;UAtn_|N734Ze6ooh&0VoDMgkEX&}pl(OMf&$`B+|
z3zLuR|K@Cc!m+%|$H~_1+VF;8cx|DSb>q(N9eY0ckxvbk2cx7z2w0ZIEpA(uQbq_V
zgpyh-t=ipA&dZOK*Vj7>&F&&&7QkiMEq$Y4yw)0&#%Xl*rW^mo2S33m7?6cr==-j1
zb4saYao4dBQE8KABF%(lS=}V!j9xXiCm-}FEeIi(^#E@alGhMpjAOYUe)q4~mPILW
z#xtde!O-Fqpxut7Q~;pSAfn7<ryFadg%p5v$lq*RHk!+_*ef1*D4}s0?bvwj_|SMN
zQa}(|0048jHad!vC`q$Srb241m5_)al}h3m5rxWT&o7aj2ebqD`jvUbK@vi=(W{2n
z0T7W1G@y+(#&kN75Hb}?3YleDDx?%rYm<tM5~7WfLe?9N$%)f$U$?TRC^PlCZT5<T
zL_kVue{nzxX|&PCXsxBxfIuiE0E`i4ai(-9$uwe|Buc4Hx7%nmmYU7>QkB|3Sp`tS
z>qYtI<Vk`EN@)OKlo@4|(ntsxV~kERktP}EJQYGInIvhe-R^Wdvvad&&Ym;`3gten
z6kJB=x#EEb4RXePCrGnYNU60JQf5L@z%&y{l4fa^rdgV%O3F0NqNv;Hb{fsbg$t9-
zMy)b9>Xiyw$;%0_Z-%)t${gEON)tu^KuKlL5P&#I<2WS%TI(oIwAPsrNt#AccVS_n
zR-H#QanvCg5<<|x>sIEQVXkCZ3rH!YKn#FmSxK5DX$AmNX-a7i03s@-;v}h7=Y>cJ
z0ijb=oDgz3)xecCR|3Qs<2qh3ECGPUIS@iAwQSyvQ$*BSAsWUgrPSh_QA#LDlcd{i
z10n)2N}3Cc6c}Dc(Q}1;l7KNf=NEE*h=7Qwl_rFAI&qq2T4|$^QNkGUUDt7JN+<ym
zC$W+O0V!ol%Z2GFW6b6F<Q3PXGHS3q9C)EpQV5xfEJ?F&H&RNcndpUFLMWvK2r+1c
zl$}l+5h<aJ@hnZiXvXc!Dbug8PZBW3l=FRvm<cJQkxF;FNwd|BqDU(3ySC%zlvD^r
zNEs#R{K9;rQ8z{dp_FnXC9#oEKz!Y4@=Ak5AcU5}N~aqgJbdW*@xug-?*|$zZrOn!
zvT_;P9VwO6dVaBb`s~@s^Jj!e2_a~V*3uZ{HU|RaG7{yR5M7Z{mL}=<zWd<p^h83-
z3)5$cp4olNUE8m^K8m7)2cDm~aJITQr$nNZ5XdPqG{$y4V+<w4_U+4wI&h^yA|Pj0
z-Y*Od4ZQ1J?|I^h$J_3@x_T;Gc(UDGx_amK$=SsRKmXSkCQj|xaaB{7+bYMKhr-a~
zL7x<YGHR6a@-CwJpSt29giyj5Be&ePXZ!Y@ym{=VweGH4-#)r(<M^tT({ppxdbQHu
zw|4#J;f=enxIr4^wikpst(8*3%jLsz&M5sqvAH4;LX=j`W}9-@x_u|(ZneI|9q-0#
zuOgJ~f8lwz(BD5Wc=GgV$C+HutayA4u?s>e0HYNSjE?waJChM1uU{W;Qh`1<zo3lN
z+7yb#u@x&;j1Beol{;~oB&iqVk-C1lP|O!RKNn|Wso9K^2mmPILCMl2yG)CFGdcsd
zWr-}CnVGNGmIB`!=r0K&C?ga|soXC`CbB4#1_))0aDqmqMy5*1e7+c#ZLMDaPO>Lg
z9HcQilc^sBo?|(#ZQEA8z7&Q5W&GUKtmFC{H*AYqb)zK#5NVV~4H37s7Jz8G7IpRI
zwLSo@w7K@$0<BJC&A_@`KJWX!<Jg?@r=NPVTp2uh_S{SRpX{`j9LEkl7ZH;<jpIm2
z$tYLK1SMNTdO0DdCvS#NMp?ueE0qelTn-WQx!iod^wJA2T$nx=)h9XSLAgH&3rQx7
zN;9PiVF=2$?4Zn*jxV!S2X9IWf%&D`PB*eF%lG|4p$Gumw{Oc8az^X%)f>Xfpcmvb
zsg%~OC=t>iAzEwK=fn|c-hh*WD+>|<DdE+|-1<$cXQrp;=H{Mz_L)|@H99(Q{f##o
z?n~--6GNCyC`*ORq|pe7sHMvH1<3T}H0dtM70;8D5Mi=|2lt;marD$_dt`X{^r@2%
zJ@~E3sVR|Vn6^dSoR1pie9rQ6T1joBRvG8KJeE^3x_n!OH{qCoQ5I*>!c6sF{Q7Tg
z+OqMb0|&KM8#isKH`)u;TAFl?)>3OfR{+3vbBTaTqhxTrKR0UiHlLUO3|Btz5C8*9
zSUW#IO%3dO?%DdnRI6DZ9b4u2q33#9%Y3nrDX3NF2&kl+I<7Ogp)5r5h9HDD=fKBe
zcC%BTS(th8M+dIHX6NsG@>4+&e)qc%ojrd}ir5&HC2_l1%d%8y4O(v8wSfi(_3Ph2
z{)Aj{kd)9Qi(JR^Ah&w;#_^$Xq0|k#Z@%~5_jJ3_;bX_+R5Tj3c56w=EN!)h*9`Y>
z=@W^d^bLY|MM3r$0dX3wU$bRJZr$vmsfC%De4!}PwB6}cD&;%xyldj@nR62-*RNhz
zE|ud}yE<20v2IOR$stj%zXSOX<VyJ@rBo@E$@G>TceYM7fBe+<UU>GItyf<yM6!9q
zw*H|JW6*V-BZpr6zylxn@UQ%{IL)f_)9=6k?S-*?+7i4#-avxHmCz(%jKxW0S<VOV
z`{?0EU;Oj`{D*0l3=I#j-?X(hKlAmk{Po1y6DLm`dHjcu2EP5_U-_q<L@hNMtJkcH
z;`q_;eE+%|Zj7LV`i%*#@J1B_%VZTo8D)s3)ordEUi}CE{6EYeyYLr({-=zwcB6Uy
z&9}{7xZnk$>p44iUR$d4z2ly@f97+4B!o`Wm{7W~uz2tN53FCmZQ|frNBZ36Zxk`&
z=LSg#rIb<1C|&+r0z@hymB>WWj#`ZI_uT#q|LRvhYa;WRPyZeOXstJF*~V?_$blCq
z<>kKeQnO*Z-tBk2Ey(8yL25K5&}z4f<;tGhZoBrH>z0nx^H$lwWi<pY$<OMOgiuO|
zHYyW|(h3nNWwzx|O0>}f<q?9^_xvquw(Z`2>sbGoHfnxxA&pYYvbJ4)&DzbIo`33b
zB~=_nW8<r5r>07!e3FPTPgjhM&dx6isU6F*IC<-xZ##1MK)FyncIs&V>fy!3S&Lu!
zMi!+E(PSbKN`_v3&Dh43L#qbMLzO~bCEph%@i%_(-+uF#e!J7^2EJb|RgxsCFV!lQ
zzNvHPrB-j*dsm!v_doqqqgLY<Z#P?a+;iXNjT?4cwe#fZb7?9@SB!;Wn8Yz<oKxD@
z*N+CTzxigNOf{|5t?K0)?Q4Oggc_qeQJZsX?bybfcHDaH=IciKM_t>|+DIw2RwvG!
zb%h_;PGxmDj^g>nIjyy2Sy2?-c+*YSU4Q-a&peSUl#NoJ?};pxDw&&^q9FI~y}QwB
zFU&8*NxEv)$}krY#55C9s+(@T{r~>2e|+xz8A{y9N(VLsSt{ve^mzWe(UlOAiIg(y
zrX9C_=>CuV(mnsn4V$m(E0!oDX_g9^8Dap*L*IM2RPb-V?RJAE7Y0EPAb>$kv&8qq
z```WEBuO5B>`~jblPJ!Tbmi)`<-UsVx?8sG48y?p{cfkzX}A0!EEV&VF+xylER_1c
z|Lwm$aq1ZAAaqN9iD{#ZL4em2aeq2ULTDzk_2ZjA_v@d1?``i`Jvi!FOc<lIK|}yT
zDKo~@>a9ngedHJKfB!(GugBnUUAw<j$c4UbJ8>K<ZEn5ot(&)OJ#z5S?DTZ+WNz=>
z_w3re=lr?zStk9!cReplv$JPUGj1`?ils7u86F)!di2PFr=KFO+ieJ&6dd37LW?le
z$^ia+E%l!cl2RgM_G|C^jWq+~&mBH=^!UlyYOPr53miLD3K0z&&-1_a;Dha@#Sgys
z1B=ZzXN*#65RKNpZ54gDzf=eVUmLw)^VWOc^`7;cHpOwY>y}&MBq>+QjvKUEEs<qm
z;Frtgqeou~!u&t`)&K3eef!pJ*!0Nv9)9>+UmF=8Us$Zhai>*l#!b?m@2EuQ`|`}8
z2&Tt-`B^mk(`jdj#&+Cw-j?rw<J&VcQ&AKVfbCab{kLEL+mX?c`FabD0cJgL|2?1j
zz2Cj(?z^kqSR2C_BLD`05@K=YaON;d05qCRYK5fUY)wv1J-hGed@i?k{g&yOX$t7N
zPJjQv#?71l?dLx8N1y-f*s3vRc{km3^9Mir&xKGAee)~de)z#O&Ac$jEI$m(L!<d-
zbFy!Ig;%0Tq?8hn5JF#rwe?dpNeQKtYOR*K)%x6GZFYfDZP{#UVsd_d?gJ0Juh#0g
zp8w@9|5e<me)1FlGB(DxIAfeMY781<l+r@VOsZ6AVGs$iE$%Q9dQQ1g-n4o9zNeo$
zed744HERhaXtc;OrOe-c^{*z*oc^Vce*F5IZa;nE=&f(LJ<HVAtFF0g@7`l4j<=)K
zvaLd?+-=5(fAn~gSfazJw!&P%Y}87<M)&zAK~h3fkt8Cum_=+D-Mn(sifvb2z3bk0
zzyG)Y&wuF``c|x7WsF&Bb^hIFKlN`u^V#8{K_o;d%_uR5Qfeuc(MD>eloC=VS(aoX
z&V)oX2trERaTez0{*Qn9vBibC(a{xQm={9Ss*5|Xxqj>RZ8z?^<?kQ<yYD^t4JDJi
z@4bIvVZrnBD^{-F|I!OmiY$$pWu={#0i7Xf*V4E_JS*>pTwzL({?zT+t3VP$lQi16
zdfSe5JLc;1-MHgJ=!#%yeB<sLckkYHLo-rnbePNkmp}Q>BmJe1eCR`wR2E~(Am<DK
z2qi!$A%syz2<=%A0m3L%O2tW<WTMmVY}mNTa_p~s>5I?rdjbjOa(PN<mZmFLty#Hp
z#l-0oFFyC|x$|e%Z`ibH+f}t%wZDHTOQIKE*k?PA=jXH#X{V9v9~Lqrgr!~V3s#2t
zATw=)<{u`TmqGSuez#oxmd}0c(|25Z+x1&+JTrHG`oa`+nHS_e*Iqq7cJ|x_txc`I
z^fzDr^MC&z|IqP$gJ4n08CBX?oFM>blru^xWt=gKJGSlEHf1c!gj5O;5K##^U!5OW
zF}hHldujhuhY!7Q_RQ(I`I&mXRw?)Gefv9396!=*)%Ne(chCLr;kKP7$@uu%iE|V4
z3$uVG$Q7IO)5ZQl&Mn{1_4W4`^CcI`Ij@*uOX`dg_ESI-AjW9l4L|vjPgjB<(Q2?*
zzT>((YMtf}zVq<lz=$?x`_|2!IGdeY{F6WYgZuA$$31)ZCR%gOEJ7#&03x+vlu$wl
zA&fCfX^-)swNXl?S%wDD7&NGj9vK}Q9vZu9$2FE4o<4PWX8PQj(<cwU_<~gW+UsuI
zarHGXzOb*hxX^Ai_rCqUR<mVU)`}IY;#2`pWlVQzA;=ZSR&N^UAIRr&xiBbK%C1%F
z&yB@uDO2$)aV~?Tl*MU${nlOYy!CCu7{*v;jLq1dox74Wot~MagpLjm<O_YLPM%1+
z^^gDNZ#kaJ88Zk3ffE8iG@{nVEFaeq$_S?{%`(op5K1bA2DLFtD<P%px--*LYgVs%
z$9?b4<tsBYQ%TZwUFXH;_gj{A|GOU$nK*vp(5Yib-}&zM*{+u)X+8{%fo>EBxxCB-
zsN||^clVV`#bU8oDoswFxiEE#v!K7Qx+CV5d6__Z5hS5$mcHZG`**C_s1XUFJ?e}>
z+_n4WBPY&QYxU6M>o#mYedgSb9XmH~*~~d-JvM_uPKW`t80Cx+N(`dXMr#wr38mDv
z?M#R)6+Imasg%-$kcIjAVj=JO!ImxCc3yMi-0aNcxihwFA3pHX<}Fv<|DFe`iwjrn
z*m>t&Z%;ERr9wl3z#ZuCFBVEj>B7{R>u=gqES3g`h7Z25@0(xvPZLKE9em+OOZ8@D
ztYWCRR4y$0s6k^{_UPaW0Ky0X00fZQP)eUaba<gwtMm<~5(ya3_vhwjqV94>lmY-H
zu`wDE5Gep7#OBO(tSl2~kWwm@avjI9Ev>aOMjK<aQA$gxbNRe$yHbet>o<JrU;l>>
ze&}P4Ye!N17hm|3R<rfV-~TuN`)~iQL6Zx7&vPjwxiFv4=SPPIuiANS5avO|qr=0F
z#UK9KUs6goZrZ$l)kY<%hQ8_qWf>$Qa>{aE*h{DcfFLpeq0OolV;eVYlu}NdJ%dJj
zo)>q!QT*}|1tA0o2!pZGLTiGE2HTyOb5<<oY|GMG8#LUq5I}2fwC*8{lgM)&*K-`l
z(ONT3fB7T7{yU%igEi|{J^kY+o__N2Bu%AKX_B~(6?mR)Tb9McAc&$UpU)4iSW}&y
z93CDycIbt7zUy7z{n1lj`}V_Meeip~``JI{w$&>?Uj|7CF~)d~U&s{@Km*|b4k0dQ
zQmN5WY0LUGKX~|?M_$^`7`1InNR_3j)+QCQXO@Ua2@pyZf-oqQ=A8MSqqPA5+qQcI
z70Q?~Af(QujMG%4!sa{(eb;p?#(PbZT{rLf+~@zxj%%;}o3DN;jWbFqV@!(7_dUn4
z8Kb!%%;j=P99?t$?lY&3H|mS))~@=@=l|X6wd>MUG&`M~)i)5XR7PG(nU_)uQpQ}{
zd0CSH(ik8_01S<c?7V*W`fWS1EVXS%8xzG*CL}==LiNaTJ@c?Qa~Sn(&KT>)S(Kzv
zoWx0rXc%XV(H;RbNwaP@CX`yXO@ZWcq3zm)P|LDKniNarPyFtuvn)Gu_#h(szMmwK
zZ86t%EZZW43=Iwho;Nf+HZVL=2&{YWxhGB2PP?rQYGo#-CKg+>oLQIlq01n((V?FU
z{Qv<j`6L1uV}v$@5Fv$<3V<+1(=?f#nTeAu6VkI707#{!*2W+JZ~zN{Q9>ytgdk#;
ziEcO6+PJO*0NP-d$uv!+6y-25Xn+vT83OivSP1F+;r;J^|LM~w(j@EU+$`w^p6l4Q
zWpmE0p~1n4iPP_S-!E+6zSU?=7&C~7P+w{vo7$hMCIxn>nq4+mrPW}0Ftja=*u#wg
z2t-JY2tbHq+n(ofZW)AbxBbkMk1y5g%}$g^g$AWiTInRqx=Gp*GE<rY0s*6qRvOVD
zK-7)XG&2ZFsw~TrG^K>Pu2Xa@M1zP*X>E)#hB79lSh;dlK3{4!n`xTm^SO4bX<N*(
zEz7nnPQxHrvu5r1_^K?EN-3?B(I!dN@$*M#+D8ezY7mO|Dgmwa=)ejFAkiRU1Ryg;
z8MG~K&`6=QHenbNLbFUrsh)WJ(H&P`zis<ArIhEooU_pPgiv6x){eNvIb%^2Q%a>&
z22pFHwH8t(N!n<2s?{20jB!?vQk!!rWRhgP-KIeVLOAE#;;!SyQ55FFa=FAU9!G88
z^M#PcwhTgF|G>HFg@OKx)?kb=2-VusGe7=eZoGm_DI=v^&LWq5l9cmhxEPNN006N$
zV~k3vmDXtzTbvohB#AZZx!LI-{_y+H?R)O<!9yocoSdAzaDHm0(P%cBtu)P|Zj>ZR
z94Eb<v|1J&$H~G%ZFX)hN@67?B_v73QoGxY;xx^a(#D`RNGT<hS(b%>Q4}d9voz};
z7-}rlZHrr+F~%I*$^}8ElboBHaa~&}ZGcWrPQ3W|le`hG39o5PfNT4`{tyQM1SEu5
zmb07@01N`BL?I%gF-8gz#ZjqTQQE{&*J!P^>2|uEPMa|rN3m_!EY2C{w(Z!C!x$%&
zFh-3*%9z$hNtvWsqtR-#+DR1Ijw6+{ZAu6MK&7-nBZbVQ)Jmh)#u!8}TDMy*tw!P`
z?(6I0-0pUoz846os7)NLE0yx8iRr#_iBUobnV+34kLUXPOVg9n)tP4hnjruLAj{^8
zfc0h-E_&mo-a;>yq-h#=y96Lfvp7irz!-zttX{L$5BwkqIcGqK6hbK_gdiY|F-l1(
zWhRxBDoZn^wU7#d<nuW~XcR@B>-J_R;wbKP<1EY4Bn1GGB}&R}w=+LCOBq|YVS|z?
zNs_^#;q&Ltu2@yDEuLh;_g$%s?*+$BO<c2WBWl{|w(ooA`>(%l@25ZW*-~G@fPC2}
zdsdnWp)STF0)U8@NYQbUG?(g}kvJ7m904H|NZgHrFbKmiU&y<z$2qqxo+PQ#T1uH^
znG`Y;BJGuAfyy#L7zgYPQE-uEp660Z<0x*n+Kr`VquGq3j#SDhrB&8yHs%&)qHcTF
zuHEkNP#nj_Vu^9qZ8tnGCza9$eb+7)@>4T2^NaPBD_8n~SMiH;v-6Zt$Ftz#snN2z
zQcA0h1$B`xj+de@A^_=hI`eZE05MHP-0c!T0BCnw7mFU!+c6SK9LKQ{6CjjQ%d$AP
zT-PH6j6noYO6S5LP7<ZD+im+n(CNlWnsqweZa0dfZmqVsxG+<%SCgb0ciZh|eSUs!
z@7{NejExB)r4%E>W9QDDS-q}gTUL~$wqv_OmWrigXU>nU7#kTG;Y4L3vu)S*na1oD
zAQ2g5jdml=RN(MlI5NwIi-=HNTx>2ZdajqGnGmVc${=*wZLPI2XtXwH2qjt>DJ3Er
zqdm`cY&(kMG!?$@NhvLhD{TP5vUw&9XEY20V-OJ>$MpiKwUSauk)=sotIpLHX0tSI
zG}?y_ym;H5JEW9x6qicH$w}UAH(WOqQc9(Qz!Oq6n~kF<PLGeTYPG6SN^)V|3$-$x
zmkVqFV3f7G&2Ai#W$i8dB_dG9UVLGHWvH@l^VV9mMkv)%7^S<NjugTeW6Ux(tu?oJ
zF984oP!a?|xl+vMg1)|T5ClQsd9LHwHX*<{E9485Qros1*Ug1tkjsTZE?+2)jILa}
zcGJM%2m&!0UU>f59$`DpvNTOstQ?=6nf4vq;tUZfrH*6w_w`LoP9s8XZoXVD6$<%Y
zr{ZOw>}j$Sx0;>iXsKWTFUDAOZGL{P{{6puX!F%O!d$K!b)=LAi4Y==BOx+0%R(tZ
zBoqke964i@5+M1UU+^48NThYM6B7VxQ{B~CYh#pUTbxq>V2t{{2Vj(xS}Q3s&ksk(
zR#C>JkjIZ6Idl5d=FMA_lu;BH3I)!srKPIx7c!v?VlMQuOgOevU1}Bz1&cA)aoh1c
z%`eB4Wld5_(=4eqYviIgA{q_=jDPxH{eE?B`pB~f4?h3=@bFN#+s@KRYm+2#k|c<|
zL~MHP?MzAl<c!(2l?wyUbqqozWF}<bIr)6(x~?{8S(eepv28}FL8OEzr2vU-TdwN{
zK`s~OT|X=q%d6LKBvd~6_z#sfS(+&+qc|F0wR(Db%C<SDR7z<(PCg%&ip3}qQ!@*k
zK@bGXJYakUNFYRMRd3dMIm8&lDb)xc`}l8s?F)ZKDNRN4+@XE>AaGnaOH(wcq)L;x
zw`m4|Bu<o+l+s=X;+ACq+i}uP1-C8VbK_J_oWJn=iwBM#J2AJgI6FI|k#O577E88m
zFK1+f0E9Ch1b!IieLrv<e{gv4nWr9`pPLm*rD+;RaS#NS?JX|O`@Tm2y4}e4++5)I
zl`Hi|OJzy1P$YyRVlNY3N+ARhtIa9^7^7`&HKO>#zxr$6`m4XREK4a>9vS%Y<3C`+
zwm56Hnpu_sKy`6p&ALrmD>P=gRzyStoG}8RmCEHq)bPk-KYsB4{nq|{&&<wTh@%Jq
zEZYWSzW?w;tJbbtzj4dD4V#9BMi^zCZfAKkf>4WFw&OdFQ!4kLJ9FyUXP&(M&bvEG
zhX~zHcjfr1qlXXf*xAPz%Y<xXEyr;RxnT9W%|LmjR21ixb8#2KFBJfUkb0|%h&Hzt
z8?6uj>PP?XZ@vZqQc3`L-~I1@*L&ZKNEqk$zHRT~+<dLJxNgIyAn<#;Cn+T&Sd4Sq
z0w6|f%XS`l<k5fs`OiJ^=npP+x5+CS-B11Sv8R6c7y#sph3js*<(~T=SUI+;({A?$
z5PLy|b8b1FZCgKh<U8AUToZ;qYE3B37Ye=~PR~pY4X;?NH?%TH(evC&xjeH_FBL=2
z&LK(hl^_9t64H&kgpj$~(l7n;haUa*LxUqDYu2sz^MzY(+Vwl1_(UX)Qp#vUDW#MV
z3UQo>EYn&m-JAS02!Lp^ER&Rd<*Q%$?C*basaC(V1Yv;s(huPIj*><z({8pNd-yxg
zJpR}_-}jI9yyb01Ybk|N${0fcC}p`^;n<Nw&+dEjrknR<LiXy=@l~r|dhz*zfniRG
zA|QlvT&usYGBtC-wOrrv+FBD}uK<Y%ghXj)a<=ww|LXs$>xCO`-qSbSU#Sdk-@ffP
z|H-dvV;qW(!<9B#Yh{Fy#^RJS&luf{JO)uKZP1`WrPW*CddHqUZ;7IAbz!kuU945B
ztyW{|{P}vdy12M#IZTLTes*!Gx&#1}^Q4=6?TcTiEzZAn?>nTFN-JYDC4^ZP5R^hc
z^7r2v9a}jtFx=}!3=EH!%6(@~pIo_mL!8tNnk<vP=amYDrNx=y!J+!xX@_$JylAe7
zoUvA?{U=}guZO0dd&{1?4*&RIU*E{e@zo!A*L`5n7{e(80L~e3)+1=*@@fA)wEzGL
zqDe$SRHz&vqSRU{4T!y)9*n`hN(m7NA#?{Nl=bFW45E}GO|v+PyWLLI?JPAKr%#=v
zmi5C&9(m;N9(wdU-wDES!-lPm=7p$L?{qq?){@o+4W2%J;(LGp;Egxl(pMRbqDX5q
zI5@oj`F(wZBaCu^nGhoI1JLqoU;49u{PB;o1*>-sf5|7&;`V%Prb_0Eg>u$b<x1bK
zn{T`KZFf}4g=Qu=qgqLA3?LE!N@*{VUYZ*>0EoaCMMTr9dl3l$qR~nt$cr@wP(lLF
z4SjE*zvBDO$3FH?e)PyAoU<fNm68DPoo{@7;MWGXZr<W~&cMJ>rBYtIX6;x1+t-dA
zIr853zrWp$J=ddzW?2?>y90wGM-INUaqG_B(F<j4-{X&+I&u8afft;jE3=Fc@~Y!>
zLO`LUiml(UDen{<lKH+nU#)wtqX^O3^q!MYLJ2_tA!L?ih_GA%0sw+#ao2TvAbTHO
z`fT~l#o$8-WI{art#2*P&#hR!mQvO~JP?M3q#OO?U;M>uZ@5uOO&JqXBEl`V-!(Nm
zQyN%l<)qCSA;kCngD*YjI991|AW34S6%sPHF#qgRKO%&jJbrl1Eh}Yj3l6Uq0$_1_
zetPoGx7;x>Jbdo_1xji2<!faC2th<Z0J6+jKr{vs&GLZ~A%t;mTNa^&(cWAr^!~7S
zF%2OAg!Hm8W9*Or?9U(l!S@$ywR*j}a>dH6J9ld>y`VTdUl&=DBw4!~r%85Uc5d?A
z`LBQDZyK${^Biv5xqRX5@q<c=E!W)KUoI8Guv99YI(ck<`T_uO8}Q=v>`!QtXl;bb
zcHOjlaA;U+%@_qj(DYz|Ha%nP%|c$hKd1NJpg{xJt9UP7tJ7n~^g6SbtOYK8NYI$I
z8@F!QyuH)ue)-E^xG;4d4ZisN(?<_Jcl(|9`9Ua@j^m`+YR=Bh?tA>l=g*$ne(R01
zbFKD5!w>zrsY&MN>aEsLf8XtU_OeO^wcNOM>%^%u`Juel>Q%+SD}g@n)?e7U?V5JC
z%?ay;5CA}9bni_Mu`y;@gRj8($~%LWTf3z9by7l*EaT&xGtPTo86dP<ZKc$};7}4p
z`<{68nw?kQdFNd}e)R9Z_^1Do5Nf-wANa;#qh4FRdffNJwQJX$Zyzt@hFD})-Ef^E
ztW>P@^$*QYpD*Ua+uw3)rGM~0{n5WJjug_1j9LB)bVMmx&i9x3;DG}#I<9A17Gu2E
zdNx{<i(&KPt9gY+dlC9&-5O(z!CnScN@?Be#c4uF5+~hGn^NNXei-Ho#ZsY=*Tzho
zJ{vdV!I72J&hNeV7wYweM!iZ1ShmX;GlnQFf%3Bx(^k+Y#um@~=v+YUQn{aVCtna2
zgG#yZ|9tU_FC93r{^s?<WS7k6Wsp6RRX6RNJb$9V3z<rdQA%sAl^^6?&u=!Cuy^DE
zKwue=S$+ioFj^TjM)!I^y*>@<-iFg?rHwH<%hGRt^-G;byBB8}rIzgkVQ%ZyJEmvO
z42_MRK7Fdw=|oXiDCN0MF<;IVijM060Hqe^*2?h}FCExl8Z12U%O702P$jV*8((?!
z#OWP7uQ_&p_VFj5%=ZOe$%(t&mx*z&CPolrl<(%&_HQYBmB0>c<|ru%p^US7y(VO4
zl+rz8MKov-kpOCgXbhz^%LL;L!APw|nx;u2mCUkKWSJ1D$TBJA>eXx4uit2KO9+vr
z=~BIRVd{K0YImZ}*%PO1%iVL=+Xse6YV}$ehMY3jwo8@%a%I4Aea86t>FI~Q@t2ic
z@aw<%d#yxtyX`a+2lnqfarDK-YL%kC;oZ9gw#h4KgFoSu$S9Aq?t!VNDdjHrLMQL>
zz@Z*B)MgGf6cuW%l~h8c1`Q$@L`s>~s?n(B`ihf>&s66ZI?blm(hqF{&<j2QU{H74
zU22qV@hw|+j;~xpC<Q=cOp>Gr4m{s!bQocbkWPEaXw~g@azPlUsxvh)Jv~`0l!}$X
z$G-c`i6aNfyLSD>Uw`S;>Eo0DB`ixiNvAcwX?@??oFZLf=qp)1KN)xskP^l?LqwsH
znv8mdA|Z?t$_QhGqXCEeW4V<^sVIt;7G|4HBM1w}4;;SXAMKv}{+a1h=e@vPzh$Fk
z+W^2QWt<}-XMB#$C24x{)UgxC4{y8b+KubCc&?|kO4D?3Xt-D?X%AVy^Xzw@Sify+
zxm?jk6QGo`IPSJujfu&#XHOonIPa$E%;9G(&VbVT+^iQCuf1cJH%zlEG5>(P{#vBo
z9>0MRMtfI102rgSkrFeYW_|zWk--tpS(aoCsHRb>V%5K)Z}#|1+=%Xe=e<LN!<1Y3
zd@)}rb8d6Xc3n@1)OEb!(G^kDsW)m-6nTEYxs|4IwYq=^G)HSobH|@OG&ON{saESX
z4Ybx4x8pcDxc^z5#p4?`wW2m^-CAlz&318MXzg|D-64`C>2eT%wfqlQl0U&vB!m#4
zfWU}l4EVn9#=hfv9Ie)T#||yRC}nKh_8r@{Ut6s%aPBb9(=<^+_(7gf!Y!Lpk_&RJ
zAXHk-%uc3hylQ-{?*~dL*Y^v9l|%dY_d@#2<fKK}9eeNo<~P4Sw0g9<G*>JYR&Cgz
zwPBV+2(#^4p+CRk>NSeSN~lYb=H~<X)AS2QYtIQ>H*7Rp7U#Jz7eb*L)q}pkXq_wM
zuiv)YbzO^FewYJ9Av4!={UFRzVcV`z3IHr_5keJ_wfdqEVq|26W!bIP(u$$AkOCqy
z!jNE?%W=jg&YUi-FRi?3%w$Li<J8L1#9}VkqY6bP+9+R(fA;f(L;ym1m2{S+VGuZu
zQ#(?XiS%-A97V(9!|T>>%5>(s9wJc6v@vO#WFk{WyPhAl+mtca3z9en0LFNd#gkL#
zEN*YwuxaPDH_o4)ItB*-01?AnP8-7<*QTz>QYADH06;>hGzlg^mI)58^~gUziIe~$
z`cBTa9L_nRyih8gKXAIa&<Oi-Qi#!&tLjVjDC*jd<GLOqQpPRIVbo&GVwR1FuHywk
z==!1U_{Koo>DCwL13xJD4=v2jZ{K;1=lfb~04Nj+QX69+6Qai{p@dSx2@nF55=wrC
z@sZavGJ${;D5H!rP6+XX&}bFKDK!?Sb~#sR%{FR{s#cP5?s=i@*xa@mw^ET2!h}ep
zZYNEWW}}{^DFF<_f*<B;&7~hb{^+XlwIib|hR0S+oH_{r#Zp;F&A9dIix+=BF7xXE
zNdPeP3Y0NIDFI?TR+uj?&Y%9?pFZg2{N2BG`?~8kw_2@ctJPSlRjUj2r5YL|MHVM<
zoWzZ#MyuJ78cW4W@8%CM#sFBB-Hp3v&rf7pySZF%v2vv^6B*&QHs*ETUiUhOUkCst
zgi{8DaLdgV3IJfxfJVphd!(s+u?*B293GpxaDH@jRgy$!&z_Q66U!MM9e08pvm7b1
zbLUR?=y-;3#_c3Y&rMCXyWQSGmA<~2M*9*?@Ab*+Aa)}F7;Ok4gmEC0TUN1D0f1H8
z*6sbseU2AMt))_~>np8*Fvd8yY-YJg8DSiOHX3z6Xt!HouHbqhvt7b$g9Hcz!je>U
qTg~2LrAnpQZV>`Mi|_sS<o^Tstpc_kL)0t)0000<MNUMnLSTY=QjK2#

literal 0
HcmV?d00001

diff --git a/packages/rrweb-snapshot/test/integration.test.ts b/packages/rrweb-snapshot/test/integration.test.ts
index 53c6e6e81f..55daa59cca 100644
--- a/packages/rrweb-snapshot/test/integration.test.ts
+++ b/packages/rrweb-snapshot/test/integration.test.ts
@@ -28,6 +28,7 @@ const startServer = () =>
       '.html': 'text/html',
       '.js': 'text/javascript',
       '.css': 'text/css',
+      '.png': 'image/png',
     };
     const s = http.createServer((req, res) => {
       const parsedUrl = url.parse(req.url!);
@@ -190,6 +191,25 @@ iframe.contentDocument.querySelector('center').clientHeight
       'rebuilt height (${rebuildRenderedHeight}) should equal original height (${renderedHeight})',
     );
   });
+
+  it('correctly saves images offline', async () => {
+    const page: puppeteer.Page = await browser.newPage();
+    // console for debug
+    // tslint:disable-next-line: no-console
+    page.on('console', (msg) => console.log(msg.text()));
+
+    await page.goto('http://localhost:3030/html/picture.html', { waitUntil: 'load' });
+    await page.waitForSelector('img', { timeout: 1000 });
+
+    const snapshot = await page.evaluate(`${code}
+    const [snap] = rrweb.snapshot(document, {inlineImages: true, inlineStylesheet: false});
+    JSON.stringify(snap, null, 2);
+    `);
+
+    assert(snapshot.includes('"rr_dataURL"'));
+    assert(snapshot.includes('data:image/png;base64,'));
+  });
+
 });
 
 describe('iframe integration tests', function (this: ISuite) {
diff --git a/packages/rrweb-snapshot/typings/snapshot.d.ts b/packages/rrweb-snapshot/typings/snapshot.d.ts
index 9ccb147aa1..af06efc2b2 100644
--- a/packages/rrweb-snapshot/typings/snapshot.d.ts
+++ b/packages/rrweb-snapshot/typings/snapshot.d.ts
@@ -19,6 +19,7 @@ export declare function serializeNodeWithId(n: Node | INode, options: {
     maskInputFn: MaskInputFn | undefined;
     slimDOMOptions: SlimDOMOptions;
     keepIframeSrcFn?: KeepIframeSrcFn;
+    inlineImages?: boolean;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;
@@ -35,6 +36,7 @@ declare function snapshot(n: Document, options?: {
     maskTextFn?: MaskTextFn;
     maskInputFn?: MaskTextFn;
     slimDOM?: boolean | SlimDOMOptions;
+    inlineImages?: boolean;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: INode) => unknown;

From a307c5c5bb320bc4cc08270de1379ac1c568c076 Mon Sep 17 00:00:00 2001
From: yz-yu <yanzhen@smartx.com>
Date: Sun, 16 Jan 2022 15:39:43 +0800
Subject: [PATCH 489/524] impl #796 observe media volume change (#798)

---
 docs/recipes/optimize-storage.md       |  4 +++-
 docs/recipes/optimize-storage.zh_CN.md |  2 ++
 packages/rrweb/src/record/observer.ts  | 29 ++++++++++++++++----------
 packages/rrweb/src/replay/index.ts     |  6 ++++++
 packages/rrweb/src/types.ts            |  7 +++++++
 5 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/docs/recipes/optimize-storage.md b/docs/recipes/optimize-storage.md
index 5ae914762b..f93fe772c4 100644
--- a/docs/recipes/optimize-storage.md
+++ b/docs/recipes/optimize-storage.md
@@ -31,9 +31,11 @@ rrweb.record({
     // do not record mouse movement
     mousemove: false
     // do not record mouse interaction
-    mouseInteraction: false,
+    mouseInteraction: false
     // set the interval of scrolling event
     scroll: 150 // do not emit twice in 150ms
+    // set the interval of media interaction event
+    media: 800
     // set the timing of record input
     input: 'last' // When input mulitple characters, only record the final input
   }
diff --git a/docs/recipes/optimize-storage.zh_CN.md b/docs/recipes/optimize-storage.zh_CN.md
index 6d04434677..f878ac810f 100644
--- a/docs/recipes/optimize-storage.zh_CN.md
+++ b/docs/recipes/optimize-storage.zh_CN.md
@@ -34,6 +34,8 @@ rrweb.record({
     mouseInteraction: false,
     // 设置滚动事件的触发频率
     scroll: 150 // 每 150ms 最多触发一次
+    // set the interval of media interaction event
+    media: 800
     // 设置输入事件的录制时机
     input: 'last' // 连续输入时，只录制最终值
   }
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index 26cd1ef75f..d59e57d4d0 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -684,22 +684,28 @@ function initMediaInteractionObserver(
   mediaInteractionCb: mediaInteractionCallback,
   blockClass: blockClass,
   mirror: Mirror,
+  sampling: SamplingStrategy,
 ): listenerHandler {
-  const handler = (type: MediaInteractions) => (event: Event) => {
-    const target = getEventTarget(event);
-    if (!target || isBlocked(target as Node, blockClass)) {
-      return;
-    }
-    mediaInteractionCb({
-      type,
-      id: mirror.getId(target as INode),
-      currentTime: (target as HTMLMediaElement).currentTime,
-    });
-  };
+  const handler = (type: MediaInteractions) =>
+    throttle((event: Event) => {
+      const target = getEventTarget(event);
+      if (!target || isBlocked(target as Node, blockClass)) {
+        return;
+      }
+      const { currentTime, volume, muted } = target as HTMLMediaElement;
+      mediaInteractionCb({
+        type,
+        id: mirror.getId(target as INode),
+        currentTime,
+        volume,
+        muted,
+      });
+    }, sampling.media || 500);
   const handlers = [
     on('play', handler(MediaInteractions.Play)),
     on('pause', handler(MediaInteractions.Pause)),
     on('seeked', handler(MediaInteractions.Seeked)),
+    on('volumechange', handler(MediaInteractions.VolumeChange)),
   ];
   return () => {
     handlers.forEach((h) => h());
@@ -987,6 +993,7 @@ export function initObservers(
     o.mediaInteractionCb,
     o.blockClass,
     o.mirror,
+    o.sampling,
   );
 
   const styleSheetObserver = initStyleSheetObserver(
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 8e4b56d21a..7aa26e5433 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -1019,6 +1019,12 @@ export class Replayer {
           if (d.currentTime) {
             mediaEl.currentTime = d.currentTime;
           }
+          if (d.volume) {
+            mediaEl.volume = d.volume;
+          }
+          if (d.muted) {
+            mediaEl.muted = d.muted;
+          }
           if (d.type === MediaInteractions.Pause) {
             mediaEl.pause();
           }
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index 4f881ecb26..da904dee13 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -192,6 +192,10 @@ export type SamplingStrategy = Partial<{
    * number is the throttle threshold of recording scroll
    */
   scroll: number;
+  /**
+   * number is the throttle threshold of recording media interactions
+   */
+  media: number;
   /**
    * 'all' will record all the input events
    * 'last' will only record the last input value while input a sequence of chars
@@ -472,12 +476,15 @@ export const enum MediaInteractions {
   Play,
   Pause,
   Seeked,
+  VolumeChange,
 }
 
 export type mediaInteractionParam = {
   type: MediaInteractions;
   id: number;
   currentTime?: number;
+  volume?: number;
+  muted?: boolean;
 };
 
 export type mediaInteractionCallback = (p: mediaInteractionParam) => void;

From fb8ea8e6576d08c5bcc7dc50fa062b815e680dbb Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 16 Jan 2022 15:54:10 +0800
Subject: [PATCH 490/524] update plugin docs

---
 docs/recipes/console.md                 | 16 ++---
 docs/recipes/console.zh_CN.md           | 14 ++---
 docs/recipes/plugin.md                  |  4 ++
 docs/recipes/plugin.zh_CN.md            |  4 ++
 guide.md                                | 77 +++++++++++++------------
 guide.zh_CN.md                          | 75 ++++++++++++------------
 packages/rrweb-player/public/index.html |  2 +-
 7 files changed, 101 insertions(+), 91 deletions(-)

diff --git a/docs/recipes/console.md b/docs/recipes/console.md
index ec1d06ec87..c035271d2a 100644
--- a/docs/recipes/console.md
+++ b/docs/recipes/console.md
@@ -45,13 +45,13 @@ rrweb.record({
 });
 ```
 
-All recordLog options are described below:
-| key              | default                                                               | description                                                                                                                                                                                                                                                                                                                                                                        |
+All options are described below:
+| key | default | description |
 | ---------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| level            | ['log','warn','error',...]                                            | Default value contains names of all console functions. You can override it by setting console levels you need.                                                                                                                                                                                                                                                                     |
-| lengthThreshold  | 1000                                                                  | Maximum number of records of console output.                                                                                                                                                                                                                                                                                                                                       |
+| level | ['log','warn','error',...] | Default value contains names of all console functions. You can override it by setting console levels you need. |
+| lengthThreshold | 1000 | Maximum number of records of console output. |
 | stringifyOptions | { stringLengthLimit: undefined, numOfKeysLimit: 50, depthOfLimit: 4 } | If console output includes js objects, we need to stringify them. `stringLengthLimit` limits the string length of single value. `numOfKeysLimit` limits the number of keys in an object. `depthOfLimit` limits the depth of object. If an object contains more keys than this limit, we would only save object's name. You can reduce the size of events by setting these options. |
-| logger           | window.console                                                        | the console object we would record.You can set a console object from another execution environment where you would like to record.                                                                                                                                                                                                                                                 |
+| logger | window.console | the console object we would record.You can set a console object from another execution environment where you would like to record. |
 
 ## replay console
 
@@ -70,7 +70,7 @@ replayer.play();
 
 Description of replay option is as follows:
 
-| key          | default                                                                                      | description                                                                                                                             |
-| ------------ | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| level        | ['log','warn','error',...]                                                                   | Same meaning as that option in recordLog. You can set this option to play levels of log you need.                                       |
+| key          | default                                                                                                                           | description                                                                                                                             |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| level        | ['log','warn','error',...]                                                                                                        | You can set this option to play levels of log you need.                                                                                 |
 | replayLogger | a console based object that implements the interface [ReplayLogger](../../packages/rrweb/src/plugins/console/replay/index.ts#L13) | You can also set a replay logger to replay the log messages in a simulated browser console by implementing the interface `ReplayLogger` |
diff --git a/docs/recipes/console.zh_CN.md b/docs/recipes/console.zh_CN.md
index ab3d19b9b3..5b63611a76 100644
--- a/docs/recipes/console.zh_CN.md
+++ b/docs/recipes/console.zh_CN.md
@@ -45,12 +45,12 @@ rrweb.record({
 ```
 
 如下是配置选项的详细说明：
-| key              | 默认值                                                                | 功能                                                                                                                                                                                                                                                                                                                                                                 |
+| key | 默认值 | 功能 |
 | ---------------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| level            | ['log','warn','error',...]                                            | 默认值包含了 console 的全部函数，你也可以传入想要录制的 console 函数。                                                                                                                                                                                                                                                                                               |
-| lengthThreshold  | 1000                                                                  | 录制 console 输出信息的最大条数。                                                                                                                                                                                                                                                                                                                                    |
+| level | ['log','warn','error',...] | 默认值包含了 console 的全部函数，你也可以传入想要录制的 console 函数。 |
+| lengthThreshold | 1000 | 录制 console 输出信息的最大条数。 |
 | stringifyOptions | { stringLengthLimit: undefined, numOfKeysLimit: 50, depthOfLimit: 4 } | 如果 console 输出包含了 js 对象，我们需要对其进行序列化，`stringLengthLimit` 限制了单个值能转化的最大字符串长度，`numOfKeysLimit` 限制了一个被序列化的 js 对象能够包含的最大数量 key，`depthOfLimit` 限制了一个被序列化的 js 对象能够拥有的对象深度（层数），如果对象的 key 数量超过了这个限制，我们将只保留对象的名字。你能通过这些选项来减小生成的 events 的体积。 |
-| logger           | window.console                                                        | 要录制的 console 对象，你也可以传入一个想要录制的其他 js 执行环境的 console 对象。                                                                                                                                                                                                                                                                                   |
+| logger | window.console | 要录制的 console 对象，你也可以传入一个想要录制的其他 js 执行环境的 console 对象。 |
 
 ## 播放 console 数据
 
@@ -69,7 +69,7 @@ replayer.play();
 
 如下是对 replay 选项的描述：
 
-| key          | 默认值                                                                 | 功能                                                                                                        |
-| ------------ | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
-| level        | ['log','warn','error',...]                                             | 与 recordLog 设置选项的含义相同，你可以只播放想要的 console 函数类型                                        |
+| key          | 默认值                                                                                                      | 功能                                                                                                        |
+| ------------ | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| level        | ['log','warn','error',...]                                                                                  | 你可以只播放想要的 console 函数类型                                                                         |
 | replayLogger | 一个基于 console 的对接口[ReplayLogger](../../packages/rrweb/src/plugins/console/replay/index.ts#L13)的实现 | 你也可以通过传入一个`ReplayLogger`接口的自己的实现，用 html 模拟一个浏览器控制台，来播放录制的 console 数据 |
diff --git a/docs/recipes/plugin.md b/docs/recipes/plugin.md
index b3fea11906..e4c6bfcae7 100644
--- a/docs/recipes/plugin.md
+++ b/docs/recipes/plugin.md
@@ -2,6 +2,10 @@
 
 The plugin API is designed to extend the function of rrweb without bump the size and complexity of rrweb's core part.
 
+# Available plugins
+
+- [console](./console.md)
+
 ## Interface
 
 Same to with other functionality in rrweb, a plugin can implement record or replay or both features.
diff --git a/docs/recipes/plugin.zh_CN.md b/docs/recipes/plugin.zh_CN.md
index 6918ab71c5..530f48bc92 100644
--- a/docs/recipes/plugin.zh_CN.md
+++ b/docs/recipes/plugin.zh_CN.md
@@ -2,6 +2,10 @@
 
 插件 API 的设计目标是在不增加 rrweb 核心部分大小和复杂性的前提下，扩展 rrweb 的功能。
 
+# 可用插件
+
+- [console](./console.zh_CN.md)
+
 ## 接口
 
 与 rrweb 其它功能相似，插件可以包含同时包含录制、回放侧的功能，也可以只实现其中任一。
diff --git a/guide.md b/guide.md
index 3c6ed36ff3..1ad42a23bb 100644
--- a/guide.md
+++ b/guide.md
@@ -135,30 +135,30 @@ setInterval(save, 10 * 1000);
 
 The parameter of `rrweb.record` accepts the following options.
 
-| key                  | default            | description                                                                                                                                                                                   |
-| -------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 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                                                                                |
-| 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                                                                                |
-| maskTextClass        | 'rr-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)                           |
-| maskInputFn          | -                  | customize mask input content recording logic                                                                                                                                                  |
-| maskTextFn           | -                  | customize mask text content recording logic                                                                                                                                                   |
-| slimDOMOptions       | {}                 | remove unnecessary parts of the DOM <br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108)                      |
-| inlineStylesheet     | true               | whether to inline the stylesheet in the events                                                                                                                                                |
-| hooks                | {}                 | hooks for events<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                                                  |
-| packFn               | -                  | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                                                |
-| sampling             | -                  | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                                                |
-| recordCanvas         | false              | whether to record the canvas element                                                                                                                                                          |
-| inlineImages         | false              | whether to record the image content                                                                                                                                                          |
-| collectFonts         | false              | whether to collect fonts in the website                                                                                                                                                       |
-| recordLog            | false              | whether to record console output, refer to the [console recipe](./docs/recipes/console.md)                                                                                                    |
+| key                  | default            | description                                                  |
+| -------------------- | ------------------ | ------------------------------------------------------------ |
+| 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 |
+| 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 |
+| maskTextClass        | 'rr-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) |
+| maskInputFn          | -                  | customize mask input content recording logic                 |
+| maskTextFn           | -                  | customize mask text content recording logic                  |
+| slimDOMOptions       | {}                 | remove unnecessary parts of the DOM <br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108) |
+| inlineStylesheet     | true               | whether to inline the stylesheet in the events               |
+| hooks                | {}                 | hooks for events<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
+| packFn               | -                  | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
+| sampling             | -                  | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
+| recordCanvas         | false              | whether to record the canvas element                         |
+| inlineImages         | false              | whether to record the image content                          |
+| collectFonts         | false              | whether to collect fonts in the website                      |
 | userTriggeredOnInput | false              | whether to add `userTriggered` on input events that indicates if this event was triggered directly by the user or not. [What is `userTriggered`?](https://github.com/rrweb-io/rrweb/pull/495) |
+| plugins              | []                 | load plugins to provide extended record functions. [What is plugins?](./docs/recipes/plugin.md) |
 
 #### Privacy
 
@@ -286,22 +286,23 @@ replayer.pause(5000);
 
 The replayer accepts options as its constructor's second parameter, and it has the following options:
 
-| key                 | default       | description                                                                                                                                                                                                                    |
-| ------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| speed               | 1             | replay speed ratio                                                                                                                                                                                                             |
-| root                | document.body | the root element of replayer                                                                                                                                                                                                   |
-| loadTimeout         | 0             | timeout of loading remote style sheet                                                                                                                                                                                          |
-| skipInactive        | false         | whether to skip inactive time                                                                                                                                                                                                  |
-| showWarning         | true          | whether to print warning messages during replay                                                                                                                                                                                |
-| showDebug           | false         | whether to print debug messages during replay                                                                                                                                                                                  |
-| blockClass          | 'rr-block'    | element with the class name will display as a blocked area                                                                                                                                                                     |
-| liveMode            | false         | whether to enable live mode                                                                                                                                                                                                    |
-| insertStyleRules    | []            | accepts multiple CSS rule string, which will be injected into the replay iframe                                                                                                                                                |
-| triggerFocus        | true          | whether to trigger focus during replay                                                                                                                                                                                         |
-| UNSAFE_replayCanvas | false         | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.**                                                                                                                                |
+| key                 | default       | description                                                  |
+| ------------------- | ------------- | ------------------------------------------------------------ |
+| speed               | 1             | replay speed ratio                                           |
+| root                | document.body | the root element of replayer                                 |
+| loadTimeout         | 0             | timeout of loading remote style sheet                        |
+| skipInactive        | false         | whether to skip inactive time                                |
+| showWarning         | true          | whether to print warning messages during replay              |
+| showDebug           | false         | whether to print debug messages during replay                |
+| blockClass          | 'rr-block'    | element with the class name will display as a blocked area   |
+| liveMode            | false         | whether to enable live mode                                  |
+| insertStyleRules    | []            | accepts multiple CSS rule string, which will be injected into the replay iframe |
+| triggerFocus        | true          | whether to trigger focus during replay                       |
+| UNSAFE_replayCanvas | false         | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.** |
 | mouseTail           | true          | whether to show mouse tail during replay. Set to false to disable mouse tail. A complete config can be found in this [type](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
-| unpackFn            | -             | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                                                                                 |
-| logConfig           | -             | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md)                                                                                                                             |
+| unpackFn            | -             | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
+| logConfig           | -             | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md) |
+| plugins             | []            | load plugins to provide extended replay functions. [What is plugins?](./docs/recipes/plugin.md) |
 
 #### Use rrweb-player
 
diff --git a/guide.zh_CN.md b/guide.zh_CN.md
index 4478a29570..ab3fd66894 100644
--- a/guide.zh_CN.md
+++ b/guide.zh_CN.md
@@ -131,29 +131,29 @@ setInterval(save, 10 * 1000);
 
 `rrweb.record(config)` 的 config 部分接受以下参数
 
-| key                  | 默认值             | 功能                                                                                                                                                                   |
-| -------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| emit                 | 必填               | 获取当前录制的数据                                                                                                                                                     |
-| checkoutEveryNth     | -                  | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                           |
-| checkoutEveryNms     | -                  | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                             |
-| blockClass           | 'rr-block'         | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节                                                                                                |
-| blockSelector        | null               | 所有 element.matches(blockSelector)为 true 的元素都不会被录制，回放时取而代之的是一个同等宽高的占位元素                                                                |
-| ignoreClass          | 'rr-ignore'        | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节                                                                                                |
-| maskTextClass        | 'rr-mask'          | 字符串或正则表达式，可用于自定义忽略元素 text 内容的类名，详见[“隐私”](#隐私)章节                                                                                      |
-| maskTextSelector     | null               | 所有 element.matches(maskTextSelector)为 true 的元素及其子元素的 text 内容将会被屏蔽                                                                                   |
-| maskAllInputs        | false              | 将所有输入内容记录为 \*                                                                                                                                                |
+| key                  | 默认值             | 功能                                                         |
+| -------------------- | ------------------ | ------------------------------------------------------------ |
+| emit                 | 必填               | 获取当前录制的数据                                           |
+| checkoutEveryNth     | -                  | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节 |
+| checkoutEveryNms     | -                  | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节 |
+| blockClass           | 'rr-block'         | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节 |
+| blockSelector        | null               | 所有 element.matches(blockSelector)为 true 的元素都不会被录制，回放时取而代之的是一个同等宽高的占位元素 |
+| ignoreClass          | 'rr-ignore'        | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节 |
+| maskTextClass        | 'rr-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) |
-| maskInputFn          | -                  | 自定义特定类型的输入框内容记录逻辑                                                                                                                                     |
-| maskTextFn           | -                  | 自定义文字内容的记录逻辑                                                                                                                                               |
-| slimDOMOptions       | {}                 | 去除 DOM 中不必要的部分 <br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108)                |
-| inlineStylesheet     | true               | 是否将样式表内联                                                                                                                                                       |
-| hooks                | {}                 | 各类事件的回调<br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                                  |
-| packFn               | -                  | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                             |
-| sampling             | -                  | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                             |
-| recordCanvas         | false              | 是否记录 canvas 内容                                                                                                                                                   |
-| collectFonts         | false              | 是否记录页面中的字体文件                                                                                                                                               |
-| recordLog            | false              | 是否记录 console 输出，详见[console 录制和播放](./docs/recipes/console.zh_CN.md)                                                                                       |
-| userTriggeredOnInput | false              | [什么是 `userTriggered`](https://github.com/rrweb-io/rrweb/pull/495)                                                                                                   |
+| maskInputFn          | -                  | 自定义特定类型的输入框内容记录逻辑                           |
+| maskTextFn           | -                  | 自定义文字内容的记录逻辑                                     |
+| slimDOMOptions       | {}                 | 去除 DOM 中不必要的部分 <br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108) |
+| inlineStylesheet     | true               | 是否将样式表内联                                             |
+| hooks                | {}                 | 各类事件的回调<br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
+| packFn               | -                  | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
+| sampling             | -                  | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
+| recordCanvas         | false              | 是否记录 canvas 内容                                         |
+| collectFonts         | false              | 是否记录页面中的字体文件                                     |
+| userTriggeredOnInput | false              | [什么是 `userTriggered`](https://github.com/rrweb-io/rrweb/pull/495) |
+| plugins              | []                 | 加载插件以获得额外的录制功能. [什么是插件？](./docs/recipes/plugin.zh_CN.md) |
 
 #### 隐私
 
@@ -281,22 +281,23 @@ replayer.pause(5000);
 
 可以通过 `new rrweb.Replayer(events, options)` 的方式向 rrweb 传递回放时的配置参数，具体配置如下：
 
-| key                 | 默认值        | 功能                                                                                                                                                                                                 |
-| ------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| speed               | 1             | 回放倍速                                                                                                                                                                                             |
-| root                | document.body | 回放时使用的 HTML 元素                                                                                                                                                                               |
-| loadTimeout         | 0             | 加载异步样式表的超时时长                                                                                                                                                                             |
-| skipInactive        | false         | 是否快速跳过无用户操作的阶段                                                                                                                                                                         |
-| showWarning         | true          | 是否在回放过程中打印警告信息                                                                                                                                                                         |
-| showDebug           | false         | 是否在回放过程中打印 debug 信息                                                                                                                                                                      |
-| blockClass          | 'rr-block'    | 需要在回放时展示为隐藏区域的元素类名                                                                                                                                                                 |
-| liveMode            | false         | 是否开启直播模式                                                                                                                                                                                     |
-| insertStyleRules    | []            | 可以传入多个 CSS rule string，用于自定义回放时 iframe 内的样式                                                                                                                                       |
-| triggerFocus        | true          | 回放时是否回放 focus 交互                                                                                                                                                                            |
-| UNSAFE_replayCanvas | false         | 回放时是否回放 canvas 内容，**开启后将会关闭沙盒策略，导致一定风险**                                                                                                                                 |
+| key                 | 默认值        | 功能                                                         |
+| ------------------- | ------------- | ------------------------------------------------------------ |
+| speed               | 1             | 回放倍速                                                     |
+| root                | document.body | 回放时使用的 HTML 元素                                       |
+| loadTimeout         | 0             | 加载异步样式表的超时时长                                     |
+| skipInactive        | false         | 是否快速跳过无用户操作的阶段                                 |
+| showWarning         | true          | 是否在回放过程中打印警告信息                                 |
+| showDebug           | false         | 是否在回放过程中打印 debug 信息                              |
+| blockClass          | 'rr-block'    | 需要在回放时展示为隐藏区域的元素类名                         |
+| liveMode            | false         | 是否开启直播模式                                             |
+| insertStyleRules    | []            | 可以传入多个 CSS rule string，用于自定义回放时 iframe 内的样式 |
+| triggerFocus        | true          | 回放时是否回放 focus 交互                                    |
+| UNSAFE_replayCanvas | false         | 回放时是否回放 canvas 内容，**开启后将会关闭沙盒策略，导致一定风险** |
 | mouseTail           | true          | 是否在回放时增加鼠标轨迹。传入 false 可关闭，传入对象可以定制轨迹持续时间、样式等，配置详见[类型](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
-| unpackFn            | -             | 数据解压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                                                         |
-| logConfig           | -             | console logger 数据播放设置，详见[console 录制和播放](./docs/recipes/console.zh_CN.md)                                                                                                               |
+| unpackFn            | -             | 数据解压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
+| logConfig           | -             | console logger 数据播放设置，详见[console 录制和播放](./docs/recipes/console.zh_CN.md) |
+| plugins             | []            | 加载插件以获得额外的回放功能. [什么是插件？](./docs/recipes/plugin.zh_CN.md) |
 
 #### 使用 rrweb-player
 
diff --git a/packages/rrweb-player/public/index.html b/packages/rrweb-player/public/index.html
index 032a906894..37766746df 100644
--- a/packages/rrweb-player/public/index.html
+++ b/packages/rrweb-player/public/index.html
@@ -18,7 +18,7 @@
     // eslint-disable-next-line
     const component = new rrwebPlayer({
       target: document.body,
-      data: {
+      props: {
         events,
         skipInactive: true,
         showDebug: false,

From c788ba66e10276a118a5ed1cc1dc2f2a83cdc14a Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Tue, 18 Jan 2022 23:54:28 +0800
Subject: [PATCH 491/524] make sure emit EventCast after cast fn

---
 packages/rrweb/src/replay/index.ts   | 2 ++
 packages/rrweb/src/replay/machine.ts | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 7aa26e5433..3b1a9a7e8c 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -627,6 +627,8 @@ export class Replayer {
           finish();
         }
       }
+
+      this.emitter.emit(ReplayerEvents.EventCast, event);
     };
     return wrappedCastFn;
   }
diff --git a/packages/rrweb/src/replay/machine.ts b/packages/rrweb/src/replay/machine.ts
index 2dbc512b9c..59ec3db194 100644
--- a/packages/rrweb/src/replay/machine.ts
+++ b/packages/rrweb/src/replay/machine.ts
@@ -204,7 +204,6 @@ export function createPlayerService(
               actions.push({
                 doAction: () => {
                   castFn();
-                  emitter.emit(ReplayerEvents.EventCast, event);
                 },
                 delay: event.delay!,
               });
@@ -269,7 +268,6 @@ export function createPlayerService(
               timer.addAction({
                 doAction: () => {
                   castFn();
-                  emitter.emit(ReplayerEvents.EventCast, event);
                 },
                 delay: event.delay!,
               });

From e9ea287bc569dff889b0139973e4ed35ffa26771 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sun, 23 Jan 2022 15:53:54 +0800
Subject: [PATCH 492/524] chore(release): publish new version

 - rrdom@0.1.0
 - rrweb@1.1.0
 - rrweb-player@0.7.11
 - rrweb-snapshot@1.1.12
---
 packages/rrdom/package.json          | 4 ++--
 packages/rrweb-player/package.json   | 4 ++--
 packages/rrweb-snapshot/package.json | 2 +-
 packages/rrweb/package.json          | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json
index abad628442..ab09add661 100644
--- a/packages/rrdom/package.json
+++ b/packages/rrdom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrdom",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "scripts": {
     "dev": "rollup -c -w",
     "bundle": "rollup --config",
@@ -33,7 +33,7 @@
     "rollup": "^2.56.3",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
-    "rrweb-snapshot": "^1.1.8",
+    "rrweb-snapshot": "^1.1.12",
     "ts-jest": "^27.0.5",
     "typescript": "^3.9.5"
   },
diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
index bc52e8b555..b1a11e3636 100644
--- a/packages/rrweb-player/package.json
+++ b/packages/rrweb-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.7.10",
+  "version": "0.7.11",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^1.0.8"
+    "rrweb": "^1.1.0"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
index 0fd7fb75c2..ef2182e3c1 100644
--- a/packages/rrweb-snapshot/package.json
+++ b/packages/rrweb-snapshot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 7f1ff947b6..9dc6ced7bc 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",
@@ -75,6 +75,6 @@
     "@xstate/fsm": "^1.4.0",
     "fflate": "^0.4.4",
     "mitt": "^1.1.3",
-    "rrweb-snapshot": "^1.1.11"
+    "rrweb-snapshot": "^1.1.12"
   }
 }

From 8aa95475776e642f2d586cb94eba7b29017e4aa6 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 23 Jan 2022 16:03:30 +0800
Subject: [PATCH 493/524] Bump trim-off-newlines from 1.0.1 to 1.0.3 (#808)

Bumps [trim-off-newlines](https://github.com/stevemao/trim-off-newlines) from 1.0.1 to 1.0.3.
- [Release notes](https://github.com/stevemao/trim-off-newlines/releases)
- [Commits](https://github.com/stevemao/trim-off-newlines/compare/v1.0.1...v1.0.3)

---
updated-dependencies:
- dependency-name: trim-off-newlines
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index ee156c2731..ffd9a7c7b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10377,9 +10377,9 @@ trim-newlines@^3.0.0:
   integrity sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==
 
 trim-off-newlines@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3"
-  integrity sha1-n5up2e+odkw4dpi8v+sshI8RrbM=
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.3.tgz#8df24847fcb821b0ab27d58ab6efec9f2fe961a1"
+  integrity sha512-kh6Tu6GbeSNMGfrrZh6Bb/4ZEHV1QlB4xNDBeog8Y9/QwFlKTRyWvY3Fs9tRDAMZliVUwieMgEdIeL/FtqjkJg==
 
 trim-repeated@^1.0.0:
   version "1.0.0"

From 9ca3fdcd7d78aed8784f59285cdd68e763627b02 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 23 Jan 2022 16:03:54 +0800
Subject: [PATCH 494/524] Bump node-fetch from 2.6.1 to 2.6.7 (#809)

Bumps [node-fetch](https://github.com/node-fetch/node-fetch) from 2.6.1 to 2.6.7.
- [Release notes](https://github.com/node-fetch/node-fetch/releases)
- [Changelog](https://github.com/node-fetch/node-fetch/blob/main/docs/CHANGELOG.md)
- [Commits](https://github.com/node-fetch/node-fetch/compare/v2.6.1...v2.6.7)

---
updated-dependencies:
- dependency-name: node-fetch
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index ffd9a7c7b2..647062260b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7727,9 +7727,11 @@ nice-try@^1.0.4:
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
 node-fetch@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
-  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
+  integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
+  dependencies:
+    whatwg-url "^5.0.0"
 
 node-gyp@^5.0.2:
   version "5.1.1"
@@ -10371,6 +10373,11 @@ tr46@^2.1.0:
   dependencies:
     punycode "^2.1.1"
 
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=
+
 trim-newlines@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144"
@@ -10802,6 +10809,11 @@ wcwidth@^1.0.0:
   dependencies:
     defaults "^1.0.3"
 
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=
+
 webidl-conversions@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
@@ -10824,6 +10836,14 @@ whatwg-mimetype@^2.3.0:
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
   integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
 
+whatwg-url@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  integrity sha1-lmRU6HZUYuN2RNNib2dCzotwll0=
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
 whatwg-url@^8.0.0, whatwg-url@^8.4.0, whatwg-url@^8.5.0:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.7.0.tgz#656a78e510ff8f3937bc0bcbe9f5c0ac35941b77"

From 661c746b14373dc3c360b2f6ce3e604e33887678 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 24 Jan 2022 23:42:36 +0800
Subject: [PATCH 495/524] fix #811 expose inlineImages to record

---
 guide.zh_CN.md                                | 77 ++++++++++---------
 packages/rrweb/src/record/index.ts            |  4 +
 packages/rrweb/src/record/mutation.ts         |  7 +-
 packages/rrweb/src/record/observer.ts         |  3 +
 .../rrweb/src/record/shadow-dom-manager.ts    |  2 +
 packages/rrweb/src/types.ts                   |  2 +
 packages/rrweb/typings/record/mutation.d.ts   |  3 +-
 packages/rrweb/typings/record/observer.d.ts   |  2 +-
 .../typings/record/shadow-dom-manager.d.ts    |  1 +
 packages/rrweb/typings/types.d.ts             |  8 +-
 10 files changed, 67 insertions(+), 42 deletions(-)

diff --git a/guide.zh_CN.md b/guide.zh_CN.md
index ab3fd66894..43edece2ed 100644
--- a/guide.zh_CN.md
+++ b/guide.zh_CN.md
@@ -131,29 +131,30 @@ setInterval(save, 10 * 1000);
 
 `rrweb.record(config)` 的 config 部分接受以下参数
 
-| key                  | 默认值             | 功能                                                         |
-| -------------------- | ------------------ | ------------------------------------------------------------ |
-| emit                 | 必填               | 获取当前录制的数据                                           |
-| checkoutEveryNth     | -                  | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节 |
-| checkoutEveryNms     | -                  | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节 |
-| blockClass           | 'rr-block'         | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节 |
-| blockSelector        | null               | 所有 element.matches(blockSelector)为 true 的元素都不会被录制，回放时取而代之的是一个同等宽高的占位元素 |
-| ignoreClass          | 'rr-ignore'        | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节 |
-| maskTextClass        | 'rr-mask'          | 字符串或正则表达式，可用于自定义忽略元素 text 内容的类名，详见[“隐私”](#隐私)章节 |
-| maskTextSelector     | null               | 所有 element.matches(maskTextSelector)为 true 的元素及其子元素的 text 内容将会被屏蔽 |
-| maskAllInputs        | false              | 将所有输入内容记录为 \*                                      |
+| key                  | 默认值             | 功能                                                                                                                                                                                  |
+| -------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| emit                 | 必填               | 获取当前录制的数据                                                                                                                                                                    |
+| checkoutEveryNth     | -                  | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                                          |
+| checkoutEveryNms     | -                  | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                                            |
+| blockClass           | 'rr-block'         | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节                                                                                                               |
+| blockSelector        | null               | 所有 element.matches(blockSelector)为 true 的元素都不会被录制，回放时取而代之的是一个同等宽高的占位元素                                                                               |
+| ignoreClass          | 'rr-ignore'        | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节                                                                                                               |
+| maskTextClass        | 'rr-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) |
-| maskInputFn          | -                  | 自定义特定类型的输入框内容记录逻辑                           |
-| maskTextFn           | -                  | 自定义文字内容的记录逻辑                                     |
-| slimDOMOptions       | {}                 | 去除 DOM 中不必要的部分 <br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108) |
-| inlineStylesheet     | true               | 是否将样式表内联                                             |
-| hooks                | {}                 | 各类事件的回调<br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
-| packFn               | -                  | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
-| sampling             | -                  | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
-| recordCanvas         | false              | 是否记录 canvas 内容                                         |
-| collectFonts         | false              | 是否记录页面中的字体文件                                     |
-| userTriggeredOnInput | false              | [什么是 `userTriggered`](https://github.com/rrweb-io/rrweb/pull/495) |
-| plugins              | []                 | 加载插件以获得额外的录制功能. [什么是插件？](./docs/recipes/plugin.zh_CN.md) |
+| maskInputFn          | -                  | 自定义特定类型的输入框内容记录逻辑                                                                                                                                                    |
+| maskTextFn           | -                  | 自定义文字内容的记录逻辑                                                                                                                                                              |
+| slimDOMOptions       | {}                 | 去除 DOM 中不必要的部分 <br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108)           |
+| inlineStylesheet     | true               | 是否将样式表内联                                                                                                                                                                      |
+| hooks                | {}                 | 各类事件的回调<br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207)                                                 |
+| packFn               | -                  | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                                            |
+| sampling             | -                  | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                                            |
+| recordCanvas         | false              | 是否记录 canvas 内容                                                                                                                                                                  |
+| inlineImages         | false              | 是否将图片内容记内联录制                                                                                                                                                              |
+| collectFonts         | false              | 是否记录页面中的字体文件                                                                                                                                                              |
+| userTriggeredOnInput | false              | [什么是 `userTriggered`](https://github.com/rrweb-io/rrweb/pull/495)                                                                                                                  |
+| plugins              | []                 | 加载插件以获得额外的录制功能. [什么是插件？](./docs/recipes/plugin.zh_CN.md)                                                                                                          |
 
 #### 隐私
 
@@ -281,23 +282,23 @@ replayer.pause(5000);
 
 可以通过 `new rrweb.Replayer(events, options)` 的方式向 rrweb 传递回放时的配置参数，具体配置如下：
 
-| key                 | 默认值        | 功能                                                         |
-| ------------------- | ------------- | ------------------------------------------------------------ |
-| speed               | 1             | 回放倍速                                                     |
-| root                | document.body | 回放时使用的 HTML 元素                                       |
-| loadTimeout         | 0             | 加载异步样式表的超时时长                                     |
-| skipInactive        | false         | 是否快速跳过无用户操作的阶段                                 |
-| showWarning         | true          | 是否在回放过程中打印警告信息                                 |
-| showDebug           | false         | 是否在回放过程中打印 debug 信息                              |
-| blockClass          | 'rr-block'    | 需要在回放时展示为隐藏区域的元素类名                         |
-| liveMode            | false         | 是否开启直播模式                                             |
-| insertStyleRules    | []            | 可以传入多个 CSS rule string，用于自定义回放时 iframe 内的样式 |
-| triggerFocus        | true          | 回放时是否回放 focus 交互                                    |
-| UNSAFE_replayCanvas | false         | 回放时是否回放 canvas 内容，**开启后将会关闭沙盒策略，导致一定风险** |
+| key                 | 默认值        | 功能                                                                                                                                                                                                 |
+| ------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| speed               | 1             | 回放倍速                                                                                                                                                                                             |
+| root                | document.body | 回放时使用的 HTML 元素                                                                                                                                                                               |
+| loadTimeout         | 0             | 加载异步样式表的超时时长                                                                                                                                                                             |
+| skipInactive        | false         | 是否快速跳过无用户操作的阶段                                                                                                                                                                         |
+| showWarning         | true          | 是否在回放过程中打印警告信息                                                                                                                                                                         |
+| showDebug           | false         | 是否在回放过程中打印 debug 信息                                                                                                                                                                      |
+| blockClass          | 'rr-block'    | 需要在回放时展示为隐藏区域的元素类名                                                                                                                                                                 |
+| liveMode            | false         | 是否开启直播模式                                                                                                                                                                                     |
+| insertStyleRules    | []            | 可以传入多个 CSS rule string，用于自定义回放时 iframe 内的样式                                                                                                                                       |
+| triggerFocus        | true          | 回放时是否回放 focus 交互                                                                                                                                                                            |
+| UNSAFE_replayCanvas | false         | 回放时是否回放 canvas 内容，**开启后将会关闭沙盒策略，导致一定风险**                                                                                                                                 |
 | mouseTail           | true          | 是否在回放时增加鼠标轨迹。传入 false 可关闭，传入对象可以定制轨迹持续时间、样式等，配置详见[类型](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
-| unpackFn            | -             | 数据解压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
-| logConfig           | -             | console logger 数据播放设置，详见[console 录制和播放](./docs/recipes/console.zh_CN.md) |
-| plugins             | []            | 加载插件以获得额外的回放功能. [什么是插件？](./docs/recipes/plugin.zh_CN.md) |
+| unpackFn            | -             | 数据解压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                                                         |
+| logConfig           | -             | console logger 数据播放设置，详见[console 录制和播放](./docs/recipes/console.zh_CN.md)                                                                                                               |
+| plugins             | []            | 加载插件以获得额外的回放功能. [什么是插件？](./docs/recipes/plugin.zh_CN.md)                                                                                                                         |
 
 #### 使用 rrweb-player
 
diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
index 5930913a8a..e9189c1670 100644
--- a/packages/rrweb/src/record/index.ts
+++ b/packages/rrweb/src/record/index.ts
@@ -59,6 +59,7 @@ function record<T = eventWithTime>(
     recordCanvas = false,
     userTriggeredOnInput = false,
     collectFonts = false,
+    inlineImages = false,
     plugins,
     keepIframeSrcFn = () => false,
   } = options;
@@ -197,6 +198,7 @@ function record<T = eventWithTime>(
       maskTextFn,
       maskInputFn,
       recordCanvas,
+      inlineImages,
       sampling,
       slimDOMOptions,
       iframeManager,
@@ -228,6 +230,7 @@ function record<T = eventWithTime>(
       maskTextFn,
       slimDOM: slimDOMOptions,
       recordCanvas,
+      inlineImages,
       onSerialize: (n) => {
         if (isIframeINode(n)) {
           iframeManager.addIframe(n);
@@ -390,6 +393,7 @@ function record<T = eventWithTime>(
           inlineStylesheet,
           sampling,
           recordCanvas,
+          inlineImages,
           userTriggeredOnInput,
           collectFonts,
           doc,
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index 924c58cd2c..275843fbb7 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -172,6 +172,7 @@ export default class MutationBuffer {
   private maskTextFn: MaskTextFn | undefined;
   private maskInputFn: MaskInputFn | undefined;
   private recordCanvas: boolean;
+  private inlineImages: boolean;
   private slimDOMOptions: SlimDOMOptions;
   private doc: Document;
 
@@ -190,6 +191,7 @@ export default class MutationBuffer {
     maskTextFn: MaskTextFn | undefined,
     maskInputFn: MaskInputFn | undefined,
     recordCanvas: boolean,
+    inlineImages: boolean,
     slimDOMOptions: SlimDOMOptions,
     doc: Document,
     mirror: Mirror,
@@ -205,6 +207,7 @@ export default class MutationBuffer {
     this.maskTextFn = maskTextFn;
     this.maskInputFn = maskInputFn;
     this.recordCanvas = recordCanvas;
+    this.inlineImages = inlineImages;
     this.slimDOMOptions = slimDOMOptions;
     this.emissionCallback = cb;
     this.doc = doc;
@@ -296,6 +299,7 @@ export default class MutationBuffer {
         maskInputFn: this.maskInputFn,
         slimDOMOptions: this.slimDOMOptions,
         recordCanvas: this.recordCanvas,
+        inlineImages: this.inlineImages,
         onSerialize: (currentN) => {
           if (isIframeINode(currentN)) {
             this.iframeManager.addIframe(currentN);
@@ -504,7 +508,8 @@ export default class MutationBuffer {
             }
           }
           for (const pname of Array.from(old.style)) {
-            if (target.style.getPropertyValue(pname) === '') {  // "if not set, returns the empty string"
+            if (target.style.getPropertyValue(pname) === '') {
+              // "if not set, returns the empty string"
               styleObj[pname] = false; // delete
             }
           }
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index d59e57d4d0..b01ef49e1f 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -97,6 +97,7 @@ export function initMutationObserver(
   maskTextFn: MaskTextFn | undefined,
   maskInputFn: MaskInputFn | undefined,
   recordCanvas: boolean,
+  inlineImages: boolean,
   slimDOMOptions: SlimDOMOptions,
   mirror: Mirror,
   iframeManager: IframeManager,
@@ -117,6 +118,7 @@ export function initMutationObserver(
     maskTextFn,
     maskInputFn,
     recordCanvas,
+    inlineImages,
     slimDOMOptions,
     doc,
     mirror,
@@ -951,6 +953,7 @@ export function initObservers(
     o.maskTextFn,
     o.maskInputFn,
     o.recordCanvas,
+    o.inlineImages,
     o.slimDOMOptions,
     o.mirror,
     o.iframeManager,
diff --git a/packages/rrweb/src/record/shadow-dom-manager.ts b/packages/rrweb/src/record/shadow-dom-manager.ts
index e068bb645d..6f2ed26a66 100644
--- a/packages/rrweb/src/record/shadow-dom-manager.ts
+++ b/packages/rrweb/src/record/shadow-dom-manager.ts
@@ -25,6 +25,7 @@ type BypassOptions = {
   maskTextFn: MaskTextFn | undefined;
   maskInputFn: MaskInputFn | undefined;
   recordCanvas: boolean;
+  inlineImages: boolean;
   sampling: SamplingStrategy;
   slimDOMOptions: SlimDOMOptions;
   iframeManager: IframeManager;
@@ -61,6 +62,7 @@ export class ShadowDomManager {
       this.bypassOptions.maskTextFn,
       this.bypassOptions.maskInputFn,
       this.bypassOptions.recordCanvas,
+      this.bypassOptions.inlineImages,
       this.bypassOptions.slimDOMOptions,
       this.mirror,
       this.bypassOptions.iframeManager,
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index da904dee13..a84a29edd1 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -230,6 +230,7 @@ export type recordOptions<T> = {
   recordCanvas?: boolean;
   userTriggeredOnInput?: boolean;
   collectFonts?: boolean;
+  inlineImages?: boolean;
   plugins?: RecordPlugin[];
   // departed, please use sampling options
   mousemoveWait?: number;
@@ -259,6 +260,7 @@ export type observerParam = {
   fontCb: fontCallback;
   sampling: SamplingStrategy;
   recordCanvas: boolean;
+  inlineImages: boolean;
   userTriggeredOnInput: boolean;
   collectFonts: boolean;
   slimDOMOptions: SlimDOMOptions;
diff --git a/packages/rrweb/typings/record/mutation.d.ts b/packages/rrweb/typings/record/mutation.d.ts
index b67548e30b..e47b119721 100644
--- a/packages/rrweb/typings/record/mutation.d.ts
+++ b/packages/rrweb/typings/record/mutation.d.ts
@@ -23,12 +23,13 @@ export default class MutationBuffer {
     private maskTextFn;
     private maskInputFn;
     private recordCanvas;
+    private inlineImages;
     private slimDOMOptions;
     private doc;
     private mirror;
     private iframeManager;
     private shadowDomManager;
-    init(cb: mutationCallBack, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, doc: Document, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager): void;
+    init(cb: mutationCallBack, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, inlineImages: boolean, slimDOMOptions: SlimDOMOptions, doc: Document, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager): void;
     freeze(): void;
     unfreeze(): void;
     isFrozen(): boolean;
diff --git a/packages/rrweb/typings/record/observer.d.ts b/packages/rrweb/typings/record/observer.d.ts
index ffca5918e6..58965d552d 100644
--- a/packages/rrweb/typings/record/observer.d.ts
+++ b/packages/rrweb/typings/record/observer.d.ts
@@ -4,7 +4,7 @@ import MutationBuffer from './mutation';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
 export declare const mutationBuffers: MutationBuffer[];
-export declare function initMutationObserver(cb: mutationCallBack, doc: Document, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager, rootEl: Node): MutationObserver;
+export declare function initMutationObserver(cb: mutationCallBack, doc: Document, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, inlineImages: boolean, slimDOMOptions: SlimDOMOptions, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager, rootEl: Node): MutationObserver;
 export declare function initScrollObserver(cb: scrollCallback, doc: Document, mirror: Mirror, blockClass: blockClass, sampling: SamplingStrategy): listenerHandler;
 export declare const INPUT_TAGS: string[];
 export declare function initObservers(o: observerParam, hooks?: hooksParam): listenerHandler;
diff --git a/packages/rrweb/typings/record/shadow-dom-manager.d.ts b/packages/rrweb/typings/record/shadow-dom-manager.d.ts
index c3bbaef717..d31d572759 100644
--- a/packages/rrweb/typings/record/shadow-dom-manager.d.ts
+++ b/packages/rrweb/typings/record/shadow-dom-manager.d.ts
@@ -11,6 +11,7 @@ declare type BypassOptions = {
     maskTextFn: MaskTextFn | undefined;
     maskInputFn: MaskInputFn | undefined;
     recordCanvas: boolean;
+    inlineImages: boolean;
     sampling: SamplingStrategy;
     slimDOMOptions: SlimDOMOptions;
     iframeManager: IframeManager;
diff --git a/packages/rrweb/typings/types.d.ts b/packages/rrweb/typings/types.d.ts
index 7d9c049435..ce27ce4147 100644
--- a/packages/rrweb/typings/types.d.ts
+++ b/packages/rrweb/typings/types.d.ts
@@ -122,6 +122,7 @@ export declare type SamplingStrategy = Partial<{
     mousemoveCallback: number;
     mouseInteraction: boolean | Record<string, boolean | undefined>;
     scroll: number;
+    media: number;
     input: 'all' | 'last';
 }>;
 export declare type RecordPlugin<TOptions = unknown> = {
@@ -150,6 +151,7 @@ export declare type recordOptions<T> = {
     recordCanvas?: boolean;
     userTriggeredOnInput?: boolean;
     collectFonts?: boolean;
+    inlineImages?: boolean;
     plugins?: RecordPlugin[];
     mousemoveWait?: number;
     keepIframeSrcFn?: KeepIframeSrcFn;
@@ -177,6 +179,7 @@ export declare type observerParam = {
     fontCb: fontCallback;
     sampling: SamplingStrategy;
     recordCanvas: boolean;
+    inlineImages: boolean;
     userTriggeredOnInput: boolean;
     collectFonts: boolean;
     slimDOMOptions: SlimDOMOptions;
@@ -349,12 +352,15 @@ export declare type inputCallback = (v: inputValue & {
 export declare const enum MediaInteractions {
     Play = 0,
     Pause = 1,
-    Seeked = 2
+    Seeked = 2,
+    VolumeChange = 3
 }
 export declare type mediaInteractionParam = {
     type: MediaInteractions;
     id: number;
     currentTime?: number;
+    volume?: number;
+    muted?: boolean;
 };
 export declare type mediaInteractionCallback = (p: mediaInteractionParam) => void;
 export declare type DocumentDimension = {

From ca5ecba4eb901a73133405e9854bc91c63fb64a5 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Mon, 24 Jan 2022 23:44:16 +0800
Subject: [PATCH 496/524] chore(release): publish new version

 - rrweb@1.1.1
 - rrweb-player@0.7.12
---
 packages/rrweb-player/package.json | 4 ++--
 packages/rrweb/package.json        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
index b1a11e3636..73cb810b4f 100644
--- a/packages/rrweb-player/package.json
+++ b/packages/rrweb-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.7.11",
+  "version": "0.7.12",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^1.1.0"
+    "rrweb": "^1.1.1"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 9dc6ced7bc..9a310ce564 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",

From 0c27ad22b26530643ad0456c66d010d65990b96b Mon Sep 17 00:00:00 2001
From: Yun Feng <f18846188605@gmail.com>
Date: Tue, 25 Jan 2022 12:56:57 +1100
Subject: [PATCH 497/524] improve robustness of inlineImages feature (#812)

* fix: add inlineImages option to rrrweb recorder and try to make the code more robust

* Improve robustness
---
 packages/rrweb-snapshot/src/rebuild.ts        |  9 +++--
 packages/rrweb-snapshot/src/snapshot.ts       | 39 +++++++++----------
 .../rrweb-snapshot/test/integration.test.ts   | 18 ++++-----
 3 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index 1719569c36..f736ffc24a 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -227,10 +227,13 @@ function buildNode(
               }
             };
           } else if (tagName === 'img' && name === 'rr_dataURL') {
-            const image = (node as HTMLImageElement);
+            const image = node as HTMLImageElement;
             if (!image.currentSrc.startsWith('data:')) {
-              // backup original img src
-              image.setAttribute('data-rrweb-src', image.currentSrc);
+              // Backup original img src. It may not have been set yet.
+              image.setAttribute(
+                'rrweb-original-src',
+                n.attributes['src'] as string,
+              );
               image.src = value;
             }
             image.removeAttribute(name);
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index e666eb4ade..91f6400abc 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -78,17 +78,6 @@ function extractOrigin(url: string): string {
 let canvasService: HTMLCanvasElement | null;
 let canvasCtx: CanvasRenderingContext2D | null;
 
-function initCanvasService(doc: Document) {
-  if (!canvasService) {
-      canvasService = doc.createElement('canvas');
-  }
-  if (!canvasCtx) {
-      canvasCtx = canvasService.getContext('2d');
-  }
-  canvasService.width = 0;
-  canvasService.height = 0;
-}
-
 const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm;
 const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/|#).*/;
 const DATA_URI = /^(data:)([^,]*),(.*)/i;
@@ -515,14 +504,27 @@ function serializeNode(
         attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL();
       }
       // save image offline
-      if (tagName === 'img' && inlineImages && canvasService && canvasCtx) {
-        const image = (n as HTMLImageElement);
+      if (tagName === 'img' && inlineImages) {
+        if (!canvasService) {
+          canvasService = doc.createElement('canvas');
+          canvasCtx = canvasService.getContext('2d');
+        }
+        const image = n as HTMLImageElement;
+        const oldValue = image.crossOrigin;
         image.crossOrigin = 'anonymous';
         try {
-          canvasService.width = image.naturalWidth;
-          canvasService.height = image.naturalHeight;
-          canvasCtx.drawImage(image, 0, 0);
-          attributes.rr_dataURL = canvasService.toDataURL();
+          const recordInlineImage = () => {
+            canvasService!.width = image.naturalWidth;
+            canvasService!.height = image.naturalHeight;
+            canvasCtx!.drawImage(image, 0, 0);
+            attributes.rr_dataURL = canvasService!.toDataURL();
+            oldValue
+              ? (attributes.crossOrigin = oldValue)
+              : delete attributes.crossOrigin;
+          };
+          // The image content may not have finished loading yet.
+          if (image.complete && image.naturalWidth !== 0) recordInlineImage();
+          else image.onload = recordInlineImage;
         } catch {
           // ignore error
         }
@@ -832,9 +834,6 @@ export function serializeNodeWithId(
     ) {
       preserveWhiteSpace = false;
     }
-    if (inlineImages) {
-      initCanvasService(doc);
-    }
     const bypassOptions = {
       doc,
       map,
diff --git a/packages/rrweb-snapshot/test/integration.test.ts b/packages/rrweb-snapshot/test/integration.test.ts
index 55daa59cca..c9aa91b9d8 100644
--- a/packages/rrweb-snapshot/test/integration.test.ts
+++ b/packages/rrweb-snapshot/test/integration.test.ts
@@ -194,22 +194,20 @@ iframe.contentDocument.querySelector('center').clientHeight
 
   it('correctly saves images offline', async () => {
     const page: puppeteer.Page = await browser.newPage();
-    // console for debug
-    // tslint:disable-next-line: no-console
-    page.on('console', (msg) => console.log(msg.text()));
 
-    await page.goto('http://localhost:3030/html/picture.html', { waitUntil: 'load' });
+    await page.goto('http://localhost:3030/html/picture.html', {
+      waitUntil: 'load',
+    });
     await page.waitForSelector('img', { timeout: 1000 });
-
-    const snapshot = await page.evaluate(`${code}
-    const [snap] = rrweb.snapshot(document, {inlineImages: true, inlineStylesheet: false});
-    JSON.stringify(snap, null, 2);
+    await page.evaluate(`${code}var snapshot = rrweb.snapshot(document, {inlineImages: true, inlineStylesheet: false});
     `);
-
+    await page.waitFor(100);
+    const snapshot = await page.evaluate(
+      'JSON.stringify(snapshot[0], null, 2);',
+    );
     assert(snapshot.includes('"rr_dataURL"'));
     assert(snapshot.includes('data:image/png;base64,'));
   });
-
 });
 
 describe('iframe integration tests', function (this: ISuite) {

From 156b760a3373a09e07bccb321fd27e09b1444435 Mon Sep 17 00:00:00 2001
From: Yun Feng <f18846188605@gmail.com>
Date: Wed, 26 Jan 2022 16:54:39 +1100
Subject: [PATCH 498/524] feat: add observer for 'selected' setter of
 HTMLOptionElement and try to fix issue #746 (#810)

* feat: add observer for 'selected' setter of HTMLOptionElement and try to fix issue #746

* style: add description of mechanism
---
 packages/rrweb-snapshot/src/snapshot.ts                  | 2 +-
 packages/rrweb/src/record/observer.ts                    | 9 ++++++++-
 .../rrweb/test/__snapshots__/integration.test.ts.snap    | 3 +--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 91f6400abc..bd544fa102 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -491,7 +491,7 @@ function serializeNode(
         }
       }
       if (tagName === 'option') {
-        if ((n as HTMLOptionElement).selected) {
+        if ((n as HTMLOptionElement).selected && !maskInputOptions['select']) {
           attributes.selected = true;
         } else {
           // ignore the html attribute (which corresponds to DOM (n as HTMLOptionElement).defaultSelected)
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index b01ef49e1f..752ac9478e 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -371,8 +371,14 @@ function initInputObserver(
   userTriggeredOnInput: boolean,
 ): listenerHandler {
   function eventHandler(event: Event) {
-    const target = getEventTarget(event);
+    let target = getEventTarget(event);
     const userTriggered = event.isTrusted;
+    /**
+     * If a site changes the value 'selected' of an option element, the value of its parent element, usually a select element, will be changed as well.
+     * We can treat this change as a value change of the select element the current target belongs to.
+     */
+    if (target && (target as Element).tagName === 'OPTION')
+      target = (target as Element).parentElement;
     if (
       !target ||
       !(target as Element).tagName ||
@@ -463,6 +469,7 @@ function initInputObserver(
     [HTMLTextAreaElement.prototype, 'value'],
     // Some UI library use selectedIndex to set select value
     [HTMLSelectElement.prototype, 'selectedIndex'],
+    [HTMLOptionElement.prototype, 'selected'],
   ];
   if (propertyDescriptor && propertyDescriptor.set) {
     handlers.push(
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index 75440a372e..983788b7a2 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -6066,8 +6066,7 @@ exports[`record integration tests should not record input values if maskAllInput
                                 \\"type\\": 2,
                                 \\"tagName\\": \\"option\\",
                                 \\"attributes\\": {
-                                  \\"value\\": \\"1\\",
-                                  \\"selected\\": true
+                                  \\"value\\": \\"1\\"
                                 },
                                 \\"childNodes\\": [
                                   {

From a5d1215bd1601760201f5cdc94bb105128ac7b39 Mon Sep 17 00:00:00 2001
From: Gabriel Stellini <gabrielstellini@gmail.com>
Date: Thu, 27 Jan 2022 15:55:38 +0100
Subject: [PATCH 499/524] Update css-font-loading-module (#784)

Co-authored-by: Gabriel Stellini <gabriel.stellini@fusonic.net>
---
 packages/rrweb/package.json           | 2 +-
 packages/rrweb/src/record/observer.ts | 2 +-
 packages/rrweb/src/types.ts           | 1 -
 packages/rrweb/typings/types.d.ts     | 1 -
 yarn.lock                             | 8 ++++----
 5 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 9a310ce564..4a4be3615e 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -71,7 +71,7 @@
     "typescript": "^3.9.5"
   },
   "dependencies": {
-    "@types/css-font-loading-module": "0.0.4",
+    "@types/css-font-loading-module": "0.0.7",
     "@xstate/fsm": "^1.4.0",
     "fflate": "^0.4.4",
     "mitt": "^1.1.3",
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index 752ac9478e..f69e81e918 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -6,7 +6,7 @@ import {
   MaskInputFn,
   MaskTextFn,
 } from 'rrweb-snapshot';
-import { FontFaceDescriptors, FontFaceSet } from 'css-font-loading-module';
+import { FontFaceSet } from 'css-font-loading-module';
 import {
   throttle,
   on,
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index a84a29edd1..78ed5f8c44 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -8,7 +8,6 @@ import {
   MaskTextFn,
 } from 'rrweb-snapshot';
 import { PackFn, UnpackFn } from './packer/base';
-import { FontFaceDescriptors } from 'css-font-loading-module';
 import { IframeManager } from './record/iframe-manager';
 import { ShadowDomManager } from './record/shadow-dom-manager';
 import type { Replayer } from './replay';
diff --git a/packages/rrweb/typings/types.d.ts b/packages/rrweb/typings/types.d.ts
index ce27ce4147..6cf36aea4a 100644
--- a/packages/rrweb/typings/types.d.ts
+++ b/packages/rrweb/typings/types.d.ts
@@ -1,6 +1,5 @@
 import { serializedNodeWithId, idNodeMap, INode, MaskInputOptions, SlimDOMOptions, MaskInputFn, MaskTextFn } from 'rrweb-snapshot';
 import { PackFn, UnpackFn } from './packer/base';
-import { FontFaceDescriptors } from 'css-font-loading-module';
 import { IframeManager } from './record/iframe-manager';
 import { ShadowDomManager } from './record/shadow-dom-manager';
 import type { Replayer } from './replay';
diff --git a/yarn.lock b/yarn.lock
index 647062260b..2ac3e4a726 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1889,10 +1889,10 @@
   resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.2.21.tgz#9f35a5643129df132cf3b5c1ec64046ea1af0650"
   integrity sha512-yd+9qKmJxm496BOV9CMNaey8TWsikaZOwMRwPHQIjcOJM9oV+fi9ZMNw3JsVnbEEbo2gRTDnGEBv8pjyn67hNg==
 
-"@types/css-font-loading-module@0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@types/css-font-loading-module/-/css-font-loading-module-0.0.4.tgz#94a835e27d1af444c65cba88523533c174463d64"
-  integrity sha512-ENdXf7MW4m9HeDojB2Ukbi7lYMIuQNBHVf98dbzaiG4EEJREBd6oleVAjrLRCrp7dm6CK1mmdmU9tcgF61acbw==
+"@types/css-font-loading-module@0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@types/css-font-loading-module/-/css-font-loading-module-0.0.7.tgz#2f98ede46acc0975de85c0b7b0ebe06041d24601"
+  integrity sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==
 
 "@types/cssom@^0.4.1":
   version "0.4.1"

From b0dc3885d9bfbe4fb54f7f2a1256cbe0c1c359f2 Mon Sep 17 00:00:00 2001
From: Cristi Constantin <1748317+croqaz@users.noreply.github.com>
Date: Fri, 28 Jan 2022 02:26:23 +0000
Subject: [PATCH 500/524] Fixes and tweaks (#795)

* Implemented image restore from rr_dataURL

* Implement saving images in the snapshot

* Fixed image saving, added a test

* Rename data-src to data-rrweb-src

* Updated the guide

* Rename recordImages to inlineImages and try catch

* A fix, some tweaks and 2 new log warnings

* Handle CORS errors when reading CSS rules

* Fix after merge

* Improve try catch for the inline image

* PR comments tweaks

* Fix typescript lint

* Small tweaks

* Fix a log warning
---
 packages/rrweb-snapshot/src/snapshot.ts | 53 ++++++++++++++-----------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index bd544fa102..1134301efb 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -64,8 +64,16 @@ function isCSSImportRule(rule: CSSRule): rule is CSSImportRule {
   return 'styleSheet' in rule;
 }
 
+function stringifyStyleSheet(sheet: CSSStyleSheet): string {
+  return sheet.cssRules
+    ? Array.from(sheet.cssRules)
+        .map((rule) => rule.cssText || '')
+        .join('')
+    : '';
+}
+
 function extractOrigin(url: string): string {
-  let origin;
+  let origin = '';
   if (url.indexOf('//') > -1) {
     origin = url.split('/').slice(0, 3).join('/');
   } else {
@@ -352,14 +360,6 @@ function onceIframeLoaded(
   iframeEl.addEventListener('load', listener);
 }
 
-function stringifyStyleSheet(sheet: CSSStyleSheet): string {
-  return sheet.cssRules
-    ? Array.from(sheet.cssRules)
-        .map((rule) => rule.cssText || '')
-        .join('')
-    : '';
-}
-
 function serializeNode(
   n: Node,
   options: {
@@ -437,7 +437,10 @@ function serializeNode(
         const stylesheet = Array.from(doc.styleSheets).find((s) => {
           return s.href === (n as HTMLLinkElement).href;
         });
-        const cssText = getCssRulesString(stylesheet as CSSStyleSheet);
+        let cssText: string | null = null;
+        if (stylesheet) {
+          cssText = getCssRulesString(stylesheet as CSSStyleSheet);
+        }
         if (cssText) {
           delete attributes.rel;
           delete attributes.href;
@@ -512,22 +515,24 @@ function serializeNode(
         const image = n as HTMLImageElement;
         const oldValue = image.crossOrigin;
         image.crossOrigin = 'anonymous';
-        try {
-          const recordInlineImage = () => {
+        const recordInlineImage = () => {
+          try {
             canvasService!.width = image.naturalWidth;
             canvasService!.height = image.naturalHeight;
             canvasCtx!.drawImage(image, 0, 0);
             attributes.rr_dataURL = canvasService!.toDataURL();
-            oldValue
-              ? (attributes.crossOrigin = oldValue)
-              : delete attributes.crossOrigin;
-          };
-          // The image content may not have finished loading yet.
-          if (image.complete && image.naturalWidth !== 0) recordInlineImage();
-          else image.onload = recordInlineImage;
-        } catch {
-          // ignore error
-        }
+          } catch (err) {
+            console.warn(
+              `Cannot inline img src=${image.currentSrc}! Error: ${err}`,
+            );
+          }
+          oldValue
+            ? (attributes.crossOrigin = oldValue)
+            : delete attributes.crossOrigin;
+        };
+        // The image content may not have finished loading yet.
+        if (image.complete && image.naturalWidth !== 0) recordInlineImage();
+        else image.onload = recordInlineImage;
       }
       // media elements
       if (tagName === 'audio' || tagName === 'video') {
@@ -586,8 +591,8 @@ function serializeNode(
               (n.parentNode as HTMLStyleElement).sheet!,
             );
           }
-        } catch {
-          // ignore error
+        } catch (err) {
+          console.warn(`Cannot get CSS styles from text's parentNode. Error: ${err}`, n);
         }
         textContent = absoluteToStylesheet(textContent, getHref());
       }

From c1111ed79d7e13a419d4f51f584eaa1443c9ee94 Mon Sep 17 00:00:00 2001
From: Yun Feng <f18846188605@gmail.com>
Date: Thu, 3 Feb 2022 22:53:33 +1100
Subject: [PATCH 501/524] disable smooth scroll behavior in sync mode (#824)

---
 packages/rrweb/src/replay/index.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 3b1a9a7e8c..bfa85ee905 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -183,7 +183,7 @@ export class Replayer {
       this.virtualStyleRulesMap.clear();
 
       for (const d of scrollMap.values()) {
-        this.applyScroll(d);
+        this.applyScroll(d, true);
       }
       for (const d of inputMap.values()) {
         this.applyInput(d);
@@ -985,7 +985,7 @@ export class Replayer {
           this.treeIndex.scroll(d);
           break;
         }
-        this.applyScroll(d);
+        this.applyScroll(d, false);
         break;
       }
       case IncrementalSource.ViewportResize:
@@ -1598,7 +1598,13 @@ export class Replayer {
     });
   }
 
-  private applyScroll(d: scrollData) {
+  /**
+   * Apply the scroll data on real elements.
+   * If the replayer is in sync mode, smooth scroll behavior should be disabled.
+   * @param d the scroll data
+   * @param isSync whether the replayer is in sync mode(fast-forward)
+   */
+  private applyScroll(d: scrollData, isSync: boolean) {
     const target = this.mirror.getNode(d.id);
     if (!target) {
       return this.debugNodeNotFound(d, d.id);
@@ -1607,14 +1613,14 @@ export class Replayer {
       this.iframe.contentWindow!.scrollTo({
         top: d.y,
         left: d.x,
-        behavior: 'smooth',
+        behavior: isSync ? 'auto' : 'smooth',
       });
     } else if (target.__sn.type === NodeType.Document) {
       // nest iframe content document
       ((target as unknown) as Document).defaultView!.scrollTo({
         top: d.y,
         left: d.x,
-        behavior: 'smooth',
+        behavior: isSync ? 'auto' : 'smooth',
       });
     } else {
       try {

From 5ec7d9e740010efc443337cbad6905c6cb3c6920 Mon Sep 17 00:00:00 2001
From: Yun Feng <f18846188605@gmail.com>
Date: Thu, 3 Feb 2022 22:58:01 +1100
Subject: [PATCH 502/524] fix: custom style rules don't get inserted into some
 iframe elements (#823)

* fix: custom style rules don't get inserted into some iframe elements

* code style tweak
---
 packages/rrweb/src/replay/index.ts   |  19 +-
 packages/rrweb/test/events/iframe.ts | 591 +++++++++++++++++++++++++++
 packages/rrweb/test/replayer.test.ts | 110 +++++
 packages/rrweb/typings/types.d.ts    |   1 +
 4 files changed, 709 insertions(+), 12 deletions(-)
 create mode 100644 packages/rrweb/test/events/iframe.ts

diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index bfa85ee905..ed01a271c9 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -660,10 +660,6 @@ export class Replayer {
       this.newDocumentQueue = this.newDocumentQueue.filter(
         (m) => m !== mutationInQueue,
       );
-      if (builtNode.contentDocument) {
-        const { documentElement, head } = builtNode.contentDocument;
-        this.insertStyleRules(documentElement, head);
-      }
     }
     const { documentElement, head } = this.iframe.contentDocument;
     this.insertStyleRules(documentElement, head);
@@ -726,6 +722,13 @@ export class Replayer {
       skipChild: false,
       afterAppend: (builtNode) => {
         this.collectIframeAndAttachDocument(collected, builtNode);
+        if (
+          builtNode.__sn.type === NodeType.Element &&
+          builtNode.__sn.tagName.toUpperCase() === 'HTML'
+        ) {
+          const { documentElement, head } = iframeEl.contentDocument!;
+          this.insertStyleRules(documentElement, head);
+        }
       },
       cache: this.cache,
     });
@@ -734,10 +737,6 @@ export class Replayer {
       this.newDocumentQueue = this.newDocumentQueue.filter(
         (m) => m !== mutationInQueue,
       );
-      if (builtNode.contentDocument) {
-        const { documentElement, head } = builtNode.contentDocument;
-        this.insertStyleRules(documentElement, head);
-      }
     }
   }
 
@@ -1482,10 +1481,6 @@ export class Replayer {
             (m) => m !== mutationInQueue,
           );
         }
-        if (target.contentDocument) {
-          const { documentElement, head } = target.contentDocument;
-          this.insertStyleRules(documentElement, head);
-        }
       }
 
       if (mutation.previousId || mutation.nextId) {
diff --git a/packages/rrweb/test/events/iframe.ts b/packages/rrweb/test/events/iframe.ts
new file mode 100644
index 0000000000..d4110d2070
--- /dev/null
+++ b/packages/rrweb/test/events/iframe.ts
@@ -0,0 +1,591 @@
+import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
+
+const now = Date.now();
+
+const events: eventWithTime[] = [
+  {
+    type: EventType.DomContentLoaded,
+    data: {},
+    timestamp: now,
+  },
+  {
+    type: EventType.Load,
+    data: {},
+    timestamp: now + 100,
+  },
+  {
+    type: EventType.Meta,
+    data: {
+      href: 'http://localhost',
+      width: 1200,
+      height: 500,
+    },
+    timestamp: now + 100,
+  },
+  {
+    type: EventType.FullSnapshot,
+    data: {
+      node: {
+        id: 1,
+        type: 0,
+        childNodes: [
+          { id: 2, name: 'html', type: 1, publicId: '', systemId: '' },
+          {
+            id: 3,
+            type: 2,
+            tagName: 'html',
+            attributes: { lang: 'en' },
+            childNodes: [
+              {
+                id: 4,
+                type: 2,
+                tagName: 'head',
+                attributes: {},
+                childNodes: [],
+              },
+              {
+                id: 5,
+                type: 2,
+                tagName: 'body',
+                attributes: {},
+                childNodes: [],
+              },
+            ],
+          },
+        ],
+      },
+      initialOffset: { top: 0, left: 0 },
+    },
+    timestamp: now + 200,
+  },
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.Mutation,
+      texts: [],
+      attributes: [],
+      removes: [],
+      adds: [
+        {
+          parentId: 5,
+          nextId: null,
+          node: {
+            type: 2,
+            tagName: 'iframe',
+            attributes: { id: 'one' },
+            childNodes: [],
+            id: 6,
+          },
+        },
+      ],
+    },
+    timestamp: now + 500,
+  },
+  // add iframe one
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.Mutation,
+      adds: [
+        {
+          parentId: 6,
+          nextId: null,
+          node: {
+            type: 0,
+            childNodes: [
+              {
+                type: 1,
+                name: 'html',
+                publicId: '',
+                systemId: '',
+                rootId: 7,
+                id: 8,
+              },
+              {
+                type: 2,
+                tagName: 'html',
+                attributes: { lang: 'en' },
+                childNodes: [
+                  {
+                    type: 2,
+                    tagName: 'head',
+                    attributes: {},
+                    childNodes: [],
+                    rootId: 7,
+                    id: 10,
+                  },
+                  {
+                    type: 2,
+                    tagName: 'body',
+                    attributes: {},
+                    childNodes: [
+                      {
+                        type: 2,
+                        tagName: 'div',
+                        attributes: {},
+                        childNodes: [
+                          {
+                            type: 3,
+                            textContent: '\n\t\tiframe 1\n\t',
+                            rootId: 7,
+                            id: 13,
+                          },
+                        ],
+                        rootId: 7,
+                        id: 12,
+                      },
+                      { type: 3, textContent: '\n\t', rootId: 7, id: 14 },
+                      {
+                        type: 2,
+                        tagName: 'script',
+                        attributes: {},
+                        childNodes: [
+                          {
+                            type: 3,
+                            textContent: 'SCRIPT_PLACEHOLDER',
+                            rootId: 7,
+                            id: 16,
+                          },
+                        ],
+                        rootId: 7,
+                        id: 15,
+                      },
+                      { type: 3, textContent: '\t\n', rootId: 7, id: 17 },
+                    ],
+                    rootId: 7,
+                    id: 11,
+                  },
+                ],
+                rootId: 7,
+                id: 9,
+              },
+            ],
+            id: 7,
+          },
+        },
+      ],
+      removes: [],
+      texts: [],
+      attributes: [],
+      isAttachIframe: true,
+    },
+    timestamp: now + 500,
+  },
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.Mutation,
+      texts: [],
+      attributes: [],
+      removes: [],
+      adds: [
+        {
+          parentId: 5,
+          nextId: null,
+          node: {
+            type: 2,
+            tagName: 'iframe',
+            attributes: { id: 'two' },
+            childNodes: [],
+            id: 38,
+          },
+        },
+      ],
+    },
+    timestamp: now + 1000,
+  },
+  // add iframe two
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.Mutation,
+      adds: [
+        {
+          parentId: 38,
+          nextId: null,
+          node: {
+            type: 0,
+            childNodes: [
+              {
+                type: 1,
+                name: 'html',
+                publicId: '',
+                systemId: '',
+                rootId: 39,
+                id: 40,
+              },
+              {
+                type: 2,
+                tagName: 'html',
+                attributes: { lang: 'en' },
+                childNodes: [
+                  {
+                    type: 2,
+                    tagName: 'head',
+                    attributes: {},
+                    childNodes: [
+                      { type: 3, textContent: '\n    ', rootId: 39, id: 43 },
+                      {
+                        type: 2,
+                        tagName: 'meta',
+                        attributes: { charset: 'UTF-8' },
+                        childNodes: [],
+                        rootId: 39,
+                        id: 44,
+                      },
+                      { type: 3, textContent: '\n    ', rootId: 39, id: 45 },
+                      {
+                        type: 2,
+                        tagName: 'meta',
+                        attributes: {
+                          name: 'viewport',
+                          content: 'width=device-width, initial-scale=1.0',
+                        },
+                        childNodes: [],
+                        rootId: 39,
+                        id: 46,
+                      },
+                      { type: 3, textContent: '\n    ', rootId: 39, id: 47 },
+                      {
+                        type: 2,
+                        tagName: 'title',
+                        attributes: {},
+                        childNodes: [
+                          {
+                            type: 3,
+                            textContent: 'iframe 2',
+                            rootId: 39,
+                            id: 49,
+                          },
+                        ],
+                        rootId: 39,
+                        id: 48,
+                      },
+                      { type: 3, textContent: '\n  ', rootId: 39, id: 50 },
+                    ],
+                    rootId: 39,
+                    id: 42,
+                  },
+                  { type: 3, textContent: '\n  ', rootId: 39, id: 51 },
+                  {
+                    type: 2,
+                    tagName: 'body',
+                    attributes: {},
+                    childNodes: [
+                      {
+                        type: 3,
+                        textContent: '\n    iframe 2\n    ',
+                        rootId: 39,
+                        id: 53,
+                      },
+                      {
+                        type: 2,
+                        tagName: 'iframe',
+                        attributes: { id: 'three', frameborder: '0' },
+                        childNodes: [],
+                        rootId: 39,
+                        id: 54,
+                      },
+                      { type: 3, textContent: '\n    ', rootId: 39, id: 55 },
+                      {
+                        type: 2,
+                        tagName: 'iframe',
+                        attributes: { id: 'four', frameborder: '0' },
+                        childNodes: [],
+                        rootId: 39,
+                        id: 56,
+                      },
+                      { type: 3, textContent: '\n  \n\n', rootId: 39, id: 57 },
+                    ],
+                    rootId: 39,
+                    id: 52,
+                  },
+                ],
+                rootId: 39,
+                id: 41,
+              },
+            ],
+            id: 39,
+          },
+        },
+      ],
+      removes: [],
+      texts: [],
+      attributes: [],
+      isAttachIframe: true,
+    },
+    timestamp: now + 1000,
+  },
+  // add iframe three
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.Mutation,
+      adds: [
+        {
+          parentId: 54,
+          nextId: null,
+          node: {
+            type: 0,
+            childNodes: [
+              {
+                type: 2,
+                tagName: 'html',
+                attributes: {},
+                childNodes: [
+                  {
+                    type: 2,
+                    tagName: 'head',
+                    attributes: {},
+                    childNodes: [],
+                    rootId: 58,
+                    id: 60,
+                  },
+                  {
+                    type: 2,
+                    tagName: 'body',
+                    attributes: {},
+                    childNodes: [],
+                    rootId: 58,
+                    id: 61,
+                  },
+                ],
+                rootId: 58,
+                id: 59,
+              },
+            ],
+            id: 58,
+          },
+        },
+      ],
+      removes: [],
+      texts: [],
+      attributes: [],
+      isAttachIframe: true,
+    },
+    timestamp: now + 1000,
+  },
+  // add iframe four
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.Mutation,
+      adds: [
+        {
+          parentId: 56,
+          nextId: null,
+          node: {
+            type: 0,
+            childNodes: [
+              {
+                type: 1,
+                name: 'html',
+                publicId: '',
+                systemId: '',
+                rootId: 62,
+                id: 63,
+              },
+              {
+                type: 2,
+                tagName: 'html',
+                attributes: { lang: 'en' },
+                childNodes: [
+                  {
+                    type: 2,
+                    tagName: 'head',
+                    attributes: {},
+                    childNodes: [
+                      { type: 3, textContent: '\n    ', rootId: 62, id: 66 },
+                      {
+                        type: 2,
+                        tagName: 'meta',
+                        attributes: { charset: 'UTF-8' },
+                        childNodes: [],
+                        rootId: 62,
+                        id: 67,
+                      },
+                      { type: 3, textContent: '\n    ', rootId: 62, id: 68 },
+                      {
+                        type: 2,
+                        tagName: 'meta',
+                        attributes: {
+                          name: 'viewport',
+                          content: 'width=device-width, initial-scale=1.0',
+                        },
+                        childNodes: [],
+                        rootId: 62,
+                        id: 69,
+                      },
+                      { type: 3, textContent: '\n    ', rootId: 62, id: 70 },
+                      {
+                        type: 2,
+                        tagName: 'title',
+                        attributes: {},
+                        childNodes: [
+                          {
+                            type: 3,
+                            textContent: 'iframe 4',
+                            rootId: 62,
+                            id: 72,
+                          },
+                        ],
+                        rootId: 62,
+                        id: 71,
+                      },
+                      { type: 3, textContent: '\n  ', rootId: 62, id: 73 },
+                    ],
+                    rootId: 62,
+                    id: 65,
+                  },
+                  { type: 3, textContent: '\n  ', rootId: 62, id: 74 },
+                  {
+                    type: 2,
+                    tagName: 'body',
+                    attributes: {},
+                    childNodes: [
+                      {
+                        type: 3,
+                        textContent: '\n    iframe 4\n  \n  ',
+                        rootId: 62,
+                        id: 76,
+                      },
+                      {
+                        type: 2,
+                        tagName: 'script',
+                        attributes: {},
+                        childNodes: [
+                          {
+                            type: 3,
+                            textContent: 'SCRIPT_PLACEHOLDER',
+                            rootId: 62,
+                            id: 78,
+                          },
+                        ],
+                        rootId: 62,
+                        id: 77,
+                      },
+                      { type: 3, textContent: '\n\n', rootId: 62, id: 79 },
+                    ],
+                    rootId: 62,
+                    id: 75,
+                  },
+                ],
+                rootId: 62,
+                id: 64,
+              },
+            ],
+            id: 62,
+          },
+        },
+      ],
+      removes: [],
+      texts: [],
+      attributes: [],
+      isAttachIframe: true,
+    },
+    timestamp: now + 1500,
+  },
+  // add iframe five
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.Mutation,
+      adds: [
+        {
+          parentId: 80,
+          nextId: null,
+          node: {
+            type: 0,
+            childNodes: [
+              {
+                type: 2,
+                tagName: 'html',
+                attributes: {},
+                childNodes: [
+                  {
+                    type: 2,
+                    tagName: 'head',
+                    attributes: {},
+                    childNodes: [],
+                    rootId: 81,
+                    id: 83,
+                  },
+                  {
+                    type: 2,
+                    tagName: 'body',
+                    attributes: {},
+                    childNodes: [
+                      {
+                        type: 2,
+                        tagName: 'script',
+                        attributes: {},
+                        childNodes: [
+                          {
+                            type: 3,
+                            textContent: 'SCRIPT_PLACEHOLDER',
+                            rootId: 81,
+                            id: 86,
+                          },
+                        ],
+                        rootId: 81,
+                        id: 85,
+                      },
+                    ],
+                    rootId: 81,
+                    id: 84,
+                  },
+                ],
+                rootId: 81,
+                id: 82,
+              },
+            ],
+            id: 81,
+          },
+        },
+      ],
+      removes: [],
+      texts: [],
+      attributes: [],
+      isAttachIframe: true,
+    },
+    timestamp: now + 2000,
+  },
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.Mutation,
+      texts: [],
+      attributes: [],
+      removes: [],
+      adds: [
+        {
+          parentId: 75,
+          nextId: null,
+          node: {
+            type: 2,
+            tagName: 'iframe',
+            attributes: { id: 'five' },
+            childNodes: [],
+            rootId: 62,
+            id: 80,
+          },
+        },
+      ],
+    },
+    timestamp: now + 2000,
+  },
+  // remove the html element of iframe four
+  {
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.Mutation,
+      texts: [],
+      attributes: [],
+      removes: [{ parentId: 62, id: 64 }],
+      adds: [],
+    },
+    timestamp: now + 2500,
+  },
+];
+
+export default events;
diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts
index ef5b949bb4..cd35fb2a51 100644
--- a/packages/rrweb/test/replayer.test.ts
+++ b/packages/rrweb/test/replayer.test.ts
@@ -11,6 +11,7 @@ import {
 } from './utils';
 import styleSheetRuleEvents from './events/style-sheet-rule-events';
 import orderingEvents from './events/ordering';
+import iframeEvents from './events/iframe';
 
 interface ISuite {
   code: string;
@@ -222,6 +223,115 @@ describe('replayer', function () {
     expect(result).toEqual(false);
   });
 
+  it('can fast-forward mutation events containing nested iframe elements', async () => {
+    await page.evaluate(`
+      events = ${JSON.stringify(iframeEvents)};
+      const { Replayer } = rrweb;
+      var replayer = new Replayer(events,{showDebug:true});
+      replayer.pause(250);
+    `);
+    const iframe = await page.$('iframe');
+    const contentDocument = await iframe!.contentFrame()!;
+    expect(await contentDocument!.$('iframe')).toBeNull();
+
+    const delay = 50;
+    // restart the replayer
+    await page.evaluate('replayer.play(0);');
+    await page.waitForTimeout(delay);
+    await page.evaluate('replayer.pause(550);'); // add 'iframe one' at 500
+    expect(await contentDocument!.$('iframe')).not.toBeNull();
+    const iframeOneDocument = await (await contentDocument!.$(
+      'iframe',
+    ))!.contentFrame();
+    expect(iframeOneDocument).not.toBeNull();
+    expect(await iframeOneDocument!.$('noscript')).not.toBeNull();
+    // make sure custom style rules are inserted rules
+    expect((await iframeOneDocument!.$$('style')).length).toBe(1);
+    expect(
+      await iframeOneDocument!.$eval(
+        'noscript',
+        (element) => window.getComputedStyle(element).display,
+      ),
+    ).toEqual('none');
+
+    // add 'iframe two' and 'iframe three' at 1000
+    await page.evaluate('replayer.play(0);');
+    await page.waitForTimeout(delay);
+    await page.evaluate('replayer.pause(1050);');
+    expect((await contentDocument!.$$('iframe')).length).toEqual(2);
+    let iframeTwoDocument = await (
+      await contentDocument!.$$('iframe')
+    )[1]!.contentFrame();
+    expect(iframeTwoDocument).not.toBeNull();
+    expect((await iframeTwoDocument!.$$('iframe')).length).toEqual(2);
+    let iframeThreeDocument = await (
+      await iframeTwoDocument!.$$('iframe')
+    )[0]!.contentFrame();
+    let iframeFourDocument = await (
+      await iframeTwoDocument!.$$('iframe')
+    )[1]!.contentFrame();
+    expect(iframeThreeDocument).not.toBeNull();
+    expect(iframeFourDocument).not.toBeNull();
+
+    // add 'iframe four' at 1500
+    await page.evaluate('replayer.play(0);');
+    await page.waitForTimeout(delay);
+    await page.evaluate('replayer.pause(1550);');
+    iframeTwoDocument = await (
+      await contentDocument!.$$('iframe')
+    )[1]!.contentFrame();
+    iframeFourDocument = await (
+      await iframeTwoDocument!.$$('iframe')
+    )[1]!.contentFrame();
+    expect(await iframeFourDocument!.$('iframe')).toBeNull();
+    expect(await iframeFourDocument!.$('style')).not.toBeNull();
+    expect(await iframeFourDocument!.title()).toEqual('iframe 4');
+
+    // add 'iframe five' at 2000
+    await page.evaluate('replayer.play(0);');
+    await page.waitForTimeout(delay);
+    await page.evaluate('replayer.pause(2050);');
+    iframeTwoDocument = await (
+      await contentDocument!.$$('iframe')
+    )[1]!.contentFrame();
+    iframeFourDocument = await (
+      await iframeTwoDocument!.$$('iframe')
+    )[1]!.contentFrame();
+    expect(await iframeFourDocument!.$('iframe')).not.toBeNull();
+    const iframeFiveDocument = await (await iframeFourDocument!.$(
+      'iframe',
+    ))!.contentFrame();
+    expect(iframeFiveDocument).not.toBeNull();
+    expect((await iframeFiveDocument!.$$('style')).length).toBe(1);
+    expect(await iframeFiveDocument!.$('noscript')).not.toBeNull();
+    expect(
+      await iframeFiveDocument!.$eval(
+        'noscript',
+        (element) => window.getComputedStyle(element).display,
+      ),
+    ).toEqual('none');
+
+    // remove the html element of 'iframe four' at 2500
+    await page.evaluate('replayer.play(0);');
+    await page.waitForTimeout(delay);
+    await page.evaluate('replayer.pause(2550);');
+    iframeTwoDocument = await (
+      await contentDocument!.$$('iframe')
+    )[1]!.contentFrame();
+    iframeFourDocument = await (
+      await iframeTwoDocument!.$$('iframe')
+    )[1]!.contentFrame();
+    // the html element should be removed
+    expect(await iframeFourDocument!.$('html')).toBeNull();
+    // the doctype should still exist
+    expect(
+      await iframeTwoDocument!.evaluate(
+        (iframe) => (iframe as HTMLIFrameElement)!.contentDocument!.doctype,
+        (await iframeTwoDocument!.$$('iframe'))[1],
+      ),
+    ).not.toBeNull();
+  });
+
   it('can stream events in live mode', async () => {
     const status = await page.evaluate(`
       const { Replayer } = rrweb;
diff --git a/packages/rrweb/typings/types.d.ts b/packages/rrweb/typings/types.d.ts
index 6cf36aea4a..181d54e53c 100644
--- a/packages/rrweb/typings/types.d.ts
+++ b/packages/rrweb/typings/types.d.ts
@@ -1,3 +1,4 @@
+/// <reference types="css-font-loading-module" />
 import { serializedNodeWithId, idNodeMap, INode, MaskInputOptions, SlimDOMOptions, MaskInputFn, MaskTextFn } from 'rrweb-snapshot';
 import { PackFn, UnpackFn } from './packer/base';
 import { IframeManager } from './record/iframe-manager';

From ab9fed0c7e268401645e62019b65f7c4962b4a94 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Thu, 3 Feb 2022 12:58:23 +0100
Subject: [PATCH 503/524] Add WebGL support (#756)

* Add very basic webgl support

* document the default

* only capture rr_dataURL in 2d canvas contexts

* rr_dataURL no longer part of webgl snapshot

* ignore __diff_output__ from jest-image-snapshot

* Rename generic "Monorepo" to "RRWeb Monorepo"

* Serialize WebGL variables

* Move rrweb test port number to unique port

rrweb-snapshot uses 3030, rrweb uses 3031

* Prepare for WebGL2

* Split up canvas replay and record webgl vars

* fix typo

* fix typo part 2

* fix typo

* Handle non-variables too

* provide correct context for warning

* (De)Serialize a lot of different objects

* monorepo root should be the first in the list

* Upgrade puppeteer to 11.x

* Correctly de-serialize webgl variables

* Encode arrayBuffers contents to base64

* rename contents to base64

* add webgl2 support and serialize HTMLImageElements

* Support serializing ImageData

* Correctly classify WebGL2 events

* Serialize format changed

* check if canvas has contents before we save the dataURL

* Remove blank dataURL

* reference original file not type defintion file

* update types

* rename code worspace

* update dependencies

* add spector to inspect webgl

* remove live server settings from code workspace

* Save canvas context in the node

Prevents from saving webgl canvases as 2d dataUrls

* remove extra braces

* add ICanvas type

* use ICanvas from rrweb-snapshot in rrweb instead of OgmentedCanvas

* add snapshots and webgl 2 tests

* Upgrade to puppeteer 12.0.1

* Revert back to puppeteer 9.1.1

* Keep index order consistent between replay and record

* keep correct index order in webgl2

* fixed forgotten import

* buffer up pending canvas mutations

* unify the way webgl and webgl2 get patched

* fix parsing error

* Add types for serialize-args

* Add debugging for webgl replay

* Move start-server to utils

* turn off debug mode by default

* Move pendingCanvasMutations to local object and fix if/else statement

* Always save pending mutations

* only use assert snapshot as it's clearer whats going on

* Ugly fix for now

* Making the tests more DRY

* flush at the end of each request animation frame

* Looks like the promise made this test more predictable

* add waitForRAF

* Make nested iframe recording robust no matter the test speed

* mute noisy error in test

* force a requestAnimationFrame

* Bundle events within one frame together as much as possible

WebGL events need to be bundled together as much as possible so they don't accidentally get split over multiple animation frames.

 `newFrame: true` is used to indicate the start of an new animation frame in the recording, and that the event shouldn't be bundled with the previous events.

* Rename RafStamps

* Override event.delay

* cleanup

* Add tests for addDelay

* Add webgl e2e test

* Remove settimeout

* DRY-up test

* Preload images in webgl

* Add e2e test for webgl image preloading

* don't turn on devtools by default!

* Remove spector

* close server after use

* Add imageMap parameter

* Make e2e image test more robust

* document debug mode

* cleanup

* WebGL recording in iframes & Safari 14 support

* fix tests

* don't save null objects as WebGLVar

* group (de)serialized webgl variables by context

* Fix test

* fix tests

* bundle webgl mutations on request animation frame

Instead of fixing it on the replay side we buffer up webgl canvas mutations and wait for a new RAF to flush them. This allows us to remove `newFrame` from the events and simplify things a little

* Add canvas element to mutation observer file

* Add Canvas (Mutation) Manager

Allows you to do `record.freezePage()` and canvas events will get paused.

Based on https://github.com/rrweb-io/rrweb/pull/756#issuecomment-1007566907

* cleanup

* Make sure the correct </body> gets replaced

* Perf: Speed up check to see if canvas is blank

* Access unpatched getImageData

* Use is2DCanvasBlank only for 2d context
---
 .gitignore                                    |    2 +-
 ...orkspace => rrweb-monorepo.code-workspace} |   11 +-
 packages/rrweb-snapshot/src/snapshot.ts       |   34 +-
 packages/rrweb-snapshot/src/types.ts          |    4 +
 packages/rrweb-snapshot/src/utils.ts          |   37 +
 packages/rrweb-snapshot/typings/types.d.ts    |    3 +
 packages/rrweb-snapshot/typings/utils.d.ts    |    1 +
 packages/rrweb/.gitignore                     |    1 +
 packages/rrweb/jest.config.js                 |    3 +
 packages/rrweb/package.json                   |    6 +-
 packages/rrweb/src/record/index.ts            |   32 +-
 packages/rrweb/src/record/mutation.ts         |   16 +-
 packages/rrweb/src/record/observer.ts         |   96 +-
 .../rrweb/src/record/observers/canvas/2d.ts   |   94 ++
 .../record/observers/canvas/canvas-manager.ts |  152 ++
 .../src/record/observers/canvas/canvas.ts     |   35 +
 .../record/observers/canvas/serialize-args.ts |  166 ++
 .../src/record/observers/canvas/webgl.ts      |  106 ++
 .../rrweb/src/record/shadow-dom-manager.ts    |    3 +
 packages/rrweb/src/replay/canvas/2d.ts        |   48 +
 packages/rrweb/src/replay/canvas/index.ts     |   51 +
 packages/rrweb/src/replay/canvas/webgl.ts     |  175 ++
 packages/rrweb/src/replay/index.ts            |  117 +-
 packages/rrweb/src/replay/machine.ts          |    1 +
 packages/rrweb/src/replay/timer.ts            |    2 +
 packages/rrweb/src/types.ts                   |   58 +-
 .../__snapshots__/integration.test.ts.snap    |  418 ++++-
 ...record-and-replay-a-webgl-image-1-snap.png |  Bin 0 -> 10913 bytes
 ...ecord-and-replay-a-webgl-square-1-snap.png |  Bin 0 -> 10812 bytes
 packages/rrweb/test/e2e/webgl.test.ts         |  175 ++
 packages/rrweb/test/events/webgl.ts           |  118 ++
 .../rrweb/test/html/assets/webgl-utils.js     | 1496 +++++++++++++++++
 .../rrweb/test/html/canvas-webgl-image.html   |  149 ++
 .../rrweb/test/html/canvas-webgl-square.html  |  110 ++
 packages/rrweb/test/html/canvas-webgl.html    |   27 +
 .../rrweb/test/html/mutation-observer.html    |    3 +-
 packages/rrweb/test/integration.test.ts       |   85 +-
 packages/rrweb/test/packer.test.ts            |    7 +
 .../record/__snapshots__/webgl.test.ts.snap   |  814 +++++++++
 .../rrweb/test/record/serialize-args.test.ts  |  179 ++
 packages/rrweb/test/record/webgl.test.ts      |  260 +++
 ...ould-output-simple-webgl-object-1-snap.png |  Bin 0 -> 10796 bytes
 .../test/replay/deserialize-args.test.ts      |  133 ++
 .../test/replay/preload-all-images.test.ts    |  125 ++
 .../rrweb/test/replay/webgl-mutation.test.ts  |   47 +
 packages/rrweb/test/replay/webgl.test.ts      |   66 +
 packages/rrweb/test/utils.ts                  |  151 ++
 packages/rrweb/tsconfig.json                  |    6 +-
 packages/rrweb/typings/record/mutation.d.ts   |    5 +-
 packages/rrweb/typings/record/observer.d.ts   |    3 +-
 .../typings/record/observers/canvas/2d.d.ts   |    2 +
 .../observers/canvas/canvas-manager.d.ts      |   31 +
 .../record/observers/canvas/canvas.d.ts       |    2 +
 .../observers/canvas/serialize-args.d.ts      |    6 +
 .../record/observers/canvas/webgl.d.ts        |    2 +
 .../record/observers/canvas/webgl2.d.ts       |    2 +
 .../typings/record/shadow-dom-manager.d.ts    |    2 +
 packages/rrweb/typings/replay/canvas/2d.d.ts  |    9 +
 .../rrweb/typings/replay/canvas/index.d.ts    |    9 +
 .../rrweb/typings/replay/canvas/webgl.d.ts    |   11 +
 packages/rrweb/typings/replay/index.d.ts      |    3 +
 packages/rrweb/typings/types.d.ts             |   37 +-
 yarn.lock                                     |  240 ++-
 63 files changed, 5677 insertions(+), 310 deletions(-)
 rename .vscode/{monorepo.code-workspace => rrweb-monorepo.code-workspace} (51%)
 create mode 100644 packages/rrweb/src/record/observers/canvas/2d.ts
 create mode 100644 packages/rrweb/src/record/observers/canvas/canvas-manager.ts
 create mode 100644 packages/rrweb/src/record/observers/canvas/canvas.ts
 create mode 100644 packages/rrweb/src/record/observers/canvas/serialize-args.ts
 create mode 100644 packages/rrweb/src/record/observers/canvas/webgl.ts
 create mode 100644 packages/rrweb/src/replay/canvas/2d.ts
 create mode 100644 packages/rrweb/src/replay/canvas/index.ts
 create mode 100644 packages/rrweb/src/replay/canvas/webgl.ts
 create mode 100644 packages/rrweb/test/e2e/__image_snapshots__/webgl-test-ts-e-2-e-webgl-will-record-and-replay-a-webgl-image-1-snap.png
 create mode 100644 packages/rrweb/test/e2e/__image_snapshots__/webgl-test-ts-e-2-e-webgl-will-record-and-replay-a-webgl-square-1-snap.png
 create mode 100644 packages/rrweb/test/e2e/webgl.test.ts
 create mode 100644 packages/rrweb/test/events/webgl.ts
 create mode 100644 packages/rrweb/test/html/assets/webgl-utils.js
 create mode 100644 packages/rrweb/test/html/canvas-webgl-image.html
 create mode 100644 packages/rrweb/test/html/canvas-webgl-square.html
 create mode 100644 packages/rrweb/test/html/canvas-webgl.html
 create mode 100644 packages/rrweb/test/record/__snapshots__/webgl.test.ts.snap
 create mode 100644 packages/rrweb/test/record/serialize-args.test.ts
 create mode 100644 packages/rrweb/test/record/webgl.test.ts
 create mode 100644 packages/rrweb/test/replay/__image_snapshots__/webgl-test-ts-replayer-webgl-should-output-simple-webgl-object-1-snap.png
 create mode 100644 packages/rrweb/test/replay/deserialize-args.test.ts
 create mode 100644 packages/rrweb/test/replay/preload-all-images.test.ts
 create mode 100644 packages/rrweb/test/replay/webgl-mutation.test.ts
 create mode 100644 packages/rrweb/test/replay/webgl.test.ts
 create mode 100644 packages/rrweb/typings/record/observers/canvas/2d.d.ts
 create mode 100644 packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts
 create mode 100644 packages/rrweb/typings/record/observers/canvas/canvas.d.ts
 create mode 100644 packages/rrweb/typings/record/observers/canvas/serialize-args.d.ts
 create mode 100644 packages/rrweb/typings/record/observers/canvas/webgl.d.ts
 create mode 100644 packages/rrweb/typings/record/observers/canvas/webgl2.d.ts
 create mode 100644 packages/rrweb/typings/replay/canvas/2d.d.ts
 create mode 100644 packages/rrweb/typings/replay/canvas/index.d.ts
 create mode 100644 packages/rrweb/typings/replay/canvas/webgl.d.ts

diff --git a/.gitignore b/.gitignore
index c70cf42b7f..895e1115aa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,5 @@
 .vscode/*
-!/.vscode/monorepo.code-workspace
+!/.vscode/rrweb-monorepo.code-workspace
 .idea
 node_modules
 package-lock.json
diff --git a/.vscode/monorepo.code-workspace b/.vscode/rrweb-monorepo.code-workspace
similarity index 51%
rename from .vscode/monorepo.code-workspace
rename to .vscode/rrweb-monorepo.code-workspace
index 4caba94749..79849c8fe9 100644
--- a/.vscode/monorepo.code-workspace
+++ b/.vscode/rrweb-monorepo.code-workspace
@@ -1,26 +1,31 @@
 {
   "folders": [
     {
-      "name": "Monorepo",
+      "name": " rrweb monorepo", // added a space to bump it to the top
       "path": ".."
     },
     {
+      "name": "rrdom (package)",
       "path": "../packages/rrdom"
     },
     {
+      "name": "rrweb (package)",
       "path": "../packages/rrweb"
     },
     {
+      "name": "rrweb-player (package)",
       "path": "../packages/rrweb-player"
     },
     {
+      "name": "rrweb-snapshot (package)",
       "path": "../packages/rrweb-snapshot"
     }
   ],
   "settings": {
     "jest.disabledWorkspaceFolders": [
-      "Monorepo",
-      "rrweb-player"
+      " rrweb monorepo",
+      "rrweb-player (package)",
+      "rrdom (package)"
     ]
   }
 }
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 1134301efb..0f8de04a84 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -10,8 +10,14 @@ import {
   MaskTextFn,
   MaskInputFn,
   KeepIframeSrcFn,
+  ICanvas,
 } from './types';
-import { isElement, isShadowRoot, maskInputValue } from './utils';
+import {
+  is2DCanvasBlank,
+  isElement,
+  isShadowRoot,
+  maskInputValue,
+} from './utils';
 
 let _id = 1;
 const tagNameRegex = new RegExp('[^a-z0-9-_:]');
@@ -504,7 +510,26 @@ function serializeNode(
       }
       // canvas image data
       if (tagName === 'canvas' && recordCanvas) {
-        attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL();
+        if ((n as ICanvas).__context === '2d') {
+          // only record this on 2d canvas
+          if (!is2DCanvasBlank(n as HTMLCanvasElement)) {
+            attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL();
+          }
+        } else if (!('__context' in n)) {
+          // context is unknown, better not call getContext to trigger it
+          const canvasDataURL = (n as HTMLCanvasElement).toDataURL();
+
+          // create blank canvas of same dimensions
+          const blankCanvas = document.createElement('canvas');
+          blankCanvas.width = (n as HTMLCanvasElement).width;
+          blankCanvas.height = (n as HTMLCanvasElement).height;
+          const blankCanvasDataURL = blankCanvas.toDataURL();
+
+          // no need to save dataURL if it's the same as blank canvas
+          if (canvasDataURL !== blankCanvasDataURL) {
+            attributes.rr_dataURL = canvasDataURL;
+          }
+        }
       }
       // save image offline
       if (tagName === 'img' && inlineImages) {
@@ -592,7 +617,10 @@ function serializeNode(
             );
           }
         } catch (err) {
-          console.warn(`Cannot get CSS styles from text's parentNode. Error: ${err}`, n);
+          console.warn(
+            `Cannot get CSS styles from text's parentNode. Error: ${err}`,
+            n,
+          );
         }
         textContent = absoluteToStylesheet(textContent, getHref());
       }
diff --git a/packages/rrweb-snapshot/src/types.ts b/packages/rrweb-snapshot/src/types.ts
index 8720783ee5..f239213d32 100644
--- a/packages/rrweb-snapshot/src/types.ts
+++ b/packages/rrweb-snapshot/src/types.ts
@@ -71,6 +71,10 @@ export interface INode extends Node {
   __sn: serializedNodeWithId;
 }
 
+export interface ICanvas extends HTMLCanvasElement {
+  __context: string;
+}
+
 export type idNodeMap = {
   [key: number]: INode;
 };
diff --git a/packages/rrweb-snapshot/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts
index ed5c5f7565..2b059765d1 100644
--- a/packages/rrweb-snapshot/src/utils.ts
+++ b/packages/rrweb-snapshot/src/utils.ts
@@ -35,3 +35,40 @@ export function maskInputValue({
   }
   return text;
 }
+
+const ORIGINAL_ATTRIBUTE_NAME = '__rrweb_original__';
+type PatchedGetImageData = {
+  [ORIGINAL_ATTRIBUTE_NAME]: CanvasImageData['getImageData'];
+} & CanvasImageData['getImageData'];
+
+export function is2DCanvasBlank(canvas: HTMLCanvasElement): boolean {
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return true;
+
+  const chunkSize = 50;
+
+  // get chunks of the canvas and check if it is blank
+  for (let x = 0; x < canvas.width; x += chunkSize) {
+    for (let y = 0; y < canvas.height; y += chunkSize) {
+      const getImageData = ctx.getImageData as PatchedGetImageData;
+      const originalGetImageData =
+        ORIGINAL_ATTRIBUTE_NAME in getImageData
+          ? getImageData[ORIGINAL_ATTRIBUTE_NAME]
+          : getImageData;
+      // by getting the canvas in chunks we avoid an expensive
+      // `getImageData` call that retrieves everything
+      // even if we can already tell from the first chunk(s) that
+      // the canvas isn't blank
+      const pixelBuffer = new Uint32Array(
+        originalGetImageData(
+          x,
+          y,
+          Math.min(chunkSize, canvas.width - x),
+          Math.min(chunkSize, canvas.height - y),
+        ).data.buffer,
+      );
+      if (pixelBuffer.some((pixel) => pixel !== 0)) return false;
+    }
+  }
+  return true;
+}
diff --git a/packages/rrweb-snapshot/typings/types.d.ts b/packages/rrweb-snapshot/typings/types.d.ts
index 5831c7b5fa..262d3f9aef 100644
--- a/packages/rrweb-snapshot/typings/types.d.ts
+++ b/packages/rrweb-snapshot/typings/types.d.ts
@@ -55,6 +55,9 @@ export declare type tagMap = {
 export interface INode extends Node {
     __sn: serializedNodeWithId;
 }
+export interface ICanvas extends HTMLCanvasElement {
+    __context: string;
+}
 export declare type idNodeMap = {
     [key: number]: INode;
 };
diff --git a/packages/rrweb-snapshot/typings/utils.d.ts b/packages/rrweb-snapshot/typings/utils.d.ts
index dfb1b70a8d..6572ab8279 100644
--- a/packages/rrweb-snapshot/typings/utils.d.ts
+++ b/packages/rrweb-snapshot/typings/utils.d.ts
@@ -8,3 +8,4 @@ export declare function maskInputValue({ maskInputOptions, tagName, type, value,
     value: string | null;
     maskInputFn?: MaskInputFn;
 }): string;
+export declare function is2DCanvasBlank(canvas: HTMLCanvasElement): boolean;
diff --git a/packages/rrweb/.gitignore b/packages/rrweb/.gitignore
index afbda82bac..4875c32f5c 100644
--- a/packages/rrweb/.gitignore
+++ b/packages/rrweb/.gitignore
@@ -13,3 +13,4 @@ temp
 *.log
 
 .env
+__diff_output__
\ No newline at end of file
diff --git a/packages/rrweb/jest.config.js b/packages/rrweb/jest.config.js
index 46cb05c37d..29db4e7fa0 100644
--- a/packages/rrweb/jest.config.js
+++ b/packages/rrweb/jest.config.js
@@ -3,4 +3,7 @@ module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'node',
   testMatch: ['**/**.test.ts'],
+  moduleNameMapper: {
+    '\\.css$': 'identity-obj-proxy',
+  },
 };
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 4a4be3615e..61a1fcb877 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -46,15 +46,18 @@
     "@types/chai": "^4.1.6",
     "@types/inquirer": "0.0.43",
     "@types/jest": "^27.0.2",
+    "@types/jest-image-snapshot": "^4.3.1",
     "@types/jsdom": "^16.2.12",
     "@types/node": "^12.20.16",
     "@types/prettier": "^2.3.2",
-    "@types/puppeteer": "^5.4.3",
+    "@types/puppeteer": "^5.4.4",
     "cross-env": "^5.2.0",
     "fast-mhtml": "^1.1.9",
+    "identity-obj-proxy": "^3.0.0",
     "ignore-styles": "^5.0.1",
     "inquirer": "^6.2.1",
     "jest": "^27.2.4",
+    "jest-image-snapshot": "^4.5.1",
     "jest-snapshot": "^23.6.0",
     "jsdom": "^17.0.0",
     "jsdom-global": "^3.0.2",
@@ -73,6 +76,7 @@
   "dependencies": {
     "@types/css-font-loading-module": "0.0.7",
     "@xstate/fsm": "^1.4.0",
+    "base64-arraybuffer": "^1.0.1",
     "fflate": "^0.4.4",
     "mitt": "^1.1.3",
     "rrweb-snapshot": "^1.1.12"
diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
index e9189c1670..e4c9236596 100644
--- a/packages/rrweb/src/record/index.ts
+++ b/packages/rrweb/src/record/index.ts
@@ -18,9 +18,11 @@ import {
   listenerHandler,
   mutationCallbackParam,
   scrollCallback,
+  canvasMutationParam,
 } from '../types';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
+import { CanvasManager } from './observers/canvas/canvas-manager';
 
 function wrapEvent(e: event): eventWithTime {
   return {
@@ -180,11 +182,28 @@ function record<T = eventWithTime>(
         },
       }),
     );
+  const wrappedCanvasMutationEmit = (p: canvasMutationParam) =>
+    wrappedEmit(
+      wrapEvent({
+        type: EventType.IncrementalSnapshot,
+        data: {
+          source: IncrementalSource.CanvasMutation,
+          ...p,
+        },
+      }),
+    );
 
   const iframeManager = new IframeManager({
     mutationCb: wrappedMutationEmit,
   });
 
+  const canvasManager = new CanvasManager({
+    mutationCb: wrappedCanvasMutationEmit,
+    win: window,
+    blockClass,
+    mirror,
+  });
+
   const shadowDomManager = new ShadowDomManager({
     mutationCb: wrappedMutationEmit,
     scrollCb: wrappedScrollEmit,
@@ -202,6 +221,7 @@ function record<T = eventWithTime>(
       sampling,
       slimDOMOptions,
       iframeManager,
+      canvasManager,
     },
     mirror,
   });
@@ -365,16 +385,7 @@ function record<T = eventWithTime>(
                 },
               }),
             ),
-          canvasMutationCb: (p) =>
-            wrappedEmit(
-              wrapEvent({
-                type: EventType.IncrementalSnapshot,
-                data: {
-                  source: IncrementalSource.CanvasMutation,
-                  ...p,
-                },
-              }),
-            ),
+          canvasMutationCb: wrappedCanvasMutationEmit,
           fontCb: (p) =>
             wrappedEmit(
               wrapEvent({
@@ -404,6 +415,7 @@ function record<T = eventWithTime>(
           mirror,
           iframeManager,
           shadowDomManager,
+          canvasManager,
           plugins:
             plugins?.map((p) => ({
               observer: p.observer,
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index 275843fbb7..842a98b8da 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -31,6 +31,7 @@ import {
   hasShadowRoot,
 } from '../utils';
 import { IframeManager } from './iframe-manager';
+import { CanvasManager } from './observers/canvas/canvas-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
 
 type DoubleLinkedListNode = {
@@ -179,6 +180,7 @@ export default class MutationBuffer {
   private mirror: Mirror;
   private iframeManager: IframeManager;
   private shadowDomManager: ShadowDomManager;
+  private canvasManager: CanvasManager;
 
   public init(
     cb: mutationCallBack,
@@ -197,6 +199,7 @@ export default class MutationBuffer {
     mirror: Mirror,
     iframeManager: IframeManager,
     shadowDomManager: ShadowDomManager,
+    canvasManager: CanvasManager,
   ) {
     this.blockClass = blockClass;
     this.blockSelector = blockSelector;
@@ -214,14 +217,17 @@ export default class MutationBuffer {
     this.mirror = mirror;
     this.iframeManager = iframeManager;
     this.shadowDomManager = shadowDomManager;
+    this.canvasManager = canvasManager;
   }
 
   public freeze() {
     this.frozen = true;
+    this.canvasManager.freeze();
   }
 
   public unfreeze() {
     this.frozen = false;
+    this.canvasManager.unfreeze();
     this.emit();
   }
 
@@ -231,16 +237,22 @@ export default class MutationBuffer {
 
   public lock() {
     this.locked = true;
+    this.canvasManager.lock();
   }
 
   public unlock() {
     this.locked = false;
+    this.canvasManager.unlock();
     this.emit();
   }
 
+  public reset() {
+    this.canvasManager.reset();
+  }
+
   public processMutations = (mutations: mutationRecord[]) => {
-    mutations.forEach(this.processMutation);
-    this.emit();
+    mutations.forEach(this.processMutation); // adds mutations to the buffer
+    this.emit(); // clears buffer if not locked/frozen
   };
 
   public emit = () => {
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index f69e81e918..7a08416fc5 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -49,6 +49,7 @@ import {
 import MutationBuffer from './mutation';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
+import { CanvasManager } from './observers/canvas/canvas-manager';
 
 type WindowWithStoredMutationObserver = IWindow & {
   __rrMutationObserver?: MutationObserver;
@@ -102,6 +103,7 @@ export function initMutationObserver(
   mirror: Mirror,
   iframeManager: IframeManager,
   shadowDomManager: ShadowDomManager,
+  canvasManager: CanvasManager,
   rootEl: Node,
 ): MutationObserver {
   const mutationBuffer = new MutationBuffer();
@@ -124,6 +126,7 @@ export function initMutationObserver(
     mirror,
     iframeManager,
     shadowDomManager,
+    canvasManager,
   );
   let mutationObserverCtor =
     window.MutationObserver ||
@@ -721,88 +724,6 @@ function initMediaInteractionObserver(
   };
 }
 
-function initCanvasMutationObserver(
-  cb: canvasMutationCallback,
-  win: IWindow,
-  blockClass: blockClass,
-  mirror: Mirror,
-): listenerHandler {
-  const props = Object.getOwnPropertyNames(
-    win.CanvasRenderingContext2D.prototype,
-  );
-  const handlers: listenerHandler[] = [];
-  for (const prop of props) {
-    try {
-      if (
-        typeof win.CanvasRenderingContext2D.prototype[
-          prop as keyof CanvasRenderingContext2D
-        ] !== 'function'
-      ) {
-        continue;
-      }
-      const restoreHandler = patch(
-        win.CanvasRenderingContext2D.prototype,
-        prop,
-        function (original) {
-          return function (
-            this: CanvasRenderingContext2D,
-            ...args: Array<unknown>
-          ) {
-            if (!isBlocked(this.canvas, blockClass)) {
-              setTimeout(() => {
-                const recordArgs = [...args];
-                if (prop === 'drawImage') {
-                  if (
-                    recordArgs[0] &&
-                    recordArgs[0] instanceof HTMLCanvasElement
-                  ) {
-                    const canvas = recordArgs[0];
-                    const ctx = canvas.getContext('2d');
-                    let imgd = ctx?.getImageData(
-                      0,
-                      0,
-                      canvas.width,
-                      canvas.height,
-                    );
-                    let pix = imgd?.data;
-                    recordArgs[0] = JSON.stringify(pix);
-                  }
-                }
-                cb({
-                  id: mirror.getId((this.canvas as unknown) as INode),
-                  property: prop,
-                  args: recordArgs,
-                });
-              }, 0);
-            }
-            return original.apply(this, args);
-          };
-        },
-      );
-      handlers.push(restoreHandler);
-    } catch {
-      const hookHandler = hookSetter<CanvasRenderingContext2D>(
-        win.CanvasRenderingContext2D.prototype,
-        prop,
-        {
-          set(v) {
-            cb({
-              id: mirror.getId((this.canvas as unknown) as INode),
-              property: prop,
-              args: [v],
-              setter: true,
-            });
-          },
-        },
-      );
-      handlers.push(hookHandler);
-    }
-  }
-  return () => {
-    handlers.forEach((h) => h());
-  };
-}
-
 function initFontObserver(cb: fontCallback, doc: Document): listenerHandler {
   const win = doc.defaultView as IWindow;
   if (!win) {
@@ -965,6 +886,7 @@ export function initObservers(
     o.mirror,
     o.iframeManager,
     o.shadowDomManager,
+    o.canvasManager,
     o.doc,
   );
   const mousemoveHandler = initMoveObserver(
@@ -1016,14 +938,6 @@ export function initObservers(
     currentWindow,
     o.mirror,
   );
-  const canvasMutationObserver = o.recordCanvas
-    ? initCanvasMutationObserver(
-        o.canvasMutationCb,
-        currentWindow,
-        o.blockClass,
-        o.mirror,
-      )
-    : () => {};
   const fontObserver = o.collectFonts
     ? initFontObserver(o.fontCb, o.doc)
     : () => {};
@@ -1036,6 +950,7 @@ export function initObservers(
   }
 
   return () => {
+    mutationBuffers.forEach((b) => b.reset());
     mutationObserver.disconnect();
     mousemoveHandler();
     mouseInteractionHandler();
@@ -1045,7 +960,6 @@ export function initObservers(
     mediaInteractionHandler();
     styleSheetObserver();
     styleDeclarationObserver();
-    canvasMutationObserver();
     fontObserver();
     pluginHandlers.forEach((h) => h());
   };
diff --git a/packages/rrweb/src/record/observers/canvas/2d.ts b/packages/rrweb/src/record/observers/canvas/2d.ts
new file mode 100644
index 0000000000..dd63469b1e
--- /dev/null
+++ b/packages/rrweb/src/record/observers/canvas/2d.ts
@@ -0,0 +1,94 @@
+import { INode } from 'rrweb-snapshot';
+import {
+  blockClass,
+  CanvasContext,
+  canvasManagerMutationCallback,
+  IWindow,
+  listenerHandler,
+  Mirror,
+} from '../../../types';
+import { hookSetter, isBlocked, patch } from '../../../utils';
+
+export default function initCanvas2DMutationObserver(
+  cb: canvasManagerMutationCallback,
+  win: IWindow,
+  blockClass: blockClass,
+  mirror: Mirror,
+): listenerHandler {
+  const handlers: listenerHandler[] = [];
+  const props2D = Object.getOwnPropertyNames(
+    win.CanvasRenderingContext2D.prototype,
+  );
+  for (const prop of props2D) {
+    try {
+      if (
+        typeof win.CanvasRenderingContext2D.prototype[
+          prop as keyof CanvasRenderingContext2D
+        ] !== 'function'
+      ) {
+        continue;
+      }
+      const restoreHandler = patch(
+        win.CanvasRenderingContext2D.prototype,
+        prop,
+        function (original) {
+          return function (
+            this: CanvasRenderingContext2D,
+            ...args: Array<unknown>
+          ) {
+            if (!isBlocked((this.canvas as unknown) as INode, blockClass)) {
+              // Using setTimeout as getImageData + JSON.stringify can be heavy
+              // and we'd rather not block the main thread
+              setTimeout(() => {
+                const recordArgs = [...args];
+                if (prop === 'drawImage') {
+                  if (
+                    recordArgs[0] &&
+                    recordArgs[0] instanceof HTMLCanvasElement
+                  ) {
+                    const canvas = recordArgs[0];
+                    const ctx = canvas.getContext('2d');
+                    let imgd = ctx?.getImageData(
+                      0,
+                      0,
+                      canvas.width,
+                      canvas.height,
+                    );
+                    let pix = imgd?.data;
+                    recordArgs[0] = JSON.stringify(pix);
+                  }
+                }
+                cb(this.canvas, {
+                  type: CanvasContext['2D'],
+                  property: prop,
+                  args: recordArgs,
+                });
+              }, 0);
+            }
+            return original.apply(this, args);
+          };
+        },
+      );
+      handlers.push(restoreHandler);
+    } catch {
+      const hookHandler = hookSetter<CanvasRenderingContext2D>(
+        win.CanvasRenderingContext2D.prototype,
+        prop,
+        {
+          set(v) {
+            cb(this.canvas, {
+              type: CanvasContext['2D'],
+              property: prop,
+              args: [v],
+              setter: true,
+            });
+          },
+        },
+      );
+      handlers.push(hookHandler);
+    }
+  }
+  return () => {
+    handlers.forEach((h) => h());
+  };
+}
diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
new file mode 100644
index 0000000000..28baaa8505
--- /dev/null
+++ b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
@@ -0,0 +1,152 @@
+import { INode } from 'rrweb-snapshot';
+import {
+  blockClass,
+  canvasManagerMutationCallback,
+  canvasMutationCallback,
+  canvasMutationCommand,
+  canvasMutationWithType,
+  IWindow,
+  listenerHandler,
+  Mirror,
+} from '../../../types';
+import initCanvas2DMutationObserver from './2d';
+import initCanvasContextObserver from './canvas';
+import initCanvasWebGLMutationObserver from './webgl';
+
+export type RafStamps = { latestId: number; invokeId: number | null };
+
+type pendingCanvasMutationsMap = Map<
+  HTMLCanvasElement,
+  canvasMutationWithType[]
+>;
+
+export class CanvasManager {
+  private pendingCanvasMutations: pendingCanvasMutationsMap = new Map();
+  private rafStamps: RafStamps = { latestId: 0, invokeId: null };
+  private mirror: Mirror;
+
+  private mutationCb: canvasMutationCallback;
+  private resetObservers: listenerHandler;
+  private frozen: boolean = false;
+  private locked: boolean = false;
+
+  public reset() {
+    this.pendingCanvasMutations.clear();
+    this.resetObservers();
+  }
+
+  public freeze() {
+    this.frozen = true;
+  }
+
+  public unfreeze() {
+    this.frozen = false;
+  }
+
+  public lock() {
+    this.locked = true;
+  }
+
+  public unlock() {
+    this.locked = false;
+  }
+
+  constructor(options: {
+    mutationCb: canvasMutationCallback;
+    win: IWindow;
+    blockClass: blockClass;
+    mirror: Mirror;
+  }) {
+    this.mutationCb = options.mutationCb;
+    this.mirror = options.mirror;
+
+    this.initCanvasMutationObserver(options.win, options.blockClass);
+  }
+
+  private processMutation: canvasManagerMutationCallback = function (
+    target,
+    mutation,
+  ) {
+    const newFrame =
+      this.rafStamps.invokeId &&
+      this.rafStamps.latestId !== this.rafStamps.invokeId;
+    if (newFrame || !this.rafStamps.invokeId)
+      this.rafStamps.invokeId = this.rafStamps.latestId;
+
+    if (!this.pendingCanvasMutations.has(target)) {
+      this.pendingCanvasMutations.set(target, []);
+    }
+
+    this.pendingCanvasMutations.get(target)!.push(mutation);
+  };
+
+  private initCanvasMutationObserver(
+    win: IWindow,
+    blockClass: blockClass,
+  ): void {
+    this.startRAFTimestamping();
+    this.startPendingCanvasMutationFlusher();
+
+    const canvasContextReset = initCanvasContextObserver(win, blockClass);
+    const canvas2DReset = initCanvas2DMutationObserver(
+      this.processMutation.bind(this),
+      win,
+      blockClass,
+      this.mirror,
+    );
+
+    const canvasWebGL1and2Reset = initCanvasWebGLMutationObserver(
+      this.processMutation.bind(this),
+      win,
+      blockClass,
+      this.mirror,
+    );
+
+    this.resetObservers = () => {
+      canvasContextReset();
+      canvas2DReset();
+      canvasWebGL1and2Reset();
+    };
+  }
+
+  private startPendingCanvasMutationFlusher() {
+    requestAnimationFrame(() => this.flushPendingCanvasMutations());
+  }
+
+  private startRAFTimestamping() {
+    const setLatestRAFTimestamp = (timestamp: DOMHighResTimeStamp) => {
+      this.rafStamps.latestId = timestamp;
+      requestAnimationFrame(setLatestRAFTimestamp);
+    };
+    requestAnimationFrame(setLatestRAFTimestamp);
+  }
+
+  flushPendingCanvasMutations() {
+    this.pendingCanvasMutations.forEach(
+      (values: canvasMutationCommand[], canvas: HTMLCanvasElement) => {
+        const id = this.mirror.getId((canvas as unknown) as INode);
+        this.flushPendingCanvasMutationFor(canvas, id);
+      },
+    );
+    requestAnimationFrame(() => this.flushPendingCanvasMutations());
+  }
+
+  flushPendingCanvasMutationFor(canvas: HTMLCanvasElement, id: number) {
+    if (this.frozen || this.locked) {
+      return;
+    }
+
+    const valuesWithType = this.pendingCanvasMutations.get(canvas);
+    if (!valuesWithType || id === -1) return;
+
+    const values = valuesWithType.map((value) => {
+      const { type, ...rest } = value;
+      return rest;
+    });
+    const { type } = valuesWithType[0];
+
+    this.mutationCb({ id, type, commands: values });
+
+    this.pendingCanvasMutations.delete(canvas);
+  }
+}
diff --git a/packages/rrweb/src/record/observers/canvas/canvas.ts b/packages/rrweb/src/record/observers/canvas/canvas.ts
new file mode 100644
index 0000000000..437af7d5f3
--- /dev/null
+++ b/packages/rrweb/src/record/observers/canvas/canvas.ts
@@ -0,0 +1,35 @@
+import { INode, ICanvas } from 'rrweb-snapshot';
+import { blockClass, IWindow, listenerHandler } from '../../../types';
+import { isBlocked, patch } from '../../../utils';
+
+export default function initCanvasContextObserver(
+  win: IWindow,
+  blockClass: blockClass,
+): listenerHandler {
+  const handlers: listenerHandler[] = [];
+  try {
+    const restoreHandler = patch(
+      win.HTMLCanvasElement.prototype,
+      'getContext',
+      function (original) {
+        return function (
+          this: ICanvas,
+          contextType: string,
+          ...args: Array<unknown>
+        ) {
+          if (!isBlocked((this as unknown) as INode, blockClass)) {
+            if (!('__context' in this))
+              (this as ICanvas).__context = contextType;
+          }
+          return original.apply(this, [contextType, ...args]);
+        };
+      },
+    );
+    handlers.push(restoreHandler);
+  } catch {
+    console.error('failed to patch HTMLCanvasElement.prototype.getContext');
+  }
+  return () => {
+    handlers.forEach((h) => h());
+  };
+}
diff --git a/packages/rrweb/src/record/observers/canvas/serialize-args.ts b/packages/rrweb/src/record/observers/canvas/serialize-args.ts
new file mode 100644
index 0000000000..e245ee4123
--- /dev/null
+++ b/packages/rrweb/src/record/observers/canvas/serialize-args.ts
@@ -0,0 +1,166 @@
+import { encode } from 'base64-arraybuffer';
+import { IWindow, SerializedWebGlArg } from '../../../types';
+
+// TODO: unify with `replay/webgl.ts`
+type GLVarMap = Map<string, any[]>;
+const webGLVarMap: Map<
+  WebGLRenderingContext | WebGL2RenderingContext,
+  GLVarMap
+> = new Map();
+export function variableListFor(
+  ctx: WebGLRenderingContext | WebGL2RenderingContext,
+  ctor: string,
+) {
+  let contextMap = webGLVarMap.get(ctx);
+  if (!contextMap) {
+    contextMap = new Map();
+    webGLVarMap.set(ctx, contextMap);
+  }
+  if (!contextMap.has(ctor)) {
+    contextMap.set(ctor, []);
+  }
+  return contextMap.get(ctor) as any[];
+}
+
+export const saveWebGLVar = (
+  value: any,
+  win: IWindow,
+  ctx: WebGL2RenderingContext | WebGLRenderingContext,
+): number | void => {
+  if (
+    !value ||
+    !(isInstanceOfWebGLObject(value, win) || typeof value === 'object')
+  )
+    return;
+
+  const name = value.constructor.name;
+  const list = variableListFor(ctx, name);
+  let index = list.indexOf(value);
+
+  if (index === -1) {
+    index = list.length;
+    list.push(value);
+  }
+  return index;
+};
+
+// from webgl-recorder: https://github.com/evanw/webgl-recorder/blob/bef0e65596e981ee382126587e2dcbe0fc7748e2/webgl-recorder.js#L50-L77
+export function serializeArg(
+  value: any,
+  win: IWindow,
+  ctx: WebGL2RenderingContext | WebGLRenderingContext,
+): SerializedWebGlArg {
+  if (value instanceof Array) {
+    return value.map((arg) => serializeArg(arg, win, ctx));
+  } else if (value === null) {
+    return value;
+  } else if (
+    value instanceof Float32Array ||
+    value instanceof Float64Array ||
+    value instanceof Int32Array ||
+    value instanceof Uint32Array ||
+    value instanceof Uint8Array ||
+    value instanceof Uint16Array ||
+    value instanceof Int16Array ||
+    value instanceof Int8Array ||
+    value instanceof Uint8ClampedArray
+  ) {
+    const name = value.constructor.name;
+    return {
+      rr_type: name,
+      args: [Object.values(value)],
+    };
+  } else if (
+    // SharedArrayBuffer disabled on most browsers due to spectre.
+    // More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/SharedArrayBuffer
+    // value instanceof SharedArrayBuffer ||
+    value instanceof ArrayBuffer
+  ) {
+    const name = value.constructor.name as 'ArrayBuffer';
+    const base64 = encode(value);
+
+    return {
+      rr_type: name,
+      base64,
+    };
+  } else if (value instanceof DataView) {
+    const name = value.constructor.name;
+    return {
+      rr_type: name,
+      args: [
+        serializeArg(value.buffer, win, ctx),
+        value.byteOffset,
+        value.byteLength,
+      ],
+    };
+  } else if (value instanceof HTMLImageElement) {
+    const name = value.constructor.name;
+    const { src } = value;
+    return {
+      rr_type: name,
+      src,
+    };
+  } else if (value instanceof ImageData) {
+    const name = value.constructor.name;
+    return {
+      rr_type: name,
+      args: [serializeArg(value.data, win, ctx), value.width, value.height],
+    };
+  } else if (isInstanceOfWebGLObject(value, win) || typeof value === 'object') {
+    const name = value.constructor.name;
+    const index = saveWebGLVar(value, win, ctx) as number;
+
+    return {
+      rr_type: name,
+      index: index,
+    };
+  }
+
+  return value;
+}
+
+export const serializeArgs = (
+  args: Array<any>,
+  win: IWindow,
+  ctx: WebGLRenderingContext | WebGL2RenderingContext,
+) => {
+  return [...args].map((arg) => serializeArg(arg, win, ctx));
+};
+
+export const isInstanceOfWebGLObject = (
+  value: any,
+  win: IWindow,
+): value is
+  | WebGLActiveInfo
+  | WebGLBuffer
+  | WebGLFramebuffer
+  | WebGLProgram
+  | WebGLRenderbuffer
+  | WebGLShader
+  | WebGLShaderPrecisionFormat
+  | WebGLTexture
+  | WebGLUniformLocation
+  | WebGLVertexArrayObject => {
+  const webGLConstructorNames: string[] = [
+    'WebGLActiveInfo',
+    'WebGLBuffer',
+    'WebGLFramebuffer',
+    'WebGLProgram',
+    'WebGLRenderbuffer',
+    'WebGLShader',
+    'WebGLShaderPrecisionFormat',
+    'WebGLTexture',
+    'WebGLUniformLocation',
+    'WebGLVertexArrayObject',
+    // In old Chrome versions, value won't be an instanceof WebGLVertexArrayObject.
+    'WebGLVertexArrayObjectOES',
+  ];
+  const supportedWebGLConstructorNames = webGLConstructorNames.filter(
+    (name: string) => typeof win[name as keyof Window] === 'function',
+  );
+  return Boolean(
+    supportedWebGLConstructorNames.find(
+      (name: string) => value instanceof win[name as keyof Window],
+    ),
+  );
+};
diff --git a/packages/rrweb/src/record/observers/canvas/webgl.ts b/packages/rrweb/src/record/observers/canvas/webgl.ts
new file mode 100644
index 0000000000..45b03928f3
--- /dev/null
+++ b/packages/rrweb/src/record/observers/canvas/webgl.ts
@@ -0,0 +1,106 @@
+import { INode } from 'rrweb-snapshot';
+import {
+  blockClass,
+  CanvasContext,
+  canvasManagerMutationCallback,
+  canvasMutationWithType,
+  IWindow,
+  listenerHandler,
+  Mirror,
+} from '../../../types';
+import { hookSetter, isBlocked, patch } from '../../../utils';
+import { saveWebGLVar, serializeArgs } from './serialize-args';
+
+function patchGLPrototype(
+  prototype: WebGLRenderingContext | WebGL2RenderingContext,
+  type: CanvasContext,
+  cb: canvasManagerMutationCallback,
+  blockClass: blockClass,
+  mirror: Mirror,
+  win: IWindow,
+): listenerHandler[] {
+  const handlers: listenerHandler[] = [];
+
+  const props = Object.getOwnPropertyNames(prototype);
+
+  for (const prop of props) {
+    try {
+      if (typeof prototype[prop as keyof typeof prototype] !== 'function') {
+        continue;
+      }
+      const restoreHandler = patch(prototype, prop, function (original) {
+        return function (this: typeof prototype, ...args: Array<unknown>) {
+          const result = original.apply(this, args);
+          saveWebGLVar(result, win, prototype);
+          if (!isBlocked((this.canvas as unknown) as INode, blockClass)) {
+            const id = mirror.getId((this.canvas as unknown) as INode);
+
+            const recordArgs = serializeArgs([...args], win, prototype);
+            const mutation: canvasMutationWithType = {
+              type,
+              property: prop,
+              args: recordArgs,
+            };
+            // TODO: this could potentially also be an OffscreenCanvas as well as HTMLCanvasElement
+            cb(this.canvas as HTMLCanvasElement, mutation);
+          }
+
+          return result;
+        };
+      });
+      handlers.push(restoreHandler);
+    } catch {
+      const hookHandler = hookSetter<typeof prototype>(prototype, prop, {
+        set(v) {
+          // TODO: this could potentially also be an OffscreenCanvas as well as HTMLCanvasElement
+          cb(this.canvas as HTMLCanvasElement, {
+            type,
+            property: prop,
+            args: [v],
+            setter: true,
+          });
+        },
+      });
+      handlers.push(hookHandler);
+    }
+  }
+
+  return handlers;
+}
+
+export default function initCanvasWebGLMutationObserver(
+  cb: canvasManagerMutationCallback,
+  win: IWindow,
+  blockClass: blockClass,
+  mirror: Mirror,
+): listenerHandler {
+  const handlers: listenerHandler[] = [];
+
+  handlers.push(
+    ...patchGLPrototype(
+      win.WebGLRenderingContext.prototype,
+      CanvasContext.WebGL,
+      cb,
+      blockClass,
+      mirror,
+      win,
+    ),
+  );
+
+  if (typeof win.WebGL2RenderingContext !== 'undefined') {
+    handlers.push(
+      ...patchGLPrototype(
+        win.WebGL2RenderingContext.prototype,
+        CanvasContext.WebGL2,
+        cb,
+        blockClass,
+        mirror,
+        win,
+      ),
+    );
+  }
+
+  return () => {
+    handlers.forEach((h) => h());
+  };
+}
diff --git a/packages/rrweb/src/record/shadow-dom-manager.ts b/packages/rrweb/src/record/shadow-dom-manager.ts
index 6f2ed26a66..2ddaf535e8 100644
--- a/packages/rrweb/src/record/shadow-dom-manager.ts
+++ b/packages/rrweb/src/record/shadow-dom-manager.ts
@@ -14,6 +14,7 @@ import {
 } from 'rrweb-snapshot';
 import { IframeManager } from './iframe-manager';
 import { initMutationObserver, initScrollObserver } from './observer';
+import { CanvasManager } from './observers/canvas/canvas-manager';
 
 type BypassOptions = {
   blockClass: blockClass;
@@ -29,6 +30,7 @@ type BypassOptions = {
   sampling: SamplingStrategy;
   slimDOMOptions: SlimDOMOptions;
   iframeManager: IframeManager;
+  canvasManager: CanvasManager;
 };
 
 export class ShadowDomManager {
@@ -67,6 +69,7 @@ export class ShadowDomManager {
       this.mirror,
       this.bypassOptions.iframeManager,
       this,
+      this.bypassOptions.canvasManager,
       shadowRoot,
     );
     initScrollObserver(
diff --git a/packages/rrweb/src/replay/canvas/2d.ts b/packages/rrweb/src/replay/canvas/2d.ts
new file mode 100644
index 0000000000..b9fde639b3
--- /dev/null
+++ b/packages/rrweb/src/replay/canvas/2d.ts
@@ -0,0 +1,48 @@
+import { Replayer } from '../';
+import { canvasMutationCommand } from '../../types';
+
+export default function canvasMutation({
+  event,
+  mutation,
+  target,
+  imageMap,
+  errorHandler,
+}: {
+  event: Parameters<Replayer['applyIncremental']>[0];
+  mutation: canvasMutationCommand;
+  target: HTMLCanvasElement;
+  imageMap: Replayer['imageMap'];
+  errorHandler: Replayer['warnCanvasMutationFailed'];
+}): void {
+  try {
+    const ctx = ((target as unknown) as HTMLCanvasElement).getContext('2d')!;
+
+    if (mutation.setter) {
+      // skip some read-only type checks
+      // tslint:disable-next-line:no-any
+      (ctx as any)[mutation.property] = mutation.args[0];
+      return;
+    }
+    const original = ctx[
+      mutation.property as Exclude<keyof typeof ctx, 'canvas'>
+    ] as Function;
+
+    /**
+     * We have serialized the image source into base64 string during recording,
+     * which has been preloaded before replay.
+     * So we can get call drawImage SYNCHRONOUSLY which avoid some fragile cast.
+     */
+    if (
+      mutation.property === 'drawImage' &&
+      typeof mutation.args[0] === 'string'
+    ) {
+      const image = imageMap.get(event);
+      mutation.args[0] = image;
+      original.apply(ctx, mutation.args);
+    } else {
+      original.apply(ctx, mutation.args);
+    }
+  } catch (error) {
+    errorHandler(mutation, error);
+  }
+}
diff --git a/packages/rrweb/src/replay/canvas/index.ts b/packages/rrweb/src/replay/canvas/index.ts
new file mode 100644
index 0000000000..73411a2b10
--- /dev/null
+++ b/packages/rrweb/src/replay/canvas/index.ts
@@ -0,0 +1,51 @@
+import { Replayer } from '..';
+import {
+  CanvasContext,
+  canvasMutationCommand,
+  canvasMutationData,
+} from '../../types';
+import webglMutation from './webgl';
+import canvas2DMutation from './2d';
+
+export default function canvasMutation({
+  event,
+  mutation,
+  target,
+  imageMap,
+  errorHandler,
+}: {
+  event: Parameters<Replayer['applyIncremental']>[0];
+  mutation: canvasMutationData;
+  target: HTMLCanvasElement;
+  imageMap: Replayer['imageMap'];
+  errorHandler: Replayer['warnCanvasMutationFailed'];
+}): void {
+  try {
+    const mutations: canvasMutationCommand[] =
+      'commands' in mutation ? mutation.commands : [mutation];
+
+    if ([CanvasContext.WebGL, CanvasContext.WebGL2].includes(mutation.type)) {
+      return mutations.forEach((command) => {
+        webglMutation({
+          mutation: command,
+          type: mutation.type,
+          target,
+          imageMap,
+          errorHandler,
+        });
+      });
+    }
+    // default is '2d' for backwards compatibility (rrweb below 1.1.x)
+    return mutations.forEach((command) => {
+      canvas2DMutation({
+        event,
+        mutation: command,
+        target,
+        imageMap,
+        errorHandler,
+      });
+    });
+  } catch (error) {
+    errorHandler(mutation, error);
+  }
+}
diff --git a/packages/rrweb/src/replay/canvas/webgl.ts b/packages/rrweb/src/replay/canvas/webgl.ts
new file mode 100644
index 0000000000..58d323dc3d
--- /dev/null
+++ b/packages/rrweb/src/replay/canvas/webgl.ts
@@ -0,0 +1,175 @@
+import { decode } from 'base64-arraybuffer';
+import { Replayer } from '../';
+import {
+  CanvasContext,
+  canvasMutationCommand,
+  SerializedWebGlArg,
+} from '../../types';
+
+// TODO: add ability to wipe this list
+type GLVarMap = Map<string, any[]>;
+const webGLVarMap: Map<
+  WebGLRenderingContext | WebGL2RenderingContext,
+  GLVarMap
+> = new Map();
+export function variableListFor(
+  ctx: WebGLRenderingContext | WebGL2RenderingContext,
+  ctor: string,
+) {
+  let contextMap = webGLVarMap.get(ctx);
+  if (!contextMap) {
+    contextMap = new Map();
+    webGLVarMap.set(ctx, contextMap);
+  }
+  if (!contextMap.has(ctor)) {
+    contextMap.set(ctor, []);
+  }
+  return contextMap.get(ctor) as any[];
+}
+
+function getContext(
+  target: HTMLCanvasElement,
+  type: CanvasContext,
+): WebGLRenderingContext | WebGL2RenderingContext | null {
+  // Note to whomever is going to implement support for `contextAttributes`:
+  // if `preserveDrawingBuffer` is set to true,
+  // you might have to do `ctx.flush()` before every webgl canvas event
+  try {
+    if (type === CanvasContext.WebGL) {
+      return (
+        target.getContext('webgl')! || target.getContext('experimental-webgl')
+      );
+    }
+    return target.getContext('webgl2')!;
+  } catch (e) {
+    return null;
+  }
+}
+
+const WebGLVariableConstructorsNames = [
+  'WebGLActiveInfo',
+  'WebGLBuffer',
+  'WebGLFramebuffer',
+  'WebGLProgram',
+  'WebGLRenderbuffer',
+  'WebGLShader',
+  'WebGLShaderPrecisionFormat',
+  'WebGLTexture',
+  'WebGLUniformLocation',
+  'WebGLVertexArrayObject',
+];
+
+function saveToWebGLVarMap(
+  ctx: WebGLRenderingContext | WebGL2RenderingContext,
+  result: any,
+) {
+  if (!result?.constructor) return; // probably null or undefined
+
+  const { name } = result.constructor;
+  if (!WebGLVariableConstructorsNames.includes(name)) return; // not a WebGL variable
+
+  const variables = variableListFor(ctx, name);
+  if (!variables.includes(result)) variables.push(result);
+}
+
+export function deserializeArg(
+  imageMap: Replayer['imageMap'],
+  ctx: WebGLRenderingContext | WebGL2RenderingContext,
+): (arg: SerializedWebGlArg) => any {
+  return (arg: SerializedWebGlArg): any => {
+    if (arg && typeof arg === 'object' && 'rr_type' in arg) {
+      if ('index' in arg) {
+        const { rr_type: name, index } = arg;
+        return variableListFor(ctx, name)[index];
+      } else if ('args' in arg) {
+        const { rr_type: name, args } = arg;
+        const ctor = window[name as keyof Window];
+
+        return new ctor(...args.map(deserializeArg(imageMap, ctx)));
+      } else if ('base64' in arg) {
+        return decode(arg.base64);
+      } else if ('src' in arg) {
+        const image = imageMap.get(arg.src);
+        if (image) {
+          return image;
+        } else {
+          const image = new Image();
+          image.src = arg.src;
+          imageMap.set(arg.src, image);
+          return image;
+        }
+      }
+    } else if (Array.isArray(arg)) {
+      return arg.map(deserializeArg(imageMap, ctx));
+    }
+    return arg;
+  };
+}
+
+export default function webglMutation({
+  mutation,
+  target,
+  type,
+  imageMap,
+  errorHandler,
+}: {
+  mutation: canvasMutationCommand;
+  target: HTMLCanvasElement;
+  type: CanvasContext;
+  imageMap: Replayer['imageMap'];
+  errorHandler: Replayer['warnCanvasMutationFailed'];
+}): void {
+  try {
+    const ctx = getContext(target, type);
+    if (!ctx) return;
+
+    // NOTE: if `preserveDrawingBuffer` is set to true,
+    // we must flush the buffers on every new canvas event
+    // if (mutation.newFrame) ctx.flush();
+
+    if (mutation.setter) {
+      // skip some read-only type checks
+      // tslint:disable-next-line:no-any
+      (ctx as any)[mutation.property] = mutation.args[0];
+      return;
+    }
+    const original = ctx[
+      mutation.property as Exclude<keyof typeof ctx, 'canvas'>
+    ] as Function;
+
+    const args = mutation.args.map(deserializeArg(imageMap, ctx));
+    const result = original.apply(ctx, args);
+    saveToWebGLVarMap(ctx, result);
+
+    // Slows down replay considerably, only use for debugging
+    const debugMode = false;
+    if (debugMode) {
+      if (mutation.property === 'compileShader') {
+        if (!ctx.getShaderParameter(args[0], ctx.COMPILE_STATUS))
+          console.warn(
+            'something went wrong in replay',
+            ctx.getShaderInfoLog(args[0]),
+          );
+      } else if (mutation.property === 'linkProgram') {
+        ctx.validateProgram(args[0]);
+        if (!ctx.getProgramParameter(args[0], ctx.LINK_STATUS))
+          console.warn(
+            'something went wrong in replay',
+            ctx.getProgramInfoLog(args[0]),
+          );
+      }
+      const webglError = ctx.getError();
+      if (webglError !== ctx.NO_ERROR) {
+        console.warn(
+          'WEBGL ERROR',
+          webglError,
+          'on command:',
+          mutation.property,
+          ...args,
+        );
+      }
+    }
+  } catch (error) {
+    errorHandler(mutation, error);
+  }
+}
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index ed01a271c9..66e727b134 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -39,6 +39,7 @@ import {
   styleValueWithPriority,
   mouseMovePos,
   IWindow,
+  canvasMutationCommand,
 } from '../types';
 import {
   createMirror,
@@ -62,6 +63,7 @@ import {
   getNestedRule,
   getPositionsAndIndex,
 } from './virtual-styles';
+import canvasMutation from './canvas';
 
 const SKIP_TIME_THRESHOLD = 10 * 1000;
 const SKIP_TIME_INTERVAL = 5 * 1000;
@@ -120,7 +122,7 @@ export class Replayer {
   // The replayer uses the cache to speed up replay and scrubbing.
   private cache: BuildCache = createCache();
 
-  private imageMap: Map<eventWithTime, HTMLImageElement> = new Map();
+  private imageMap: Map<eventWithTime | string, HTMLImageElement> = new Map();
 
   private mirror: Mirror = createMirror();
 
@@ -810,6 +812,37 @@ export class Replayer {
     }
   }
 
+  private hasImageArg(args: any[]): boolean {
+    for (const arg of args) {
+      if (!arg || typeof arg !== 'object') {
+        // do nothing
+      } else if ('rr_type' in arg && 'args' in arg) {
+        if (this.hasImageArg(arg.args)) return true;
+      } else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') {
+        return true; // has image!
+      } else if (arg instanceof Array) {
+        if (this.hasImageArg(arg)) return true;
+      }
+    }
+    return false;
+  }
+
+  private getImageArgs(args: any[]): string[] {
+    const images: string[] = [];
+    for (const arg of args) {
+      if (!arg || typeof arg !== 'object') {
+        // do nothing
+      } else if ('rr_type' in arg && 'args' in arg) {
+        images.push(...this.getImageArgs(arg.args));
+      } else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') {
+        images.push(arg.src);
+      } else if (arg instanceof Array) {
+        images.push(...this.getImageArgs(arg));
+      }
+    }
+    return images;
+  }
+
   /**
    * pause when there are some canvas drawImage args need to be loaded
    */
@@ -823,18 +856,34 @@ export class Replayer {
     for (const event of this.service.state.context.events) {
       if (
         event.type === EventType.IncrementalSnapshot &&
-        event.data.source === IncrementalSource.CanvasMutation &&
-        event.data.property === 'drawImage' &&
-        typeof event.data.args[0] === 'string' &&
-        !this.imageMap.has(event)
-      ) {
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-        const imgd = ctx?.createImageData(canvas.width, canvas.height);
-        let d = imgd?.data;
-        d = JSON.parse(event.data.args[0]);
-        ctx?.putImageData(imgd!, 0, 0);
-      }
+        event.data.source === IncrementalSource.CanvasMutation
+      )
+        if ('commands' in event.data) {
+          event.data.commands.forEach((c) => this.preloadImages(c, event));
+        } else {
+          this.preloadImages(event.data, event);
+        }
+    }
+  }
+
+  private preloadImages(data: canvasMutationCommand, event: eventWithTime) {
+    if (
+      data.property === 'drawImage' &&
+      typeof data.args[0] === 'string' &&
+      !this.imageMap.has(event)
+    ) {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      const imgd = ctx?.createImageData(canvas.width, canvas.height);
+      let d = imgd?.data;
+      d = JSON.parse(data.args[0]);
+      ctx?.putImageData(imgd!, 0, 0);
+    } else if (this.hasImageArg(data.args)) {
+      this.getImageArgs(data.args).forEach((url) => {
+        const image = new Image();
+        image.src = url; // this preloads the image
+        this.imageMap.set(url, image);
+      });
     }
   }
 
@@ -1210,34 +1259,15 @@ export class Replayer {
         if (!target) {
           return this.debugNodeNotFound(d, d.id);
         }
-        try {
-          const ctx = ((target as unknown) as HTMLCanvasElement).getContext(
-            '2d',
-          )!;
-          if (d.setter) {
-            // skip some read-only type checks
-            // tslint:disable-next-line:no-any
-            (ctx as any)[d.property] = d.args[0];
-            return;
-          }
-          const original = ctx[
-            d.property as keyof CanvasRenderingContext2D
-          ] as Function;
-          /**
-           * We have serialized the image source into base64 string during recording,
-           * which has been preloaded before replay.
-           * So we can get call drawImage SYNCHRONOUSLY which avoid some fragile cast.
-           */
-          if (d.property === 'drawImage' && typeof d.args[0] === 'string') {
-            const image = this.imageMap.get(e);
-            d.args[0] = image;
-            original.apply(ctx, d.args);
-          } else {
-            original.apply(ctx, d.args);
-          }
-        } catch (error) {
-          this.warnCanvasMutationFailed(d, d.id, error);
-        }
+
+        canvasMutation({
+          event: e,
+          mutation: d,
+          target: (target as unknown) as HTMLCanvasElement,
+          imageMap: this.imageMap,
+          errorHandler: this.warnCanvasMutationFailed.bind(this),
+        });
+
         break;
       }
       case IncrementalSource.Font: {
@@ -1866,11 +1896,10 @@ export class Replayer {
   }
 
   private warnCanvasMutationFailed(
-    d: canvasMutationData,
-    id: number,
+    d: canvasMutationData | canvasMutationCommand,
     error: unknown,
   ) {
-    this.warn(`Has error on update canvas '${id}'`, d, error);
+    this.warn(`Has error on canvas update`, error, 'canvas mutation:', d);
   }
 
   private debugNodeNotFound(d: incrementalData, id: number) {
diff --git a/packages/rrweb/src/replay/machine.ts b/packages/rrweb/src/replay/machine.ts
index 59ec3db194..8c5ca33f9e 100644
--- a/packages/rrweb/src/replay/machine.ts
+++ b/packages/rrweb/src/replay/machine.ts
@@ -167,6 +167,7 @@ export function createPlayerService(
         play(ctx) {
           const { timer, events, baselineTime, lastPlayedEvent } = ctx;
           timer.clear();
+
           for (const event of events) {
             // TODO: improve this API
             addDelay(event, baselineTime);
diff --git a/packages/rrweb/src/replay/timer.ts b/packages/rrweb/src/replay/timer.ts
index 684c3ff06c..f6e7f82628 100644
--- a/packages/rrweb/src/replay/timer.ts
+++ b/packages/rrweb/src/replay/timer.ts
@@ -44,6 +44,7 @@ export class Timer {
       lastTimestamp = time;
       while (actions.length) {
         const action = actions[0];
+
         if (self.timeOffset >= action.delay) {
           actions.shift();
           action.doAction();
@@ -111,6 +112,7 @@ export function addDelay(event: eventWithTime, baselineTime: number): number {
     event.delay = firstTimestamp - baselineTime;
     return firstTimestamp - baselineTime;
   }
+
   event.delay = event.timestamp - baselineTime;
   return event.delay;
 }
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index 78ed5f8c44..74f8a52ffb 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -11,6 +11,7 @@ import { PackFn, UnpackFn } from './packer/base';
 import { IframeManager } from './record/iframe-manager';
 import { ShadowDomManager } from './record/shadow-dom-manager';
 import type { Replayer } from './replay';
+import { CanvasManager } from './record/observers/canvas/canvas-manager';
 
 export enum EventType {
   DomContentLoaded,
@@ -267,6 +268,7 @@ export type observerParam = {
   mirror: Mirror;
   iframeManager: IframeManager;
   shadowDomManager: ShadowDomManager;
+  canvasManager: CanvasManager;
   plugins: Array<{
     observer: Function;
     callback: Function;
@@ -386,6 +388,35 @@ export enum MouseInteractions {
   TouchCancel,
 }
 
+export enum CanvasContext {
+  '2D',
+  WebGL,
+  WebGL2,
+}
+
+export type SerializedWebGlArg =
+  | {
+      rr_type: 'ArrayBuffer';
+      base64: string; // base64
+    }
+  | {
+      rr_type: string;
+      src: string; // url of image
+    }
+  | {
+      rr_type: string;
+      args: Array<SerializedWebGlArg>;
+    }
+  | {
+      rr_type: string;
+      index: number;
+    }
+  | string
+  | number
+  | boolean
+  | null
+  | SerializedWebGlArg[];
+
 type mouseInteractionParam = {
   type: MouseInteractions;
   id: number;
@@ -435,15 +466,34 @@ export type styleDeclarationParam = {
 
 export type styleDeclarationCallback = (s: styleDeclarationParam) => void;
 
-export type canvasMutationCallback = (p: canvasMutationParam) => void;
-
-export type canvasMutationParam = {
-  id: number;
+export type canvasMutationCommand = {
   property: string;
   args: Array<unknown>;
   setter?: true;
 };
 
+export type canvasMutationParam =
+  | {
+      id: number;
+      type: CanvasContext;
+      commands: canvasMutationCommand[];
+    }
+  | ({
+      id: number;
+      type: CanvasContext;
+    } & canvasMutationCommand);
+
+export type canvasMutationWithType = {
+  type: CanvasContext;
+} & canvasMutationCommand;
+
+export type canvasMutationCallback = (p: canvasMutationParam) => void;
+
+export type canvasManagerMutationCallback = (
+  target: HTMLCanvasElement,
+  p: canvasMutationWithType,
+) => void;
+
 export type fontParam = {
   family: string;
   fontSource: string;
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index 983788b7a2..bea952c412 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -98,9 +98,21 @@ exports[`record integration tests can freeze mutations 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 14
                   },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"canvas\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"id\\": 15
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"id\\": 16
+                  },
                   {
                     \\"type\\": 2,
                     \\"tagName\\": \\"script\\",
@@ -109,15 +121,15 @@ exports[`record integration tests can freeze mutations 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 16
+                        \\"id\\": 18
                       }
                     ],
-                    \\"id\\": 15
+                    \\"id\\": 17
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\",
-                    \\"id\\": 17
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\",
+                    \\"id\\": 19
                   }
                 ],
                 \\"id\\": 5
@@ -141,7 +153,7 @@ exports[`record integration tests can freeze mutations 1`] = `
       \\"texts\\": [],
       \\"attributes\\": [
         {
-          \\"id\\": 18,
+          \\"id\\": 20,
           \\"attributes\\": {
             \\"foo\\": \\"bar\\"
           }
@@ -165,7 +177,7 @@ exports[`record integration tests can freeze mutations 1`] = `
               \\"foo\\": \\"bar\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 18
+            \\"id\\": 20
           }
         }
       ]
@@ -272,9 +284,21 @@ exports[`record integration tests can mask character data mutations 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 14
                   },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"canvas\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"id\\": 15
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"id\\": 16
+                  },
                   {
                     \\"type\\": 2,
                     \\"tagName\\": \\"script\\",
@@ -283,15 +307,15 @@ exports[`record integration tests can mask character data mutations 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 16
+                        \\"id\\": 18
                       }
                     ],
-                    \\"id\\": 15
+                    \\"id\\": 17
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\",
-                    \\"id\\": 17
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\",
+                    \\"id\\": 19
                   }
                 ],
                 \\"id\\": 5
@@ -338,16 +362,16 @@ exports[`record integration tests can mask character data mutations 1`] = `
               \\"class\\": \\"rr-mask\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 18
+            \\"id\\": 20
           }
         },
         {
-          \\"parentId\\": 18,
+          \\"parentId\\": 20,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"*** **** ****\\",
-            \\"id\\": 19
+            \\"id\\": 21
           }
         },
         {
@@ -356,7 +380,7 @@ exports[`record integration tests can mask character data mutations 1`] = `
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"*******\\",
-            \\"id\\": 20
+            \\"id\\": 22
           }
         }
       ]
@@ -463,9 +487,21 @@ exports[`record integration tests can record attribute mutation 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 14
                   },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"canvas\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"id\\": 15
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"id\\": 16
+                  },
                   {
                     \\"type\\": 2,
                     \\"tagName\\": \\"script\\",
@@ -474,15 +510,15 @@ exports[`record integration tests can record attribute mutation 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 16
+                        \\"id\\": 18
                       }
                     ],
-                    \\"id\\": 15
+                    \\"id\\": 17
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\",
-                    \\"id\\": 17
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\",
+                    \\"id\\": 19
                   }
                 ],
                 \\"id\\": 5
@@ -622,9 +658,21 @@ exports[`record integration tests can record character data muatations 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 14
                   },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"canvas\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"id\\": 15
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"id\\": 16
+                  },
                   {
                     \\"type\\": 2,
                     \\"tagName\\": \\"script\\",
@@ -633,15 +681,15 @@ exports[`record integration tests can record character data muatations 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 16
+                        \\"id\\": 18
                       }
                     ],
-                    \\"id\\": 15
+                    \\"id\\": 17
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\",
-                    \\"id\\": 17
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\",
+                    \\"id\\": 19
                   }
                 ],
                 \\"id\\": 5
@@ -681,7 +729,7 @@ exports[`record integration tests can record character data muatations 1`] = `
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"mutated\\",
-            \\"id\\": 18
+            \\"id\\": 20
           }
         }
       ]
@@ -788,9 +836,21 @@ exports[`record integration tests can record childList mutations 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 14
                   },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"canvas\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"id\\": 15
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"id\\": 16
+                  },
                   {
                     \\"type\\": 2,
                     \\"tagName\\": \\"script\\",
@@ -799,15 +859,15 @@ exports[`record integration tests can record childList mutations 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 16
+                        \\"id\\": 18
                       }
                     ],
-                    \\"id\\": 15
+                    \\"id\\": 17
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\",
-                    \\"id\\": 17
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\",
+                    \\"id\\": 19
                   }
                 ],
                 \\"id\\": 5
@@ -845,7 +905,7 @@ exports[`record integration tests can record childList mutations 1`] = `
             \\"tagName\\": \\"span\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 18
+            \\"id\\": 20
           }
         }
       ]
@@ -7315,33 +7375,28 @@ exports[`record integration tests should record canvas mutations 1`] = `
     \\"data\\": {
       \\"source\\": 9,
       \\"id\\": 16,
-      \\"property\\": \\"moveTo\\",
-      \\"args\\": [
-        0,
-        0
-      ]
-    }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 9,
-      \\"id\\": 16,
-      \\"property\\": \\"lineTo\\",
-      \\"args\\": [
-        200,
-        100
+      \\"type\\": 0,
+      \\"commands\\": [
+        {
+          \\"property\\": \\"moveTo\\",
+          \\"args\\": [
+            0,
+            0
+          ]
+        },
+        {
+          \\"property\\": \\"lineTo\\",
+          \\"args\\": [
+            200,
+            100
+          ]
+        },
+        {
+          \\"property\\": \\"stroke\\",
+          \\"args\\": []
+        }
       ]
     }
-  },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 9,
-      \\"id\\": 16,
-      \\"property\\": \\"stroke\\",
-      \\"args\\": []
-    }
   }
 ]"
 `;
@@ -9522,6 +9577,221 @@ exports[`record integration tests should record shadow DOM 1`] = `
 ]"
 `;
 
+exports[`record integration tests should record webgl canvas mutations 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 1,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {
+              \\"lang\\": \\"en\\"
+            },
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 5
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"charset\\": \\"UTF-8\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"name\\": \\"viewport\\",
+                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 8
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"title\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"canvas\\",
+                        \\"id\\": 11
+                      }
+                    ],
+                    \\"id\\": 10
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 12
+                  }
+                ],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 3,
+                \\"textContent\\": \\"\\\\n  \\",
+                \\"id\\": 13
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 15
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"canvas\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"myCanvas\\",
+                      \\"width\\": \\"200\\",
+                      \\"height\\": \\"100\\",
+                      \\"style\\": \\"border: 1px solid #000000\\"
+                    },
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"id\\": 17
+                      }
+                    ],
+                    \\"id\\": 16
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 18
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 20
+                      }
+                    ],
+                    \\"id\\": 19
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\\\n    \\",
+                    \\"id\\": 21
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 23
+                      }
+                    ],
+                    \\"id\\": 22
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 24
+                  }
+                ],
+                \\"id\\": 14
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 16,
+      \\"type\\": 1,
+      \\"commands\\": [
+        {
+          \\"property\\": \\"clearColor\\",
+          \\"args\\": [
+            1,
+            0,
+            0,
+            1
+          ]
+        },
+        {
+          \\"property\\": \\"clear\\",
+          \\"args\\": [
+            16384
+          ]
+        }
+      ]
+    }
+  }
+]"
+`;
+
 exports[`record integration tests will serialize node before record 1`] = `
 "[
   {
@@ -9620,9 +9890,21 @@ exports[`record integration tests will serialize node before record 1`] = `
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"textContent\\": \\"\\\\n  \\",
                     \\"id\\": 14
                   },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"canvas\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"id\\": 15
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"id\\": 16
+                  },
                   {
                     \\"type\\": 2,
                     \\"tagName\\": \\"script\\",
@@ -9631,15 +9913,15 @@ exports[`record integration tests will serialize node before record 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                        \\"id\\": 16
+                        \\"id\\": 18
                       }
                     ],
-                    \\"id\\": 15
+                    \\"id\\": 17
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n    \\\\n    \\",
-                    \\"id\\": 17
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\",
+                    \\"id\\": 19
                   }
                 ],
                 \\"id\\": 5
@@ -9672,29 +9954,29 @@ exports[`record integration tests will serialize node before record 1`] = `
             \\"tagName\\": \\"li\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 18
+            \\"id\\": 20
           }
         },
         {
           \\"parentId\\": 10,
-          \\"nextId\\": 18,
+          \\"nextId\\": 20,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"li\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 19
+            \\"id\\": 21
           }
         },
         {
           \\"parentId\\": 10,
-          \\"nextId\\": 19,
+          \\"nextId\\": 21,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"li\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 20
+            \\"id\\": 22
           }
         }
       ]
diff --git a/packages/rrweb/test/e2e/__image_snapshots__/webgl-test-ts-e-2-e-webgl-will-record-and-replay-a-webgl-image-1-snap.png b/packages/rrweb/test/e2e/__image_snapshots__/webgl-test-ts-e-2-e-webgl-will-record-and-replay-a-webgl-image-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..731898701b69eeca46729aa8eef2af872597d9de
GIT binary patch
literal 10913
zcmeAS@N?(olHy`uVBq!ia0y~yU~geyV6ov~1Bz6wRMrPljKx9jP7LeL$-HD>P+;(M
zaSW-L^XB%(TqQ?_w!mjwuI5PQ9ho@0fKlXOk6Xq`)ibW*b9sf>p1r$Vt*Bh~zt{fk
zj~_o~umcSOfuL`-^Y@4KLpTf%_I<0hfAhQU#=k!wzJ1$P#19oO|Mc@`rG*S1yLk&E
zL}(F9B81VP;V1!NDR>EhTnPjnLZixn!9YoXY`e;wXL>B+*FVeWm%cNDLzN-sahm~z
z<uFBo2f`9i<$%h%a2|pPF$6Z@Q<l4$y(Yb<@Z+Bn8~e<Y*VnzBU2K=h3DJ7s`W-67
z;fma=-Nz-w&-)+$JbBukXSeoc-#350=eZ2Tj)wg^6v=ix!jHFKF>bG_t>0NuXEpEt
z%jeKQu$d)ITqqz6!V*|p*UA;FzWnh|yuCcc%?~b8CtSWZxL4NJ|GfAg7&LRIL8EKU
zL+V6poXzt+6?VsVfI_6c<X`am_xj@J*VjV5aA5IHDh2!fnZ<E7^2s*f!~+fYh_k#@
zC=YIh@$a}gr}!%iG^Ny2B{oUUA$ZfqsA-_cp`-vB4PH<Pl3s9+hTCYk;jh|9Q^;rv
z8BHOeG{8V?Yj`xvjAoh9EHj#AMjN!?G(ceNV6?OxEiFe&OQh2BPu_VxF9x<I1~$E=
zS=aWj-y9&^+H9~`;Xg=CAYxnxKJ=0bAFh*x4^)jR1BI5$Xn=r%L0~k6fP%qc%4n7W
zg~MnW0t$uE!T}r#qlE(`7)A>RNH~lZ4&ZPY@hyjvr5__07`XgFYXL?JiqT3FwjyA(
zMGeXgqb+K1nJ`*uLW;)GN)sFoBfipvq=wPLVYF}<nZ3*RXU@DkXZgI08<G(i?5oPk
g%f6Sv7KYmYW;p%Cwdn1(ci`59r>mdKI;Vst0Q@>>_5c6?

literal 0
HcmV?d00001

diff --git a/packages/rrweb/test/e2e/__image_snapshots__/webgl-test-ts-e-2-e-webgl-will-record-and-replay-a-webgl-square-1-snap.png b/packages/rrweb/test/e2e/__image_snapshots__/webgl-test-ts-e-2-e-webgl-will-record-and-replay-a-webgl-square-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..e22bc48831104120ac0c4a19cd3b9f41dc62b426
GIT binary patch
literal 10812
zcmeAS@N?(olHy`uVBq!ia0y~yU~geyV6ov~1Bz6wRMrPljKx9jP7LeL$-HD>P+;(M
zaSW-L^XAUR+`|S8u8vwCOxA3k^!<a(JmusR@%{rLh7-;)F5#%ysm&_3Kk=(V-uK_N
zyg)-hAn4hg*KgklLO2X>vd>vQoAdb7--lIu=j~*Nh&If%k?S`+Ch<=I<NzS(5NctB
zuokf-LKqDijuH@-f)_qzD^9Ow-=1q-#ICYt>$!Ol9Sr{Z><@wFZ*LC!v-SLD_78`D
z-()Te+9?l_PN^`GBF1PUT`;N)9GE1>+-SIsh8zC8jX#Cx?YFA6&S3q2`}j>}NOoTE
z@~Og}YgR?jVur!`bBYN>#$k#A4}>M4$^ljF!g&ZH#1PnIFsh7!VKhL%sbDmPfP-N)
z%RtJ6(ZT^74x@#`XyGtgQ9_D@(Y!F47e@2KXkK6#Z6iSv!Dt%^91f%P!bq(bK3ttA
zJB5LVg^?%5>*|{N`1FNpT<nQ%j{g`J@xTW(onZr-r{DvcM(}aZQDvaC(=i$#pkPoK
zO(CFQXwVqVGN5o6Eki(|Fj_c(Lt(UVfCR&6;Q$GT(ZT^74x=pxa4=A@<<R~@Et7$P
z^A%_<0MKkInmlUSXloyoT1WFNC=^C>7C00}Tl=sjP@{zdC_#)C4&ZDtTJ3^^VYIam
z4hBkw0$$CXdGoI2^E-Laa^`{i`FH2u-FpWynBhUXylc0-o#vIc*B}v3S3j3^P6<r_
D<@bPr

literal 0
HcmV?d00001

diff --git a/packages/rrweb/test/e2e/webgl.test.ts b/packages/rrweb/test/e2e/webgl.test.ts
new file mode 100644
index 0000000000..2be0d33f0c
--- /dev/null
+++ b/packages/rrweb/test/e2e/webgl.test.ts
@@ -0,0 +1,175 @@
+import * as http from 'http';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as puppeteer from 'puppeteer';
+import {
+  startServer,
+  launchPuppeteer,
+  getServerURL,
+  replaceLast,
+  waitForRAF,
+} from '../utils';
+import {
+  recordOptions,
+  eventWithTime,
+  EventType,
+  IncrementalSource,
+} from '../../src/types';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+expect.extend({ toMatchImageSnapshot });
+
+interface ISuite {
+  code: string;
+  browser: puppeteer.Browser;
+  server: http.Server;
+  page: puppeteer.Page;
+  events: eventWithTime[];
+  serverURL: string;
+}
+
+describe('e2e webgl', () => {
+  let code: ISuite['code'];
+  let page: ISuite['page'];
+  let browser: ISuite['browser'];
+  let server: ISuite['server'];
+  let serverURL: ISuite['serverURL'];
+
+  beforeAll(async () => {
+    server = await startServer();
+    serverURL = getServerURL(server);
+    browser = await launchPuppeteer();
+
+    const bundlePath = path.resolve(__dirname, '../../dist/rrweb.min.js');
+    code = fs.readFileSync(bundlePath, 'utf8');
+  });
+
+  afterEach(async () => {
+    await page.close();
+  });
+
+  afterAll(async () => {
+    await server.close();
+    await browser.close();
+  });
+
+  const getHtml = (
+    fileName: string,
+    options: recordOptions<eventWithTime> = {},
+  ): string => {
+    const filePath = path.resolve(__dirname, `../html/${fileName}`);
+    const html = fs.readFileSync(filePath, 'utf8');
+    return replaceLast(
+      html,
+      '</body>',
+      `
+    <script>
+      ${code}
+      window.snapshots = [];
+      rrweb.record({
+        emit: event => {          
+          window.snapshots.push(event);
+        },
+        maskTextSelector: ${JSON.stringify(options.maskTextSelector)},
+        maskAllInputs: ${options.maskAllInputs},
+        maskInputOptions: ${JSON.stringify(options.maskAllInputs)},
+        userTriggeredOnInput: ${options.userTriggeredOnInput},
+        maskTextFn: ${options.maskTextFn},
+        recordCanvas: ${options.recordCanvas},
+        plugins: ${options.plugins}        
+      });
+    </script>
+    </body>
+    `,
+    );
+  };
+
+  const fakeGoto = async (page: puppeteer.Page, url: string) => {
+    const intercept = async (request: puppeteer.HTTPRequest) => {
+      await request.respond({
+        status: 200,
+        contentType: 'text/html',
+        body: ' ', // non-empty string or page will load indefinitely
+      });
+    };
+    await page.setRequestInterception(true);
+    page.on('request', intercept);
+    await page.goto(url);
+    page.off('request', intercept);
+    await page.setRequestInterception(false);
+  };
+
+  const hideMouseAnimation = async (page: puppeteer.Page) => {
+    await page.addStyleTag({
+      content: '.replayer-mouse-tail{display: none !important;}',
+    });
+  };
+
+  it('will record and replay a webgl square', async () => {
+    page = await browser.newPage();
+    await fakeGoto(page, `${serverURL}/html/canvas-webgl-square.html`);
+
+    await page.setContent(
+      getHtml.call(this, 'canvas-webgl-square.html', { recordCanvas: true }),
+    );
+
+    await waitForRAF(page);
+
+    const snapshots: eventWithTime[] = await page.evaluate('window.snapshots');
+
+    page = await browser.newPage();
+
+    await page.goto('about:blank');
+    await page.evaluate(code);
+
+    await hideMouseAnimation(page);
+    await page.evaluate(`let events = ${JSON.stringify(snapshots)}`);
+    await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events, {
+        UNSAFE_replayCanvas: true,
+      });
+      replayer.play(500);
+    `);
+    await page.waitForTimeout(50);
+
+    const element = await page.$('iframe');
+    const frameImage = await element!.screenshot();
+
+    expect(frameImage).toMatchImageSnapshot();
+  });
+
+  it('will record and replay a webgl image', async () => {
+    page = await browser.newPage();
+    await fakeGoto(page, `${serverURL}/html/canvas-webgl-image.html`);
+
+    await page.setContent(
+      getHtml.call(this, 'canvas-webgl-image.html', { recordCanvas: true }),
+    );
+
+    await page.waitForTimeout(100);
+    const snapshots: eventWithTime[] = await page.evaluate('window.snapshots');
+
+    page = await browser.newPage();
+
+    await page.goto('about:blank');
+    await page.evaluate(code);
+
+    await hideMouseAnimation(page);
+    await page.evaluate(`let events = ${JSON.stringify(snapshots)}`);
+    await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events, {
+        UNSAFE_replayCanvas: true,
+      });
+    `);
+    // wait for iframe to get added and `preloadAllImages` to ge called
+    await page.waitForSelector('iframe');
+    await page.evaluate(`replayer.play(500);`);
+    await page.waitForTimeout(50);
+
+    const element = await page.$('iframe');
+    const frameImage = await element!.screenshot();
+
+    expect(frameImage).toMatchImageSnapshot();
+  });
+});
diff --git a/packages/rrweb/test/events/webgl.ts b/packages/rrweb/test/events/webgl.ts
new file mode 100644
index 0000000000..513c1ade48
--- /dev/null
+++ b/packages/rrweb/test/events/webgl.ts
@@ -0,0 +1,118 @@
+export default [
+  {
+    type: 4,
+    data: {
+      href: '',
+      width: 1600,
+      height: 900,
+    },
+    timestamp: 1636379531385,
+  },
+  {
+    type: 2,
+    data: {
+      node: {
+        type: 0,
+        childNodes: [
+          { type: 1, name: 'html', publicId: '', systemId: '', id: 2 },
+          {
+            type: 2,
+            tagName: 'html',
+            attributes: { lang: 'en' },
+            childNodes: [
+              {
+                type: 2,
+                tagName: 'head',
+                attributes: {},
+                childNodes: [
+                  { type: 3, textContent: '\n    ', id: 5 },
+                  {
+                    type: 2,
+                    tagName: 'meta',
+                    attributes: { charset: 'UTF-8' },
+                    childNodes: [],
+                    id: 6,
+                  },
+                  { type: 3, textContent: '\n    ', id: 7 },
+                  {
+                    type: 2,
+                    tagName: 'meta',
+                    attributes: {
+                      name: 'viewport',
+                      content: 'width=device-width, initial-scale=1.0',
+                    },
+                    childNodes: [],
+                    id: 8,
+                  },
+                  { type: 3, textContent: '\n    ', id: 9 },
+                  {
+                    type: 2,
+                    tagName: 'title',
+                    attributes: {},
+                    childNodes: [{ type: 3, textContent: 'canvas', id: 11 }],
+                    id: 10,
+                  },
+                  { type: 3, textContent: '\n  ', id: 12 },
+                ],
+                id: 4,
+              },
+              { type: 3, textContent: '\n  ', id: 13 },
+              {
+                type: 2,
+                tagName: 'body',
+                attributes: {},
+                childNodes: [
+                  { type: 3, textContent: '\n    ', id: 15 },
+                  {
+                    type: 2,
+                    tagName: 'canvas',
+                    attributes: {
+                      id: 'myCanvas',
+                      width: '200',
+                      height: '100',
+                      style: 'border: 1px solid #000000',
+                    },
+                    childNodes: [{ type: 3, textContent: '\n    ', id: 17 }],
+                    id: 16,
+                  },
+                  { type: 3, textContent: '\n    ', id: 18 },
+                  {
+                    type: 2,
+                    tagName: 'script',
+                    attributes: {},
+                    childNodes: [
+                      { type: 3, textContent: 'SCRIPT_PLACEHOLDER', id: 20 },
+                    ],
+                    id: 19,
+                  },
+                  { type: 3, textContent: '\n  \n\n', id: 21 },
+                ],
+                id: 14,
+              },
+            ],
+            id: 3,
+          },
+        ],
+        id: 1,
+      },
+      initialOffset: { left: 0, top: 0 },
+    },
+    timestamp: 1636379531389,
+  },
+  {
+    type: 3,
+    data: {
+      source: 9,
+      id: 16,
+      type: 1,
+      property: 'clearColor',
+      args: [1, 0, 0, 1],
+    },
+    timestamp: 1636379532355,
+  },
+  {
+    type: 3,
+    data: { source: 9, id: 16, type: 1, property: 'clear', args: [16384] },
+    timestamp: 1636379532356,
+  },
+];
diff --git a/packages/rrweb/test/html/assets/webgl-utils.js b/packages/rrweb/test/html/assets/webgl-utils.js
new file mode 100644
index 0000000000..183a5acf41
--- /dev/null
+++ b/packages/rrweb/test/html/assets/webgl-utils.js
@@ -0,0 +1,1496 @@
+/*
+ * Copyright 2021 GFXFundamentals.
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of GFXFundamentals. nor the names of his
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+(function (root, factory) {
+  // eslint-disable-line
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define([], function () {
+      return factory.call(root);
+    });
+  } else {
+    // Browser globals
+    root.webglUtils = factory.call(root);
+  }
+})(this, function () {
+  'use strict';
+
+  const topWindow = this;
+
+  /** @module webgl-utils */
+
+  function isInIFrame(w) {
+    w = w || topWindow;
+    return w !== w.top;
+  }
+
+  if (!isInIFrame()) {
+    console.log(
+      '%c%s',
+      'color:blue;font-weight:bold;',
+      'for more about webgl-utils.js see:',
+    ); // eslint-disable-line
+    console.log(
+      '%c%s',
+      'color:blue;font-weight:bold;',
+      'https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html',
+    ); // eslint-disable-line
+  }
+
+  /**
+   * Wrapped logging function.
+   * @param {string} msg The message to log.
+   */
+  function error(msg) {
+    if (topWindow.console) {
+      if (topWindow.console.error) {
+        topWindow.console.error(msg);
+      } else if (topWindow.console.log) {
+        topWindow.console.log(msg);
+      }
+    }
+  }
+
+  /**
+   * Error Callback
+   * @callback ErrorCallback
+   * @param {string} msg error message.
+   * @memberOf module:webgl-utils
+   */
+
+  /**
+   * Loads a shader.
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
+   * @param {string} shaderSource The shader source.
+   * @param {number} shaderType The type of shader.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors.
+   * @return {WebGLShader} The created shader.
+   */
+  function loadShader(gl, shaderSource, shaderType, opt_errorCallback) {
+    const errFn = opt_errorCallback || error;
+    // Create the shader object
+    const shader = gl.createShader(shaderType);
+
+    // Load the shader source
+    gl.shaderSource(shader, shaderSource);
+
+    // Compile the shader
+    gl.compileShader(shader);
+
+    // Check the compile status
+    const compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+    if (!compiled) {
+      // Something went wrong during compilation; get the error
+      const lastError = gl.getShaderInfoLog(shader);
+      errFn(
+        "*** Error compiling shader '" +
+          shader +
+          "':" +
+          lastError +
+          `\n` +
+          shaderSource
+            .split('\n')
+            .map((l, i) => `${i + 1}: ${l}`)
+            .join('\n'),
+      );
+      gl.deleteShader(shader);
+      return null;
+    }
+
+    return shader;
+  }
+
+  /**
+   * Creates a program, attaches shaders, binds attrib locations, links the
+   * program and calls useProgram.
+   * @param {WebGLShader[]} shaders The shaders to attach
+   * @param {string[]} [opt_attribs] An array of attribs names. Locations will be assigned by index if not passed in
+   * @param {number[]} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors. By default it just prints an error to the console
+   *        on error. If you want something else pass an callback. It's passed an error message.
+   * @memberOf module:webgl-utils
+   */
+  function createProgram(
+    gl,
+    shaders,
+    opt_attribs,
+    opt_locations,
+    opt_errorCallback,
+  ) {
+    const errFn = opt_errorCallback || error;
+    const program = gl.createProgram();
+    shaders.forEach(function (shader) {
+      gl.attachShader(program, shader);
+    });
+    if (opt_attribs) {
+      opt_attribs.forEach(function (attrib, ndx) {
+        gl.bindAttribLocation(
+          program,
+          opt_locations ? opt_locations[ndx] : ndx,
+          attrib,
+        );
+      });
+    }
+    gl.linkProgram(program);
+
+    // Check the link status
+    const linked = gl.getProgramParameter(program, gl.LINK_STATUS);
+    if (!linked) {
+      // something went wrong with the link
+      const lastError = gl.getProgramInfoLog(program);
+      errFn('Error in program linking:' + lastError);
+
+      gl.deleteProgram(program);
+      return null;
+    }
+    return program;
+  }
+
+  /**
+   * Loads a shader from a script tag.
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
+   * @param {string} scriptId The id of the script tag.
+   * @param {number} opt_shaderType The type of shader. If not passed in it will
+   *     be derived from the type of the script tag.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors.
+   * @return {WebGLShader} The created shader.
+   */
+  function createShaderFromScript(
+    gl,
+    scriptId,
+    opt_shaderType,
+    opt_errorCallback,
+  ) {
+    let shaderSource = '';
+    let shaderType;
+    const shaderScript = document.getElementById(scriptId);
+    if (!shaderScript) {
+      throw '*** Error: unknown script element' + scriptId;
+    }
+    shaderSource = shaderScript.text;
+
+    if (!opt_shaderType) {
+      if (shaderScript.type === 'x-shader/x-vertex') {
+        shaderType = gl.VERTEX_SHADER;
+      } else if (shaderScript.type === 'x-shader/x-fragment') {
+        shaderType = gl.FRAGMENT_SHADER;
+      } else if (
+        shaderType !== gl.VERTEX_SHADER &&
+        shaderType !== gl.FRAGMENT_SHADER
+      ) {
+        throw '*** Error: unknown shader type';
+      }
+    }
+
+    return loadShader(
+      gl,
+      shaderSource,
+      opt_shaderType ? opt_shaderType : shaderType,
+      opt_errorCallback,
+    );
+  }
+
+  const defaultShaderType = ['VERTEX_SHADER', 'FRAGMENT_SHADER'];
+
+  /**
+   * Creates a program from 2 script tags.
+   *
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext
+   *        to use.
+   * @param {string[]} shaderScriptIds Array of ids of the script
+   *        tags for the shaders. The first is assumed to be the
+   *        vertex shader, the second the fragment shader.
+   * @param {string[]} [opt_attribs] An array of attribs names. Locations will be assigned by index if not passed in
+   * @param {number[]} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors. By default it just prints an error to the console
+   *        on error. If you want something else pass an callback. It's passed an error message.
+   * @return {WebGLProgram} The created program.
+   * @memberOf module:webgl-utils
+   */
+  function createProgramFromScripts(
+    gl,
+    shaderScriptIds,
+    opt_attribs,
+    opt_locations,
+    opt_errorCallback,
+  ) {
+    const shaders = [];
+    for (let ii = 0; ii < shaderScriptIds.length; ++ii) {
+      shaders.push(
+        createShaderFromScript(
+          gl,
+          shaderScriptIds[ii],
+          gl[defaultShaderType[ii]],
+          opt_errorCallback,
+        ),
+      );
+    }
+    return createProgram(
+      gl,
+      shaders,
+      opt_attribs,
+      opt_locations,
+      opt_errorCallback,
+    );
+  }
+
+  /**
+   * Creates a program from 2 sources.
+   *
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext
+   *        to use.
+   * @param {string[]} shaderSourcess Array of sources for the
+   *        shaders. The first is assumed to be the vertex shader,
+   *        the second the fragment shader.
+   * @param {string[]} [opt_attribs] An array of attribs names. Locations will be assigned by index if not passed in
+   * @param {number[]} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors. By default it just prints an error to the console
+   *        on error. If you want something else pass an callback. It's passed an error message.
+   * @return {WebGLProgram} The created program.
+   * @memberOf module:webgl-utils
+   */
+  function createProgramFromSources(
+    gl,
+    shaderSources,
+    opt_attribs,
+    opt_locations,
+    opt_errorCallback,
+  ) {
+    const shaders = [];
+    for (let ii = 0; ii < shaderSources.length; ++ii) {
+      shaders.push(
+        loadShader(
+          gl,
+          shaderSources[ii],
+          gl[defaultShaderType[ii]],
+          opt_errorCallback,
+        ),
+      );
+    }
+    return createProgram(
+      gl,
+      shaders,
+      opt_attribs,
+      opt_locations,
+      opt_errorCallback,
+    );
+  }
+
+  /**
+   * Returns the corresponding bind point for a given sampler type
+   */
+  function getBindPointForSamplerType(gl, type) {
+    if (type === gl.SAMPLER_2D) return gl.TEXTURE_2D; // eslint-disable-line
+    if (type === gl.SAMPLER_CUBE) return gl.TEXTURE_CUBE_MAP; // eslint-disable-line
+    return undefined;
+  }
+
+  /**
+   * @typedef {Object.<string, function>} Setters
+   */
+
+  /**
+   * Creates setter functions for all uniforms of a shader
+   * program.
+   *
+   * @see {@link module:webgl-utils.setUniforms}
+   *
+   * @param {WebGLProgram} program the program to create setters for.
+   * @returns {Object.<string, function>} an object with a setter by name for each uniform
+   * @memberOf module:webgl-utils
+   */
+  function createUniformSetters(gl, program) {
+    let textureUnit = 0;
+
+    /**
+     * Creates a setter for a uniform of the given program with it's
+     * location embedded in the setter.
+     * @param {WebGLProgram} program
+     * @param {WebGLUniformInfo} uniformInfo
+     * @returns {function} the created setter.
+     */
+    function createUniformSetter(program, uniformInfo) {
+      const location = gl.getUniformLocation(program, uniformInfo.name);
+      const type = uniformInfo.type;
+      // Check if this uniform is an array
+      const isArray =
+        uniformInfo.size > 1 && uniformInfo.name.substr(-3) === '[0]';
+      if (type === gl.FLOAT && isArray) {
+        return function (v) {
+          gl.uniform1fv(location, v);
+        };
+      }
+      if (type === gl.FLOAT) {
+        return function (v) {
+          gl.uniform1f(location, v);
+        };
+      }
+      if (type === gl.FLOAT_VEC2) {
+        return function (v) {
+          gl.uniform2fv(location, v);
+        };
+      }
+      if (type === gl.FLOAT_VEC3) {
+        return function (v) {
+          gl.uniform3fv(location, v);
+        };
+      }
+      if (type === gl.FLOAT_VEC4) {
+        return function (v) {
+          gl.uniform4fv(location, v);
+        };
+      }
+      if (type === gl.INT && isArray) {
+        return function (v) {
+          gl.uniform1iv(location, v);
+        };
+      }
+      if (type === gl.INT) {
+        return function (v) {
+          gl.uniform1i(location, v);
+        };
+      }
+      if (type === gl.INT_VEC2) {
+        return function (v) {
+          gl.uniform2iv(location, v);
+        };
+      }
+      if (type === gl.INT_VEC3) {
+        return function (v) {
+          gl.uniform3iv(location, v);
+        };
+      }
+      if (type === gl.INT_VEC4) {
+        return function (v) {
+          gl.uniform4iv(location, v);
+        };
+      }
+      if (type === gl.BOOL) {
+        return function (v) {
+          gl.uniform1iv(location, v);
+        };
+      }
+      if (type === gl.BOOL_VEC2) {
+        return function (v) {
+          gl.uniform2iv(location, v);
+        };
+      }
+      if (type === gl.BOOL_VEC3) {
+        return function (v) {
+          gl.uniform3iv(location, v);
+        };
+      }
+      if (type === gl.BOOL_VEC4) {
+        return function (v) {
+          gl.uniform4iv(location, v);
+        };
+      }
+      if (type === gl.FLOAT_MAT2) {
+        return function (v) {
+          gl.uniformMatrix2fv(location, false, v);
+        };
+      }
+      if (type === gl.FLOAT_MAT3) {
+        return function (v) {
+          gl.uniformMatrix3fv(location, false, v);
+        };
+      }
+      if (type === gl.FLOAT_MAT4) {
+        return function (v) {
+          gl.uniformMatrix4fv(location, false, v);
+        };
+      }
+      if ((type === gl.SAMPLER_2D || type === gl.SAMPLER_CUBE) && isArray) {
+        const units = [];
+        for (let ii = 0; ii < info.size; ++ii) {
+          units.push(textureUnit++);
+        }
+        return (function (bindPoint, units) {
+          return function (textures) {
+            gl.uniform1iv(location, units);
+            textures.forEach(function (texture, index) {
+              gl.activeTexture(gl.TEXTURE0 + units[index]);
+              gl.bindTexture(bindPoint, texture);
+            });
+          };
+        })(getBindPointForSamplerType(gl, type), units);
+      }
+      if (type === gl.SAMPLER_2D || type === gl.SAMPLER_CUBE) {
+        return (function (bindPoint, unit) {
+          return function (texture) {
+            gl.uniform1i(location, unit);
+            gl.activeTexture(gl.TEXTURE0 + unit);
+            gl.bindTexture(bindPoint, texture);
+          };
+        })(getBindPointForSamplerType(gl, type), textureUnit++);
+      }
+      throw 'unknown type: 0x' + type.toString(16); // we should never get here.
+    }
+
+    const uniformSetters = {};
+    const numUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+
+    for (let ii = 0; ii < numUniforms; ++ii) {
+      const uniformInfo = gl.getActiveUniform(program, ii);
+      if (!uniformInfo) {
+        break;
+      }
+      let name = uniformInfo.name;
+      // remove the array suffix.
+      if (name.substr(-3) === '[0]') {
+        name = name.substr(0, name.length - 3);
+      }
+      const setter = createUniformSetter(program, uniformInfo);
+      uniformSetters[name] = setter;
+    }
+    return uniformSetters;
+  }
+
+  /**
+   * Set uniforms and binds related textures.
+   *
+   * Example:
+   *
+   *     let programInfo = createProgramInfo(
+   *         gl, ["some-vs", "some-fs"]);
+   *
+   *     let tex1 = gl.createTexture();
+   *     let tex2 = gl.createTexture();
+   *
+   *     ... assume we setup the textures with data ...
+   *
+   *     let uniforms = {
+   *       u_someSampler: tex1,
+   *       u_someOtherSampler: tex2,
+   *       u_someColor: [1,0,0,1],
+   *       u_somePosition: [0,1,1],
+   *       u_someMatrix: [
+   *         1,0,0,0,
+   *         0,1,0,0,
+   *         0,0,1,0,
+   *         0,0,0,0,
+   *       ],
+   *     };
+   *
+   *     gl.useProgram(program);
+   *
+   * This will automatically bind the textures AND set the
+   * uniforms.
+   *
+   *     setUniforms(programInfo.uniformSetters, uniforms);
+   *
+   * For the example above it is equivalent to
+   *
+   *     let texUnit = 0;
+   *     gl.activeTexture(gl.TEXTURE0 + texUnit);
+   *     gl.bindTexture(gl.TEXTURE_2D, tex1);
+   *     gl.uniform1i(u_someSamplerLocation, texUnit++);
+   *     gl.activeTexture(gl.TEXTURE0 + texUnit);
+   *     gl.bindTexture(gl.TEXTURE_2D, tex2);
+   *     gl.uniform1i(u_someSamplerLocation, texUnit++);
+   *     gl.uniform4fv(u_someColorLocation, [1, 0, 0, 1]);
+   *     gl.uniform3fv(u_somePositionLocation, [0, 1, 1]);
+   *     gl.uniformMatrix4fv(u_someMatrix, false, [
+   *         1,0,0,0,
+   *         0,1,0,0,
+   *         0,0,1,0,
+   *         0,0,0,0,
+   *       ]);
+   *
+   * Note it is perfectly reasonable to call `setUniforms` multiple times. For example
+   *
+   *     let uniforms = {
+   *       u_someSampler: tex1,
+   *       u_someOtherSampler: tex2,
+   *     };
+   *
+   *     let moreUniforms {
+   *       u_someColor: [1,0,0,1],
+   *       u_somePosition: [0,1,1],
+   *       u_someMatrix: [
+   *         1,0,0,0,
+   *         0,1,0,0,
+   *         0,0,1,0,
+   *         0,0,0,0,
+   *       ],
+   *     };
+   *
+   *     setUniforms(programInfo.uniformSetters, uniforms);
+   *     setUniforms(programInfo.uniformSetters, moreUniforms);
+   *
+   * @param {Object.<string, function>|module:webgl-utils.ProgramInfo} setters the setters returned from
+   *        `createUniformSetters` or a ProgramInfo from {@link module:webgl-utils.createProgramInfo}.
+   * @param {Object.<string, value>} an object with values for the
+   *        uniforms.
+   * @memberOf module:webgl-utils
+   */
+  function setUniforms(setters, ...values) {
+    setters = setters.uniformSetters || setters;
+    for (const uniforms of values) {
+      Object.keys(uniforms).forEach(function (name) {
+        const setter = setters[name];
+        if (setter) {
+          setter(uniforms[name]);
+        }
+      });
+    }
+  }
+
+  /**
+   * Creates setter functions for all attributes of a shader
+   * program. You can pass this to {@link module:webgl-utils.setBuffersAndAttributes} to set all your buffers and attributes.
+   *
+   * @see {@link module:webgl-utils.setAttributes} for example
+   * @param {WebGLProgram} program the program to create setters for.
+   * @return {Object.<string, function>} an object with a setter for each attribute by name.
+   * @memberOf module:webgl-utils
+   */
+  function createAttributeSetters(gl, program) {
+    const attribSetters = {};
+
+    function createAttribSetter(index) {
+      return function (b) {
+        if (b.value) {
+          gl.disableVertexAttribArray(index);
+          switch (b.value.length) {
+            case 4:
+              gl.vertexAttrib4fv(index, b.value);
+              break;
+            case 3:
+              gl.vertexAttrib3fv(index, b.value);
+              break;
+            case 2:
+              gl.vertexAttrib2fv(index, b.value);
+              break;
+            case 1:
+              gl.vertexAttrib1fv(index, b.value);
+              break;
+            default:
+              throw new Error(
+                'the length of a float constant value must be between 1 and 4!',
+              );
+          }
+        } else {
+          gl.bindBuffer(gl.ARRAY_BUFFER, b.buffer);
+          gl.enableVertexAttribArray(index);
+          gl.vertexAttribPointer(
+            index,
+            b.numComponents || b.size,
+            b.type || gl.FLOAT,
+            b.normalize || false,
+            b.stride || 0,
+            b.offset || 0,
+          );
+        }
+      };
+    }
+
+    const numAttribs = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
+    for (let ii = 0; ii < numAttribs; ++ii) {
+      const attribInfo = gl.getActiveAttrib(program, ii);
+      if (!attribInfo) {
+        break;
+      }
+      const index = gl.getAttribLocation(program, attribInfo.name);
+      attribSetters[attribInfo.name] = createAttribSetter(index);
+    }
+
+    return attribSetters;
+  }
+
+  /**
+   * Sets attributes and binds buffers (deprecated... use {@link module:webgl-utils.setBuffersAndAttributes})
+   *
+   * Example:
+   *
+   *     let program = createProgramFromScripts(
+   *         gl, ["some-vs", "some-fs"]);
+   *
+   *     let attribSetters = createAttributeSetters(program);
+   *
+   *     let positionBuffer = gl.createBuffer();
+   *     let texcoordBuffer = gl.createBuffer();
+   *
+   *     let attribs = {
+   *       a_position: {buffer: positionBuffer, numComponents: 3},
+   *       a_texcoord: {buffer: texcoordBuffer, numComponents: 2},
+   *     };
+   *
+   *     gl.useProgram(program);
+   *
+   * This will automatically bind the buffers AND set the
+   * attributes.
+   *
+   *     setAttributes(attribSetters, attribs);
+   *
+   * Properties of attribs. For each attrib you can add
+   * properties:
+   *
+   * *   type: the type of data in the buffer. Default = gl.FLOAT
+   * *   normalize: whether or not to normalize the data. Default = false
+   * *   stride: the stride. Default = 0
+   * *   offset: offset into the buffer. Default = 0
+   *
+   * For example if you had 3 value float positions, 2 value
+   * float texcoord and 4 value uint8 colors you'd setup your
+   * attribs like this
+   *
+   *     let attribs = {
+   *       a_position: {buffer: positionBuffer, numComponents: 3},
+   *       a_texcoord: {buffer: texcoordBuffer, numComponents: 2},
+   *       a_color: {
+   *         buffer: colorBuffer,
+   *         numComponents: 4,
+   *         type: gl.UNSIGNED_BYTE,
+   *         normalize: true,
+   *       },
+   *     };
+   *
+   * @param {Object.<string, function>|model:webgl-utils.ProgramInfo} setters Attribute setters as returned from createAttributeSetters or a ProgramInfo as returned {@link module:webgl-utils.createProgramInfo}
+   * @param {Object.<string, module:webgl-utils.AttribInfo>} attribs AttribInfos mapped by attribute name.
+   * @memberOf module:webgl-utils
+   * @deprecated use {@link module:webgl-utils.setBuffersAndAttributes}
+   */
+  function setAttributes(setters, attribs) {
+    setters = setters.attribSetters || setters;
+    Object.keys(attribs).forEach(function (name) {
+      const setter = setters[name];
+      if (setter) {
+        setter(attribs[name]);
+      }
+    });
+  }
+
+  /**
+   * Creates a vertex array object and then sets the attributes
+   * on it
+   *
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext
+   *        to use.
+   * @param {Object.<string, function>} setters Attribute setters as returned from createAttributeSetters
+   * @param {Object.<string, module:webgl-utils.AttribInfo>} attribs AttribInfos mapped by attribute name.
+   * @param {WebGLBuffer} [indices] an optional ELEMENT_ARRAY_BUFFER of indices
+   */
+  function createVAOAndSetAttributes(gl, setters, attribs, indices) {
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    setAttributes(setters, attribs);
+    if (indices) {
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indices);
+    }
+    // We unbind this because otherwise any change to ELEMENT_ARRAY_BUFFER
+    // like when creating buffers for other stuff will mess up this VAO's binding
+    gl.bindVertexArray(null);
+    return vao;
+  }
+
+  /**
+   * Creates a vertex array object and then sets the attributes
+   * on it
+   *
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext
+   *        to use.
+   * @param {Object.<string, function>| module:webgl-utils.ProgramInfo} programInfo as returned from createProgramInfo or Attribute setters as returned from createAttributeSetters
+   * @param {module:webgl-utils:BufferInfo} bufferInfo BufferInfo as returned from createBufferInfoFromArrays etc...
+   * @param {WebGLBuffer} [indices] an optional ELEMENT_ARRAY_BUFFER of indices
+   */
+  function createVAOFromBufferInfo(gl, programInfo, bufferInfo) {
+    return createVAOAndSetAttributes(
+      gl,
+      programInfo.attribSetters || programInfo,
+      bufferInfo.attribs,
+      bufferInfo.indices,
+    );
+  }
+
+  /**
+   * @typedef {Object} ProgramInfo
+   * @property {WebGLProgram} program A shader program
+   * @property {Object<string, function>} uniformSetters: object of setters as returned from createUniformSetters,
+   * @property {Object<string, function>} attribSetters: object of setters as returned from createAttribSetters,
+   * @memberOf module:webgl-utils
+   */
+
+  /**
+   * Creates a ProgramInfo from 2 sources.
+   *
+   * A ProgramInfo contains
+   *
+   *     programInfo = {
+   *        program: WebGLProgram,
+   *        uniformSetters: object of setters as returned from createUniformSetters,
+   *        attribSetters: object of setters as returned from createAttribSetters,
+   *     }
+   *
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext
+   *        to use.
+   * @param {string[]} shaderSourcess Array of sources for the
+   *        shaders or ids. The first is assumed to be the vertex shader,
+   *        the second the fragment shader.
+   * @param {string[]} [opt_attribs] An array of attribs names. Locations will be assigned by index if not passed in
+   * @param {number[]} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors. By default it just prints an error to the console
+   *        on error. If you want something else pass an callback. It's passed an error message.
+   * @return {module:webgl-utils.ProgramInfo} The created program.
+   * @memberOf module:webgl-utils
+   */
+  function createProgramInfo(
+    gl,
+    shaderSources,
+    opt_attribs,
+    opt_locations,
+    opt_errorCallback,
+  ) {
+    shaderSources = shaderSources.map(function (source) {
+      const script = document.getElementById(source);
+      return script ? script.text : source;
+    });
+    const program = webglUtils.createProgramFromSources(
+      gl,
+      shaderSources,
+      opt_attribs,
+      opt_locations,
+      opt_errorCallback,
+    );
+    if (!program) {
+      return null;
+    }
+    const uniformSetters = createUniformSetters(gl, program);
+    const attribSetters = createAttributeSetters(gl, program);
+    return {
+      program: program,
+      uniformSetters: uniformSetters,
+      attribSetters: attribSetters,
+    };
+  }
+
+  /**
+   * Sets attributes and buffers including the `ELEMENT_ARRAY_BUFFER` if appropriate
+   *
+   * Example:
+   *
+   *     let programInfo = createProgramInfo(
+   *         gl, ["some-vs", "some-fs"]);
+   *
+   *     let arrays = {
+   *       position: { numComponents: 3, data: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0], },
+   *       texcoord: { numComponents: 2, data: [0, 0, 0, 1, 1, 0, 1, 1],                 },
+   *     };
+   *
+   *     let bufferInfo = createBufferInfoFromArrays(gl, arrays);
+   *
+   *     gl.useProgram(programInfo.program);
+   *
+   * This will automatically bind the buffers AND set the
+   * attributes.
+   *
+   *     setBuffersAndAttributes(programInfo.attribSetters, bufferInfo);
+   *
+   * For the example above it is equivilent to
+   *
+   *     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+   *     gl.enableVertexAttribArray(a_positionLocation);
+   *     gl.vertexAttribPointer(a_positionLocation, 3, gl.FLOAT, false, 0, 0);
+   *     gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
+   *     gl.enableVertexAttribArray(a_texcoordLocation);
+   *     gl.vertexAttribPointer(a_texcoordLocation, 4, gl.FLOAT, false, 0, 0);
+   *
+   * @param {WebGLRenderingContext} gl A WebGLRenderingContext.
+   * @param {Object.<string, function>} setters Attribute setters as returned from `createAttributeSetters`
+   * @param {module:webgl-utils.BufferInfo} buffers a BufferInfo as returned from `createBufferInfoFromArrays`.
+   * @memberOf module:webgl-utils
+   */
+  function setBuffersAndAttributes(gl, setters, buffers) {
+    setAttributes(setters, buffers.attribs);
+    if (buffers.indices) {
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);
+    }
+  }
+
+  // Add your prefix here.
+  const browserPrefixes = ['', 'MOZ_', 'OP_', 'WEBKIT_'];
+
+  /**
+   * Given an extension name like WEBGL_compressed_texture_s3tc
+   * returns the supported version extension, like
+   * WEBKIT_WEBGL_compressed_teture_s3tc
+   * @param {string} name Name of extension to look for
+   * @return {WebGLExtension} The extension or undefined if not
+   *     found.
+   * @memberOf module:webgl-utils
+   */
+  function getExtensionWithKnownPrefixes(gl, name) {
+    for (let ii = 0; ii < browserPrefixes.length; ++ii) {
+      const prefixedName = browserPrefixes[ii] + name;
+      const ext = gl.getExtension(prefixedName);
+      if (ext) {
+        return ext;
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Resize a canvas to match the size its displayed.
+   * @param {HTMLCanvasElement} canvas The canvas to resize.
+   * @param {number} [multiplier] amount to multiply by.
+   *    Pass in window.devicePixelRatio for native pixels.
+   * @return {boolean} true if the canvas was resized.
+   * @memberOf module:webgl-utils
+   */
+  function resizeCanvasToDisplaySize(canvas, multiplier) {
+    multiplier = multiplier || 1;
+    const width = (canvas.clientWidth * multiplier) | 0;
+    const height = (canvas.clientHeight * multiplier) | 0;
+    if (canvas.width !== width || canvas.height !== height) {
+      canvas.width = width;
+      canvas.height = height;
+      return true;
+    }
+    return false;
+  }
+
+  // Add `push` to a typed array. It just keeps a 'cursor'
+  // and allows use to `push` values into the array so we
+  // don't have to manually compute offsets
+  function augmentTypedArray(typedArray, numComponents) {
+    let cursor = 0;
+    typedArray.push = function () {
+      for (let ii = 0; ii < arguments.length; ++ii) {
+        const value = arguments[ii];
+        if (
+          value instanceof Array ||
+          (value.buffer && value.buffer instanceof ArrayBuffer)
+        ) {
+          for (let jj = 0; jj < value.length; ++jj) {
+            typedArray[cursor++] = value[jj];
+          }
+        } else {
+          typedArray[cursor++] = value;
+        }
+      }
+    };
+    typedArray.reset = function (opt_index) {
+      cursor = opt_index || 0;
+    };
+    typedArray.numComponents = numComponents;
+    Object.defineProperty(typedArray, 'numElements', {
+      get: function () {
+        return (this.length / this.numComponents) | 0;
+      },
+    });
+    return typedArray;
+  }
+
+  /**
+   * creates a typed array with a `push` function attached
+   * so that you can easily *push* values.
+   *
+   * `push` can take multiple arguments. If an argument is an array each element
+   * of the array will be added to the typed array.
+   *
+   * Example:
+   *
+   *     let array = createAugmentedTypedArray(3, 2);  // creates a Float32Array with 6 values
+   *     array.push(1, 2, 3);
+   *     array.push([4, 5, 6]);
+   *     // array now contains [1, 2, 3, 4, 5, 6]
+   *
+   * Also has `numComponents` and `numElements` properties.
+   *
+   * @param {number} numComponents number of components
+   * @param {number} numElements number of elements. The total size of the array will be `numComponents * numElements`.
+   * @param {constructor} opt_type A constructor for the type. Default = `Float32Array`.
+   * @return {ArrayBuffer} A typed array.
+   * @memberOf module:webgl-utils
+   */
+  function createAugmentedTypedArray(numComponents, numElements, opt_type) {
+    const Type = opt_type || Float32Array;
+    return augmentTypedArray(
+      new Type(numComponents * numElements),
+      numComponents,
+    );
+  }
+
+  function createBufferFromTypedArray(gl, array, type, drawType) {
+    type = type || gl.ARRAY_BUFFER;
+    const buffer = gl.createBuffer();
+    gl.bindBuffer(type, buffer);
+    gl.bufferData(type, array, drawType || gl.STATIC_DRAW);
+    return buffer;
+  }
+
+  function allButIndices(name) {
+    return name !== 'indices';
+  }
+
+  function createMapping(obj) {
+    const mapping = {};
+    Object.keys(obj)
+      .filter(allButIndices)
+      .forEach(function (key) {
+        mapping['a_' + key] = key;
+      });
+    return mapping;
+  }
+
+  function getGLTypeForTypedArray(gl, typedArray) {
+    if (typedArray instanceof Int8Array) {
+      return gl.BYTE;
+    } // eslint-disable-line
+    if (typedArray instanceof Uint8Array) {
+      return gl.UNSIGNED_BYTE;
+    } // eslint-disable-line
+    if (typedArray instanceof Int16Array) {
+      return gl.SHORT;
+    } // eslint-disable-line
+    if (typedArray instanceof Uint16Array) {
+      return gl.UNSIGNED_SHORT;
+    } // eslint-disable-line
+    if (typedArray instanceof Int32Array) {
+      return gl.INT;
+    } // eslint-disable-line
+    if (typedArray instanceof Uint32Array) {
+      return gl.UNSIGNED_INT;
+    } // eslint-disable-line
+    if (typedArray instanceof Float32Array) {
+      return gl.FLOAT;
+    } // eslint-disable-line
+    throw 'unsupported typed array type';
+  }
+
+  // This is really just a guess. Though I can't really imagine using
+  // anything else? Maybe for some compression?
+  function getNormalizationForTypedArray(typedArray) {
+    if (typedArray instanceof Int8Array) {
+      return true;
+    } // eslint-disable-line
+    if (typedArray instanceof Uint8Array) {
+      return true;
+    } // eslint-disable-line
+    return false;
+  }
+
+  function isArrayBuffer(a) {
+    return a.buffer && a.buffer instanceof ArrayBuffer;
+  }
+
+  function guessNumComponentsFromName(name, length) {
+    let numComponents;
+    if (name.indexOf('coord') >= 0) {
+      numComponents = 2;
+    } else if (name.indexOf('color') >= 0) {
+      numComponents = 4;
+    } else {
+      numComponents = 3; // position, normals, indices ...
+    }
+
+    if (length % numComponents > 0) {
+      throw 'can not guess numComponents. You should specify it.';
+    }
+
+    return numComponents;
+  }
+
+  function makeTypedArray(array, name) {
+    if (isArrayBuffer(array)) {
+      return array;
+    }
+
+    if (array.data && isArrayBuffer(array.data)) {
+      return array.data;
+    }
+
+    if (Array.isArray(array)) {
+      array = {
+        data: array,
+      };
+    }
+
+    if (!array.numComponents) {
+      array.numComponents = guessNumComponentsFromName(name, array.length);
+    }
+
+    let type = array.type;
+    if (!type) {
+      if (name === 'indices') {
+        type = Uint16Array;
+      }
+    }
+    const typedArray = createAugmentedTypedArray(
+      array.numComponents,
+      (array.data.length / array.numComponents) | 0,
+      type,
+    );
+    typedArray.push(array.data);
+    return typedArray;
+  }
+
+  /**
+   * @typedef {Object} AttribInfo
+   * @property {number} [numComponents] the number of components for this attribute.
+   * @property {number} [size] the number of components for this attribute.
+   * @property {number} [type] the type of the attribute (eg. `gl.FLOAT`, `gl.UNSIGNED_BYTE`, etc...) Default = `gl.FLOAT`
+   * @property {boolean} [normalized] whether or not to normalize the data. Default = false
+   * @property {number} [offset] offset into buffer in bytes. Default = 0
+   * @property {number} [stride] the stride in bytes per element. Default = 0
+   * @property {WebGLBuffer} buffer the buffer that contains the data for this attribute
+   * @memberOf module:webgl-utils
+   */
+
+  /**
+   * Creates a set of attribute data and WebGLBuffers from set of arrays
+   *
+   * Given
+   *
+   *      let arrays = {
+   *        position: { numComponents: 3, data: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0], },
+   *        texcoord: { numComponents: 2, data: [0, 0, 0, 1, 1, 0, 1, 1],                 },
+   *        normal:   { numComponents: 3, data: [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1],     },
+   *        color:    { numComponents: 4, data: [255, 255, 255, 255, 255, 0, 0, 255, 0, 0, 255, 255], type: Uint8Array, },
+   *        indices:  { numComponents: 3, data: [0, 1, 2, 1, 2, 3],                       },
+   *      };
+   *
+   * returns something like
+   *
+   *      let attribs = {
+   *        a_position: { numComponents: 3, type: gl.FLOAT,         normalize: false, buffer: WebGLBuffer, },
+   *        a_texcoord: { numComponents: 2, type: gl.FLOAT,         normalize: false, buffer: WebGLBuffer, },
+   *        a_normal:   { numComponents: 3, type: gl.FLOAT,         normalize: false, buffer: WebGLBuffer, },
+   *        a_color:    { numComponents: 4, type: gl.UNSIGNED_BYTE, normalize: true,  buffer: WebGLBuffer, },
+   *      };
+   *
+   * @param {WebGLRenderingContext} gl The webgl rendering context.
+   * @param {Object.<string, array|typedarray>} arrays The arrays
+   * @param {Object.<string, string>} [opt_mapping] mapping from attribute name to array name.
+   *     if not specified defaults to "a_name" -> "name".
+   * @return {Object.<string, module:webgl-utils.AttribInfo>} the attribs
+   * @memberOf module:webgl-utils
+   */
+  function createAttribsFromArrays(gl, arrays, opt_mapping) {
+    const mapping = opt_mapping || createMapping(arrays);
+    const attribs = {};
+    Object.keys(mapping).forEach(function (attribName) {
+      const bufferName = mapping[attribName];
+      const origArray = arrays[bufferName];
+      if (origArray.value) {
+        attribs[attribName] = {
+          value: origArray.value,
+        };
+      } else {
+        const array = makeTypedArray(origArray, bufferName);
+        attribs[attribName] = {
+          buffer: createBufferFromTypedArray(gl, array),
+          numComponents:
+            origArray.numComponents ||
+            array.numComponents ||
+            guessNumComponentsFromName(bufferName),
+          type: getGLTypeForTypedArray(gl, array),
+          normalize: getNormalizationForTypedArray(array),
+        };
+      }
+    });
+    return attribs;
+  }
+
+  function getArray(array) {
+    return array.length ? array : array.data;
+  }
+
+  const texcoordRE = /coord|texture/i;
+  const colorRE = /color|colour/i;
+
+  function guessNumComponentsFromName(name, length) {
+    let numComponents;
+    if (texcoordRE.test(name)) {
+      numComponents = 2;
+    } else if (colorRE.test(name)) {
+      numComponents = 4;
+    } else {
+      numComponents = 3; // position, normals, indices ...
+    }
+
+    if (length % numComponents > 0) {
+      throw new Error(
+        `Can not guess numComponents for attribute '${name}'. Tried ${numComponents} but ${length} values is not evenly divisible by ${numComponents}. You should specify it.`,
+      );
+    }
+
+    return numComponents;
+  }
+
+  function getNumComponents(array, arrayName) {
+    return (
+      array.numComponents ||
+      array.size ||
+      guessNumComponentsFromName(arrayName, getArray(array).length)
+    );
+  }
+
+  /**
+   * tries to get the number of elements from a set of arrays.
+   */
+  const positionKeys = ['position', 'positions', 'a_position'];
+  function getNumElementsFromNonIndexedArrays(arrays) {
+    let key;
+    for (const k of positionKeys) {
+      if (k in arrays) {
+        key = k;
+        break;
+      }
+    }
+    key = key || Object.keys(arrays)[0];
+    const array = arrays[key];
+    const length = getArray(array).length;
+    const numComponents = getNumComponents(array, key);
+    const numElements = length / numComponents;
+    if (length % numComponents > 0) {
+      throw new Error(
+        `numComponents ${numComponents} not correct for length ${length}`,
+      );
+    }
+    return numElements;
+  }
+
+  /**
+   * @typedef {Object} BufferInfo
+   * @property {number} numElements The number of elements to pass to `gl.drawArrays` or `gl.drawElements`.
+   * @property {WebGLBuffer} [indices] The indices `ELEMENT_ARRAY_BUFFER` if any indices exist.
+   * @property {Object.<string, module:webgl-utils.AttribInfo>} attribs The attribs approriate to call `setAttributes`
+   * @memberOf module:webgl-utils
+   */
+
+  /**
+   * Creates a BufferInfo from an object of arrays.
+   *
+   * This can be passed to {@link module:webgl-utils.setBuffersAndAttributes} and to
+   * {@link module:webgl-utils:drawBufferInfo}.
+   *
+   * Given an object like
+   *
+   *     let arrays = {
+   *       position: { numComponents: 3, data: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0], },
+   *       texcoord: { numComponents: 2, data: [0, 0, 0, 1, 1, 0, 1, 1],                 },
+   *       normal:   { numComponents: 3, data: [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1],     },
+   *       indices:  { numComponents: 3, data: [0, 1, 2, 1, 2, 3],                       },
+   *     };
+   *
+   *  Creates an BufferInfo like this
+   *
+   *     bufferInfo = {
+   *       numElements: 4,        // or whatever the number of elements is
+   *       indices: WebGLBuffer,  // this property will not exist if there are no indices
+   *       attribs: {
+   *         a_position: { buffer: WebGLBuffer, numComponents: 3, },
+   *         a_normal:   { buffer: WebGLBuffer, numComponents: 3, },
+   *         a_texcoord: { buffer: WebGLBuffer, numComponents: 2, },
+   *       },
+   *     };
+   *
+   *  The properties of arrays can be JavaScript arrays in which case the number of components
+   *  will be guessed.
+   *
+   *     let arrays = {
+   *        position: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0],
+   *        texcoord: [0, 0, 0, 1, 1, 0, 1, 1],
+   *        normal:   [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1],
+   *        indices:  [0, 1, 2, 1, 2, 3],
+   *     };
+   *
+   *  They can also by TypedArrays
+   *
+   *     let arrays = {
+   *        position: new Float32Array([0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0]),
+   *        texcoord: new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]),
+   *        normal:   new Float32Array([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]),
+   *        indices:  new Uint16Array([0, 1, 2, 1, 2, 3]),
+   *     };
+   *
+   *  Or augmentedTypedArrays
+   *
+   *     let positions = createAugmentedTypedArray(3, 4);
+   *     let texcoords = createAugmentedTypedArray(2, 4);
+   *     let normals   = createAugmentedTypedArray(3, 4);
+   *     let indices   = createAugmentedTypedArray(3, 2, Uint16Array);
+   *
+   *     positions.push([0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0]);
+   *     texcoords.push([0, 0, 0, 1, 1, 0, 1, 1]);
+   *     normals.push([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]);
+   *     indices.push([0, 1, 2, 1, 2, 3]);
+   *
+   *     let arrays = {
+   *        position: positions,
+   *        texcoord: texcoords,
+   *        normal:   normals,
+   *        indices:  indices,
+   *     };
+   *
+   * For the last example it is equivalent to
+   *
+   *     let bufferInfo = {
+   *       attribs: {
+   *         a_position: { numComponents: 3, buffer: gl.createBuffer(), },
+   *         a_texcoods: { numComponents: 2, buffer: gl.createBuffer(), },
+   *         a_normals: { numComponents: 3, buffer: gl.createBuffer(), },
+   *       },
+   *       indices: gl.createBuffer(),
+   *       numElements: 6,
+   *     };
+   *
+   *     gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.attribs.a_position.buffer);
+   *     gl.bufferData(gl.ARRAY_BUFFER, arrays.position, gl.STATIC_DRAW);
+   *     gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.attribs.a_texcoord.buffer);
+   *     gl.bufferData(gl.ARRAY_BUFFER, arrays.texcoord, gl.STATIC_DRAW);
+   *     gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.attribs.a_normal.buffer);
+   *     gl.bufferData(gl.ARRAY_BUFFER, arrays.normal, gl.STATIC_DRAW);
+   *     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferInfo.indices);
+   *     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, arrays.indices, gl.STATIC_DRAW);
+   *
+   * @param {WebGLRenderingContext} gl A WebGLRenderingContext
+   * @param {Object.<string, array|object|typedarray>} arrays Your data
+   * @param {Object.<string, string>} [opt_mapping] an optional mapping of attribute to array name.
+   *    If not passed in it's assumed the array names will be mapped to an attribute
+   *    of the same name with "a_" prefixed to it. An other words.
+   *
+   *        let arrays = {
+   *           position: ...,
+   *           texcoord: ...,
+   *           normal:   ...,
+   *           indices:  ...,
+   *        };
+   *
+   *        bufferInfo = createBufferInfoFromArrays(gl, arrays);
+   *
+   *    Is the same as
+   *
+   *        let arrays = {
+   *           position: ...,
+   *           texcoord: ...,
+   *           normal:   ...,
+   *           indices:  ...,
+   *        };
+   *
+   *        let mapping = {
+   *          a_position: "position",
+   *          a_texcoord: "texcoord",
+   *          a_normal:   "normal",
+   *        };
+   *
+   *        bufferInfo = createBufferInfoFromArrays(gl, arrays, mapping);
+   *
+   * @return {module:webgl-utils.BufferInfo} A BufferInfo
+   * @memberOf module:webgl-utils
+   */
+  function createBufferInfoFromArrays(gl, arrays, opt_mapping) {
+    const bufferInfo = {
+      attribs: createAttribsFromArrays(gl, arrays, opt_mapping),
+    };
+    let indices = arrays.indices;
+    if (indices) {
+      indices = makeTypedArray(indices, 'indices');
+      bufferInfo.indices = createBufferFromTypedArray(
+        gl,
+        indices,
+        gl.ELEMENT_ARRAY_BUFFER,
+      );
+      bufferInfo.numElements = indices.length;
+    } else {
+      bufferInfo.numElements = getNumElementsFromNonIndexedArrays(arrays);
+    }
+
+    return bufferInfo;
+  }
+
+  /**
+   * Creates buffers from typed arrays
+   *
+   * Given something like this
+   *
+   *     let arrays = {
+   *        positions: [1, 2, 3],
+   *        normals: [0, 0, 1],
+   *     }
+   *
+   * returns something like
+   *
+   *     buffers = {
+   *       positions: WebGLBuffer,
+   *       normals: WebGLBuffer,
+   *     }
+   *
+   * If the buffer is named 'indices' it will be made an ELEMENT_ARRAY_BUFFER.
+   *
+   * @param {WebGLRenderingContext} gl A WebGLRenderingContext.
+   * @param {Object<string, array|typedarray>} arrays
+   * @return {Object<string, WebGLBuffer>} returns an object with one WebGLBuffer per array
+   * @memberOf module:webgl-utils
+   */
+  function createBuffersFromArrays(gl, arrays) {
+    const buffers = {};
+    Object.keys(arrays).forEach(function (key) {
+      const type =
+        key === 'indices' ? gl.ELEMENT_ARRAY_BUFFER : gl.ARRAY_BUFFER;
+      const array = makeTypedArray(arrays[key], name);
+      buffers[key] = createBufferFromTypedArray(gl, array, type);
+    });
+
+    // hrm
+    if (arrays.indices) {
+      buffers.numElements = arrays.indices.length;
+    } else if (arrays.position) {
+      buffers.numElements = arrays.position.length / 3;
+    }
+
+    return buffers;
+  }
+
+  /**
+   * Calls `gl.drawElements` or `gl.drawArrays`, whichever is appropriate
+   *
+   * normally you'd call `gl.drawElements` or `gl.drawArrays` yourself
+   * but calling this means if you switch from indexed data to non-indexed
+   * data you don't have to remember to update your draw call.
+   *
+   * @param {WebGLRenderingContext} gl A WebGLRenderingContext
+   * @param {module:webgl-utils.BufferInfo} bufferInfo as returned from createBufferInfoFromArrays
+   * @param {enum} [primitiveType] eg (gl.TRIANGLES, gl.LINES, gl.POINTS, gl.TRIANGLE_STRIP, ...)
+   * @param {number} [count] An optional count. Defaults to bufferInfo.numElements
+   * @param {number} [offset] An optional offset. Defaults to 0.
+   * @memberOf module:webgl-utils
+   */
+  function drawBufferInfo(gl, bufferInfo, primitiveType, count, offset) {
+    const indices = bufferInfo.indices;
+    primitiveType = primitiveType === undefined ? gl.TRIANGLES : primitiveType;
+    const numElements = count === undefined ? bufferInfo.numElements : count;
+    offset = offset === undefined ? 0 : offset;
+    if (indices) {
+      gl.drawElements(primitiveType, numElements, gl.UNSIGNED_SHORT, offset);
+    } else {
+      gl.drawArrays(primitiveType, offset, numElements);
+    }
+  }
+
+  /**
+   * @typedef {Object} DrawObject
+   * @property {module:webgl-utils.ProgramInfo} programInfo A ProgramInfo as returned from createProgramInfo
+   * @property {module:webgl-utils.BufferInfo} bufferInfo A BufferInfo as returned from createBufferInfoFromArrays
+   * @property {Object<string, ?>} uniforms The values for the uniforms
+   * @memberOf module:webgl-utils
+   */
+
+  /**
+   * Draws a list of objects
+   * @param {WebGLRenderingContext} gl A WebGLRenderingContext
+   * @param {DrawObject[]} objectsToDraw an array of objects to draw.
+   * @memberOf module:webgl-utils
+   */
+  function drawObjectList(gl, objectsToDraw) {
+    let lastUsedProgramInfo = null;
+    let lastUsedBufferInfo = null;
+
+    objectsToDraw.forEach(function (object) {
+      const programInfo = object.programInfo;
+      const bufferInfo = object.bufferInfo;
+      let bindBuffers = false;
+
+      if (programInfo !== lastUsedProgramInfo) {
+        lastUsedProgramInfo = programInfo;
+        gl.useProgram(programInfo.program);
+        bindBuffers = true;
+      }
+
+      // Setup all the needed attributes.
+      if (bindBuffers || bufferInfo !== lastUsedBufferInfo) {
+        lastUsedBufferInfo = bufferInfo;
+        setBuffersAndAttributes(gl, programInfo.attribSetters, bufferInfo);
+      }
+
+      // Set the uniforms.
+      setUniforms(programInfo.uniformSetters, object.uniforms);
+
+      // Draw
+      drawBufferInfo(gl, bufferInfo);
+    });
+  }
+
+  function glEnumToString(gl, v) {
+    const results = [];
+    for (const key in gl) {
+      if (gl[key] === v) {
+        results.push(key);
+      }
+    }
+    return results.length ? results.join(' | ') : `0x${v.toString(16)}`;
+  }
+
+  const isIE = /*@cc_on!@*/ false || !!document.documentMode;
+  // Edge 20+
+  const isEdge = !isIE && !!window.StyleMedia;
+  if (isEdge) {
+    // Hack for Edge. Edge's WebGL implmentation is crap still and so they
+    // only respond to "experimental-webgl". I don't want to clutter the
+    // examples with that so his hack works around it
+    HTMLCanvasElement.prototype.getContext = (function (origFn) {
+      return function () {
+        let args = arguments;
+        const type = args[0];
+        if (type === 'webgl') {
+          args = [].slice.call(arguments);
+          args[0] = 'experimental-webgl';
+        }
+        return origFn.apply(this, args);
+      };
+    })(HTMLCanvasElement.prototype.getContext);
+  }
+
+  return {
+    createAugmentedTypedArray: createAugmentedTypedArray,
+    createAttribsFromArrays: createAttribsFromArrays,
+    createBuffersFromArrays: createBuffersFromArrays,
+    createBufferInfoFromArrays: createBufferInfoFromArrays,
+    createAttributeSetters: createAttributeSetters,
+    createProgram: createProgram,
+    createProgramFromScripts: createProgramFromScripts,
+    createProgramFromSources: createProgramFromSources,
+    createProgramInfo: createProgramInfo,
+    createUniformSetters: createUniformSetters,
+    createVAOAndSetAttributes: createVAOAndSetAttributes,
+    createVAOFromBufferInfo: createVAOFromBufferInfo,
+    drawBufferInfo: drawBufferInfo,
+    drawObjectList: drawObjectList,
+    glEnumToString: glEnumToString,
+    getExtensionWithKnownPrefixes: getExtensionWithKnownPrefixes,
+    resizeCanvasToDisplaySize: resizeCanvasToDisplaySize,
+    setAttributes: setAttributes,
+    setBuffersAndAttributes: setBuffersAndAttributes,
+    setUniforms: setUniforms,
+  };
+});
diff --git a/packages/rrweb/test/html/canvas-webgl-image.html b/packages/rrweb/test/html/canvas-webgl-image.html
new file mode 100644
index 0000000000..96bc31031e
--- /dev/null
+++ b/packages/rrweb/test/html/canvas-webgl-image.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <!-- FROM https://stackoverflow.com/a/12268575/543604 -->
+    <script src="./assets/webgl-utils.js"></script>
+    <canvas id="c"></canvas>
+    <!-- vertex shader -->
+    <script id="2d-vertex-shader" type="x-shader/x-vertex">
+      attribute vec2 a_position;
+
+      uniform vec2 u_resolution;
+      uniform mat3 u_matrix;
+
+      varying vec2 v_texCoord;
+
+      void main() {
+
+         gl_Position = vec4(u_matrix * vec3(a_position, 1), 1);
+         v_texCoord = a_position;
+      }
+    </script>
+    <!-- fragment shader -->
+    <script id="2d-fragment-shader" type="x-shader/x-fragment">
+      precision mediump float;
+
+      // our texture
+      uniform sampler2D u_image;
+
+      // the texCoords passed in from the vertex shader.
+      varying vec2 v_texCoord;
+
+      void main() {
+         gl_FragColor = texture2D(u_image, v_texCoord);
+      }
+    </script>
+    <script>
+      'use strict';
+
+      window.onload = main;
+
+      function main() {
+        var image = new Image();
+        image.src =
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAM9JREFUeNrs2+EJgzAQBtBccTIXcQ8HcA8XcbV0gjZiONKS9/1VAnl43KExaq2lJxHRt0B/4tvF1v5eZfIAAAAAAICZE60+2erz53EN3cC2r11zghIAAAAAAAAzzwGllJ/u89lzghIAAAAAAAATZ8nus71zRPb6SgAAAAAAAJgDnif7fUH2+koAAAAAAACYA/Jy4/u9OUAJAAAAAACAMYkb9/z1OcHzuJwTBAAAAAAAAB7OAa0+v+3r0P8GW33eEwAAAAAAAAB8zBsAAP//AwB6eysS2pA5KAAAAABJRU5ErkJggg=='; // MUST BE SAME DOMAIN!!!
+        image.onload = () => render(image);
+      }
+
+      function render(image) {
+        // Get A WebGL context
+        var canvas = document.getElementById('c');
+        var gl = canvas.getContext('webgl');
+        if (!gl) {
+          return;
+        }
+
+        // setup GLSL program
+        var program = webglUtils.createProgramFromScripts(gl, [
+          '2d-vertex-shader',
+          '2d-fragment-shader',
+        ]);
+        gl.useProgram(program);
+
+        // look up where the vertex data needs to go.
+        var positionLocation = gl.getAttribLocation(program, 'a_position');
+
+        // look up uniform locations
+        var u_imageLoc = gl.getUniformLocation(program, 'u_image');
+        var u_matrixLoc = gl.getUniformLocation(program, 'u_matrix');
+
+        // provide texture coordinates for the rectangle.
+        var positionBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([
+            0.0,
+            0.0,
+            1.0,
+            0.0,
+            0.0,
+            1.0,
+            0.0,
+            1.0,
+            1.0,
+            0.0,
+            1.0,
+            1.0,
+          ]),
+          gl.STATIC_DRAW,
+        );
+        gl.enableVertexAttribArray(positionLocation);
+        gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+
+        var texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+
+        // Set the parameters so we can render any size image.
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+
+        // Upload the image into the texture.
+        gl.texImage2D(
+          gl.TEXTURE_2D,
+          0,
+          gl.RGBA,
+          gl.RGBA,
+          gl.UNSIGNED_BYTE,
+          image,
+        );
+
+        var dstX = 20;
+        var dstY = 30;
+        var dstWidth = 64;
+        var dstHeight = 64;
+
+        // convert dst pixel coords to clipspace coords
+        var clipX = (dstX / gl.canvas.width) * 2 - 1;
+        var clipY = (dstY / gl.canvas.height) * -2 + 1;
+        var clipWidth = (dstWidth / gl.canvas.width) * 2;
+        var clipHeight = (dstHeight / gl.canvas.height) * -2;
+
+        // build a matrix that will stretch our
+        // unit quad to our desired size and location
+        gl.uniformMatrix3fv(u_matrixLoc, false, [
+          clipWidth,
+          0,
+          0,
+          0,
+          clipHeight,
+          0,
+          clipX,
+          clipY,
+          1,
+        ]);
+
+        // Draw the rectangle.
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+      }
+    </script>
+  </body>
+</html>
diff --git a/packages/rrweb/test/html/canvas-webgl-square.html b/packages/rrweb/test/html/canvas-webgl-square.html
new file mode 100644
index 0000000000..cbdc7ec62e
--- /dev/null
+++ b/packages/rrweb/test/html/canvas-webgl-square.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>canvas webgl square</title>
+  </head>
+  <body>
+    <canvas
+      id="myCanvas"
+      width="200"
+      height="100"
+      style="border: 1px solid #000000"
+    >
+    </canvas>
+    <script id="vertex" type="x-shader">
+      attribute vec2 aVertexPosition;
+
+      void main() {
+        gl_Position = vec4(aVertexPosition, 0.0, 1.0);
+      }
+    </script>
+    <script id="fragment" type="x-shader">
+      #ifdef GL_ES
+        precision highp float;
+      #endif
+
+      uniform vec4 uColor;
+
+      void main() {
+        gl_FragColor = uColor;
+      }
+    </script>
+    <script>
+      // example from https://www.creativebloq.com/javascript/get-started-webgl-draw-square-7112981
+      const canvas = document.getElementById('myCanvas');
+      const ctx = canvas.getContext('webgl2');
+      ctx.viewport(0, 0, canvas.width, canvas.height);
+      ctx.clearColor(0, 0.5, 0, 1);
+      ctx.clear(ctx.COLOR_BUFFER_BIT);
+
+      const v = document.getElementById('vertex').firstChild.nodeValue;
+      const f = document.getElementById('fragment').firstChild.nodeValue;
+
+      const vs = ctx.createShader(ctx.VERTEX_SHADER);
+      ctx.shaderSource(vs, v);
+      ctx.compileShader(vs);
+
+      const fs = ctx.createShader(ctx.FRAGMENT_SHADER);
+      ctx.shaderSource(fs, f);
+      ctx.compileShader(fs);
+
+      program = ctx.createProgram();
+      ctx.attachShader(program, vs);
+      ctx.attachShader(program, fs);
+      ctx.linkProgram(program);
+
+      if (!ctx.getShaderParameter(vs, ctx.COMPILE_STATUS))
+        console.log(ctx.getShaderInfoLog(vs));
+
+      if (!ctx.getShaderParameter(fs, ctx.COMPILE_STATUS))
+        console.log(ctx.getShaderInfoLog(fs));
+
+      if (!ctx.getProgramParameter(program, ctx.LINK_STATUS))
+        console.log(ctx.getProgramInfoLog(program));
+
+      const aspect = canvas.width / canvas.height;
+
+      const vertices = new Float32Array([
+        -0.5,
+        0.5 * aspect,
+        0.5,
+        0.5 * aspect,
+        0.5,
+        -0.5 * aspect, // Triangle 1
+        -0.5,
+        0.5 * aspect,
+        0.5,
+        -0.5 * aspect,
+        -0.5,
+        -0.5 * aspect, // Triangle 2
+      ]);
+
+      vbuffer = ctx.createBuffer();
+      ctx.bindBuffer(ctx.ARRAY_BUFFER, vbuffer);
+      ctx.bufferData(ctx.ARRAY_BUFFER, vertices, ctx.STATIC_DRAW);
+
+      itemSize = 2;
+      numItems = vertices.length / itemSize;
+
+      ctx.useProgram(program);
+
+      const uColor = ctx.getUniformLocation(program, 'uColor');
+      ctx.uniform4fv(uColor, [0.0, 0.3, 0.0, 1.0]);
+
+      const aVertexPosition = ctx.getAttribLocation(program, 'aVertexPosition');
+      ctx.enableVertexAttribArray(aVertexPosition);
+      ctx.vertexAttribPointer(
+        aVertexPosition,
+        itemSize,
+        ctx.FLOAT,
+        false,
+        0,
+        0,
+      );
+
+      ctx.drawArrays(ctx.TRIANGLES, 0, numItems);
+    </script>
+  </body>
+</html>
diff --git a/packages/rrweb/test/html/canvas-webgl.html b/packages/rrweb/test/html/canvas-webgl.html
new file mode 100644
index 0000000000..52aacabca6
--- /dev/null
+++ b/packages/rrweb/test/html/canvas-webgl.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>canvas</title>
+  </head>
+  <body>
+    <canvas
+      id="myCanvas"
+      width="200"
+      height="100"
+      style="border: 1px solid #000000"
+    >
+    </canvas>
+    <script>
+      setTimeout(() => {
+        const c = document.getElementById('myCanvas');
+        const ctx = c.getContext('webgl');
+        // Set clear color to red, fully opaque
+        ctx.clearColor(1.0, 0.0, 0.0, 1.0);
+        // Clear the color buffer with specified clear color
+        ctx.clear(ctx.COLOR_BUFFER_BIT);
+      }, 10);
+    </script>
+  </body>
+</html>
diff --git a/packages/rrweb/test/html/mutation-observer.html b/packages/rrweb/test/html/mutation-observer.html
index 0175a31901..9d149c5a22 100644
--- a/packages/rrweb/test/html/mutation-observer.html
+++ b/packages/rrweb/test/html/mutation-observer.html
@@ -4,4 +4,5 @@
   <ul>
     <li></li>
   </ul>
-</body>
\ No newline at end of file
+  <canvas></canvas>
+</body>
diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
index acddfdf039..b0f3b82698 100644
--- a/packages/rrweb/test/integration.test.ts
+++ b/packages/rrweb/test/integration.test.ts
@@ -1,14 +1,21 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import * as http from 'http';
-import * as url from 'url';
 import * as puppeteer from 'puppeteer';
-import { assertSnapshot, launchPuppeteer } from './utils';
+import {
+  assertSnapshot,
+  startServer,
+  getServerURL,
+  launchPuppeteer,
+  waitForRAF,
+  replaceLast,
+} from './utils';
 import { recordOptions, eventWithTime, EventType } from '../src/types';
 import { visitSnapshot, NodeType } from 'rrweb-snapshot';
 
 interface ISuite {
   server: http.Server;
+  serverURL: string;
   code: string;
   browser: puppeteer.Browser;
 }
@@ -17,39 +24,6 @@ interface IMimeType {
   [key: string]: string;
 }
 
-const startServer = () =>
-  new Promise<http.Server>((resolve) => {
-    const mimeType: IMimeType = {
-      '.html': 'text/html',
-      '.js': 'text/javascript',
-      '.css': 'text/css',
-    };
-    const s = http.createServer((req, res) => {
-      const parsedUrl = url.parse(req.url!);
-      const sanitizePath = path
-        .normalize(parsedUrl.pathname!)
-        .replace(/^(\.\.[\/\\])+/, '');
-      let pathname = path.join(__dirname, sanitizePath);
-      try {
-        const data = fs.readFileSync(pathname);
-        const ext = path.parse(pathname).ext;
-        res.setHeader('Content-type', mimeType[ext] || 'text/plain');
-        res.setHeader('Access-Control-Allow-Origin', '*');
-        res.setHeader('Access-Control-Allow-Methods', 'GET');
-        res.setHeader('Access-Control-Allow-Headers', 'Content-type');
-        setTimeout(() => {
-          res.end(data);
-          // mock delay
-        }, 100);
-      } catch (error) {
-        res.end();
-      }
-    });
-    s.listen(3030).on('listening', () => {
-      resolve(s);
-    });
-  });
-
 describe('record integration tests', function (this: ISuite) {
   jest.setTimeout(10_000);
 
@@ -59,7 +33,8 @@ describe('record integration tests', function (this: ISuite) {
   ): string => {
     const filePath = path.resolve(__dirname, `./html/${fileName}`);
     const html = fs.readFileSync(filePath, 'utf8');
-    return html.replace(
+    return replaceLast(
+      html,
       '</body>',
       `
     <script>
@@ -85,11 +60,13 @@ describe('record integration tests', function (this: ISuite) {
   };
 
   let server: ISuite['server'];
+  let serverURL: string;
   let code: ISuite['code'];
   let browser: ISuite['browser'];
 
   beforeAll(async () => {
     server = await startServer();
+    serverURL = getServerURL(server);
     browser = await launchPuppeteer();
 
     const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js');
@@ -197,7 +174,9 @@ describe('record integration tests', function (this: ISuite) {
   it('can freeze mutations', async () => {
     const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
-    await page.setContent(getHtml.call(this, 'mutation-observer.html'));
+    await page.setContent(
+      getHtml.call(this, 'mutation-observer.html', { recordCanvas: true }),
+    );
 
     await page.evaluate(() => {
       const li = document.createElement('li');
@@ -209,6 +188,9 @@ describe('record integration tests', function (this: ISuite) {
     await page.evaluate('rrweb.freezePage()');
     await page.evaluate(() => {
       document.body.setAttribute('test', 'bad');
+      const canvas = document.querySelector('canvas') as HTMLCanvasElement;
+      const gl = canvas.getContext('webgl') as WebGLRenderingContext;
+      gl.getExtension('bad');
       const ul = document.querySelector('ul') as HTMLUListElement;
       const li = document.createElement('li');
       li.setAttribute('bad-attr', 'bad');
@@ -216,6 +198,9 @@ describe('record integration tests', function (this: ISuite) {
       ul.appendChild(li);
       document.body.removeChild(ul);
     });
+
+    await waitForRAF(page);
+
     const snapshots = await page.evaluate('window.snapshots');
     assertSnapshot(snapshots);
   });
@@ -391,7 +376,7 @@ describe('record integration tests', function (this: ISuite) {
         recordCanvas: true,
       }),
     );
-    await page.waitForTimeout(50);
+    await waitForRAF(page);
     const snapshots = await page.evaluate('window.snapshots');
     for (const event of snapshots) {
       if (event.type === EventType.FullSnapshot) {
@@ -405,6 +390,19 @@ describe('record integration tests', function (this: ISuite) {
     assertSnapshot(snapshots);
   });
 
+  it('should record webgl canvas mutations', async () => {
+    const page: puppeteer.Page = await browser.newPage();
+    await page.goto('about:blank');
+    await page.setContent(
+      getHtml.call(this, 'canvas-webgl.html', {
+        recordCanvas: true,
+      }),
+    );
+    await page.waitForTimeout(50);
+    const snapshots = await page.evaluate('window.snapshots');
+    assertSnapshot(snapshots);
+  });
+
   it('will serialize node before record', async () => {
     const page: puppeteer.Page = await browser.newPage();
     await page.goto('about:blank');
@@ -487,10 +485,17 @@ describe('record integration tests', function (this: ISuite) {
 
   it('should nest record iframe', async () => {
     const page: puppeteer.Page = await browser.newPage();
-    await page.goto(`http://localhost:3030/html`);
+    await page.goto(`${serverURL}/html`);
     await page.setContent(getHtml.call(this, 'main.html'));
 
-    await page.waitForTimeout(500);
+    await page.waitForSelector('#two');
+    const frameIdTwo = await page.frames()[2];
+    await frameIdTwo.waitForSelector('#four');
+    const frameIdFour = frameIdTwo.childFrames()[1];
+    await frameIdFour.waitForSelector('#five');
+
+    await page.waitForTimeout(50);
+
     const snapshots = await page.evaluate('window.snapshots');
     assertSnapshot(snapshots);
   });
diff --git a/packages/rrweb/test/packer.test.ts b/packages/rrweb/test/packer.test.ts
index f6ffaca92f..08b35c6cca 100644
--- a/packages/rrweb/test/packer.test.ts
+++ b/packages/rrweb/test/packer.test.ts
@@ -27,7 +27,14 @@ describe('unpack', () => {
   });
 
   it('stop on unknown data format', () => {
+    const consoleSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
     expect(() => unpack('[""]')).toThrow('');
+
+    expect(consoleSpy).toHaveBeenCalled();
+    jest.resetAllMocks();
   });
 
   it('can unpack packed data', () => {
diff --git a/packages/rrweb/test/record/__snapshots__/webgl.test.ts.snap b/packages/rrweb/test/record/__snapshots__/webgl.test.ts.snap
new file mode 100644
index 0000000000..03a208dcd5
--- /dev/null
+++ b/packages/rrweb/test/record/__snapshots__/webgl.test.ts.snap
@@ -0,0 +1,814 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`record webgl should batch events by RAF 1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"canvas\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"canvas\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
+                    \\"id\\": 8
+                  }
+                ],
+                \\"id\\": 5
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 7,
+      \\"type\\": 1,
+      \\"commands\\": [
+        {
+          \\"property\\": \\"createProgram\\",
+          \\"args\\": []
+        },
+        {
+          \\"property\\": \\"linkProgram\\",
+          \\"args\\": [
+            {
+              \\"rr_type\\": \\"WebGLProgram\\",
+              \\"index\\": 0
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 7,
+      \\"type\\": 1,
+      \\"commands\\": [
+        {
+          \\"property\\": \\"createProgram\\",
+          \\"args\\": []
+        },
+        {
+          \\"property\\": \\"linkProgram\\",
+          \\"args\\": [
+            {
+              \\"rr_type\\": \\"WebGLProgram\\",
+              \\"index\\": 1
+            }
+          ]
+        },
+        {
+          \\"property\\": \\"clear\\",
+          \\"args\\": [
+            16384
+          ]
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 7,
+      \\"type\\": 1,
+      \\"commands\\": [
+        {
+          \\"property\\": \\"clear\\",
+          \\"args\\": [
+            16384
+          ]
+        }
+      ]
+    }
+  }
+]"
+`;
+
+exports[`record webgl will record changes to a canvas element 1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"canvas\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"canvas\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
+                    \\"id\\": 8
+                  }
+                ],
+                \\"id\\": 5
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 7,
+      \\"type\\": 1,
+      \\"commands\\": [
+        {
+          \\"property\\": \\"clear\\",
+          \\"args\\": [
+            16384
+          ]
+        }
+      ]
+    }
+  }
+]"
+`;
+
+exports[`record webgl will record changes to a canvas element before the canvas gets added (webgl2) 1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"canvas\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"canvas\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
+                    \\"id\\": 8
+                  }
+                ],
+                \\"id\\": 5
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 5,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"canvas\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"id\\": 9
+          }
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 9,
+      \\"type\\": 2,
+      \\"commands\\": [
+        {
+          \\"property\\": \\"createProgram\\",
+          \\"args\\": []
+        },
+        {
+          \\"property\\": \\"linkProgram\\",
+          \\"args\\": [
+            {
+              \\"rr_type\\": \\"WebGLProgram\\",
+              \\"index\\": 0
+            }
+          ]
+        },
+        {
+          \\"property\\": \\"clear\\",
+          \\"args\\": [
+            16384
+          ]
+        }
+      ]
+    }
+  }
+]"
+`;
+
+exports[`record webgl will record changes to a canvas element before the canvas gets added 1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"canvas\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"canvas\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
+                    \\"id\\": 8
+                  }
+                ],
+                \\"id\\": 5
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 5,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"canvas\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"id\\": 9
+          }
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 9,
+      \\"type\\": 1,
+      \\"commands\\": [
+        {
+          \\"property\\": \\"createProgram\\",
+          \\"args\\": []
+        },
+        {
+          \\"property\\": \\"linkProgram\\",
+          \\"args\\": [
+            {
+              \\"rr_type\\": \\"WebGLProgram\\",
+              \\"index\\": 0
+            }
+          ]
+        },
+        {
+          \\"property\\": \\"clear\\",
+          \\"args\\": [
+            16384
+          ]
+        }
+      ]
+    }
+  }
+]"
+`;
+
+exports[`record webgl will record changes to a webgl2 canvas element 1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"canvas\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"canvas\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
+                    \\"id\\": 8
+                  }
+                ],
+                \\"id\\": 5
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 7,
+      \\"type\\": 2,
+      \\"commands\\": [
+        {
+          \\"property\\": \\"clear\\",
+          \\"args\\": [
+            16384
+          ]
+        }
+      ]
+    }
+  }
+]"
+`;
+
+exports[`record webgl will record webgl variables 1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"canvas\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"canvas\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
+                    \\"id\\": 8
+                  }
+                ],
+                \\"id\\": 5
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 7,
+      \\"type\\": 1,
+      \\"commands\\": [
+        {
+          \\"property\\": \\"createProgram\\",
+          \\"args\\": []
+        },
+        {
+          \\"property\\": \\"linkProgram\\",
+          \\"args\\": [
+            {
+              \\"rr_type\\": \\"WebGLProgram\\",
+              \\"index\\": 0
+            }
+          ]
+        },
+        {
+          \\"property\\": \\"createProgram\\",
+          \\"args\\": []
+        },
+        {
+          \\"property\\": \\"linkProgram\\",
+          \\"args\\": [
+            {
+              \\"rr_type\\": \\"WebGLProgram\\",
+              \\"index\\": 1
+            }
+          ]
+        }
+      ]
+    }
+  }
+]"
+`;
+
+exports[`record webgl will record webgl variables in reverse order 1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"canvas\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"canvas\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
+                    \\"id\\": 8
+                  }
+                ],
+                \\"id\\": 5
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 7,
+      \\"type\\": 1,
+      \\"commands\\": [
+        {
+          \\"property\\": \\"createProgram\\",
+          \\"args\\": []
+        },
+        {
+          \\"property\\": \\"createProgram\\",
+          \\"args\\": []
+        },
+        {
+          \\"property\\": \\"linkProgram\\",
+          \\"args\\": [
+            {
+              \\"rr_type\\": \\"WebGLProgram\\",
+              \\"index\\": 1
+            }
+          ]
+        },
+        {
+          \\"property\\": \\"linkProgram\\",
+          \\"args\\": [
+            {
+              \\"rr_type\\": \\"WebGLProgram\\",
+              \\"index\\": 0
+            }
+          ]
+        }
+      ]
+    }
+  }
+]"
+`;
diff --git a/packages/rrweb/test/record/serialize-args.test.ts b/packages/rrweb/test/record/serialize-args.test.ts
new file mode 100644
index 0000000000..8ba72e6cd0
--- /dev/null
+++ b/packages/rrweb/test/record/serialize-args.test.ts
@@ -0,0 +1,179 @@
+/**
+ * @jest-environment jsdom
+ */
+import { polyfillWebGLGlobals } from '../utils';
+polyfillWebGLGlobals();
+
+import { serializeArg } from '../../src/record/observers/canvas/serialize-args';
+
+const createContext = () => {
+  const ctx = new WebGL2RenderingContext();
+  return ctx;
+};
+
+let context: WebGL2RenderingContext;
+describe('serializeArg', () => {
+  beforeEach(() => {
+    context = createContext();
+  });
+  it('should serialize Float32Array values', async () => {
+    const float32Array = new Float32Array([-1, -1, 3, -1, -1, 3]);
+    const expected = {
+      rr_type: 'Float32Array',
+      args: [[-1, -1, 3, -1, -1, 3]],
+    };
+    expect(serializeArg(float32Array, window, context)).toStrictEqual(expected);
+  });
+
+  it('should serialize Float64Array values', async () => {
+    const float64Array = new Float64Array([-1, -1, 3, -1, -1, 3]);
+    const expected = {
+      rr_type: 'Float64Array',
+      args: [[-1, -1, 3, -1, -1, 3]],
+    };
+
+    expect(serializeArg(float64Array, window, context)).toStrictEqual(expected);
+  });
+
+  it('should serialize ArrayBuffer values', async () => {
+    const arrayBuffer = new Uint8Array([1, 2, 0, 4]).buffer;
+    const expected = {
+      rr_type: 'ArrayBuffer',
+      base64: 'AQIABA==',
+    };
+
+    expect(serializeArg(arrayBuffer, window, context)).toStrictEqual(expected);
+  });
+
+  it('should serialize Uint8Array values', async () => {
+    const object = new Uint8Array([1, 2, 0, 4]);
+    const expected = {
+      rr_type: 'Uint8Array',
+      args: [[1, 2, 0, 4]],
+    };
+
+    expect(serializeArg(object, window, context)).toStrictEqual(expected);
+  });
+
+  it('should serialize DataView values', async () => {
+    const dataView = new DataView(new ArrayBuffer(16), 0, 16);
+    const expected = {
+      rr_type: 'DataView',
+      args: [
+        {
+          rr_type: 'ArrayBuffer',
+          base64: 'AAAAAAAAAAAAAAAAAAAAAA==',
+        },
+        0,
+        16,
+      ],
+    };
+
+    expect(serializeArg(dataView, window, context)).toStrictEqual(expected);
+  });
+
+  it('should leave arrays intact', async () => {
+    const array = [1, 2, 3, 4];
+    expect(serializeArg(array, window, context)).toStrictEqual(array);
+  });
+
+  it('should serialize complex objects', async () => {
+    const dataView = [new DataView(new ArrayBuffer(16), 0, 16), 5, 6];
+    const expected = [
+      {
+        rr_type: 'DataView',
+        args: [
+          {
+            rr_type: 'ArrayBuffer',
+            base64: 'AAAAAAAAAAAAAAAAAAAAAA==',
+          },
+          0,
+          16,
+        ],
+      },
+      5,
+      6,
+    ];
+
+    expect(serializeArg(dataView, window, context)).toStrictEqual(expected);
+  });
+
+  it('should serialize arraybuffer contents', async () => {
+    const buffer = new Float32Array([1, 2, 3, 4]).buffer;
+    const expected = {
+      rr_type: 'ArrayBuffer',
+      base64: 'AACAPwAAAEAAAEBAAACAQA==',
+    };
+
+    expect(serializeArg(buffer, window, context)).toStrictEqual(expected);
+  });
+
+  it('should leave null as-is', async () => {
+    expect(serializeArg(null, window, context)).toStrictEqual(null);
+  });
+
+  it('should support indexed variables', async () => {
+    const webGLProgram = new WebGLProgram();
+    expect(serializeArg(webGLProgram, window, context)).toStrictEqual({
+      rr_type: 'WebGLProgram',
+      index: 0,
+    });
+    const webGLProgram2 = new WebGLProgram();
+    expect(serializeArg(webGLProgram2, window, context)).toStrictEqual({
+      rr_type: 'WebGLProgram',
+      index: 1,
+    });
+  });
+
+  it('should support indexed variables grouped by context', async () => {
+    const context1 = createContext();
+    const webGLProgram1 = new WebGLProgram();
+    expect(serializeArg(webGLProgram1, window, context1)).toStrictEqual({
+      rr_type: 'WebGLProgram',
+      index: 0,
+    });
+    const context2 = createContext();
+    const webGLProgram2 = new WebGLProgram();
+    expect(serializeArg(webGLProgram2, window, context2)).toStrictEqual({
+      rr_type: 'WebGLProgram',
+      index: 0,
+    });
+  });
+
+  it('should support HTMLImageElements', async () => {
+    const image = new Image();
+    image.src = 'http://example.com/image.png';
+    expect(serializeArg(image, window, context)).toStrictEqual({
+      rr_type: 'HTMLImageElement',
+      src: 'http://example.com/image.png',
+    });
+  });
+
+  it('should serialize ImageData', async () => {
+    const arr = new Uint8ClampedArray(40000);
+
+    // Iterate through every pixel
+    for (let i = 0; i < arr.length; i += 4) {
+      arr[i + 0] = 0; // R value
+      arr[i + 1] = 190; // G value
+      arr[i + 2] = 0; // B value
+      arr[i + 3] = 255; // A value
+    }
+
+    // Initialize a new ImageData object
+    let imageData = new ImageData(arr, 200, 50);
+
+    const contents = Array.from(arr);
+    expect(serializeArg(imageData, window, context)).toStrictEqual({
+      rr_type: 'ImageData',
+      args: [
+        {
+          rr_type: 'Uint8ClampedArray',
+          args: [contents],
+        },
+        200,
+        50,
+      ],
+    });
+  });
+});
diff --git a/packages/rrweb/test/record/webgl.test.ts b/packages/rrweb/test/record/webgl.test.ts
new file mode 100644
index 0000000000..17442669d4
--- /dev/null
+++ b/packages/rrweb/test/record/webgl.test.ts
@@ -0,0 +1,260 @@
+/* tslint:disable no-console */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import * as puppeteer from 'puppeteer';
+import {
+  recordOptions,
+  listenerHandler,
+  eventWithTime,
+  EventType,
+  IncrementalSource,
+  CanvasContext,
+} from '../../src/types';
+import { assertSnapshot, launchPuppeteer, waitForRAF } from '../utils';
+import { ICanvas } from 'rrweb-snapshot';
+
+interface ISuite {
+  code: string;
+  browser: puppeteer.Browser;
+  page: puppeteer.Page;
+  events: eventWithTime[];
+}
+
+interface IWindow extends Window {
+  rrweb: {
+    record: (
+      options: recordOptions<eventWithTime>,
+    ) => listenerHandler | undefined;
+    addCustomEvent<T>(tag: string, payload: T): void;
+  };
+  emit: (e: eventWithTime) => undefined;
+}
+
+const setup = function (this: ISuite, content: string): ISuite {
+  const ctx = {} as ISuite;
+
+  beforeAll(async () => {
+    ctx.browser = await launchPuppeteer();
+
+    const bundlePath = path.resolve(__dirname, '../../dist/rrweb.min.js');
+    ctx.code = fs.readFileSync(bundlePath, 'utf8');
+  });
+
+  beforeEach(async () => {
+    ctx.page = await ctx.browser.newPage();
+    await ctx.page.goto('about:blank');
+    await ctx.page.setContent(content);
+    await ctx.page.evaluate(ctx.code);
+    ctx.events = [];
+    await ctx.page.exposeFunction('emit', (e: eventWithTime) => {
+      if (e.type === EventType.DomContentLoaded || e.type === EventType.Load) {
+        return;
+      }
+      ctx.events.push(e);
+    });
+
+    ctx.page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
+
+    await ctx.page.evaluate(() => {
+      const { record } = ((window as unknown) as IWindow).rrweb;
+      record({
+        recordCanvas: true,
+        emit: ((window as unknown) as IWindow).emit,
+      });
+    });
+  });
+
+  afterEach(async () => {
+    await ctx.page.close();
+  });
+
+  afterAll(async () => {
+    await ctx.browser.close();
+  });
+
+  return ctx;
+};
+
+describe('record webgl', function (this: ISuite) {
+  jest.setTimeout(100_000);
+
+  const ctx: ISuite = setup.call(
+    this,
+    `
+      <!DOCTYPE html>
+      <html>
+        <body>
+          <canvas id="canvas"></canvas>
+        </body>
+      </html>
+    `,
+  );
+
+  it('will record changes to a canvas element', async () => {
+    await ctx.page.evaluate(() => {
+      var canvas = document.getElementById('canvas') as HTMLCanvasElement;
+      var gl = canvas.getContext('webgl')!;
+
+      gl.clear(gl.COLOR_BUFFER_BIT);
+    });
+
+    await ctx.page.waitForTimeout(50);
+
+    const lastEvent = ctx.events[ctx.events.length - 1];
+    expect(lastEvent).toMatchObject({
+      data: {
+        source: IncrementalSource.CanvasMutation,
+        type: CanvasContext.WebGL,
+        commands: [
+          {
+            args: [16384],
+            property: 'clear',
+          },
+        ],
+      },
+    });
+    assertSnapshot(ctx.events);
+  });
+
+  it('will record changes to a webgl2 canvas element', async () => {
+    await ctx.page.evaluate(() => {
+      var canvas = document.getElementById('canvas') as HTMLCanvasElement;
+      var gl = canvas.getContext('webgl2')!;
+
+      gl.clear(gl.COLOR_BUFFER_BIT);
+    });
+
+    await ctx.page.waitForTimeout(50);
+
+    const lastEvent = ctx.events[ctx.events.length - 1];
+    expect(lastEvent).toMatchObject({
+      data: {
+        source: IncrementalSource.CanvasMutation,
+        type: CanvasContext.WebGL2,
+        commands: [
+          {
+            args: [16384],
+            property: 'clear',
+          },
+        ],
+      },
+    });
+    assertSnapshot(ctx.events);
+  });
+
+  it('will record changes to a canvas element before the canvas gets added', async () => {
+    await ctx.page.evaluate(() => {
+      var canvas = document.createElement('canvas');
+      var gl = canvas.getContext('webgl')!;
+      var program = gl.createProgram()!;
+      gl.linkProgram(program);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      document.body.appendChild(canvas);
+    });
+
+    await waitForRAF(ctx.page);
+
+    assertSnapshot(ctx.events);
+  });
+
+  it('will record changes to a canvas element before the canvas gets added (webgl2)', async () => {
+    await ctx.page.evaluate(() => {
+      return new Promise<void>((resolve) => {
+        var canvas = document.createElement('canvas');
+        var gl = canvas.getContext('webgl2')!;
+        var program = gl.createProgram()!;
+        gl.linkProgram(program);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        setTimeout(() => {
+          document.body.appendChild(canvas);
+          resolve();
+        }, 10);
+      });
+    });
+
+    // FIXME: this wait deeply couples the test to the implementation
+    // When `pendingCanvasMutations` isn't run on requestAnimationFrame,
+    // we need to change this
+    await waitForRAF(ctx.page);
+
+    assertSnapshot(ctx.events);
+  });
+
+  it('will record webgl variables', async () => {
+    await ctx.page.evaluate(() => {
+      var canvas = document.getElementById('canvas') as HTMLCanvasElement;
+      var gl = canvas.getContext('webgl')!;
+      var program0 = gl.createProgram()!;
+      gl.linkProgram(program0);
+      var program1 = gl.createProgram()!;
+      gl.linkProgram(program1);
+    });
+
+    await ctx.page.waitForTimeout(50);
+
+    assertSnapshot(ctx.events);
+  });
+
+  it('will record webgl variables in reverse order', async () => {
+    await ctx.page.evaluate(() => {
+      var canvas = document.getElementById('canvas') as HTMLCanvasElement;
+      var gl = canvas.getContext('webgl')!;
+      var program0 = gl.createProgram()!;
+      var program1 = gl.createProgram()!;
+      // attach them in reverse order
+      gl.linkProgram(program1);
+      gl.linkProgram(program0);
+    });
+
+    await ctx.page.waitForTimeout(50);
+
+    assertSnapshot(ctx.events);
+  });
+
+  it('sets _context on canvas.getContext()', async () => {
+    const context = await ctx.page.evaluate(() => {
+      var canvas = document.getElementById('canvas') as HTMLCanvasElement;
+      canvas.getContext('webgl')!;
+      return (canvas as ICanvas).__context;
+    });
+
+    expect(context).toBe('webgl');
+  });
+
+  it('only sets _context on first canvas.getContext() call', async () => {
+    const context = await ctx.page.evaluate(() => {
+      var canvas = document.getElementById('canvas') as HTMLCanvasElement;
+      canvas.getContext('webgl');
+      canvas.getContext('2d'); // returns null
+      return (canvas as ICanvas).__context;
+    });
+
+    expect(context).toBe('webgl');
+  });
+
+  it('should batch events by RAF', async () => {
+    await ctx.page.evaluate(() => {
+      return new Promise<void>((resolve) => {
+        const canvas = document.getElementById('canvas') as HTMLCanvasElement;
+        const gl = canvas.getContext('webgl') as WebGLRenderingContext;
+        const program = gl.createProgram()!;
+        gl.linkProgram(program);
+        requestAnimationFrame(() => {
+          const program2 = gl.createProgram()!;
+          gl.linkProgram(program2);
+          gl.clear(gl.COLOR_BUFFER_BIT);
+          requestAnimationFrame(() => {
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            resolve();
+          });
+        });
+      });
+    });
+
+    await ctx.page.waitForTimeout(50);
+
+    assertSnapshot(ctx.events);
+    expect(ctx.events.length).toEqual(5);
+  });
+});
diff --git a/packages/rrweb/test/replay/__image_snapshots__/webgl-test-ts-replayer-webgl-should-output-simple-webgl-object-1-snap.png b/packages/rrweb/test/replay/__image_snapshots__/webgl-test-ts-replayer-webgl-should-output-simple-webgl-object-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..a153bbfc8b80f2bfa11fca6ce42bffe0d24f5dab
GIT binary patch
literal 10796
zcmeAS@N?(olHy`uVBq!ia0y~yU~gbxV6os}1B$%3e9#$4F%}28J29*~C-ahlL4m>3
z#WAE}&YL?MbD0eV7##O4%(~I^Dlk+lNcF-*XXg!$FCTvO`C}2YuioZbR5nmI2z+>6
zJ7+J1$-q#}aRAB`WHNxT99kH7AS?kz24)D$1&gvHPj9k+|NU3C8lq%Q(mBg@*I(bv
zX2^NSBmoxtvHjVc<a3qZq!@17>}B{@wEJ${PIj=&f!nrn{hPxXZk%Ez(N=7Ziz(x^
z>Px<^aUv>v?p`K{a}sYeeUM1@i2h)^-vc7@A!}X(C?J8LL!f~X!ct;MfG`?37$J^k
zP;g=xRmQ+D8X%)7WH9E1j??E7kDp6~L=MBB6WbW}T)SloDl>tgA^ro434}>(F@~)`
z!BX0dDgy^A$+g62xQ&Jz{&vJ@3K>lyqbUTO21e^Fa4;~8)-vF5z}D*;EiFe&%hA$u
zw6tUxEgZm!U^Fj`<^^K&Ld~{vc6FX34gxH?1tzoW<HVa}4oSA0zYwzb>x}x%8l&TW
zprkZ9?g!3L45K5%;BXinDhCI{pq><XWX7<5>%1G#DUAb);s+o}crf;(?yx=B`(4-?
z>OhMp(5a%qIMO^iBLt46(Si^h45I}hI2Z<XK{z5?aM?#r*fB70-U6)!7@gJzCeqO)
z3eKsc4S8@dklv8*_-@{x_N+Aa`ugn<6Br5}d}FFei!=UwL<}mzw`TA6f8RNvymLR9
zM;DI(!(z0l08S92O$Bf;jF!XTU>Gfj!ND+EI6#7d^uodJiiO%Hvzz-bf(-C<^>bP0
Hl+XkK4Zbd2

literal 0
HcmV?d00001

diff --git a/packages/rrweb/test/replay/deserialize-args.test.ts b/packages/rrweb/test/replay/deserialize-args.test.ts
new file mode 100644
index 0000000000..a39c439d1d
--- /dev/null
+++ b/packages/rrweb/test/replay/deserialize-args.test.ts
@@ -0,0 +1,133 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { polyfillWebGLGlobals } from '../utils';
+polyfillWebGLGlobals();
+
+import { deserializeArg } from '../../src/replay/canvas/webgl';
+
+let context: WebGLRenderingContext | WebGL2RenderingContext;
+describe('deserializeArg', () => {
+  beforeEach(() => {
+    context = new WebGL2RenderingContext();
+  });
+  it('should deserialize Float32Array values', async () => {
+    expect(
+      deserializeArg(
+        new Map(),
+        context,
+      )({
+        rr_type: 'Float32Array',
+        args: [[-1, -1, 3, -1, -1, 3]],
+      }),
+    ).toEqual(new Float32Array([-1, -1, 3, -1, -1, 3]));
+  });
+
+  it('should deserialize Float64Array values', async () => {
+    expect(
+      deserializeArg(
+        new Map(),
+        context,
+      )({
+        rr_type: 'Float64Array',
+        args: [[-1, -1, 3, -1, -1, 3]],
+      }),
+    ).toEqual(new Float64Array([-1, -1, 3, -1, -1, 3]));
+  });
+
+  it('should deserialize ArrayBuffer values', async () => {
+    const contents = [1, 2, 0, 4];
+    expect(
+      deserializeArg(
+        new Map(),
+        context,
+      )({
+        rr_type: 'ArrayBuffer',
+        base64: 'AQIABA==',
+      }),
+    ).toStrictEqual(new Uint8Array(contents).buffer);
+  });
+
+  it('should deserialize DataView values', async () => {
+    expect(
+      deserializeArg(
+        new Map(),
+        context,
+      )({
+        rr_type: 'DataView',
+        args: [
+          {
+            rr_type: 'ArrayBuffer',
+            base64: 'AAAAAAAAAAAAAAAAAAAAAA==',
+          },
+          0,
+          16,
+        ],
+      }),
+    ).toStrictEqual(new DataView(new ArrayBuffer(16), 0, 16));
+  });
+
+  it('should leave arrays intact', async () => {
+    const array = [1, 2, 3, 4];
+    expect(deserializeArg(new Map(), context)(array)).toEqual(array);
+  });
+
+  it('should deserialize complex objects', async () => {
+    const serializedArg = [
+      {
+        rr_type: 'DataView',
+        args: [
+          {
+            rr_type: 'ArrayBuffer',
+            args: [16],
+          },
+          0,
+          16,
+        ],
+      },
+      5,
+      6,
+    ];
+    expect(deserializeArg(new Map(), context)(serializedArg)).toStrictEqual([
+      new DataView(new ArrayBuffer(16), 0, 16),
+      5,
+      6,
+    ]);
+  });
+
+  it('should leave null as-is', async () => {
+    expect(deserializeArg(new Map(), context)(null)).toStrictEqual(null);
+  });
+
+  it('should support HTMLImageElements', async () => {
+    const image = new Image();
+    image.src = 'http://example.com/image.png';
+    expect(
+      deserializeArg(
+        new Map(),
+        context,
+      )({
+        rr_type: 'HTMLImageElement',
+        src: 'http://example.com/image.png',
+      }),
+    ).toStrictEqual(image);
+  });
+
+  it('should return image from imageMap for HTMLImageElements', async () => {
+    const image = new Image();
+    image.src = 'http://example.com/image.png';
+    const imageMap = new Map();
+    imageMap.set(image.src, image);
+
+    expect(
+      deserializeArg(
+        imageMap,
+        context,
+      )({
+        rr_type: 'HTMLImageElement',
+        src: 'http://example.com/image.png',
+      }),
+    ).toBe(image);
+  });
+});
diff --git a/packages/rrweb/test/replay/preload-all-images.test.ts b/packages/rrweb/test/replay/preload-all-images.test.ts
new file mode 100644
index 0000000000..4b4e0a4c71
--- /dev/null
+++ b/packages/rrweb/test/replay/preload-all-images.test.ts
@@ -0,0 +1,125 @@
+/**
+ * @jest-environment jsdom
+ */
+import { polyfillWebGLGlobals } from '../utils';
+polyfillWebGLGlobals();
+
+import { Replayer } from '../../src/replay';
+import {} from '../../src/types';
+import {
+  CanvasContext,
+  SerializedWebGlArg,
+  IncrementalSource,
+  EventType,
+  eventWithTime,
+} from '../../src/types';
+
+let replayer: Replayer;
+
+const canvasMutationEventWithArgs = (
+  args: SerializedWebGlArg[],
+): eventWithTime => {
+  return {
+    timestamp: 100,
+    type: EventType.IncrementalSnapshot,
+    data: {
+      source: IncrementalSource.CanvasMutation,
+      property: 'x',
+      args,
+      id: 1,
+      type: CanvasContext.WebGL,
+    },
+  };
+};
+
+const event = (): eventWithTime => {
+  return {
+    timestamp: 1,
+    type: EventType.DomContentLoaded,
+    data: {},
+  };
+};
+
+describe('preloadAllImages', () => {
+  beforeEach(() => {
+    replayer = new Replayer(
+      // Get around the error "Replayer need at least 2 events."
+      [event(), event()],
+    );
+  });
+
+  it('should preload image', () => {
+    replayer.service.state.context.events = [
+      canvasMutationEventWithArgs([
+        {
+          rr_type: 'HTMLImageElement',
+          src: 'http://example.com',
+        },
+      ]),
+    ];
+
+    (replayer as any).preloadAllImages();
+
+    const expectedImage = new Image();
+    expectedImage.src = 'http://example.com';
+    expect((replayer as any).imageMap.get('http://example.com')).toEqual(
+      expectedImage,
+    );
+  });
+
+  it('should preload nested image', () => {
+    replayer.service.state.context.events = [
+      canvasMutationEventWithArgs([
+        {
+          rr_type: 'something',
+          args: [
+            {
+              rr_type: 'HTMLImageElement',
+              src: 'http://example.com',
+            },
+          ],
+        },
+      ]),
+    ];
+
+    (replayer as any).preloadAllImages();
+
+    const expectedImage = new Image();
+    expectedImage.src = 'http://example.com';
+
+    expect((replayer as any).imageMap.get('http://example.com')).toEqual(
+      expectedImage,
+    );
+  });
+
+  it('should preload multiple images', () => {
+    replayer.service.state.context.events = [
+      canvasMutationEventWithArgs([
+        {
+          rr_type: 'HTMLImageElement',
+          src: 'http://example.com/img1.png',
+        },
+        {
+          rr_type: 'HTMLImageElement',
+          src: 'http://example.com/img2.png',
+        },
+      ]),
+    ];
+
+    (replayer as any).preloadAllImages();
+
+    const expectedImage1 = new Image();
+    expectedImage1.src = 'http://example.com/img1.png';
+
+    expect(
+      (replayer as any).imageMap.get('http://example.com/img1.png'),
+    ).toEqual(expectedImage1);
+
+    const expectedImage2 = new Image();
+    expectedImage1.src = 'http://example.com/img2.png';
+
+    expect(
+      (replayer as any).imageMap.get('http://example.com/img2.png'),
+    ).toEqual(expectedImage1);
+  });
+});
diff --git a/packages/rrweb/test/replay/webgl-mutation.test.ts b/packages/rrweb/test/replay/webgl-mutation.test.ts
new file mode 100644
index 0000000000..a8d6392c13
--- /dev/null
+++ b/packages/rrweb/test/replay/webgl-mutation.test.ts
@@ -0,0 +1,47 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { polyfillWebGLGlobals } from '../utils';
+polyfillWebGLGlobals();
+
+import webglMutation, { variableListFor } from '../../src/replay/canvas/webgl';
+import { CanvasContext } from '../../src/types';
+
+let canvas: HTMLCanvasElement;
+describe('webglMutation', () => {
+  beforeEach(() => {
+    canvas = document.createElement('canvas');
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should create webgl variables', async () => {
+    const createShaderMock = jest.fn().mockImplementation(() => {
+      return new WebGLShader();
+    });
+    const context = ({
+      createShader: createShaderMock,
+    } as unknown) as WebGLRenderingContext;
+    jest.spyOn(canvas, 'getContext').mockImplementation(() => {
+      return context;
+    });
+
+    expect(variableListFor(context, 'WebGLShader')).toHaveLength(0);
+
+    webglMutation({
+      mutation: {
+        property: 'createShader',
+        args: [35633],
+      },
+      type: CanvasContext.WebGL,
+      target: canvas,
+      imageMap: new Map(),
+      errorHandler: () => {},
+    });
+
+    expect(createShaderMock).toHaveBeenCalledWith(35633);
+    expect(variableListFor(context, 'WebGLShader')).toHaveLength(1);
+  });
+});
diff --git a/packages/rrweb/test/replay/webgl.test.ts b/packages/rrweb/test/replay/webgl.test.ts
new file mode 100644
index 0000000000..f7d0498f17
--- /dev/null
+++ b/packages/rrweb/test/replay/webgl.test.ts
@@ -0,0 +1,66 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { assertDomSnapshot, launchPuppeteer } from '../utils';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+import * as puppeteer from 'puppeteer';
+import events from '../events/webgl';
+
+interface ISuite {
+  code: string;
+  browser: puppeteer.Browser;
+  page: puppeteer.Page;
+}
+
+expect.extend({ toMatchImageSnapshot });
+
+describe('replayer', function () {
+  jest.setTimeout(10_000);
+
+  let code: ISuite['code'];
+  let browser: ISuite['browser'];
+  let page: ISuite['page'];
+
+  beforeAll(async () => {
+    browser = await launchPuppeteer();
+
+    const bundlePath = path.resolve(__dirname, '../../dist/rrweb.min.js');
+    code = fs.readFileSync(bundlePath, 'utf8');
+  });
+
+  beforeEach(async () => {
+    page = await browser.newPage();
+    await page.goto('about:blank');
+    // mouse cursor canvas is large and pushes the replayer below the fold
+    // lets hide it...
+    await page.addStyleTag({
+      content: '.replayer-mouse-tail{display: none !important;}',
+    });
+    await page.evaluate(code);
+    await page.evaluate(`let events = ${JSON.stringify(events)}`);
+
+    page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
+  });
+
+  afterEach(async () => {
+    await page.close();
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  describe('webgl', () => {
+    it('should output simple webgl object', async () => {
+      await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events, {
+        UNSAFE_replayCanvas: true,
+      });
+      replayer.play(2500);
+    `);
+
+      const image = await page.screenshot();
+      expect(image).toMatchImageSnapshot();
+    });
+  });
+});
diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts
index 45d427eecf..333028e7b8 100644
--- a/packages/rrweb/test/utils.ts
+++ b/packages/rrweb/test/utils.ts
@@ -7,6 +7,10 @@ import {
 } from '../src/types';
 import * as puppeteer from 'puppeteer';
 import { format } from 'prettier';
+import * as path from 'path';
+import * as http from 'http';
+import * as url from 'url';
+import * as fs from 'fs';
 
 export async function launchPuppeteer() {
   return await puppeteer.launch({
@@ -15,10 +19,65 @@ export async function launchPuppeteer() {
       width: 1920,
       height: 1080,
     },
+    // devtools: true,
     args: ['--no-sandbox'],
   });
 }
 
+interface IMimeType {
+  [key: string]: string;
+}
+
+export const startServer = (defaultPort: number = 3030) =>
+  new Promise<http.Server>((resolve) => {
+    const mimeType: IMimeType = {
+      '.html': 'text/html',
+      '.js': 'text/javascript',
+      '.css': 'text/css',
+    };
+    const s = http.createServer((req, res) => {
+      const parsedUrl = url.parse(req.url!);
+      const sanitizePath = path
+        .normalize(parsedUrl.pathname!)
+        .replace(/^(\.\.[\/\\])+/, '');
+      let pathname = path.join(__dirname, sanitizePath);
+
+      try {
+        const data = fs.readFileSync(pathname);
+        const ext = path.parse(pathname).ext;
+        res.setHeader('Content-type', mimeType[ext] || 'text/plain');
+        res.setHeader('Access-Control-Allow-Origin', '*');
+        res.setHeader('Access-Control-Allow-Methods', 'GET');
+        res.setHeader('Access-Control-Allow-Headers', 'Content-type');
+        setTimeout(() => {
+          res.end(data);
+          // mock delay
+        }, 100);
+      } catch (error) {
+        res.end();
+      }
+    });
+    s.listen(defaultPort)
+      .on('listening', () => {
+        resolve(s);
+      })
+      .on('error', (e) => {
+        console.log('port in use, trying next one');
+        s.listen().on('listening', () => {
+          resolve(s);
+        });
+      });
+  });
+
+export function getServerURL(server: http.Server): string {
+  const address = server.address();
+  if (address && typeof address !== 'string') {
+    return `http://localhost:${address.port}`;
+  } else {
+    return `${address}`;
+  }
+}
+
 /**
  * Puppeteer may cast random mouse move which make our tests flaky.
  * So we only do snapshot test with filtered events.
@@ -133,9 +192,18 @@ function stringifyDomSnapshot(mhtml: string): string {
 }
 
 export function assertSnapshot(snapshots: eventWithTime[]) {
+  expect(snapshots).toBeDefined();
   expect(stringifySnapshots(snapshots)).toMatchSnapshot();
 }
 
+export function replaceLast(str: string, find: string, replace: string) {
+  const index = str.lastIndexOf(find);
+  if (index === -1) {
+    return str;
+  }
+  return str.substring(0, index) + replace + str.substring(index + find.length);
+}
+
 export async function assertDomSnapshot(
   page: puppeteer.Page,
   filename: string,
@@ -338,3 +406,86 @@ export const sampleStyleSheetRemoveEvents: eventWithTime[] = [
     timestamp: now + 2000,
   },
 ];
+
+export const polyfillWebGLGlobals = () => {
+  // polyfill as jsdom does not have support for these classes
+  // consider replacing with https://www.npmjs.com/package/canvas
+  class WebGLActiveInfo {
+    constructor() {}
+  }
+
+  global.WebGLActiveInfo = WebGLActiveInfo as any;
+  class WebGLBuffer {
+    constructor() {}
+  }
+
+  global.WebGLBuffer = WebGLBuffer as any;
+  class WebGLFramebuffer {
+    constructor() {}
+  }
+
+  global.WebGLFramebuffer = WebGLFramebuffer as any;
+  class WebGLProgram {
+    constructor() {}
+  }
+
+  global.WebGLProgram = WebGLProgram as any;
+  class WebGLRenderbuffer {
+    constructor() {}
+  }
+
+  global.WebGLRenderbuffer = WebGLRenderbuffer as any;
+  class WebGLShader {
+    constructor() {}
+  }
+
+  global.WebGLShader = WebGLShader as any;
+  class WebGLShaderPrecisionFormat {
+    constructor() {}
+  }
+
+  global.WebGLShaderPrecisionFormat = WebGLShaderPrecisionFormat as any;
+  class WebGLTexture {
+    constructor() {}
+  }
+
+  global.WebGLTexture = WebGLTexture as any;
+  class WebGLUniformLocation {
+    constructor() {}
+  }
+
+  global.WebGLUniformLocation = WebGLUniformLocation as any;
+  class WebGLVertexArrayObject {
+    constructor() {}
+  }
+
+  global.WebGLVertexArrayObject = WebGLVertexArrayObject as any;
+
+  class ImageData {
+    public data: Uint8ClampedArray;
+    public width: number;
+    public height: number;
+    constructor(data: Uint8ClampedArray, width: number, height: number) {
+      this.data = data;
+      this.width = width;
+      this.height = height;
+    }
+  }
+
+  global.ImageData = ImageData as any;
+
+  class WebGL2RenderingContext {
+    constructor() {}
+  }
+  global.WebGL2RenderingContext = WebGL2RenderingContext as any;
+};
+
+export async function waitForRAF(page: puppeteer.Page) {
+  return await page.evaluate(() => {
+    return new Promise((resolve) => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(resolve);
+      });
+    });
+  });
+}
diff --git a/packages/rrweb/tsconfig.json b/packages/rrweb/tsconfig.json
index 624bc19af8..6ac48c750c 100644
--- a/packages/rrweb/tsconfig.json
+++ b/packages/rrweb/tsconfig.json
@@ -13,5 +13,9 @@
     "downlevelIteration": true
   },
   "exclude": ["test"],
-  "include": ["src", "node_modules/@types/css-font-loading-module/index.d.ts"]
+  "include": [
+    "src",
+    "node_modules/@types/css-font-loading-module/index.d.ts",
+    "node_modules/@types/jest-image-snapshot/index.d.ts"
+  ]
 }
diff --git a/packages/rrweb/typings/record/mutation.d.ts b/packages/rrweb/typings/record/mutation.d.ts
index e47b119721..1e6d6f0c78 100644
--- a/packages/rrweb/typings/record/mutation.d.ts
+++ b/packages/rrweb/typings/record/mutation.d.ts
@@ -1,6 +1,7 @@
 import { MaskInputOptions, SlimDOMOptions, MaskTextFn, MaskInputFn } from 'rrweb-snapshot';
 import { mutationRecord, blockClass, maskTextClass, mutationCallBack, Mirror } from '../types';
 import { IframeManager } from './iframe-manager';
+import { CanvasManager } from './observers/canvas/canvas-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
 export default class MutationBuffer {
     private frozen;
@@ -29,12 +30,14 @@ export default class MutationBuffer {
     private mirror;
     private iframeManager;
     private shadowDomManager;
-    init(cb: mutationCallBack, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, inlineImages: boolean, slimDOMOptions: SlimDOMOptions, doc: Document, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager): void;
+    private canvasManager;
+    init(cb: mutationCallBack, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, inlineImages: boolean, slimDOMOptions: SlimDOMOptions, doc: Document, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager, canvasManager: CanvasManager): void;
     freeze(): void;
     unfreeze(): void;
     isFrozen(): boolean;
     lock(): void;
     unlock(): void;
+    reset(): void;
     processMutations: (mutations: mutationRecord[]) => void;
     emit: () => void;
     private processMutation;
diff --git a/packages/rrweb/typings/record/observer.d.ts b/packages/rrweb/typings/record/observer.d.ts
index 58965d552d..1e23ced21c 100644
--- a/packages/rrweb/typings/record/observer.d.ts
+++ b/packages/rrweb/typings/record/observer.d.ts
@@ -3,8 +3,9 @@ import { mutationCallBack, observerParam, listenerHandler, scrollCallback, block
 import MutationBuffer from './mutation';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
+import { CanvasManager } from './observers/canvas/canvas-manager';
 export declare const mutationBuffers: MutationBuffer[];
-export declare function initMutationObserver(cb: mutationCallBack, doc: Document, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, inlineImages: boolean, slimDOMOptions: SlimDOMOptions, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager, rootEl: Node): MutationObserver;
+export declare function initMutationObserver(cb: mutationCallBack, doc: Document, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, inlineImages: boolean, slimDOMOptions: SlimDOMOptions, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager, canvasManager: CanvasManager, rootEl: Node): MutationObserver;
 export declare function initScrollObserver(cb: scrollCallback, doc: Document, mirror: Mirror, blockClass: blockClass, sampling: SamplingStrategy): listenerHandler;
 export declare const INPUT_TAGS: string[];
 export declare function initObservers(o: observerParam, hooks?: hooksParam): listenerHandler;
diff --git a/packages/rrweb/typings/record/observers/canvas/2d.d.ts b/packages/rrweb/typings/record/observers/canvas/2d.d.ts
new file mode 100644
index 0000000000..cb7b7f2e94
--- /dev/null
+++ b/packages/rrweb/typings/record/observers/canvas/2d.d.ts
@@ -0,0 +1,2 @@
+import { blockClass, canvasManagerMutationCallback, IWindow, listenerHandler, Mirror } from '../../../types';
+export default function initCanvas2DMutationObserver(cb: canvasManagerMutationCallback, win: IWindow, blockClass: blockClass, mirror: Mirror): listenerHandler;
diff --git a/packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts b/packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts
new file mode 100644
index 0000000000..6004d787ca
--- /dev/null
+++ b/packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts
@@ -0,0 +1,31 @@
+import { blockClass, canvasMutationCallback, IWindow, Mirror } from '../../../types';
+export declare type RafStamps = {
+    latestId: number;
+    invokeId: number | null;
+};
+export declare class CanvasManager {
+    private pendingCanvasMutations;
+    private rafStamps;
+    private mirror;
+    private mutationCb;
+    private resetObservers;
+    private frozen;
+    private locked;
+    reset(): void;
+    freeze(): void;
+    unfreeze(): void;
+    lock(): void;
+    unlock(): void;
+    constructor(options: {
+        mutationCb: canvasMutationCallback;
+        win: IWindow;
+        blockClass: blockClass;
+        mirror: Mirror;
+    });
+    private processMutation;
+    private initCanvasMutationObserver;
+    private startPendingCanvasMutationFlusher;
+    private startRAFTimestamping;
+    flushPendingCanvasMutations(): void;
+    flushPendingCanvasMutationFor(canvas: HTMLCanvasElement, id: number): void;
+}
diff --git a/packages/rrweb/typings/record/observers/canvas/canvas.d.ts b/packages/rrweb/typings/record/observers/canvas/canvas.d.ts
new file mode 100644
index 0000000000..359d95928d
--- /dev/null
+++ b/packages/rrweb/typings/record/observers/canvas/canvas.d.ts
@@ -0,0 +1,2 @@
+import { blockClass, IWindow, listenerHandler } from '../../../types';
+export default function initCanvasContextObserver(win: IWindow, blockClass: blockClass): listenerHandler;
diff --git a/packages/rrweb/typings/record/observers/canvas/serialize-args.d.ts b/packages/rrweb/typings/record/observers/canvas/serialize-args.d.ts
new file mode 100644
index 0000000000..5a1c90ce77
--- /dev/null
+++ b/packages/rrweb/typings/record/observers/canvas/serialize-args.d.ts
@@ -0,0 +1,6 @@
+import { IWindow, SerializedWebGlArg } from '../../../types';
+export declare function variableListFor(ctx: WebGLRenderingContext | WebGL2RenderingContext, ctor: string): any[];
+export declare const saveWebGLVar: (value: any, win: IWindow, ctx: WebGL2RenderingContext | WebGLRenderingContext) => number | void;
+export declare function serializeArg(value: any, win: IWindow, ctx: WebGL2RenderingContext | WebGLRenderingContext): SerializedWebGlArg;
+export declare const serializeArgs: (args: Array<any>, win: IWindow, ctx: WebGLRenderingContext | WebGL2RenderingContext) => SerializedWebGlArg[];
+export declare const isInstanceOfWebGLObject: (value: any, win: IWindow) => value is WebGLShader | WebGLBuffer | WebGLVertexArrayObject | WebGLTexture | WebGLProgram | WebGLActiveInfo | WebGLUniformLocation | WebGLFramebuffer | WebGLRenderbuffer | WebGLShaderPrecisionFormat;
diff --git a/packages/rrweb/typings/record/observers/canvas/webgl.d.ts b/packages/rrweb/typings/record/observers/canvas/webgl.d.ts
new file mode 100644
index 0000000000..0f446770a5
--- /dev/null
+++ b/packages/rrweb/typings/record/observers/canvas/webgl.d.ts
@@ -0,0 +1,2 @@
+import { blockClass, canvasManagerMutationCallback, IWindow, listenerHandler, Mirror } from '../../../types';
+export default function initCanvasWebGLMutationObserver(cb: canvasManagerMutationCallback, win: IWindow, blockClass: blockClass, mirror: Mirror): listenerHandler;
diff --git a/packages/rrweb/typings/record/observers/canvas/webgl2.d.ts b/packages/rrweb/typings/record/observers/canvas/webgl2.d.ts
new file mode 100644
index 0000000000..c1263a8f58
--- /dev/null
+++ b/packages/rrweb/typings/record/observers/canvas/webgl2.d.ts
@@ -0,0 +1,2 @@
+import { blockClass, canvasMutationCallback, IWindow, listenerHandler, Mirror } from '../../../types';
+export default function initCanvasWebGLMutationObserver(cb: canvasMutationCallback, win: IWindow, blockClass: blockClass, mirror: Mirror): listenerHandler;
diff --git a/packages/rrweb/typings/record/shadow-dom-manager.d.ts b/packages/rrweb/typings/record/shadow-dom-manager.d.ts
index d31d572759..c014298c50 100644
--- a/packages/rrweb/typings/record/shadow-dom-manager.d.ts
+++ b/packages/rrweb/typings/record/shadow-dom-manager.d.ts
@@ -1,6 +1,7 @@
 import { mutationCallBack, blockClass, maskTextClass, Mirror, scrollCallback, SamplingStrategy } from '../types';
 import { MaskInputOptions, SlimDOMOptions, MaskTextFn, MaskInputFn } from 'rrweb-snapshot';
 import { IframeManager } from './iframe-manager';
+import { CanvasManager } from './observers/canvas/canvas-manager';
 declare type BypassOptions = {
     blockClass: blockClass;
     blockSelector: string | null;
@@ -15,6 +16,7 @@ declare type BypassOptions = {
     sampling: SamplingStrategy;
     slimDOMOptions: SlimDOMOptions;
     iframeManager: IframeManager;
+    canvasManager: CanvasManager;
 };
 export declare class ShadowDomManager {
     private mutationCb;
diff --git a/packages/rrweb/typings/replay/canvas/2d.d.ts b/packages/rrweb/typings/replay/canvas/2d.d.ts
new file mode 100644
index 0000000000..338cbf28f9
--- /dev/null
+++ b/packages/rrweb/typings/replay/canvas/2d.d.ts
@@ -0,0 +1,9 @@
+import { Replayer } from '../';
+import { canvasMutationCommand } from '../../types';
+export default function canvasMutation({ event, mutation, target, imageMap, errorHandler, }: {
+    event: Parameters<Replayer['applyIncremental']>[0];
+    mutation: canvasMutationCommand;
+    target: HTMLCanvasElement;
+    imageMap: Replayer['imageMap'];
+    errorHandler: Replayer['warnCanvasMutationFailed'];
+}): void;
diff --git a/packages/rrweb/typings/replay/canvas/index.d.ts b/packages/rrweb/typings/replay/canvas/index.d.ts
new file mode 100644
index 0000000000..72c6bdfce3
--- /dev/null
+++ b/packages/rrweb/typings/replay/canvas/index.d.ts
@@ -0,0 +1,9 @@
+import { Replayer } from '..';
+import { canvasMutationData } from '../../types';
+export default function canvasMutation({ event, mutation, target, imageMap, errorHandler, }: {
+    event: Parameters<Replayer['applyIncremental']>[0];
+    mutation: canvasMutationData;
+    target: HTMLCanvasElement;
+    imageMap: Replayer['imageMap'];
+    errorHandler: Replayer['warnCanvasMutationFailed'];
+}): void;
diff --git a/packages/rrweb/typings/replay/canvas/webgl.d.ts b/packages/rrweb/typings/replay/canvas/webgl.d.ts
new file mode 100644
index 0000000000..6e51941047
--- /dev/null
+++ b/packages/rrweb/typings/replay/canvas/webgl.d.ts
@@ -0,0 +1,11 @@
+import { Replayer } from '../';
+import { CanvasContext, canvasMutationCommand, SerializedWebGlArg } from '../../types';
+export declare function variableListFor(ctx: WebGLRenderingContext | WebGL2RenderingContext, ctor: string): any[];
+export declare function deserializeArg(imageMap: Replayer['imageMap'], ctx: WebGLRenderingContext | WebGL2RenderingContext): (arg: SerializedWebGlArg) => any;
+export default function webglMutation({ mutation, target, type, imageMap, errorHandler, }: {
+    mutation: canvasMutationCommand;
+    target: HTMLCanvasElement;
+    type: CanvasContext;
+    imageMap: Replayer['imageMap'];
+    errorHandler: Replayer['warnCanvasMutationFailed'];
+}): void;
diff --git a/packages/rrweb/typings/replay/index.d.ts b/packages/rrweb/typings/replay/index.d.ts
index 2c49091b4b..05e89b38be 100644
--- a/packages/rrweb/typings/replay/index.d.ts
+++ b/packages/rrweb/typings/replay/index.d.ts
@@ -51,7 +51,10 @@ export declare class Replayer {
     private attachDocumentToIframe;
     private collectIframeAndAttachDocument;
     private waitForStylesheetLoad;
+    private hasImageArg;
+    private getImageArgs;
     private preloadAllImages;
+    private preloadImages;
     private applyIncremental;
     private applyMutation;
     private applyScroll;
diff --git a/packages/rrweb/typings/types.d.ts b/packages/rrweb/typings/types.d.ts
index 181d54e53c..9c3bd9c34f 100644
--- a/packages/rrweb/typings/types.d.ts
+++ b/packages/rrweb/typings/types.d.ts
@@ -4,6 +4,7 @@ import { PackFn, UnpackFn } from './packer/base';
 import { IframeManager } from './record/iframe-manager';
 import { ShadowDomManager } from './record/shadow-dom-manager';
 import type { Replayer } from './replay';
+import { CanvasManager } from './record/observers/canvas/canvas-manager';
 export declare enum EventType {
     DomContentLoaded = 0,
     Load = 1,
@@ -187,6 +188,7 @@ export declare type observerParam = {
     mirror: Mirror;
     iframeManager: IframeManager;
     shadowDomManager: ShadowDomManager;
+    canvasManager: CanvasManager;
     plugins: Array<{
         observer: Function;
         callback: Function;
@@ -283,6 +285,24 @@ export declare enum MouseInteractions {
     TouchEnd = 9,
     TouchCancel = 10
 }
+export declare enum CanvasContext {
+    '2D' = 0,
+    WebGL = 1,
+    WebGL2 = 2
+}
+export declare type SerializedWebGlArg = {
+    rr_type: 'ArrayBuffer';
+    base64: string;
+} | {
+    rr_type: string;
+    src: string;
+} | {
+    rr_type: string;
+    args: Array<SerializedWebGlArg>;
+} | {
+    rr_type: string;
+    index: number;
+} | string | number | boolean | null | SerializedWebGlArg[];
 declare type mouseInteractionParam = {
     type: MouseInteractions;
     id: number;
@@ -322,13 +342,24 @@ export declare type styleDeclarationParam = {
     };
 };
 export declare type styleDeclarationCallback = (s: styleDeclarationParam) => void;
-export declare type canvasMutationCallback = (p: canvasMutationParam) => void;
-export declare type canvasMutationParam = {
-    id: number;
+export declare type canvasMutationCommand = {
     property: string;
     args: Array<unknown>;
     setter?: true;
 };
+export declare type canvasMutationParam = {
+    id: number;
+    type: CanvasContext;
+    commands: canvasMutationCommand[];
+} | ({
+    id: number;
+    type: CanvasContext;
+} & canvasMutationCommand);
+export declare type canvasMutationWithType = {
+    type: CanvasContext;
+} & canvasMutationCommand;
+export declare type canvasMutationCallback = (p: canvasMutationParam) => void;
+export declare type canvasManagerMutationCallback = (target: HTMLCanvasElement, p: canvasMutationWithType) => void;
 export declare type fontParam = {
     family: string;
     fontSource: string;
diff --git a/yarn.lock b/yarn.lock
index 2ac3e4a726..17ab28e258 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1948,15 +1948,16 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@^27.0.1":
-  version "27.4.0"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.4.0.tgz#037ab8b872067cae842a320841693080f9cb84ed"
-  integrity sha512-gHl8XuC1RZ8H2j5sHv/JqsaxXkDDM9iDOgu0Wp8sjs4u/snb2PVehyWXJPr+ORA0RPpgw231mnutWI1+0hgjIQ==
+"@types/jest-image-snapshot@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@types/jest-image-snapshot/-/jest-image-snapshot-4.3.1.tgz#1382e9e155d6e29af0a81efce1056aaba92110c9"
+  integrity sha512-WDdUruGF14C53axe/mNDgQP2YIhtcwXrwmmVP8eOGyfNTVD+FbxWjWR7RTU+lzEy4K6V6+z7nkVDm/auI/r3xQ==
   dependencies:
-    jest-diff "^27.0.0"
-    pretty-format "^27.0.0"
+    "@types/jest" "*"
+    "@types/pixelmatch" "*"
+    ssim.js "^3.1.1"
 
-"@types/jest@^27.0.2":
+"@types/jest@*", "@types/jest@^27.0.2":
   version "27.0.2"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.0.2.tgz#ac383c4d4aaddd29bbf2b916d8d105c304a5fcd7"
   integrity sha512-4dRxkS/AFX0c5XW6IPMNOydLn2tEhNhJV7DnYK+0bjoJZ+QTmfucBlihX7aoEsh/ocYtkLC73UbnBXBXIxsULA==
@@ -1964,6 +1965,14 @@
     jest-diff "^27.0.0"
     pretty-format "^27.0.0"
 
+"@types/jest@^27.0.1":
+  version "27.4.0"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.4.0.tgz#037ab8b872067cae842a320841693080f9cb84ed"
+  integrity sha512-gHl8XuC1RZ8H2j5sHv/JqsaxXkDDM9iDOgu0Wp8sjs4u/snb2PVehyWXJPr+ORA0RPpgw231mnutWI1+0hgjIQ==
+  dependencies:
+    jest-diff "^27.0.0"
+    pretty-format "^27.0.0"
+
 "@types/jsdom@^16.2.12", "@types/jsdom@^16.2.4":
   version "16.2.13"
   resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-16.2.13.tgz#126c8b7441b159d6234610a48de77b6066f1823f"
@@ -2023,6 +2032,13 @@
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.1.tgz#f8ae4fbcd2b9ba4ff934698e28778961f9cb22ca"
   integrity sha512-ARATsLdrGPUnaBvxLhUlnltcMgn7pQG312S8ccdYlnyijabrX9RN/KN/iGj9Am96CoW8e/K9628BA7Bv4XHdrA==
 
+"@types/pixelmatch@*":
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/@types/pixelmatch/-/pixelmatch-5.2.4.tgz#ca145cc5ede1388c71c68edf2d1f5190e5ddd0f6"
+  integrity sha512-HDaSHIAv9kwpMN7zlmwfTv6gax0PiporJOipcrGsVNF3Ba+kryOZc0Pio5pn6NhisgWr7TaajlPEKTbTAypIBQ==
+  dependencies:
+    "@types/node" "*"
+
 "@types/prettier@^2.1.5":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.4.1.tgz#e1303048d5389563e130f5bdd89d37a99acb75eb"
@@ -2045,7 +2061,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/puppeteer@^5.4.3":
+"@types/puppeteer@^5.4.4":
   version "5.4.4"
   resolved "https://registry.yarnpkg.com/@types/puppeteer/-/puppeteer-5.4.4.tgz#e92abeccc4f46207c3e1b38934a1246be080ccd0"
   integrity sha512-3Nau+qi69CN55VwZb0ATtdUAlYlqOOQ3OfQfq0Hqgc4JMFXiQT/XInlwQ9g6LbicDslE6loIFsXFklGh5XmI6Q==
@@ -2743,6 +2759,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base64-arraybuffer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz#87bd13525626db4a9838e00a508c2b73efcf348c"
+  integrity sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA==
+
 base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -3291,9 +3312,9 @@ color-name@^1.0.0, color-name@~1.1.4:
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
 color-string@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.6.0.tgz#c3915f61fe267672cb7e1e064c9d692219f6c312"
-  integrity sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.8.2.tgz#08bd49fa5f3889c27b0c670052ed746dd7a671de"
+  integrity sha512-w5ZkKRdLsc5NOYsmnpS2DpyRW71npwZGwbRpLrJTuqjfTs2Bhrba7UiV59IX9siBlCPl2pne5NtiwnVWUzvYFA==
   dependencies:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
@@ -4174,7 +4195,33 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.17.2, es-abstract@^1.18.0-next.2, es-abstract@^1.18.2:
+es-abstract@^1.17.2, es-abstract@^1.19.1:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.19.1.tgz#d4885796876916959de78edaa0df456627115ec3"
+  integrity sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    get-intrinsic "^1.1.1"
+    get-symbol-description "^1.0.0"
+    has "^1.0.3"
+    has-symbols "^1.0.2"
+    internal-slot "^1.0.3"
+    is-callable "^1.2.4"
+    is-negative-zero "^2.0.1"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.1"
+    is-string "^1.0.7"
+    is-weakref "^1.0.1"
+    object-inspect "^1.11.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.2"
+    string.prototype.trimend "^1.0.4"
+    string.prototype.trimstart "^1.0.4"
+    unbox-primitive "^1.0.1"
+
+es-abstract@^1.18.0-next.2:
   version "1.18.3"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.3.tgz#25c4c3380a27aa203c44b2b685bba94da31b63e0"
   integrity sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==
@@ -4898,7 +4945,7 @@ get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
   integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
@@ -4932,6 +4979,11 @@ get-port@^5.1.1:
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-5.1.1.tgz#0469ed07563479de6efb986baf053dcd7d4e3193"
   integrity sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==
 
+get-stdin@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-5.0.1.tgz#122e161591e21ff4c52530305693f20e6393a398"
+  integrity sha1-Ei4WFZHiH/TFJTAwVpPyDmOTo5g=
+
 get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -4949,6 +5001,14 @@ get-stream@^6.0.0:
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
 
+get-symbol-description@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
+  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
 getpass@^0.1.1:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
@@ -5092,6 +5152,11 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+glur@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/glur/-/glur-1.1.2.tgz#f20ea36db103bfc292343921f1f91e83c3467689"
+  integrity sha1-8g6jbbEDv8KSNDkh8fkeg8NGdok=
+
 got@^6.7.1:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
@@ -5149,6 +5214,11 @@ hard-rejection@^2.1.0:
   resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
   integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
 
+harmony-reflect@^1.4.6:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.2.tgz#31ecbd32e648a34d030d86adb67d4d47547fe710"
+  integrity sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -5181,6 +5251,13 @@ has-symbols@^1.0.1, has-symbols@^1.0.2:
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
   integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
 
+has-tostringtag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
+  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+  dependencies:
+    has-symbols "^1.0.2"
+
 has-unicode@^2.0.0, has-unicode@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@@ -5334,6 +5411,13 @@ icss-replace-symbols@1.1.0, icss-replace-symbols@^1.1.0:
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
   integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
 
+identity-obj-proxy@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"
+  integrity sha1-lNK9qWCERT7zb7xarsN+D3nx/BQ=
+  dependencies:
+    harmony-reflect "^1.4.6"
+
 ieee754@^1.1.13:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
@@ -5513,6 +5597,15 @@ inquirer@^7.3.3:
     strip-ansi "^6.0.0"
     through "^2.3.6"
 
+internal-slot@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
+  integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==
+  dependencies:
+    get-intrinsic "^1.1.0"
+    has "^1.0.3"
+    side-channel "^1.0.4"
+
 ip@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
@@ -5567,6 +5660,11 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.3:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.3.tgz#8b1e0500b73a1d76c70487636f368e519de8db8e"
   integrity sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==
 
+is-callable@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
+  integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
+
 is-ci@^1.0.10:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
@@ -5804,6 +5902,14 @@ is-regex@^1.1.3:
     call-bind "^1.0.2"
     has-symbols "^1.0.2"
 
+is-regex@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
 is-resolvable@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
@@ -5814,6 +5920,11 @@ is-retry-allowed@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4"
   integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==
 
+is-shared-array-buffer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz#97b0c85fbdacb59c9c446fe653b82cf2b5b7cfe6"
+  integrity sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==
+
 is-ssh@^1.3.0:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/is-ssh/-/is-ssh-1.3.3.tgz#7f133285ccd7f2c2c7fc897b771b53d95a2b2c7e"
@@ -5836,6 +5947,13 @@ is-string@^1.0.5, is-string@^1.0.6:
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.6.tgz#3fe5d5992fb0d93404f32584d4b0179a71b54a5f"
   integrity sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w==
 
+is-string@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
+  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
 is-symbol@^1.0.2, is-symbol@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
@@ -5855,6 +5973,13 @@ is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
+is-weakref@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.1.tgz#842dba4ec17fa9ac9850df2d6efbc1737274f2a2"
+  integrity sha512-b2jKc2pQZjaeFYWEf7ScFj+Be1I+PXmlu572Q8coTXZ+LD/QQZ7ShPMst8h16riVgyXTQwUsFEl74mDvc/3MHQ==
+  dependencies:
+    call-bind "^1.0.0"
+
 isarray@1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -6277,6 +6402,21 @@ jest-haste-map@^27.4.6:
   optionalDependencies:
     fsevents "^2.3.2"
 
+jest-image-snapshot@^4.5.1:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/jest-image-snapshot/-/jest-image-snapshot-4.5.1.tgz#79fe0419c7729eb1be6c873365307a7b60f5cda0"
+  integrity sha512-0YkgupgkkCx0wIZkxvqs/oNiUT0X0d2WTpUhaAp+Dy6CpqBUZMRTIZo4KR1f+dqmx6WXrLCvecjnHLIsLkI+gQ==
+  dependencies:
+    chalk "^1.1.3"
+    get-stdin "^5.0.1"
+    glur "^1.1.2"
+    lodash "^4.17.4"
+    mkdirp "^0.5.1"
+    pixelmatch "^5.1.0"
+    pngjs "^3.4.0"
+    rimraf "^2.6.2"
+    ssim.js "^3.1.1"
+
 jest-jasmine2@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.2.4.tgz#4a1608133dbdb4d68b5929bfd785503ed9c9ba51"
@@ -7994,7 +8134,7 @@ object-assign@^4.0.1, object-assign@^4.1.0:
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
 
-object-inspect@^1.10.3, object-inspect@^1.9.0:
+object-inspect@^1.10.3, object-inspect@^1.11.0, object-inspect@^1.9.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.11.0.tgz#9dceb146cedd4148a0d9e51ab88d34cf509922b1"
   integrity sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==
@@ -8014,7 +8154,7 @@ object.assign@^4.1.2:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
-object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.0, object.getownpropertydescriptors@^2.1.1:
+object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.2.tgz#1bd63aeacf0d5d2d2f31b5e393b03a7c601a23f7"
   integrity sha512-WtxeKSzfBjlzL+F9b7M7hewDzMwy+C8NRssHd1YrNlzHzIDrXcXiNOMrezdAEM4UXixgV+vvnyBeN7Rygl2ttQ==
@@ -8023,6 +8163,15 @@ object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.0
     define-properties "^1.1.3"
     es-abstract "^1.18.0-next.2"
 
+object.getownpropertydescriptors@^2.1.0:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.3.tgz#b223cf38e17fefb97a63c10c91df72ccb386df9e"
+  integrity sha512-VdDoCwvJI4QdC6ndjpqFmoL3/+HxffFBbcJzKi5hwLLqqx3mdbedRpfZDdK0SrOSauj8X4GzBvnDZl4vTN7dOw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
 object.omit@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
@@ -8032,13 +8181,13 @@ object.omit@^2.0.0:
     is-extendable "^0.1.1"
 
 object.values@^1.1.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.4.tgz#0d273762833e816b693a637d30073e7051535b30"
-  integrity sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg==
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.5.tgz#959f63e3ce9ef108720333082131e4a459b716ac"
+  integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.2"
+    es-abstract "^1.19.1"
 
 on-finished@~2.3.0:
   version "2.3.0"
@@ -8438,6 +8587,13 @@ pirates@^4.0.4:
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.4.tgz#07df81e61028e402735cdd49db701e4885b4e6e6"
   integrity sha512-ZIrVPH+A52Dw84R0L3/VS9Op04PuQ2SEoJL6bkshmiTic/HldyW9Tf7oH5mhJZBK7NmDx27vSMrYEXPXclpDKw==
 
+pixelmatch@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/pixelmatch/-/pixelmatch-5.2.1.tgz#9e4e4f4aa59648208a31310306a5bed5522b0d65"
+  integrity sha512-WjcAdYSnKrrdDdqTcVEY7aB7UhhwjYQKYhHiBXdJef0MOaQeYpUdQ+iVyBLa5YBKS8MPVPPMX7rpOByISLpeEQ==
+  dependencies:
+    pngjs "^4.0.1"
+
 pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
@@ -8445,6 +8601,16 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+pngjs@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
+  integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
+
+pngjs@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-4.0.1.tgz#f803869bb2fc1bfe1bf99aa4ec21c108117cfdbe"
+  integrity sha512-rf5+2/ioHeQxR6IxuYNYGFytUyG3lma/WW1nsmjeHlWwtb2aByla6dkVc8pmJ9nplzkTA0q2xx7mMWrOTqT4Gg==
+
 postcss-calc@^7.0.1:
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.5.tgz#f8a6e99f12e619c2ebc23cf6c486fdc15860933e"
@@ -8812,13 +8978,12 @@ postcss@^6.0.1, postcss@^6.0.11:
     supports-color "^5.4.0"
 
 postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.27:
-  version "7.0.36"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb"
-  integrity sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==
+  version "7.0.39"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
+  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
   dependencies:
-    chalk "^2.4.2"
+    picocolors "^0.2.1"
     source-map "^0.6.1"
-    supports-color "^6.1.0"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -9391,7 +9556,7 @@ rgba-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
-rimraf@^2.6.1, rimraf@^2.6.3:
+rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -9440,9 +9605,9 @@ rollup-plugin-postcss@^3.1.1:
     style-inject "^0.3.0"
 
 rollup-plugin-rename-node-modules@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-rename-node-modules/-/rollup-plugin-rename-node-modules-1.1.0.tgz#c73de5fed61b997857993813a7053285e2cca2dd"
-  integrity sha512-JpfsJ7NYI/4OdqWvZ/BY6fgjZb5j7sRFvHMv8EU0zrFiNUcW4ke9tw7WXImsHnjq7Bp3xv+UILRPpA7plOa38Q==
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-rename-node-modules/-/rollup-plugin-rename-node-modules-1.2.0.tgz#f1f1bb2192d1bbec258569bf6bda097002d7dbdf"
+  integrity sha512-IKsS3eJXHLAMXIndzNso9ijWJw1V3mqubRc2gb67v7VuLX9t41LObXqciM0JC3j7/WrHeptG47cejFU0qxXUJA==
   dependencies:
     estree-walker "^2.0.1"
     magic-string "^0.25.7"
@@ -9856,6 +10021,11 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
+ssim.js@^3.1.1:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/ssim.js/-/ssim.js-3.5.0.tgz#d7276b9ee99b57a5ff0db34035f02f35197e62df"
+  integrity sha512-Aj6Jl2z6oDmgYFFbQqK7fght19bXdOxY7Tj03nF+03M9gCBAjeIiO8/PlEGMfKDwYpw4q6iBqVq2YuREorGg/g==
+
 ssri@^8.0.0, ssri@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/ssri/-/ssri-8.0.1.tgz#638e4e439e2ffbd2cd289776d5ca457c4f51a2af"
@@ -10075,13 +10245,6 @@ supports-color@^5.3.0, supports-color@^5.4.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
-  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
-  dependencies:
-    has-flag "^3.0.0"
-
 supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
@@ -10988,7 +11151,12 @@ ws@^6.1.0:
   dependencies:
     async-limiter "~1.0.0"
 
-ws@^7.2.3, ws@^7.4.3, ws@^7.4.5:
+ws@^7.2.3:
+  version "7.5.6"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.6.tgz#e59fc509fb15ddfb65487ee9765c5a51dec5fe7b"
+  integrity sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==
+
+ws@^7.4.3, ws@^7.4.5:
   version "7.5.3"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.3.tgz#160835b63c7d97bfab418fc1b8a9fced2ac01a74"
   integrity sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==

From 14ea6362ba2cb2880ef9a25bf86f82a1a7f8a031 Mon Sep 17 00:00:00 2001
From: yz-yu <yanzhen@smartx.com>
Date: Thu, 3 Feb 2022 20:00:47 +0800
Subject: [PATCH 504/524] impl sequential id plugins (#819)

Also introduce a new kind of plugin: event processor
---
 packages/rrweb/rollup.config.js               | 10 +++++
 .../src/plugins/sequential-id/record/index.ts | 31 +++++++++++++
 .../src/plugins/sequential-id/replay/index.ts | 39 +++++++++++++++++
 packages/rrweb/src/record/index.ts            | 43 ++++++++++++-------
 packages/rrweb/src/types.ts                   |  3 +-
 .../plugins/sequential-id/record/index.d.ts   |  6 +++
 .../plugins/sequential-id/replay/index.d.ts   |  7 +++
 packages/rrweb/typings/types.d.ts             |  3 +-
 8 files changed, 125 insertions(+), 17 deletions(-)
 create mode 100644 packages/rrweb/src/plugins/sequential-id/record/index.ts
 create mode 100644 packages/rrweb/src/plugins/sequential-id/replay/index.ts
 create mode 100644 packages/rrweb/typings/plugins/sequential-id/record/index.d.ts
 create mode 100644 packages/rrweb/typings/plugins/sequential-id/replay/index.d.ts

diff --git a/packages/rrweb/rollup.config.js b/packages/rrweb/rollup.config.js
index 65cfafc4a8..8d6a3c6633 100644
--- a/packages/rrweb/rollup.config.js
+++ b/packages/rrweb/rollup.config.js
@@ -93,6 +93,16 @@ const baseConfigs = [
     name: 'rrwebConsoleReplay',
     pathFn: toPluginPath('console', 'replay'),
   },
+  {
+    input: './src/plugins/sequential-id/record/index.ts',
+    name: 'rrwebSequentialIdRecord',
+    pathFn: toPluginPath('sequential-id', 'record'),
+  },
+  {
+    input: './src/plugins/sequential-id/replay/index.ts',
+    name: 'rrwebSequentialIdReplay',
+    pathFn: toPluginPath('sequential-id', 'replay'),
+  },
 ];
 
 let configs = [];
diff --git a/packages/rrweb/src/plugins/sequential-id/record/index.ts b/packages/rrweb/src/plugins/sequential-id/record/index.ts
new file mode 100644
index 0000000000..a439831191
--- /dev/null
+++ b/packages/rrweb/src/plugins/sequential-id/record/index.ts
@@ -0,0 +1,31 @@
+import { RecordPlugin } from '../../../types';
+
+export type SequentialIdOptions = {
+  key: string;
+};
+
+const defaultOptions: SequentialIdOptions = {
+  key: '_sid',
+};
+
+export const PLUGIN_NAME = 'rrweb/sequential-id@1';
+
+export const getRecordSequentialIdPlugin: (
+  options?: Partial<SequentialIdOptions>,
+) => RecordPlugin = (options) => {
+  const _options = options
+    ? Object.assign({}, defaultOptions, options)
+    : defaultOptions;
+  let id = 0;
+
+  return {
+    name: PLUGIN_NAME,
+    eventProcessor(event) {
+      Object.assign(event, {
+        [_options.key]: ++id,
+      });
+      return event;
+    },
+    options: _options,
+  };
+};
diff --git a/packages/rrweb/src/plugins/sequential-id/replay/index.ts b/packages/rrweb/src/plugins/sequential-id/replay/index.ts
new file mode 100644
index 0000000000..852a02cf36
--- /dev/null
+++ b/packages/rrweb/src/plugins/sequential-id/replay/index.ts
@@ -0,0 +1,39 @@
+import type { SequentialIdOptions } from '../record';
+import { ReplayPlugin, eventWithTime } from '../../../types';
+
+type Options = SequentialIdOptions & {
+  warnOnMissingId: boolean;
+};
+
+const defaultOptions: Options = {
+  key: '_sid',
+  warnOnMissingId: true,
+};
+
+export const getReplaySequentialIdPlugin: (
+  options?: Partial<Options>,
+) => ReplayPlugin = (options) => {
+  const { key, warnOnMissingId } = options
+    ? Object.assign({}, defaultOptions, options)
+    : defaultOptions;
+  let currentId = 1;
+
+  return {
+    handler(event: eventWithTime) {
+      if (key in event) {
+        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}"`,
+          );
+        } else {
+          currentId++;
+        }
+      } else if (warnOnMissingId) {
+        console.warn(
+          `[sequential-id-plugin]: failed to get id in key: "${key}"`,
+        );
+      }
+    },
+  };
+};
diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
index e4c9236596..e8d071c762 100644
--- a/packages/rrweb/src/record/index.ts
+++ b/packages/rrweb/src/record/index.ts
@@ -122,6 +122,17 @@ function record<T = eventWithTime>(
 
   let lastFullSnapshotEvent: eventWithTime;
   let incrementalSnapshotCount = 0;
+  const eventProcessor = (e: eventWithTime): T => {
+    for (const plugin of plugins || []) {
+      if (plugin.eventProcessor) {
+        e = plugin.eventProcessor(e);
+      }
+    }
+    if (packFn) {
+      e = (packFn(e) as unknown) as eventWithTime;
+    }
+    return (e as unknown) as T;
+  };
   wrappedEmit = (e: eventWithTime, isCheckout?: boolean) => {
     if (
       mutationBuffers[0]?.isFrozen() &&
@@ -136,7 +147,7 @@ function record<T = eventWithTime>(
       mutationBuffers.forEach((buf) => buf.unfreeze());
     }
 
-    emit(((packFn ? packFn(e) : e) as unknown) as T, isCheckout);
+    emit(eventProcessor(e), isCheckout);
     if (e.type === EventType.FullSnapshot) {
       lastFullSnapshotEvent = e;
       incrementalSnapshotCount = 0;
@@ -417,20 +428,22 @@ function record<T = eventWithTime>(
           shadowDomManager,
           canvasManager,
           plugins:
-            plugins?.map((p) => ({
-              observer: p.observer,
-              options: p.options,
-              callback: (payload: object) =>
-                wrappedEmit(
-                  wrapEvent({
-                    type: EventType.Plugin,
-                    data: {
-                      plugin: p.name,
-                      payload,
-                    },
-                  }),
-                ),
-            })) || [],
+            plugins
+              ?.filter((p) => p.observer)
+              ?.map((p) => ({
+                observer: p.observer!,
+                options: p.options,
+                callback: (payload: object) =>
+                  wrappedEmit(
+                    wrapEvent({
+                      type: EventType.Plugin,
+                      data: {
+                        plugin: p.name,
+                        payload,
+                      },
+                    }),
+                  ),
+              })) || [],
         },
         hooks,
       );
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index 74f8a52ffb..545eaaa9a0 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -205,7 +205,8 @@ export type SamplingStrategy = Partial<{
 
 export type RecordPlugin<TOptions = unknown> = {
   name: string;
-  observer: (cb: Function, win: IWindow, options: TOptions) => listenerHandler;
+  observer?: (cb: Function, win: IWindow, options: TOptions) => listenerHandler;
+  eventProcessor?: <TExtend>(event: eventWithTime) => eventWithTime & TExtend;
   options: TOptions;
 };
 
diff --git a/packages/rrweb/typings/plugins/sequential-id/record/index.d.ts b/packages/rrweb/typings/plugins/sequential-id/record/index.d.ts
new file mode 100644
index 0000000000..3311e19b3c
--- /dev/null
+++ b/packages/rrweb/typings/plugins/sequential-id/record/index.d.ts
@@ -0,0 +1,6 @@
+import { RecordPlugin } from '../../../types';
+export declare type SequentialIdOptions = {
+    key: string;
+};
+export declare const PLUGIN_NAME = "rrweb/sequential-id@1";
+export declare const getRecordSequentialIdPlugin: (options?: Partial<SequentialIdOptions>) => RecordPlugin;
diff --git a/packages/rrweb/typings/plugins/sequential-id/replay/index.d.ts b/packages/rrweb/typings/plugins/sequential-id/replay/index.d.ts
new file mode 100644
index 0000000000..a1eee69e1b
--- /dev/null
+++ b/packages/rrweb/typings/plugins/sequential-id/replay/index.d.ts
@@ -0,0 +1,7 @@
+import type { SequentialIdOptions } from '../record';
+import { ReplayPlugin } from '../../../types';
+declare type Options = SequentialIdOptions & {
+    warnOnMissingId: boolean;
+};
+export declare const getReplaySequentialIdPlugin: (options?: Partial<Options>) => ReplayPlugin;
+export {};
diff --git a/packages/rrweb/typings/types.d.ts b/packages/rrweb/typings/types.d.ts
index 9c3bd9c34f..2beecbc86a 100644
--- a/packages/rrweb/typings/types.d.ts
+++ b/packages/rrweb/typings/types.d.ts
@@ -128,7 +128,8 @@ export declare type SamplingStrategy = Partial<{
 }>;
 export declare type RecordPlugin<TOptions = unknown> = {
     name: string;
-    observer: (cb: Function, win: IWindow, options: TOptions) => listenerHandler;
+    observer?: (cb: Function, win: IWindow, options: TOptions) => listenerHandler;
+    eventProcessor?: <TExtend>(event: eventWithTime) => eventWithTime & TExtend;
     options: TOptions;
 };
 export declare type recordOptions<T> = {

From 38ff3d8f63847fcc87a06c01559bbc6eccfa0f33 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Thu, 3 Feb 2022 15:21:37 +0100
Subject: [PATCH 505/524] Only record canvas when specified (#825)

* Add very basic webgl support

* document the default

* only capture rr_dataURL in 2d canvas contexts

* rr_dataURL no longer part of webgl snapshot

* ignore __diff_output__ from jest-image-snapshot

* Rename generic "Monorepo" to "RRWeb Monorepo"

* Serialize WebGL variables

* Move rrweb test port number to unique port

rrweb-snapshot uses 3030, rrweb uses 3031

* Prepare for WebGL2

* Split up canvas replay and record webgl vars

* fix typo

* fix typo part 2

* fix typo

* Handle non-variables too

* provide correct context for warning

* (De)Serialize a lot of different objects

* monorepo root should be the first in the list

* Upgrade puppeteer to 11.x

* Correctly de-serialize webgl variables

* Encode arrayBuffers contents to base64

* rename contents to base64

* add webgl2 support and serialize HTMLImageElements

* Support serializing ImageData

* Correctly classify WebGL2 events

* Serialize format changed

* check if canvas has contents before we save the dataURL

* Remove blank dataURL

* reference original file not type defintion file

* update types

* rename code worspace

* update dependencies

* add spector to inspect webgl

* remove live server settings from code workspace

* Save canvas context in the node

Prevents from saving webgl canvases as 2d dataUrls

* remove extra braces

* add ICanvas type

* use ICanvas from rrweb-snapshot in rrweb instead of OgmentedCanvas

* add snapshots and webgl 2 tests

* Upgrade to puppeteer 12.0.1

* Revert back to puppeteer 9.1.1

* Keep index order consistent between replay and record

* keep correct index order in webgl2

* fixed forgotten import

* buffer up pending canvas mutations

* unify the way webgl and webgl2 get patched

* fix parsing error

* Add types for serialize-args

* Add debugging for webgl replay

* Move start-server to utils

* turn off debug mode by default

* Move pendingCanvasMutations to local object and fix if/else statement

* Always save pending mutations

* only use assert snapshot as it's clearer whats going on

* Ugly fix for now

* Making the tests more DRY

* flush at the end of each request animation frame

* Looks like the promise made this test more predictable

* add waitForRAF

* Make nested iframe recording robust no matter the test speed

* mute noisy error in test

* force a requestAnimationFrame

* Bundle events within one frame together as much as possible

WebGL events need to be bundled together as much as possible so they don't accidentally get split over multiple animation frames.

 `newFrame: true` is used to indicate the start of an new animation frame in the recording, and that the event shouldn't be bundled with the previous events.

* Rename RafStamps

* Override event.delay

* cleanup

* Add tests for addDelay

* Add webgl e2e test

* Remove settimeout

* DRY-up test

* Preload images in webgl

* Add e2e test for webgl image preloading

* don't turn on devtools by default!

* Remove spector

* close server after use

* Add imageMap parameter

* Make e2e image test more robust

* document debug mode

* cleanup

* WebGL recording in iframes & Safari 14 support

* fix tests

* don't save null objects as WebGLVar

* group (de)serialized webgl variables by context

* Fix test

* fix tests

* bundle webgl mutations on request animation frame

Instead of fixing it on the replay side we buffer up webgl canvas mutations and wait for a new RAF to flush them. This allows us to remove `newFrame` from the events and simplify things a little

* Add canvas element to mutation observer file

* Add Canvas (Mutation) Manager

Allows you to do `record.freezePage()` and canvas events will get paused.

Based on https://github.com/rrweb-io/rrweb/pull/756#issuecomment-1007566907

* cleanup

* Make sure the correct </body> gets replaced

* Perf: Speed up check to see if canvas is blank

* Access unpatched getImageData

* Use is2DCanvasBlank only for 2d context

* Only record canvas when recordCanvas is true
---
 packages/rrweb/src/record/index.ts            |  1 +
 .../record/observers/canvas/canvas-manager.ts |  4 +-
 .../observers/canvas/canvas-manager.d.ts      | 60 ++++++++++---------
 3 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
index e8d071c762..7cacc7e40e 100644
--- a/packages/rrweb/src/record/index.ts
+++ b/packages/rrweb/src/record/index.ts
@@ -209,6 +209,7 @@ function record<T = eventWithTime>(
   });
 
   const canvasManager = new CanvasManager({
+    recordCanvas,
     mutationCb: wrappedCanvasMutationEmit,
     win: window,
     blockClass,
diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
index 28baaa8505..b7fac7c67b 100644
--- a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
+++ b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
@@ -52,6 +52,7 @@ export class CanvasManager {
   }
 
   constructor(options: {
+    recordCanvas: boolean | number;
     mutationCb: canvasMutationCallback;
     win: IWindow;
     blockClass: blockClass;
@@ -60,7 +61,8 @@ export class CanvasManager {
     this.mutationCb = options.mutationCb;
     this.mirror = options.mirror;
 
-    this.initCanvasMutationObserver(options.win, options.blockClass);
+    if (options.recordCanvas === true)
+      this.initCanvasMutationObserver(options.win, options.blockClass);
   }
 
   private processMutation: canvasManagerMutationCallback = function (
diff --git a/packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts b/packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts
index 6004d787ca..58d97b3ed3 100644
--- a/packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts
+++ b/packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts
@@ -1,31 +1,37 @@
-import { blockClass, canvasMutationCallback, IWindow, Mirror } from '../../../types';
+import {
+  blockClass,
+  canvasMutationCallback,
+  IWindow,
+  Mirror,
+} from '../../../types';
 export declare type RafStamps = {
-    latestId: number;
-    invokeId: number | null;
+  latestId: number;
+  invokeId: number | null;
 };
 export declare class CanvasManager {
-    private pendingCanvasMutations;
-    private rafStamps;
-    private mirror;
-    private mutationCb;
-    private resetObservers;
-    private frozen;
-    private locked;
-    reset(): void;
-    freeze(): void;
-    unfreeze(): void;
-    lock(): void;
-    unlock(): void;
-    constructor(options: {
-        mutationCb: canvasMutationCallback;
-        win: IWindow;
-        blockClass: blockClass;
-        mirror: Mirror;
-    });
-    private processMutation;
-    private initCanvasMutationObserver;
-    private startPendingCanvasMutationFlusher;
-    private startRAFTimestamping;
-    flushPendingCanvasMutations(): void;
-    flushPendingCanvasMutationFor(canvas: HTMLCanvasElement, id: number): void;
+  private pendingCanvasMutations;
+  private rafStamps;
+  private mirror;
+  private mutationCb;
+  private resetObservers;
+  private frozen;
+  private locked;
+  reset(): void;
+  freeze(): void;
+  unfreeze(): void;
+  lock(): void;
+  unlock(): void;
+  constructor(options: {
+    recordCanvas: boolean | number;
+    mutationCb: canvasMutationCallback;
+    win: IWindow;
+    blockClass: blockClass;
+    mirror: Mirror;
+  });
+  private processMutation;
+  private initCanvasMutationObserver;
+  private startPendingCanvasMutationFlusher;
+  private startRAFTimestamping;
+  flushPendingCanvasMutations(): void;
+  flushPendingCanvasMutationFor(canvas: HTMLCanvasElement, id: number): void;
 }

From ef0e3317e2bac9f76a8dd3c6834aa0fb2e96e331 Mon Sep 17 00:00:00 2001
From: Cristi Constantin <1748317+croqaz@users.noreply.github.com>
Date: Fri, 4 Feb 2022 06:50:27 +0000
Subject: [PATCH 506/524] Fix inline image issues (#822)

* Fix inline image issues

* Fixed img srcset

Reverted image crossOrigin change

* Tweak rebuilding img srcset
---
 packages/rrweb-snapshot/src/rebuild.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index f736ffc24a..847cdd0698 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -209,6 +209,13 @@ function buildNode(
               n.attributes.href.endsWith('.js')
             ) {
               // ignore
+            } else if (
+              tagName === 'img' &&
+              n.attributes.srcset &&
+              n.attributes.rr_dataURL
+            ) {
+              // backup original img srcset
+              node.setAttribute('rrweb-original-srcset', n.attributes.srcset as string);
             } else {
               node.setAttribute(name, value);
             }
@@ -232,11 +239,10 @@ function buildNode(
               // Backup original img src. It may not have been set yet.
               image.setAttribute(
                 'rrweb-original-src',
-                n.attributes['src'] as string,
+                n.attributes.src as string,
               );
               image.src = value;
             }
-            image.removeAttribute(name);
           }
 
           if (name === 'rr_width') {
@@ -261,6 +267,7 @@ function buildNode(
           }
         }
       }
+
       if (n.isShadowHost) {
         /**
          * Since node is newly rebuilt, it should be a normal element

From c5b409629334717c2216d4b2a98ba106b2abdbf2 Mon Sep 17 00:00:00 2001
From: yz-yu <yanzhen@smartx.com>
Date: Sat, 5 Feb 2022 14:35:33 +0800
Subject: [PATCH 507/524] refactoring observer options (#826)

---
 packages/rrweb/src/record/mutation.ts         | 110 +++-----
 packages/rrweb/src/record/observer.ts         | 261 ++++++------------
 .../rrweb/src/record/shadow-dom-manager.ts    |  66 ++---
 packages/rrweb/src/types.ts                   |  23 +-
 packages/rrweb/tslint.json                    |   5 +-
 packages/rrweb/typings/record/mutation.d.ts   |  10 +-
 packages/rrweb/typings/record/observer.d.ts   |  10 +-
 .../observers/canvas/canvas-manager.d.ts      |  61 ++--
 .../typings/record/shadow-dom-manager.d.ts    |  20 +-
 packages/rrweb/typings/types.d.ts             |   3 +-
 10 files changed, 204 insertions(+), 365 deletions(-)

diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index 842a98b8da..205a9220d5 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -2,26 +2,21 @@ import {
   INode,
   serializeNodeWithId,
   transformAttribute,
-  MaskInputOptions,
-  SlimDOMOptions,
   IGNORED_NODE,
   isShadowRoot,
   needMaskingText,
   maskInputValue,
-  MaskTextFn,
-  MaskInputFn,
 } from 'rrweb-snapshot';
 import {
   mutationRecord,
-  blockClass,
-  maskTextClass,
-  mutationCallBack,
   textCursor,
   attributeCursor,
   removedNodeMutation,
   addedNodeMutation,
   Mirror,
   styleAttributeValue,
+  observerParam,
+  MutationBufferParam,
 } from '../types';
 import {
   isBlocked,
@@ -30,9 +25,6 @@ import {
   isIframeINode,
   hasShadowRoot,
 } from '../utils';
-import { IframeManager } from './iframe-manager';
-import { CanvasManager } from './observers/canvas/canvas-manager';
-import { ShadowDomManager } from './shadow-dom-manager';
 
 type DoubleLinkedListNode = {
   previous: DoubleLinkedListNode | null;
@@ -163,61 +155,47 @@ export default class MutationBuffer {
   private movedSet = new Set<Node>();
   private droppedSet = new Set<Node>();
 
-  private emissionCallback: mutationCallBack;
-  private blockClass: blockClass;
-  private blockSelector: string | null;
-  private maskTextClass: maskTextClass;
-  private maskTextSelector: string | null;
-  private inlineStylesheet: boolean;
-  private maskInputOptions: MaskInputOptions;
-  private maskTextFn: MaskTextFn | undefined;
-  private maskInputFn: MaskInputFn | undefined;
-  private recordCanvas: boolean;
-  private inlineImages: boolean;
-  private slimDOMOptions: SlimDOMOptions;
-  private doc: Document;
-
-  private mirror: Mirror;
-  private iframeManager: IframeManager;
-  private shadowDomManager: ShadowDomManager;
-  private canvasManager: CanvasManager;
-
-  public init(
-    cb: mutationCallBack,
-    blockClass: blockClass,
-    blockSelector: string | null,
-    maskTextClass: maskTextClass,
-    maskTextSelector: string | null,
-    inlineStylesheet: boolean,
-    maskInputOptions: MaskInputOptions,
-    maskTextFn: MaskTextFn | undefined,
-    maskInputFn: MaskInputFn | undefined,
-    recordCanvas: boolean,
-    inlineImages: boolean,
-    slimDOMOptions: SlimDOMOptions,
-    doc: Document,
-    mirror: Mirror,
-    iframeManager: IframeManager,
-    shadowDomManager: ShadowDomManager,
-    canvasManager: CanvasManager,
-  ) {
-    this.blockClass = blockClass;
-    this.blockSelector = blockSelector;
-    this.maskTextClass = maskTextClass;
-    this.maskTextSelector = maskTextSelector;
-    this.inlineStylesheet = inlineStylesheet;
-    this.maskInputOptions = maskInputOptions;
-    this.maskTextFn = maskTextFn;
-    this.maskInputFn = maskInputFn;
-    this.recordCanvas = recordCanvas;
-    this.inlineImages = inlineImages;
-    this.slimDOMOptions = slimDOMOptions;
-    this.emissionCallback = cb;
-    this.doc = doc;
-    this.mirror = mirror;
-    this.iframeManager = iframeManager;
-    this.shadowDomManager = shadowDomManager;
-    this.canvasManager = canvasManager;
+  private mutationCb: observerParam['mutationCb'];
+  private blockClass: observerParam['blockClass'];
+  private blockSelector: observerParam['blockSelector'];
+  private maskTextClass: observerParam['maskTextClass'];
+  private maskTextSelector: observerParam['maskTextSelector'];
+  private inlineStylesheet: observerParam['inlineStylesheet'];
+  private maskInputOptions: observerParam['maskInputOptions'];
+  private maskTextFn: observerParam['maskTextFn'];
+  private maskInputFn: observerParam['maskInputFn'];
+  private recordCanvas: observerParam['recordCanvas'];
+  private inlineImages: observerParam['inlineImages'];
+  private slimDOMOptions: observerParam['slimDOMOptions'];
+  private doc: observerParam['doc'];
+  private mirror: observerParam['mirror'];
+  private iframeManager: observerParam['iframeManager'];
+  private shadowDomManager: observerParam['shadowDomManager'];
+  private canvasManager: observerParam['canvasManager'];
+
+  public init(options: MutationBufferParam) {
+    ([
+      'mutationCb',
+      'blockClass',
+      'blockSelector',
+      'maskTextClass',
+      'maskTextSelector',
+      'inlineStylesheet',
+      'maskInputOptions',
+      'maskTextFn',
+      'maskInputFn',
+      'recordCanvas',
+      'inlineImages',
+      'slimDOMOptions',
+      'doc',
+      'mirror',
+      'iframeManager',
+      'shadowDomManager',
+      'canvasManager',
+    ] as const).forEach((key) => {
+      // just a type trick, the runtime result is correct
+      this[key] = options[key] as never;
+    });
   }
 
   public freeze() {
@@ -441,7 +419,7 @@ export default class MutationBuffer {
     this.droppedSet = new Set<Node>();
     this.movedMap = {};
 
-    this.emissionCallback(payload);
+    this.mutationCb(payload);
   };
 
   private processMutation = (m: mutationRecord) => {
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index 7a08416fc5..cf7d70333c 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -1,11 +1,4 @@
-import {
-  INode,
-  MaskInputOptions,
-  SlimDOMOptions,
-  maskInputValue,
-  MaskInputFn,
-  MaskTextFn,
-} from 'rrweb-snapshot';
+import { INode, MaskInputOptions, maskInputValue } from 'rrweb-snapshot';
 import { FontFaceSet } from 'css-font-loading-module';
 import {
   throttle,
@@ -31,25 +24,19 @@ import {
   inputValue,
   inputCallback,
   hookResetter,
-  blockClass,
-  maskTextClass,
   IncrementalSource,
   hooksParam,
   Arguments,
   mediaInteractionCallback,
   MediaInteractions,
-  SamplingStrategy,
   canvasMutationCallback,
   fontCallback,
   fontParam,
-  Mirror,
   styleDeclarationCallback,
   IWindow,
+  MutationBufferParam,
 } from '../types';
 import MutationBuffer from './mutation';
-import { IframeManager } from './iframe-manager';
-import { ShadowDomManager } from './shadow-dom-manager';
-import { CanvasManager } from './observers/canvas/canvas-manager';
 
 type WindowWithStoredMutationObserver = IWindow & {
   __rrMutationObserver?: MutationObserver;
@@ -87,47 +74,13 @@ function getEventTarget(event: Event): EventTarget | null {
 }
 
 export function initMutationObserver(
-  cb: mutationCallBack,
-  doc: Document,
-  blockClass: blockClass,
-  blockSelector: string | null,
-  maskTextClass: maskTextClass,
-  maskTextSelector: string | null,
-  inlineStylesheet: boolean,
-  maskInputOptions: MaskInputOptions,
-  maskTextFn: MaskTextFn | undefined,
-  maskInputFn: MaskInputFn | undefined,
-  recordCanvas: boolean,
-  inlineImages: boolean,
-  slimDOMOptions: SlimDOMOptions,
-  mirror: Mirror,
-  iframeManager: IframeManager,
-  shadowDomManager: ShadowDomManager,
-  canvasManager: CanvasManager,
+  options: MutationBufferParam,
   rootEl: Node,
 ): MutationObserver {
   const mutationBuffer = new MutationBuffer();
   mutationBuffers.push(mutationBuffer);
   // see mutation.ts for details
-  mutationBuffer.init(
-    cb,
-    blockClass,
-    blockSelector,
-    maskTextClass,
-    maskTextSelector,
-    inlineStylesheet,
-    maskInputOptions,
-    maskTextFn,
-    maskInputFn,
-    recordCanvas,
-    inlineImages,
-    slimDOMOptions,
-    doc,
-    mirror,
-    iframeManager,
-    shadowDomManager,
-    canvasManager,
-  );
+  mutationBuffer.init(options);
   let mutationObserverCtor =
     window.MutationObserver ||
     /**
@@ -167,12 +120,12 @@ export function initMutationObserver(
   return observer;
 }
 
-function initMoveObserver(
-  cb: mousemoveCallBack,
-  sampling: SamplingStrategy,
-  doc: Document,
-  mirror: Mirror,
-): listenerHandler {
+function initMoveObserver({
+  mousemoveCb,
+  sampling,
+  doc,
+  mirror,
+}: observerParam): listenerHandler {
   if (sampling.mousemove === false) {
     return () => {};
   }
@@ -194,7 +147,7 @@ function initMoveObserver(
         | IncrementalSource.Drag,
     ) => {
       const totalOffset = Date.now() - timeBaseline!;
-      cb(
+      mousemoveCb(
         positions.map((p) => {
           p.timeOffset -= totalOffset;
           return p;
@@ -246,13 +199,13 @@ function initMoveObserver(
   };
 }
 
-function initMouseInteractionObserver(
-  cb: mouseInteractionCallBack,
-  doc: Document,
-  mirror: Mirror,
-  blockClass: blockClass,
-  sampling: SamplingStrategy,
-): listenerHandler {
+function initMouseInteractionObserver({
+  mouseInteractionCb,
+  doc,
+  mirror,
+  blockClass,
+  sampling,
+}: observerParam): listenerHandler {
   if (sampling.mouseInteraction === false) {
     return () => {};
   }
@@ -275,7 +228,7 @@ function initMouseInteractionObserver(
       }
       const id = mirror.getId(target as INode);
       const { clientX, clientY } = e;
-      cb({
+      mouseInteractionCb({
         type: MouseInteractions[eventKey],
         id,
         x: clientX,
@@ -300,13 +253,16 @@ function initMouseInteractionObserver(
   };
 }
 
-export function initScrollObserver(
-  cb: scrollCallback,
-  doc: Document,
-  mirror: Mirror,
-  blockClass: blockClass,
-  sampling: SamplingStrategy,
-): listenerHandler {
+export function initScrollObserver({
+  scrollCb,
+  doc,
+  mirror,
+  blockClass,
+  sampling,
+}: Pick<
+  observerParam,
+  'scrollCb' | 'doc' | 'mirror' | 'blockClass' | 'sampling'
+>): listenerHandler {
   const updatePosition = throttle<UIEvent>((evt) => {
     const target = getEventTarget(evt);
     if (!target || isBlocked(target as Node, blockClass)) {
@@ -315,13 +271,13 @@ export function initScrollObserver(
     const id = mirror.getId(target as INode);
     if (target === doc) {
       const scrollEl = (doc.scrollingElement || doc.documentElement)!;
-      cb({
+      scrollCb({
         id,
         x: scrollEl.scrollLeft,
         y: scrollEl.scrollTop,
       });
     } else {
-      cb({
+      scrollCb({
         id,
         x: (target as HTMLElement).scrollLeft,
         y: (target as HTMLElement).scrollTop,
@@ -331,16 +287,16 @@ export function initScrollObserver(
   return on('scroll', updatePosition, doc);
 }
 
-function initViewportResizeObserver(
-  cb: viewportResizeCallback,
-): listenerHandler {
+function initViewportResizeObserver({
+  viewportResizeCb,
+}: observerParam): listenerHandler {
   let lastH = -1;
   let lastW = -1;
   const updateDimension = throttle(() => {
     const height = getWindowHeight();
     const width = getWindowWidth();
     if (lastH !== height || lastW !== width) {
-      cb({
+      viewportResizeCb({
         width: Number(width),
         height: Number(height),
       });
@@ -362,17 +318,17 @@ function wrapEventWithUserTriggeredFlag(
 
 export const INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT'];
 const lastInputValueMap: WeakMap<EventTarget, inputValue> = new WeakMap();
-function initInputObserver(
-  cb: inputCallback,
-  doc: Document,
-  mirror: Mirror,
-  blockClass: blockClass,
-  ignoreClass: string,
-  maskInputOptions: MaskInputOptions,
-  maskInputFn: MaskInputFn | undefined,
-  sampling: SamplingStrategy,
-  userTriggeredOnInput: boolean,
-): listenerHandler {
+function initInputObserver({
+  inputCb,
+  doc,
+  mirror,
+  blockClass,
+  ignoreClass,
+  maskInputOptions,
+  maskInputFn,
+  sampling,
+  userTriggeredOnInput,
+}: observerParam): listenerHandler {
   function eventHandler(event: Event) {
     let target = getEventTarget(event);
     const userTriggered = event.isTrusted;
@@ -451,7 +407,7 @@ function initInputObserver(
     ) {
       lastInputValueMap.set(target, v);
       const id = mirror.getId(target as INode);
-      cb({
+      inputCb({
         ...v,
         id,
       });
@@ -531,9 +487,8 @@ function getNestedCSSRulePositions(rule: CSSRule): number[] {
 }
 
 function initStyleSheetObserver(
-  cb: styleSheetRuleCallback,
-  win: IWindow,
-  mirror: Mirror,
+  { styleSheetRuleCb, mirror }: observerParam,
+  { win }: { win: IWindow },
 ): listenerHandler {
   const insertRule = win.CSSStyleSheet.prototype.insertRule;
   win.CSSStyleSheet.prototype.insertRule = function (
@@ -542,7 +497,7 @@ function initStyleSheetObserver(
   ) {
     const id = mirror.getId(this.ownerNode as INode);
     if (id !== -1) {
-      cb({
+      styleSheetRuleCb({
         id,
         adds: [{ rule, index }],
       });
@@ -554,7 +509,7 @@ function initStyleSheetObserver(
   win.CSSStyleSheet.prototype.deleteRule = function (index: number) {
     const id = mirror.getId(this.ownerNode as INode);
     if (id !== -1) {
-      cb({
+      styleSheetRuleCb({
         id,
         removes: [{ index }],
       });
@@ -599,7 +554,7 @@ function initStyleSheetObserver(
     type.prototype.insertRule = function (rule: string, index?: number) {
       const id = mirror.getId(this.parentStyleSheet.ownerNode as INode);
       if (id !== -1) {
-        cb({
+        styleSheetRuleCb({
           id,
           adds: [
             {
@@ -618,7 +573,7 @@ function initStyleSheetObserver(
     type.prototype.deleteRule = function (index: number) {
       const id = mirror.getId(this.parentStyleSheet.ownerNode as INode);
       if (id !== -1) {
-        cb({
+        styleSheetRuleCb({
           id,
           removes: [{ index: [...getNestedCSSRulePositions(this), index] }],
         });
@@ -638,9 +593,8 @@ function initStyleSheetObserver(
 }
 
 function initStyleDeclarationObserver(
-  cb: styleDeclarationCallback,
-  win: IWindow,
-  mirror: Mirror,
+  { styleDeclarationCb, mirror }: observerParam,
+  { win }: { win: IWindow },
 ): listenerHandler {
   const setProperty = win.CSSStyleDeclaration.prototype.setProperty;
   win.CSSStyleDeclaration.prototype.setProperty = function (
@@ -653,7 +607,7 @@ function initStyleDeclarationObserver(
       (this.parentRule?.parentStyleSheet?.ownerNode as unknown) as INode,
     );
     if (id !== -1) {
-      cb({
+      styleDeclarationCb({
         id,
         set: {
           property,
@@ -675,7 +629,7 @@ function initStyleDeclarationObserver(
       (this.parentRule?.parentStyleSheet?.ownerNode as unknown) as INode,
     );
     if (id !== -1) {
-      cb({
+      styleDeclarationCb({
         id,
         remove: {
           property,
@@ -692,12 +646,12 @@ function initStyleDeclarationObserver(
   };
 }
 
-function initMediaInteractionObserver(
-  mediaInteractionCb: mediaInteractionCallback,
-  blockClass: blockClass,
-  mirror: Mirror,
-  sampling: SamplingStrategy,
-): listenerHandler {
+function initMediaInteractionObserver({
+  mediaInteractionCb,
+  blockClass,
+  mirror,
+  sampling,
+}: observerParam): listenerHandler {
   const handler = (type: MediaInteractions) =>
     throttle((event: Event) => {
       const target = getEventTarget(event);
@@ -724,7 +678,7 @@ function initMediaInteractionObserver(
   };
 }
 
-function initFontObserver(cb: fontCallback, doc: Document): listenerHandler {
+function initFontObserver({ fontCb, doc }: observerParam): listenerHandler {
   const win = doc.defaultView as IWindow;
   if (!win) {
     return () => {};
@@ -759,7 +713,7 @@ function initFontObserver(cb: fontCallback, doc: Document): listenerHandler {
       setTimeout(() => {
         const p = fontMap.get(fontFace);
         if (p) {
-          cb(p);
+          fontCb(p);
           fontMap.delete(fontFace);
         }
       }, 0);
@@ -869,78 +823,19 @@ export function initObservers(
   }
 
   mergeHooks(o, hooks);
-  const mutationObserver = initMutationObserver(
-    o.mutationCb,
-    o.doc,
-    o.blockClass,
-    o.blockSelector,
-    o.maskTextClass,
-    o.maskTextSelector,
-    o.inlineStylesheet,
-    o.maskInputOptions,
-    o.maskTextFn,
-    o.maskInputFn,
-    o.recordCanvas,
-    o.inlineImages,
-    o.slimDOMOptions,
-    o.mirror,
-    o.iframeManager,
-    o.shadowDomManager,
-    o.canvasManager,
-    o.doc,
-  );
-  const mousemoveHandler = initMoveObserver(
-    o.mousemoveCb,
-    o.sampling,
-    o.doc,
-    o.mirror,
-  );
-  const mouseInteractionHandler = initMouseInteractionObserver(
-    o.mouseInteractionCb,
-    o.doc,
-    o.mirror,
-    o.blockClass,
-    o.sampling,
-  );
-  const scrollHandler = initScrollObserver(
-    o.scrollCb,
-    o.doc,
-    o.mirror,
-    o.blockClass,
-    o.sampling,
-  );
-  const viewportResizeHandler = initViewportResizeObserver(o.viewportResizeCb);
-  const inputHandler = initInputObserver(
-    o.inputCb,
-    o.doc,
-    o.mirror,
-    o.blockClass,
-    o.ignoreClass,
-    o.maskInputOptions,
-    o.maskInputFn,
-    o.sampling,
-    o.userTriggeredOnInput,
-  );
-  const mediaInteractionHandler = initMediaInteractionObserver(
-    o.mediaInteractionCb,
-    o.blockClass,
-    o.mirror,
-    o.sampling,
-  );
-
-  const styleSheetObserver = initStyleSheetObserver(
-    o.styleSheetRuleCb,
-    currentWindow,
-    o.mirror,
-  );
-  const styleDeclarationObserver = initStyleDeclarationObserver(
-    o.styleDeclarationCb,
-    currentWindow,
-    o.mirror,
-  );
-  const fontObserver = o.collectFonts
-    ? initFontObserver(o.fontCb, o.doc)
-    : () => {};
+  const mutationObserver = initMutationObserver(o, o.doc);
+  const mousemoveHandler = initMoveObserver(o);
+  const mouseInteractionHandler = initMouseInteractionObserver(o);
+  const scrollHandler = initScrollObserver(o);
+  const viewportResizeHandler = initViewportResizeObserver(o);
+  const inputHandler = initInputObserver(o);
+  const mediaInteractionHandler = initMediaInteractionObserver(o);
+
+  const styleSheetObserver = initStyleSheetObserver(o, { win: currentWindow });
+  const styleDeclarationObserver = initStyleDeclarationObserver(o, {
+    win: currentWindow,
+  });
+  const fontObserver = o.collectFonts ? initFontObserver(o) : () => {};
   // plugins
   const pluginHandlers: listenerHandler[] = [];
   for (const plugin of o.plugins) {
diff --git a/packages/rrweb/src/record/shadow-dom-manager.ts b/packages/rrweb/src/record/shadow-dom-manager.ts
index 2ddaf535e8..86ea003911 100644
--- a/packages/rrweb/src/record/shadow-dom-manager.ts
+++ b/packages/rrweb/src/record/shadow-dom-manager.ts
@@ -1,36 +1,17 @@
 import {
   mutationCallBack,
-  blockClass,
-  maskTextClass,
   Mirror,
   scrollCallback,
+  MutationBufferParam,
   SamplingStrategy,
 } from '../types';
-import {
-  MaskInputOptions,
-  SlimDOMOptions,
-  MaskTextFn,
-  MaskInputFn,
-} from 'rrweb-snapshot';
-import { IframeManager } from './iframe-manager';
 import { initMutationObserver, initScrollObserver } from './observer';
-import { CanvasManager } from './observers/canvas/canvas-manager';
 
-type BypassOptions = {
-  blockClass: blockClass;
-  blockSelector: string | null;
-  maskTextClass: maskTextClass;
-  maskTextSelector: string | null;
-  inlineStylesheet: boolean;
-  maskInputOptions: MaskInputOptions;
-  maskTextFn: MaskTextFn | undefined;
-  maskInputFn: MaskInputFn | undefined;
-  recordCanvas: boolean;
-  inlineImages: boolean;
+type BypassOptions = Omit<
+  MutationBufferParam,
+  'doc' | 'mutationCb' | 'mirror' | 'shadowDomManager'
+> & {
   sampling: SamplingStrategy;
-  slimDOMOptions: SlimDOMOptions;
-  iframeManager: IframeManager;
-  canvasManager: CanvasManager;
 };
 
 export class ShadowDomManager {
@@ -53,33 +34,22 @@ export class ShadowDomManager {
 
   public addShadowRoot(shadowRoot: ShadowRoot, doc: Document) {
     initMutationObserver(
-      this.mutationCb,
-      doc,
-      this.bypassOptions.blockClass,
-      this.bypassOptions.blockSelector,
-      this.bypassOptions.maskTextClass,
-      this.bypassOptions.maskTextSelector,
-      this.bypassOptions.inlineStylesheet,
-      this.bypassOptions.maskInputOptions,
-      this.bypassOptions.maskTextFn,
-      this.bypassOptions.maskInputFn,
-      this.bypassOptions.recordCanvas,
-      this.bypassOptions.inlineImages,
-      this.bypassOptions.slimDOMOptions,
-      this.mirror,
-      this.bypassOptions.iframeManager,
-      this,
-      this.bypassOptions.canvasManager,
+      {
+        ...this.bypassOptions,
+        doc,
+        mutationCb: this.mutationCb,
+        mirror: this.mirror,
+        shadowDomManager: this,
+      },
       shadowRoot,
     );
-    initScrollObserver(
-      this.scrollCb,
+    initScrollObserver({
+      ...this.bypassOptions,
+      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
-      (shadowRoot as unknown) as Document,
-      this.mirror,
-      this.bypassOptions.blockClass,
-      this.bypassOptions.sampling,
-    );
+      doc: (shadowRoot as unknown) as Document,
+      mirror: this.mirror,
+    });
   }
 }
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index 545eaaa9a0..a78e8caeb5 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -277,6 +277,27 @@ export type observerParam = {
   }>;
 };
 
+export type MutationBufferParam = Pick<
+  observerParam,
+  | 'mutationCb'
+  | 'blockClass'
+  | 'blockSelector'
+  | 'maskTextClass'
+  | 'maskTextSelector'
+  | 'inlineStylesheet'
+  | 'maskInputOptions'
+  | 'maskTextFn'
+  | 'maskInputFn'
+  | 'recordCanvas'
+  | 'inlineImages'
+  | 'slimDOMOptions'
+  | 'doc'
+  | 'mirror'
+  | 'iframeManager'
+  | 'shadowDomManager'
+  | 'canvasManager'
+>;
+
 export type hooksParam = {
   mutation?: mutationCallBack;
   mousemove?: mousemoveCallBack;
@@ -406,7 +427,7 @@ export type SerializedWebGlArg =
     }
   | {
       rr_type: string;
-      args: Array<SerializedWebGlArg>;
+      args: SerializedWebGlArg[];
     }
   | {
       rr_type: string;
diff --git a/packages/rrweb/tslint.json b/packages/rrweb/tslint.json
index 4511e9b482..ac74b2e5d7 100644
--- a/packages/rrweb/tslint.json
+++ b/packages/rrweb/tslint.json
@@ -21,7 +21,10 @@
     "no-empty": false,
     "max-classes-per-file": false,
     "semicolon": false,
-    "trailing-comma": false
+    "trailing-comma": false,
+    "curly": false,
+    "no-namespace": false,
+    "interface-name": false
   },
   "rulesDirectory": []
 }
diff --git a/packages/rrweb/typings/record/mutation.d.ts b/packages/rrweb/typings/record/mutation.d.ts
index 1e6d6f0c78..5f88a664f9 100644
--- a/packages/rrweb/typings/record/mutation.d.ts
+++ b/packages/rrweb/typings/record/mutation.d.ts
@@ -1,8 +1,4 @@
-import { MaskInputOptions, SlimDOMOptions, MaskTextFn, MaskInputFn } from 'rrweb-snapshot';
-import { mutationRecord, blockClass, maskTextClass, mutationCallBack, Mirror } from '../types';
-import { IframeManager } from './iframe-manager';
-import { CanvasManager } from './observers/canvas/canvas-manager';
-import { ShadowDomManager } from './shadow-dom-manager';
+import { mutationRecord, MutationBufferParam } from '../types';
 export default class MutationBuffer {
     private frozen;
     private locked;
@@ -14,7 +10,7 @@ export default class MutationBuffer {
     private addedSet;
     private movedSet;
     private droppedSet;
-    private emissionCallback;
+    private mutationCb;
     private blockClass;
     private blockSelector;
     private maskTextClass;
@@ -31,7 +27,7 @@ export default class MutationBuffer {
     private iframeManager;
     private shadowDomManager;
     private canvasManager;
-    init(cb: mutationCallBack, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, inlineImages: boolean, slimDOMOptions: SlimDOMOptions, doc: Document, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager, canvasManager: CanvasManager): void;
+    init(options: MutationBufferParam): void;
     freeze(): void;
     unfreeze(): void;
     isFrozen(): boolean;
diff --git a/packages/rrweb/typings/record/observer.d.ts b/packages/rrweb/typings/record/observer.d.ts
index 1e23ced21c..86453a1465 100644
--- a/packages/rrweb/typings/record/observer.d.ts
+++ b/packages/rrweb/typings/record/observer.d.ts
@@ -1,11 +1,7 @@
-import { MaskInputOptions, SlimDOMOptions, MaskInputFn, MaskTextFn } from 'rrweb-snapshot';
-import { mutationCallBack, observerParam, listenerHandler, scrollCallback, blockClass, maskTextClass, hooksParam, SamplingStrategy, Mirror } from '../types';
+import { observerParam, listenerHandler, hooksParam, MutationBufferParam } from '../types';
 import MutationBuffer from './mutation';
-import { IframeManager } from './iframe-manager';
-import { ShadowDomManager } from './shadow-dom-manager';
-import { CanvasManager } from './observers/canvas/canvas-manager';
 export declare const mutationBuffers: MutationBuffer[];
-export declare function initMutationObserver(cb: mutationCallBack, doc: Document, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, inlineImages: boolean, slimDOMOptions: SlimDOMOptions, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager, canvasManager: CanvasManager, rootEl: Node): MutationObserver;
-export declare function initScrollObserver(cb: scrollCallback, doc: Document, mirror: Mirror, blockClass: blockClass, sampling: SamplingStrategy): listenerHandler;
+export declare function initMutationObserver(options: MutationBufferParam, rootEl: Node): MutationObserver;
+export declare function initScrollObserver({ scrollCb, doc, mirror, blockClass, sampling, }: Pick<observerParam, 'scrollCb' | 'doc' | 'mirror' | 'blockClass' | 'sampling'>): listenerHandler;
 export declare const INPUT_TAGS: string[];
 export declare function initObservers(o: observerParam, hooks?: hooksParam): listenerHandler;
diff --git a/packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts b/packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts
index 58d97b3ed3..56c136c55c 100644
--- a/packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts
+++ b/packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts
@@ -1,37 +1,32 @@
-import {
-  blockClass,
-  canvasMutationCallback,
-  IWindow,
-  Mirror,
-} from '../../../types';
+import { blockClass, canvasMutationCallback, IWindow, Mirror } from '../../../types';
 export declare type RafStamps = {
-  latestId: number;
-  invokeId: number | null;
+    latestId: number;
+    invokeId: number | null;
 };
 export declare class CanvasManager {
-  private pendingCanvasMutations;
-  private rafStamps;
-  private mirror;
-  private mutationCb;
-  private resetObservers;
-  private frozen;
-  private locked;
-  reset(): void;
-  freeze(): void;
-  unfreeze(): void;
-  lock(): void;
-  unlock(): void;
-  constructor(options: {
-    recordCanvas: boolean | number;
-    mutationCb: canvasMutationCallback;
-    win: IWindow;
-    blockClass: blockClass;
-    mirror: Mirror;
-  });
-  private processMutation;
-  private initCanvasMutationObserver;
-  private startPendingCanvasMutationFlusher;
-  private startRAFTimestamping;
-  flushPendingCanvasMutations(): void;
-  flushPendingCanvasMutationFor(canvas: HTMLCanvasElement, id: number): void;
+    private pendingCanvasMutations;
+    private rafStamps;
+    private mirror;
+    private mutationCb;
+    private resetObservers;
+    private frozen;
+    private locked;
+    reset(): void;
+    freeze(): void;
+    unfreeze(): void;
+    lock(): void;
+    unlock(): void;
+    constructor(options: {
+        recordCanvas: boolean | number;
+        mutationCb: canvasMutationCallback;
+        win: IWindow;
+        blockClass: blockClass;
+        mirror: Mirror;
+    });
+    private processMutation;
+    private initCanvasMutationObserver;
+    private startPendingCanvasMutationFlusher;
+    private startRAFTimestamping;
+    flushPendingCanvasMutations(): void;
+    flushPendingCanvasMutationFor(canvas: HTMLCanvasElement, id: number): void;
 }
diff --git a/packages/rrweb/typings/record/shadow-dom-manager.d.ts b/packages/rrweb/typings/record/shadow-dom-manager.d.ts
index c014298c50..aab8669e5b 100644
--- a/packages/rrweb/typings/record/shadow-dom-manager.d.ts
+++ b/packages/rrweb/typings/record/shadow-dom-manager.d.ts
@@ -1,22 +1,6 @@
-import { mutationCallBack, blockClass, maskTextClass, Mirror, scrollCallback, SamplingStrategy } from '../types';
-import { MaskInputOptions, SlimDOMOptions, MaskTextFn, MaskInputFn } from 'rrweb-snapshot';
-import { IframeManager } from './iframe-manager';
-import { CanvasManager } from './observers/canvas/canvas-manager';
-declare type BypassOptions = {
-    blockClass: blockClass;
-    blockSelector: string | null;
-    maskTextClass: maskTextClass;
-    maskTextSelector: string | null;
-    inlineStylesheet: boolean;
-    maskInputOptions: MaskInputOptions;
-    maskTextFn: MaskTextFn | undefined;
-    maskInputFn: MaskInputFn | undefined;
-    recordCanvas: boolean;
-    inlineImages: boolean;
+import { mutationCallBack, Mirror, scrollCallback, MutationBufferParam, SamplingStrategy } from '../types';
+declare type BypassOptions = Omit<MutationBufferParam, 'doc' | 'mutationCb' | 'mirror' | 'shadowDomManager'> & {
     sampling: SamplingStrategy;
-    slimDOMOptions: SlimDOMOptions;
-    iframeManager: IframeManager;
-    canvasManager: CanvasManager;
 };
 export declare class ShadowDomManager {
     private mutationCb;
diff --git a/packages/rrweb/typings/types.d.ts b/packages/rrweb/typings/types.d.ts
index 2beecbc86a..9779a00366 100644
--- a/packages/rrweb/typings/types.d.ts
+++ b/packages/rrweb/typings/types.d.ts
@@ -196,6 +196,7 @@ export declare type observerParam = {
         options: unknown;
     }>;
 };
+export declare type MutationBufferParam = Pick<observerParam, 'mutationCb' | 'blockClass' | 'blockSelector' | 'maskTextClass' | 'maskTextSelector' | 'inlineStylesheet' | 'maskInputOptions' | 'maskTextFn' | 'maskInputFn' | 'recordCanvas' | 'inlineImages' | 'slimDOMOptions' | 'doc' | 'mirror' | 'iframeManager' | 'shadowDomManager' | 'canvasManager'>;
 export declare type hooksParam = {
     mutation?: mutationCallBack;
     mousemove?: mousemoveCallBack;
@@ -299,7 +300,7 @@ export declare type SerializedWebGlArg = {
     src: string;
 } | {
     rr_type: string;
-    args: Array<SerializedWebGlArg>;
+    args: SerializedWebGlArg[];
 } | {
     rr_type: string;
     index: number;

From d192b405ea48b5734cd7ded2c7dbebddfe5fc469 Mon Sep 17 00:00:00 2001
From: Yun Feng <yun.feng@anu.edu.au>
Date: Wed, 9 Feb 2022 01:49:26 +1100
Subject: [PATCH 508/524] fix: an error when I stop the recording process
 (#828)

canvas-manager.ts:35 Uncaught TypeError: this.resetObservers is not a function
---
 packages/rrweb/src/record/observers/canvas/canvas-manager.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
index b7fac7c67b..a266e5fb73 100644
--- a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
+++ b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
@@ -26,13 +26,13 @@ export class CanvasManager {
   private mirror: Mirror;
 
   private mutationCb: canvasMutationCallback;
-  private resetObservers: listenerHandler;
+  private resetObservers?: listenerHandler;
   private frozen: boolean = false;
   private locked: boolean = false;
 
   public reset() {
     this.pendingCanvasMutations.clear();
-    this.resetObservers();
+    this.resetObservers && this.resetObservers();
   }
 
   public freeze() {

From 69acc7313640f3e7d35c83c2f521476d7d72b8d6 Mon Sep 17 00:00:00 2001
From: Alex Dehe Ng <alex311@gmail.com>
Date: Tue, 8 Feb 2022 09:07:18 -0600
Subject: [PATCH 509/524] close all pages to avoid EPERM error on Windows 10
 (#830)

---
 packages/rrweb/scripts/repl.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/rrweb/scripts/repl.js b/packages/rrweb/scripts/repl.js
index 13d4937b66..e4ad49210b 100644
--- a/packages/rrweb/scripts/repl.js
+++ b/packages/rrweb/scripts/repl.js
@@ -139,6 +139,8 @@ function getCode() {
     });
 
     emitter.once('done', async (shouldReplay) => {
+      const pages = await browser.pages();
+      await Promise.all(pages.map((page) => page.close()));
       await browser.close();
       if (shouldReplay) {
         await replay(url, shouldReplay === 'replayWithFakeURL');

From 81454eaed1bc3f69f65d568b4bc8538476de12eb Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Tue, 8 Feb 2022 16:07:37 +0100
Subject: [PATCH 510/524] Add Twitter badge (#829)

* Add Twitter badge

* Remove extra line break
---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index aa5b00ab21..3e6490f17b 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@
 **[The rrweb documentary (in Chinese, with English subtitles)](https://www.bilibili.com/video/BV1wL4y1B7wN?share_source=copy_web)**
 
 [![Join the chat at slack](https://img.shields.io/badge/slack-@rrweb-teal.svg?logo=slack)](https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg)
+[![Twitter Follow](https://img.shields.io/badge/twitter-@rrweb__io-teal.svg?logo=twitter)](https://twitter.com/rrweb_io)
 ![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js?compression=gzip&label=total%20gzip%20size)
 ![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js?compression=gzip&label=recorder%20gzip%20size)
 [![](https://data.jsdelivr.com/v1/package/npm/rrweb/badge)](https://www.jsdelivr.com/package/npm/rrweb)

From 1935bf606fb57dcda991006f4effed50c351053b Mon Sep 17 00:00:00 2001
From: Yun Feng <yun.feng@anu.edu.au>
Date: Thu, 10 Feb 2022 14:30:58 +1100
Subject: [PATCH 511/524] console plugin fix (#832)

* fix: empty payload in console-plugin

* update unit test
---
 .../rrweb/src/plugins/console/record/stringify.ts |  2 ++
 .../test/__snapshots__/integration.test.ts.snap   | 15 +++++++++++++++
 packages/rrweb/test/integration.test.ts           |  1 +
 3 files changed, 18 insertions(+)

diff --git a/packages/rrweb/src/plugins/console/record/stringify.ts b/packages/rrweb/src/plugins/console/record/stringify.ts
index f7bfac3226..1538fb3470 100644
--- a/packages/rrweb/src/plugins/console/record/stringify.ts
+++ b/packages/rrweb/src/plugins/console/record/stringify.ts
@@ -136,6 +136,8 @@ export function stringify(
         return value ? value.outerHTML : '';
       }
       return value.nodeName;
+    } else if (value instanceof Error) {
+      return value.name + ': ' + value.message;
     }
     return value;
   });
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index bea952c412..9de563069a 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -7806,6 +7806,21 @@ exports[`record integration tests should record console messages 1`] = `
       }
     }
   },
+  {
+    \\"type\\": 6,
+    \\"data\\": {
+      \\"plugin\\": \\"rrweb/console@1\\",
+      \\"payload\\": {
+        \\"level\\": \\"log\\",
+        \\"trace\\": [
+          \\"__puppeteer_evaluation_script__:19:37\\"
+        ],
+        \\"payload\\": [
+          \\"\\\\\\"TypeError: a message\\\\\\"\\"
+        ]
+      }
+    }
+  },
   {
     \\"type\\": 3,
     \\"data\\": {
diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
index b0f3b82698..88dfbf5ef2 100644
--- a/packages/rrweb/test/integration.test.ts
+++ b/packages/rrweb/test/integration.test.ts
@@ -471,6 +471,7 @@ describe('record integration tests', function (this: ISuite) {
       console.trace('trace');
       console.warn('warn');
       console.clear();
+      console.log(new TypeError('a message'));
       const iframe = document.createElement('iframe');
       document.body.appendChild(iframe);
     });

From 167f0fa08dacfab2525a01443d2f2aa5d4066c77 Mon Sep 17 00:00:00 2001
From: Yun Feng <yun.feng@anu.edu.au>
Date: Thu, 17 Feb 2022 17:12:07 +1100
Subject: [PATCH 512/524] improve captured message of Error object (#835)

try to fix this problem:
https://github.com/rrweb-io/rrweb/issues/814#issuecomment-1033735775
---
 packages/rrweb/src/plugins/console/record/stringify.ts     | 4 +++-
 packages/rrweb/test/__snapshots__/integration.test.ts.snap | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/rrweb/src/plugins/console/record/stringify.ts b/packages/rrweb/src/plugins/console/record/stringify.ts
index 1538fb3470..3804d48e88 100644
--- a/packages/rrweb/src/plugins/console/record/stringify.ts
+++ b/packages/rrweb/src/plugins/console/record/stringify.ts
@@ -137,7 +137,9 @@ export function stringify(
       }
       return value.nodeName;
     } else if (value instanceof Error) {
-      return value.name + ': ' + value.message;
+      return value.stack
+        ? value.stack + '\nEnd of stack for Error object'
+        : value.name + ': ' + value.message;
     }
     return value;
   });
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index 9de563069a..3bcc57a92c 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -7816,7 +7816,7 @@ exports[`record integration tests should record console messages 1`] = `
           \\"__puppeteer_evaluation_script__:19:37\\"
         ],
         \\"payload\\": [
-          \\"\\\\\\"TypeError: a message\\\\\\"\\"
+          \\"\\\\\\"TypeError: a message\\\\\\\\n    at __puppeteer_evaluation_script__:19:41\\\\\\\\nEnd of stack for Error object\\\\\\"\\"
         ]
       }
     }

From 94fa6b3e8a53003cdd5b2aa45f0c0b1e4bc9b375 Mon Sep 17 00:00:00 2001
From: Constance Caramanolis <19931185+ccaraman@users.noreply.github.com>
Date: Sat, 19 Feb 2022 18:27:58 -0800
Subject: [PATCH 513/524] Update doc to use yarn to use REPL (#838)

---
 guide.md       | 2 +-
 guide.zh_CN.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/guide.md b/guide.md
index 1ad42a23bb..b95b4c2da3 100644
--- a/guide.md
+++ b/guide.md
@@ -398,7 +398,7 @@ And there are three rrweb-replayer event will be emitted in the same way:
 
 You can also play with rrweb by using the REPL testing tool which does not need installation.
 
-Run `npm run repl` to launch a browser and ask for a URL you want to test on the CLI:
+Run `yarn repl` to launch a browser and ask for a URL you want to test on the CLI:
 
 ```
 Enter the url you want to record, e.g https://react-redux.realworld.io:
diff --git a/guide.zh_CN.md b/guide.zh_CN.md
index 43edece2ed..bdb0a93305 100644
--- a/guide.zh_CN.md
+++ b/guide.zh_CN.md
@@ -396,7 +396,7 @@ replayer.on(EVENT_NAME, (payload) => {
 
 在不安装 rrweb 的情况下，也可以通过使用 REPL 工具试用 rrweb 录制 web 应用。
 
-运行 `npm run repl`，将会启动浏览器并在命令行要求输入一个测试的 url：
+运行 `yarn repl`，将会启动浏览器并在命令行要求输入一个测试的 url：
 
 ```
 Enter the url you want to record, e.g https://react-redux.realworld.io:

From f74b7bb28d1f63d0a8398fdd7f80a5f86b1df01c Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Tue, 22 Feb 2022 15:48:32 +0000
Subject: [PATCH 514/524] Use the .closest method to transfer recursive parent
 class checking into the browser engine for an expected performance
 improvement (#840)

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest available on all modern browsers
---
 packages/rrweb/src/utils.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts
index 8ae1635fe6..91376444ef 100644
--- a/packages/rrweb/src/utils.ts
+++ b/packages/rrweb/src/utils.ts
@@ -230,7 +230,11 @@ export function isBlocked(node: Node | null, blockClass: blockClass): boolean {
   if (node.nodeType === node.ELEMENT_NODE) {
     let needBlock = false;
     if (typeof blockClass === 'string') {
-      needBlock = (node as HTMLElement).classList.contains(blockClass);
+      if ((node as HTMLElement).closest !== undefined) {
+        return (node as HTMLElement).closest('.' + blockClass) !== null;
+      } else {
+        needBlock = (node as HTMLElement).classList.contains(blockClass);
+      }
     } else {
       (node as HTMLElement).classList.forEach((className) => {
         if (blockClass.test(className)) {

From 5ae208b17479c52e46b3bffd592dc232e851dfa7 Mon Sep 17 00:00:00 2001
From: Yun Feng <yun.feng@anu.edu.au>
Date: Thu, 24 Feb 2022 12:02:47 +1100
Subject: [PATCH 515/524] fix: Uncaught TypeError: Illegal invocation when
 recording incremental canvas mutation (#844)

---
 packages/rrweb-snapshot/src/utils.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/rrweb-snapshot/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts
index 2b059765d1..7f84809929 100644
--- a/packages/rrweb-snapshot/src/utils.ts
+++ b/packages/rrweb-snapshot/src/utils.ts
@@ -60,7 +60,8 @@ export function is2DCanvasBlank(canvas: HTMLCanvasElement): boolean {
       // even if we can already tell from the first chunk(s) that
       // the canvas isn't blank
       const pixelBuffer = new Uint32Array(
-        originalGetImageData(
+        originalGetImageData.call(
+          ctx,
           x,
           y,
           Math.min(chunkSize, canvas.width - x),

From e9531d420a406e0f5b4d0157ff8ffdb7c178eff4 Mon Sep 17 00:00:00 2001
From: Yun Feng <yun.feng@anu.edu.au>
Date: Thu, 24 Feb 2022 12:02:55 +1100
Subject: [PATCH 516/524] fix: can't record SVG element inside iframe properly
 (#843)

el instanceof SVGElement is false if the svg element is inside iframe so that the isSVG property is missing in the recorded data
---
 packages/rrweb-snapshot/src/snapshot.ts       |   2 +-
 .../__snapshots__/integration.test.ts.snap    | 157 ++++++++++++------
 packages/rrweb/test/html/frame1.html          |   8 +
 .../observers/canvas/canvas-manager.d.ts      |   2 +-
 4 files changed, 113 insertions(+), 56 deletions(-)

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 0f8de04a84..1d82cc1307 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -219,7 +219,7 @@ export function absoluteToDoc(doc: Document, attributeValue: string): string {
 }
 
 function isSVGElement(el: Element): boolean {
-  return el.tagName === 'svg' || el instanceof SVGElement;
+  return Boolean(el.tagName === 'svg' || (el as SVGElement).ownerSVGElement);
 }
 
 function getHref() {
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index 3bcc57a92c..6d853e216d 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -4874,9 +4874,58 @@ exports[`record integration tests should nest record iframe 1`] = `
                       },
                       {
                         \\"type\\": 3,
-                        \\"textContent\\": \\"\\\\n  \\\\n\\\\n\\",
+                        \\"textContent\\": \\"\\\\n    \\",
                         \\"rootId\\": 32,
                         \\"id\\": 50
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"svg\\",
+                        \\"attributes\\": {
+                          \\"xmlns\\": \\"http://www.w3.org/2000/svg\\",
+                          \\"xmlns:xlink\\": \\"http://www.w3.org/1999/xlink\\",
+                          \\"width\\": \\"300\\",
+                          \\"height\\": \\"300\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n      \\",
+                            \\"rootId\\": 32,
+                            \\"id\\": 52
+                          },
+                          {
+                            \\"type\\": 2,
+                            \\"tagName\\": \\"rect\\",
+                            \\"attributes\\": {
+                              \\"id\\": \\"el\\",
+                              \\"width\\": \\"100\\",
+                              \\"height\\": \\"50\\",
+                              \\"x\\": \\"40\\",
+                              \\"y\\": \\"20\\",
+                              \\"fill\\": \\"red\\"
+                            },
+                            \\"childNodes\\": [],
+                            \\"isSVG\\": true,
+                            \\"rootId\\": 32,
+                            \\"id\\": 53
+                          },
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"rootId\\": 32,
+                            \\"id\\": 54
+                          }
+                        ],
+                        \\"isSVG\\": true,
+                        \\"rootId\\": 32,
+                        \\"id\\": 51
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n  \\\\n\\\\n\\",
+                        \\"rootId\\": 32,
+                        \\"id\\": 55
                       }
                     ],
                     \\"rootId\\": 32,
@@ -4918,24 +4967,24 @@ exports[`record integration tests should nest record iframe 1`] = `
                     \\"tagName\\": \\"head\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [],
-                    \\"rootId\\": 51,
-                    \\"id\\": 53
+                    \\"rootId\\": 56,
+                    \\"id\\": 58
                   },
                   {
                     \\"type\\": 2,
                     \\"tagName\\": \\"body\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [],
-                    \\"rootId\\": 51,
-                    \\"id\\": 54
+                    \\"rootId\\": 56,
+                    \\"id\\": 59
                   }
                 ],
-                \\"rootId\\": 51,
-                \\"id\\": 52
+                \\"rootId\\": 56,
+                \\"id\\": 57
               }
             ],
             \\"compatMode\\": \\"BackCompat\\",
-            \\"id\\": 51
+            \\"id\\": 56
           }
         }
       ],
@@ -4961,8 +5010,8 @@ exports[`record integration tests should nest record iframe 1`] = `
                 \\"name\\": \\"html\\",
                 \\"publicId\\": \\"\\",
                 \\"systemId\\": \\"\\",
-                \\"rootId\\": 55,
-                \\"id\\": 56
+                \\"rootId\\": 60,
+                \\"id\\": 61
               },
               {
                 \\"type\\": 2,
@@ -4979,8 +5028,8 @@ exports[`record integration tests should nest record iframe 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"rootId\\": 55,
-                        \\"id\\": 59
+                        \\"rootId\\": 60,
+                        \\"id\\": 64
                       },
                       {
                         \\"type\\": 2,
@@ -4989,14 +5038,14 @@ exports[`record integration tests should nest record iframe 1`] = `
                           \\"charset\\": \\"UTF-8\\"
                         },
                         \\"childNodes\\": [],
-                        \\"rootId\\": 55,
-                        \\"id\\": 60
+                        \\"rootId\\": 60,
+                        \\"id\\": 65
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"rootId\\": 55,
-                        \\"id\\": 61
+                        \\"rootId\\": 60,
+                        \\"id\\": 66
                       },
                       {
                         \\"type\\": 2,
@@ -5006,14 +5055,14 @@ exports[`record integration tests should nest record iframe 1`] = `
                           \\"content\\": \\"width=device-width, initial-scale=1.0\\"
                         },
                         \\"childNodes\\": [],
-                        \\"rootId\\": 55,
-                        \\"id\\": 62
+                        \\"rootId\\": 60,
+                        \\"id\\": 67
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    \\",
-                        \\"rootId\\": 55,
-                        \\"id\\": 63
+                        \\"rootId\\": 60,
+                        \\"id\\": 68
                       },
                       {
                         \\"type\\": 2,
@@ -5023,28 +5072,28 @@ exports[`record integration tests should nest record iframe 1`] = `
                           {
                             \\"type\\": 3,
                             \\"textContent\\": \\"Frame 2\\",
-                            \\"rootId\\": 55,
-                            \\"id\\": 65
+                            \\"rootId\\": 60,
+                            \\"id\\": 70
                           }
                         ],
-                        \\"rootId\\": 55,
-                        \\"id\\": 64
+                        \\"rootId\\": 60,
+                        \\"id\\": 69
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n  \\",
-                        \\"rootId\\": 55,
-                        \\"id\\": 66
+                        \\"rootId\\": 60,
+                        \\"id\\": 71
                       }
                     ],
-                    \\"rootId\\": 55,
-                    \\"id\\": 58
+                    \\"rootId\\": 60,
+                    \\"id\\": 63
                   },
                   {
                     \\"type\\": 3,
                     \\"textContent\\": \\"\\\\n  \\",
-                    \\"rootId\\": 55,
-                    \\"id\\": 67
+                    \\"rootId\\": 60,
+                    \\"id\\": 72
                   },
                   {
                     \\"type\\": 2,
@@ -5054,8 +5103,8 @@ exports[`record integration tests should nest record iframe 1`] = `
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n    frame 2\\\\n  \\\\n  \\",
-                        \\"rootId\\": 55,
-                        \\"id\\": 69
+                        \\"rootId\\": 60,
+                        \\"id\\": 74
                       },
                       {
                         \\"type\\": 2,
@@ -5065,29 +5114,29 @@ exports[`record integration tests should nest record iframe 1`] = `
                           {
                             \\"type\\": 3,
                             \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
-                            \\"rootId\\": 55,
-                            \\"id\\": 71
+                            \\"rootId\\": 60,
+                            \\"id\\": 76
                           }
                         ],
-                        \\"rootId\\": 55,
-                        \\"id\\": 70
+                        \\"rootId\\": 60,
+                        \\"id\\": 75
                       },
                       {
                         \\"type\\": 3,
                         \\"textContent\\": \\"\\\\n\\\\n\\",
-                        \\"rootId\\": 55,
-                        \\"id\\": 72
+                        \\"rootId\\": 60,
+                        \\"id\\": 77
                       }
                     ],
-                    \\"rootId\\": 55,
-                    \\"id\\": 68
+                    \\"rootId\\": 60,
+                    \\"id\\": 73
                   }
                 ],
-                \\"rootId\\": 55,
-                \\"id\\": 57
+                \\"rootId\\": 60,
+                \\"id\\": 62
               }
             ],
-            \\"id\\": 55
+            \\"id\\": 60
           }
         }
       ],
@@ -5106,7 +5155,7 @@ exports[`record integration tests should nest record iframe 1`] = `
       \\"removes\\": [],
       \\"adds\\": [
         {
-          \\"parentId\\": 68,
+          \\"parentId\\": 73,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
@@ -5115,8 +5164,8 @@ exports[`record integration tests should nest record iframe 1`] = `
               \\"id\\": \\"five\\"
             },
             \\"childNodes\\": [],
-            \\"rootId\\": 55,
-            \\"id\\": 73
+            \\"rootId\\": 60,
+            \\"id\\": 78
           }
         }
       ]
@@ -5128,7 +5177,7 @@ exports[`record integration tests should nest record iframe 1`] = `
       \\"source\\": 0,
       \\"adds\\": [
         {
-          \\"parentId\\": 73,
+          \\"parentId\\": 78,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 0,
@@ -5143,24 +5192,24 @@ exports[`record integration tests should nest record iframe 1`] = `
                     \\"tagName\\": \\"head\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [],
-                    \\"rootId\\": 74,
-                    \\"id\\": 76
+                    \\"rootId\\": 79,
+                    \\"id\\": 81
                   },
                   {
                     \\"type\\": 2,
                     \\"tagName\\": \\"body\\",
                     \\"attributes\\": {},
                     \\"childNodes\\": [],
-                    \\"rootId\\": 74,
-                    \\"id\\": 77
+                    \\"rootId\\": 79,
+                    \\"id\\": 82
                   }
                 ],
-                \\"rootId\\": 74,
-                \\"id\\": 75
+                \\"rootId\\": 79,
+                \\"id\\": 80
               }
             ],
             \\"compatMode\\": \\"BackCompat\\",
-            \\"id\\": 74
+            \\"id\\": 79
           }
         }
       ],
diff --git a/packages/rrweb/test/html/frame1.html b/packages/rrweb/test/html/frame1.html
index 8810af4608..36a4d335be 100644
--- a/packages/rrweb/test/html/frame1.html
+++ b/packages/rrweb/test/html/frame1.html
@@ -9,5 +9,13 @@
     frame 1
     <iframe id="three" frameborder="0"></iframe>
     <iframe id="four" src="./frame2.html" frameborder="0"></iframe>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      width="300"
+      height="300"
+    >
+      <rect id="el" width="100" height="50" x="40" y="20" fill="red" />
+    </svg>
   </body>
 </html>
diff --git a/packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts b/packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts
index 56c136c55c..2a3eaf3461 100644
--- a/packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts
+++ b/packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts
@@ -8,7 +8,7 @@ export declare class CanvasManager {
     private rafStamps;
     private mirror;
     private mutationCb;
-    private resetObservers;
+    private resetObservers?;
     private frozen;
     private locked;
     reset(): void;

From e104300f254aad1646c20de81ed46a0ec54500c2 Mon Sep 17 00:00:00 2001
From: Cristi Constantin <1748317+croqaz@users.noreply.github.com>
Date: Fri, 25 Feb 2022 04:45:53 +0000
Subject: [PATCH 517/524] Decrease embedded img size for inlineImages (#836)

* Decrease embedded img size for inlineImages

* Fix the test

* Use webp for image snapshots

* Implemented optional param dataURLOptions
---
 packages/rrweb-snapshot/src/snapshot.ts       | 19 +++++++++++++++----
 packages/rrweb-snapshot/src/types.ts          |  5 +++++
 .../rrweb-snapshot/test/integration.test.ts   |  9 ++++++---
 packages/rrweb-snapshot/typings/snapshot.d.ts |  4 +++-
 packages/rrweb-snapshot/typings/types.d.ts    |  4 ++++
 5 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 1d82cc1307..0854176010 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -7,6 +7,7 @@ import {
   idNodeMap,
   MaskInputOptions,
   SlimDOMOptions,
+  DataURLOptions,
   MaskTextFn,
   MaskInputFn,
   KeepIframeSrcFn,
@@ -378,6 +379,7 @@ function serializeNode(
     maskInputOptions: MaskInputOptions;
     maskTextFn: MaskTextFn | undefined;
     maskInputFn: MaskInputFn | undefined;
+    dataURLOptions?: DataURLOptions,
     inlineImages: boolean;
     recordCanvas: boolean;
     keepIframeSrcFn: KeepIframeSrcFn;
@@ -393,6 +395,7 @@ function serializeNode(
     maskInputOptions = {},
     maskTextFn,
     maskInputFn,
+    dataURLOptions = {},
     inlineImages,
     recordCanvas,
     keepIframeSrcFn,
@@ -513,17 +516,17 @@ function serializeNode(
         if ((n as ICanvas).__context === '2d') {
           // only record this on 2d canvas
           if (!is2DCanvasBlank(n as HTMLCanvasElement)) {
-            attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL();
+            attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL(dataURLOptions.type, dataURLOptions.quality);
           }
         } else if (!('__context' in n)) {
           // context is unknown, better not call getContext to trigger it
-          const canvasDataURL = (n as HTMLCanvasElement).toDataURL();
+          const canvasDataURL = (n as HTMLCanvasElement).toDataURL(dataURLOptions.type, dataURLOptions.quality);
 
           // create blank canvas of same dimensions
           const blankCanvas = document.createElement('canvas');
           blankCanvas.width = (n as HTMLCanvasElement).width;
           blankCanvas.height = (n as HTMLCanvasElement).height;
-          const blankCanvasDataURL = blankCanvas.toDataURL();
+          const blankCanvasDataURL = blankCanvas.toDataURL(dataURLOptions.type, dataURLOptions.quality);
 
           // no need to save dataURL if it's the same as blank canvas
           if (canvasDataURL !== blankCanvasDataURL) {
@@ -545,7 +548,7 @@ function serializeNode(
             canvasService!.width = image.naturalWidth;
             canvasService!.height = image.naturalHeight;
             canvasCtx!.drawImage(image, 0, 0);
-            attributes.rr_dataURL = canvasService!.toDataURL();
+            attributes.rr_dataURL = canvasService!.toDataURL(dataURLOptions.type, dataURLOptions.quality);
           } catch (err) {
             console.warn(
               `Cannot inline img src=${image.currentSrc}! Error: ${err}`,
@@ -774,6 +777,7 @@ export function serializeNodeWithId(
     maskTextFn: MaskTextFn | undefined;
     maskInputFn: MaskInputFn | undefined;
     slimDOMOptions: SlimDOMOptions;
+    dataURLOptions?: DataURLOptions;
     keepIframeSrcFn?: KeepIframeSrcFn;
     inlineImages?: boolean;
     recordCanvas?: boolean;
@@ -796,6 +800,7 @@ export function serializeNodeWithId(
     maskTextFn,
     maskInputFn,
     slimDOMOptions,
+    dataURLOptions = {},
     inlineImages = false,
     recordCanvas = false,
     onSerialize,
@@ -814,6 +819,7 @@ export function serializeNodeWithId(
     maskInputOptions,
     maskTextFn,
     maskInputFn,
+    dataURLOptions,
     inlineImages,
     recordCanvas,
     keepIframeSrcFn,
@@ -880,6 +886,7 @@ export function serializeNodeWithId(
       maskTextFn,
       maskInputFn,
       slimDOMOptions,
+      dataURLOptions,
       inlineImages,
       recordCanvas,
       preserveWhiteSpace,
@@ -933,6 +940,7 @@ export function serializeNodeWithId(
             maskTextFn,
             maskInputFn,
             slimDOMOptions,
+            dataURLOptions,
             inlineImages,
             recordCanvas,
             preserveWhiteSpace,
@@ -966,6 +974,7 @@ function snapshot(
     maskTextFn?: MaskTextFn;
     maskInputFn?: MaskTextFn;
     slimDOM?: boolean | SlimDOMOptions;
+    dataURLOptions?: DataURLOptions,
     inlineImages?: boolean;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
@@ -987,6 +996,7 @@ function snapshot(
     maskTextFn,
     maskInputFn,
     slimDOM = false,
+    dataURLOptions,
     preserveWhiteSpace,
     onSerialize,
     onIframeLoad,
@@ -1051,6 +1061,7 @@ function snapshot(
       maskTextFn,
       maskInputFn,
       slimDOMOptions,
+      dataURLOptions,
       inlineImages,
       recordCanvas,
       preserveWhiteSpace,
diff --git a/packages/rrweb-snapshot/src/types.ts b/packages/rrweb-snapshot/src/types.ts
index f239213d32..eedd49252f 100644
--- a/packages/rrweb-snapshot/src/types.ts
+++ b/packages/rrweb-snapshot/src/types.ts
@@ -112,6 +112,11 @@ export type SlimDOMOptions = Partial<{
   headMetaVerification: boolean;
 }>;
 
+export type DataURLOptions = Partial<{
+  type: string;
+  quality: number;
+}>;
+
 export type MaskTextFn = (text: string) => string;
 export type MaskInputFn = (text: string) => string;
 
diff --git a/packages/rrweb-snapshot/test/integration.test.ts b/packages/rrweb-snapshot/test/integration.test.ts
index c9aa91b9d8..0d5af440b6 100644
--- a/packages/rrweb-snapshot/test/integration.test.ts
+++ b/packages/rrweb-snapshot/test/integration.test.ts
@@ -199,14 +199,17 @@ iframe.contentDocument.querySelector('center').clientHeight
       waitUntil: 'load',
     });
     await page.waitForSelector('img', { timeout: 1000 });
-    await page.evaluate(`${code}var snapshot = rrweb.snapshot(document, {inlineImages: true, inlineStylesheet: false});
-    `);
+    await page.evaluate(`${code}var snapshot = rrweb.snapshot(document, {
+        dataURLOptions: { type: "image/webp", quality: 0.8 },
+        inlineImages: true,
+        inlineStylesheet: false
+    })`);
     await page.waitFor(100);
     const snapshot = await page.evaluate(
       'JSON.stringify(snapshot[0], null, 2);',
     );
     assert(snapshot.includes('"rr_dataURL"'));
-    assert(snapshot.includes('data:image/png;base64,'));
+    assert(snapshot.includes('data:image/webp;base64,'));
   });
 });
 
diff --git a/packages/rrweb-snapshot/typings/snapshot.d.ts b/packages/rrweb-snapshot/typings/snapshot.d.ts
index af06efc2b2..b970f751eb 100644
--- a/packages/rrweb-snapshot/typings/snapshot.d.ts
+++ b/packages/rrweb-snapshot/typings/snapshot.d.ts
@@ -1,4 +1,4 @@
-import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions, SlimDOMOptions, MaskTextFn, MaskInputFn, KeepIframeSrcFn } from './types';
+import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions, SlimDOMOptions, DataURLOptions, MaskTextFn, MaskInputFn, KeepIframeSrcFn } from './types';
 export declare const IGNORED_NODE = -2;
 export declare function absoluteToStylesheet(cssText: string | null, href: string): string;
 export declare function absoluteToDoc(doc: Document, attributeValue: string): string;
@@ -18,6 +18,7 @@ export declare function serializeNodeWithId(n: Node | INode, options: {
     maskTextFn: MaskTextFn | undefined;
     maskInputFn: MaskInputFn | undefined;
     slimDOMOptions: SlimDOMOptions;
+    dataURLOptions?: DataURLOptions;
     keepIframeSrcFn?: KeepIframeSrcFn;
     inlineImages?: boolean;
     recordCanvas?: boolean;
@@ -36,6 +37,7 @@ declare function snapshot(n: Document, options?: {
     maskTextFn?: MaskTextFn;
     maskInputFn?: MaskTextFn;
     slimDOM?: boolean | SlimDOMOptions;
+    dataURLOptions?: DataURLOptions;
     inlineImages?: boolean;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
diff --git a/packages/rrweb-snapshot/typings/types.d.ts b/packages/rrweb-snapshot/typings/types.d.ts
index 262d3f9aef..a8ccc0d305 100644
--- a/packages/rrweb-snapshot/typings/types.d.ts
+++ b/packages/rrweb-snapshot/typings/types.d.ts
@@ -91,6 +91,10 @@ export declare type SlimDOMOptions = Partial<{
     headMetaAuthorship: boolean;
     headMetaVerification: boolean;
 }>;
+export declare type DataURLOptions = Partial<{
+    type: string;
+    quality: number;
+}>;
 export declare type MaskTextFn = (text: string) => string;
 export declare type MaskInputFn = (text: string) => string;
 export declare type KeepIframeSrcFn = (src: string) => boolean;

From bd144be39be799dc598e11377bb5356b0752e986 Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Sat, 26 Feb 2022 17:33:59 +0800
Subject: [PATCH 518/524] chore(release): publish new version

 - rrdom@0.1.1
 - rrweb@1.1.2
 - rrweb-player@0.7.13
 - rrweb-snapshot@1.1.13
---
 packages/rrdom/package.json          | 4 ++--
 packages/rrweb-player/package.json   | 4 ++--
 packages/rrweb-snapshot/package.json | 2 +-
 packages/rrweb/package.json          | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json
index ab09add661..dc2b17e977 100644
--- a/packages/rrdom/package.json
+++ b/packages/rrdom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrdom",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "scripts": {
     "dev": "rollup -c -w",
     "bundle": "rollup --config",
@@ -33,7 +33,7 @@
     "rollup": "^2.56.3",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
-    "rrweb-snapshot": "^1.1.12",
+    "rrweb-snapshot": "^1.1.13",
     "ts-jest": "^27.0.5",
     "typescript": "^3.9.5"
   },
diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
index 73cb810b4f..bd0309f459 100644
--- a/packages/rrweb-player/package.json
+++ b/packages/rrweb-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-player",
-  "version": "0.7.12",
+  "version": "0.7.13",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-node-resolve": "^7.0.0",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^1.1.1"
+    "rrweb": "^1.1.2"
   },
   "scripts": {
     "build": "rollup -c",
diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
index ef2182e3c1..1a4cb19cd4 100644
--- a/packages/rrweb-snapshot/package.json
+++ b/packages/rrweb-snapshot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 61a1fcb877..9b4ff47f5d 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",
@@ -79,6 +79,6 @@
     "base64-arraybuffer": "^1.0.1",
     "fflate": "^0.4.4",
     "mitt": "^1.1.3",
-    "rrweb-snapshot": "^1.1.12"
+    "rrweb-snapshot": "^1.1.13"
   }
 }

From 8afeed32248356981dbf777fc85b781f41443b34 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Tue, 8 Mar 2022 16:07:32 +0100
Subject: [PATCH 519/524] Upgrade Typescript to 4.6.2, and bump up other
 packages (#856)

---
 packages/rrweb/package.json                   |  20 +-
 packages/rrweb/src/record/mutation.ts         |   3 +-
 packages/rrweb/src/record/observer.ts         |  14 +-
 packages/rrweb/src/types.ts                   |   2 +
 packages/rrweb/test/utils.ts                  |  11 +-
 .../observers/canvas/serialize-args.d.ts      |   2 +-
 packages/rrweb/typings/types.d.ts             |   1 -
 yarn.lock                                     | 838 +++++++++++++++++-
 8 files changed, 855 insertions(+), 36 deletions(-)

diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 9b4ff47f5d..1977be7d8d 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -42,13 +42,13 @@
   "homepage": "https://github.com/rrweb-io/rrweb#readme",
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^7.0.0",
-    "@rollup/plugin-typescript": "^8.2.5",
+    "@rollup/plugin-typescript": "^8.3.1",
     "@types/chai": "^4.1.6",
     "@types/inquirer": "0.0.43",
-    "@types/jest": "^27.0.2",
+    "@types/jest": "^27.4.1",
     "@types/jest-image-snapshot": "^4.3.1",
-    "@types/jsdom": "^16.2.12",
-    "@types/node": "^12.20.16",
+    "@types/jsdom": "^16.2.14",
+    "@types/node": "^17.0.21",
     "@types/prettier": "^2.3.2",
     "@types/puppeteer": "^5.4.4",
     "cross-env": "^5.2.0",
@@ -56,7 +56,7 @@
     "identity-obj-proxy": "^3.0.0",
     "ignore-styles": "^5.0.1",
     "inquirer": "^6.2.1",
-    "jest": "^27.2.4",
+    "jest": "^27.5.1",
     "jest-image-snapshot": "^4.5.1",
     "jest-snapshot": "^23.6.0",
     "jsdom": "^17.0.0",
@@ -67,11 +67,11 @@
     "rollup-plugin-postcss": "^3.1.1",
     "rollup-plugin-rename-node-modules": "^1.1.0",
     "rollup-plugin-terser": "^7.0.2",
-    "ts-jest": "^27.0.5",
-    "ts-node": "^7.0.1",
-    "tslib": "^1.9.3",
-    "tslint": "^4.5.1",
-    "typescript": "^3.9.5"
+    "ts-jest": "^27.1.3",
+    "ts-node": "^10.7.0",
+    "tslib": "^2.3.1",
+    "tslint": "^6.1.3",
+    "typescript": "^4.6.2"
   },
   "dependencies": {
     "@types/css-font-loading-module": "0.0.7",
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index 205a9220d5..cb4de6944d 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -17,6 +17,7 @@ import {
   styleAttributeValue,
   observerParam,
   MutationBufferParam,
+  Optional,
 } from '../types';
 import {
   isBlocked,
@@ -109,7 +110,7 @@ class DoubleLinkedList {
       }
     }
     if (n.__ln) {
-      delete n.__ln;
+      delete (n as Optional<NodeInLinkedList, '__ln'>).__ln;
     }
     this.length--;
   }
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index cf7d70333c..a735c93e3c 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -54,18 +54,20 @@ const isCSSMediaRuleSupported = typeof CSSMediaRule !== 'undefined';
 const isCSSSupportsRuleSupported = typeof CSSSupportsRule !== 'undefined';
 const isCSSConditionRuleSupported = typeof CSSConditionRule !== 'undefined';
 
-function getEventTarget(event: Event): EventTarget | null {
+// Event.path is non-standard and used in some older browsers
+type NonStandardEvent = Omit<Event, 'composedPath'> & {
+  path: EventTarget[];
+};
+
+function getEventTarget(event: Event | NonStandardEvent): EventTarget | null {
   try {
     if ('composedPath' in event) {
       const path = event.composedPath();
       if (path.length) {
         return path[0];
       }
-    } else if (
-      'path' in event &&
-      (event as { path: EventTarget[] }).path.length
-    ) {
-      return (event as { path: EventTarget[] }).path[0];
+    } else if ('path' in event && event.path.length) {
+      return event.path[0];
     }
     return event.target;
   } catch {
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index a78e8caeb5..dea29982dc 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -686,3 +686,5 @@ declare global {
 }
 
 export type IWindow = Window & typeof globalThis;
+
+export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts
index 333028e7b8..69e72cd998 100644
--- a/packages/rrweb/test/utils.ts
+++ b/packages/rrweb/test/utils.ts
@@ -4,6 +4,9 @@ import {
   IncrementalSource,
   eventWithTime,
   MouseInteractions,
+  Optional,
+  mouseInteractionData,
+  event,
 } from '../src/types';
 import * as puppeteer from 'puppeteer';
 import { format } from 'prettier';
@@ -106,8 +109,8 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
           s.type === EventType.IncrementalSnapshot &&
           s.data.source === IncrementalSource.MouseInteraction
         ) {
-          delete s.data.x;
-          delete s.data.y;
+          delete (s.data as Optional<mouseInteractionData, 'x'>).x;
+          delete (s.data as Optional<mouseInteractionData, 'y'>).y;
         }
         if (
           s.type === EventType.IncrementalSnapshot &&
@@ -149,8 +152,8 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
             coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
           });
         }
-        delete s.timestamp;
-        return s;
+        delete (s as Optional<eventWithTime, 'timestamp'>).timestamp;
+        return s as event;
       }),
     null,
     2,
diff --git a/packages/rrweb/typings/record/observers/canvas/serialize-args.d.ts b/packages/rrweb/typings/record/observers/canvas/serialize-args.d.ts
index 5a1c90ce77..fd1dfe4558 100644
--- a/packages/rrweb/typings/record/observers/canvas/serialize-args.d.ts
+++ b/packages/rrweb/typings/record/observers/canvas/serialize-args.d.ts
@@ -3,4 +3,4 @@ export declare function variableListFor(ctx: WebGLRenderingContext | WebGL2Rende
 export declare const saveWebGLVar: (value: any, win: IWindow, ctx: WebGL2RenderingContext | WebGLRenderingContext) => number | void;
 export declare function serializeArg(value: any, win: IWindow, ctx: WebGL2RenderingContext | WebGLRenderingContext): SerializedWebGlArg;
 export declare const serializeArgs: (args: Array<any>, win: IWindow, ctx: WebGLRenderingContext | WebGL2RenderingContext) => SerializedWebGlArg[];
-export declare const isInstanceOfWebGLObject: (value: any, win: IWindow) => value is WebGLShader | WebGLBuffer | WebGLVertexArrayObject | WebGLTexture | WebGLProgram | WebGLActiveInfo | WebGLUniformLocation | WebGLFramebuffer | WebGLRenderbuffer | WebGLShaderPrecisionFormat;
+export declare const isInstanceOfWebGLObject: (value: any, win: IWindow) => value is WebGLTexture | WebGLShader | WebGLBuffer | WebGLVertexArrayObject | WebGLProgram | WebGLActiveInfo | WebGLUniformLocation | WebGLFramebuffer | WebGLRenderbuffer | WebGLShaderPrecisionFormat;
diff --git a/packages/rrweb/typings/types.d.ts b/packages/rrweb/typings/types.d.ts
index 9779a00366..87c1a9c814 100644
--- a/packages/rrweb/typings/types.d.ts
+++ b/packages/rrweb/typings/types.d.ts
@@ -1,4 +1,3 @@
-/// <reference types="css-font-loading-module" />
 import { serializedNodeWithId, idNodeMap, INode, MaskInputOptions, SlimDOMOptions, MaskInputFn, MaskTextFn } from 'rrweb-snapshot';
 import { PackFn, UnpackFn } from './packer/base';
 import { IframeManager } from './record/iframe-manager';
diff --git a/yarn.lock b/yarn.lock
index 17ab28e258..6317759f87 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -497,6 +497,18 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@cspotcode/source-map-consumer@0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz#33bf4b7b39c178821606f669bbc447a6a629786b"
+  integrity sha512-41qniHzTU8yAGbCp04ohlmSrZf8bkf/iJsl3V0dRGsQN/5GFfx+LbCSsCpp2gqrqjTVg/K6O8ycoV35JIwAzAg==
+
+"@cspotcode/source-map-support@0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@cspotcode/source-map-support/-/source-map-support-0.7.0.tgz#4789840aa859e46d2f3173727ab707c66bf344f5"
+  integrity sha512-X4xqRHqN8ACt2aHVe51OxeA2HjbcL4MqFqXkrmQszJ1NOUuUu5u6Vqx/0lZSVNku7velL5FC/s5uEAj1lsBMhA==
+  dependencies:
+    "@cspotcode/source-map-consumer" "0.8.0"
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -571,6 +583,18 @@
     jest-util "^27.4.2"
     slash "^3.0.0"
 
+"@jest/console@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-27.5.1.tgz#260fe7239602fe5130a94f1aa386eff54b014bba"
+  integrity sha512-kZ/tNpS3NXn0mlXXXPNuDZnb4c0oZ20r4K5eemM2k30ZC3G0T02nXUvyhf5YdbXWHPEJLc9qGLxEZ216MdL+Zg==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^27.5.1"
+    jest-util "^27.5.1"
+    slash "^3.0.0"
+
 "@jest/core@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.2.4.tgz#0b932da787d64848eab720dbb88e5b7a3f86e539"
@@ -639,6 +663,40 @@
     slash "^3.0.0"
     strip-ansi "^6.0.0"
 
+"@jest/core@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.5.1.tgz#267ac5f704e09dc52de2922cbf3af9edcd64b626"
+  integrity sha512-AK6/UTrvQD0Cd24NSqmIA6rKsu0tKIxfiCducZvqxYdmMisOYAsdItspT+fQDQYARPf8XgjAFZi0ogW2agH5nQ==
+  dependencies:
+    "@jest/console" "^27.5.1"
+    "@jest/reporters" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.8.1"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-changed-files "^27.5.1"
+    jest-config "^27.5.1"
+    jest-haste-map "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-resolve-dependencies "^27.5.1"
+    jest-runner "^27.5.1"
+    jest-runtime "^27.5.1"
+    jest-snapshot "^27.5.1"
+    jest-util "^27.5.1"
+    jest-validate "^27.5.1"
+    jest-watcher "^27.5.1"
+    micromatch "^4.0.4"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
 "@jest/environment@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.2.4.tgz#db3e60f7dd30ab950f6ce2d6d7293ed9a6b7cbcd"
@@ -659,6 +717,16 @@
     "@types/node" "*"
     jest-mock "^27.4.6"
 
+"@jest/environment@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.5.1.tgz#d7425820511fe7158abbecc010140c3fd3be9c74"
+  integrity sha512-/WQjhPJe3/ghaol/4Bq480JKXV/Rfw8nQdN7f41fM8VDHLcxKXou6QyXAh3EFr9/bVG3x74z1NWDkP87EiY8gA==
+  dependencies:
+    "@jest/fake-timers" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    jest-mock "^27.5.1"
+
 "@jest/fake-timers@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.2.4.tgz#00df08bd60332bd59503cb5b6db21e4903785f86"
@@ -683,6 +751,18 @@
     jest-mock "^27.4.6"
     jest-util "^27.4.2"
 
+"@jest/fake-timers@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.5.1.tgz#76979745ce0579c8a94a4678af7a748eda8ada74"
+  integrity sha512-/aPowoolwa07k7/oM3aASneNeBGCmGQsc3ugN4u6s4C/+s5M64MFo/+djTdiwcbQlRfFElGuDXWzaWj6QgKObQ==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@sinonjs/fake-timers" "^8.0.1"
+    "@types/node" "*"
+    jest-message-util "^27.5.1"
+    jest-mock "^27.5.1"
+    jest-util "^27.5.1"
+
 "@jest/globals@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.2.4.tgz#0aeb22b011f8c8c4b8ff3b4dbd1ee0392fe0dd8a"
@@ -701,6 +781,15 @@
     "@jest/types" "^27.4.2"
     expect "^27.4.6"
 
+"@jest/globals@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.5.1.tgz#7ac06ce57ab966566c7963431cef458434601b2b"
+  integrity sha512-ZEJNB41OBQQgGzgyInAv0UUfDDj3upmHydjieSxFvTRuZElrx7tXg/uVQ5hYVEwiXs3+aMsAeEc9X7xiSKCm4Q==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    expect "^27.5.1"
+
 "@jest/reporters@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.2.4.tgz#1482ff007f2e919d85c54b1563abb8b2ea2d5198"
@@ -762,6 +851,37 @@
     terminal-link "^2.0.0"
     v8-to-istanbul "^8.1.0"
 
+"@jest/reporters@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.5.1.tgz#ceda7be96170b03c923c37987b64015812ffec04"
+  integrity sha512-cPXh9hWIlVJMQkVk84aIvXuBB4uQQmFqZiacloFuGiP3ah1sbCxCosidXFDfqG8+6fO1oR2dTJTlsOy4VFmUfw==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    graceful-fs "^4.2.9"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^5.1.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.1.3"
+    jest-haste-map "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-util "^27.5.1"
+    jest-worker "^27.5.1"
+    slash "^3.0.0"
+    source-map "^0.6.0"
+    string-length "^4.0.1"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^8.1.0"
+
 "@jest/source-map@^27.0.6":
   version "27.0.6"
   resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-27.0.6.tgz#be9e9b93565d49b0548b86e232092491fb60551f"
@@ -780,6 +900,15 @@
     graceful-fs "^4.2.4"
     source-map "^0.6.0"
 
+"@jest/source-map@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-27.5.1.tgz#6608391e465add4205eae073b55e7f279e04e8cf"
+  integrity sha512-y9NIHUYF3PJRlHk98NdC/N1gl88BL08aQQgu4k4ZopQkCw9t9cV8mtl3TV8b/YCB8XaVTFrmUTAJvjsntDireg==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+    source-map "^0.6.0"
+
 "@jest/test-result@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.2.4.tgz#d1ca8298d168f1b0be834bfb543b1ac0294c05d7"
@@ -800,6 +929,16 @@
     "@types/istanbul-lib-coverage" "^2.0.0"
     collect-v8-coverage "^1.0.0"
 
+"@jest/test-result@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.5.1.tgz#56a6585fa80f7cdab72b8c5fc2e871d03832f5bb"
+  integrity sha512-EW35l2RYFUcUQxFJz5Cv5MTOxlJIQs4I7gxzi2zVU7PJhOwfYq1MdC5nhSmYjX1gmMmLPvB3sIaC+BkcHRBfag==
+  dependencies:
+    "@jest/console" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
 "@jest/test-sequencer@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.2.4.tgz#df66422a3e9e7440ce8b7498e255fa6b52c0bc03"
@@ -820,6 +959,16 @@
     jest-haste-map "^27.4.6"
     jest-runtime "^27.4.6"
 
+"@jest/test-sequencer@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.5.1.tgz#4057e0e9cea4439e544c6353c6affe58d095745b"
+  integrity sha512-LCheJF7WB2+9JuCS7VB/EmGIdQuhtqjRNI9A43idHv3E4KltCTsPsLxvdaubFHSYwY/fNjMWjl6vNRhDiN7vpQ==
+  dependencies:
+    "@jest/test-result" "^27.5.1"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^27.5.1"
+    jest-runtime "^27.5.1"
+
 "@jest/transform@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.2.4.tgz#2fe5b6836895f7a1b8bdec442c51e83943c62733"
@@ -862,6 +1011,27 @@
     source-map "^0.6.1"
     write-file-atomic "^3.0.0"
 
+"@jest/transform@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.5.1.tgz#6c3501dcc00c4c08915f292a600ece5ecfe1f409"
+  integrity sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^27.5.1"
+    babel-plugin-istanbul "^6.1.1"
+    chalk "^4.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-util "^27.5.1"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
+    slash "^3.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "^3.0.0"
+
 "@jest/types@^27.2.4":
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.2.4.tgz#2430042a66e00dc5b140c3636f4474d464c21ee8"
@@ -884,6 +1054,17 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@jest/types@^27.5.1":
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.5.1.tgz#3c79ec4a8ba61c170bf937bcf9e98a9df175ec80"
+  integrity sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^16.0.0"
+    chalk "^4.0.0"
+
 "@lerna/add@4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@lerna/add/-/add-4.0.0.tgz#c36f57d132502a57b9e7058d1548b7a565ef183f"
@@ -1810,6 +1991,14 @@
     "@rollup/pluginutils" "^3.1.0"
     resolve "^1.17.0"
 
+"@rollup/plugin-typescript@^8.3.1":
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-8.3.1.tgz#b7dc75ed6b4876e260b9e80624fab23bc98e4ac1"
+  integrity sha512-84rExe3ICUBXzqNX48WZV2Jp3OddjTMX97O2Py6D1KJaGSwWp0mDHXj+bCGNJqWHIEKDIT2U0sDjhP4czKi6cA==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    resolve "^1.17.0"
+
 "@rollup/pluginutils@4", "@rollup/pluginutils@^4.1.0":
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec"
@@ -1846,6 +2035,26 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
+"@tsconfig/node10@^1.0.7":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.8.tgz#c1e4e80d6f964fbecb3359c43bd48b40f7cadad9"
+  integrity sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg==
+
+"@tsconfig/node12@^1.0.7":
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node12/-/node12-1.0.9.tgz#62c1f6dee2ebd9aead80dc3afa56810e58e1a04c"
+  integrity sha512-/yBMcem+fbvhSREH+s14YJi18sp7J9jpuhYByADT2rypfajMZZN4WQ6zBGgBKp53NKmqI36wFYDb3yaMPurITw==
+
+"@tsconfig/node14@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node14/-/node14-1.0.1.tgz#95f2d167ffb9b8d2068b0b235302fafd4df711f2"
+  integrity sha512-509r2+yARFfHHE7T6Puu2jjkoycftovhXRqW328PDXTVGKihlb1P8Z9mMZH04ebyajfRY7dedfGynlrFHJUQCg==
+
+"@tsconfig/node16@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.2.tgz#423c77877d0569db20e1fc80885ac4118314010e"
+  integrity sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==
+
 "@tsconfig/svelte@^1.0.0":
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/@tsconfig/svelte/-/svelte-1.0.13.tgz#2fa34376627192c0d643ce54964915e2bd3a58e4"
@@ -1973,7 +2182,24 @@
     jest-diff "^27.0.0"
     pretty-format "^27.0.0"
 
-"@types/jsdom@^16.2.12", "@types/jsdom@^16.2.4":
+"@types/jest@^27.4.1":
+  version "27.4.1"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.4.1.tgz#185cbe2926eaaf9662d340cc02e548ce9e11ab6d"
+  integrity sha512-23iPJADSmicDVrWk+HT58LMJtzLAnB2AgIzplQuq/bSrGaxCrlvRFjGbXmamnnk/mAmCdLStiGqggu28ocUyiw==
+  dependencies:
+    jest-matcher-utils "^27.0.0"
+    pretty-format "^27.0.0"
+
+"@types/jsdom@^16.2.14":
+  version "16.2.14"
+  resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-16.2.14.tgz#26fe9da6a8870715b154bb84cd3b2e53433d8720"
+  integrity sha512-6BAy1xXEmMuHeAJ4Fv4yXKwBDTGTOseExKE3OaHiNycdHdZw59KfYzrt0DkDluvwmik1HRt6QS7bImxUmpSy+w==
+  dependencies:
+    "@types/node" "*"
+    "@types/parse5" "*"
+    "@types/tough-cookie" "*"
+
+"@types/jsdom@^16.2.4":
   version "16.2.13"
   resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-16.2.13.tgz#126c8b7441b159d6234610a48de77b6066f1823f"
   integrity sha512-8JQCjdeAidptSsOcRWk2iTm9wCcwn9l+kRG6k5bzUacrnm1ezV4forq0kWjUih/tumAeoG+OspOvQEbbRucBTw==
@@ -2007,10 +2233,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.60.tgz#35f3d6213daed95da7f0f73e75bcc6980e90597b"
   integrity sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==
 
-"@types/node@^12.20.16":
-  version "12.20.16"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.16.tgz#1acf34f6456208f495dac0434dd540488d17f991"
-  integrity sha512-6CLxw83vQf6DKqXxMPwl8qpF8I7THFZuIwLt4TnNsumxkp1VsRZWT8txQxncT/Rl2UojTsFzWgDG4FRMwafrlA==
+"@types/node@^17.0.21":
+  version "17.0.21"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.21.tgz#864b987c0c68d07b4345845c3e63b75edd143644"
+  integrity sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
@@ -2340,6 +2566,11 @@ acorn-walk@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
+acorn-walk@^8.1.1:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
+  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+
 acorn@^7.1.1, acorn@^7.4.0:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
@@ -2510,6 +2741,11 @@ are-we-there-yet@~1.1.2:
     delegates "^1.0.0"
     readable-stream "^2.0.6"
 
+arg@^4.1.0:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
+  integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -2660,6 +2896,20 @@ babel-jest@^27.4.6:
     graceful-fs "^4.2.4"
     slash "^3.0.0"
 
+babel-jest@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.5.1.tgz#a1bf8d61928edfefd21da27eb86a695bfd691444"
+  integrity sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==
+  dependencies:
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.1.1"
+    babel-preset-jest "^27.5.1"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    slash "^3.0.0"
+
 babel-plugin-istanbul@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
@@ -2702,6 +2952,16 @@ babel-plugin-jest-hoist@^27.4.0:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
+babel-plugin-jest-hoist@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz#9be98ecf28c331eb9f5df9c72d6f89deb8181c2e"
+  integrity sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.0.0"
+    "@types/babel__traverse" "^7.0.6"
+
 babel-preset-current-node-syntax@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
@@ -2736,6 +2996,14 @@ babel-preset-jest@^27.4.0:
     babel-plugin-jest-hoist "^27.4.0"
     babel-preset-current-node-syntax "^1.0.0"
 
+babel-preset-jest@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz#91f10f58034cb7989cb4f962b69fa6eef6a6bc81"
+  integrity sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==
+  dependencies:
+    babel-plugin-jest-hoist "^27.5.1"
+    babel-preset-current-node-syntax "^1.0.0"
+
 babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
@@ -2940,6 +3208,11 @@ buffer@^5.2.1, buffer@^5.5.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
+builtin-modules@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+  integrity sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=
+
 builtin-modules@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.2.0.tgz#45d5db99e7ee5e6bc4f362e008bf917ab5049887"
@@ -3090,7 +3363,7 @@ chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.1, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -3352,7 +3625,7 @@ combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.20.0:
+commander@^2.12.1, commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -3582,6 +3855,11 @@ create-error-class@^3.0.0:
   dependencies:
     capture-stack-trace "^1.0.0"
 
+create-require@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
+  integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
+
 cross-env@^5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.2.1.tgz#b2c76c1ca7add66dc874d11798466094f551b34d"
@@ -3991,11 +4269,21 @@ diff-sequences@^27.4.0:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.4.0.tgz#d783920ad8d06ec718a060d00196dfef25b132a5"
   integrity sha512-YqiQzkrsmHMH5uuh8OdQFU9/ZpADnwzml8z0O5HvRNda+5UZsaX/xN+AAxfR2hWq1Y7HZnAzO9J5lJXOuDz2Ww==
 
+diff-sequences@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
+  integrity sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==
+
 diff@^3.0.1, diff@^3.1.0, diff@^3.2.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
   integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
 
+diff@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
+  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
+
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -4519,6 +4807,16 @@ expect@^27.4.6:
     jest-matcher-utils "^27.4.6"
     jest-message-util "^27.4.6"
 
+expect@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-27.5.1.tgz#83ce59f1e5bdf5f9d2b94b61d2050db48f3fef74"
+  integrity sha512-E1q5hSUG2AmYQwQJ041nvgpkODHQvB+RKlB4IYdru6uJsyFTRyZAP463M+1lINorwbqAmUggi6+WwkD8lCS/Dw==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    jest-get-type "^27.5.1"
+    jest-matcher-utils "^27.5.1"
+    jest-message-util "^27.5.1"
+
 express@^4.16.4:
   version "4.17.1"
   resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
@@ -5184,6 +5482,11 @@ graceful-fs@^4.1.15, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2,
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
   integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
 
+graceful-fs@^4.2.9:
+  version "4.2.9"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
+  integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
+
 handlebars@^4.7.6:
   version "4.7.7"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
@@ -5705,6 +6008,13 @@ is-core-module@^2.2.0:
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
+  integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
+  dependencies:
+    has "^1.0.3"
+
 is-date-object@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.4.tgz#550cfcc03afada05eea3dd30981c7b09551f73e5"
@@ -6090,6 +6400,15 @@ jest-changed-files@^27.4.2:
     execa "^5.0.0"
     throat "^6.0.1"
 
+jest-changed-files@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.5.1.tgz#a348aed00ec9bf671cc58a66fcbe7c3dfd6a68f5"
+  integrity sha512-buBLMiByfWGCoMsLLzGUUSpAmIAGnbR2KJoMN10ziLhOLvP4e0SlypHnAel8iqQXTrcbmfEY9sSqae5sgUsTvw==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    execa "^5.0.0"
+    throat "^6.0.1"
+
 jest-circus@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.2.4.tgz#3bd898a29dcaf6a506f3f1b780dff5f67ca83c23"
@@ -6140,6 +6459,31 @@ jest-circus@^27.4.6:
     stack-utils "^2.0.3"
     throat "^6.0.1"
 
+jest-circus@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.5.1.tgz#37a5a4459b7bf4406e53d637b49d22c65d125ecc"
+  integrity sha512-D95R7x5UtlMA5iBYsOHFFbMD/GVA4R/Kdq15f7xYWUfWHBto9NYRsOvnSauTgdF+ogCpJ4tyKOXhUifxS65gdw==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^0.7.0"
+    expect "^27.5.1"
+    is-generator-fn "^2.0.0"
+    jest-each "^27.5.1"
+    jest-matcher-utils "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-runtime "^27.5.1"
+    jest-snapshot "^27.5.1"
+    jest-util "^27.5.1"
+    pretty-format "^27.5.1"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+    throat "^6.0.1"
+
 jest-cli@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.2.4.tgz#acda7f367aa6e674723fc1a7334e0ae1799448d2"
@@ -6176,6 +6520,24 @@ jest-cli@^27.4.7:
     prompts "^2.0.1"
     yargs "^16.2.0"
 
+jest-cli@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.5.1.tgz#278794a6e6458ea8029547e6c6cbf673bd30b145"
+  integrity sha512-Hc6HOOwYq4/74/c62dEE3r5elx8wjYqxY0r0G/nFrLDPMFRu6RA/u8qINOIkvhxG7mMQ5EJsOGfRpI8L6eFUVw==
+  dependencies:
+    "@jest/core" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    import-local "^3.0.2"
+    jest-config "^27.5.1"
+    jest-util "^27.5.1"
+    jest-validate "^27.5.1"
+    prompts "^2.0.1"
+    yargs "^16.2.0"
+
 jest-config@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.2.4.tgz#0204969f5ae2e5190d47be2c14c04d631b7836e2"
@@ -6231,6 +6593,36 @@ jest-config@^27.4.7:
     pretty-format "^27.4.6"
     slash "^3.0.0"
 
+jest-config@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.5.1.tgz#5c387de33dca3f99ad6357ddeccd91bf3a0e4a41"
+  integrity sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==
+  dependencies:
+    "@babel/core" "^7.8.0"
+    "@jest/test-sequencer" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    babel-jest "^27.5.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.1"
+    graceful-fs "^4.2.9"
+    jest-circus "^27.5.1"
+    jest-environment-jsdom "^27.5.1"
+    jest-environment-node "^27.5.1"
+    jest-get-type "^27.5.1"
+    jest-jasmine2 "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-runner "^27.5.1"
+    jest-util "^27.5.1"
+    jest-validate "^27.5.1"
+    micromatch "^4.0.4"
+    parse-json "^5.2.0"
+    pretty-format "^27.5.1"
+    slash "^3.0.0"
+    strip-json-comments "^3.1.1"
+
 jest-diff@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-23.6.0.tgz#1500f3f16e850bb3d71233408089be099f610c7d"
@@ -6261,6 +6653,16 @@ jest-diff@^27.4.6:
     jest-get-type "^27.4.0"
     pretty-format "^27.4.6"
 
+jest-diff@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.5.1.tgz#a07f5011ac9e6643cf8a95a462b7b1ecf6680def"
+  integrity sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^27.5.1"
+    jest-get-type "^27.5.1"
+    pretty-format "^27.5.1"
+
 jest-docblock@^27.0.6:
   version "27.0.6"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-27.0.6.tgz#cc78266acf7fe693ca462cbbda0ea4e639e4e5f3"
@@ -6275,6 +6677,13 @@ jest-docblock@^27.4.0:
   dependencies:
     detect-newline "^3.0.0"
 
+jest-docblock@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-27.5.1.tgz#14092f364a42c6108d42c33c8cf30e058e25f6c0"
+  integrity sha512-rl7hlABeTsRYxKiUfpHrQrG4e2obOiTQWfMEH3PxPjOtdsfLQO4ReWSZaQ7DETm4xu07rl4q/h4zcKXyU0/OzQ==
+  dependencies:
+    detect-newline "^3.0.0"
+
 jest-each@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-27.2.4.tgz#b4f280aafd63129ba82e345f0e74c5a10200aeef"
@@ -6297,6 +6706,17 @@ jest-each@^27.4.6:
     jest-util "^27.4.2"
     pretty-format "^27.4.6"
 
+jest-each@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-27.5.1.tgz#5bc87016f45ed9507fed6e4702a5b468a5b2c44e"
+  integrity sha512-1Ff6p+FbhT/bXQnEouYy00bkNSY7OUpfIcmdl8vZ31A1UUaurOLPA8a8BbJOF2RDUElwJhmeaV7LnagI+5UwNQ==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    chalk "^4.0.0"
+    jest-get-type "^27.5.1"
+    jest-util "^27.5.1"
+    pretty-format "^27.5.1"
+
 jest-environment-jsdom@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.2.4.tgz#39ae80bbb8675306bfaf0440be1e5f877554539a"
@@ -6323,6 +6743,19 @@ jest-environment-jsdom@^27.4.6:
     jest-util "^27.4.2"
     jsdom "^16.6.0"
 
+jest-environment-jsdom@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.5.1.tgz#ea9ccd1fc610209655a77898f86b2b559516a546"
+  integrity sha512-TFBvkTC1Hnnnrka/fUb56atfDtJ9VMZ94JkjTbggl1PEpwrYtUBKMezB3inLmWqQsXYLcMwNoDQwoBTAvFfsfw==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/fake-timers" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    jest-mock "^27.5.1"
+    jest-util "^27.5.1"
+    jsdom "^16.6.0"
+
 jest-environment-node@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.2.4.tgz#b79f98cb36e0c9111aac859c9c99f04eb2f74ff6"
@@ -6347,6 +6780,18 @@ jest-environment-node@^27.4.6:
     jest-mock "^27.4.6"
     jest-util "^27.4.2"
 
+jest-environment-node@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.5.1.tgz#dedc2cfe52fab6b8f5714b4808aefa85357a365e"
+  integrity sha512-Jt4ZUnxdOsTGwSRAfKEnE6BcwsSPNOijjwifq5sDFSA2kesnXTvNqKHYgM0hDq3549Uf/KzdXNYn4wMZJPlFLw==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/fake-timers" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    jest-mock "^27.5.1"
+    jest-util "^27.5.1"
+
 jest-get-type@^22.1.0:
   version "22.4.3"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-22.4.3.tgz#e3a8504d8479342dd4420236b322869f18900ce4"
@@ -6362,6 +6807,11 @@ jest-get-type@^27.4.0:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.4.0.tgz#7503d2663fffa431638337b3998d39c5e928e9b5"
   integrity sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==
 
+jest-get-type@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.5.1.tgz#3cd613c507b0f7ace013df407a1c1cd578bcb4f1"
+  integrity sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==
+
 jest-haste-map@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.2.4.tgz#f8974807bedf07348ca9fd24e5861ab7c8e61aba"
@@ -6402,6 +6852,26 @@ jest-haste-map@^27.4.6:
   optionalDependencies:
     fsevents "^2.3.2"
 
+jest-haste-map@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.5.1.tgz#9fd8bd7e7b4fa502d9c6164c5640512b4e811e7f"
+  integrity sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@types/graceful-fs" "^4.1.2"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-regex-util "^27.5.1"
+    jest-serializer "^27.5.1"
+    jest-util "^27.5.1"
+    jest-worker "^27.5.1"
+    micromatch "^4.0.4"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
 jest-image-snapshot@^4.5.1:
   version "4.5.1"
   resolved "https://registry.yarnpkg.com/jest-image-snapshot/-/jest-image-snapshot-4.5.1.tgz#79fe0419c7729eb1be6c873365307a7b60f5cda0"
@@ -6464,6 +6934,29 @@ jest-jasmine2@^27.4.6:
     pretty-format "^27.4.6"
     throat "^6.0.1"
 
+jest-jasmine2@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.5.1.tgz#a037b0034ef49a9f3d71c4375a796f3b230d1ac4"
+  integrity sha512-jtq7VVyG8SqAorDpApwiJJImd0V2wv1xzdheGHRGyuT7gZm6gG47QEskOlzsN1PG/6WNaCo5pmwMHDf3AkG2pQ==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/source-map" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    expect "^27.5.1"
+    is-generator-fn "^2.0.0"
+    jest-each "^27.5.1"
+    jest-matcher-utils "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-runtime "^27.5.1"
+    jest-snapshot "^27.5.1"
+    jest-util "^27.5.1"
+    pretty-format "^27.5.1"
+    throat "^6.0.1"
+
 jest-leak-detector@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.2.4.tgz#9bb7eab26a73bb280e9298be8d80f389288ec8f1"
@@ -6480,6 +6973,14 @@ jest-leak-detector@^27.4.6:
     jest-get-type "^27.4.0"
     pretty-format "^27.4.6"
 
+jest-leak-detector@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.5.1.tgz#6ec9d54c3579dd6e3e66d70e3498adf80fde3fb8"
+  integrity sha512-POXfWAMvfU6WMUXftV4HolnJfnPOGEu10fscNCA76KBpRRhcMN2c8d3iT2pxQS3HLbA+5X4sOUPzYO2NUyIlHQ==
+  dependencies:
+    jest-get-type "^27.5.1"
+    pretty-format "^27.5.1"
+
 jest-matcher-utils@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-23.6.0.tgz#726bcea0c5294261a7417afb6da3186b4b8cac80"
@@ -6489,6 +6990,16 @@ jest-matcher-utils@^23.6.0:
     jest-get-type "^22.1.0"
     pretty-format "^23.6.0"
 
+jest-matcher-utils@^27.0.0, jest-matcher-utils@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz#9c0cdbda8245bc22d2331729d1091308b40cf8ab"
+  integrity sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^27.5.1"
+    jest-get-type "^27.5.1"
+    pretty-format "^27.5.1"
+
 jest-matcher-utils@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.2.4.tgz#008fff018151415ad1b6cfc083fd70fe1e012525"
@@ -6550,6 +7061,21 @@ jest-message-util@^27.4.6:
     slash "^3.0.0"
     stack-utils "^2.0.3"
 
+jest-message-util@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.5.1.tgz#bdda72806da10d9ed6425e12afff38cd1458b6cf"
+  integrity sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^27.5.1"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^27.5.1"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
 jest-mock@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.2.4.tgz#c8f0ef33f73d8ff53e3f60b16d59f1128f4072ae"
@@ -6566,6 +7092,14 @@ jest-mock@^27.4.6:
     "@jest/types" "^27.4.2"
     "@types/node" "*"
 
+jest-mock@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.5.1.tgz#19948336d49ef4d9c52021d34ac7b5f36ff967d6"
+  integrity sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+
 jest-pnp-resolver@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
@@ -6581,6 +7115,11 @@ jest-regex-util@^27.4.0:
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.4.0.tgz#e4c45b52653128843d07ad94aec34393ea14fbca"
   integrity sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==
 
+jest-regex-util@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.5.1.tgz#4da143f7e9fd1e542d4aa69617b38e4a78365b95"
+  integrity sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==
+
 jest-resolve-dependencies@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.2.4.tgz#20c41cc02b66aa45169b282356ec73b133013089"
@@ -6599,6 +7138,15 @@ jest-resolve-dependencies@^27.4.6:
     jest-regex-util "^27.4.0"
     jest-snapshot "^27.4.6"
 
+jest-resolve-dependencies@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.5.1.tgz#d811ecc8305e731cc86dd79741ee98fed06f1da8"
+  integrity sha512-QQOOdY4PE39iawDn5rzbIePNigfe5B9Z91GDD1ae/xNDlu9kaat8QQ5EKnNmVWPV54hUdxCVwwj6YMgR2O7IOg==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-snapshot "^27.5.1"
+
 jest-resolve@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-23.6.0.tgz#cf1d1a24ce7ee7b23d661c33ba2150f3aebfa0ae"
@@ -6640,6 +7188,22 @@ jest-resolve@^27.4.6:
     resolve.exports "^1.1.0"
     slash "^3.0.0"
 
+jest-resolve@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.5.1.tgz#a2f1c5a0796ec18fe9eb1536ac3814c23617b384"
+  integrity sha512-FFDy8/9E6CV83IMbDpcjOhumAQPDyETnU2KZ1O98DwTnz8AOBsW/Xv3GySr1mOZdItLR+zDZ7I/UdTFbgSOVCw==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^27.5.1"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^27.5.1"
+    jest-validate "^27.5.1"
+    resolve "^1.20.0"
+    resolve.exports "^1.1.0"
+    slash "^3.0.0"
+
 jest-runner@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.2.4.tgz#d816f4cb4af04f3cba703afcf5a35a335b77cad4"
@@ -6696,6 +7260,33 @@ jest-runner@^27.4.6:
     source-map-support "^0.5.6"
     throat "^6.0.1"
 
+jest-runner@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.5.1.tgz#071b27c1fa30d90540805c5645a0ec167c7b62e5"
+  integrity sha512-g4NPsM4mFCOwFKXO4p/H/kWGdJp9V8kURY2lX8Me2drgXqG7rrZAx5kv+5H7wtt/cdFIjhqYx1HrlqWHaOvDaQ==
+  dependencies:
+    "@jest/console" "^27.5.1"
+    "@jest/environment" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.8.1"
+    graceful-fs "^4.2.9"
+    jest-docblock "^27.5.1"
+    jest-environment-jsdom "^27.5.1"
+    jest-environment-node "^27.5.1"
+    jest-haste-map "^27.5.1"
+    jest-leak-detector "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-runtime "^27.5.1"
+    jest-util "^27.5.1"
+    jest-worker "^27.5.1"
+    source-map-support "^0.5.6"
+    throat "^6.0.1"
+
 jest-runtime@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.2.4.tgz#170044041e5d30625ab8d753516bbe503f213a5c"
@@ -6757,6 +7348,34 @@ jest-runtime@^27.4.6:
     slash "^3.0.0"
     strip-bom "^4.0.0"
 
+jest-runtime@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.5.1.tgz#4896003d7a334f7e8e4a53ba93fb9bcd3db0a1af"
+  integrity sha512-o7gxw3Gf+H2IGt8fv0RiyE1+r83FJBRruoA+FXrlHw6xEyBsU8ugA6IPfTdVyA0w8HClpbK+DGJxH59UrNMx8A==
+  dependencies:
+    "@jest/environment" "^27.5.1"
+    "@jest/fake-timers" "^27.5.1"
+    "@jest/globals" "^27.5.1"
+    "@jest/source-map" "^27.5.1"
+    "@jest/test-result" "^27.5.1"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    execa "^5.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-mock "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-resolve "^27.5.1"
+    jest-snapshot "^27.5.1"
+    jest-util "^27.5.1"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+
 jest-serializer@^27.0.6:
   version "27.0.6"
   resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-27.0.6.tgz#93a6c74e0132b81a2d54623251c46c498bb5bec1"
@@ -6773,6 +7392,14 @@ jest-serializer@^27.4.0:
     "@types/node" "*"
     graceful-fs "^4.2.4"
 
+jest-serializer@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-27.5.1.tgz#81438410a30ea66fd57ff730835123dea1fb1f64"
+  integrity sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==
+  dependencies:
+    "@types/node" "*"
+    graceful-fs "^4.2.9"
+
 jest-snapshot@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-23.6.0.tgz#f9c2625d1b18acda01ec2d2b826c0ce58a5aa17a"
@@ -6847,6 +7474,34 @@ jest-snapshot@^27.4.6:
     pretty-format "^27.4.6"
     semver "^7.3.2"
 
+jest-snapshot@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-27.5.1.tgz#b668d50d23d38054a51b42c4039cab59ae6eb6a1"
+  integrity sha512-yYykXI5a0I31xX67mgeLw1DZ0bJB+gpq5IpSuCAoyDi0+BhgU/RIrL+RTzDmkNTchvDFWKP8lp+w/42Z3us5sA==
+  dependencies:
+    "@babel/core" "^7.7.2"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/traverse" "^7.7.2"
+    "@babel/types" "^7.0.0"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/babel__traverse" "^7.0.4"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^27.5.1"
+    graceful-fs "^4.2.9"
+    jest-diff "^27.5.1"
+    jest-get-type "^27.5.1"
+    jest-haste-map "^27.5.1"
+    jest-matcher-utils "^27.5.1"
+    jest-message-util "^27.5.1"
+    jest-util "^27.5.1"
+    natural-compare "^1.4.0"
+    pretty-format "^27.5.1"
+    semver "^7.3.2"
+
 jest-util@^27.0.0, jest-util@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.2.4.tgz#3d7ce081b2e7f4cfe0156452ac01f3cb456cc656"
@@ -6871,6 +7526,18 @@ jest-util@^27.4.2:
     graceful-fs "^4.2.4"
     picomatch "^2.2.3"
 
+jest-util@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.5.1.tgz#3ba9771e8e31a0b85da48fe0b0891fb86c01c2f9"
+  integrity sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
 jest-validate@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.2.4.tgz#b66d462b2fb93d7e16a47d1aa8763d5600bf2cfa"
@@ -6895,6 +7562,18 @@ jest-validate@^27.4.6:
     leven "^3.1.0"
     pretty-format "^27.4.6"
 
+jest-validate@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.5.1.tgz#9197d54dc0bdb52260b8db40b46ae668e04df067"
+  integrity sha512-thkNli0LYTmOI1tDB3FI1S1RTp/Bqyd9pTarJwL87OIBFuqEb5Apv5EaApEudYg4g86e3CT6kM0RowkhtEnCBQ==
+  dependencies:
+    "@jest/types" "^27.5.1"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^27.5.1"
+    leven "^3.1.0"
+    pretty-format "^27.5.1"
+
 jest-watcher@^27.2.4:
   version "27.2.4"
   resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.2.4.tgz#b1d5c39ab94f59f4f35f66cc96f7761a10e0cfc4"
@@ -6921,6 +7600,19 @@ jest-watcher@^27.4.6:
     jest-util "^27.4.2"
     string-length "^4.0.1"
 
+jest-watcher@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.5.1.tgz#71bd85fb9bde3a2c2ec4dc353437971c43c642a2"
+  integrity sha512-z676SuD6Z8o8qbmEGhoEUFOM1+jfEiL3DXHK/xgEiG2EyNYfFG60jluWcupY6dATjfEsKQuibReS1djInQnoVw==
+  dependencies:
+    "@jest/test-result" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    jest-util "^27.5.1"
+    string-length "^4.0.1"
+
 jest-worker@^26.2.1:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
@@ -6948,6 +7640,15 @@ jest-worker@^27.4.6:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
+jest-worker@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
+  integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
 jest@^27.1.1:
   version "27.4.7"
   resolved "https://registry.yarnpkg.com/jest/-/jest-27.4.7.tgz#87f74b9026a1592f2da05b4d258e57505f28eca4"
@@ -6966,6 +7667,15 @@ jest@^27.2.4:
     import-local "^3.0.2"
     jest-cli "^27.2.4"
 
+jest@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-27.5.1.tgz#dadf33ba70a779be7a6fc33015843b51494f63fc"
+  integrity sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==
+  dependencies:
+    "@jest/core" "^27.5.1"
+    import-local "^3.0.2"
+    jest-cli "^27.5.1"
+
 js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
@@ -7357,7 +8067,7 @@ lodash.ismatch@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37"
   integrity sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=
 
-lodash.memoize@^4.1.2:
+lodash.memoize@4.x, lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
@@ -7783,7 +8493,7 @@ mkdirp-infer-owner@^2.0.0:
     infer-owner "^1.0.4"
     mkdirp "^1.0.3"
 
-mkdirp@^0.5.1, mkdirp@^0.5.4, mkdirp@^0.5.5, mkdirp@~0.5.1:
+mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.4, mkdirp@^0.5.5, mkdirp@~0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
   integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
@@ -8419,7 +9129,7 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
-parse-json@^5.0.0:
+parse-json@^5.0.0, parse-json@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
   integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
@@ -8496,7 +9206,7 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
-path-parse@^1.0.6:
+path-parse@^1.0.6, path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
@@ -9037,6 +9747,15 @@ pretty-format@^27.4.6:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
+pretty-format@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
+  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
+  dependencies:
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -9520,6 +10239,15 @@ resolve@1.20.0, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.14.
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
+resolve@^1.3.2:
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
+  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+  dependencies:
+    is-core-module "^2.8.1"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
@@ -9727,7 +10455,7 @@ semver-diff@^2.0.0:
   dependencies:
     semver "^5.0.3"
 
-"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.5.0, semver@^5.6.0, semver@^5.7.1:
+"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.5.0, semver@^5.6.0, semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -10267,6 +10995,11 @@ supports-hyperlinks@^2.0.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
 svelte-check@^1.4.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-1.6.0.tgz#fcc7b28252a89be0e4cd369c58bbf8e76e81295f"
@@ -10572,6 +11305,39 @@ ts-jest@^27.0.5:
     semver "7.x"
     yargs-parser "20.x"
 
+ts-jest@^27.1.3:
+  version "27.1.3"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-27.1.3.tgz#1f723e7e74027c4da92c0ffbd73287e8af2b2957"
+  integrity sha512-6Nlura7s6uM9BVUAoqLH7JHyMXjz8gluryjpPXxr3IxZdAXnU6FhjvVLHFtfd1vsE1p8zD1OJfskkc0jhTSnkA==
+  dependencies:
+    bs-logger "0.x"
+    fast-json-stable-stringify "2.x"
+    jest-util "^27.0.0"
+    json5 "2.x"
+    lodash.memoize "4.x"
+    make-error "1.x"
+    semver "7.x"
+    yargs-parser "20.x"
+
+ts-node@^10.7.0:
+  version "10.7.0"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.7.0.tgz#35d503d0fab3e2baa672a0e94f4b40653c2463f5"
+  integrity sha512-TbIGS4xgJoX2i3do417KSaep1uRAW/Lu+WAL2doDHC0D6ummjirVOXU5/7aiZotbQ5p1Zp9tP7U6cYhA0O7M8A==
+  dependencies:
+    "@cspotcode/source-map-support" "0.7.0"
+    "@tsconfig/node10" "^1.0.7"
+    "@tsconfig/node12" "^1.0.7"
+    "@tsconfig/node14" "^1.0.0"
+    "@tsconfig/node16" "^1.0.2"
+    acorn "^8.4.1"
+    acorn-walk "^8.1.1"
+    arg "^4.1.0"
+    create-require "^1.1.0"
+    diff "^4.0.1"
+    make-error "^1.1.1"
+    v8-compile-cache-lib "^3.0.0"
+    yn "3.1.1"
+
 ts-node@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-7.0.1.tgz#9562dc2d1e6d248d24bc55f773e3f614337d9baf"
@@ -10591,7 +11357,7 @@ tslib@2.1.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
   integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
 
-tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
+tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -10601,6 +11367,11 @@ tslib@^2.0.0, tslib@^2.2.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
   integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
 
+tslib@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+
 tslint@^4.5.1:
   version "4.5.1"
   resolved "https://registry.yarnpkg.com/tslint/-/tslint-4.5.1.tgz#05356871bef23a434906734006fc188336ba824b"
@@ -10616,11 +11387,37 @@ tslint@^4.5.1:
     tsutils "^1.1.0"
     update-notifier "^2.0.0"
 
+tslint@^6.1.3:
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/tslint/-/tslint-6.1.3.tgz#5c23b2eccc32487d5523bd3a470e9aa31789d904"
+  integrity sha512-IbR4nkT96EQOvKE2PW/djGz8iGNeJ4rF2mBfiYaR/nvUWYKJhLwimoJKgjIFEIDibBtOevj7BqCRL4oHeWWUCg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    builtin-modules "^1.1.1"
+    chalk "^2.3.0"
+    commander "^2.12.1"
+    diff "^4.0.1"
+    glob "^7.1.1"
+    js-yaml "^3.13.1"
+    minimatch "^3.0.4"
+    mkdirp "^0.5.3"
+    resolve "^1.3.2"
+    semver "^5.3.0"
+    tslib "^1.13.0"
+    tsutils "^2.29.0"
+
 tsutils@^1.1.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-1.9.1.tgz#b9f9ab44e55af9681831d5f28d0aeeaf5c750cb0"
   integrity sha1-ufmrROVa+WgYMdXyjQrur1x1DLA=
 
+tsutils@^2.29.0:
+  version "2.29.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.29.0.tgz#32b488501467acbedd4b85498673a0812aca0b99"
+  integrity sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==
+  dependencies:
+    tslib "^1.8.1"
+
 tsutils@^3.17.1:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@@ -10724,6 +11521,11 @@ typescript@^3.9.5, typescript@^3.9.7:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8"
   integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==
 
+typescript@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.2.tgz#fe12d2727b708f4eef40f51598b3398baa9611d4"
+  integrity sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==
+
 uglify-js@^3.1.4:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.14.1.tgz#e2cb9fe34db9cb4cf7e35d1d26dfea28e09a7d06"
@@ -10896,6 +11698,11 @@ uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+v8-compile-cache-lib@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.0.tgz#0582bcb1c74f3a2ee46487ceecf372e46bce53e8"
+  integrity sha512-mpSYqfsFvASnSn5qMiwrr4VKfumbPyONLCOPmsR3A6pTY/r0+tSaVbgPWSAIuzbk3lCTa+FForeTiO+wBQGkjA==
+
 v8-compile-cache@^2.0.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
@@ -11255,6 +12062,11 @@ yauzl@^2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
+yn@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
+  integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==
+
 yn@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/yn/-/yn-2.0.0.tgz#e5adabc8acf408f6385fc76495684c88e6af689a"

From cf2388f2c7dd3735b910d0ae58b363b90c46f6a7 Mon Sep 17 00:00:00 2001
From: Pengsha Ying <yingfusheng@foxmail.com>
Date: Fri, 18 Mar 2022 07:43:11 +0800
Subject: [PATCH 520/524] docs: text typo (#862)

---
 docs/serialization.zh_CN.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/serialization.zh_CN.md b/docs/serialization.zh_CN.md
index aba072b83b..76d029d22f 100644
--- a/docs/serialization.zh_CN.md
+++ b/docs/serialization.zh_CN.md
@@ -94,7 +94,7 @@ $('body').replaceWith(snapshot);
 
 这个序列化的结果中有两点需要注意：
 
-1. 我们遍历 DOM 树时是以 Node 为单位，因此除了场景的元素类型节点以为，还包括 Text Node、Comment Node 等所有 Node 的记录。
+1. 我们遍历 DOM 树时是以 Node 为单位，因此除了场景的元素类型节点以外，还包括 Text Node、Comment Node 等所有 Node 的记录。
 2. 我们给每一个 Node 都添加了唯一标识 `id`，这是为之后的增量快照做准备。
 
 想象一下如果我们在同页面中记录一次点击按钮的操作并回放，我们可以用以下格式记录该操作（也就是我们所说的一次增量快照）：

From d8f9290ca496712aa1e7d472549480c4e7876594 Mon Sep 17 00:00:00 2001
From: Yun Feng <yun.feng@anu.edu.au>
Date: Fri, 18 Mar 2022 11:08:41 +0800
Subject: [PATCH 521/524] add support for nested shadow dom (#834)

* fix: can't record shadow host and shadow dom in incremental mutations

* enable to record newly added shadow dom

* Revert "enable to record newly added shadow dom"

This reverts commit cf7c0ad551ac457f00e3f754702c1464314f6a86.

* Revert "fix: can't record shadow host and shadow dom in incremental mutations"

This reverts commit 8b25cc97f83cbc333702c0ba73684e54eeadaabe.

* fix: can't record shadow host and shadow dom in incremental mutations

* add support for nested shadow root and add integration test

* fix test error

* enable to record shadow-dom in iframes

* add an integration test case for nested iframes and shadow-doms

* use the patch function
---
 packages/rrweb-snapshot/src/snapshot.ts       |   2 +-
 packages/rrweb/src/record/index.ts            |   3 +
 packages/rrweb/src/record/mutation.ts         |  12 +-
 .../rrweb/src/record/shadow-dom-manager.ts    |  47 +++
 packages/rrweb/src/replay/index.ts            |   8 +-
 .../__snapshots__/integration.test.ts.snap    | 379 ++++++++++++++++++
 packages/rrweb/test/integration.test.ts       |  50 +++
 7 files changed, 497 insertions(+), 4 deletions(-)

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 0854176010..1401347353 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -859,6 +859,7 @@ export function serializeNodeWithId(
     recordChild = recordChild && !serializedNode.needBlock;
     // this property was not needed in replay side
     delete serializedNode.needBlock;
+    if ((n as HTMLElement).shadowRoot) serializedNode.isShadowHost = true;
   }
   if (
     (serializedNode.type === NodeType.Document ||
@@ -903,7 +904,6 @@ export function serializeNodeWithId(
     }
 
     if (isElement(n) && n.shadowRoot) {
-      serializedNode.isShadowHost = true;
       for (const childN of Array.from(n.shadowRoot.childNodes)) {
         const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
         if (serializedChildNode) {
diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
index 7cacc7e40e..8c748a8214 100644
--- a/packages/rrweb/src/record/index.ts
+++ b/packages/rrweb/src/record/index.ts
@@ -273,6 +273,9 @@ function record<T = eventWithTime>(
       },
       onIframeLoad: (iframe, childSn) => {
         iframeManager.attachIframe(iframe, childSn);
+        shadowDomManager.observeAttachShadow(
+          (iframe as Node) as HTMLIFrameElement,
+        );
       },
       keepIframeSrcFn,
     });
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index cb4de6944d..1e4a8fbe07 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -226,6 +226,7 @@ export default class MutationBuffer {
   }
 
   public reset() {
+    this.shadowDomManager.reset();
     this.canvasManager.reset();
   }
 
@@ -262,10 +263,16 @@ export default class MutationBuffer {
       const shadowHost: Element | null = n.getRootNode
         ? (n.getRootNode() as ShadowRoot)?.host
         : null;
+      // If n is in a nested shadow dom.
+      let rootShadowHost = shadowHost;
+      while ((rootShadowHost?.getRootNode?.() as ShadowRoot | undefined)?.host)
+        rootShadowHost =
+          (rootShadowHost?.getRootNode?.() as ShadowRoot | undefined)?.host ||
+          null;
       // ensure shadowHost is a Node, or doc.contains will throw an error
       const notInDoc =
         !this.doc.contains(n) &&
-        (!(shadowHost instanceof Node) || !this.doc.contains(shadowHost));
+        (rootShadowHost === null || !this.doc.contains(rootShadowHost));
       if (!n.parentNode || notInDoc) {
         return;
       }
@@ -301,6 +308,9 @@ export default class MutationBuffer {
         },
         onIframeLoad: (iframe, childSn) => {
           this.iframeManager.attachIframe(iframe, childSn);
+          this.shadowDomManager.observeAttachShadow(
+            (iframe as Node) as HTMLIFrameElement,
+          );
         },
       });
       if (sn) {
diff --git a/packages/rrweb/src/record/shadow-dom-manager.ts b/packages/rrweb/src/record/shadow-dom-manager.ts
index 86ea003911..e0ad26f33c 100644
--- a/packages/rrweb/src/record/shadow-dom-manager.ts
+++ b/packages/rrweb/src/record/shadow-dom-manager.ts
@@ -6,6 +6,7 @@ import {
   SamplingStrategy,
 } from '../types';
 import { initMutationObserver, initScrollObserver } from './observer';
+import { patch } from '../utils';
 
 type BypassOptions = Omit<
   MutationBufferParam,
@@ -19,6 +20,7 @@ export class ShadowDomManager {
   private scrollCb: scrollCallback;
   private bypassOptions: BypassOptions;
   private mirror: Mirror;
+  private restorePatches: (() => void)[] = [];
 
   constructor(options: {
     mutationCb: mutationCallBack;
@@ -30,6 +32,19 @@ export class ShadowDomManager {
     this.scrollCb = options.scrollCb;
     this.bypassOptions = options.bypassOptions;
     this.mirror = options.mirror;
+
+    // Patch 'attachShadow' to observe newly added shadow doms.
+    const manager = this;
+    this.restorePatches.push(
+      patch(HTMLElement.prototype, 'attachShadow', function (original) {
+        return function () {
+          const shadowRoot = original.apply(this, arguments);
+          if (this.shadowRoot)
+            manager.addShadowRoot(this.shadowRoot, this.ownerDocument);
+          return shadowRoot;
+        };
+      }),
+    );
   }
 
   public addShadowRoot(shadowRoot: ShadowRoot, doc: Document) {
@@ -52,4 +67,36 @@ export class ShadowDomManager {
       mirror: this.mirror,
     });
   }
+
+  /**
+   * Monkey patch 'attachShadow' of an IFrameElement to observe newly added shadow doms.
+   */
+  public observeAttachShadow(iframeElement: HTMLIFrameElement) {
+    if (iframeElement.contentWindow) {
+      const manager = this;
+      this.restorePatches.push(
+        patch(
+          (iframeElement.contentWindow as Window & {
+            HTMLElement: { prototype: HTMLElement };
+          }).HTMLElement.prototype,
+          'attachShadow',
+          function (original) {
+            return function () {
+              const shadowRoot = original.apply(this, arguments);
+              if (this.shadowRoot)
+                manager.addShadowRoot(
+                  this.shadowRoot,
+                  iframeElement.contentDocument as Document,
+                );
+              return shadowRoot;
+            };
+          },
+        ),
+      );
+    }
+  }
+
+  public reset() {
+    this.restorePatches.forEach((restorePatch) => restorePatch());
+  }
 }
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 66e727b134..794a61b34c 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -1421,8 +1421,12 @@ export class Replayer {
         parent = virtualParent;
       }
 
-      if (mutation.node.isShadow && hasShadowRoot(parent)) {
-        parent = parent.shadowRoot;
+      if (mutation.node.isShadow) {
+        // If the parent is attached a shadow dom after it's created, it won't have a shadow root.
+        if (!hasShadowRoot(parent)) {
+          ((parent as Node) as HTMLElement).attachShadow({ mode: 'open' });
+          parent = ((parent as Node) as HTMLElement).shadowRoot!;
+        } else parent = parent.shadowRoot;
       }
 
       let previous: Node | null = null;
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index 6d853e216d..06290e6068 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -9235,6 +9235,353 @@ exports[`record integration tests should record input userTriggered values if us
 ]"
 `;
 
+exports[`record integration tests should record nested iframes and shadow doms 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 1,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {
+              \\"lang\\": \\"en\\"
+            },
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 5
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"charset\\": \\"UTF-8\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"meta\\",
+                    \\"attributes\\": {
+                      \\"name\\": \\"viewport\\",
+                      \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 8
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"title\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"Frame 2\\",
+                        \\"id\\": 11
+                      }
+                    ],
+                    \\"id\\": 10
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 12
+                  }
+                ],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 3,
+                \\"textContent\\": \\"\\\\n  \\",
+                \\"id\\": 13
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    frame 2\\\\n  \\\\n    \\",
+                    \\"id\\": 15
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 17
+                      }
+                    ],
+                    \\"id\\": 16
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n  \\",
+                    \\"id\\": 18
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 20
+                      }
+                    ],
+                    \\"id\\": 19
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n\\\\n\\",
+                    \\"id\\": 21
+                  }
+                ],
+                \\"id\\": 14
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 14,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"iframe\\",
+            \\"attributes\\": {
+              \\"id\\": \\"five\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 22
+          }
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"adds\\": [
+        {
+          \\"parentId\\": 22,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 0,
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"html\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"head\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 23,
+                    \\"id\\": 25
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"body\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 23,
+                    \\"id\\": 26
+                  }
+                ],
+                \\"rootId\\": 23,
+                \\"id\\": 24
+              }
+            ],
+            \\"compatMode\\": \\"BackCompat\\",
+            \\"id\\": 23
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"isAttachIframe\\": true
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 26,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"div\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"rootId\\": 23,
+            \\"id\\": 27,
+            \\"isShadow\\": true
+          }
+        },
+        {
+          \\"parentId\\": 27,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"iframe\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"rootId\\": 23,
+            \\"id\\": 28
+          }
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"adds\\": [
+        {
+          \\"parentId\\": 28,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 0,
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"html\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"head\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 29,
+                    \\"id\\": 31
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"body\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 29,
+                    \\"id\\": 32
+                  }
+                ],
+                \\"rootId\\": 29,
+                \\"id\\": 30
+              }
+            ],
+            \\"compatMode\\": \\"BackCompat\\",
+            \\"id\\": 29
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"isAttachIframe\\": true
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 32,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"span\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"rootId\\": 29,
+            \\"id\\": 33,
+            \\"isShadow\\": true
+          }
+        }
+      ]
+    }
+  }
+]"
+`;
+
 exports[`record integration tests should record shadow DOM 1`] = `
 "[
   {
@@ -9637,6 +9984,38 @@ exports[`record integration tests should record shadow DOM 1`] = `
         }
       ]
     }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 44,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"span\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"id\\": 47,
+            \\"isShadow\\": true
+          }
+        },
+        {
+          \\"parentId\\": 47,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 3,
+            \\"textContent\\": \\"nested shadow dom\\",
+            \\"id\\": 48
+          }
+        }
+      ]
+    }
   }
 ]"
 `;
diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
index 88dfbf5ef2..6999e3caee 100644
--- a/packages/rrweb/test/integration.test.ts
+++ b/packages/rrweb/test/integration.test.ts
@@ -530,6 +530,56 @@ describe('record integration tests', function (this: ISuite) {
         .then(() => {
           (shadowRoot.lastChild!.childNodes[0] as HTMLElement).innerText =
             '123';
+          const nestedShadowElement = shadowRoot.lastChild!
+            .childNodes[0] as HTMLElement;
+          nestedShadowElement.attachShadow({
+            mode: 'open',
+          });
+          nestedShadowElement.shadowRoot!.appendChild(
+            document.createElement('span'),
+          );
+          (nestedShadowElement.shadowRoot!.lastChild as HTMLElement).innerText =
+            'nested shadow dom';
+        });
+    });
+    await page.waitForTimeout(50);
+
+    const snapshots = await page.evaluate('window.snapshots');
+    assertSnapshot(snapshots);
+  });
+
+  it('should record nested iframes and shadow doms', async () => {
+    const page: puppeteer.Page = await browser.newPage();
+    await page.goto('about:blank');
+    await page.setContent(getHtml.call(this, 'frame2.html'));
+
+    await page.evaluate(() => {
+      const sleep = (ms: number) =>
+        new Promise((resolve) => setTimeout(resolve, ms));
+      let iframe: HTMLIFrameElement;
+      sleep(10)
+        .then(() => {
+          // get contentDocument of iframe five
+          const contentDocument1 = document.querySelector('iframe')!
+            .contentDocument!;
+          // create shadow dom #1
+          contentDocument1.body.attachShadow({ mode: 'open' });
+          contentDocument1.body.shadowRoot!.appendChild(
+            document.createElement('div'),
+          );
+          const div = contentDocument1.body.shadowRoot!.childNodes[0];
+          iframe = contentDocument1.createElement('iframe');
+          // append an iframe to shadow dom #1
+          div.appendChild(iframe);
+          return sleep(10);
+        })
+        .then(() => {
+          const contentDocument2 = iframe.contentDocument!;
+          // create shadow dom #2 in the iframe
+          contentDocument2.body.attachShadow({ mode: 'open' });
+          contentDocument2.body.shadowRoot!.appendChild(
+            document.createElement('span'),
+          );
         });
     });
     await page.waitForTimeout(50);

From 423372b0c434a51c268ded4837234c91ad3be4be Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Thu, 24 Mar 2022 19:47:06 +0800
Subject: [PATCH 522/524] fix #864 use for loop instead of forEach

---
 packages/rrweb-snapshot/src/snapshot.ts | 34 +++++++++++++++++++------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 1401347353..ae7f05f01c 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -298,11 +298,17 @@ export function needMaskingText(
         return true;
       }
     } else {
-      (node as HTMLElement).classList.forEach((className) => {
+      // tslint:disable-next-line: prefer-for-of
+      for (
+        let eIndex = 0;
+        eIndex < (node as HTMLElement).classList.length;
+        eIndex++
+      ) {
+        const className = (node as HTMLElement).classList[eIndex];
         if (maskTextClass.test(className)) {
           return true;
         }
-      });
+      }
     }
     if (maskTextSelector) {
       if ((node as HTMLElement).matches(maskTextSelector)) {
@@ -379,7 +385,7 @@ function serializeNode(
     maskInputOptions: MaskInputOptions;
     maskTextFn: MaskTextFn | undefined;
     maskInputFn: MaskInputFn | undefined;
-    dataURLOptions?: DataURLOptions,
+    dataURLOptions?: DataURLOptions;
     inlineImages: boolean;
     recordCanvas: boolean;
     keepIframeSrcFn: KeepIframeSrcFn;
@@ -516,17 +522,26 @@ function serializeNode(
         if ((n as ICanvas).__context === '2d') {
           // only record this on 2d canvas
           if (!is2DCanvasBlank(n as HTMLCanvasElement)) {
-            attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL(dataURLOptions.type, dataURLOptions.quality);
+            attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL(
+              dataURLOptions.type,
+              dataURLOptions.quality,
+            );
           }
         } else if (!('__context' in n)) {
           // context is unknown, better not call getContext to trigger it
-          const canvasDataURL = (n as HTMLCanvasElement).toDataURL(dataURLOptions.type, dataURLOptions.quality);
+          const canvasDataURL = (n as HTMLCanvasElement).toDataURL(
+            dataURLOptions.type,
+            dataURLOptions.quality,
+          );
 
           // create blank canvas of same dimensions
           const blankCanvas = document.createElement('canvas');
           blankCanvas.width = (n as HTMLCanvasElement).width;
           blankCanvas.height = (n as HTMLCanvasElement).height;
-          const blankCanvasDataURL = blankCanvas.toDataURL(dataURLOptions.type, dataURLOptions.quality);
+          const blankCanvasDataURL = blankCanvas.toDataURL(
+            dataURLOptions.type,
+            dataURLOptions.quality,
+          );
 
           // no need to save dataURL if it's the same as blank canvas
           if (canvasDataURL !== blankCanvasDataURL) {
@@ -548,7 +563,10 @@ function serializeNode(
             canvasService!.width = image.naturalWidth;
             canvasService!.height = image.naturalHeight;
             canvasCtx!.drawImage(image, 0, 0);
-            attributes.rr_dataURL = canvasService!.toDataURL(dataURLOptions.type, dataURLOptions.quality);
+            attributes.rr_dataURL = canvasService!.toDataURL(
+              dataURLOptions.type,
+              dataURLOptions.quality,
+            );
           } catch (err) {
             console.warn(
               `Cannot inline img src=${image.currentSrc}! Error: ${err}`,
@@ -974,7 +992,7 @@ function snapshot(
     maskTextFn?: MaskTextFn;
     maskInputFn?: MaskTextFn;
     slimDOM?: boolean | SlimDOMOptions;
-    dataURLOptions?: DataURLOptions,
+    dataURLOptions?: DataURLOptions;
     inlineImages?: boolean;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;

From 072b81b53485f64e3d8bd242dc202ce68c3f32c5 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Sun, 27 Mar 2022 08:07:19 +0200
Subject: [PATCH 523/524] Apply textContent on flush (#865)

* Apply textContent on flush

* fix typo

* Style sheet rules applied after <style>'s textContent override should work
---
 packages/rrweb/src/replay/index.ts            | 32 ++++++++++++++-
 .../test/__snapshots__/replayer.test.ts.snap  | 12 +++---
 .../test/events/style-sheet-rule-events.ts    | 40 +++++++++++++++++--
 packages/rrweb/test/replayer.test.ts          | 30 ++++++++++++++
 4 files changed, 102 insertions(+), 12 deletions(-)

diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 794a61b34c..df567b3ae1 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -40,6 +40,7 @@ import {
   mouseMovePos,
   IWindow,
   canvasMutationCommand,
+  textMutation,
 } from '../types';
 import {
   createMirror,
@@ -171,11 +172,17 @@ export class Replayer {
     this.virtualStyleRulesMap = new Map();
 
     this.emitter.on(ReplayerEvents.Flush, () => {
-      const { scrollMap, inputMap } = this.treeIndex.flush();
+      const { scrollMap, inputMap, mutationData } = this.treeIndex.flush();
 
       this.fragmentParentMap.forEach((parent, frag) =>
         this.restoreRealParent(frag, parent),
       );
+      // apply text needs to happen before virtual style rules gets applied
+      // as it can overwrite the contents of a stylesheet
+      for (const d of mutationData.texts) {
+        this.applyText(d, mutationData);
+      }
+
       for (const node of this.virtualStyleRulesMap.keys()) {
         // restore css rules of style elements after they are mounted
         this.restoreNodeSheet(node);
@@ -896,7 +903,16 @@ export class Replayer {
       case IncrementalSource.Mutation: {
         if (isSync) {
           d.adds.forEach((m) => this.treeIndex.add(m));
-          d.texts.forEach((m) => this.treeIndex.text(m));
+          d.texts.forEach((m) => {
+            const target = this.mirror.getNode(m.id);
+            const parent = (target?.parentNode as unknown) as INode | null;
+            // remove any style rules that pending
+            // for stylesheets where the contents get replaced
+            if (parent && this.virtualStyleRulesMap.has(parent))
+              this.virtualStyleRulesMap.delete(parent);
+
+            this.treeIndex.text(m);
+          });
           d.attributes.forEach((m) => this.treeIndex.attribute(m));
           d.removes.forEach((m) => this.treeIndex.remove(m, this.mirror));
         }
@@ -1677,6 +1693,18 @@ export class Replayer {
     }
   }
 
+  private applyText(d: textMutation, mutation: mutationData) {
+    const target = this.mirror.getNode(d.id);
+    if (!target) {
+      return this.debugNodeNotFound(mutation, d.id);
+    }
+    try {
+      ((target as Node) as HTMLElement).textContent = d.value;
+    } catch (error) {
+      // for safe
+    }
+  }
+
   private legacy_resolveMissingNode(
     map: missingNodeMap,
     parent: Node,
diff --git a/packages/rrweb/test/__snapshots__/replayer.test.ts.snap b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
index 677562cfae..c471f9d958 100644
--- a/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/replayer.test.ts.snap
@@ -56,27 +56,27 @@ html.rrweb-paused *, html.rrweb-paused ::before, html.rrweb-paused ::after { ani
 file-cid-1
 @charset \\"utf-8\\";
 
-.c011xx { padding: 1.3125rem; flex: 0 0 auto; width: 100%; }
+.css-added-at-500 { padding: 1.3125rem; flex: 0 0 auto; width: 100%; }
 
 
 file-cid-2
 @charset \\"utf-8\\";
 
-.c01x { opacity: 1; transform: translateX(0px); }
+.css-added-at-200-overwritten-at-3000 { opacity: 1; transform: translateX(0px); }
 
-.css-added-at-400 { border: 1px solid blue; }
+.css-added-at-400-overwritten-at-3000 { border: 1px solid blue; }
 
 
 file-cid-3
 @charset \\"utf-8\\";
 
-.css-1uxxxx3 { position: fixed; top: 0px; right: 0px; left: 4rem; z-index: 15; flex-shrink: 0; height: 0.25rem; overflow: hidden; background-color: rgb(17, 171, 209); }
+.css-added-at-200 { position: fixed; top: 0px; right: 0px; left: 4rem; z-index: 15; flex-shrink: 0; height: 0.25rem; overflow: hidden; background-color: rgb(17, 171, 209); }
 
-.css-1c9xxxx { height: 0.25rem; background-color: rgb(190, 232, 242); opacity: 0; transition: opacity 0.5s ease 0s; }
+.css-added-at-200.alt { height: 0.25rem; background-color: rgb(190, 232, 242); opacity: 0; transition: opacity 0.5s ease 0s; }
 
 .css-added-at-1000-deleted-at-2500 { display: flex; flex-direction: column; min-width: 60rem; min-height: 100vh; color: blue; }
 
-.css-lsxxx { padding-left: 4rem; }
+.css-added-at-200.alt2 { padding-left: 4rem; }
 "
 `;
 
diff --git a/packages/rrweb/test/events/style-sheet-rule-events.ts b/packages/rrweb/test/events/style-sheet-rule-events.ts
index 0e26673916..0536ea56e3 100644
--- a/packages/rrweb/test/events/style-sheet-rule-events.ts
+++ b/packages/rrweb/test/events/style-sheet-rule-events.ts
@@ -54,7 +54,7 @@ const events: eventWithTime[] = [
                         type: 3,
                         isStyle: true,
                         textContent:
-                          '\n.c01x {\n  opacity: 1;\n  transform: translateX(0);\n}\n',
+                          '\n.css-added-at-200-overwritten-at-3000 {\n  opacity: 1;\n  transform: translateX(0);\n}\n',
                       },
                     ],
                   },
@@ -64,7 +64,7 @@ const events: eventWithTime[] = [
                     tagName: 'style',
                     attributes: {
                       _cssText:
-                        '.css-1uxxxx3 { position: fixed; top: 0px; right: 0px; left: 4rem; z-index: 15; flex-shrink: 0; height: 0.25rem; overflow: hidden; background-color: rgb(17, 171, 209); }.css-1c9xxxx { height: 0.25rem; background-color: rgb(190, 232, 242); opacity: 0; transition: opacity 0.5s ease 0s; }.css-lsxxx { padding-left: 4rem; }',
+                        '.css-added-at-200 { position: fixed; top: 0px; right: 0px; left: 4rem; z-index: 15; flex-shrink: 0; height: 0.25rem; overflow: hidden; background-color: rgb(17, 171, 209); }.css-added-at-200.alt { height: 0.25rem; background-color: rgb(190, 232, 242); opacity: 0; transition: opacity 0.5s ease 0s; }.css-added-at-200.alt2 { padding-left: 4rem; }',
                       'data-emotion': 'css',
                     },
                     childNodes: [
@@ -111,7 +111,8 @@ const events: eventWithTime[] = [
       id: 101,
       adds: [
         {
-          rule: '.css-added-at-400{border: 1px solid blue;}',
+          rule:
+            '.css-added-at-400-overwritten-at-3000 {border: 1px solid blue;}',
           index: 1,
         },
       ],
@@ -141,7 +142,7 @@ const events: eventWithTime[] = [
             type: 3,
             isStyle: true,
             textContent:
-              '\n.c011xx {\n  padding: 1.3125rem;\n  flex: none;\n  width: 100%;\n}\n',
+              '\n.css-added-at-500 {\n  padding: 1.3125rem;\n  flex: none;\n  width: 100%;\n}\n',
           },
           nextId: null,
           parentId: 255,
@@ -184,6 +185,37 @@ const events: eventWithTime[] = [
     type: EventType.IncrementalSnapshot,
     timestamp: now + 2500,
   },
+  // overwrite all contents of stylesheet
+  {
+    data: {
+      texts: [
+        {
+          id: 102,
+          value: '.all-css-overwritten-at-3000 { color: indigo; }',
+        },
+      ],
+      attributes: [],
+      removes: [],
+      adds: [],
+      source: IncrementalSource.Mutation,
+    },
+    type: EventType.IncrementalSnapshot,
+    timestamp: now + 3000,
+  },
+  {
+    data: {
+      id: 101,
+      adds: [
+        {
+          rule: '.css-added-at-3100{color:blue;}',
+          index: 1,
+        },
+      ],
+      source: IncrementalSource.StyleSheetRule,
+    },
+    type: EventType.IncrementalSnapshot,
+    timestamp: now + 3100,
+  },
 ];
 
 export default events;
diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts
index cd35fb2a51..b563732f81 100644
--- a/packages/rrweb/test/replayer.test.ts
+++ b/packages/rrweb/test/replayer.test.ts
@@ -223,6 +223,36 @@ describe('replayer', function () {
     expect(result).toEqual(false);
   });
 
+  it("should overwrite all StyleSheetRules by replacing style element's textContent while fast-forwarding", async () => {
+    await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`);
+    const result = await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+      replayer.pause(3500);
+      const rules = [...replayer.iframe.contentDocument.styleSheets].map(
+        (sheet) => [...sheet.rules],
+      ).flat();
+      rules.some((x) => x.selectorText === '.css-added-at-200-overwritten-at-3000');
+    `);
+
+    expect(result).toEqual(false);
+  });
+
+  it('should apply fast-forwarded StyleSheetRules that came after stylesheet textContent overwrite', async () => {
+    await page.evaluate(`events = ${JSON.stringify(styleSheetRuleEvents)}`);
+    const result = await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+      replayer.pause(3500);
+      const rules = [...replayer.iframe.contentDocument.styleSheets].map(
+        (sheet) => [...sheet.rules],
+      ).flat();
+      rules.some((x) => x.selectorText === '.css-added-at-3100');
+    `);
+
+    expect(result).toEqual(true);
+  });
+
   it('can fast-forward mutation events containing nested iframe elements', async () => {
     await page.evaluate(`
       events = ${JSON.stringify(iframeEvents)};

From 9ed6767adac4e0afab66fc3fb9716ab87bfc81f8 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Thu, 31 Mar 2022 15:51:25 +0200
Subject: [PATCH 524/524] Don't serialize all cssRules if multiple text nodes
 exists (#866)

---
 packages/rrweb-snapshot/src/snapshot.ts       |  7 ++-
 packages/rrweb-snapshot/test/snapshot.test.ts | 55 ++++++++++++++++++-
 2 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index ae7f05f01c..6c283b796a 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -632,7 +632,12 @@ function serializeNode(
       if (isStyle && textContent) {
         try {
           // try to read style sheet
-          if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
+          if (n.nextSibling || n.previousSibling) {
+            // This is not the only child of the stylesheet.
+            // We can't read all of the sheet's .cssRules and expect them
+            // to _only_ include the current rule(s) added by the text node.
+            // So we'll be conservative and keep textContent as-is.
+          } else if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
             textContent = stringifyStyleSheet(
               (n.parentNode as HTMLStyleElement).sheet!,
             );
diff --git a/packages/rrweb-snapshot/test/snapshot.test.ts b/packages/rrweb-snapshot/test/snapshot.test.ts
index 5b9810c57c..d1e94f9a82 100644
--- a/packages/rrweb-snapshot/test/snapshot.test.ts
+++ b/packages/rrweb-snapshot/test/snapshot.test.ts
@@ -1,5 +1,13 @@
+/**
+ * @jest-environment jsdom
+ */
 import { JSDOM } from 'jsdom';
-import { absoluteToStylesheet, _isBlockedElement } from '../src/snapshot';
+import {
+  absoluteToStylesheet,
+  serializeNodeWithId,
+  _isBlockedElement,
+} from '../src/snapshot';
+import { serializedNodeWithId } from '../src/types';
 
 describe('absolute url to stylesheet', () => {
   const href = 'http://localhost/css/style.css';
@@ -126,3 +134,48 @@ describe('isBlockedElement()', () => {
     ).toEqual(true);
   });
 });
+
+describe('style elements', () => {
+  const serializeNode = (node: Node): serializedNodeWithId | null => {
+    return serializeNodeWithId(node, {
+      doc: document,
+      map: {},
+      blockClass: 'blockblock',
+      blockSelector: null,
+      maskTextClass: 'maskmask',
+      maskTextSelector: null,
+      skipChild: false,
+      inlineStylesheet: true,
+      maskTextFn: undefined,
+      maskInputFn: undefined,
+      slimDOMOptions: {},
+    });
+  };
+
+  const render = (html: string): HTMLStyleElement => {
+    document.write(html);
+    return document.querySelector('style')!;
+  };
+
+  it('should serialize all rules of stylesheet when the sheet has a single child node', () => {
+    const styleEl = render(`<style>body { color: red; }</style>`);
+    styleEl.sheet?.insertRule('section { color: blue; }');
+    expect(serializeNode(styleEl.childNodes[0])).toMatchObject({
+      isStyle: true,
+      rootId: undefined,
+      textContent: 'section {color: blue;}body {color: red;}',
+      type: 3,
+    });
+  });
+
+  it('should serialize individual text nodes on stylesheets with multiple child nodes', () => {
+    const styleEl = render(`<style>body { color: red; }</style>`);
+    styleEl.append(document.createTextNode('section { color: blue; }'));
+    expect(serializeNode(styleEl.childNodes[1])).toMatchObject({
+      isStyle: true,
+      rootId: undefined,
+      textContent: 'section { color: blue; }',
+      type: 3,
+    });
+  });
+});