clarity-js 0.8.0 → 0.8.2

package/build/clarity.js

@@ -1,5 +1,25 @@
 'use strict';
 
+var dom = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    get add () { return add; },
+    get get () { return get; },
+    get getId () { return getId; },
+    get getNode () { return getNode; },
+    get getValue () { return getValue; },
+    get has () { return has$1; },
+    get hashText () { return hashText; },
+    get iframe () { return iframe; },
+    get iframeContent () { return iframeContent; },
+    get lookup () { return lookup; },
+    get parse () { return parse$1; },
+    get removeIFrame () { return removeIFrame; },
+    get sameorigin () { return sameorigin; },
+    get start () { return start$i; },
+    get stop () { return stop$g; },
+    get update () { return update$1; },
+    get updates () { return updates$2; }
+});
 var upload$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get queue () { return queue; },
@@ -169,7 +189,7 @@ function stop$F() {
     startTime = 0;
 }
 
-var version$1 = "0.8.0";
+var version$1 = "0.8.2";
 
 // tslint:disable: no-bitwise
 function hash (input, precision) {
@@ -432,19 +452,19 @@ function reset$s() {
         pointerY: 0,
         activityTime: 0,
         scrollTime: 0,
-        pointerTime: 0,
-        moveX: 0,
-        moveY: 0,
-        moveTime: 0,
-        downX: 0,
-        downY: 0,
-        downTime: 0,
-        upX: 0,
-        upY: 0,
-        upTime: 0,
-        pointerPrevX: 0,
-        pointerPrevY: 0,
-        pointerPrevTime: 0,
+        pointerTime: undefined,
+        moveX: undefined,
+        moveY: undefined,
+        moveTime: undefined,
+        downX: undefined,
+        downY: undefined,
+        downTime: undefined,
+        upX: undefined,
+        upY: undefined,
+        upTime: undefined,
+        pointerPrevX: undefined,
+        pointerPrevY: undefined,
+        pointerPrevTime: undefined,
     };
 }
 function track$8(event, x, y, time) {
@@ -1030,1441 +1050,1356 @@ function check$4(id, target, input) {
     }
 }
 
-var excludeClassNames = "load,active,fixed,visible,focus,show,collaps,animat" /* Constant.ExcludeClassNames */.split("," /* Constant.Comma */);
-var selectorMap = {};
+// Track the start time to be able to compute duration at the end of the task
+var idleTimeout = 5000;
+var tracker = {};
+var queuedTasks = [];
+var activeTask = null;
+var pauseTask = null;
+var resumeResolve = null;
+function pause$1() {
+    if (pauseTask === null) {
+        pauseTask = new Promise(function (resolve) {
+            resumeResolve = resolve;
+        });
+    }
+}
+function resume$1() {
+    if (pauseTask) {
+        resumeResolve();
+        pauseTask = null;
+        if (activeTask === null) {
+            run();
+        }
+    }
+}
 function reset$n() {
-    selectorMap = {};
+    tracker = {};
+    queuedTasks = [];
+    activeTask = null;
+    pauseTask = null;
 }
-function get$1(input, type) {
-    var a = input.attributes;
-    var prefix = input.prefix ? input.prefix[type] : null;
-    var suffix = type === 0 /* Selector.Alpha */ ? "".concat("~" /* Constant.Tilde */).concat(input.position - 1) : ":nth-of-type(".concat(input.position, ")");
-    switch (input.tag) {
-        case "STYLE":
-        case "TITLE":
-        case "LINK":
-        case "META":
-        case "*T" /* Constant.TextTag */:
-        case "*D" /* Constant.DocumentTag */:
-            return "" /* Constant.Empty */;
-        case "HTML":
-            return "HTML" /* Constant.HTML */;
-        default:
-            if (prefix === null) {
-                return "" /* Constant.Empty */;
-            }
-            prefix = "".concat(prefix).concat(">" /* Constant.Separator */);
-            input.tag = input.tag.indexOf("svg:" /* Constant.SvgPrefix */) === 0 ? input.tag.substr("svg:" /* Constant.SvgPrefix */.length) : input.tag;
-            var selector = "".concat(prefix).concat(input.tag).concat(suffix);
-            var id = "id" /* Constant.Id */ in a && a["id" /* Constant.Id */].length > 0 ? a["id" /* Constant.Id */] : null;
-            var classes = input.tag !== "BODY" /* Constant.BodyTag */ && "class" /* Constant.Class */ in a && a["class" /* Constant.Class */].length > 0 ? a["class" /* Constant.Class */].trim().split(/\s+/).filter(function (c) { return filter(c); }).join("." /* Constant.Period */) : null;
-            if (classes && classes.length > 0) {
-                if (type === 0 /* Selector.Alpha */) {
-                    // In Alpha mode, update selector to use class names, with relative positioning within the parent id container.
-                    // If the node has valid class name(s) then drop relative positioning within the parent path to keep things simple.
-                    var key = "".concat(getDomPath(prefix)).concat(input.tag).concat("." /* Constant.Dot */).concat(classes);
-                    if (!(key in selectorMap)) {
-                        selectorMap[key] = [];
-                    }
-                    if (selectorMap[key].indexOf(input.id) < 0) {
-                        selectorMap[key].push(input.id);
-                    }
-                    selector = "".concat(key).concat("~" /* Constant.Tilde */).concat(selectorMap[key].indexOf(input.id));
-                }
-                else {
-                    // In Beta mode, we continue to look at query selectors in context of the full page
-                    selector = "".concat(prefix).concat(input.tag, ".").concat(classes).concat(suffix);
+function schedule$1(task, priority) {
+    if (priority === void 0) { priority = 0 /* Priority.Normal */; }
+    return __awaiter(this, void 0, void 0, function () {
+        var _i, queuedTasks_1, q, promise;
+        return __generator(this, function (_a) {
+            // If this task is already scheduled, skip it
+            for (_i = 0, queuedTasks_1 = queuedTasks; _i < queuedTasks_1.length; _i++) {
+                q = queuedTasks_1[_i];
+                if (q.task === task) {
+                    return [2 /*return*/];
                 }
             }
-            // Update selector to use "id" field when available. There are two exceptions:
-            // (1) if "id" appears to be an auto generated string token, e.g. guid or a random id containing digits
-            // (2) if "id" appears inside a shadow DOM, in which case we continue to prefix up to shadow DOM to prevent conflicts
-            selector = id && filter(id) ? "".concat(getDomPrefix(prefix)).concat("#" /* Constant.Hash */).concat(id) : selector;
-            return selector;
-    }
+            promise = new Promise(function (resolve) {
+                var insert = priority === 1 /* Priority.High */ ? "unshift" : "push";
+                // Queue this task for asynchronous execution later
+                // We also store a unique page identifier (id) along with the task to ensure
+                // ensure that we do not accidentally execute this task in context of a different page
+                queuedTasks[insert]({ task: task, resolve: resolve, id: id() });
+            });
+            // If there is no active task running, and Clarity is not in pause state,
+            // invoke the first task in the queue synchronously. This ensures that we don't yield the thread during unload event
+            if (activeTask === null && pauseTask === null) {
+                run();
+            }
+            return [2 /*return*/, promise];
+        });
+    });
 }
-function getDomPrefix(prefix) {
-    var shadowDomStart = prefix.lastIndexOf("*S" /* Constant.ShadowDomTag */);
-    var iframeDomStart = prefix.lastIndexOf("".concat("iframe:" /* Constant.IFramePrefix */).concat("HTML" /* Constant.HTML */));
-    var domStart = Math.max(shadowDomStart, iframeDomStart);
-    if (domStart < 0) {
-        return "" /* Constant.Empty */;
+function run() {
+    var entry = queuedTasks.shift();
+    if (entry) {
+        activeTask = entry;
+        entry.task().then(function () {
+            // Bail out if the context in which this task was operating is different from the current page
+            // An example scenario where task could span across pages is Single Page Applications (SPA)
+            // A task that started on page #1, but completes on page #2
+            if (entry.id !== id()) {
+                return;
+            }
+            entry.resolve();
+            activeTask = null; // Reset active task back to null now that the promise is resolved
+            run();
+        }).catch(function (error) {
+            // If one of the scheduled tasks failed, log, recover and continue processing rest of the tasks
+            if (entry.id !== id()) {
+                return;
+            }
+            if (error) {
+                log$1(0 /* Code.RunTask */, 1 /* Severity.Warning */, error.name, error.message, error.stack);
+            }
+            activeTask = null;
+            run();
+        });
     }
-    return prefix.substring(0, prefix.indexOf(">" /* Constant.Separator */, domStart) + 1);
 }
-function getDomPath(input) {
-    var parts = input.split(">" /* Constant.Separator */);
-    for (var i = 0; i < parts.length; i++) {
-        var tIndex = parts[i].indexOf("~" /* Constant.Tilde */);
-        var dIndex = parts[i].indexOf("." /* Constant.Dot */);
-        parts[i] = parts[i].substring(0, dIndex > 0 ? dIndex : (tIndex > 0 ? tIndex : parts[i].length));
+function state$a(timer) {
+    var id = key(timer);
+    if (id in tracker) {
+        var elapsed = performance.now() - tracker[id].start;
+        return (elapsed > tracker[id].yield) ? 0 /* Task.Wait */ : 1 /* Task.Run */;
     }
-    return parts.join(">" /* Constant.Separator */);
+    // If this task is no longer being tracked, send stop message to the caller
+    return 2 /* Task.Stop */;
 }
-// Check if the given input string has digits or excluded class names
-function filter(value) {
-    if (!value) {
-        return false;
-    } // Do not process empty strings
-    if (excludeClassNames.some(function (x) { return value.toLowerCase().indexOf(x) >= 0; })) {
-        return false;
+function start$z(timer) {
+    tracker[key(timer)] = { start: performance.now(), calls: 0, yield: 30 /* Setting.LongTask */ };
+}
+function restart$2(timer) {
+    var id = key(timer);
+    if (tracker && tracker[id]) {
+        var c = tracker[id].calls;
+        var y = tracker[id].yield;
+        start$z(timer);
+        tracker[id].calls = c + 1;
+        tracker[id].yield = y;
     }
-    for (var i = 0; i < value.length; i++) {
-        var c = value.charCodeAt(i);
-        if (c >= 48 /* Character.Zero */ && c <= 57 /* Character.Nine */) {
-            return false;
-        }
+}
+function stop$x(timer) {
+    var end = performance.now();
+    var id = key(timer);
+    var duration = end - tracker[id].start;
+    sum(timer.cost, duration);
+    count$1(5 /* Metric.InvokeCount */);
+    // For the first execution, which is synchronous, time is automatically counted towards TotalDuration.
+    // However, for subsequent asynchronous runs, we need to manually update TotalDuration metric.
+    if (tracker[id].calls > 0) {
+        sum(4 /* Metric.TotalCost */, duration);
     }
-    return true;
-}
-
-var selector = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    get: get$1,
-    reset: reset$n
-});
-
-var index = 1;
-var nodesMap = null; // Maps id => node to retrieve further node details using id.
-var values = [];
-var updateMap = [];
-var hashMap = {};
-var override = [];
-var unmask = [];
-var maskText = [];
-var maskExclude = [];
-var maskDisable = [];
-var maskTags = [];
-// The WeakMap object is a collection of key/value pairs in which the keys are weakly referenced
-var idMap = null; // Maps node => id.
-var iframeMap = null; // Maps iframe's contentDocument => parent iframe element
-var privacyMap = null; // Maps node => Privacy (enum)
-var fraudMap = null; // Maps node => FraudId (number)
-function start$z() {
-    reset$m();
-    parse$1(document, true);
 }
-function stop$x() {
-    reset$m();
+function suspend$1(timer) {
+    return __awaiter(this, void 0, void 0, function () {
+        var id, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    id = key(timer);
+                    if (!(id in tracker)) return [3 /*break*/, 2];
+                    stop$x(timer);
+                    _a = tracker[id];
+                    return [4 /*yield*/, wait()];
+                case 1:
+                    _a.yield = (_b.sent()).timeRemaining();
+                    restart$2(timer);
+                    _b.label = 2;
+                case 2: 
+                // After we are done with suspending task, ensure that we are still operating in the right context
+                // If the task is still being tracked, continue running the task, otherwise ask caller to stop execution
+                return [2 /*return*/, id in tracker ? 1 /* Task.Run */ : 2 /* Task.Stop */];
+            }
+        });
+    });
 }
-function reset$m() {
-    index = 1;
-    values = [];
-    updateMap = [];
-    hashMap = {};
-    override = [];
-    unmask = [];
-    maskText = "address,password,contact" /* Mask.Text */.split("," /* Constant.Comma */);
-    maskExclude = "password,secret,pass,social,ssn,code,hidden" /* Mask.Exclude */.split("," /* Constant.Comma */);
-    maskDisable = "radio,checkbox,range,button,reset,submit" /* Mask.Disable */.split("," /* Constant.Comma */);
-    maskTags = "INPUT,SELECT,TEXTAREA" /* Mask.Tags */.split("," /* Constant.Comma */);
-    nodesMap = new Map();
-    idMap = new WeakMap();
-    iframeMap = new WeakMap();
-    privacyMap = new WeakMap();
-    fraudMap = new WeakMap();
-    reset$n();
+function key(timer) {
+    return "".concat(timer.id, ".").concat(timer.cost);
 }
-// We parse new root nodes for any regions or masked nodes in the beginning (document) and
-// later whenever there are new additions or modifications to DOM (mutations)
-function parse$1(root, init) {
-    if (init === void 0) { init = false; }
-    // Wrap selectors in a try / catch block.
-    // It's possible for script to receive invalid selectors, e.g. "'#id'" with extra quotes, and cause the code below to fail
-    try {
-        // Parse unmask configuration into separate query selectors and override tokens as part of initialization
-        if (init) {
-            config$2.unmask.forEach(function (x) { return x.indexOf("!" /* Constant.Bang */) < 0 ? unmask.push(x) : override.push(x.substr(1)); });
+function wait() {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!pauseTask) return [3 /*break*/, 2];
+                    return [4 /*yield*/, pauseTask];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2: return [2 /*return*/, new Promise(function (resolve) {
+                        requestIdleCallback(resolve, { timeout: idleTimeout });
+                    })];
+            }
+        });
+    });
+}
+// Use native implementation of requestIdleCallback if it exists.
+// Otherwise, fall back to a custom implementation using requestAnimationFrame & MessageChannel.
+// While it's not possible to build a perfect polyfill given the nature of this API, the following code attempts to get close.
+// Background context: requestAnimationFrame invokes the js code right before: style, layout and paint computation within the frame.
+// This means, that any code that runs as part of requestAnimationFrame will by default be blocking in nature. Not what we want.
+// For non-blocking behavior, We need to know when browser has finished painting. This can be accomplished in two different ways (hacks):
+//   (1) Use MessageChannel to pass the message, and browser will receive the message right after paint event has occured.
+//   (2) Use setTimeout call within requestAnimationFrame. This also works, but there's a risk that browser may throttle setTimeout calls.
+// Given this information, we are currently using (1) from above. More information on (2) as well as some additional context is below:
+// https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Performance_best_practices_for_Firefox_fe_engineers
+function requestIdleCallbackPolyfill(callback, options) {
+    var startTime = performance.now();
+    var channel = new MessageChannel();
+    var incoming = channel.port1;
+    var outgoing = channel.port2;
+    incoming.onmessage = function (event) {
+        var currentTime = performance.now();
+        var elapsed = currentTime - startTime;
+        var duration = currentTime - event.data;
+        if (duration > 30 /* Setting.LongTask */ && elapsed < options.timeout) {
+            requestAnimationFrame(function () { outgoing.postMessage(currentTime); });
         }
-        // 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$2.regions.forEach(function (x) { return root.querySelectorAll(x[1]).forEach(function (e) { return observe$1(e, "".concat(x[0])); }); }); // Regions
-            config$2.mask.forEach(function (x) { return root.querySelectorAll(x).forEach(function (e) { return privacyMap.set(e, 3 /* Privacy.TextImage */); }); }); // Masked Elements
-            config$2.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
+        else {
+            var didTimeout_1 = elapsed > options.timeout;
+            callback({
+                didTimeout: didTimeout_1,
+                timeRemaining: function () { return didTimeout_1 ? 30 /* Setting.LongTask */ : Math.max(0, 30 /* Setting.LongTask */ - duration); }
+            });
         }
-    }
-    catch (e) {
-        log$1(5 /* Code.Selector */, 1 /* Severity.Warning */, e ? e.name : null);
-    }
+    };
+    requestAnimationFrame(function () { outgoing.postMessage(performance.now()); });
 }
-function getId(node, autogen) {
-    if (autogen === void 0) { autogen = false; }
-    if (node === null) {
-        return null;
+var requestIdleCallback = window["requestIdleCallback"] || requestIdleCallbackPolyfill;
+
+var state$9 = [];
+function start$y() {
+    reset$m();
+}
+function observe$c(root) {
+    bind(root, "change", recompute$8, true);
+}
+function recompute$8(evt) {
+    recompute$8.dn = 5 /* FunctionNames.ChangeRecompute */;
+    var element = target(evt);
+    if (element) {
+        var value = element.value;
+        var checksum = value && value.length >= 5 /* Setting.WordLength */ && config$2.fraud && "password,secret,pass,social,ssn,code,hidden" /* Mask.Exclude */.indexOf(element.type) === -1 ? hash(value, 28 /* 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 */));
     }
-    var id = idMap.get(node);
-    if (!id && autogen) {
-        id = index++;
-        idMap.set(node, id);
+}
+function reset$m() {
+    state$9 = [];
+}
+function stop$w() {
+    reset$m();
+}
+
+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 id ? id : null;
+    return output;
+}
+
+var UserInputTags = ["input", "textarea", "radio", "button", "canvas"];
+var state$8 = [];
+function start$x() {
+    reset$l();
 }
-function add(node, parent, data, source) {
-    var parentId = parent ? getId(parent) : null;
-    // Do not add detached nodes
-    if ((!parent || !parentId) && node.host == null && node.nodeType !== Node.DOCUMENT_TYPE_NODE) {
-        return;
+function observe$b(root) {
+    bind(root, "click", handler$3.bind(this, 9 /* Event.Click */, root), true);
+}
+function handler$3(event, root, evt) {
+    handler$3.dn = 6 /* FunctionNames.ClickHandler */;
+    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 id = getId(node, true);
-    var previousId = getPreviousId(node);
-    var parentValue = null;
-    var regionId = exists(node) ? id : null;
-    var fraudId = fraudMap.has(node) ? fraudMap.get(node) : null;
-    var privacyId = config$2.content ? 1 /* Privacy.Sensitive */ : 3 /* Privacy.TextImage */;
-    if (parentId >= 0 && values[parentId]) {
-        parentValue = values[parentId];
-        parentValue.children.push(id);
-        regionId = regionId === null ? parentValue.region : regionId;
-        fraudId = fraudId === null ? parentValue.metadata.fraud : fraudId;
-        privacyId = parentValue.metadata.privacy;
+    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));
     }
-    // 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$1(node, data.attributes["data-clarity-region" /* Constant.RegionData */]);
-        regionId = id;
+    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) {
+        var textInfo = text(t);
+        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: textInfo.text,
+                link: a ? a.href : null,
+                hash: null,
+                trust: evt.isTrusted ? 1 /* BooleanFlag.True */ : 0 /* BooleanFlag.False */,
+                isFullText: textInfo.isFullText,
+            }
+        });
+        schedule$1(encode$3.bind(this, event));
     }
-    nodesMap.set(id, node);
-    values[id] = {
-        id: id,
-        parent: parentId,
-        previous: previousId,
-        children: [],
-        data: data,
-        selector: null,
-        hash: null,
-        region: regionId,
-        metadata: { active: true, suspend: false, privacy: privacyId, position: null, fraud: fraudId, size: null },
-    };
-    privacy(node, values[id], parentValue);
-    updateSelector(values[id]);
-    updateImageSize(values[id]);
-    track$6(id, source);
 }
