clarity-js 0.7.43 → 0.7.45

package/build/clarity.module.js

@@ -161,7 +161,7 @@ function stop$F() {
     startTime = 0;
 }
 
-var version$1 = "0.7.43";
+var version$1 = "0.7.45";
 
 // tslint:disable: no-bitwise
 function hash (input, precision) {
@@ -1093,7 +1093,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
@@ -1132,7 +1132,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);
@@ -1700,507 +1700,252 @@ function stop$v() {
     reset$k();
 }
 
-var sheetAdoptionState = [];
-var sheetUpdateState = [];
-var replace = null;
-var replaceSync = null;
+var state$9 = [];
 function start$w() {
-    if (replace === null) {
-        replace = CSSStyleSheet.prototype.replace;
-        CSSStyleSheet.prototype.replace = function () {
-            if (active()) {
-                max(36 /* Metric.ConstructedStyles */, 1);
-            }
-            return replace.apply(this, arguments);
-        };
-    }
-    if (replaceSync === null) {
-        replaceSync = CSSStyleSheet.prototype.replaceSync;
-        CSSStyleSheet.prototype.replaceSync = function () {
-            if (active()) {
-                max(36 /* Metric.ConstructedStyles */, 1);
-            }
-            return replaceSync.apply(this, arguments);
-        };
-    }
+    reset$j();
 }
-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;
-    }
-    max(36 /* Metric.ConstructedStyles */, 1);
+function observe$c(root) {
+    bind(root, "change", recompute$8, true);
 }
-function compute$8() {
-    checkDocumentStyles(document);
+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$9.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() {
-    sheetAdoptionState = [];
-    sheetUpdateState = [];
+    state$9 = [];
 }
 function stop$u() {
     reset$j();
 }
 
-var state$9 = [];
-var elementAnimate = null;
-var animationPlay = null;
-var animationPause = null;
-var animationCancel = null;
-var animationFinish = null;
-var animationId = 'clarityAnimationId';
-var operationCount = 'clarityOperationCount';
-var maxOperations = 20;
+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$8 = [];
 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");
-        if (elementAnimate === null) {
-            elementAnimate = Element.prototype.animate;
-            Element.prototype.animate = function () {
-                var createdAnimation = elementAnimate.apply(this, arguments);
-                trackAnimationOperation(createdAnimation, "play");
-                return createdAnimation;
-            };
-        }
+    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$8.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 || String(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 () {
-            trackAnimationOperation(this, name);
-            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)
+            };
+        }
     }
+    return box;
 }
