@ntlab/ntjs-assets 2.73.0 → 2.74.0

package/assets/js/highcharts/modules/exporting.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v12.2.0 (2025-04-07)
+ * @license Highcharts JS v12.3.0 (2025-06-21)
  * @module highcharts/modules/exporting
  * @requires highcharts
  *
@@ -116,6 +116,7 @@ var highcharts_AST_commonjs_highcharts_AST_commonjs2_highcharts_AST_root_Highcha
 var highcharts_AST_commonjs_highcharts_AST_commonjs2_highcharts_AST_root_Highcharts_AST_default = /*#__PURE__*/__webpack_require__.n(highcharts_AST_commonjs_highcharts_AST_commonjs2_highcharts_AST_root_Highcharts_AST_);
 // EXTERNAL MODULE: external {"amd":["highcharts/highcharts","Chart"],"commonjs":["highcharts","Chart"],"commonjs2":["highcharts","Chart"],"root":["Highcharts","Chart"]}
 var highcharts_Chart_commonjs_highcharts_Chart_commonjs2_highcharts_Chart_root_Highcharts_Chart_ = __webpack_require__(960);
+var highcharts_Chart_commonjs_highcharts_Chart_commonjs2_highcharts_Chart_root_Highcharts_Chart_default = /*#__PURE__*/__webpack_require__.n(highcharts_Chart_commonjs_highcharts_Chart_commonjs2_highcharts_Chart_root_Highcharts_Chart_);
 ;// ./code/es-modules/Core/Chart/ChartNavigationComposition.js
 /**
  *
@@ -208,6 +209,169 @@ var ChartNavigationComposition;
  * */
 /* harmony default export */ const Chart_ChartNavigationComposition = (ChartNavigationComposition);
 
