clarity-visualize 0.6.34 → 0.6.37

package/build/clarity.visualize.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -86,24 +86,24 @@ var DataHelper = /** @class */ (function () {
                         else {
                             _this.metrics[m] += event.data[m];
                         }
-                        _this.lean = key === 1 /* Playback */ && event.data[m] === 0 ? true : _this.lean;
+                        _this.lean = key === 1 /* Data.Metric.Playback */ && event.data[m] === 0 ? true : _this.lean;
                     }
                 }
                 for (var entry in _this.metrics) {
                     if (entry in DataHelper.METRIC_MAP) {
                         var m = _this.metrics[entry];
                         var map = DataHelper.METRIC_MAP[entry];
-                        var unit = "unit" in map ? map.unit : "" /* Empty */;
-                        metricMarkup.push("<li><h2>" + _this.value(m, unit) + "<span>" + _this.key(unit) + "</span></h2>" + map.name + "</li>");
+                        var unit = "unit" in map ? map.unit : "" /* Data.Constant.Empty */;
+                        metricMarkup.push("<li><h2>".concat(_this.value(m, unit), "<span>").concat(_this.key(unit), "</span></h2>").concat(map.name, "</li>"));
                     }
                 }
                 // Append region information to metadata
                 for (var name_1 in _this.regions) {
                     var r = _this.regions[name_1];
-                    var className = (r.visibility === 10 /* Visible */ ? "visible" : (r.interaction === 20 /* Clicked */ ? "clicked" : "" /* Empty */));
-                    regionMarkup.push("<span class=\"" + className + "\">" + name_1 + "</span>");
+                    var className = (r.visibility === 10 /* Layout.RegionVisibility.Visible */ ? "visible" : (r.interaction === 20 /* Layout.Interaction.Clicked */ ? "clicked" : "" /* Data.Constant.Empty */));
+                    regionMarkup.push("<span class=\"".concat(className, "\">").concat(name_1, "</span>"));
                 }
-                _this.state.options.metadata.innerHTML = "<ul>" + metricMarkup.join("" /* Empty */) + "</ul><div>" + regionMarkup.join("" /* Empty */) + "</div>";
+                _this.state.options.metadata.innerHTML = "<ul>".concat(metricMarkup.join("" /* Data.Constant.Empty */), "</ul><div>").concat(regionMarkup.join("" /* Data.Constant.Empty */), "</div>");
             }
         };
         this.key = function (unit) {
@@ -111,7 +111,7 @@ var DataHelper = /** @class */ (function () {
                 case "html-price":
                 case "ld-price":
                 case "cls":
-                    return "" /* Empty */;
+                    return "" /* Data.Constant.Empty */;
                 default: return unit;
             }
         };
@@ -137,15 +137,15 @@ var DataHelper = /** @class */ (function () {
         }
     };
     DataHelper.METRIC_MAP = (_a$1 = {},
-        _a$1[2 /* TotalBytes */] = { name: "Total Bytes", unit: "KB" },
-        _a$1[4 /* TotalCost */] = { name: "Total Cost", unit: "ms" },
-        _a$1[3 /* LayoutCost */] = { name: "Layout Cost", unit: "ms" },
-        _a$1[8 /* LargestPaint */] = { name: "LCP", unit: "s" },
-        _a$1[9 /* CumulativeLayoutShift */] = { name: "CLS", unit: "cls" },
-        _a$1[7 /* LongTaskCount */] = { name: "Long Tasks" },
-        _a$1[24 /* CartTotal */] = { name: "Cart Total", unit: "html-price" },
-        _a$1[13 /* ProductPrice */] = { name: "Product Price", unit: "ld-price" },
-        _a$1[6 /* ThreadBlockedTime */] = { name: "Thread Blocked", unit: "ms" },
+        _a$1[2 /* Data.Metric.TotalBytes */] = { name: "Total Bytes", unit: "KB" },
+        _a$1[4 /* Data.Metric.TotalCost */] = { name: "Total Cost", unit: "ms" },
+        _a$1[3 /* Data.Metric.LayoutCost */] = { name: "Layout Cost", unit: "ms" },
+        _a$1[8 /* Data.Metric.LargestPaint */] = { name: "LCP", unit: "s" },
+        _a$1[9 /* Data.Metric.CumulativeLayoutShift */] = { name: "CLS", unit: "cls" },
+        _a$1[7 /* Data.Metric.LongTaskCount */] = { name: "Long Tasks" },
+        _a$1[24 /* Data.Metric.CartTotal */] = { name: "Cart Total", unit: "html-price" },
+        _a$1[13 /* Data.Metric.ProductPrice */] = { name: "Product Price", unit: "ld-price" },
+        _a$1[6 /* Data.Metric.ThreadBlockedTime */] = { name: "Thread Blocked", unit: "ms" },
         _a$1);
     return DataHelper;
 }());