-function trackAnimationOperation(animation, name) {
-    if (active()) {
-        var effect = animation.effect;
-        var target = getId(effect.target);
-        if (target !== null && effect.getKeyframes && effect.getTiming) {
-            if (!animation[animationId]) {
-                animation[animationId] = shortid();
-                animation[operationCount] = 0;
-                var keyframes = effect.getKeyframes();
-                var timing = effect.getTiming();
-                track$5(time(), animation[animationId], 0 /* AnimationOperation.Create */, JSON.stringify(keyframes), JSON.stringify(timing), target);
-            }
-            if (animation[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(), animation[animationId], operation);
-                }
-            }
+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 reset$i() {
+    state$8 = [];
+}
+function stop$t() {
+    reset$i();
 }
 
-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, _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:
-                    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*/, 3];
-                        case 44 /* Event.Animation */: return [3 /*break*/, 4];
-                        case 5 /* Event.Discover */: return [3 /*break*/, 5];
-                        case 6 /* Event.Mutation */: return [3 /*break*/, 5];
-                    }
-                    return [3 /*break*/, 12];
-                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*/, 12];
-                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*/, 12];
-                case 3:
-                    for (_c = 0, _d = sheetAdoptionState; _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);
-                    }
-                    for (_e = 0, _f = sheetUpdateState; _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);
-                    }
-                    reset$j();
-                    return [3 /*break*/, 12];
-                case 4:
-                    for (_g = 0, _h = state$9; _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);
-                    }
-                    reset$i();
-                    return [3 /*break*/, 12];
-                case 5:
-                    // Check if we are operating within the context of the current page
-                    if (state$a(timer) === 2 /* Task.Stop */) {
-                        return [3 /*break*/, 12];
-                    }
-                    values = updates$2();
-                    if (!(values.length > 0)) return [3 /*break*/, 11];
-                    _j = 0, values_1 = values;
-                    _l.label = 6;
-                case 6:
-                    if (!(_j < values_1.length)) return [3 /*break*/, 10];
-                    value = values_1[_j];
-                    state = state$a(timer);
-                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 8];
-                    return [4 /*yield*/, suspend$1(timer)];
-                case 7:
-                    state = _l.sent();
-                    _l.label = 8;
-                case 8:
-                    if (state === 2 /* Task.Stop */) {
-                        return [3 /*break*/, 10];
-                    }
-                    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) {
-                                            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 = 9;
-                case 9:
-                    _j++;
-                    return [3 /*break*/, 6];
-                case 10:
-                    if (type === 6 /* Event.Mutation */) {
-                        activity(eventTime);
-                    }
-                    queue(tokenize(tokens), !config$1.lean);
-                    _l.label = 11;
-                case 11: return [3 /*break*/, 12];
-                case 12: return [2 /*return*/];
-            }
-        });
-    });
+var state$7 = [];
+function start$u() {
+    reset$h();
 }
-function shouldMangle(value) {
-    var privacy = value.metadata.privacy;
-    return value.data.tag === "*T" /* Constant.TextTag */ && !(privacy === 0 /* Privacy.None */ || privacy === 1 /* Privacy.Sensitive */);
+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 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 */)];
-        }
-    }
-    return value.metadata.size;
+function recompute$7(action, evt) {
+    state$7.push({ time: time(evt), event: 38 /* Event.Clipboard */, data: { target: target(evt), action: action } });
+    schedule$1(encode$3.bind(this, 38 /* Event.Clipboard */));
 }
-function str$1(input) {
-    return input.toString(36);
+function reset$h() {
+    state$7 = [];
 }
-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$s() {
+    reset$h();
 }
 
-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.05, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
-        }) : observer$1;
-        if (observer$1 && node && node.nodeType === Node.ELEMENT_NODE) {
-            observer$1.observe(node);
-        }
-    }
-}
-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);
+var timeout$5 = null;
+var state$6 = [];
+function start$t() {
+    reset$g();
 }
-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 observe$9(root) {
+    bind(root, "input", recompute$6, true);
 }
-function compute$7() {
-    // 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) {
-            r.state.data.id = id;
-            regions[id] = r.state.data;
-            state$8.push(r.state);
+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;
         }
-        else {
-            q.push(r);
+        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$6.length > 0 && (state$6[state$6.length - 1].data.target === data.target)) {
+            state$6.pop();
         }
-    }
-    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 */);
+        state$6.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 {
-        // Get the time before adding to queue to ensure accurate event time
-        queue$2.push({ node: n, state: clone$1(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 = [];
+    state$6 = [];
 }
 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 state$5 = [];
+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);
@@ -2211,274 +1956,76 @@ 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 || String(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$5.length;
+            var last = length_1 > 1 ? state$5[length_1 - 2] : null;
+            if (last && similar$1(last, current)) {
+                state$5.pop();
+            }
+            state$5.push(current);
+            clearTimeout(timeout$4);
+            timeout$4 = setTimeout(process$5, 500 /* Setting.LookAhead */, current.event);
+            break;
+        default:
+            state$5.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 = [];
+    state$5 = [];
+}
+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$5.length > 0) {
+        process$5(state$5[state$5.length - 1].event);
+    }
 }
 
