clarity-js 0.7.16 → 0.7.19

package/build/clarity.module.js

@@ -140,7 +140,7 @@ function api(method) {
 }
 
 var startTime = 0;
-function start$H() {
+function start$I() {
     startTime = performance.now();
 }
 function time(event) {
@@ -148,11 +148,11 @@ function time(event) {
     var ts = event && event.timeStamp > 0 ? event.timeStamp : performance.now();
     return Math.max(Math.round(ts - startTime), 0);
 }
-function stop$E() {
+function stop$F() {
     startTime = 0;
 }
 
-var version$1 = "0.7.16";
+var version$1 = "0.7.19";
 
 // tslint:disable: no-bitwise
 function hash (input, precision) {
@@ -353,18 +353,18 @@ function redact$1(value) {
     return array ? array.join("" /* Data.Constant.Empty */) : value;
 }
 
-var state$b = null;
+var state$c = null;
 var buffer = null;
 var update$2 = false;
-function start$G() {
+function start$H() {
     update$2 = false;
-    reset$r();
+    reset$s();
 }
-function reset$r() {
+function reset$s() {
     // Baseline state holds the previous values - if it is updated in the current payload,
     // reset the state to current value after sending the previous state
     if (update$2) {
-        state$b = { time: time(), event: 4 /* Event.Baseline */, data: {
+        state$c = { time: time(), event: 4 /* Event.Baseline */, data: {
                 visible: buffer.visible,
                 docWidth: buffer.docWidth,
                 docHeight: buffer.docHeight,
@@ -422,23 +422,23 @@ function visibility(t, visible) {
     }
     update$2 = true;
 }
-function compute$c() {
+function compute$d() {
     if (update$2) {
         encode$1(4 /* Event.Baseline */);
     }
 }
-function stop$D() {
-    reset$r();
+function stop$E() {
+    reset$s();
 }
 
 var baseline = /*#__PURE__*/Object.freeze({
     __proto__: null,
     activity: activity,
-    compute: compute$c,
-    reset: reset$r,
-    start: start$G,
-    get state () { return state$b; },
-    stop: stop$D,
+    compute: compute$d,
+    reset: reset$s,
+    start: start$H,
+    get state () { return state$c; },
+    stop: stop$E,
     track: track$8,
     visibility: visibility
 });
@@ -463,12 +463,12 @@ function event(a, b) {
 
 var data$i = null;
 var updates$3 = null;
-function start$F() {
+function start$G() {
     data$i = {};
     updates$3 = {};
     count$1(5 /* Metric.InvokeCount */);
 }
-function stop$C() {
+function stop$D() {
     data$i = {};
     updates$3 = {};
 }
@@ -506,10 +506,10 @@ function max(metric, value) {
         }
     }
 }
-function compute$b() {
+function compute$c() {
     encode$1(0 /* Event.Metric */);
 }
-function reset$q() {
+function reset$r() {
     updates$3 = {};
 }
 
@@ -524,11 +524,11 @@ var data$h;
 var last = 0;
 var interval = 0;
 var timeout$6 = null;
-function start$E() {
+function start$F() {
     interval = 60000 /* Setting.PingInterval */;
     last = 0;
 }
-function reset$p() {
+function reset$q() {
     if (timeout$6) {
         clearTimeout(timeout$6);
     }
@@ -546,7 +546,7 @@ function ping() {
         suspend();
     }
 }
-function stop$B() {
+function stop$C() {
     clearTimeout(timeout$6);
     last = 0;
     interval = 0;
@@ -555,16 +555,16 @@ function stop$B() {
 var ping$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get data () { return data$h; },
-    reset: reset$p,
-    start: start$E,
-    stop: stop$B
+    reset: reset$q,
+    start: start$F,
+    stop: stop$C
 });
 
 var data$g = null;
-function start$D() {
+function start$E() {
     data$g = {};
 }
-function stop$A() {
+function stop$B() {
     data$g = {};
 }
 function track$7(event, time) {
@@ -584,25 +584,25 @@ function track$7(event, time) {
         }
     }
 }
-function compute$a() {
+function compute$b() {
     encode$1(36 /* Event.Summary */);
 }
-function reset$o() {
+function reset$p() {
     data$g = {};
 }
 
 var summary = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    compute: compute$a,
+    compute: compute$b,
     get data () { return data$g; },
-    reset: reset$o,
-    start: start$D,
-    stop: stop$A,
+    reset: reset$p,
+    start: start$E,
+    stop: stop$B,
     track: track$7
 });
 
 var data$f = null;
-function start$C() {
+function start$D() {
     if (!config$1.lean && config$1.upgrade) {
         config$1.upgrade("Config" /* Constant.Config */);
     }
@@ -626,15 +626,15 @@ function upgrade(key) {
         encode$1(3 /* Event.Upgrade */);
     }
 }
-function stop$z() {
+function stop$A() {
     data$f = null;
 }
 
 var upgrade$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get data () { return data$f; },
-    start: start$C,
-    stop: stop$z,
+    start: start$D,
+    stop: stop$A,
     upgrade: upgrade
 });
 
@@ -692,8 +692,8 @@ function __generator(thisArg, body) {
 }
 
 var data$e = null;
-function start$B() {
-    reset$n();
+function start$C() {
+    reset$o();
 }
 function set(variable, value) {
     var values = typeof value === "string" /* Constant.String */ ? [value] : value;
@@ -748,14 +748,14 @@ function log$2(variable, value) {
         data$e[variable] = validValues;
     }
 }
-function compute$9() {
+function compute$a() {
     encode$1(34 /* Event.Variable */);
 }
-function reset$n() {
+function reset$o() {
     data$e = {};
 }
-function stop$y() {
-    reset$n();
+function stop$z() {
+    reset$o();
 }
 function redact(input) {
     return input && input.length >= 5 /* Setting.WordLength */ ?
@@ -789,13 +789,13 @@ function detect(input) {
 
 var variable = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    compute: compute$9,
+    compute: compute$a,
     get data () { return data$e; },
     identify: identify,
-    reset: reset$n,
+    reset: reset$o,
     set: set,
-    start: start$B,
-    stop: stop$y
+    start: start$C,
+    stop: stop$z
 });
 
 var supported$1 = "CompressionStream" /* Constant.CompressionStream */ in window;
@@ -857,32 +857,32 @@ function read(stream) {
 }
 
 var modules$1 = [baseline, dimension, variable, limit, summary, metadata$1, envelope$1, upload$1, ping$1, upgrade$1, extract];
-function start$A() {
+function start$B() {
     // Metric needs to be initialized before we can start measuring. so metric is not wrapped in measure
-    start$F();
+    start$G();
     modules$1.forEach(function (x) { return measure(x.start)(); });
 }
-function stop$x() {
+function stop$y() {
     // Stop modules in the reverse order of their initialization
     // The ordering below should respect inter-module dependency.
     // E.g. if upgrade depends on upload, then upgrade needs to end before upload.
     // Similarly, if upload depends on metadata, upload needs to end before metadata.
     modules$1.slice().reverse().forEach(function (x) { return measure(x.stop)(); });
-    stop$C();
+    stop$D();
 }
-function compute$8() {
-    compute$9();
-    compute$c();
+function compute$9() {
+    compute$a();
+    compute$d();
     compute$2();
+    compute$c();
     compute$b();
-    compute$a();
     compute$3();
     compute$4();
 }
 
 var history$5 = [];
 var data$d;
-function start$z() {
+function start$A() {
     history$5 = [];
     max(26 /* Metric.Automation */, navigator.webdriver ? 1 /* BooleanFlag.True */ : 0 /* BooleanFlag.False */);
     try {
@@ -906,7 +906,7 @@ function check$4(id, target, input) {
 
 var excludeClassNames = "load,active,fixed,visible,focus,show,collaps,animat" /* Constant.ExcludeClassNames */.split("," /* Constant.Comma */);
 var selectorMap = {};
-function reset$m() {
+function reset$n() {
     selectorMap = {};
 }
 function get$1(input, type) {
@@ -995,7 +995,7 @@ function filter(value) {
 var selector = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get: get$1,
-    reset: reset$m
+    reset: reset$n
 });
 
 var index = 1;
@@ -1014,14 +1014,14 @@ var idMap = null; // Maps node => id.
 var iframeMap = null; // Maps iframe's contentDocument => parent iframe element
 var privacyMap = null; // Maps node => Privacy (enum)
 var fraudMap = null; // Maps node => FraudId (number)
-function start$y() {
-    reset$l();
+function start$z() {
+    reset$m();
     parse$1(document, true);
 }
-function stop$w() {
-    reset$l();
+function stop$x() {
+    reset$m();
 }
-function reset$l() {
+function reset$m() {
     index = 1;
     values = [];
     updateMap = [];
@@ -1037,7 +1037,7 @@ function reset$l() {
     iframeMap = new WeakMap();
     privacyMap = new WeakMap();
     fraudMap = new WeakMap();
-    reset$m();
+    reset$n();
 }
 // We parse new root nodes for any regions or masked nodes in the beginning (document) and
 // later whenever there are new additions or modifications to DOM (mutations)
@@ -1053,7 +1053,7 @@ function parse$1(root, init) {
         // Since mutations may happen on leaf nodes too, e.g. text nodes, which may not support all selector APIs.
         // We ensure that the root note supports querySelectorAll API before executing the code below to identify new regions.
         if ("querySelectorAll" in root) {
-            config$1.regions.forEach(function (x) { return root.querySelectorAll(x[1]).forEach(function (e) { return observe$c(e, "".concat(x[0])); }); }); // Regions
+            config$1.regions.forEach(function (x) { return root.querySelectorAll(x[1]).forEach(function (e) { return observe$1(e, "".concat(x[0])); }); }); // Regions
             config$1.mask.forEach(function (x) { return root.querySelectorAll(x).forEach(function (e) { return privacyMap.set(e, 3 /* Privacy.TextImage */); }); }); // Masked Elements
             config$1.checksum.forEach(function (x) { return root.querySelectorAll(x[1]).forEach(function (e) { return fraudMap.set(e, x[0]); }); }); // Fraud Checksum Check
             unmask.forEach(function (x) { return root.querySelectorAll(x).forEach(function (e) { return privacyMap.set(e, 0 /* Privacy.None */); }); }); // Unmasked Elements
@@ -1092,7 +1092,7 @@ function add(node, parent, data, source) {
     }
     // If there's an explicit region attribute set on the element, use it to mark a region on the page
     if (data.attributes && "data-clarity-region" /* Constant.RegionData */ in data.attributes) {
-        observe$c(node, data.attributes["data-clarity-region" /* Constant.RegionData */]);
+        observe$1(node, data.attributes["data-clarity-region" /* Constant.RegionData */]);
         regionId = id;
     }
     nodesMap.set(id, node);
@@ -1373,8 +1373,8 @@ var dom = /*#__PURE__*/Object.freeze({
     lookup: lookup,
     parse: parse$1,
     sameorigin: sameorigin,
-    start: start$y,
-    stop: stop$w,
+    start: start$z,
+    stop: stop$x,
     update: update$1,
     updates: updates$2
 });
@@ -1402,7 +1402,7 @@ function resume$1() {
         }
     }
 }
-function reset$k() {
+function reset$l() {
     tracker = {};
     queuedTasks = [];
     activeTask = null;
@@ -1463,7 +1463,7 @@ function run() {
         });
     }
 }
-function state$a(timer) {
+function state$b(timer) {
     var id = key(timer);
     if (id in tracker) {
         var elapsed = performance.now() - tracker[id].start;
@@ -1472,7 +1472,7 @@ function state$a(timer) {
     // If this task is no longer being tracked, send stop message to the caller
     return 2 /* Task.Stop */;
 }
-function start$x(timer) {
+function start$y(timer) {
     tracker[key(timer)] = { start: performance.now(), calls: 0, yield: 30 /* Setting.LongTask */ };
 }
 function restart$2(timer) {
@@ -1480,12 +1480,12 @@ function restart$2(timer) {
     if (tracker && tracker[id]) {
         var c = tracker[id].calls;
         var y = tracker[id].yield;
-        start$x(timer);
+        start$y(timer);
         tracker[id].calls = c + 1;
         tracker[id].yield = y;
     }
 }
-function stop$v(timer) {
+function stop$w(timer) {
     var end = performance.now();
     var id = key(timer);
     var duration = end - tracker[id].start;
@@ -1505,7 +1505,7 @@ function suspend$1(timer) {
                 case 0:
                     id = key(timer);
                     if (!(id in tracker)) return [3 /*break*/, 2];
-                    stop$v(timer);
+                    stop$w(timer);
                     _a = tracker[id];
                     return [4 /*yield*/, wait()];
                 case 1:
@@ -1618,14 +1618,14 @@ function tokenize (tokens) {
 }
 
 var data$c;
-function reset$j() {
+function reset$k() {
     data$c = null;
 }
-function start$w() {
-    reset$j();
-    compute$7();
+function start$x() {
+    reset$k();
+    compute$8();
 }
-function compute$7() {
+function compute$8() {
     var body = document.body;
     var d = document.documentElement;
     var bodyClientWidth = body ? body.clientWidth : null;
@@ -1648,436 +1648,256 @@ function compute$7() {
         encode$4(8 /* Event.Document */);
     }
 }
+function stop$v() {
+    reset$k();
+}
+
+var state$a = [];
+function start$w() {
+    reset$j();
+}
+function observe$c(root) {
+    bind(root, "change", recompute$8, true);
+}
+function recompute$8(evt) {
+    var element = target(evt);
+    if (element) {
+        var value = element.value;
+        var checksum = value && value.length >= 5 /* Setting.WordLength */ && config$1.fraud && "password,secret,pass,social,ssn,code,hidden" /* Mask.Exclude */.indexOf(element.type) === -1 ? hash(value, 24 /* Setting.ChecksumPrecision */) : "" /* Constant.Empty */;
+        state$a.push({ time: time(evt), event: 42 /* Event.Change */, data: { target: target(evt), type: element.type, value: value, checksum: checksum } });
+        schedule$1(encode$3.bind(this, 42 /* Event.Change */));
+    }
+}
+function reset$j() {
+    state$a = [];
+}
 function stop$u() {
     reset$j();
 }
 
+function offset(element) {
+    var output = { x: 0, y: 0 };
+    // Walk up the chain to ensure we compute offset distance correctly
+    // In case where we may have nested IFRAMEs, we keep walking up until we get to the top most parent page
+    if (element && element.offsetParent) {
+        do {
+            var parent_1 = element.offsetParent;
+            var frame = parent_1 === null ? iframe(element.ownerDocument) : null;
+            output.x += element.offsetLeft;
+            output.y += element.offsetTop;
+            element = frame ? frame : parent_1;
+        } while (element);
+    }
+    return output;
+}
+
+var UserInputTags = ["input", "textarea", "radio", "button", "canvas"];
 var state$9 = [];
-var animationPlay = null;
-var animationPause = null;
-var animationCancel = null;
-var animationFinish = null;
-var animationId = 'clarityAnimationId';
-var operationCount = 'clarityOperationCount';
-var maxOperations = 20;
 function start$v() {
-    if (window["Animation"] &&
-        window["KeyframeEffect"] &&
-        window["KeyframeEffect"].prototype.getKeyframes &&
-        window["KeyframeEffect"].prototype.getTiming) {
-        reset$i();
-        overrideAnimationHelper(animationPlay, "play");
-        overrideAnimationHelper(animationPause, "pause");
-        overrideAnimationHelper(animationCancel, "cancel");
-        overrideAnimationHelper(animationFinish, "finish");
+    reset$i();
+}
+function observe$b(root) {
+    bind(root, "click", handler$3.bind(this, 9 /* Event.Click */, root), true);
+}
+function handler$3(event, root, evt) {
+    var frame = iframe(root);
+    var d = frame ? frame.contentDocument.documentElement : document.documentElement;
+    var x = "pageX" in evt ? Math.round(evt.pageX) : ("clientX" in evt ? Math.round(evt["clientX"] + d.scrollLeft) : null);
+    var y = "pageY" in evt ? Math.round(evt.pageY) : ("clientY" in evt ? Math.round(evt["clientY"] + d.scrollTop) : null);
+    // In case of iframe, we adjust (x,y) to be relative to top parent's origin
+    if (frame) {
+        var distance = offset(frame);
+        x = x ? x + Math.round(distance.x) : x;
+        y = y ? y + Math.round(distance.y) : y;
+    }
+    var t = target(evt);
+    // Find nearest anchor tag (<a/>) parent if current target node is part of one
+    // If present, we use the returned link element to populate text and link properties below
+    var a = link(t);
+    // Get layout rectangle for the target element
+    var l = layout$1(t);
+    // Reference: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+    // This property helps differentiate between a keyboard navigation vs. pointer click
+    // In case of a keyboard navigation, we use center of target element as (x,y)
+    if (evt.detail === 0 && l) {
+        x = Math.round(l.x + (l.w / 2));
+        y = Math.round(l.y + (l.h / 2));
+    }
+    var eX = l ? Math.max(Math.floor(((x - l.x) / l.w) * 32767 /* Setting.ClickPrecision */), 0) : 0;
+    var eY = l ? Math.max(Math.floor(((y - l.y) / l.h) * 32767 /* Setting.ClickPrecision */), 0) : 0;
+    // Check for null values before processing this event
+    if (x !== null && y !== null) {
+        state$9.push({
+            time: time(evt),
+            event: event,
+            data: {
+                target: t,
+                x: x,
+                y: y,
+                eX: eX,
+                eY: eY,
+                button: evt.button,
+                reaction: reaction(t),
+                context: context(a),
+                text: text(t),
+                link: a ? a.href : null,
+                hash: null,
+                trust: evt.isTrusted ? 1 /* BooleanFlag.True */ : 0 /* BooleanFlag.False */
+            }
+        });
+        schedule$1(encode$3.bind(this, event));
     }
 }
-function reset$i() {
-    state$9 = [];
+function link(node) {
+    while (node && node !== document) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            var element = node;
+            if (element.tagName === "A") {
+                return element;
+            }
+        }
+        node = node.parentNode;
+    }
+    return null;
 }
-function track$5(time, id, operation, keyFrames, timing, targetId, timeline) {
-    state$9.push({
-        time: time,
-        event: 44 /* Event.Animation */,
-        data: {
-            id: id,
-            operation: operation,
-            keyFrames: keyFrames,
-            timing: timing,
-            targetId: targetId,
-            timeline: timeline
+function text(element) {
+    var output = null;
+    if (element) {
+        // Grab text using "textContent" for most HTMLElements, however, use "value" for HTMLInputElements and "alt" for HTMLImageElement.
+        var t = element.textContent || element.value || element.alt;
+        if (t) {
+            // Replace multiple occurrence of space characters with a single white space
+            // Also, trim any spaces at the beginning or at the end of string
+            // Finally, send only first few characters as specified by the Setting
+            output = t.replace(/\s+/g, " " /* Constant.Space */).trim().substr(0, 25 /* Setting.ClickText */);
         }
-    });
-    encode$4(44 /* Event.Animation */);
+    }
+    return output;
 }
-function stop$t() {
-    reset$i();
+function reaction(element) {
+    if (element.nodeType === Node.ELEMENT_NODE) {
+        var tag = element.tagName.toLowerCase();
+        if (UserInputTags.indexOf(tag) >= 0) {
+            return 0 /* BooleanFlag.False */;
+        }
+    }
+    return 1 /* BooleanFlag.True */;
 }
-function overrideAnimationHelper(functionToOverride, name) {
-    if (functionToOverride === null) {
-        functionToOverride = Animation.prototype[name];
-        Animation.prototype[name] = function () {
-            if (active()) {
-                var effect = this.effect;
-                if (effect.getKeyframes && effect.getTiming) {
-                    if (!this[animationId]) {
-                        this[animationId] = shortid();
-                        this[operationCount] = 0;
-                        var keyframes = effect.getKeyframes();
-                        var timing = effect.getTiming();
-                        track$5(time(), this[animationId], 0 /* AnimationOperation.Create */, JSON.stringify(keyframes), JSON.stringify(timing), getId(this.effect.target));
-                    }
-                    if (this[operationCount]++ < maxOperations) {
-                        var operation = null;
-                        switch (name) {
-                            case "play":
-                                operation = 1 /* AnimationOperation.Play */;
-                                break;
-                            case "pause":
-                                operation = 2 /* AnimationOperation.Pause */;
-                                break;
-                            case "cancel":
-                                operation = 3 /* AnimationOperation.Cancel */;
-                                break;
-                            case "finish":
-                                operation = 4 /* AnimationOperation.Finish */;
-                                break;
-                        }
-                        if (operation) {
-                            track$5(time(), this[animationId], operation);
-                        }
-                    }
-                }
-            }
-            return functionToOverride.apply(this, arguments);
-        };
+function layout$1(element) {
+    var box = null;
+    var de = document.documentElement;
+    if (typeof element.getBoundingClientRect === "function") {
+        // getBoundingClientRect returns rectangle relative positioning to viewport
+        var rect = element.getBoundingClientRect();
+        if (rect && rect.width > 0 && rect.height > 0) {
+            // Add viewport's scroll position to rectangle to get position relative to document origin
+            // Also: using Math.floor() instead of Math.round() because in Edge,
+            // getBoundingClientRect returns partial pixel values (e.g. 162.5px) and Chrome already
+            // floors the value (e.g. 162px). This keeps consistent behavior across browsers.
+            box = {
+                x: Math.floor(rect.left + ("pageXOffset" in window ? window.pageXOffset : de.scrollLeft)),
+                y: Math.floor(rect.top + ("pageYOffset" in window ? window.pageYOffset : de.scrollTop)),
+                w: Math.floor(rect.width),
+                h: Math.floor(rect.height)
+            };
+        }
     }
-}
-
-function encode$4 (type, timer, ts) {
-    if (timer === void 0) { timer = null; }
-    if (ts === void 0) { ts = null; }
-    return __awaiter(this, void 0, void 0, function () {
-        var eventTime, tokens, _a, d, _i, _b, r, _c, _d, entry, values, _e, values_1, value, state, data, active, suspend, privacy, mangle, keys, _f, keys_1, key, box, factor, attr;
-        return __generator(this, function (_g) {
-            switch (_g.label) {
-                case 0:
-                    eventTime = ts || time();
-                    tokens = [eventTime, type];
-                    _a = type;
-                    switch (_a) {
-                        case 8 /* Event.Document */: return [3 /*break*/, 1];
-                        case 7 /* Event.Region */: return [3 /*break*/, 2];
-                        case 44 /* Event.Animation */: return [3 /*break*/, 3];
-                        case 5 /* Event.Discover */: return [3 /*break*/, 4];
-                        case 6 /* Event.Mutation */: return [3 /*break*/, 4];
-                    }
-                    return [3 /*break*/, 11];
-                case 1:
-                    d = data$c;
-                    tokens.push(d.width);
-                    tokens.push(d.height);
-                    track$8(type, d.width, d.height);
-                    queue(tokens);
-                    return [3 /*break*/, 11];
-                case 2:
-                    for (_i = 0, _b = state$8; _i < _b.length; _i++) {
-                        r = _b[_i];
-                        tokens = [r.time, 7 /* Event.Region */];
-                        tokens.push(r.data.id);
-                        tokens.push(r.data.interaction);
-                        tokens.push(r.data.visibility);
-                        tokens.push(r.data.name);
-                        queue(tokens);
-                    }
-                    reset$h();
-                    return [3 /*break*/, 11];
-                case 3:
-                    for (_c = 0, _d = state$9; _c < _d.length; _c++) {
-                        entry = _d[_c];
-                        tokens = [entry.time, entry.event];
-                        tokens.push(entry.data.id);
-                        tokens.push(entry.data.operation);
-                        tokens.push(entry.data.keyFrames);
-                        tokens.push(entry.data.timing);
-                        tokens.push(entry.data.timeline);
-                        tokens.push(entry.data.targetId);
-                        queue(tokens);
-                    }
-                    reset$i();
-                    return [3 /*break*/, 11];
-                case 4:
-                    // Check if we are operating within the context of the current page
-                    if (state$a(timer) === 2 /* Task.Stop */) {
-                        return [3 /*break*/, 11];
-                    }
-                    values = updates$2();
-                    if (!(values.length > 0)) return [3 /*break*/, 10];
-                    _e = 0, values_1 = values;
-                    _g.label = 5;
-                case 5:
-                    if (!(_e < values_1.length)) return [3 /*break*/, 9];
-                    value = values_1[_e];
-                    state = state$a(timer);
-                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 7];
-                    return [4 /*yield*/, suspend$1(timer)];
-                case 6:
-                    state = _g.sent();
-                    _g.label = 7;
-                case 7:
-                    if (state === 2 /* Task.Stop */) {
-                        return [3 /*break*/, 9];
-                    }
-                    data = value.data;
-                    active = value.metadata.active;
-                    suspend = value.metadata.suspend;
-                    privacy = value.metadata.privacy;
-                    mangle = shouldMangle(value);
-                    keys = active ? ["tag", "attributes", "value"] : ["tag"];
-                    for (_f = 0, keys_1 = keys; _f < keys_1.length; _f++) {
-                        key = keys_1[_f];
-                        if (data[key]) {
-                            switch (key) {
-                                case "tag":
-                                    box = size(value);
-                                    factor = mangle ? -1 : 1;
-                                    tokens.push(value.id * factor);
-                                    if (value.parent && active) {
-                                        tokens.push(value.parent);
-                                    }
-                                    if (value.previous && active) {
-                                        tokens.push(value.previous);
-                                    }
-                                    tokens.push(suspend ? "*M" /* Constant.SuspendMutationTag */ : data[key]);
-                                    if (box && box.length === 2) {
-                                        tokens.push("".concat("#" /* Constant.Hash */).concat(str$1(box[0]), ".").concat(str$1(box[1])));
-                                    }
-                                    break;
-                                case "attributes":
-                                    for (attr in data[key]) {
-                                        if (data[key][attr] !== undefined) {
-                                            tokens.push(attribute(attr, data[key][attr], privacy));
-                                        }
-                                    }
-                                    break;
-                                case "value":
-                                    check$4(value.metadata.fraud, value.id, data[key]);
-                                    tokens.push(text$1(data[key], data.tag, privacy, mangle));
-                                    break;
-                            }
-                        }
-                    }
-                    _g.label = 8;
-                case 8:
-                    _e++;
-                    return [3 /*break*/, 5];
-                case 9:
-                    if (type === 6 /* Event.Mutation */) {
-                        activity(eventTime);
-                    }
-                    queue(tokenize(tokens), !config$1.lean);
-                    _g.label = 10;
-                case 10: return [3 /*break*/, 11];
-                case 11: return [2 /*return*/];
-            }
-        });
-    });
-}
-function shouldMangle(value) {
-    var privacy = value.metadata.privacy;
-    return value.data.tag === "*T" /* Constant.TextTag */ && !(privacy === 0 /* Privacy.None */ || privacy === 1 /* Privacy.Sensitive */);
+    return box;
 }
-function size(value) {
-    if (value.metadata.size !== null && value.metadata.size.length === 0) {
-        var img = getNode(value.id);
-        if (img) {
-            return [Math.floor(img.offsetWidth * 100 /* Setting.BoxPrecision */), Math.floor(img.offsetHeight * 100 /* Setting.BoxPrecision */)];
+function context(a) {
+    if (a && a.hasAttribute("target" /* Constant.Target */)) {
+        switch (a.getAttribute("target" /* Constant.Target */)) {
+            case "_blank" /* Constant.Blank */: return 1 /* BrowsingContext.Blank */;
+            case "_parent" /* Constant.Parent */: return 2 /* BrowsingContext.Parent */;
+            case "_top" /* Constant.Top */: return 3 /* BrowsingContext.Top */;
         }
     }
-    return value.metadata.size;
+    return 0 /* BrowsingContext.Self */;
 }
-function str$1(input) {
-    return input.toString(36);
+function reset$i() {
+    state$9 = [];
 }
-function attribute(key, value, privacy) {
-    return "".concat(key, "=").concat(text$1(value, key.indexOf("data-" /* Constant.DataAttribute */) === 0 ? "data-" /* Constant.DataAttribute */ : key, privacy));
+function stop$t() {
+    reset$i();
 }
 
 var state$8 = [];
-var regionMap = null; // Maps region nodes => region name
-var regions = {};
-var queue$2 = [];
-var watch = false;
-var observer$1 = null;
 function start$u() {
     reset$h();
-    observer$1 = null;
-    regionMap = new WeakMap();
-    regions = {};
-    queue$2 = [];
-    watch = window["IntersectionObserver"] ? true : false;
 }
-function observe$c(node, name) {
-    if (regionMap.has(node) === false) {
-        regionMap.set(node, name);
-        observer$1 = observer$1 === null && watch ? new IntersectionObserver(handler$3, {
-            // Get notified as intersection continues to change
-            // This allows us to process regions that get partially hidden during the lifetime of the page
-            // See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
-            // By default, intersection observers only fire an event when even a single pixel is visible and not thereafter.
-            threshold: [0, 0.2, 0.4, 0.6, 0.8, 1]
-        }) : observer$1;
-        if (observer$1 && node && node.nodeType === Node.ELEMENT_NODE) {
-            observer$1.observe(node);
-        }
-    }
+function observe$a(root) {
+    bind(root, "cut", recompute$7.bind(this, 0 /* Clipboard.Cut */), true);
+    bind(root, "copy", recompute$7.bind(this, 1 /* Clipboard.Copy */), true);
+    bind(root, "paste", recompute$7.bind(this, 2 /* Clipboard.Paste */), true);
 }
-function exists(node) {
-    // Check if regionMap is not null before looking up a node
-    // Since, dom module stops after region module, it's possible that we may set regionMap to be null
-    // and still attempt to call exists on a late coming DOM mutation (or addition), effectively causing a script error
-    return regionMap && regionMap.has(node);
+function recompute$7(action, evt) {
+    state$8.push({ time: time(evt), event: 38 /* Event.Clipboard */, data: { target: target(evt), action: action } });
+    schedule$1(encode$3.bind(this, 38 /* Event.Clipboard */));
 }
-function track$4(id, event) {
-    var node = getNode(id);
-    var data = id in regions ? regions[id] : { id: id, visibility: 0 /* RegionVisibility.Rendered */, interaction: 16 /* InteractionState.None */, name: regionMap.get(node) };
-    // Determine the interaction state based on incoming event
-    var interaction = 16 /* InteractionState.None */;
-    switch (event) {
-        case 9 /* Event.Click */:
-            interaction = 20 /* InteractionState.Clicked */;
-            break;
-        case 27 /* Event.Input */:
-            interaction = 30 /* InteractionState.Input */;
-            break;
-    }
-    // Process updates to this region, if applicable
-    process$6(node, data, interaction, data.visibility);
+function reset$h() {
+    state$8 = [];
 }
-function compute$6() {
-    // Process any regions where we couldn't resolve an "id" for at the time of last intersection observer event
-    // This could happen in cases where elements are not yet processed by Clarity's virtual DOM but browser reports a change, regardless.
-    // For those cases we add them to the queue and re-process them below
-    var q = [];
-    for (var _i = 0, queue_1 = queue$2; _i < queue_1.length; _i++) {
-        var r = queue_1[_i];
-        var id = getId(r.node);
-        if (!(id in regions)) {
-            if (id) {
-                r.data.id = id;
-                regions[id] = r.data;
-                state$8.push(clone$1(r.data));
-            }
-            else {
-                q.push(r);
-            }
+function stop$s() {
+    reset$h();
+}
+
+var timeout$5 = null;
+var state$7 = [];
+function start$t() {
+    reset$g();
+}
+function observe$9(root) {
+    bind(root, "input", recompute$6, true);
+}
+function recompute$6(evt) {
+    var input = target(evt);
+    var value = get(input);
+    if (input && input.type && value) {
+        var v = input.value;
+        switch (input.type) {
+            case "radio":
+            case "checkbox":
+                v = input.checked ? "true" : "false";
+                break;
         }
-    }
-    queue$2 = q;
-    // Schedule encode only when we have at least one valid data entry
-    if (state$8.length > 0) {
-        encode$4(7 /* Event.Region */);
+        var data = { target: input, value: v };
+        // If last entry in the queue is for the same target node as the current one, remove it so we can later swap it with current data.
+        if (state$7.length > 0 && (state$7[state$7.length - 1].data.target === data.target)) {
+            state$7.pop();
+        }
+        state$7.push({ time: time(evt), event: 27 /* Event.Input */, data: data });
+        clearTimeout(timeout$5);
+        timeout$5 = setTimeout(process$6, 1000 /* Setting.InputLookAhead */, 27 /* Event.Input */);
     }
 }
-function handler$3(entries) {
-    for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
-        var entry = entries_1[_i];
-        var target = entry.target;
-        var rect = entry.boundingClientRect;
-        var overlap = entry.intersectionRect;
-        var viewport = entry.rootBounds;
-        // Only capture regions that have non-zero width or height to avoid tracking and sending regions
-        // that cannot ever be seen by the user. In some cases, websites will have a multiple copy of the same region
-        // like search box - one for desktop, and another for mobile. In those cases, CSS media queries determine which one should be visible.
-        // Also, if these regions ever become non-zero width or height (through AJAX, user action or orientation change) - we will automatically start monitoring them from that point onwards
-        if (regionMap.has(target) && rect.width + rect.height > 0 && viewport.width > 0 && viewport.height > 0) {
-            var id = target ? getId(target) : null;
-            var data = id in regions ? regions[id] : { id: id, name: regionMap.get(target), interaction: 16 /* InteractionState.None */, visibility: 0 /* RegionVisibility.Rendered */ };
-            // For regions that have relatively smaller area, we look at intersection ratio and see the overlap relative to element's area
-            // However, for larger regions, area of regions could be bigger than viewport and therefore comparison is relative to visible area
-            var viewportRatio = overlap ? (overlap.width * overlap.height * 1.0) / (viewport.width * viewport.height) : 0;
-            var visible = viewportRatio > 0.05 /* Setting.ViewportIntersectionRatio */ || entry.intersectionRatio > 0.8 /* Setting.IntersectionRatio */;
-            // If an element is either visible or was visible and has been scrolled to the end
-            // i.e. Scrolled to end is determined by if the starting position of the element + the window height is more than the total element height. 
-            // starting position is relative to the viewport - so Intersection observer returns a negative value for rect.top to indicate that the element top is above the viewport
-            var scrolledToEnd = (visible || data.visibility == 10 /* RegionVisibility.Visible */) && Math.abs(rect.top) + viewport.height > rect.height;
-            // Process updates to this region, if applicable
-            process$6(target, data, data.interaction, (scrolledToEnd ?
-                13 /* RegionVisibility.ScrolledToEnd */ :
-                (visible ? 10 /* RegionVisibility.Visible */ : 0 /* RegionVisibility.Rendered */)));
-            // Stop observing this element now that we have already received scrolled signal
-            if (data.visibility >= 13 /* RegionVisibility.ScrolledToEnd */ && observer$1) {
-                observer$1.unobserve(target);
-            }
-        }
-    }
-    if (state$8.length > 0) {
-        encode$4(7 /* Event.Region */);
-    }
-}
-function process$6(n, d, s, v) {
-    // Check if received a state that supersedes existing state
-    var updated = s > d.interaction || v > d.visibility;
-    d.interaction = s > d.interaction ? s : d.interaction;
-    d.visibility = v > d.visibility ? v : d.visibility;
-    // If the corresponding node is already discovered, update the internal state
-    // Otherwise, track it in a queue to reprocess later.
-    if (d.id) {
-        if ((d.id in regions && updated) || !(d.id in regions)) {
-            regions[d.id] = d;
-            state$8.push(clone$1(d));
-        }
-    }
-    else {
-        queue$2.push({ node: n, data: d });
-    }
-}
-function clone$1(r) {
-    return { time: time(), data: { id: r.id, interaction: r.interaction, visibility: r.visibility, name: r.name } };
-}
-function reset$h() {
-    state$8 = [];
-}
-function stop$s() {
-    reset$h();
-    regionMap = null;
-    regions = {};
-    queue$2 = [];
-    if (observer$1) {
-        observer$1.disconnect();
-        observer$1 = null;
-    }
-    watch = false;
-}
-
-var state$7 = [];
-function start$t() {
-    reset$g();
-}
-function observe$b(root) {
-    bind(root, "change", recompute$8, true);
-}
-function recompute$8(evt) {
-    var element = target(evt);
-    if (element) {
-        var value = element.value;
-        var checksum = value && value.length >= 5 /* Setting.WordLength */ && config$1.fraud && "password,secret,pass,social,ssn,code,hidden" /* Mask.Exclude */.indexOf(element.type) === -1 ? hash(value, 24 /* Setting.ChecksumPrecision */) : "" /* Constant.Empty */;
-        state$7.push({ time: time(evt), event: 42 /* Event.Change */, data: { target: target(evt), type: element.type, value: value, checksum: checksum } });
-        schedule$1(encode$3.bind(this, 42 /* Event.Change */));
-    }
+function process$6(event) {
+    schedule$1(encode$3.bind(this, event));
 }
 function reset$g() {
     state$7 = [];
 }
 function stop$r() {
+    clearTimeout(timeout$5);
     reset$g();
 }
 
-function offset(element) {
-    var output = { x: 0, y: 0 };
-    // Walk up the chain to ensure we compute offset distance correctly
-    // In case where we may have nested IFRAMEs, we keep walking up until we get to the top most parent page
-    if (element && element.offsetParent) {
-        do {
-            var parent_1 = element.offsetParent;
-            var frame = parent_1 === null ? iframe(element.ownerDocument) : null;
-            output.x += element.offsetLeft;
-            output.y += element.offsetTop;
-            element = frame ? frame : parent_1;
-        } while (element);
-    }
-    return output;
-}
-
-var UserInputTags = ["input", "textarea", "radio", "button", "canvas"];
 var state$6 = [];
+var timeout$4 = null;
 function start$s() {
     reset$f();
 }
-function observe$a(root) {
-    bind(root, "click", handler$2.bind(this, 9 /* Event.Click */, root), true);
+function observe$8(root) {
+    bind(root, "mousedown", mouse.bind(this, 13 /* Event.MouseDown */, root), true);
+    bind(root, "mouseup", mouse.bind(this, 14 /* Event.MouseUp */, root), true);
+    bind(root, "mousemove", mouse.bind(this, 12 /* Event.MouseMove */, root), true);
+    bind(root, "wheel", mouse.bind(this, 15 /* Event.MouseWheel */, root), true);
+    bind(root, "dblclick", mouse.bind(this, 16 /* Event.DoubleClick */, root), true);
+    bind(root, "touchstart", touch.bind(this, 17 /* Event.TouchStart */, root), true);
+    bind(root, "touchend", touch.bind(this, 18 /* Event.TouchEnd */, root), true);
+    bind(root, "touchmove", touch.bind(this, 19 /* Event.TouchMove */, root), true);
+    bind(root, "touchcancel", touch.bind(this, 20 /* Event.TouchCancel */, root), true);
 }
-function handler$2(event, root, evt) {
+function mouse(event, root, evt) {
     var frame = iframe(root);
     var d = frame ? frame.contentDocument.documentElement : document.documentElement;
     var x = "pageX" in evt ? Math.round(evt.pageX) : ("clientX" in evt ? Math.round(evt["clientX"] + d.scrollLeft) : null);
@@ -2088,299 +1908,101 @@ function handler$2(event, root, evt) {
         x = x ? x + Math.round(distance.x) : x;
         y = y ? y + Math.round(distance.y) : y;
     }
-    var t = target(evt);
-    // Find nearest anchor tag (<a/>) parent if current target node is part of one
-    // If present, we use the returned link element to populate text and link properties below
-    var a = link(t);
-    // Get layout rectangle for the target element
-    var l = layout$1(t);
-    // Reference: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
-    // This property helps differentiate between a keyboard navigation vs. pointer click
-    // In case of a keyboard navigation, we use center of target element as (x,y)
-    if (evt.detail === 0 && l) {
-        x = Math.round(l.x + (l.w / 2));
-        y = Math.round(l.y + (l.h / 2));
-    }
-    var eX = l ? Math.max(Math.floor(((x - l.x) / l.w) * 32767 /* Setting.ClickPrecision */), 0) : 0;
-    var eY = l ? Math.max(Math.floor(((y - l.y) / l.h) * 32767 /* Setting.ClickPrecision */), 0) : 0;
     // Check for null values before processing this event
     if (x !== null && y !== null) {
-        state$6.push({
-            time: time(evt),
-            event: event,
-            data: {
-                target: t,
-                x: x,
-                y: y,
-                eX: eX,
-                eY: eY,
-                button: evt.button,
-                reaction: reaction(t),
-                context: context(a),
-                text: text(t),
-                link: a ? a.href : null,
-                hash: null,
-                trust: evt.isTrusted ? 1 /* BooleanFlag.True */ : 0 /* BooleanFlag.False */
-            }
-        });
-        schedule$1(encode$3.bind(this, event));
+        handler$2({ time: time(evt), event: event, data: { target: target(evt), x: x, y: y } });
     }
 }
-function link(node) {
-    while (node && node !== document) {
-        if (node.nodeType === Node.ELEMENT_NODE) {
-            var element = node;
-            if (element.tagName === "A") {
-                return element;
+function touch(event, root, evt) {
+    var frame = iframe(root);
+    var d = frame ? frame.contentDocument.documentElement : document.documentElement;
+    var touches = evt.changedTouches;
+    var t = time(evt);
+    if (touches) {
+        for (var i = 0; i < touches.length; i++) {
+            var entry = touches[i];
+            var x = "clientX" in entry ? Math.round(entry["clientX"] + d.scrollLeft) : null;
+            var y = "clientY" in entry ? Math.round(entry["clientY"] + d.scrollTop) : null;
+            x = x && frame ? x + Math.round(frame.offsetLeft) : x;
+            y = y && frame ? y + Math.round(frame.offsetTop) : y;
+            // Check for null values before processing this event
+            if (x !== null && y !== null) {
+                handler$2({ time: t, event: event, data: { target: target(evt), x: x, y: y } });
             }
         }
-        node = node.parentNode;
-    }
-    return null;
-}
-function text(element) {
-    var output = null;
-    if (element) {
-        // Grab text using "textContent" for most HTMLElements, however, use "value" for HTMLInputElements and "alt" for HTMLImageElement.
-        var t = element.textContent || element.value || element.alt;
-        if (t) {
-            // Replace multiple occurrence of space characters with a single white space
-            // Also, trim any spaces at the beginning or at the end of string
-            // Finally, send only first few characters as specified by the Setting
-            output = t.replace(/\s+/g, " " /* Constant.Space */).trim().substr(0, 25 /* Setting.ClickText */);
-        }
-    }
-    return output;
-}
-function reaction(element) {
-    if (element.nodeType === Node.ELEMENT_NODE) {
-        var tag = element.tagName.toLowerCase();
-        if (UserInputTags.indexOf(tag) >= 0) {
-            return 0 /* BooleanFlag.False */;
-        }
     }
-    return 1 /* BooleanFlag.True */;
 }
-function layout$1(element) {
-    var box = null;
-    var de = document.documentElement;
-    if (typeof element.getBoundingClientRect === "function") {
-        // getBoundingClientRect returns rectangle relative positioning to viewport
-        var rect = element.getBoundingClientRect();
-        if (rect && rect.width > 0 && rect.height > 0) {
-            // Add viewport's scroll position to rectangle to get position relative to document origin
-            // Also: using Math.floor() instead of Math.round() because in Edge,
-            // getBoundingClientRect returns partial pixel values (e.g. 162.5px) and Chrome already
-            // floors the value (e.g. 162px). This keeps consistent behavior across browsers.
-            box = {
-                x: Math.floor(rect.left + ("pageXOffset" in window ? window.pageXOffset : de.scrollLeft)),
-                y: Math.floor(rect.top + ("pageYOffset" in window ? window.pageYOffset : de.scrollTop)),
-                w: Math.floor(rect.width),
-                h: Math.floor(rect.height)
-            };
-        }
+function handler$2(current) {
+    switch (current.event) {
+        case 12 /* Event.MouseMove */:
+        case 15 /* Event.MouseWheel */:
+        case 19 /* Event.TouchMove */:
+            var length_1 = state$6.length;
+            var last = length_1 > 1 ? state$6[length_1 - 2] : null;
+            if (last && similar$1(last, current)) {
+                state$6.pop();
+            }
+            state$6.push(current);
+            clearTimeout(timeout$4);
+            timeout$4 = setTimeout(process$5, 500 /* Setting.LookAhead */, current.event);
+            break;
+        default:
+            state$6.push(current);
+            process$5(current.event);
+            break;
     }
-    return box;
 }
-function context(a) {
-    if (a && a.hasAttribute("target" /* Constant.Target */)) {
-        switch (a.getAttribute("target" /* Constant.Target */)) {
-            case "_blank" /* Constant.Blank */: return 1 /* BrowsingContext.Blank */;
-            case "_parent" /* Constant.Parent */: return 2 /* BrowsingContext.Parent */;
-            case "_top" /* Constant.Top */: return 3 /* BrowsingContext.Top */;
-        }
-    }
-    return 0 /* BrowsingContext.Self */;
+function process$5(event) {
+    schedule$1(encode$3.bind(this, event));
 }
 function reset$f() {
     state$6 = [];
 }
+function similar$1(last, current) {
+    var dx = last.data.x - current.data.x;
+    var dy = last.data.y - current.data.y;
+    var distance = Math.sqrt(dx * dx + dy * dy);
+    var gap = current.time - last.time;
+    var match = current.data.target === last.data.target;
+    return current.event === last.event && match && distance < 20 /* Setting.Distance */ && gap < 25 /* Setting.Interval */;
+}
 function stop$q() {
-    reset$f();
+    clearTimeout(timeout$4);
+    // Send out any pending pointer events in the pipeline
+    if (state$6.length > 0) {
+        process$5(state$6[state$6.length - 1].event);
+    }
 }
 
-var state$5 = [];
+var data$b;
 function start$r() {
-    reset$e();
+    bind(window, "resize", recompute$5);
+    recompute$5();
 }
-function observe$9(root) {
-    bind(root, "cut", recompute$7.bind(this, 0 /* Clipboard.Cut */), true);
-    bind(root, "copy", recompute$7.bind(this, 1 /* Clipboard.Copy */), true);
-    bind(root, "paste", recompute$7.bind(this, 2 /* Clipboard.Paste */), true);
-}
-function recompute$7(action, evt) {
-    state$5.push({ time: time(evt), event: 38 /* Event.Clipboard */, data: { target: target(evt), action: action } });
-    schedule$1(encode$3.bind(this, 38 /* Event.Clipboard */));
+function recompute$5() {
+    var de = document.documentElement;
+    // window.innerWidth includes width of the scrollbar and is not a true representation of the viewport width.
+    // Therefore, when possible, use documentElement's clientWidth property.
+    data$b = {
+        width: de && "clientWidth" in de ? Math.min(de.clientWidth, window.innerWidth) : window.innerWidth,
+        height: de && "clientHeight" in de ? Math.min(de.clientHeight, window.innerHeight) : window.innerHeight,
+    };
+    encode$3(11 /* Event.Resize */);
 }
 function reset$e() {
-    state$5 = [];
+    data$b = null;
 }
 function stop$p() {
     reset$e();
 }
 
-var timeout$5 = null;
-var state$4 = [];
-function start$q() {
-    reset$d();
-}
-function observe$8(root) {
-    bind(root, "input", recompute$6, true);
-}
-function recompute$6(evt) {
-    var input = target(evt);
-    var value = get(input);
-    if (input && input.type && value) {
-        var v = input.value;
-        switch (input.type) {
-            case "radio":
-            case "checkbox":
-                v = input.checked ? "true" : "false";
-                break;
-        }
-        var data = { target: input, value: v };
-        // If last entry in the queue is for the same target node as the current one, remove it so we can later swap it with current data.
-        if (state$4.length > 0 && (state$4[state$4.length - 1].data.target === data.target)) {
-            state$4.pop();
-        }
-        state$4.push({ time: time(evt), event: 27 /* Event.Input */, data: data });
-        clearTimeout(timeout$5);
-        timeout$5 = setTimeout(process$5, 1000 /* Setting.InputLookAhead */, 27 /* Event.Input */);
-    }
-}
-function process$5(event) {
-    schedule$1(encode$3.bind(this, event));
-}
-function reset$d() {
-    state$4 = [];
-}
-function stop$o() {
-    clearTimeout(timeout$5);
-    reset$d();
-}
-
-var state$3 = [];
-var timeout$4 = null;
-function start$p() {
-    reset$c();
-}
-function observe$7(root) {
-    bind(root, "mousedown", mouse.bind(this, 13 /* Event.MouseDown */, root), true);
-    bind(root, "mouseup", mouse.bind(this, 14 /* Event.MouseUp */, root), true);
-    bind(root, "mousemove", mouse.bind(this, 12 /* Event.MouseMove */, root), true);
-    bind(root, "wheel", mouse.bind(this, 15 /* Event.MouseWheel */, root), true);
-    bind(root, "dblclick", mouse.bind(this, 16 /* Event.DoubleClick */, root), true);
-    bind(root, "touchstart", touch.bind(this, 17 /* Event.TouchStart */, root), true);
-    bind(root, "touchend", touch.bind(this, 18 /* Event.TouchEnd */, root), true);
-    bind(root, "touchmove", touch.bind(this, 19 /* Event.TouchMove */, root), true);
-    bind(root, "touchcancel", touch.bind(this, 20 /* Event.TouchCancel */, root), true);
-}
-function mouse(event, root, evt) {
-    var frame = iframe(root);
-    var d = frame ? frame.contentDocument.documentElement : document.documentElement;
-    var x = "pageX" in evt ? Math.round(evt.pageX) : ("clientX" in evt ? Math.round(evt["clientX"] + d.scrollLeft) : null);
-    var y = "pageY" in evt ? Math.round(evt.pageY) : ("clientY" in evt ? Math.round(evt["clientY"] + d.scrollTop) : null);
-    // In case of iframe, we adjust (x,y) to be relative to top parent's origin
-    if (frame) {
-        var distance = offset(frame);
-        x = x ? x + Math.round(distance.x) : x;
-        y = y ? y + Math.round(distance.y) : y;
-    }
-    // Check for null values before processing this event
-    if (x !== null && y !== null) {
-        handler$1({ time: time(evt), event: event, data: { target: target(evt), x: x, y: y } });
-    }
-}
-function touch(event, root, evt) {
-    var frame = iframe(root);
-    var d = frame ? frame.contentDocument.documentElement : document.documentElement;
-    var touches = evt.changedTouches;
-    var t = time(evt);
-    if (touches) {
-        for (var i = 0; i < touches.length; i++) {
-            var entry = touches[i];
-            var x = "clientX" in entry ? Math.round(entry["clientX"] + d.scrollLeft) : null;
-            var y = "clientY" in entry ? Math.round(entry["clientY"] + d.scrollTop) : null;
-            x = x && frame ? x + Math.round(frame.offsetLeft) : x;
-            y = y && frame ? y + Math.round(frame.offsetTop) : y;
-            // Check for null values before processing this event
-            if (x !== null && y !== null) {
-                handler$1({ time: t, event: event, data: { target: target(evt), x: x, y: y } });
-            }
-        }
-    }
-}
-function handler$1(current) {
-    switch (current.event) {
-        case 12 /* Event.MouseMove */:
-        case 15 /* Event.MouseWheel */:
-        case 19 /* Event.TouchMove */:
-            var length_1 = state$3.length;
-            var last = length_1 > 1 ? state$3[length_1 - 2] : null;
-            if (last && similar$1(last, current)) {
-                state$3.pop();
-            }
-            state$3.push(current);
-            clearTimeout(timeout$4);
-            timeout$4 = setTimeout(process$4, 500 /* Setting.LookAhead */, current.event);
-            break;
-        default:
-            state$3.push(current);
-            process$4(current.event);
-            break;
-    }
-}
-function process$4(event) {
-    schedule$1(encode$3.bind(this, event));
-}
-function reset$c() {
-    state$3 = [];
-}
-function similar$1(last, current) {
-    var dx = last.data.x - current.data.x;
-    var dy = last.data.y - current.data.y;
-    var distance = Math.sqrt(dx * dx + dy * dy);
-    var gap = current.time - last.time;
-    var match = current.data.target === last.data.target;
-    return current.event === last.event && match && distance < 20 /* Setting.Distance */ && gap < 25 /* Setting.Interval */;
-}
-function stop$n() {
-    clearTimeout(timeout$4);
-    // Send out any pending pointer events in the pipeline
-    if (state$3.length > 0) {
-        process$4(state$3[state$3.length - 1].event);
-    }
-}
-
-var data$b;
-function start$o() {
-    bind(window, "resize", recompute$5);
-    recompute$5();
-}
-function recompute$5() {
-    var de = document.documentElement;
-    // window.innerWidth includes width of the scrollbar and is not a true representation of the viewport width.
-    // Therefore, when possible, use documentElement's clientWidth property.
-    data$b = {
-        width: de && "clientWidth" in de ? Math.min(de.clientWidth, window.innerWidth) : window.innerWidth,
-        height: de && "clientHeight" in de ? Math.min(de.clientHeight, window.innerHeight) : window.innerHeight,
-    };
-    encode$3(11 /* Event.Resize */);
-}
-function reset$b() {
-    data$b = null;
-}
-function stop$m() {
-    reset$b();
-}
-
-var state$2 = [];
+var state$5 = [];
 var timeout$3 = null;
-function start$n() {
-    state$2 = [];
+function start$q() {
+    state$5 = [];
     recompute$4();
 }
-function observe$6(root) {
+function observe$7(root) {
     var frame = iframe(root);
     var node = frame ? frame.contentWindow : (root === document ? window : root);
     bind(node, "scroll", recompute$4, true);
@@ -2406,19 +2028,19 @@ function recompute$4(event) {
     if ((event === null && x === 0 && y === 0) || (x === null || y === null)) {
         return;
     }
-    var length = state$2.length;
-    var last = length > 1 ? state$2[length - 2] : null;
+    var length = state$5.length;
+    var last = length > 1 ? state$5[length - 2] : null;
     if (last && similar(last, current)) {
-        state$2.pop();
+        state$5.pop();
     }
-    state$2.push(current);
+    state$5.push(current);
     clearTimeout(timeout$3);
-    timeout$3 = setTimeout(process$3, 500 /* Setting.LookAhead */, 10 /* Event.Scroll */);
+    timeout$3 = setTimeout(process$4, 500 /* Setting.LookAhead */, 10 /* Event.Scroll */);
 }
-function reset$a() {
-    state$2 = [];
+function reset$d() {
+    state$5 = [];
 }
-function process$3(event) {
+function process$4(event) {
     schedule$1(encode$3.bind(this, event));
 }
 function similar(last, current) {
@@ -2426,18 +2048,18 @@ function similar(last, current) {
     var dy = last.data.y - current.data.y;
     return (dx * dx + dy * dy < 20 /* Setting.Distance */ * 20 /* Setting.Distance */) && (current.time - last.time < 25 /* Setting.Interval */);
 }
-function stop$l() {
+function stop$o() {
     clearTimeout(timeout$3);
-    state$2 = [];
+    state$5 = [];
 }
 
 var data$a = null;
 var previous = null;
 var timeout$2 = null;
-function start$m() {
-    reset$9();
+function start$p() {
+    reset$c();
 }
-function observe$5(root) {
+function observe$6(root) {
     bind(root, "selectstart", recompute$3.bind(this, root), true);
     bind(root, "selectionchange", recompute$3.bind(this, root), true);
 }
@@ -2459,7 +2081,7 @@ function recompute$3(root) {
     var startNode = data$a.start ? data$a.start : null;
     if (previous !== null && data$a.start !== null && startNode !== current.anchorNode) {
         clearTimeout(timeout$2);
-        process$2(21 /* Event.Selection */);
+        process$3(21 /* Event.Selection */);
     }
     data$a = {
         start: current.anchorNode,
@@ -2469,40 +2091,40 @@ function recompute$3(root) {
     };
     previous = current;
     clearTimeout(timeout$2);
-    timeout$2 = setTimeout(process$2, 500 /* Setting.LookAhead */, 21 /* Event.Selection */);
+    timeout$2 = setTimeout(process$3, 500 /* Setting.LookAhead */, 21 /* Event.Selection */);
 }
-function process$2(event) {
+function process$3(event) {
     schedule$1(encode$3.bind(this, event));
 }
-function reset$9() {
+function reset$c() {
     previous = null;
     data$a = { start: 0, startOffset: 0, end: 0, endOffset: 0 };
 }
-function stop$k() {
-    reset$9();
+function stop$n() {
+    reset$c();
     clearTimeout(timeout$2);
 }
 
-var state$1 = [];
-function start$l() {
-    reset$8();
+var state$4 = [];
+function start$o() {
+    reset$b();
 }
-function observe$4(root) {
+function observe$5(root) {
     bind(root, "submit", recompute$2, true);
 }
 function recompute$2(evt) {
-    state$1.push({ time: time(evt), event: 39 /* Event.Submit */, data: { target: target(evt) } });
+    state$4.push({ time: time(evt), event: 39 /* Event.Submit */, data: { target: target(evt) } });
     schedule$1(encode$3.bind(this, 39 /* Event.Submit */));
 }
-function reset$8() {
-    state$1 = [];
+function reset$b() {
+    state$4 = [];
 }
-function stop$j() {
-    reset$8();
+function stop$m() {
+    reset$b();
 }
 
 var data$9;
-function start$k() {
+function start$n() {
     bind(window, "pagehide", recompute$1);
 }
 function recompute$1(evt) {
@@ -2510,15 +2132,15 @@ function recompute$1(evt) {
     encode$3(26 /* Event.Unload */, time(evt));
     stop();
 }
-function reset$7() {
+function reset$a() {
     data$9 = null;
 }
-function stop$i() {
-    reset$7();
+function stop$l() {
+    reset$a();
 }
 
 var data$8;
-function start$j() {
+function start$m() {
     bind(document, "visibilitychange", recompute);
     recompute();
 }
@@ -2527,63 +2149,398 @@ function recompute(evt) {
     data$8 = { visible: "visibilityState" in document ? document.visibilityState : "default" };
     encode$3(28 /* Event.Visibility */, time(evt));
 }
-function reset$6() {
+function reset$9() {
     data$8 = null;
 }
-function stop$h() {
-    reset$6();
-}
-
-function start$i() {
-    start$g();
-    start$s();
-    start$r();
-    start$p();
-    start$q();
-    start$o();
-    start$j();
-    start$n();
-    start$m();
-    start$t();
-    start$l();
-    start$k();
+function stop$k() {
+    reset$9();
+}
+
+function start$l() {
+    start$g();
+    start$v();
+    start$u();
+    start$s();
+    start$t();
+    start$r();
+    start$m();
+    start$q();
+    start$p();
+    start$w();
+    start$o();
+    start$n();
+}
+function stop$j() {
+    stop$e();
+    stop$t();
+    stop$s();
+    stop$q();
+    stop$r();
+    stop$p();
+    stop$k();
+    stop$o();
+    stop$n();
+    stop$u();
+    stop$m();
+    stop$l();
+}
+function observe$4(root) {
+    observe$7(root);
+    // Only monitor following interactions if the root node is a document
+    // In case of shadow DOM, following events automatically bubble up to the parent document.
+    if (root.nodeType === Node.DOCUMENT_NODE) {
+        observe$b(root);
+        observe$a(root);
+        observe$8(root);
+        observe$9(root);
+        observe$6(root);
+        observe$c(root);
+        observe$5(root);
+    }
+}
+
+var interaction = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    observe: observe$4,
+    start: start$l,
+    stop: stop$j
+});
+
+function traverse (root, timer, source) {
+    return __awaiter(this, void 0, void 0, function () {
+        var queue, entry, next, state, subnode;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    queue = [root];
+                    _a.label = 1;
+                case 1:
+                    if (!(queue.length > 0)) return [3 /*break*/, 4];
+                    entry = queue.shift();
+                    next = entry.firstChild;
+                    while (next) {
+                        queue.push(next);
+                        next = next.nextSibling;
+                    }
+                    state = state$b(timer);
+                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, suspend$1(timer)];
+                case 2:
+                    state = _a.sent();
+                    _a.label = 3;
+                case 3:
+                    if (state === 2 /* Task.Stop */) {
+                        return [3 /*break*/, 4];
+                    }
+                    subnode = processNode(entry, source);
+                    if (subnode) {
+                        queue.push(subnode);
+                    }
+                    return [3 /*break*/, 1];
+                case 4: return [2 /*return*/];
+            }
+        });
+    });
+}
+
+var observers = [];
+var mutations = [];
+var insertRule = null;
+var deleteRule = null;
+var attachShadow = null;
+var queue$2 = [];
+var timeout$1 = null;
+var activePeriod = null;
+var history$4 = {};
+function start$k() {
+    observers = [];
+    queue$2 = [];
+    timeout$1 = null;
+    activePeriod = 0;
+    history$4 = {};
+    // Some popular open source libraries, like styled-components, optimize performance
+    // by injecting CSS using insertRule API vs. appending text node. A side effect of
+    // using javascript API is that it doesn't trigger DOM mutation and therefore we
+    // need to override the insertRule API and listen for changes manually.
+    if (insertRule === null) {
+        insertRule = CSSStyleSheet.prototype.insertRule;
+        CSSStyleSheet.prototype.insertRule = function () {
+            if (active()) {
+                schedule(this.ownerNode);
+            }
+            return insertRule.apply(this, arguments);
+        };
+    }
+    if (deleteRule === null) {
+        deleteRule = CSSStyleSheet.prototype.deleteRule;
+        CSSStyleSheet.prototype.deleteRule = function () {
+            if (active()) {
+                schedule(this.ownerNode);
+            }
+            return deleteRule.apply(this, arguments);
+        };
+    }
+    // Add a hook to attachShadow API calls
+    // In case we are unable to add a hook and browser throws an exception,
+    // reset attachShadow variable and resume processing like before
+    if (attachShadow === null) {
+        attachShadow = Element.prototype.attachShadow;
+        try {
+            Element.prototype.attachShadow = function () {
+                if (active()) {
+                    return schedule(attachShadow.apply(this, arguments));
+                }
+                else {
+                    return attachShadow.apply(this, arguments);
+                }
+            };
+        }
+        catch (_a) {
+            attachShadow = null;
+        }
+    }
+}
+function observe$3(node) {
+    // Create a new observer for every time a new DOM tree (e.g. root document or shadowdom root) is discovered on the page
+    // In the case of shadow dom, any mutations that happen within the shadow dom are not bubbled up to the host document
+    // For this reason, we need to wire up mutations every time we see a new shadow dom.
+    // Also, wrap it inside a try / catch. In certain browsers (e.g. legacy Edge), observer on shadow dom can throw errors
+    try {
+        var m = api("MutationObserver" /* Constant.MutationObserver */);
+        var observer = m in window ? new window[m](measure(handle$1)) : null;
+        if (observer) {
+            observer.observe(node, { attributes: true, childList: true, characterData: true, subtree: true });
+            observers.push(observer);
+        }
+    }
+    catch (e) {
+        log$1(2 /* Code.MutationObserver */, 0 /* Severity.Info */, e ? e.name : null);
+    }
+}
+function monitor(frame) {
+    // Bind to iframe's onload event so we get notified anytime there's an update to iframe content.
+    // This includes cases where iframe location is updated without explicitly updating src attribute
+    // E.g. iframe.contentWindow.location.href = "new-location";
+    if (has(frame) === false) {
+        bind(frame, "load" /* Constant.LoadEvent */, generate.bind(this, frame, "childList" /* Constant.ChildList */), true);
+    }
+}
+function stop$i() {
+    for (var _i = 0, observers_1 = observers; _i < observers_1.length; _i++) {
+        var observer = observers_1[_i];
+        if (observer) {
+            observer.disconnect();
+        }
+    }
+    observers = [];
+    history$4 = {};
+    mutations = [];
+    queue$2 = [];
+    activePeriod = 0;
+    timeout$1 = null;
+}
+function active$2() {
+    activePeriod = time() + 3000 /* Setting.MutationActivePeriod */;
+}
+function handle$1(m) {
+    // Queue up mutation records for asynchronous processing
+    var now = time();
+    track$7(6 /* Event.Mutation */, now);
+    mutations.push({ time: now, mutations: m });
+    schedule$1(process$2, 1 /* Priority.High */).then(function () {
+        setTimeout(compute$8);
+        measure(compute$6)();
+    });
+}
+function process$2() {
+    return __awaiter(this, void 0, void 0, function () {
+        var timer, record, instance, _i, _a, mutation, state, target, type, value;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    timer = { id: id(), cost: 3 /* Metric.LayoutCost */ };
+                    start$y(timer);
+                    _b.label = 1;
+                case 1:
+                    if (!(mutations.length > 0)) return [3 /*break*/, 8];
+                    record = mutations.shift();
+                    instance = time();
+                    _i = 0, _a = record.mutations;
+                    _b.label = 2;
+                case 2:
+                    if (!(_i < _a.length)) return [3 /*break*/, 6];
+                    mutation = _a[_i];
+                    state = state$b(timer);
+                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 4];
+                    return [4 /*yield*/, suspend$1(timer)];
+                case 3:
+                    state = _b.sent();
+                    _b.label = 4;
+                case 4:
+                    if (state === 2 /* Task.Stop */) {
+                        return [3 /*break*/, 6];
+                    }
+                    target = mutation.target;
+                    type = track$5(mutation, timer, instance);
+                    if (type && target && target.ownerDocument) {
+                        parse$1(target.ownerDocument);
+                    }
+                    if (type && target && target.nodeType == Node.DOCUMENT_FRAGMENT_NODE && target.host) {
+                        parse$1(target);
+                    }
+                    switch (type) {
+                        case "attributes" /* Constant.Attributes */:
+                            processNode(target, 3 /* Source.Attributes */);
+                            break;
+                        case "characterData" /* Constant.CharacterData */:
+                            processNode(target, 4 /* Source.CharacterData */);
+                            break;
+                        case "childList" /* Constant.ChildList */:
+                            processNodeList(mutation.addedNodes, 1 /* Source.ChildListAdd */, timer);
+                            processNodeList(mutation.removedNodes, 2 /* Source.ChildListRemove */, timer);
+                            break;
+                        case "suspend" /* Constant.Suspend */:
+                            value = get(target);
+                            if (value) {
+                                value.metadata.suspend = true;
+                            }
+                            break;
+                    }
+                    _b.label = 5;
+                case 5:
+                    _i++;
+                    return [3 /*break*/, 2];
+                case 6: return [4 /*yield*/, encode$4(6 /* Event.Mutation */, timer, record.time)];
+                case 7:
+                    _b.sent();
+                    return [3 /*break*/, 1];
+                case 8:
+                    stop$w(timer);
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function track$5(m, timer, instance) {
+    var value = m.target ? get(m.target.parentNode) : null;
+    // Check if the parent is already discovered and that the parent is not the document root
+    if (value && value.data.tag !== "HTML" /* Constant.HTML */) {
+        var inactive = time() > activePeriod;
+        var target = get(m.target);
+        var element = target && target.selector ? target.selector.join() : m.target.nodeName;
+        var parent_1 = value.selector ? value.selector.join() : "" /* Constant.Empty */;
+        // We use selector, instead of id, to determine the key (signature for the mutation) because in some cases
+        // repeated mutations can cause elements to be destroyed and then recreated as new DOM nodes
+        // In those cases, IDs will change however the selector (which is relative to DOM xPath) remains the same
+        var key = [parent_1, element, m.attributeName, names(m.addedNodes), names(m.removedNodes)].join();
+        // Initialize an entry if it doesn't already exist
+        history$4[key] = key in history$4 ? history$4[key] : [0, instance];
+        var h = history$4[key];
+        // Lookup any pending nodes queued up for removal, and process them now if we suspended a mutation before
+        if (inactive === false && h[0] >= 10 /* Setting.MutationSuspendThreshold */) {
+            processNodeList(h[2], 2 /* Source.ChildListRemove */, timer);
+        }
+        // Update the counter
+        h[0] = inactive ? (h[1] === instance ? h[0] : h[0] + 1) : 1;
+        h[1] = instance;
+        // Return updated mutation type based on if we have already hit the threshold or not
+        if (h[0] === 10 /* Setting.MutationSuspendThreshold */) {
+            // Store a reference to removedNodes so we can process them later
+            // when we resume mutations again on user interactions
+            h[2] = m.removedNodes;
+            return "suspend" /* Constant.Suspend */;
+        }
+        else if (h[0] > 10 /* Setting.MutationSuspendThreshold */) {
+            return "" /* Constant.Empty */;
+        }
+    }
+    return m.type;
+}
+function names(nodes) {
+    var output = [];
+    for (var i = 0; nodes && i < nodes.length; i++) {
+        output.push(nodes[i].nodeName);
+    }
+    return output.join();
+}
+function processNodeList(list, source, timer) {
+    return __awaiter(this, void 0, void 0, function () {
+        var length, i, state;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    length = list ? list.length : 0;
+                    i = 0;
+                    _a.label = 1;
+                case 1:
+                    if (!(i < length)) return [3 /*break*/, 6];
+                    if (!(source === 1 /* Source.ChildListAdd */)) return [3 /*break*/, 2];
+                    traverse(list[i], timer, source);
+                    return [3 /*break*/, 5];
+                case 2:
+                    state = state$b(timer);
+                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 4];
+                    return [4 /*yield*/, suspend$1(timer)];
+                case 3:
+                    state = _a.sent();
+                    _a.label = 4;
+                case 4:
+                    if (state === 2 /* Task.Stop */) {
+                        return [3 /*break*/, 6];
+                    }
+                    processNode(list[i], source);
+                    _a.label = 5;
+                case 5:
+                    i++;
+                    return [3 /*break*/, 1];
+                case 6: return [2 /*return*/];
+            }
+        });
+    });
 }
-function stop$g() {
-    stop$e();
-    stop$q();
-    stop$p();
-    stop$n();
-    stop$o();
-    stop$m();
-    stop$h();
-    stop$l();
-    stop$k();
-    stop$r();
-    stop$j();
-    stop$i();
+function schedule(node) {
+    // Only schedule manual trigger for this node if it's not already in the queue
+    if (queue$2.indexOf(node) < 0) {
+        queue$2.push(node);
+    }
+    // Cancel any previous trigger before scheduling a new one.
+    // It's common for a webpage to call multiple synchronous "insertRule" / "deleteRule" calls.
+    // And in those cases we do not wish to monitor changes multiple times for the same node.
+    if (timeout$1) {
+        clearTimeout(timeout$1);
+    }
+    timeout$1 = setTimeout(function () { trigger$2(); }, 33 /* Setting.LookAhead */);
+    return node;
 }
-function observe$3(root) {
-    observe$6(root);
-    // Only monitor following interactions if the root node is a document
-    // In case of shadow DOM, following events automatically bubble up to the parent document.
-    if (root.nodeType === Node.DOCUMENT_NODE) {
-        observe$a(root);
-        observe$9(root);
-        observe$7(root);
-        observe$8(root);
-        observe$5(root);
-        observe$b(root);
-        observe$4(root);
+function trigger$2() {
+    for (var _i = 0, queue_1 = queue$2; _i < queue_1.length; _i++) {
+        var node = queue_1[_i];
+        // Generate a mutation for this node only if it still exists
+        if (node) {
+            var shadowRoot = node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
+            // Skip re-processing shadowRoot if it was already discovered
+            if (shadowRoot && has(node)) {
+                continue;
+            }
+            generate(node, shadowRoot ? "childList" /* Constant.ChildList */ : "characterData" /* Constant.CharacterData */);
+        }
     }
+    queue$2 = [];
+}
+function generate(target, type) {
+    measure(handle$1)([{
+            addedNodes: [target],
+            attributeName: null,
+            attributeNamespace: null,
+            nextSibling: null,
+            oldValue: null,
+            previousSibling: null,
+            removedNodes: [],
+            target: target,
+            type: type
+        }]);
 }
 
-var interaction = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    observe: observe$3,
-    start: start$i,
-    stop: stop$g
-});
-
 var digitsRegex = /[^0-9\.]/g;
 /* JSON+LD (Linked Data) Recursive Parser */
 function ld(json) {
@@ -2684,6 +2641,7 @@ function processNode (node, source) {
             // later whenever there are new additions or modifications to DOM (mutations)
             if (node === document)
                 parse$1(document);
+            checkDocumentStyles(node);
             observe$2(node);
             break;
         case Node.DOCUMENT_FRAGMENT_NODE:
@@ -2698,11 +2656,6 @@ function processNode (node, source) {
                     // In future we may decide to proxy "attachShadow" call to gain access, but at the moment, we don't want to
                     // cause any unintended side effect to the page. We will re-evaluate after we gather more real world data on this.
                     var style = "" /* Constant.Empty */;
-                    var adoptedStyleSheets = "adoptedStyleSheets" in shadowRoot ? shadowRoot["adoptedStyleSheets"] : [];
-                    for (var _i = 0, adoptedStyleSheets_1 = adoptedStyleSheets; _i < adoptedStyleSheets_1.length; _i++) {
-                        var styleSheet = adoptedStyleSheets_1[_i];
-                        style += getCssRules(styleSheet);
-                    }
                     var fragmentData = { tag: "*S" /* Constant.ShadowDomTag */, attributes: { style: style } };
                     dom[call](node, shadowRoot.host, fragmentData, source);
                 }
@@ -2712,6 +2665,7 @@ function processNode (node, source) {
                     // the same way we observe real shadow DOM nodes (encapsulation provided by the browser).
                     dom[call](node, shadowRoot.host, { tag: "*P" /* Constant.PolyfillShadowDomTag */, attributes: {} }, source);
                 }
+                checkDocumentStyles(node);
             }
             break;
         case Node.TEXT_NODE:
@@ -2840,8 +2794,8 @@ function observe$2(root) {
     if (has(root)) {
         return;
     }
-    observe$1(root); // Observe mutations for this root node
-    observe$3(root); // Observe interactions for this root node
+    observe$3(root); // Observe mutations for this root node
+    observe$4(root); // Observe interactions for this root node
 }
 function getStyleValue(style) {
     // Call trim on the text content to ensure we do not process white spaces ( , \n, \r\n, \t, etc.)
@@ -2891,339 +2845,511 @@ function getAttributes(element) {
     return output;
 }
 
-function traverse (root, timer, source) {
-    return __awaiter(this, void 0, void 0, function () {
-        var queue, entry, next, state, subnode;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    queue = [root];
-                    _a.label = 1;
-                case 1:
-                    if (!(queue.length > 0)) return [3 /*break*/, 4];
-                    entry = queue.shift();
-                    next = entry.firstChild;
-                    while (next) {
-                        queue.push(next);
-                        next = next.nextSibling;
-                    }
-                    state = state$a(timer);
-                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 3];
-                    return [4 /*yield*/, suspend$1(timer)];
-                case 2:
-                    state = _a.sent();
-                    _a.label = 3;
-                case 3:
-                    if (state === 2 /* Task.Stop */) {
-                        return [3 /*break*/, 4];
-                    }
-                    subnode = processNode(entry, source);
-                    if (subnode) {
-                        queue.push(subnode);
-                    }
-                    return [3 /*break*/, 1];
-                case 4: return [2 /*return*/];
-            }
-        });
-    });
-}
-
-var observers = [];
-var mutations = [];
-var insertRule = null;
-var deleteRule = null;
-var attachShadow = null;
-var queue$1 = [];
-var timeout$1 = null;
-var activePeriod = null;
-var history$4 = {};
-function start$h() {
-    observers = [];
-    queue$1 = [];
-    timeout$1 = null;
-    activePeriod = 0;
-    history$4 = {};
-    // Some popular open source libraries, like styled-components, optimize performance
-    // by injecting CSS using insertRule API vs. appending text node. A side effect of
-    // using javascript API is that it doesn't trigger DOM mutation and therefore we
-    // need to override the insertRule API and listen for changes manually.
-    if (insertRule === null) {
-        insertRule = CSSStyleSheet.prototype.insertRule;
-        CSSStyleSheet.prototype.insertRule = function () {
+var state$3 = [];
+var replace = null;
+var replaceSync = null;
+var styleSheetId = 'claritySheetId';
+var styleSheetMap = {};
+function start$j() {
+    reset$8();
+    if (replace === null) {
+        replace = CSSStyleSheet.prototype.replace;
+        CSSStyleSheet.prototype.replace = function () {
             if (active()) {
-                schedule(this.ownerNode);
+                if (!this[styleSheetId]) {
+                    this[styleSheetId] = shortid();
+                    // need to pass a create style sheet event (don't add it to any nodes, but do create it)
+                    trackStyleChange(time(), this[styleSheetId], 0 /* StyleSheetOperation.Create */);
+                }
+                trackStyleChange(time(), this[styleSheetId], 1 /* StyleSheetOperation.Replace */, arguments[0]);
             }
-            return insertRule.apply(this, arguments);
+            return replace.apply(this, arguments);
         };
     }
-    if (deleteRule === null) {
-        deleteRule = CSSStyleSheet.prototype.deleteRule;
-        CSSStyleSheet.prototype.deleteRule = function () {
+    if (replaceSync === null) {
+        replaceSync = CSSStyleSheet.prototype.replaceSync;
+        CSSStyleSheet.prototype.replaceSync = function () {
             if (active()) {
-                schedule(this.ownerNode);
+                if (!this[styleSheetId]) {
+                    this[styleSheetId] = shortid();
+                    // need to pass a create style sheet event (don't add it to any nodes, but do create it)
+                    trackStyleChange(time(), this[styleSheetId], 0 /* StyleSheetOperation.Create */);
+                }
+                trackStyleChange(time(), this[styleSheetId], 2 /* StyleSheetOperation.ReplaceSync */, arguments[0]);
             }
-            return deleteRule.apply(this, arguments);
+            return replaceSync.apply(this, arguments);
         };
     }
-    // Add a hook to attachShadow API calls
-    // In case we are unable to add a hook and browser throws an exception,
-    // reset attachShadow variable and resume processing like before
-    if (attachShadow === null) {
-        attachShadow = Element.prototype.attachShadow;
-        try {
-            Element.prototype.attachShadow = function () {
-                if (active()) {
-                    return schedule(attachShadow.apply(this, arguments));
-                }
-                else {
-                    return attachShadow.apply(this, arguments);
-                }
-            };
-        }
-        catch (_a) {
-            attachShadow = null;
+}
+function checkDocumentStyles(documentNode) {
+    if (!(documentNode === null || documentNode === void 0 ? void 0 : documentNode.adoptedStyleSheets)) {
+        // if we don't have adoptedStyledSheets on the Node passed to us, we can short circuit.
+        return;
+    }
+    var currentStyleSheets = [];
+    for (var _i = 0, _a = documentNode.adoptedStyleSheets; _i < _a.length; _i++) {
+        var styleSheet = _a[_i];
+        // if we haven't seen this style sheet, create it and pass a replaceSync with its contents
+        if (!styleSheet[styleSheetId]) {
+            styleSheet[styleSheetId] = shortid();
+            trackStyleChange(time(), styleSheet[styleSheetId], 0 /* StyleSheetOperation.Create */);
+            trackStyleChange(time(), styleSheet[styleSheetId], 2 /* StyleSheetOperation.ReplaceSync */, getCssRules(styleSheet));
         }
+        currentStyleSheets.push(styleSheet[styleSheetId]);
+    }
+    var documentId = getId(documentNode, true);
+    if (!styleSheetMap[documentId]) {
+        styleSheetMap[documentId] = [];
+    }
+    if (!arraysEqual(currentStyleSheets, styleSheetMap[documentId])) {
+        // Using -1 to signify the root document node as we don't track that as part of our nodeMap
+        trackStyleAdoption(time(), documentNode == document ? -1 : getId(documentNode), 3 /* StyleSheetOperation.SetAdoptedStyles */, currentStyleSheets);
+        styleSheetMap[documentId] = currentStyleSheets;
     }
 }
-function observe$1(node) {
-    // Create a new observer for every time a new DOM tree (e.g. root document or shadowdom root) is discovered on the page
-    // In the case of shadow dom, any mutations that happen within the shadow dom are not bubbled up to the host document
-    // For this reason, we need to wire up mutations every time we see a new shadow dom.
-    // Also, wrap it inside a try / catch. In certain browsers (e.g. legacy Edge), observer on shadow dom can throw errors
-    try {
-        var m = api("MutationObserver" /* Constant.MutationObserver */);
-        var observer = m in window ? new window[m](measure(handle$1)) : null;
-        if (observer) {
-            observer.observe(node, { attributes: true, childList: true, characterData: true, subtree: true });
-            observers.push(observer);
+function compute$7() {
+    checkDocumentStyles(document);
+    Object.keys(styleSheetMap).forEach(function (x) { return checkDocumentStyles(getNode(parseInt(x, 10))); });
+}
+function reset$8() {
+    state$3 = [];
+}
+function stop$h() {
+    styleSheetMap = {};
+    reset$8();
+}
+function trackStyleChange(time, id, operation, cssRules) {
+    state$3.push({
+        time: time,
+        event: 46 /* Event.StyleSheetUpdate */,
+        data: {
+            id: id,
+            operation: operation,
+            cssRules: cssRules
+        }
+    });
+    encode$4(46 /* Event.StyleSheetUpdate */);
+}
+function trackStyleAdoption(time, id, operation, newIds) {
+    state$3.push({
+        time: time,
+        event: 45 /* Event.StyleSheetAdoption */,
+        data: {
+            id: id,
+            operation: operation,
+            newIds: newIds
         }
+    });
+    encode$4(45 /* Event.StyleSheetAdoption */);
+}
+function arraysEqual(a, b) {
+    if (a.length !== b.length) {
+        return false;
     }
-    catch (e) {
-        log$1(2 /* Code.MutationObserver */, 0 /* Severity.Info */, e ? e.name : null);
+    return a.every(function (value, index) { return value === b[index]; });
+}
+
+var state$2 = [];
+var animationPlay = null;
+var animationPause = null;
+var animationCancel = null;
+var animationFinish = null;
+var animationId = 'clarityAnimationId';
+var operationCount = 'clarityOperationCount';
+var maxOperations = 20;
+function start$i() {
+    if (window["Animation"] &&
+        window["KeyframeEffect"] &&
+        window["KeyframeEffect"].prototype.getKeyframes &&
+        window["KeyframeEffect"].prototype.getTiming) {
+        reset$7();
+        overrideAnimationHelper(animationPlay, "play");
+        overrideAnimationHelper(animationPause, "pause");
+        overrideAnimationHelper(animationCancel, "cancel");
+        overrideAnimationHelper(animationFinish, "finish");
     }
 }
-function monitor(frame) {
-    // Bind to iframe's onload event so we get notified anytime there's an update to iframe content.
-    // This includes cases where iframe location is updated without explicitly updating src attribute
-    // E.g. iframe.contentWindow.location.href = "new-location";
-    if (has(frame) === false) {
-        bind(frame, "load" /* Constant.LoadEvent */, generate.bind(this, frame, "childList" /* Constant.ChildList */), true);
-    }
+function reset$7() {
+    state$2 = [];
 }
-function stop$f() {
-    for (var _i = 0, observers_1 = observers; _i < observers_1.length; _i++) {
-        var observer = observers_1[_i];
-        if (observer) {
-            observer.disconnect();
+function track$4(time, id, operation, keyFrames, timing, targetId, timeline) {
+    state$2.push({
+        time: time,
+        event: 44 /* Event.Animation */,
+        data: {
+            id: id,
+            operation: operation,
+            keyFrames: keyFrames,
+            timing: timing,
+            targetId: targetId,
+            timeline: timeline
         }
-    }
-    observers = [];
-    history$4 = {};
-    mutations = [];
-    queue$1 = [];
-    activePeriod = 0;
-    timeout$1 = null;
-}
-function active$2() {
-    activePeriod = time() + 3000 /* Setting.MutationActivePeriod */;
-}
-function handle$1(m) {
-    // Queue up mutation records for asynchronous processing
-    var now = time();
-    track$7(6 /* Event.Mutation */, now);
-    mutations.push({ time: now, mutations: m });
-    schedule$1(process$1, 1 /* Priority.High */).then(function () {
-        setTimeout(compute$7);
-        measure(compute$6)();
     });
+    encode$4(44 /* Event.Animation */);
+}
+function stop$g() {
+    reset$7();
 }
-function process$1() {
+function overrideAnimationHelper(functionToOverride, name) {
+    if (functionToOverride === null) {
+        functionToOverride = Animation.prototype[name];
+        Animation.prototype[name] = function () {
+            if (active()) {
+                var effect = this.effect;
+                var target = getId(this.effect.target);
+                if (target !== null && effect.getKeyframes && effect.getTiming) {
+                    if (!this[animationId]) {
+                        this[animationId] = shortid();
+                        this[operationCount] = 0;
+                        var keyframes = effect.getKeyframes();
+                        var timing = effect.getTiming();
+                        track$4(time(), this[animationId], 0 /* AnimationOperation.Create */, JSON.stringify(keyframes), JSON.stringify(timing), target);
+                    }
+                    if (this[operationCount]++ < maxOperations) {
+                        var operation = null;
+                        switch (name) {
+                            case "play":
+                                operation = 1 /* AnimationOperation.Play */;
+                                break;
+                            case "pause":
+                                operation = 2 /* AnimationOperation.Pause */;
+                                break;
+                            case "cancel":
+                                operation = 3 /* AnimationOperation.Cancel */;
+                                break;
+                            case "finish":
+                                operation = 4 /* AnimationOperation.Finish */;
+                                break;
+                        }
+                        if (operation) {
+                            track$4(time(), this[animationId], operation);
+                        }
+                    }
+                }
+            }
+            return functionToOverride.apply(this, arguments);
+        };
+    }
+}
+
+function encode$4 (type, timer, ts) {
+    if (timer === void 0) { timer = null; }
+    if (ts === void 0) { ts = null; }
     return __awaiter(this, void 0, void 0, function () {
-        var timer, record, instance, _i, _a, mutation, state, target, type, value;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var eventTime, tokens, _a, d, _i, _b, r, _c, _d, entry, _e, _f, entry, _g, _h, entry, values, _j, values_1, value, state, data, active, suspend, privacy, mangle, keys, _k, keys_1, key, box, factor, attr;
+        return __generator(this, function (_l) {
+            switch (_l.label) {
                 case 0:
-                    timer = { id: id(), cost: 3 /* Metric.LayoutCost */ };
-                    start$x(timer);
-                    _b.label = 1;
+                    eventTime = ts || time();
+                    tokens = [eventTime, type];
+                    _a = type;
+                    switch (_a) {
+                        case 8 /* Event.Document */: return [3 /*break*/, 1];
+                        case 7 /* Event.Region */: return [3 /*break*/, 2];
+                        case 45 /* Event.StyleSheetAdoption */: return [3 /*break*/, 3];
+                        case 46 /* Event.StyleSheetUpdate */: return [3 /*break*/, 4];
+                        case 44 /* Event.Animation */: return [3 /*break*/, 5];
+                        case 5 /* Event.Discover */: return [3 /*break*/, 6];
+                        case 6 /* Event.Mutation */: return [3 /*break*/, 6];
+                    }
+                    return [3 /*break*/, 13];
                 case 1:
-                    if (!(mutations.length > 0)) return [3 /*break*/, 8];
-                    record = mutations.shift();
-                    instance = time();
-                    _i = 0, _a = record.mutations;
-                    _b.label = 2;
+                    d = data$c;
+                    tokens.push(d.width);
+                    tokens.push(d.height);
+                    track$8(type, d.width, d.height);
+                    queue(tokens);
+                    return [3 /*break*/, 13];
                 case 2:
-                    if (!(_i < _a.length)) return [3 /*break*/, 6];
-                    mutation = _a[_i];
-                    state = state$a(timer);
-                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 4];
-                    return [4 /*yield*/, suspend$1(timer)];
+                    for (_i = 0, _b = state$1; _i < _b.length; _i++) {
+                        r = _b[_i];
+                        tokens = [r.time, 7 /* Event.Region */];
+                        tokens.push(r.data.id);
+                        tokens.push(r.data.interaction);
+                        tokens.push(r.data.visibility);
+                        tokens.push(r.data.name);
+                        queue(tokens);
+                    }
+                    reset$6();
+                    return [3 /*break*/, 13];
                 case 3:
-                    state = _b.sent();
-                    _b.label = 4;
-                case 4:
-                    if (state === 2 /* Task.Stop */) {
-                        return [3 /*break*/, 6];
+                    for (_c = 0, _d = state$3; _c < _d.length; _c++) {
+                        entry = _d[_c];
+                        tokens = [entry.time, entry.event];
+                        tokens.push(entry.data.id);
+                        tokens.push(entry.data.operation);
+                        tokens.push(entry.data.newIds);
+                        queue(tokens);
                     }
-                    target = mutation.target;
-                    type = track$3(mutation, timer, instance);
-                    if (type && target && target.ownerDocument) {
-                        parse$1(target.ownerDocument);
+                    reset$8();
+                    return [3 /*break*/, 13];
+                case 4:
+                    for (_e = 0, _f = state$3; _e < _f.length; _e++) {
+                        entry = _f[_e];
+                        tokens = [entry.time, entry.event];
+                        tokens.push(entry.data.id);
+                        tokens.push(entry.data.operation);
+                        tokens.push(entry.data.cssRules);
+                        queue(tokens);
                     }
-                    if (type && target && target.nodeType == Node.DOCUMENT_FRAGMENT_NODE && target.host) {
-                        parse$1(target);
+                    reset$8();
+                    _l.label = 5;
+                case 5:
+                    for (_g = 0, _h = state$2; _g < _h.length; _g++) {
+                        entry = _h[_g];
+                        tokens = [entry.time, entry.event];
+                        tokens.push(entry.data.id);
+                        tokens.push(entry.data.operation);
+                        tokens.push(entry.data.keyFrames);
+                        tokens.push(entry.data.timing);
+                        tokens.push(entry.data.timeline);
+                        tokens.push(entry.data.targetId);
+                        queue(tokens);
                     }
-                    switch (type) {
-                        case "attributes" /* Constant.Attributes */:
-                            processNode(target, 3 /* Source.Attributes */);
-                            break;
-                        case "characterData" /* Constant.CharacterData */:
-                            processNode(target, 4 /* Source.CharacterData */);
-                            break;
-                        case "childList" /* Constant.ChildList */:
-                            processNodeList(mutation.addedNodes, 1 /* Source.ChildListAdd */, timer);
-                            processNodeList(mutation.removedNodes, 2 /* Source.ChildListRemove */, timer);
-                            break;
-                        case "suspend" /* Constant.Suspend */:
-                            value = get(target);
-                            if (value) {
-                                value.metadata.suspend = true;
-                            }
-                            break;
+                    reset$7();
+                    return [3 /*break*/, 13];
+                case 6:
+                    // Check if we are operating within the context of the current page
+                    if (state$b(timer) === 2 /* Task.Stop */) {
+                        return [3 /*break*/, 13];
                     }
-                    _b.label = 5;
-                case 5:
-                    _i++;
-                    return [3 /*break*/, 2];
-                case 6: return [4 /*yield*/, encode$4(6 /* Event.Mutation */, timer, record.time)];
+                    values = updates$2();
+                    if (!(values.length > 0)) return [3 /*break*/, 12];
+                    _j = 0, values_1 = values;
+                    _l.label = 7;
                 case 7:
-                    _b.sent();
-                    return [3 /*break*/, 1];
+                    if (!(_j < values_1.length)) return [3 /*break*/, 11];
+                    value = values_1[_j];
+                    state = state$b(timer);
+                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 9];
+                    return [4 /*yield*/, suspend$1(timer)];
                 case 8:
-                    stop$v(timer);
-                    return [2 /*return*/];
+                    state = _l.sent();
+                    _l.label = 9;
+                case 9:
+                    if (state === 2 /* Task.Stop */) {
+                        return [3 /*break*/, 11];
+                    }
+                    data = value.data;
+                    active = value.metadata.active;
+                    suspend = value.metadata.suspend;
+                    privacy = value.metadata.privacy;
+                    mangle = shouldMangle(value);
+                    keys = active ? ["tag", "attributes", "value"] : ["tag"];
+                    for (_k = 0, keys_1 = keys; _k < keys_1.length; _k++) {
+                        key = keys_1[_k];
+                        if (data[key]) {
+                            switch (key) {
+                                case "tag":
+                                    box = size(value);
+                                    factor = mangle ? -1 : 1;
+                                    tokens.push(value.id * factor);
+                                    if (value.parent && active) {
+                                        tokens.push(value.parent);
+                                    }
+                                    if (value.previous && active) {
+                                        tokens.push(value.previous);
+                                    }
+                                    tokens.push(suspend ? "*M" /* Constant.SuspendMutationTag */ : data[key]);
+                                    if (box && box.length === 2) {
+                                        tokens.push("".concat("#" /* Constant.Hash */).concat(str$1(box[0]), ".").concat(str$1(box[1])));
+                                    }
+                                    break;
+                                case "attributes":
+                                    for (attr in data[key]) {
+                                        if (data[key][attr] !== undefined) {
+                                            tokens.push(attribute(attr, data[key][attr], privacy));
+                                        }
+                                    }
+                                    break;
+                                case "value":
+                                    check$4(value.metadata.fraud, value.id, data[key]);
+                                    tokens.push(text$1(data[key], data.tag, privacy, mangle));
+                                    break;
+                            }
+                        }
+                    }
+                    _l.label = 10;
+                case 10:
+                    _j++;
+                    return [3 /*break*/, 7];
+                case 11:
+                    if (type === 6 /* Event.Mutation */) {
+                        activity(eventTime);
+                    }
+                    queue(tokenize(tokens), !config$1.lean);
+                    _l.label = 12;
+                case 12: return [3 /*break*/, 13];
+                case 13: return [2 /*return*/];
             }
         });
     });
 }
-function track$3(m, timer, instance) {
-    var value = m.target ? get(m.target.parentNode) : null;
-    // Check if the parent is already discovered and that the parent is not the document root
-    if (value && value.data.tag !== "HTML" /* Constant.HTML */) {
-        var inactive = time() > activePeriod;
-        var target = get(m.target);
-        var element = target && target.selector ? target.selector.join() : m.target.nodeName;
-        var parent_1 = value.selector ? value.selector.join() : "" /* Constant.Empty */;
-        // We use selector, instead of id, to determine the key (signature for the mutation) because in some cases
-        // repeated mutations can cause elements to be destroyed and then recreated as new DOM nodes
-        // In those cases, IDs will change however the selector (which is relative to DOM xPath) remains the same
-        var key = [parent_1, element, m.attributeName, names(m.addedNodes), names(m.removedNodes)].join();
-        // Initialize an entry if it doesn't already exist
-        history$4[key] = key in history$4 ? history$4[key] : [0, instance];
-        var h = history$4[key];
-        // Lookup any pending nodes queued up for removal, and process them now if we suspended a mutation before
-        if (inactive === false && h[0] >= 10 /* Setting.MutationSuspendThreshold */) {
-            processNodeList(h[2], 2 /* Source.ChildListRemove */, timer);
-        }
-        // Update the counter
-        h[0] = inactive ? (h[1] === instance ? h[0] : h[0] + 1) : 1;
-        h[1] = instance;
-        // Return updated mutation type based on if we have already hit the threshold or not
-        if (h[0] === 10 /* Setting.MutationSuspendThreshold */) {
-            // Store a reference to removedNodes so we can process them later
-            // when we resume mutations again on user interactions
-            h[2] = m.removedNodes;
-            return "suspend" /* Constant.Suspend */;
+function shouldMangle(value) {
+    var privacy = value.metadata.privacy;
+    return value.data.tag === "*T" /* Constant.TextTag */ && !(privacy === 0 /* Privacy.None */ || privacy === 1 /* Privacy.Sensitive */);
+}
+function size(value) {
+    if (value.metadata.size !== null && value.metadata.size.length === 0) {
+        var img = getNode(value.id);
+        if (img) {
+            return [Math.floor(img.offsetWidth * 100 /* Setting.BoxPrecision */), Math.floor(img.offsetHeight * 100 /* Setting.BoxPrecision */)];
         }
-        else if (h[0] > 10 /* Setting.MutationSuspendThreshold */) {
-            return "" /* Constant.Empty */;
+    }
+    return value.metadata.size;
+}
+function str$1(input) {
+    return input.toString(36);
+}
+function attribute(key, value, privacy) {
+    return "".concat(key, "=").concat(text$1(value, key.indexOf("data-" /* Constant.DataAttribute */) === 0 ? "data-" /* Constant.DataAttribute */ : key, privacy));
+}
+
+var state$1 = [];
+var regionMap = null; // Maps region nodes => region name
+var regions = {};
+var queue$1 = [];
+var watch = false;
+var observer$1 = null;
+function start$h() {
+    reset$6();
+    observer$1 = null;
+    regionMap = new WeakMap();
+    regions = {};
+    queue$1 = [];
+    watch = window["IntersectionObserver"] ? true : false;
+}
+function observe$1(node, name) {
+    if (regionMap.has(node) === false) {
+        regionMap.set(node, name);
+        observer$1 = observer$1 === null && watch ? new IntersectionObserver(handler$1, {
+            // Get notified as intersection continues to change
+            // This allows us to process regions that get partially hidden during the lifetime of the page
+            // See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
+            // By default, intersection observers only fire an event when even a single pixel is visible and not thereafter.
+            threshold: [0, 0.2, 0.4, 0.6, 0.8, 1]
+        }) : observer$1;
+        if (observer$1 && node && node.nodeType === Node.ELEMENT_NODE) {
+            observer$1.observe(node);
         }
     }
-    return m.type;
 }
-function names(nodes) {
-    var output = [];
-    for (var i = 0; nodes && i < nodes.length; i++) {
-        output.push(nodes[i].nodeName);
+function exists(node) {
+    // Check if regionMap is not null before looking up a node
+    // Since, dom module stops after region module, it's possible that we may set regionMap to be null
+    // and still attempt to call exists on a late coming DOM mutation (or addition), effectively causing a script error
+    return regionMap && regionMap.has(node);
+}
+function track$3(id, event) {
+    var node = getNode(id);
+    var data = id in regions ? regions[id] : { id: id, visibility: 0 /* RegionVisibility.Rendered */, interaction: 16 /* InteractionState.None */, name: regionMap.get(node) };
+    // Determine the interaction state based on incoming event
+    var interaction = 16 /* InteractionState.None */;
+    switch (event) {
+        case 9 /* Event.Click */:
+            interaction = 20 /* InteractionState.Clicked */;
+            break;
+        case 27 /* Event.Input */:
+            interaction = 30 /* InteractionState.Input */;
+            break;
     }
-    return output.join();
+    // Process updates to this region, if applicable
+    process$1(node, data, interaction, data.visibility);
 }
-function processNodeList(list, source, timer) {
-    return __awaiter(this, void 0, void 0, function () {
-        var length, i, state;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    length = list ? list.length : 0;
-                    i = 0;
-                    _a.label = 1;
-                case 1:
-                    if (!(i < length)) return [3 /*break*/, 6];
-                    if (!(source === 1 /* Source.ChildListAdd */)) return [3 /*break*/, 2];
-                    traverse(list[i], timer, source);
-                    return [3 /*break*/, 5];
-                case 2:
-                    state = state$a(timer);
-                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 4];
-                    return [4 /*yield*/, suspend$1(timer)];
-                case 3:
-                    state = _a.sent();
-                    _a.label = 4;
-                case 4:
-                    if (state === 2 /* Task.Stop */) {
-                        return [3 /*break*/, 6];
-                    }
-                    processNode(list[i], source);
-                    _a.label = 5;
-                case 5:
-                    i++;
-                    return [3 /*break*/, 1];
-                case 6: return [2 /*return*/];
+function compute$6() {
+    // Process any regions where we couldn't resolve an "id" for at the time of last intersection observer event
+    // This could happen in cases where elements are not yet processed by Clarity's virtual DOM but browser reports a change, regardless.
+    // For those cases we add them to the queue and re-process them below
+    var q = [];
+    for (var _i = 0, queue_1 = queue$1; _i < queue_1.length; _i++) {
+        var r = queue_1[_i];
+        var id = getId(r.node);
+        if (!(id in regions)) {
+            if (id) {
+                r.data.id = id;
+                regions[id] = r.data;
+                state$1.push(clone$1(r.data));
             }
-        });
-    });
-}
-function schedule(node) {
-    // Only schedule manual trigger for this node if it's not already in the queue
-    if (queue$1.indexOf(node) < 0) {
-        queue$1.push(node);
+            else {
+                q.push(r);
+            }
+        }
     }
-    // Cancel any previous trigger before scheduling a new one.
-    // It's common for a webpage to call multiple synchronous "insertRule" / "deleteRule" calls.
-    // And in those cases we do not wish to monitor changes multiple times for the same node.
-    if (timeout$1) {
-        clearTimeout(timeout$1);
+    queue$1 = q;
+    // Schedule encode only when we have at least one valid data entry
+    if (state$1.length > 0) {
+        encode$4(7 /* Event.Region */);
     }
-    timeout$1 = setTimeout(function () { trigger$2(); }, 33 /* Setting.LookAhead */);
-    return node;
 }
-function trigger$2() {
-    for (var _i = 0, queue_1 = queue$1; _i < queue_1.length; _i++) {
-        var node = queue_1[_i];
-        // Generate a mutation for this node only if it still exists
-        if (node) {
-            var shadowRoot = node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
-            // Skip re-processing shadowRoot if it was already discovered
-            if (shadowRoot && has(node)) {
-                continue;
+function handler$1(entries) {
+    for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+        var entry = entries_1[_i];
+        var target = entry.target;
+        var rect = entry.boundingClientRect;
+        var overlap = entry.intersectionRect;
+        var viewport = entry.rootBounds;
+        // Only capture regions that have non-zero width or height to avoid tracking and sending regions
+        // that cannot ever be seen by the user. In some cases, websites will have a multiple copy of the same region
+        // like search box - one for desktop, and another for mobile. In those cases, CSS media queries determine which one should be visible.
+        // Also, if these regions ever become non-zero width or height (through AJAX, user action or orientation change) - we will automatically start monitoring them from that point onwards
+        if (regionMap.has(target) && rect.width + rect.height > 0 && viewport.width > 0 && viewport.height > 0) {
+            var id = target ? getId(target) : null;
+            var data = id in regions ? regions[id] : { id: id, name: regionMap.get(target), interaction: 16 /* InteractionState.None */, visibility: 0 /* RegionVisibility.Rendered */ };
+            // For regions that have relatively smaller area, we look at intersection ratio and see the overlap relative to element's area
+            // However, for larger regions, area of regions could be bigger than viewport and therefore comparison is relative to visible area
+            var viewportRatio = overlap ? (overlap.width * overlap.height * 1.0) / (viewport.width * viewport.height) : 0;
+            var visible = viewportRatio > 0.05 /* Setting.ViewportIntersectionRatio */ || entry.intersectionRatio > 0.8 /* Setting.IntersectionRatio */;
+            // If an element is either visible or was visible and has been scrolled to the end
+            // i.e. Scrolled to end is determined by if the starting position of the element + the window height is more than the total element height. 
+            // starting position is relative to the viewport - so Intersection observer returns a negative value for rect.top to indicate that the element top is above the viewport
+            var scrolledToEnd = (visible || data.visibility == 10 /* RegionVisibility.Visible */) && Math.abs(rect.top) + viewport.height > rect.height;
+            // Process updates to this region, if applicable
+            process$1(target, data, data.interaction, (scrolledToEnd ?
+                13 /* RegionVisibility.ScrolledToEnd */ :
+                (visible ? 10 /* RegionVisibility.Visible */ : 0 /* RegionVisibility.Rendered */)));
+            // Stop observing this element now that we have already received scrolled signal
+            if (data.visibility >= 13 /* RegionVisibility.ScrolledToEnd */ && observer$1) {
+                observer$1.unobserve(target);
             }
-            generate(node, shadowRoot ? "childList" /* Constant.ChildList */ : "characterData" /* Constant.CharacterData */);
         }
     }
-    queue$1 = [];
+    if (state$1.length > 0) {
+        encode$4(7 /* Event.Region */);
+    }
 }
-function generate(target, type) {
-    measure(handle$1)([{
-            addedNodes: [target],
-            attributeName: null,
-            attributeNamespace: null,
-            nextSibling: null,
-            oldValue: null,
-            previousSibling: null,
-            removedNodes: [],
-            target: target,
-            type: type
-        }]);
+function process$1(n, d, s, v) {
+    // Check if received a state that supersedes existing state
+    var updated = s > d.interaction || v > d.visibility;
+    d.interaction = s > d.interaction ? s : d.interaction;
+    d.visibility = v > d.visibility ? v : d.visibility;
+    // If the corresponding node is already discovered, update the internal state
+    // Otherwise, track it in a queue to reprocess later.
+    if (d.id) {
+        if ((d.id in regions && updated) || !(d.id in regions)) {
+            regions[d.id] = d;
+            state$1.push(clone$1(d));
+        }
+    }
+    else {
+        queue$1.push({ node: n, data: d });
+    }
+}
+function clone$1(r) {
+    return { time: time(), data: { id: r.id, interaction: r.interaction, visibility: r.visibility, name: r.name } };
+}
+function reset$6() {
+    state$1 = [];
+}
+function stop$f() {
+    reset$6();
+    regionMap = null;
+    regions = {};
+    queue$1 = [];
+    if (observer$1) {
+        observer$1.disconnect();
+        observer$1 = null;
+    }
+    watch = false;
 }
 
 function target(evt) {
@@ -3244,7 +3370,7 @@ function metadata$2(node, event, text) {
             output.hash = value.hash;
             output.privacy = metadata_1.privacy;
             if (value.region) {
-                track$4(value.region, event);
+                track$3(value.region, event);
             }
             if (metadata_1.fraud) {
                 check$4(metadata_1.fraud, value.id, text || value.data.value);
@@ -3271,7 +3397,7 @@ function encode$3 (type, ts) {
                 case 18 /* Event.TouchEnd */:
                 case 19 /* Event.TouchMove */:
                 case 20 /* Event.TouchCancel */:
-                    for (_i = 0, _a = state$3; _i < _a.length; _i++) {
+                    for (_i = 0, _a = state$6; _i < _a.length; _i++) {
                         entry = _a[_i];
                         pTarget = metadata$2(entry.data.target, entry.event);
                         if (pTarget.id > 0) {
@@ -3283,10 +3409,10 @@ function encode$3 (type, ts) {
                             track$8(entry.event, entry.data.x, entry.data.y);
                         }
                     }
-                    reset$c();
+                    reset$f();
                     break;
                 case 9 /* Event.Click */:
-                    for (_b = 0, _c = state$6; _b < _c.length; _b++) {
+                    for (_b = 0, _c = state$9; _b < _c.length; _b++) {
                         entry = _c[_b];
                         cTarget = metadata$2(entry.data.target, entry.event, entry.data.text);
                         tokens = [entry.time, entry.event];
@@ -3306,10 +3432,10 @@ function encode$3 (type, ts) {
                         queue(tokens);
                         track$2(entry.time, entry.event, cHash, entry.data.x, entry.data.y, entry.data.reaction, entry.data.context);
                     }
-                    reset$f();
+                    reset$i();
                     break;
                 case 38 /* Event.Clipboard */:
-                    for (_d = 0, _e = state$5; _d < _e.length; _d++) {
+                    for (_d = 0, _e = state$8; _d < _e.length; _d++) {
                         entry = _e[_d];
                         tokens = [entry.time, entry.event];
                         target = metadata$2(entry.data.target, entry.event);
@@ -3319,24 +3445,24 @@ function encode$3 (type, ts) {
                             queue(tokens);
                         }
                     }
-                    reset$e();
+                    reset$h();
                     break;
                 case 11 /* Event.Resize */:
                     r = data$b;
                     tokens.push(r.width);
                     tokens.push(r.height);
                     track$8(type, r.width, r.height);
-                    reset$b();
+                    reset$e();
                     queue(tokens);
                     break;
                 case 26 /* Event.Unload */:
                     u = data$9;
                     tokens.push(u.name);
-                    reset$7();
+                    reset$a();
                     queue(tokens);
                     break;
                 case 27 /* Event.Input */:
-                    for (_f = 0, _g = state$4; _f < _g.length; _f++) {
+                    for (_f = 0, _g = state$7; _f < _g.length; _f++) {
                         entry = _g[_f];
                         iTarget = metadata$2(entry.data.target, entry.event, entry.data.value);
                         tokens = [entry.time, entry.event];
@@ -3344,7 +3470,7 @@ function encode$3 (type, ts) {
                         tokens.push(text$1(entry.data.value, "input", iTarget.privacy));
                         queue(tokens);
                     }
-                    reset$d();
+                    reset$g();
                     break;
                 case 21 /* Event.Selection */:
                     s = data$a;
@@ -3355,12 +3481,12 @@ function encode$3 (type, ts) {
                         tokens.push(s.startOffset);
                         tokens.push(endTarget.id);
                         tokens.push(s.endOffset);
-                        reset$9();
+                        reset$c();
                         queue(tokens);
                     }
                     break;
                 case 10 /* Event.Scroll */:
-                    for (_h = 0, _j = state$2; _h < _j.length; _h++) {
+                    for (_h = 0, _j = state$5; _h < _j.length; _h++) {
                         entry = _j[_h];
                         sTarget = metadata$2(entry.data.target, entry.event);
                         if (sTarget.id > 0) {
@@ -3372,10 +3498,10 @@ function encode$3 (type, ts) {
                             track$8(entry.event, entry.data.x, entry.data.y);
                         }
                     }
-                    reset$a();
+                    reset$d();
                     break;
                 case 42 /* Event.Change */:
-                    for (_k = 0, _l = state$7; _k < _l.length; _k++) {
+                    for (_k = 0, _l = state$a; _k < _l.length; _k++) {
                         entry = _l[_k];
                         tokens = [entry.time, entry.event];
                         target = metadata$2(entry.data.target, entry.event);
@@ -3388,10 +3514,10 @@ function encode$3 (type, ts) {
                             queue(tokens);
                         }
                     }
-                    reset$g();
+                    reset$j();
                     break;
                 case 39 /* Event.Submit */:
-                    for (_m = 0, _o = state$1; _m < _o.length; _m++) {
+                    for (_m = 0, _o = state$4; _m < _o.length; _m++) {
                         entry = _o[_m];
                         tokens = [entry.time, entry.event];
                         target = metadata$2(entry.data.target, entry.event);
@@ -3400,7 +3526,7 @@ function encode$3 (type, ts) {
                             queue(tokens);
                         }
                     }
-                    reset$8();
+                    reset$b();
                     break;
                 case 22 /* Event.Timeline */:
                     for (_p = 0, _q = updates$1; _p < _q.length; _p++) {
@@ -3421,7 +3547,7 @@ function encode$3 (type, ts) {
                     tokens.push(v.visible);
                     queue(tokens);
                     visibility(t, v.visible);
-                    reset$6();
+                    reset$9();
                     break;
             }
             return [2 /*return*/];
@@ -3511,6 +3637,8 @@ function queue(tokens, transmit) {
             case 37 /* Event.Box */:
             case 6 /* Event.Mutation */:
             case 43 /* Event.Snapshot */:
+            case 45 /* Event.StyleSheetAdoption */:
+            case 46 /* Event.StyleSheetUpdate */:
                 playbackBytes += event_1.length;
                 playback.push(event_1);
                 break;
@@ -3533,7 +3661,7 @@ function queue(tokens, transmit) {
         // We enrich the data going out with the existing upload. In these cases, call to upload comes with 'transmit' set to false.
         if (transmit && timeout === null) {
             if (type !== 25 /* Event.Ping */) {
-                reset$p();
+                reset$q();
             }
             timeout = setTimeout(upload, gap);
             queuedTime = now;
@@ -3569,7 +3697,8 @@ function upload(final) {
                     // Otherwise you run a risk of infinite loop.
                     compute$6();
                     compute$5();
-                    compute$8();
+                    compute$9();
+                    compute$7();
                     last = final === true;
                     e = JSON.stringify(envelope(last));
                     a = "[".concat(analysis.join(), "]");
@@ -4037,7 +4166,7 @@ function encode$1 (event) {
     var tokens = [t, event];
     switch (event) {
         case 4 /* Event.Baseline */:
-            var b = state$b;
+            var b = state$c;
             if (b) {
                 tokens = [b.time, b.event];
                 tokens.push(b.data.visible);
@@ -4052,7 +4181,7 @@ function encode$1 (event) {
                 tokens.push(b.data.activityTime);
                 queue(tokens, false);
             }
-            reset$r();
+            reset$s();
             break;
         case 25 /* Event.Ping */:
             tokens.push(data$h.gap);
@@ -4086,7 +4215,7 @@ function encode$1 (event) {
                     tokens.push(v);
                     tokens.push(data$e[v]);
                 }
-                reset$n();
+                reset$o();
                 queue(tokens, false);
             }
             break;
@@ -4101,7 +4230,7 @@ function encode$1 (event) {
                     // However, for data over the wire, we round it off to milliseconds precision.
                     tokens.push(Math.round(updates$3[m]));
                 }
-                reset$q();
+                reset$r();
                 queue(tokens, false);
             }
             break;
@@ -4127,7 +4256,7 @@ function encode$1 (event) {
                     tokens.push(key);
                     tokens.push([].concat.apply([], data$g[e]));
                 }
-                reset$o();
+                reset$p();
                 queue(tokens, false);
             }
             break;
@@ -4449,25 +4578,51 @@ function user() {
     return output;
 }
 function getCookie(key) {
+    var _a;
     if (supported(document, "cookie" /* Constant.Cookie */)) {
         var cookies = document.cookie.split(";" /* Constant.Semicolon */);
         if (cookies) {
             for (var i = 0; i < cookies.length; i++) {
                 var pair = cookies[i].split("=" /* Constant.Equals */);
                 if (pair.length > 1 && pair[0] && pair[0].trim() === key) {
-                    return pair[1];
+                    // Some browsers automatically url encode cookie values if they are not url encoded.
+                    // We therefore encode and decode cookie values ourselves.
+                    // For backwards compatability we need to consider 3 cases:
+                    // * Cookie was previously not encoded by Clarity and browser did not encode it
+                    // * Cookie was previously not encoded by Clarity and browser encoded it once or more
+                    // * Cookie was previously encoded by Clarity and browser did not encode it
+                    var _b = decodeCookieValue(pair[1]), isEncoded = _b[0], decodedValue = _b[1];
+                    while (isEncoded) {
+                        _a = decodeCookieValue(decodedValue), isEncoded = _a[0], decodedValue = _a[1];
+                    }
+                    return decodedValue;
                 }
             }
         }
     }
     return null;
 }
+function decodeCookieValue(value) {
+    try {
+        var decodedValue = decodeURIComponent(value);
+        return [decodedValue != value, decodedValue];
+    }
+    catch (_a) {
+    }
+    return [false, value];
+}
+function encodeCookieValue(value) {
+    return encodeURIComponent(value);
+}
 function setCookie(key, value, time) {
     if (config$1.track && ((navigator && navigator.cookieEnabled) || supported(document, "cookie" /* Constant.Cookie */))) {
+        // Some browsers automatically url encode cookie values if they are not url encoded.
+        // We therefore encode and decode cookie values ourselves.
+        var encodedValue = encodeCookieValue(value);
         var expiry = new Date();
         expiry.setDate(expiry.getDate() + time);
         var expires = expiry ? "expires=" /* Constant.Expires */ + expiry.toUTCString() : "" /* Constant.Empty */;
-        var cookie = "".concat(key, "=").concat(value).concat(";" /* Constant.Semicolon */).concat(expires).concat(";path=/" /* Constant.Path */);
+        var cookie = "".concat(key, "=").concat(encodedValue).concat(";" /* Constant.Semicolon */).concat(expires).concat(";path=/" /* Constant.Path */);
         try {
             // Attempt to get the root domain only once and fall back to writing cookie on the current domain.
             if (rootDomain === null) {
@@ -4670,8 +4825,8 @@ function stop$6() {
 var status = false;
 function start$6() {
     status = true;
-    start$H();
-    reset$k();
+    start$I();
+    reset$l();
     reset$1();
     reset$2();
     start$7();
@@ -4680,8 +4835,8 @@ function stop$5() {
     stop$6();
     reset$2();
     reset$1();
-    reset$k();
-    stop$E();
+    reset$l();
+    stop$F();
     status = false;
 }
 function active() {
@@ -4735,7 +4890,7 @@ function restart() {
 }
 
 function start$5() {
-    start$z();
+    start$A();
     start$e();
     start$d();
 }
@@ -4751,7 +4906,7 @@ var diagnostic = /*#__PURE__*/Object.freeze({
 
 function start$4() {
     schedule$1(discover, 1 /* Priority.High */).then(function () {
-        measure(compute$7)();
+        measure(compute$8)();
         measure(compute$6)();
     });
 }
@@ -4763,14 +4918,15 @@ function discover() {
                 case 0:
                     ts = time();
                     timer = { id: id(), cost: 3 /* Metric.LayoutCost */ };
-                    start$x(timer);
+                    start$y(timer);
                     return [4 /*yield*/, traverse(document, timer, 0 /* Source.Discover */)];
                 case 1:
                     _a.sent();
+                    checkDocumentStyles(document);
                     return [4 /*yield*/, encode$4(5 /* Event.Discover */, timer, ts)];
                 case 2:
                     _a.sent();
-                    stop$v(timer);
+                    stop$w(timer);
                     return [2 /*return*/];
             }
         });
@@ -4780,19 +4936,21 @@ function discover() {
 function start$3() {
     // The order below is important 
     // and is determined by interdependencies of modules
-    start$w();
-    start$u();
-    start$y();
+    start$x();
     start$h();
+    start$z();
+    start$k();
     start$4();
-    start$v();
+    start$j();
+    start$i();
 }
 function stop$3() {
-    stop$s();
-    stop$w();
     stop$f();
-    stop$u();
-    stop$t();
+    stop$x();
+    stop$i();
+    stop$v();
+    stop$h();
+    stop$g();
 }
 
 var layout = /*#__PURE__*/Object.freeze({
@@ -4986,7 +5144,7 @@ function start(config$1) {
     if (check()) {
         config(config$1);
         start$6();
-        start$A();
+        start$B();
         modules.forEach(function (x) { return measure(x.start)(); });
         // If it's an internal call to start, without explicit configuration,
         // re-process any newly accumulated items in the queue
@@ -5017,7 +5175,7 @@ function stop() {
     if (active()) {
         // Stop modules in the reverse order of their initialization and start queuing up items again
         modules.slice().reverse().forEach(function (x) { return measure(x.stop)(); });
-        stop$x();
+        stop$y();
         stop$5();
         setup();
     }