clarity-js 0.8.5 → 0.8.6

package/build/clarity.module.js

@@ -10,39 +10,34 @@ var dom = /*#__PURE__*/Object.freeze({
     get iframe () { return iframe; },
     get iframeContent () { return iframeContent; },
     get lookup () { return lookup; },
-    get parse () { return parse$1; },
+    get parse () { return parse; },
     get removeIFrame () { return removeIFrame; },
     get sameorigin () { return sameorigin; },
-    get start () { return start$i; },
-    get stop () { return stop$g; },
-    get update () { return update$1; },
+    get start () { return start$j; },
+    get stop () { return stop$h; },
+    get update () { return update; },
     get updates () { return updates$2; }
 });
 var upload$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get queue () { return queue; },
-    get start () { return start$f; },
-    get stop () { return stop$d; },
+    get start () { return start$g; },
+    get stop () { return stop$e; },
     get track () { return track$1; }
 });
-var extract = /*#__PURE__*/Object.freeze({
+var upgrade$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    get clone () { return clone; },
-    get compute () { return compute$4; },
     get data () { return data$5; },
-    get keys () { return keys; },
-    get reset () { return reset$4; },
-    get start () { return start$c; },
+    get start () { return start$b; },
     get stop () { return stop$b; },
-    get trigger () { return trigger$1; },
-    get update () { return update; }
+    get upgrade () { return upgrade; }
 });
 var limit = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get check () { return check$2; },
     get compute () { return compute$3; },
     get data () { return data$4; },
-    get start () { return start$b; },
+    get start () { return start$a; },
     get stop () { return stop$a; },
     get trigger () { return trigger; }
 });
@@ -52,7 +47,7 @@ var dimension = /*#__PURE__*/Object.freeze({
     get data () { return data$3; },
     get log () { return log; },
     get reset () { return reset$3; },
-    get start () { return start$a; },
+    get start () { return start$9; },
     get stop () { return stop$9; },
     get updates () { return updates; }
 });
@@ -68,14 +63,14 @@ var metadata$1 = /*#__PURE__*/Object.freeze({
     get metadata () { return metadata; },
     get save () { return save; },
     get shortid () { return shortid; },
-    get start () { return start$9; },
+    get start () { return start$8; },
     get stop () { return stop$8; }
 });
 var envelope$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get data () { return data$1; },
     get envelope () { return envelope; },
-    get start () { return start$8; },
+    get start () { return start$7; },
     get stop () { return stop$7; }
 });
 var clarity = /*#__PURE__*/Object.freeze({
@@ -137,6 +132,7 @@ var config$2 = {
     projectId: null,
     delay: 1 * 1000 /* Time.Second */,
     lean: false,
+    lite: false,
     track: true,
     content: true,
     drop: [],
@@ -187,7 +183,7 @@ function stop$F() {
     startTime = 0;
 }
 
-var version$1 = "0.8.5";
+var version$1 = "0.8.6";
 
 // tslint:disable: no-bitwise
 function hash (input, precision) {
@@ -713,44 +709,6 @@ var summary = /*#__PURE__*/Object.freeze({
     track: track$7
 });
 
-var data$f = null;
-function start$D() {
-    if (!config$2.lean && config$2.upgrade) {
-        config$2.upgrade("Config" /* Constant.Config */);
-    }
-    data$f = null;
-}
-// Following call will upgrade the session from lean mode into the full mode retroactively from the start of the page.
-// As part of the lean mode, we do not send back any layout information - including discovery of DOM and mutations.
-// However, if there's a need for full fidelity playback, calling this function will disable lean mode
-// and send all backed up layout events to the server.
-function upgrade(key) {
-    // Upgrade only if Clarity was successfully activated on the page
-    if (active() && config$2.lean) {
-        config$2.lean = false;
-        data$f = { key: key };
-        // Update metadata to track we have upgraded this session
-        callback();
-        save();
-        // Callback upgrade handler, if configured
-        if (config$2.upgrade) {
-            config$2.upgrade(key);
-        }
-        encode$1(3 /* Event.Upgrade */);
-    }
-}
-function stop$A() {
-    data$f = null;
-}
-
-var upgrade$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    get data () { return data$f; },
-    start: start$D,
-    stop: stop$A,
-    upgrade: upgrade
-});
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -806,8 +764,66 @@ function __generator(thisArg, body) {
     }
 }
 
-var data$e = null;
-function start$C() {
+var supported$1 = "CompressionStream" /* Constant.CompressionStream */ in window;
+function compress (input) {
+    return __awaiter(this, void 0, void 0, function () {
+        var stream, _a;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    _c.trys.push([0, 3, , 4]);
+                    if (!supported$1) return [3 /*break*/, 2];
+                    stream = new ReadableStream({ start: function (controller) {
+                            return __awaiter(this, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    controller.enqueue(input);
+                                    controller.close();
+                                    return [2 /*return*/];
+                                });
+                            });
+                        } }).pipeThrough(new TextEncoderStream()).pipeThrough(new window["CompressionStream" /* Constant.CompressionStream */]("gzip"));
+                    _a = Uint8Array.bind;
+                    return [4 /*yield*/, read(stream)];
+                case 1: return [2 /*return*/, new (_a.apply(Uint8Array, [void 0, _c.sent()]))()];
+                case 2: return [3 /*break*/, 4];
+                case 3:
+                    _c.sent();
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/, null];
+            }
+        });
+    });
+}
+function read(stream) {
+    return __awaiter(this, void 0, void 0, function () {
+        var reader, chunks, done, value;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    reader = stream.getReader();
+                    chunks = [];
+                    done = false;
+                    value = [];
+                    _b.label = 1;
+                case 1:
+                    if (!!done) return [3 /*break*/, 3];
+                    return [4 /*yield*/, reader.read()];
+                case 2:
+                    (_a = _b.sent(), done = _a.done, value = _a.value);
+                    if (done) {
+                        return [2 /*return*/, chunks];
+                    }
+                    chunks.push.apply(chunks, value);
+                    return [3 /*break*/, 1];
+                case 3: return [2 /*return*/, chunks];
+            }
+        });
+    });
+}
+
+var data$f = null;
+function start$D() {
     reset$o();
 }
 function set(variable, value) {
@@ -854,22 +870,22 @@ function log$2(variable, value) {
         value &&
         typeof variable === "string" /* Constant.String */ &&
         variable.length < 255) {
-        var validValues = variable in data$e ? data$e[variable] : [];
+        var validValues = variable in data$f ? data$f[variable] : [];
         for (var i = 0; i < value.length; i++) {
             if (typeof value[i] === "string" /* Constant.String */ && value[i].length < 255) {
                 validValues.push(value[i]);
             }
         }
-        data$e[variable] = validValues;
+        data$f[variable] = validValues;
     }
 }
 function compute$b() {
     encode$1(34 /* Event.Variable */);
 }
 function reset$o() {
-    data$e = {};
+    data$f = {};
 }