-var state$5 = [];
+var data$b;
 function start$r() {
-    reset$e();
-}
-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 reset$e() {
-    state$5 = [];
-}
-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();
+    bind(window, "resize", recompute$5);
+    recompute$5();
 }
 function recompute$5() {
     var de = document.documentElement;
@@ -2490,22 +2037,22 @@ function recompute$5() {
     };
     encode$3(11 /* Event.Resize */);
 }
-function reset$b() {
+function reset$e() {
     data$b = null;
 }
-function stop$m() {
-    reset$b();
+function stop$p() {
+    reset$e();
 }
 
-var state$2 = [];
+var state$4 = [];
 var initialTop = null;
 var initialBottom = null;
 var timeout$3 = null;
-function start$n() {
-    state$2 = [];
+function start$q() {
+    state$4 = [];
     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);
@@ -2541,14 +2088,14 @@ function recompute$4(event) {
         initialBottom = bottom;
         return;
     }
-    var length = state$2.length;
-    var last = length > 1 ? state$2[length - 2] : null;
+    var length = state$4.length;
+    var last = length > 1 ? state$4[length - 2] : null;
     if (last && similar(last, current)) {
-        state$2.pop();
+        state$4.pop();
     }
-    state$2.push(current);
+    state$4.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 getPositionNode(x, y) {
     var _a, _b;
@@ -2567,12 +2114,12 @@ function getPositionNode(x, y) {
     }
     return node;
 }
-function reset$a() {
-    state$2 = [];
+function reset$d() {
+    state$4 = [];
     initialTop = null;
     initialBottom = null;
 }
-function process$3(event) {
+function process$4(event) {
     schedule$1(encode$3.bind(this, event));
 }
 function similar(last, current) {
@@ -2580,7 +2127,7 @@ 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 compute$6() {
+function compute$8() {
     var _a, _b;
     if (initialTop) {
         var top_1 = metadata$2(initialTop, null);
@@ -2591,9 +2138,9 @@ function compute$6() {
         log(32 /* Dimension.InitialScrollBottom */, (_b = bottom === null || bottom === void 0 ? void 0 : bottom.hash) === null || _b === void 0 ? void 0 : _b.join("." /* Constant.Dot */));
     }
 }
-function stop$l() {
+function stop$o() {
     clearTimeout(timeout$3);
-    state$2 = [];
+    state$4 = [];
     initialTop = null;
     initialBottom = null;
 }
@@ -2601,10 +2148,10 @@ function stop$l() {
 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);
 }
@@ -2626,7 +2173,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,
@@ -2636,40 +2183,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$3 = [];
+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$3.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$3 = [];
 }
-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) {
@@ -2677,15 +2224,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();
 }
@@ -2694,63 +2241,419 @@ 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 stop$k() {
+    reset$9();
 }
 
-function start$i() {
+function start$l() {
     start$g();
+    start$v();
+    start$u();
     start$s();
+    start$t();
     start$r();
-    start$p();
+    start$m();
     start$q();
+    start$p();
+    start$w();
     start$o();
-    start$j();
     start$n();
-    start$m();
-    start$t();
-    start$l();
-    start$k();
 }
-function stop$g() {
+function stop$j() {
     stop$e();
+    stop$t();
+    stop$s();
     stop$q();
+    stop$r();
     stop$p();
-    stop$n();
+    stop$k();
     stop$o();
+    stop$n();
+    stop$u();
     stop$m();
-    stop$h();
     stop$l();
-    stop$k();
-    stop$r();
-    stop$j();
-    stop$i();
 }
-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 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, timestamp) {
+    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, timestamp);
+                    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 mediaInsertRule = null;
+var mediaDeleteRule = 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 ("CSSMediaRule" in window && mediaInsertRule === null) {
+        mediaInsertRule = CSSMediaRule.prototype.insertRule;
+        CSSMediaRule.prototype.insertRule = function () {
+            if (active()) {
+                schedule(this.parentStyleSheet.ownerNode);
+            }
+            return mediaInsertRule.apply(this, arguments);
+        };
+    }
+    if (deleteRule === null) {
+        deleteRule = CSSStyleSheet.prototype.deleteRule;
+        CSSStyleSheet.prototype.deleteRule = function () {
+            if (active()) {
+                schedule(this.ownerNode);
+            }
+            return deleteRule.apply(this, arguments);
+        };
+    }
+    if ("CSSMediaRule" in window && mediaDeleteRule === null) {
+        mediaDeleteRule = CSSMediaRule.prototype.deleteRule;
+        CSSMediaRule.prototype.deleteRule = function () {
+            if (active()) {
+                schedule(this.parentStyleSheet.ownerNode);
+            }
+            return mediaDeleteRule.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$9);
+        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$a(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 = config$1.throttleDom ? track$5(mutation, timer, instance, record.time) : mutation.type;
+                    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 */, record.time);
+                            break;
+                        case "characterData" /* Constant.CharacterData */:
+                            processNode(target, 4 /* Source.CharacterData */, record.time);
+                            break;
+                        case "childList" /* Constant.ChildList */:
+                            processNodeList(mutation.addedNodes, 1 /* Source.ChildListAdd */, timer, record.time);
+                            processNodeList(mutation.removedNodes, 2 /* Source.ChildListRemove */, timer, record.time);
+                            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, timestamp) {
+    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 */) {
+        // calculate inactive period based on the timestamp of the mutation not when the mutation is processed
+        var inactive = timestamp > 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, timestamp);
+        }
+        // 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, timestamp) {
+    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, timestamp);
+                    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, timestamp);
+                    _a.label = 5;
+                case 5:
+                    i++;
+                    return [3 /*break*/, 1];
+                case 6: return [2 /*return*/];
+            }
+        });
+    });
+}
+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 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) {
@@ -2851,7 +2754,7 @@ function processNode (node, source, timestamp) {
             // later whenever there are new additions or modifications to DOM (mutations)
             if (node === document)
                 parse$1(document);
-            checkDocumentStyles(node);
+            checkDocumentStyles(node, timestamp);
             observe$2(node);
             break;
         case Node.DOCUMENT_FRAGMENT_NODE:
@@ -2875,7 +2778,7 @@ function processNode (node, source, timestamp) {
                     // 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);
+                checkDocumentStyles(node, timestamp);
             }
             break;
         case Node.TEXT_NODE:
@@ -3018,8 +2921,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.)
@@ -3071,360 +2974,542 @@ function getAttributes(element) {
     return output;
 }
 
-function traverse (root, timer, source, timestamp) {
-    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 mediaInsertRule = null;
-var mediaDeleteRule = 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 sheetUpdateState = [];
+var sheetAdoptionState = [];
+var replace = null;
+var replaceSync = null;
+var styleSheetId = 'claritySheetId';
+var styleSheetPageNum = 'claritySheetNum';
+var styleSheetMap = {};
+var styleTimeMap = {};
+var documentNodes = [];
+function start$j() {
+    if (replace === null) {
+        replace = CSSStyleSheet.prototype.replace;
+        CSSStyleSheet.prototype.replace = function () {
             if (active()) {
-                schedule(this.ownerNode);
+                max(36 /* Metric.ConstructedStyles */, 1);
+                // if we haven't seen this stylesheet on this page yet, wait until the checkDocumentStyles has found it
+                // and attached the sheet to a document. This way the timestamp of the style sheet creation will align
+                // to when it is used in the document rather than potentially being misaligned during the traverse process.
+                if (this[styleSheetPageNum] === data$2.pageNum) {
+                    trackStyleChange(time(), this[styleSheetId], 1 /* StyleSheetOperation.Replace */, arguments[0]);
+                }
             }
-            return insertRule.apply(this, arguments);
+            return replace.apply(this, arguments);
         };
     }
-    if (mediaInsertRule === null) {
-        mediaInsertRule = CSSMediaRule.prototype.insertRule;
-        CSSMediaRule.prototype.insertRule = function () {
+    if (replaceSync === null) {
+        replaceSync = CSSStyleSheet.prototype.replaceSync;
+        CSSStyleSheet.prototype.replaceSync = function () {
             if (active()) {
-                schedule(this.parentStyleSheet.ownerNode);
+                max(36 /* Metric.ConstructedStyles */, 1);
+                // if we haven't seen this stylesheet on this page yet, wait until the checkDocumentStyles has found it
+                // and attached the sheet to a document. This way the timestamp of the style sheet creation will align
+                // to when it is used in the document rather than potentially being misaligned during the traverse process.
+                if (this[styleSheetPageNum] === data$2.pageNum) {
+                    trackStyleChange(time(), this[styleSheetId], 2 /* StyleSheetOperation.ReplaceSync */, arguments[0]);
+                }
             }
-            return mediaInsertRule.apply(this, arguments);
+            return replaceSync.apply(this, arguments);
         };
     }
-    if (deleteRule === null) {
-        deleteRule = CSSStyleSheet.prototype.deleteRule;
-        CSSStyleSheet.prototype.deleteRule = function () {
-            if (active()) {
-                schedule(this.ownerNode);
-            }
-            return deleteRule.apply(this, arguments);
-        };
+}
+function checkDocumentStyles(documentNode, timestamp) {
+    if (documentNodes.indexOf(documentNode) === -1) {
+        documentNodes.push(documentNode);
     }
-    if (mediaDeleteRule === null) {
-        mediaDeleteRule = CSSMediaRule.prototype.deleteRule;
-        CSSMediaRule.prototype.deleteRule = function () {
-            if (active()) {
-                schedule(this.parentStyleSheet.ownerNode);
-            }
-            return mediaDeleteRule.apply(this, arguments);
-        };
+    timestamp = timestamp || time();
+    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;
     }
-    // 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;
+    max(36 /* Metric.ConstructedStyles */, 1);
+    var currentStyleSheets = [];
+    for (var _i = 0, _a = documentNode.adoptedStyleSheets; _i < _a.length; _i++) {
+        var styleSheet = _a[_i];
+        var pageNum = data$2.pageNum;
+        // If we haven't seen this style sheet on this page yet, we create a reference to it for the visualizer.
+        // For SPA or times in which Clarity restarts on a given page, our visualizer would lose context
+        // on the previously created style sheet for page N-1.
+        // Then we synthetically call replaceSync with its contents to bootstrap it
+        if (styleSheet[styleSheetPageNum] !== pageNum) {
+            styleSheet[styleSheetPageNum] = pageNum;
+            styleSheet[styleSheetId] = shortid();
+            trackStyleChange(timestamp, styleSheet[styleSheetId], 0 /* StyleSheetOperation.Create */);
+            trackStyleChange(timestamp, 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(timestamp, documentNode == document ? -1 : getId(documentNode), 3 /* StyleSheetOperation.SetAdoptedStyles */, currentStyleSheets);
+        styleSheetMap[documentId] = currentStyleSheets;
+        styleTimeMap[documentId] = timestamp;
     }
 }
-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() {
+    for (var _i = 0, documentNodes_1 = documentNodes; _i < documentNodes_1.length; _i++) {
+        var documentNode = documentNodes_1[_i];
+        var docId = documentNode == document ? -1 : getId(documentNode);
+        var ts = docId in styleTimeMap ? styleTimeMap[docId] : null;
+        checkDocumentStyles(document, ts);
+    }
+}
+function reset$8() {
+    sheetAdoptionState = [];
+    sheetUpdateState = [];
+}
+function stop$h() {
+    styleSheetMap = {};
+    styleTimeMap = {};
+    documentNodes = [];
+    reset$8();
+}
+function trackStyleChange(time, id, operation, cssRules) {
+    sheetUpdateState.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) {
+    sheetAdoptionState.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 elementAnimate = null;
+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");
+        if (elementAnimate === null) {
+            elementAnimate = Element.prototype.animate;
+            Element.prototype.animate = function () {
+                var createdAnimation = elementAnimate.apply(this, arguments);
+                trackAnimationOperation(createdAnimation, "play");
+                return createdAnimation;
+            };
+        }
     }
 }
-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 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
+        }
+    });
+    encode$4(44 /* Event.Animation */);
+}
+function stop$g() {
+    reset$7();
+}
+function overrideAnimationHelper(functionToOverride, name) {
+    if (functionToOverride === null) {
+        functionToOverride = Animation.prototype[name];
+        Animation.prototype[name] = function () {
+            trackAnimationOperation(this, name);
+            return functionToOverride.apply(this, arguments);
+        };
     }
 }
-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 trackAnimationOperation(animation, name) {
+    if (active()) {
+        var effect = animation.effect;
+        var target = getId(effect.target);
+        if (target !== null && effect.getKeyframes && effect.getTiming) {
+            if (!animation[animationId]) {
+                animation[animationId] = shortid();
+                animation[operationCount] = 0;
+                var keyframes = effect.getKeyframes();
+                var timing = effect.getTiming();
+                track$4(time(), animation[animationId], 0 /* AnimationOperation.Create */, JSON.stringify(keyframes), JSON.stringify(timing), target);
+            }
+            if (animation[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(), animation[animationId], operation);
+                }
+            }
         }
     }
-    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$9);
-        measure(compute$7)();
-    });
-}
-function process$1() {
+}
+
+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$y(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*/, 3];
+                        case 44 /* Event.Animation */: return [3 /*break*/, 4];
+                        case 5 /* Event.Discover */: return [3 /*break*/, 5];
+                        case 6 /* Event.Mutation */: return [3 /*break*/, 5];
+                    }
+                    return [3 /*break*/, 12];
                 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*/, 12];
                 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)];