-function update$1(node, parent, data, source) {
-    var id = getId(node);
-    var parentId = parent ? getId(parent) : null;
-    var previousId = getPreviousId(node);
-    var changed = false;
-    var parentChanged = false;
-    if (id in values) {
-        var value = values[id];
-        value.metadata.active = true;
-        // Handle case where internal ordering may have changed
-        if (value.previous !== previousId) {
-            changed = true;
-            value.previous = previousId;
-        }
-        // Handle case where parent might have been updated
-        if (value.parent !== parentId) {
-            changed = true;
-            var oldParentId = value.parent;
-            value.parent = parentId;
-            // Move this node to the right location under new parent
-            if (parentId !== null && parentId >= 0) {
-                var childIndex = previousId === null ? 0 : values[parentId].children.indexOf(previousId) + 1;
-                values[parentId].children.splice(childIndex, 0, id);
-                // Update region after the move
-                value.region = exists(node) ? id : values[parentId].region;
-            }
-            else {
-                // Mark this element as deleted if the parent has been updated to null
-                remove(id, source);
-            }
-            // Remove reference to this node from the old parent
-            if (oldParentId !== null && oldParentId >= 0) {
-                var nodeIndex = values[oldParentId].children.indexOf(id);
-                if (nodeIndex >= 0) {
-                    values[oldParentId].children.splice(nodeIndex, 1);
-                }
-            }
-            parentChanged = true;
-        }
-        // Update data
-        for (var key in data) {
-            if (diff(value["data"], data, key)) {
-                changed = true;
-                value["data"][key] = data[key];
+function link(node) {
+    while (node && node !== document) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            var element = node;
+            if (element.tagName === "A") {
+                return element;
             }
         }
-        // Update selector
-        updateSelector(value);
-        track$6(id, source, changed, parentChanged);
+        node = node.parentNode;
     }
+    return null;
 }
-function sameorigin(node) {
-    var output = false;
-    if (node.nodeType === Node.ELEMENT_NODE && node.tagName === "IFRAME" /* Constant.IFrameTag */) {
-        var frame = node;
-        // To determine if the iframe is same-origin or not, we try accessing it's contentDocument.
-        // If the browser throws an exception, we assume it's cross-origin and move on.
-        // However, if we do a get a valid document object back, we assume the contents are accessible and iframe is same-origin.
-        try {
-            var doc = frame.contentDocument;
-            if (doc) {
-                iframeMap.set(frame.contentDocument, frame);
-                output = true;
-            }
+function text(element) {
+    var output = null;
+    var isFullText = false;
+    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
+            var trimmedText = t.replace(/\s+/g, " " /* Constant.Space */).trim();
+            // Finally, send only first few characters as specified by the Setting
+            output = trimmedText.substring(0, 25 /* Setting.ClickText */);
+            isFullText = output.length === trimmedText.length;
         }
-        catch ( /* do nothing */_a) { /* do nothing */ }
-    }
-    return output;
-}
-function iframe(node) {
-    var doc = node.nodeType === Node.DOCUMENT_NODE ? node : null;
-    return doc && iframeMap.has(doc) ? iframeMap.get(doc) : null;
-}
-function privacy(node, value, parent) {
-    var _a;
-    var data = value.data;
-    var metadata = value.metadata;
-    var current = metadata.privacy;
-    var attributes = data.attributes || {};
-    var tag = data.tag.toUpperCase();
-    switch (true) {
-        case maskTags.indexOf(tag) >= 0:
-            var type = attributes["type" /* Constant.Type */];
-            var meta_1 = "" /* Constant.Empty */;
-            var excludedPrivacyAttributes_1 = ["class" /* Constant.Class */, "style" /* Constant.Style */];
-            Object.keys(attributes)
-                .filter(function (x) { return !excludedPrivacyAttributes_1.includes(x); })
-                .forEach(function (x) { return (meta_1 += attributes[x].toLowerCase()); });
-            var exclude = maskExclude.some(function (x) { return meta_1.indexOf(x) >= 0; });
-            // Regardless of privacy mode, always mask off user input from input boxes or drop downs with two exceptions:
-            // (1) The node is detected to be one of the excluded fields, in which case we drop everything
-            // (2) The node's type is one of the allowed types (like checkboxes)
-            metadata.privacy = tag === "INPUT" /* Constant.InputTag */ && maskDisable.indexOf(type) >= 0 ? current : (exclude ? 4 /* Privacy.Exclude */ : 2 /* Privacy.Text */);
-            break;
-        case "data-clarity-mask" /* Constant.MaskData */ in attributes:
-            metadata.privacy = 3 /* Privacy.TextImage */;
-            break;
-        case "data-clarity-unmask" /* Constant.UnmaskData */ in attributes:
-            metadata.privacy = 0 /* Privacy.None */;
-            break;
-        case privacyMap.has(node):
-            // If this node was explicitly configured to contain sensitive content, honor that privacy setting
-            metadata.privacy = privacyMap.get(node);
-            break;
-        case fraudMap.has(node):
-            // If this node was explicitly configured to be evaluated for fraud, then also mask content
-            metadata.privacy = 2 /* Privacy.Text */;
-            break;
-        case tag === "*T" /* Constant.TextTag */:
-            // If it's a text node belonging to a STYLE or TITLE tag or one of scrub exceptions, then capture content
-            var pTag = parent && parent.data ? parent.data.tag : "" /* Constant.Empty */;
-            var pSelector_1 = parent && parent.selector ? parent.selector[1 /* Selector.Default */] : "" /* Constant.Empty */;
-            var tags = ["STYLE" /* Constant.StyleTag */, "TITLE" /* Constant.TitleTag */, "svg:style" /* Constant.SvgStyle */];
-            metadata.privacy = tags.includes(pTag) || override.some(function (x) { return pSelector_1.indexOf(x) >= 0; }) ? 0 /* Privacy.None */ : current;
-            break;
-        case current === 1 /* Privacy.Sensitive */:
-            // In a mode where we mask sensitive information by default, look through class names to aggressively mask content
-            metadata.privacy = inspect(attributes["class" /* Constant.Class */], maskText, metadata);
-            break;
-        case tag === "IMG" /* Constant.ImageTag */:
-            // Mask images with blob src as it is not publicly available anyway.
-            if ((_a = attributes.src) === null || _a === void 0 ? void 0 : _a.startsWith('blob:')) {
-                metadata.privacy = 3 /* Privacy.TextImage */;
-            }
-            break;
     }
+    return { text: output, isFullText: isFullText ? 1 /* BooleanFlag.True */ : 0 /* BooleanFlag.False */ };
 }
-function inspect(input, lookup, metadata) {
-    if (input && lookup.some(function (x) { return input.indexOf(x) >= 0; })) {
-        return 2 /* Privacy.Text */;
+function reaction(element) {
+    if (element.nodeType === Node.ELEMENT_NODE) {
+        var tag = element.tagName.toLowerCase();
+        if (UserInputTags.indexOf(tag) >= 0) {
+            return 0 /* BooleanFlag.False */;
+        }
     }
-    return metadata.privacy;
+    return 1 /* BooleanFlag.True */;
 }
-function diff(a, b, field) {
-    if (typeof a[field] === "object" && typeof b[field] === "object") {
-        for (var key in a[field]) {
-            if (a[field][key] !== b[field][key]) {
-                return true;
-            }
-        }
-        for (var key in b[field]) {
-            if (b[field][key] !== a[field][key]) {
-                return 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)
+            };
         }
-        return false;
     }
-    return a[field] !== b[field];
+    return box;
 }
-function position(parent, child) {
-    child.metadata.position = 1;
-    var idx = parent ? parent.children.indexOf(child.id) : -1;
-    while (idx-- > 0) {
-        var sibling = values[parent.children[idx]];
-        if (child.data.tag === sibling.data.tag) {
-            child.metadata.position = sibling.metadata.position + 1;
-            break;
+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 child.metadata.position;
+    return 0 /* BrowsingContext.Self */;
 }
-function updateSelector(value) {
-    var parent = value.parent && value.parent in values ? values[value.parent] : null;
-    var prefix = parent ? parent.selector : null;
-    var d = value.data;
-    var p = position(parent, value);
-    var s = { id: value.id, tag: d.tag, prefix: prefix, position: p, attributes: d.attributes };
-    value.selector = [get$1(s, 0 /* Selector.Alpha */), get$1(s, 1 /* Selector.Beta */)];
-    value.hash = value.selector.map(function (x) { return x ? hash(x) : null; });
-    value.hash.forEach(function (h) { return hashMap[h] = value.id; });
+function reset$l() {
+    state$8 = [];
 }
-function hashText(hash) {
-    var id = lookup(hash);
-    var node = getNode(id);
-    return node !== null && node.textContent !== null ? node.textContent.substr(0, 25 /* Setting.ClickText */) : '';
+function stop$v() {
+    reset$l();
+}
+
+var state$7 = [];
+function start$w() {
+    reset$k();
 }
-function getNode(id) {
-    return nodesMap.has(id) ? nodesMap.get(id) : null;
+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 getValue(id) {
-    if (id in values) {
-        return values[id];
-    }
-    return null;
+function recompute$7(action, evt) {
+    recompute$7.dn = 7 /* FunctionNames.ClipboardRecompute */;
+    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 get(node) {
-    var id = getId(node);
-    return id in values ? values[id] : null;
+function reset$k() {
+    state$7 = [];
 }
-function lookup(hash) {
-    return hash in hashMap ? hashMap[hash] : null;
+function stop$u() {
+    reset$k();
+}
+
+var timeout$6 = null;
+var state$6 = [];
+function start$v() {
+    reset$j();
 }
-function has(node) {
-    return nodesMap.has(getId(node));
+function observe$9(root) {
+    bind(root, "input", recompute$6, true);
 }
-function updates$2() {
-    var output = [];
-    for (var _i = 0, updateMap_1 = updateMap; _i < updateMap_1.length; _i++) {
-        var id = updateMap_1[_i];
-        if (id in values) {
-            output.push(values[id]);
+function recompute$6(evt) {
+    recompute$6.dn = 9 /* FunctionNames.InputRecompute */;
+    var input = target(evt);
+    var value = get(input);
+    if (input && input.type && value) {
+        var v = input.value;
+        var t = input.type;
+        switch (input.type) {
+            case "radio":
+            case "checkbox":
+                v = input.checked ? "true" : "false";
+                break;
+        }
+        var data = { target: input, value: v, type: t };
+        // 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();
         }
+        state$6.push({ time: time(evt), event: 27 /* Event.Input */, data: data });
+        clearTimeout(timeout$6);
+        timeout$6 = setTimeout(process$7, 1000 /* Setting.InputLookAhead */, 27 /* Event.Input */);
     }
-    updateMap = [];
-    return output;
 }
-function remove(id, source) {
-    if (id in values) {
-        var value = values[id];
-        value.metadata.active = false;
-        value.parent = null;
-        track$6(id, source);
-        // Clean up node references for removed nodes
-        removeNodeFromNodesMap(id);
-    }
+function process$7(event) {
+    schedule$1(encode$3.bind(this, event));
 }
-function removeNodeFromNodesMap(id) {
-    // Shadow dom roots shouldn't be deleted, 
-    // we should keep listening to the mutations there even they're not rendered in the DOM.
-    if (nodesMap.get(id).nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-        return;
-    }
-    nodesMap.delete(id);
-    var value = id in values ? values[id] : null;
-    if (value && value.children) {
-        for (var _i = 0, _a = value.children; _i < _a.length; _i++) {
-            var childId = _a[_i];
-            removeNodeFromNodesMap(childId);
-        }
-    }
+function reset$j() {
+    state$6 = [];
 }
-function updateImageSize(value) {
-    // If this element is a image node, and is masked, then track box model for the current element
-    if (value.data.tag === "IMG" /* Constant.ImageTag */ && value.metadata.privacy === 3 /* Privacy.TextImage */) {
-        var img_1 = getNode(value.id);
-        // We will not capture the natural image dimensions until it loads. 
-        if (img_1 && (!img_1.complete || img_1.naturalWidth === 0)) {
-            // This will trigger mutation to update the original width and height after image loads.
-            bind(img_1, 'load', function () {
-                img_1.setAttribute('data-clarity-loaded', "".concat(shortid()));
-            });
-        }
-        value.metadata.size = [];
-    }
-}
-function getPreviousId(node) {
-    var id = null;
-    // Some nodes may not have an ID by design since Clarity skips over tags like SCRIPT, NOSCRIPT, META, COMMENTS, etc..
-    // In that case, we keep going back and check for their sibling until we find a sibling with ID or no more sibling nodes are left.
-    while (id === null && node.previousSibling) {
-        id = getId(node.previousSibling);
-        node = node.previousSibling;
-    }
-    return id;
-}
-function track$6(id, source, changed, parentChanged) {
-    if (changed === void 0) { changed = true; }
-    if (parentChanged === void 0) { parentChanged = false; }
-    // Keep track of the order in which mutations happened, they may not be sequential
-    // Edge case: If an element is added later on, and pre-discovered element is moved as a child.
-    // In that case, we need to reorder the pre-discovered element in the update list to keep visualization consistent.
-    var uIndex = updateMap.indexOf(id);
-    if (uIndex >= 0 && source === 1 /* Source.ChildListAdd */ && parentChanged) {
-        updateMap.splice(uIndex, 1);
-        updateMap.push(id);
-    }
-    else if (uIndex === -1 && changed) {
-        updateMap.push(id);
-    }
+function stop$t() {
+    clearTimeout(timeout$6);
+    reset$j();
 }
 
-var dom = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    add: add,
-    get: get,
-    getId: getId,
-    getNode: getNode,
-    getValue: getValue,
-    has: has,
-    hashText: hashText,
-    iframe: iframe,
-    lookup: lookup,
-    parse: parse$1,
-    sameorigin: sameorigin,
-    start: start$z,
-    stop: stop$x,
-    update: update$1,
-    updates: updates$2
-});
-
-// Track the start time to be able to compute duration at the end of the task
-var idleTimeout = 5000;
-var tracker = {};
-var queuedTasks = [];
-var activeTask = null;
-var pauseTask = null;
-var resumeResolve = null;
-function pause$1() {
-    if (pauseTask === null) {
-        pauseTask = new Promise(function (resolve) {
-            resumeResolve = resolve;
-        });
-    }
-}
-function resume$1() {
-    if (pauseTask) {
-        resumeResolve();
-        pauseTask = null;
-        if (activeTask === null) {
-            run();
-        }
-    }
+var state$5 = [];
+var timeout$5 = null;
+var hasPrimaryTouch = false;
+var primaryTouchId = 0;
+var activeTouchPointIds = new Set();
+function start$u() {
+    reset$i();
 }
-function reset$l() {
-    tracker = {};
-    queuedTasks = [];
-    activeTask = null;
-    pauseTask = null;
+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 schedule$1(task, priority) {
-    if (priority === void 0) { priority = 0 /* Priority.Normal */; }
-    return __awaiter(this, void 0, void 0, function () {
-        var _i, queuedTasks_1, q, promise;
-        return __generator(this, function (_a) {
-            // If this task is already scheduled, skip it
-            for (_i = 0, queuedTasks_1 = queuedTasks; _i < queuedTasks_1.length; _i++) {
-                q = queuedTasks_1[_i];
-                if (q.task === task) {
-                    return [2 /*return*/];
-                }
-            }
-            promise = new Promise(function (resolve) {
-                var insert = priority === 1 /* Priority.High */ ? "unshift" : "push";
-                // Queue this task for asynchronous execution later
-                // We also store a unique page identifier (id) along with the task to ensure
-                // ensure that we do not accidentally execute this task in context of a different page
-                queuedTasks[insert]({ task: task, resolve: resolve, id: id() });
-            });
-            // If there is no active task running, and Clarity is not in pause state,
-            // invoke the first task in the queue synchronously. This ensures that we don't yield the thread during unload event
-            if (activeTask === null && pauseTask === null) {
-                run();
-            }
-            return [2 /*return*/, promise];
-        });
-    });
+function mouse(event, root, evt) {
+    mouse.dn = 10 /* FunctionNames.PointerMouse */;
+    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$2({ time: time(evt), event: event, data: { target: target(evt), x: x, y: y } });
+    }
 }
-function run() {
-    var entry = queuedTasks.shift();
-    if (entry) {
-        activeTask = entry;
-        entry.task().then(function () {
-            // Bail out if the context in which this task was operating is different from the current page
-            // An example scenario where task could span across pages is Single Page Applications (SPA)
-            // A task that started on page #1, but completes on page #2
-            if (entry.id !== id()) {
-                return;
+function touch(event, root, evt) {
+    touch.dn = 11 /* FunctionNames.PointerTouch */;
+    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;
+            // We cannot rely on identifier to determine primary touch as its value doesn't always start with 0.
+            // Safari/Webkit uses the address of the UITouch object as the identifier value for each touch point.
+            var id = "identifier" in entry ? entry["identifier"] : undefined;
+            switch (event) {
+                case 17 /* Event.TouchStart */:
+                    if (activeTouchPointIds.size === 0) {
+                        // Track presence of primary touch separately to handle scenarios when same id is repeated
+                        hasPrimaryTouch = true;
+                        primaryTouchId = id;
+                    }
+                    activeTouchPointIds.add(id);
+                    break;
+                case 18 /* Event.TouchEnd */:
+                case 20 /* Event.TouchCancel */:
+                    activeTouchPointIds.delete(id);
+                    break;
             }
-            entry.resolve();
-            activeTask = null; // Reset active task back to null now that the promise is resolved
-            run();
-        }).catch(function (error) {
-            // If one of the scheduled tasks failed, log, recover and continue processing rest of the tasks
-            if (entry.id !== id()) {
-                return;
+            var isPrimary = hasPrimaryTouch && primaryTouchId === id;
+            // 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, id: id, isPrimary: isPrimary } });
             }
-            if (error) {
-                log$1(0 /* Code.RunTask */, 1 /* Severity.Warning */, error.name, error.message, error.stack);
+            // Reset primary touch point id once touch event ends
+            if (event === 20 /* Event.TouchCancel */ || event === 18 /* Event.TouchEnd */) {
+                if (primaryTouchId === id) {
+                    hasPrimaryTouch = false;
+                }
             }
-            activeTask = null;
-            run();
-        });
+        }
     }
 }
-function state$a(timer) {
-    var id = key(timer);
-    if (id in tracker) {
-        var elapsed = performance.now() - tracker[id].start;
-        return (elapsed > tracker[id].yield) ? 0 /* Task.Wait */ : 1 /* Task.Run */;
+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$5);
+            timeout$5 = setTimeout(process$6, 500 /* Setting.LookAhead */, current.event);
+            break;
+        default:
+            state$5.push(current);
+            process$6(current.event);
+            break;
     }
-    // If this task is no longer being tracked, send stop message to the caller
-    return 2 /* Task.Stop */;
 }
-function start$y(timer) {
-    tracker[key(timer)] = { start: performance.now(), calls: 0, yield: 30 /* Setting.LongTask */ };
+function process$6(event) {
+    schedule$1(encode$3.bind(this, event));
 }
-function restart$2(timer) {
-    var id = key(timer);
-    if (tracker && tracker[id]) {
-        var c = tracker[id].calls;
-        var y = tracker[id].yield;
-        start$y(timer);
-        tracker[id].calls = c + 1;
-        tracker[id].yield = y;
-    }
+function reset$i() {
+    state$5 = [];
 }
-function stop$w(timer) {
-    var end = performance.now();
-    var id = key(timer);
-    var duration = end - tracker[id].start;
-    sum(timer.cost, duration);
-    count$1(5 /* Metric.InvokeCount */);
-    // For the first execution, which is synchronous, time is automatically counted towards TotalDuration.
-    // However, for subsequent asynchronous runs, we need to manually update TotalDuration metric.
-    if (tracker[id].calls > 0) {
-        sum(4 /* Metric.TotalCost */, duration);
+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$s() {
+    clearTimeout(timeout$5);
+    // Send out any pending pointer events in the pipeline
+    if (state$5.length > 0) {
+        process$6(state$5[state$5.length - 1].event);
     }
+}
+
+var data$c;
+var timeout$4 = null;
+var initialStateLogged = false;
+function start$t() {
+    initialStateLogged = false;
+    bind(window, "resize", recompute$5);
+    recompute$5();
 }
-function suspend$1(timer) {
-    return __awaiter(this, void 0, void 0, function () {
-        var id, _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    id = key(timer);
-                    if (!(id in tracker)) return [3 /*break*/, 2];
-                    stop$w(timer);
-                    _a = tracker[id];
-                    return [4 /*yield*/, wait()];
-                case 1:
-                    _a.yield = (_b.sent()).timeRemaining();
-                    restart$2(timer);
-                    _b.label = 2;
-                case 2: 
-                // After we are done with suspending task, ensure that we are still operating in the right context
-                // If the task is still being tracked, continue running the task, otherwise ask caller to stop execution
-                return [2 /*return*/, id in tracker ? 1 /* Task.Run */ : 2 /* Task.Stop */];
-            }
-        });
-    });
-}
-function key(timer) {
-    return "".concat(timer.id, ".").concat(timer.cost);
+function recompute$5() {
+    recompute$5.dn = 12 /* FunctionNames.ResizeRecompute */;
+    var de = document.documentElement;
+    // window.innerWidth includes width of the scrollbar and is not a true representation of the viewport width.
+    // Therefore, when possible, use documentElement's clientWidth property.
+    data$c = {
+        width: de && "clientWidth" in de ? Math.min(de.clientWidth, window.innerWidth) : window.innerWidth,
+        height: de && "clientHeight" in de ? Math.min(de.clientHeight, window.innerHeight) : window.innerHeight,
+    };
+    if (initialStateLogged) {
+        clearTimeout(timeout$4);
+        timeout$4 = setTimeout(process$5, 500 /* Setting.LookAhead */, 11 /* Event.Resize */);
+    }
+    else {
+        encode$3(11 /* Event.Resize */);
+        initialStateLogged = true;
+    }
 }
-function wait() {
-    return __awaiter(this, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!pauseTask) return [3 /*break*/, 2];
-                    return [4 /*yield*/, pauseTask];
-                case 1:
-                    _a.sent();
-                    _a.label = 2;
-                case 2: return [2 /*return*/, new Promise(function (resolve) {
-                        requestIdleCallback(resolve, { timeout: idleTimeout });
-                    })];
-            }
-        });
-    });
+function process$5(event) {
+    schedule$1(encode$3.bind(this, event));
 }
-// Use native implementation of requestIdleCallback if it exists.
-// Otherwise, fall back to a custom implementation using requestAnimationFrame & MessageChannel.
-// While it's not possible to build a perfect polyfill given the nature of this API, the following code attempts to get close.
-// Background context: requestAnimationFrame invokes the js code right before: style, layout and paint computation within the frame.
-// This means, that any code that runs as part of requestAnimationFrame will by default be blocking in nature. Not what we want.
-// For non-blocking behavior, We need to know when browser has finished painting. This can be accomplished in two different ways (hacks):
-//   (1) Use MessageChannel to pass the message, and browser will receive the message right after paint event has occured.
-//   (2) Use setTimeout call within requestAnimationFrame. This also works, but there's a risk that browser may throttle setTimeout calls.
-// Given this information, we are currently using (1) from above. More information on (2) as well as some additional context is below:
-// https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Performance_best_practices_for_Firefox_fe_engineers
-function requestIdleCallbackPolyfill(callback, options) {
-    var startTime = performance.now();
-    var channel = new MessageChannel();
-    var incoming = channel.port1;
-    var outgoing = channel.port2;
-    incoming.onmessage = function (event) {
-        var currentTime = performance.now();
-        var elapsed = currentTime - startTime;
-        var duration = currentTime - event.data;
-        if (duration > 30 /* Setting.LongTask */ && elapsed < options.timeout) {
-            requestAnimationFrame(function () { outgoing.postMessage(currentTime); });
-        }
-        else {
-            var didTimeout_1 = elapsed > options.timeout;
-            callback({
-                didTimeout: didTimeout_1,
-                timeRemaining: function () { return didTimeout_1 ? 30 /* Setting.LongTask */ : Math.max(0, 30 /* Setting.LongTask */ - duration); }
-            });
-        }
-    };
-    requestAnimationFrame(function () { outgoing.postMessage(performance.now()); });
+function reset$h() {
+    data$c = null;
+    clearTimeout(timeout$4);
 }
-var requestIdleCallback = window["requestIdleCallback"] || requestIdleCallbackPolyfill;
-
-// Following code takes an array of tokens and transforms it to optimize for repeating tokens and make it efficient to send over the wire
-// The way it works is that it iterate over all tokens and checks if the current token was already seen in the tokens array so far
-// If so, it replaces the token with its reference (index). This helps us save bytes by not repeating the same value twice.
-// E.g. If tokens array is: ["hello", "world", "coding", "language", "world", "language", "example"]
-// Then the resulting tokens array after following code execution would be: ["hello", "world", "coding", "language", [1, 3], "example"]
-// Where [1,3] points to tokens[1] => "world" and tokens[3] => "language"
-function tokenize (tokens) {
-    var output = [];
-    var lookup = {};
-    var pointer = 0;
-    var reference = null;
-    for (var i = 0; i < tokens.length; i++) {
-        // Only optimize for string values
-        if (typeof tokens[i] === "string" /* Constant.String */) {
-            var token = tokens[i];
-            var index = lookup[token] || -1;
-            if (index >= 0) {
-                if (reference) {
-                    reference.push(index);
-                }
-                else {
-                    reference = [index];
-                    output.push(reference);
-                    pointer++;
-                }
-            }
-            else {
-                reference = null;
-                output.push(token);
-                lookup[token] = pointer++;
-            }
-        }
-        else {
-            // If the value is anything other than string, append it as it is to the output array
-            // And, also increment the pointer to stay in sync with output array
-            reference = null;
-            output.push(tokens[i]);
-            pointer++;
-        }
-    }
-    return output;
+function stop$r() {
+    reset$h();
 }
 
-var data$c;
-function reset$k() {
-    data$c = null;
+var state$4 = [];
+var initialTop = null;
+var initialBottom = null;
+var timeout$3 = null;
+function start$s() {
+    state$4 = [];
+    recompute$4();
 }
-function start$x() {
-    reset$k();
-    compute$9();
+function observe$7(root) {
+    var frame = iframe(root);
+    var node = frame ? frame.contentWindow : (root === document ? window : root);
+    bind(node, "scroll", recompute$4, true);
 }
-function compute$9() {
-    compute$9.dn = 19 /* FunctionNames.DocumentCompute */;
-    var body = document.body;
-    var d = document.documentElement;
-    var bodyClientWidth = body ? body.clientWidth : null;
-    var bodyScrollWidth = body ? body.scrollWidth : null;
-    var bodyOffsetWidth = body ? body.offsetWidth : null;
-    var documentClientWidth = d ? d.clientWidth : null;
-    var documentScrollWidth = d ? d.scrollWidth : null;
-    var documentOffsetWidth = d ? d.offsetWidth : null;
-    var width = Math.max(bodyClientWidth, bodyScrollWidth, bodyOffsetWidth, documentClientWidth, documentScrollWidth, documentOffsetWidth);
-    var bodyClientHeight = body ? body.clientHeight : null;
-    var bodyScrollHeight = body ? body.scrollHeight : null;
-    var bodyOffsetHeight = body ? body.offsetHeight : null;
-    var documentClientHeight = d ? d.clientHeight : null;
-    var documentScrollHeight = d ? d.scrollHeight : null;
-    var documentOffsetHeight = d ? d.offsetHeight : null;
-    var height = Math.max(bodyClientHeight, bodyScrollHeight, bodyOffsetHeight, documentClientHeight, documentScrollHeight, documentOffsetHeight);
-    // Check that width or height has changed from before, and also that width & height are not null values
-    if ((data$c === null || width !== data$c.width || height !== data$c.height) && width !== null && height !== null) {
-        data$c = { width: width, height: height };
-        encode$4(8 /* Event.Document */);
+function recompute$4(event) {
+    if (event === void 0) { event = null; }
+    recompute$4.dn = 13 /* FunctionNames.ScrollRecompute */;
+    var w = window;
+    var de = document.documentElement;
+    var element = event ? target(event) : de;
+    // If the target is a Document node, then identify corresponding documentElement and window for this document
+    if (element && element.nodeType === Node.DOCUMENT_NODE) {
+        var frame = iframe(element);
+        w = frame ? frame.contentWindow : w;
+        element = de = element.documentElement;
+    }
+    // Edge doesn't support scrollTop position on document.documentElement.
+    // For cross browser compatibility, looking up pageYOffset on window if the scroll is on document.
+    // And, if for some reason that is not available, fall back to looking up scrollTop on document.documentElement.
+    var x = element === de && "pageXOffset" in w ? Math.round(w.pageXOffset) : Math.round(element.scrollLeft);
+    var y = element === de && "pageYOffset" in w ? Math.round(w.pageYOffset) : Math.round(element.scrollTop);
+    var width = window.innerWidth;
+    var height = window.innerHeight;
+    var xPosition = width / 3;
+    var yOffset = width > height ? height * 0.15 : height * 0.2;
+    var startYPosition = yOffset;
+    var endYPosition = height - yOffset;
+    var top = getPositionNode(xPosition, startYPosition);
+    var bottom = getPositionNode(xPosition, endYPosition);
+    var current = { time: time(event), event: 10 /* Event.Scroll */, data: { target: element, x: x, y: y, top: top, bottom: bottom } };
+    // We don't send any scroll events if this is the first event and the current position is top (0,0)
+    if ((event === null && x === 0 && y === 0) || (x === null || y === null)) {
+        initialTop = top;
+        initialBottom = bottom;
+        return;
+    }
+    var length = state$4.length;
+    var last = length > 1 ? state$4[length - 2] : null;
+    if (last && similar(last, current)) {
+        state$4.pop();
     }
+    state$4.push(current);
+    clearTimeout(timeout$3);
+    timeout$3 = setTimeout(process$4, 500 /* Setting.LookAhead */, 10 /* Event.Scroll */);
 }
-function stop$v() {
-    reset$k();
-}
-
-var state$9 = [];
-function start$w() {
-    reset$j();
+function getPositionNode(x, y) {
+    var _a, _b;
+    var node;
+    if ("caretPositionFromPoint" in document) {
+        node = (_a = document.caretPositionFromPoint(x, y)) === null || _a === void 0 ? void 0 : _a.offsetNode;
+    }
+    else if ("caretRangeFromPoint" in document) {
+        node = (_b = document.caretRangeFromPoint(x, y)) === null || _b === void 0 ? void 0 : _b.startContainer;
+    }
+    if (!node) {
+        node = document.elementFromPoint(x, y);
+    }
+    if (node && node.nodeType === Node.TEXT_NODE) {
+        node = node.parentNode;
+    }
+    return node;
 }
-function observe$c(root) {
-    bind(root, "change", recompute$8, true);
+function reset$g() {
+    state$4 = [];
+    initialTop = null;
+    initialBottom = null;
 }
-function recompute$8(evt) {
-    recompute$8.dn = 5 /* FunctionNames.ChangeRecompute */;
-    var element = target(evt);
-    if (element) {
-        var value = element.value;
-        var checksum = value && value.length >= 5 /* Setting.WordLength */ && config$2.fraud && "password,secret,pass,social,ssn,code,hidden" /* Mask.Exclude */.indexOf(element.type) === -1 ? hash(value, 28 /* 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 process$4(event) {
+    schedule$1(encode$3.bind(this, event));
 }
-function reset$j() {
-    state$9 = [];
+function similar(last, current) {
+    var dx = last.data.x - current.data.x;
+    var dy = last.data.y - current.data.y;
+    return (dx * dx + dy * dy < 20 /* Setting.Distance */ * 20 /* Setting.Distance */) && (current.time - last.time < 25 /* Setting.Interval */);
 }
-function stop$u() {
-    reset$j();
-}
-
-function offset(element) {
-    var output = { x: 0, y: 0 };
-    // Walk up the chain to ensure we compute offset distance correctly
-    // In case where we may have nested IFRAMEs, we keep walking up until we get to the top most parent page
-    if (element && element.offsetParent) {
-        do {
-            var parent_1 = element.offsetParent;
-            var frame = parent_1 === null ? iframe(element.ownerDocument) : null;
-            output.x += element.offsetLeft;
-            output.y += element.offsetTop;
-            element = frame ? frame : parent_1;
-        } while (element);
+function compute$9() {
+    var _a, _b;
+    compute$9.dn = 14 /* FunctionNames.ScrollCompute */;
+    if (initialTop) {
+        var top_1 = metadata$2(initialTop, null);
+        log(31 /* Dimension.InitialScrollTop */, (_a = top_1 === null || top_1 === void 0 ? void 0 : top_1.hash) === null || _a === void 0 ? void 0 : _a.join("." /* Constant.Dot */));
     }
-    return output;
+    if (initialBottom) {
+        var bottom = metadata$2(initialBottom, null);
+        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$q() {
+    clearTimeout(timeout$3);
+    state$4 = [];
+    initialTop = null;
+    initialBottom = null;
 }
 
-var UserInputTags = ["input", "textarea", "radio", "button", "canvas"];
-var state$8 = [];
-function start$v() {
-    reset$i();
+var data$b = null;
+var previous = null;
+var timeout$2 = null;
+function start$r() {
+    reset$f();
 }
-function observe$b(root) {
-    bind(root, "click", handler$3.bind(this, 9 /* Event.Click */, root), true);
+function observe$6(root) {
+    bind(root, "selectstart", recompute$3.bind(this, root), true);
+    bind(root, "selectionchange", recompute$3.bind(this, root), true);
 }
-function handler$3(event, root, evt) {
-    handler$3.dn = 6 /* FunctionNames.ClickHandler */;
-    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;
+function recompute$3(root) {
+    recompute$3.dn = 15 /* FunctionNames.SelectionRecompute */;
+    var doc = root.nodeType === Node.DOCUMENT_NODE ? root : document;
+    var current = doc.getSelection();
+    // Bail out if we don't have a valid selection
+    if (current === null) {
+        return;
     }
-    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));
+    // Bail out if we got a valid selection but not valid nodes
+    // In Edge, selectionchange gets fired even on interactions like right clicks and
+    // can result in null anchorNode and focusNode if there was no previous selection on page
+    // Also, ignore any selections that start and end at the exact same point
+    if ((current.anchorNode === null && current.focusNode === null) ||
+        (current.anchorNode === current.focusNode && current.anchorOffset === current.focusOffset)) {
+        return;
     }
-    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) {
-        var textInfo = text(t);
-        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: textInfo.text,
-                link: a ? a.href : null,
-                hash: null,
-                trust: evt.isTrusted ? 1 /* BooleanFlag.True */ : 0 /* BooleanFlag.False */,
-                isFullText: textInfo.isFullText,
-            }
-        });
-        schedule$1(encode$3.bind(this, event));
+    var startNode = data$b.start ? data$b.start : null;
+    if (previous !== null && data$b.start !== null && startNode !== current.anchorNode) {
+        clearTimeout(timeout$2);
+        process$3(21 /* Event.Selection */);
     }
+    data$b = {
+        start: current.anchorNode,
+        startOffset: current.anchorOffset,
+        end: current.focusNode,
+        endOffset: current.focusOffset
+    };
+    previous = current;
+    clearTimeout(timeout$2);
+    timeout$2 = setTimeout(process$3, 500 /* Setting.LookAhead */, 21 /* Event.Selection */);
 }
-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 process$3(event) {
+    schedule$1(encode$3.bind(this, event));
 }
-function text(element) {
-    var output = null;
-    var isFullText = false;
-    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
-            var trimmedText = t.replace(/\s+/g, " " /* Constant.Space */).trim();
-            // Finally, send only first few characters as specified by the Setting
-            output = trimmedText.substring(0, 25 /* Setting.ClickText */);
-            isFullText = output.length === trimmedText.length;
-        }
-    }
-    return { text: output, isFullText: isFullText ? 1 /* BooleanFlag.True */ : 0 /* BooleanFlag.False */ };
+function reset$f() {
+    previous = null;
+    data$b = { start: 0, startOffset: 0, end: 0, endOffset: 0 };
 }
-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 stop$p() {
+    reset$f();
+    clearTimeout(timeout$2);
+}
+
+var state$3 = [];
+function start$q() {
+    reset$e();
 }
-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 observe$5(root) {
+    bind(root, "submit", recompute$2, true);
 }
-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 recompute$2(evt) {
+    recompute$2.dn = 16 /* FunctionNames.SubmitRecompute */;
+    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$i() {
-    state$8 = [];
+function reset$e() {
+    state$3 = [];
 }
-function stop$t() {
-    reset$i();
+function stop$o() {
+    reset$e();
 }
 
-var state$7 = [];
-function start$u() {
-    reset$h();
-}
-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);
+var data$a;
+function start$p() {
+    bind(window, "pagehide", recompute$1);
 }
-function recompute$7(action, evt) {
-    recompute$7.dn = 7 /* FunctionNames.ClipboardRecompute */;
-    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 recompute$1(evt) {
+    recompute$1.dn = 17 /* FunctionNames.UnloadRecompute */;
+    data$a = { name: evt.type, persisted: evt.persisted ? 1 /* BooleanFlag.True */ : 0 /* BooleanFlag.False */ };
+    encode$3(26 /* Event.Unload */, time(evt));
+    stop();
 }
-function reset$h() {
-    state$7 = [];
+function reset$d() {
+    data$a = null;
 }
-function stop$s() {
-    reset$h();
+function stop$n() {
+    reset$d();
 }
 
-var timeout$6 = null;
-var state$6 = [];
-function start$t() {
-    reset$g();
+var data$9;
+function start$o() {
+    bind(document, "visibilitychange", recompute);
+    recompute();
 }
-function observe$9(root) {
-    bind(root, "input", recompute$6, true);
+function recompute(evt) {
+    if (evt === void 0) { evt = null; }
+    recompute.dn = 18 /* FunctionNames.VisibilityRecompute */;
+    data$9 = { visible: "visibilityState" in document ? document.visibilityState : "default" };
+    encode$3(28 /* Event.Visibility */, time(evt));
 }
-function recompute$6(evt) {
-    recompute$6.dn = 9 /* FunctionNames.InputRecompute */;
-    var input = target(evt);
-    var value = get(input);
-    if (input && input.type && value) {
-        var v = input.value;
-        var t = input.type;
-        switch (input.type) {
-            case "radio":
-            case "checkbox":
-                v = input.checked ? "true" : "false";
-                break;
-        }
-        var data = { target: input, value: v, type: t };
-        // 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();
-        }
-        state$6.push({ time: time(evt), event: 27 /* Event.Input */, data: data });
-        clearTimeout(timeout$6);
-        timeout$6 = setTimeout(process$7, 1000 /* Setting.InputLookAhead */, 27 /* Event.Input */);
-    }
-}
-function process$7(event) {
-    schedule$1(encode$3.bind(this, event));
-}
-function reset$g() {
-    state$6 = [];
+function reset$c() {
+    data$9 = null;
 }
-function stop$r() {
-    clearTimeout(timeout$6);
-    reset$g();
+function stop$m() {
+    reset$c();
 }
 
-var state$5 = [];
-var timeout$5 = null;
-var hasPrimaryTouch = false;
-var primaryTouchId = 0;
-var activeTouchPointIds = new Set();
-function start$s() {
-    reset$f();
+function start$n() {
+    start$n.dn = 8 /* FunctionNames.InteractionStart */;
+    start$g();
+    start$x();
+    start$w();
+    start$u();
+    start$v();
+    start$t();
+    start$o();
+    start$s();
+    start$r();
+    start$y();
+    start$q();
+    start$p();
 }
-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 stop$l() {
+    stop$e();
+    stop$v();
+    stop$u();
+    stop$s();
+    stop$t();
+    stop$r();
+    stop$m();
+    stop$q();
+    stop$p();
+    stop$w();
+    stop$o();
+    stop$n();
 }
-function mouse(event, root, evt) {
-    mouse.dn = 10 /* FunctionNames.PointerMouse */;
-    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$2({ time: time(evt), event: event, data: { target: target(evt), x: x, y: y } });
+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);
     }
-}
-function touch(event, root, evt) {
-    touch.dn = 11 /* FunctionNames.PointerTouch */;
-    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;
-            // We cannot rely on identifier to determine primary touch as its value doesn't always start with 0.
-            // Safari/Webkit uses the address of the UITouch object as the identifier value for each touch point.
-            var id = "identifier" in entry ? entry["identifier"] : undefined;
-            switch (event) {
-                case 17 /* Event.TouchStart */:
-                    if (activeTouchPointIds.size === 0) {
-                        // Track presence of primary touch separately to handle scenarios when same id is repeated
-                        hasPrimaryTouch = true;
-                        primaryTouchId = id;
-                    }
-                    activeTouchPointIds.add(id);
-                    break;
-                case 18 /* Event.TouchEnd */:
-                case 20 /* Event.TouchCancel */:
-                    activeTouchPointIds.delete(id);
-                    break;
+}
+
+var interaction = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    observe: observe$4,
+    start: start$n,
+    stop: stop$l
+});
+
+// Following code takes an array of tokens and transforms it to optimize for repeating tokens and make it efficient to send over the wire
+// The way it works is that it iterate over all tokens and checks if the current token was already seen in the tokens array so far
+// If so, it replaces the token with its reference (index). This helps us save bytes by not repeating the same value twice.
+// E.g. If tokens array is: ["hello", "world", "coding", "language", "world", "language", "example"]
+// Then the resulting tokens array after following code execution would be: ["hello", "world", "coding", "language", [1, 3], "example"]
+// Where [1,3] points to tokens[1] => "world" and tokens[3] => "language"
+function tokenize (tokens) {
+    var output = [];
+    var lookup = {};
+    var pointer = 0;
+    var reference = null;
+    for (var i = 0; i < tokens.length; i++) {
+        // Only optimize for string values
+        if (typeof tokens[i] === "string" /* Constant.String */) {
+            var token = tokens[i];
+            var index = lookup[token] || -1;
+            if (index >= 0) {
+                if (reference) {
+                    reference.push(index);
+                }
+                else {
+                    reference = [index];
+                    output.push(reference);
+                    pointer++;
+                }
             }
-            var isPrimary = hasPrimaryTouch && primaryTouchId === id;
-            // 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, id: id, isPrimary: isPrimary } });
+            else {
+                reference = null;
+                output.push(token);
+                lookup[token] = pointer++;
             }
-            // Reset primary touch point id once touch event ends
-            if (event === 20 /* Event.TouchCancel */ || event === 18 /* Event.TouchEnd */) {
-                if (primaryTouchId === id) {
-                    hasPrimaryTouch = false;
+        }
+        else {
+            // If the value is anything other than string, append it as it is to the output array
+            // And, also increment the pointer to stay in sync with output array
+            reference = null;
+            output.push(tokens[i]);
+            pointer++;
+        }
+    }
+    return output;
+}
+
+var sheetUpdateState = [];
+var sheetAdoptionState = [];
+var replace = null;
+var replaceSync = null;
+var styleSheetId = 'claritySheetId';
+var styleSheetMap = {};
+var styleTimeMap = {};
+var documentNodes = [];
+var createdSheetIds = [];
+function start$m() {
+    if (window['CSSStyleSheet'] && CSSStyleSheet.prototype) {
+        if (replace === null) {
+            replace = CSSStyleSheet.prototype.replace;
+            CSSStyleSheet.prototype.replace = function () {
+                if (active()) {
+                    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 (createdSheetIds.indexOf(this[styleSheetId]) > -1) {
+                        trackStyleChange(time(), this[styleSheetId], 1 /* StyleSheetOperation.Replace */, arguments[0]);
+                    }
                 }
-            }
+                return replace.apply(this, arguments);
+            };
+        }
+        if (replaceSync === null) {
+            replaceSync = CSSStyleSheet.prototype.replaceSync;
+            CSSStyleSheet.prototype.replaceSync = function () {
+                if (active()) {
+                    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 (createdSheetIds.indexOf(this[styleSheetId]) > -1) {
+                        trackStyleChange(time(), this[styleSheetId], 2 /* StyleSheetOperation.ReplaceSync */, arguments[0]);
+                    }
+                }
+                return replaceSync.apply(this, arguments);
+            };
         }
     }
 }
-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$5);
-            timeout$5 = setTimeout(process$6, 500 /* Setting.LookAhead */, current.event);
-            break;
-        default:
-            state$5.push(current);
-            process$6(current.event);
-            break;
+function checkDocumentStyles(documentNode, timestamp) {
+    if (documentNodes.indexOf(documentNode) === -1) {
+        documentNodes.push(documentNode);
     }
-}
-function process$6(event) {
-    schedule$1(encode$3.bind(this, event));
-}
-function reset$f() {
-    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() {
-    clearTimeout(timeout$5);
-    // Send out any pending pointer events in the pipeline
-    if (state$5.length > 0) {
-        process$6(state$5[state$5.length - 1].event);
+    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;
     }
-}
-
-var data$b;
-var timeout$4 = null;
-var initialStateLogged = false;
-function start$r() {
-    initialStateLogged = false;
-    bind(window, "resize", recompute$5);
-    recompute$5();
-}
-function recompute$5() {
-    recompute$5.dn = 12 /* FunctionNames.ResizeRecompute */;
-    var de = document.documentElement;
-    // window.innerWidth includes width of the scrollbar and is not a true representation of the viewport width.
-    // Therefore, when possible, use documentElement's clientWidth property.
-    data$b = {
-        width: de && "clientWidth" in de ? Math.min(de.clientWidth, window.innerWidth) : window.innerWidth,
-        height: de && "clientHeight" in de ? Math.min(de.clientHeight, window.innerHeight) : window.innerHeight,
-    };
-    if (initialStateLogged) {
-        clearTimeout(timeout$4);
-        timeout$4 = setTimeout(process$5, 500 /* Setting.LookAhead */, 11 /* Event.Resize */);
+    max(36 /* Metric.ConstructedStyles */, 1);
+    var currentStyleSheets = [];
+    for (var _i = 0, _a = documentNode.adoptedStyleSheets; _i < _a.length; _i++) {
+        var styleSheet = _a[_i];
+        // If we haven't seen this style sheet 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[styleSheetId] || createdSheetIds.indexOf(styleSheet[styleSheetId]) === -1) {
+            styleSheet[styleSheetId] = shortid();
+            createdSheetIds.push(styleSheet[styleSheetId]);
+            trackStyleChange(timestamp, styleSheet[styleSheetId], 0 /* StyleSheetOperation.Create */);
+            trackStyleChange(timestamp, styleSheet[styleSheetId], 2 /* StyleSheetOperation.ReplaceSync */, getCssRules(styleSheet));
+        }
+        currentStyleSheets.push(styleSheet[styleSheetId]);
     }
-    else {
-        encode$3(11 /* Event.Resize */);
-        initialStateLogged = true;
+    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 process$5(event) {
-    schedule$1(encode$3.bind(this, event));
+function compute$8() {
+    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$e() {
-    data$b = null;
-    clearTimeout(timeout$4);
+function reset$b() {
+    sheetAdoptionState = [];
+    sheetUpdateState = [];
 }
-function stop$p() {
-    reset$e();
-}
-
-var state$4 = [];
-var initialTop = null;
-var initialBottom = null;
-var timeout$3 = null;
-function start$q() {
-    state$4 = [];
-    recompute$4();
+function stop$k() {
+    styleSheetMap = {};
+    styleTimeMap = {};
+    documentNodes = [];
+    createdSheetIds = [];
+    reset$b();
 }
-function observe$7(root) {
-    var frame = iframe(root);
-    var node = frame ? frame.contentWindow : (root === document ? window : root);
-    bind(node, "scroll", recompute$4, true);
+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 recompute$4(event) {
-    if (event === void 0) { event = null; }
-    recompute$4.dn = 13 /* FunctionNames.ScrollRecompute */;
-    var w = window;
-    var de = document.documentElement;
-    var element = event ? target(event) : de;
-    // If the target is a Document node, then identify corresponding documentElement and window for this document
-    if (element && element.nodeType === Node.DOCUMENT_NODE) {
-        var frame = iframe(element);
-        w = frame ? frame.contentWindow : w;
-        element = de = element.documentElement;
-    }
-    // Edge doesn't support scrollTop position on document.documentElement.
-    // For cross browser compatibility, looking up pageYOffset on window if the scroll is on document.
-    // And, if for some reason that is not available, fall back to looking up scrollTop on document.documentElement.
-    var x = element === de && "pageXOffset" in w ? Math.round(w.pageXOffset) : Math.round(element.scrollLeft);
-    var y = element === de && "pageYOffset" in w ? Math.round(w.pageYOffset) : Math.round(element.scrollTop);
-    var width = window.innerWidth;
-    var height = window.innerHeight;
-    var xPosition = width / 3;
-    var yOffset = width > height ? height * 0.15 : height * 0.2;
-    var startYPosition = yOffset;
-    var endYPosition = height - yOffset;
-    var top = getPositionNode(xPosition, startYPosition);
-    var bottom = getPositionNode(xPosition, endYPosition);
-    var current = { time: time(event), event: 10 /* Event.Scroll */, data: { target: element, x: x, y: y, top: top, bottom: bottom } };
-    // We don't send any scroll events if this is the first event and the current position is top (0,0)
-    if ((event === null && x === 0 && y === 0) || (x === null || y === null)) {
-        initialTop = top;
-        initialBottom = bottom;
-        return;
-    }
-    var length = state$4.length;
-    var last = length > 1 ? state$4[length - 2] : null;
-    if (last && similar(last, current)) {
-        state$4.pop();
-    }
-    state$4.push(current);
-    clearTimeout(timeout$3);
-    timeout$3 = setTimeout(process$4, 500 /* Setting.LookAhead */, 10 /* Event.Scroll */);
+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 getPositionNode(x, y) {
-    var _a, _b;
-    var node;
-    if ("caretPositionFromPoint" in document) {
-        node = (_a = document.caretPositionFromPoint(x, y)) === null || _a === void 0 ? void 0 : _a.offsetNode;
-    }
-    else if ("caretRangeFromPoint" in document) {
-        node = (_b = document.caretRangeFromPoint(x, y)) === null || _b === void 0 ? void 0 : _b.startContainer;
-    }
-    if (!node) {
-        node = document.elementFromPoint(x, y);
+function arraysEqual(a, b) {
+    if (a.length !== b.length) {
+        return false;
     }
-    if (node && node.nodeType === Node.TEXT_NODE) {
-        node = node.parentNode;
+    return a.every(function (value, index) { return value === b[index]; });
+}
+
+var state$2 = [];
+var elementAnimate = null;
+var animationPlay = null;
+var animationPause = null;
+var animationCommitStyles = null;
+var animationCancel = null;
+var animationFinish = null;
+var animationId = 'clarityAnimationId';
+var operationCount = 'clarityOperationCount';
+var maxOperations = 20;
+function start$l() {
+    if (window["Animation"] &&
+        window["Animation"].prototype &&
+        window["KeyframeEffect"] &&
+        window["KeyframeEffect"].prototype &&
+        window["KeyframeEffect"].prototype.getKeyframes &&
+        window["KeyframeEffect"].prototype.getTiming) {
+        reset$a();
+        overrideAnimationHelper(animationPlay, "play");
+        overrideAnimationHelper(animationPause, "pause");
+        overrideAnimationHelper(animationCommitStyles, "commitStyles");
+        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;
+            };
+        }
+        if (document.getAnimations) {
+            for (var _i = 0, _a = document.getAnimations(); _i < _a.length; _i++) {
+                var animation = _a[_i];
+                if (animation.playState === "finished") {
+                    trackAnimationOperation(animation, "finish");
+                }
+                else if (animation.playState === "paused" || animation.playState === "idle") {
+                    trackAnimationOperation(animation, "pause");
+                }
+                else if (animation.playState === "running") {
+                    trackAnimationOperation(animation, "play");
+                }
+            }
+        }
     }
-    return node;
 }
-function reset$d() {
-    state$4 = [];
-    initialTop = null;
-    initialBottom = null;
+function reset$a() {
+    state$2 = [];
 }
-function process$4(event) {
-    schedule$1(encode$3.bind(this, event));
+function track$6(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 similar(last, current) {
-    var dx = last.data.x - current.data.x;
-    var dy = last.data.y - current.data.y;
-    return (dx * dx + dy * dy < 20 /* Setting.Distance */ * 20 /* Setting.Distance */) && (current.time - last.time < 25 /* Setting.Interval */);
+function stop$j() {
+    reset$a();
 }
-function compute$8() {
-    var _a, _b;
-    compute$8.dn = 14 /* FunctionNames.ScrollCompute */;
-    if (initialTop) {
-        var top_1 = metadata$2(initialTop, null);
-        log(31 /* Dimension.InitialScrollTop */, (_a = top_1 === null || top_1 === void 0 ? void 0 : top_1.hash) === null || _a === void 0 ? void 0 : _a.join("." /* Constant.Dot */));
-    }
-    if (initialBottom) {
-        var bottom = metadata$2(initialBottom, null);
-        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 overrideAnimationHelper(functionToOverride, name) {
+    if (functionToOverride === null) {
+        functionToOverride = Animation.prototype[name];
+        Animation.prototype[name] = function () {
+            trackAnimationOperation(this, name);
+            return functionToOverride.apply(this, arguments);
+        };
     }
 }
-function stop$o() {
-    clearTimeout(timeout$3);
-    state$4 = [];
-    initialTop = null;
-    initialBottom = null;
+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$6(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;
+                    case "commitStyles":
+                        operation = 5 /* AnimationOperation.CommitStyles */;
+                        break;
+                }
+                if (operation) {
+                    track$6(time(), animation[animationId], operation);
+                }
+            }
+        }
+    }
 }
 
-var data$a = null;
-var previous = null;
-var timeout$2 = null;
-function start$p() {
-    reset$c();
+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$8;
+                    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$1; _i < _b.length; _i++) {
+                        r = _b[_i];
+                        tokens = [r.time, 7 /* Event.Region */];
+                        tokens.push(r.data.id);
+                        tokens.push(r.data.interaction);
+                        tokens.push(r.data.visibility);
+                        tokens.push(r.data.name);
+                        queue(tokens);
+                    }
+                    reset$6();
+                    return [3 /*break*/, 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$b();
+                    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);
+                    }
+                    reset$a();
+                    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];
+                        // we check for data[key] === '' because we want to encode empty strings as well, especially for value - which if skipped can cause our decoder to assume the final
+                        // attribute was the value for the node
+                        if (data[key] || 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$2.lean);
+                    _l.label = 11;
+                case 11: return [3 /*break*/, 12];
+                case 12: return [2 /*return*/];
+            }
+        });
+    });
 }
-function observe$6(root) {
-    bind(root, "selectstart", recompute$3.bind(this, root), true);
-    bind(root, "selectionchange", recompute$3.bind(this, root), true);
+function shouldMangle(value) {
+    var privacy = value.metadata.privacy;
+    return value.data.tag === "*T" /* Constant.TextTag */ && !(privacy === 0 /* Privacy.None */ || privacy === 1 /* Privacy.Sensitive */);
 }
-function recompute$3(root) {
-    recompute$3.dn = 15 /* FunctionNames.SelectionRecompute */;
-    var doc = root.nodeType === Node.DOCUMENT_NODE ? root : document;
-    var current = doc.getSelection();
-    // Bail out if we don't have a valid selection
-    if (current === null) {
-        return;
-    }
-    // Bail out if we got a valid selection but not valid nodes
-    // In Edge, selectionchange gets fired even on interactions like right clicks and
-    // can result in null anchorNode and focusNode if there was no previous selection on page
-    // Also, ignore any selections that start and end at the exact same point
-    if ((current.anchorNode === null && current.focusNode === null) ||
-        (current.anchorNode === current.focusNode && current.anchorOffset === current.focusOffset)) {
-        return;
-    }
-    var startNode = data$a.start ? data$a.start : null;
-    if (previous !== null && data$a.start !== null && startNode !== current.anchorNode) {
-        clearTimeout(timeout$2);
-        process$3(21 /* Event.Selection */);
+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 */)];
+        }
     }
-    data$a = {
-        start: current.anchorNode,
-        startOffset: current.anchorOffset,
-        end: current.focusNode,
-        endOffset: current.focusOffset
-    };
-    previous = current;
-    clearTimeout(timeout$2);
-    timeout$2 = setTimeout(process$3, 500 /* Setting.LookAhead */, 21 /* Event.Selection */);
-}
-function process$3(event) {
-    schedule$1(encode$3.bind(this, event));
+    return value.metadata.size;
 }
-function reset$c() {
-    previous = null;
-    data$a = { start: 0, startOffset: 0, end: 0, endOffset: 0 };
+function str$1(input) {
+    return input.toString(36);
 }
-function stop$n() {
-    reset$c();
-    clearTimeout(timeout$2);
+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$3 = [];
-function start$o() {
-    reset$b();
+var data$8;
+function reset$9() {
+    data$8 = null;
 }
-function observe$5(root) {
-    bind(root, "submit", recompute$2, true);
+function start$k() {
+    reset$9();
+    compute$7();
 }
-function recompute$2(evt) {
-    recompute$2.dn = 16 /* FunctionNames.SubmitRecompute */;
-    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$b() {
-    state$3 = [];
-}
-function stop$m() {
-    reset$b();
-}
-
-var data$9;
-function start$n() {
-    bind(window, "pagehide", recompute$1);
-}
-function recompute$1(evt) {
-    recompute$1.dn = 17 /* FunctionNames.UnloadRecompute */;
-    data$9 = { name: evt.type, persisted: evt.persisted ? 1 /* BooleanFlag.True */ : 0 /* BooleanFlag.False */ };
-    encode$3(26 /* Event.Unload */, time(evt));
-    stop();
-}
-function reset$a() {
-    data$9 = null;
-}
-function stop$l() {
-    reset$a();
-}
-
-var data$8;
-function start$m() {
-    bind(document, "visibilitychange", recompute);
-    recompute();
-}
-function recompute(evt) {
-    if (evt === void 0) { evt = null; }
-    recompute.dn = 18 /* FunctionNames.VisibilityRecompute */;
-    data$8 = { visible: "visibilityState" in document ? document.visibilityState : "default" };
-    encode$3(28 /* Event.Visibility */, time(evt));
-}
-function reset$9() {
-    data$8 = null;
+function compute$7() {
+    compute$7.dn = 19 /* FunctionNames.DocumentCompute */;
+    var body = document.body;
+    var d = document.documentElement;
+    var bodyClientWidth = body ? body.clientWidth : null;
+    var bodyScrollWidth = body ? body.scrollWidth : null;
+    var bodyOffsetWidth = body ? body.offsetWidth : null;
+    var documentClientWidth = d ? d.clientWidth : null;
+    var documentScrollWidth = d ? d.scrollWidth : null;
+    var documentOffsetWidth = d ? d.offsetWidth : null;
+    var width = Math.max(bodyClientWidth, bodyScrollWidth, bodyOffsetWidth, documentClientWidth, documentScrollWidth, documentOffsetWidth);
+    var bodyClientHeight = body ? body.clientHeight : null;
+    var bodyScrollHeight = body ? body.scrollHeight : null;
+    var bodyOffsetHeight = body ? body.offsetHeight : null;
+    var documentClientHeight = d ? d.clientHeight : null;
+    var documentScrollHeight = d ? d.scrollHeight : null;
+    var documentOffsetHeight = d ? d.offsetHeight : null;
+    var height = Math.max(bodyClientHeight, bodyScrollHeight, bodyOffsetHeight, documentClientHeight, documentScrollHeight, documentOffsetHeight);
+    // Check that width or height has changed from before, and also that width & height are not null values
+    if ((data$8 === null || width !== data$8.width || height !== data$8.height) && width !== null && height !== null) {
+        data$8 = { width: width, height: height };
+        encode$4(8 /* Event.Document */);
+    }
 }
-function stop$k() {
+function stop$i() {
     reset$9();
 }
 
-function start$l() {
-    start$l.dn = 8 /* FunctionNames.InteractionStart */;
-    start$g();
-    start$v();
-    start$u();
-    start$s();
-    start$t();
-    start$r();
-    start$m();
-    start$q();
-    start$p();
-    start$w();
-    start$o();
-    start$n();
-}
-function stop$j() {
-    stop$e();
-    stop$t();
-    stop$s();
-    stop$q();
-    stop$r();
-    stop$p();
-    stop$k();
-    stop$o();
-    stop$n();
-    stop$u();
-    stop$m();
-    stop$l();
-}
-function observe$4(root) {
-    observe$7(root);
-    // Only monitor following interactions if the root node is a document
-    // In case of shadow DOM, following events automatically bubble up to the parent document.
-    if (root.nodeType === Node.DOCUMENT_NODE) {
-        observe$b(root);
-        observe$a(root);
-        observe$8(root);
-        observe$9(root);
-        observe$6(root);
-        observe$c(root);
-        observe$5(root);
-    }
-}
-
-var interaction = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    observe: observe$4,
-    start: start$l,
-    stop: stop$j
-});
-
 function traverse (root, timer, source, timestamp) {
     return __awaiter(this, void 0, void 0, function () {
         var queue, entry, next, state, subnode;
@@ -2502,7 +2437,7 @@ function traverse (root, timer, source, timestamp) {
     });
 }
 
-var observers = [];
+var observers = new Set();
 var mutations = [];
 var throttledMutations = {};
 var insertRule = null;
@@ -2515,18 +2450,16 @@ var timeout$1 = null;
 var throttleDelay = null;
 var activePeriod = null;
 var history$4 = {};
-var criticalPeriod = null;
 var observedNodes = new WeakMap();
 // We ignore mutations if these attributes are updated
 var IGNORED_ATTRIBUTES = ["data-google-query-id", "data-load-complete", "data-google-container-id"];
-function start$k() {
-    start$k.dn = 21 /* FunctionNames.MutationStart */;
-    observers = [];
+function start$j() {
+    start$j.dn = 21 /* FunctionNames.MutationStart */;
+    observers = new Set();
     queue$2 = [];
     timeout$1 = null;
     activePeriod = 0;
     history$4 = {};
-    criticalPeriod = 0;
     observedNodes = new WeakMap();
     // Some popular open source libraries, like styled-components, optimize performance
     // by injecting CSS using insertRule API vs. appending text node. A side effect of
@@ -2589,22 +2522,17 @@ function start$k() {
     }
 }
 function observe$3(node) {
-    var _a;
     // 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 {
-        // Cleanup old observer if present.
-        if (observedNodes.has(node)) {
-            (_a = observedNodes.get(node)) === null || _a === void 0 ? void 0 : _a.disconnect();
-        }
         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 });
             observedNodes.set(node, observer);
-            observers.push(observer);
+            observers.add(observer);
         }
     }
     catch (e) {
@@ -2615,29 +2543,36 @@ 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) {
+    if (has$1(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];
+function stop$h() {
+    for (var _i = 0, _a = Array.from(observers); _i < _a.length; _i++) {
+        var observer = _a[_i];
         if (observer) {
             observer.disconnect();
         }
     }
-    observers = [];
+    observers = new Set();
     history$4 = {};
     mutations = [];
-    throttledMutations = [];
+    throttledMutations = {};
     queue$2 = [];
     activePeriod = 0;
     timeout$1 = null;
-    criticalPeriod = 0;
+    observedNodes = new WeakMap();
 }
 function active$2() {
     activePeriod = time() + 3000 /* Setting.MutationActivePeriod */;
-    criticalPeriod = time() + config$2.criticalMs;
+}
+function disconnect(n) {
+    var ob = observedNodes.get(n);
+    if (ob) {
+        ob.disconnect();
+        observers.delete(ob);
+        observedNodes.delete(n);
+    }
 }
 function handle$1(m) {
     handle$1.dn = 22 /* FunctionNames.MutationHandle */;
@@ -2646,7 +2581,7 @@ function handle$1(m) {
     track$7(6 /* Event.Mutation */, now);
     mutations.push({ time: now, mutations: m });
     schedule$1(process$2, 1 /* Priority.High */).then(function () {
-        setTimeout(compute$9);
+        setTimeout(compute$7);
         measure(compute$6)();
     });
 }
@@ -2700,7 +2635,7 @@ function process$2() {
             switch (_d.label) {
                 case 0:
                     timer = { id: id(), cost: 3 /* Metric.LayoutCost */ };
-                    start$y(timer);
+                    start$z(timer);
                     _d.label = 1;
                 case 1:
                     if (!(mutations.length > 0)) return [3 /*break*/, 7];
@@ -2750,7 +2685,7 @@ function process$2() {
                     _d.label = 13;
                 case 13:
                     cleanHistory();
-                    stop$w(timer);
+                    stop$x(timer);
                     return [2 /*return*/];
             }
         });
@@ -2777,17 +2712,13 @@ function track$5(m, timer, instance, timestamp) {
         // calculate inactive period based on the timestamp of the mutation not when the mutation is processed
         var inactive = timestamp > activePeriod;
         // Calculate critical period based on when mutation is processed
-        var critical = instance < criticalPeriod;
         var target = get(m.target);
-        var element_1 = target && target.selector ? target.selector.join() : m.target.nodeName;
+        var element = target && target.selector ? target.selector.join() : m.target.nodeName;
         var parent_1 = value.selector ? value.selector.join() : "" /* Constant.Empty */;
-        // Check if its a low priority (e.g., ads related) element mutation happening during critical period
-        // If the discard list is empty, we discard all mutations during critical period
-        var lowPriMutation = config$2.throttleMutations && critical && (config$2.discard.length === 0 || config$2.discard.some(function (key) { return element_1.includes(key); }));
         // 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_1, m.attributeName, names(m.addedNodes), names(m.removedNodes)].join();
+        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];
@@ -2796,12 +2727,12 @@ function track$5(m, timer, instance, timestamp) {
             processNodeList(h[2], 2 /* Source.ChildListRemove */, timer, timestamp);
         }
         // Update the counter, do not reset counter if its critical period
-        h[0] = inactive || lowPriMutation ? (h[1] === instance ? h[0] : h[0] + 1) : 1;
+        h[0] = inactive ? (h[1] === instance ? h[0] : h[0] + 1) : 1;
         h[1] = instance;
         // Return updated mutation type based on,
         // 1. if we have already hit the threshold or not
         // 2. if its a low priority mutation happening during critical time period
-        if (h[0] >= 10 /* Setting.MutationSuspendThreshold */ || lowPriMutation) {
+        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;
@@ -2891,7 +2822,7 @@ function trigger$2() {
         if (node) {
             var shadowRoot = node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
             // Skip re-processing shadowRoot if it was already discovered
-            if (shadowRoot && has(node)) {
+            if (shadowRoot && has$1(node)) {
                 continue;
             }
             generate(node, shadowRoot ? "childList" /* Constant.ChildList */ : "characterData" /* Constant.CharacterData */);
@@ -2985,7 +2916,7 @@ function processNode (node, source, timestamp) {
     var _a;
     var child = null;
     // Do not track this change if we are attempting to remove a node before discovering it
-    if (source === 2 /* Source.ChildListRemove */ && has(node) === false) {
+    if (source === 2 /* Source.ChildListRemove */ && has$1(node) === false) {
         return child;
     }
     // Special handling for text nodes that belong to style nodes
@@ -2995,7 +2926,7 @@ function processNode (node, source, timestamp) {
         node.parentElement.tagName === "STYLE") {
         node = node.parentNode;
     }
-    var add = has(node) === false;
+    var add = has$1(node) === false;
     var call = add ? "add" : "update";
     var parent = node.parentElement ? node.parentElement : null;
     var insideFrame = node.ownerDocument !== document;
@@ -3012,8 +2943,9 @@ function processNode (node, source, timestamp) {
         case Node.DOCUMENT_NODE:
             // We check for regions in the beginning when discovering document and
             // later whenever there are new additions or modifications to DOM (mutations)
-            if (node === document)
+            if (node === document) {
                 parse$1(document);
+            }
             checkDocumentStyles(node, timestamp);
             observe$2(node);
             break;
@@ -3049,7 +2981,7 @@ function processNode (node, source, timestamp) {
             // Also, we do not track text nodes for STYLE tags
             // The only exception is when we receive a mutation to remove the text node, in that case
             // parent will be null, but we can still process the node by checking it's an update call.
-            if (call === "update" || (parent && has(parent) && parent.tagName !== "STYLE" && parent.tagName !== "NOSCRIPT")) {
+            if (call === "update" || (parent && has$1(parent) && parent.tagName !== "STYLE" && parent.tagName !== "NOSCRIPT")) {
                 var textData = { tag: "*T" /* Constant.TextTag */, value: node.nodeValue };
                 dom[call](node, parent, textData, source);
             }
@@ -3135,6 +3067,9 @@ function processNode (node, source, timestamp) {
                             child = iframe$1.contentDocument;
                         }
                     }
+                    if (source === 2 /* Source.ChildListRemove */) {
+                        removeObserver(iframe$1);
+                    }
                     dom[call](node, parent, frameData, source);
                     break;
                 case "LINK":
@@ -3158,7 +3093,7 @@ function processNode (node, source, timestamp) {
                 case "VIDEO":
                 case "AUDIO":
                 case "SOURCE":
-                    // Ignoring any base64 src attribute for media elements to prevent big unused tokens to be sent and shock the network 
+                    // Ignoring any base64 src attribute for media elements to prevent big unused tokens to be sent and shock the network
                     if ("src" /* Constant.Src */ in attributes && attributes["src" /* Constant.Src */].startsWith("data:")) {
                         attributes["src" /* Constant.Src */] = "";
                     }
@@ -3178,12 +3113,30 @@ function processNode (node, source, timestamp) {
     return child;
 }
 function observe$2(root) {
-    if (has(root)) {
+    if (has$1(root) || has(root)) {
         return;
     }
     observe$3(root); // Observe mutations for this root node
     observe$4(root); // Observe interactions for this root node
 }
+function removeObserver(root) {
+    // iframes will have load event listeners and they should be removed when iframe is removed
+    // from the document
+    unbind(root);
+    var _a = iframeContent(root) || {}, _b = _a.doc, doc = _b === void 0 ? null : _b, _c = _a.win, win = _c === void 0 ? null : _c;
+    if (win) {
+        // For iframes, scroll event is observed on content window and this needs to be removed as well
+        unbind(win);
+    }
+    if (doc) {
+        // When an iframe is removed, we should also remove all listeners attached to its document
+        // to avoid memory leaks.
+        unbind(doc);
+        disconnect(doc);
+        // Remove iframe and content document from maps tracking them
+        removeIFrame(root, doc);
+    }
+}
 function getStyleValue(style) {
     // Call trim on the text content to ensure we do not process white spaces ( , \n, \r\n, \t, etc.)
     // Also, check if stylesheet has any data-* attribute, if so process rules instead of looking up text
@@ -3234,421 +3187,505 @@ function getAttributes(element) {
     return output;
 }
 
-var sheetUpdateState = [];
-var sheetAdoptionState = [];
-var replace = null;
-var replaceSync = null;
-var styleSheetId = 'claritySheetId';
-var styleSheetMap = {};
-var styleTimeMap = {};
-var documentNodes = [];
-var createdSheetIds = [];
-function start$j() {
-    if (window['CSSStyleSheet'] && CSSStyleSheet.prototype) {
-        if (replace === null) {
-            replace = CSSStyleSheet.prototype.replace;
-            CSSStyleSheet.prototype.replace = function () {
-                if (active()) {
-                    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 (createdSheetIds.indexOf(this[styleSheetId]) > -1) {
-                        trackStyleChange(time(), this[styleSheetId], 1 /* StyleSheetOperation.Replace */, arguments[0]);
+var excludeClassNames = "load,active,fixed,visible,focus,show,collaps,animat" /* Constant.ExcludeClassNames */.split("," /* Constant.Comma */);
+var selectorMap = {};
+function reset$8() {
+    selectorMap = {};
+}
+function get$1(input, type) {
+    var a = input.attributes;
+    var prefix = input.prefix ? input.prefix[type] : null;
+    var suffix = type === 0 /* Selector.Alpha */ ? "".concat("~" /* Constant.Tilde */).concat(input.position - 1) : ":nth-of-type(".concat(input.position, ")");
+    switch (input.tag) {
+        case "STYLE":
+        case "TITLE":
+        case "LINK":
+        case "META":
+        case "*T" /* Constant.TextTag */:
+        case "*D" /* Constant.DocumentTag */:
+            return "" /* Constant.Empty */;
+        case "HTML":
+            return "HTML" /* Constant.HTML */;
+        default:
+            if (prefix === null) {
+                return "" /* Constant.Empty */;
+            }
+            prefix = "".concat(prefix).concat(">" /* Constant.Separator */);
+            input.tag = input.tag.indexOf("svg:" /* Constant.SvgPrefix */) === 0 ? input.tag.substr("svg:" /* Constant.SvgPrefix */.length) : input.tag;
+            var selector = "".concat(prefix).concat(input.tag).concat(suffix);
+            var id = "id" /* Constant.Id */ in a && a["id" /* Constant.Id */].length > 0 ? a["id" /* Constant.Id */] : null;
+            var classes = input.tag !== "BODY" /* Constant.BodyTag */ && "class" /* Constant.Class */ in a && a["class" /* Constant.Class */].length > 0 ? a["class" /* Constant.Class */].trim().split(/\s+/).filter(function (c) { return filter(c); }).join("." /* Constant.Period */) : null;
+            if (classes && classes.length > 0) {
+                if (type === 0 /* Selector.Alpha */) {
+                    // In Alpha mode, update selector to use class names, with relative positioning within the parent id container.
+                    // If the node has valid class name(s) then drop relative positioning within the parent path to keep things simple.
+                    var key = "".concat(getDomPath(prefix)).concat(input.tag).concat("." /* Constant.Dot */).concat(classes);
+                    if (!(key in selectorMap)) {
+                        selectorMap[key] = [];
                     }
-                }
-                return replace.apply(this, arguments);
-            };
-        }
-        if (replaceSync === null) {
-            replaceSync = CSSStyleSheet.prototype.replaceSync;
-            CSSStyleSheet.prototype.replaceSync = function () {
-                if (active()) {
-                    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 (createdSheetIds.indexOf(this[styleSheetId]) > -1) {
-                        trackStyleChange(time(), this[styleSheetId], 2 /* StyleSheetOperation.ReplaceSync */, arguments[0]);
+                    if (selectorMap[key].indexOf(input.id) < 0) {
+                        selectorMap[key].push(input.id);
                     }
+                    selector = "".concat(key).concat("~" /* Constant.Tilde */).concat(selectorMap[key].indexOf(input.id));
                 }
-                return replaceSync.apply(this, arguments);
-            };
-        }
+                else {
+                    // In Beta mode, we continue to look at query selectors in context of the full page
+                    selector = "".concat(prefix).concat(input.tag, ".").concat(classes).concat(suffix);
+                }
+            }
+            // Update selector to use "id" field when available. There are two exceptions:
+            // (1) if "id" appears to be an auto generated string token, e.g. guid or a random id containing digits
+            // (2) if "id" appears inside a shadow DOM, in which case we continue to prefix up to shadow DOM to prevent conflicts
+            selector = id && filter(id) ? "".concat(getDomPrefix(prefix)).concat("#" /* Constant.Hash */).concat(id) : selector;
+            return selector;
     }
 }
-function checkDocumentStyles(documentNode, timestamp) {
-    if (documentNodes.indexOf(documentNode) === -1) {
-        documentNodes.push(documentNode);
-    }
-    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;
-    }
-    max(36 /* Metric.ConstructedStyles */, 1);
-    var currentStyleSheets = [];
-    for (var _i = 0, _a = documentNode.adoptedStyleSheets; _i < _a.length; _i++) {
-        var styleSheet = _a[_i];
-        // If we haven't seen this style sheet 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[styleSheetId] || createdSheetIds.indexOf(styleSheet[styleSheetId]) === -1) {
-            styleSheet[styleSheetId] = shortid();
-            createdSheetIds.push(styleSheet[styleSheetId]);
-            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] = [];
+function getDomPrefix(prefix) {
+    var shadowDomStart = prefix.lastIndexOf("*S" /* Constant.ShadowDomTag */);
+    var iframeDomStart = prefix.lastIndexOf("".concat("iframe:" /* Constant.IFramePrefix */).concat("HTML" /* Constant.HTML */));
+    var domStart = Math.max(shadowDomStart, iframeDomStart);
+    if (domStart < 0) {
+        return "" /* Constant.Empty */;
     }
-    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;
+    return prefix.substring(0, prefix.indexOf(">" /* Constant.Separator */, domStart) + 1);
+}
+function getDomPath(input) {
+    var parts = input.split(">" /* Constant.Separator */);
+    for (var i = 0; i < parts.length; i++) {
+        var tIndex = parts[i].indexOf("~" /* Constant.Tilde */);
+        var dIndex = parts[i].indexOf("." /* Constant.Dot */);
+        parts[i] = parts[i].substring(0, dIndex > 0 ? dIndex : (tIndex > 0 ? tIndex : parts[i].length));
     }
+    return parts.join(">" /* Constant.Separator */);
 }
-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);
+// Check if the given input string has digits or excluded class names
+function filter(value) {
+    if (!value) {
+        return false;
+    } // Do not process empty strings
+    if (excludeClassNames.some(function (x) { return value.toLowerCase().indexOf(x) >= 0; })) {
+        return false;
     }
-}
-function reset$8() {
-    sheetAdoptionState = [];
-    sheetUpdateState = [];
-}
-function stop$h() {
-    styleSheetMap = {};
-    styleTimeMap = {};
-    documentNodes = [];
-    createdSheetIds = [];
-    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
+    for (var i = 0; i < value.length; i++) {
+        var c = value.charCodeAt(i);
+        if (c >= 48 /* Character.Zero */ && c <= 57 /* Character.Nine */) {
+            return false;
         }
-    });
-    encode$4(45 /* Event.StyleSheetAdoption */);
-}
-function arraysEqual(a, b) {
-    if (a.length !== b.length) {
-        return false;
     }
-    return a.every(function (value, index) { return value === b[index]; });
+    return true;
 }
 
-var state$2 = [];
-var elementAnimate = null;
-var animationPlay = null;
-var animationPause = null;
-var animationCommitStyles = null;
-var animationCancel = null;
-var animationFinish = null;
-var animationId = 'clarityAnimationId';
-var operationCount = 'clarityOperationCount';
-var maxOperations = 20;
+var selector = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    get: get$1,
+    reset: reset$8
+});
+
+var index = 1;
+var nodesMap = null; // Maps id => node to retrieve further node details using id.
+var values = [];
+var updateMap = [];
+var hashMap = {};
+var override = [];
+var unmask = [];
+var maskText = [];
+var maskExclude = [];
+var maskDisable = [];
+var maskTags = [];
+// The WeakMap object is a collection of key/value pairs in which the keys are weakly referenced
+var idMap = null; // Maps node => id.
+var iframeMap = null; // Maps iframe's contentDocument => parent iframe element
+var iframeContentMap = null; // Maps parent iframe element => iframe's contentDocument & contentWindow
+var privacyMap = null; // Maps node => Privacy (enum)
+var fraudMap = null; // Maps node => FraudId (number)
 function start$i() {
-    if (window["Animation"] &&
-        window["Animation"].prototype &&
-        window["KeyframeEffect"] &&
-        window["KeyframeEffect"].prototype &&
-        window["KeyframeEffect"].prototype.getKeyframes &&
-        window["KeyframeEffect"].prototype.getTiming) {
-        reset$7();
-        overrideAnimationHelper(animationPlay, "play");
-        overrideAnimationHelper(animationPause, "pause");
-        overrideAnimationHelper(animationCommitStyles, "commitStyles");
-        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;
-            };
-        }
-        if (document.getAnimations) {
-            for (var _i = 0, _a = document.getAnimations(); _i < _a.length; _i++) {
-                var animation = _a[_i];
-                if (animation.playState === "finished") {
-                    trackAnimationOperation(animation, "finish");
-                }
-                else if (animation.playState === "paused" || animation.playState === "idle") {
-                    trackAnimationOperation(animation, "pause");
-                }
-                else if (animation.playState === "running") {
-                    trackAnimationOperation(animation, "play");
-                }
-            }
-        }
-    }
+    reset$7();
+    parse$1(document, true);
+}
+function stop$g() {
+    reset$7();
 }
 function reset$7() {
-    state$2 = [];
+    index = 1;
+    values = [];
+    updateMap = [];
+    hashMap = {};
+    override = [];
+    unmask = [];
+    maskText = "address,password,contact" /* Mask.Text */.split("," /* Constant.Comma */);
+    maskExclude = "password,secret,pass,social,ssn,code,hidden" /* Mask.Exclude */.split("," /* Constant.Comma */);
+    maskDisable = "radio,checkbox,range,button,reset,submit" /* Mask.Disable */.split("," /* Constant.Comma */);
+    maskTags = "INPUT,SELECT,TEXTAREA" /* Mask.Tags */.split("," /* Constant.Comma */);
+    nodesMap = new Map();
+    idMap = new WeakMap();
+    iframeMap = new WeakMap();
+    iframeContentMap = new WeakMap();
+    privacyMap = new WeakMap();
+    fraudMap = new WeakMap();
+    reset$8();
 }
-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
+// We parse new root nodes for any regions or masked nodes in the beginning (document) and
+// later whenever there are new additions or modifications to DOM (mutations)
+function parse$1(root, init) {
+    if (init === void 0) { init = false; }
+    // Wrap selectors in a try / catch block.
+    // It's possible for script to receive invalid selectors, e.g. "'#id'" with extra quotes, and cause the code below to fail
+    try {
+        // Parse unmask configuration into separate query selectors and override tokens as part of initialization
+        if (init) {
+            config$2.unmask.forEach(function (x) { return x.indexOf("!" /* Constant.Bang */) < 0 ? unmask.push(x) : override.push(x.substr(1)); });
         }
-    });
-    encode$4(44 /* Event.Animation */);
+        // 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$2.regions.forEach(function (x) { return root.querySelectorAll(x[1]).forEach(function (e) { return observe$1(e, "".concat(x[0])); }); }); // Regions
+            config$2.mask.forEach(function (x) { return root.querySelectorAll(x).forEach(function (e) { return privacyMap.set(e, 3 /* Privacy.TextImage */); }); }); // Masked Elements
+            config$2.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
+        }
+    }
+    catch (e) {
+        log$1(5 /* Code.Selector */, 1 /* Severity.Warning */, e ? e.name : null);
+    }
 }
-function stop$g() {
-    reset$7();
+function getId(node, autogen) {
+    if (autogen === void 0) { autogen = false; }
+    if (node === null) {
+        return null;
+    }
+    var id = idMap.get(node);
+    if (!id && autogen) {
+        id = index++;
+        idMap.set(node, id);
+    }
+    return id ? id : null;
 }
-function overrideAnimationHelper(functionToOverride, name) {
-    if (functionToOverride === null) {
-        functionToOverride = Animation.prototype[name];
-        Animation.prototype[name] = function () {
-            trackAnimationOperation(this, name);
-            return functionToOverride.apply(this, arguments);
-        };
+function add(node, parent, data, source) {
+    var parentId = parent ? getId(parent) : null;
+    // Do not add detached nodes
+    if ((!parent || !parentId) && node.host == null && node.nodeType !== Node.DOCUMENT_TYPE_NODE) {
+        return;
+    }
+    var id = getId(node, true);
+    var previousId = getPreviousId(node);
+    var parentValue = null;
+    var regionId = exists(node) ? id : null;
+    var fraudId = fraudMap.has(node) ? fraudMap.get(node) : null;
+    var privacyId = config$2.content ? 1 /* Privacy.Sensitive */ : 3 /* Privacy.TextImage */;
+    if (parentId >= 0 && values[parentId]) {
+        parentValue = values[parentId];
+        parentValue.children.push(id);
+        regionId = regionId === null ? parentValue.region : regionId;
+        fraudId = fraudId === null ? parentValue.metadata.fraud : fraudId;
+        privacyId = parentValue.metadata.privacy;
+    }
+    // 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$1(node, data.attributes["data-clarity-region" /* Constant.RegionData */]);
+        regionId = id;
     }
+    nodesMap.set(id, node);
+    values[id] = {
+        id: id,
+        parent: parentId,
+        previous: previousId,
+        children: [],
+        data: data,
+        selector: null,
+        hash: null,
+        region: regionId,
+        metadata: { active: true, suspend: false, privacy: privacyId, position: null, fraud: fraudId, size: null },
+    };
+    privacy(node, values[id], parentValue);
+    updateSelector(values[id]);
+    updateImageSize(values[id]);
+    track$4(id, source);
 }
-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);
+function update$1(node, parent, data, source) {
+    var id = getId(node);
+    var parentId = parent ? getId(parent) : null;
+    var previousId = getPreviousId(node);
+    var changed = false;
+    var parentChanged = false;
+    if (id in values) {
+        var value = values[id];
+        value.metadata.active = true;
+        // Handle case where internal ordering may have changed
+        if (value.previous !== previousId) {
+            changed = true;
+            value.previous = previousId;
+        }
+        // Handle case where parent might have been updated
+        if (value.parent !== parentId) {
+            changed = true;
+            var oldParentId = value.parent;
+            value.parent = parentId;
+            // Move this node to the right location under new parent
+            if (parentId !== null && parentId >= 0) {
+                var childIndex = previousId === null ? 0 : values[parentId].children.indexOf(previousId) + 1;
+                values[parentId].children.splice(childIndex, 0, id);
+                // Update region after the move
+                value.region = exists(node) ? id : values[parentId].region;
             }
-            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;
-                    case "commitStyles":
-                        operation = 5 /* AnimationOperation.CommitStyles */;
-                        break;
-                }
-                if (operation) {
-                    track$4(time(), animation[animationId], operation);
+            else {
+                // Mark this element as deleted if the parent has been updated to null
+                remove(id, source);
+            }
+            // Remove reference to this node from the old parent
+            if (oldParentId !== null && oldParentId >= 0) {
+                var nodeIndex = values[oldParentId].children.indexOf(id);
+                if (nodeIndex >= 0) {
+                    values[oldParentId].children.splice(nodeIndex, 1);
                 }
             }
+            parentChanged = true;
         }
+        // Update data
+        for (var key in data) {
+            if (diff(value["data"], data, key)) {
+                changed = true;
+                value["data"][key] = data[key];
+            }
+        }
+        // Update selector
+        updateSelector(value);
+        track$4(id, source, changed, parentChanged);
     }
-}
-
-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$1; _i < _b.length; _i++) {
-                        r = _b[_i];
-                        tokens = [r.time, 7 /* Event.Region */];
-                        tokens.push(r.data.id);
-                        tokens.push(r.data.interaction);
-                        tokens.push(r.data.visibility);
-                        tokens.push(r.data.name);
-                        queue(tokens);
-                    }
-                    reset$6();
-                    return [3 /*break*/, 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$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);
-                    }
-                    reset$7();
-                    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];
-                        // we check for data[key] === '' because we want to encode empty strings as well, especially for value - which if skipped can cause our decoder to assume the final
-                        // attribute was the value for the node
-                        if (data[key] || 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$2.lean);
-                    _l.label = 11;
-                case 11: return [3 /*break*/, 12];
-                case 12: return [2 /*return*/];
+}
+function sameorigin(node) {
+    var output = false;
+    if (node.nodeType === Node.ELEMENT_NODE && node.tagName === "IFRAME" /* Constant.IFrameTag */) {
+        var frame = node;
+        // To determine if the iframe is same-origin or not, we try accessing it's contentDocument.
+        // If the browser throws an exception, we assume it's cross-origin and move on.
+        // However, if we do a get a valid document object back, we assume the contents are accessible and iframe is same-origin.
+        try {
+            var doc = frame.contentDocument;
+            if (doc) {
+                iframeMap.set(frame.contentDocument, frame);
+                iframeContentMap.set(frame, { doc: frame.contentDocument, win: frame.contentWindow });
+                output = true;
             }
-        });
-    });
+        }
+        catch ( /* do nothing */_a) { /* do nothing */ }
+    }
+    return output;
 }
-function shouldMangle(value) {
-    var privacy = value.metadata.privacy;
-    return value.data.tag === "*T" /* Constant.TextTag */ && !(privacy === 0 /* Privacy.None */ || privacy === 1 /* Privacy.Sensitive */);
+function iframe(node) {
+    var doc = node.nodeType === Node.DOCUMENT_NODE ? node : null;
+    return doc && iframeMap.has(doc) ? iframeMap.get(doc) : null;
 }
-function size(value) {
-    if (value.metadata.size !== null && value.metadata.size.length === 0) {
-        var img = getNode(value.id);
-        if (img) {
-            return [Math.floor(img.offsetWidth * 100 /* Setting.BoxPrecision */), Math.floor(img.offsetHeight * 100 /* Setting.BoxPrecision */)];
+function iframeContent(frame) {
+    if (iframeContentMap.has(frame)) {
+        return iframeContentMap.get(frame);
+    }
+    return null;
+}
+function removeIFrame(frame, doc) {
+    iframeContentMap.delete(frame);
+    iframeMap.delete(doc);
+}
+function privacy(node, value, parent) {
+    var _a;
+    var data = value.data;
+    var metadata = value.metadata;
+    var current = metadata.privacy;
+    var attributes = data.attributes || {};
+    var tag = data.tag.toUpperCase();
+    switch (true) {
+        case maskTags.indexOf(tag) >= 0:
+            var type = attributes["type" /* Constant.Type */];
+            var meta_1 = "" /* Constant.Empty */;
+            var excludedPrivacyAttributes_1 = ["class" /* Constant.Class */, "style" /* Constant.Style */];
+            Object.keys(attributes)
+                .filter(function (x) { return !excludedPrivacyAttributes_1.includes(x); })
+                .forEach(function (x) { return (meta_1 += attributes[x].toLowerCase()); });
+            var exclude = maskExclude.some(function (x) { return meta_1.indexOf(x) >= 0; });
+            // Regardless of privacy mode, always mask off user input from input boxes or drop downs with two exceptions:
+            // (1) The node is detected to be one of the excluded fields, in which case we drop everything
+            // (2) The node's type is one of the allowed types (like checkboxes)
+            metadata.privacy = tag === "INPUT" /* Constant.InputTag */ && maskDisable.indexOf(type) >= 0 ? current : (exclude ? 4 /* Privacy.Exclude */ : 2 /* Privacy.Text */);
+            break;
+        case "data-clarity-mask" /* Constant.MaskData */ in attributes:
+            metadata.privacy = 3 /* Privacy.TextImage */;
+            break;
+        case "data-clarity-unmask" /* Constant.UnmaskData */ in attributes:
+            metadata.privacy = 0 /* Privacy.None */;
+            break;
+        case privacyMap.has(node):
+            // If this node was explicitly configured to contain sensitive content, honor that privacy setting
+            metadata.privacy = privacyMap.get(node);
+            break;
+        case fraudMap.has(node):
+            // If this node was explicitly configured to be evaluated for fraud, then also mask content
+            metadata.privacy = 2 /* Privacy.Text */;
+            break;
+        case tag === "*T" /* Constant.TextTag */:
+            // If it's a text node belonging to a STYLE or TITLE tag or one of scrub exceptions, then capture content
+            var pTag = parent && parent.data ? parent.data.tag : "" /* Constant.Empty */;
+            var pSelector_1 = parent && parent.selector ? parent.selector[1 /* Selector.Default */] : "" /* Constant.Empty */;
+            var tags = ["STYLE" /* Constant.StyleTag */, "TITLE" /* Constant.TitleTag */, "svg:style" /* Constant.SvgStyle */];
+            metadata.privacy = tags.includes(pTag) || override.some(function (x) { return pSelector_1.indexOf(x) >= 0; }) ? 0 /* Privacy.None */ : current;
+            break;
+        case current === 1 /* Privacy.Sensitive */:
+            // In a mode where we mask sensitive information by default, look through class names to aggressively mask content
+            metadata.privacy = inspect(attributes["class" /* Constant.Class */], maskText, metadata);
+            break;
+        case tag === "IMG" /* Constant.ImageTag */:
+            // Mask images with blob src as it is not publicly available anyway.
+            if ((_a = attributes.src) === null || _a === void 0 ? void 0 : _a.startsWith('blob:')) {
+                metadata.privacy = 3 /* Privacy.TextImage */;
+            }
+            break;
+    }
+}
+function inspect(input, lookup, metadata) {
+    if (input && lookup.some(function (x) { return input.indexOf(x) >= 0; })) {
+        return 2 /* Privacy.Text */;
+    }
+    return metadata.privacy;
+}
+function diff(a, b, field) {
+    if (typeof a[field] === "object" && typeof b[field] === "object") {
+        for (var key in a[field]) {
+            if (a[field][key] !== b[field][key]) {
+                return true;
+            }
         }
+        for (var key in b[field]) {
+            if (b[field][key] !== a[field][key]) {
+                return true;
+            }
+        }
+        return false;
     }
-    return value.metadata.size;
+    return a[field] !== b[field];
 }
-function str$1(input) {
-    return input.toString(36);
+function position(parent, child) {
+    child.metadata.position = 1;
+    var idx = parent ? parent.children.indexOf(child.id) : -1;
+    while (idx-- > 0) {
+        var sibling = values[parent.children[idx]];
+        if (child.data.tag === sibling.data.tag) {
+            child.metadata.position = sibling.metadata.position + 1;
+            break;
+        }
+    }
+    return child.metadata.position;
 }
-function attribute(key, value, privacy) {
-    return "".concat(key, "=").concat(text$1(value, key.indexOf("data-" /* Constant.DataAttribute */) === 0 ? "data-" /* Constant.DataAttribute */ : key, privacy));
+function updateSelector(value) {
+    var parent = value.parent && value.parent in values ? values[value.parent] : null;
+    var prefix = parent ? parent.selector : null;
+    var d = value.data;
+    var p = position(parent, value);
+    var s = { id: value.id, tag: d.tag, prefix: prefix, position: p, attributes: d.attributes };
+    value.selector = [get$1(s, 0 /* Selector.Alpha */), get$1(s, 1 /* Selector.Beta */)];
+    value.hash = value.selector.map(function (x) { return x ? hash(x) : null; });
+    value.hash.forEach(function (h) { return hashMap[h] = value.id; });
+}
+function hashText(hash) {
+    var id = lookup(hash);
+    var node = getNode(id);
+    return node !== null && node.textContent !== null ? node.textContent.substr(0, 25 /* Setting.ClickText */) : '';
+}
+function getNode(id) {
+    return nodesMap.has(id) ? nodesMap.get(id) : null;
+}
+function getValue(id) {
+    if (id in values) {
+        return values[id];
+    }
+    return null;
+}
+function get(node) {
+    var id = getId(node);
+    return id in values ? values[id] : null;
+}
+function lookup(hash) {
+    return hash in hashMap ? hashMap[hash] : null;
+}
+function has$1(node) {
+    return nodesMap.has(getId(node));
+}
+function updates$2() {
+    var output = [];
+    for (var _i = 0, updateMap_1 = updateMap; _i < updateMap_1.length; _i++) {
+        var id = updateMap_1[_i];
+        if (id in values) {
+            output.push(values[id]);
+        }
+    }
+    updateMap = [];
+    return output;
+}
+function remove(id, source) {
+    if (id in values) {
+        var value = values[id];
+        value.metadata.active = false;
+        value.parent = null;
+        track$4(id, source);
+        // Clean up node references for removed nodes
+        removeNodeFromNodesMap(id);
+    }
+}
+function removeNodeFromNodesMap(id) {
+    var nodeToBeRemoved = nodesMap.get(id);
+    // Shadow dom roots shouldn't be deleted, 
+    // we should keep listening to the mutations there even they're not rendered in the DOM.
+    if ((nodeToBeRemoved === null || nodeToBeRemoved === void 0 ? void 0 : nodeToBeRemoved.nodeType) === Node.DOCUMENT_FRAGMENT_NODE) {
+        return;
+    }
+    if (nodeToBeRemoved && (nodeToBeRemoved === null || nodeToBeRemoved === void 0 ? void 0 : nodeToBeRemoved.nodeType) === Node.ELEMENT_NODE && nodeToBeRemoved["tagName"] === "IFRAME") {
+        var iframe_1 = nodeToBeRemoved;
+        removeObserver(iframe_1);
+    }
+    nodesMap.delete(id);
+    var value = id in values ? values[id] : null;
+    if (value && value.children) {
+        for (var _i = 0, _a = value.children; _i < _a.length; _i++) {
+            var childId = _a[_i];
+            removeNodeFromNodesMap(childId);
+        }
+    }
+}
+function updateImageSize(value) {
+    // If this element is a image node, and is masked, then track box model for the current element
+    if (value.data.tag === "IMG" /* Constant.ImageTag */ && value.metadata.privacy === 3 /* Privacy.TextImage */) {
+        var img_1 = getNode(value.id);
+        // We will not capture the natural image dimensions until it loads. 
+        if (img_1 && (!img_1.complete || img_1.naturalWidth === 0)) {
+            // This will trigger mutation to update the original width and height after image loads.
+            bind(img_1, 'load', function () {
+                img_1.setAttribute('data-clarity-loaded', "".concat(shortid()));
+            });
+        }
+        value.metadata.size = [];
+    }
+}
+function getPreviousId(node) {
+    var id = null;
+    // Some nodes may not have an ID by design since Clarity skips over tags like SCRIPT, NOSCRIPT, META, COMMENTS, etc..
+    // In that case, we keep going back and check for their sibling until we find a sibling with ID or no more sibling nodes are left.
+    while (id === null && node.previousSibling) {
+        id = getId(node.previousSibling);
+        node = node.previousSibling;
+    }
+    return id;
+}
+function track$4(id, source, changed, parentChanged) {
+    if (changed === void 0) { changed = true; }
+    if (parentChanged === void 0) { parentChanged = false; }
+    // Keep track of the order in which mutations happened, they may not be sequential
+    // Edge case: If an element is added later on, and pre-discovered element is moved as a child.
+    // In that case, we need to reorder the pre-discovered element in the update list to keep visualization consistent.
+    var uIndex = updateMap.indexOf(id);
+    if (uIndex >= 0 && source === 1 /* Source.ChildListAdd */ && parentChanged) {
+        updateMap.splice(uIndex, 1);
+        updateMap.push(id);
+    }
+    else if (uIndex === -1 && changed) {
+        updateMap.push(id);
+    }
 }
 
 var state$1 = [];
@@ -3807,7 +3844,7 @@ function target(evt) {
 function metadata$2(node, event, text) {
     if (text === void 0) { text = null; }
     // If the node is null, we return a reserved value for id: 0. Valid assignment of id begins from 1+.
-    var output = { id: 0, hash: null, privacy: 2 /* Privacy.Text */, node: node };
+    var output = { id: 0, hash: null, privacy: 2 /* Privacy.Text */ };
     if (node) {
         var value = get(node);
         if (value !== null) {
@@ -3861,7 +3898,7 @@ function encode$3 (type, ts) {
                             track$8(entry.event, entry.data.x, entry.data.y, entry.time);
                         }
                     }
-                    reset$f();
+                    reset$i();
                     break;
                 case 9 /* Event.Click */:
                     for (_b = 0, _c = state$8; _b < _c.length; _b++) {
@@ -3885,7 +3922,7 @@ 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$i();
+                    reset$l();
                     break;
                 case 38 /* Event.Clipboard */:
                     for (_d = 0, _e = state$7; _d < _e.length; _d++) {
@@ -3898,21 +3935,21 @@ function encode$3 (type, ts) {
                             queue(tokens);
                         }
                     }
-                    reset$h();
+                    reset$k();
                     break;
                 case 11 /* Event.Resize */:
-                    r = data$b;
+                    r = data$c;
                     tokens.push(r.width);
                     tokens.push(r.height);
                     track$8(type, r.width, r.height);
-                    reset$e();
+                    reset$h();
                     queue(tokens);
                     break;
                 case 26 /* Event.Unload */:
-                    u = data$9;
+                    u = data$a;
                     tokens.push(u.name);
                     tokens.push(u.persisted);
-                    reset$a();
+                    reset$d();
                     queue(tokens);
                     break;
                 case 27 /* Event.Input */:
@@ -3924,10 +3961,10 @@ function encode$3 (type, ts) {
                         tokens.push(text$1(entry.data.value, "input", iTarget.privacy, false, entry.data.type));
                         queue(tokens);
                     }
-                    reset$g();
+                    reset$j();
                     break;
                 case 21 /* Event.Selection */:
-                    s = data$a;
+                    s = data$b;
                     if (s) {
                         startTarget = metadata$2(s.start, type);
                         endTarget = metadata$2(s.end, type);
@@ -3935,7 +3972,7 @@ function encode$3 (type, ts) {
                         tokens.push(s.startOffset);
                         tokens.push(endTarget.id);
                         tokens.push(s.endOffset);
-                        reset$c();
+                        reset$f();
                         queue(tokens);
                     }
                     break;
@@ -3958,7 +3995,7 @@ function encode$3 (type, ts) {
                             track$8(entry.event, entry.data.x, entry.data.y, entry.time);
                         }
                     }
-                    reset$d();
+                    reset$g();
                     break;
                 case 42 /* Event.Change */:
                     for (_k = 0, _l = state$9; _k < _l.length; _k++) {
@@ -3974,7 +4011,7 @@ function encode$3 (type, ts) {
                             queue(tokens);
                         }
                     }
-                    reset$j();
+                    reset$m();
                     break;
                 case 39 /* Event.Submit */:
                     for (_m = 0, _o = state$3; _m < _o.length; _m++) {
@@ -3986,7 +4023,7 @@ function encode$3 (type, ts) {
                             queue(tokens);
                         }
                     }
-                    reset$b();
+                    reset$e();
                     break;
                 case 22 /* Event.Timeline */:
                     for (_p = 0, _q = updates$1; _p < _q.length; _p++) {
@@ -4003,11 +4040,11 @@ function encode$3 (type, ts) {
                     reset$5();
                     break;
                 case 28 /* Event.Visibility */:
-                    v = data$8;
+                    v = data$9;
                     tokens.push(v.visible);
                     queue(tokens);
                     visibility(t, v.visible);
-                    reset$9();
+                    reset$c();
                     break;
             }
             return [2 /*return*/];
@@ -4158,7 +4195,7 @@ function upload(final) {
                     compute$6();
                     compute$5();
                     compute$a();
-                    compute$7();
+                    compute$8();
                     last = final === true;
                     e = JSON.stringify(envelope(last));
                     a = "[".concat(analysis.join(), "]");
@@ -4485,15 +4522,15 @@ function trigger$1(input) {
             }
             switch (source) {
                 case 0 /* ExtractSource.Javascript */:
-                    var variable = value.substring(1, value.length);
+                    var variable = value.slice(1);
                     variables[key][id] = parse(variable);
                     break;
                 case 2 /* ExtractSource.Text */:
                     selectors[key][id] = value;
                     break;
                 case 4 /* ExtractSource.Hash */:
-                    var hash = value.substring(1, value.length);
-                    hashes[key][id] = hash;
+                    var hash_1 = value.slice(1);
+                    hashes[key][id] = hash_1;
                     break;
             }
         }
@@ -4520,17 +4557,23 @@ function compute$4() {
                 }
                 var selectorData = selectors[key];
                 for (var s in selectorData) {
+                    var shouldMask = false;
                     var selectorKey = parseInt(s);
-                    var nodes = document.querySelectorAll(selectorData[selectorKey]);
+                    var selector = selectorData[selectorKey];
+                    if (selector.startsWith("@" /* Constant.At */)) {
+                        shouldMask = true;
+                        selector = selector.slice(1);
+                    }
+                    var nodes = document.querySelectorAll(selector);
                     if (nodes) {
-                        var text = Array.from(nodes).map(function (e) { return e.textContent; });
-                        update(key, selectorKey, text.join("<SEP>" /* Constant.Seperator */).substring(0, 10000 /* Setting.ExtractLimit */));
+                        var text = Array.from(nodes).map(function (e) { return e.textContent; }).join("<SEP>" /* Constant.Seperator */);
+                        update(key, selectorKey, (shouldMask ? hash(text).trim() : text).slice(0, 10000 /* Setting.ExtractLimit */));
                     }
                 }
                 var hashData = hashes[key];
                 for (var h in hashData) {
                     var hashKey = parseInt(h);
-                    var content = hashText(hashData[hashKey]).trim().substring(0, 10000 /* Setting.ExtractLimit */);
+                    var content = hashText(hashData[hashKey]).trim().slice(0, 10000 /* Setting.ExtractLimit */);
                     update(key, hashKey, content);
                 }
             }
@@ -4574,9 +4617,9 @@ function parse(variable) {
         var conditionStart = part.indexOf("{" /* Constant.ConditionStart */);
         var conditionEnd = part.indexOf("}" /* Constant.ConditionEnd */);
         syntax.push({
-            name: arrayStart > 0 ? part.substring(0, arrayStart) : (conditionStart > 0 ? part.substring(0, conditionStart) : part),
+            name: arrayStart > 0 ? part.slice(0, arrayStart) : (conditionStart > 0 ? part.slice(0, conditionStart) : part),
             type: arrayStart > 0 ? 1 /* Type.Array */ : (conditionStart > 0 ? 2 /* Type.Object */ : 3 /* Type.Simple */),
-            condition: conditionStart > 0 ? part.substring(conditionStart + 1, conditionEnd) : null
+            condition: conditionStart > 0 ? part.slice(conditionStart + 1, conditionEnd) : null
         });
     }
     return syntax;
@@ -4615,7 +4658,7 @@ function evaluate(variable, base) {
 }
 function str(input) {
     // Automatically trim string to max of Setting.ExtractLimit to avoid fetching long strings
-    return input ? JSON.stringify(input).substring(0, 10000 /* Setting.ExtractLimit */) : input;
+    return input ? JSON.stringify(input).slice(0, 10000 /* Setting.ExtractLimit */) : input;
 }
 function match(base, condition) {
     if (condition) {
@@ -5287,7 +5330,7 @@ function measure (method) {
     };
 }
 
-var bindings = [];
+var bindings = new Map();
 function bind(target, event, listener, capture, passive) {
     if (capture === void 0) { capture = false; }
     if (passive === void 0) { passive = true; }
@@ -5296,7 +5339,10 @@ function bind(target, event, listener, capture, passive) {
     // E.g. Iframe may start off as same-origin but later turn into cross-origin, and the following lines will throw an exception.
     try {
         target[api("addEventListener" /* Constant.AddEventListener */)](event, listener, { capture: capture, passive: passive });
-        bindings.push({ event: event, target: target, listener: listener, options: { capture: capture, passive: passive } });
+        if (!has(target)) {
+            bindings.set(target, []);
+        }
+        bindings.get(target).push({ event: event, listener: listener, options: { capture: capture, passive: passive } });
     }
     catch (_a) {
         /* do nothing */
@@ -5304,17 +5350,31 @@ function bind(target, event, listener, capture, passive) {
 }
 function reset$1() {
     // Walk through existing list of bindings and remove them all
-    for (var _i = 0, bindings_1 = bindings; _i < bindings_1.length; _i++) {
-        var binding = bindings_1[_i];
+    bindings.forEach(function (bindingsPerTarget, target) {
+        resetByTarget(bindingsPerTarget, target);
+    });
+    bindings = new Map();
+}
+function unbind(target) {
+    if (!has(target)) {
+        return;
+    }
+    resetByTarget(bindings.get(target), target);
+}
+function has(target) {
+    return bindings.has(target);
+}
+function resetByTarget(bindingsPerTarget, target) {
+    bindingsPerTarget.forEach(function (binding) {
         // Wrapping inside try / catch to avoid situations where the element may be destroyed before we get a chance to unbind
         try {
-            binding.target[api("removeEventListener" /* Constant.RemoveEventListener */)](binding.event, binding.listener, { capture: binding.options.capture, passive: binding.options.passive });
+            target[api("removeEventListener" /* Constant.RemoveEventListener */)](binding.event, binding.listener, { capture: binding.options.capture, passive: binding.options.passive });
         }
         catch (_a) {
             /* do nothing */
         }
-    }
-    bindings = [];
+    });
+    bindings.delete(target);
 }
 
 var pushState = null;
@@ -5378,7 +5438,7 @@ var status = false;
 function start$6() {
     status = true;
     start$I();
-    reset$l();
+    reset$n();
     reset$1();
     reset$2();
     start$7();
@@ -5387,7 +5447,7 @@ function stop$5() {
     stop$6();
     reset$2();
     reset$1();
-    reset$l();
+    reset$n();
     stop$F();
     status = false;
 }
@@ -5462,9 +5522,9 @@ 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)();
+        measure(compute$9)();
     });
 }
 function discover() {
@@ -5475,7 +5535,7 @@ function discover() {
                 case 0:
                     ts = time();
                     timer = { id: id(), cost: 3 /* Metric.LayoutCost */ };
-                    start$y(timer);
+                    start$z(timer);
                     return [4 /*yield*/, traverse(document, timer, 0 /* Source.Discover */, ts)];
                 case 1:
                     _a.sent();
@@ -5483,7 +5543,7 @@ function discover() {
                     return [4 /*yield*/, encode$4(5 /* Event.Discover */, timer, ts)];
                 case 2:
                     _a.sent();
-                    stop$w(timer);
+                    stop$x(timer);
                     return [2 /*return*/];
             }
         });
@@ -5494,29 +5554,29 @@ function start$3() {
     start$3.dn = 20 /* FunctionNames.LayoutStart */;
     // The order below is important 
     // and is determined by interdependencies of modules
-    start$x();
+    start$k();
     start$h();
-    start$z();
+    start$i();
     if (config$2.delayDom) {
         // Lazy load layout module as part of page load time performance improvements experiment 
         bind(window, 'load', function () {
-            start$k();
+            start$j();
         });
     }
     else {
-        start$k();
+        start$j();
     }
     start$4();
-    start$j();
-    start$i();
+    start$m();
+    start$l();
 }
 function stop$3() {
     stop$f();
-    stop$x();
-    stop$i();
-    stop$v();
-    stop$h();
     stop$g();
+    stop$h();
+    stop$i();
+    stop$k();
+    stop$j();
 }
 
 var layout = /*#__PURE__*/Object.freeze({