@@ -174,45 +174,45 @@ var TAGS = ["DIV", "TR", "P", "LI", "UL", "A", "BUTTON"];
 function selector (input, beta) {
     if (beta === void 0) { beta = false; }
     var a = input.attributes;
-    var prefix = input.prefix ? input.prefix[beta ? 1 /* Beta */ : 0 /* Stable */] : null;
-    var suffix = beta || ((a && !("class" /* Class */ in a)) || TAGS.indexOf(input.tag) >= 0) ? ":nth-of-type(" + input.position + ")" : "" /* Empty */;
+    var prefix = input.prefix ? input.prefix[beta ? 1 /* Selector.Beta */ : 0 /* Selector.Stable */] : null;
+    var suffix = beta || ((a && !("class" /* Constant.Class */ in a)) || TAGS.indexOf(input.tag) >= 0) ? ":nth-of-type(".concat(input.position, ")") : "" /* Constant.Empty */;
     switch (input.tag) {
         case "STYLE":
         case "TITLE":
         case "LINK":
         case "META":
-        case "*T" /* TextTag */:
-        case "*D" /* DocumentTag */:
-            return "" /* Empty */;
+        case "*T" /* Constant.TextTag */:
+        case "*D" /* Constant.DocumentTag */:
+            return "" /* Constant.Empty */;
         case "HTML":
-            return "HTML" /* HTML */;
+            return "HTML" /* Constant.HTML */;
         default:
             if (prefix === null) {
-                return "" /* Empty */;
+                return "" /* Constant.Empty */;
             }
-            prefix = prefix + ">";
-            input.tag = input.tag.indexOf("svg:" /* SvgPrefix */) === 0 ? input.tag.substr("svg:" /* SvgPrefix */.length) : input.tag;
-            var selector = "" + prefix + input.tag + suffix;
-            var classes = "class" /* Class */ in a && a["class" /* Class */].length > 0 ? a["class" /* Class */].trim().split(/\s+/) : null;
+            prefix = "".concat(prefix, ">");
+            input.tag = input.tag.indexOf("svg:" /* Constant.SvgPrefix */) === 0 ? input.tag.substr("svg:" /* Constant.SvgPrefix */.length) : input.tag;
+            var selector = "".concat(prefix).concat(input.tag).concat(suffix);
+            var classes = "class" /* Constant.Class */ in a && a["class" /* Constant.Class */].length > 0 ? a["class" /* Constant.Class */].trim().split(/\s+/) : null;
             if (beta) {
                 // In beta mode, update selector to use "id" field when available. There are two exceptions:
                 // (1) if "id" appears to be an auto generated string token, e.g. guid or a random id containing digits
                 // (2) if "id" appears inside a shadow DOM, in which case we continue to prefix up to shadow DOM to prevent conflicts
-                var id = "id" /* Id */ in a && a["id" /* Id */].length > 0 ? a["id" /* Id */] : null;
-                classes = input.tag !== "BODY" /* BodyTag */ && classes ? classes.filter(function (c) { return !hasDigits(c); }) : [];
-                selector = classes.length > 0 ? "" + prefix + input.tag + "." + classes.join(".") + suffix : selector;
-                selector = id && hasDigits(id) === false ? getDomPrefix(prefix) + "#" + id : selector;
+                var id = "id" /* Constant.Id */ in a && a["id" /* Constant.Id */].length > 0 ? a["id" /* Constant.Id */] : null;
+                classes = input.tag !== "BODY" /* Constant.BodyTag */ && classes ? classes.filter(function (c) { return !hasDigits(c); }) : [];
+                selector = classes.length > 0 ? "".concat(prefix).concat(input.tag, ".").concat(classes.join(".")).concat(suffix) : selector;
+                selector = id && hasDigits(id) === false ? "".concat(getDomPrefix(prefix), "#").concat(id) : selector;
             }
             else {
                 // Otherwise, fallback to stable mode, where we include class names as part of the selector
-                selector = classes ? "" + prefix + input.tag + "." + classes.join(".") + suffix : selector;
+                selector = classes ? "".concat(prefix).concat(input.tag, ".").concat(classes.join(".")).concat(suffix) : selector;
             }
             return selector;
     }
 }
 function getDomPrefix(prefix) {
-    var shadowDomStart = prefix.lastIndexOf("*S" /* ShadowDomTag */);
-    var iframeDomStart = prefix.lastIndexOf("" + "iframe:" /* IFramePrefix */ + "HTML" /* HTML */);
+    var shadowDomStart = prefix.lastIndexOf("*S" /* Constant.ShadowDomTag */);
+    var iframeDomStart = prefix.lastIndexOf("".concat("iframe:" /* Constant.IFramePrefix */).concat("HTML" /* Constant.HTML */));
     var domStart = Math.max(shadowDomStart, iframeDomStart);
     if (domStart < 0) {
         return "";
@@ -224,7 +224,7 @@ function getDomPrefix(prefix) {
 function hasDigits(value) {
     for (var i = 0; i < value.length; i++) {
         var c = value.charCodeAt(i);
-        if (c >= 48 /* Zero */ && c <= 57 /* Nine */) {
+        if (c >= 48 /* Character.Zero */ && c <= 57 /* Character.Nine */) {
             return true;
         }
     }
@@ -370,14 +370,14 @@ var HeatmapHelper = /** @class */ (function () {
         this.clear = function () {
             var doc = _this.state.window.document;
             var win = _this.state.window;
-            var canvas = doc.getElementById("clarity-heatmap-canvas" /* HeatmapCanvas */);
+            var canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
             var de = doc.documentElement;
             if (canvas) {
                 canvas.width = de.clientWidth;
                 canvas.height = de.clientHeight;
-                canvas.style.left = win.pageXOffset + "px" /* Pixel */;
-                canvas.style.top = win.pageYOffset + "px" /* Pixel */;
-                canvas.getContext("2d" /* Context */).clearRect(0, 0, canvas.width, canvas.height);
+                canvas.style.left = win.pageXOffset + "px" /* Constant.Pixel */;
+                canvas.style.top = win.pageYOffset + "px" /* Constant.Pixel */;
+                canvas.getContext("2d" /* Constant.Context */).clearRect(0, 0, canvas.width, canvas.height);
             }
             _this.reset();
         };
@@ -386,13 +386,13 @@ var HeatmapHelper = /** @class */ (function () {
             _this.scrollAvgFold = avgFold != null ? avgFold : _this.scrollAvgFold;
             _this.addScrollMakers = addMarkers != null ? addMarkers : _this.addScrollMakers;
             var canvas = _this.overlay();
-            var context = canvas.getContext("2d" /* Context */);
+            var context = canvas.getContext("2d" /* Constant.Context */);
             var doc = _this.state.window.document;
             var body = doc.body;
             var de = doc.documentElement;
             var height = Math.max(body.scrollHeight, body.offsetHeight, de.clientHeight, de.scrollHeight, de.offsetHeight);
-            canvas.height = Math.min(height, 40000 /* ScrollCanvasMaxHeight */);
-            canvas.style.top = 0 + "px" /* Pixel */;
+            canvas.height = Math.min(height, 40000 /* Setting.ScrollCanvasMaxHeight */);
+            canvas.style.top = 0 + "px" /* Constant.Pixel */;
             if (canvas.width > 0 && canvas.height > 0) {
                 if (_this.scrollData) {
                     var grd = context.createLinearGradient(0, 0, 0, canvas.height);
@@ -400,9 +400,9 @@ var HeatmapHelper = /** @class */ (function () {
                         var currentCombination = _a[_i];
                         var huePercentView = 1 - (currentCombination.cumulativeSum / _this.scrollData[0].cumulativeSum);
                         var percentView = (currentCombination.scrollReachY / 100) * (height / canvas.height);
-                        var hue = huePercentView * 240 /* MaxHue */;
+                        var hue = huePercentView * 240 /* Setting.MaxHue */;
                         if (percentView <= 1) {
-                            grd.addColorStop(percentView, "hsla(" + hue + ", 100%, 50%, 0.6)");
+                            grd.addColorStop(percentView, "hsla(".concat(hue, ", 100%, 50%, 0.6)"));
                         }
                     }
                     // Fill with gradient
@@ -415,15 +415,15 @@ var HeatmapHelper = /** @class */ (function () {
             }
         };
         this.addInfoMarkers = function (context, scrollMapInfo, width, height, avgFold) {
-            _this.addMarker(context, width, "Average Fold" /* AverageFold */, avgFold, 84 /* MarkerMediumWidth */);
+            _this.addMarker(context, width, "Average Fold" /* Constant.AverageFold */, avgFold, 84 /* Setting.MarkerMediumWidth */);
             var markers = [75, 50, 25];
             var _loop_1 = function (marker) {
                 var closest = scrollMapInfo.reduce(function (prev, curr) {
                     return ((Math.abs(curr.percUsers - marker)) < (Math.abs(prev.percUsers - marker)) ? curr : prev);
                 });
-                if (closest.percUsers >= marker - 2 /* MarkerRange */ && closest.percUsers <= marker + 2 /* MarkerRange */) {
+                if (closest.percUsers >= marker - 2 /* Setting.MarkerRange */ && closest.percUsers <= marker + 2 /* Setting.MarkerRange */) {
                     var markerLine = (closest.scrollReachY / 100) * height;
-                    _this.addMarker(context, width, marker + "%", markerLine, 35 /* MarkerSmallWidth */);
+                    _this.addMarker(context, width, "".concat(marker, "%"), markerLine, 35 /* Setting.MarkerSmallWidth */);
                 }
             };
             for (var _i = 0, markers_1 = markers; _i < markers_1.length; _i++) {
@@ -436,20 +436,20 @@ var HeatmapHelper = /** @class */ (function () {
             context.moveTo(0, markerY);
             context.lineTo(heatmapWidth, markerY);
             context.setLineDash([2, 2]);
-            context.lineWidth = 1 /* MarkerLineHeight */;
-            context.strokeStyle = "white" /* MarkerColor */;
+            context.lineWidth = 1 /* Setting.MarkerLineHeight */;
+            context.strokeStyle = "white" /* Setting.MarkerColor */;
             context.stroke();
-            context.fillStyle = "#323130" /* CanvasTextColor */;
-            context.fillRect(0, (markerY - 32 /* MarkerHeight */ / 2), markerWidth, 32 /* MarkerHeight */);
-            context.fillStyle = "white" /* MarkerColor */;
-            context.font = "500 12px Segoe UI" /* CanvasTextFont */;
-            context.fillText(label, 5 /* MarkerPadding */, markerY + 5 /* MarkerPadding */);
+            context.fillStyle = "#323130" /* Setting.CanvasTextColor */;
+            context.fillRect(0, (markerY - 32 /* Setting.MarkerHeight */ / 2), markerWidth, 32 /* Setting.MarkerHeight */);
+            context.fillStyle = "white" /* Setting.MarkerColor */;
+            context.font = "500 12px Segoe UI" /* Setting.CanvasTextFont */;
+            context.fillText(label, 5 /* Setting.MarkerPadding */, markerY + 5 /* Setting.MarkerPadding */);
         };
         this.click = function (activity) {
             _this.data = _this.data || activity;
             var heat = _this.transform();
             var canvas = _this.overlay();
-            var ctx = canvas.getContext("2d" /* Context */);
+            var ctx = canvas.getContext("2d" /* Constant.Context */);
             if (canvas.width > 0 && canvas.height > 0) {
                 // To speed up canvas rendering, we draw ring & gradient on an offscreen canvas, so we can use drawImage API
                 // Canvas performance tips: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
@@ -460,7 +460,7 @@ var HeatmapHelper = /** @class */ (function () {
                 for (var _i = 0, heat_1 = heat; _i < heat_1.length; _i++) {
                     var entry = heat_1[_i];
                     ctx.globalAlpha = entry.a;
-                    ctx.drawImage(ring, entry.x - 20 /* Radius */, entry.y - 20 /* Radius */);
+                    ctx.drawImage(ring, entry.x - 20 /* Setting.Radius */, entry.y - 20 /* Setting.Radius */);
                 }
                 // Add color to the canvas based on alpha value of each pixel
                 var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
@@ -484,14 +484,14 @@ var HeatmapHelper = /** @class */ (function () {
             var doc = _this.state.window.document;
             var win = _this.state.window;
             var de = doc.documentElement;
-            var canvas = doc.getElementById("clarity-heatmap-canvas" /* HeatmapCanvas */);
+            var canvas = doc.getElementById("clarity-heatmap-canvas" /* Constant.HeatmapCanvas */);
             if (canvas === null) {
-                canvas = doc.createElement("CANVAS" /* Canvas */);
-                canvas.id = "clarity-heatmap-canvas" /* HeatmapCanvas */;
+                canvas = doc.createElement("CANVAS" /* Constant.Canvas */);
+                canvas.id = "clarity-heatmap-canvas" /* Constant.HeatmapCanvas */;
                 canvas.width = 0;
                 canvas.height = 0;
-                canvas.style.position = "absolute" /* Absolute */;
-                canvas.style.zIndex = "" + 2147483647 /* ZIndex */;
+                canvas.style.position = "absolute" /* Constant.Absolute */;
+                canvas.style.zIndex = "".concat(2147483647 /* Setting.ZIndex */);
                 de.appendChild(canvas);
                 win.addEventListener("scroll", _this.redraw, true);
                 win.addEventListener("resize", _this.redraw, true);
@@ -503,23 +503,23 @@ var HeatmapHelper = /** @class */ (function () {
             // Ensure canvas is positioned correctly
             canvas.width = de.clientWidth;
             canvas.height = de.clientHeight;
-            canvas.style.left = win.pageXOffset + "px" /* Pixel */;
-            canvas.style.top = win.pageYOffset + "px" /* Pixel */;
-            canvas.getContext("2d" /* Context */).clearRect(0, 0, canvas.width, canvas.height);
+            canvas.style.left = win.pageXOffset + "px" /* Constant.Pixel */;
+            canvas.style.top = win.pageYOffset + "px" /* Constant.Pixel */;
+            canvas.getContext("2d" /* Constant.Context */).clearRect(0, 0, canvas.width, canvas.height);
             return canvas;
         };
         this.getRing = function () {
             if (_this.offscreenRing === null) {
                 var doc = _this.state.window.document;
-                _this.offscreenRing = doc.createElement("CANVAS" /* Canvas */);
-                _this.offscreenRing.width = 20 /* Radius */ * 2;
-                _this.offscreenRing.height = 20 /* Radius */ * 2;
-                var ctx = _this.offscreenRing.getContext("2d" /* Context */);
-                ctx.shadowOffsetX = 20 /* Radius */ * 2;
-                ctx.shadowBlur = 20 /* Radius */ / 2;
-                ctx.shadowColor = "black" /* Black */;
+                _this.offscreenRing = doc.createElement("CANVAS" /* Constant.Canvas */);
+                _this.offscreenRing.width = 20 /* Setting.Radius */ * 2;
+                _this.offscreenRing.height = 20 /* Setting.Radius */ * 2;
+                var ctx = _this.offscreenRing.getContext("2d" /* Constant.Context */);
+                ctx.shadowOffsetX = 20 /* Setting.Radius */ * 2;
+                ctx.shadowBlur = 20 /* Setting.Radius */ / 2;
+                ctx.shadowColor = "black" /* Constant.Black */;
                 ctx.beginPath();
-                ctx.arc(-20 /* Radius */, 20 /* Radius */, 20 /* Radius */ / 2, 0, Math.PI * 2, true);
+                ctx.arc(-20 /* Setting.Radius */, 20 /* Setting.Radius */, 20 /* Setting.Radius */ / 2, 0, Math.PI * 2, true);
                 ctx.closePath();
                 ctx.fill();
             }
@@ -528,18 +528,18 @@ var HeatmapHelper = /** @class */ (function () {
         this.getGradient = function () {
             if (_this.gradientPixels === null) {
                 var doc = _this.state.window.document;
-                var offscreenGradient = doc.createElement("CANVAS" /* Canvas */);
+                var offscreenGradient = doc.createElement("CANVAS" /* Constant.Canvas */);
                 offscreenGradient.width = 1;
-                offscreenGradient.height = 256 /* Colors */;
-                var ctx = offscreenGradient.getContext("2d" /* Context */);
-                var gradient = ctx.createLinearGradient(0, 0, 0, 256 /* Colors */);
+                offscreenGradient.height = 256 /* Setting.Colors */;
+                var ctx = offscreenGradient.getContext("2d" /* Constant.Context */);
+                var gradient = ctx.createLinearGradient(0, 0, 0, 256 /* Setting.Colors */);
                 var step = 1 / HeatmapHelper.COLORS.length;
                 for (var i = 0; i < HeatmapHelper.COLORS.length; i++) {
                     gradient.addColorStop(step * (i + 1), HeatmapHelper.COLORS[i]);
                 }
                 ctx.fillStyle = gradient;
-                ctx.fillRect(0, 0, 1, 256 /* Colors */);
-                _this.gradientPixels = ctx.getImageData(0, 0, 1, 256 /* Colors */);
+                ctx.fillRect(0, 0, 1, 256 /* Setting.Colors */);
+                _this.gradientPixels = ctx.getImageData(0, 0, 1, 256 /* Setting.Colors */);
             }
             return _this.gradientPixels;
         };
@@ -548,14 +548,14 @@ var HeatmapHelper = /** @class */ (function () {
                 if (_this.timeout) {
                     clearTimeout(_this.timeout);
                 }
-                _this.timeout = setTimeout(_this.click, 30 /* Interval */);
+                _this.timeout = setTimeout(_this.click, 30 /* Setting.Interval */);
             }
             else if (_this.scrollData) {
                 if (event.type != 'scroll') {
                     if (_this.timeout) {
                         clearTimeout(_this.timeout);
                     }
-                    _this.timeout = setTimeout(_this.scroll, 30 /* Interval */);
+                    _this.timeout = setTimeout(_this.scroll, 30 /* Setting.Interval */);
                 }
             }
         };
@@ -573,9 +573,9 @@ var HeatmapHelper = /** @class */ (function () {
                     // Process clicks for only visible elements
                     if (_this.max === null || v) {
                         for (var i = 0; i < element.points; i++) {
-                            var x = Math.round(r.left + (element.x[i] / 32767 /* ClickPrecision */) * r.width);
-                            var y = Math.round(r.top + (element.y[i] / 32767 /* ClickPrecision */) * r.height);
-                            var k = "" + x + "X" /* Separator */ + y + "X" /* Separator */ + (v ? 1 : 0);
+                            var x = Math.round(r.left + (element.x[i] / 32767 /* Data.Setting.ClickPrecision */) * r.width);
+                            var y = Math.round(r.top + (element.y[i] / 32767 /* Data.Setting.ClickPrecision */) * r.height);
+                            var k = "".concat(x).concat("X" /* Constant.Separator */).concat(y).concat("X" /* Constant.Separator */).concat(v ? 1 : 0);
                             points[k] = k in points ? points[k] + element.clicks[i] : element.clicks[i];
                             localMax = Math.max(points[k], localMax);
                         }
@@ -587,8 +587,8 @@ var HeatmapHelper = /** @class */ (function () {
             // Once all points are accounted for, convert everything into absolute (x, y)
             for (var _b = 0, _c = Object.keys(points); _b < _c.length; _b++) {
                 var coordinates = _c[_b];
-                var parts = coordinates.split("X" /* Separator */);
-                var alpha = Math.min((points[coordinates] / _this.max) + 0.15 /* AlphaBoost */, 1);
+                var parts = coordinates.split("X" /* Constant.Separator */);
+                var alpha = Math.min((points[coordinates] / _this.max) + 0.15 /* Setting.AlphaBoost */, 1);
                 if (parts[2] === "1") {
                     output.push({ x: parseInt(parts[0], 10), y: parseInt(parts[1], 10), a: alpha });
                 }
@@ -605,7 +605,7 @@ var HeatmapHelper = /** @class */ (function () {
                     for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
                         var e = elements_1[_i];
                         // Ignore if top element ends up being the canvas element we added for heatmap visualization
-                        if (e.tagName === "CANVAS" /* Canvas */ || (e.id && e.id.indexOf("clarity-" /* ClarityPrefix */) === 0)) {
+                        if (e.tagName === "CANVAS" /* Constant.Canvas */ || (e.id && e.id.indexOf("clarity-" /* Constant.ClarityPrefix */) === 0)) {
                             continue;
                         }
                         visibility = e === el;
@@ -656,8 +656,8 @@ var InteractionHelper = /** @class */ (function () {
                 }
                 var canvas = _this.overlay();
                 if (canvas) {
-                    canvas.style.left = data.x + "px" /* Pixel */;
-                    canvas.style.top = data.y + "px" /* Pixel */;
+                    canvas.style.left = data.x + "px" /* Constant.Pixel */;
+                    canvas.style.top = data.y + "px" /* Constant.Pixel */;
                     canvas.width = de.clientWidth;
                     canvas.height = de.clientHeight;
                 }
@@ -674,13 +674,13 @@ var InteractionHelper = /** @class */ (function () {
         };
         this.visibility = function (event) {
             var doc = _this.state.window.document;
-            if (doc && doc.documentElement && event.data.visible !== "visible" /* Visible */) {
-                doc.documentElement.style.backgroundColor = "black" /* Black */;
-                doc.documentElement.style.opacity = "0.4" /* HiddenOpacity */;
+            if (doc && doc.documentElement && event.data.visible !== "visible" /* Constant.Visible */) {
+                doc.documentElement.style.backgroundColor = "black" /* Constant.Black */;
+                doc.documentElement.style.opacity = "0.4" /* Constant.HiddenOpacity */;
             }
             else {
-                doc.documentElement.style.backgroundColor = "transparent" /* Transparent */;
-                doc.documentElement.style.opacity = "1" /* VisibleOpacity */;
+                doc.documentElement.style.backgroundColor = "transparent" /* Constant.Transparent */;
+                doc.documentElement.style.opacity = "1" /* Constant.VisibleOpacity */;
             }
         };
         this.input = function (event) {
@@ -715,12 +715,12 @@ var InteractionHelper = /** @class */ (function () {
             var type = event.event;
             var doc = _this.state.window.document;
             var de = doc.documentElement;
-            var p = doc.getElementById("clarity-pointer" /* PointerLayer */);
-            var pointerWidth = 29 /* PointerWidth */;
-            var pointerHeight = 38 /* PointerHeight */;
+            var p = doc.getElementById("clarity-pointer" /* Constant.PointerLayer */);
+            var pointerWidth = 29 /* Setting.PointerWidth */;
+            var pointerHeight = 38 /* Setting.PointerHeight */;
             if (p === null) {
                 p = doc.createElement("DIV");
-                p.id = "clarity-pointer" /* PointerLayer */;
+                p.id = "clarity-pointer" /* Constant.PointerLayer */;
                 de.appendChild(p);
                 // Add custom styles
                 var style = doc.createElement("STYLE");
@@ -729,62 +729,62 @@ var InteractionHelper = /** @class */ (function () {
                         "@keyframes pulsate-two { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(5, 5); opacity: 0; } }" +
                         "@keyframes pulsate-touch { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(2, 2); opacity: 0; } }" +
                         "@keyframes disappear { 90% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(1.3, 1.3); opacity: 0; } }" +
-                        ("#" + "clarity-interaction-canvas" /* InteractionCanvas */ + " { position: absolute; left: 0; top: 0; z-index: " + 2147483647 /* ZIndex */ + "; background: none; }") +
-                        ("#" + "clarity-pointer" /* PointerLayer */ + " { position: absolute; z-index: " + 2147483647 /* ZIndex */ + "; url(" + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASDSURBVHgB7VdPTCNlFH8z0/+FFmRatnFNiDGR4O4mBk08smZvXjjIxRueNME9eHGNxoLxSNwr4WyigYToQRJLjXDzQtDNmnhR4kWWAJm20ymddtrx94bvI9NBWAptsod9ycvM92fe73vv/b73fUP0DIlCfRQ1AMTtjwcHB1+gPgOT67oK6+TkZBjNbxRF+X1gYCCDPpX6IKdGAaTu7++HuG9tbe1ONBr9GR7r+Xy+98DsIRuemJiIjI6OJgH+3e7urruzs+OOjIw8SiaTNwRwz8OtQWPpdHoYoKt///ar2/jxaw84k8k8gt5YWVnRqEfi90BrtVph0Uetx0V67d9fqFAo3G6324XZ2VldLK4noK4AVqvVaoh8YZTAxWLxdiwW20CoM70IdceWicfjSpCxfuBEIrGxsLCQZR7QNcQDwFaRRhRmcXCSL9S3kN8CtlP2Oqz2QoWt4Q4NDanHx8cy3HQBMIe6sLS0pF811B7I5uYmhUKh1nmAQWAOteM4xcXFxczMzEzXHp+u9PDwUBHvymWBmVzr6+t6t9tJhtPzEEYuFaoguebm5nTqJOXFoMxEVCO50tMFXBaYcwwbGwAfRagv5bEKthK2igdUr9epG/EDYw//xKGmzoLz/6BQd3t7m5i9dAUJsJoLSPZp5PIGp6amXHjsVSaEirqVALk8jy/axx2hwAcMTlcRH/Ad5LfA24kEZ4JzudbySSJzyqDnomq37pH14utH/iUrCA5HCeRwHYXc8dzNNs5jfXp6uoD+e/Pz8zzfDYIqq6urihg4NyTaK2/Rw8fNo0/euWvBWI3TwGAiHW2RnjY7LRVjX+7t7d3nSWL8FFSKIj46I0r2ZXr4R/PoQT5f1TTtU3Q5OAbbbAxtV4BwXx07wUI5raJdTaVS5vLysmYYhlyMDJBHJBoeHpbFwQ0CfmuP04P8V1VVVb9AVwXGy/xE6SyHw2FuW9Aa2jYAHVx1HAZh78bGxs44wYkm0zS9PPrC1QE4+8HcPwD8HONPYNzEkAU1UX+raFcYmPswzhu9ISLmShIdHBx0lFfVH2s+SyWR/IBofgYvnmCIPTQjkYiBk8mARwYWU4aW8F5uNpslXHkstBncxjcOeyqJ6vfUO9oQd2avlyeKJj3A9z/8yAOE7uHKUgGoiRQYMFZCdEq2bZfgpYFnmd9xzprlcrnCOdV13cbWaWKezGVnAUBOmVBpkOAlPH/AxuYJu/DoPQDcxfubeB/ncZCDL+IpaDKgiVwul8AzDo1BI3RC1HPLIg+mYPQmvPke+hdY+S68ehuevIHQvYpV5/i2KIxKg5pUUew1AaL6wM4cl4oPFJjxFMJ0H6BbIIgBwAbeLSzABLBVKpVszGvSCf27r5dCNE7h1tYWX1U0ECHUaDT+REhryKENrTFbwdLj+skRxIAeM+ka4rGV2QWv2vCIjVoAryC0Jk6MCk6fGvoY0OkFoF80UDsG8AG8j/BtD78YWRSMNNoJQbSe/1Zw0tmwBB6kE0ZG+wXI4v1ECYAIdbKzf/+povypEui6t/jnwvIf5FVJ1Cj/1+UAAAAASUVORK5CYII=" /* Pointer */ + ") no-repeat left center; width: " + pointerWidth + "px; height: " + pointerHeight + "px; }") +
-                        ("." + "clarity-click" /* ClickLayer */ + ", ." + "clarity-click-ring" /* ClickRing */ + ", ." + "clarity-touch" /* TouchLayer */ + ", ." + "clarity-touch-ring" /* TouchRing */ + " { position: absolute; z-index: " + 2147483647 /* ZIndex */ + "; border-radius: 50%; background: radial-gradient(rgba(0,90,158,0.8), transparent); width: " + 22 /* ClickRadius */ + "px; height: " + 22 /* ClickRadius */ + "px;}") +
-                        ("." + "clarity-click-ring" /* ClickRing */ + " { background: transparent; border: 1px solid rgba(0,90,158,0.8); }") +
-                        ("." + "clarity-touch" /* TouchLayer */ + " { background: radial-gradient(rgba(242,97,12,1), transparent); }") +
-                        ("." + "clarity-touch-ring" /* TouchRing */ + " { background: transparent; border: 1px solid rgba(242,97,12,0.8); }") +
-                        ("." + "clarity-pointer-click" /* PointerClickLayer */ + " { background-image: url(" + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVoSURBVHgB7VdNTCRFGP2qe6aBGRhA5mfJ7kZcV0XQTQx68MYabl44yMWbetAY3IMX12gWMCZeSLwSEi/GiAHF1SjqMAhoshuTJbg/GkM0xMQIBMj8D/Nfvq+6enZmEtFdhsSDRT66q6qnXr33varqJvoPFUHHWIw6IK6/2tbWdg8dMzBJKQXHwMCAG9UPhBDXW1tbA2gz6BhKZVAAGTs7Oy5um5+fP9fU1LQExv6xsbHGAzNDHrivr88KhUJegH+0ubkp19fXZVdX1w2v13tCAzdcbhPR3N7e3gnQuY0ry3L7nRcUcCAQuIE4MTs7a1IDi9CgXuQxCNBPNq6uyF+HWuTO5IvVjEP6uSMXlk1qYCOVSnFOgYvRLUtmVmbp9HfvUSQSebS5uXkRwIFGSF2zZFpaWoTtWEHCcgvDclPm+4/p3qvvK2CPx7M4MTERZB/QEYoCxVJxBhHsYvwn0+2WKiyLslc+pfuufSjD4fAjyG+Y03AUVyupsDRkR0eHcXBwYMuNKQi3BaYIt5uYce6Hz8XZ63MMzFKHp6am/HcrtQJZWVkhl8tVIju/KqkmgBxAdQXr3LUv6exPl5XUxWIxMjk5GRgZGbljxpWZ7u3tCX3PPCuALDEYk2Ytij9+RQ9ufFEx18LCgv9Ol5PjXsUQg9hSsXubLA3IwC7JoVgjSjfD9PDm1xVzjY6O+qnWlIeDshOxGzkzVRNgeW2mdl6FfXVkxiQsKv/8LfX9sUScY4yxCPAQpP5XjA0GwFJRTLPZrG5mUFcln6Ytc+Uq0CdcLgAvyf4/lxUw1vA3LDVVpexQedfW1ojdW2m1N4cKM8PllqLKUMI0SRhCsuVKtyLUv7XsuJo3kOA/mUt1Dg4OsqRqZ4JUPJZtIttAaqMAMzQarH8NCzwqSzcjghlrcynGh63jGinwA5VP9efIaBr2vqgBnGeltH+nJonCjPts4HPIb5iXE2nP1IPyXssniZNTBhVq0RhC3p6QTd/oHxLpk4/t356yelQawijrecnek6fKOI/9w8PDYQw1ND4+zs/LelAxNzcndIdRLRwzs5kIYT7wJL17q7D/2tPn0+jIcDunRDMt6/SUmbQT6Htra2vrAj+k+yugFRT9I6qVEGxCZwCY3784dillmubr6CqWSqUyD4a61CDclsVKSGM7TaGe8vl8yenpaTMajTqTqeSUjUSdnZ3O5iCrYUXwDM1ke+ni2NspwzAuoTGBweN8xdYZd7vdXE8jMqjnAFjEq06RQZhdT08P1RdONCWTSaEFdeSyqQfvFzO5XnrupdHfAfgm+rcxeBJdaUQS+28K9QQDcxv6eaHntWLSMdHu7q6zxWorVGnNZ6nQVmVJmSEDovoGWGyjixkmLcuK4mSKglEUk4kjYriPFwqFGF550qgzeA6/KTJTx6jVTNXRBt3ZvSpP1OSlmYNeev7lVxQgYqtcLicAmkQKohgsBnViuVwuBpZRXON8j3M2GY/HE5xTv9+fw9Ip4DknlzXAnFM2VDtMcBrXz7Cw+YFNMHoWAOdx/wTue7kf5uAXcR/CWxee7u5uD64tiGaERbZR/3Zb5E4fBj0FNpcRv8GVz4DVU2DyOKR7CLPu5rdFPagzoOmE3uxNDWJUgYl6UFEFCswWH2S6ANBVGCQKwDzu05hAEsDpWCyWw3MFsu0v6S6LySlcXV3lVxUTRnDl8/lfIGkGOcwhMuxWuPQgax9BDKicSUcoyq3sLrAqgxEPmgZ4AtImcWIkcPpk0MaAxUYAVhcT1m4GeCvuu/htD58YQWwY7ah7tNEa/lnBSeeBHeA2sh3ZdFyAXNRHlAawqNadx/edqrc/wwE66lv8/4XLX3gjac6XP/Y1AAAAAElFTkSuQmCC" /* Click */ + "); }") +
-                        ("." + "clarity-pointer-none" /* PointerNone */ + " { background: none; }") +
-                        ("." + "clarity-pointer-move" /* PointerMove */ + " { background-image: url(" + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASDSURBVHgB7VdPTCNlFH8z0/+FFmRatnFNiDGR4O4mBk08smZvXjjIxRueNME9eHGNxoLxSNwr4WyigYToQRJLjXDzQtDNmnhR4kWWAJm20ymddtrx94bvI9NBWAptsod9ycvM92fe73vv/b73fUP0DIlCfRQ1AMTtjwcHB1+gPgOT67oK6+TkZBjNbxRF+X1gYCCDPpX6IKdGAaTu7++HuG9tbe1ONBr9GR7r+Xy+98DsIRuemJiIjI6OJgH+3e7urruzs+OOjIw8SiaTNwRwz8OtQWPpdHoYoKt///ar2/jxaw84k8k8gt5YWVnRqEfi90BrtVph0Uetx0V67d9fqFAo3G6324XZ2VldLK4noK4AVqvVaoh8YZTAxWLxdiwW20CoM70IdceWicfjSpCxfuBEIrGxsLCQZR7QNcQDwFaRRhRmcXCSL9S3kN8CtlP2Oqz2QoWt4Q4NDanHx8cy3HQBMIe6sLS0pF811B7I5uYmhUKh1nmAQWAOteM4xcXFxczMzEzXHp+u9PDwUBHvymWBmVzr6+t6t9tJhtPzEEYuFaoguebm5nTqJOXFoMxEVCO50tMFXBaYcwwbGwAfRagv5bEKthK2igdUr9epG/EDYw//xKGmzoLz/6BQd3t7m5i9dAUJsJoLSPZp5PIGp6amXHjsVSaEirqVALk8jy/axx2hwAcMTlcRH/Ad5LfA24kEZ4JzudbySSJzyqDnomq37pH14utH/iUrCA5HCeRwHYXc8dzNNs5jfXp6uoD+e/Pz8zzfDYIqq6urihg4NyTaK2/Rw8fNo0/euWvBWI3TwGAiHW2RnjY7LRVjX+7t7d3nSWL8FFSKIj46I0r2ZXr4R/PoQT5f1TTtU3Q5OAbbbAxtV4BwXx07wUI5raJdTaVS5vLysmYYhlyMDJBHJBoeHpbFwQ0CfmuP04P8V1VVVb9AVwXGy/xE6SyHw2FuW9Aa2jYAHVx1HAZh78bGxs44wYkm0zS9PPrC1QE4+8HcPwD8HONPYNzEkAU1UX+raFcYmPswzhu9ISLmShIdHBx0lFfVH2s+SyWR/IBofgYvnmCIPTQjkYiBk8mARwYWU4aW8F5uNpslXHkstBncxjcOeyqJ6vfUO9oQd2avlyeKJj3A9z/8yAOE7uHKUgGoiRQYMFZCdEq2bZfgpYFnmd9xzprlcrnCOdV13cbWaWKezGVnAUBOmVBpkOAlPH/AxuYJu/DoPQDcxfubeB/ncZCDL+IpaDKgiVwul8AzDo1BI3RC1HPLIg+mYPQmvPke+hdY+S68ehuevIHQvYpV5/i2KIxKg5pUUew1AaL6wM4cl4oPFJjxFMJ0H6BbIIgBwAbeLSzABLBVKpVszGvSCf27r5dCNE7h1tYWX1U0ECHUaDT+REhryKENrTFbwdLj+skRxIAeM+ka4rGV2QWv2vCIjVoAryC0Jk6MCk6fGvoY0OkFoF80UDsG8AG8j/BtD78YWRSMNNoJQbSe/1Zw0tmwBB6kE0ZG+wXI4v1ECYAIdbKzf/+povypEui6t/jnwvIf5FVJ1Cj/1+UAAAAASUVORK5CYII=" /* Pointer */ + "); }");
+                        "#".concat("clarity-interaction-canvas" /* Constant.InteractionCanvas */, " { position: absolute; left: 0; top: 0; z-index: ").concat(2147483647 /* Setting.ZIndex */, "; background: none; }") +
+                        "#".concat("clarity-pointer" /* Constant.PointerLayer */, " { position: absolute; z-index: ").concat(2147483647 /* Setting.ZIndex */, "; url(").concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASDSURBVHgB7VdPTCNlFH8z0/+FFmRatnFNiDGR4O4mBk08smZvXjjIxRueNME9eHGNxoLxSNwr4WyigYToQRJLjXDzQtDNmnhR4kWWAJm20ymddtrx94bvI9NBWAptsod9ycvM92fe73vv/b73fUP0DIlCfRQ1AMTtjwcHB1+gPgOT67oK6+TkZBjNbxRF+X1gYCCDPpX6IKdGAaTu7++HuG9tbe1ONBr9GR7r+Xy+98DsIRuemJiIjI6OJgH+3e7urruzs+OOjIw8SiaTNwRwz8OtQWPpdHoYoKt///ar2/jxaw84k8k8gt5YWVnRqEfi90BrtVph0Uetx0V67d9fqFAo3G6324XZ2VldLK4noK4AVqvVaoh8YZTAxWLxdiwW20CoM70IdceWicfjSpCxfuBEIrGxsLCQZR7QNcQDwFaRRhRmcXCSL9S3kN8CtlP2Oqz2QoWt4Q4NDanHx8cy3HQBMIe6sLS0pF811B7I5uYmhUKh1nmAQWAOteM4xcXFxczMzEzXHp+u9PDwUBHvymWBmVzr6+t6t9tJhtPzEEYuFaoguebm5nTqJOXFoMxEVCO50tMFXBaYcwwbGwAfRagv5bEKthK2igdUr9epG/EDYw//xKGmzoLz/6BQd3t7m5i9dAUJsJoLSPZp5PIGp6amXHjsVSaEirqVALk8jy/axx2hwAcMTlcRH/Ad5LfA24kEZ4JzudbySSJzyqDnomq37pH14utH/iUrCA5HCeRwHYXc8dzNNs5jfXp6uoD+e/Pz8zzfDYIqq6urihg4NyTaK2/Rw8fNo0/euWvBWI3TwGAiHW2RnjY7LRVjX+7t7d3nSWL8FFSKIj46I0r2ZXr4R/PoQT5f1TTtU3Q5OAbbbAxtV4BwXx07wUI5raJdTaVS5vLysmYYhlyMDJBHJBoeHpbFwQ0CfmuP04P8V1VVVb9AVwXGy/xE6SyHw2FuW9Aa2jYAHVx1HAZh78bGxs44wYkm0zS9PPrC1QE4+8HcPwD8HONPYNzEkAU1UX+raFcYmPswzhu9ISLmShIdHBx0lFfVH2s+SyWR/IBofgYvnmCIPTQjkYiBk8mARwYWU4aW8F5uNpslXHkstBncxjcOeyqJ6vfUO9oQd2avlyeKJj3A9z/8yAOE7uHKUgGoiRQYMFZCdEq2bZfgpYFnmd9xzprlcrnCOdV13cbWaWKezGVnAUBOmVBpkOAlPH/AxuYJu/DoPQDcxfubeB/ncZCDL+IpaDKgiVwul8AzDo1BI3RC1HPLIg+mYPQmvPke+hdY+S68ehuevIHQvYpV5/i2KIxKg5pUUew1AaL6wM4cl4oPFJjxFMJ0H6BbIIgBwAbeLSzABLBVKpVszGvSCf27r5dCNE7h1tYWX1U0ECHUaDT+REhryKENrTFbwdLj+skRxIAeM+ka4rGV2QWv2vCIjVoAryC0Jk6MCk6fGvoY0OkFoF80UDsG8AG8j/BtD78YWRSMNNoJQbSe/1Zw0tmwBB6kE0ZG+wXI4v1ECYAIdbKzf/+povypEui6t/jnwvIf5FVJ1Cj/1+UAAAAASUVORK5CYII=" /* Asset.Pointer */, ") no-repeat left center; width: ").concat(pointerWidth, "px; height: ").concat(pointerHeight, "px; }") +
+                        ".".concat("clarity-click" /* Constant.ClickLayer */, ", .").concat("clarity-click-ring" /* Constant.ClickRing */, ", .").concat("clarity-touch" /* Constant.TouchLayer */, ", .").concat("clarity-touch-ring" /* Constant.TouchRing */, " { position: absolute; z-index: ").concat(2147483647 /* Setting.ZIndex */, "; border-radius: 50%; background: radial-gradient(rgba(0,90,158,0.8), transparent); width: ").concat(22 /* Setting.ClickRadius */, "px; height: ").concat(22 /* Setting.ClickRadius */, "px;}") +
+                        ".".concat("clarity-click-ring" /* Constant.ClickRing */, " { background: transparent; border: 1px solid rgba(0,90,158,0.8); }") +
+                        ".".concat("clarity-touch" /* Constant.TouchLayer */, " { background: radial-gradient(rgba(242,97,12,1), transparent); }") +
+                        ".".concat("clarity-touch-ring" /* Constant.TouchRing */, " { background: transparent; border: 1px solid rgba(242,97,12,0.8); }") +
+                        ".".concat("clarity-pointer-click" /* Constant.PointerClickLayer */, " { background-image: url(").concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVoSURBVHgB7VdNTCRFGP2qe6aBGRhA5mfJ7kZcV0XQTQx68MYabl44yMWbetAY3IMX12gWMCZeSLwSEi/GiAHF1SjqMAhoshuTJbg/GkM0xMQIBMj8D/Nfvq+6enZmEtFdhsSDRT66q6qnXr33varqJvoPFUHHWIw6IK6/2tbWdg8dMzBJKQXHwMCAG9UPhBDXW1tbA2gz6BhKZVAAGTs7Oy5um5+fP9fU1LQExv6xsbHGAzNDHrivr88KhUJegH+0ubkp19fXZVdX1w2v13tCAzdcbhPR3N7e3gnQuY0ry3L7nRcUcCAQuIE4MTs7a1IDi9CgXuQxCNBPNq6uyF+HWuTO5IvVjEP6uSMXlk1qYCOVSnFOgYvRLUtmVmbp9HfvUSQSebS5uXkRwIFGSF2zZFpaWoTtWEHCcgvDclPm+4/p3qvvK2CPx7M4MTERZB/QEYoCxVJxBhHsYvwn0+2WKiyLslc+pfuufSjD4fAjyG+Y03AUVyupsDRkR0eHcXBwYMuNKQi3BaYIt5uYce6Hz8XZ63MMzFKHp6am/HcrtQJZWVkhl8tVIju/KqkmgBxAdQXr3LUv6exPl5XUxWIxMjk5GRgZGbljxpWZ7u3tCX3PPCuALDEYk2Ytij9+RQ9ufFEx18LCgv9Ol5PjXsUQg9hSsXubLA3IwC7JoVgjSjfD9PDm1xVzjY6O+qnWlIeDshOxGzkzVRNgeW2mdl6FfXVkxiQsKv/8LfX9sUScY4yxCPAQpP5XjA0GwFJRTLPZrG5mUFcln6Ytc+Uq0CdcLgAvyf4/lxUw1vA3LDVVpexQedfW1ojdW2m1N4cKM8PllqLKUMI0SRhCsuVKtyLUv7XsuJo3kOA/mUt1Dg4OsqRqZ4JUPJZtIttAaqMAMzQarH8NCzwqSzcjghlrcynGh63jGinwA5VP9efIaBr2vqgBnGeltH+nJonCjPts4HPIb5iXE2nP1IPyXssniZNTBhVq0RhC3p6QTd/oHxLpk4/t356yelQawijrecnek6fKOI/9w8PDYQw1ND4+zs/LelAxNzcndIdRLRwzs5kIYT7wJL17q7D/2tPn0+jIcDunRDMt6/SUmbQT6Htra2vrAj+k+yugFRT9I6qVEGxCZwCY3784dillmubr6CqWSqUyD4a61CDclsVKSGM7TaGe8vl8yenpaTMajTqTqeSUjUSdnZ3O5iCrYUXwDM1ke+ni2NspwzAuoTGBweN8xdYZd7vdXE8jMqjnAFjEq06RQZhdT08P1RdONCWTSaEFdeSyqQfvFzO5XnrupdHfAfgm+rcxeBJdaUQS+28K9QQDcxv6eaHntWLSMdHu7q6zxWorVGnNZ6nQVmVJmSEDovoGWGyjixkmLcuK4mSKglEUk4kjYriPFwqFGF550qgzeA6/KTJTx6jVTNXRBt3ZvSpP1OSlmYNeev7lVxQgYqtcLicAmkQKohgsBnViuVwuBpZRXON8j3M2GY/HE5xTv9+fw9Ip4DknlzXAnFM2VDtMcBrXz7Cw+YFNMHoWAOdx/wTue7kf5uAXcR/CWxee7u5uD64tiGaERbZR/3Zb5E4fBj0FNpcRv8GVz4DVU2DyOKR7CLPu5rdFPagzoOmE3uxNDWJUgYl6UFEFCswWH2S6ANBVGCQKwDzu05hAEsDpWCyWw3MFsu0v6S6LySlcXV3lVxUTRnDl8/lfIGkGOcwhMuxWuPQgax9BDKicSUcoyq3sLrAqgxEPmgZ4AtImcWIkcPpk0MaAxUYAVhcT1m4GeCvuu/htD58YQWwY7ah7tNEa/lnBSeeBHeA2sh3ZdFyAXNRHlAawqNadx/edqrc/wwE66lv8/4XLX3gjac6XP/Y1AAAAAElFTkSuQmCC" /* Asset.Click */, "); }") +
+                        ".".concat("clarity-pointer-none" /* Constant.PointerNone */, " { background: none; }") +
+                        ".".concat("clarity-pointer-move" /* Constant.PointerMove */, " { background-image: url(").concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAmCAYAAAA4LpBhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASDSURBVHgB7VdPTCNlFH8z0/+FFmRatnFNiDGR4O4mBk08smZvXjjIxRueNME9eHGNxoLxSNwr4WyigYToQRJLjXDzQtDNmnhR4kWWAJm20ymddtrx94bvI9NBWAptsod9ycvM92fe73vv/b73fUP0DIlCfRQ1AMTtjwcHB1+gPgOT67oK6+TkZBjNbxRF+X1gYCCDPpX6IKdGAaTu7++HuG9tbe1ONBr9GR7r+Xy+98DsIRuemJiIjI6OJgH+3e7urruzs+OOjIw8SiaTNwRwz8OtQWPpdHoYoKt///ar2/jxaw84k8k8gt5YWVnRqEfi90BrtVph0Uetx0V67d9fqFAo3G6324XZ2VldLK4noK4AVqvVaoh8YZTAxWLxdiwW20CoM70IdceWicfjSpCxfuBEIrGxsLCQZR7QNcQDwFaRRhRmcXCSL9S3kN8CtlP2Oqz2QoWt4Q4NDanHx8cy3HQBMIe6sLS0pF811B7I5uYmhUKh1nmAQWAOteM4xcXFxczMzEzXHp+u9PDwUBHvymWBmVzr6+t6t9tJhtPzEEYuFaoguebm5nTqJOXFoMxEVCO50tMFXBaYcwwbGwAfRagv5bEKthK2igdUr9epG/EDYw//xKGmzoLz/6BQd3t7m5i9dAUJsJoLSPZp5PIGp6amXHjsVSaEirqVALk8jy/axx2hwAcMTlcRH/Ad5LfA24kEZ4JzudbySSJzyqDnomq37pH14utH/iUrCA5HCeRwHYXc8dzNNs5jfXp6uoD+e/Pz8zzfDYIqq6urihg4NyTaK2/Rw8fNo0/euWvBWI3TwGAiHW2RnjY7LRVjX+7t7d3nSWL8FFSKIj46I0r2ZXr4R/PoQT5f1TTtU3Q5OAbbbAxtV4BwXx07wUI5raJdTaVS5vLysmYYhlyMDJBHJBoeHpbFwQ0CfmuP04P8V1VVVb9AVwXGy/xE6SyHw2FuW9Aa2jYAHVx1HAZh78bGxs44wYkm0zS9PPrC1QE4+8HcPwD8HONPYNzEkAU1UX+raFcYmPswzhu9ISLmShIdHBx0lFfVH2s+SyWR/IBofgYvnmCIPTQjkYiBk8mARwYWU4aW8F5uNpslXHkstBncxjcOeyqJ6vfUO9oQd2avlyeKJj3A9z/8yAOE7uHKUgGoiRQYMFZCdEq2bZfgpYFnmd9xzprlcrnCOdV13cbWaWKezGVnAUBOmVBpkOAlPH/AxuYJu/DoPQDcxfubeB/ncZCDL+IpaDKgiVwul8AzDo1BI3RC1HPLIg+mYPQmvPke+hdY+S68ehuevIHQvYpV5/i2KIxKg5pUUew1AaL6wM4cl4oPFJjxFMJ0H6BbIIgBwAbeLSzABLBVKpVszGvSCf27r5dCNE7h1tYWX1U0ECHUaDT+REhryKENrTFbwdLj+skRxIAeM+ka4rGV2QWv2vCIjVoAryC0Jk6MCk6fGvoY0OkFoF80UDsG8AG8j/BtD78YWRSMNNoJQbSe/1Zw0tmwBB6kE0ZG+wXI4v1ECYAIdbKzf/+povypEui6t/jnwvIf5FVJ1Cj/1+UAAAAASUVORK5CYII=" /* Asset.Pointer */, "); }");
                 p.appendChild(style);
             }
-            p.style.left = (data.x - 4 /* PointerOffset */) + "px" /* Pixel */;
-            p.style.top = (data.y - 4 /* PointerOffset */) + "px" /* Pixel */;
+            p.style.left = (data.x - 4 /* Setting.PointerOffset */) + "px" /* Constant.Pixel */;
+            p.style.top = (data.y - 4 /* Setting.PointerOffset */) + "px" /* Constant.Pixel */;
             var title = "Pointer";
             switch (type) {
-                case 9 /* Click */:
+                case 9 /* Data.Event.Click */:
                     title = "Click";
                     _this.drawClick(doc, data.x, data.y, title);
-                    p.className = "clarity-pointer-none" /* PointerNone */;
+                    p.className = "clarity-pointer-none" /* Constant.PointerNone */;
                     break;
-                case 16 /* DoubleClick */:
+                case 16 /* Data.Event.DoubleClick */:
                     title = "Click";
                     _this.drawClick(doc, data.x, data.y, title);
-                    p.className = "clarity-pointer-none" /* PointerNone */;
+                    p.className = "clarity-pointer-none" /* Constant.PointerNone */;
                     break;
-                case 17 /* TouchStart */:
-                case 18 /* TouchEnd */:
-                case 20 /* TouchCancel */:
+                case 17 /* Data.Event.TouchStart */:
+                case 18 /* Data.Event.TouchEnd */:
+                case 20 /* Data.Event.TouchCancel */:
                     title = "Touch";
                     _this.drawTouch(doc, data.x, data.y, title);
-                    p.className = "clarity-pointer-none" /* PointerNone */;
+                    p.className = "clarity-pointer-none" /* Constant.PointerNone */;
                     break;
-                case 19 /* TouchMove */:
+                case 19 /* Data.Event.TouchMove */:
                     title = "Touch Move";
-                    p.className = "clarity-pointer-none" /* PointerNone */;
+                    p.className = "clarity-pointer-none" /* Constant.PointerNone */;
                     break;
-                case 12 /* MouseMove */:
+                case 12 /* Data.Event.MouseMove */:
                     title = "Mouse Move";
-                    p.className = "clarity-pointer-move" /* PointerMove */;
+                    p.className = "clarity-pointer-move" /* Constant.PointerMove */;
                     _this.addPoint({ time: event.time, x: data.x, y: data.y });
                     _this.targetId = data.target;
                     break;
                 default:
-                    p.className = "clarity-pointer-move" /* PointerMove */;
+                    p.className = "clarity-pointer-move" /* Constant.PointerMove */;
                     break;
             }
-            p.setAttribute("title" /* Title */, title + " (" + data.x + "px" /* Pixel */ + ", " + data.y + "px" /* Pixel */ + ")");
+            p.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(data.x).concat("px" /* Constant.Pixel */, ", ").concat(data.y).concat("px" /* Constant.Pixel */, ")"));
         };
         this.hover = function () {
             if (_this.targetId && _this.targetId !== _this.hoverId) {
                 var depth = 0;
                 // First, remove any previous hover class assignments
                 var hoverNode = _this.hoverId ? _this.layout.element(_this.hoverId) : null;
-                while (hoverNode && depth < 7 /* HoverDepth */) {
+                while (hoverNode && depth < 7 /* Setting.HoverDepth */) {
                     if ("removeAttribute" in hoverNode) {
-                        hoverNode.removeAttribute("clarity-hover" /* HoverAttribute */);
+                        hoverNode.removeAttribute("clarity-hover" /* Constant.HoverAttribute */);
                     }
                     hoverNode = hoverNode.parentElement;
                     depth++;
@@ -792,9 +792,9 @@ var InteractionHelper = /** @class */ (function () {
                 // Then, add hover class on elements that are below the pointer
                 depth = 0;
                 var targetNode = _this.targetId ? _this.layout.element(_this.targetId) : null;
-                while (targetNode && depth < 7 /* HoverDepth */) {
+                while (targetNode && depth < 7 /* Setting.HoverDepth */) {
                     if ("setAttribute" in targetNode) {
-                        targetNode.setAttribute("clarity-hover" /* HoverAttribute */, "" /* Empty */);
+                        targetNode.setAttribute("clarity-hover" /* Constant.HoverAttribute */, "" /* Layout.Constant.Empty */);
                     }
                     targetNode = targetNode.parentElement;
                     depth++;
@@ -815,18 +815,18 @@ var InteractionHelper = /** @class */ (function () {
         this.drawTouch = function (doc, x, y, title) {
             var de = doc.documentElement;
             var touch = doc.createElement("DIV");
-            touch.className = "clarity-touch" /* TouchLayer */;
-            touch.setAttribute("title" /* Title */, title + " (" + x + "px" /* Pixel */ + ", " + y + "px" /* Pixel */ + ")");
-            touch.style.left = (x - 22 /* ClickRadius */ / 2) + "px" /* Pixel */;
-            touch.style.top = (y - 22 /* ClickRadius */ / 2) + "px" /* Pixel */;
+            touch.className = "clarity-touch" /* Constant.TouchLayer */;
+            touch.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(x).concat("px" /* Constant.Pixel */, ", ").concat(y).concat("px" /* Constant.Pixel */, ")"));
+            touch.style.left = (x - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
+            touch.style.top = (y - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
             touch.style.animation = "disappear 1 1s";
             touch.style.animationFillMode = "forwards";
             de.appendChild(touch);
             // First pulsating ring
             var ringOne = touch.cloneNode();
-            ringOne.className = "clarity-touch-ring" /* TouchRing */;
-            ringOne.style.left = "-0.5" + "px" /* Pixel */;
-            ringOne.style.top = "-0.5" + "px" /* Pixel */;
+            ringOne.className = "clarity-touch-ring" /* Constant.TouchRing */;
+            ringOne.style.left = "-0.5" + "px" /* Constant.Pixel */;
+            ringOne.style.top = "-0.5" + "px" /* Constant.Pixel */;
             ringOne.style.animation = "pulsate-touch 1 1s";
             ringOne.style.animationFillMode = "forwards";
             touch.appendChild(ringOne);
@@ -834,16 +834,16 @@ var InteractionHelper = /** @class */ (function () {
         this.drawClick = function (doc, x, y, title) {
             var de = doc.documentElement;
             var click = doc.createElement("DIV");
-            click.className = "clarity-click" /* ClickLayer */;
-            click.setAttribute("title" /* Title */, title + " (" + x + "px" /* Pixel */ + ", " + y + "px" /* Pixel */ + ")");
-            click.style.left = (x - 22 /* ClickRadius */ / 2) + "px" /* Pixel */;
-            click.style.top = (y - 22 /* ClickRadius */ / 2) + "px" /* Pixel */;
+            click.className = "clarity-click" /* Constant.ClickLayer */;
+            click.setAttribute("title" /* Constant.Title */, "".concat(title, " (").concat(x).concat("px" /* Constant.Pixel */, ", ").concat(y).concat("px" /* Constant.Pixel */, ")"));
+            click.style.left = (x - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
+            click.style.top = (y - 22 /* Setting.ClickRadius */ / 2) + "px" /* Constant.Pixel */;
             de.appendChild(click);
             // First pulsating ring
             var ringOne = click.cloneNode();
-            ringOne.className = "clarity-click-ring" /* ClickRing */;
-            ringOne.style.left = "-0.5" + "px" /* Pixel */;
-            ringOne.style.top = "-0.5" + "px" /* Pixel */;
+            ringOne.className = "clarity-click-ring" /* Constant.ClickRing */;
+            ringOne.style.left = "-0.5" + "px" /* Constant.Pixel */;
+            ringOne.style.top = "-0.5" + "px" /* Constant.Pixel */;
             ringOne.style.animation = "pulsate-one 1 1s";
             ringOne.style.animationFillMode = "forwards";
             click.appendChild(ringOne);
@@ -852,9 +852,9 @@ var InteractionHelper = /** @class */ (function () {
             ringTwo.style.animation = "pulsate-two 1 1s";
             click.appendChild(ringTwo);
             // Play sound
-            if (typeof Audio !== "undefined" /* Undefined */) {
+            if (typeof Audio !== "undefined" /* Constant.Undefined */) {
                 if (_this.clickAudio === null) {
-                    _this.clickAudio = new Audio("data:video/webm;base64,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" /* Sound */);
+                    _this.clickAudio = new Audio("data:video/webm;base64,GkXfo59ChoEBQveBAULygQRC84EIQoKEd2VibUKHgQRChYECGFOAZwEAAAAAAA2GEU2bdKxNu4tTq4QVSalmU6yB5U27jFOrhBZUrmtTrIIBHE27jFOrhBJUw2dTrIIBg+wBAAAAAAAAqwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABVJqWayKtexgw9CQE2AjUxhdmY1OC4zMy4xMDBXQY1MYXZmNTguMzMuMTAwRImIQHWwAAAAAAAWVK5r4q4BAAAAAAAAWdeBAXPFgQGcgQAitZyDdW5khoZBX09QVVNWqoNjLqBWu4QExLQAg4EC4QEAAAAAAAARn4EBtYhA53AAAAAAAGJkgRBjopNPcHVzSGVhZAEBOAGAuwAAAAAAElTDZ0E3c3MBAAAAAAAApWPAAQAAAAAAAABnyAEAAAAAAAAwRaOKRU5DT0RFRF9CWUSHoEFkb2JlIFByZW1pZXJlIFBybyAyMDIwLjAgKE1hY2luZ8gBAAAAAAAAFUWjjlRJTUVfUkVGRVJFTkNFRIeBMGfIAQAAAAAAABRFo4REQVRFRIeKMjAyMC0wNS0xMWfIAQAAAAAAABpFo4dFTkNPREVSRIeNTGF2ZjU4LjMzLjEwMHNzAQAAAAAAADpjwAEAAAAAAAAEY8WBAWfIAQAAAAAAACJFo4dFTkNPREVSRIeVTGF2YzU4LjU5LjEwMiBsaWJvcHVzc3MBAAAAAAAAOmPAAQAAAAAAAARjxYEBZ8gBAAAAAAAAIkWjiERVUkFUSU9ORIeUMDA6MDA6MDAuMzQ3MDAwMDAwAAAfQ7Z1SsDngQCjh4EAAID4//6jh4EAFYD4//6jh4EAKYD4//6jh4EAPYD4//6jQTOBAFGA+Hf8sxqASCSh2FJGBfsZEwDIBdS8inu5b213iY0Dnu9jbest8S64kJlnCuNakokZYO8i1Wus5IXXTjHRTe0n/H904+RQTH0PGdXj50tRWTzoHv5wwgjWEduG7UuDBZeB3bb6VuqWZ1rcPJlfa5Kmrg0trnCEMbbrqATFPr3h9IjSfa8Pu2OtrPUA+sXcPf0eC79cRi9UGNxkIKf8NaiHGOxrbPyvsewpDmWLKFAwmqC/tYu7kznCSvyONWH1jFENoGGEFPrDYmM6V99Yk/71TEDwhtFjj4g+aGac1DwRBa7uDakJl6HGXL/vIR8z4qanutC0xZ8XY+PUFuBFAKy0YKZWhUOIRLy2A/2E40Q3LDRlcrVanhIf3e4v84VjIRAKAhfbLYMCTQ8G3Mu+ErEHo0E5gQBlgPh+GaacPkSEqd6zm8k76Jk8Aw8Pf7sK8lqg1Blt7hwsIfI0kefrJGluVOvxYxMZNZSiQSIOJptbwNjufeojLnvzUzNrqIBrghz4nHEFT0cYc/ZA0vWSHRgQSQD8WkqvD/vRHFCCmRh+SI6bVempNdNFloc6Uni4M58ZoiuYnmRdkSYtxJDdNOc0RhdFehBG7dNqXiTkSo0zIvdCK7XAsuJHLVMQOke7SWyPo1kFyBKoQyuK06K4VG2IqwlH138PKee8g6Wxtu+DENjWxG7HtMJf3iIo1aXOWaNdIyJMKqSAv2rUwYdPpaPtYyFMTAqH372Ocq7A4ixxMAwAksL+QaYeyss6V37dQaqtF6Skb4SggL9v4uOj0IVE+r1e/7Ooj2KAL3RG4B5WzE6TNoMNwrg+HQR8rqNBK4EAeYD4fMsrpfE2dU5rAKM3te90/U91Gt8Bn80e5ri5WSnxJ+Y8HffdtHkOib+JNvmr2AXc3De0EiMC/ecOgekxFMOiPYSEJxQLUMcMl23RySvdXXs+XM5U5+dmsrCvoNppK4JkZYiIOPI975i0OdA8q+XZlbQ+1Mz/q9GxUsjVo4t1W/bYOfr0+7kFIG8Wad0KcLAOaQN5UZq5uz4XCOoBiqkhg60DQ7c7x0eApCrx4n+aoc/1nZvWHsmumI4GAhVcyBNYOisYkyogtfPYFgoKrqvZMFB54/Xtw5AVBfUduVktZqY0HuSaFLhclAYYpEx/gPl8NGZ2YacOgAK35EJ7HMSIMZtcjbhn05lJHifyTuO7WIApoP50VdFPLw1oiofLS+j/iG6UDRvuo0DDgQCNgPhhOmsgpW2AnFd6vOCxqTjHmKAhblr1wX1IIPu5/1ftPUmPXFP+NcdIVclcWKJCMlxOyd0+2kc/EtIy6X43uooxYrcCUwj8TZgX1ooV1ZIV03qDRQmXELmp6vDXPOg+MWF4mXhMnCUAsRBoQlb/giRAIZl6+GRetMoAAvEnAFTrl2kALzo2aNfN35ESALpqn87BaA+XZdl2Da/0BXNzE5YXwfcorOXeOHLK6QBlj+7w2Q/fKiuZbwWZ+sE67NeUo0E1gQChgPh/KZRcKyQ9fyIqiewLQu0jhqZkXwEEyS1JfYtVxvZ6rhEqjbzwRqfczQjpHLJR7WVtEKi/NHwXZOYYCzbXHXszeAc7yI+i0hfTKOtqNz69nwX5PZ0weNjP4w6QbWoW8OzWPA2f8ZXfptK1Z6PUW/bNj+hdnd46OZzGK6qLr0EZQeSDluLYFSAoeywY65FGKsH51y0g3cQAeCm0Hznu62i4scicJcYqtavuPi6CJTSy+32DeRbWPB+YZqKpFfoTj87ga5TPE0w5lSOF/slzVzQuchTYUMSWIaBUewA6TipFaEOzi43vUclCGINiKi9lGX15S2bFeBb7rldhrBkNUw6/r4weukw7Fle08ZaAFG1BFocao5MxZ3NhYFU7rvjrgh8hL790E2gMLfCwFNTaJ5kfo0E9gQC1gPh7RQVaT+xi+Tfqby3j6v+Ws0ncRr8n07Sye0xZsosiFldqDH0aJIuw8DjUxc7oxvCAGAKQXyc+ukXJ4dFdBG/uiYYUGLTXR9UfvK0Aa/aPSaA0xm15ulCJG+OgPSgi73bhK/DEoLSKw6wMX/daeL7AuuvZAC4Lm+82QqkWaKXi+UKET1uykU8LjPeCFcJOr8tmsu8Na9zgyhX7sk+O72ILT3Tq6wtu0P/kBrkuSRVLDljecUtPGPd81nDxthyri0GHn1dGCQO/ryf9UO/d20YclmvvGBMzrm+q7e9OTsHVS/EQiYVfdUR3tB2585J3FkDJQGnksPMytaB5oLJYgsJgTwGMztB4U7Px4tsx+nO3yTjNTr9po0qxhXggVDFmcrkE9VUMcDYcaqi/ygCf2RTVud/egmVznRWjQTCBAMmA+Hzk3SIwInlcM2PFuCLBsYPmx3rbcIXqk7OkMk+s8oaWDdn62v0ln085oXKkuFLC/HALb7ByiqCblKgO86J2B/n+xC4RTNIO+5QV8nXidUXkdFiltBuoUUAa2zLh90VncpZQC0tLDxfV32+Igrrj7FZOu3RvtRy8Yw9TvSjOwlYkAMqydxC9O9qbyOecB4onpr62eH7mXD4AicyRmXzRG88GvsB09N7QEEBWNNBGHyC7i0Gkmn9h/b7ypju8iBp7ZSghXzmNyBsp9cmOTxiCgiO94OPMLe35NzmIoM/Rbzdgi7DT1q4n4/06JtDxcwbibc5PWaaoehRpZ41p6bcpJ15QrlKTfklR0P+FDioJIQ4NvzZlUKrJtJ3FjfEmcAoWz18pFvCPLaK0TK/Mo0EygQDdgPh9vdOMNo75kIEdfCwlJUwcZsrSyfZcQTEMDsHY9ozsBLRDSLmLSYpqA3Mt0LPpmMYOckcGC/acmIP52RObp1DjpAfXGotFeXzyTIVFcD/mF8f2gteywXt++dRJm04SU7wF5fr+qsirERDjxStbtnuICHN4+jXw2zy6KQAADCrLZHgcqOYBrgcferGAAAAAAAAAAAAAAAAAAAAAIHTo9YXVkUJ3lE/QiyCmhh4KpBCGpc3sSM0hW/uUNFxO744xxgjWWy+LksHodcnYT1+1M13MXq0oMnNJWSgWqbjbOWzfYGDFITcGvrPupQH266TUDffTYAFX/qLkruQ7UwGx66GwkbjBGwdc8y5PqdohY0JXzta+r8KGdVitaFYALTmJUqFc9URJ1WLGn2/0TX5Xo0ETgQDxgPh/3ztwqxbXHlZsp/yXeBDstIY8ov3IYo9ekn89p0yxz4ziLbp2PgwxkiZTBrJbXu1j7rNqjdVJ29SbxVQ96tdWZbh9xBr+bpL9fM8UBP5oljtFFlCrDNz5X/X2kcHm2EswzFpHwF4RqqFJEtiMJ10iTbW4nUbtKN8o4GBuFHBQb2aAXEQE8Slkx+z2KedA1NoEkeHLyC3RVTr4NhqC8xhZnPFSwTZy3Woo+gQCOac0AIAJ7me5hJ6P+5HimuFWwE8719kEheeataVAEAE28VJhAEAHvqn9MYAQAe+mOv9MAHgAHlJhu9NgA8ADar/Tw1UQAG0ACqMNVEKXOQAKoAEzjdI4ACqAAAAB+Y2WeOijh4EBBYD4//6jh4EBGYD4//6jh4EBLYD4//6jh4EBQYD4//6gAQAAAAAAABChh4EBVQD4//51ooQA14fI" /* Asset.Sound */);
                 }
                 _this.clickAudio.play();
             }
@@ -863,10 +863,10 @@ var InteractionHelper = /** @class */ (function () {
             // Create canvas for visualizing interactions
             var doc = _this.state.window.document;
             var de = doc.documentElement;
-            var canvas = doc.getElementById("clarity-interaction-canvas" /* InteractionCanvas */);
+            var canvas = doc.getElementById("clarity-interaction-canvas" /* Constant.InteractionCanvas */);
             if (canvas === null) {
                 canvas = doc.createElement("canvas");
-                canvas.id = "clarity-interaction-canvas" /* InteractionCanvas */;
+                canvas.id = "clarity-interaction-canvas" /* Constant.InteractionCanvas */;
                 canvas.width = 0;
                 canvas.height = 0;
                 de.appendChild(canvas);
@@ -882,14 +882,14 @@ var InteractionHelper = /** @class */ (function () {
             for (var i = _this.points.length - 1; i > 0; i--) {
                 // Each pixel in the trail has a pixel life of 3s. The only exception to this is if the user scrolled.
                 // We reset the trail after every scroll event to avoid drawing weird looking trail.
-                if (i >= _this.scrollPointIndex && time - _this.points[i].time < 3000 /* PixelLife */) {
+                if (i >= _this.scrollPointIndex && time - _this.points[i].time < 3000 /* Setting.PixelLife */) {
                     p.push(_this.points[i]);
                 }
                 else {
                     break;
                 }
             }
-            return p.slice(0, 75 /* MaxTrailPoints */);
+            return p.slice(0, 75 /* Setting.MaxTrailPoints */);
         };
         this.trail = function (now) {
             var canvas = _this.overlay();
@@ -918,9 +918,9 @@ var InteractionHelper = /** @class */ (function () {
                         gradient.addColorStop(1, _this.color(currentFactor));
                         gradient.addColorStop(0, _this.color(lastFactor));
                         // Line width of the trail shrinks as the position of the point goes farther away.
-                        ctx.lineWidth = 6 /* TrailWidth */ * currentFactor;
-                        ctx.lineCap = "round" /* Round */;
-                        ctx.lineJoin = "round" /* Round */;
+                        ctx.lineWidth = 6 /* Setting.TrailWidth */ * currentFactor;
+                        ctx.lineCap = "round" /* Constant.Round */;
+                        ctx.lineJoin = "round" /* Constant.Round */;
                         ctx.strokeStyle = gradient;
                         ctx.beginPath();
                         // The coordinates need to be relative to where canvas is rendered.
@@ -946,7 +946,7 @@ var InteractionHelper = /** @class */ (function () {
             for (var i = 0; i < 3; i++) {
                 c[i] = Math.round(e[i] + factor * (s[i] - e[i]));
             }
-            return "rgba(" + c[0] + ", " + c[1] + ", " + c[2] + ", " + factor + ")";
+            return "rgba(".concat(c[0], ", ").concat(c[1], ", ").concat(c[2], ", ").concat(factor, ")");
         };
         // Reference: https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Cardinal_spline
         this.curve = function (path) {
@@ -1021,24 +1021,16 @@ var LayoutHelper = /** @class */ (function () {
             }
             return null;
         };
-        this.box = function (event) {
-            var data = event.data;
-            for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
-                var b = data_1[_i];
-                var el = _this.element(b.id);
-                _this.resize(el, b.width, b.height);
-            }
-        };
         this.addToHashMap = function (data, parent) {
             // In case of selector collision, prefer the first inserted node
             _this.hashMap[data.hash] = _this.get(data.hash) || parent;
             _this.hashMapBeta[data.hashBeta] = _this.get(data.hashBeta) || parent;
         };
         this.resize = function (el, width, height) {
-            if (el && el.nodeType === 1 /* ELEMENT_NODE */ && width && height) {
-                el.style.width = width + "px" /* Pixel */;
-                el.style.height = height + "px" /* Pixel */;
-                el.style.boxSizing = "border-box" /* BorderBox */; // Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
+            if (el && el.nodeType === 1 /* NodeType.ELEMENT_NODE */ && width && height) {
+                el.style.width = width + "px" /* Layout.Constant.Pixel */;
+                el.style.height = height + "px" /* Layout.Constant.Pixel */;
+                el.style.boxSizing = "border-box" /* Layout.Constant.BorderBox */; // Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
             }
         };
         this.element = function (nodeId) {
@@ -1052,7 +1044,7 @@ var LayoutHelper = /** @class */ (function () {
                         if (!event) return [3 /*break*/, 2];
                         doc = this.state.window.document;
                         if (!(doc && doc.documentElement)) return [3 /*break*/, 2];
-                        doc.documentElement.style.visibility = "hidden" /* Hidden */;
+                        doc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
                         // Render all DOM events to reconstruct the page
                         this.markup(event);
                         // Wait on all stylesheets to finish loading
@@ -1061,7 +1053,7 @@ var LayoutHelper = /** @class */ (function () {
                         // Wait on all stylesheets to finish loading
                         _a.sent();
                         // Toggle back the visibility of target window
-                        doc.documentElement.style.visibility = "visible" /* Visible */;
+                        doc.documentElement.style.visibility = "visible" /* Constant.Visible */;
                         _a.label = 2;
                     case 2: return [2 /*return*/];
                 }
@@ -1086,13 +1078,13 @@ var LayoutHelper = /** @class */ (function () {
                 var pivot = _this.element(node.previous);
                 var insert = _this.insertAfter;
                 var tag = node.tag;
-                if (tag && tag.indexOf("iframe:" /* IFramePrefix */) === 0) {
-                    tag = node.tag.substr("iframe:" /* IFramePrefix */.length);
+                if (tag && tag.indexOf("iframe:" /* Layout.Constant.IFramePrefix */) === 0) {
+                    tag = node.tag.substr("iframe:" /* Layout.Constant.IFramePrefix */.length);
                 }
                 switch (tag) {
-                    case "*D" /* DocumentTag */:
+                    case "*D" /* Layout.Constant.DocumentTag */:
                         var tagDoc = tag !== node.tag ? (parent_1 ? parent_1.contentDocument : null) : doc;
-                        if (tagDoc && tagDoc === doc && type === 5 /* Discover */) {
+                        if (tagDoc && tagDoc === doc && type === 5 /* Data.Event.Discover */) {
                             _this.reset();
                         }
                         if (typeof XMLSerializer !== "undefined" && tagDoc) {
@@ -1101,13 +1093,13 @@ var LayoutHelper = /** @class */ (function () {
                             tagDoc.close();
                         }
                         break;
-                    case "*P" /* PolyfillShadowDomTag */:
+                    case "*P" /* Layout.Constant.PolyfillShadowDomTag */:
                         // In case of polyfill, map shadow dom to it's parent for rendering purposes
                         // All its children should be inserted as regular children to the parent node.
                         _this.nodes[node.id] = parent_1;
                         _this.addToHashMap(node, parent_1);
                         break;
-                    case "*S" /* ShadowDomTag */:
+                    case "*S" /* Layout.Constant.ShadowDomTag */:
                         if (parent_1) {
                             var shadowRoot = _this.element(node.id);
                             shadowRoot = shadowRoot ? shadowRoot : parent_1.attachShadow({ mode: "open" });
@@ -1116,10 +1108,10 @@ var LayoutHelper = /** @class */ (function () {
                                 // Support for adoptedStyleSheet is limited and not available in all browsers.
                                 // To ensure that we can replay session in any browser, we turn adoptedStyleSheets from recording
                                 // into classic style tags at the playback time.
-                                if (shadowRoot.firstChild && shadowRoot.firstChild.id === "clarity-adopted-style" /* AdoptedStyleSheet */) {
+                                if (shadowRoot.firstChild && shadowRoot.firstChild.id === "clarity-adopted-style" /* Constant.AdoptedStyleSheet */) {
                                     shadowStyle = shadowRoot.firstChild;
                                 }
-                                shadowStyle.id = "clarity-adopted-style" /* AdoptedStyleSheet */;
+                                shadowStyle.id = "clarity-adopted-style" /* Constant.AdoptedStyleSheet */;
                                 shadowStyle.textContent = node.attributes["style"];
                                 shadowRoot.appendChild(shadowStyle);
                             }
@@ -1127,16 +1119,16 @@ var LayoutHelper = /** @class */ (function () {
                             _this.addToHashMap(node, shadowRoot);
                         }
                         break;
-                    case "*T" /* TextTag */:
+                    case "*T" /* Layout.Constant.TextTag */:
                         var textElement = _this.element(node.id);
                         textElement = textElement ? textElement : doc.createTextNode(null);
                         textElement.nodeValue = node.value;
                         insert(node, parent_1, textElement, pivot);
                         break;
-                    case "*M" /* SuspendMutationTag */:
+                    case "*M" /* Layout.Constant.SuspendMutationTag */:
                         var suspendedElement = _this.element(node.id);
                         if (suspendedElement && suspendedElement.nodeType === Node.ELEMENT_NODE) {
-                            suspendedElement.setAttribute("data-clarity-suspend" /* Suspend */, "" /* Empty */);
+                            suspendedElement.setAttribute("data-clarity-suspend" /* Constant.Suspend */, "" /* Layout.Constant.Empty */);
                         }
                         break;
                     case "HTML":
@@ -1144,7 +1136,7 @@ var LayoutHelper = /** @class */ (function () {
                         if (htmlDoc !== null) {
                             var docElement = _this.element(node.id);
                             if (docElement === null) {
-                                var newDoc = htmlDoc.implementation.createHTMLDocument("" /* Empty */);
+                                var newDoc = htmlDoc.implementation.createHTMLDocument("" /* Layout.Constant.Empty */);
                                 docElement = newDoc.documentElement;
                                 var p = htmlDoc.importNode(docElement, true);
                                 htmlDoc.replaceChild(p, htmlDoc.documentElement);
@@ -1157,8 +1149,8 @@ var LayoutHelper = /** @class */ (function () {
                             }
                             _this.setAttributes(htmlDoc.documentElement, node);
                             // If we are still processing discover events, keep the markup hidden until we are done
-                            if (type === 5 /* Discover */) {
-                                htmlDoc.documentElement.style.visibility = "hidden" /* Hidden */;
+                            if (type === 5 /* Data.Event.Discover */ && !parent_1) {
+                                htmlDoc.documentElement.style.visibility = "hidden" /* Constant.Hidden */;
                             }
                             _this.nodes[node.id] = htmlDoc.documentElement;
                             _this.addToHashMap(node, htmlDoc.documentElement);
@@ -1168,9 +1160,9 @@ var LayoutHelper = /** @class */ (function () {
                         var headElement = _this.element(node.id);
                         if (headElement === null) {
                             headElement = doc.createElement(node.tag);
-                            if (node.attributes && "*B" /* Base */ in node.attributes) {
+                            if (node.attributes && "*B" /* Layout.Constant.Base */ in node.attributes) {
                                 var base = doc.createElement("base");
-                                base.href = node.attributes["*B" /* Base */];
+                                base.href = node.attributes["*B" /* Layout.Constant.Base */];
                                 headElement.appendChild(base);
                             }
                             // Add custom styles to assist with visualization
@@ -1226,8 +1218,8 @@ var LayoutHelper = /** @class */ (function () {
                     _this.events[node.id] = node;
                 }
             };
-            for (var _i = 0, data_2 = data; _i < data_2.length; _i++) {
-                var node = data_2[_i];
+            for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
+                var node = data_1[_i];
                 _loop_1(node);
             }
         };
@@ -1238,8 +1230,8 @@ var LayoutHelper = /** @class */ (function () {
                 var sheet = node.sheet;
                 var cssRules = sheet ? sheet.cssRules : [];
                 for (var i = 0; i < cssRules.length; i++) {
-                    if (cssRules[i].cssText.indexOf(":hover" /* Hover */) >= 0) {
-                        var css = cssRules[i].cssText.replace(/:hover/g, "[" + "clarity-hover" /* CustomHover */ + "]");
+                    if (cssRules[i].cssText.indexOf(":hover" /* Constant.Hover */) >= 0) {
+                        var css = cssRules[i].cssText.replace(/:hover/g, "[".concat("clarity-hover" /* Constant.CustomHover */, "]"));
                         sheet.removeRule(i);
                         sheet.insertRule(css, i);
                     }
@@ -1251,16 +1243,16 @@ var LayoutHelper = /** @class */ (function () {
             }
         };
         this.createElement = function (doc, tag) {
-            if (tag && tag.indexOf("svg:" /* SvgPrefix */) === 0) {
-                return doc.createElementNS("http://www.w3.org/2000/svg" /* SvgNamespace */, tag.substr("svg:" /* SvgPrefix */.length));
+            if (tag && tag.indexOf("svg:" /* Layout.Constant.SvgPrefix */) === 0) {
+                return doc.createElementNS("http://www.w3.org/2000/svg" /* Layout.Constant.SvgNamespace */, tag.substr("svg:" /* Layout.Constant.SvgPrefix */.length));
             }
             try {
                 return doc.createElement(tag);
             }
             catch (ex) {
                 // We log the warning on non-standard markup but continue with the visualization
-                console.warn("Exception encountered while creating element " + tag + ": " + ex);
-                return doc.createElement("clarity-unknown" /* UnknownTag */);
+                console.warn("Exception encountered while creating element ".concat(tag, ": ").concat(ex));
+                return doc.createElement("clarity-unknown" /* Constant.UnknownTag */);
             }
         };
         this.insertAfter = function (data, parent, node, previous) {
@@ -1276,7 +1268,7 @@ var LayoutHelper = /** @class */ (function () {
         this.firstChild = function (node) {
             var child = node.firstChild;
             // BASE tag should always be the first child to ensure resources with relative URLs are loaded correctly
-            if (child && child.nodeType === 1 /* ELEMENT_NODE */ && child.tagName === "BASE" /* BaseTag */) {
+            if (child && child.nodeType === 1 /* NodeType.ELEMENT_NODE */ && child.tagName === "BASE" /* Layout.Constant.BaseTag */) {
                 return child.nextSibling;
             }
             return child;
@@ -1302,17 +1294,17 @@ var LayoutHelper = /** @class */ (function () {
             var attributes = data.attributes || {};
             var sameorigin = false;
             // Clarity attributes
-            attributes["data-clarity-id" /* Id */] = "" + data.id;
-            attributes["data-clarity-hash" /* Hash */] = "" + data.hash;
-            attributes["data-clarity-hashbeta" /* HashBeta */] = "" + data.hashBeta;
-            var tag = node.nodeType === 1 /* ELEMENT_NODE */ ? node.tagName.toLowerCase() : null;
+            attributes["data-clarity-id" /* Constant.Id */] = "".concat(data.id);
+            attributes["data-clarity-hash" /* Constant.Hash */] = "".concat(data.hash);
+            attributes["data-clarity-hashbeta" /* Constant.HashBeta */] = "".concat(data.hashBeta);
+            var tag = node.nodeType === 1 /* NodeType.ELEMENT_NODE */ ? node.tagName.toLowerCase() : null;
             // First remove all its existing attributes
             if (node.attributes) {
                 var length_1 = node.attributes.length;
                 while (node.attributes && length_1 > 0) {
                     // Do not remove "clarity-hover" attribute and let it be managed by interaction module
                     // This helps avoid flickers during visualization
-                    if (node.attributes[0].name !== "clarity-hover" /* HoverAttribute */) {
+                    if (node.attributes[0].name !== "clarity-hover" /* Constant.HoverAttribute */) {
                         node.removeAttribute(node.attributes[0].name);
                     }
                     length_1--;
@@ -1326,22 +1318,22 @@ var LayoutHelper = /** @class */ (function () {
                         if (attribute.indexOf("xlink:") === 0) {
                             node.setAttributeNS("http://www.w3.org/1999/xlink", attribute, v);
                         }
-                        else if (attribute.indexOf("*O" /* SameOrigin */) === 0) {
+                        else if (attribute.indexOf("*O" /* Layout.Constant.SameOrigin */) === 0) {
                             sameorigin = true;
                         }
                         else if (attribute.indexOf("*") === 0) {
                             // Do nothing if we encounter internal Clarity attributes
                         }
-                        else if (tag === "iframe" /* IFrameTag */ && (attribute.indexOf("src") === 0 || attribute.indexOf("allow") === 0) || attribute === "sandbox") {
-                            node.setAttribute("data-clarity-" + attribute, v);
+                        else if (tag === "iframe" /* Constant.IFrameTag */ && (attribute.indexOf("src") === 0 || attribute.indexOf("allow") === 0) || attribute === "sandbox") {
+                            node.setAttribute("data-clarity-".concat(attribute), v);
                         }
-                        else if (tag === "img" /* ImageTag */ && attribute.indexOf("src") === 0 && (v === null || v.length === 0)) {
-                            node.setAttribute(attribute, "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" /* Transparent */);
-                            var size = "l" /* Large */;
+                        else if (tag === "img" /* Constant.ImageTag */ && attribute.indexOf("src") === 0 && (v === null || v.length === 0)) {
+                            node.setAttribute(attribute, "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" /* Asset.Transparent */);
+                            var size = "l" /* Constant.Large */;
                             if (data.width) {
-                                size = data.width <= 200 /* Medium */ ? "m" /* Medium */ : (data.width <= 75 /* Small */ ? "s" /* Small */ : size);
+                                size = data.width <= 200 /* Setting.Medium */ ? "m" /* Constant.Medium */ : (data.width <= 75 /* Setting.Small */ ? "s" /* Constant.Small */ : size);
                             }
-                            node.setAttribute("data-clarity-hide" /* Hide */, size);
+                            node.setAttribute("data-clarity-hide" /* Constant.Hide */, size);
                         }
                         else {
                             node.setAttribute(attribute, v);
@@ -1353,29 +1345,29 @@ var LayoutHelper = /** @class */ (function () {
                     }
                 }
             }
-            if (sameorigin === false && tag === "iframe" /* IFrameTag */ && typeof node.setAttribute == "function" /* Function */) {
-                node.setAttribute("data-clarity-unavailable" /* Unavailable */, "" /* Empty */);
+            if (sameorigin === false && tag === "iframe" /* Constant.IFrameTag */ && typeof node.setAttribute == "function" /* Constant.Function */) {
+                node.setAttribute("data-clarity-unavailable" /* Constant.Unavailable */, "" /* Layout.Constant.Empty */);
             }
             // Add an empty ALT tag on all IMG elements
-            if (tag === "img" /* ImageTag */ && !node.hasAttribute("alt" /* AltAttribute */)) {
-                node.setAttribute("alt" /* AltAttribute */, "" /* Empty */);
+            if (tag === "img" /* Constant.ImageTag */ && !node.hasAttribute("alt" /* Constant.AltAttribute */)) {
+                node.setAttribute("alt" /* Constant.AltAttribute */, "" /* Constant.Empty */);
             }
             // During visualization This will prevent the browser from auto filling form fields with saved details of user who is seeing the visualization
-            if (tag === "form" /* FormTag */ || tag === "input" /* InputTag */) {
-                if (node.hasAttribute("autocomplete" /* AutoComplete */)) {
-                    node.removeAttribute("autocomplete" /* AutoComplete */);
+            if (tag === "form" /* Constant.FormTag */ || tag === "input" /* Constant.InputTag */) {
+                if (node.hasAttribute("autocomplete" /* Constant.AutoComplete */)) {
+                    node.removeAttribute("autocomplete" /* Constant.AutoComplete */);
                 }
-                node.setAttribute("autocomplete" /* AutoComplete */, "new-password" /* NewPassword */);
+                node.setAttribute("autocomplete" /* Constant.AutoComplete */, "new-password" /* Constant.NewPassword */);
             }
         };
         this.getCustomStyle = function () {
             // tslint:disable-next-line: max-line-length
-            return "img" /* ImageTag */ + "[" + "data-clarity-hide" /* Hide */ + "] { background-color: #CCC; background-image: url(" + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANvSURBVHgB7Ve9VhpREJ5dU6BNVqt0wS6dpEuX9QmiTyA+gfgE4BOgZSrJE4hlKvEJxDKVa2caoaSSfB87F4Z7dtmFhFTMOfcMe52Z+935u6PIhjb0dxTIihRFUQ2M6z0/dXuI9ay8PwTJklQaEADw0JMgCI4USFSkMx6Pe2BdrFtgS6QEFQICjirYGYDUc0AMcXCCvw8XAVVwHQD7IasAokfCMGzB0NmCA1o44N7T+wpwlwouT+80z2NbOWAaMHqDn7FuJcorapRATkej0bOvyz2s7zs7O2L0GbYXrCrscjUqlUoAuZ6vH3hAIr3diW4xHC3wW+w/KZhLgDmXEgRzbR6udvbBD/DdITB3UewfWm+FRpnIHwyYLo1A+Aq/vzkDWFdSni4krTjm1RnDOxgM9nFOS//OM++0YmeAFMydQw4gDSgeu7LVyprE3489je3u7t5waQFMifrQ6ehn7PZfX18v6BkFOwcq9MDQQKxeseRu0PXARJprBHxED2t7sPSol6p5YHs467OkXo8cqBA/rmXmmVO/atzZzk4G0Kond+DJJJLmStc3Sm+rpxLVbYcEoRu8xbWNp9U1B1rqyzzIRNQj5tAe84ZVKVmGZ6BoK5Vh2JADT1hjLny3rBL27nS/7RtUXZdDmb1H5Ug1rDgjrFMKrGGb2CzPt7e3C95gb2+vqeU/1Mor/UZpg21og50CsfYzATllsLY+E6TE60OTPoUqOV8EQNKKmuTTgifHAmO4GOokyDFah2BTTAOTNFcmIQFI3qyVoxurp+dIL3ZF72bYdzL1zKcDLb2P1n4rqUfcg/nB3Cre3t6uQeY3ZBOri72q87B7ULHY035CdmTs85H9BVlR23yWumVf+6YJo0/MK7qcI8al9RCqq9R4w4ICq9JDYZEwk44ly2TWFtGT+VKnF2PwB6cis8sUzkw+vSsrqNXQ0eUmxo+S5gEPfvQBSTpNLjU1rjzCLiKEYAAWMQRFA5m2GzdJxIUhW5H6yutFguhRToapcb8WQGwL5MwtDnt5cvQOZJuq0yHfkjUQWwHbAn5+AqgvKHGW/IsPRquR+ZdgcQIdrStkYh5tN1ocZYCpSto2Dqezl6yRMga/yQSpXToyYFzOrReQAcUhzp8E+E4eWzD/lTgxuPFGR5Wlm+Y/J3qL/7fJhja0RvoDR4Tn4Lo/zi8AAAAASUVORK5CYII=" /* Hide */ + "); background-repeat:no-repeat; background-position: center; }" +
-                ("img" /* ImageTag */ + "[" + "data-clarity-hide" /* Hide */ + "=" + "s" /* Small */ + "] { background-size: 18px 18px; }") +
-                ("img" /* ImageTag */ + "[" + "data-clarity-hide" /* Hide */ + "=" + "m" /* Medium */ + "] { background-size: 24px 24px; }") +
-                ("img" /* ImageTag */ + "[" + "data-clarity-hide" /* Hide */ + "=" + "l" /* Large */ + "] { background-size: 36px 36px; }") +
-                ("iframe" /* IFrameTag */ + "[" + "data-clarity-unavailable" /* Unavailable */ + "] { background: url(" + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiCAYAAAAge+tMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAU6SURBVHgBzVg7TyNJEG6bh5AIjpOQeCXj7LL18pDIdpztRYuzy7CjCzG/ADu8CO8vwEQXrgkvws6QeNiEFzEk4GznIFnxvO/zVntrhx6/kLxb0mh6uqurvq6urqqehHklra+ve3d3dx8SiUT6+fk5ja4ZtGf4tjzoD9AXoBmiXUsmk+cnJyc18wpKmCFodXXVx8t/enraBCDPDEchniqeg9PT06oZkAYCTsCw2A6afjc+8IQCjGR3oBtxR/bHx8crR0dHgemD+gIugPfQ9OJ4BGwF72qj0ajrsTQI7rEFcDnTndoLeHh4KDebzdAMC5z+e39/T8B+Nz6AbcJtslAWdOMDfg8LONTuJf7vRVgDPEW40H6crLG4AVi58Pj4+Deav0WUFIjBfDt8NYD+HaBbpge1Wq1wbm5uH+DXjewe5IXQ85buxAMurJS9sbi46IG/jnlforKS0Q7f92dWVlYOAXLXgqMb4CmcnZ2l8E5YpVwIlGZ7basm8nIO50qXNzY29g6y8+hP0RCKPYexBne+K3Ay3N7eNoxyDViziicFwR+la8uOwULFQUBr8LB6XgOU/gDukcGittUY3bUBY25oGR0fX1tbSwPgoVFWxquoAFufv5DxgDvgAsZdu7m52WR7cnLyIC5SAMxnqw+6PRzqSzvmOg9coPX7ZAzoAN9vNWgSQKfVpzP2yq5dQGGZD61F+S5e6KnYNkD6eozWBwZav6m6K1hs2yBJB2hGiIwrQmDsjfp8MS6L2zMqa7INebvGTedKthcdtODN90Yi+I2kCO0owsq3e4U1EqOBq98FwNWnxgKCgd66a5znAe6RjYDfGsdJzmtfgqBPWFE+Jg2HSmFcNuS8QqSv5mLkwQewiumDBKcn87JJ5UuB8BDQJ8TxYnQyFnep2ukYMCXzvXUY57ddvIOGUeIUNw47UQWneEYsrwFVJiYmSjYqkAdx9bOMMR6n4pSTF7J+0ZHCRVKwfaA7SXUZ0g3xNJn+j4+Pm655L1L+8vLyrmRHS4FR6ZfJyUichyKGy5IZgvot2EA1GC8fDanOWgXgCwBPodqPqxCwjQKIljmUPiaSTJxVuoAuCui+CXhKqOGLne84xpgEQKqoSwMpwIIy/ZajUdBytspSVV6KblaT79AsaP0afM+yFtbP4bXT48LAWqYEtymbHrIgZy/SnYurAsV4O7ocRjvD21Nf9bgIYMbK9VgAq8f2rYYHbHp6OqjVau3DK+UCXcw1P9ethI2cO9YzqYFuQLIA3/TegTYxpbPqE+UdazM7o82suWn6AC8Rr2F10upjZgBiPX19fd3E83F+fr5mviakKQiad/FDWfHq6upftlFbM0N7AvwP1kHoY5Fmzwrr7wCyzx16vywsLBDwe9s31GU5ShKz30gOmLGWQZwv2fIBYfRZ2JnCf7Vz0V8xyvIsaV1nReeQ9oXGjIDoYlB6IZ811tx6PAo+Gvoswd0urFGS5icgLCSHV8e/GS5dJYemUQHXxZnnYugFXtzRzg1HApz1jC3iqFzqkxfUDTxcTc9pDhRVXkOICrSYb78RPQ5cfOivRqKNv7S0lMAi/lTRqziSw0mSqMADauufbLdfb45ir032rjsyi0ssnlJWfw/Ltlxxm4T+fyR2+7qfi+GckQEXMHWA9c3XRDRl5KcPXOE/JKrA8vEvwezsLH8a5YwqEWDtMqz9F9sjcxVL4jJM/RuRoVB+iZjob2qSgO7cpEYO3BJrfry2etU8XAx4XtyBfxhwki3aAGyT9b39HS3/KJsoGSr4rLuuh/8DlPszm7LNbUUAAAAASUVORK5CYII=" /* Unavailable */ + ") no-repeat center center, url('" + "data:image/svg+xml,<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\"><rect width=\"100%\" height=\"100%\" style=\"fill:rgb(204,204,204)\"/><line stroke-dasharray=\"5, 5\"  x1=\"0\" y1=\"100%\" x2=\"100%\" y2=\"0\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><line stroke-dasharray=\"5, 5\"  x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"100%\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><circle cx=\"50%\" cy=\"50%\" r=\"40\" fill=\"rgb(204,204,204)\"/></svg>" /* Cross */ + "'); }") +
-                ("*[" + "data-clarity-suspend" /* Suspend */ + "] { filter: grayscale(100%); }");
+            return "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "] { background-color: #CCC; background-image: url(").concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANvSURBVHgB7Ve9VhpREJ5dU6BNVqt0wS6dpEuX9QmiTyA+gfgE4BOgZSrJE4hlKvEJxDKVa2caoaSSfB87F4Z7dtmFhFTMOfcMe52Z+935u6PIhjb0dxTIihRFUQ2M6z0/dXuI9ay8PwTJklQaEADw0JMgCI4USFSkMx6Pe2BdrFtgS6QEFQICjirYGYDUc0AMcXCCvw8XAVVwHQD7IasAokfCMGzB0NmCA1o44N7T+wpwlwouT+80z2NbOWAaMHqDn7FuJcorapRATkej0bOvyz2s7zs7O2L0GbYXrCrscjUqlUoAuZ6vH3hAIr3diW4xHC3wW+w/KZhLgDmXEgRzbR6udvbBD/DdITB3UewfWm+FRpnIHwyYLo1A+Aq/vzkDWFdSni4krTjm1RnDOxgM9nFOS//OM++0YmeAFMydQw4gDSgeu7LVyprE3489je3u7t5waQFMifrQ6ehn7PZfX18v6BkFOwcq9MDQQKxeseRu0PXARJprBHxED2t7sPSol6p5YHs467OkXo8cqBA/rmXmmVO/atzZzk4G0Kond+DJJJLmStc3Sm+rpxLVbYcEoRu8xbWNp9U1B1rqyzzIRNQj5tAe84ZVKVmGZ6BoK5Vh2JADT1hjLny3rBL27nS/7RtUXZdDmb1H5Ug1rDgjrFMKrGGb2CzPt7e3C95gb2+vqeU/1Mor/UZpg21og50CsfYzATllsLY+E6TE60OTPoUqOV8EQNKKmuTTgifHAmO4GOokyDFah2BTTAOTNFcmIQFI3qyVoxurp+dIL3ZF72bYdzL1zKcDLb2P1n4rqUfcg/nB3Cre3t6uQeY3ZBOri72q87B7ULHY035CdmTs85H9BVlR23yWumVf+6YJo0/MK7qcI8al9RCqq9R4w4ICq9JDYZEwk44ly2TWFtGT+VKnF2PwB6cis8sUzkw+vSsrqNXQ0eUmxo+S5gEPfvQBSTpNLjU1rjzCLiKEYAAWMQRFA5m2GzdJxIUhW5H6yutFguhRToapcb8WQGwL5MwtDnt5cvQOZJuq0yHfkjUQWwHbAn5+AqgvKHGW/IsPRquR+ZdgcQIdrStkYh5tN1ocZYCpSto2Dqezl6yRMga/yQSpXToyYFzOrReQAcUhzp8E+E4eWzD/lTgxuPFGR5Wlm+Y/J3qL/7fJhja0RvoDR4Tn4Lo/zi8AAAAASUVORK5CYII=" /* Asset.Hide */, "); background-repeat:no-repeat; background-position: center; }") +
+                "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("s" /* Constant.Small */, "] { background-size: 18px 18px; }") +
+                "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("m" /* Constant.Medium */, "] { background-size: 24px 24px; }") +
+                "".concat("img" /* Constant.ImageTag */, "[").concat("data-clarity-hide" /* Constant.Hide */, "=").concat("l" /* Constant.Large */, "] { background-size: 36px 36px; }") +
+                "".concat("iframe" /* Constant.IFrameTag */, "[").concat("data-clarity-unavailable" /* Constant.Unavailable */, "] { background: url(").concat("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiCAYAAAAge+tMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAU6SURBVHgBzVg7TyNJEG6bh5AIjpOQeCXj7LL18pDIdpztRYuzy7CjCzG/ADu8CO8vwEQXrgkvws6QeNiEFzEk4GznIFnxvO/zVntrhx6/kLxb0mh6uqurvq6urqqehHklra+ve3d3dx8SiUT6+fk5ja4ZtGf4tjzoD9AXoBmiXUsmk+cnJyc18wpKmCFodXXVx8t/enraBCDPDEchniqeg9PT06oZkAYCTsCw2A6afjc+8IQCjGR3oBtxR/bHx8crR0dHgemD+gIugPfQ9OJ4BGwF72qj0ajrsTQI7rEFcDnTndoLeHh4KDebzdAMC5z+e39/T8B+Nz6AbcJtslAWdOMDfg8LONTuJf7vRVgDPEW40H6crLG4AVi58Pj4+Deav0WUFIjBfDt8NYD+HaBbpge1Wq1wbm5uH+DXjewe5IXQ85buxAMurJS9sbi46IG/jnlforKS0Q7f92dWVlYOAXLXgqMb4CmcnZ2l8E5YpVwIlGZ7basm8nIO50qXNzY29g6y8+hP0RCKPYexBne+K3Ay3N7eNoxyDViziicFwR+la8uOwULFQUBr8LB6XgOU/gDukcGittUY3bUBY25oGR0fX1tbSwPgoVFWxquoAFufv5DxgDvgAsZdu7m52WR7cnLyIC5SAMxnqw+6PRzqSzvmOg9coPX7ZAzoAN9vNWgSQKfVpzP2yq5dQGGZD61F+S5e6KnYNkD6eozWBwZav6m6K1hs2yBJB2hGiIwrQmDsjfp8MS6L2zMqa7INebvGTedKthcdtODN90Yi+I2kCO0owsq3e4U1EqOBq98FwNWnxgKCgd66a5znAe6RjYDfGsdJzmtfgqBPWFE+Jg2HSmFcNuS8QqSv5mLkwQewiumDBKcn87JJ5UuB8BDQJ8TxYnQyFnep2ukYMCXzvXUY57ddvIOGUeIUNw47UQWneEYsrwFVJiYmSjYqkAdx9bOMMR6n4pSTF7J+0ZHCRVKwfaA7SXUZ0g3xNJn+j4+Pm655L1L+8vLyrmRHS4FR6ZfJyUichyKGy5IZgvot2EA1GC8fDanOWgXgCwBPodqPqxCwjQKIljmUPiaSTJxVuoAuCui+CXhKqOGLne84xpgEQKqoSwMpwIIy/ZajUdBytspSVV6KblaT79AsaP0afM+yFtbP4bXT48LAWqYEtymbHrIgZy/SnYurAsV4O7ocRjvD21Nf9bgIYMbK9VgAq8f2rYYHbHp6OqjVau3DK+UCXcw1P9ethI2cO9YzqYFuQLIA3/TegTYxpbPqE+UdazM7o82suWn6AC8Rr2F10upjZgBiPX19fd3E83F+fr5mviakKQiad/FDWfHq6upftlFbM0N7AvwP1kHoY5Fmzwrr7wCyzx16vywsLBDwe9s31GU5ShKz30gOmLGWQZwv2fIBYfRZ2JnCf7Vz0V8xyvIsaV1nReeQ9oXGjIDoYlB6IZ811tx6PAo+Gvoswd0urFGS5icgLCSHV8e/GS5dJYemUQHXxZnnYugFXtzRzg1HApz1jC3iqFzqkxfUDTxcTc9pDhRVXkOICrSYb78RPQ5cfOivRqKNv7S0lMAi/lTRqziSw0mSqMADauufbLdfb45ir032rjsyi0ssnlJWfw/Ltlxxm4T+fyR2+7qfi+GckQEXMHWA9c3XRDRl5KcPXOE/JKrA8vEvwezsLH8a5YwqEWDtMqz9F9sjcxVL4jJM/RuRoVB+iZjob2qSgO7cpEYO3BJrfry2etU8XAx4XtyBfxhwki3aAGyT9b39HS3/KJsoGSr4rLuuh/8DlPszm7LNbUUAAAAASUVORK5CYII=" /* Asset.Unavailable */, ") no-repeat center center, url('").concat("data:image/svg+xml,<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\"><rect width=\"100%\" height=\"100%\" style=\"fill:rgb(204,204,204)\"/><line stroke-dasharray=\"5, 5\"  x1=\"0\" y1=\"100%\" x2=\"100%\" y2=\"0\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><line stroke-dasharray=\"5, 5\"  x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"100%\" style=\"stroke:rgb(119,119,119);stroke-width:1\"/><circle cx=\"50%\" cy=\"50%\" r=\"40\" fill=\"rgb(204,204,204)\"/></svg>" /* Asset.Cross */, "'); }") +
+                "*[".concat("data-clarity-suspend" /* Constant.Suspend */, "] { filter: grayscale(100%); }");
         };
         this.state = state;
     }
@@ -1411,7 +1403,7 @@ var Visualizer = /** @class */ (function () {
                 while (merged.events.length > 0 && _this.layout.exists(hash) === false) {
                     var entry = merged.events.shift();
                     switch (entry.event) {
-                        case 6 /* Mutation */:
+                        case 6 /* Data.Event.Mutation */:
                             var domEvent = entry;
                             _this.renderTime = domEvent.time;
                             if (time && _this.renderTime > time) {
@@ -1464,9 +1456,9 @@ var Visualizer = /** @class */ (function () {
                         for (var _c = 0, p_1 = p; _c < p_1.length; _c++) {
                             var entry = p_1[_c];
                             switch (key) {
-                                case "dom" /* Dom */:
+                                case "dom" /* Constant.Dom */:
                                     var dom = _this.enrich.selectors(entry);
-                                    if (entry.event === 5 /* Discover */) {
+                                    if (entry.event === 5 /* Data.Event.Discover */) {
                                         merged.dom = dom;
                                     }
                                     else {
@@ -1512,43 +1504,40 @@ var Visualizer = /** @class */ (function () {
                 var entry = events_1[_i];
                 time = entry.time;
                 switch (entry.event) {
-                    case 0 /* Metric */:
+                    case 0 /* Data.Event.Metric */:
                         _this.data.metric(entry);
                         break;
-                    case 7 /* Region */:
+                    case 7 /* Data.Event.Region */:
                         _this.data.region(entry);
                         break;
-                    case 37 /* Box */:
-                        _this.layout.box(entry);
-                        break;
-                    case 6 /* Mutation */:
+                    case 6 /* Data.Event.Mutation */:
                         _this.layout.markup(entry);
                         break;
-                    case 13 /* MouseDown */:
-                    case 14 /* MouseUp */:
-                    case 12 /* MouseMove */:
-                    case 15 /* MouseWheel */:
-                    case 9 /* Click */:
-                    case 16 /* DoubleClick */:
-                    case 17 /* TouchStart */:
-                    case 20 /* TouchCancel */:
-                    case 18 /* TouchEnd */:
-                    case 19 /* TouchMove */:
+                    case 13 /* Data.Event.MouseDown */:
+                    case 14 /* Data.Event.MouseUp */:
+                    case 12 /* Data.Event.MouseMove */:
+                    case 15 /* Data.Event.MouseWheel */:
+                    case 9 /* Data.Event.Click */:
+                    case 16 /* Data.Event.DoubleClick */:
+                    case 17 /* Data.Event.TouchStart */:
+                    case 20 /* Data.Event.TouchCancel */:
+                    case 18 /* Data.Event.TouchEnd */:
+                    case 19 /* Data.Event.TouchMove */:
                         _this.interaction.pointer(entry);
                         break;
-                    case 28 /* Visibility */:
+                    case 28 /* Data.Event.Visibility */:
                         _this.interaction.visibility(entry);
                         break;
-                    case 27 /* Input */:
+                    case 27 /* Data.Event.Input */:
                         _this.interaction.input(entry);
                         break;
-                    case 21 /* Selection */:
+                    case 21 /* Data.Event.Selection */:
                         _this.interaction.selection(entry);
                         break;
-                    case 11 /* Resize */:
+                    case 11 /* Data.Event.Resize */:
                         _this.interaction.resize(entry);
                         break;
-                    case 10 /* Scroll */:
+                    case 10 /* Data.Event.Scroll */:
                         _this.interaction.scroll(entry);
                         break;
                 }