-                case 3:
-                    state = _b.sent();
-                    _b.label = 4;
-                case 4:
-                    if (state === 2 /* Task.Stop */) {
-                        return [3 /*break*/, 6];
+                    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);
                     }
-                    target = mutation.target;
-                    type = config$1.throttleDom ? track$3(mutation, timer, instance, record.time) : mutation.type;
-                    if (type && target && target.ownerDocument) {
-                        parse$1(target.ownerDocument);
+                    reset$6();
+                    return [3 /*break*/, 12];
+                case 3:
+                    for (_c = 0, _d = sheetAdoptionState; _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);
                     }
-                    if (type && target && target.nodeType == Node.DOCUMENT_FRAGMENT_NODE && target.host) {
-                        parse$1(target);
+                    for (_e = 0, _f = sheetUpdateState; _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);
                     }
-                    switch (type) {
-                        case "attributes" /* Constant.Attributes */:
-                            processNode(target, 3 /* Source.Attributes */, record.time);
-                            break;
-                        case "characterData" /* Constant.CharacterData */:
-                            processNode(target, 4 /* Source.CharacterData */, record.time);
-                            break;
-                        case "childList" /* Constant.ChildList */:
-                            processNodeList(mutation.addedNodes, 1 /* Source.ChildListAdd */, timer, record.time);
-                            processNodeList(mutation.removedNodes, 2 /* Source.ChildListRemove */, timer, record.time);
-                            break;
-                        case "suspend" /* Constant.Suspend */:
-                            value = get(target);
-                            if (value) {
-                                value.metadata.suspend = true;
-                            }
-                            break;
+                    reset$8();
+                    return [3 /*break*/, 12];
+                case 4:
+                    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);
                     }