+;// ./code/es-modules/Extensions/DownloadURL.js
+/* *
+ *
+ *  (c) 2015-2025 Oystein Moseng
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Mixin for downloading content in the browser
+ *
+ * */
+
+/* *
+ *
+ *  Imports
+ *
+ * */
+
+const { isSafari, win, win: { document: doc } } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
+
+const { error } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
+/* *
+ *
+ *  Constants
+ *
+ * */
+const domurl = win.URL || win.webkitURL || win;
+/* *
+ *
+ *  Functions
+ *
+ * */
+/**
+ * Convert base64 dataURL to Blob if supported, otherwise returns undefined.
+ *
+ * @private
+ * @function Highcharts.dataURLtoBlob
+ *
+ * @param {string} dataURL
+ * URL to convert.
+ *
+ * @return {string | undefined}
+ * Blob.
+ */
+function dataURLtoBlob(dataURL) {
+    const parts = dataURL
+        .replace(/filename=.*;/, '')
+        .match(/data:([^;]*)(;base64)?,([A-Z+\d\/]+)/i);
+    if (parts &&
+        parts.length > 3 &&
+        (win.atob) &&
+        win.ArrayBuffer &&
+        win.Uint8Array &&
+        win.Blob &&
+        (domurl.createObjectURL)) {
+        // Try to convert data URL to Blob
+        const binStr = win.atob(parts[3]), buf = new win.ArrayBuffer(binStr.length), binary = new win.Uint8Array(buf);
+        for (let i = 0; i < binary.length; ++i) {
+            binary[i] = binStr.charCodeAt(i);
+        }
+        return domurl
+            .createObjectURL(new win.Blob([binary], { 'type': parts[1] }));
+    }
+}
+/**
+ * Download a data URL in the browser. Can also take a blob as first param.
+ *
+ * @private
+ * @function Highcharts.downloadURL
+ *
+ * @param {string | global.URL} dataURL
+ * The dataURL/Blob to download.
+ * @param {string} filename
+ * The name of the resulting file (w/extension).
+ */
+function downloadURL(dataURL, filename) {
+    const nav = win.navigator, a = doc.createElement('a');
+    // IE specific blob implementation
+    // Don't use for normal dataURLs
+    if (typeof dataURL !== 'string' &&
+        !(dataURL instanceof String) &&
+        nav.msSaveOrOpenBlob) {
+        nav.msSaveOrOpenBlob(dataURL, filename);
+        return;
+    }
+    dataURL = '' + dataURL;
+    if (nav.userAgent.length > 1000 /* RegexLimits.shortLimit */) {
+        throw new Error('Input too long');
+    }
+    const // Some browsers have limitations for data URL lengths. Try to convert
+    // to Blob or fall back. Edge always needs that blob.
+    isOldEdgeBrowser = /Edge\/\d+/.test(nav.userAgent), 
+    // Safari on iOS needs Blob in order to download PDF
+    safariBlob = (isSafari &&
+        typeof dataURL === 'string' &&
+        dataURL.indexOf('data:application/pdf') === 0);
+    if (safariBlob || isOldEdgeBrowser || dataURL.length > 2000000) {
+        dataURL = dataURLtoBlob(dataURL) || '';
+        if (!dataURL) {
+            throw new Error('Failed to convert to blob');
+        }
+    }
+    // Try HTML5 download attr if supported
+    if (typeof a.download !== 'undefined') {
+        a.href = dataURL;
+        a.download = filename; // HTML5 download attribute
+        doc.body.appendChild(a);
+        a.click();
+        doc.body.removeChild(a);
+    }
+    else {
+        // No download attr, just opening data URI
+        try {
+            if (!win.open(dataURL, 'chart')) {
+                throw new Error('Failed to open window');
+            }
+        }
+        catch {
+            // If window.open failed, try location.href
+            win.location.href = dataURL;
+        }
+    }
+}
+/**
+ * Asynchronously downloads a script from a provided location.
+ *
+ * @private
+ * @function Highcharts.getScript
+ *
+ * @param {string} scriptLocation
+ * The location for the script to fetch.
+ */
+function getScript(scriptLocation) {
+    return new Promise((resolve, reject) => {
+        const head = doc.getElementsByTagName('head')[0], script = doc.createElement('script');
+        // Set type and location for the script
+        script.type = 'text/javascript';
+        script.src = scriptLocation;
+        // Resolve in case of a succesful script fetching
+        script.onload = () => {
+            resolve();
+        };
+        // Reject in case of fail
+        script.onerror = () => {
+            reject(error(`Error loading script ${scriptLocation}`));
+        };
+        // Append the newly created script
+        head.appendChild(script);
+    });
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+const DownloadURL = {
+    dataURLtoBlob,
+    downloadURL,
+    getScript
+};
+/* harmony default export */ const Extensions_DownloadURL = (DownloadURL);
+
 ;// ./code/es-modules/Extensions/Exporting/ExportingDefaults.js
 /* *
  *
@@ -256,7 +420,7 @@ const exporting = {
     /**
      * Allows the end user to sort the data table by clicking on column headers.
      *
-     * @since 10.3.3
+     * @since     10.3.3
      * @apioption exporting.allowTableSorting
      */
     allowTableSorting: true,
@@ -271,7 +435,7 @@ const exporting = {
      *
      * @type      {boolean}
      * @default   false
-     * @since 12.0.0
+     * @since     12.0.0
      * @apioption exporting.applyStyleSheets
      */
     /**
@@ -374,8 +538,8 @@ const exporting = {
      * See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/fetch)
      * for more information
      *
-     * @type {Object}
-     * @since 11.3.0
+     * @type      {Object}
+     * @since     11.3.0
      * @apioption exporting.fetchOptions
      */
     /**
@@ -391,6 +555,27 @@ const exporting = {
      * @since     5.0.0
      * @apioption exporting.libURL
      */
+    libURL: 'https://code.highcharts.com/12.3.0/lib/',
+    /**
+     * Whether the chart should be exported using the browser's built-in
+     * capabilities, allowing offline exports without requiring access to the
+     * Highcharts export server, or sent directly to the export server for
+     * processing and downloading.
+     *
+     * This option is different from `exporting.fallbackToExportServer`, which
+     * controls whether the export server should be used as a fallback only if
+     * the local export fails. In contrast, `exporting.local` explicitly defines
+     * which export method to use.
+     *
+     * @see [fallbackToExportServer](#exporting.fallbackToExportServer)
+     *
+     * @type      {boolean}
+     * @default   true
+     * @since 12.3.0
+     * @requires  modules/exporting
+     * @apioption exporting.local
+     */
+    local: true,
     /**
      * Analogous to [sourceWidth](#exporting.sourceWidth).
      *
@@ -463,7 +648,7 @@ const exporting = {
      * @sample {highcharts} highcharts/exporting/offline-download-pdffont/
      *         Download PDF in a language containing non-Latin characters.
      *
-     * @since 10.0.0
+     * @since    10.0.0
      * @requires modules/offline-exporting
      */
     pdfFont: {
@@ -472,25 +657,25 @@ const exporting = {
          * `bold` or `italic` are not defined, the `normal` font will be used
          * for those too.
          *
-         * @type string|undefined
+         * @type string | undefined
          */
         normal: void 0,
         /**
          * The TTF font file for bold text.
          *
-         * @type string|undefined
+         * @type string | undefined
          */
         bold: void 0,
         /**
          * The TTF font file for bold and italic text.
          *
-         * @type string|undefined
+         * @type string | undefined
          */
         bolditalic: void 0,
         /**
          * The TTF font file for italic text.
          *
-         * @type string|undefined
+         * @type string | undefined
          */
         italic: void 0
     },
@@ -593,7 +778,7 @@ const exporting = {
              * @sample highcharts/exporting/buttons-contextbutton-symbol-custom/
              *         Custom shape as symbol
              *
-             * @type  {Highcharts.SymbolKeyValue|"menu"|"menuball"|string}
+             * @type  {Highcharts.SymbolKeyValue | "menu" | "menuball" | string}
              * @since 2.0
              */
             symbol: 'menu',
@@ -614,12 +799,10 @@ const exporting = {
              * By default, there is the "View in full screen" and "Print" menu
              * items, plus one menu item for each of the available export types.
              *
-             * @sample {highcharts} highcharts/exporting/menuitemdefinitions/
-             *         Menu item definitions
-             * @sample {highstock} highcharts/exporting/menuitemdefinitions/
-             *         Menu item definitions
-             * @sample {highmaps} highcharts/exporting/menuitemdefinitions/
+             * @sample highcharts/exporting/menuitemdefinitions/
              *         Menu item definitions
+             * @sample highcharts/exporting/menuitemdefinitions-webp/
+             *         Adding a custom menu item for WebP export
              *
              * @type    {Array<string>}
              * @default ["viewFullscreen", "printChart", "separator", "downloadPNG", "downloadJPEG", "downloadSVG"]
@@ -651,12 +834,10 @@ const exporting = {
      * Custom text for the "exitFullScreen" can be set only in lang options
      * (it is not a separate button).
      *
-     * @sample {highcharts} highcharts/exporting/menuitemdefinitions/
-     *         Menu item definitions
-     * @sample {highstock} highcharts/exporting/menuitemdefinitions/
-     *         Menu item definitions
-     * @sample {highmaps} highcharts/exporting/menuitemdefinitions/
+     * @sample highcharts/exporting/menuitemdefinitions/
      *         Menu item definitions
+     * @sample highcharts/exporting/menuitemdefinitions-webp/
+     *         Adding a custom menu item for WebP export
      *
      *
      * @type    {Highcharts.Dictionary<Highcharts.ExportingMenuObject>}
@@ -670,9 +851,7 @@ const exporting = {
         viewFullscreen: {
             textKey: 'viewFullscreen',
             onclick: function () {
-                if (this.fullscreen) {
-                    this.fullscreen.toggle();
-                }
+                this.fullscreen?.toggle();
             }
         },
         /**
@@ -681,7 +860,7 @@ const exporting = {
         printChart: {
             textKey: 'printChart',
             onclick: function () {
-                this.print();
+                this.exporting?.print();
             }
         },
         /**
@@ -695,8 +874,8 @@ const exporting = {
          */
         downloadPNG: {
             textKey: 'downloadPNG',
-            onclick: function () {
-                this.exportChart();
+            onclick: async function () {
+                await this.exporting?.exportChart();
             }
         },
         /**
@@ -704,8 +883,8 @@ const exporting = {
          */
         downloadJPEG: {
             textKey: 'downloadJPEG',
-            onclick: function () {
-                this.exportChart({
+            onclick: async function () {
+                await this.exporting?.exportChart({
                     type: 'image/jpeg'
                 });
             }
@@ -715,8 +894,8 @@ const exporting = {
          */
         downloadPDF: {
             textKey: 'downloadPDF',
-            onclick: function () {
-                this.exportChart({
+            onclick: async function () {
+                await this.exporting?.exportChart({
                     type: 'application/pdf'
                 });
             }
@@ -726,8 +905,8 @@ const exporting = {
          */
         downloadSVG: {
             textKey: 'downloadSVG',
-            onclick: function () {
-                this.exportChart({
+            onclick: async function () {
+                await this.exporting?.exportChart({
                     type: 'image/svg+xml'
                 });
             }
@@ -869,6 +1048,7 @@ const navigation = {
          *
          * @sample highcharts/title/widthadjust
          *         Adjust the spacing when using text button
+         *
          * @since 2.0
          */
         buttonSpacing: 5,
@@ -905,7 +1085,7 @@ const navigation = {
          *
          * @type      boolean
          * @default   false
-         * @since 10.3.0
+         * @since     10.3.0
          * @apioption navigation.buttonOptions.useHTML
          */
         /**
@@ -945,7 +1125,7 @@ const navigation = {
          * @sample highcharts/navigation/buttonoptions-symbolfill/
          *         Blue symbol stroke for one of the buttons
          *
-         * @type  {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
+         * @type  {Highcharts.ColorString | Highcharts.GradientColorObject | Highcharts.PatternObject}
          * @since 2.0
          */
         symbolFill: "#666666" /* Palette.neutralColor60 */,
@@ -985,7 +1165,7 @@ const navigation = {
             /**
              * The default fill exists only to capture hover events.
              *
-             * @type      {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
+             * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
              */
             fill: "#ffffff" /* Palette.backgroundColor */,
             /**
@@ -995,7 +1175,7 @@ const navigation = {
             /**
              * Default stroke for the buttons.
              *
-             * @type      {Highcharts.ColorString}
+             * @type {Highcharts.ColorString}
              */
             stroke: 'none',
             /**
@@ -1254,7 +1434,7 @@ class Fullscreen {
          * the fullscreen mode.
          *
          * @name Highcharts.Fullscreen#isOpen
-         * @type {boolean|undefined}
+         * @type {boolean | undefined}
          * @since 8.0.1
          */
         this.isOpen = false;
@@ -1396,7 +1576,7 @@ class Fullscreen {
      * @requires modules/full-screen
      */
     setButtonText() {
-        const chart = this.chart, exportDivElements = chart.exportDivElements, exportingOptions = chart.options.exporting, menuItems = (exportingOptions &&
+        const chart = this.chart, exportDivElements = chart.exporting?.divElements, exportingOptions = chart.options.exporting, menuItems = (exportingOptions &&
             exportingOptions.buttons &&
             exportingOptions.buttons.contextButton.menuItems), lang = chart.options.lang;
         if (exportingOptions &&
@@ -1519,7 +1699,7 @@ class Fullscreen {
  * */
 
 
-const { win } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
+const { win: HttpUtilities_win } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
 
 const { discardElement, objectEach } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
 /* *
@@ -1533,10 +1713,10 @@ const { discardElement, objectEach } = (highcharts_commonjs_highcharts_commonjs2
  * @function Highcharts.ajax
  *
  * @param {Highcharts.AjaxSettingsObject} settings
- *        The Ajax settings to use.
+ * The Ajax settings to use.
  *
- * @return {false|undefined}
- *         Returns false, if error occurred.
+ * @return {false | undefined}
+ * Returns false, if error occurred.
  */
 function ajax(settings) {
     const headers = {
@@ -1547,10 +1727,12 @@ function ajax(settings) {
     }, r = new XMLHttpRequest();
     /**
      * Private error handler.
+     *
      * @private
+     *
      * @param {XMLHttpRequest} xhr
      * Internal request object.
-     * @param {string|Error} err
+     * @param {string | Error} err
      * Occurred error.
      */
     function handleError(xhr, err) {
@@ -1606,11 +1788,12 @@ function ajax(settings) {
  * Get a JSON resource over XHR, also supporting CORS without preflight.
  *
  * @function Highcharts.getJSON
+ *
  * @param {string} url
- *        The URL to load.
+ * The URL to load.
  * @param {Function} success
- *        The success callback. For error handling, use the `Highcharts.ajax`
- *        function instead.
+ * The success callback. For error handling, use the `Highcharts.ajax` function
+ * instead.
  */
 function getJSON(url, success) {
     HttpUtilities.ajax({
@@ -1625,46 +1808,44 @@ function getJSON(url, success) {
     });
 }
 /**
- * The post utility
+ * The post utility.
  *
  * @private
  * @function Highcharts.post
  *
  * @param {string} url
- * Post URL
- *
+ * Post URL.
  * @param {Object} data
- * Post data
- *
+ * Post data.
  * @param {RequestInit} [fetchOptions]
- * Additional attributes for the post request
- */
-/**
- *
+ * Additional attributes for the post request.
  */
-function post(url, data, fetchOptions) {
-    const formData = new win.FormData();
-    // Add the data
-    objectEach(data, function (val, name) {
-        formData.append(name, val);
+async function post(url, data, fetchOptions) {
+    // Prepare a form to send the data
+    const formData = new HttpUtilities_win.FormData();
+    // Add the data to the form
+    objectEach(data, function (value, name) {
+        formData.append(name, value);
     });
     formData.append('b64', 'true');
-    const { filename, type } = data;
-    return win.fetch(url, {
+    // Send the POST
+    const response = await HttpUtilities_win.fetch(url, {
         method: 'POST',
         body: formData,
         ...fetchOptions
-    }).then((res) => {
-        if (res.ok) {
-            res.text().then((text) => {
-                const link = document.createElement('a');
-                link.href = `data:${type};base64,${text}`;
-                link.download = filename;
-                link.click();
-                discardElement(link);
-            });
-        }
     });
+    // Check the response
+    if (response.ok) {
+        // Get the text from the response
+        const text = await response.text();
+        // Prepare self-click link with the Base64 representation
+        const link = document.createElement('a');
+        link.href = `data:${data.type};base64,${text}`;
+        link.download = data.filename;
+        link.click();
+        // Remove the link
+        discardElement(link);
+    }
 }
 /* *
  *
@@ -1688,29 +1869,35 @@ const HttpUtilities = {
 * The payload to send.
 *
 * @name Highcharts.AjaxSettingsObject#data
-* @type {string|Highcharts.Dictionary<any>|undefined}
+* @type {string | Highcharts.Dictionary<any> | undefined}
 */ /**
 * The data type expected.
+*
 * @name Highcharts.AjaxSettingsObject#dataType
-* @type {"json"|"xml"|"text"|"octet"|undefined}
+* @type {"json" | "xml" | "text" | "octet" | undefined}
 */ /**
 * Function to call on error.
+*
 * @name Highcharts.AjaxSettingsObject#error
-* @type {Function|undefined}
+* @type {Function | undefined}
 */ /**
 * The headers; keyed on header name.
+*
 * @name Highcharts.AjaxSettingsObject#headers
-* @type {Highcharts.Dictionary<string>|undefined}
+* @type {Highcharts.Dictionary<string> | undefined}
 */ /**
 * Function to call on success.
+*
 * @name Highcharts.AjaxSettingsObject#success
-* @type {Function|undefined}
+* @type {Function | undefined}
 */ /**
 * The HTTP method to use. For example GET or POST.
+*
 * @name Highcharts.AjaxSettingsObject#type
-* @type {string|undefined}
+* @type {string | undefined}
 */ /**
 * The URL to call.
+*
 * @name Highcharts.AjaxSettingsObject#url
 * @type {string}
 */
@@ -1733,69 +1920,267 @@ const HttpUtilities = {
 
 
 
-const { defaultOptions } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
+const { defaultOptions, setOptions } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
 
+const { downloadURL: Exporting_downloadURL, getScript: Exporting_getScript } = Extensions_DownloadURL;
 
 
 
-const { doc, SVG_NS, win: Exporting_win } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
 
+const { composed: Exporting_composed, doc: Exporting_doc, isFirefox, isMS, isSafari: Exporting_isSafari, SVG_NS, win: Exporting_win } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
 
-const { addEvent: Exporting_addEvent, css, createElement, discardElement: Exporting_discardElement, extend, find, fireEvent: Exporting_fireEvent, isObject, merge, objectEach: Exporting_objectEach, pick, removeEvent, splat, uniqueKey } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
+
+const { addEvent: Exporting_addEvent, clearTimeout: Exporting_clearTimeout, createElement, css, discardElement: Exporting_discardElement, error: Exporting_error, extend, find, fireEvent: Exporting_fireEvent, isObject, merge, objectEach: Exporting_objectEach, pick, pushUnique: Exporting_pushUnique, removeEvent, splat, uniqueKey } = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
+highcharts_AST_commonjs_highcharts_AST_commonjs2_highcharts_AST_root_Highcharts_AST_default().allowedAttributes.push('data-z-index', 'fill-opacity', 'filter', 'preserveAspectRatio', 'rx', 'ry', 'stroke-dasharray', 'stroke-linejoin', 'stroke-opacity', 'text-anchor', 'transform', 'transform-origin', 'version', 'viewBox', 'visibility', 'xmlns', 'xmlns:xlink');
+highcharts_AST_commonjs_highcharts_AST_commonjs2_highcharts_AST_root_Highcharts_AST_default().allowedTags.push('desc', 'clippath', 'fedropshadow', 'femorphology', 'g', 'image');
 /* *
  *
- *  Composition
+ *  Constants
  *
  * */
-var Exporting;
-(function (Exporting) {
+const Exporting_domurl = Exporting_win.URL || Exporting_win.webkitURL || Exporting_win;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * The Exporting class provides methods for exporting charts to images. If the
+ * exporting module is loaded, this class is instantiated on the chart and
+ * available through the `chart.exporting` property. Read more about the
+ * [exporting module](https://www.highcharts.com/docs/export-module-overview).
+ *
+ * @class
+ * @name Highcharts.Exporting
+ *
+ * @param {Highcharts.Chart} chart
+ * The chart instance.
+ *
+ */
+class Exporting {
     /* *
      *
-     *  Declarations
+     *  Constructor
      *
      * */
+    constructor(chart, options) {
+        this.options = {};
+        this.chart = chart;
+        this.options = options;
+        this.btnCount = 0;
+        this.buttonOffset = 0;
+        this.divElements = [];
+        this.svgElements = [];
+    }
     /* *
      *
-     *  Constants
+     *  Static Functions
      *
      * */
-    // These CSS properties are not inlined. Remember camelCase.
-    const inlineDenylist = [
-        /-/, // In Firefox, both hyphened and camelCased names are listed
-        /^(clipPath|cssText|d|height|width)$/, // Full words
-        /^font$/, // More specific props are set
-        /[lL]ogical(Width|Height)$/,
-        /^parentRule$/,
-        /^(cssRules|ownerRules)$/, // #19516 read-only properties
-        /perspective/,
-        /TapHighlightColor/,
-        /^transition/,
-        /^length$/, // #7700
-        /^\d+$/ // #17538
-    ];
-    // These ones are translated to attributes rather than styles
-    const inlineToAttributes = [
-        'fill',
-        'stroke',
-        'strokeLinecap',
-        'strokeLinejoin',
-        'strokeWidth',
-        'textAnchor',
-        'x',
-        'y'
-    ];
-    Exporting.inlineAllowlist = [];
-    const unstyledElements = [
-        'clipPath',
-        'defs',
-        'desc'
-    ];
-    /* *
+    /**
+     * Make hyphenated property names out of camelCase.
      *
-     *  Variables
+     * @private
+     * @static
+     * @function Highcharts.Exporting#hyphenate
      *
-     * */
-    let printingChart;
+     * @param {string} property
+     * Property name in camelCase.
+     *
+     * @return {string}
+     * Hyphenated property name.
+     *
+     * @requires modules/exporting
+     */
+    static hyphenate(property) {
+        return property.replace(/[A-Z]/g, function (match) {
+            return '-' + match.toLowerCase();
+        });
+    }
+    /**
+     * Get data:URL from image URL.
+     *
+     * @private
+     * @static
+     * @async
+     * @function Highcharts.Exporting#imageToDataURL
+     *
+     * @param {string} imageURL
+     * The address or URL of the image.
+     * @param {number} scale
+     * The scale of the image.
+     * @param {string} imageType
+     * The export type of the image.
+     *
+     * @requires modules/exporting
+     */
+    static async imageToDataURL(imageURL, scale, imageType) {
+        // First, wait for the image to be loaded
+        const img = await Exporting.loadImage(imageURL), canvas = Exporting_doc.createElement('canvas'), ctx = canvas?.getContext('2d');
+        if (!ctx) {
+            throw new Error('No canvas found!');
+        }
+        else {
+            canvas.height = img.height * scale;
+            canvas.width = img.width * scale;
+            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+            // Now we try to get the contents of the canvas
+            return canvas.toDataURL(imageType);
+        }
+    }
+    /**
+     * Loads an image from the provided URL.
+     *
+     * @private
+     * @static
+     * @function Highcharts.Exporting#loadImage
+     *
+     * @param {string} imageURL
+     * The address or URL of the image.
+     *
+     * @return {Promise<HTMLImageElement>}
+     * Returns a Promise that resolves with the loaded HTMLImageElement.
+     *
+     * @requires modules/exporting
+     */
+    static loadImage(imageURL) {
+        return new Promise((resolve, reject) => {
+            // Create an image
+            const image = new Exporting_win.Image();
+            // Must be set prior to loading image source
+            image.crossOrigin = 'Anonymous';
+            // Return the image in case of success
+            image.onload = () => {
+                // IE bug where image is not always ready despite load event
+                setTimeout(() => {
+                    resolve(image);
+                }, Exporting.loadEventDeferDelay);
+            };
+            // Reject in case of fail
+            image.onerror = (error) => {
+                reject(error);
+            };
+            // Provide the image URL
+            image.src = imageURL;
+        });
+    }
+    /**
+     * Prepares and returns the image export options with default values where
+     * necessary.
+     *
+     * @private
+     * @static
+     * @function Highcharts.Exporting#prepareImageOptions
+     *
+     * @param {Highcharts.ExportingOptions} exportingOptions
+     * The exporting options.
+     *
+     * @return {Exporting.ImageOptions}
+     * The finalized image export options with ensured values.
+     *
+     * @requires modules/exporting
+     */
+    static prepareImageOptions(exportingOptions) {
+        const type = exportingOptions?.type || 'image/png', libURL = (exportingOptions?.libURL ||
+            defaultOptions.exporting?.libURL);
+        return {
+            type,
+            filename: ((exportingOptions?.filename || 'chart') +
+                '.' +
+                (type === 'image/svg+xml' ? 'svg' : type.split('/')[1])),
+            scale: exportingOptions?.scale || 1,
+            // Allow libURL to end with or without fordward slash
+            libURL: libURL?.slice(-1) !== '/' ? libURL + '/' : libURL
+        };
+    }
+    /**
+     * A collection of fixes on the produced SVG to account for expand
+     * properties and browser bugs. Returns a cleaned SVG.
+     *
+     * @private
+     * @static
+     * @function Highcharts.Exporting#sanitizeSVG
+     *
+     * @param {string} svg
+     * SVG code to sanitize.
+     * @param {Highcharts.Options} options
+     * Chart options to apply.
+     *
+     * @return {string}
+     * Sanitized SVG code.
+     *
+     * @requires modules/exporting
+     */
+    static sanitizeSVG(svg, options) {
+        const split = svg.indexOf('</svg>') + 6, useForeignObject = svg.indexOf('<foreignObject') > -1;
+        let html = svg.substr(split);
+        // Remove any HTML added to the container after the SVG (#894, #9087)
+        svg = svg.substr(0, split);
+        if (useForeignObject) {
+            // Some tags needs to be closed in xhtml (#13726)
+            svg = svg.replace(/(<(?:img|br).*?(?=\>))>/g, '$1 />');
+            // Move HTML into a foreignObject
+        }
+        else if (html && options?.exporting?.allowHTML) {
+            html = '<foreignObject x="0" y="0" ' +
+                'width="' + options.chart.width + '" ' +
+                'height="' + options.chart.height + '">' +
+                '<body xmlns="http://www.w3.org/1999/xhtml">' +
+                // Some tags needs to be closed in xhtml (#13726)
+                html.replace(/(<(?:img|br).*?(?=\>))>/g, '$1 />') +
+                '</body>' +
+                '</foreignObject>';
+            svg = svg.replace('</svg>', html + '</svg>');
+        }
+        svg = svg
+            .replace(/zIndex="[^"]+"/g, '')
+            .replace(/symbolName="[^"]+"/g, '')
+            .replace(/jQuery\d+="[^"]+"/g, '')
+            .replace(/url\(("|&quot;)(.*?)("|&quot;)\;?\)/g, 'url($2)')
+            .replace(/url\([^#]+#/g, 'url(#')
+            .replace(/<svg /, '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ')
+            .replace(/ (NS\d+\:)?href=/g, ' xlink:href=') // #3567
+            .replace(/\n+/g, ' ')
+            // Replace HTML entities, issue #347
+            .replace(/&nbsp;/g, '\u00A0') // No-break space
+            .replace(/&shy;/g, '\u00AD'); // Soft hyphen
+        return svg;
+    }
+    /**
+     * Get blob URL from SVG code. Falls back to normal data URI.
+     *
+     * @private
+     * @static
+     * @function Highcharts.Exporting#svgToDataURL
+     *
+     * @param {string} svg
+     * SVG to get the URL from.
+     *
+     * @return {string}
+     * The data URL.
+     *
+     * @requires modules/exporting
+     */
+    static svgToDataURL(svg) {
+        // Webkit and not chrome
+        const userAgent = Exporting_win.navigator.userAgent;
+        const webKit = (userAgent.indexOf('WebKit') > -1 &&
+            userAgent.indexOf('Chrome') < 0);
+        try {
+            // Safari requires data URI since it doesn't allow navigation to
+            // blob URLs. ForeignObjects also don't work well in Blobs in Chrome
+            // (#14780).
+            if (!webKit && svg.indexOf('<foreignObject') === -1) {
+                return Exporting_domurl.createObjectURL(new Exporting_win.Blob([svg], {
+                    type: 'image/svg+xml;charset-utf-16'
+                }));
+            }
+        }
+        catch {
+            // Ignore
+        }
+        return 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);
+    }
     /* *
      *
      *  Functions
@@ -1805,26 +2190,21 @@ var Exporting;
      * Add the export button to the chart, with options.
      *
      * @private
-     * @function Highcharts.Chart#addButton
-     * @param {Highcharts.NavigationButtonOptions} options
+     * @function Highcharts.Exporting#addButton
+     *
+     * @param {Highcharts.ExportingButtonOptions} options
+     * The exporting button options object.
+     *
      * @requires modules/exporting
      */
-    function addButton(options) {
-        const chart = this, renderer = chart.renderer, btnOptions = merge(chart.options.navigation.buttonOptions, options), onclick = btnOptions.onclick, menuItems = btnOptions.menuItems, symbolSize = btnOptions.symbolSize || 12;
+    addButton(options) {
+        const exporting = this, chart = exporting.chart, renderer = chart.renderer, btnOptions = merge(chart.options.navigation?.buttonOptions, options), onclick = btnOptions.onclick, menuItems = btnOptions.menuItems, symbolSize = btnOptions.symbolSize || 12;
         let symbol;
-        if (!chart.btnCount) {
-            chart.btnCount = 0;
-        }
-        // Keeps references to the button elements
-        if (!chart.exportDivElements) {
-            chart.exportDivElements = [];
-            chart.exportSVGElements = [];
-        }
         if (btnOptions.enabled === false || !btnOptions.theme) {
             return;
         }
         const theme = chart.styledMode ? {} : btnOptions.theme;
-        let callback;
+        let callback = (() => { });
         if (onclick) {
             callback = function (e) {
                 if (e) {
@@ -1839,7 +2219,7 @@ var Exporting;
                 if (e) {
                     e.stopPropagation();
                 }
-                chart.contextMenu(button.menuClassName, menuItems, button.translateX || 0, button.translateY || 0, button.width || 0, button.height || 0, button);
+                exporting.contextMenu(button.menuClassName, menuItems, button.translateX || 0, button.translateY || 0, button.width || 0, button.height || 0, button);
                 button.setState(2);
             };
         }
@@ -1854,18 +2234,19 @@ var Exporting;
             });
         }
         const button = renderer
-            .button(btnOptions.text, 0, 0, callback, theme, void 0, void 0, void 0, void 0, btnOptions.useHTML)
-            .addClass(options.className)
+            .button(btnOptions.text || '', 0, 0, callback, theme, void 0, void 0, void 0, void 0, btnOptions.useHTML)
+            .addClass(options.className || '')
             .attr({
-            title: pick(chart.options.lang[btnOptions._titleKey || btnOptions.titleKey], '')
+            title: pick(chart.options.lang[(btnOptions._titleKey ||
+                btnOptions.titleKey)], '')
         });
         button.menuClassName = (options.menuClassName ||
-            'highcharts-menu-' + chart.btnCount++);
+            'highcharts-menu-' + exporting.btnCount++);
         if (btnOptions.symbol) {
             symbol = renderer
-                .symbol(btnOptions.symbol, Math.round((btnOptions.symbolX || 0) - (symbolSize / 2)), Math.round((btnOptions.symbolY || 0) - (symbolSize / 2)), symbolSize, symbolSize
+                .symbol(btnOptions.symbol, Math.round((btnOptions.symbolX || 0) - (symbolSize / 2)), Math.round((btnOptions.symbolY || 0) - (symbolSize / 2)), symbolSize, symbolSize, 
             // If symbol is an image, scale it (#7957)
-            , {
+            {
                 width: symbolSize,
                 height: symbolSize
             })
@@ -1883,73 +2264,69 @@ var Exporting;
             }
         }
         button
-            .add(chart.exportingGroup)
+            .add(exporting.group)
             .align(extend(btnOptions, {
             width: button.width,
-            x: pick(btnOptions.x, chart.buttonOffset) // #1654
+            x: pick(btnOptions.x, exporting.buttonOffset) // #1654
         }), true, 'spacingBox');
-        chart.buttonOffset += (((button.width || 0) + btnOptions.buttonSpacing) *
+        exporting.buttonOffset += (((button.width || 0) + (btnOptions.buttonSpacing || 0)) *
             (btnOptions.align === 'right' ? -1 : 1));
-        chart.exportSVGElements.push(button, symbol);
+        exporting.svgElements.push(button, symbol);
     }
     /**
      * Clean up after printing a chart.
      *
-     * @function Highcharts#afterPrint
-     *
      * @private
-     *
-     * @param {Highcharts.Chart} chart
-     *        Chart that was (or suppose to be) printed
+     * @function Highcharts.Exporting#afterPrint
      *
      * @emits Highcharts.Chart#event:afterPrint
+     *
+     * @requires modules/exporting
      */
-    function afterPrint() {
-        const chart = this;
-        if (!chart.printReverseInfo) {
+    afterPrint() {
+        const chart = this.chart;
+        if (!this.printReverseInfo) {
             return void 0;
         }
-        const { childNodes, origDisplay, resetParams } = chart.printReverseInfo;
+        const { childNodes, origDisplay, resetParams } = this.printReverseInfo;
         // Put the chart back in
-        chart.moveContainers(chart.renderTo);
+        this.moveContainers(chart.renderTo);
         // Restore all body content
         [].forEach.call(childNodes, function (node, i) {
             if (node.nodeType === 1) {
                 node.style.display = (origDisplay[i] || '');
             }
         });
-        chart.isPrinting = false;
+        this.isPrinting = false;
         // Reset printMaxWidth
         if (resetParams) {
             chart.setSize.apply(chart, resetParams);
         }
-        delete chart.printReverseInfo;
-        printingChart = void 0;
+        delete this.printReverseInfo;
+        Exporting.printingChart = void 0;
         Exporting_fireEvent(chart, 'afterPrint');
     }
     /**
      * Prepare chart and document before printing a chart.
      *
-     * @function Highcharts#beforePrint
-     *
      * @private
-     *
+     * @function Highcharts.Exporting#beforePrint
      *
      * @emits Highcharts.Chart#event:beforePrint
+     *
+     * @requires modules/exporting
      */
-    function beforePrint() {
-        const chart = this, body = doc.body, printMaxWidth = chart.options.exporting.printMaxWidth, printReverseInfo = {
+    beforePrint() {
+        const chart = this.chart, body = Exporting_doc.body, printMaxWidth = this.options.printMaxWidth, printReverseInfo = {
             childNodes: body.childNodes,
             origDisplay: [],
             resetParams: void 0
         };
-        chart.isPrinting = true;
+        this.isPrinting = true;
         chart.pointer?.reset(void 0, 0);
         Exporting_fireEvent(chart, 'beforePrint');
         // Handle printMaxWidth
-        const handleMaxWidth = printMaxWidth &&
-            chart.chartWidth > printMaxWidth;
-        if (handleMaxWidth) {
+        if (printMaxWidth && chart.chartWidth > printMaxWidth) {
             printReverseInfo.resetParams = [
                 chart.options.chart.width,
                 void 0,
@@ -1965,131 +2342,45 @@ var Exporting;
             }
         });
         // Pull out the chart
-        chart.moveContainers(body);
+        this.moveContainers(body);
         // Storage details for undo action after printing
-        chart.printReverseInfo = printReverseInfo;
+        this.printReverseInfo = printReverseInfo;
     }
     /**
+     * Display a popup menu for choosing the export type.
+     *
      * @private
+     * @function Highcharts.Exporting#contextMenu
+     *
+     * @param {string} className
+     * An identifier for the menu.
+     * @param {Array<(string | Highcharts.ExportingMenuObject)>} items
+     * A collection with text and onclicks for the items.
+     * @param {number} x
+     * The x position of the opener button.
+     * @param {number} y
+     * The y position of the opener button.
+     * @param {number} width
+     * The width of the opener button.
+     * @param {number} height
+     * The height of the opener button.
+     * @param {SVGElement} button
+     * The SVG button element.
+     *
+     * @emits Highcharts.Chart#event:exportMenuHidden
+     * @emits Highcharts.Chart#event:exportMenuShown
+     *
+     * @requires modules/exporting
      */
-    function chartCallback(chart) {
-        const composition = chart;
-        composition.renderExporting();
-        Exporting_addEvent(chart, 'redraw', composition.renderExporting);
-        // Destroy the export elements at chart destroy
-        Exporting_addEvent(chart, 'destroy', composition.destroyExport);
-        // Uncomment this to see a button directly below the chart, for quick
-        // testing of export
-        /*
-        let button, viewImage, viewSource;
-        if (!chart.renderer.forExport) {
-            viewImage = function () {
-                let div = doc.createElement('div');
-                div.innerHTML = chart.getSVGForExport();
-                chart.renderTo.parentNode.appendChild(div);
-            };
-
-            viewSource = function () {
-                let pre = doc.createElement('pre');
-                pre.innerHTML = chart.getSVGForExport()
-                    .replace(/</g, '\n&lt;')
-                    .replace(/>/g, '&gt;');
-                chart.renderTo.parentNode.appendChild(pre);
-            };
-
-            viewImage();
-
-            // View SVG Image
-            button = doc.createElement('button');
-            button.innerHTML = 'View SVG Image';
-            chart.renderTo.parentNode.appendChild(button);
-            button.onclick = viewImage;
-
-            // View SVG Source
-            button = doc.createElement('button');
-            button.innerHTML = 'View SVG Source';
-            chart.renderTo.parentNode.appendChild(button);
-            button.onclick = viewSource;
-        }
-        //*/
-    }
-    /**
-     * @private
-     */
-    function compose(ChartClass, SVGRendererClass) {
-        Exporting_ExportingSymbols.compose(SVGRendererClass);
-        Exporting_Fullscreen.compose(ChartClass);
-        const chartProto = ChartClass.prototype;
-        if (!chartProto.exportChart) {
-            chartProto.afterPrint = afterPrint;
-            chartProto.exportChart = exportChart;
-            chartProto.inlineStyles = inlineStyles;
-            chartProto.print = print;
-            chartProto.sanitizeSVG = sanitizeSVG;
-            chartProto.getChartHTML = getChartHTML;
-            chartProto.getSVG = getSVG;
-            chartProto.getSVGForExport = getSVGForExport;
-            chartProto.getFilename = getFilename;
-            chartProto.moveContainers = moveContainers;
-            chartProto.beforePrint = beforePrint;
-            chartProto.contextMenu = contextMenu;
-            chartProto.addButton = addButton;
-            chartProto.destroyExport = destroyExport;
-            chartProto.renderExporting = renderExporting;
-            chartProto.resolveCSSVariables = resolveCSSVariables;
-            chartProto.callbacks.push(chartCallback);
-            Exporting_addEvent(ChartClass, 'init', onChartInit);
-            Exporting_addEvent(ChartClass, 'layOutTitle', onChartLayOutTitle);
-            if ((highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default()).isSafari) {
-                Exporting_win.matchMedia('print').addListener(function (mqlEvent) {
-                    if (!printingChart) {
-                        return void 0;
-                    }
-                    if (mqlEvent.matches) {
-                        printingChart.beforePrint();
-                    }
-                    else {
-                        printingChart.afterPrint();
-                    }
-                });
-            }
-            defaultOptions.exporting = merge(Exporting_ExportingDefaults.exporting, defaultOptions.exporting);
-            defaultOptions.lang = merge(Exporting_ExportingDefaults.lang, defaultOptions.lang);
-            // Buttons and menus are collected in a separate config option set
-            // called 'navigation'. This can be extended later to add control
-            // buttons like zoom and pan right click menus.
-            defaultOptions.navigation = merge(Exporting_ExportingDefaults.navigation, defaultOptions.navigation);
-        }
-    }
-    Exporting.compose = compose;
-    /**
-     * Display a popup menu for choosing the export type.
-     *
-     * @private
-     * @function Highcharts.Chart#contextMenu
-     * @param {string} className
-     *        An identifier for the menu.
-     * @param {Array<string|Highcharts.ExportingMenuObject>} items
-     *        A collection with text and onclicks for the items.
-     * @param {number} x
-     *        The x position of the opener button
-     * @param {number} y
-     *        The y position of the opener button
-     * @param {number} width
-     *        The width of the opener button
-     * @param {number} height
-     *        The height of the opener button
-     * @requires modules/exporting
-     */
-    function contextMenu(className, items, x, y, width, height, button) {
-        const chart = this, navOptions = chart.options.navigation, chartWidth = chart.chartWidth, chartHeight = chart.chartHeight, cacheName = 'cache-' + className, 
+    contextMenu(className, items, x, y, width, height, button) {
+        const exporting = this, chart = exporting.chart, navOptions = chart.options.navigation, chartWidth = chart.chartWidth, chartHeight = chart.chartHeight, cacheName = 'cache-' + className, 
         // For mouse leave detection
         menuPadding = Math.max(width, height);
         let innerMenu, menu = chart[cacheName];
         // Create the menu only the first time
         if (!menu) {
             // Create a HTML element above the SVG
-            chart.exportContextMenu = chart[cacheName] = menu =
+            exporting.contextMenuEl = chart[cacheName] = menu =
                 createElement('div', {
                     className: className
                 }, {
@@ -2107,10 +2398,10 @@ var Exporting;
             // Presentational CSS
             if (!chart.styledMode) {
                 css(innerMenu, extend({
-                    MozBoxShadow: '3px 3px 10px #888',
-                    WebkitBoxShadow: '3px 3px 10px #888',
-                    boxShadow: '3px 3px 10px #888'
-                }, navOptions.menuStyle));
+                    MozBoxShadow: '3px 3px 10px #0008',
+                    WebkitBoxShadow: '3px 3px 10px #0008',
+                    boxShadow: '3px 3px 10px #0008'
+                }, navOptions?.menuStyle || {}));
             }
             // Hide on mouse out
             menu.hideMenu = function () {
@@ -2118,35 +2409,38 @@ var Exporting;
                 if (button) {
                     button.setState(0);
                 }
-                chart.openMenu = false;
+                if (chart.exporting) {
+                    chart.exporting.openMenu = false;
+                }
                 // #10361, #9998
                 css(chart.renderTo, { overflow: 'hidden' });
                 css(chart.container, { overflow: 'hidden' });
-                highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default().clearTimeout(menu.hideTimer);
+                Exporting_clearTimeout(menu.hideTimer);
                 Exporting_fireEvent(chart, 'exportMenuHidden');
             };
             // Hide the menu some time after mouse leave (#1357)
-            chart.exportEvents.push(Exporting_addEvent(menu, 'mouseleave', function () {
+            exporting.events?.push(Exporting_addEvent(menu, 'mouseleave', function () {
                 menu.hideTimer = Exporting_win.setTimeout(menu.hideMenu, 500);
             }), Exporting_addEvent(menu, 'mouseenter', function () {
-                highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default().clearTimeout(menu.hideTimer);
+                Exporting_clearTimeout(menu.hideTimer);
             }), 
             // Hide it on clicking or touching outside the menu (#2258,
             // #2335, #2407)
-            Exporting_addEvent(doc, 'mouseup', function (e) {
+            Exporting_addEvent(Exporting_doc, 'mouseup', function (e) {
                 if (!chart.pointer?.inClass(e.target, className)) {
                     menu.hideMenu();
                 }
             }), Exporting_addEvent(menu, 'click', function () {
-                if (chart.openMenu) {
+                if (chart.exporting?.openMenu) {
                     menu.hideMenu();
                 }
             }));
             // Create the items
             items.forEach(function (item) {
                 if (typeof item === 'string') {
-                    item = chart.options.exporting
-                        .menuItemDefinitions[item];
+                    if (exporting.options.menuItemDefinitions?.[item]) {
+                        item = exporting.options.menuItemDefinitions[item];
+                    }
                 }
                 if (isObject(item, true)) {
                     let element;
@@ -2157,7 +2451,7 @@ var Exporting;
                         // When chart initialized with the table, wrong button
                         // text displayed, #14352.
                         if (item.textKey === 'viewData' &&
-                            chart.isDataTableVisible) {
+                            exporting.isDataTableVisible) {
                             item.textKey = 'hideData';
                         }
                         element = createElement('li', {
@@ -2168,44 +2462,45 @@ var Exporting;
                                 }
                                 menu.hideMenu();
                                 if (typeof item !== 'string' && item.onclick) {
+                                    // eslint-disable-next-line @typescript-eslint/no-floating-promises
                                     item.onclick.apply(chart, arguments);
                                 }
                             }
                         }, void 0, innerMenu);
-                        highcharts_AST_commonjs_highcharts_AST_commonjs2_highcharts_AST_root_Highcharts_AST_default().setElementHTML(element, item.text ||
-                            chart.options.lang[item.textKey]);
+                        highcharts_AST_commonjs_highcharts_AST_commonjs2_highcharts_AST_root_Highcharts_AST_default().setElementHTML(element, item.text || chart.options.lang[item.textKey]);
                         if (!chart.styledMode) {
                             element.onmouseover = function () {
-                                css(this, navOptions.menuItemHoverStyle);
+                                css(this, navOptions?.menuItemHoverStyle || {});
                             };
                             element.onmouseout = function () {
-                                css(this, navOptions.menuItemStyle);
+                                css(this, navOptions?.menuItemStyle || {});
                             };
                             css(element, extend({
                                 cursor: 'pointer'
-                            }, navOptions.menuItemStyle || {}));
+                            }, navOptions?.menuItemStyle || {}));
                         }
                     }
                     // Keep references to menu divs to be able to destroy them
-                    chart.exportDivElements.push(element);
+                    exporting.divElements.push(element);
                 }
             });
             // Keep references to menu and innerMenu div to be able to destroy
             // them
-            chart.exportDivElements.push(innerMenu, menu);
-            chart.exportMenuWidth = menu.offsetWidth;
-            chart.exportMenuHeight = menu.offsetHeight;
+            exporting.divElements.push(innerMenu, menu);
+            exporting.menuHeight = menu.offsetHeight;
+            exporting.menuWidth = menu.offsetWidth;
         }
         const menuStyle = { display: 'block' };
         // If outside right, right align it
-        if (x + (chart.exportMenuWidth || 0) > chartWidth) {
+        if (x + (exporting.menuWidth || 0) > chartWidth) {
             menuStyle.right = (chartWidth - x - width - menuPadding) + 'px';
         }
         else {
             menuStyle.left = (x - menuPadding) + 'px';
         }
         // If outside bottom, bottom align it
-        if (y + height + (chart.exportMenuHeight || 0) > chartHeight &&
+        if (y + height + (exporting.menuHeight || 0) >
+            chartHeight &&
             button.alignOptions?.verticalAlign !== 'top') {
             menuStyle.bottom = (chartHeight - y - menuPadding) + 'px';
         }
@@ -2216,106 +2511,272 @@ var Exporting;
         // #10361, #9998
         css(chart.renderTo, { overflow: '' });
         css(chart.container, { overflow: '' });
-        chart.openMenu = true;
+        if (chart.exporting) {
+            chart.exporting.openMenu = true;
+        }
         Exporting_fireEvent(chart, 'exportMenuShown');
     }
     /**
      * Destroy the export buttons.
+     *
      * @private
-     * @function Highcharts.Chart#destroyExport
+     * @function Highcharts.Exporting#destroy
+     *
      * @param {global.Event} [e]
+     * Event object.
+     *
      * @requires modules/exporting
      */
-    function destroyExport(e) {
-        const chart = e ? e.target : this, exportSVGElements = chart.exportSVGElements, exportDivElements = chart.exportDivElements, exportEvents = chart.exportEvents;
+    destroy(e) {
+        const exporting = this, chart = e ? e.target : exporting.chart, { divElements, events, svgElements } = exporting;
         let cacheName;
         // Destroy the extra buttons added
-        if (exportSVGElements) {
-            exportSVGElements.forEach((elem, i) => {
-                // Destroy and null the svg elements
-                if (elem) { // #1822
-                    elem.onclick = elem.ontouchstart = null;
-                    cacheName = 'cache-' + elem.menuClassName;
-                    if (chart[cacheName]) {
-                        delete chart[cacheName];
-                    }
-                    exportSVGElements[i] = elem.destroy();
+        svgElements.forEach((elem, i) => {
+            // Destroy and null the svg elements
+            if (elem) { // #1822
+                elem.onclick = elem.ontouchstart = null;
+                cacheName = 'cache-' + elem.menuClassName;
+                if (chart[cacheName]) {
+                    delete chart[cacheName];
                 }
-            });
-            exportSVGElements.length = 0;
-        }
+                svgElements[i] = elem.destroy();
+            }
+        });
+        svgElements.length = 0;
         // Destroy the exporting group
-        if (chart.exportingGroup) {
-            chart.exportingGroup.destroy();
-            delete chart.exportingGroup;
+        if (exporting.group) {
+            exporting.group.destroy();
+            delete exporting.group;
         }
         // Destroy the divs for the menu
-        if (exportDivElements) {
-            exportDivElements.forEach(function (elem, i) {
-                if (elem) {
-                    // Remove the event handler
-                    highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default().clearTimeout(elem.hideTimer); // #5427
-                    removeEvent(elem, 'mouseleave');
-                    // Remove inline events
-                    // (chart.exportDivElements as any)[i] =
-                    exportDivElements[i] =
-                        elem.onmouseout =
-                            elem.onmouseover =
-                                elem.ontouchstart =
-                                    elem.onclick = null;
-                    // Destroy the div by moving to garbage bin
-                    Exporting_discardElement(elem);
-                }
-            });
-            exportDivElements.length = 0;
-        }
-        if (exportEvents) {
-            exportEvents.forEach(function (unbind) {
+        divElements.forEach(function (elem, i) {
+            if (elem) {
+                // Remove the event handler
+                Exporting_clearTimeout(elem.hideTimer); // #5427
+                removeEvent(elem, 'mouseleave');
+                // Remove inline events
+                divElements[i] =
+                    elem.onmouseout =
+                        elem.onmouseover =
+                            elem.ontouchstart =
+                                elem.onclick = null;
+                // Destroy the div by moving to garbage bin
+                Exporting_discardElement(elem);
+            }
+        });
+        divElements.length = 0;
+        if (events) {
+            events.forEach(function (unbind) {
                 unbind();
             });
-            exportEvents.length = 0;
+            events.length = 0;
+        }
+    }
+    /**
+     * Get data URL to an image of an SVG and call download on its options
+     * object:
+     *
+     * - **filename:** Name of resulting downloaded file without extension.
+     * Default is based on the chart title.
+     * - **type:** File type of resulting download. Default is `image/png`.
+     * - **scale:** Scaling factor of downloaded image compared to source.
+     * Default is `2`.
+     * - **libURL:** URL pointing to location of dependency scripts to download
+     * on demand. Default is the exporting.libURL option of the global
+     * Highcharts options pointing to our server.
+     *
+     * @async
+     * @private
+     * @function Highcharts.Exporting#downloadSVG
+     *
+     * @param {string} svg
+     * The generated SVG.
+     * @param {Highcharts.ExportingOptions} exportingOptions
+     * The exporting options.
+     *
+     * @requires modules/exporting
+     */
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async downloadSVG(svg, exportingOptions) {
+        const eventArgs = {
+            svg,
+            exportingOptions,
+            exporting: this
+        };
+        // Fire a custom event before the export starts
+        Exporting_fireEvent(Exporting.prototype, 'downloadSVG', eventArgs);
+        // If the event was prevented, do not proceed with the export
+        if (eventArgs.defaultPrevented) {
+            return;
+        }
+        // Get the final image options
+        const { type, filename, scale, libURL } = Exporting.prepareImageOptions(exportingOptions);
+        let svgURL;
+        // Initiate download depending on file type
+        if (type === 'application/pdf') {
+            // Error in case of offline-exporting module is not loaded
+            throw new Error('Offline exporting logic for PDF type is not found.');
+        }
+        else if (type === 'image/svg+xml') {
+            // SVG download. In this case, we want to use Microsoft specific
+            // Blob if available
+            if (typeof Exporting_win.MSBlobBuilder !== 'undefined') {
+                const blob = new Exporting_win.MSBlobBuilder();
+                blob.append(svg);
+                svgURL = blob.getBlob('image/svg+xml');
+            }
+            else {
+                svgURL = Exporting.svgToDataURL(svg);
+            }
+            // Download the chart
+            Exporting_downloadURL(svgURL, filename);
+        }
+        else {
+            // PNG/JPEG download - create bitmap from SVG
+            svgURL = Exporting.svgToDataURL(svg);
+            try {
+                Exporting.objectURLRevoke = true;
+                // First, try to get PNG by rendering on canvas
+                const dataURL = await Exporting.imageToDataURL(svgURL, scale, type);
+                Exporting_downloadURL(dataURL, filename);
+            }
+            catch (error) {
+                // No need for the below logic to run in case no canvas is
+                // found
+                if (error.message === 'No canvas found!') {
+                    throw error;
+                }
+                // Or in case of exceeding the input length
+                if (svg.length > 100000000 /* RegexLimits.svgLimit */) {
+                    throw new Error('Input too long');
+                }
+                // Failed due to tainted canvas
+                // Create new and untainted canvas
+                const canvas = Exporting_doc.createElement('canvas'), ctx = canvas.getContext('2d'), matchedImageWidth = svg.match(
+                // eslint-disable-next-line max-len
+                /^<svg[^>]*\s{,1000}width\s{,1000}=\s{,1000}\"?(\d+)\"?[^>]*>/), matchedImageHeight = svg.match(
+                // eslint-disable-next-line max-len
+                /^<svg[^>]*\s{0,1000}height\s{,1000}=\s{,1000}\"?(\d+)\"?[^>]*>/);
+                if (ctx &&
+                    matchedImageWidth &&
+                    matchedImageHeight) {
+                    const imageWidth = +matchedImageWidth[1] * scale, imageHeight = +matchedImageHeight[1] * scale, downloadWithCanVG = () => {
+                        const v = Exporting_win.canvg.Canvg.fromString(ctx, svg);
+                        v.start();
+                        Exporting_downloadURL(Exporting_win.navigator.msSaveOrOpenBlob ?
+                            canvas.msToBlob() :
+                            canvas.toDataURL(type), filename);
+                    };
+                    canvas.width = imageWidth;
+                    canvas.height = imageHeight;
+                    // Must load canVG first if not found. Don't destroy the
+                    // object URL yet since we are doing things
+                    // asynchronously
+                    if (!Exporting_win.canvg) {
+                        Exporting.objectURLRevoke = true;
+                        await Exporting_getScript(libURL + 'canvg.js');
+                    }
+                    // Use loaded canvg
+                    downloadWithCanVG();
+                }
+            }
+            finally {
+                if (Exporting.objectURLRevoke) {
+                    try {
+                        Exporting_domurl.revokeObjectURL(svgURL);
+                    }
+                    catch {
+                        // Ignore
+                    }
+                }
+            }
         }
     }
     /**
-     * Exporting module required. Submit an SVG version of the chart to a server
-     * along with some parameters for conversion.
+     * Submit an SVG version of the chart along with some parameters for local
+     * conversion (PNG, JPEG, and SVG) or conversion on a server (PDF).
      *
      * @sample highcharts/members/chart-exportchart/
-     *         Export with no options
+     * Export with no options
      * @sample highcharts/members/chart-exportchart-filename/
-     *         PDF type and custom filename
+     * PDF type and custom filename
+     * @sample highcharts/exporting/menuitemdefinitions-webp/
+     * Export to WebP
      * @sample highcharts/members/chart-exportchart-custom-background/
-     *         Different chart background in export
+     * Different chart background in export
      * @sample stock/members/chart-exportchart/
-     *         Export with Highcharts Stock
+     * Export with Highcharts Stock
+     *
+     * @async
+     * @function Highcharts.Exporting#exportChart
+     *
+     * @param {Highcharts.ExportingOptions} [exportingOptions]
+     * Exporting options in addition to those defined in
+     * [exporting](https://api.highcharts.com/highcharts/exporting).
+     * @param {Highcharts.Options} [chartOptions]
+     * Additional chart options for the exported chart. For example a different
+     * background color can be added here, or `dataLabels` for export only.
+     *
+     * @requires modules/exporting
+     */
+    async exportChart(exportingOptions, chartOptions) {
+        // Merge the options
+        exportingOptions = merge(this.options, exportingOptions);
+        // If local if expected
+        if (exportingOptions.local) {
+            // Trigger the local export logic
+            await this.localExport(exportingOptions, chartOptions || {});
+        }
+        else {
+            // Get the SVG representation
+            const svg = this.getSVGForExport(exportingOptions, chartOptions);
+            // Do the post
+            if (exportingOptions.url) {
+                await Core_HttpUtilities.post(exportingOptions.url, {
+                    filename: exportingOptions.filename ?
+                        exportingOptions.filename.replace(/\//g, '-') :
+                        this.getFilename(),
+                    type: exportingOptions.type,
+                    width: exportingOptions.width,
+                    scale: exportingOptions.scale,
+                    svg
+                }, exportingOptions.fetchOptions);
+            }
+        }
+    }
+    /**
+     * Handles the fallback to the export server when a local export fails.
      *
-     * @function Highcharts.Chart#exportChart
+     * @private
+     * @async
+     * @function Highcharts.Exporting#fallbackToServer
      *
      * @param {Highcharts.ExportingOptions} exportingOptions
-     *        Exporting options in addition to those defined in
-     *        [exporting](https://api.highcharts.com/highcharts/exporting).
+     * The exporting options.
+     * @param {Error} err
+     * The error that caused the local export to fail.
      *
-     * @param {Highcharts.Options} chartOptions
-     *        Additional chart options for the exported chart. For example a
-     *        different background color can be added here, or `dataLabels` for
-     *        export only.
+     * @return {Promise<void>}
+     * A promise that resolves when the fallback process is complete.
      *
      * @requires modules/exporting
      */
-    function exportChart(exportingOptions, chartOptions) {
-        const svg = this.getSVGForExport(exportingOptions, chartOptions);
-        // Merge the options
-        exportingOptions = merge(this.options.exporting, exportingOptions);
-        // Do the post
-        Core_HttpUtilities.post(exportingOptions.url, {
-            filename: exportingOptions.filename ?
-                exportingOptions.filename.replace(/\//g, '-') :
-                this.getFilename(),
-            type: exportingOptions.type,
-            width: exportingOptions.width,
-            scale: exportingOptions.scale,
-            svg: svg
-        }, exportingOptions.fetchOptions);
+    async fallbackToServer(exportingOptions, err) {
+        if (exportingOptions.fallbackToExportServer === false) {
+            if (exportingOptions.error) {
+                exportingOptions.error(exportingOptions, err);
+            }
+            else {
+                // Fallback disabled
+                Exporting_error(28, true);
+            }
+        }
+        else if (exportingOptions.type === 'application/pdf') {
+            // The local must be false to fallback to server for PDF export
+            exportingOptions.local = false;
+            // Allow fallbacking to server only for PDFs that failed locally
+            await this.exportChart(exportingOptions);
+        }
     }
     /**
      * Return the unfiltered innerHTML of the chart container. Used as hook for
@@ -2323,38 +2784,43 @@ var Exporting;
      *
      * @see Chart#getSVG
      *
-     * @function Highcharts.Chart#getChartHTML
+     * @function Highcharts.Exporting#getChartHTML
+     *
+     * @param {boolean} [applyStyleSheets]
+     * whether or not to apply the style sheets.
      *
      * @return {string}
      * The unfiltered SVG of the chart.
      *
      * @requires modules/exporting
      */
-    function getChartHTML(applyStyleSheets) {
+    getChartHTML(applyStyleSheets) {
+        const chart = this.chart;
         if (applyStyleSheets) {
             this.inlineStyles();
         }
         this.resolveCSSVariables();
-        return this.container.innerHTML;
+        return chart.container.innerHTML;
     }
     /**
      * Get the default file name used for exported charts. By default it creates
      * a file name based on the chart title.
      *
-     * @function Highcharts.Chart#getFilename
+     * @function Highcharts.Exporting#getFilename
      *
-     * @return {string} A file name without extension.
+     * @return {string}
+     * A file name without extension.
      *
      * @requires modules/exporting
      */
-    function getFilename() {
-        const s = this.userOptions.title && this.userOptions.title.text;
-        let filename = this.options.exporting.filename;
+    getFilename() {
+        const titleText = this.chart.userOptions.title?.text;
+        let filename = this.options.filename;
         if (filename) {
             return filename.replace(/\//g, '-');
         }
-        if (typeof s === 'string') {
-            filename = s
+        if (typeof titleText === 'string') {
+            filename = titleText
                 .toLowerCase()
                 .replace(/<\/?[^>]+(>|$)/g, '') // Strip HTML tags
                 .replace(/[\s_]+/g, '-')
@@ -2373,45 +2839,45 @@ var Exporting;
      * Return an SVG representation of the chart.
      *
      * @sample highcharts/members/chart-getsvg/
-     *         View the SVG from a button
+     * View the SVG from a button
      *
-     * @function Highcharts.Chart#getSVG
+     * @function Highcharts.Exporting#getSVG
      *
      * @param {Highcharts.Options} [chartOptions]
-     *        Additional chart options for the generated SVG representation. For
-     *        collections like `xAxis`, `yAxis` or `series`, the additional
-     *        options is either merged in to the original item of the same
-     *        `id`, or to the first item if a common id is not found.
+     * Additional chart options for the generated SVG representation. For
+     * collections like `xAxis`, `yAxis` or `series`, the additional options is
+     * either merged in to the original item of the same `id`, or to the first
+     * item if a common id is not found.
      *
      * @return {string}
-     *         The SVG representation of the rendered chart.
+     * The SVG representation of the rendered chart.
      *
      * @emits Highcharts.Chart#event:getSVG
      *
      * @requires modules/exporting
      */
-    function getSVG(chartOptions) {
-        const chart = this;
+    getSVG(chartOptions) {
+        const chart = this.chart;
         let svg, seriesOptions, 
         // Copy the options and add extra options
         options = merge(chart.options, chartOptions);
         // Use userOptions to make the options chain in series right (#3881)
-        options.plotOptions = merge(chart.userOptions.plotOptions, chartOptions && chartOptions.plotOptions);
+        options.plotOptions = merge(chart.userOptions.plotOptions, chartOptions?.plotOptions);
         // ... and likewise with time, avoid that undefined time properties are
         // merged over legacy global time options
-        options.time = merge(chart.userOptions.time, chartOptions && chartOptions.time);
+        options.time = merge(chart.userOptions.time, chartOptions?.time);
         // Create a sandbox where a new chart will be generated
-        const sandbox = createElement('div', null, {
+        const sandbox = createElement('div', void 0, {
             position: 'absolute',
             top: '-9999em',
             width: chart.chartWidth + 'px',
             height: chart.chartHeight + 'px'
-        }, doc.body);
+        }, Exporting_doc.body);
         // Get the source size
-        const cssWidth = chart.renderTo.style.width, cssHeight = chart.renderTo.style.height, sourceWidth = options.exporting.sourceWidth ||
+        const cssWidth = chart.renderTo.style.width, cssHeight = chart.renderTo.style.height, sourceWidth = options.exporting?.sourceWidth ||
             options.chart.width ||
             (/px$/.test(cssWidth) && parseInt(cssWidth, 10)) ||
-            (options.isGantt ? 800 : 600), sourceHeight = options.exporting.sourceHeight ||
+            (options.isGantt ? 800 : 600), sourceHeight = options.exporting?.sourceHeight ||
             options.chart.height ||
             (/px$/.test(cssHeight) && parseInt(cssHeight, 10)) ||
             400;
@@ -2424,9 +2890,11 @@ var Exporting;
             width: sourceWidth,
             height: sourceHeight
         });
-        options.exporting.enabled = false; // Hide buttons in print
+        if (options.exporting) {
+            options.exporting.enabled = false; // Hide buttons in print
+        }
         delete options.data; // #3004
-        // prepare for replicating the chart
+        // Prepare for replicating the chart
         options.series = [];
         chart.series.forEach(function (serie) {
             seriesOptions = merge(serie.userOptions, {
@@ -2437,7 +2905,7 @@ var Exporting;
             });
             // Used for the navigator series that has its own option set
             if (!seriesOptions.isInternal) {
-                options.series.push(seriesOptions);
+                options?.series?.push(seriesOptions);
             }
         });
         const colls = {};
@@ -2446,7 +2914,7 @@ var Exporting;
             if (!axis.userOptions.internalKey) { // #6444
                 axis.userOptions.internalKey = uniqueKey();
             }
-            if (!axis.options.isInternal) {
+            if (options && !axis.options.isInternal) {
                 if (!colls[axis.coll]) {
                     colls[axis.coll] = true;
                     options[axis.coll] = [];
@@ -2469,10 +2937,10 @@ var Exporting;
         // Axis options and series options  (#2022, #3900, #5982)
         if (chartOptions) {
             ['xAxis', 'yAxis', 'series'].forEach(function (coll) {
-                const collOptions = {};
                 if (chartOptions[coll]) {
-                    collOptions[coll] = chartOptions[coll];
-                    chartCopy.update(collOptions);
+                    chartCopy.update({
+                        [coll]: chartOptions[coll]
+                    });
                 }
             });
         }
@@ -2498,92 +2966,96 @@ var Exporting;
             }
         });
         // Get the SVG from the container's innerHTML
-        svg = chartCopy.getChartHTML(chart.styledMode ||
-            options.exporting?.applyStyleSheets);
-        Exporting_fireEvent(this, 'getSVG', { chartCopy: chartCopy });
-        svg = chart.sanitizeSVG(svg, options);
+        svg = chartCopy.exporting?.getChartHTML(chart.styledMode ||
+            options.exporting?.applyStyleSheets) || '';
+        Exporting_fireEvent(chart, 'getSVG', { chartCopy: chartCopy });
+        svg = Exporting.sanitizeSVG(svg, options);
         // Free up memory
-        options = null;
+        options = void 0;
         chartCopy.destroy();
         Exporting_discardElement(sandbox);
         return svg;
     }
     /**
+     * Gets the SVG for export using the getSVG function with additional
+     * options.
+     *
      * @private
-     * @function Highcharts.Chart#getSVGForExport
+     * @function Highcharts.Exporting#getSVGForExport
+     *
+     * @param {Highcharts.ExportingOptions} [exportingOptions]
+     * The exporting options.
+     * @param {Highcharts.Options} [chartOptions]
+     * Additional chart options for the exported chart.
+     *
+     * @return {string}
+     * The SVG representation of the rendered chart.
+     *
+     * @requires modules/exporting
      */
-    function getSVGForExport(options, chartOptions) {
-        const chartExportingOptions = this.options.exporting;
-        return this.getSVG(merge({ chart: { borderRadius: 0 } }, chartExportingOptions.chartOptions, chartOptions, {
+    getSVGForExport(exportingOptions, chartOptions) {
+        const currentExportingOptions = this.options;
+        return this.getSVG(merge({ chart: { borderRadius: 0 } }, currentExportingOptions.chartOptions, chartOptions, {
             exporting: {
-                sourceWidth: ((options && options.sourceWidth) ||
-                    chartExportingOptions.sourceWidth),
-                sourceHeight: ((options && options.sourceHeight) ||
-                    chartExportingOptions.sourceHeight)
+                sourceWidth: (exportingOptions?.sourceWidth ||
+                    currentExportingOptions.sourceWidth),
+                sourceHeight: (exportingOptions?.sourceHeight ||
+                    currentExportingOptions.sourceHeight)
             }
         }));
     }
     /**
-     * Make hyphenated property names out of camelCase
-     * @private
-     * @param {string} prop
-     * Property name in camelCase
-     * @return {string}
-     * Hyphenated property name
-     */
-    function hyphenate(prop) {
-        return prop.replace(/[A-Z]/g, function (match) {
-            return '-' + match.toLowerCase();
-        });
-    }
-    /**
-     * Analyze inherited styles from stylesheets and add them inline
+     * Analyze inherited styles from stylesheets and add them inline.
      *
      * @private
-     * @function Highcharts.Chart#inlineStyles
+     * @function Highcharts.Exporting#inlineStyles
      *
      * @todo What are the border styles for text about? In general, text has a
-     *       lot of properties.
+     * lot of properties.
      *
      * @todo Make it work with IE9 and IE10.
      *
      * @requires modules/exporting
      */
-    function inlineStyles() {
-        const denylist = inlineDenylist, allowlist = Exporting.inlineAllowlist, // For IE
+    inlineStyles() {
+        const denylist = Exporting.inlineDenylist, allowlist = Exporting.inlineAllowlist, // For IE
         defaultStyles = {};
         let dummySVG;
         // Create an iframe where we read default styles without pollution from
         // this body
-        const iframe = doc.createElement('iframe');
-        css(iframe, {
+        const iframe = createElement('iframe', void 0, {
             width: '1px',
             height: '1px',
             visibility: 'hidden'
-        });
-        doc.body.appendChild(iframe);
-        const iframeDoc = (iframe.contentWindow && iframe.contentWindow.document);
+        }, Exporting_doc.body);
+        const iframeDoc = iframe.contentWindow?.document;
         if (iframeDoc) {
             iframeDoc.body.appendChild(iframeDoc.createElementNS(SVG_NS, 'svg'));
         }
         /**
-         * Call this on all elements and recurse to children
+         * Call this on all elements and recurse to children.
+         *
          * @private
-         * @param {Highcharts.HTMLDOMElement} node
-         *        Element child
-             */
+         * @function recurse
+         *
+         * @param {Highcharts.HTMLDOMElement | Highcharts.SVGSVGElement} node
+         * Element child.
+         */
         function recurse(node) {
             const filteredStyles = {};
             let styles, parentStyles, dummy, denylisted, allowlisted, i;
             /**
              * Check computed styles and whether they are in the allow/denylist
              * for styles or attributes.
+             *
              * @private
-             * @param {string} val
-             *        Style value
+             * @function filterStyles
+             *
+             * @param {string | number | Highcharts.GradientColor | Highcharts.PatternObject | undefined} val
+             * Style value.
              * @param {string} prop
-             *        Style property name
-                     */
+             * Style property name.
+             */
             function filterStyles(val, prop) {
                 // Check against allowlist & denylist
                 denylisted = allowlisted = false;
@@ -2614,12 +3086,12 @@ var Exporting;
                     // against parent (#7687).
                     if ((parentStyles[prop] !== val ||
                         node.nodeName === 'svg') &&
-                        defaultStyles[node.nodeName][prop] !== val) {
+                        (defaultStyles[node.nodeName])[prop] !== val) {
                         // Attributes
-                        if (!inlineToAttributes ||
-                            inlineToAttributes.indexOf(prop) !== -1) {
+                        if (!Exporting.inlineToAttributes ||
+                            Exporting.inlineToAttributes.indexOf(prop) !== -1) {
                             if (val) {
-                                node.setAttribute(hyphenate(prop), val);
+                                node.setAttribute(Exporting.hyphenate(prop), val);
                             }
                             // Styles
                         }
@@ -2631,8 +3103,9 @@ var Exporting;
             }
             if (iframeDoc &&
                 node.nodeType === 1 &&
-                unstyledElements.indexOf(node.nodeName) === -1) {
-                styles = Exporting_win.getComputedStyle(node, null);
+                Exporting.unstyledElements.indexOf(node.nodeName) === -1) {
+                styles =
+                    Exporting_win.getComputedStyle(node, null);
                 parentStyles = node.nodeName === 'svg' ?
                     {} :
                     Exporting_win.getComputedStyle(node.parentNode, null);
@@ -2646,7 +3119,8 @@ var Exporting;
                         doc.body.appendChild(dummySVG);
                     }
                     */
-                    dummySVG = iframeDoc.getElementsByTagName('svg')[0];
+                    dummySVG =
+                        iframeDoc.getElementsByTagName('svg')[0];
                     dummy = iframeDoc.createElementNS(node.namespaceURI, node.nodeName);
                     dummySVG.appendChild(dummy);
                     // Get the defaults into a standard object (simple merge
@@ -2671,9 +3145,9 @@ var Exporting;
                 for (const p in styles) {
                     if (
                     // Some browsers put lots of styles on the prototype...
-                    (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default()).isFirefox ||
-                        (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default()).isMS ||
-                        (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default()).isSafari || // #16902
+                    isFirefox ||
+                        isMS ||
+                        Exporting_isSafari || // #16902
                         // ... Chrome puts them on the instance
                         Object.hasOwnProperty.call(styles, p)) {
                         filterStyles(styles[p], p);
@@ -2693,43 +3167,140 @@ var Exporting;
             }
         }
         /**
-         * Remove the dummy objects used to get defaults
+         * Remove the dummy objects used to get defaults.
+         *
          * @private
+         * @function tearDown
          */
         function tearDown() {
             dummySVG.parentNode.removeChild(dummySVG);
             // Remove trash from DOM that stayed after each exporting
             iframe.parentNode.removeChild(iframe);
         }
-        recurse(this.container.querySelector('svg'));
+        recurse(this.chart.container.querySelector('svg'));
         tearDown();
     }
     /**
-     * Resolve CSS variables into hex colors
+     * Get SVG of chart prepared for client side export. This converts embedded
+     * images in the SVG to data URIs. It requires the regular exporting module.
+     * The options and chartOptions arguments are passed to the getSVGForExport
+     * function.
+     *
+     * @private
+     * @async
+     * @function Highcharts.Exporting#localExport
+     *
+     * @param {Highcharts.ExportingOptions} exportingOptions
+     * The exporting options.
+     * @param {Highcharts.Options} chartOptions
+     * Additional chart options for the exported chart.
+     *
+     * @return {Promise<string>}
+     * The sanitized SVG.
+     *
+     * @requires modules/exporting
      */
-    function resolveCSSVariables() {
-        const svgElements = this.container.querySelectorAll('*'), colorAttributes = ['color', 'fill', 'stop-color', 'stroke'];
-        Array.from(svgElements).forEach((element) => {
-            colorAttributes.forEach((attr) => {
-                const attrValue = element.getAttribute(attr);
-                if (attrValue?.includes('var(')) {
-                    element.setAttribute(attr, getComputedStyle(element).getPropertyValue(attr));
-                }
+    async localExport(exportingOptions, chartOptions) {
+        const chart = this.chart, exporting = this, 
+        // After grabbing the SVG of the chart's copy container we need
+        // to do sanitation on the SVG
+        sanitize = (svg) => Exporting.sanitizeSVG(svg || '', chartCopyOptions), 
+        // Return true if the SVG contains images with external data.
+        // With the boost module there are `image` elements with encoded
+        // PNGs, these are supported by svg2pdf and should pass (#10243)
+        hasExternalImages = function () {
+            return [].some.call(chart.container.getElementsByTagName('image'), function (image) {
+                const href = image.getAttribute('href');
+                return (href !== '' &&
+                    typeof href === 'string' &&
+                    href.indexOf('data:') !== 0);
             });
+        };
+        let chartCopyContainer, chartCopyOptions, href = null, images;
+        // If we are on IE and in styled mode, add an allowlist to the
+        // renderer for inline styles that we want to pass through. There
+        // are so many styles by default in IE that we don't want to
+        // denylist them all
+        if (isMS && chart.styledMode && !Exporting.inlineAllowlist.length) {
+            Exporting.inlineAllowlist.push(/^blockSize/, /^border/, /^caretColor/, /^color/, /^columnRule/, /^columnRuleColor/, /^cssFloat/, /^cursor/, /^fill$/, /^fillOpacity/, /^font/, /^inlineSize/, /^length/, /^lineHeight/, /^opacity/, /^outline/, /^parentRule/, /^rx$/, /^ry$/, /^stroke/, /^textAlign/, /^textAnchor/, /^textDecoration/, /^transform/, /^vectorEffect/, /^visibility/, /^x$/, /^y$/);
+        }
+        // Always fall back on:
+        // - MS browsers: Embedded images JPEG/PNG, or any PDF
+        // - Embedded images and PDF
+        if ((isMS &&
+            (exportingOptions.type === 'application/pdf' ||
+                chart.container.getElementsByTagName('image').length &&
+                    exportingOptions.type !== 'image/svg+xml')) || (exportingOptions.type === 'application/pdf' &&
+            hasExternalImages())) {
+            await this.fallbackToServer(exportingOptions, new Error('Image type not supported for this chart/browser.'));
+            return;
+        }
+        // Hook into getSVG to get a copy of the chart copy's container (#8273)
+        const unbindGetSVG = Exporting_addEvent(chart, 'getSVG', (e) => {
+            chartCopyOptions = e.chartCopy.options;
+            chartCopyContainer =
+                e.chartCopy.container.cloneNode(true);
+            images = chartCopyContainer && chartCopyContainer
+                .getElementsByTagName('image') || [];
         });
+        try {
+            // Trigger hook to get chart copy
+            this.getSVGForExport(exportingOptions, chartOptions);
+            // Get the static array
+            const imagesArray = images ? Array.from(images) : [];
+            // Go through the images we want to embed
+            for (const image of imagesArray) {
+                href = image.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
+                if (href) {
+                    Exporting.objectURLRevoke = false;
+                    const dataURL = await Exporting.imageToDataURL(href, exportingOptions?.scale || 1, exportingOptions?.type || 'image/png');
+                    // Change image href in chart copy
+                    image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', dataURL);
+                    // Hidden, boosted series have blank href (#10243)
+                }
+                else {
+                    image.parentNode.removeChild(image);
+                }
+            }
+            // Sanitize the SVG
+            const sanitizedSVG = sanitize(chartCopyContainer?.innerHTML);
+            // Use SVG of chart copy. If SVG contains foreignObjects PDF fails
+            // in all browsers and all exports except SVG will fail in IE, as
+            // both CanVG and svg2pdf choke on this. Gracefully fall back.
+            if (sanitizedSVG.indexOf('<foreignObject') > -1 &&
+                exportingOptions.type !== 'image/svg+xml' &&
+                (isMS ||
+                    exportingOptions.type === 'application/pdf')) {
+                throw new Error('Image type not supported for charts with embedded HTML');
+            }
+            else {
+                // Trigger SVG download
+                await exporting.downloadSVG(sanitizedSVG, extend({ filename: exporting.getFilename() }, exportingOptions));
+            }
+            // Return the sanitized SVG
+            return sanitizedSVG;
+        }
+        catch (error) {
+            await this.fallbackToServer(exportingOptions, error);
+        }
+        finally {
+            // Clean up
+            unbindGetSVG();
+        }
     }
     /**
      * Move the chart container(s) to another div.
      *
-     * @function Highcharts#moveContainers
-     *
      * @private
+     * @function Highcharts.Exporting#moveContainers
      *
      * @param {Highcharts.HTMLDOMElement} moveTo
-     *        Move target
+     * Move target.
+     *
+     * @requires modules/exporting
      */
-    function moveContainers(moveTo) {
-        const { scrollablePlotArea } = this;
+    moveContainers(moveTo) {
+        const chart = this.chart, { scrollablePlotArea } = chart;
         (
         // When scrollablePlotArea is active (#9533)
         scrollablePlotArea ?
@@ -2737,95 +3308,35 @@ var Exporting;
                 scrollablePlotArea.fixedDiv,
                 scrollablePlotArea.scrollingContainer
             ] :
-            [this.container]).forEach(function (div) {
+            [chart.container]).forEach(function (div) {
             moveTo.appendChild(div);
         });
     }
     /**
-     * Add update methods to handle chart.update and chart.exporting.update and
-     * chart.navigation.update. These must be added to the chart instance rather
-     * than the Chart prototype in order to use the chart instance inside the
-     * update function.
-     * @private
-     */
-    function onChartInit() {
-        const chart = this, 
-        /**
-         * @private
-         * @param {"exporting"|"navigation"} prop
-         *        Property name in option root
-         * @param {Highcharts.ExportingOptions|Highcharts.NavigationOptions} options
-         *        Options to update
-         * @param {boolean} [redraw=true]
-         *        Whether to redraw
-                 */
-        update = (prop, options, redraw) => {
-            chart.isDirtyExporting = true;
-            merge(true, chart.options[prop], options);
-            if (pick(redraw, true)) {
-                chart.redraw();
-            }
-        };
-        chart.exporting = {
-            update: function (options, redraw) {
-                update('exporting', options, redraw);
-            }
-        };
-        // Register update() method for navigation. Cannot be set the same way
-        // as for exporting, because navigation options are shared with bindings
-        // which has separate update() logic.
-        Chart_ChartNavigationComposition
-            .compose(chart).navigation
-            .addUpdate((options, redraw) => {
-            update('navigation', options, redraw);
-        });
-    }
-    /**
-     * On layout of titles (title, subtitle and caption), adjust the `alignTo``
-     * box to avoid the context menu button.
-     * @private
-     */
-    function onChartLayOutTitle({ alignTo, key, textPxLength }) {
-        const exportingOptions = this.options.exporting, { align, buttonSpacing = 0, verticalAlign, width = 0 } = merge(this.options.navigation?.buttonOptions, exportingOptions?.buttons?.contextButton), space = alignTo.width - textPxLength, widthAdjust = width + buttonSpacing;
-        if ((exportingOptions?.enabled ?? true) &&
-            key === 'title' &&
-            align === 'right' &&
-            verticalAlign === 'top') {
-            if (space < 2 * widthAdjust) {
-                if (space < widthAdjust) {
-                    alignTo.width -= widthAdjust;
-                }
-                else if (this.title?.alignValue !== 'left') {
-                    alignTo.x -= widthAdjust - space / 2;
-                }
-            }
-        }
-    }
-    /**
-     * Exporting module required. Clears away other elements in the page and
-     * prints the chart as it is displayed. By default, when the exporting
-     * module is enabled, a context button with a drop down menu in the upper
-     * right corner accesses this function.
+     * Clears away other elements in the page and prints the chart as it is
+     * displayed. By default, when the exporting module is enabled, a context
+     * button with a drop down menu in the upper right corner accesses this
+     * function.
      *
      * @sample highcharts/members/chart-print/
-     *         Print from a HTML button
-     *
-     * @function Highcharts.Chart#print
+     * Print from a HTML button
      *
+     * @function Highcharts.Exporting#print
      *
      * @emits Highcharts.Chart#event:beforePrint
      * @emits Highcharts.Chart#event:afterPrint
      *
      * @requires modules/exporting
      */
-    function print() {
-        const chart = this;
-        if (chart.isPrinting) { // Block the button while in printing mode
+    print() {
+        const chart = this.chart;
+        // Block the button while in printing mode
+        if (this.isPrinting) {
             return;
         }
-        printingChart = chart;
-        if (!(highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default()).isSafari) {
-            chart.beforePrint();
+        Exporting.printingChart = chart;
+        if (!Exporting_isSafari) {
+            this.beforePrint();
         }
         // Give the browser time to draw WebGL content, an issue that randomly
         // appears (at least) in Chrome ~67 on the Mac (#8708).
@@ -2833,86 +3344,310 @@ var Exporting;
             Exporting_win.focus(); // #1510
             Exporting_win.print();
             // Allow the browser to prepare before reverting
-            if (!(highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default()).isSafari) {
+            if (!Exporting_isSafari) {
                 setTimeout(() => {
-                    chart.afterPrint();
+                    chart.exporting?.afterPrint();
                 }, 1000);
             }
         }, 1);
     }
     /**
-     * Add the buttons on chart load
+     * Add the buttons on chart load.
+     *
      * @private
-     * @function Highcharts.Chart#renderExporting
+     * @function Highcharts.Exporting#render
+     *
      * @requires modules/exporting
      */
-    function renderExporting() {
-        const chart = this, exportingOptions = chart.options.exporting, buttons = exportingOptions.buttons, isDirty = chart.isDirtyExporting || !chart.exportSVGElements;
-        chart.buttonOffset = 0;
-        if (chart.isDirtyExporting) {
-            chart.destroyExport();
-        }
-        if (isDirty && exportingOptions.enabled !== false) {
-            chart.exportEvents = [];
-            chart.exportingGroup = chart.exportingGroup ||
-                chart.renderer.g('exporting-group').attr({
-                    zIndex: 3 // #4955, // #8392
-                }).add();
-            Exporting_objectEach(buttons, function (button) {
-                chart.addButton(button);
+    render() {
+        const exporting = this, { chart, options } = exporting, isDirty = exporting?.isDirty || !exporting?.svgElements.length;
+        exporting.buttonOffset = 0;
+        if (exporting.isDirty) {
+            exporting.destroy();
+        }
+        if (isDirty && options.enabled !== false) {
+            exporting.events = [];
+            exporting.group || (exporting.group = chart.renderer.g('exporting-group').attr({
+                zIndex: 3 // #4955, // #8392
+            }).add());
+            Exporting_objectEach(options?.buttons, function (button) {
+                exporting.addButton(button);
             });
-            chart.isDirtyExporting = false;
+            exporting.isDirty = false;
         }
     }
     /**
-     * Exporting module only. A collection of fixes on the produced SVG to
-     * account for expand properties, browser bugs.
-     * Returns a cleaned SVG.
+     * Resolve CSS variables into hex colors.
      *
      * @private
-     * @function Highcharts.Chart#sanitizeSVG
-     * @param {string} svg
-     *        SVG code to sanitize
-     * @param {Highcharts.Options} options
-     *        Chart options to apply
-     * @return {string}
-     *         Sanitized SVG code
+     * @function Highcharts.Exporting#resolveCSSVariables
+     *
      * @requires modules/exporting
      */
-    function sanitizeSVG(svg, options) {
-        const split = svg.indexOf('</svg>') + 6, useForeignObject = svg.indexOf('<foreignObject') > -1;
-        let html = svg.substr(split);
-        // Remove any HTML added to the container after the SVG (#894, #9087)
-        svg = svg.substr(0, split);
-        if (useForeignObject) {
-            // Some tags needs to be closed in xhtml (#13726)
-            svg = svg.replace(/(<(?:img|br).*?(?=\>))>/g, '$1 />');
-            // Move HTML into a foreignObject
+    resolveCSSVariables() {
+        Array.from(this.chart.container.querySelectorAll('*')).forEach((element) => {
+            ['color', 'fill', 'stop-color', 'stroke'].forEach((prop) => {
+                const attrValue = element.getAttribute(prop);
+                if (attrValue?.includes('var(')) {
+                    element.setAttribute(prop, getComputedStyle(element).getPropertyValue(prop));
+                }
+                const styleValue = element.style?.[prop];
+                if (styleValue?.includes('var(')) {
+                    element.style[prop] =
+                        getComputedStyle(element).getPropertyValue(prop);
+                }
+            });
+        });
+    }
+    /**
+     * Updates the exporting object with the provided exporting options.
+     *
+     * @private
+     * @function Highcharts.Exporting#update
+     *
+     * @param {Highcharts.ExportingOptions} exportingOptions
+     * The exporting options to update with.
+     * @param {boolean} [redraw=true]
+     * Whether to redraw or not.
+     *
+     * @requires modules/exporting
+     */
+    update(exportingOptions, redraw) {
+        this.isDirty = true;
+        merge(true, this.options, exportingOptions);
+        if (pick(redraw, true)) {
+            this.chart.redraw();
         }
-        else if (html && options?.exporting?.allowHTML) {
-            html = '<foreignObject x="0" y="0" ' +
-                'width="' + options.chart.width + '" ' +
-                'height="' + options.chart.height + '">' +
-                '<body xmlns="http://www.w3.org/1999/xhtml">' +
-                // Some tags needs to be closed in xhtml (#13726)
-                html.replace(/(<(?:img|br).*?(?=\>))>/g, '$1 />') +
-                '</body>' +
-                '</foreignObject>';
-            svg = svg.replace('</svg>', html + '</svg>');
+    }
+}
+/* *
+ *
+ *  Static Properties
+ *
+ * */
+Exporting.inlineAllowlist = [];
+// These CSS properties are not inlined. Remember camelCase.
+Exporting.inlineDenylist = [
+    /-/, // In Firefox, both hyphened and camelCased names are listed
+    /^(clipPath|cssText|d|height|width)$/, // Full words
+    /^font$/, // More specific props are set
+    /[lL]ogical(Width|Height)$/,
+    /^parentRule$/,
+    /^(cssRules|ownerRules)$/, // #19516 read-only properties
+    /perspective/,
+    /TapHighlightColor/,
+    /^transition/,
+    /^length$/, // #7700
+    /^\d+$/ // #17538
+];
+// These ones are translated to attributes rather than styles
+Exporting.inlineToAttributes = [
+    'fill',
+    'stroke',
+    'strokeLinecap',
+    'strokeLinejoin',
+    'strokeWidth',
+    'textAnchor',
+    'x',
+    'y'
+];
+// Milliseconds to defer image load event handlers to offset IE bug
+Exporting.loadEventDeferDelay = isMS ? 150 : 0;
+Exporting.unstyledElements = [
+    'clipPath',
+    'defs',
+    'desc'
+];
+/* *
+ *
+ *  Class Namespace
+ *
+ * */
+(function (Exporting) {
+    /* *
+     *
+     *  Declarations
+     *
+     * */
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /**
+     * Composition function.
+     *
+     * @private
+     * @function Highcharts.Exporting#compose
+     *
+     * @param {ChartClass} ChartClass
+     * Chart class.
+     * @param {SVGRendererClass} SVGRendererClass
+     * SVGRenderer class.
+     *
+     * @requires modules/exporting
+     */
+    function compose(ChartClass, SVGRendererClass) {
+        Exporting_ExportingSymbols.compose(SVGRendererClass);
+        Exporting_Fullscreen.compose(ChartClass);
+        // Check the composition registry for the Exporting
+        if (!Exporting_pushUnique(Exporting_composed, 'Exporting')) {
+            return;
+        }
+        // Adding wrappers for the deprecated functions
+        extend((highcharts_Chart_commonjs_highcharts_Chart_commonjs2_highcharts_Chart_root_Highcharts_Chart_default()).prototype, {
+            exportChart: async function (exportingOptions, chartOptions) {
+                await this.exporting?.exportChart(exportingOptions, chartOptions);
+                return;
+            },
+            getChartHTML: function (applyStyleSheets) {
+                return this.exporting?.getChartHTML(applyStyleSheets);
+            },
+            getFilename: function () {
+                return this.exporting?.getFilename();
+            },
+            getSVG: function (chartOptions) {
+                return this.exporting?.getSVG(chartOptions);
+            },
+            print: function () {
+                return this.exporting?.print();
+            }
+        });
+        ChartClass.prototype.callbacks.push(chartCallback);
+        Exporting_addEvent(ChartClass, 'afterInit', onChartAfterInit);
+        Exporting_addEvent(ChartClass, 'layOutTitle', onChartLayOutTitle);
+        if (Exporting_isSafari) {
+            Exporting_win.matchMedia('print').addListener(function (mqlEvent) {
+                if (!Exporting.printingChart) {
+                    return void 0;
+                }
+                if (mqlEvent.matches) {
+                    Exporting.printingChart.exporting?.beforePrint();
+                }
+                else {
+                    Exporting.printingChart.exporting?.afterPrint();
+                }
+            });
+        }
+        // Update with defaults of the exporting module
+        setOptions(Exporting_ExportingDefaults);
+    }
+    Exporting.compose = compose;
+    /**
+     * Function that is added to the callbacks array that runs on chart load.
+     *
+     * @private
+     * @function Highcharts#chartCallback
+     *
+     * @param {Highcharts.Chart} chart
+     * The chart instance.
+     *
+     * @requires modules/exporting
+     */
+    function chartCallback(chart) {
+        const exporting = chart.exporting;
+        if (exporting) {
+            exporting.render();
+            // Add the exporting buttons on each chart redraw
+            Exporting_addEvent(chart, 'redraw', function () {
+                this.exporting?.render();
+            });
+            // Destroy the export elements at chart destroy
+            Exporting_addEvent(chart, 'destroy', function () {
+                this.exporting?.destroy();
+            });
+        }
+        // Uncomment this to see a button directly below the chart, for quick
+        // testing of export
+        // let button, viewImage, viewSource;
+        // if (!chart.renderer.forExport) {
+        //     viewImage = function (): void {
+        //         const div = doc.createElement('div');
+        //         div.innerHTML = chart.exporting?.getSVGForExport() || '';
+        //         chart.renderTo.parentNode.appendChild(div);
+        //     };
+        //     viewSource = function (): void {
+        //         const pre = doc.createElement('pre');
+        //         pre.innerHTML = chart.exporting?.getSVGForExport()
+        //             .replace(/</g, '\n&lt;')
+        //             .replace(/>/g, '&gt;') || '';
+        //         chart.renderTo.parentNode.appendChild(pre);
+        //     };
+        //     viewImage();
+        //     // View SVG Image
+        //     button = doc.createElement('button');
+        //     button.innerHTML = 'View SVG Image';
+        //     chart.renderTo.parentNode.appendChild(button);
+        //     button.onclick = viewImage;
+        //     // View SVG Source
+        //     button = doc.createElement('button');
+        //     button.innerHTML = 'View SVG Source';
+        //     chart.renderTo.parentNode.appendChild(button);
+        //     button.onclick = viewSource;
+        // }
+    }
+    /**
+     * Add update methods to handle chart.update and chart.exporting.update and
+     * chart.navigation.update. These must be added to the chart instance rather
+     * than the Chart prototype in order to use the chart instance inside the
+     * update function.
+     *
+     * @private
+     * @function Highcharts#onChartAfterInit
+     *
+     * @requires modules/exporting
+     */
+    function onChartAfterInit() {
+        const chart = this;
+        // Create the exporting instance
+        if (chart.options.exporting) {
+            /**
+             * Exporting object.
+             *
+             * @name Highcharts.Chart#exporting
+             * @type {Highcharts.Exporting}
+             */
+            chart.exporting = new Exporting(chart, chart.options.exporting);
+            // Register update() method for navigation. Cannot be set the same
+            // way as for exporting, because navigation options are shared with
+            // bindings which has separate update() logic.
+            Chart_ChartNavigationComposition
+                .compose(chart).navigation
+                .addUpdate((options, redraw) => {
+                if (chart.exporting) {
+                    chart.exporting.isDirty = true;
+                    merge(true, chart.options.navigation, options);
+                    if (pick(redraw, true)) {
+                        chart.redraw();
+                    }
+                }
+            });
+        }
+    }
+    /**
+     * On layout of titles (title, subtitle and caption), adjust the `alignTo`
+     * box to avoid the context menu button.
+     *
+     * @private
+     * @function Highcharts#onChartLayOutTitle
+     *
+     * @requires modules/exporting
+     */
+    function onChartLayOutTitle({ alignTo, key, textPxLength }) {
+        const exportingOptions = this.options.exporting, { align, buttonSpacing = 0, verticalAlign, width = 0 } = merge(this.options.navigation?.buttonOptions, exportingOptions?.buttons?.contextButton), space = alignTo.width - textPxLength, widthAdjust = width + buttonSpacing;
+        if ((exportingOptions?.enabled ?? true) &&
+            key === 'title' &&
+            align === 'right' &&
+            verticalAlign === 'top') {
+            if (space < 2 * widthAdjust) {
+                if (space < widthAdjust) {
+                    alignTo.width -= widthAdjust;
+                }
+                else if (this.title?.alignValue !== 'left') {
+                    alignTo.x -= widthAdjust - space / 2;
+                }
+            }
         }
-        svg = svg
-            .replace(/zIndex="[^"]+"/g, '')
-            .replace(/symbolName="[^"]+"/g, '')
-            .replace(/jQuery\d+="[^"]+"/g, '')
-            .replace(/url\(("|&quot;)(.*?)("|&quot;)\;?\)/g, 'url($2)')
-            .replace(/url\([^#]+#/g, 'url(#')
-            .replace(/<svg /, '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ')
-            .replace(/ (NS\d+\:)?href=/g, ' xlink:href=') // #3567
-            .replace(/\n+/g, ' ')
-            // Replace HTML entities, issue #347
-            .replace(/&nbsp;/g, '\u00A0') // No-break space
-            .replace(/&shy;/g, '\u00AD'); // Soft hyphen
-        return svg;
     }
 })(Exporting || (Exporting = {}));
 /* *
@@ -2933,10 +3668,9 @@ var Exporting;
  * @callback Highcharts.ExportingAfterPrintCallbackFunction
  *
  * @param {Highcharts.Chart} this
- *        The chart on which the event occurred.
- *
+ * The chart on which the event occurred.
  * @param {global.Event} event
- *        The event that occurred.
+ * The event that occurred.
  */
 /**
  * Gets fired before a chart is printed through the context menu item or the
@@ -2945,10 +3679,9 @@ var Exporting;
  * @callback Highcharts.ExportingBeforePrintCallbackFunction
  *
  * @param {Highcharts.Chart} this
- *        The chart on which the event occurred.
- *
+ * The chart on which the event occurred.
  * @param {global.Event} event
- *        The event that occurred.
+ * The event that occurred.
  */
 /**
  * Function to call if the offline-exporting module fails to export a chart on
@@ -2957,10 +3690,9 @@ var Exporting;
  * @callback Highcharts.ExportingErrorCallbackFunction
  *
  * @param {Highcharts.ExportingOptions} options
- *        The exporting options.
- *
+ * The exporting options.
  * @param {global.Error} err
- *        The error from the module.
+ * The error from the module.
  */
 /**
  * Definition for a menu item in the context menu.
@@ -2970,27 +3702,27 @@ var Exporting;
 * The text for the menu item.
 *
 * @name Highcharts.ExportingMenuObject#text
-* @type {string|undefined}
+* @type {string | undefined}
 */ /**
 * If internationalization is required, the key to a language string.
 *
 * @name Highcharts.ExportingMenuObject#textKey
-* @type {string|undefined}
+* @type {string | undefined}
 */ /**
 * The click handler for the menu item.
 *
 * @name Highcharts.ExportingMenuObject#onclick
-* @type {Highcharts.EventCallbackFunction<Highcharts.Chart>|undefined}
+* @type {Highcharts.EventCallbackFunction<Highcharts.Chart> | undefined}
 */ /**
 * Indicates a separator line instead of an item.
 *
 * @name Highcharts.ExportingMenuObject#separator
-* @type {boolean|undefined}
+* @type {boolean | undefined}
 */
 /**
  * Possible MIME types for exporting.
  *
- * @typedef {"image/png"|"image/jpeg"|"application/pdf"|"image/svg+xml"} Highcharts.ExportingMimeTypeValue
+ * @typedef {"image/png" | "image/jpeg" | "application/pdf" | "image/svg+xml"} Highcharts.ExportingMimeTypeValue
  */
 (''); // Keeps doclets above in transpiled file
 /* *
@@ -3003,12 +3735,12 @@ var Exporting;
  * `Chart.print` method.
  *
  * @sample highcharts/chart/events-beforeprint-afterprint/
- *         Rescale the chart to print
+ * Rescale the chart to print
  *
- * @type      {Highcharts.ExportingAfterPrintCallbackFunction}
- * @since     4.1.0
- * @context   Highcharts.Chart
- * @requires  modules/exporting
+ * @type {Highcharts.ExportingAfterPrintCallbackFunction}
+ * @since 4.1.0
+ * @context Highcharts.Chart
+ * @requires modules/exporting
  * @apioption chart.events.afterPrint
  */
 /**
@@ -3016,12 +3748,12 @@ var Exporting;
  * the `Chart.print` method.
  *
  * @sample highcharts/chart/events-beforeprint-afterprint/
- *         Rescale the chart to print
+ * Rescale the chart to print
  *
- * @type      {Highcharts.ExportingBeforePrintCallbackFunction}
- * @since     4.1.0
- * @context   Highcharts.Chart
- * @requires  modules/exporting
+ * @type {Highcharts.ExportingBeforePrintCallbackFunction}
+ * @since 4.1.0
+ * @context Highcharts.Chart
+ * @requires modules/exporting
  * @apioption chart.events.beforePrint
  */
 (''); // Keeps doclets above in transpiled file
@@ -3033,10 +3765,14 @@ var Exporting;
 
 
 const G = (highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default());
+// Class
+G.Exporting = Exporting_Exporting;
+// Compatibility
 G.HttpUtilities = G.HttpUtilities || Core_HttpUtilities;
 G.ajax = G.HttpUtilities.ajax;
 G.getJSON = G.HttpUtilities.getJSON;
 G.post = G.HttpUtilities.post;
+// Compose
 Exporting_Exporting.compose(G.Chart, G.Renderer);
 /* harmony default export */ const exporting_src = ((highcharts_commonjs_highcharts_commonjs2_highcharts_root_Highcharts_default()));