-function stop$z() {
+function stop$A() {
     reset$o();
 }
 function redact(input) {
@@ -905,72 +921,215 @@ function detect(input) {
 var variable = /*#__PURE__*/Object.freeze({
     __proto__: null,
     compute: compute$b,
-    get data () { return data$e; },
+    get data () { return data$f; },
     identify: identify,
     reset: reset$o,
     set: set,
-    start: start$C,
-    stop: stop$z
+    start: start$D,
+    stop: stop$A
 });
 
-var supported$1 = "CompressionStream" /* Constant.CompressionStream */ in window;
-function compress (input) {
-    return __awaiter(this, void 0, void 0, function () {
-        var stream, _a;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    _c.trys.push([0, 3, , 4]);
-                    if (!supported$1) return [3 /*break*/, 2];
-                    stream = new ReadableStream({ start: function (controller) {
-                            return __awaiter(this, void 0, void 0, function () {
-                                return __generator(this, function (_a) {
-                                    controller.enqueue(input);
-                                    controller.close();
-                                    return [2 /*return*/];
-                                });
-                            });
-                        } }).pipeThrough(new TextEncoderStream()).pipeThrough(new window["CompressionStream" /* Constant.CompressionStream */]("gzip"));
-                    _a = Uint8Array.bind;
-                    return [4 /*yield*/, read(stream)];
-                case 1: return [2 /*return*/, new (_a.apply(Uint8Array, [void 0, _c.sent()]))()];
-                case 2: return [3 /*break*/, 4];
-                case 3:
-                    _c.sent();
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/, null];
+var data$e = {};
+var keys = new Set();
+var variables = {};
+var selectors = {};
+var hashes = {};
+var validation = {};
+function start$C() {
+    reset$n();
+}
+// Input string is of the following form:
+// EXTRACT 101|element { "1": ".class1", "2": "~window.a.b", "3": "!abc"}
+// if element is present on the page it will set up event 101 to grab the contents of the class1 selector into component 1,
+// the javascript evaluated contents of window.a.b into component 2,
+// and the contents of Clarity's hash abc into component 3
+function trigger$2(input) {
+    try {
+        var parts = input && input.length > 0 ? input.split(/ (.*)/) : ["" /* Constant.Empty */];
+        var keyparts = parts[0].split(/\|(.*)/);
+        var key = parseInt(keyparts[0]);
+        var element = keyparts.length > 1 ? keyparts[1] : "" /* Constant.Empty */;
+        var values = parts.length > 1 ? JSON.parse(parts[1]) : {};
+        variables[key] = {};
+        selectors[key] = {};
+        hashes[key] = {};
+        validation[key] = element;
+        for (var v in values) {
+            // values is a set of strings for proper JSON parsing, but it's more efficient 
+            // to interact with them as numbers
+            var id = parseInt(v);
+            var value = values[v];
+            var source = 2 /* ExtractSource.Text */;
+            if (value.startsWith("~" /* Constant.Tilde */)) {
+                source = 0 /* ExtractSource.Javascript */;
             }
-        });
-    });
+            else if (value.startsWith("!" /* Constant.Bang */)) {
+                source = 4 /* ExtractSource.Hash */;
+            }
+            switch (source) {
+                case 0 /* ExtractSource.Javascript */:
+                    var variable = value.slice(1);
+                    variables[key][id] = parse$1(variable);
+                    break;
+                case 2 /* ExtractSource.Text */:
+                    selectors[key][id] = value;
+                    break;
+                case 4 /* ExtractSource.Hash */:
+                    var hash_1 = value.slice(1);
+                    hashes[key][id] = hash_1;
+                    break;
+            }
+        }
+    }
+    catch (e) {
+        log$1(8 /* Code.Config */, 1 /* Severity.Warning */, e ? e.name : null);
+    }
 }
-function read(stream) {
-    return __awaiter(this, void 0, void 0, function () {
-        var reader, chunks, done, value;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    reader = stream.getReader();
-                    chunks = [];
-                    done = false;
-                    value = [];
-                    _b.label = 1;
-                case 1:
-                    if (!!done) return [3 /*break*/, 3];
-                    return [4 /*yield*/, reader.read()];
-                case 2:
-                    (_a = _b.sent(), done = _a.done, value = _a.value);
-                    if (done) {
-                        return [2 /*return*/, chunks];
+function clone$1(v) {
+    return JSON.parse(JSON.stringify(v));
+}
+function compute$a() {
+    try {
+        for (var v in variables) {
+            var key = parseInt(v);
+            if (validation[key] == "" /* Constant.Empty */ || document.querySelector(validation[key])) {
+                var variableData = variables[key];
+                for (var v_1 in variableData) {
+                    var variableKey = parseInt(v_1);
+                    var value = str$1(evaluate(clone$1(variableData[variableKey])));
+                    if (value) {
+                        update$1(key, variableKey, value);
                     }
-                    chunks.push.apply(chunks, value);
-                    return [3 /*break*/, 1];
-                case 3: return [2 /*return*/, chunks];
+                }
+                var selectorData = selectors[key];
+                for (var s in selectorData) {
+                    var shouldMask = false;
+                    var selectorKey = parseInt(s);
+                    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; }).join("<SEP>" /* Constant.Seperator */);
+                        update$1(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().slice(0, 10000 /* Setting.ExtractLimit */);
+                    update$1(key, hashKey, content);
+                }
             }
+        }
+        if (keys.size > 0) {
+            encode$1(40 /* Event.Extract */);
+        }
+    }
+    catch (e) {
+        log$1(5 /* Code.Selector */, 1 /* Severity.Warning */, e ? e.name : null);
+    }
+}
+function reset$n() {
+    keys.clear();
+}
+function update$1(key, subkey, value) {
+    var update = false;
+    if (!(key in data$e)) {
+        data$e[key] = {};
+        update = true;
+    }
+    if (!isEmpty(hashes[key])
+        && (!(subkey in data$e[key]) || data$e[key][subkey] != value)) {
+        update = true;
+    }
+    data$e[key][subkey] = value;
+    if (update) {
+        keys.add(key);
+    }
+    return;
+}
+function stop$z() {
+    reset$n();
+}
+function parse$1(variable) {
+    var syntax = [];
+    var parts = variable.split("." /* Constant.Dot */);
+    while (parts.length > 0) {
+        var part = parts.shift();
+        var arrayStart = part.indexOf("[" /* Constant.ArrayStart */);
+        var conditionStart = part.indexOf("{" /* Constant.ConditionStart */);
+        var conditionEnd = part.indexOf("}" /* Constant.ConditionEnd */);
+        syntax.push({
+            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.slice(conditionStart + 1, conditionEnd) : null
         });
-    });
+    }
+    return syntax;
+}
+// The function below takes in a variable name in following format: "a.b.c" and safely evaluates its value in javascript context
+// For instance, for a.b.c, it will first check window["a"]. If it exists, it will recursively look at: window["a"]["b"] and finally,
+// return the value for window["a"]["b"]["c"].
+function evaluate(variable, base) {
+    if (base === void 0) { base = window; }
+    if (variable.length == 0) {
+        return base;
+    }
+    var part = variable.shift();
+    var output;
+    if (base && base[part.name]) {
+        var obj = base[part.name];
+        if (part.type !== 1 /* Type.Array */ && match(obj, part.condition)) {
+            output = evaluate(variable, obj);
+        }
+        else if (Array.isArray(obj)) {
+            var filtered = [];
+            for (var _i = 0, obj_1 = obj; _i < obj_1.length; _i++) {
+                var value = obj_1[_i];
+                if (match(value, part.condition)) {
+                    var op = evaluate(variable, value);
+                    if (op) {
+                        filtered.push(op);
+                    }
+                }
+            }
+            output = filtered;
+        }
+        return output;
+    }
+    return null;
+}
+function str$1(input) {
+    // Automatically trim string to max of Setting.ExtractLimit to avoid fetching long strings
+    return input ? JSON.stringify(input).slice(0, 10000 /* Setting.ExtractLimit */) : input;
+}
+function match(base, condition) {
+    if (condition) {
+        var prop = condition.split(":");
+        return prop.length > 1 ? base[prop[0]] == prop[1] : base[prop[0]];
+    }
+    return true;
+}
+function isEmpty(obj) {
+    return Object.keys(obj).length == 0;
 }
 
+var extract = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    clone: clone$1,
+    compute: compute$a,
+    data: data$e,
+    keys: keys,
+    reset: reset$n,
+    start: start$C,
+    stop: stop$z,
+    trigger: trigger$2,
+    update: update$1
+});
+
 var signalCallback = null;
 function signal(cb) {
     signalCallback = cb;
@@ -1010,244 +1169,46 @@ function stop$y() {
     // The ordering below should respect inter-module dependency.
     // E.g. if upgrade depends on upload, then upgrade needs to end before upload.
     // Similarly, if upload depends on metadata, upload needs to end before metadata.
-    modules$1.slice().reverse().forEach(function (x) { return measure(x.stop)(); });
-    stop$D();
-}
-function compute$a() {
-    compute$b();
-    compute$e();
-    compute$2();
-    compute$d();
-    compute$c();
-    compute$3();
-    compute$4();
-}
-
-var history$5 = [];
-var data$d;
-function start$A() {
-    history$5 = [];
-    max(26 /* Metric.Automation */, navigator.webdriver ? 1 /* BooleanFlag.True */ : 0 /* BooleanFlag.False */);
-    try {
-        // some sites (unintentionally) overwrite the window.self property, so we also check for the main window object
-        max(31 /* Metric.Iframed */, window.top == window.self || window.top == window ? 1 /* IframeStatus.TopFrame */ : 2 /* IframeStatus.Iframe */);
-    }
-    catch (ex) {
-        max(31 /* Metric.Iframed */, 0 /* IframeStatus.Unknown */);
-    }
-}
-function check$4(id, target, input) {
-    // Compute hash for fraud detection, if enabled. Hash is computed only if input meets the minimum length criteria
-    if (config$2.fraud && id !== null && input && input.length >= 5 /* Setting.WordLength */) {
-        data$d = { id: id, target: target, checksum: hash(input, 28 /* Setting.ChecksumPrecision */) };
-        // Only encode this event if we haven't already reported this hash
-        if (history$5.indexOf(data$d.checksum) < 0) {
-            history$5.push(data$d.checksum);
-            encode$2(41 /* Event.Fraud */);
-        }
-    }
-}
-
-// 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() {
-    tracker = {};
-    queuedTasks = [];
-    activeTask = null;
-    pauseTask = null;
-}
-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 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();
-        });
-    }
-}
-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 */;
-    }
-    // If this task is no longer being tracked, send stop message to the caller
-    return 2 /* Task.Stop */;
-}
-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;
-    }
-}
-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);
-    }
-}
-function suspend$1(timer) {
-    var _a;
-    return __awaiter(this, void 0, void 0, function () {
-        var id, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    id = key(timer);
-                    if (!(id in tracker)) return [3 /*break*/, 2];
-                    stop$x(timer);
-                    // some customer polyfills for requestIdleCallback return null 
-                    _b = tracker[id];
-                    return [4 /*yield*/, wait()];
-                case 1:
-                    // some customer polyfills for requestIdleCallback return null 
-                    _b.yield = ((_a = (_c.sent())) === null || _a === void 0 ? void 0 : _a.timeRemaining()) || 30 /* Setting.LongTask */;
-                    restart$2(timer);
-                    _c.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);
+    modules$1.slice().reverse().forEach(function (x) { return measure(x.stop)(); });
+    stop$D();
 }
-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 compute$9() {
+    compute$b();
+    compute$e();
+    compute$2();
+    compute$d();
+    compute$c();
+    compute$3();
+    compute$a();
+}
+
+var history$5 = [];
+var data$d;
+function start$A() {
+    history$5 = [];
+    max(26 /* Metric.Automation */, navigator.webdriver ? 1 /* BooleanFlag.True */ : 0 /* BooleanFlag.False */);
+    try {
+        // some sites (unintentionally) overwrite the window.self property, so we also check for the main window object
+        max(31 /* Metric.Iframed */, window.top == window.self || window.top == window ? 1 /* IframeStatus.TopFrame */ : 2 /* IframeStatus.Iframe */);
+    }
+    catch (ex) {
+        max(31 /* Metric.Iframed */, 0 /* IframeStatus.Unknown */);
+    }
 }
-// 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); }
-            });
+function check$4(id, target, input) {
+    // Compute hash for fraud detection, if enabled. Hash is computed only if input meets the minimum length criteria
+    if (config$2.fraud && id !== null && input && input.length >= 5 /* Setting.WordLength */) {
+        data$d = { id: id, target: target, checksum: hash(input, 28 /* Setting.ChecksumPrecision */) };
+        // Only encode this event if we haven't already reported this hash
+        if (history$5.indexOf(data$d.checksum) < 0) {
+            history$5.push(data$d.checksum);
+            encode$2(41 /* Event.Fraud */);
         }
-    };
-    requestAnimationFrame(function () { outgoing.postMessage(performance.now()); });
-}
-var requestIdleCallback = window["requestIdleCallback"] || requestIdleCallbackPolyfill;
+    }
+}
 