-                    _b.label = 5;
+                    reset$7();
+                    return [3 /*break*/, 12];
                 case 5:
-                    _i++;
-                    return [3 /*break*/, 2];
-                case 6: return [4 /*yield*/, encode$4(6 /* Event.Mutation */, timer, record.time)];
+                    // Check if we are operating within the context of the current page
+                    if (state$a(timer) === 2 /* Task.Stop */) {
+                        return [3 /*break*/, 12];
+                    }
+                    values = updates$2();
+                    if (!(values.length > 0)) return [3 /*break*/, 11];
+                    _j = 0, values_1 = values;
+                    _l.label = 6;
+                case 6:
+                    if (!(_j < values_1.length)) return [3 /*break*/, 10];
+                    value = values_1[_j];
+                    state = state$a(timer);
+                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 8];
+                    return [4 /*yield*/, suspend$1(timer)];
                 case 7:
-                    _b.sent();
-                    return [3 /*break*/, 1];
+                    state = _l.sent();
+                    _l.label = 8;
                 case 8:
-                    stop$w(timer);
-                    return [2 /*return*/];
+                    if (state === 2 /* Task.Stop */) {
+                        return [3 /*break*/, 10];
+                    }
+                    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) {
+                                            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 = 9;
+                case 9:
+                    _j++;
+                    return [3 /*break*/, 6];
+                case 10:
+                    if (type === 6 /* Event.Mutation */) {
+                        activity(eventTime);
+                    }
+                    queue(tokenize(tokens), !config$1.lean);
+                    _l.label = 11;
+                case 11: return [3 /*break*/, 12];
+                case 12: return [2 /*return*/];
             }
         });
     });
 }
