@uxbertlabs/reportly 1.0.3 → 1.0.5

package/dist/reportly.js

@@ -23,6 +23,10 @@ var Reportly = (function () {
             };
         }
         loadFromStorage() {
+            // Check if we're in a browser environment
+            if (typeof window === 'undefined' || typeof localStorage === 'undefined') {
+                return;
+            }
             try {
                 const saved = localStorage.getItem('uxbert-config');
                 if (saved) {
@@ -35,6 +39,10 @@ var Reportly = (function () {
             }
         }
         save() {
+            // Check if we're in a browser environment
+            if (typeof window === 'undefined' || typeof localStorage === 'undefined') {
+                return;
+            }
             try {
                 localStorage.setItem('uxbert-config', JSON.stringify(this.config));
             }
@@ -339,24 +347,26 @@ var Reportly = (function () {
     }
 
     class Toolbar {
+        // private currentTool: AnnotationTool;
+        // private currentColor: string;
         constructor(callbacks) {
             this.callbacks = callbacks;
             this.toolbar = null;
             this.toggleButton = null;
             this.isToolbarExpanded = false;
-            this.currentTool = 'pen';
-            this.currentColor = '#ef4444';
+            // this.currentTool = "pen";
+            // this.currentColor = "#ef4444";
         }
         create() {
             // Create toggle button
-            this.toggleButton = document.createElement('button');
-            this.toggleButton.className = 'uxbert-toolbar-toggle';
-            this.toggleButton.innerHTML = '🛠️';
-            this.toggleButton.title = 'Toggle Annotation Tools';
+            this.toggleButton = document.createElement("button");
+            this.toggleButton.className = "uxbert-toolbar-toggle";
+            this.toggleButton.innerHTML = "🛠️";
+            this.toggleButton.title = "Toggle Annotation Tools";
             document.body.appendChild(this.toggleButton);
             // Create toolbar
-            this.toolbar = document.createElement('div');
-            this.toolbar.className = 'uxbert-toolbar';
+            this.toolbar = document.createElement("div");
+            this.toolbar.className = "uxbert-toolbar";
             this.toolbar.innerHTML = `
       <div class="uxbert-toolbar-header">
         <div class="uxbert-toolbar-title">Annotation Tools</div>
@@ -396,19 +406,19 @@ var Reportly = (function () {
             if (!this.toolbar || !this.toggleButton)
                 return;
             // Toggle button
-            this.toggleButton.addEventListener('click', () => {
+            this.toggleButton.addEventListener("click", () => {
                 this.toggleToolbar();
             });
             // Minimize button
-            const minimizeBtn = this.toolbar.querySelector('#uxbert-minimize-btn');
-            minimizeBtn.addEventListener('click', () => {
+            const minimizeBtn = this.toolbar.querySelector("#uxbert-minimize-btn");
+            minimizeBtn.addEventListener("click", () => {
                 this.toggleToolbar();
             });
             // Tool buttons
-            const toolBtns = this.toolbar.querySelectorAll('[data-tool]');
-            toolBtns.forEach(btn => {
-                btn.addEventListener('click', () => {
-                    const tool = btn.getAttribute('data-tool');
+            const toolBtns = this.toolbar.querySelectorAll("[data-tool]");
+            toolBtns.forEach((btn) => {
+                btn.addEventListener("click", () => {
+                    const tool = btn.getAttribute("data-tool");
                     this.setTool(tool);
                     if (this.callbacks.onToolChange) {
                         this.callbacks.onToolChange(tool);
@@ -416,10 +426,10 @@ var Reportly = (function () {
                 });
             });
             // Color buttons
-            const colorBtns = this.toolbar.querySelectorAll('[data-color]');
-            colorBtns.forEach(btn => {
-                btn.addEventListener('click', () => {
-                    const color = btn.getAttribute('data-color');
+            const colorBtns = this.toolbar.querySelectorAll("[data-color]");
+            colorBtns.forEach((btn) => {
+                btn.addEventListener("click", () => {
+                    const color = btn.getAttribute("data-color");
                     this.setColor(color);
                     if (this.callbacks.onColorChange) {
                         this.callbacks.onColorChange(color);
@@ -427,57 +437,57 @@ var Reportly = (function () {
                 });
             });
             // Action buttons
-            const undoBtn = this.toolbar.querySelector('#uxbert-undo-btn');
-            undoBtn.addEventListener('click', () => {
+            const undoBtn = this.toolbar.querySelector("#uxbert-undo-btn");
+            undoBtn.addEventListener("click", () => {
                 if (this.callbacks.onUndo) {
                     this.callbacks.onUndo();
                 }
             });
-            const clearBtn = this.toolbar.querySelector('#uxbert-clear-btn');
-            clearBtn.addEventListener('click', () => {
+            const clearBtn = this.toolbar.querySelector("#uxbert-clear-btn");
+            clearBtn.addEventListener("click", () => {
                 if (this.callbacks.onClear) {
                     this.callbacks.onClear();
                 }
             });
-            const doneBtn = this.toolbar.querySelector('#uxbert-done-btn');
-            doneBtn.addEventListener('click', () => {
+            const doneBtn = this.toolbar.querySelector("#uxbert-done-btn");
+            doneBtn.addEventListener("click", () => {
                 if (this.callbacks.onDone) {
                     this.callbacks.onDone();
                 }
             });
             // Exit button
-            const exitBtn = this.toolbar.querySelector('#uxbert-exit-btn');
-            exitBtn.addEventListener('click', () => {
+            const exitBtn = this.toolbar.querySelector("#uxbert-exit-btn");
+            exitBtn.addEventListener("click", () => {
                 if (this.callbacks.onExit) {
                     this.callbacks.onExit();
                 }
             });
         }
         setTool(tool) {
-            this.currentTool = tool;
+            //  this.currentTool = tool;
             if (!this.toolbar)
                 return;
-            const toolBtns = this.toolbar.querySelectorAll('[data-tool]');
-            toolBtns.forEach(btn => {
-                if (btn.getAttribute('data-tool') === tool) {
-                    btn.classList.add('active');
+            const toolBtns = this.toolbar.querySelectorAll("[data-tool]");
+            toolBtns.forEach((btn) => {
+                if (btn.getAttribute("data-tool") === tool) {
+                    btn.classList.add("active");
                 }
                 else {
-                    btn.classList.remove('active');
+                    btn.classList.remove("active");
                 }
             });
         }
         setColor(color) {
-            this.currentColor = color;
+            // this.currentColor = color;
             if (!this.toolbar)
                 return;
-            const colorBtns = this.toolbar.querySelectorAll('[data-color]');
-            colorBtns.forEach(btn => {
-                if (btn.getAttribute('data-color') === color) {
-                    btn.classList.add('active');
+            const colorBtns = this.toolbar.querySelectorAll("[data-color]");
+            colorBtns.forEach((btn) => {
+                if (btn.getAttribute("data-color") === color) {
+                    btn.classList.add("active");
                 }
                 else {
-                    btn.classList.remove('active');
+                    btn.classList.remove("active");
                 }
             });
         }
@@ -486,40 +496,40 @@ var Reportly = (function () {
                 return;
             this.isToolbarExpanded = !this.isToolbarExpanded;
             if (this.isToolbarExpanded) {
-                this.toolbar.classList.add('expanded');
-                this.toggleButton.classList.add('hidden');
+                this.toolbar.classList.add("expanded");
+                this.toggleButton.classList.add("hidden");
             }
             else {
-                this.toolbar.classList.remove('expanded');
-                this.toggleButton.classList.remove('hidden');
+                this.toolbar.classList.remove("expanded");
+                this.toggleButton.classList.remove("hidden");
             }
         }
         show() {
             if (this.toolbar && this.toggleButton) {
-                this.toolbar.classList.add('active');
-                this.toggleButton.classList.add('active');
+                this.toolbar.classList.add("active");
+                this.toggleButton.classList.add("active");
                 // Use setTimeout to ensure DOM is ready before checking width and applying classes
                 setTimeout(() => {
                     // Auto-expand on desktop, collapsed on mobile
                     if (window.innerWidth > 768) {
                         this.isToolbarExpanded = true;
-                        this.toolbar.classList.add('expanded');
-                        this.toggleButton.classList.add('hidden');
+                        this.toolbar.classList.add("expanded");
+                        this.toggleButton.classList.add("hidden");
                     }
                     else {
                         this.isToolbarExpanded = false;
-                        this.toolbar.classList.remove('expanded');
-                        this.toggleButton.classList.remove('hidden');
+                        this.toolbar.classList.remove("expanded");
+                        this.toggleButton.classList.remove("hidden");
                     }
                 }, 50);
             }
         }
         hide() {
             if (this.toolbar && this.toggleButton) {
-                this.toolbar.classList.remove('active');
-                this.toolbar.classList.remove('expanded');
-                this.toggleButton.classList.remove('active');
-                this.toggleButton.classList.remove('hidden');
+                this.toolbar.classList.remove("active");
+                this.toolbar.classList.remove("expanded");
+                this.toggleButton.classList.remove("active");
+                this.toggleButton.classList.remove("hidden");
                 this.isToolbarExpanded = false;
             }
         }
@@ -536,11 +546,11 @@ var Reportly = (function () {
     }
 
     /*!
-     * html2canvas 1.4.1 <https://html2canvas.hertzen.com>
-     * Copyright (c) 2022 Niklas von Hertzen <https://hertzen.com>
+     * html2canvas-pro 1.5.12 <https://yorickshan.github.io/html2canvas-pro/>
+     * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
      * Released under MIT License
      */
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -554,7 +564,7 @@ var Reportly = (function () {
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
-    /* global Reflect, Promise */
+    /* global Reflect, Promise, SuppressedError, Symbol */
 
     var extendStatics = function(d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -598,7 +608,7 @@ var Reportly = (function () {
         function verb(n) { return function (v) { return step([n, v]); }; }
         function step(op) {
             if (f) throw new TypeError("Generator is already executing.");
-            while (_) try {
+            while (g && (g = 0, op[0] && (_ = 0)), _) try {
                 if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
                 if (y = 0, t) op = [op[0] & 2, t.value];
                 switch (op[0]) {
@@ -627,8 +637,13 @@ var Reportly = (function () {
                 ar[i] = from[i];
             }
         }
-        return to.concat(ar || from);
-    }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+        var e = new Error(message);
+        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
 
     var Bounds = /** @class */ (function () {
         function Bounds(left, top, width, height) {
@@ -1523,38 +1538,38 @@ var Reportly = (function () {
         return sign * (int + frac * Math.pow(10, -fracd)) * Math.pow(10, expsign * exp);
     };
     var LEFT_PARENTHESIS_TOKEN = {
-        type: 2 /* LEFT_PARENTHESIS_TOKEN */
+        type: 2 /* TokenType.LEFT_PARENTHESIS_TOKEN */
     };
     var RIGHT_PARENTHESIS_TOKEN = {
-        type: 3 /* RIGHT_PARENTHESIS_TOKEN */
-    };
-    var COMMA_TOKEN = { type: 4 /* COMMA_TOKEN */ };
-    var SUFFIX_MATCH_TOKEN = { type: 13 /* SUFFIX_MATCH_TOKEN */ };
-    var PREFIX_MATCH_TOKEN = { type: 8 /* PREFIX_MATCH_TOKEN */ };
-    var COLUMN_TOKEN = { type: 21 /* COLUMN_TOKEN */ };
-    var DASH_MATCH_TOKEN = { type: 9 /* DASH_MATCH_TOKEN */ };
-    var INCLUDE_MATCH_TOKEN = { type: 10 /* INCLUDE_MATCH_TOKEN */ };
+        type: 3 /* TokenType.RIGHT_PARENTHESIS_TOKEN */
+    };
+    var COMMA_TOKEN = { type: 4 /* TokenType.COMMA_TOKEN */ };
+    var SUFFIX_MATCH_TOKEN = { type: 13 /* TokenType.SUFFIX_MATCH_TOKEN */ };
+    var PREFIX_MATCH_TOKEN = { type: 8 /* TokenType.PREFIX_MATCH_TOKEN */ };
+    var COLUMN_TOKEN = { type: 21 /* TokenType.COLUMN_TOKEN */ };
+    var DASH_MATCH_TOKEN = { type: 9 /* TokenType.DASH_MATCH_TOKEN */ };
+    var INCLUDE_MATCH_TOKEN = { type: 10 /* TokenType.INCLUDE_MATCH_TOKEN */ };
     var LEFT_CURLY_BRACKET_TOKEN = {
-        type: 11 /* LEFT_CURLY_BRACKET_TOKEN */
+        type: 11 /* TokenType.LEFT_CURLY_BRACKET_TOKEN */
     };
     var RIGHT_CURLY_BRACKET_TOKEN = {
-        type: 12 /* RIGHT_CURLY_BRACKET_TOKEN */
-    };
-    var SUBSTRING_MATCH_TOKEN = { type: 14 /* SUBSTRING_MATCH_TOKEN */ };
-    var BAD_URL_TOKEN = { type: 23 /* BAD_URL_TOKEN */ };
-    var BAD_STRING_TOKEN = { type: 1 /* BAD_STRING_TOKEN */ };
-    var CDO_TOKEN = { type: 25 /* CDO_TOKEN */ };
-    var CDC_TOKEN = { type: 24 /* CDC_TOKEN */ };
-    var COLON_TOKEN = { type: 26 /* COLON_TOKEN */ };
-    var SEMICOLON_TOKEN = { type: 27 /* SEMICOLON_TOKEN */ };
+        type: 12 /* TokenType.RIGHT_CURLY_BRACKET_TOKEN */
+    };
+    var SUBSTRING_MATCH_TOKEN = { type: 14 /* TokenType.SUBSTRING_MATCH_TOKEN */ };
+    var BAD_URL_TOKEN = { type: 23 /* TokenType.BAD_URL_TOKEN */ };
+    var BAD_STRING_TOKEN = { type: 1 /* TokenType.BAD_STRING_TOKEN */ };
+    var CDO_TOKEN = { type: 25 /* TokenType.CDO_TOKEN */ };
+    var CDC_TOKEN = { type: 24 /* TokenType.CDC_TOKEN */ };
+    var COLON_TOKEN = { type: 26 /* TokenType.COLON_TOKEN */ };
+    var SEMICOLON_TOKEN = { type: 27 /* TokenType.SEMICOLON_TOKEN */ };
     var LEFT_SQUARE_BRACKET_TOKEN = {
-        type: 28 /* LEFT_SQUARE_BRACKET_TOKEN */
+        type: 28 /* TokenType.LEFT_SQUARE_BRACKET_TOKEN */
     };
     var RIGHT_SQUARE_BRACKET_TOKEN = {
-        type: 29 /* RIGHT_SQUARE_BRACKET_TOKEN */
+        type: 29 /* TokenType.RIGHT_SQUARE_BRACKET_TOKEN */
     };
-    var WHITESPACE_TOKEN = { type: 31 /* WHITESPACE_TOKEN */ };
-    var EOF_TOKEN = { type: 32 /* EOF_TOKEN */ };
+    var WHITESPACE_TOKEN = { type: 31 /* TokenType.WHITESPACE_TOKEN */ };
+    var EOF_TOKEN = { type: 32 /* TokenType.EOF_TOKEN */ };
     var Tokenizer = /** @class */ (function () {
         function Tokenizer() {
             this._value = [];
@@ -1583,7 +1598,7 @@ var Reportly = (function () {
                     if (isNameCodePoint(c1) || isValidEscape(c2, c3)) {
                         var flags = isIdentifierStart(c1, c2, c3) ? FLAG_ID : FLAG_UNRESTRICTED;
                         var value = this.consumeName();
-                        return { type: 5 /* HASH_TOKEN */, value: value, flags: flags };
+                        return { type: 5 /* TokenType.HASH_TOKEN */, value: value, flags: flags };
                     }
                     break;
                 case DOLLAR_SIGN:
@@ -1672,7 +1687,7 @@ var Reportly = (function () {
                     var a3 = this.peekCodePoint(2);
                     if (isIdentifierStart(a1, a2, a3)) {
                         var value = this.consumeName();
-                        return { type: 7 /* AT_KEYWORD_TOKEN */, value: value };
+                        return { type: 7 /* TokenType.AT_KEYWORD_TOKEN */, value: value };
                     }
                     break;
                 case LEFT_SQUARE_BRACKET:
@@ -1736,7 +1751,7 @@ var Reportly = (function () {
                 this.reconsumeCodePoint(codePoint);
                 return this.consumeIdentLikeToken();
             }
-            return { type: 6 /* DELIM_TOKEN */, value: fromCodePoint$1(codePoint) };
+            return { type: 6 /* TokenType.DELIM_TOKEN */, value: fromCodePoint$1(codePoint) };
         };
         Tokenizer.prototype.consumeCodePoint = function () {
             var value = this._value.shift();
@@ -1767,7 +1782,7 @@ var Reportly = (function () {
             if (questionMarks) {
                 var start_1 = parseInt(fromCodePoint$1.apply(void 0, digits.map(function (digit) { return (digit === QUESTION_MARK ? ZERO : digit); })), 16);
                 var end = parseInt(fromCodePoint$1.apply(void 0, digits.map(function (digit) { return (digit === QUESTION_MARK ? F : digit); })), 16);
-                return { type: 30 /* UNICODE_RANGE_TOKEN */, start: start_1, end: end };
+                return { type: 30 /* TokenType.UNICODE_RANGE_TOKEN */, start: start_1, end: end };
             }
             var start = parseInt(fromCodePoint$1.apply(void 0, digits), 16);
             if (this.peekCodePoint(0) === HYPHEN_MINUS && isHex(this.peekCodePoint(1))) {
@@ -1779,10 +1794,10 @@ var Reportly = (function () {
                     codePoint = this.consumeCodePoint();
                 }
                 var end = parseInt(fromCodePoint$1.apply(void 0, endDigits), 16);
-                return { type: 30 /* UNICODE_RANGE_TOKEN */, start: start, end: end };
+                return { type: 30 /* TokenType.UNICODE_RANGE_TOKEN */, start: start, end: end };
             }
             else {
-                return { type: 30 /* UNICODE_RANGE_TOKEN */, start: start, end: start };
+                return { type: 30 /* TokenType.UNICODE_RANGE_TOKEN */, start: start, end: start };
             }
         };
         Tokenizer.prototype.consumeIdentLikeToken = function () {
@@ -1793,24 +1808,24 @@ var Reportly = (function () {
             }
             else if (this.peekCodePoint(0) === LEFT_PARENTHESIS) {
                 this.consumeCodePoint();
-                return { type: 19 /* FUNCTION_TOKEN */, value: value };
+                return { type: 19 /* TokenType.FUNCTION_TOKEN */, value: value };
             }
-            return { type: 20 /* IDENT_TOKEN */, value: value };
+            return { type: 20 /* TokenType.IDENT_TOKEN */, value: value };
         };
         Tokenizer.prototype.consumeUrlToken = function () {
             var value = [];
             this.consumeWhiteSpace();
             if (this.peekCodePoint(0) === EOF) {
-                return { type: 22 /* URL_TOKEN */, value: '' };
+                return { type: 22 /* TokenType.URL_TOKEN */, value: '' };
             }
             var next = this.peekCodePoint(0);
             if (next === APOSTROPHE || next === QUOTATION_MARK) {
                 var stringToken = this.consumeStringToken(this.consumeCodePoint());
-                if (stringToken.type === 0 /* STRING_TOKEN */) {
+                if (stringToken.type === 0 /* TokenType.STRING_TOKEN */) {
                     this.consumeWhiteSpace();
                     if (this.peekCodePoint(0) === EOF || this.peekCodePoint(0) === RIGHT_PARENTHESIS) {
                         this.consumeCodePoint();
-                        return { type: 22 /* URL_TOKEN */, value: stringToken.value };
+                        return { type: 22 /* TokenType.URL_TOKEN */, value: stringToken.value };
                     }
                 }
                 this.consumeBadUrlRemnants();
@@ -1819,13 +1834,13 @@ var Reportly = (function () {
             while (true) {
                 var codePoint = this.consumeCodePoint();
                 if (codePoint === EOF || codePoint === RIGHT_PARENTHESIS) {
-                    return { type: 22 /* URL_TOKEN */, value: fromCodePoint$1.apply(void 0, value) };
+                    return { type: 22 /* TokenType.URL_TOKEN */, value: fromCodePoint$1.apply(void 0, value) };
                 }
                 else if (isWhiteSpace(codePoint)) {
                     this.consumeWhiteSpace();
                     if (this.peekCodePoint(0) === EOF || this.peekCodePoint(0) === RIGHT_PARENTHESIS) {
                         this.consumeCodePoint();
-                        return { type: 22 /* URL_TOKEN */, value: fromCodePoint$1.apply(void 0, value) };
+                        return { type: 22 /* TokenType.URL_TOKEN */, value: fromCodePoint$1.apply(void 0, value) };
                     }
                     this.consumeBadUrlRemnants();
                     return BAD_URL_TOKEN;
@@ -1885,7 +1900,7 @@ var Reportly = (function () {
                 var codePoint = this._value[i];
                 if (codePoint === EOF || codePoint === undefined || codePoint === endingCodePoint) {
                     value += this.consumeStringSlice(i);
-                    return { type: 0 /* STRING_TOKEN */, value: value };
+                    return { type: 0 /* TokenType.STRING_TOKEN */, value: value };
                 }
                 if (codePoint === LINE_FEED) {
                     this._value.splice(0, i);
@@ -1947,13 +1962,13 @@ var Reportly = (function () {
             var c3 = this.peekCodePoint(2);
             if (isIdentifierStart(c1, c2, c3)) {
                 var unit = this.consumeName();
-                return { type: 15 /* DIMENSION_TOKEN */, number: number, flags: flags, unit: unit };
+                return { type: 15 /* TokenType.DIMENSION_TOKEN */, number: number, flags: flags, unit: unit };
             }
             if (c1 === PERCENTAGE_SIGN) {
                 this.consumeCodePoint();
-                return { type: 16 /* PERCENTAGE_TOKEN */, number: number, flags: flags };
+                return { type: 16 /* TokenType.PERCENTAGE_TOKEN */, number: number, flags: flags };
             }
-            return { type: 17 /* NUMBER_TOKEN */, number: number, flags: flags };
+            return { type: 17 /* TokenType.NUMBER_TOKEN */, number: number, flags: flags };
         };
         Tokenizer.prototype.consumeEscapedCodePoint = function () {
             var codePoint = this.consumeCodePoint();
@@ -2012,18 +2027,18 @@ var Reportly = (function () {
         };
         Parser.prototype.parseComponentValue = function () {
             var token = this.consumeToken();
-            while (token.type === 31 /* WHITESPACE_TOKEN */) {
+            while (token.type === 31 /* TokenType.WHITESPACE_TOKEN */) {
                 token = this.consumeToken();
             }
-            if (token.type === 32 /* EOF_TOKEN */) {
+            if (token.type === 32 /* TokenType.EOF_TOKEN */) {
                 throw new SyntaxError("Error parsing CSS component value, unexpected EOF");
             }
             this.reconsumeToken(token);
             var value = this.consumeComponentValue();
             do {
                 token = this.consumeToken();
-            } while (token.type === 31 /* WHITESPACE_TOKEN */);
-            if (token.type === 32 /* EOF_TOKEN */) {
+            } while (token.type === 31 /* TokenType.WHITESPACE_TOKEN */);
+            if (token.type === 32 /* TokenType.EOF_TOKEN */) {
                 return value;
             }
             throw new SyntaxError("Error parsing CSS component value, multiple values found when expecting only one");
@@ -2032,7 +2047,7 @@ var Reportly = (function () {
             var values = [];
             while (true) {
                 var value = this.consumeComponentValue();
-                if (value.type === 32 /* EOF_TOKEN */) {
+                if (value.type === 32 /* TokenType.EOF_TOKEN */) {
                     return values;
                 }
                 values.push(value);
@@ -2042,11 +2057,11 @@ var Reportly = (function () {
         Parser.prototype.consumeComponentValue = function () {
             var token = this.consumeToken();
             switch (token.type) {
-                case 11 /* LEFT_CURLY_BRACKET_TOKEN */:
-                case 28 /* LEFT_SQUARE_BRACKET_TOKEN */:
-                case 2 /* LEFT_PARENTHESIS_TOKEN */:
+                case 11 /* TokenType.LEFT_CURLY_BRACKET_TOKEN */:
+                case 28 /* TokenType.LEFT_SQUARE_BRACKET_TOKEN */:
+                case 2 /* TokenType.LEFT_PARENTHESIS_TOKEN */:
                     return this.consumeSimpleBlock(token.type);
-                case 19 /* FUNCTION_TOKEN */:
+                case 19 /* TokenType.FUNCTION_TOKEN */:
                     return this.consumeFunction(token);
             }
             return token;
@@ -2055,7 +2070,7 @@ var Reportly = (function () {
             var block = { type: type, values: [] };
             var token = this.consumeToken();
             while (true) {
-                if (token.type === 32 /* EOF_TOKEN */ || isEndingTokenFor(token, type)) {
+                if (token.type === 32 /* TokenType.EOF_TOKEN */ || isEndingTokenFor(token, type)) {
                     return block;
                 }
                 this.reconsumeToken(token);
@@ -2067,11 +2082,11 @@ var Reportly = (function () {
             var cssFunction = {
                 name: functionToken.value,
                 values: [],
-                type: 18 /* FUNCTION */
+                type: 18 /* TokenType.FUNCTION */
             };
             while (true) {
                 var token = this.consumeToken();
-                if (token.type === 32 /* EOF_TOKEN */ || token.type === 3 /* RIGHT_PARENTHESIS_TOKEN */) {
+                if (token.type === 32 /* TokenType.EOF_TOKEN */ || token.type === 3 /* TokenType.RIGHT_PARENTHESIS_TOKEN */) {
                     return cssFunction;
                 }
                 this.reconsumeToken(token);
@@ -2087,22 +2102,22 @@ var Reportly = (function () {
         };
         return Parser;
     }());
-    var isDimensionToken = function (token) { return token.type === 15 /* DIMENSION_TOKEN */; };
-    var isNumberToken = function (token) { return token.type === 17 /* NUMBER_TOKEN */; };
-    var isIdentToken = function (token) { return token.type === 20 /* IDENT_TOKEN */; };
-    var isStringToken = function (token) { return token.type === 0 /* STRING_TOKEN */; };
+    var isDimensionToken = function (token) { return token.type === 15 /* TokenType.DIMENSION_TOKEN */; };
+    var isNumberToken = function (token) { return token.type === 17 /* TokenType.NUMBER_TOKEN */; };
+    var isIdentToken = function (token) { return token.type === 20 /* TokenType.IDENT_TOKEN */; };
+    var isStringToken = function (token) { return token.type === 0 /* TokenType.STRING_TOKEN */; };
     var isIdentWithValue = function (token, value) {
         return isIdentToken(token) && token.value === value;
     };
-    var nonWhiteSpace = function (token) { return token.type !== 31 /* WHITESPACE_TOKEN */; };
+    var nonWhiteSpace = function (token) { return token.type !== 31 /* TokenType.WHITESPACE_TOKEN */; };
     var nonFunctionArgSeparator = function (token) {
-        return token.type !== 31 /* WHITESPACE_TOKEN */ && token.type !== 4 /* COMMA_TOKEN */;
+        return token.type !== 31 /* TokenType.WHITESPACE_TOKEN */ && token.type !== 4 /* TokenType.COMMA_TOKEN */;
     };
     var parseFunctionArgs = function (tokens) {
         var args = [];
         var arg = [];
         tokens.forEach(function (token) {
-            if (token.type === 4 /* COMMA_TOKEN */) {
+            if (token.type === 4 /* TokenType.COMMA_TOKEN */) {
                 if (arg.length === 0) {
                     throw new Error("Error parsing function args, zero tokens for arg");
                 }
@@ -2110,7 +2125,7 @@ var Reportly = (function () {
                 arg = [];
                 return;
             }
-            if (token.type !== 31 /* WHITESPACE_TOKEN */) {
+            if (token.type !== 31 /* TokenType.WHITESPACE_TOKEN */) {
                 arg.push(token);
             }
         });
@@ -2120,37 +2135,37 @@ var Reportly = (function () {
         return args;
     };
     var isEndingTokenFor = function (token, type) {
-        if (type === 11 /* LEFT_CURLY_BRACKET_TOKEN */ && token.type === 12 /* RIGHT_CURLY_BRACKET_TOKEN */) {
+        if (type === 11 /* TokenType.LEFT_CURLY_BRACKET_TOKEN */ && token.type === 12 /* TokenType.RIGHT_CURLY_BRACKET_TOKEN */) {
             return true;
         }
-        if (type === 28 /* LEFT_SQUARE_BRACKET_TOKEN */ && token.type === 29 /* RIGHT_SQUARE_BRACKET_TOKEN */) {
+        if (type === 28 /* TokenType.LEFT_SQUARE_BRACKET_TOKEN */ && token.type === 29 /* TokenType.RIGHT_SQUARE_BRACKET_TOKEN */) {
             return true;
         }
-        return type === 2 /* LEFT_PARENTHESIS_TOKEN */ && token.type === 3 /* RIGHT_PARENTHESIS_TOKEN */;
+        return type === 2 /* TokenType.LEFT_PARENTHESIS_TOKEN */ && token.type === 3 /* TokenType.RIGHT_PARENTHESIS_TOKEN */;
     };
 
     var isLength = function (token) {
-        return token.type === 17 /* NUMBER_TOKEN */ || token.type === 15 /* DIMENSION_TOKEN */;
+        return token.type === 17 /* TokenType.NUMBER_TOKEN */ || token.type === 15 /* TokenType.DIMENSION_TOKEN */;
     };
 
     var isLengthPercentage = function (token) {
-        return token.type === 16 /* PERCENTAGE_TOKEN */ || isLength(token);
+        return token.type === 16 /* TokenType.PERCENTAGE_TOKEN */ || isLength(token);
     };
     var parseLengthPercentageTuple = function (tokens) {
         return tokens.length > 1 ? [tokens[0], tokens[1]] : [tokens[0]];
     };
     var ZERO_LENGTH = {
-        type: 17 /* NUMBER_TOKEN */,
+        type: 17 /* TokenType.NUMBER_TOKEN */,
         number: 0,
         flags: FLAG_INTEGER
     };
     var FIFTY_PERCENT = {
-        type: 16 /* PERCENTAGE_TOKEN */,
+        type: 16 /* TokenType.PERCENTAGE_TOKEN */,
         number: 50,
         flags: FLAG_INTEGER
     };
     var HUNDRED_PERCENT = {
-        type: 16 /* PERCENTAGE_TOKEN */,
+        type: 16 /* TokenType.PERCENTAGE_TOKEN */,
         number: 100,
         flags: FLAG_INTEGER
     };
@@ -2159,7 +2174,7 @@ var Reportly = (function () {
         return [getAbsoluteValue(x, width), getAbsoluteValue(typeof y !== 'undefined' ? y : x, height)];
     };
     var getAbsoluteValue = function (token, parent) {
-        if (token.type === 16 /* PERCENTAGE_TOKEN */) {
+        if (token.type === 16 /* TokenType.PERCENTAGE_TOKEN */) {
             return (token.number / 100) * parent;
         }
         if (isDimensionToken(token)) {
@@ -2182,7 +2197,7 @@ var Reportly = (function () {
     var angle = {
         name: 'angle',
         parse: function (_context, value) {
-            if (value.type === 15 /* DIMENSION_TOKEN */) {
+            if (value.type === 15 /* TokenType.DIMENSION_TOKEN */) {
                 switch (value.unit) {
                     case DEG:
                         return (Math.PI * value.number) / 180;
@@ -2198,7 +2213,7 @@ var Reportly = (function () {
         }
     };
     var isAngle = function (value) {
-        if (value.type === 15 /* DIMENSION_TOKEN */) {
+        if (value.type === 15 /* TokenType.DIMENSION_TOKEN */) {
             if (value.unit === DEG || value.unit === GRAD || value.unit === RAD || value.unit === TURN) {
                 return true;
             }
@@ -2248,87 +2263,154 @@ var Reportly = (function () {
     };
     var deg = function (deg) { return (Math.PI * deg) / 180; };
 
-    var color$1 = {
-        name: 'color',
-        parse: function (context, value) {
-            if (value.type === 18 /* FUNCTION */) {
-                var colorFunction = SUPPORTED_COLOR_FUNCTIONS[value.name];
-                if (typeof colorFunction === 'undefined') {
-                    throw new Error("Attempting to parse an unsupported color function \"" + value.name + "\"");
-                }
-                return colorFunction(context, value.values);
-            }
-            if (value.type === 5 /* HASH_TOKEN */) {
-                if (value.value.length === 3) {
-                    var r = value.value.substring(0, 1);
-                    var g = value.value.substring(1, 2);
-                    var b = value.value.substring(2, 3);
-                    return pack(parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16), 1);
-                }
-                if (value.value.length === 4) {
-                    var r = value.value.substring(0, 1);
-                    var g = value.value.substring(1, 2);
-                    var b = value.value.substring(2, 3);
-                    var a = value.value.substring(3, 4);
-                    return pack(parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16), parseInt(a + a, 16) / 255);
-                }
-                if (value.value.length === 6) {
-                    var r = value.value.substring(0, 2);
-                    var g = value.value.substring(2, 4);
-                    var b = value.value.substring(4, 6);
-                    return pack(parseInt(r, 16), parseInt(g, 16), parseInt(b, 16), 1);
-                }
-                if (value.value.length === 8) {
-                    var r = value.value.substring(0, 2);
-                    var g = value.value.substring(2, 4);
-                    var b = value.value.substring(4, 6);
-                    var a = value.value.substring(6, 8);
-                    return pack(parseInt(r, 16), parseInt(g, 16), parseInt(b, 16), parseInt(a, 16) / 255);
-                }
-            }
-            if (value.type === 20 /* IDENT_TOKEN */) {
-                var namedColor = COLORS[value.value.toUpperCase()];
-                if (typeof namedColor !== 'undefined') {
-                    return namedColor;
-                }
-            }
-            return COLORS.TRANSPARENT;
-        }
-    };
     var isTransparent = function (color) { return (0xff & color) === 0; };
     var asString = function (color) {
         var alpha = 0xff & color;
         var blue = 0xff & (color >> 8);
         var green = 0xff & (color >> 16);
         var red = 0xff & (color >> 24);
-        return alpha < 255 ? "rgba(" + red + "," + green + "," + blue + "," + alpha / 255 + ")" : "rgb(" + red + "," + green + "," + blue + ")";
+        return alpha < 255 ? "rgba(".concat(red, ",").concat(green, ",").concat(blue, ",").concat(alpha / 255, ")") : "rgb(".concat(red, ",").concat(green, ",").concat(blue, ")");
     };
     var pack = function (r, g, b, a) {
         return ((r << 24) | (g << 16) | (b << 8) | (Math.round(a * 255) << 0)) >>> 0;
     };
     var getTokenColorValue = function (token, i) {
-        if (token.type === 17 /* NUMBER_TOKEN */) {
+        if (token.type === 17 /* TokenType.NUMBER_TOKEN */) {
             return token.number;
         }
-        if (token.type === 16 /* PERCENTAGE_TOKEN */) {
+        if (token.type === 16 /* TokenType.PERCENTAGE_TOKEN */) {
             var max = i === 3 ? 1 : 255;
             return i === 3 ? (token.number / 100) * max : Math.round((token.number / 100) * max);
         }
         return 0;
     };
-    var rgb = function (_context, args) {
-        var tokens = args.filter(nonFunctionArgSeparator);
-        if (tokens.length === 3) {
-            var _a = tokens.map(getTokenColorValue), r = _a[0], g = _a[1], b = _a[2];
-            return pack(r, g, b, 1);
-        }
-        if (tokens.length === 4) {
-            var _b = tokens.map(getTokenColorValue), r = _b[0], g = _b[1], b = _b[2], a = _b[3];
-            return pack(r, g, b, a);
-        }
-        return 0;
+    var isRelativeTransform = function (tokens) {
+        return (tokens[0].type === 20 /* TokenType.IDENT_TOKEN */ ? tokens[0].value : 'unknown') === 'from';
+    };
+    var clamp = function (value, min, max) {
+        return Math.min(Math.max(value, min), max);
     };
-    function hue2rgb(t1, t2, hue) {
+    var multiplyMatrices = function (A, B) {
+        return [
+            A[0] * B[0] + A[1] * B[1] + A[2] * B[2],
+            A[3] * B[0] + A[4] * B[1] + A[5] * B[2],
+            A[6] * B[0] + A[7] * B[1] + A[8] * B[2]
+        ];
+    };
+    var packSrgb = function (args) {
+        return pack(clamp(Math.round(args[0] * 255), 0, 255), clamp(Math.round(args[1] * 255), 0, 255), clamp(Math.round(args[2] * 255), 0, 255), clamp(args[3], 0, 1));
+    };
+    var packSrgbLinear = function (_a) {
+        var r = _a[0], g = _a[1], b = _a[2], a = _a[3];
+        var rgb = srgbLinear2rgb([r, g, b]);
+        return pack(clamp(Math.round(rgb[0] * 255), 0, 255), clamp(Math.round(rgb[1] * 255), 0, 255), clamp(Math.round(rgb[2] * 255), 0, 255), a);
+    };
+    var packXYZ = function (args) {
+        var srgb_linear = xyz2rgbLinear([args[0], args[1], args[2]]);
+        return packSrgbLinear([srgb_linear[0], srgb_linear[1], srgb_linear[2], args[3]]);
+    };
+    var packLab = function (_context, args) {
+        if (isRelativeTransform(args.filter(nonFunctionArgSeparator))) {
+            throw new Error('Relative color not supported for lab()');
+        }
+        var _a = extractLabComponents(args), l = _a[0], a = _a[1], b = _a[2], alpha = _a[3], rgb = srgbLinear2rgb(xyz2rgbLinear(lab2xyz([l, a, b])));
+        return pack(clamp(Math.round(rgb[0] * 255), 0, 255), clamp(Math.round(rgb[1] * 255), 0, 255), clamp(Math.round(rgb[2] * 255), 0, 255), alpha);
+    };
+    var packOkLab = function (_context, args) {
+        if (isRelativeTransform(args.filter(nonFunctionArgSeparator))) {
+            throw new Error('Relative color not supported for oklab()');
+        }
+        var _a = extractLabComponents(args), l = _a[0], a = _a[1], b = _a[2], alpha = _a[3], rgb = srgbLinear2rgb(xyz2rgbLinear(oklab2xyz([l, a, b])));
+        return pack(clamp(Math.round(rgb[0] * 255), 0, 255), clamp(Math.round(rgb[1] * 255), 0, 255), clamp(Math.round(rgb[2] * 255), 0, 255), alpha);
+    };
+    var packOkLch = function (_context, args) {
+        if (isRelativeTransform(args.filter(nonFunctionArgSeparator))) {
+            throw new Error('Relative color not supported for oklch()');
+        }
+        var _a = extractOkLchComponents(args), l = _a[0], c = _a[1], h = _a[2], alpha = _a[3], rgb = srgbLinear2rgb(xyz2rgbLinear(oklab2xyz(lch2lab([l, c, h]))));
+        return pack(clamp(Math.round(rgb[0] * 255), 0, 255), clamp(Math.round(rgb[1] * 255), 0, 255), clamp(Math.round(rgb[2] * 255), 0, 255), alpha);
+    };
+    var packLch = function (_context, args) {
+        if (isRelativeTransform(args.filter(nonFunctionArgSeparator))) {
+            throw new Error('Relative color not supported for lch()');
+        }
+        var _a = extractLchComponents(args), l = _a[0], c = _a[1], h = _a[2], a = _a[3], rgb = srgbLinear2rgb(xyz2rgbLinear(lab2xyz(lch2lab([l, c, h]))));
+        return pack(clamp(Math.round(rgb[0] * 255), 0, 255), clamp(Math.round(rgb[1] * 255), 0, 255), clamp(Math.round(rgb[2] * 255), 0, 255), a);
+    };
+    var extractHslComponents = function (context, args) {
+        var tokens = args.filter(nonFunctionArgSeparator), hue = tokens[0], saturation = tokens[1], lightness = tokens[2], alpha = tokens[3], h = (hue.type === 17 /* TokenType.NUMBER_TOKEN */ ? deg(hue.number) : angle.parse(context, hue)) / (Math.PI * 2), s = isLengthPercentage(saturation) ? saturation.number / 100 : 0, l = isLengthPercentage(lightness) ? lightness.number / 100 : 0, a = typeof alpha !== 'undefined' && isLengthPercentage(alpha) ? getAbsoluteValue(alpha, 1) : 1;
+        return [h, s, l, a];
+    };
+    var packHSL = function (context, args) {
+        if (isRelativeTransform(args)) {
+            throw new Error('Relative color not supported for hsl()');
+        }
+        var _a = extractHslComponents(context, args), h = _a[0], s = _a[1], l = _a[2], a = _a[3], rgb = hsl2rgb([h, s, l]);
+        return pack(rgb[0] * 255, rgb[1] * 255, rgb[2] * 255, s === 0 ? 1 : a);
+    };
+    var extractLchComponents = function (args) {
+        var tokens = args.filter(nonFunctionArgSeparator), l = isLengthPercentage(tokens[0]) ? tokens[0].number : 0, c = isLengthPercentage(tokens[1]) ? tokens[1].number : 0, h = isNumberToken(tokens[2]) || isDimensionToken(tokens[2]) ? tokens[2].number : 0, a = typeof tokens[4] !== 'undefined' && isLengthPercentage(tokens[4]) ? getAbsoluteValue(tokens[4], 1) : 1;
+        return [l, c, h, a];
+    };
+    var extractLabComponents = function (args) {
+        var tokens = args.filter(nonFunctionArgSeparator), 
+        // eslint-disable-next-line prettier/prettier
+        l = tokens[0].type === 16 /* TokenType.PERCENTAGE_TOKEN */
+            ? tokens[0].number / 100
+            : isNumberToken(tokens[0])
+                ? tokens[0].number
+                : 0, 
+        // eslint-disable-next-line prettier/prettier
+        a = tokens[1].type === 16 /* TokenType.PERCENTAGE_TOKEN */
+            ? tokens[1].number / 100
+            : isNumberToken(tokens[1])
+                ? tokens[1].number
+                : 0, b = isNumberToken(tokens[2]) || isDimensionToken(tokens[2]) ? tokens[2].number : 0, alpha = typeof tokens[4] !== 'undefined' && isLengthPercentage(tokens[4]) ? getAbsoluteValue(tokens[4], 1) : 1;
+        return [l, a, b, alpha];
+    };
+    var extractOkLchComponents = function (args) {
+        var tokens = args.filter(nonFunctionArgSeparator), 
+        // eslint-disable-next-line prettier/prettier
+        l = tokens[0].type === 16 /* TokenType.PERCENTAGE_TOKEN */
+            ? tokens[0].number / 100
+            : isNumberToken(tokens[0])
+                ? tokens[0].number
+                : 0, 
+        // eslint-disable-next-line prettier/prettier
+        c = tokens[1].type === 16 /* TokenType.PERCENTAGE_TOKEN */
+            ? tokens[1].number / 100
+            : isNumberToken(tokens[1])
+                ? tokens[1].number
+                : 0, h = isNumberToken(tokens[2]) || isDimensionToken(tokens[2]) ? tokens[2].number : 0, a = typeof tokens[4] !== 'undefined' && isLengthPercentage(tokens[4]) ? getAbsoluteValue(tokens[4], 1) : 1;
+        return [l, c, h, a];
+    };
+    /**
+     * Convert D65 to D50
+     *
+     * @param xyz
+     */
+    var d65toD50 = function (xyz) {
+        return multiplyMatrices(
+        // eslint-disable-next-line prettier/prettier
+        [
+            1.0479297925449969, 0.022946870601609652, -0.05019226628920524, 0.02962780877005599, 0.9904344267538799,
+            -0.017073799063418826, -0.009243040646204504, 0.015055191490298152, 0.7518742814281371
+        ], xyz);
+    };
+    /**
+     * Convert D50 to D65
+     *
+     * @param xyz
+     */
+    var d50toD65 = function (xyz) {
+        return multiplyMatrices(
+        // eslint-disable-next-line prettier/prettier
+        [
+            0.955473421488075, -0.02309845494876471, 0.06325924320057072, -0.0283697093338637, 1.0099953980813041,
+            0.021041441191917323, 0.012314014864481998, -0.020507649298898964, 1.330365926242124
+        ], xyz);
+    };
+    var hue2rgb = function (t1, t2, hue) {
         if (hue < 0) {
             hue += 1;
         }
@@ -2347,29 +2429,783 @@ var Reportly = (function () {
         else {
             return t1;
         }
-    }
-    var hsl = function (context, args) {
-        var tokens = args.filter(nonFunctionArgSeparator);
-        var hue = tokens[0], saturation = tokens[1], lightness = tokens[2], alpha = tokens[3];
-        var h = (hue.type === 17 /* NUMBER_TOKEN */ ? deg(hue.number) : angle.parse(context, hue)) / (Math.PI * 2);
-        var s = isLengthPercentage(saturation) ? saturation.number / 100 : 0;
-        var l = isLengthPercentage(lightness) ? lightness.number / 100 : 0;
-        var a = typeof alpha !== 'undefined' && isLengthPercentage(alpha) ? getAbsoluteValue(alpha, 1) : 1;
+    };
+    var hsl2rgb = function (_a) {
+        var h = _a[0], s = _a[1], l = _a[2];
         if (s === 0) {
-            return pack(l * 255, l * 255, l * 255, 1);
+            return [l * 255, l * 255, l * 255];
+        }
+        var t2 = l <= 0.5 ? l * (s + 1) : l + s - l * s, t1 = l * 2 - t2, r = hue2rgb(t1, t2, h + 1 / 3), g = hue2rgb(t1, t2, h), b = hue2rgb(t1, t2, h - 1 / 3);
+        return [r, g, b];
+    };
+    /**
+     * Convert lch to OKLab
+     *
+     * @param l
+     * @param c
+     * @param h
+     */
+    var lch2lab = function (_a) {
+        var l = _a[0], c = _a[1], h = _a[2];
+        if (c < 0) {
+            c = 0;
+        }
+        if (isNaN(h)) {
+            h = 0;
+        }
+        return [l, c * Math.cos((h * Math.PI) / 180), c * Math.sin((h * Math.PI) / 180)];
+    };
+    /**
+     * Convert OKLab to XYZ relative to D65
+     *
+     * @param lab
+     */
+    var oklab2xyz = function (lab) {
+        var LMSg = multiplyMatrices(
+        // eslint-disable-next-line prettier/prettier
+        [
+            1, 0.3963377773761749, 0.2158037573099136, 1, -0.1055613458156586, -0.0638541728258133, 1,
+            -0.0894841775298119, -1.2914855480194092
+        ], lab), LMS = LMSg.map(function (val) { return Math.pow(val, 3); });
+        return multiplyMatrices(
+        // eslint-disable-next-line prettier/prettier
+        [
+            1.2268798758459243, -0.5578149944602171, 0.2813910456659647, -0.0405757452148008, 1.112286803280317,
+            -0.0717110580655164, -0.0763729366746601, -0.4214933324022432, 1.5869240198367816
+        ], LMS);
+    };
+    /**
+     * Convert Lab to D50-adapted XYZ
+     *
+     * @param lab
+     */
+    var lab2xyz = function (lab) {
+        var fy = (lab[0] + 16) / 116, fx = lab[1] / 500 + fy, fz = fy - lab[2] / 200, k = 24389 / 27, e = 24 / 116, xyz = [
+            ((fx > e ? Math.pow(fx, 3) : (116 * fx - 16) / k) * 0.3457) / 0.3585,
+            lab[0] > 8 ? Math.pow(fy, 3) : lab[0] / k,
+            ((fz > e ? Math.pow(fz, 3) : (116 * fz - 16) / k) * (1.0 - 0.3457 - 0.3585)) / 0.3585
+        ];
+        return d50toD65([xyz[0], xyz[1], xyz[2]]);
+    };
+    /**
+     * Convert RGB to XYZ
+     *
+     * @param _context
+     * @param args
+     */
+    var rgbToXyz = function (_context, args) {
+        var tokens = args.filter(nonFunctionArgSeparator);
+        if (tokens.length === 3) {
+            var _a = tokens.map(getTokenColorValue), r = _a[0], g = _a[1], b = _a[2], rgb_linear = rgb2rgbLinear([r / 255, g / 255, b / 255]), _b = rgbLinear2xyz([rgb_linear[0], rgb_linear[1], rgb_linear[2]]), x = _b[0], y = _b[1], z = _b[2];
+            return [x, y, z, 1];
+        }
+        if (tokens.length === 4) {
+            var _c = tokens.map(getTokenColorValue), r = _c[0], g = _c[1], b = _c[2], a = _c[3], rgb_linear = rgb2rgbLinear([r / 255, g / 255, b / 255]), _d = rgbLinear2xyz([rgb_linear[0], rgb_linear[1], rgb_linear[2]]), x = _d[0], y = _d[1], z = _d[2];
+            return [x, y, z, a];
+        }
+        return [0, 0, 0, 1];
+    };
+    /**
+     * HSL to XYZ
+     *
+     * @param context
+     * @param args
+     */
+    var hslToXyz = function (context, args) {
+        var _a = extractHslComponents(context, args), h = _a[0], s = _a[1], l = _a[2], a = _a[3], rgb_linear = rgb2rgbLinear(hsl2rgb([h, s, l])), _b = rgbLinear2xyz([rgb_linear[0], rgb_linear[1], rgb_linear[2]]), x = _b[0], y = _b[1], z = _b[2];
+        return [x, y, z, a];
+    };
+    /**
+     * LAB to XYZ
+     *
+     * @param _context
+     * @param args
+     */
+    var labToXyz = function (_context, args) {
+        var _a = extractLabComponents(args), l = _a[0], a = _a[1], b = _a[2], alpha = _a[3], _b = lab2xyz([l, a, b]), x = _b[0], y = _b[1], z = _b[2];
+        return [x, y, z, alpha];
+    };
+    /**
+     * LCH to XYZ
+     *
+     * @param _context
+     * @param args
+     */
+    var lchToXyz = function (_context, args) {
+        var _a = extractLchComponents(args), l = _a[0], c = _a[1], h = _a[2], alpha = _a[3], _b = lab2xyz(lch2lab([l, c, h])), x = _b[0], y = _b[1], z = _b[2];
+        return [x, y, z, alpha];
+    };
+    /**
+     * OKLch to XYZ
+     *
+     * @param _context
+     * @param args
+     */
+    var oklchToXyz = function (_context, args) {
+        var _a = extractOkLchComponents(args), l = _a[0], c = _a[1], h = _a[2], alpha = _a[3], _b = oklab2xyz(lch2lab([l, c, h])), x = _b[0], y = _b[1], z = _b[2];
+        return [x, y, z, alpha];
+    };
+    /**
+     * OKLab to XYZ
+     *
+     * @param _context
+     * @param args
+     */
+    var oklabToXyz = function (_context, args) {
+        var _a = extractLabComponents(args), l = _a[0], c = _a[1], h = _a[2], alpha = _a[3], _b = oklab2xyz([l, c, h]), x = _b[0], y = _b[1], z = _b[2];
+        return [x, y, z, alpha];
+    };
+    /**
+     * XYZ-50 to XYZ
+     *
+     * @param args
+     */
+    var xyz50ToXYZ = function (args) {
+        return d50toD65([args[0], args[1], args[2]]);
+    };
+    /**
+     * Does nothing, required for SUPPORTED_COLOR_SPACES_FROM_XYZ in the _color() function
+     *
+     * @param args
+     */
+    var xyzFromXYZ = function (args) {
+        return args;
+    };
+    /**
+     * XYZ-65 to XYZ-50
+     *
+     * @param args
+     */
+    var xyz50FromXYZ = function (args) {
+        var _a = d65toD50([args[0], args[2], args[3]]), x = _a[0], y = _a[1], z = _a[2];
+        return [x, y, z, args[3]];
+    };
+    /**
+     * Convert XYZ to SRGB and Pack
+     *
+     * @param args
+     */
+    var convertXyz = function (args) {
+        return packXYZ([args[0], args[1], args[2], args[3]]);
+    };
+    /**
+     * Convert XYZ-50 to SRGB and Pack
+     *
+     * @param args
+     */
+    var convertXyz50 = function (args) {
+        var xyz = xyz50ToXYZ([args[0], args[1], args[2]]);
+        return packXYZ([xyz[0], xyz[1], xyz[2], args[3]]);
+    };
+
+    /**
+     * SRGB related functions
+     */
+    /**
+     * Convert XYZ to linear-light sRGB
+     *
+     * @param xyz
+     */
+    var xyz2rgbLinear = function (xyz) {
+        return multiplyMatrices(
+        // eslint-disable-next-line prettier/prettier
+        [
+            3.2409699419045226, -1.537383177570094, -0.4986107602930034, -0.9692436362808796, 1.8759675015077202,
+            0.04155505740717559, 0.05563007969699366, -0.20397695888897652, 1.0569715142428786
+        ], xyz);
+    };
+    /**
+     * Convert XYZ to linear-light sRGB
+     *
+     * @param xyz
+     */
+    var rgbLinear2xyz = function (xyz) {
+        return multiplyMatrices(
+        // eslint-disable-next-line prettier/prettier
+        [
+            0.41239079926595934, 0.357584339383878, 0.1804807884018343, 0.21263900587151027, 0.715168678767756,
+            0.07219231536073371, 0.01933081871559182, 0.11919477979462598, 0.9505321522496607
+        ], xyz);
+    };
+    /**
+     * Convert sRGB to RGB
+     *
+     * @param rgb
+     */
+    var srgbLinear2rgb = function (rgb) {
+        return rgb.map(function (c) {
+            var sign = c < 0 ? -1 : 1, abs = Math.abs(c);
+            // eslint-disable-next-line prettier/prettier
+            return abs > 0.0031308 ? sign * (1.055 * Math.pow(abs, (1 / 2.4)) - 0.055) : 12.92 * c;
+        });
+    };
+    /**
+     * Convert RGB to sRGB
+     *
+     * @param rgb
+     */
+    var rgb2rgbLinear = function (rgb) {
+        return rgb.map(function (c) {
+            var sign = c < 0 ? -1 : 1, abs = Math.abs(c);
+            // eslint-disable-next-line prettier/prettier
+            return abs <= 0.04045 ? c / 12.92 : sign * Math.pow(((abs + 0.055) / 1.055), 2.4);
+        });
+    };
+    /**
+     * XYZ to SRGB
+     *
+     * @param args
+     */
+    var srgbFromXYZ = function (args) {
+        var _a = srgbLinear2rgb(xyz2rgbLinear([args[0], args[1], args[2]])), r = _a[0], g = _a[1], b = _a[2];
+        return [r, g, b, args[3]];
+    };
+    /**
+     * XYZ to SRGB-Linear
+     * @param args
+     */
+    var srgbLinearFromXYZ = function (args) {
+        var _a = xyz2rgbLinear([args[0], args[1], args[2]]), r = _a[0], g = _a[1], b = _a[2];
+        return [
+            clamp(Math.round(r * 255), 0, 255),
+            clamp(Math.round(g * 255), 0, 255),
+            clamp(Math.round(b * 255), 0, 255),
+            args[3]
+        ];
+    };
+
+    /**
+     * Display-P3 related functions
+     */
+    /**
+     * Convert P3 Linear to xyz
+     *
+     * @param p3l
+     */
+    var p3LinearToXyz = function (p3l) {
+        return multiplyMatrices(
+        // eslint-disable-next-line prettier/prettier
+        [
+            0.4865709486482162, 0.26566769316909306, 0.1982172852343625, 0.2289745640697488, 0.6917385218365064,
+            0.079286914093745, 0.0, 0.04511338185890264, 1.043944368900976
+        ], p3l);
+    };
+    /**
+     * Convert XYZ to P3 Linear
+     *
+     * @param xyz
+     */
+    var xyzToP3Linear = function (xyz) {
+        return multiplyMatrices(
+        // eslint-disable-next-line prettier/prettier
+        [
+            2.493496911941425, -0.9313836179191239, -0.40271078445071684, -0.8294889695615747, 1.7626640603183463,
+            0.023624685841943577, 0.03584583024378447, -0.07617238926804182, 0.9568845240076872
+        ], xyz);
+    };
+    /**
+     * Convert P3 to P3 linear
+     *
+     * @param p3
+     */
+    var p32p3Linear = function (p3) {
+        return p3.map(function (c) {
+            var sign = c < 0 ? -1 : 1, abs = c * sign;
+            if (abs <= 0.04045) {
+                return c / 12.92;
+            }
+            // eslint-disable-next-line prettier/prettier
+            return sign * Math.pow(((c + 0.055) / 1.055), 2.4) || 0;
+        });
+    };
+    /**
+     * Convert P3 Linear to P3
+     *
+     * @param p3l
+     */
+    var p3Linear2p3 = function (p3l) {
+        return srgbLinear2rgb(p3l);
+    };
+    /**
+     * Convert P3 to XYZ
+     *
+     * @param args
+     */
+    var p3ToXYZ = function (args) {
+        var p3_linear = p32p3Linear([args[0], args[1], args[2]]);
+        return p3LinearToXyz([p3_linear[0], p3_linear[1], p3_linear[2]]);
+    };
+    /**
+     * Convert XYZ to P3
+     *
+     * @param args
+     */
+    var p3FromXYZ = function (args) {
+        var _a = p3Linear2p3(xyzToP3Linear([args[0], args[1], args[2]])), r = _a[0], g = _a[1], b = _a[2];
+        return [r, g, b, args[3]];
+    };
+    /**
+     * Convert P3 to SRGB and Pack
+     *
+     * @param args
+     */
+    var convertP3 = function (args) {
+        var xyz = p3ToXYZ([args[0], args[1], args[2]]);
+        return packXYZ([xyz[0], xyz[1], xyz[2], args[3]]);
+    };
+
+    /**
+     * A98-RGB related functions
+     */
+    /**
+     * Convert XYZ to a98 linear
+     *
+     * @param xyz
+     */
+    var xyz2a98Linear = function (xyz) {
+        return multiplyMatrices(
+        // eslint-disable-next-line prettier/prettier
+        [
+            2.0415879038107465, -0.5650069742788596, -0.34473135077832956, -0.9692436362808795, 1.8759675015077202,
+            0.04155505740717557, 0.013444280632031142, -0.11836239223101838, 1.0151749943912054
+        ], xyz);
+    };
+    /**
+     * Convert XYZ to a98 linear
+     *
+     * @param a98
+     */
+    var a98Linear2xyz = function (a98) {
+        return multiplyMatrices(
+        // eslint-disable-next-line prettier/prettier
+        [
+            0.5766690429101305, 0.1855582379065463, 0.1882286462349947, 0.29734497525053605, 0.6273635662554661,
+            0.0752914584939978, 0.02703136138641234, 0.07068885253582723, 0.9913375368376388
+        ], a98);
+    };
+    /**
+     * Convert A98 RGB to rgb linear
+     *
+     * @param rgb
+     */
+    var a982a98Linear = function (rgb) {
+        var mapped = rgb.map(function (c) {
+            var sign = c < 0 ? -1 : 1, abs = Math.abs(c);
+            return sign * Math.pow(abs, (563 / 256));
+        });
+        return [mapped[0], mapped[1], mapped[2]];
+    };
+    /**
+     * Convert A98 RGB Linear to A98
+     *
+     * @param rgb
+     */
+    var a98Linear2a98 = function (rgb) {
+        var mapped = rgb.map(function (c) {
+            var sign = c < 0 ? -1 : 1, abs = Math.abs(c);
+            return sign * Math.pow(abs, (256 / 563));
+        });
+        return [mapped[0], mapped[1], mapped[2]];
+    };
+    /**
+     * Convert XYZ to A98
+     *
+     * @param args
+     */
+    var a98FromXYZ = function (args) {
+        var _a = a98Linear2a98(xyz2a98Linear([args[0], args[1], args[2]])), r = _a[0], g = _a[1], b = _a[2];
+        return [r, g, b, args[3]];
+    };
+    /**
+     * Convert A98 to XYZ and Pack
+     *
+     * @param args
+     */
+    var convertA98rgb = function (args) {
+        var srgb_linear = xyz2rgbLinear(a98Linear2xyz(a982a98Linear([args[0], args[1], args[2]])));
+        return packSrgbLinear([srgb_linear[0], srgb_linear[1], srgb_linear[2], args[3]]);
+    };
+
+    /**
+     * Pro Photo related functions
+     */
+    /**
+     * Convert linear-light display-p3 to XYZ D65
+     *
+     * @param p3
+     */
+    var proPhotoLinearToXyz = function (p3) {
+        return multiplyMatrices(
+        // eslint-disable-next-line prettier/prettier
+        [
+            0.7977666449006423, 0.13518129740053308, 0.0313477341283922, 0.2880748288194013, 0.711835234241873,
+            0.00008993693872564, 0.0, 0.0, 0.8251046025104602
+        ], p3);
+    };
+    /**
+     * Convert XYZ D65 to linear-light display-p3
+     *
+     * @param xyz
+     */
+    var xyzToProPhotoLinear = function (xyz) {
+        return multiplyMatrices(
+        // eslint-disable-next-line prettier/prettier
+        [
+            1.3457868816471583, -0.25557208737979464, -0.05110186497554526, -0.5446307051249019, 1.5082477428451468,
+            0.02052744743642139, 0.0, 0.0, 1.2119675456389452
+        ], xyz);
+    };
+    /**
+     * Convert Pro-Photo to Pro-Photo Linear
+     *
+     * @param p3
+     */
+    var proPhotoToProPhotoLinear = function (p3) {
+        return p3.map(function (c) {
+            return c < 16 / 512 ? c / 16 : Math.pow(c, 1.8);
+        });
+    };
+    /**
+     * Convert Pro-Photo Linear to Pro-Photo
+     *
+     * @param p3
+     */
+    var proPhotoLinearToProPhoto = function (p3) {
+        return p3.map(function (c) {
+            return c > 1 / 512 ? Math.pow(c, (1 / 1.8)) : c * 16;
+        });
+    };
+    /**
+     * Convert Pro-Photo to XYZ
+     *
+     * @param args
+     */
+    var proPhotoToXYZ = function (args) {
+        var prophoto_linear = proPhotoToProPhotoLinear([args[0], args[1], args[2]]);
+        return d50toD65(proPhotoLinearToXyz([prophoto_linear[0], prophoto_linear[1], prophoto_linear[2]]));
+    };
+    /**
+     * Convert XYZ to Pro-Photo
+     *
+     * @param args
+     */
+    var proPhotoFromXYZ = function (args) {
+        var _a = proPhotoLinearToProPhoto(xyzToProPhotoLinear(d65toD50([args[0], args[1], args[2]]))), r = _a[0], g = _a[1], b = _a[2];
+        return [r, g, b, args[3]];
+    };
+    /**
+     * Convert Pro-Photo to XYZ and Pack
+     *
+     * @param args
+     */
+    var convertProPhoto = function (args) {
+        var xyz = proPhotoToXYZ([args[0], args[1], args[2]]);
+        return packXYZ([xyz[0], xyz[1], xyz[2], args[3]]);
+    };
+
+    /**
+     * REC2020 related functions
+     */
+    var _a = 1.09929682680944;
+    var _b = 0.018053968510807;
+    /**
+     * Convert rec2020 to rec2020 linear
+     *
+     * @param rgb
+     */
+    var rec20202rec2020Linear = function (rgb) {
+        return rgb.map(function (c) {
+            return c < _b * 4.5 ? c / 4.5 : Math.pow((c + _a - 1) / _a, 1 / 0.45);
+        });
+    };
+    /**
+     * Convert rec2020 linear to rec2020
+     *
+     * @param rgb
+     */
+    var rec2020Linear2rec2020 = function (rgb) {
+        return rgb.map(function (c) {
+            return c >= _b ? _a * Math.pow(c, 0.45) - (_a - 1) : 4.5 * c;
+        });
+    };
+    /**
+     * Convert rec2020 linear to XYZ D65
+     *
+     * @param rec
+     */
+    var rec2020LinearToXyz = function (rec) {
+        return multiplyMatrices(
+        // eslint-disable-next-line prettier/prettier
+        [
+            0.6369580483012914, 0.14461690358620832, 0.1688809751641721, 0.2627002120112671, 0.6779980715188708,
+            0.05930171646986196, 0.0, 0.028072693049087428, 1.060985057710791
+        ], rec);
+    };
+    /**
+     * Convert XYZ D65 to rec2020 linear
+     *
+     * @param xyz
+     */
+    var xyzToRec2020Linear = function (xyz) {
+        return multiplyMatrices(
+        // eslint-disable-next-line prettier/prettier
+        [
+            1.716651187971268, -0.355670783776392, -0.25336628137366, -0.666684351832489, 1.616481236634939,
+            0.0157685458139111, 0.017639857445311, -0.042770613257809, 0.942103121235474
+        ], xyz);
+    };
+    /**
+     * Convert Rec2020 to XYZ
+     *
+     * @param args
+     */
+    var rec2020ToXYZ = function (args) {
+        var rec2020_linear = rec20202rec2020Linear([args[0], args[1], args[2]]);
+        return rec2020LinearToXyz([rec2020_linear[0], rec2020_linear[1], rec2020_linear[2]]);
+    };
+    /**
+     * Convert XYZ to Rec2020
+     *
+     * @param args
+     */
+    var rec2020FromXYZ = function (args) {
+        var _c = rec2020Linear2rec2020(xyzToRec2020Linear([args[0], args[1], args[2]])), r = _c[0], g = _c[1], b = _c[2];
+        return [r, g, b, args[3]];
+    };
+    /**
+     * Convert Rec2020 to SRGB and Pack
+     *
+     * @param args
+     */
+    var convertRec2020 = function (args) {
+        var xyz = rec2020ToXYZ([args[0], args[1], args[2]]);
+        return packXYZ([xyz[0], xyz[1], xyz[2], args[3]]);
+    };
+
+    var color$1 = {
+        name: 'color',
+        parse: function (context, value) {
+            if (value.type === 18 /* TokenType.FUNCTION */) {
+                var colorFunction = SUPPORTED_COLOR_FUNCTIONS[value.name];
+                if (typeof colorFunction === 'undefined') {
+                    throw new Error("Attempting to parse an unsupported color function \"".concat(value.name, "\""));
+                }
+                return colorFunction(context, value.values);
+            }
+            if (value.type === 5 /* TokenType.HASH_TOKEN */) {
+                var _a = hash2rgb(value), r = _a[0], g = _a[1], b = _a[2], a = _a[3];
+                return pack(r, g, b, a);
+            }
+            if (value.type === 20 /* TokenType.IDENT_TOKEN */) {
+                var namedColor = COLORS[value.value.toUpperCase()];
+                if (typeof namedColor !== 'undefined') {
+                    return namedColor;
+                }
+            }
+            return COLORS.TRANSPARENT;
+        }
+    };
+    var hash2rgb = function (token) {
+        if (token.value.length === 3) {
+            var r = token.value.substring(0, 1);
+            var g = token.value.substring(1, 2);
+            var b = token.value.substring(2, 3);
+            return [parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16), 1];
+        }
+        if (token.value.length === 4) {
+            var r = token.value.substring(0, 1);
+            var g = token.value.substring(1, 2);
+            var b = token.value.substring(2, 3);
+            var a = token.value.substring(3, 4);
+            return [parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16), parseInt(a + a, 16) / 255];
+        }
+        if (token.value.length === 6) {
+            var r = token.value.substring(0, 2);
+            var g = token.value.substring(2, 4);
+            var b = token.value.substring(4, 6);
+            return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16), 1];
+        }
+        if (token.value.length === 8) {
+            var r = token.value.substring(0, 2);
+            var g = token.value.substring(2, 4);
+            var b = token.value.substring(4, 6);
+            var a = token.value.substring(6, 8);
+            return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16), parseInt(a, 16) / 255];
+        }
+        return [0, 0, 0, 1];
+    };
+    var rgb = function (_context, args) {
+        var tokens = args.filter(nonFunctionArgSeparator);
+        if (isRelativeTransform(tokens)) {
+            throw new Error('Relative color not supported for rgb()');
+        }
+        if (tokens.length === 3) {
+            var _a = tokens.map(getTokenColorValue), r = _a[0], g = _a[1], b = _a[2];
+            return pack(r, g, b, 1);
         }
-        var t2 = l <= 0.5 ? l * (s + 1) : l + s - l * s;
-        var t1 = l * 2 - t2;
-        var r = hue2rgb(t1, t2, h + 1 / 3);
-        var g = hue2rgb(t1, t2, h);
-        var b = hue2rgb(t1, t2, h - 1 / 3);
-        return pack(r * 255, g * 255, b * 255, a);
+        if (tokens.length === 4) {
+            var _b = tokens.map(getTokenColorValue), r = _b[0], g = _b[1], b = _b[2], a = _b[3];
+            return pack(r, g, b, a);
+        }
+        return 0;
+    };
+    /**
+     * Handle the CSS color() function
+     *
+     * @param context
+     * @param args
+     */
+    var _color = function (context, args) {
+        var tokens = args.filter(nonFunctionArgSeparator), token_1_value = tokens[0].type === 20 /* TokenType.IDENT_TOKEN */ ? tokens[0].value : 'unknown', is_absolute = !isRelativeTransform(tokens);
+        if (is_absolute) {
+            var color_space = token_1_value, colorSpaceFunction = SUPPORTED_COLOR_SPACES_ABSOLUTE[color_space];
+            if (typeof colorSpaceFunction === 'undefined') {
+                throw new Error("Attempting to parse an unsupported color space \"".concat(color_space, "\" for color() function"));
+            }
+            var c1 = isNumberToken(tokens[1]) ? tokens[1].number : 0, c2 = isNumberToken(tokens[2]) ? tokens[2].number : 0, c3 = isNumberToken(tokens[3]) ? tokens[3].number : 0, a = tokens.length > 4 &&
+                tokens[4].type === 6 /* TokenType.DELIM_TOKEN */ &&
+                tokens[4].value === '/' &&
+                isNumberToken(tokens[5])
+                ? tokens[5].number
+                : 1;
+            return colorSpaceFunction([c1, c2, c3, a]);
+        }
+        else {
+            var extractComponent = function (color, token) {
+                if (isNumberToken(token)) {
+                    return token.number;
+                }
+                var posFromVal = function (value) {
+                    return value === 'r' || value === 'x' ? 0 : value === 'g' || value === 'y' ? 1 : 2;
+                };
+                if (isIdentToken(token)) {
+                    var position = posFromVal(token.value);
+                    return color[position];
+                }
+                var parseCalc = function (args) {
+                    var parts = args.filter(nonFunctionArgSeparator);
+                    var expression = '(';
+                    for (var _i = 0, parts_1 = parts; _i < parts_1.length; _i++) {
+                        var part = parts_1[_i];
+                        expression +=
+                            part.type === 18 /* TokenType.FUNCTION */ && part.name === 'calc'
+                                ? parseCalc(part.values)
+                                : isNumberToken(part)
+                                    ? part.number
+                                    : part.type === 6 /* TokenType.DELIM_TOKEN */ || isIdentToken(part)
+                                        ? part.value
+                                        : '';
+                    }
+                    expression += ')';
+                    return expression;
+                };
+                if (token.type === 18 /* TokenType.FUNCTION */) {
+                    var args_1 = token.values.filter(nonFunctionArgSeparator);
+                    if (token.name === 'calc') {
+                        var expression = parseCalc(args_1)
+                            .replace(/r|x/, color[0].toString())
+                            .replace(/g|y/, color[1].toString())
+                            .replace(/b|z/, color[2].toString());
+                        return new Function('return ' + expression)();
+                    }
+                }
+                return null;
+            };
+            var from_colorspace = tokens[1].type === 18 /* TokenType.FUNCTION */
+                ? tokens[1].name
+                : isIdentToken(tokens[1]) || tokens[1].type === 5 /* TokenType.HASH_TOKEN */
+                    ? 'rgb'
+                    : 'unknown', to_colorspace = isIdentToken(tokens[2]) ? tokens[2].value : 'unknown';
+            var from = tokens[1].type === 18 /* TokenType.FUNCTION */ ? tokens[1].values : isIdentToken(tokens[1]) ? [tokens[1]] : [];
+            if (isIdentToken(tokens[1])) {
+                var named_color = COLORS[tokens[1].value.toUpperCase()];
+                if (typeof named_color === 'undefined') {
+                    throw new Error("Attempting to use unknown color in relative color 'from'");
+                }
+                else {
+                    var _c = parseColor(context, tokens[1].value), alpha = 0xff & _c, blue = 0xff & (_c >> 8), green = 0xff & (_c >> 16), red = 0xff & (_c >> 24);
+                    from = [
+                        { type: 17 /* TokenType.NUMBER_TOKEN */, number: red, flags: 1 },
+                        { type: 17 /* TokenType.NUMBER_TOKEN */, number: green, flags: 1 },
+                        { type: 17 /* TokenType.NUMBER_TOKEN */, number: blue, flags: 1 },
+                        { type: 17 /* TokenType.NUMBER_TOKEN */, number: alpha > 1 ? alpha / 255 : alpha, flags: 1 }
+                    ];
+                }
+            }
+            else if (tokens[1].type === 5 /* TokenType.HASH_TOKEN */) {
+                var _a = hash2rgb(tokens[1]), red = _a[0], green = _a[1], blue = _a[2], alpha = _a[3];
+                from = [
+                    { type: 17 /* TokenType.NUMBER_TOKEN */, number: red, flags: 1 },
+                    { type: 17 /* TokenType.NUMBER_TOKEN */, number: green, flags: 1 },
+                    { type: 17 /* TokenType.NUMBER_TOKEN */, number: blue, flags: 1 },
+                    { type: 17 /* TokenType.NUMBER_TOKEN */, number: alpha > 1 ? alpha / 255 : alpha, flags: 1 }
+                ];
+            }
+            if (from.length === 0) {
+                throw new Error("Attempting to use unknown color in relative color 'from'");
+            }
+            if (to_colorspace === 'unknown') {
+                throw new Error("Attempting to use unknown colorspace in relative color 'to'");
+            }
+            var fromColorToXyz = SUPPORTED_COLOR_SPACES_TO_XYZ[from_colorspace], toColorFromXyz = SUPPORTED_COLOR_SPACES_FROM_XYZ[to_colorspace], toColorPack = SUPPORTED_COLOR_SPACES_ABSOLUTE[to_colorspace];
+            if (typeof fromColorToXyz === 'undefined') {
+                throw new Error("Attempting to parse an unsupported color space \"".concat(from_colorspace, "\" for color() function"));
+            }
+            if (typeof toColorFromXyz === 'undefined') {
+                throw new Error("Attempting to parse an unsupported color space \"".concat(to_colorspace, "\" for color() function"));
+            }
+            var from_color = fromColorToXyz(context, from), from_final_colorspace = toColorFromXyz(from_color), c1 = extractComponent(from_final_colorspace, tokens[3]), c2 = extractComponent(from_final_colorspace, tokens[4]), c3 = extractComponent(from_final_colorspace, tokens[5]), a = tokens.length > 6 &&
+                tokens[6].type === 6 /* TokenType.DELIM_TOKEN */ &&
+                tokens[6].value === '/' &&
+                isNumberToken(tokens[7])
+                ? tokens[7].number
+                : 1;
+            if (c1 === null || c2 === null || c3 === null) {
+                throw new Error("Invalid relative color in color() function");
+            }
+            return toColorPack([c1, c2, c3, a]);
+        }
+    };
+    var SUPPORTED_COLOR_SPACES_ABSOLUTE = {
+        srgb: packSrgb,
+        'srgb-linear': packSrgbLinear,
+        'display-p3': convertP3,
+        'a98-rgb': convertA98rgb,
+        'prophoto-rgb': convertProPhoto,
+        xyz: convertXyz,
+        'xyz-d50': convertXyz50,
+        'xyz-d65': convertXyz,
+        rec2020: convertRec2020
+    };
+    var SUPPORTED_COLOR_SPACES_TO_XYZ = {
+        rgb: rgbToXyz,
+        hsl: hslToXyz,
+        lab: labToXyz,
+        lch: lchToXyz,
+        oklab: oklabToXyz,
+        oklch: oklchToXyz
+    };
+    var SUPPORTED_COLOR_SPACES_FROM_XYZ = {
+        srgb: srgbFromXYZ,
+        'srgb-linear': srgbLinearFromXYZ,
+        'display-p3': p3FromXYZ,
+        'a98-rgb': a98FromXYZ,
+        'prophoto-rgb': proPhotoFromXYZ,
+        xyz: xyzFromXYZ,
+        'xyz-d50': xyz50FromXYZ,
+        'xyz-d65': xyzFromXYZ,
+        rec2020: rec2020FromXYZ
     };
     var SUPPORTED_COLOR_FUNCTIONS = {
-        hsl: hsl,
-        hsla: hsl,
+        hsl: packHSL,
+        hsla: packHSL,
         rgb: rgb,
-        rgba: rgb
+        rgba: rgb,
+        lch: packLch,
+        oklch: packOkLch,
+        oklab: packOkLab,
+        lab: packLab,
+        color: _color
     };
     var parseColor = function (context, value) {
         return color$1.parse(context, Parser.create(value).parseComponentValue());
@@ -2530,18 +3366,18 @@ var Reportly = (function () {
         name: 'background-clip',
         initialValue: 'border-box',
         prefix: false,
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         parse: function (_context, tokens) {
             return tokens.map(function (token) {
                 if (isIdentToken(token)) {
                     switch (token.value) {
                         case 'padding-box':
-                            return 1 /* PADDING_BOX */;
+                            return 1 /* BACKGROUND_CLIP.PADDING_BOX */;
                         case 'content-box':
-                            return 2 /* CONTENT_BOX */;
+                            return 2 /* BACKGROUND_CLIP.CONTENT_BOX */;
                     }
                 }
-                return 0 /* BORDER_BOX */;
+                return 0 /* BACKGROUND_CLIP.BORDER_BOX */;
             });
         }
     };
@@ -2550,7 +3386,7 @@ var Reportly = (function () {
         name: "background-color",
         initialValue: 'transparent',
         prefix: false,
-        type: 3 /* TYPE_VALUE */,
+        type: 3 /* PropertyDescriptorParsingType.TYPE_VALUE */,
         format: 'color'
     };
 
@@ -2653,24 +3489,24 @@ var Reportly = (function () {
         var rx = 0;
         var ry = 0;
         switch (gradient.size) {
-            case 0 /* CLOSEST_SIDE */:
+            case 0 /* CSSRadialExtent.CLOSEST_SIDE */:
                 // The ending shape is sized so that that it exactly meets the side of the gradient box closest to the gradient’s center.
                 // If the shape is an ellipse, it exactly meets the closest side in each dimension.
-                if (gradient.shape === 0 /* CIRCLE */) {
+                if (gradient.shape === 0 /* CSSRadialShape.CIRCLE */) {
                     rx = ry = Math.min(Math.abs(x), Math.abs(x - width), Math.abs(y), Math.abs(y - height));
                 }
-                else if (gradient.shape === 1 /* ELLIPSE */) {
+                else if (gradient.shape === 1 /* CSSRadialShape.ELLIPSE */) {
                     rx = Math.min(Math.abs(x), Math.abs(x - width));
                     ry = Math.min(Math.abs(y), Math.abs(y - height));
                 }
                 break;
-            case 2 /* CLOSEST_CORNER */:
+            case 2 /* CSSRadialExtent.CLOSEST_CORNER */:
                 // The ending shape is sized so that that it passes through the corner of the gradient box closest to the gradient’s center.
                 // If the shape is an ellipse, the ending shape is given the same aspect-ratio it would have if closest-side were specified.
-                if (gradient.shape === 0 /* CIRCLE */) {
+                if (gradient.shape === 0 /* CSSRadialShape.CIRCLE */) {
                     rx = ry = Math.min(distance(x, y), distance(x, y - height), distance(x - width, y), distance(x - width, y - height));
                 }
-                else if (gradient.shape === 1 /* ELLIPSE */) {
+                else if (gradient.shape === 1 /* CSSRadialShape.ELLIPSE */) {
                     // Compute the ratio ry/rx (which is to be the same as for "closest-side")
                     var c = Math.min(Math.abs(y), Math.abs(y - height)) / Math.min(Math.abs(x), Math.abs(x - width));
                     var _a = findCorner(width, height, x, y, true), cx = _a[0], cy = _a[1];
@@ -2678,23 +3514,23 @@ var Reportly = (function () {
                     ry = c * rx;
                 }
                 break;
-            case 1 /* FARTHEST_SIDE */:
+            case 1 /* CSSRadialExtent.FARTHEST_SIDE */:
                 // Same as closest-side, except the ending shape is sized based on the farthest side(s)
-                if (gradient.shape === 0 /* CIRCLE */) {
+                if (gradient.shape === 0 /* CSSRadialShape.CIRCLE */) {
                     rx = ry = Math.max(Math.abs(x), Math.abs(x - width), Math.abs(y), Math.abs(y - height));
                 }
-                else if (gradient.shape === 1 /* ELLIPSE */) {
+                else if (gradient.shape === 1 /* CSSRadialShape.ELLIPSE */) {
                     rx = Math.max(Math.abs(x), Math.abs(x - width));
                     ry = Math.max(Math.abs(y), Math.abs(y - height));
                 }
                 break;
-            case 3 /* FARTHEST_CORNER */:
+            case 3 /* CSSRadialExtent.FARTHEST_CORNER */:
                 // Same as closest-corner, except the ending shape is sized based on the farthest corner.
                 // If the shape is an ellipse, the ending shape is given the same aspect ratio it would have if farthest-side were specified.
-                if (gradient.shape === 0 /* CIRCLE */) {
+                if (gradient.shape === 0 /* CSSRadialShape.CIRCLE */) {
                     rx = ry = Math.max(distance(x, y), distance(x, y - height), distance(x - width, y), distance(x - width, y - height));
                 }
-                else if (gradient.shape === 1 /* ELLIPSE */) {
+                else if (gradient.shape === 1 /* CSSRadialShape.ELLIPSE */) {
                     // Compute the ratio ry/rx (which is to be the same as for "farthest-side")
                     var c = Math.max(Math.abs(y), Math.abs(y - height)) / Math.max(Math.abs(x), Math.abs(x - width));
                     var _b = findCorner(width, height, x, y, false), cx = _b[0], cy = _b[1];
@@ -2716,7 +3552,7 @@ var Reportly = (function () {
         parseFunctionArgs(tokens).forEach(function (arg, i) {
             if (i === 0) {
                 var firstToken = arg[0];
-                if (firstToken.type === 20 /* IDENT_TOKEN */ && firstToken.value === 'to') {
+                if (firstToken.type === 20 /* TokenType.IDENT_TOKEN */ && firstToken.value === 'to') {
                     angle$1 = parseNamedSide(arg);
                     return;
                 }
@@ -2728,7 +3564,7 @@ var Reportly = (function () {
             var colorStop = parseColorStop(context, arg);
             stops.push(colorStop);
         });
-        return { angle: angle$1, stops: stops, type: 1 /* LINEAR_GRADIENT */ };
+        return { angle: angle$1, stops: stops, type: 1 /* CSSImageType.LINEAR_GRADIENT */ };
     };
 
     var prefixLinearGradient = function (context, tokens) {
@@ -2737,7 +3573,7 @@ var Reportly = (function () {
         parseFunctionArgs(tokens).forEach(function (arg, i) {
             if (i === 0) {
                 var firstToken = arg[0];
-                if (firstToken.type === 20 /* IDENT_TOKEN */ &&
+                if (firstToken.type === 20 /* TokenType.IDENT_TOKEN */ &&
                     ['top', 'left', 'right', 'bottom'].indexOf(firstToken.value) !== -1) {
                     angle$1 = parseNamedSide(arg);
                     return;
@@ -2753,30 +3589,30 @@ var Reportly = (function () {
         return {
             angle: angle$1,
             stops: stops,
-            type: 1 /* LINEAR_GRADIENT */
+            type: 1 /* CSSImageType.LINEAR_GRADIENT */
         };
     };
 
     var webkitGradient = function (context, tokens) {
         var angle = deg(180);
         var stops = [];
-        var type = 1 /* LINEAR_GRADIENT */;
-        var shape = 0 /* CIRCLE */;
-        var size = 3 /* FARTHEST_CORNER */;
+        var type = 1 /* CSSImageType.LINEAR_GRADIENT */;
+        var shape = 0 /* CSSRadialShape.CIRCLE */;
+        var size = 3 /* CSSRadialExtent.FARTHEST_CORNER */;
         var position = [];
         parseFunctionArgs(tokens).forEach(function (arg, i) {
             var firstToken = arg[0];
             if (i === 0) {
                 if (isIdentToken(firstToken) && firstToken.value === 'linear') {
-                    type = 1 /* LINEAR_GRADIENT */;
+                    type = 1 /* CSSImageType.LINEAR_GRADIENT */;
                     return;
                 }
                 else if (isIdentToken(firstToken) && firstToken.value === 'radial') {
-                    type = 2 /* RADIAL_GRADIENT */;
+                    type = 2 /* CSSImageType.RADIAL_GRADIENT */;
                     return;
                 }
             }
-            if (firstToken.type === 18 /* FUNCTION */) {
+            if (firstToken.type === 18 /* TokenType.FUNCTION */) {
                 if (firstToken.name === 'from') {
                     var color = color$1.parse(context, firstToken.values[0]);
                     stops.push({ stop: ZERO_LENGTH, color: color });
@@ -2792,7 +3628,7 @@ var Reportly = (function () {
                         var stop_1 = values[0];
                         if (isNumberToken(stop_1)) {
                             stops.push({
-                                stop: { type: 16 /* PERCENTAGE_TOKEN */, number: stop_1.number * 100, flags: stop_1.flags },
+                                stop: { type: 16 /* TokenType.PERCENTAGE_TOKEN */, number: stop_1.number * 100, flags: stop_1.flags },
                                 color: color
                             });
                         }
@@ -2800,7 +3636,7 @@ var Reportly = (function () {
                 }
             }
         });
-        return type === 1 /* LINEAR_GRADIENT */
+        return type === 1 /* CSSImageType.LINEAR_GRADIENT */
             ? {
                 angle: (angle + deg(180)) % deg(360),
                 stops: stops,
@@ -2818,8 +3654,8 @@ var Reportly = (function () {
     var COVER = 'cover';
     var CONTAIN = 'contain';
     var radialGradient = function (context, tokens) {
-        var shape = 0 /* CIRCLE */;
-        var size = 3 /* FARTHEST_CORNER */;
+        var shape = 0 /* CSSRadialShape.CIRCLE */;
+        var size = 3 /* CSSRadialExtent.FARTHEST_CORNER */;
         var stops = [];
         var position = [];
         parseFunctionArgs(tokens).forEach(function (arg, i) {
@@ -2850,27 +3686,27 @@ var Reportly = (function () {
                     else if (isIdentToken(token)) {
                         switch (token.value) {
                             case CIRCLE:
-                                shape = 0 /* CIRCLE */;
+                                shape = 0 /* CSSRadialShape.CIRCLE */;
                                 return false;
                             case ELLIPSE:
-                                shape = 1 /* ELLIPSE */;
+                                shape = 1 /* CSSRadialShape.ELLIPSE */;
                                 return false;
                             case 'at':
                                 isAtPosition_1 = true;
                                 return false;
                             case CLOSEST_SIDE:
-                                size = 0 /* CLOSEST_SIDE */;
+                                size = 0 /* CSSRadialExtent.CLOSEST_SIDE */;
                                 return false;
                             case COVER:
                             case FARTHEST_SIDE:
-                                size = 1 /* FARTHEST_SIDE */;
+                                size = 1 /* CSSRadialExtent.FARTHEST_SIDE */;
                                 return false;
                             case CONTAIN:
                             case CLOSEST_CORNER:
-                                size = 2 /* CLOSEST_CORNER */;
+                                size = 2 /* CSSRadialExtent.CLOSEST_CORNER */;
                                 return false;
                             case FARTHEST_CORNER:
-                                size = 3 /* FARTHEST_CORNER */;
+                                size = 3 /* CSSRadialExtent.FARTHEST_CORNER */;
                                 return false;
                         }
                     }
@@ -2889,12 +3725,12 @@ var Reportly = (function () {
                 stops.push(colorStop);
             }
         });
-        return { size: size, shape: shape, stops: stops, position: position, type: 2 /* RADIAL_GRADIENT */ };
+        return { size: size, shape: shape, stops: stops, position: position, type: 2 /* CSSImageType.RADIAL_GRADIENT */ };
     };
 
     var prefixRadialGradient = function (context, tokens) {
-        var shape = 0 /* CIRCLE */;
-        var size = 3 /* FARTHEST_CORNER */;
+        var shape = 0 /* CSSRadialShape.CIRCLE */;
+        var size = 3 /* CSSRadialExtent.FARTHEST_CORNER */;
         var stops = [];
         var position = [];
         parseFunctionArgs(tokens).forEach(function (arg, i) {
@@ -2928,24 +3764,24 @@ var Reportly = (function () {
                     if (isIdentToken(token)) {
                         switch (token.value) {
                             case CIRCLE:
-                                shape = 0 /* CIRCLE */;
+                                shape = 0 /* CSSRadialShape.CIRCLE */;
                                 return false;
                             case ELLIPSE:
-                                shape = 1 /* ELLIPSE */;
+                                shape = 1 /* CSSRadialShape.ELLIPSE */;
                                 return false;
                             case CONTAIN:
                             case CLOSEST_SIDE:
-                                size = 0 /* CLOSEST_SIDE */;
+                                size = 0 /* CSSRadialExtent.CLOSEST_SIDE */;
                                 return false;
                             case FARTHEST_SIDE:
-                                size = 1 /* FARTHEST_SIDE */;
+                                size = 1 /* CSSRadialExtent.FARTHEST_SIDE */;
                                 return false;
                             case CLOSEST_CORNER:
-                                size = 2 /* CLOSEST_CORNER */;
+                                size = 2 /* CSSRadialExtent.CLOSEST_CORNER */;
                                 return false;
                             case COVER:
                             case FARTHEST_CORNER:
-                                size = 3 /* FARTHEST_CORNER */;
+                                size = 3 /* CSSRadialExtent.FARTHEST_CORNER */;
                                 return false;
                         }
                     }
@@ -2964,36 +3800,36 @@ var Reportly = (function () {
                 stops.push(colorStop);
             }
         });
-        return { size: size, shape: shape, stops: stops, position: position, type: 2 /* RADIAL_GRADIENT */ };
+        return { size: size, shape: shape, stops: stops, position: position, type: 2 /* CSSImageType.RADIAL_GRADIENT */ };
     };
 
     var isLinearGradient = function (background) {
-        return background.type === 1 /* LINEAR_GRADIENT */;
+        return background.type === 1 /* CSSImageType.LINEAR_GRADIENT */;
     };
     var isRadialGradient = function (background) {
-        return background.type === 2 /* RADIAL_GRADIENT */;
+        return background.type === 2 /* CSSImageType.RADIAL_GRADIENT */;
     };
     var image = {
         name: 'image',
         parse: function (context, value) {
-            if (value.type === 22 /* URL_TOKEN */) {
-                var image_1 = { url: value.value, type: 0 /* URL */ };
+            if (value.type === 22 /* TokenType.URL_TOKEN */) {
+                var image_1 = { url: value.value, type: 0 /* CSSImageType.URL */ };
                 context.cache.addImage(value.value);
                 return image_1;
             }
-            if (value.type === 18 /* FUNCTION */) {
+            if (value.type === 18 /* TokenType.FUNCTION */) {
                 var imageFunction = SUPPORTED_IMAGE_FUNCTIONS[value.name];
                 if (typeof imageFunction === 'undefined') {
-                    throw new Error("Attempting to parse an unsupported image function \"" + value.name + "\"");
+                    throw new Error("Attempting to parse an unsupported image function \"".concat(value.name, "\""));
                 }
                 return imageFunction(context, value.values);
             }
-            throw new Error("Unsupported image type " + value.type);
+            throw new Error("Unsupported image type ".concat(value.type));
         }
     };
     function isSupportedImage(value) {
-        return (!(value.type === 20 /* IDENT_TOKEN */ && value.value === 'none') &&
-            (value.type !== 18 /* FUNCTION */ || !!SUPPORTED_IMAGE_FUNCTIONS[value.name]));
+        return (!(value.type === 20 /* TokenType.IDENT_TOKEN */ && value.value === 'none') &&
+            (value.type !== 18 /* TokenType.FUNCTION */ || !!SUPPORTED_IMAGE_FUNCTIONS[value.name]));
     }
     var SUPPORTED_IMAGE_FUNCTIONS = {
         'linear-gradient': linearGradient,
@@ -3012,14 +3848,14 @@ var Reportly = (function () {
     var backgroundImage = {
         name: 'background-image',
         initialValue: 'none',
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         prefix: false,
         parse: function (context, tokens) {
             if (tokens.length === 0) {
                 return [];
             }
             var first = tokens[0];
-            if (first.type === 20 /* IDENT_TOKEN */ && first.value === 'none') {
+            if (first.type === 20 /* TokenType.IDENT_TOKEN */ && first.value === 'none') {
                 return [];
             }
             return tokens
@@ -3032,18 +3868,18 @@ var Reportly = (function () {
         name: 'background-origin',
         initialValue: 'border-box',
         prefix: false,
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         parse: function (_context, tokens) {
             return tokens.map(function (token) {
                 if (isIdentToken(token)) {
                     switch (token.value) {
                         case 'padding-box':
-                            return 1 /* PADDING_BOX */;
+                            return 1 /* BACKGROUND_ORIGIN.PADDING_BOX */;
                         case 'content-box':
-                            return 2 /* CONTENT_BOX */;
+                            return 2 /* BACKGROUND_ORIGIN.CONTENT_BOX */;
                     }
                 }
-                return 0 /* BORDER_BOX */;
+                return 0 /* BACKGROUND_ORIGIN.BORDER_BOX */;
             });
         }
     };
@@ -3051,7 +3887,7 @@ var Reportly = (function () {
     var backgroundPosition = {
         name: 'background-position',
         initialValue: '0% 0%',
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         prefix: false,
         parse: function (_context, tokens) {
             return parseFunctionArgs(tokens)
@@ -3064,7 +3900,7 @@ var Reportly = (function () {
         name: 'background-repeat',
         initialValue: 'repeat',
         prefix: false,
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         parse: function (_context, tokens) {
             return parseFunctionArgs(tokens)
                 .map(function (values) {
@@ -3079,16 +3915,16 @@ var Reportly = (function () {
     var parseBackgroundRepeat = function (value) {
         switch (value) {
             case 'no-repeat':
-                return 1 /* NO_REPEAT */;
+                return 1 /* BACKGROUND_REPEAT.NO_REPEAT */;
             case 'repeat-x':
             case 'repeat no-repeat':
-                return 2 /* REPEAT_X */;
+                return 2 /* BACKGROUND_REPEAT.REPEAT_X */;
             case 'repeat-y':
             case 'no-repeat repeat':
-                return 3 /* REPEAT_Y */;
+                return 3 /* BACKGROUND_REPEAT.REPEAT_Y */;
             case 'repeat':
             default:
-                return 0 /* REPEAT */;
+                return 0 /* BACKGROUND_REPEAT.REPEAT */;
         }
     };
 
@@ -3102,7 +3938,7 @@ var Reportly = (function () {
         name: 'background-size',
         initialValue: '0',
         prefix: false,
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         parse: function (_context, tokens) {
             return parseFunctionArgs(tokens).map(function (values) { return values.filter(isBackgroundSizeInfoToken); });
         }
@@ -3112,10 +3948,10 @@ var Reportly = (function () {
     };
 
     var borderColorForSide = function (side) { return ({
-        name: "border-" + side + "-color",
+        name: "border-".concat(side, "-color"),
         initialValue: 'transparent',
         prefix: false,
-        type: 3 /* TYPE_VALUE */,
+        type: 3 /* PropertyDescriptorParsingType.TYPE_VALUE */,
         format: 'color'
     }); };
     var borderTopColor = borderColorForSide('top');
@@ -3124,10 +3960,10 @@ var Reportly = (function () {
     var borderLeftColor = borderColorForSide('left');
 
     var borderRadiusForSide = function (side) { return ({
-        name: "border-radius-" + side,
+        name: "border-radius-".concat(side),
         initialValue: '0 0',
         prefix: false,
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         parse: function (_context, tokens) {
             return parseLengthPercentageTuple(tokens.filter(isLengthPercentage));
         }
@@ -3138,22 +3974,22 @@ var Reportly = (function () {
     var borderBottomLeftRadius = borderRadiusForSide('bottom-left');
 
     var borderStyleForSide = function (side) { return ({
-        name: "border-" + side + "-style",
+        name: "border-".concat(side, "-style"),
         initialValue: 'solid',
         prefix: false,
-        type: 2 /* IDENT_VALUE */,
+        type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
         parse: function (_context, style) {
             switch (style) {
                 case 'none':
-                    return 0 /* NONE */;
+                    return 0 /* BORDER_STYLE.NONE */;
                 case 'dashed':
-                    return 2 /* DASHED */;
+                    return 2 /* BORDER_STYLE.DASHED */;
                 case 'dotted':
-                    return 3 /* DOTTED */;
+                    return 3 /* BORDER_STYLE.DOTTED */;
                 case 'double':
-                    return 4 /* DOUBLE */;
+                    return 4 /* BORDER_STYLE.DOUBLE */;
             }
-            return 1 /* SOLID */;
+            return 1 /* BORDER_STYLE.SOLID */;
         }
     }); };
     var borderTopStyle = borderStyleForSide('top');
@@ -3162,9 +3998,9 @@ var Reportly = (function () {
     var borderLeftStyle = borderStyleForSide('left');
 
     var borderWidthForSide = function (side) { return ({
-        name: "border-" + side + "-width",
+        name: "border-".concat(side, "-width"),
         initialValue: '0',
-        type: 0 /* VALUE */,
+        type: 0 /* PropertyDescriptorParsingType.VALUE */,
         prefix: false,
         parse: function (_context, token) {
             if (isDimensionToken(token)) {
@@ -3182,7 +4018,7 @@ var Reportly = (function () {
         name: "color",
         initialValue: 'transparent',
         prefix: false,
-        type: 3 /* TYPE_VALUE */,
+        type: 3 /* PropertyDescriptorParsingType.TYPE_VALUE */,
         format: 'color'
     };
 
@@ -3190,14 +4026,14 @@ var Reportly = (function () {
         name: 'direction',
         initialValue: 'ltr',
         prefix: false,
-        type: 2 /* IDENT_VALUE */,
+        type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
         parse: function (_context, direction) {
             switch (direction) {
                 case 'rtl':
-                    return 1 /* RTL */;
+                    return 1 /* DIRECTION.RTL */;
                 case 'ltr':
                 default:
-                    return 0 /* LTR */;
+                    return 0 /* DIRECTION.LTR */;
             }
         }
     };
@@ -3206,97 +4042,97 @@ var Reportly = (function () {
         name: 'display',
         initialValue: 'inline-block',
         prefix: false,
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         parse: function (_context, tokens) {
             return tokens.filter(isIdentToken).reduce(function (bit, token) {
-                return bit | parseDisplayValue(token.value);
-            }, 0 /* NONE */);
+                return bit | parseDisplayValue$1(token.value);
+            }, 0 /* DISPLAY.NONE */);
         }
     };
-    var parseDisplayValue = function (display) {
+    var parseDisplayValue$1 = function (display) {
         switch (display) {
             case 'block':
             case '-webkit-box':
-                return 2 /* BLOCK */;
+                return 2 /* DISPLAY.BLOCK */;
             case 'inline':
-                return 4 /* INLINE */;
+                return 4 /* DISPLAY.INLINE */;
             case 'run-in':
-                return 8 /* RUN_IN */;
+                return 8 /* DISPLAY.RUN_IN */;
             case 'flow':
-                return 16 /* FLOW */;
+                return 16 /* DISPLAY.FLOW */;
             case 'flow-root':
-                return 32 /* FLOW_ROOT */;
+                return 32 /* DISPLAY.FLOW_ROOT */;
             case 'table':
-                return 64 /* TABLE */;
+                return 64 /* DISPLAY.TABLE */;
             case 'flex':
             case '-webkit-flex':
-                return 128 /* FLEX */;
+                return 128 /* DISPLAY.FLEX */;
             case 'grid':
             case '-ms-grid':
-                return 256 /* GRID */;
+                return 256 /* DISPLAY.GRID */;
             case 'ruby':
-                return 512 /* RUBY */;
+                return 512 /* DISPLAY.RUBY */;
             case 'subgrid':
-                return 1024 /* SUBGRID */;
+                return 1024 /* DISPLAY.SUBGRID */;
             case 'list-item':
-                return 2048 /* LIST_ITEM */;
+                return 2048 /* DISPLAY.LIST_ITEM */;
             case 'table-row-group':
-                return 4096 /* TABLE_ROW_GROUP */;
+                return 4096 /* DISPLAY.TABLE_ROW_GROUP */;
             case 'table-header-group':
-                return 8192 /* TABLE_HEADER_GROUP */;
+                return 8192 /* DISPLAY.TABLE_HEADER_GROUP */;
             case 'table-footer-group':
-                return 16384 /* TABLE_FOOTER_GROUP */;
+                return 16384 /* DISPLAY.TABLE_FOOTER_GROUP */;
             case 'table-row':
-                return 32768 /* TABLE_ROW */;
+                return 32768 /* DISPLAY.TABLE_ROW */;
             case 'table-cell':
-                return 65536 /* TABLE_CELL */;
+                return 65536 /* DISPLAY.TABLE_CELL */;
             case 'table-column-group':
-                return 131072 /* TABLE_COLUMN_GROUP */;
+                return 131072 /* DISPLAY.TABLE_COLUMN_GROUP */;
             case 'table-column':
-                return 262144 /* TABLE_COLUMN */;
+                return 262144 /* DISPLAY.TABLE_COLUMN */;
             case 'table-caption':
-                return 524288 /* TABLE_CAPTION */;
+                return 524288 /* DISPLAY.TABLE_CAPTION */;
             case 'ruby-base':
-                return 1048576 /* RUBY_BASE */;
+                return 1048576 /* DISPLAY.RUBY_BASE */;
             case 'ruby-text':
-                return 2097152 /* RUBY_TEXT */;
+                return 2097152 /* DISPLAY.RUBY_TEXT */;
             case 'ruby-base-container':
-                return 4194304 /* RUBY_BASE_CONTAINER */;
+                return 4194304 /* DISPLAY.RUBY_BASE_CONTAINER */;
             case 'ruby-text-container':
-                return 8388608 /* RUBY_TEXT_CONTAINER */;
+                return 8388608 /* DISPLAY.RUBY_TEXT_CONTAINER */;
             case 'contents':
-                return 16777216 /* CONTENTS */;
+                return 16777216 /* DISPLAY.CONTENTS */;
             case 'inline-block':
-                return 33554432 /* INLINE_BLOCK */;
+                return 33554432 /* DISPLAY.INLINE_BLOCK */;
             case 'inline-list-item':
-                return 67108864 /* INLINE_LIST_ITEM */;
+                return 67108864 /* DISPLAY.INLINE_LIST_ITEM */;
             case 'inline-table':
-                return 134217728 /* INLINE_TABLE */;
+                return 134217728 /* DISPLAY.INLINE_TABLE */;
             case 'inline-flex':
-                return 268435456 /* INLINE_FLEX */;
+                return 268435456 /* DISPLAY.INLINE_FLEX */;
             case 'inline-grid':
-                return 536870912 /* INLINE_GRID */;
+                return 536870912 /* DISPLAY.INLINE_GRID */;
         }
-        return 0 /* NONE */;
+        return 0 /* DISPLAY.NONE */;
     };
 
     var float = {
         name: 'float',
         initialValue: 'none',
         prefix: false,
-        type: 2 /* IDENT_VALUE */,
+        type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
         parse: function (_context, float) {
             switch (float) {
                 case 'left':
-                    return 1 /* LEFT */;
+                    return 1 /* FLOAT.LEFT */;
                 case 'right':
-                    return 2 /* RIGHT */;
+                    return 2 /* FLOAT.RIGHT */;
                 case 'inline-start':
-                    return 3 /* INLINE_START */;
+                    return 3 /* FLOAT.INLINE_START */;
                 case 'inline-end':
-                    return 4 /* INLINE_END */;
+                    return 4 /* FLOAT.INLINE_END */;
             }
-            return 0 /* NONE */;
+            return 0 /* FLOAT.NONE */;
         }
     };
 
@@ -3304,15 +4140,15 @@ var Reportly = (function () {
         name: 'letter-spacing',
         initialValue: '0',
         prefix: false,
-        type: 0 /* VALUE */,
+        type: 0 /* PropertyDescriptorParsingType.VALUE */,
         parse: function (_context, token) {
-            if (token.type === 20 /* IDENT_TOKEN */ && token.value === 'normal') {
+            if (token.type === 20 /* TokenType.IDENT_TOKEN */ && token.value === 'normal') {
                 return 0;
             }
-            if (token.type === 17 /* NUMBER_TOKEN */) {
+            if (token.type === 17 /* TokenType.NUMBER_TOKEN */) {
                 return token.number;
             }
-            if (token.type === 15 /* DIMENSION_TOKEN */) {
+            if (token.type === 15 /* TokenType.DIMENSION_TOKEN */) {
                 return token.number;
             }
             return 0;
@@ -3328,7 +4164,7 @@ var Reportly = (function () {
         name: 'line-break',
         initialValue: 'normal',
         prefix: false,
-        type: 2 /* IDENT_VALUE */,
+        type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
         parse: function (_context, lineBreak) {
             switch (lineBreak) {
                 case 'strict':
@@ -3344,13 +4180,13 @@ var Reportly = (function () {
         name: 'line-height',
         initialValue: 'normal',
         prefix: false,
-        type: 4 /* TOKEN_VALUE */
+        type: 4 /* PropertyDescriptorParsingType.TOKEN_VALUE */
     };
     var computeLineHeight = function (token, fontSize) {
         if (isIdentToken(token) && token.value === 'normal') {
             return 1.2 * fontSize;
         }
-        else if (token.type === 17 /* NUMBER_TOKEN */) {
+        else if (token.type === 17 /* TokenType.NUMBER_TOKEN */) {
             return fontSize * token.number;
         }
         else if (isLengthPercentage(token)) {
@@ -3362,10 +4198,10 @@ var Reportly = (function () {
     var listStyleImage = {
         name: 'list-style-image',
         initialValue: 'none',
-        type: 0 /* VALUE */,
+        type: 0 /* PropertyDescriptorParsingType.VALUE */,
         prefix: false,
         parse: function (context, token) {
-            if (token.type === 20 /* IDENT_TOKEN */ && token.value === 'none') {
+            if (token.type === 20 /* TokenType.IDENT_TOKEN */ && token.value === 'none') {
                 return null;
             }
             return image.parse(context, token);
@@ -3376,14 +4212,14 @@ var Reportly = (function () {
         name: 'list-style-position',
         initialValue: 'outside',
         prefix: false,
-        type: 2 /* IDENT_VALUE */,
+        type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
         parse: function (_context, position) {
             switch (position) {
                 case 'inside':
-                    return 0 /* INSIDE */;
+                    return 0 /* LIST_STYLE_POSITION.INSIDE */;
                 case 'outside':
                 default:
-                    return 1 /* OUTSIDE */;
+                    return 1 /* LIST_STYLE_POSITION.OUTSIDE */;
             }
         }
     };
@@ -3392,127 +4228,127 @@ var Reportly = (function () {
         name: 'list-style-type',
         initialValue: 'none',
         prefix: false,
-        type: 2 /* IDENT_VALUE */,
+        type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
         parse: function (_context, type) {
             switch (type) {
                 case 'disc':
-                    return 0 /* DISC */;
+                    return 0 /* LIST_STYLE_TYPE.DISC */;
                 case 'circle':
-                    return 1 /* CIRCLE */;
+                    return 1 /* LIST_STYLE_TYPE.CIRCLE */;
                 case 'square':
-                    return 2 /* SQUARE */;
+                    return 2 /* LIST_STYLE_TYPE.SQUARE */;
                 case 'decimal':
-                    return 3 /* DECIMAL */;
+                    return 3 /* LIST_STYLE_TYPE.DECIMAL */;
                 case 'cjk-decimal':
-                    return 4 /* CJK_DECIMAL */;
+                    return 4 /* LIST_STYLE_TYPE.CJK_DECIMAL */;
                 case 'decimal-leading-zero':
-                    return 5 /* DECIMAL_LEADING_ZERO */;
+                    return 5 /* LIST_STYLE_TYPE.DECIMAL_LEADING_ZERO */;
                 case 'lower-roman':
-                    return 6 /* LOWER_ROMAN */;
+                    return 6 /* LIST_STYLE_TYPE.LOWER_ROMAN */;
                 case 'upper-roman':
-                    return 7 /* UPPER_ROMAN */;
+                    return 7 /* LIST_STYLE_TYPE.UPPER_ROMAN */;
                 case 'lower-greek':
-                    return 8 /* LOWER_GREEK */;
+                    return 8 /* LIST_STYLE_TYPE.LOWER_GREEK */;
                 case 'lower-alpha':
-                    return 9 /* LOWER_ALPHA */;
+                    return 9 /* LIST_STYLE_TYPE.LOWER_ALPHA */;
                 case 'upper-alpha':
-                    return 10 /* UPPER_ALPHA */;
+                    return 10 /* LIST_STYLE_TYPE.UPPER_ALPHA */;
                 case 'arabic-indic':
-                    return 11 /* ARABIC_INDIC */;
+                    return 11 /* LIST_STYLE_TYPE.ARABIC_INDIC */;
                 case 'armenian':
-                    return 12 /* ARMENIAN */;
+                    return 12 /* LIST_STYLE_TYPE.ARMENIAN */;
                 case 'bengali':
-                    return 13 /* BENGALI */;
+                    return 13 /* LIST_STYLE_TYPE.BENGALI */;
                 case 'cambodian':
-                    return 14 /* CAMBODIAN */;
+                    return 14 /* LIST_STYLE_TYPE.CAMBODIAN */;
                 case 'cjk-earthly-branch':
-                    return 15 /* CJK_EARTHLY_BRANCH */;
+                    return 15 /* LIST_STYLE_TYPE.CJK_EARTHLY_BRANCH */;
                 case 'cjk-heavenly-stem':
-                    return 16 /* CJK_HEAVENLY_STEM */;
+                    return 16 /* LIST_STYLE_TYPE.CJK_HEAVENLY_STEM */;
                 case 'cjk-ideographic':
-                    return 17 /* CJK_IDEOGRAPHIC */;
+                    return 17 /* LIST_STYLE_TYPE.CJK_IDEOGRAPHIC */;
                 case 'devanagari':
-                    return 18 /* DEVANAGARI */;
+                    return 18 /* LIST_STYLE_TYPE.DEVANAGARI */;
                 case 'ethiopic-numeric':
-                    return 19 /* ETHIOPIC_NUMERIC */;
+                    return 19 /* LIST_STYLE_TYPE.ETHIOPIC_NUMERIC */;
                 case 'georgian':
-                    return 20 /* GEORGIAN */;
+                    return 20 /* LIST_STYLE_TYPE.GEORGIAN */;
                 case 'gujarati':
-                    return 21 /* GUJARATI */;
+                    return 21 /* LIST_STYLE_TYPE.GUJARATI */;
                 case 'gurmukhi':
-                    return 22 /* GURMUKHI */;
+                    return 22 /* LIST_STYLE_TYPE.GURMUKHI */;
                 case 'hebrew':
-                    return 22 /* HEBREW */;
+                    return 52 /* LIST_STYLE_TYPE.HEBREW */;
                 case 'hiragana':
-                    return 23 /* HIRAGANA */;
+                    return 23 /* LIST_STYLE_TYPE.HIRAGANA */;
                 case 'hiragana-iroha':
-                    return 24 /* HIRAGANA_IROHA */;
+                    return 24 /* LIST_STYLE_TYPE.HIRAGANA_IROHA */;
                 case 'japanese-formal':
-                    return 25 /* JAPANESE_FORMAL */;
+                    return 25 /* LIST_STYLE_TYPE.JAPANESE_FORMAL */;
                 case 'japanese-informal':
-                    return 26 /* JAPANESE_INFORMAL */;
+                    return 26 /* LIST_STYLE_TYPE.JAPANESE_INFORMAL */;
                 case 'kannada':
-                    return 27 /* KANNADA */;
+                    return 27 /* LIST_STYLE_TYPE.KANNADA */;
                 case 'katakana':
-                    return 28 /* KATAKANA */;
+                    return 28 /* LIST_STYLE_TYPE.KATAKANA */;
                 case 'katakana-iroha':
-                    return 29 /* KATAKANA_IROHA */;
+                    return 29 /* LIST_STYLE_TYPE.KATAKANA_IROHA */;
                 case 'khmer':
-                    return 30 /* KHMER */;
+                    return 30 /* LIST_STYLE_TYPE.KHMER */;
                 case 'korean-hangul-formal':
-                    return 31 /* KOREAN_HANGUL_FORMAL */;
+                    return 31 /* LIST_STYLE_TYPE.KOREAN_HANGUL_FORMAL */;
                 case 'korean-hanja-formal':
-                    return 32 /* KOREAN_HANJA_FORMAL */;
+                    return 32 /* LIST_STYLE_TYPE.KOREAN_HANJA_FORMAL */;
                 case 'korean-hanja-informal':
-                    return 33 /* KOREAN_HANJA_INFORMAL */;
+                    return 33 /* LIST_STYLE_TYPE.KOREAN_HANJA_INFORMAL */;
                 case 'lao':
-                    return 34 /* LAO */;
+                    return 34 /* LIST_STYLE_TYPE.LAO */;
                 case 'lower-armenian':
-                    return 35 /* LOWER_ARMENIAN */;
+                    return 35 /* LIST_STYLE_TYPE.LOWER_ARMENIAN */;
                 case 'malayalam':
-                    return 36 /* MALAYALAM */;
+                    return 36 /* LIST_STYLE_TYPE.MALAYALAM */;
                 case 'mongolian':
-                    return 37 /* MONGOLIAN */;
+                    return 37 /* LIST_STYLE_TYPE.MONGOLIAN */;
                 case 'myanmar':
-                    return 38 /* MYANMAR */;
+                    return 38 /* LIST_STYLE_TYPE.MYANMAR */;
                 case 'oriya':
-                    return 39 /* ORIYA */;
+                    return 39 /* LIST_STYLE_TYPE.ORIYA */;
                 case 'persian':
-                    return 40 /* PERSIAN */;
+                    return 40 /* LIST_STYLE_TYPE.PERSIAN */;
                 case 'simp-chinese-formal':
-                    return 41 /* SIMP_CHINESE_FORMAL */;
+                    return 41 /* LIST_STYLE_TYPE.SIMP_CHINESE_FORMAL */;
                 case 'simp-chinese-informal':
-                    return 42 /* SIMP_CHINESE_INFORMAL */;
+                    return 42 /* LIST_STYLE_TYPE.SIMP_CHINESE_INFORMAL */;
                 case 'tamil':
-                    return 43 /* TAMIL */;
+                    return 43 /* LIST_STYLE_TYPE.TAMIL */;
                 case 'telugu':
-                    return 44 /* TELUGU */;
+                    return 44 /* LIST_STYLE_TYPE.TELUGU */;
                 case 'thai':
-                    return 45 /* THAI */;
+                    return 45 /* LIST_STYLE_TYPE.THAI */;
                 case 'tibetan':
-                    return 46 /* TIBETAN */;
+                    return 46 /* LIST_STYLE_TYPE.TIBETAN */;
                 case 'trad-chinese-formal':
-                    return 47 /* TRAD_CHINESE_FORMAL */;
+                    return 47 /* LIST_STYLE_TYPE.TRAD_CHINESE_FORMAL */;
                 case 'trad-chinese-informal':
-                    return 48 /* TRAD_CHINESE_INFORMAL */;
+                    return 48 /* LIST_STYLE_TYPE.TRAD_CHINESE_INFORMAL */;
                 case 'upper-armenian':
-                    return 49 /* UPPER_ARMENIAN */;
+                    return 49 /* LIST_STYLE_TYPE.UPPER_ARMENIAN */;
                 case 'disclosure-open':
-                    return 50 /* DISCLOSURE_OPEN */;
+                    return 50 /* LIST_STYLE_TYPE.DISCLOSURE_OPEN */;
                 case 'disclosure-closed':
-                    return 51 /* DISCLOSURE_CLOSED */;
+                    return 51 /* LIST_STYLE_TYPE.DISCLOSURE_CLOSED */;
                 case 'none':
                 default:
-                    return -1 /* NONE */;
+                    return -1 /* LIST_STYLE_TYPE.NONE */;
             }
         }
     };
 
     var marginForSide = function (side) { return ({
-        name: "margin-" + side,
+        name: "margin-".concat(side),
         initialValue: '0',
         prefix: false,
-        type: 4 /* TOKEN_VALUE */
+        type: 4 /* PropertyDescriptorParsingType.TOKEN_VALUE */
     }); };
     var marginTop = marginForSide('top');
     var marginRight = marginForSide('right');
@@ -3523,21 +4359,21 @@ var Reportly = (function () {
         name: 'overflow',
         initialValue: 'visible',
         prefix: false,
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         parse: function (_context, tokens) {
             return tokens.filter(isIdentToken).map(function (overflow) {
                 switch (overflow.value) {
                     case 'hidden':
-                        return 1 /* HIDDEN */;
+                        return 1 /* OVERFLOW.HIDDEN */;
                     case 'scroll':
-                        return 2 /* SCROLL */;
+                        return 2 /* OVERFLOW.SCROLL */;
                     case 'clip':
-                        return 3 /* CLIP */;
+                        return 3 /* OVERFLOW.CLIP */;
                     case 'auto':
-                        return 4 /* AUTO */;
+                        return 4 /* OVERFLOW.AUTO */;
                     case 'visible':
                     default:
-                        return 0 /* VISIBLE */;
+                        return 0 /* OVERFLOW.VISIBLE */;
                 }
             });
         }
@@ -3547,23 +4383,23 @@ var Reportly = (function () {
         name: 'overflow-wrap',
         initialValue: 'normal',
         prefix: false,
-        type: 2 /* IDENT_VALUE */,
+        type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
         parse: function (_context, overflow) {
             switch (overflow) {
                 case 'break-word':
-                    return "break-word" /* BREAK_WORD */;
+                    return "break-word" /* OVERFLOW_WRAP.BREAK_WORD */;
                 case 'normal':
                 default:
-                    return "normal" /* NORMAL */;
+                    return "normal" /* OVERFLOW_WRAP.NORMAL */;
             }
         }
     };
 
     var paddingForSide = function (side) { return ({
-        name: "padding-" + side,
+        name: "padding-".concat(side),
         initialValue: '0',
         prefix: false,
-        type: 3 /* TYPE_VALUE */,
+        type: 3 /* PropertyDescriptorParsingType.TYPE_VALUE */,
         format: 'length-percentage'
     }); };
     var paddingTop = paddingForSide('top');
@@ -3575,17 +4411,17 @@ var Reportly = (function () {
         name: 'text-align',
         initialValue: 'left',
         prefix: false,
-        type: 2 /* IDENT_VALUE */,
+        type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
         parse: function (_context, textAlign) {
             switch (textAlign) {
                 case 'right':
-                    return 2 /* RIGHT */;
+                    return 2 /* TEXT_ALIGN.RIGHT */;
                 case 'center':
                 case 'justify':
-                    return 1 /* CENTER */;
+                    return 1 /* TEXT_ALIGN.CENTER */;
                 case 'left':
                 default:
-                    return 0 /* LEFT */;
+                    return 0 /* TEXT_ALIGN.LEFT */;
             }
         }
     };
@@ -3594,26 +4430,26 @@ var Reportly = (function () {
         name: 'position',
         initialValue: 'static',
         prefix: false,
-        type: 2 /* IDENT_VALUE */,
+        type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
         parse: function (_context, position) {
             switch (position) {
                 case 'relative':
-                    return 1 /* RELATIVE */;
+                    return 1 /* POSITION.RELATIVE */;
                 case 'absolute':
-                    return 2 /* ABSOLUTE */;
+                    return 2 /* POSITION.ABSOLUTE */;
                 case 'fixed':
-                    return 3 /* FIXED */;
+                    return 3 /* POSITION.FIXED */;
                 case 'sticky':
-                    return 4 /* STICKY */;
+                    return 4 /* POSITION.STICKY */;
             }
-            return 0 /* STATIC */;
+            return 0 /* POSITION.STATIC */;
         }
     };
 
     var textShadow = {
         name: 'text-shadow',
         initialValue: 'none',
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         prefix: false,
         parse: function (context, tokens) {
             if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) {
@@ -3654,17 +4490,17 @@ var Reportly = (function () {
         name: 'text-transform',
         initialValue: 'none',
         prefix: false,
-        type: 2 /* IDENT_VALUE */,
+        type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
         parse: function (_context, textTransform) {
             switch (textTransform) {
                 case 'uppercase':
-                    return 2 /* UPPERCASE */;
+                    return 2 /* TEXT_TRANSFORM.UPPERCASE */;
                 case 'lowercase':
-                    return 1 /* LOWERCASE */;
+                    return 1 /* TEXT_TRANSFORM.LOWERCASE */;
                 case 'capitalize':
-                    return 3 /* CAPITALIZE */;
+                    return 3 /* TEXT_TRANSFORM.CAPITALIZE */;
             }
-            return 0 /* NONE */;
+            return 0 /* TEXT_TRANSFORM.NONE */;
         }
     };
 
@@ -3672,38 +4508,58 @@ var Reportly = (function () {
         name: 'transform',
         initialValue: 'none',
         prefix: true,
-        type: 0 /* VALUE */,
+        type: 0 /* PropertyDescriptorParsingType.VALUE */,
         parse: function (_context, token) {
-            if (token.type === 20 /* IDENT_TOKEN */ && token.value === 'none') {
+            if (token.type === 20 /* TokenType.IDENT_TOKEN */ && token.value === 'none') {
                 return null;
             }
-            if (token.type === 18 /* FUNCTION */) {
+            if (token.type === 18 /* TokenType.FUNCTION */) {
                 var transformFunction = SUPPORTED_TRANSFORM_FUNCTIONS[token.name];
                 if (typeof transformFunction === 'undefined') {
-                    throw new Error("Attempting to parse an unsupported transform function \"" + token.name + "\"");
+                    throw new Error("Attempting to parse an unsupported transform function \"".concat(token.name, "\""));
                 }
-                return transformFunction(token.values);
+                return transformFunction(_context, token.values);
             }
             return null;
         }
     };
-    var matrix = function (args) {
-        var values = args.filter(function (arg) { return arg.type === 17 /* NUMBER_TOKEN */; }).map(function (arg) { return arg.number; });
+    var matrix = function (_context, args) {
+        var values = args.filter(function (arg) { return arg.type === 17 /* TokenType.NUMBER_TOKEN */; }).map(function (arg) { return arg.number; });
         return values.length === 6 ? values : null;
     };
     // doesn't support 3D transforms at the moment
-    var matrix3d = function (args) {
-        var values = args.filter(function (arg) { return arg.type === 17 /* NUMBER_TOKEN */; }).map(function (arg) { return arg.number; });
+    var matrix3d = function (_context, args) {
+        var values = args.filter(function (arg) { return arg.type === 17 /* TokenType.NUMBER_TOKEN */; }).map(function (arg) { return arg.number; });
         var a1 = values[0], b1 = values[1]; values[2]; values[3]; var a2 = values[4], b2 = values[5]; values[6]; values[7]; values[8]; values[9]; values[10]; values[11]; var a4 = values[12], b4 = values[13]; values[14]; values[15];
         return values.length === 16 ? [a1, b1, a2, b2, a4, b4] : null;
     };
+    var rotate$1 = function (context, args) {
+        if (args.length !== 1) {
+            return null;
+        }
+        var arg = args[0];
+        var radians = 0;
+        if (arg.type === 17 /* TokenType.NUMBER_TOKEN */ && arg.number === 0) {
+            radians = 0;
+        }
+        else if (arg.type === 15 /* TokenType.DIMENSION_TOKEN */) {
+            radians = angle.parse(context, arg);
+        }
+        else {
+            return null;
+        }
+        var cos = Math.cos(radians);
+        var sin = Math.sin(radians);
+        return [cos, sin, -sin, cos, 0, 0];
+    };
     var SUPPORTED_TRANSFORM_FUNCTIONS = {
         matrix: matrix,
-        matrix3d: matrix3d
+        matrix3d: matrix3d,
+        rotate: rotate$1
     };
 
     var DEFAULT_VALUE = {
-        type: 16 /* PERCENTAGE_TOKEN */,
+        type: 16 /* TokenType.PERCENTAGE_TOKEN */,
         number: 50,
         flags: FLAG_INTEGER
     };
@@ -3712,7 +4568,7 @@ var Reportly = (function () {
         name: 'transform-origin',
         initialValue: '50% 50%',
         prefix: true,
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         parse: function (_context, tokens) {
             var origins = tokens.filter(isLengthPercentage);
             if (origins.length !== 2) {
@@ -3722,20 +4578,44 @@ var Reportly = (function () {
         }
     };
 
+    var rotate = {
+        name: 'rotate',
+        initialValue: 'none',
+        prefix: false,
+        type: 0 /* PropertyDescriptorParsingType.VALUE */,
+        parse: function (_context, token) {
+            if (token.type === 20 /* TokenType.IDENT_TOKEN */ && token.value === 'none') {
+                return null;
+            }
+            if (token.type === 17 /* TokenType.NUMBER_TOKEN */) {
+                if (token.number === 0) {
+                    return 0;
+                }
+            }
+            if (token.type === 15 /* TokenType.DIMENSION_TOKEN */) {
+                // Parse angle and convert to degrees for storage
+                var radians = angle.parse(_context, token);
+                // Store as degrees for consistency
+                return (radians * 180) / Math.PI;
+            }
+            return null;
+        }
+    };
+
     var visibility = {
         name: 'visible',
         initialValue: 'none',
         prefix: false,
-        type: 2 /* IDENT_VALUE */,
+        type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
         parse: function (_context, visibility) {
             switch (visibility) {
                 case 'hidden':
-                    return 1 /* HIDDEN */;
+                    return 1 /* VISIBILITY.HIDDEN */;
                 case 'collapse':
-                    return 2 /* COLLAPSE */;
+                    return 2 /* VISIBILITY.COLLAPSE */;
                 case 'visible':
                 default:
-                    return 0 /* VISIBLE */;
+                    return 0 /* VISIBILITY.VISIBLE */;
             }
         }
     };
@@ -3750,7 +4630,7 @@ var Reportly = (function () {
         name: 'word-break',
         initialValue: 'normal',
         prefix: false,
-        type: 2 /* IDENT_VALUE */,
+        type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
         parse: function (_context, wordBreak) {
             switch (wordBreak) {
                 case 'break-all':
@@ -3768,9 +4648,9 @@ var Reportly = (function () {
         name: 'z-index',
         initialValue: 'auto',
         prefix: false,
-        type: 0 /* VALUE */,
+        type: 0 /* PropertyDescriptorParsingType.VALUE */,
         parse: function (_context, token) {
-            if (token.type === 20 /* IDENT_TOKEN */) {
+            if (token.type === 20 /* TokenType.IDENT_TOKEN */) {
                 return { auto: true, order: 0 };
             }
             if (isNumberToken(token)) {
@@ -3783,7 +4663,7 @@ var Reportly = (function () {
     var time = {
         name: 'time',
         parse: function (_context, value) {
-            if (value.type === 15 /* DIMENSION_TOKEN */) {
+            if (value.type === 15 /* TokenType.DIMENSION_TOKEN */) {
                 switch (value.unit.toLowerCase()) {
                     case 's':
                         return 1000 * value.number;
@@ -3798,7 +4678,7 @@ var Reportly = (function () {
     var opacity = {
         name: 'opacity',
         initialValue: '1',
-        type: 0 /* VALUE */,
+        type: 0 /* PropertyDescriptorParsingType.VALUE */,
         prefix: false,
         parse: function (_context, token) {
             if (isNumberToken(token)) {
@@ -3812,7 +4692,7 @@ var Reportly = (function () {
         name: "text-decoration-color",
         initialValue: 'transparent',
         prefix: false,
-        type: 3 /* TYPE_VALUE */,
+        type: 3 /* PropertyDescriptorParsingType.TYPE_VALUE */,
         format: 'color'
     };
 
@@ -3820,24 +4700,24 @@ var Reportly = (function () {
         name: 'text-decoration-line',
         initialValue: 'none',
         prefix: false,
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         parse: function (_context, tokens) {
             return tokens
                 .filter(isIdentToken)
                 .map(function (token) {
                 switch (token.value) {
                     case 'underline':
-                        return 1 /* UNDERLINE */;
+                        return 1 /* TEXT_DECORATION_LINE.UNDERLINE */;
                     case 'overline':
-                        return 2 /* OVERLINE */;
+                        return 2 /* TEXT_DECORATION_LINE.OVERLINE */;
                     case 'line-through':
-                        return 3 /* LINE_THROUGH */;
+                        return 3 /* TEXT_DECORATION_LINE.LINE_THROUGH */;
                     case 'none':
-                        return 4 /* BLINK */;
+                        return 4 /* TEXT_DECORATION_LINE.BLINK */;
                 }
-                return 0 /* NONE */;
+                return 0 /* TEXT_DECORATION_LINE.NONE */;
             })
-                .filter(function (line) { return line !== 0 /* NONE */; });
+                .filter(function (line) { return line !== 0 /* TEXT_DECORATION_LINE.NONE */; });
         }
     };
 
@@ -3845,20 +4725,20 @@ var Reportly = (function () {
         name: "font-family",
         initialValue: '',
         prefix: false,
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         parse: function (_context, tokens) {
             var accumulator = [];
             var results = [];
             tokens.forEach(function (token) {
                 switch (token.type) {
-                    case 20 /* IDENT_TOKEN */:
-                    case 0 /* STRING_TOKEN */:
+                    case 20 /* TokenType.IDENT_TOKEN */:
+                    case 0 /* TokenType.STRING_TOKEN */:
                         accumulator.push(token.value);
                         break;
-                    case 17 /* NUMBER_TOKEN */:
+                    case 17 /* TokenType.NUMBER_TOKEN */:
                         accumulator.push(token.number.toString());
                         break;
-                    case 4 /* COMMA_TOKEN */:
+                    case 4 /* TokenType.COMMA_TOKEN */:
                         results.push(accumulator.join(' '));
                         accumulator.length = 0;
                         break;
@@ -3867,7 +4747,7 @@ var Reportly = (function () {
             if (accumulator.length) {
                 results.push(accumulator.join(' '));
             }
-            return results.map(function (result) { return (result.indexOf(' ') === -1 ? result : "'" + result + "'"); });
+            return results.map(function (result) { return (result.indexOf(' ') === -1 ? result : "'".concat(result, "'")); });
         }
     };
 
@@ -3875,14 +4755,14 @@ var Reportly = (function () {
         name: "font-size",
         initialValue: '0',
         prefix: false,
-        type: 3 /* TYPE_VALUE */,
+        type: 3 /* PropertyDescriptorParsingType.TYPE_VALUE */,
         format: 'length'
     };
 
     var fontWeight = {
         name: 'font-weight',
         initialValue: 'normal',
-        type: 0 /* VALUE */,
+        type: 0 /* PropertyDescriptorParsingType.VALUE */,
         prefix: false,
         parse: function (_context, token) {
             if (isNumberToken(token)) {
@@ -3904,7 +4784,7 @@ var Reportly = (function () {
     var fontVariant = {
         name: 'font-variant',
         initialValue: 'none',
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         prefix: false,
         parse: function (_context, tokens) {
             return tokens.filter(isIdentToken).map(function (token) { return token.value; });
@@ -3915,16 +4795,16 @@ var Reportly = (function () {
         name: 'font-style',
         initialValue: 'normal',
         prefix: false,
-        type: 2 /* IDENT_VALUE */,
+        type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
         parse: function (_context, overflow) {
             switch (overflow) {
                 case 'oblique':
-                    return "oblique" /* OBLIQUE */;
+                    return "oblique" /* FONT_STYLE.OBLIQUE */;
                 case 'italic':
-                    return "italic" /* ITALIC */;
+                    return "italic" /* FONT_STYLE.ITALIC */;
                 case 'normal':
                 default:
-                    return "normal" /* NORMAL */;
+                    return "normal" /* FONT_STYLE.NORMAL */;
             }
         }
     };
@@ -3934,14 +4814,14 @@ var Reportly = (function () {
     var content = {
         name: 'content',
         initialValue: 'none',
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         prefix: false,
         parse: function (_context, tokens) {
             if (tokens.length === 0) {
                 return [];
             }
             var first = tokens[0];
-            if (first.type === 20 /* IDENT_TOKEN */ && first.value === 'none') {
+            if (first.type === 20 /* TokenType.IDENT_TOKEN */ && first.value === 'none') {
                 return [];
             }
             return tokens;
@@ -3952,13 +4832,13 @@ var Reportly = (function () {
         name: 'counter-increment',
         initialValue: 'none',
         prefix: true,
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         parse: function (_context, tokens) {
             if (tokens.length === 0) {
                 return null;
             }
             var first = tokens[0];
-            if (first.type === 20 /* IDENT_TOKEN */ && first.value === 'none') {
+            if (first.type === 20 /* TokenType.IDENT_TOKEN */ && first.value === 'none') {
                 return null;
             }
             var increments = [];
@@ -3966,7 +4846,7 @@ var Reportly = (function () {
             for (var i = 0; i < filtered.length; i++) {
                 var counter = filtered[i];
                 var next = filtered[i + 1];
-                if (counter.type === 20 /* IDENT_TOKEN */) {
+                if (counter.type === 20 /* TokenType.IDENT_TOKEN */) {
                     var increment = next && isNumberToken(next) ? next.number : 1;
                     increments.push({ counter: counter.value, increment: increment });
                 }
@@ -3979,7 +4859,7 @@ var Reportly = (function () {
         name: 'counter-reset',
         initialValue: 'none',
         prefix: true,
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         parse: function (_context, tokens) {
             if (tokens.length === 0) {
                 return [];
@@ -4002,7 +4882,7 @@ var Reportly = (function () {
         name: 'duration',
         initialValue: '0s',
         prefix: false,
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         parse: function (context, tokens) {
             return tokens.filter(isDimensionToken).map(function (token) { return time.parse(context, token); });
         }
@@ -4012,13 +4892,13 @@ var Reportly = (function () {
         name: 'quotes',
         initialValue: 'none',
         prefix: true,
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         parse: function (_context, tokens) {
             if (tokens.length === 0) {
                 return null;
             }
             var first = tokens[0];
-            if (first.type === 20 /* IDENT_TOKEN */ && first.value === 'none') {
+            if (first.type === 20 /* TokenType.IDENT_TOKEN */ && first.value === 'none') {
                 return null;
             }
             var quotes = [];
@@ -4048,7 +4928,7 @@ var Reportly = (function () {
     var boxShadow = {
         name: 'box-shadow',
         initialValue: 'none',
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         prefix: false,
         parse: function (context, tokens) {
             if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) {
@@ -4097,20 +4977,20 @@ var Reportly = (function () {
         name: 'paint-order',
         initialValue: 'normal',
         prefix: false,
-        type: 1 /* LIST */,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
         parse: function (_context, tokens) {
-            var DEFAULT_VALUE = [0 /* FILL */, 1 /* STROKE */, 2 /* MARKERS */];
+            var DEFAULT_VALUE = [0 /* PAINT_ORDER_LAYER.FILL */, 1 /* PAINT_ORDER_LAYER.STROKE */, 2 /* PAINT_ORDER_LAYER.MARKERS */];
             var layers = [];
             tokens.filter(isIdentToken).forEach(function (token) {
                 switch (token.value) {
                     case 'stroke':
-                        layers.push(1 /* STROKE */);
+                        layers.push(1 /* PAINT_ORDER_LAYER.STROKE */);
                         break;
                     case 'fill':
-                        layers.push(0 /* FILL */);
+                        layers.push(0 /* PAINT_ORDER_LAYER.FILL */);
                         break;
                     case 'markers':
-                        layers.push(2 /* MARKERS */);
+                        layers.push(2 /* PAINT_ORDER_LAYER.MARKERS */);
                         break;
                 }
             });
@@ -4127,14 +5007,14 @@ var Reportly = (function () {
         name: "-webkit-text-stroke-color",
         initialValue: 'currentcolor',
         prefix: false,
-        type: 3 /* TYPE_VALUE */,
+        type: 3 /* PropertyDescriptorParsingType.TYPE_VALUE */,
         format: 'color'
     };
 
     var webkitTextStrokeWidth = {
         name: "-webkit-text-stroke-width",
         initialValue: '0',
-        type: 0 /* VALUE */,
+        type: 0 /* PropertyDescriptorParsingType.VALUE */,
         prefix: false,
         parse: function (_context, token) {
             if (isDimensionToken(token)) {
@@ -4144,6 +5024,31 @@ var Reportly = (function () {
         }
     };
 
+    var objectFit = {
+        name: 'objectFit',
+        initialValue: 'fill',
+        prefix: false,
+        type: 1 /* PropertyDescriptorParsingType.LIST */,
+        parse: function (_context, tokens) {
+            return tokens.filter(isIdentToken).reduce(function (bit, token) {
+                return bit | parseDisplayValue(token.value);
+            }, 0 /* OBJECT_FIT.FILL */);
+        }
+    };
+    var parseDisplayValue = function (display) {
+        switch (display) {
+            case 'contain':
+                return 2 /* OBJECT_FIT.CONTAIN */;
+            case 'cover':
+                return 4 /* OBJECT_FIT.COVER */;
+            case 'none':
+                return 8 /* OBJECT_FIT.NONE */;
+            case 'scale-down':
+                return 16 /* OBJECT_FIT.SCALE_DOWN */;
+        }
+        return 0 /* OBJECT_FIT.FILL */;
+    };
+
     var CSSParsedDeclaration = /** @class */ (function () {
         function CSSParsedDeclaration(context, declaration) {
             var _a, _b;
@@ -4209,37 +5114,39 @@ var Reportly = (function () {
             this.textTransform = parse(context, textTransform, declaration.textTransform);
             this.transform = parse(context, transform$1, declaration.transform);
             this.transformOrigin = parse(context, transformOrigin, declaration.transformOrigin);
+            this.rotate = parse(context, rotate, declaration.rotate);
             this.visibility = parse(context, visibility, declaration.visibility);
             this.webkitTextStrokeColor = parse(context, webkitTextStrokeColor, declaration.webkitTextStrokeColor);
             this.webkitTextStrokeWidth = parse(context, webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);
             this.wordBreak = parse(context, wordBreak, declaration.wordBreak);
             this.zIndex = parse(context, zIndex, declaration.zIndex);
+            this.objectFit = parse(context, objectFit, declaration.objectFit);
         }
         CSSParsedDeclaration.prototype.isVisible = function () {
-            return this.display > 0 && this.opacity > 0 && this.visibility === 0 /* VISIBLE */;
+            return this.display > 0 && this.opacity > 0 && this.visibility === 0 /* VISIBILITY.VISIBLE */;
         };
         CSSParsedDeclaration.prototype.isTransparent = function () {
             return isTransparent(this.backgroundColor);
         };
         CSSParsedDeclaration.prototype.isTransformed = function () {
-            return this.transform !== null;
+            return this.transform !== null || this.rotate !== null;
         };
         CSSParsedDeclaration.prototype.isPositioned = function () {
-            return this.position !== 0 /* STATIC */;
+            return this.position !== 0 /* POSITION.STATIC */;
         };
         CSSParsedDeclaration.prototype.isPositionedWithZIndex = function () {
             return this.isPositioned() && !this.zIndex.auto;
         };
         CSSParsedDeclaration.prototype.isFloating = function () {
-            return this.float !== 0 /* NONE */;
+            return this.float !== 0 /* FLOAT.NONE */;
         };
         CSSParsedDeclaration.prototype.isInlineLevel = function () {
-            return (contains(this.display, 4 /* INLINE */) ||
-                contains(this.display, 33554432 /* INLINE_BLOCK */) ||
-                contains(this.display, 268435456 /* INLINE_FLEX */) ||
-                contains(this.display, 536870912 /* INLINE_GRID */) ||
-                contains(this.display, 67108864 /* INLINE_LIST_ITEM */) ||
-                contains(this.display, 134217728 /* INLINE_TABLE */));
+            return (contains(this.display, 4 /* DISPLAY.INLINE */) ||
+                contains(this.display, 33554432 /* DISPLAY.INLINE_BLOCK */) ||
+                contains(this.display, 268435456 /* DISPLAY.INLINE_FLEX */) ||
+                contains(this.display, 536870912 /* DISPLAY.INLINE_GRID */) ||
+                contains(this.display, 67108864 /* DISPLAY.INLINE_LIST_ITEM */) ||
+                contains(this.display, 134217728 /* DISPLAY.INLINE_TABLE */));
         };
         return CSSParsedDeclaration;
     }());
@@ -4264,16 +5171,16 @@ var Reportly = (function () {
         tokenizer.write(value);
         var parser = new Parser(tokenizer.read());
         switch (descriptor.type) {
-            case 2 /* IDENT_VALUE */:
+            case 2 /* PropertyDescriptorParsingType.IDENT_VALUE */:
                 var token = parser.parseComponentValue();
                 return descriptor.parse(context, isIdentToken(token) ? token.value : descriptor.initialValue);
-            case 0 /* VALUE */:
+            case 0 /* PropertyDescriptorParsingType.VALUE */:
                 return descriptor.parse(context, parser.parseComponentValue());
-            case 1 /* LIST */:
+            case 1 /* PropertyDescriptorParsingType.LIST */:
                 return descriptor.parse(context, parser.parseComponentValues());
-            case 4 /* TOKEN_VALUE */:
+            case 4 /* PropertyDescriptorParsingType.TOKEN_VALUE */:
                 return parser.parseComponentValue();
-            case 3 /* TYPE_VALUE */:
+            case 3 /* PropertyDescriptorParsingType.TYPE_VALUE */:
                 switch (descriptor.format) {
                     case 'angle':
                         return angle.parse(context, parser.parseComponentValue());
@@ -4299,20 +5206,20 @@ var Reportly = (function () {
         var attribute = element.getAttribute(elementDebuggerAttribute);
         switch (attribute) {
             case 'all':
-                return 1 /* ALL */;
+                return 1 /* DebuggerType.ALL */;
             case 'clone':
-                return 2 /* CLONE */;
+                return 2 /* DebuggerType.CLONE */;
             case 'parse':
-                return 3 /* PARSE */;
+                return 3 /* DebuggerType.PARSE */;
             case 'render':
-                return 4 /* RENDER */;
+                return 4 /* DebuggerType.RENDER */;
             default:
-                return 0 /* NONE */;
+                return 0 /* DebuggerType.NONE */;
         }
     };
     var isDebugging = function (element, type) {
         var elementType = getElementDebugType(element);
-        return elementType === 1 /* ALL */ || type === elementType;
+        return elementType === 1 /* DebuggerType.ALL */ || type === elementType;
     };
 
     var ElementContainer = /** @class */ (function () {
@@ -4321,7 +5228,7 @@ var Reportly = (function () {
             this.textNodes = [];
             this.elements = [];
             this.flags = 0;
-            if (isDebugging(element, 3 /* PARSE */)) {
+            if (isDebugging(element, 3 /* DebuggerType.PARSE */)) {
                 debugger;
             }
             this.styles = new CSSParsedDeclaration(context, window.getComputedStyle(element, null));
@@ -4333,10 +5240,14 @@ var Reportly = (function () {
                     // getBoundingClientRect takes transforms into account
                     element.style.transform = 'none';
                 }
+                if (this.styles.rotate !== null) {
+                    // Handle rotate property similarly to transform
+                    element.style.rotate = 'none';
+                }
             }
             this.bounds = parseBounds(this.context, element);
-            if (isDebugging(element, 4 /* RENDER */)) {
-                this.flags |= 16 /* DEBUG_RENDER */;
+            if (isDebugging(element, 4 /* DebuggerType.RENDER */)) {
+                this.flags |= 16 /* FLAGS.DEBUG_RENDER */;
             }
         }
         return ElementContainer;
@@ -4730,7 +5641,7 @@ var Reportly = (function () {
             var range = document.createRange();
             if (range.getBoundingClientRect) {
                 var testElement = document.createElement('boundtest');
-                testElement.style.height = TEST_HEIGHT + "px";
+                testElement.style.height = "".concat(TEST_HEIGHT, "px");
                 testElement.style.display = 'block';
                 document.body.appendChild(testElement);
                 range.selectNode(testElement);
@@ -4820,8 +5731,8 @@ var Reportly = (function () {
             ctx.fillStyle = 'red';
             ctx.fillRect(0, 0, size, size);
             var node = document.createElement('div');
-            node.style.backgroundImage = "url(" + greenImageSrc + ")";
-            node.style.height = size + "px";
+            node.style.backgroundImage = "url(".concat(greenImageSrc, ")");
+            node.style.height = "".concat(size, "px");
             // Firefox 55 does not render inline <img /> tags
             return isGreenPixel(data)
                 ? loadSerializedSVG$1(createForeignObjectSVG(size, size, 0, 0, node))
@@ -4854,7 +5765,7 @@ var Reportly = (function () {
             var img = new Image();
             img.onload = function () { return resolve(img); };
             img.onerror = reject;
-            img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(new XMLSerializer().serializeToString(svg));
+            img.src = "data:image/svg+xml;charset=utf-8,".concat(encodeURIComponent(new XMLSerializer().serializeToString(svg)));
         });
     };
     var FEATURES = {
@@ -4998,7 +5909,7 @@ var Reportly = (function () {
     var breakWords = function (str, styles) {
         var breaker = LineBreaker(str, {
             lineBreak: styles.lineBreak,
-            wordBreak: styles.overflowWrap === "break-word" /* BREAK_WORD */ ? 'break-word' : styles.wordBreak
+            wordBreak: styles.overflowWrap === "break-word" /* OVERFLOW_WRAP.BREAK_WORD */ ? 'break-word' : styles.wordBreak
         });
         var words = [];
         var bk;
@@ -5039,11 +5950,11 @@ var Reportly = (function () {
     }());
     var transform = function (text, transform) {
         switch (transform) {
-            case 1 /* LOWERCASE */:
+            case 1 /* TEXT_TRANSFORM.LOWERCASE */:
                 return text.toLowerCase();
-            case 3 /* CAPITALIZE */:
+            case 3 /* TEXT_TRANSFORM.CAPITALIZE */:
                 return text.replace(CAPITALIZE, capitalize);
-            case 2 /* UPPERCASE */:
+            case 2 /* TEXT_TRANSFORM.UPPERCASE */:
                 return text.toUpperCase();
             default:
                 return text;
@@ -5088,9 +5999,9 @@ var Reportly = (function () {
             var _this = _super.call(this, context, img) || this;
             var s = new XMLSerializer();
             var bounds = parseBounds(context, img);
-            img.setAttribute('width', bounds.width + "px");
-            img.setAttribute('height', bounds.height + "px");
-            _this.svg = "data:image/svg+xml," + encodeURIComponent(s.serializeToString(img));
+            img.setAttribute('width', "".concat(bounds.width, "px"));
+            img.setAttribute('height', "".concat(bounds.height, "px"));
+            _this.svg = "data:image/svg+xml,".concat(encodeURIComponent(s.serializeToString(img)));
             _this.intrinsicWidth = img.width.baseVal.value;
             _this.intrinsicHeight = img.height.baseVal.value;
             _this.context.cache.addImage(_this.svg);
@@ -5122,7 +6033,7 @@ var Reportly = (function () {
 
     var CHECKBOX_BORDER_RADIUS = [
         {
-            type: 15 /* DIMENSION_TOKEN */,
+            type: 15 /* TokenType.DIMENSION_TOKEN */,
             flags: 0,
             unit: 'px',
             number: 3
@@ -5130,7 +6041,7 @@ var Reportly = (function () {
     ];
     var RADIO_BORDER_RADIUS = [
         {
-            type: 16 /* PERCENTAGE_TOKEN */,
+            type: 16 /* TokenType.PERCENTAGE_TOKEN */,
             flags: 0,
             number: 50
         }
@@ -5175,9 +6086,9 @@ var Reportly = (function () {
                     _this.styles.borderRightStyle =
                         _this.styles.borderBottomStyle =
                             _this.styles.borderLeftStyle =
-                                1 /* SOLID */;
-                _this.styles.backgroundClip = [0 /* BORDER_BOX */];
-                _this.styles.backgroundOrigin = [0 /* BORDER_BOX */];
+                                1 /* BORDER_STYLE.SOLID */;
+                _this.styles.backgroundClip = [0 /* BACKGROUND_CLIP.BORDER_BOX */];
+                _this.styles.backgroundOrigin = [0 /* BACKGROUND_ORIGIN.BORDER_BOX */];
                 _this.bounds = reformatInputBounds(_this.bounds);
             }
             switch (_this.type) {
@@ -5259,7 +6170,8 @@ var Reportly = (function () {
     var parseNodeTree = function (context, node, parent, root) {
         for (var childNode = node.firstChild, nextNode = void 0; childNode; childNode = nextNode) {
             nextNode = childNode.nextSibling;
-            if (isTextNode(childNode) && childNode.data.trim().length > 0) {
+            // Fixes #2238 #1624 - Fix the issue of TextNode content being overlooked in rendering due to being perceived as blank by trim().
+            if (isTextNode(childNode) && childNode.data.length > 0) {
                 parent.textNodes.push(new TextContainer(context, childNode, parent.styles));
             }
             else if (isElementNode(childNode)) {
@@ -5270,13 +6182,13 @@ var Reportly = (function () {
                     var container = createContainer(context, childNode);
                     if (container.styles.isVisible()) {
                         if (createsRealStackingContext(childNode, container, root)) {
-                            container.flags |= 4 /* CREATES_REAL_STACKING_CONTEXT */;
+                            container.flags |= 4 /* FLAGS.CREATES_REAL_STACKING_CONTEXT */;
                         }
                         else if (createsStackingContext(container.styles)) {
-                            container.flags |= 2 /* CREATES_STACKING_CONTEXT */;
+                            container.flags |= 2 /* FLAGS.CREATES_STACKING_CONTEXT */;
                         }
                         if (LIST_OWNERS.indexOf(childNode.tagName) !== -1) {
-                            container.flags |= 8 /* IS_LIST_OWNER */;
+                            container.flags |= 8 /* FLAGS.IS_LIST_OWNER */;
                         }
                         parent.elements.push(container);
                         childNode.slot;
@@ -5325,7 +6237,7 @@ var Reportly = (function () {
     };
     var parseTree = function (context, element) {
         var container = createContainer(context, element);
-        container.flags |= 4 /* CREATES_REAL_STACKING_CONTEXT */;
+        container.flags |= 4 /* FLAGS.CREATES_REAL_STACKING_CONTEXT */;
         parseNodeTree(context, element, container, container);
         return container;
     };
@@ -5593,7 +6505,7 @@ var Reportly = (function () {
     var CJK_HUNDRED_COEFFICIENTS = 1 << 3;
     var createCJKCounter = function (value, numbers, multipliers, negativeSign, suffix, flags) {
         if (value < -9999 || value > 9999) {
-            return createCounterText(value, 4 /* CJK_DECIMAL */, suffix.length > 0);
+            return createCounterText(value, 4 /* LIST_STYLE_TYPE.CJK_DECIMAL */, suffix.length > 0);
         }
         var tmp = Math.abs(value);
         var string = suffix;
@@ -5629,101 +6541,101 @@ var Reportly = (function () {
         var koreanSuffix = appendSuffix ? ', ' : '';
         var spaceSuffix = appendSuffix ? ' ' : '';
         switch (type) {
-            case 0 /* DISC */:
+            case 0 /* LIST_STYLE_TYPE.DISC */:
                 return '•' + spaceSuffix;
-            case 1 /* CIRCLE */:
+            case 1 /* LIST_STYLE_TYPE.CIRCLE */:
                 return '◦' + spaceSuffix;
-            case 2 /* SQUARE */:
+            case 2 /* LIST_STYLE_TYPE.SQUARE */:
                 return '◾' + spaceSuffix;
-            case 5 /* DECIMAL_LEADING_ZERO */:
+            case 5 /* LIST_STYLE_TYPE.DECIMAL_LEADING_ZERO */:
                 var string = createCounterStyleFromRange(value, 48, 57, true, defaultSuffix);
-                return string.length < 4 ? "0" + string : string;
-            case 4 /* CJK_DECIMAL */:
+                return string.length < 4 ? "0".concat(string) : string;
+            case 4 /* LIST_STYLE_TYPE.CJK_DECIMAL */:
                 return createCounterStyleFromSymbols(value, '〇一二三四五六七八九', cjkSuffix);
-            case 6 /* LOWER_ROMAN */:
-                return createAdditiveCounter(value, 1, 3999, ROMAN_UPPER, 3 /* DECIMAL */, defaultSuffix).toLowerCase();
-            case 7 /* UPPER_ROMAN */:
-                return createAdditiveCounter(value, 1, 3999, ROMAN_UPPER, 3 /* DECIMAL */, defaultSuffix);
-            case 8 /* LOWER_GREEK */:
+            case 6 /* LIST_STYLE_TYPE.LOWER_ROMAN */:
+                return createAdditiveCounter(value, 1, 3999, ROMAN_UPPER, 3 /* LIST_STYLE_TYPE.DECIMAL */, defaultSuffix).toLowerCase();
+            case 7 /* LIST_STYLE_TYPE.UPPER_ROMAN */:
+                return createAdditiveCounter(value, 1, 3999, ROMAN_UPPER, 3 /* LIST_STYLE_TYPE.DECIMAL */, defaultSuffix);
+            case 8 /* LIST_STYLE_TYPE.LOWER_GREEK */:
                 return createCounterStyleFromRange(value, 945, 969, false, defaultSuffix);
-            case 9 /* LOWER_ALPHA */:
+            case 9 /* LIST_STYLE_TYPE.LOWER_ALPHA */:
                 return createCounterStyleFromRange(value, 97, 122, false, defaultSuffix);
-            case 10 /* UPPER_ALPHA */:
+            case 10 /* LIST_STYLE_TYPE.UPPER_ALPHA */:
                 return createCounterStyleFromRange(value, 65, 90, false, defaultSuffix);
-            case 11 /* ARABIC_INDIC */:
+            case 11 /* LIST_STYLE_TYPE.ARABIC_INDIC */:
                 return createCounterStyleFromRange(value, 1632, 1641, true, defaultSuffix);
-            case 12 /* ARMENIAN */:
-            case 49 /* UPPER_ARMENIAN */:
-                return createAdditiveCounter(value, 1, 9999, ARMENIAN, 3 /* DECIMAL */, defaultSuffix);
-            case 35 /* LOWER_ARMENIAN */:
-                return createAdditiveCounter(value, 1, 9999, ARMENIAN, 3 /* DECIMAL */, defaultSuffix).toLowerCase();
-            case 13 /* BENGALI */:
+            case 12 /* LIST_STYLE_TYPE.ARMENIAN */:
+            case 49 /* LIST_STYLE_TYPE.UPPER_ARMENIAN */:
+                return createAdditiveCounter(value, 1, 9999, ARMENIAN, 3 /* LIST_STYLE_TYPE.DECIMAL */, defaultSuffix);
+            case 35 /* LIST_STYLE_TYPE.LOWER_ARMENIAN */:
+                return createAdditiveCounter(value, 1, 9999, ARMENIAN, 3 /* LIST_STYLE_TYPE.DECIMAL */, defaultSuffix).toLowerCase();
+            case 13 /* LIST_STYLE_TYPE.BENGALI */:
                 return createCounterStyleFromRange(value, 2534, 2543, true, defaultSuffix);
-            case 14 /* CAMBODIAN */:
-            case 30 /* KHMER */:
+            case 14 /* LIST_STYLE_TYPE.CAMBODIAN */:
+            case 30 /* LIST_STYLE_TYPE.KHMER */:
                 return createCounterStyleFromRange(value, 6112, 6121, true, defaultSuffix);
-            case 15 /* CJK_EARTHLY_BRANCH */:
+            case 15 /* LIST_STYLE_TYPE.CJK_EARTHLY_BRANCH */:
                 return createCounterStyleFromSymbols(value, '子丑寅卯辰巳午未申酉戌亥', cjkSuffix);
-            case 16 /* CJK_HEAVENLY_STEM */:
+            case 16 /* LIST_STYLE_TYPE.CJK_HEAVENLY_STEM */:
                 return createCounterStyleFromSymbols(value, '甲乙丙丁戊己庚辛壬癸', cjkSuffix);
-            case 17 /* CJK_IDEOGRAPHIC */:
-            case 48 /* TRAD_CHINESE_INFORMAL */:
+            case 17 /* LIST_STYLE_TYPE.CJK_IDEOGRAPHIC */:
+            case 48 /* LIST_STYLE_TYPE.TRAD_CHINESE_INFORMAL */:
                 return createCJKCounter(value, '零一二三四五六七八九', CHINESE_INFORMAL_MULTIPLIERS, '負', cjkSuffix, CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS | CJK_HUNDRED_COEFFICIENTS);
-            case 47 /* TRAD_CHINESE_FORMAL */:
+            case 47 /* LIST_STYLE_TYPE.TRAD_CHINESE_FORMAL */:
                 return createCJKCounter(value, '零壹貳參肆伍陸柒捌玖', CHINESE_FORMAL_MULTIPLIERS, '負', cjkSuffix, CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS | CJK_HUNDRED_COEFFICIENTS);
-            case 42 /* SIMP_CHINESE_INFORMAL */:
+            case 42 /* LIST_STYLE_TYPE.SIMP_CHINESE_INFORMAL */:
                 return createCJKCounter(value, '零一二三四五六七八九', CHINESE_INFORMAL_MULTIPLIERS, '负', cjkSuffix, CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS | CJK_HUNDRED_COEFFICIENTS);
-            case 41 /* SIMP_CHINESE_FORMAL */:
+            case 41 /* LIST_STYLE_TYPE.SIMP_CHINESE_FORMAL */:
                 return createCJKCounter(value, '零壹贰叁肆伍陆柒捌玖', CHINESE_FORMAL_MULTIPLIERS, '负', cjkSuffix, CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS | CJK_HUNDRED_COEFFICIENTS);
-            case 26 /* JAPANESE_INFORMAL */:
+            case 26 /* LIST_STYLE_TYPE.JAPANESE_INFORMAL */:
                 return createCJKCounter(value, '〇一二三四五六七八九', '十百千万', JAPANESE_NEGATIVE, cjkSuffix, 0);
-            case 25 /* JAPANESE_FORMAL */:
+            case 25 /* LIST_STYLE_TYPE.JAPANESE_FORMAL */:
                 return createCJKCounter(value, '零壱弐参四伍六七八九', '拾百千万', JAPANESE_NEGATIVE, cjkSuffix, CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS);
-            case 31 /* KOREAN_HANGUL_FORMAL */:
+            case 31 /* LIST_STYLE_TYPE.KOREAN_HANGUL_FORMAL */:
                 return createCJKCounter(value, '영일이삼사오육칠팔구', '십백천만', KOREAN_NEGATIVE, koreanSuffix, CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS);
-            case 33 /* KOREAN_HANJA_INFORMAL */:
+            case 33 /* LIST_STYLE_TYPE.KOREAN_HANJA_INFORMAL */:
                 return createCJKCounter(value, '零一二三四五六七八九', '十百千萬', KOREAN_NEGATIVE, koreanSuffix, 0);
-            case 32 /* KOREAN_HANJA_FORMAL */:
+            case 32 /* LIST_STYLE_TYPE.KOREAN_HANJA_FORMAL */:
                 return createCJKCounter(value, '零壹貳參四五六七八九', '拾百千', KOREAN_NEGATIVE, koreanSuffix, CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS);
-            case 18 /* DEVANAGARI */:
+            case 18 /* LIST_STYLE_TYPE.DEVANAGARI */:
                 return createCounterStyleFromRange(value, 0x966, 0x96f, true, defaultSuffix);
-            case 20 /* GEORGIAN */:
-                return createAdditiveCounter(value, 1, 19999, GEORGIAN, 3 /* DECIMAL */, defaultSuffix);
-            case 21 /* GUJARATI */:
+            case 20 /* LIST_STYLE_TYPE.GEORGIAN */:
+                return createAdditiveCounter(value, 1, 19999, GEORGIAN, 3 /* LIST_STYLE_TYPE.DECIMAL */, defaultSuffix);
+            case 21 /* LIST_STYLE_TYPE.GUJARATI */:
                 return createCounterStyleFromRange(value, 0xae6, 0xaef, true, defaultSuffix);
-            case 22 /* GURMUKHI */:
+            case 22 /* LIST_STYLE_TYPE.GURMUKHI */:
                 return createCounterStyleFromRange(value, 0xa66, 0xa6f, true, defaultSuffix);
-            case 22 /* HEBREW */:
-                return createAdditiveCounter(value, 1, 10999, HEBREW, 3 /* DECIMAL */, defaultSuffix);
-            case 23 /* HIRAGANA */:
+            case 52 /* LIST_STYLE_TYPE.HEBREW */:
+                return createAdditiveCounter(value, 1, 10999, HEBREW, 3 /* LIST_STYLE_TYPE.DECIMAL */, defaultSuffix);
+            case 23 /* LIST_STYLE_TYPE.HIRAGANA */:
                 return createCounterStyleFromSymbols(value, 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわゐゑをん');
-            case 24 /* HIRAGANA_IROHA */:
+            case 24 /* LIST_STYLE_TYPE.HIRAGANA_IROHA */:
                 return createCounterStyleFromSymbols(value, 'いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす');
-            case 27 /* KANNADA */:
+            case 27 /* LIST_STYLE_TYPE.KANNADA */:
                 return createCounterStyleFromRange(value, 0xce6, 0xcef, true, defaultSuffix);
-            case 28 /* KATAKANA */:
+            case 28 /* LIST_STYLE_TYPE.KATAKANA */:
                 return createCounterStyleFromSymbols(value, 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲン', cjkSuffix);
-            case 29 /* KATAKANA_IROHA */:
+            case 29 /* LIST_STYLE_TYPE.KATAKANA_IROHA */:
                 return createCounterStyleFromSymbols(value, 'イロハニホヘトチリヌルヲワカヨタレソツネナラムウヰノオクヤマケフコエテアサキユメミシヱヒモセス', cjkSuffix);
-            case 34 /* LAO */:
+            case 34 /* LIST_STYLE_TYPE.LAO */:
                 return createCounterStyleFromRange(value, 0xed0, 0xed9, true, defaultSuffix);
-            case 37 /* MONGOLIAN */:
+            case 37 /* LIST_STYLE_TYPE.MONGOLIAN */:
                 return createCounterStyleFromRange(value, 0x1810, 0x1819, true, defaultSuffix);
-            case 38 /* MYANMAR */:
+            case 38 /* LIST_STYLE_TYPE.MYANMAR */:
                 return createCounterStyleFromRange(value, 0x1040, 0x1049, true, defaultSuffix);
-            case 39 /* ORIYA */:
+            case 39 /* LIST_STYLE_TYPE.ORIYA */:
                 return createCounterStyleFromRange(value, 0xb66, 0xb6f, true, defaultSuffix);
-            case 40 /* PERSIAN */:
+            case 40 /* LIST_STYLE_TYPE.PERSIAN */:
                 return createCounterStyleFromRange(value, 0x6f0, 0x6f9, true, defaultSuffix);
-            case 43 /* TAMIL */:
+            case 43 /* LIST_STYLE_TYPE.TAMIL */:
                 return createCounterStyleFromRange(value, 0xbe6, 0xbef, true, defaultSuffix);
-            case 44 /* TELUGU */:
+            case 44 /* LIST_STYLE_TYPE.TELUGU */:
                 return createCounterStyleFromRange(value, 0xc66, 0xc6f, true, defaultSuffix);
-            case 45 /* THAI */:
+            case 45 /* LIST_STYLE_TYPE.THAI */:
                 return createCounterStyleFromRange(value, 0xe50, 0xe59, true, defaultSuffix);
-            case 46 /* TIBETAN */:
+            case 46 /* LIST_STYLE_TYPE.TIBETAN */:
                 return createCounterStyleFromRange(value, 0xf20, 0xf29, true, defaultSuffix);
-            case 3 /* DECIMAL */:
+            case 3 /* LIST_STYLE_TYPE.DECIMAL */:
             default:
                 return createCounterStyleFromRange(value, 48, 57, true, defaultSuffix);
         }
@@ -5773,7 +6685,7 @@ var Reportly = (function () {
                             onclone = this.options.onclone;
                             referenceElement = this.clonedReferenceElement;
                             if (typeof referenceElement === 'undefined') {
-                                return [2 /*return*/, Promise.reject("Error finding the " + this.referenceElement.nodeName + " in the cloned document")];
+                                return [2 /*return*/, Promise.reject("Error finding the ".concat(this.referenceElement.nodeName, " in the cloned document"))];
                             }
                             if (!(documentClone.fonts && documentClone.fonts.ready)) return [3 /*break*/, 2];
                             return [4 /*yield*/, documentClone.fonts.ready];
@@ -5796,16 +6708,33 @@ var Reportly = (function () {
                     }
                 });
             }); });
+            /**
+             * The baseURI of the document will be lost after documentClone.open().
+             * We save it before open() to preserve the original base URI for resource resolution.
+             * */
+            var baseUri = documentClone.baseURI;
             documentClone.open();
-            documentClone.write(serializeDoctype(document.doctype) + "<html></html>");
+            documentClone.write("".concat(serializeDoctype(document.doctype), "<html></html>"));
             // Chrome scrolls the parent document for some reason after the write to the cloned window???
             restoreOwnerScroll(this.referenceElement.ownerDocument, scrollX, scrollY);
-            documentClone.replaceChild(documentClone.adoptNode(this.documentElement), documentClone.documentElement);
+            /**
+             * Note: adoptNode() should be called AFTER documentClone.open() and close()
+             *
+             * In Chrome, calling adoptNode() before or during open/write may cause
+             * styles with uppercase characters in class names (e.g. ".MyClass") to not apply correctly.
+             *
+             * Fix:
+             *   - Make sure adoptNode() is called after documentClone.open() and close()
+             *   - This allows Chrome to properly match and apply all CSS rules including mixed-case class selectors.
+             * */
+            var adoptedNode = documentClone.adoptNode(this.documentElement);
+            addBase(adoptedNode, baseUri);
+            documentClone.replaceChild(adoptedNode, documentClone.documentElement);
             documentClone.close();
             return iframeLoad;
         };
         DocumentCloner.prototype.createElementClone = function (node) {
-            if (isDebugging(node, 2 /* CLONE */)) {
+            if (isDebugging(node, 2 /* DebuggerType.CLONE */)) {
                 debugger;
             }
             if (isCanvasElement(node)) {
@@ -5878,7 +6807,7 @@ var Reportly = (function () {
                 clonedCanvas.width = canvas.width;
                 clonedCanvas.height = canvas.height;
                 var ctx = canvas.getContext('2d');
-                var clonedCtx = clonedCanvas.getContext('2d');
+                var clonedCtx = clonedCanvas.getContext('2d', { willReadFrequently: true });
                 if (clonedCtx) {
                     if (!this.options.allowTaint && ctx) {
                         clonedCtx.putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);
@@ -6013,16 +6942,16 @@ var Reportly = (function () {
             var anonymousReplacedElement = document.createElement('html2canvaspseudoelement');
             copyCSSStyles(style, anonymousReplacedElement);
             declaration.content.forEach(function (token) {
-                if (token.type === 0 /* STRING_TOKEN */) {
+                if (token.type === 0 /* TokenType.STRING_TOKEN */) {
                     anonymousReplacedElement.appendChild(document.createTextNode(token.value));
                 }
-                else if (token.type === 22 /* URL_TOKEN */) {
+                else if (token.type === 22 /* TokenType.URL_TOKEN */) {
                     var img = document.createElement('img');
                     img.src = token.value;
                     img.style.opacity = '1';
                     anonymousReplacedElement.appendChild(img);
                 }
-                else if (token.type === 18 /* FUNCTION */) {
+                else if (token.type === 18 /* TokenType.FUNCTION */) {
                     if (token.name === 'attr') {
                         var attr = token.values.filter(isIdentToken);
                         if (attr.length) {
@@ -6035,7 +6964,7 @@ var Reportly = (function () {
                             var counterState = _this.counters.getCounterValue(counter.value);
                             var counterType = counterStyle && isIdentToken(counterStyle)
                                 ? listStyleType.parse(_this.context, counterStyle.value)
-                                : 3 /* DECIMAL */;
+                                : 3 /* LIST_STYLE_TYPE.DECIMAL */;
                             anonymousReplacedElement.appendChild(document.createTextNode(createCounterText(counterState, counterType, false)));
                         }
                     }
@@ -6045,8 +6974,8 @@ var Reportly = (function () {
                             var counterStates = _this.counters.getCounterValues(counter.value);
                             var counterType_1 = counterStyle && isIdentToken(counterStyle)
                                 ? listStyleType.parse(_this.context, counterStyle.value)
-                                : 3 /* DECIMAL */;
-                            var separator = delim && delim.type === 0 /* STRING_TOKEN */ ? delim.value : '';
+                                : 3 /* LIST_STYLE_TYPE.DECIMAL */;
+                            var separator = delim && delim.type === 0 /* TokenType.STRING_TOKEN */ ? delim.value : '';
                             var text = counterStates
                                 .map(function (value) { return createCounterText(value, counterType_1, false); })
                                 .join(separator);
@@ -6055,7 +6984,7 @@ var Reportly = (function () {
                     }
                     else ;
                 }
-                else if (token.type === 20 /* IDENT_TOKEN */) {
+                else if (token.type === 20 /* TokenType.IDENT_TOKEN */) {
                     switch (token.value) {
                         case 'open-quote':
                             anonymousReplacedElement.appendChild(document.createTextNode(getQuote(declaration.quotes, _this.quoteDepth++, true)));
@@ -6069,10 +6998,10 @@ var Reportly = (function () {
                     }
                 }
             });
-            anonymousReplacedElement.className = PSEUDO_HIDE_ELEMENT_CLASS_BEFORE + " " + PSEUDO_HIDE_ELEMENT_CLASS_AFTER;
+            anonymousReplacedElement.className = "".concat(PSEUDO_HIDE_ELEMENT_CLASS_BEFORE, " ").concat(PSEUDO_HIDE_ELEMENT_CLASS_AFTER);
             var newClassName = pseudoElt === PseudoElementType.BEFORE
-                ? " " + PSEUDO_HIDE_ELEMENT_CLASS_BEFORE
-                : " " + PSEUDO_HIDE_ELEMENT_CLASS_AFTER;
+                ? " ".concat(PSEUDO_HIDE_ELEMENT_CLASS_BEFORE)
+                : " ".concat(PSEUDO_HIDE_ELEMENT_CLASS_AFTER);
             if (isSVGElementNode(clone)) {
                 clone.className.baseValue += newClassName;
             }
@@ -6146,8 +7075,8 @@ var Reportly = (function () {
         });
     };
     var ignoredStyleProperties = [
-        'all',
-        'd',
+        'all', // #2476
+        'd', // #2483
         'content' // Safari shows pseudoelements if content is set
     ];
     var copyCSSStyles = function (style, target) {
@@ -6171,10 +7100,10 @@ var Reportly = (function () {
                 str += doctype.internalSubset;
             }
             if (doctype.publicId) {
-                str += "\"" + doctype.publicId + "\"";
+                str += "\"".concat(doctype.publicId, "\"");
             }
             if (doctype.systemId) {
-                str += "\"" + doctype.systemId + "\"";
+                str += "\"".concat(doctype.systemId, "\"");
             }
             str += '>';
         }
@@ -6198,7 +7127,7 @@ var Reportly = (function () {
     var PSEUDO_HIDE_ELEMENT_CLASS_AFTER = '___html2canvas___pseudoelement_after';
     var PSEUDO_HIDE_ELEMENT_STYLE = "{\n    content: \"\" !important;\n    display: none !important;\n}";
     var createPseudoHideStyles = function (body) {
-        createStyles(body, "." + PSEUDO_HIDE_ELEMENT_CLASS_BEFORE + PSEUDO_BEFORE + PSEUDO_HIDE_ELEMENT_STYLE + "\n         ." + PSEUDO_HIDE_ELEMENT_CLASS_AFTER + PSEUDO_AFTER + PSEUDO_HIDE_ELEMENT_STYLE);
+        createStyles(body, ".".concat(PSEUDO_HIDE_ELEMENT_CLASS_BEFORE).concat(PSEUDO_BEFORE).concat(PSEUDO_HIDE_ELEMENT_STYLE, "\n         .").concat(PSEUDO_HIDE_ELEMENT_CLASS_AFTER).concat(PSEUDO_AFTER).concat(PSEUDO_HIDE_ELEMENT_STYLE));
     };
     var createStyles = function (body, styles) {
         var document = body.ownerDocument;
@@ -6208,6 +7137,13 @@ var Reportly = (function () {
             body.appendChild(style);
         }
     };
+    var addBase = function (targetELement, baseUri) {
+        var _a;
+        var baseNode = targetELement.ownerDocument.createElement('base');
+        baseNode.href = baseUri;
+        var headEle = targetELement.getElementsByTagName('head').item(0);
+        headEle === null || headEle === void 0 ? void 0 : headEle.insertBefore(baseNode, (_a = headEle === null || headEle === void 0 ? void 0 : headEle.firstChild) !== null && _a !== void 0 ? _a : null);
+    };
 
     var CacheStorage = /** @class */ (function () {
         function CacheStorage() {
@@ -6257,12 +7193,21 @@ var Reportly = (function () {
         };
         Cache.prototype.loadImage = function (key) {
             return __awaiter(this, void 0, void 0, function () {
-                var isSameOrigin, useCORS, useProxy, src;
+                var isSameOrigin, _a, useCORS, useProxy, src;
                 var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
-                            isSameOrigin = CacheStorage.isSameOrigin(key);
+                            if (!(typeof this._options.customIsSameOrigin === 'function')) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this._options.customIsSameOrigin(key, CacheStorage.isSameOrigin)];
+                        case 1:
+                            _a = _b.sent();
+                            return [3 /*break*/, 3];
+                        case 2:
+                            _a = CacheStorage.isSameOrigin(key);
+                            _b.label = 3;
+                        case 3:
+                            isSameOrigin = _a;
                             useCORS = !isInlineImage(key) && this._options.useCORS === true && FEATURES.SUPPORT_CORS_IMAGES && !isSameOrigin;
                             useProxy = !isInlineImage(key) &&
                                 !isSameOrigin &&
@@ -6279,13 +7224,13 @@ var Reportly = (function () {
                                 return [2 /*return*/];
                             }
                             src = key;
-                            if (!useProxy) return [3 /*break*/, 2];
+                            if (!useProxy) return [3 /*break*/, 5];
                             return [4 /*yield*/, this.proxy(src)];
-                        case 1:
-                            src = _a.sent();
-                            _a.label = 2;
-                        case 2:
-                            this.context.logger.debug("Added image " + key.substring(0, 256));
+                        case 4:
+                            src = _b.sent();
+                            _b.label = 5;
+                        case 5:
+                            this.context.logger.debug("Added image ".concat(key.substring(0, 256)));
                             return [4 /*yield*/, new Promise(function (resolve, reject) {
                                     var img = new Image();
                                     img.onload = function () { return resolve(img); };
@@ -6300,10 +7245,10 @@ var Reportly = (function () {
                                         setTimeout(function () { return resolve(img); }, 500);
                                     }
                                     if (_this._options.imageTimeout > 0) {
-                                        setTimeout(function () { return reject("Timed out (" + _this._options.imageTimeout + "ms) loading image"); }, _this._options.imageTimeout);
+                                        setTimeout(function () { return reject("Timed out (".concat(_this._options.imageTimeout, "ms) loading image")); }, _this._options.imageTimeout);
                                     }
                                 })];
-                        case 3: return [2 /*return*/, _a.sent()];
+                        case 6: return [2 /*return*/, _b.sent()];
                     }
                 });
             });
@@ -6337,19 +7282,19 @@ var Reportly = (function () {
                         }
                     }
                     else {
-                        reject("Failed to proxy resource " + key + " with status code " + xhr.status);
+                        reject("Failed to proxy resource ".concat(key, " with status code ").concat(xhr.status));
                     }
                 };
                 xhr.onerror = reject;
                 var queryString = proxy.indexOf('?') > -1 ? '&' : '?';
-                xhr.open('GET', "" + proxy + queryString + "url=" + encodeURIComponent(src) + "&responseType=" + responseType);
+                xhr.open('GET', "".concat(proxy).concat(queryString, "url=").concat(encodeURIComponent(src), "&responseType=").concat(responseType));
                 if (responseType !== 'text' && xhr instanceof XMLHttpRequest) {
                     xhr.responseType = responseType;
                 }
                 if (_this._options.imageTimeout) {
                     var timeout_1 = _this._options.imageTimeout;
                     xhr.timeout = timeout_1;
-                    xhr.ontimeout = function () { return reject("Timed out (" + timeout_1 + "ms) proxying " + key); };
+                    xhr.ontimeout = function () { return reject("Timed out (".concat(timeout_1, "ms) proxying ").concat(key)); };
                 }
                 xhr.send();
             });
@@ -6367,7 +7312,7 @@ var Reportly = (function () {
 
     var Vector = /** @class */ (function () {
         function Vector(x, y) {
-            this.type = 0 /* VECTOR */;
+            this.type = 0 /* PathType.VECTOR */;
             this.x = x;
             this.y = y;
         }
@@ -6382,7 +7327,7 @@ var Reportly = (function () {
     };
     var BezierCurve = /** @class */ (function () {
         function BezierCurve(start, startControl, endControl, end) {
-            this.type = 1 /* BEZIER_CURVE */;
+            this.type = 1 /* PathType.BEZIER_CURVE */;
             this.start = start;
             this.startControl = startControl;
             this.endControl = endControl;
@@ -6405,7 +7350,7 @@ var Reportly = (function () {
         };
         return BezierCurve;
     }());
-    var isBezierCurve = function (path) { return path.type === 1 /* BEZIER_CURVE */; };
+    var isBezierCurve = function (path) { return path.type === 1 /* PathType.BEZIER_CURVE */; };
 
     var BoundCurves = /** @class */ (function () {
         function BoundCurves(element) {
@@ -6592,8 +7537,8 @@ var Reportly = (function () {
             this.offsetX = offsetX;
             this.offsetY = offsetY;
             this.matrix = matrix;
-            this.type = 0 /* TRANSFORM */;
-            this.target = 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */;
+            this.type = 0 /* EffectType.TRANSFORM */;
+            this.target = 2 /* EffectTarget.BACKGROUND_BORDERS */ | 4 /* EffectTarget.CONTENT */;
         }
         return TransformEffect;
     }());
@@ -6601,23 +7546,23 @@ var Reportly = (function () {
         function ClipEffect(path, target) {
             this.path = path;
             this.target = target;
-            this.type = 1 /* CLIP */;
+            this.type = 1 /* EffectType.CLIP */;
         }
         return ClipEffect;
     }());
     var OpacityEffect = /** @class */ (function () {
         function OpacityEffect(opacity) {
             this.opacity = opacity;
-            this.type = 2 /* OPACITY */;
-            this.target = 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */;
+            this.type = 2 /* EffectType.OPACITY */;
+            this.target = 2 /* EffectTarget.BACKGROUND_BORDERS */ | 4 /* EffectTarget.CONTENT */;
         }
         return OpacityEffect;
     }());
     var isTransformEffect = function (effect) {
-        return effect.type === 0 /* TRANSFORM */;
+        return effect.type === 0 /* EffectType.TRANSFORM */;
     };
-    var isClipEffect = function (effect) { return effect.type === 1 /* CLIP */; };
-    var isOpacityEffect = function (effect) { return effect.type === 2 /* OPACITY */; };
+    var isClipEffect = function (effect) { return effect.type === 1 /* EffectType.CLIP */; };
+    var isOpacityEffect = function (effect) { return effect.type === 2 /* EffectType.OPACITY */; };
 
     var equalPath = function (a, b) {
         if (a.length === b.length) {
@@ -6663,40 +7608,51 @@ var Reportly = (function () {
             if (this.container.styles.opacity < 1) {
                 this.effects.push(new OpacityEffect(this.container.styles.opacity));
             }
+            if (this.container.styles.rotate !== null) {
+                var offsetX = this.container.bounds.left + this.container.styles.transformOrigin[0].number;
+                var offsetY = this.container.bounds.top + this.container.styles.transformOrigin[1].number;
+                // Apply rotate property if present
+                var angle = this.container.styles.rotate;
+                var rad = (angle * Math.PI) / 180;
+                var cos = Math.cos(rad);
+                var sin = Math.sin(rad);
+                var rotateMatrix = [cos, sin, -sin, cos, 0, 0];
+                this.effects.push(new TransformEffect(offsetX, offsetY, rotateMatrix));
+            }
             if (this.container.styles.transform !== null) {
                 var offsetX = this.container.bounds.left + this.container.styles.transformOrigin[0].number;
                 var offsetY = this.container.bounds.top + this.container.styles.transformOrigin[1].number;
                 var matrix = this.container.styles.transform;
                 this.effects.push(new TransformEffect(offsetX, offsetY, matrix));
             }
-            if (this.container.styles.overflowX !== 0 /* VISIBLE */) {
+            if (this.container.styles.overflowX !== 0 /* OVERFLOW.VISIBLE */) {
                 var borderBox = calculateBorderBoxPath(this.curves);
                 var paddingBox = calculatePaddingBoxPath(this.curves);
                 if (equalPath(borderBox, paddingBox)) {
-                    this.effects.push(new ClipEffect(borderBox, 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */));
+                    this.effects.push(new ClipEffect(borderBox, 2 /* EffectTarget.BACKGROUND_BORDERS */ | 4 /* EffectTarget.CONTENT */));
                 }
                 else {
-                    this.effects.push(new ClipEffect(borderBox, 2 /* BACKGROUND_BORDERS */));
-                    this.effects.push(new ClipEffect(paddingBox, 4 /* CONTENT */));
+                    this.effects.push(new ClipEffect(borderBox, 2 /* EffectTarget.BACKGROUND_BORDERS */));
+                    this.effects.push(new ClipEffect(paddingBox, 4 /* EffectTarget.CONTENT */));
                 }
             }
         }
         ElementPaint.prototype.getEffects = function (target) {
-            var inFlow = [2 /* ABSOLUTE */, 3 /* FIXED */].indexOf(this.container.styles.position) === -1;
+            var inFlow = [2 /* POSITION.ABSOLUTE */, 3 /* POSITION.FIXED */].indexOf(this.container.styles.position) === -1;
             var parent = this.parent;
             var effects = this.effects.slice(0);
             while (parent) {
                 var croplessEffects = parent.effects.filter(function (effect) { return !isClipEffect(effect); });
-                if (inFlow || parent.container.styles.position !== 0 /* STATIC */ || !parent.parent) {
-                    effects.unshift.apply(effects, croplessEffects);
-                    inFlow = [2 /* ABSOLUTE */, 3 /* FIXED */].indexOf(parent.container.styles.position) === -1;
-                    if (parent.container.styles.overflowX !== 0 /* VISIBLE */) {
+                if (inFlow || parent.container.styles.position !== 0 /* POSITION.STATIC */ || !parent.parent) {
+                    inFlow = [2 /* POSITION.ABSOLUTE */, 3 /* POSITION.FIXED */].indexOf(parent.container.styles.position) === -1;
+                    if (parent.container.styles.overflowX !== 0 /* OVERFLOW.VISIBLE */) {
                         var borderBox = calculateBorderBoxPath(parent.curves);
                         var paddingBox = calculatePaddingBoxPath(parent.curves);
                         if (!equalPath(borderBox, paddingBox)) {
-                            effects.unshift(new ClipEffect(paddingBox, 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */));
+                            effects.unshift(new ClipEffect(paddingBox, 2 /* EffectTarget.BACKGROUND_BORDERS */ | 4 /* EffectTarget.CONTENT */));
                         }
                     }
+                    effects.unshift.apply(effects, croplessEffects);
                 }
                 else {
                     effects.unshift.apply(effects, croplessEffects);
@@ -6709,13 +7665,13 @@ var Reportly = (function () {
     }());
     var parseStackTree = function (parent, stackingContext, realStackingContext, listItems) {
         parent.container.elements.forEach(function (child) {
-            var treatAsRealStackingContext = contains(child.flags, 4 /* CREATES_REAL_STACKING_CONTEXT */);
-            var createsStackingContext = contains(child.flags, 2 /* CREATES_STACKING_CONTEXT */);
+            var treatAsRealStackingContext = contains(child.flags, 4 /* FLAGS.CREATES_REAL_STACKING_CONTEXT */);
+            var createsStackingContext = contains(child.flags, 2 /* FLAGS.CREATES_STACKING_CONTEXT */);
             var paintContainer = new ElementPaint(child, parent);
-            if (contains(child.styles.display, 2048 /* LIST_ITEM */)) {
+            if (contains(child.styles.display, 2048 /* DISPLAY.LIST_ITEM */)) {
                 listItems.push(paintContainer);
             }
-            var listOwnerItems = contains(child.flags, 8 /* IS_LIST_OWNER */) ? [] : listItems;
+            var listOwnerItems = contains(child.flags, 8 /* FLAGS.IS_LIST_OWNER */) ? [] : listItems;
             if (treatAsRealStackingContext || createsStackingContext) {
                 var parentStack = treatAsRealStackingContext || child.styles.isPositioned() ? realStackingContext : stackingContext;
                 var stack = new StackingContext(paintContainer);
@@ -6772,7 +7728,7 @@ var Reportly = (function () {
                 }
                 parseStackTree(paintContainer, stackingContext, realStackingContext, listOwnerItems);
             }
-            if (contains(child.flags, 8 /* IS_LIST_OWNER */)) {
+            if (contains(child.flags, 8 /* FLAGS.IS_LIST_OWNER */)) {
                 processListItems(child, listOwnerItems);
             }
         });
@@ -6913,19 +7869,19 @@ var Reportly = (function () {
     };
 
     var calculateBackgroundPositioningArea = function (backgroundOrigin, element) {
-        if (backgroundOrigin === 0 /* BORDER_BOX */) {
+        if (backgroundOrigin === 0 /* BACKGROUND_ORIGIN.BORDER_BOX */) {
             return element.bounds;
         }
-        if (backgroundOrigin === 2 /* CONTENT_BOX */) {
+        if (backgroundOrigin === 2 /* BACKGROUND_ORIGIN.CONTENT_BOX */) {
             return contentBox(element);
         }
         return paddingBox(element);
     };
     var calculateBackgroundPaintingArea = function (backgroundClip, element) {
-        if (backgroundClip === 0 /* BORDER_BOX */) {
+        if (backgroundClip === 0 /* BACKGROUND_CLIP.BORDER_BOX */) {
             return element.bounds;
         }
-        if (backgroundClip === 2 /* CONTENT_BOX */) {
+        if (backgroundClip === 2 /* BACKGROUND_CLIP.CONTENT_BOX */) {
             return contentBox(element);
         }
         return paddingBox(element);
@@ -6939,6 +7895,8 @@ var Reportly = (function () {
         var path = calculateBackgroundRepeatPath(getBackgroundValueForIndex(container.styles.backgroundRepeat, index), position, backgroundImageSize, backgroundPositioningArea, backgroundPaintingArea);
         var offsetX = Math.round(backgroundPositioningArea.left + position[0]);
         var offsetY = Math.round(backgroundPositioningArea.top + position[1]);
+        sizeWidth = Math.max(1, sizeWidth);
+        sizeHeight = Math.max(1, sizeHeight);
         return [path, offsetX, offsetY, sizeWidth, sizeHeight];
     };
     var isAuto = function (token) { return isIdentToken(token) && token.value === BACKGROUND_SIZE.AUTO; };
@@ -7053,21 +8011,21 @@ var Reportly = (function () {
         var x = _a[0], y = _a[1];
         var width = _b[0], height = _b[1];
         switch (repeat) {
-            case 2 /* REPEAT_X */:
+            case 2 /* BACKGROUND_REPEAT.REPEAT_X */:
                 return [
                     new Vector(Math.round(backgroundPositioningArea.left), Math.round(backgroundPositioningArea.top + y)),
                     new Vector(Math.round(backgroundPositioningArea.left + backgroundPositioningArea.width), Math.round(backgroundPositioningArea.top + y)),
                     new Vector(Math.round(backgroundPositioningArea.left + backgroundPositioningArea.width), Math.round(height + backgroundPositioningArea.top + y)),
                     new Vector(Math.round(backgroundPositioningArea.left), Math.round(height + backgroundPositioningArea.top + y))
                 ];
-            case 3 /* REPEAT_Y */:
+            case 3 /* BACKGROUND_REPEAT.REPEAT_Y */:
                 return [
                     new Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top)),
                     new Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.top)),
                     new Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.height + backgroundPositioningArea.top)),
                     new Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.height + backgroundPositioningArea.top))
                 ];
-            case 1 /* NO_REPEAT */:
+            case 1 /* BACKGROUND_REPEAT.NO_REPEAT */:
                 return [
                     new Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top + y)),
                     new Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.top + y)),
@@ -7127,7 +8085,7 @@ var Reportly = (function () {
             return { baseline: baseline, middle: middle };
         };
         FontMetrics.prototype.getMetrics = function (fontFamily, fontSize) {
-            var key = fontFamily + " " + fontSize;
+            var key = "".concat(fontFamily, " ").concat(fontSize);
             if (typeof this._data[key] === 'undefined') {
                 this._data[key] = this.parseMetrics(fontFamily, fontSize);
             }
@@ -7155,15 +8113,15 @@ var Reportly = (function () {
             if (!options.canvas) {
                 _this.canvas.width = Math.floor(options.width * options.scale);
                 _this.canvas.height = Math.floor(options.height * options.scale);
-                _this.canvas.style.width = options.width + "px";
-                _this.canvas.style.height = options.height + "px";
+                _this.canvas.style.width = "".concat(options.width, "px");
+                _this.canvas.style.height = "".concat(options.height, "px");
             }
             _this.fontMetrics = new FontMetrics(document);
             _this.ctx.scale(_this.options.scale, _this.options.scale);
             _this.ctx.translate(-options.x, -options.y);
             _this.ctx.textBaseline = 'bottom';
             _this._activeEffects = [];
-            _this.context.logger.debug("Canvas renderer initialized (" + options.width + "x" + options.height + ") with scale " + options.scale);
+            _this.context.logger.debug("Canvas renderer initialized (".concat(options.width, "x").concat(options.height, ") with scale ").concat(options.scale));
             return _this;
         }
         CanvasRenderer.prototype.applyEffects = function (effects) {
@@ -7215,7 +8173,7 @@ var Reportly = (function () {
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (contains(paint.container.flags, 16 /* DEBUG_RENDER */)) {
+                            if (contains(paint.container.flags, 16 /* FLAGS.DEBUG_RENDER */)) {
                                 debugger;
                             }
                             if (!paint.container.styles.isVisible()) return [3 /*break*/, 3];
@@ -7234,7 +8192,15 @@ var Reportly = (function () {
         CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing, baseline) {
             var _this = this;
             if (letterSpacing === 0) {
-                this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
+                // Fixed an issue with characters moving up in non-Firefox.
+                // https://github.com/niklasvh/html2canvas/issues/2107#issuecomment-692462900
+                if (navigator.userAgent.indexOf('Firefox') === -1) {
+                    this.ctx.textBaseline = 'ideographic';
+                    this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
+                }
+                else {
+                    this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
+                }
             }
             else {
                 var letters = segmentGraphemes(text.text);
@@ -7250,8 +8216,8 @@ var Reportly = (function () {
                 .join('');
             var fontFamily = fixIOSSystemFonts(styles.fontFamily).join(', ');
             var fontSize = isDimensionToken(styles.fontSize)
-                ? "" + styles.fontSize.number + styles.fontSize.unit
-                : styles.fontSize.number + "px";
+                ? "".concat(styles.fontSize.number).concat(styles.fontSize.unit)
+                : "".concat(styles.fontSize.number, "px");
             return [
                 [styles.fontStyle, fontVariant, styles.fontWeight, fontSize, fontFamily].join(' '),
                 fontFamily,
@@ -7260,22 +8226,21 @@ var Reportly = (function () {
         };
         CanvasRenderer.prototype.renderTextNode = function (text, styles) {
             return __awaiter(this, void 0, void 0, function () {
-                var _a, font, fontFamily, fontSize, _b, baseline, middle, paintOrder;
+                var font, paintOrder;
                 var _this = this;
-                return __generator(this, function (_c) {
-                    _a = this.createFontStyle(styles), font = _a[0], fontFamily = _a[1], fontSize = _a[2];
+                return __generator(this, function (_a) {
+                    font = this.createFontStyle(styles)[0];
                     this.ctx.font = font;
-                    this.ctx.direction = styles.direction === 1 /* RTL */ ? 'rtl' : 'ltr';
+                    this.ctx.direction = styles.direction === 1 /* DIRECTION.RTL */ ? 'rtl' : 'ltr';
                     this.ctx.textAlign = 'left';
                     this.ctx.textBaseline = 'alphabetic';
-                    _b = this.fontMetrics.getMetrics(fontFamily, fontSize), baseline = _b.baseline, middle = _b.middle;
                     paintOrder = styles.paintOrder;
                     text.textBounds.forEach(function (text) {
                         paintOrder.forEach(function (paintOrderLayer) {
                             switch (paintOrderLayer) {
-                                case 0 /* FILL */:
+                                case 0 /* PAINT_ORDER_LAYER.FILL */:
                                     _this.ctx.fillStyle = asString(styles.color);
-                                    _this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline);
+                                    _this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number);
                                     var textShadows = styles.textShadow;
                                     if (textShadows.length && text.text.trim().length) {
                                         textShadows
@@ -7286,7 +8251,7 @@ var Reportly = (function () {
                                             _this.ctx.shadowOffsetX = textShadow.offsetX.number * _this.options.scale;
                                             _this.ctx.shadowOffsetY = textShadow.offsetY.number * _this.options.scale;
                                             _this.ctx.shadowBlur = textShadow.blur.number;
-                                            _this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline);
+                                            _this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number);
                                         });
                                         _this.ctx.shadowColor = '';
                                         _this.ctx.shadowOffsetX = 0;
@@ -7295,32 +8260,30 @@ var Reportly = (function () {
                                     }
                                     if (styles.textDecorationLine.length) {
                                         _this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
+                                        var decorationLineHeight_1 = 1;
                                         styles.textDecorationLine.forEach(function (textDecorationLine) {
+                                            // Fix the issue where textDecorationLine exhibits x-axis positioning errors on high-resolution devices due to varying devicePixelRatio, corrected by using relative values of element heights.
                                             switch (textDecorationLine) {
-                                                case 1 /* UNDERLINE */:
-                                                    // Draws a line at the baseline of the font
-                                                    // TODO As some browsers display the line as more than 1px if the font-size is big,
-                                                    // need to take that into account both in position and size
-                                                    _this.ctx.fillRect(text.bounds.left, Math.round(text.bounds.top + baseline), text.bounds.width, 1);
+                                                case 1 /* TEXT_DECORATION_LINE.UNDERLINE */:
+                                                    _this.ctx.fillRect(text.bounds.left, text.bounds.top + text.bounds.height - decorationLineHeight_1, text.bounds.width, decorationLineHeight_1);
                                                     break;
-                                                case 2 /* OVERLINE */:
-                                                    _this.ctx.fillRect(text.bounds.left, Math.round(text.bounds.top), text.bounds.width, 1);
+                                                case 2 /* TEXT_DECORATION_LINE.OVERLINE */:
+                                                    _this.ctx.fillRect(text.bounds.left, text.bounds.top, text.bounds.width, decorationLineHeight_1);
                                                     break;
-                                                case 3 /* LINE_THROUGH */:
-                                                    // TODO try and find exact position for line-through
-                                                    _this.ctx.fillRect(text.bounds.left, Math.ceil(text.bounds.top + middle), text.bounds.width, 1);
+                                                case 3 /* TEXT_DECORATION_LINE.LINE_THROUGH */:
+                                                    _this.ctx.fillRect(text.bounds.left, text.bounds.top + (text.bounds.height / 2 - decorationLineHeight_1 / 2), text.bounds.width, decorationLineHeight_1);
                                                     break;
                                             }
                                         });
                                     }
                                     break;
-                                case 1 /* STROKE */:
+                                case 1 /* PAINT_ORDER_LAYER.STROKE */:
                                     if (styles.webkitTextStrokeWidth && text.text.trim().length) {
                                         _this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
                                         _this.ctx.lineWidth = styles.webkitTextStrokeWidth;
                                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                         _this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
-                                        _this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline);
+                                        _this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
                                     }
                                     _this.ctx.strokeStyle = '';
                                     _this.ctx.lineWidth = 0;
@@ -7334,23 +8297,99 @@ var Reportly = (function () {
             });
         };
         CanvasRenderer.prototype.renderReplacedElement = function (container, curves, image) {
-            if (image && container.intrinsicWidth > 0 && container.intrinsicHeight > 0) {
+            var intrinsicWidth = image.naturalWidth || container.intrinsicWidth;
+            var intrinsicHeight = image.naturalHeight || container.intrinsicHeight;
+            if (image && intrinsicWidth > 0 && intrinsicHeight > 0) {
                 var box = contentBox(container);
                 var path = calculatePaddingBoxPath(curves);
                 this.path(path);
                 this.ctx.save();
                 this.ctx.clip();
-                this.ctx.drawImage(image, 0, 0, container.intrinsicWidth, container.intrinsicHeight, box.left, box.top, box.width, box.height);
+                var sx = 0, sy = 0, sw = intrinsicWidth, sh = intrinsicHeight, dx = box.left, dy = box.top, dw = box.width, dh = box.height;
+                var objectFit = container.styles.objectFit;
+                var boxRatio = dw / dh;
+                var imgRatio = sw / sh;
+                if (objectFit === 2 /* OBJECT_FIT.CONTAIN */) {
+                    if (imgRatio > boxRatio) {
+                        dh = dw / imgRatio;
+                        dy += (box.height - dh) / 2;
+                    }
+                    else {
+                        dw = dh * imgRatio;
+                        dx += (box.width - dw) / 2;
+                    }
+                }
+                else if (objectFit === 4 /* OBJECT_FIT.COVER */) {
+                    if (imgRatio > boxRatio) {
+                        sw = sh * boxRatio;
+                        sx += (intrinsicWidth - sw) / 2;
+                    }
+                    else {
+                        sh = sw / boxRatio;
+                        sy += (intrinsicHeight - sh) / 2;
+                    }
+                }
+                else if (objectFit === 8 /* OBJECT_FIT.NONE */) {
+                    if (sw > dw) {
+                        sx += (sw - dw) / 2;
+                        sw = dw;
+                    }
+                    else {
+                        dx += (dw - sw) / 2;
+                        dw = sw;
+                    }
+                    if (sh > dh) {
+                        sy += (sh - dh) / 2;
+                        sh = dh;
+                    }
+                    else {
+                        dy += (dh - sh) / 2;
+                        dh = sh;
+                    }
+                }
+                else if (objectFit === 16 /* OBJECT_FIT.SCALE_DOWN */) {
+                    var containW = imgRatio > boxRatio ? dw : dh * imgRatio;
+                    var noneW = sw > dw ? sw : dw;
+                    if (containW < noneW) {
+                        if (imgRatio > boxRatio) {
+                            dh = dw / imgRatio;
+                            dy += (box.height - dh) / 2;
+                        }
+                        else {
+                            dw = dh * imgRatio;
+                            dx += (box.width - dw) / 2;
+                        }
+                    }
+                    else {
+                        if (sw > dw) {
+                            sx += (sw - dw) / 2;
+                            sw = dw;
+                        }
+                        else {
+                            dx += (dw - sw) / 2;
+                            dw = sw;
+                        }
+                        if (sh > dh) {
+                            sy += (sh - dh) / 2;
+                            sh = dh;
+                        }
+                        else {
+                            dy += (dh - sh) / 2;
+                            dh = sh;
+                        }
+                    }
+                }
+                this.ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
                 this.ctx.restore();
             }
         };
         CanvasRenderer.prototype.renderNodeContent = function (paint) {
             return __awaiter(this, void 0, void 0, function () {
-                var container, curves, styles, _i, _a, child, image, image, iframeRenderer, canvas, size, _b, fontFamily, fontSize, baseline, bounds, x, textBounds, img, image, url, fontFamily, bounds;
+                var container, curves, styles, _i, _a, child, image, image, iframeRenderer, canvas, size, _b, font, fontFamily, fontSize, baseline, bounds, x, textBounds, img, image, url, font, bounds;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
-                            this.applyEffects(paint.getEffects(4 /* CONTENT */));
+                            this.applyEffects(paint.getEffects(4 /* EffectTarget.CONTENT */));
                             container = paint.container;
                             curves = paint.curves;
                             styles = container.styles;
@@ -7378,7 +8417,7 @@ var Reportly = (function () {
                             return [3 /*break*/, 8];
                         case 7:
                             _c.sent();
-                            this.context.logger.error("Error loading image " + container.src);
+                            this.context.logger.error("Error loading image ".concat(container.src));
                             return [3 /*break*/, 8];
                         case 8:
                             if (container instanceof CanvasElementContainer) {
@@ -7395,7 +8434,7 @@ var Reportly = (function () {
                             return [3 /*break*/, 12];
                         case 11:
                             _c.sent();
-                            this.context.logger.error("Error loading svg " + container.svg.substring(0, 255));
+                            this.context.logger.error("Error loading svg ".concat(container.svg.substring(0, 255)));
                             return [3 /*break*/, 12];
                         case 12:
                             if (!(container instanceof IFrameElementContainer && container.tree)) return [3 /*break*/, 14];
@@ -7446,19 +8485,19 @@ var Reportly = (function () {
                                 }
                             }
                             if (isTextInputElement(container) && container.value.length) {
-                                _b = this.createFontStyle(styles), fontFamily = _b[0], fontSize = _b[1];
+                                _b = this.createFontStyle(styles), font = _b[0], fontFamily = _b[1], fontSize = _b[2];
                                 baseline = this.fontMetrics.getMetrics(fontFamily, fontSize).baseline;
-                                this.ctx.font = fontFamily;
+                                this.ctx.font = font;
                                 this.ctx.fillStyle = asString(styles.color);
                                 this.ctx.textBaseline = 'alphabetic';
                                 this.ctx.textAlign = canvasTextAlign(container.styles.textAlign);
                                 bounds = contentBox(container);
                                 x = 0;
                                 switch (container.styles.textAlign) {
-                                    case 1 /* CENTER */:
+                                    case 1 /* TEXT_ALIGN.CENTER */:
                                         x += bounds.width / 2;
                                         break;
-                                    case 2 /* RIGHT */:
+                                    case 2 /* TEXT_ALIGN.RIGHT */:
                                         x += bounds.width;
                                         break;
                                 }
@@ -7476,10 +8515,10 @@ var Reportly = (function () {
                                 this.ctx.textBaseline = 'alphabetic';
                                 this.ctx.textAlign = 'left';
                             }
-                            if (!contains(container.styles.display, 2048 /* LIST_ITEM */)) return [3 /*break*/, 20];
+                            if (!contains(container.styles.display, 2048 /* DISPLAY.LIST_ITEM */)) return [3 /*break*/, 20];
                             if (!(container.styles.listStyleImage !== null)) return [3 /*break*/, 19];
                             img = container.styles.listStyleImage;
-                            if (!(img.type === 0 /* URL */)) return [3 /*break*/, 18];
+                            if (!(img.type === 0 /* CSSImageType.URL */)) return [3 /*break*/, 18];
                             image = void 0;
                             url = img.url;
                             _c.label = 15;
@@ -7492,13 +8531,13 @@ var Reportly = (function () {
                             return [3 /*break*/, 18];
                         case 17:
                             _c.sent();
-                            this.context.logger.error("Error loading list-style-image " + url);
+                            this.context.logger.error("Error loading list-style-image ".concat(url));
                             return [3 /*break*/, 18];
                         case 18: return [3 /*break*/, 20];
                         case 19:
-                            if (paint.listValue && container.styles.listStyleType !== -1 /* NONE */) {
-                                fontFamily = this.createFontStyle(styles)[0];
-                                this.ctx.font = fontFamily;
+                            if (paint.listValue && container.styles.listStyleType !== -1 /* LIST_STYLE_TYPE.NONE */) {
+                                font = this.createFontStyle(styles)[0];
+                                this.ctx.font = font;
                                 this.ctx.fillStyle = asString(styles.color);
                                 this.ctx.textBaseline = 'middle';
                                 this.ctx.textAlign = 'right';
@@ -7519,7 +8558,7 @@ var Reportly = (function () {
                 return __generator(this, function (_p) {
                     switch (_p.label) {
                         case 0:
-                            if (contains(stack.element.container.flags, 16 /* DEBUG_RENDER */)) {
+                            if (contains(stack.element.container.flags, 16 /* FLAGS.DEBUG_RENDER */)) {
                                 debugger;
                             }
                             // https://www.w3.org/TR/css-position-3/#painting-order
@@ -7667,10 +8706,11 @@ var Reportly = (function () {
             this.ctx.translate(-offsetX, -offsetY);
         };
         CanvasRenderer.prototype.resizeImage = function (image, width, height) {
+            // https://github.com/niklasvh/html2canvas/pull/2911
+            // if (image.width === width && image.height === height) {
+            //     return image;
+            // }
             var _a;
-            if (image.width === width && image.height === height) {
-                return image;
-            }
             var ownerDocument = (_a = this.canvas.ownerDocument) !== null && _a !== void 0 ? _a : document;
             var canvas = ownerDocument.createElement('canvas');
             canvas.width = Math.max(1, width);
@@ -7687,11 +8727,11 @@ var Reportly = (function () {
                         case 0:
                             index = container.styles.backgroundImage.length - 1;
                             _loop_1 = function (backgroundImage) {
-                                var image, url, _c, path, x, y, width, height, pattern, _d, path, x, y, width, height, _e, lineLength, x0, x1, y0, y1, canvas, ctx, gradient_1, pattern, _f, path, left, top_1, width, height, position, x, y, _g, rx, ry, radialGradient_1, midX, midY, f, invF;
+                                var image, url, imageWidth, imageHeight, _c, path, x, y, width, height, pattern, _d, path, x, y, width, height, _e, lineLength, x0, x1, y0, y1, canvas, ctx, gradient_1, pattern, _f, path, left, top_1, width, height, position, x, y, _g, rx, ry, radialGradient_1, midX, midY, f, invF;
                                 return __generator(this, function (_h) {
                                     switch (_h.label) {
                                         case 0:
-                                            if (!(backgroundImage.type === 0 /* URL */)) return [3 /*break*/, 5];
+                                            if (!(backgroundImage.type === 0 /* CSSImageType.URL */)) return [3 /*break*/, 5];
                                             image = void 0;
                                             url = backgroundImage.url;
                                             _h.label = 1;
@@ -7703,14 +8743,16 @@ var Reportly = (function () {
                                             return [3 /*break*/, 4];
                                         case 3:
                                             _h.sent();
-                                            this_1.context.logger.error("Error loading background-image " + url);
+                                            this_1.context.logger.error("Error loading background-image ".concat(url));
                                             return [3 /*break*/, 4];
                                         case 4:
                                             if (image) {
+                                                imageWidth = isNaN(image.width) || image.width === 0 ? 1 : image.width;
+                                                imageHeight = isNaN(image.height) || image.height === 0 ? 1 : image.height;
                                                 _c = calculateBackgroundRendering(container, index, [
-                                                    image.width,
-                                                    image.height,
-                                                    image.width / image.height
+                                                    imageWidth,
+                                                    imageHeight,
+                                                    imageWidth / imageHeight
                                                 ]), path = _c[0], x = _c[1], y = _c[2], width = _c[3], height = _c[4];
                                                 pattern = this_1.ctx.createPattern(this_1.resizeImage(image, width, height), 'repeat');
                                                 this_1.renderRepeat(path, pattern, x, y);
@@ -7725,7 +8767,7 @@ var Reportly = (function () {
                                                 canvas.height = height;
                                                 ctx = canvas.getContext('2d');
                                                 gradient_1 = ctx.createLinearGradient(x0, y0, x1, y1);
-                                                processColorStops(backgroundImage.stops, lineLength).forEach(function (colorStop) {
+                                                processColorStops(backgroundImage.stops, lineLength || 1).forEach(function (colorStop) {
                                                     return gradient_1.addColorStop(colorStop.stop, asString(colorStop.color));
                                                 });
                                                 ctx.fillStyle = gradient_1;
@@ -7835,7 +8877,7 @@ var Reportly = (function () {
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            this.applyEffects(paint.getEffects(2 /* BACKGROUND_BORDERS */));
+                            this.applyEffects(paint.getEffects(2 /* EffectTarget.BACKGROUND_BORDERS */));
                             styles = paint.container.styles;
                             hasBackground = !isTransparent(styles.backgroundColor) || styles.backgroundImage.length;
                             borders = [
@@ -7891,20 +8933,20 @@ var Reportly = (function () {
                         case 3:
                             if (!(_i < borders_1.length)) return [3 /*break*/, 13];
                             border = borders_1[_i];
-                            if (!(border.style !== 0 /* NONE */ && !isTransparent(border.color) && border.width > 0)) return [3 /*break*/, 11];
-                            if (!(border.style === 2 /* DASHED */)) return [3 /*break*/, 5];
-                            return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2 /* DASHED */)];
+                            if (!(border.style !== 0 /* BORDER_STYLE.NONE */ && !isTransparent(border.color) && border.width > 0)) return [3 /*break*/, 11];
+                            if (!(border.style === 2 /* BORDER_STYLE.DASHED */)) return [3 /*break*/, 5];
+                            return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2 /* BORDER_STYLE.DASHED */)];
                         case 4:
                             _a.sent();
                             return [3 /*break*/, 11];
                         case 5:
-                            if (!(border.style === 3 /* DOTTED */)) return [3 /*break*/, 7];
-                            return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3 /* DOTTED */)];
+                            if (!(border.style === 3 /* BORDER_STYLE.DOTTED */)) return [3 /*break*/, 7];
+                            return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3 /* BORDER_STYLE.DOTTED */)];
                         case 6:
                             _a.sent();
                             return [3 /*break*/, 11];
                         case 7:
-                            if (!(border.style === 4 /* DOUBLE */)) return [3 /*break*/, 9];
+                            if (!(border.style === 4 /* BORDER_STYLE.DOUBLE */)) return [3 /*break*/, 9];
                             return [4 /*yield*/, this.renderDoubleBorder(border.color, border.width, side, paint.curves)];
                         case 8:
                             _a.sent();
@@ -7931,7 +8973,7 @@ var Reportly = (function () {
                     this.ctx.save();
                     strokePaths = parsePathForBorderStroke(curvePoints, side);
                     boxPaths = parsePathForBorder(curvePoints, side);
-                    if (style === 2 /* DASHED */) {
+                    if (style === 2 /* BORDER_STYLE.DASHED */) {
                         this.path(boxPaths);
                         this.ctx.clip();
                     }
@@ -7958,7 +9000,7 @@ var Reportly = (function () {
                         length = Math.abs(startY - endY);
                     }
                     this.ctx.beginPath();
-                    if (style === 3 /* DOTTED */) {
+                    if (style === 3 /* BORDER_STYLE.DOTTED */) {
                         this.formatPath(strokePaths);
                     }
                     else {
@@ -7966,7 +9008,7 @@ var Reportly = (function () {
                     }
                     dashLength = width < 3 ? width * 3 : width * 2;
                     spaceLength = width < 3 ? width * 2 : width;
-                    if (style === 3 /* DOTTED */) {
+                    if (style === 3 /* BORDER_STYLE.DOTTED */) {
                         dashLength = width;
                         spaceLength = width;
                     }
@@ -7989,14 +9031,14 @@ var Reportly = (function () {
                                 : maxSpace;
                     }
                     if (useLineDash) {
-                        if (style === 3 /* DOTTED */) {
+                        if (style === 3 /* BORDER_STYLE.DOTTED */) {
                             this.ctx.setLineDash([0, dashLength + spaceLength]);
                         }
                         else {
                             this.ctx.setLineDash([dashLength, spaceLength]);
                         }
                     }
-                    if (style === 3 /* DOTTED */) {
+                    if (style === 3 /* BORDER_STYLE.DOTTED */) {
                         this.ctx.lineCap = 'round';
                         this.ctx.lineWidth = width;
                     }
@@ -8007,7 +9049,7 @@ var Reportly = (function () {
                     this.ctx.stroke();
                     this.ctx.setLineDash([]);
                     // dashed round edge gap
-                    if (style === 2 /* DASHED */) {
+                    if (style === 2 /* BORDER_STYLE.DASHED */) {
                         if (isBezierCurve(boxPaths[0])) {
                             path1 = boxPaths[3];
                             path2 = boxPaths[0];
@@ -8064,22 +9106,22 @@ var Reportly = (function () {
     };
     var calculateBackgroundCurvedPaintingArea = function (clip, curves) {
         switch (clip) {
-            case 0 /* BORDER_BOX */:
+            case 0 /* BACKGROUND_CLIP.BORDER_BOX */:
                 return calculateBorderBoxPath(curves);
-            case 2 /* CONTENT_BOX */:
+            case 2 /* BACKGROUND_CLIP.CONTENT_BOX */:
                 return calculateContentBoxPath(curves);
-            case 1 /* PADDING_BOX */:
+            case 1 /* BACKGROUND_CLIP.PADDING_BOX */:
             default:
                 return calculatePaddingBoxPath(curves);
         }
     };
     var canvasTextAlign = function (textAlign) {
         switch (textAlign) {
-            case 1 /* CENTER */:
+            case 1 /* TEXT_ALIGN.CENTER */:
                 return 'center';
-            case 2 /* RIGHT */:
+            case 2 /* TEXT_ALIGN.RIGHT */:
                 return 'right';
-            case 0 /* LEFT */:
+            case 0 /* TEXT_ALIGN.LEFT */:
             default:
                 return 'left';
         }
@@ -8101,11 +9143,11 @@ var Reportly = (function () {
             _this.options = options;
             _this.canvas.width = Math.floor(options.width * options.scale);
             _this.canvas.height = Math.floor(options.height * options.scale);
-            _this.canvas.style.width = options.width + "px";
-            _this.canvas.style.height = options.height + "px";
+            _this.canvas.style.width = "".concat(options.width, "px");
+            _this.canvas.style.height = "".concat(options.height, "px");
             _this.ctx.scale(_this.options.scale, _this.options.scale);
             _this.ctx.translate(-options.x, -options.y);
-            _this.context.logger.debug("EXPERIMENTAL ForeignObject renderer initialized (" + options.width + "x" + options.height + " at " + options.x + "," + options.y + ") with scale " + options.scale);
+            _this.context.logger.debug("EXPERIMENTAL ForeignObject renderer initialized (".concat(options.width, "x").concat(options.height, " at ").concat(options.x, ",").concat(options.y, ") with scale ").concat(options.scale));
             return _this;
         }
         ForeignObjectRenderer.prototype.render = function (element) {
@@ -8137,7 +9179,7 @@ var Reportly = (function () {
                 resolve(img);
             };
             img.onerror = reject;
-            img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(new XMLSerializer().serializeToString(svg));
+            img.src = "data:image/svg+xml;charset=utf-8,".concat(encodeURIComponent(new XMLSerializer().serializeToString(svg)));
         });
     };
 
@@ -8158,7 +9200,7 @@ var Reportly = (function () {
                 // eslint-disable-next-line no-console
                 if (typeof window !== 'undefined' && window.console && typeof console.debug === 'function') {
                     // eslint-disable-next-line no-console
-                    console.debug.apply(console, __spreadArray([this.id, this.getTime() + "ms"], args));
+                    console.debug.apply(console, __spreadArray([this.id, "".concat(this.getTime(), "ms")], args, false));
                 }
                 else {
                     this.info.apply(this, args);
@@ -8178,7 +9220,7 @@ var Reportly = (function () {
                 // eslint-disable-next-line no-console
                 if (typeof window !== 'undefined' && window.console && typeof console.info === 'function') {
                     // eslint-disable-next-line no-console
-                    console.info.apply(console, __spreadArray([this.id, this.getTime() + "ms"], args));
+                    console.info.apply(console, __spreadArray([this.id, "".concat(this.getTime(), "ms")], args, false));
                 }
             }
         };
@@ -8192,7 +9234,7 @@ var Reportly = (function () {
                 // eslint-disable-next-line no-console
                 if (typeof window !== 'undefined' && window.console && typeof console.warn === 'function') {
                     // eslint-disable-next-line no-console
-                    console.warn.apply(console, __spreadArray([this.id, this.getTime() + "ms"], args));
+                    console.warn.apply(console, __spreadArray([this.id, "".concat(this.getTime(), "ms")], args, false));
                 }
                 else {
                     this.info.apply(this, args);
@@ -8209,7 +9251,7 @@ var Reportly = (function () {
                 // eslint-disable-next-line no-console
                 if (typeof window !== 'undefined' && window.console && typeof console.error === 'function') {
                     // eslint-disable-next-line no-console
-                    console.error.apply(console, __spreadArray([this.id, this.getTime() + "ms"], args));
+                    console.error.apply(console, __spreadArray([this.id, "".concat(this.getTime(), "ms")], args, false));
                 }
                 else {
                     this.info.apply(this, args);
@@ -8224,7 +9266,7 @@ var Reportly = (function () {
         function Context(options, windowBounds) {
             var _a;
             this.windowBounds = windowBounds;
-            this.instanceName = "#" + Context.instanceCount++;
+            this.instanceName = "#".concat(Context.instanceCount++);
             this.logger = new Logger({ id: this.instanceName, enabled: options.logging });
             this.cache = (_a = options.cache) !== null && _a !== void 0 ? _a : new Cache(this, options);
         }
@@ -8260,7 +9302,8 @@ var Reportly = (function () {
                         allowTaint: (_b = opts.allowTaint) !== null && _b !== void 0 ? _b : false,
                         imageTimeout: (_c = opts.imageTimeout) !== null && _c !== void 0 ? _c : 15000,
                         proxy: opts.proxy,
-                        useCORS: (_d = opts.useCORS) !== null && _d !== void 0 ? _d : false
+                        useCORS: (_d = opts.useCORS) !== null && _d !== void 0 ? _d : false,
+                        customIsSameOrigin: opts.customIsSameOrigin
                     };
                     contextOptions = __assign({ logging: (_e = opts.logging) !== null && _e !== void 0 ? _e : true, cache: opts.cache }, resourceOptions);
                     windowOptions = {
@@ -8279,7 +9322,7 @@ var Reportly = (function () {
                         inlineImages: foreignObjectRendering,
                         copyStyles: foreignObjectRendering
                     };
-                    context.logger.debug("Starting document clone with size " + windowBounds.width + "x" + windowBounds.height + " scrolled to " + -windowBounds.left + "," + -windowBounds.top);
+                    context.logger.debug("Starting document clone with size ".concat(windowBounds.width, "x").concat(windowBounds.height, " scrolled to ").concat(-windowBounds.left, ",").concat(-windowBounds.top));
                     documentCloner = new DocumentCloner(context, element, cloneOptions);
                     clonedElement = documentCloner.clonedReferenceElement;
                     if (!clonedElement) {
@@ -8309,13 +9352,13 @@ var Reportly = (function () {
                     canvas = _u.sent();
                     return [3 /*break*/, 5];
                 case 3:
-                    context.logger.debug("Document cloned, element located at " + left + "," + top + " with size " + width + "x" + height + " using computed rendering");
+                    context.logger.debug("Document cloned, element located at ".concat(left, ",").concat(top, " with size ").concat(width, "x").concat(height, " using computed rendering"));
                     context.logger.debug("Starting DOM parsing");
                     root = parseTree(context, clonedElement);
                     if (backgroundColor === root.styles.backgroundColor) {
                         root.styles.backgroundColor = COLORS.TRANSPARENT;
                     }
-                    context.logger.debug("Starting renderer for element at " + renderOptions.x + "," + renderOptions.y + " with size " + renderOptions.width + "x" + renderOptions.height);
+                    context.logger.debug("Starting renderer for element at ".concat(renderOptions.x, ",").concat(renderOptions.y, " with size ").concat(renderOptions.width, "x").concat(renderOptions.height));
                     renderer = new CanvasRenderer(context, renderOptions);
                     return [4 /*yield*/, renderer.render(root)];
                 case 4:
@@ -8376,38 +9419,38 @@ var Reportly = (function () {
                     useCORS: true,
                     logging: false,
                     width: fullPageWidth,
-                    height: fullPageHeight
+                    height: fullPageHeight,
                 });
                 // Restore scroll position
                 window.scrollTo(0, originalScrollY);
                 // Show UXbert UI elements again
                 this.showUXbertElements();
                 // Convert to base64
-                this.currentScreenshot = canvas.toDataURL('image/png');
+                this.currentScreenshot = canvas.toDataURL("image/png");
                 return this.currentScreenshot;
             }
             catch (error) {
-                console.error('Screenshot capture failed:', error);
+                console.error("Screenshot capture failed:", error);
                 this.showUXbertElements();
                 throw error;
             }
         }
         hideUXbertElements() {
             const elements = document.querySelectorAll('[class*="uxbert-"]');
-            elements.forEach(el => {
+            elements.forEach((el) => {
                 const element = el;
-                element.setAttribute('data-uxbert-display', element.style.display || '');
-                element.style.display = 'none';
+                element.setAttribute("data-uxbert-display", element.style.display || "");
+                element.style.display = "none";
             });
         }
         showUXbertElements() {
             const elements = document.querySelectorAll('[class*="uxbert-"]');
-            elements.forEach(el => {
+            elements.forEach((el) => {
                 const element = el;
-                const originalDisplay = element.getAttribute('data-uxbert-display');
+                const originalDisplay = element.getAttribute("data-uxbert-display");
                 if (originalDisplay !== null) {
                     element.style.display = originalDisplay;
-                    element.removeAttribute('data-uxbert-display');
+                    element.removeAttribute("data-uxbert-display");
                 }
             });
         }
@@ -8826,6 +9869,22 @@ var Reportly = (function () {
             this.info = this.collect();
         }
         collect() {
+            // Check if we're in a browser environment
+            if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+                return {
+                    browser: 'SSR',
+                    os: 'SSR',
+                    screenResolution: '0x0',
+                    viewport: '0x0',
+                    url: '',
+                    timestamp: new Date().toISOString(),
+                    userAgent: 'SSR',
+                    language: 'en-US',
+                    platform: 'SSR',
+                    cookiesEnabled: false,
+                    onLine: false
+                };
+            }
             return {
                 browser: this.getBrowserInfo(),
                 os: this.getOSInfo(),
@@ -9009,6 +10068,11 @@ var Reportly = (function () {
             this.isInitialized = false;
         }
         init(userConfig = {}) {
+            // Check if we're in a browser environment
+            if (typeof window === 'undefined' || typeof document === 'undefined') {
+                console.warn("Uxbert Reportly can only be initialized in a browser environment");
+                return;
+            }
             if (this.isInitialized) {
                 console.warn("Uxbert Reportly is already initialized");
                 return;