-var state$9 = [];
-function start$y() {
+var state$a = [];
+function start$z() {
     reset$m();
 }
 function observe$c(root) {
@@ -1259,14 +1220,14 @@ function recompute$8(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 */));
+        state$a.push({ time: time(evt), event: 42 /* Event.Change */, data: { target: target(evt), type: element.type, value: value, checksum: checksum } });
+        schedule(encode$3.bind(this, 42 /* Event.Change */));
     }
 }
 function reset$m() {
-    state$9 = [];
+    state$a = [];
 }
-function stop$w() {
+function stop$x() {
     reset$m();
 }
 
@@ -1287,8 +1248,8 @@ function offset(element) {
 }
 
 var UserInputTags = ["input", "textarea", "radio", "button", "canvas", "select"];
-var state$8 = [];
-function start$x() {
+var state$9 = [];
+function start$y() {
     reset$l();
 }
 function observe$b(root) {
@@ -1324,7 +1285,7 @@ function handler$3(event, root, evt) {
     // Check for null values before processing this event
     if (x !== null && y !== null) {
         var textInfo = text(t);
-        state$8.push({
+        state$9.push({
             time: time(evt),
             event: event,
             data: {
@@ -1343,7 +1304,7 @@ function handler$3(event, root, evt) {
                 isFullText: textInfo.isFullText,
             }
         });
-        schedule$1(encode$3.bind(this, event));
+        schedule(encode$3.bind(this, event));
     }
 }
 function link(node) {
@@ -1416,14 +1377,14 @@ function context(a) {
     return 0 /* BrowsingContext.Self */;
 }
 function reset$l() {
-    state$8 = [];
+    state$9 = [];
 }
-function stop$v() {
+function stop$w() {
     reset$l();
 }
 
-var state$7 = [];
-function start$w() {
+var state$8 = [];
+function start$x() {
     reset$k();
 }
 function observe$a(root) {
@@ -1433,19 +1394,19 @@ function observe$a(root) {
 }
 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 */));
+    state$8.push({ time: time(evt), event: 38 /* Event.Clipboard */, data: { target: target(evt), action: action } });
+    schedule(encode$3.bind(this, 38 /* Event.Clipboard */));
 }
 function reset$k() {
-    state$7 = [];
+    state$8 = [];
 }
-function stop$u() {
+function stop$v() {
     reset$k();
 }
 
 var timeout$6 = null;
-var state$6 = [];
-function start$v() {
+var state$7 = [];
+function start$w() {
     reset$j();
 }
 function observe$9(root) {
@@ -1466,31 +1427,31 @@ function recompute$6(evt) {
         }
         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();
+        if (state$7.length > 0 && (state$7[state$7.length - 1].data.target === data.target)) {
+            state$7.pop();
         }
-        state$6.push({ time: time(evt), event: 27 /* Event.Input */, data: data });
+        state$7.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));
+    schedule(encode$3.bind(this, event));
 }
 function reset$j() {
-    state$6 = [];
+    state$7 = [];
 }
-function stop$t() {
+function stop$u() {
     clearTimeout(timeout$6);
     reset$j();
 }
 
-var state$5 = [];
+var state$6 = [];
 var timeout$5 = null;
 var hasPrimaryTouch = false;
 var primaryTouchId = 0;
 var activeTouchPointIds = new Set();
-function start$u() {
+function start$v() {
     reset$i();
 }
 function observe$8(root) {
@@ -1570,26 +1531,26 @@ function handler$2(current) {
         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;
+            var length_1 = state$6.length;
+            var last = length_1 > 1 ? state$6[length_1 - 2] : null;
             if (last && similar$1(last, current)) {
-                state$5.pop();
+                state$6.pop();
             }
-            state$5.push(current);
+            state$6.push(current);
             clearTimeout(timeout$5);
             timeout$5 = setTimeout(process$6, 500 /* Setting.LookAhead */, current.event);
             break;
         default:
-            state$5.push(current);
+            state$6.push(current);
             process$6(current.event);
             break;
     }
 }
 function process$6(event) {
-    schedule$1(encode$3.bind(this, event));
+    schedule(encode$3.bind(this, event));
 }
 function reset$i() {
-    state$5 = [];
+    state$6 = [];
 }
 function similar$1(last, current) {
     var dx = last.data.x - current.data.x;
@@ -1599,18 +1560,18 @@ function similar$1(last, current) {
     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() {
+function stop$t() {
     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);
+    if (state$6.length > 0) {
+        process$6(state$6[state$6.length - 1].event);
     }
 }
 
 var data$c;
 var timeout$4 = null;
 var initialStateLogged = false;
-function start$t() {
+function start$u() {
     initialStateLogged = false;
     bind(window, "resize", recompute$5);
     recompute$5();
@@ -1634,22 +1595,22 @@ function recompute$5() {
     }
 }
 function process$5(event) {
-    schedule$1(encode$3.bind(this, event));
+    schedule(encode$3.bind(this, event));
 }
 function reset$h() {
     data$c = null;
     clearTimeout(timeout$4);
 }
-function stop$r() {
+function stop$s() {
     reset$h();
 }
 
-var state$4 = [];
+var state$5 = [];
 var initialTop = null;
 var initialBottom = null;
 var timeout$3 = null;
-function start$s() {
-    state$4 = [];
+function start$t() {
+    state$5 = [];
     recompute$4();
 }
 function observe$7(root) {
@@ -1689,12 +1650,12 @@ function recompute$4(event) {
         initialBottom = bottom;
         return;
     }
-    var length = state$4.length;
-    var last = length > 1 ? state$4[length - 2] : null;
+    var length = state$5.length;
+    var last = length > 1 ? state$5[length - 2] : null;
     if (last && similar(last, current)) {
-        state$4.pop();
+        state$5.pop();
     }
-    state$4.push(current);
+    state$5.push(current);
     clearTimeout(timeout$3);
     timeout$3 = setTimeout(process$4, 500 /* Setting.LookAhead */, 10 /* Event.Scroll */);
 }
@@ -1716,21 +1677,21 @@ function getPositionNode(x, y) {
     return node;
 }
 function reset$g() {
-    state$4 = [];
+    state$5 = [];
     initialTop = null;
     initialBottom = null;
 }
 function process$4(event) {
-    schedule$1(encode$3.bind(this, event));
+    schedule(encode$3.bind(this, event));
 }
 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 compute$9() {
+function compute$8() {
     var _a, _b;
-    compute$9.dn = 14 /* FunctionNames.ScrollCompute */;
+    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 */));
@@ -1740,9 +1701,9 @@ function compute$9() {
         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() {
+function stop$r() {
     clearTimeout(timeout$3);
-    state$4 = [];
+    state$5 = [];
     initialTop = null;
     initialBottom = null;
 }
@@ -1750,7 +1711,7 @@ function stop$q() {
 var data$b = null;
 var previous = null;
 var timeout$2 = null;
-function start$r() {
+function start$s() {
     reset$f();
 }
 function observe$6(root) {
@@ -1789,19 +1750,19 @@ function recompute$3(root) {
     timeout$2 = setTimeout(process$3, 500 /* Setting.LookAhead */, 21 /* Event.Selection */);
 }
 function process$3(event) {
-    schedule$1(encode$3.bind(this, event));
+    schedule(encode$3.bind(this, event));
 }
 function reset$f() {
     previous = null;
     data$b = { start: 0, startOffset: 0, end: 0, endOffset: 0 };
 }
-function stop$p() {
+function stop$q() {
     reset$f();
     clearTimeout(timeout$2);
 }
 
-var state$3 = [];
-function start$q() {
+var state$4 = [];
+function start$r() {
     reset$e();
 }
 function observe$5(root) {
@@ -1809,18 +1770,18 @@ function observe$5(root) {
 }
 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 */));
+    state$4.push({ time: time(evt), event: 39 /* Event.Submit */, data: { target: target(evt) } });
+    schedule(encode$3.bind(this, 39 /* Event.Submit */));
 }
 function reset$e() {
-    state$3 = [];
+    state$4 = [];
 }
-function stop$o() {
+function stop$p() {
     reset$e();
 }
 
 var data$a;
-function start$p() {
+function start$q() {
     bind(window, "pagehide", recompute$1);
 }
 function recompute$1(evt) {
@@ -1832,12 +1793,12 @@ function recompute$1(evt) {
 function reset$d() {
     data$a = null;
 }
-function stop$n() {
+function stop$o() {
     reset$d();
 }
 
 var data$9;
-function start$o() {
+function start$p() {
     bind(document, "visibilitychange", recompute);
     recompute();
 }
@@ -1850,38 +1811,38 @@ function recompute(evt) {
 function reset$c() {
     data$9 = null;
 }
-function stop$m() {
+function stop$n() {
     reset$c();
 }
 
-function start$n() {
-    start$n.dn = 8 /* FunctionNames.InteractionStart */;
-    start$g();
+function start$o() {
+    start$o.dn = 8 /* FunctionNames.InteractionStart */;
+    start$h();
+    start$y();
     start$x();
+    start$v();
     start$w();
     start$u();
-    start$v();
+    start$p();
     start$t();
-    start$o();
     start$s();
+    start$z();
     start$r();
-    start$y();
     start$q();
-    start$p();
 }
-function stop$l() {
-    stop$e();
+function stop$m() {
+    stop$f();
+    stop$w();
     stop$v();
+    stop$t();
     stop$u();
     stop$s();
-    stop$t();
+    stop$n();
     stop$r();
-    stop$m();
     stop$q();
+    stop$x();
     stop$p();
-    stop$w();
     stop$o();
-    stop$n();
 }
 function observe$4(root) {
     observe$7(root);
@@ -1901,8 +1862,8 @@ function observe$4(root) {
 var interaction = /*#__PURE__*/Object.freeze({
     __proto__: null,
     observe: observe$4,
-    start: start$n,
-    stop: stop$l
+    start: start$o,
+    stop: stop$m
 });
 
 // Following code takes an array of tokens and transforms it to optimize for repeating tokens and make it efficient to send over the wire
@@ -1950,17 +1911,19 @@ function tokenize (tokens) {
 
 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;
+function proxyStyleRules$1(win) {
+    if ((config$2.lean && config$2.lite) || win === null || win === undefined) {
+        return;
+    }
+    win.clarityOverrides = win.clarityOverrides || {};
+    if (win['CSSStyleSheet'] && win.CSSStyleSheet.prototype) {
+        if (win.clarityOverrides.replace === undefined) {
+            win.clarityOverrides.replace = CSSStyleSheet.prototype.replace;
             CSSStyleSheet.prototype.replace = function () {
                 if (active()) {
                     max(36 /* Metric.ConstructedStyles */, 1);
@@ -1971,11 +1934,11 @@ function start$m() {
                         trackStyleChange(time(), this[styleSheetId], 1 /* StyleSheetOperation.Replace */, arguments[0]);
                     }
                 }
-                return replace.apply(this, arguments);
+                return win.clarityOverrides.replace.apply(this, arguments);
             };
         }
-        if (replaceSync === null) {
-            replaceSync = CSSStyleSheet.prototype.replaceSync;
+        if (win.clarityOverrides.replaceSync === undefined) {
+            win.clarityOverrides.replaceSync = CSSStyleSheet.prototype.replaceSync;
             CSSStyleSheet.prototype.replaceSync = function () {
                 if (active()) {
                     max(36 /* Metric.ConstructedStyles */, 1);
@@ -1986,14 +1949,23 @@ function start$m() {
                         trackStyleChange(time(), this[styleSheetId], 2 /* StyleSheetOperation.ReplaceSync */, arguments[0]);
                     }
                 }
-                return replaceSync.apply(this, arguments);
+                return win.clarityOverrides.replaceSync.apply(this, arguments);
             };
         }
     }
 }
+function start$n() {
+    proxyStyleRules$1(window);
+}
 function checkDocumentStyles(documentNode, timestamp) {
+    if (config$2.lean && config$2.lite) {
+        return;
+    }
     if (documentNodes.indexOf(documentNode) === -1) {
         documentNodes.push(documentNode);
+        if (documentNode.defaultView) {
+            proxyStyleRules$1(documentNode.defaultView);
+        }
     }
     timestamp = timestamp || time();
     if (!(documentNode === null || documentNode === void 0 ? void 0 : documentNode.adoptedStyleSheets)) {
@@ -2027,7 +1999,7 @@ function checkDocumentStyles(documentNode, timestamp) {
         styleTimeMap[documentId] = timestamp;
     }
 }
-function compute$8() {
+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);
@@ -2039,7 +2011,7 @@ function reset$b() {
     sheetAdoptionState = [];
     sheetUpdateState = [];
 }
-function stop$k() {
+function stop$l() {
     styleSheetMap = {};
     styleTimeMap = {};
     documentNodes = [];
@@ -2077,7 +2049,7 @@ function arraysEqual(a, b) {
     return a.every(function (value, index) { return value === b[index]; });
 }
 
-var state$2 = [];
+var state$3 = [];
 var elementAnimate = null;
 var animationPlay = null;
 var animationPause = null;
@@ -2087,7 +2059,7 @@ var animationFinish = null;
 var animationId = 'clarityAnimationId';
 var operationCount = 'clarityOperationCount';
 var maxOperations = 20;
-function start$l() {
+function start$m() {
     if (window["Animation"] &&
         window["Animation"].prototype &&
         window["KeyframeEffect"] &&
@@ -2125,10 +2097,10 @@ function start$l() {
     }
 }
 function reset$a() {
-    state$2 = [];
+    state$3 = [];
 }
 function track$6(time, id, operation, keyFrames, timing, targetId, timeline) {
-    state$2.push({
+    state$3.push({
         time: time,
         event: 44 /* Event.Animation */,
         data: {
@@ -2142,7 +2114,7 @@ function track$6(time, id, operation, keyFrames, timing, targetId, timeline) {
     });
     encode$4(44 /* Event.Animation */);
 }
-function stop$j() {
+function stop$k() {
     reset$a();
 }
 function overrideAnimationHelper(functionToOverride, name) {
@@ -2197,7 +2169,7 @@ 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;
+        var eventTime, tokens, _a, d, _i, _b, r, _c, _d, entry, _e, _f, entry, _g, _h, entry, values, _j, values_1, value, state$1, data, active, suspend, privacy, mangle, keys, _k, keys_1, key, box, factor, attr;
         return __generator(this, function (_l) {
             switch (_l.label) {
                 case 0:
@@ -2222,7 +2194,7 @@ function encode$4 (type, timer, ts) {
                     queue(tokens);
                     return [3 /*break*/, 12];
                 case 2:
-                    for (_i = 0, _b = state$1; _i < _b.length; _i++) {
+                    for (_i = 0, _b = state$2; _i < _b.length; _i++) {
                         r = _b[_i];
                         tokens = [r.time, 7 /* Event.Region */];
                         tokens.push(r.data.id);
@@ -2253,7 +2225,7 @@ function encode$4 (type, timer, ts) {
                     reset$b();
                     return [3 /*break*/, 12];
                 case 4:
-                    for (_g = 0, _h = state$2; _g < _h.length; _g++) {
+                    for (_g = 0, _h = state$3; _g < _h.length; _g++) {
                         entry = _h[_g];
                         tokens = [entry.time, entry.event];
                         tokens.push(entry.data.id);
@@ -2268,7 +2240,7 @@ function encode$4 (type, timer, ts) {
                     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 */) {
+                    if (state(timer) === 2 /* Task.Stop */) {
                         return [3 /*break*/, 12];
                     }
                     values = updates$2();
@@ -2278,14 +2250,14 @@ function encode$4 (type, timer, ts) {
                 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];
+                    state$1 = state(timer);
+                    if (!(state$1 === 0 /* Task.Wait */)) return [3 /*break*/, 8];
                     return [4 /*yield*/, suspend$1(timer)];
                 case 7:
-                    state = _l.sent();
+                    state$1 = _l.sent();
                     _l.label = 8;
                 case 8:
-                    if (state === 2 /* Task.Stop */) {
+                    if (state$1 === 2 /* Task.Stop */) {
                         return [3 /*break*/, 10];
                     }
                     data = value.data;
@@ -2312,7 +2284,7 @@ function encode$4 (type, timer, ts) {
                                     }
                                     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])));
+                                        tokens.push("".concat("#" /* Constant.Hash */).concat(str(box[0]), ".").concat(str(box[1])));
                                     }
                                     break;
                                 case "attributes":
@@ -2358,7 +2330,7 @@ function size(value) {
     }
     return value.metadata.size;
 }
-function str$1(input) {
+function str(input) {
     return input.toString(36);
 }
 function attribute(key, value, privacy) {
@@ -2369,12 +2341,12 @@ var data$8;
 function reset$9() {
     data$8 = null;
 }
-function start$k() {
+function start$l() {
     reset$9();
-    compute$7();
+    compute$6();
 }
-function compute$7() {
-    compute$7.dn = 19 /* FunctionNames.DocumentCompute */;
+function compute$6() {
+    compute$6.dn = 19 /* FunctionNames.DocumentCompute */;
     var body = document.body;
     var d = document.documentElement;
     var bodyClientWidth = body ? body.clientWidth : null;
@@ -2397,13 +2369,13 @@ function compute$7() {
         encode$4(8 /* Event.Document */);
     }
 }
-function stop$i() {
+function stop$j() {
     reset$9();
 }
 
 function traverse (root, timer, source, timestamp) {
     return __awaiter(this, void 0, void 0, function () {
-        var queue, entry, next, state, subnode;
+        var queue, entry, next, state$1, subnode;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -2417,14 +2389,14 @@ function traverse (root, timer, source, timestamp) {
                         queue.push(next);
                         next = next.nextSibling;
                     }
-                    state = state$a(timer);
-                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 3];
+                    state$1 = state(timer);
+                    if (!(state$1 === 0 /* Task.Wait */)) return [3 /*break*/, 3];
                     return [4 /*yield*/, suspend$1(timer)];
                 case 2:
-                    state = _a.sent();
+                    state$1 = _a.sent();
                     _a.label = 3;
                 case 3:
-                    if (state === 2 /* Task.Stop */) {
+                    if (state$1 === 2 /* Task.Stop */) {
                         return [3 /*break*/, 4];
                     }
                     subnode = processNode(entry, source, timestamp);
@@ -2434,93 +2406,30 @@ function traverse (root, timer, source, timestamp) {
                     return [3 /*break*/, 1];
                 case 4: return [2 /*return*/];
             }
-        });
-    });
-}
-
-var observers = new Set();
-var mutations = [];
-var throttledMutations = {};
-var insertRule = null;
-var deleteRule = null;
-var attachShadow = null;
-var mediaInsertRule = null;
-var mediaDeleteRule = null;
-var queue$2 = [];
-var timeout$1 = null;
-var throttleDelay = null;
-var activePeriod = null;
-var history$4 = {};
-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$j() {
-    start$j.dn = 21 /* FunctionNames.MutationStart */;
-    observers = new Set();
-    queue$2 = [];
-    timeout$1 = null;
-    activePeriod = 0;
-    history$4 = {};
-    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
-    // using javascript API is that it doesn't trigger DOM mutation and therefore we
-    // need to override the insertRule API and listen for changes manually.
-    if (insertRule === null) {
-        insertRule = CSSStyleSheet.prototype.insertRule;
-        CSSStyleSheet.prototype.insertRule = function () {
-            if (active()) {
-                schedule(this.ownerNode);
-            }
-            return insertRule.apply(this, arguments);
-        };
-    }
-    if ("CSSMediaRule" in window && mediaInsertRule === null) {
-        mediaInsertRule = CSSMediaRule.prototype.insertRule;
-        CSSMediaRule.prototype.insertRule = function () {
-            if (active()) {
-                schedule(this.parentStyleSheet.ownerNode);
-            }
-            return mediaInsertRule.apply(this, arguments);
-        };
-    }
-    if (deleteRule === null) {
-        deleteRule = CSSStyleSheet.prototype.deleteRule;
-        CSSStyleSheet.prototype.deleteRule = function () {
-            if (active()) {
-                schedule(this.ownerNode);
-            }
-            return deleteRule.apply(this, arguments);
-        };
-    }
-    if ("CSSMediaRule" in window && mediaDeleteRule === null) {
-        mediaDeleteRule = CSSMediaRule.prototype.deleteRule;
-        CSSMediaRule.prototype.deleteRule = function () {
-            if (active()) {
-                schedule(this.parentStyleSheet.ownerNode);
-            }
-            return mediaDeleteRule.apply(this, arguments);
-        };
-    }
-    // Add a hook to attachShadow API calls
-    // In case we are unable to add a hook and browser throws an exception,
-    // reset attachShadow variable and resume processing like before
-    if (attachShadow === null) {
-        attachShadow = Element.prototype.attachShadow;
-        try {
-            Element.prototype.attachShadow = function () {
-                if (active()) {
-                    return schedule(attachShadow.apply(this, arguments));
-                }
-                else {
-                    return attachShadow.apply(this, arguments);
-                }
-            };
-        }
-        catch (_a) {
-            attachShadow = null;
-        }
-    }
+        });
+    });
+}
+
+var observers = new Set();
+var mutations = [];
+var throttledMutations = {};
+var queue$2 = [];
+var timeout$1 = null;
+var throttleDelay = null;
+var activePeriod = null;
+var history$4 = {};
+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 = new Set();
+    queue$2 = [];
+    timeout$1 = null;
+    activePeriod = 0;
+    history$4 = {};
+    observedNodes = new WeakMap();
+    proxyStyleRules(window);
 }
 function observe$3(node) {
     // Create a new observer for every time a new DOM tree (e.g. root document or shadowdom root) is discovered on the page
@@ -2535,6 +2444,9 @@ function observe$3(node) {
             observedNodes.set(node, observer);
             observers.add(observer);
         }
+        if (node['defaultView']) {
+            proxyStyleRules(node['defaultView']);
+        }
     }
     catch (e) {
         log$1(2 /* Code.MutationObserver */, 0 /* Severity.Info */, e ? e.name : null);
@@ -2548,7 +2460,7 @@ function monitor(frame) {
         bind(frame, "load" /* Constant.LoadEvent */, generate.bind(this, frame, "childList" /* Constant.ChildList */), true);
     }
 }
-function stop$h() {
+function stop$i() {
     for (var _i = 0, _a = Array.from(observers); _i < _a.length; _i++) {
         var observer = _a[_i];
         if (observer) {
@@ -2581,34 +2493,34 @@ function handle$1(m) {
     var now = time();
     track$7(6 /* Event.Mutation */, now);
     mutations.push({ time: now, mutations: m });
-    schedule$1(process$2, 1 /* Priority.High */).then(function () {
-        setTimeout(compute$7);
-        measure(compute$6)();
+    schedule(process$2, 1 /* Priority.High */).then(function () {
+        setTimeout(compute$6);
+        measure(compute$5)();
     });
 }
 function processMutation(timer, mutation, instance, timestamp) {
     return __awaiter(this, void 0, void 0, function () {
-        var state, target, type;
+        var state$1, target, type;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    state = state$a(timer);
-                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 2];
+                    state$1 = state(timer);
+                    if (!(state$1 === 0 /* Task.Wait */)) return [3 /*break*/, 2];
                     return [4 /*yield*/, suspend$1(timer)];
                 case 1:
-                    state = _a.sent();
+                    state$1 = _a.sent();
                     _a.label = 2;
                 case 2:
-                    if (state === 2 /* Task.Stop */) {
+                    if (state$1 === 2 /* Task.Stop */) {
                         return [2 /*return*/];
                     }
                     target = mutation.target;
                     type = config$2.throttleDom ? track$5(mutation, timer, instance, timestamp) : mutation.type;
                     if (type && target && target.ownerDocument) {
-                        parse$1(target.ownerDocument);
+                        parse(target.ownerDocument);
                     }
                     if (type && target && target.nodeType == Node.DOCUMENT_FRAGMENT_NODE && target.host) {
-                        parse$1(target);
+                        parse(target);
                     }
                     switch (type) {
                         case "attributes" /* Constant.Attributes */:
@@ -2636,7 +2548,7 @@ function process$2() {
             switch (_d.label) {
                 case 0:
                     timer = { id: id(), cost: 3 /* Metric.LayoutCost */ };
-                    start$z(timer);
+                    start$d(timer);
                     _d.label = 1;
                 case 1:
                     if (!(mutations.length > 0)) return [3 /*break*/, 7];
@@ -2686,7 +2598,7 @@ function process$2() {
                     _d.label = 13;
                 case 13:
                     cleanHistory();
-                    stop$x(timer);
+                    stop$c(timer);
                     return [2 /*return*/];
             }
         });
@@ -2758,7 +2670,7 @@ function names(nodes) {
 }
 function processNodeList(list, source, timer, timestamp) {
     return __awaiter(this, void 0, void 0, function () {
-        var length, i, node, state;
+        var length, i, node, state$1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -2772,14 +2684,14 @@ function processNodeList(list, source, timer, timestamp) {
                     traverse(node, timer, source, timestamp);
                     return [3 /*break*/, 5];
                 case 2:
-                    state = state$a(timer);
-                    if (!(state === 0 /* Task.Wait */)) return [3 /*break*/, 4];
+                    state$1 = state(timer);
+                    if (!(state$1 === 0 /* Task.Wait */)) return [3 /*break*/, 4];
                     return [4 /*yield*/, suspend$1(timer)];
                 case 3:
-                    state = _a.sent();
+                    state$1 = _a.sent();
                     _a.label = 4;
                 case 4:
-                    if (state === 2 /* Task.Stop */) {
+                    if (state$1 === 2 /* Task.Stop */) {
                         return [3 /*break*/, 6];
                     }
                     processNode(node, source, timestamp);
@@ -2797,10 +2709,10 @@ function processThrottledMutations() {
         clearTimeout(throttleDelay);
     }
     throttleDelay = setTimeout(function () {
-        schedule$1(process$2, 1 /* Priority.High */);
+        schedule(process$2, 1 /* Priority.High */);
     }, 33 /* Setting.LookAhead */);
 }
-function schedule(node) {
+function schedule$1(node) {
     // Only schedule manual trigger for this node if it's not already in the queue
     if (queue$2.indexOf(node) < 0) {
         queue$2.push(node);
@@ -2812,11 +2724,11 @@ function schedule(node) {
         clearTimeout(timeout$1);
     }
     timeout$1 = setTimeout(function () {
-        trigger$2();
+        trigger$1();
     }, 33 /* Setting.LookAhead */);
     return node;
 }
-function trigger$2() {
+function trigger$1() {
     for (var _i = 0, queue_1 = queue$2; _i < queue_1.length; _i++) {
         var node = queue_1[_i];
         // Generate a mutation for this node only if it still exists
@@ -2846,6 +2758,71 @@ function generate(target, type) {
             type: type,
         },
     ]);
+}
+function proxyStyleRules(win) {
+    if (win === null || win === undefined) {
+        return;
+    }
+    win.clarityOverrides = win.clarityOverrides || {};
+    // Some popular open source libraries, like styled-components, optimize performance
+    // by injecting CSS using insertRule API vs. appending text node. A side effect of
+    // using javascript API is that it doesn't trigger DOM mutation and therefore we
+    // need to override the insertRule API and listen for changes manually.
+    if (win.clarityOverrides.InsertRule === undefined) {
+        win.clarityOverrides.InsertRule = win.CSSStyleSheet.prototype.insertRule;
+        win.CSSStyleSheet.prototype.insertRule = function () {
+            if (active()) {
+                schedule$1(this.ownerNode);
+            }
+            return win.clarityOverrides.InsertRule.apply(this, arguments);
+        };
+    }
+    if ("CSSMediaRule" in win && win.clarityOverrides.MediaInsertRule === undefined) {
+        win.clarityOverrides.MediaInsertRule = win.CSSMediaRule.prototype.insertRule;
+        win.CSSMediaRule.prototype.insertRule = function () {
+            if (active()) {
+                schedule$1(this.parentStyleSheet.ownerNode);
+            }
+            return win.clarityOverrides.MediaInsertRule.apply(this, arguments);
+        };
+    }
+    if (win.clarityOverrides.DeleteRule === undefined) {
+        win.clarityOverrides.DeleteRule = win.CSSStyleSheet.prototype.deleteRule;
+        win.CSSStyleSheet.prototype.deleteRule = function () {
+            if (active()) {
+                schedule$1(this.ownerNode);
+            }
+            return win.clarityOverrides.DeleteRule.apply(this, arguments);
+        };
+    }
+    if ("CSSMediaRule" in win && win.clarityOverrides.MediaDeleteRule === undefined) {
+        win.clarityOverrides.MediaDeleteRule = win.CSSMediaRule.prototype.deleteRule;
+        win.CSSMediaRule.prototype.deleteRule = function () {
+            if (active()) {
+                schedule$1(this.parentStyleSheet.ownerNode);
+            }
+            return win.clarityOverrides.MediaDeleteRule.apply(this, arguments);
+        };
+    }
+    // Add a hook to attachShadow API calls
+    // In case we are unable to add a hook and browser throws an exception,
+    // reset attachShadow variable and resume processing like before
+    if (win.clarityOverrides.AttachShadow === undefined) {
+        win.clarityOverrides.AttachShadow = win.Element.prototype.attachShadow;
+        try {
+            win.Element.prototype.attachShadow = function () {
+                if (active()) {
+                    return schedule$1(win.clarityOverrides.AttachShadow.apply(this, arguments));
+                }
+                else {
+                    return win.clarityOverrides.AttachShadow.apply(this, arguments);
+                }
+            };
+        }
+        catch (_a) {
+            win.clarityOverrides.AttachShadow = null;
+        }
+    }
 }
 
 var digitsRegex = /[^0-9\.]/g;
@@ -2945,7 +2922,7 @@ function processNode (node, source, timestamp) {
             // 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) {
-                parse$1(document);
+                parse(document);
             }
             checkDocumentStyles(node, timestamp);
             observe$2(node);
@@ -2953,7 +2930,7 @@ function processNode (node, source, timestamp) {
         case Node.DOCUMENT_FRAGMENT_NODE:
             var shadowRoot = node;
             if (shadowRoot.host) {
-                parse$1(shadowRoot);
+                parse(shadowRoot);
                 var type = typeof (shadowRoot.constructor);
                 if (type === "function" /* Constant.Function */ && shadowRoot.constructor.toString().indexOf("[native code]" /* Constant.NativeCode */) >= 0) {
                     observe$2(shadowRoot);
@@ -3299,11 +3276,11 @@ 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() {
+function start$j() {
     reset$7();
-    parse$1(document, true);
+    parse(document, true);
 }
-function stop$g() {
+function stop$h() {
     reset$7();
 }
 function reset$7() {
@@ -3327,7 +3304,7 @@ function reset$7() {
 }
 // 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) {
+function parse(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
@@ -3402,7 +3379,7 @@ function add(node, parent, data, source) {
     updateImageSize(values[id]);
     track$4(id, source);
 }
-function update$1(node, parent, data, source) {
+function update(node, parent, data, source) {
     var id = getId(node);
     var parentId = parent ? getId(parent) : null;
     var previousId = getPreviousId(node);
@@ -3676,6 +3653,9 @@ function getPreviousId(node) {
 function track$4(id, source, changed, parentChanged) {
     if (changed === void 0) { changed = true; }
     if (parentChanged === void 0) { parentChanged = false; }
+    if (config$2.lean && config$2.lite) {
+        return;
+    }
     // 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.
@@ -3689,13 +3669,13 @@ function track$4(id, source, changed, parentChanged) {
     }
 }
 
-var state$1 = [];
+var state$2 = [];
 var regionMap = null; // Maps region nodes => region name
 var regions = {};
 var queue$1 = [];
 var watch = false;
 var observer$1 = null;
-function start$h() {
+function start$i() {
     reset$6();
     observer$1 = null;
     regionMap = new WeakMap();
@@ -3740,8 +3720,8 @@ function track$3(id, event) {
     // Process updates to this region, if applicable
     process$1(node, data, interaction, data.visibility);
 }
-function compute$6() {
-    compute$6.dn = 24 /* FunctionNames.RegionCompute */;
+function compute$5() {
+    compute$5.dn = 24 /* FunctionNames.RegionCompute */;
     // Process any regions where we couldn't resolve an "id" for at the time of last intersection observer event
     // This could happen in cases where elements are not yet processed by Clarity's virtual DOM but browser reports a change, regardless.
     // For those cases we add them to the queue and re-process them below
@@ -3752,7 +3732,7 @@ function compute$6() {
         if (id) {
             r.state.data.id = id;
             regions[id] = r.state.data;
-            state$1.push(r.state);
+            state$2.push(r.state);
         }
         else {
             q.push(r);
@@ -3760,7 +3740,7 @@ function compute$6() {
     }
     queue$1 = q;
     // Schedule encode only when we have at least one valid data entry
-    if (state$1.length > 0) {
+    if (state$2.length > 0) {
         encode$4(7 /* Event.Region */);
     }
 }
@@ -3796,7 +3776,7 @@ function handler$1(entries) {
             }
         }
     }
-    if (state$1.length > 0) {
+    if (state$2.length > 0) {
         encode$4(7 /* Event.Region */);
     }
 }
@@ -3810,21 +3790,21 @@ function process$1(n, d, s, v) {
     if (d.id) {
         if ((d.id in regions && updated) || !(d.id in regions)) {
             regions[d.id] = d;
-            state$1.push(clone$1(d));
+            state$2.push(clone(d));
         }
     }
     else {
         // Get the time before adding to queue to ensure accurate event time
-        queue$1.push({ node: n, state: clone$1(d) });
+        queue$1.push({ node: n, state: clone(d) });
     }
 }
-function clone$1(r) {
+function clone(r) {
     return { time: time(), data: { id: r.id, interaction: r.interaction, visibility: r.visibility, name: r.name } };
 }
 function reset$6() {
-    state$1 = [];
+    state$2 = [];
 }
-function stop$f() {
+function stop$g() {
     reset$6();
     regionMap = null;
     regions = {};
@@ -3881,7 +3861,7 @@ function encode$3 (type, ts) {
                 case 18 /* Event.TouchEnd */:
                 case 19 /* Event.TouchMove */:
                 case 20 /* Event.TouchCancel */:
-                    for (_i = 0, _a = state$5; _i < _a.length; _i++) {
+                    for (_i = 0, _a = state$6; _i < _a.length; _i++) {
                         entry = _a[_i];
                         pTarget = metadata$2(entry.data.target, entry.event);
                         if (pTarget.id > 0) {
@@ -3902,7 +3882,7 @@ function encode$3 (type, ts) {
                     reset$i();
                     break;
                 case 9 /* Event.Click */:
-                    for (_b = 0, _c = state$8; _b < _c.length; _b++) {
+                    for (_b = 0, _c = state$9; _b < _c.length; _b++) {
                         entry = _c[_b];
                         cTarget = metadata$2(entry.data.target, entry.event, entry.data.text);
                         tokens = [entry.time, entry.event];
@@ -3926,7 +3906,7 @@ function encode$3 (type, ts) {
                     reset$l();
                     break;
                 case 38 /* Event.Clipboard */:
-                    for (_d = 0, _e = state$7; _d < _e.length; _d++) {
+                    for (_d = 0, _e = state$8; _d < _e.length; _d++) {
                         entry = _e[_d];
                         tokens = [entry.time, entry.event];
                         target = metadata$2(entry.data.target, entry.event);
@@ -3954,7 +3934,7 @@ function encode$3 (type, ts) {
                     queue(tokens);
                     break;
                 case 27 /* Event.Input */:
-                    for (_f = 0, _g = state$6; _f < _g.length; _f++) {
+                    for (_f = 0, _g = state$7; _f < _g.length; _f++) {
                         entry = _g[_f];
                         iTarget = metadata$2(entry.data.target, entry.event, entry.data.value);
                         tokens = [entry.time, entry.event];
@@ -3978,7 +3958,7 @@ function encode$3 (type, ts) {
                     }
                     break;
                 case 10 /* Event.Scroll */:
-                    for (_h = 0, _j = state$4; _h < _j.length; _h++) {
+                    for (_h = 0, _j = state$5; _h < _j.length; _h++) {
                         entry = _j[_h];
                         sTarget = metadata$2(entry.data.target, entry.event);
                         top_1 = metadata$2(entry.data.top, entry.event);
@@ -3999,7 +3979,7 @@ function encode$3 (type, ts) {
                     reset$g();
                     break;
                 case 42 /* Event.Change */:
-                    for (_k = 0, _l = state$9; _k < _l.length; _k++) {
+                    for (_k = 0, _l = state$a; _k < _l.length; _k++) {
                         entry = _l[_k];
                         tokens = [entry.time, entry.event];
                         target = metadata$2(entry.data.target, entry.event);
@@ -4015,7 +3995,7 @@ function encode$3 (type, ts) {
                     reset$m();
                     break;
                 case 39 /* Event.Submit */:
-                    for (_m = 0, _o = state$3; _m < _o.length; _m++) {
+                    for (_m = 0, _o = state$4; _m < _o.length; _m++) {
                         entry = _o[_m];
                         tokens = [entry.time, entry.event];
                         target = metadata$2(entry.data.target, entry.event);
@@ -4053,10 +4033,10 @@ function encode$3 (type, ts) {
     });
 }
 
-var state = [];
+var state$1 = [];
 var updates$1 = [];
-function start$g() {
-    state = [];
+function start$h() {
+    state$1 = [];
     reset$5();
 }
 function reset$5() {
@@ -4065,7 +4045,7 @@ function reset$5() {
 function track$2(time, event, hash, x, y, reaction, context) {
     if (reaction === void 0) { reaction = 1 /* BooleanFlag.True */; }
     if (context === void 0) { context = 0 /* BrowsingContext.Self */; }
-    state.push({
+    state$1.push({
         time: time,
         event: 22 /* Event.Timeline */,
         data: {
@@ -4082,12 +4062,12 @@ function track$2(time, event, hash, x, y, reaction, context) {
     // We would still need to capture the last scroll position as part of the baseline event, even when timeline will be empty.
     track$8(event, x, y, time);
 }
-function compute$5() {
+function compute$4() {
     var temp = [];
     updates$1 = [];
     var max = data$1.start + data$1.duration;
     var min = Math.max(max - 2000 /* Setting.TimelineSpan */, 0);
-    for (var _i = 0, state_1 = state; _i < state_1.length; _i++) {
+    for (var _i = 0, state_1 = state$1; _i < state_1.length; _i++) {
         var s = state_1[_i];
         if (s.time >= min) {
             if (s.time <= max) {
@@ -4096,11 +4076,11 @@ function compute$5() {
             temp.push(s);
         }
     }
-    state = temp; // Drop events less than the min time
+    state$1 = temp; // Drop events less than the min time
     encode$3(22 /* Event.Timeline */);
 }
-function stop$e() {
-    state = [];
+function stop$f() {
+    state$1 = [];
     reset$5();
 }
 
@@ -4113,7 +4093,7 @@ var transit;
 var active$1;
 var queuedTime = 0;
 var track$1;
-function start$f() {
+function start$g() {
     active$1 = true;
     discoverBytes = 0;
     playbackBytes = 0;
@@ -4167,7 +4147,7 @@ function queue(tokens, transmit) {
         }
     }
 }
-function stop$d() {
+function stop$e() {
     clearTimeout(timeout);
     upload(true);
     discoverBytes = 0;
@@ -4193,10 +4173,10 @@ function upload(final) {
                     }
                     // CAUTION: Ensure "transmit" is set to false in the queue function for following events
                     // Otherwise you run a risk of infinite loop.
-                    compute$6();
                     compute$5();
-                    compute$a();
-                    compute$8();
+                    compute$4();
+                    compute$9();
+                    compute$7();
                     last = final === true;
                     e = JSON.stringify(envelope(last));
                     a = "[".concat(analysis.join(), "]");
@@ -4374,7 +4354,7 @@ function response(payload) {
                 break;
             case "EXTRACT" /* Constant.Extract */:
                 if (parts.length > 1) {
-                    trigger$1(parts[1]);
+                    trigger$2(parts[1]);
                 }
                 break;
             case "SIGNAL" /* Constant.Signal */:
@@ -4388,7 +4368,7 @@ function response(payload) {
 
 var history$3 = {};
 var data$7;
-function start$e() {
+function start$f() {
     bind(window, "error", handler);
     history$3 = {};
 }
@@ -4457,7 +4437,7 @@ function encode$2 (type) {
 
 var history$2 = {};
 var data$6;
-function start$d() {
+function start$e() {
     history$2 = {};
 }
 function log$1(code, severity, name, message, stack) {
@@ -4480,196 +4460,270 @@ function log$1(code, severity, name, message, stack) {
     }
     encode$2(33 /* Event.Log */);
 }
-function stop$c() {
+function stop$d() {
     history$2 = {};
 }
 
-var data$5 = {};
-var keys = new Set();
-var variables = {};
-var selectors = {};
-var hashes = {};
-var validation = {};
-function start$c() {
-    reset$4();
+// 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;
+        });
+    }
 }
-// Input string is of the following form:
-// EXTRACT 101|element { "1": ".class1", "2": "~window.a.b", "3": "!abc"}
-// if element is present on the page it will set up event 101 to grab the contents of the class1 selector into component 1,
-// the javascript evaluated contents of window.a.b into component 2,
-// and the contents of Clarity's hash abc into component 3
-function trigger$1(input) {
-    try {
-        var parts = input && input.length > 0 ? input.split(/ (.*)/) : ["" /* Constant.Empty */];
-        var keyparts = parts[0].split(/\|(.*)/);
-        var key = parseInt(keyparts[0]);
-        var element = keyparts.length > 1 ? keyparts[1] : "" /* Constant.Empty */;
-        var values = parts.length > 1 ? JSON.parse(parts[1]) : {};
-        variables[key] = {};
-        selectors[key] = {};
-        hashes[key] = {};
-        validation[key] = element;
-        for (var v in values) {
-            // values is a set of strings for proper JSON parsing, but it's more efficient 
-            // to interact with them as numbers
-            var id = parseInt(v);
-            var value = values[v];
-            var source = 2 /* ExtractSource.Text */;
-            if (value.startsWith("~" /* Constant.Tilde */)) {
-                source = 0 /* ExtractSource.Javascript */;
-            }
-            else if (value.startsWith("!" /* Constant.Bang */)) {
-                source = 4 /* ExtractSource.Hash */;
-            }
-            switch (source) {
-                case 0 /* ExtractSource.Javascript */:
-                    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_1 = value.slice(1);
-                    hashes[key][id] = hash_1;
-                    break;
-            }
+function resume$1() {
+    if (pauseTask) {
+        resumeResolve();
+        pauseTask = null;
+        if (activeTask === null) {
+            run();
         }
     }
-    catch (e) {
-        log$1(8 /* Code.Config */, 1 /* Severity.Warning */, e ? e.name : null);
-    }
 }
-function clone(v) {
-    return JSON.parse(JSON.stringify(v));
+function reset$4() {
+    tracker = {};
+    queuedTasks = [];
+    activeTask = null;
+    pauseTask = null;
 }
-function compute$4() {
-    try {
-        for (var v in variables) {
-            var key = parseInt(v);
-            if (validation[key] == "" /* Constant.Empty */ || document.querySelector(validation[key])) {
-                var variableData = variables[key];
-                for (var v_1 in variableData) {
-                    var variableKey = parseInt(v_1);
-                    var value = str(evaluate(clone(variableData[variableKey])));
-                    if (value) {
-                        update(key, variableKey, value);
-                    }
-                }
-                var selectorData = selectors[key];
-                for (var s in selectorData) {
-                    var shouldMask = false;
-                    var selectorKey = parseInt(s);
-                    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; }).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().slice(0, 10000 /* Setting.ExtractLimit */);
-                    update(key, hashKey, content);
+function schedule(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*/];
                 }
             }
-        }
-        if (keys.size > 0) {
-            encode$1(40 /* Event.Extract */);
-        }
+            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 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();
+        });
     }
-    catch (e) {
-        log$1(5 /* Code.Selector */, 1 /* Severity.Warning */, e ? e.name : null);
+}
+function state(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 */;
     }
+    // If this task is no longer being tracked, send stop message to the caller
+    return 2 /* Task.Stop */;
 }
-function reset$4() {
-    keys.clear();
+function start$d(timer) {
+    tracker[key(timer)] = { start: performance.now(), calls: 0, yield: 30 /* Setting.LongTask */ };
 }
-function update(key, subkey, value) {
-    var update = false;
-    if (!(key in data$5)) {
-        data$5[key] = {};
-        update = true;
-    }
-    if (!isEmpty(hashes[key])
-        && (!(subkey in data$5[key]) || data$5[key][subkey] != value)) {
-        update = true;
+function restart$2(timer) {
+    var id = key(timer);
+    if (tracker && tracker[id]) {
+        var c = tracker[id].calls;
+        var y = tracker[id].yield;
+        start$d(timer);
+        tracker[id].calls = c + 1;
+        tracker[id].yield = y;
     }
-    data$5[key][subkey] = value;
-    if (update) {
-        keys.add(key);
+}
+function stop$c(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;
 }
-function stop$b() {
-    reset$4();
+function suspend$1(timer) {
+    var _a;
+    return __awaiter(this, void 0, void 0, function () {
+        var id, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    id = key(timer);
+                    if (!(id in tracker)) return [3 /*break*/, 2];
+                    stop$c(timer);
+                    // some customer polyfills for requestIdleCallback return null 
+                    _b = tracker[id];
+                    return [4 /*yield*/, wait()];
+                case 1:
+                    // some customer polyfills for requestIdleCallback return null 
+                    _b.yield = ((_a = (_c.sent())) === null || _a === void 0 ? void 0 : _a.timeRemaining()) || 30 /* Setting.LongTask */;
+                    restart$2(timer);
+                    _c.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 parse(variable) {
-    var syntax = [];
-    var parts = variable.split("." /* Constant.Dot */);
-    while (parts.length > 0) {
-        var part = parts.shift();
-        var arrayStart = part.indexOf("[" /* Constant.ArrayStart */);
-        var conditionStart = part.indexOf("{" /* Constant.ConditionStart */);
-        var conditionEnd = part.indexOf("}" /* Constant.ConditionEnd */);
-        syntax.push({
-            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.slice(conditionStart + 1, conditionEnd) : null
+function key(timer) {
+    return "".concat(timer.id, ".").concat(timer.cost);
+}
+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 });
+                    })];
+            }
         });
-    }
-    return syntax;
+    });
 }
-// The function below takes in a variable name in following format: "a.b.c" and safely evaluates its value in javascript context
-// For instance, for a.b.c, it will first check window["a"]. If it exists, it will recursively look at: window["a"]["b"] and finally,
-// return the value for window["a"]["b"]["c"].
-function evaluate(variable, base) {
-    if (base === void 0) { base = window; }
-    if (variable.length == 0) {
-        return base;
-    }
-    var part = variable.shift();
-    var output;
-    if (base && base[part.name]) {
-        var obj = base[part.name];
-        if (part.type !== 1 /* Type.Array */ && match(obj, part.condition)) {
-            output = evaluate(variable, obj);
+// 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 if (Array.isArray(obj)) {
-            var filtered = [];
-            for (var _i = 0, obj_1 = obj; _i < obj_1.length; _i++) {
-                var value = obj_1[_i];
-                if (match(value, part.condition)) {
-                    var op = evaluate(variable, value);
-                    if (op) {
-                        filtered.push(op);
-                    }
-                }
-            }
-            output = filtered;
+        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); }
+            });
         }
-        return output;
-    }
-    return null;
+    };
+    requestAnimationFrame(function () { outgoing.postMessage(performance.now()); });
 }
-function str(input) {
-    // Automatically trim string to max of Setting.ExtractLimit to avoid fetching long strings
-    return input ? JSON.stringify(input).slice(0, 10000 /* Setting.ExtractLimit */) : input;
+var requestIdleCallback = window["requestIdleCallback"] || requestIdleCallbackPolyfill;
+
+function start$c() {
+    schedule(discover, 1 /* Priority.High */).then(function () {
+        measure(compute$6)();
+        measure(compute$5)();
+        measure(compute$8)();
+    });
 }
-function match(base, condition) {
-    if (condition) {
-        var prop = condition.split(":");
-        return prop.length > 1 ? base[prop[0]] == prop[1] : base[prop[0]];
+function discover() {
+    return __awaiter(this, void 0, void 0, function () {
+        var ts, timer;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    ts = time();
+                    timer = { id: id(), cost: 3 /* Metric.LayoutCost */ };
+                    start$d(timer);
+                    return [4 /*yield*/, traverse(document, timer, 0 /* Source.Discover */, ts)];
+                case 1:
+                    _a.sent();
+                    checkDocumentStyles(document, ts);
+                    return [4 /*yield*/, encode$4(5 /* Event.Discover */, timer, ts)];
+                case 2:
+                    _a.sent();
+                    stop$c(timer);
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+
+var data$5 = null;
+function start$b() {
+    if (!config$2.lean && config$2.upgrade) {
+        config$2.upgrade("Config" /* Constant.Config */);
     }
-    return true;
+    data$5 = null;
 }
-function isEmpty(obj) {
-    return Object.keys(obj).length == 0;
+// Following call will upgrade the session from lean mode into the full mode retroactively from the start of the page.
+// As part of the lean mode, we do not send back any layout information - including discovery of DOM and mutations.
+// However, if there's a need for full fidelity playback, calling this function will disable lean mode
+// and send all backed up layout events to the server.
+function upgrade(key) {
+    // Upgrade only if Clarity was successfully activated on the page
+    if (active() && config$2.lean) {
+        config$2.lean = false;
+        data$5 = { key: key };
+        // Update metadata to track we have upgraded this session
+        callback();
+        save();
+        // Callback upgrade handler, if configured
+        if (config$2.upgrade) {
+            config$2.upgrade(key);
+        }
+        encode$1(3 /* Event.Upgrade */);
+        if (config$2.lite) {
+            start$c();
+            start$n();
+        }
+    }
+}
+function stop$b() {
+    data$5 = null;
 }
 
 function encode$1 (event) {
@@ -4717,7 +4771,7 @@ function encode$1 (event) {
             queue(tokens, false);
             break;
         case 3 /* Event.Upgrade */:
-            tokens.push(data$f.key);
+            tokens.push(data$5.key);
             queue(tokens);
             break;
         case 2 /* Event.Upload */:
@@ -4733,12 +4787,12 @@ function encode$1 (event) {
             queue(tokens);
             break;
         case 34 /* Event.Variable */:
-            var variableKeys = Object.keys(data$e);
+            var variableKeys = Object.keys(data$f);
             if (variableKeys.length > 0) {
                 for (var _i = 0, variableKeys_1 = variableKeys; _i < variableKeys_1.length; _i++) {
                     var v = variableKeys_1[_i];
                     tokens.push(v);
-                    tokens.push(data$e[v]);
+                    tokens.push(data$f[v]);
                 }
                 reset$o();
                 queue(tokens, false);
@@ -4790,20 +4844,20 @@ function encode$1 (event) {
             extractKeys.forEach((function (e) {
                 tokens.push(e);
                 var token = [];
-                for (var d in data$5[e]) {
+                for (var d in data$e[e]) {
                     var key = parseInt(d, 10);
                     token.push(key);
-                    token.push(data$5[e][d]);
+                    token.push(data$e[e][d]);
                 }
                 tokens.push(token);
             }));
-            reset$4();
+            reset$n();
             queue(tokens, false);
     }
 }
 
 var data$4;
-function start$b() {
+function start$a() {
     data$4 = { check: 0 /* Check.None */ };
 }
 function check$2(bytes) {
@@ -4838,7 +4892,7 @@ function stop$a() {
 var data$3 = null;
 var updates = null;
 var limited = false;
-function start$a() {
+function start$9() {
     data$3 = {};
     updates = {};
     limited = false;
@@ -4898,7 +4952,7 @@ var data$2 = null;
 var callbacks = [];
 var electron = 0 /* BooleanFlag.False */;
 var rootDomain = null;
-function start$9() {
+function start$8() {
     var _a, _b, _c;
     rootDomain = null;
     var ua = navigator && "userAgent" in navigator ? navigator.userAgent : "" /* Constant.Empty */;
@@ -5225,7 +5279,7 @@ function setCookie(key, value, time) {
 }
 
 var data$1 = null;
-function start$8() {
+function start$7() {
     var m = data$2;
     data$1 = {
         version: version$1,
@@ -5367,7 +5421,7 @@ var pushState = null;
 var replaceState = null;
 var url = null;
 var count = 0;
-function start$7() {
+function start$6() {
     url = getCurrentUrl();
     count = 0;
     bind(window, "popstate", compute$1);
@@ -5421,19 +5475,19 @@ function stop$6() {
 }
 
 var status = false;
-function start$6() {
+function start$5() {
     status = true;
     start$I();
-    reset$n();
+    reset$4();
     reset$1();
     reset$2();
-    start$7();
+    start$6();
 }
 function stop$5() {
     stop$6();
     reset$2();
     reset$1();
-    reset$n();
+    reset$4();
     stop$F();
     status = false;
 }
@@ -5490,79 +5544,49 @@ function restart() {
     event("clarity" /* Constant.Clarity */, "restart" /* Constant.Restart */);
 }
 
-function start$5() {
-    start$5.dn = 3 /* FunctionNames.DiagnosticStart */;
+function start$4() {
+    start$4.dn = 3 /* FunctionNames.DiagnosticStart */;
     start$A();
+    start$f();
     start$e();
-    start$d();
 }
 function stop$4() {
-    stop$c();
+    stop$d();
 }
 
 var diagnostic = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    start: start$5,
+    start: start$4,
     stop: stop$4
 });
 
-function start$4() {
-    schedule$1(discover, 1 /* Priority.High */).then(function () {
-        measure(compute$7)();
-        measure(compute$6)();
-        measure(compute$9)();
-    });
-}
-function discover() {
-    return __awaiter(this, void 0, void 0, function () {
-        var ts, timer;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    ts = time();
-                    timer = { id: id(), cost: 3 /* Metric.LayoutCost */ };
-                    start$z(timer);
-                    return [4 /*yield*/, traverse(document, timer, 0 /* Source.Discover */, ts)];
-                case 1:
-                    _a.sent();
-                    checkDocumentStyles(document, ts);
-                    return [4 /*yield*/, encode$4(5 /* Event.Discover */, timer, ts)];
-                case 2:
-                    _a.sent();
-                    stop$x(timer);
-                    return [2 /*return*/];
-            }
-        });
-    });
-}
-
 function start$3() {
     start$3.dn = 20 /* FunctionNames.LayoutStart */;
     // The order below is important 
     // and is determined by interdependencies of modules
-    start$k();
-    start$h();
+    start$l();
     start$i();
+    start$j();
     if (config$2.delayDom) {
         // Lazy load layout module as part of page load time performance improvements experiment 
         bind(window, 'load', function () {
-            start$j();
+            start$k();
         });
     }
     else {
-        start$j();
+        start$k();
     }
-    start$4();
+    start$c();
+    start$n();
     start$m();
-    start$l();
 }
 function stop$3() {
-    stop$f();
     stop$g();
     stop$h();
     stop$i();
-    stop$k();
     stop$j();
+    stop$l();
+    stop$k();
 }
 
 var layout = /*#__PURE__*/Object.freeze({
@@ -5860,7 +5884,7 @@ function start(config$1) {
     // Check that browser supports required APIs and we do not attempt to start Clarity multiple times
     if (check()) {
         config(config$1);
-        start$6();
+        start$5();
         start$B();
         modules.forEach(function (x) { return measure(x.start)(); });
         // If it's an internal call to start, without explicit configuration,