-function track$3(m, timer, instance, timestamp) {
-    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 */) {
-        // calculate inactive period based on the timestamp of the mutation not when the mutation is processed
-        var inactive = timestamp > 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);
+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 */)];
+        }
+    }
+    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.05, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
+        }) : observer$1;
+        if (observer$1 && node && node.nodeType === Node.ELEMENT_NODE) {
+            observer$1.observe(node);
         }
-        // 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 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;
+    }
+    // Process updates to this region, if applicable
+    process$1(node, data, interaction, data.visibility);
+}
+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) {
+            r.state.data.id = id;
+            regions[id] = r.state.data;
+            state$1.push(r.state);
         }
-        else if (h[0] > 10 /* Setting.MutationSuspendThreshold */) {
-            return "" /* Constant.Empty */;
+        else {
+            q.push(r);
         }
     }
-    return m.type;
-}
-function names(nodes) {
-    var output = [];
-    for (var i = 0; nodes && i < nodes.length; i++) {
-        output.push(nodes[i].nodeName);
+    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 */);
     }
-    return output.join();
 }
-function processNodeList(list, source, timer, timestamp) {
-    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 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);
             }
-        });
-    });
-}
-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);
+        }
     }
-    // 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);
+    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;
-            }
-            generate(node, shadowRoot ? "childList" /* Constant.ChildList */ : "characterData" /* Constant.CharacterData */);
+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));
         }
     }
-    queue$1 = [];
+    else {
+        // Get the time before adding to queue to ensure accurate event time
+        queue$1.push({ node: n, state: clone$1(d) });
+    }
 }
-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 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) {
@@ -3445,7 +3530,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);
@@ -3472,7 +3557,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$5; _i < _a.length; _i++) {
                         entry = _a[_i];
                         pTarget = metadata$2(entry.data.target, entry.event);
                         if (pTarget.id > 0) {
@@ -3484,10 +3569,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$8; _b < _c.length; _b++) {
                         entry = _c[_b];
                         cTarget = metadata$2(entry.data.target, entry.event, entry.data.text);
                         tokens = [entry.time, entry.event];
@@ -3507,10 +3592,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$7; _d < _e.length; _d++) {
                         entry = _e[_d];
                         tokens = [entry.time, entry.event];
                         target = metadata$2(entry.data.target, entry.event);
@@ -3520,24 +3605,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$6; _f < _g.length; _f++) {
                         entry = _g[_f];
                         iTarget = metadata$2(entry.data.target, entry.event, entry.data.value);
                         tokens = [entry.time, entry.event];
@@ -3545,7 +3630,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;
@@ -3556,12 +3641,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$4; _h < _j.length; _h++) {
                         entry = _j[_h];
                         sTarget = metadata$2(entry.data.target, entry.event);
                         top_1 = metadata$2(entry.data.top, entry.event);
@@ -3579,10 +3664,10 @@ function encode$3 (type, ts) {
                             track$8(entry.event, entry.data.x, entry.data.y, entry.time);
                         }
                     }
-                    reset$a();
+                    reset$d();
                     break;
                 case 42 /* Event.Change */:
-                    for (_k = 0, _l = state$7; _k < _l.length; _k++) {
+                    for (_k = 0, _l = state$9; _k < _l.length; _k++) {
                         entry = _l[_k];
                         tokens = [entry.time, entry.event];
                         target = metadata$2(entry.data.target, entry.event);
@@ -3595,10 +3680,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$3; _m < _o.length; _m++) {
                         entry = _o[_m];
                         tokens = [entry.time, entry.event];
                         target = metadata$2(entry.data.target, entry.event);
@@ -3607,7 +3692,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++) {
@@ -3628,7 +3713,7 @@ function encode$3 (type, ts) {
                     tokens.push(v.visible);
                     queue(tokens);
                     visibility(t, v.visible);
-                    reset$6();
+                    reset$9();
                     break;
             }
             return [2 /*return*/];
@@ -3776,10 +3861,10 @@ function upload(final) {
                     }
                     // CAUTION: Ensure "transmit" is set to false in the queue function for following events
                     // Otherwise you run a risk of infinite loop.
-                    compute$7();
+                    compute$6();
                     compute$5();
                     compute$a();
-                    compute$8();
+                    compute$7();
                     last = final === true;
                     e = JSON.stringify(envelope(last));
                     a = "[".concat(analysis.join(), "]");
@@ -5006,8 +5091,8 @@ var diagnostic = /*#__PURE__*/Object.freeze({
 function start$4() {
     schedule$1(discover, 1 /* Priority.High */).then(function () {
         measure(compute$9)();
-        measure(compute$7)();
         measure(compute$6)();
+        measure(compute$8)();
     });
 }
 function discover() {
@@ -5019,10 +5104,10 @@ function discover() {
                     ts = time();
                     timer = { id: id(), cost: 3 /* Metric.LayoutCost */ };
                     start$y(timer);
-                    return [4 /*yield*/, traverse(document, timer, 0 /* Source.Discover */)];
+                    return [4 /*yield*/, traverse(document, timer, 0 /* Source.Discover */, ts)];
                 case 1:
                     _a.sent();
-                    checkDocumentStyles(document);
+                    checkDocumentStyles(document, ts);
                     return [4 /*yield*/, encode$4(5 /* Event.Discover */, timer, ts)];
                 case 2:
                     _a.sent();
@@ -5037,28 +5122,28 @@ function start$3() {
     // The order below is important 
     // and is determined by interdependencies of modules
     start$x();
-    start$u();
+    start$h();
     start$z();
     if (config$1.delayDom) {
         // Lazy load layout module as part of page load time performance improvements experiment 
         bind(window, 'load', function () {
-            start$h();
+            start$k();
         });
     }
     else {
-        start$h();
+        start$k();
     }
     start$4();
-    start$w();
-    start$v();
+    start$j();
+    start$i();
 }
 function stop$3() {
-    stop$s();
-    stop$x();
     stop$f();
+    stop$x();
+    stop$i();
     stop$v();
-    stop$u();
-    stop$t();
+    stop$h();
+    stop$g();
 }
 
 var layout = /*#__PURE__*/Object.freeze({