smush

+import '../scss/app.scss';
+
+/**
+ * Admin modules
+ */
+
+const WP_Smush = WP_Smush || {};
+window.WP_Smush = WP_Smush;
+
+/**
+ * IE polyfill for includes.
+ *
+ * @since 3.1.0
+ * @param {string} search
+ * @param {number} start
+ * @return {boolean}  Returns true if searchString appears as a substring of the result of converting this
+ * object to a String, at one or more positions that are
+ * greater than or equal to position; otherwise, returns false.
+ */
+if ( ! String.prototype.includes ) {
+	String.prototype.includes = function( search, start ) {
+		if ( typeof start !== 'number' ) {
+			start = 0;
+		}
+
+		if ( start + search.length > this.length ) {
+			return false;
+		}
+		return this.indexOf( search, start ) !== -1;
+	};
+}
+
+require( './modules/helpers' );
+require( './modules/admin' );
+require( './modules/admin-common' );
+require( './modules/bulk-smush' );
+require( './modules/onboarding' );
+require( './modules/directory-smush' );
+require( './smush/cdn' );
+require( './smush/webp' );
+require( './smush/lazy-load' );
+require( './modules/bulk-restore' );
+require( './smush/settings' );
+
+/**
+ * Notice scripts.
+ *
+ * Notices are used in the following functions:
+ *
+ * @used-by \Smush\Core\Modules\Smush::smush_updated()
+ * @used-by \Smush\Core\Integrations\S3::3_support_required_notice()
+ * @used-by \Smush\App\Abstract_Page::installation_notice()
+ *
+ * TODO: should this be moved out in a separate file like common.scss?
+ */
+require( './modules/notice' );

+import lazySizes from 'lazysizes';
+import 'lazysizes/plugins/native-loading/ls.native-loading';
+
+lazySizes.cfg.nativeLoading = {
+	setLoadingAttribute: true,
+	disableListeners: {
+		scroll: true,
+	},
+};
+
+lazySizes.init();
\ No newline at end of file

+import lazySizes from 'lazysizes';
+
+lazySizes.init();
\ No newline at end of file

+import '../../scss/resize-detection.scss';
+
+/**
+ * Image resize detection (IRD).
+ *
+ * Show all wrongly scaled images with a highlighted border and resize box.
+ *
+ * Made in pure JS.
+ * DO NOT ADD JQUERY SUPPORT!!!
+ *
+ * @since 2.9
+ */
+( function() {
+	'use strict';
+
+	const SmushIRS = {
+		bar: document.getElementById( 'smush-image-bar' ),
+		toggle: document.getElementById( 'smush-image-bar-toggle' ),
+		images: {
+			bigger: [],
+			smaller: [],
+		},
+		strings: window.wp_smush_resize_vars,
+
+		/**
+		 * Init scripts.
+		 */
+		init() {
+			/**
+			 * Make sure these are set, before we proceed.
+			 */
+			if ( ! this.bar ) {
+				this.bar = document.getElementById( 'smush-image-bar' );
+			}
+			if ( ! this.toggle ) {
+				this.toggle = document.getElementById(
+					'smush-image-bar-toggle'
+				);
+			}
+
+			this.process();
+
+			// Register the event handler after everything is done.
+			this.toggle.addEventListener(
+				'click',
+				this.handleToggleClick.bind( this )
+			);
+		},
+
+		/**
+		 * Do image processing.
+		 */
+		process() {
+			const icon = this.toggle.querySelector( 'i' );
+
+			icon.classList.add( 'sui-icon-loader' );
+			icon.classList.remove( 'sui-icon-info' );
+
+			this.detectImages();
+
+			if ( ! this.images.bigger.length && ! this.images.smaller.length ) {
+				this.toggle.classList.add( 'smush-toggle-success' );
+				document.getElementById(
+					'smush-image-bar-notice'
+				).style.display = 'block';
+				document.getElementById(
+					'smush-image-bar-notice-desc'
+				).style.display = 'none';
+			} else {
+				this.toggle.classList.remove( 'smush-toggle-success' );
+				document.getElementById(
+					'smush-image-bar-notice'
+				).style.display = 'none';
+				document.getElementById(
+					'smush-image-bar-notice-desc'
+				).style.display = 'block';
+				this.generateMarkup( 'bigger' );
+				this.generateMarkup( 'smaller' );
+			}
+
+			this.toggleDivs();
+
+			icon.classList.remove( 'sui-icon-loader' );
+			icon.classList.add( 'sui-icon-info' );
+		},
+
+		/**
+		 * Various checks to see if the image should be processed.
+		 *
+		 * @param {Object} image
+		 * @return {boolean}  Should skip image or not.
+		 */
+		shouldSkipImage( image ) {
+			// Skip avatars.
+			if ( image.classList.contains( 'avatar' ) ) {
+				return true;
+			}
+
+			// Skip images from Smush CDN with auto-resize feature.
+			if (
+				'string' === typeof image.getAttribute( 'no-resize-detection' )
+			) {
+				return true;
+			}
+
+			// Skip 1x1px images.
+			if (
+				image.clientWidth === image.clientHeight &&
+				1 === image.clientWidth
+			) {
+				return true;
+			}
+
+			// Skip 1x1px placeholders.
+			if (
+				image.naturalWidth === image.naturalHeight &&
+				1 === image.naturalWidth
+			) {
+				return true;
+			}
+
+			// If width attribute is not set, do not continue.
+			return null === image.clientWidth || null === image.clientHeight;
+		},
+
+		/**
+		 * Get tooltip text.
+		 *
+		 * @param {Object} props
+		 * @return {string}  Tooltip.
+		 */
+		getTooltipText( props ) {
+			let tooltipText = '';
+
+			if ( props.bigger_width || props.bigger_height ) {
+				/** @param {string} strings.large_image */
+				tooltipText = this.strings.large_image;
+			} else if ( props.smaller_width || props.smaller_height ) {
+				/** @param {string} strings.small_image */
+				tooltipText = this.strings.small_image;
+			}
+
+			return tooltipText
+				.replace( 'width', props.real_width )
+				.replace( 'height', props.real_height );
+		},
+
+		/**
+		 * Generate markup.
+		 *
+		 * @param {string} type  Accepts: 'bigger' or 'smaller'.
+		 */
+		generateMarkup( type ) {
+			this.images[ type ].forEach( ( image, index ) => {
+				const item = document.createElement( 'div' ),
+					tooltip = this.getTooltipText( image.props );
+
+				item.setAttribute(
+					'class',
+					'smush-resize-box smush-tooltip smush-tooltip-constrained'
+				);
+				item.setAttribute( 'data-tooltip', tooltip );
+				item.setAttribute( 'data-image', image.class );
+				item.addEventListener( 'click', ( e ) =>
+					this.highlightImage( e )
+				);
+
+				item.innerHTML = `
+					<div class="smush-image-info">
+						<span>${ index + 1 }</span>
+						<span class="smush-tag">${ image.props.computed_width } x ${
+					image.props.computed_height
+				}px</span>
+						<i class="smush-front-icons smush-front-icon-arrows-in" aria-hidden="true">&nbsp;</i>
+						<span class="smush-tag smush-tag-success">${ image.props.real_width } × ${
+					image.props.real_height
+				}px</span>					
+					</div>
+					<div class="smush-image-description">${ tooltip }</div>
+				`;
+
+				document
+					.getElementById( 'smush-image-bar-items-' + type )
+					.appendChild( item );
+			} );
+		},
+
+		/**
+		 * Show/hide sections based on images.
+		 */
+		toggleDivs() {
+			const types = [ 'bigger', 'smaller' ];
+			types.forEach( ( type ) => {
+				const div = document.getElementById(
+					'smush-image-bar-items-' + type
+				);
+				if ( 0 === this.images[ type ].length ) {
+					div.style.display = 'none';
+				} else {
+					div.style.display = 'block';
+				}
+			} );
+		},
+
+		/**
+		 * Scroll the selected image into view and highlight it.
+		 *
+		 * @param {Object} e
+		 */
+		highlightImage( e ) {
+			this.removeSelection();
+
+			const el = document.getElementsByClassName(
+				e.currentTarget.dataset.image
+			);
+			if ( 'undefined' !== typeof el[ 0 ] ) {
+				// Display description box.
+				e.currentTarget.classList.toggle( 'show-description' );
+
+				// Scroll and flash image.
+				el[ 0 ].scrollIntoView( {
+					behavior: 'smooth',
+					block: 'center',
+					inline: 'nearest',
+				} );
+				el[ 0 ].style.opacity = '0.5';
+				setTimeout( () => {
+					el[ 0 ].style.opacity = '1';
+				}, 1000 );
+			}
+		},
+
+		/**
+		 * Handle click on the toggle item.
+		 */
+		handleToggleClick() {
+			this.bar.classList.toggle( 'closed' );
+			this.toggle.classList.toggle( 'closed' );
+			this.removeSelection();
+		},
+
+		/**
+		 * Remove selected items.
+		 */
+		removeSelection() {
+			const items = document.getElementsByClassName( 'show-description' );
+			if ( items.length > 0 ) {
+				Array.from( items ).forEach( ( div ) =>
+					div.classList.remove( 'show-description' )
+				);
+			}
+		},
+
+		/**
+		 * Function to highlight all scaled images.
+		 *
+		 * Add yellow border and then show one small box to
+		 * resize the images as per the required size, on fly.
+		 */
+		detectImages() {
+			const images = document.getElementsByTagName( 'img' );
+			for ( const image of images ) {
+				if ( this.shouldSkipImage( image ) ) {
+					continue;
+				}
+
+				// Get defined width and height.
+				const props = {
+					real_width: image.clientWidth,
+					real_height: image.clientHeight,
+					computed_width: image.naturalWidth,
+					computed_height: image.naturalHeight,
+					bigger_width: image.clientWidth * 1.5 < image.naturalWidth,
+					bigger_height:
+						image.clientHeight * 1.5 < image.naturalHeight,
+					smaller_width: image.clientWidth > image.naturalWidth,
+					smaller_height: image.clientHeight > image.naturalHeight,
+				};
+
+				// In case image is in correct size, do not continue.
+				if (
+					! props.bigger_width &&
+					! props.bigger_height &&
+					! props.smaller_width &&
+					! props.smaller_height
+				) {
+					continue;
+				}
+
+				const imgType =
+						props.bigger_width || props.bigger_height
+							? 'bigger'
+							: 'smaller',
+					imageClass =
+						'smush-image-' + ( this.images[ imgType ].length + 1 );
+
+				// Fill the images arrays.
+				this.images[ imgType ].push( {
+					src: image,
+					props,
+					class: imageClass,
+				} );
+
+				/**
+				 * Add class to original image.
+				 * Can't add two classes in single add(), because no support in IE11.
+				 * image.classList.add('smush-detected-img', imageClass);
+				 */
+				image.classList.add( 'smush-detected-img' );
+				image.classList.add( imageClass );
+			}
+		}, // End detectImages()
+
+		/**
+		 * Allows refreshing the list. A good way is to refresh on lazyload actions.
+		 *
+		 * @since 3.6.0
+		 */
+		refresh() {
+			// Clear out classes on DOM.
+			for ( let id in this.images.bigger ) {
+				if ( this.images.bigger.hasOwnProperty( id ) ) {
+					this.images.bigger[ id ].src.classList.remove(
+						'smush-detected-img'
+					);
+					this.images.bigger[ id ].src.classList.remove(
+						'smush-image-' + ++id
+					);
+				}
+			}
+
+			for ( let id in this.images.smaller ) {
+				if ( this.images.smaller.hasOwnProperty( id ) ) {
+					this.images.smaller[ id ].src.classList.remove(
+						'smush-detected-img'
+					);
+					this.images.smaller[ id ].src.classList.remove(
+						'smush-image-' + ++id
+					);
+				}
+			}
+
+			this.images = {
+				bigger: [],
+				smaller: [],
+			};
+
+			// This might be overkill - there will probably never be a situation when there are less images than on
+			// initial page load.
+			const elements = document.getElementsByClassName(
+				'smush-resize-box'
+			);
+			while ( elements.length > 0 ) {
+				elements[ 0 ].remove();
+			}
+
+			this.process();
+		},
+	}; // End WP_Smush_IRS
+
+	/**
+	 * After page load, initialize toggle event.
+	 */
+	window.addEventListener( 'DOMContentLoaded', () => SmushIRS.init() );
+	window.addEventListener( 'lazyloaded', () => SmushIRS.refresh() );
+} )();

+import '../scss/common.scss';
+
+/* global ajaxurl */
+
+document.addEventListener( 'DOMContentLoaded', function() {
+	const dismissNoticeBtn = document.getElementById(
+		'smush-dismiss-conflict-notice'
+	);
+	if ( dismissNoticeBtn ) {
+		dismissNoticeBtn.addEventListener( 'click', dismissNotice );
+	}
+
+	const dismissNoticeTop = document.querySelector(
+		'#smush-conflict-notice > .notice-dismiss'
+	);
+	if ( dismissNoticeTop ) {
+		dismissNoticeTop.addEventListener( 'click', dismissNotice );
+	}
+
+	function dismissNotice() {
+		const xhr = new XMLHttpRequest();
+		xhr.open(
+			'POST',
+			ajaxurl + '?action=dismiss_check_for_conflicts',
+			true
+		);
+		xhr.onload = () => {
+			const btn = document.querySelector(
+				'#smush-conflict-notice > button.notice-dismiss'
+			);
+			if ( btn ) {
+				btn.trigger('click');
+			}
+		};
+		xhr.send();
+	}
+} );

+jQuery(function ($) {
+	'use strict';
+
+    /**
+	 * Handle the Smush Stats link click
+	 */
+    $('body').on('click', 'a.smush-stats-details', function (e) {
+        //If disabled
+        if ($(this).prop('disabled')) {
+            return false;
+        }
+
+        // prevent the default action
+        e.preventDefault();
+        //Replace the `+` with a `-`
+        const slide_symbol = $(this).find('.stats-toggle');
+        $(this).parents().eq(1).find('.smush-stats-wrapper').slideToggle();
+        slide_symbol.text(slide_symbol.text() == '+' ? '-' : '+');
+    });
+});
\ No newline at end of file

+/* global WP_Smush */
+/* global ajaxurl */
+/* global _ */
+
+/**
+ * Bulk restore JavaScript code.
+ *
+ * @since 3.2.2
+ */
+(function () {
+	'use strict';
+
+	/**
+	 * Bulk restore modal.
+	 *
+	 * @since 3.2.2
+	 */
+	WP_Smush.restore = {
+		modal: document.getElementById('smush-restore-images-dialog'),
+		contentContainer: document.getElementById('smush-bulk-restore-content'),
+		settings: {
+			slide: 'start', // start, progress or finish.
+			success: 0,
+			errors: [],
+		},
+		items: [], // total items, 1 item = 1 step.
+		success: [], // successful items restored.
+		errors: [], // failed items.
+		currentStep: 0,
+		totalSteps: 0,
+
+		/**
+		 * Init module.
+		 */
+		init() {
+			if (!this.modal) {
+				return;
+			}
+
+			this.settings = {
+				slide: 'start',
+				success: 0,
+				errors: [],
+			};
+
+			this.resetModalWidth();
+			this.renderTemplate();
+
+			// Show the modal.
+
+			window.SUI.openModal(
+				'smush-restore-images-dialog',
+				'wpbody-content',
+				undefined,
+				false
+			);
+		},
+
+		/**
+		 * Update the template, register new listeners.
+		 */
+		renderTemplate() {
+			const template = WP_Smush.onboarding.template('smush-bulk-restore');
+			const content = template(this.settings);
+
+			if (content) {
+				this.contentContainer.innerHTML = content;
+			}
+
+			this.bindSubmit();
+		},
+
+		/**
+		 * Reset modal width.
+		 *
+		 * @since 3.6.0
+		 */
+		resetModalWidth() {
+			this.modal.style.maxWidth = '460px';
+			this.modal.querySelector('.sui-box').style.maxWidth = '460px';
+		},
+
+		/**
+		 * Catch "Finish setup wizard" button click.
+		 */
+		bindSubmit() {
+			const confirmButton = this.modal.querySelector(
+				'button[id="smush-bulk-restore-button"]'
+			);
+			const self = this;
+
+			if (confirmButton) {
+				confirmButton.addEventListener('click', function (e) {
+					e.preventDefault();
+					self.resetModalWidth();
+
+					self.settings = { slide: 'progress' };
+					self.errors = [];
+
+					self.renderTemplate();
+					self.initScan();
+				});
+			}
+		},
+
+		/**
+		 * Cancel the bulk restore.
+		 */
+		cancel() {
+			if (
+				'start' === this.settings.slide ||
+				'finish' === this.settings.slide
+			) {
+				// Hide the modal.
+				window.SUI.closeModal();
+			} else {
+				this.updateProgressBar(true);
+				window.location.reload();
+			}
+		},
+
+		/**
+		 * Update progress bar during directory smush.
+		 *
+		 * @param {boolean} cancel Cancel status.
+		 */
+		updateProgressBar(cancel = false) {
+			let progress = 0;
+			if (0 < this.currentStep) {
+				progress = Math.min(
+					Math.round((this.currentStep * 100) / this.totalSteps),
+					99
+				);
+			}
+
+			if (progress > 100) {
+				progress = 100;
+			}
+
+			// Update progress bar
+			this.modal.querySelector('.sui-progress-text span').innerHTML =
+				progress + '%';
+			this.modal.querySelector('.sui-progress-bar span').style.width =
+				progress + '%';
+
+			const statusDiv = this.modal.querySelector(
+				'.sui-progress-state-text'
+			);
+			if (progress >= 90) {
+				statusDiv.innerHTML = 'Finalizing...';
+			} else if (cancel) {
+				statusDiv.innerHTML = 'Cancelling...';
+			} else {
+				statusDiv.innerHTML =
+					this.currentStep +
+					'/' +
+					this.totalSteps +
+					' ' +
+					'images restored';
+			}
+		},
+
+		/**
+		 * First step in bulk restore - get the bulk attachment count.
+		 */
+		initScan() {
+			const self = this;
+			const _nonce = document.getElementById('_wpnonce');
+
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', ajaxurl + '?action=get_image_count', true);
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+			xhr.onload = () => {
+				if (200 === xhr.status) {
+					const res = JSON.parse(xhr.response);
+					if ('undefined' !== typeof res.data.items) {
+						self.items = res.data.items;
+						self.totalSteps = res.data.items.length;
+						self.step();
+					}
+				} else {
+					window.console.log(
+						'Request failed.  Returned status of ' + xhr.status
+					);
+				}
+			};
+			xhr.send('_ajax_nonce=' + _nonce.value);
+		},
+
+		/**
+		 * Execute a scan step recursively
+		 */
+		step() {
+			const self = this;
+			const _nonce = document.getElementById('_wpnonce');
+
+			if (0 < this.items.length) {
+				const item = this.items.pop();
+				const xhr = new XMLHttpRequest();
+				xhr.open('POST', ajaxurl + '?action=restore_step', true);
+				xhr.setRequestHeader(
+					'Content-type',
+					'application/x-www-form-urlencoded'
+				);
+				xhr.onload = () => {
+					this.currentStep++;
+
+					if (200 === xhr.status) {
+						const res = JSON.parse(xhr.response);
+						if (
+							'undefined' !== typeof res.data.success &&
+							res.data.success
+						) {
+							self.success.push(item);
+						} else {
+							self.errors.push({
+								id: item,
+								src: res.data.src,
+								thumb: res.data.thumb,
+								link: res.data.link,
+							});
+						}
+					}
+
+					self.updateProgressBar();
+					self.step();
+				};
+				xhr.send('item=' + item + '&_ajax_nonce=' + _nonce.value);
+			} else {
+				// Finish.
+				this.settings = {
+					slide: 'finish',
+					success: this.success.length,
+					errors: this.errors,
+					total: this.totalSteps,
+				};
+
+				self.renderTemplate();
+				if (0 < this.errors.length) {
+					this.modal.style.maxWidth = '660px';
+					this.modal.querySelector('.sui-box').style.maxWidth =
+						'660px';
+				}
+			}
+		},
+	};
+
+	/**
+	 * Template function (underscores based).
+	 *
+	 * @type {Function}
+	 */
+	WP_Smush.restore.template = _.memoize((id) => {
+		let compiled;
+		const options = {
+			evaluate: /<#([\s\S]+?)#>/g,
+			interpolate: /{{{([\s\S]+?)}}}/g,
+			escape: /{{([^}]+?)}}(?!})/g,
+			variable: 'data',
+		};
+
+		return (data) => {
+			_.templateSettings = options;
+			compiled =
+				compiled || _.template(document.getElementById(id).innerHTML);
+			return compiled(data);
+		};
+	});
+})();

+/* global WP_Smush */
+/* global ajaxurl */
+
+/**
+ * Bulk Smush functionality.
+ *
+ * @since 2.9.0  Moved from admin.js
+ */
+
+import Smush from '../smush/smush';
+
+( function( $ ) {
+	'use strict';
+
+	WP_Smush.bulk = {
+		init: () => {
+			/**
+			 * Handle the Bulk Smush/Bulk re-Smush button click.
+			 */
+			$( '.wp-smush-all' ).on( 'click', function( e ) {
+				e.preventDefault();
+
+				$( '.sui-notice-top.sui-notice-success' ).remove();
+
+				const bulkWarning = document.getElementById(
+					'bulk_smush_warning'
+				);
+				bulkWarning.classList.add( 'sui-hidden' );
+
+				// Remove limit exceeded styles.
+				const progress = $( '.wp-smush-bulk-progress-bar-wrapper' );
+				progress.removeClass( 'wp-smush-exceed-limit' );
+				progress
+					.find( '.sui-progress-block .wp-smush-all' )
+					.addClass( 'sui-hidden' );
+				progress
+					.find( '.sui-progress-block .wp-smush-cancel-bulk' )
+					.removeClass( 'sui-hidden' );
+				if ( bulkWarning ) {
+					document
+						.getElementById( 'bulk-smush-resume-button' )
+						.classList.add( 'sui-hidden' );
+				}
+
+				// Disable re-Smush and scan button.
+				// TODO: refine what is disabled.
+				$(
+					'.wp-resmush.wp-smush-action, .wp-smush-scan, .wp-smush-all:not(.sui-progress-close), a.wp-smush-lossy-enable, button.wp-smush-resize-enable, button#save-settings-button'
+				).prop( 'disabled', true );
+
+				// Check for IDs, if there is none (unsmushed or lossless), don't call Smush function.
+				/** @param {Array} wp_smushit_data.unsmushed */
+				if (
+					'undefined' === typeof window.wp_smushit_data ||
+					( 0 === window.wp_smushit_data.unsmushed.length &&
+						0 === window.wp_smushit_data.resmush.length )
+				) {
+					return false;
+				}
+
+				$( '.wp-smush-remaining' ).addClass( 'sui-hidden' );
+
+				// Show loader.
+				progress
+					.find( '.sui-progress-block i.sui-icon-info' )
+					.removeClass( 'sui-icon-info' )
+					.addClass( 'sui-loading' )
+					.addClass( 'sui-icon-loader' );
+
+				new Smush( $( this ), true );
+			} );
+
+			/**
+			 * Ignore file from bulk Smush.
+			 *
+			 * @since 2.9.0
+			 */
+			$( 'body' ).on( 'click', '.smush-ignore-image', function( e ) {
+				e.preventDefault();
+
+				const self = $( this );
+
+				self.prop( 'disabled', true );
+				self.attr( 'data-tooltip' );
+				self.removeClass( 'sui-tooltip' );
+				$.post( ajaxurl, {
+					action: 'ignore_bulk_image',
+					id: self.attr( 'data-id' ),
+				} ).done( ( response ) => {
+					if (
+						self.is( 'a' ) &&
+						response.success &&
+						'undefined' !== typeof response.data.links
+					) {
+						self.parent()
+							.parent()
+							.find( '.smush-status' )
+							.text( wp_smush_msgs.ignored );
+						e.target.closest( '.smush-status-links' ).innerHTML =
+							response.data.links;
+					}
+				} );
+			} );
+
+			/**
+			 * Show upsell on free version and when there are no images to compress.
+			 *
+			 * @since 3.7.2
+			 */
+			const upsellBox = document.getElementById( 'smush-box-bulk-upgrade' );
+			if (
+				upsellBox &&
+				!window.wp_smushit_data.unsmushed.length &&
+				!window.wp_smushit_data.resmush.length
+			) {
+				upsellBox.classList.remove( 'sui-hidden' );
+			}
+		},
+	};
+
+	WP_Smush.bulk.init();
+} )( jQuery );

+/* global WP_Smush */
+/* global ajaxurl */
+
+/**
+ * Directory Smush module JavaScript code.
+ *
+ * @since 2.8.1  Separated from admin.js into dedicated file.
+ */
+
+import { createTree } from 'jquery.fancytree';
+import Scanner from '../smush/directory-scanner';
+
+( function( $ ) {
+	'use strict';
+
+	WP_Smush.directory = {
+		selected: [],
+		tree: [],
+		wp_smush_msgs: [],
+		triggered: false,
+
+		init() {
+			const self = this,
+				progressDialog = $( '#wp-smush-progress-dialog' );
+
+			let totalSteps = 0,
+				currentScanStep = 0;
+
+			// Make sure directory smush vars are set.
+			if ( typeof window.wp_smushit_data.dir_smush !== 'undefined' ) {
+				totalSteps = window.wp_smushit_data.dir_smush.totalSteps;
+				currentScanStep =
+					window.wp_smushit_data.dir_smush.currentScanStep;
+			}
+
+			// Init image scanner.
+			this.scanner = new Scanner( totalSteps, currentScanStep );
+
+			/**
+			 * Smush translation strings.
+			 *
+			 * @param {Array} wp_smush_msgs
+			 */
+			this.wp_smush_msgs = window.wp_smush_msgs || {};
+
+			/**
+			 * Open the "Select Smush directory" modal.
+			 */
+			$('button.wp-smush-browse, a#smush-directory-open-modal').on(
+				'click',
+				function (e) {
+					e.preventDefault();
+
+					if ( $( e.currentTarget ).hasClass( 'wp-smush-browse' ) ) {
+						// Hide all the notices.
+						$( 'div.wp-smush-scan-result div.wp-smush-notice' ).hide();
+
+						// Remove notice.
+						$( 'div.wp-smush-info' ).remove();
+					}
+
+					window.SUI.openModal(
+						'wp-smush-list-dialog',
+						e.currentTarget,
+						$(
+							'#wp-smush-list-dialog .sui-box-header [data-modal-close]'
+						)[0],
+						true
+					);
+					//Display File tree for Directory Smush
+					self.initFileTree();
+				}
+			);
+
+			/**
+			 * Smush images: Smush in Choose Directory modal clicked
+			 */
+			$( '#wp-smush-select-dir' ).on( 'click', function( e ) {
+				e.preventDefault();
+
+				// If disabled, do not process
+				if ( $( this ).prop( 'disabled' ) ) {
+					return;
+				}
+
+				const button = $( this );
+
+				$( 'div.wp-smush-list-dialog div.sui-box-body' ).css( {
+					opacity: '0.8',
+				} );
+				$( 'div.wp-smush-list-dialog div.sui-box-body a' ).off(
+					'click'
+				);
+
+				// Disable button
+				button.prop( 'disabled', true );
+
+				// Display the spinner.
+				button.addClass('sui-button-onload');
+
+				const selectedFolders = self.tree.getSelectedNodes();
+
+				const paths = [];
+				selectedFolders.forEach( function( folder ) {
+					paths.push( folder.key );
+				} );
+
+				// Send a ajax request to get a list of all the image files
+				const param = {
+					action: 'image_list',
+					smush_path: paths,
+					image_list_nonce: $(
+						'input[name="image_list_nonce"]'
+					).val(),
+				};
+
+				$.post( ajaxurl, param, function( response ) {
+					window.SUI.closeModal();
+
+					if ( response.success ) {
+						self.scanner = new Scanner( response.data, 0 );
+						self.showProgressDialog( response.data );
+						self.scanner.scan();
+					} else {
+						window.SUI.openNotice(
+							'wp-smush-ajax-notice',
+							response.data.message,
+							{ type: 'warning' }
+						);
+					}
+				} );
+			} );
+
+			/**
+			 * Cancel scan.
+			 */
+			progressDialog.on(
+				'click',
+				'#cancel-directory-smush, #dialog-close-div, .wp-smush-cancel-dir',
+				function (e) {
+					e.preventDefault();
+					// Display the spinner
+					$('.wp-smush-cancel-dir').addClass('sui-button-onload');
+					self.scanner
+						.cancel()
+						.done(
+							() =>
+								( window.location.href =
+									self.wp_smush_msgs.directory_url )
+						);
+				}
+			);
+
+			/**
+			 * Continue scan.
+			 */
+			progressDialog.on(
+				'click',
+				'.sui-icon-play, .wp-smush-resume-scan',
+				function( e ) {
+					e.preventDefault();
+					self.scanner.resume();
+				}
+			);
+
+			/**
+			 * Check to see if we should open the directory module.
+			 * Used to redirect from dashboard page.
+			 *
+			 * @since 3.8.6
+			 */
+			const queryString = window.location.search;
+			const urlParams = new URLSearchParams(queryString);
+			if (urlParams.has('start') && !this.triggered) {
+				this.triggered = true;
+				$('button.wp-smush-browse').trigger('click');
+			}
+		},
+
+		/**
+		 * Init fileTree.
+		 */
+		initFileTree() {
+			const self = this,
+				smushButton = $( 'button#wp-smush-select-dir' ),
+				ajaxSettings = {
+					type: 'GET',
+					url: ajaxurl,
+					data: {
+						action: 'smush_get_directory_list',
+						list_nonce: $( 'input[name="list_nonce"]' ).val(),
+					},
+					cache: false,
+				};
+
+			// Object already defined.
+			if ( Object.entries( self.tree ).length > 0 ) {
+				return;
+			}
+
+			self.tree = createTree( '.wp-smush-list-dialog .content', {
+				autoCollapse: true, // Automatically collapse all siblings, when a node is expanded
+				clickFolderMode: 3, // 1:activate, 2:expand, 3:activate and expand, 4:activate (dblclick expands)
+				checkbox: true, // Show checkboxes
+				debugLevel: 0, // 0:quiet, 1:errors, 2:warnings, 3:infos, 4:debug
+				selectMode: 3, // 1:single, 2:multi, 3:multi-hier
+				tabindex: '0', // Whole tree behaves as one single control
+				keyboard: true, // Support keyboard navigation
+				quicksearch: true, // Navigate to next node by typing the first letters
+				source: ajaxSettings,
+				lazyLoad: ( event, data ) => {
+					data.result = new Promise( function( resolve, reject ) {
+						ajaxSettings.data.dir = data.node.key;
+						$.ajax( ajaxSettings )
+							.done( ( response ) => resolve( response ) )
+							.fail( reject );
+					} );
+				},
+				loadChildren: ( event, data ) =>
+					data.node.fixSelection3AfterClick(), // Apply parent's state to new child nodes:
+				select: () =>
+					smushButton.prop(
+						'disabled',
+						! +self.tree.getSelectedNodes().length
+					),
+				init: () => smushButton.prop( 'disabled', true ),
+			} );
+		},
+
+		/**
+		 * Show progress dialog.
+		 *
+		 * @param {number} items  Number of items in the scan.
+		 */
+		showProgressDialog( items ) {
+			// Update items status and show the progress dialog..
+			$( '.wp-smush-progress-dialog .sui-progress-state-text' ).html(
+				'0/' + items + ' ' + self.wp_smush_msgs.progress_smushed
+			);
+
+			window.SUI.openModal(
+				'wp-smush-progress-dialog',
+				'dialog-close-div',
+				undefined,
+				false
+			);
+		},
+
+		/**
+		 * Update progress bar during directory smush.
+		 *
+		 * @param {number}  progress  Current progress in percent.
+		 * @param {boolean} cancel    Cancel status.
+		 */
+		updateProgressBar( progress, cancel = false ) {
+			if ( progress > 100 ) {
+				progress = 100;
+			}
+
+			// Update progress bar
+			$( '.sui-progress-block .sui-progress-text span' ).text(
+				progress + '%'
+			);
+			$( '.sui-progress-block .sui-progress-bar span' ).width(
+				progress + '%'
+			);
+
+			if ( progress >= 90 ) {
+				$( '.sui-progress-state .sui-progress-state-text' ).text(
+					'Finalizing...'
+				);
+			}
+
+			if ( cancel ) {
+				$( '.sui-progress-state .sui-progress-state-text' ).text(
+					'Cancelling...'
+				);
+			}
+		},
+	};
+
+	WP_Smush.directory.init();
+} )( jQuery );

+/* global WP_Smush */
+/* global ajaxurl */
+/* global wp_smush_msgs */
+
+/**
+ * Helpers functions.
+ *
+ * @since 2.9.0  Moved from admin.js
+ */
+( function() {
+	'use strict';
+
+	WP_Smush.helpers = {
+		init: () => {},
+
+		/**
+		 * Convert bytes to human readable form.
+		 *
+		 * @param {number} a  Bytes
+		 * @param {number} b  Number of digits
+		 * @return {*} Formatted Bytes
+		 */
+		formatBytes: ( a, b ) => {
+			const thresh = 1024,
+				units = [ 'KB', 'MB', 'GB', 'TB', 'PB' ];
+
+			if ( Math.abs( a ) < thresh ) {
+				return a + ' B';
+			}
+
+			let u = -1;
+
+			do {
+				a /= thresh;
+				++u;
+			} while ( Math.abs( a ) >= thresh && u < units.length - 1 );
+
+			return a.toFixed( b ) + ' ' + units[ u ];
+		},
+
+		/**
+		 * Get size from a string.
+		 *
+		 * @param {string} formattedSize  Formatter string
+		 * @return {*} Formatted Bytes
+		 */
+		getSizeFromString: ( formattedSize ) => {
+			return formattedSize.replace( /[a-zA-Z]/g, '' ).trim();
+		},
+
+		/**
+		 * Get type from formatted string.
+		 *
+		 * @param {string} formattedSize  Formatted string
+		 * @return {*} Formatted Bytes
+		 */
+		getFormatFromString: ( formattedSize ) => {
+			return formattedSize.replace( /[0-9.]/g, '' ).trim();
+		},
+
+		/**
+		 * Stackoverflow: http://stackoverflow.com/questions/1726630/formatting-a-number-with-exactly-two-decimals-in-javascript
+		 *
+		 * @param {number} num
+		 * @param {number} decimals
+		 * @return {number}  Number
+		 */
+		precise_round: ( num, decimals ) => {
+			const sign = num >= 0 ? 1 : -1;
+			// Keep the percentage below 100.
+			num = num > 100 ? 100 : num;
+			return (
+				Math.round( num * Math.pow( 10, decimals ) + sign * 0.001 ) /
+				Math.pow( 10, decimals )
+			);
+		},
+
+		/**
+		 * Displays a floating error message using the #wp-smush-ajax-notice container.
+		 *
+		 * @since 3.8.0
+		 *
+		 * @param {string} message
+		 */
+		showErrorNotice: ( message ) => {
+			if ( 'undefined' === typeof message ) {
+				return;
+			}
+
+			const noticeMessage = `<p>${ message }</p>`,
+				noticeOptions = {
+					type: 'error',
+					icon: 'info',
+				};
+
+			SUI.openNotice( 'wp-smush-ajax-notice', noticeMessage, noticeOptions );
+
+			const loadingButton = document.querySelector( '.sui-button-onload' );
+			if ( loadingButton ) {
+				loadingButton.classList.remove( 'sui-button-onload' );
+			}
+		},
+
+		/**
+		 * Reset settings.
+		 *
+		 * @since 3.2.0
+		 */
+		resetSettings: () => {
+			const _nonce = document.getElementById( 'wp_smush_reset' );
+			const xhr = new XMLHttpRequest();
+			xhr.open( 'POST', ajaxurl + '?action=reset_settings', true );
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+			xhr.onload = () => {
+				if ( 200 === xhr.status ) {
+					const res = JSON.parse( xhr.response );
+					if ( 'undefined' !== typeof res.success && res.success ) {
+						window.location.href = wp_smush_msgs.smush_url;
+					}
+				} else {
+					window.console.log(
+						'Request failed.  Returned status of ' + xhr.status
+					);
+				}
+			};
+			xhr.send( '_ajax_nonce=' + _nonce.value );
+		},
+	};
+
+	WP_Smush.helpers.init();
+} )();

+/* global ajaxurl */
+/* global wp_smush_msgs */
+
+/**
+ * @typedef {Object} jQuery
+ * @property
+ */
+( function( $ ) {
+	'use strict';
+
+	/**
+	 * S3 support alert.
+	 *
+	 * @since 3.6.2  Moved from class-s3.php
+	 */
+	if ( $( '#wp-smush-s3support-alert' ).length ) {
+		const noticeOptions = {
+			type: 'warning',
+			icon: 'info',
+			dismiss: {
+				show: true,
+				label: wp_smush_msgs.noticeDismiss,
+				tooltip: wp_smush_msgs.noticeDismissTooltip,
+			},
+		};
+
+		window.SUI.openNotice(
+			'wp-smush-s3support-alert',
+			$( '#wp-smush-s3support-alert' ).data( 'message' ),
+			noticeOptions
+		);
+	}
+
+	// Dismiss S3 support alert.
+	$( '#wp-smush-s3support-alert' ).on( 'click', 'button', () => {
+		$.post( ajaxurl, { action: 'dismiss_s3support_alert' } );
+	} );
+
+	// Remove API message.
+	$( '#wp-smush-api-message button.sui-button-icon' ).on( 'click', function(
+		e
+	) {
+		e.preventDefault();
+		const notice = $( '#wp-smush-api-message' );
+		notice.slideUp( 'slow', function() {
+			notice.remove();
+		} );
+		$.post( ajaxurl, { action: 'hide_api_message' } );
+	} );
+
+	// Hide the notice after a CTA button was clicked
+	function removeNotice(e) {
+		const $notice = $(e.currentTarget).closest('.smush-notice');
+		$notice.fadeTo(100, 0, () =>
+			$notice.slideUp(100, () => $notice.remove())
+		);
+	}
+
+	// Only used for the Dashboard notification for now.
+	$('.smush-notice .smush-notice-act').on('click', (e) => {
+		removeNotice(e);
+	});
+
+	// Only used for the upgrade notice.
+	$('.smush-notice .smush-notice-dismiss').on('click', (e) => {
+		removeNotice(e);
+		$.post(ajaxurl, { action: 'dismiss_upgrade_notice' });
+	});
+
+	// Dismiss the update notice.
+	$( '.wp-smush-update-info' ).on( 'click', '.notice-dismiss', ( e ) => {
+		e.preventDefault();
+		removeNotice(e);
+		$.post( ajaxurl, { action: 'dismiss_update_info' } );
+	} );
+} )( jQuery );

+/* global WP_Smush */
+/* global ajaxurl */
+
+/**
+ * Modals JavaScript code.
+ */
+( function() {
+	'use strict';
+
+	/**
+	 * Onboarding modal.
+	 *
+	 * @since 3.1
+	 */
+	WP_Smush.onboarding = {
+		membership: 'free', // Assume free by default.
+		onboardingModal: document.getElementById( 'smush-onboarding-dialog' ),
+		scanFilesModal: document.getElementById( 'checking-files-dialog' ),
+		settings: {
+			first: true,
+			last: false,
+			slide: 'start',
+			value: false,
+		},
+		selection: {
+			auto: true,
+			lossy: true,
+			strip_exif: true,
+			original: false,
+			lazy_load: true,
+			usage: false,
+		},
+		contentContainer: document.getElementById( 'smush-onboarding-content' ),
+		onboardingSlides: [
+			'start',
+			'auto',
+			'lossy',
+			'strip_exif',
+			'original',
+			'lazy_load',
+			'usage',
+		],
+		touchX: null,
+		touchY: null,
+
+		/**
+		 * Init module.
+		 */
+		init() {
+			if ( ! this.onboardingModal ) {
+				return;
+			}
+
+			const dialog = document.getElementById( 'smush-onboarding' );
+
+			this.membership = dialog.dataset.type;
+
+			if ( 'pro' !== this.membership ) {
+				this.onboardingSlides = [
+					'start',
+					'auto',
+					'strip_exif',
+					'lazy_load',
+					'usage',
+				];
+				this.selection.lossy = false;
+			}
+
+			if ( 'false' === dialog.dataset.tracking ) {
+				this.onboardingSlides.pop();
+			}
+
+			this.renderTemplate();
+
+			// Skip setup.
+			const skipButton = this.onboardingModal.querySelector(
+				'.smush-onboarding-skip-link'
+			);
+			if ( skipButton ) {
+				skipButton.addEventListener( 'click', this.skipSetup );
+			}
+
+			// Show the modal.
+			window.SUI.openModal(
+				'smush-onboarding-dialog',
+				'checking-files-dialog',
+				undefined,
+				false
+			);
+		},
+
+		/**
+		 * Get swipe coordinates.
+		 *
+		 * @param {Object} e
+		 */
+		handleTouchStart( e ) {
+			const firstTouch = e.touches[ 0 ];
+			this.touchX = firstTouch.clientX;
+			this.touchY = firstTouch.clientY;
+		},
+
+		/**
+		 * Process swipe left/right.
+		 *
+		 * @param {Object} e
+		 */
+		handleTouchMove( e ) {
+			if ( ! this.touchX || ! this.touchY ) {
+				return;
+			}
+
+			const xUp = e.touches[ 0 ].clientX,
+				yUp = e.touches[ 0 ].clientY,
+				xDiff = this.touchX - xUp,
+				yDiff = this.touchY - yUp;
+
+			if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
+				if ( xDiff > 0 ) {
+					if ( false === WP_Smush.onboarding.settings.last ) {
+						WP_Smush.onboarding.next( null, 'next' );
+					}
+				} else if ( false === WP_Smush.onboarding.settings.first ) {
+					WP_Smush.onboarding.next( null, 'prev' );
+				}
+			}
+
+			this.touchX = null;
+			this.touchY = null;
+		},
+
+		/**
+		 * Update the template, register new listeners.
+		 *
+		 * @param {string} directionClass  Accepts: fadeInRight, fadeInLeft, none.
+		 */
+		renderTemplate( directionClass = 'none' ) {
+			// Grab the selected value.
+			const input = this.onboardingModal.querySelector(
+				'input[type="checkbox"]'
+			);
+			if ( input ) {
+				this.selection[ input.id ] = input.checked;
+			}
+
+			const template = WP_Smush.onboarding.template( 'smush-onboarding' );
+			const content = template( this.settings );
+
+			if ( content ) {
+				this.contentContainer.innerHTML = content;
+
+				if ( 'none' === directionClass ) {
+					this.contentContainer.classList.add( 'loaded' );
+				} else {
+					this.contentContainer.classList.remove( 'loaded' );
+					this.contentContainer.classList.add( directionClass );
+					setTimeout( () => {
+						this.contentContainer.classList.add( 'loaded' );
+						this.contentContainer.classList.remove(
+							directionClass
+						);
+					}, 600 );
+				}
+			}
+
+			this.onboardingModal.addEventListener(
+				'touchstart',
+				this.handleTouchStart,
+				false
+			);
+			this.onboardingModal.addEventListener(
+				'touchmove',
+				this.handleTouchMove,
+				false
+			);
+
+			this.bindSubmit();
+		},
+
+		/**
+		 * Catch "Finish setup wizard" button click.
+		 */
+		bindSubmit() {
+			const submitButton = this.onboardingModal.querySelector(
+				'button[type="submit"]'
+			);
+			const self = this;
+
+			if ( submitButton ) {
+				submitButton.addEventListener( 'click', function( e ) {
+					e.preventDefault();
+
+					// Because we are not rendering the template, we need to update the last element value.
+					const input = self.onboardingModal.querySelector(
+						'input[type="checkbox"]'
+					);
+					if ( input ) {
+						self.selection[ input.id ] = input.checked;
+					}
+
+					const _nonce = document.getElementById(
+						'smush_quick_setup_nonce'
+					);
+
+					const xhr = new XMLHttpRequest();
+					xhr.open( 'POST', ajaxurl + '?action=smush_setup', true );
+					xhr.setRequestHeader(
+						'Content-type',
+						'application/x-www-form-urlencoded'
+					);
+					xhr.onload = () => {
+						if ( 200 === xhr.status ) {
+							WP_Smush.onboarding.showScanDialog();
+						} else {
+							window.console.log(
+								'Request failed.  Returned status of ' +
+									xhr.status
+							);
+						}
+					};
+					xhr.send(
+						'smush_settings=' +
+							JSON.stringify( self.selection ) +
+							'&_ajax_nonce=' +
+							_nonce.value
+					);
+				} );
+			}
+		},
+
+		/**
+		 * Handle navigation.
+		 *
+		 * @param {Object} e
+		 * @param {null|string} whereTo
+		 */
+		next( e, whereTo = null ) {
+			const index = this.onboardingSlides.indexOf( this.settings.slide );
+			let newIndex = 0;
+
+			if ( ! whereTo ) {
+				newIndex =
+					null !== e && e.classList.contains( 'next' )
+						? index + 1
+						: index - 1;
+			} else {
+				newIndex = 'next' === whereTo ? index + 1 : index - 1;
+			}
+
+			const directionClass =
+				null !== e && e.classList.contains( 'next' )
+					? 'fadeInRight'
+					: 'fadeInLeft';
+
+			this.settings = {
+				first: 0 === newIndex,
+				last: newIndex + 1 === this.onboardingSlides.length, // length !== index
+				slide: this.onboardingSlides[ newIndex ],
+				value: this.selection[ this.onboardingSlides[ newIndex ] ],
+			};
+
+			this.renderTemplate( directionClass );
+		},
+
+		/**
+		 * Handle circle navigation.
+		 *
+		 * @param {string} target
+		 */
+		goTo( target ) {
+			const newIndex = this.onboardingSlides.indexOf( target );
+
+			this.settings = {
+				first: 0 === newIndex,
+				last: newIndex + 1 === this.onboardingSlides.length, // length !== index
+				slide: target,
+				value: this.selection[ target ],
+			};
+
+			this.renderTemplate();
+		},
+
+		/**
+		 * Skip onboarding experience.
+		 */
+		skipSetup: () => {
+			const _nonce = document.getElementById( 'smush_quick_setup_nonce' );
+
+			const xhr = new XMLHttpRequest();
+			xhr.open(
+				'POST',
+				ajaxurl + '?action=skip_smush_setup&_ajax_nonce=' + _nonce.value
+			);
+			xhr.onload = () => {
+				if ( 200 === xhr.status ) {
+					WP_Smush.onboarding.showScanDialog();
+				} else {
+					window.console.log(
+						'Request failed.  Returned status of ' + xhr.status
+					);
+				}
+			};
+			xhr.send();
+		},
+
+		/**
+		 * Show checking files dialog.
+		 */
+		showScanDialog() {
+			window.SUI.closeModal();
+			window.SUI.openModal(
+				'checking-files-dialog',
+				'wpbody-content',
+				undefined,
+				false
+			);
+
+			const nonce = document.getElementById( 'wp_smush_options_nonce' );
+
+			setTimeout( () => {
+				const xhr = new XMLHttpRequest();
+				xhr.open( 'POST', ajaxurl + '?action=scan_for_resmush', true );
+				xhr.setRequestHeader(
+					'Content-type',
+					'application/x-www-form-urlencoded'
+				);
+				xhr.onload = () => {
+					const elem = document.querySelector(
+						'#smush-onboarding-dialog'
+					);
+					elem.parentNode.removeChild( elem );
+
+					if ( 200 === xhr.status ) {
+						setTimeout( function() {
+							window.location.search = 'page=smush-bulk';
+						}, 1000 );
+					} else {
+						window.console.log(
+							'Request failed.  Returned status of ' + xhr.status
+						);
+					}
+				};
+				xhr.send(
+					'type=media&get_ui=false&process_settings=false&wp_smush_options_nonce=' +
+						nonce.value
+				);
+			}, 3000 );
+		},
+
+		/**
+		 * Hide new features modal.
+		 *
+		 * @since 3.7.0
+		 */
+		hideUpgradeModal: () => {
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', ajaxurl + '?action=hide_new_features');
+			xhr.send();
+		},
+	};
+
+	/**
+	 * Template function (underscores based).
+	 *
+	 * @type {Function}
+	 */
+	WP_Smush.onboarding.template = _.memoize( ( id ) => {
+		let compiled;
+		const options = {
+			evaluate: /<#([\s\S]+?)#>/g,
+			interpolate: /{{{([\s\S]+?)}}}/g,
+			escape: /{{([^}]+?)}}(?!})/g,
+			variable: 'data',
+		};
+
+		return ( data ) => {
+			_.templateSettings = options;
+			compiled =
+				compiled ||
+				_.template( document.getElementById( id ).innerHTML );
+			return compiled( data );
+		};
+	} );
+
+	window.addEventListener( 'load', () => WP_Smush.onboarding.init() );
+} )();

+/**
+ * Shared UI JS libraries. Use only what we need to keep the vendor file size smaller.
+ *
+ * @package
+ */
+require( '@wpmudev/shared-ui/dist/js/_src/code-snippet' );
+require( '@wpmudev/shared-ui/dist/js/_src/modal-dialog' );
+require( '@wpmudev/shared-ui/dist/js/_src/notifications' );
+require( '@wpmudev/shared-ui/dist/js/_src/scores' );
+require( '@wpmudev/shared-ui/dist/js/_src/select2.full' );
+require( '@wpmudev/shared-ui/dist/js/_src/select2' );
+require( '@wpmudev/shared-ui/dist/js/_src/tabs' );
+require( '@wpmudev/shared-ui/dist/js/_src/upload' ); // Used on lazy load page (since 3.2.2).
+require( '@wpmudev/shared-ui/dist/js/_src/reviews' );

+/**
+ * BLOCK: extend image block
+ */
+const { createHigherOrderComponent } = wp.compose,
+	{ Fragment } = wp.element,
+	{ InspectorControls } = wp.blockEditor,
+	{ PanelBody } = wp.components;
+
+/**
+ * Transform bytes to human readable format.
+ *
+ * @param {number} bytes
+ * @return {string}  Readable size string.
+ */
+function humanFileSize( bytes ) {
+	const thresh = 1024,
+		units = [ 'kB', 'MB', 'GB', 'TB' ];
+
+	if ( Math.abs( bytes ) < thresh ) {
+		return bytes + ' B';
+	}
+
+	let u = -1;
+	do {
+		bytes /= thresh;
+		++u;
+	} while ( Math.abs( bytes ) >= thresh && u < units.length - 1 );
+
+	return bytes.toFixed( 1 ) + ' ' + units[ u ];
+}
+
+/**
+ * Generate Smush stats table.
+ *
+ * @param {number} id
+ * @param {Object} stats
+ * @return {*}  Smush stats.
+ */
+export function smushStats( id, stats ) {
+	if ( 'undefined' === typeof stats ) {
+		return window.smush_vars.strings.gb.select_image;
+	} else if ( 'string' === typeof stats ) {
+		return stats;
+	}
+
+	return (
+		<div
+			id="smush-stats"
+			className="sui-smush-media smush-stats-wrapper hidden"
+			style={ { display: 'block' } }
+		>
+			<table className="wp-smush-stats-holder">
+				<thead>
+					<tr>
+						<th className="smush-stats-header">
+							{ window.smush_vars.strings.gb.size }
+						</th>
+						<th className="smush-stats-header">
+							{ window.smush_vars.strings.gb.savings }
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					{ Object.keys( stats.sizes )
+						.filter( ( item ) => 0 < stats.sizes[ item ].percent )
+						.map( ( item, i ) => (
+							<tr key={ i }>
+								<td>{ item.toUpperCase() }</td>
+								<td>
+									{ humanFileSize(
+										stats.sizes[ item ].bytes
+									) }{ ' ' }
+									( { stats.sizes[ item ].percent }% )
+								</td>
+							</tr>
+						) ) }
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+/**
+ * Fetch image data. If image is Smushing, update in 3 seconds.
+ *
+ * TODO: this could be optimized not to query so much.
+ *
+ * @param {Object} props
+ */
+export function fetchProps( props ) {
+	const image = new wp.api.models.Media( { id: props.attributes.id } ),
+		smushData = props.attributes.smush;
+
+	image.fetch( { attribute: 'smush' } ).done( function( img ) {
+		if ( 'string' === typeof img.smush ) {
+			props.setAttributes( { smush: img.smush } );
+			//setTimeout( () => fetch( props ), 3000 );
+		} else if (
+			'undefined' !== typeof img.smush &&
+			( 'undefined' === typeof smushData ||
+				JSON.stringify( smushData ) !== JSON.stringify( img.smush ) )
+		) {
+			props.setAttributes( { smush: img.smush } );
+		}
+	} );
+}
+
+/**
+ * Modify the block’s edit component.
+ * Receives the original block BlockEdit component and returns a new wrapped component.
+ */
+const smushStatsControl = createHigherOrderComponent( ( BlockEdit ) => {
+	return ( props ) => {
+		// If not image block or not selected, return unmodified block.
+		if (
+			'core/image' !== props.name ||
+			! props.isSelected ||
+			'undefined' === typeof props.attributes.id
+		) {
+			return (
+				<Fragment>
+					<BlockEdit { ...props } />
+				</Fragment>
+			);
+		}
+
+		const smushData = props.attributes.smush;
+		fetchProps( props );
+
+		return (
+			<Fragment>
+				<BlockEdit { ...props } />
+				<InspectorControls>
+					<PanelBody title={ window.smush_vars.strings.gb.stats }>
+						{ smushStats( props.attributes.id, smushData ) }
+					</PanelBody>
+				</InspectorControls>
+			</Fragment>
+		);
+	};
+}, 'withInspectorControl' );
+
+wp.hooks.addFilter(
+	'editor.BlockEdit',
+	'wp-smush/smush-data-control',
+	smushStatsControl
+);

+/* global WP_Smush */
+/* global ajaxurl */
+
+/**
+ * CDN functionality.
+ *
+ * @since 3.0
+ */
+( function() {
+	'use strict';
+
+	WP_Smush.CDN = {
+		cdnEnableButton: document.getElementById( 'smush-enable-cdn' ),
+		cdnDisableButton: document.getElementById( 'smush-cancel-cdn' ),
+		cdnStatsBox: document.querySelector( '.smush-cdn-stats' ),
+
+		init() {
+			/**
+			 * Handle "Get Started" button click on disabled CDN page.
+			 */
+			if ( this.cdnEnableButton ) {
+				this.cdnEnableButton.addEventListener( 'click', ( e ) => {
+					e.preventDefault();
+					e.currentTarget.classList.add( 'sui-button-onload' );
+					this.toggle_cdn( true );
+				} );
+			}
+
+			/**
+			 * Handle "Deactivate' button click on CDN page.
+			 */
+			if ( this.cdnDisableButton ) {
+				this.cdnDisableButton.addEventListener( 'click', ( e ) => {
+					e.preventDefault();
+					e.currentTarget.classList.add( 'sui-button-onload' );
+
+					this.toggle_cdn( false );
+				} );
+			}
+
+			this.updateStatsBox();
+		},
+
+		/**
+		 * Toggle CDN.
+		 *
+		 * @since 3.0
+		 *
+		 * @param {boolean} enable
+		 */
+		toggle_cdn( enable ) {
+			const nonceField = document.getElementsByName(
+				'wp_smush_options_nonce'
+			);
+
+			const xhr = new XMLHttpRequest();
+			xhr.open( 'POST', ajaxurl + '?action=smush_toggle_cdn', true );
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+			xhr.onload = () => {
+				if ( 200 === xhr.status ) {
+					const res = JSON.parse( xhr.response );
+					if ( 'undefined' !== typeof res.success && res.success ) {
+						window.location.search = 'page=smush-cdn';
+					} else if ( 'undefined' !== typeof res.data.message ) {
+						WP_Smush.helpers.showErrorNotice( res.data.message );
+					}
+				} else {
+					WP_Smush.helpers.showErrorNotice( 'Request failed.  Returned status of ' + xhr.status );
+				}
+			};
+			xhr.send(
+				'param=' + enable + '&_ajax_nonce=' + nonceField[ 0 ].value
+			);
+		},
+
+		/**
+		 * Update the CDN stats box in summary meta box. Only fetch new data when on CDN page.
+		 *
+		 * @since 3.0
+		 */
+		updateStatsBox() {
+			if (
+				'undefined' === typeof this.cdnStatsBox ||
+				! this.cdnStatsBox
+			) {
+				return;
+			}
+
+			// Only fetch the new stats, when user is on CDN page.
+			if ( ! window.location.search.includes( 'view=cdn' ) ) {
+				return;
+			}
+
+			this.toggleElements();
+
+			const xhr = new XMLHttpRequest();
+			xhr.open( 'POST', ajaxurl + '?action=get_cdn_stats', true );
+			xhr.onload = () => {
+				if ( 200 === xhr.status ) {
+					const res = JSON.parse( xhr.response );
+					if ( 'undefined' !== typeof res.success && res.success ) {
+						this.toggleElements();
+					} else if ( 'undefined' !== typeof res.data.message ) {
+						WP_Smush.helpers.showErrorNotice( res.data.message );
+					}
+				} else {
+					WP_Smush.helpers.showErrorNotice( 'Request failed.  Returned status of ' + xhr.status );
+				}
+			};
+			xhr.send();
+		},
+
+		/**
+		 * Show/hide elements during status update in the updateStatsBox()
+		 *
+		 * @since 3.1  Moved out from updateStatsBox()
+		 */
+		toggleElements() {
+			const spinner = this.cdnStatsBox.querySelector(
+				'.sui-icon-loader'
+			);
+			const elements = this.cdnStatsBox.querySelectorAll(
+				'.wp-smush-stats > :not(.sui-icon-loader)'
+			);
+
+			for ( let i = 0; i < elements.length; i++ ) {
+				elements[ i ].classList.toggle( 'sui-hidden' );
+			}
+
+			spinner.classList.toggle( 'sui-hidden' );
+		},
+	};
+
+	WP_Smush.CDN.init();
+} )();

+/* global WP_Smush */
+/* global ajaxurl */
+
+/**
+ * Directory scanner module that will Smush images in the Directory Smush modal.
+ *
+ * @since 2.8.1
+ *
+ * @param {string|number} totalSteps
+ * @param {string|number} currentStep
+ * @return {Object}  Scan object.
+ * @class
+ */
+const DirectoryScanner = ( totalSteps, currentStep ) => {
+	totalSteps = parseInt( totalSteps );
+	currentStep = parseInt( currentStep );
+
+	let cancelling = false,
+		failedItems = 0,
+		skippedItems = 0;
+
+	const obj = {
+		scan() {
+			const remainingSteps = totalSteps - currentStep;
+			if ( currentStep !== 0 ) {
+				// Scan started on a previous page load.
+				step(remainingSteps).fail(this.showScanError);
+			} else {
+				jQuery
+					.post(ajaxurl, { action: 'directory_smush_start' }, () =>
+						step(remainingSteps).fail(this.showScanError)
+					)
+					.fail(this.showScanError);
+			}
+		},
+
+		cancel() {
+			cancelling = true;
+			return jQuery.post( ajaxurl, { action: 'directory_smush_cancel' } );
+		},
+
+		getProgress() {
+			if ( cancelling ) {
+				return 0;
+			}
+			// O M G ... Logic at it's finest!
+			const remainingSteps = totalSteps - currentStep;
+			return Math.min(
+				Math.round(
+					( parseInt( totalSteps - remainingSteps ) * 100 ) /
+						totalSteps
+				),
+				99
+			);
+		},
+
+		onFinishStep( progress ) {
+			jQuery( '.wp-smush-progress-dialog .sui-progress-state-text' ).html(
+				currentStep -
+					failedItems +
+					'/' +
+					totalSteps +
+					' ' +
+					window.wp_smush_msgs.progress_smushed
+			);
+			WP_Smush.directory.updateProgressBar( progress );
+		},
+
+		onFinish() {
+			WP_Smush.directory.updateProgressBar( 100 );
+			window.location.href =
+				window.wp_smush_msgs.directory_url + '&scan=done';
+		},
+
+		/**
+		 * Displays an error when the scan request fails.
+		 *
+		 * @param {Object} res XHR object.
+		 */
+		showScanError(res) {
+			const dialog = jQuery('#wp-smush-progress-dialog');
+
+			// Add the error class to show/hide elements in the dialog.
+			dialog
+				.removeClass('wp-smush-exceed-limit')
+				.addClass('wp-smush-scan-error');
+
+			// Add the error status and description to the error message.
+			dialog
+				.find('#smush-scan-error')
+				.text(`${res.status} ${res.statusText}`);
+
+			// Show/hide the 403 error specific instructions.
+			const forbiddenMessage = dialog.find('.smush-403-error-message');
+			if (403 !== res.status) {
+				forbiddenMessage.addClass('sui-hidden');
+			} else {
+				forbiddenMessage.removeClass('sui-hidden');
+			}
+		},
+
+		limitReached() {
+			const dialog = jQuery( '#wp-smush-progress-dialog' );
+
+			dialog.addClass( 'wp-smush-exceed-limit' );
+			dialog
+				.find( '#cancel-directory-smush' )
+				.attr( 'data-tooltip', window.wp_smush_msgs.bulk_resume );
+			dialog
+				.find( '.sui-box-body .sui-icon-close' )
+				.removeClass( 'sui-icon-close' )
+				.addClass( 'sui-icon-play' );
+			dialog
+				.find( '#cancel-directory-smush' )
+				.attr( 'id', 'cancel-directory-smush-disabled' );
+		},
+
+		resume() {
+			const dialog = jQuery( '#wp-smush-progress-dialog' );
+			const resume = dialog.find( '#cancel-directory-smush-disabled' );
+
+			dialog.removeClass( 'wp-smush-exceed-limit' );
+			dialog
+				.find( '.sui-box-body .sui-icon-play' )
+				.removeClass( 'sui-icon-play' )
+				.addClass( 'sui-icon-close' );
+			resume.attr( 'data-tooltip', 'Cancel' );
+			resume.attr( 'id', 'cancel-directory-smush' );
+
+			obj.scan();
+		},
+	};
+
+	/**
+	 * Execute a scan step recursively
+	 *
+	 * Private to avoid overriding
+	 *
+	 * @param {number} remainingSteps
+	 */
+	const step = function( remainingSteps ) {
+		if ( remainingSteps >= 0 ) {
+			currentStep = totalSteps - remainingSteps;
+			return jQuery.post(
+				ajaxurl,
+				{
+					action: 'directory_smush_check_step',
+					step: currentStep,
+				},
+				( response ) => {
+					// We're good - continue on.
+					if (
+						'undefined' !== typeof response.success &&
+						response.success
+					) {
+						if (
+							'undefined' !== typeof response.data &&
+							'undefined' !== typeof response.data.skipped &&
+							true === response.data.skipped
+						) {
+							skippedItems++;
+						}
+
+						currentStep++;
+						remainingSteps = remainingSteps - 1;
+						obj.onFinishStep( obj.getProgress() );
+						step(remainingSteps).fail(obj.showScanError);
+					} else if (
+						'undefined' !== typeof response.data.error &&
+						'dir_smush_limit_exceeded' === response.data.error
+					) {
+						// Limit reached. Stop.
+						obj.limitReached();
+					} else {
+						// Error? never mind, continue, but count them.
+						failedItems++;
+						currentStep++;
+						remainingSteps = remainingSteps - 1;
+						obj.onFinishStep( obj.getProgress() );
+						step(remainingSteps).fail(obj.showScanError);
+					}
+				}
+			);
+		}
+		return jQuery.post(
+			ajaxurl,
+			{
+				action: 'directory_smush_finish',
+				items: totalSteps - ( failedItems + skippedItems ),
+				failed: failedItems,
+				skipped: skippedItems,
+			},
+			( response ) => obj.onFinish( response )
+		);
+	};
+
+	return obj;
+};
+
+export default DirectoryScanner;

+/* global WP_Smush */
+/* global ajaxurl */
+
+/**
+ * Lazy loading functionality.
+ *
+ * @since 3.0
+ */
+( function() {
+	'use strict';
+
+	WP_Smush.Lazyload = {
+		lazyloadEnableButton: document.getElementById(
+			'smush-enable-lazyload'
+		),
+		lazyloadDisableButton: document.getElementById(
+			'smush-cancel-lazyload'
+		),
+
+		init() {
+			const self = this;
+
+			/**
+			 * Handle "Activate" button click on disabled Lazy load page.
+			 */
+			if ( this.lazyloadEnableButton ) {
+				this.lazyloadEnableButton.addEventListener( 'click', ( e ) => {
+					e.preventDefault();
+					e.currentTarget.classList.add( 'sui-button-onload' );
+
+					this.toggle_lazy_load( true );
+				} );
+			}
+
+			/**
+			 * Handle "Deactivate' button click on Lazy load page.
+			 */
+			if ( this.lazyloadDisableButton ) {
+				this.lazyloadDisableButton.addEventListener( 'click', ( e ) => {
+					e.preventDefault();
+					e.currentTarget.classList.add( 'sui-button-onload' );
+
+					this.toggle_lazy_load( false );
+				} );
+			}
+
+			/**
+			 * Handle "Remove icon" button click on Lazy load page.
+			 *
+			 * This removes the image from the upload placeholder.
+			 *
+			 * @since 3.2.2
+			 */
+			const removeSpinner = document.getElementById(
+				'smush-remove-spinner'
+			);
+			if ( removeSpinner ) {
+				removeSpinner.addEventListener( 'click', ( e ) => {
+					e.preventDefault();
+					this.removeLoaderIcon();
+				} );
+			}
+			const removePlaceholder = document.getElementById(
+				'smush-remove-placeholder'
+			);
+			if ( removePlaceholder ) {
+				removePlaceholder.addEventListener( 'click', ( e ) => {
+					e.preventDefault();
+					this.removeLoaderIcon( 'placeholder' );
+				} );
+			}
+
+			/**
+			 * Handle "Remove" icon click.
+			 *
+			 * This removes the select icon from the list (not same as above functions).
+			 *
+			 * @since 3.2.2
+			 */
+			const items = document.querySelectorAll( '.smush-ll-remove' );
+			if ( items && 0 < items.length ) {
+				items.forEach( function( el ) {
+					el.addEventListener( 'click', ( e ) => {
+						e.preventDefault();
+						e.target.closest( 'li' ).style.display = 'none';
+						self.remove(
+							e.target.dataset.id,
+							e.target.dataset.type
+						);
+					} );
+				} );
+			}
+
+			this.handlePredefinedPlaceholders();
+		},
+
+		/**
+		 * Handle background color changes for the two predefined placeholders.
+		 *
+		 * @since 3.7.1
+		 */
+		handlePredefinedPlaceholders() {
+			const pl1 = document.getElementById( 'placeholder-icon-1' );
+			if ( pl1 ) {
+				pl1.addEventListener( 'click', () => this.changeColor( '#F3F3F3' ) );
+			}
+
+			const pl2 = document.getElementById( 'placeholder-icon-2' );
+			if ( pl2 ) {
+				pl2.addEventListener( 'click', () => this.changeColor( '#333333' ) );
+			}
+		},
+
+		/**
+		 * Set color.
+		 *
+		 * @since 3.7.1
+		 * @param {string} color
+		 */
+		changeColor( color ) {
+			document.getElementById( 'smush-color-picker' ).value = color;
+			document.querySelector( '.sui-colorpicker-hex .sui-colorpicker-value > span > span' ).style.backgroundColor = color;
+			document.querySelector( '.sui-colorpicker-hex .sui-colorpicker-value > input' ).value = color;
+		},
+
+		/**
+		 * Toggle lazy loading.
+		 *
+		 * @since 3.2.0
+		 *
+		 * @param {string} enable
+		 */
+		toggle_lazy_load( enable ) {
+			const nonceField = document.getElementsByName(
+				'wp_smush_options_nonce'
+			);
+
+			const xhr = new XMLHttpRequest();
+			xhr.open(
+				'POST',
+				ajaxurl + '?action=smush_toggle_lazy_load',
+				true
+			);
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+			xhr.onload = () => {
+				if ( 200 === xhr.status ) {
+					const res = JSON.parse( xhr.response );
+					if ( 'undefined' !== typeof res.success && res.success ) {
+						window.location.search = 'page=smush-lazy-load';
+					} else if ( 'undefined' !== typeof res.data.message ) {
+						WP_Smush.helpers.showErrorNotice( res.data.message );
+						document.querySelector( '.sui-button-onload' ).classList.remove( 'sui-button-onload' );
+					}
+				} else {
+					WP_Smush.helpers.showErrorNotice( 'Request failed.  Returned status of ' + xhr.status );
+					document.querySelector( '.sui-button-onload' ).classList.remove( 'sui-button-onload' );
+				}
+			};
+			xhr.send(
+				'param=' + enable + '&_ajax_nonce=' + nonceField[ 0 ].value
+			);
+		},
+
+		/**
+		 * Add lazy load spinner icon.
+		 *
+		 * @since 3.2.2
+		 * @param {string} type  Accepts: spinner, placeholder.
+		 */
+		addLoaderIcon( type = 'spinner' ) {
+			let frame;
+
+			// If the media frame already exists, reopen it.
+			if ( frame ) {
+				frame.open();
+				return;
+			}
+
+			// Create a new media frame
+			frame = wp.media( {
+				title: 'Select or upload an icon',
+				button: {
+					text: 'Select icon',
+				},
+				multiple: false, // Set to true to allow multiple files to be selected
+			} );
+
+			// When an image is selected in the media frame...
+			frame.on( 'select', function() {
+				// Get media attachment details from the frame state
+				const attachment = frame
+					.state()
+					.get( 'selection' )
+					.first()
+					.toJSON();
+
+				// Send the attachment URL to our custom image input field.
+				const imageIcon = document.getElementById(
+					'smush-' + type + '-icon-preview'
+				);
+				imageIcon.style.backgroundImage =
+					'url("' + attachment.url + '")';
+				imageIcon.style.display = 'block';
+
+				// Send the attachment id to our hidden input
+				document
+					.getElementById( 'smush-' + type + '-icon-file' )
+					.setAttribute( 'value', attachment.id );
+
+				// Hide the add image link
+				document.getElementById(
+					'smush-upload-' + type
+				).style.display = 'none';
+
+				// Unhide the remove image link
+				const removeDiv = document.getElementById(
+					'smush-remove-' + type
+				);
+				removeDiv.querySelector( 'span' ).innerHTML =
+					attachment.filename;
+				removeDiv.style.display = 'block';
+			} );
+
+			// Finally, open the modal on click
+			frame.open();
+		},
+
+		/**
+		 * Remove lazy load spinner icon.
+		 *
+		 * @since 3.2.2
+		 * @param {string} type  Accepts: spinner, placeholder.
+		 */
+		removeLoaderIcon: ( type = 'spinner' ) => {
+			// Clear out the preview image
+			const imageIcon = document.getElementById(
+				'smush-' + type + '-icon-preview'
+			);
+			imageIcon.style.backgroundImage = '';
+			imageIcon.style.display = 'none';
+
+			// Un-hide the add image link
+			document.getElementById( 'smush-upload-' + type ).style.display =
+				'block';
+
+			// Hide the delete image link
+			document.getElementById( 'smush-remove-' + type ).style.display =
+				'none';
+
+			// Delete the image id from the hidden input
+			document
+				.getElementById( 'smush-' + type + '-icon-file' )
+				.setAttribute( 'value', '' );
+		},
+
+		/**
+		 * Remove item.
+		 *
+		 * @param {number} id    Image ID.
+		 * @param {string} type  Accepts: spinner, placeholder.
+		 */
+		remove: ( id, type = 'spinner' ) => {
+			const nonceField = document.getElementsByName(
+				'wp_smush_options_nonce'
+			);
+			const xhr = new XMLHttpRequest();
+			xhr.open( 'POST', ajaxurl + '?action=smush_remove_icon', true );
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+			xhr.send(
+				'id=' +
+					id +
+					'&type=' +
+					type +
+					'&_ajax_nonce=' +
+					nonceField[ 0 ].value
+			);
+		},
+	};
+
+	WP_Smush.Lazyload.init();
+} )();

+/* global smush_vars */
+/* global _ */
+
+/**
+ * Adds a Smush Now button and displays stats in Media Attachment Details Screen
+ */
+(function ($, _) {
+	'use strict';
+
+	// Local reference to the WordPress media namespace.
+	const smushMedia = wp.media,
+		sharedTemplate =
+			"<span class='setting smush-stats' data-setting='smush'>" +
+			"<span class='name'><%= label %></span>" +
+			"<span class='value'><%= value %></span>" +
+			'</span>',
+		template = _.template(sharedTemplate);
+
+	/**
+	 * Create the template.
+	 *
+	 * @param {string} smushHTML
+	 * @return {Object} Template object
+	 */
+	const prepareTemplate = function (smushHTML) {
+		/**
+		 * @param {Array}  smush_vars.strings  Localization strings.
+		 * @param {Object} smush_vars          Object from wp_localize_script()
+		 */
+		return template({
+			label: smush_vars.strings.stats_label,
+			value: smushHTML,
+		});
+	};
+
+	if (
+		'undefined' !== typeof smushMedia.view &&
+		'undefined' !== typeof smushMedia.view.Attachment.Details.TwoColumn
+	) {
+		// Local instance of the Attachment Details TwoColumn used in the edit attachment modal view
+		const smushMediaTwoColumn =
+			smushMedia.view.Attachment.Details.TwoColumn;
+
+		/**
+		 * Add Smush details to attachment.
+		 *
+		 * A similar view to media.view.Attachment.Details
+		 * for use in the Edit Attachment modal.
+		 *
+		 * @see wp-includes/js/media-grid.js
+		 */
+		smushMedia.view.Attachment.Details.TwoColumn = smushMediaTwoColumn.extend(
+			{
+				initialize() {
+					smushMediaTwoColumn.prototype.initialize.apply(this, arguments);
+					this.listenTo(this.model, 'change:smush', this.render);
+				},
+
+				render() {
+					// Ensure that the main attachment fields are rendered.
+					smushMedia.view.Attachment.prototype.render.apply(
+						this,
+						arguments
+					);
+
+					const smushHTML = this.model.get('smush');
+					if (typeof smushHTML === 'undefined') {
+						return this;
+					}
+
+					this.model.fetch();
+
+					/**
+					 * Detach the views, append our custom fields, make sure that our data is fully updated
+					 * and re-render the updated view.
+					 */
+					this.views.detach();
+					this.$el
+						.find('.settings')
+						.append(prepareTemplate(smushHTML));
+					this.views.render();
+
+					return this;
+				},
+			}
+		);
+	}
+
+	// Local instance of the Attachment Details TwoColumn used in the edit attachment modal view
+	const smushAttachmentDetails = smushMedia.view.Attachment.Details;
+
+	/**
+	 * Add Smush details to attachment.
+	 */
+	smushMedia.view.Attachment.Details = smushAttachmentDetails.extend({
+		initialize() {
+			smushAttachmentDetails.prototype.initialize.apply(this, arguments);
+			this.listenTo(this.model, 'change:smush', this.render);
+		},
+
+		render() {
+			// Ensure that the main attachment fields are rendered.
+			smushMedia.view.Attachment.prototype.render.apply(this, arguments);
+
+			const smushHTML = this.model.get('smush');
+			if (typeof smushHTML === 'undefined') {
+				return this;
+			}
+
+			this.model.fetch();
+
+			/**
+			 * Detach the views, append our custom fields, make sure that our data is fully updated
+			 * and re-render the updated view.
+			 */
+			this.views.detach();
+			this.$el.append(prepareTemplate(smushHTML));
+
+			return this;
+		},
+	});
+
+	/**
+	 * Create a new MediaLibraryTaxonomyFilter we later will instantiate
+	 *
+	 * @since 3.0
+	 */
+	const MediaLibraryTaxonomyFilter = wp.media.view.AttachmentFilters.extend({
+		id: 'media-attachment-smush-filter',
+
+		createFilters() {
+			this.filters = {
+				all: {
+					text: smush_vars.strings.filter_all,
+					props: { stats: 'all' },
+					priority: 10,
+				},
+
+				unsmushed: {
+					text: smush_vars.strings.filter_not_processed,
+					props: { stats: 'unsmushed' },
+					priority: 20,
+				},
+
+				excluded: {
+					text: smush_vars.strings.filter_excl,
+					props: { stats: 'excluded' },
+					priority: 30,
+				},
+			};
+		},
+	});
+
+	/**
+	 * Extend and override wp.media.view.AttachmentsBrowser to include our new filter.
+	 *
+	 * @since 3.0
+	 */
+	const AttachmentsBrowser = wp.media.view.AttachmentsBrowser;
+	wp.media.view.AttachmentsBrowser = wp.media.view.AttachmentsBrowser.extend({
+		createToolbar() {
+			// Make sure to load the original toolbar
+			AttachmentsBrowser.prototype.createToolbar.call(this);
+			this.toolbar.set(
+				'MediaLibraryTaxonomyFilter',
+				new MediaLibraryTaxonomyFilter({
+					controller: this.controller,
+					model: this.collection.props,
+					priority: -75,
+				}).render()
+			);
+		},
+	});
+})(jQuery, _);

+/* global ajaxurl */
+/* global wp_smush_msgs */
+/* global WP_Smush */
+/* global SUI */
+
+(function ($) {
+	'use strict';
+
+	/**
+	 * Bulk compress page.
+	 */
+	$('form#smush-bulk-form').on('submit', function (e) {
+		e.preventDefault();
+		$('#save-settings-button').addClass('sui-button-onload');
+		// TODO: this might be a problem, if we can't recalculate on larger installs.
+		saveSettings($(this).serialize(), 'bulk');
+		runReCheck();
+	});
+
+	/**
+	 * Lazy load page.
+	 */
+	$('form#smush-lazy-load-form').on('submit', function (e) {
+		e.preventDefault();
+		$('#save-settings-button').addClass('sui-button-onload-text');
+		saveSettings($(this).serialize(), 'lazy-load');
+	});
+
+	/**
+	 * CDN page.
+	 */
+	$('form#smush-cdn-form').on('submit', function (e) {
+		e.preventDefault();
+		$('#save-settings-button').addClass('sui-button-onload-text');
+		saveSettings($(this).serialize(), 'cdn');
+	});
+
+	/**
+	 * Integrations page.
+	 */
+	$('form#smush-integrations-form').on('submit', function (e) {
+		e.preventDefault();
+		$('#save-settings-button').addClass('sui-button-onload-text');
+		saveSettings($(this).serialize(), 'integrations');
+	});
+
+	/**
+	 * Tools page.
+	 */
+	$('form#smush-tools-form').on('submit', function (e) {
+		e.preventDefault();
+		$('#save-settings-button').addClass('sui-button-onload-text');
+		saveSettings($(this).serialize(), 'tools');
+	});
+
+	/**
+	 * Settings page.
+	 */
+	$('form#smush-settings-form').on('submit', function (e) {
+		e.preventDefault();
+		$('#save-settings-button').addClass('sui-button-onload-text');
+		saveSettings($(this).serialize(), 'settings');
+	});
+
+	/**
+	 * Save settings.
+	 *
+	 * @param {string} settings  JSON string of settings.
+	 * @param {string} page      Settings page.
+	 */
+	function saveSettings(settings, page) {
+		const xhr = new XMLHttpRequest();
+
+		xhr.open('POST', ajaxurl + '?action=smush_save_settings', true);
+		xhr.setRequestHeader(
+			'Content-type',
+			'application/x-www-form-urlencoded'
+		);
+
+		xhr.onload = () => {
+			$('#save-settings-button').removeClass(
+				'sui-button-onload-text sui-button-onload'
+			);
+
+			if (200 === xhr.status) {
+				const res = JSON.parse(xhr.response);
+				if ('undefined' !== typeof res.success && res.success) {
+					showSuccessNotice(wp_smush_msgs.settingsUpdated);
+				} else if (res.data && res.data.message) {
+					WP_Smush.helpers.showErrorNotice(res.data.message);
+				} else {
+					WP_Smush.helpers.showErrorNotice('Request failed.');
+				}
+			} else {
+				WP_Smush.helpers.showErrorNotice(
+					'Request failed. Returned status of ' + xhr.status
+				);
+			}
+		};
+
+		xhr.send(
+			'page=' +
+				page +
+				'&' +
+				settings +
+				'&_ajax_nonce=' +
+				wp_smush_msgs.nonce
+		);
+	}
+
+	/**
+	 * Show successful update notice.
+	 *
+	 * @param {string} msg  Notice message.
+	 */
+	function showSuccessNotice(msg) {
+		const noticeMessage = `<p>${msg}</p>`,
+			noticeOptions = {
+				type: 'success',
+				icon: 'check',
+			};
+
+		SUI.openNotice('wp-smush-ajax-notice', noticeMessage, noticeOptions);
+
+		const loadingButton = document.querySelector('.sui-button-onload');
+		if (loadingButton) {
+			loadingButton.classList.remove('sui-button-onload');
+		}
+	}
+
+	/**
+	 * Re-check images from bulk smush and integrations pages.
+	 */
+	function runReCheck() {
+		$('#save-settings-button').addClass('sui-button-onload');
+
+		const param = {
+			action: 'scan_for_resmush',
+			wp_smush_options_nonce: $('#wp_smush_options_nonce').val(),
+			type: 'media',
+		};
+
+		// Send ajax, Update Settings, And Check For resmush.
+		$.post(ajaxurl, $.param(param)).done(function () {
+			//showSuccessNotice(r.data.notice);
+			$('#save-settings-button').removeClass('sui-button-onload');
+		});
+	}
+
+	/**
+	 * Parse remove data change.
+	 */
+	$('input[name=keep_data]').on('change', function (e) {
+		const otherClass =
+			'keep_data-true' === e.target.id
+				? 'keep_data-false'
+				: 'keep_data-true';
+		e.target.parentNode.classList.add('active');
+		document
+			.getElementById(otherClass)
+			.parentNode.classList.remove('active');
+	});
+
+	/**
+	 * Handle auto detect checkbox toggle, to show/hide highlighting notice.
+	 */
+	$('input#detection').on('click', function () {
+		const noticeDiv = $('.smush-highlighting-notice');
+		const warningDiv = $('.smush-highlighting-warning');
+
+		// Setting enabled.
+		if ($(this).is(':checked')) {
+			// Highlighting is already active and setting not saved.
+			if (noticeDiv.length > 0) {
+				noticeDiv.show();
+			} else {
+				warningDiv.show();
+			}
+		} else {
+			noticeDiv.hide();
+			warningDiv.hide();
+		}
+	});
+})(jQuery);

+/* global WP_Smush */
+/* global ajaxurl */
+
+/**
+ * WebP functionality.
+ *
+ * @since 3.8.0
+ */
+
+(function () {
+	'use strict';
+
+	WP_Smush.WebP = {
+		nonceField: document.getElementsByName('wp_smush_options_nonce'),
+		toggleModuleButton: document.getElementById('smush-toggle-webp-button'),
+		recheckStatusButton: document.getElementById('smush-webp-recheck'),
+		recheckStatusLink: document.getElementById('smush-webp-recheck-link'),
+		showWizardButton: document.getElementById('smush-webp-toggle-wizard'),
+
+		init() {
+			this.maybeShowDeleteAllSuccessNotice();
+
+			/**
+			 * Handles the "Deactivate" and "Get Started" buttons on the WebP page.
+			 */
+			if (this.toggleModuleButton) {
+				this.toggleModuleButton.addEventListener('click', (e) =>
+					this.toggleWebp(e)
+				);
+			}
+
+			/**
+			 * Handle "RE-CHECK STATUS' button click on WebP page.
+			 */
+			if (this.recheckStatusButton) {
+				this.recheckStatusButton.addEventListener('click', (e) => {
+					e.preventDefault();
+					this.recheckStatus();
+				});
+			}
+
+			/**
+			 * Handle "RE-CHECK STATUS' link click on WebP page.
+			 */
+			if (this.recheckStatusLink) {
+				this.recheckStatusLink.addEventListener('click', (e) => {
+					e.preventDefault();
+					this.recheckStatus();
+				});
+			}
+
+			/**
+			 * Handles the "Delete WebP images" button.
+			 */
+			if (document.getElementById('wp-smush-webp-delete-all')) {
+				document
+					.getElementById('wp-smush-webp-delete-all')
+					.addEventListener('click', (e) => this.deleteAll(e));
+			}
+
+			if (this.showWizardButton) {
+				this.showWizardButton.addEventListener(
+					'click',
+					this.toggleWizard
+				);
+			}
+		},
+
+		/**
+		 * Toggle WebP module.
+		 *
+		 * @param {Event} e
+		 */
+		toggleWebp(e) {
+			e.preventDefault();
+
+			const button = e.currentTarget,
+				doEnable = 'enable' === button.dataset.action;
+
+			button.classList.add('sui-button-onload');
+
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', ajaxurl + '?action=smush_webp_toggle', true);
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+
+			xhr.onload = () => {
+				const res = JSON.parse(xhr.response);
+
+				if (200 === xhr.status) {
+					if ('undefined' !== typeof res.success && res.success) {
+						const scanPromise = this.runScan();
+						scanPromise.onload = () => {
+							window.location.href =
+								window.wp_smush_msgs.localWebpURL;
+						};
+					} else if ('undefined' !== typeof res.data.message) {
+						this.showNotice(res.data.message);
+						button.classList.remove('sui-button-onload');
+					}
+				} else {
+					let message = window.wp_smush_msgs.generic_ajax_error;
+					if (res && 'undefined' !== typeof res.data.message) {
+						message = res.data.message;
+					}
+					this.showNotice(message);
+					button.classList.remove('sui-button-onload');
+				}
+			};
+
+			xhr.send(
+				'param=' + doEnable + '&_ajax_nonce=' + this.nonceField[0].value
+			);
+		},
+
+		/**
+		 * re-check server configuration for WebP.
+		 */
+		recheckStatus() {
+			this.recheckStatusButton.classList.add('sui-button-onload');
+
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', ajaxurl + '?action=smush_webp_get_status', true);
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+			xhr.onload = () => {
+				this.recheckStatusButton.classList.remove('sui-button-onload');
+				let message = false;
+				const res = JSON.parse(xhr.response);
+				if (200 === xhr.status) {
+					const isConfigured = res.success ? '1' : '0';
+					if (
+						isConfigured !==
+						this.recheckStatusButton.dataset.isConfigured
+					) {
+						// Reload the page when the configuration status changed.
+						location.reload();
+					}
+				} else {
+					message = window.wp_smush_msgs.generic_ajax_error;
+				}
+
+				if (res && res.data) {
+					message = res.data;
+				}
+
+				if (message) {
+					this.showNotice(message);
+				}
+			};
+			xhr.send('_ajax_nonce=' + window.wp_smush_msgs.webp_nonce);
+		},
+
+		deleteAll(e) {
+			const button = e.currentTarget;
+			button.classList.add('sui-button-onload');
+
+			let message = false;
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', ajaxurl + '?action=smush_webp_delete_all', true);
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+
+			xhr.onload = () => {
+				const res = JSON.parse(xhr.response);
+				if (200 === xhr.status) {
+					if ('undefined' !== typeof res.success && res.success) {
+						const scanPromise = this.runScan();
+						scanPromise.onload = () => {
+							location.search =
+								location.search + '&notice=webp-deleted';
+						};
+					} else {
+						message = window.wp_smush_msgs.generic_ajax_error;
+					}
+				} else {
+					message = window.wp_smush_msgs.generic_ajax_error;
+				}
+
+				if (res && res.data && res.data.message) {
+					message = res.data.message;
+				}
+
+				if (message) {
+					button.classList.remove('sui-button-onload');
+
+					const noticeMessage = `<p style="text-align: left;">${message}</p>`;
+					const noticeOptions = {
+						type: 'error',
+						icon: 'info',
+						autoclose: {
+							show: false,
+						},
+					};
+
+					window.SUI.openNotice(
+						'wp-smush-webp-delete-all-error-notice',
+						noticeMessage,
+						noticeOptions
+					);
+				}
+			};
+
+			xhr.send('_ajax_nonce=' + this.nonceField[0].value);
+		},
+
+		toggleWizard(e) {
+			e.currentTarget.classList.add('sui-button-onload');
+
+			const xhr = new XMLHttpRequest();
+			xhr.open(
+				'GET',
+				ajaxurl +
+					'?action=smush_toggle_webp_wizard&_ajax_nonce=' +
+					window.wp_smush_msgs.webp_nonce,
+				true
+			);
+			xhr.onload = () => location.reload();
+			xhr.send();
+		},
+
+		/**
+		 * Triggers the scanning of images for updating the images to re-smush.
+		 *
+		 * @since 3.8.0
+		 */
+		runScan() {
+			const xhr = new XMLHttpRequest(),
+				nonceField = document.getElementsByName(
+					'wp_smush_options_nonce'
+				);
+
+			xhr.open('POST', ajaxurl + '?action=scan_for_resmush', true);
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+
+			xhr.send('_ajax_nonce=' + nonceField[0].value);
+
+			return xhr;
+		},
+
+		/**
+		 * Show message (notice).
+		 *
+		 * @param {string} message
+		 * @param {string} type
+		 */
+		showNotice(message, type) {
+			if ('undefined' === typeof message) {
+				return;
+			}
+
+			const noticeMessage = `<p>${message}</p>`;
+			const noticeOptions = {
+				type: type || 'error',
+				icon: 'info',
+				dismiss: {
+					show: true,
+					label: window.wp_smush_msgs.noticeDismiss,
+					tooltip: window.wp_smush_msgs.noticeDismissTooltip,
+				},
+				autoclose: {
+					show: false,
+				},
+			};
+
+			window.SUI.openNotice(
+				'wp-smush-ajax-notice',
+				noticeMessage,
+				noticeOptions
+			);
+		},
+
+		/**
+		 * Show delete all webp success notice.
+		 */
+		maybeShowDeleteAllSuccessNotice() {
+			if (!document.getElementById('wp-smush-webp-delete-all-notice')) {
+				return;
+			}
+			const noticeMessage = `<p>${
+				document.getElementById('wp-smush-webp-delete-all-notice')
+					.dataset.message
+			}</p>`;
+
+			const noticeOptions = {
+				type: 'success',
+				icon: 'check-tick',
+				dismiss: {
+					show: true,
+				},
+			};
+
+			window.SUI.openNotice(
+				'wp-smush-webp-delete-all-notice',
+				noticeMessage,
+				noticeOptions
+			);
+		},
+	};
+
+	WP_Smush.WebP.init();
+})();

+/* global ajaxurl */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+/**
+ * WordPress dependencies
+ */
+import domReady from '@wordpress/dom-ready';
+
+/**
+ * SUI dependencies
+ */
+import { TutorialsList, TutorialsSlider } from '@wpmudev/shared-tutorials';
+
+function hideTutorials() {
+	const xhr = new XMLHttpRequest();
+
+	xhr.open('POST', ajaxurl + '?action=smush_hide_tutorials', true);
+	xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+
+	xhr.onload = () => {
+		if (200 === xhr.status) {
+			const noticeMessage = `<p>${window.wp_smush_msgs.tutorialsRemoved}</p>`,
+				noticeOptions = {
+					type: 'success',
+					icon: 'check',
+				};
+
+			window.SUI.openNotice(
+				'wp-smush-ajax-notice',
+				noticeMessage,
+				noticeOptions
+			);
+		}
+	};
+
+	xhr.send('_ajax_nonce=' + window.wp_smush_msgs.nonce);
+}
+
+/**
+ * Render the "Tutorials List" component.
+ *
+ * @since 2.8.5
+ */
+domReady(function () {
+	// Tutorials section on Dashboard page.
+	const tutorialsDiv = document.getElementById('smush-dash-tutorials');
+	if (tutorialsDiv) {
+		ReactDOM.render(
+			<TutorialsSlider
+				category="11228"
+				title={window.smush_tutorials.tutorials}
+				viewAll={window.smush_tutorials.tutorials_link}
+				onCloseClick={hideTutorials}
+			/>,
+			tutorialsDiv
+		);
+	}
+
+	// Tutorials page.
+	const tutorialsPageBox = document.getElementById('smush-box-tutorials');
+	if (tutorialsPageBox) {
+		ReactDOM.render(
+			<TutorialsList
+				category="11228"
+				title={window.smush_tutorials.tutorials}
+				translate={window.smush_tutorials.tutorials_strings}
+			/>,
+			tutorialsPageBox
+		);
+	}
+});

+/**
+ * External dependencies
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+/**
+ * WordPress dependencies
+ */
+import domReady from '@wordpress/dom-ready';
+const { __, sprintf } = wp.i18n;
+
+/**
+ * SUI dependencies
+ */
+import { Presets } from '@wpmudev/shared-presets';
+
+export const Configs = ({ isWidget }) => {
+	// TODO: Handle the html interpolation and translation better.
+	const proDescription = (
+		<>
+			{__(
+				'You can easily apply configs to multiple sites at once via ',
+				'wp-smushit'
+			)}
+			<a
+				href={window.smushReact.links.hubConfigs}
+				target="_blank"
+				rel="noreferrer"
+			>
+				{__('the Hub.')}
+			</a>
+		</>
+	);
+
+	const closeIcon = __('Close this dialog window', 'wp-smushit'),
+		cancelButton = __('Cancel', 'wp-smushit');
+
+	const lang = {
+		title: __('Preset Configs', 'wp-smushit'),
+		upload: __('Upload', 'wp-smushit'),
+		save: __('Save config', 'wp-smushit'),
+		loading: __('Updating the config list…', 'wp-smushit'),
+		emptyNotice: __(
+			'You don’t have any available config. Save preset configurations of Smush’s settings, then upload and apply them to your other sites in just a few clicks!',
+			'wp-smushit'
+		),
+		baseDescription: __(
+			'Use configs to save preset configurations of Smush’s settings, then upload and apply them to your other sites in just a few clicks!',
+			'wp-smushit'
+		),
+		proDescription,
+		syncWithHubText: __(
+			'Created or updated configs via the Hub?',
+			'wp-smushit'
+		),
+		syncWithHubButton: __('Check again', 'wp-smushit'),
+		apply: __('Apply', 'wp-smushit'),
+		download: __('Download', 'wp-smushit'),
+		edit: __('Name and Description', 'wp-smushit'),
+		delete: __('Delete', 'wp-smushit'),
+		notificationDismiss: __('Dismiss notice', 'wp-smushit'),
+		freeButtonLabel: __('Try The Hub', 'wp-smushit'),
+		defaultRequestError: sprintf(
+			/* translators: %s request status */
+			__(
+				'Request failed. Status: %s. Please reload the page and try again.',
+				'wp-smushit'
+			),
+			'{status}'
+		),
+		uploadActionSuccessMessage: sprintf(
+			/* translators: %s request status */
+			__(
+				'%s config has been uploaded successfully – you can now apply it to this site.',
+				'wp-smushit'
+			),
+			'{configName}'
+		),
+		uploadWrongPluginErrorMessage: sprintf(
+			/* translators: %s {pluginName} */
+			__(
+				'The uploaded file is not a %s Config. Please make sure the uploaded file is correct.',
+				'wp-smushit'
+			),
+			'{pluginName}'
+		),
+		applyAction: {
+			closeIcon,
+			cancelButton,
+			title: __('Apply Config', 'wp-smushit'),
+			description: sprintf(
+				/* translators: %s config name */
+				__(
+					'Are you sure you want to apply the %s config to this site? We recommend you have a backup available as your existing settings configuration will be overridden.',
+					'wp-smushit'
+				),
+				'{configName}'
+			),
+			actionButton: __('Apply', 'wp-smushit'),
+			successMessage: sprintf(
+				/* translators: %s. config name */
+				__('%s config has been applied successfully.', 'wp-smushit'),
+				'{configName}'
+			),
+		},
+		deleteAction: {
+			closeIcon,
+			cancelButton,
+			title: __('Delete Configuration File', 'wp-smushit'),
+			description: sprintf(
+				/* translators: %s config name */
+				__(
+					'Are you sure you want to delete %s? You will no longer be able to apply it to this or other connected sites.',
+					'wp-smushit'
+				),
+				'{configName}'
+			),
+			actionButton: __('Delete', 'wp-smushit'),
+		},
+		editAction: {
+			closeIcon,
+			cancelButton,
+			nameInput: __('Config name', 'wp-smushit'),
+			descriptionInput: __('Description', 'wp-smushit'),
+			emptyNameError: __('The config name is required', 'wp-smushit'),
+			actionButton: __('Save', 'wp-smushit'),
+			editTitle: __('Rename Config', 'wp-smushit'),
+			editDescription: __(
+				'Change your config name to something recognizable.',
+				'wp-smushit'
+			),
+			createTitle: __('Save Config', 'wp-smushit'),
+			createDescription: __(
+				'Save your current settings configuration. You’ll be able to then download and apply it to your other sites.',
+				'wp-smushit'
+			),
+			successMessage: sprintf(
+				/* translators: %s. config name */
+				__('%s config created successfully.', 'wp-smushit'),
+				'{configName}'
+			),
+		},
+		settingsLabels: {
+			bulk_smush: __('Bulk Smush', 'wp-smushit'),
+			integrations: __('Integrations', 'wp-smushit'),
+			lazy_load: __('Lazy Load', 'wp-smushit'),
+			cdn: __('CDN', 'wp-smushit'),
+			webp_mod: __('Local WebP', 'wp-smushit'),
+			tools: __('Tools', 'wp-smushit'),
+			settings: __('Settings', 'wp-smushit'),
+			networkwide: __('Subsite Controls', 'wp-smushit'),
+		},
+	};
+
+	return (
+		<Presets
+			isWidget={isWidget}
+			isPro={window.smushReact.isPro}
+			isWhitelabel={window.smushReact.hideBranding}
+			sourceLang={lang}
+			sourceUrls={window.smushReact.links}
+			requestsData={window.smushReact.requestsData}
+		/>
+	);
+};
+
+domReady(function () {
+	const configsPageBox = document.getElementById('smush-box-configs');
+	if (configsPageBox) {
+		ReactDOM.render(<Configs isWidget={false} />, configsPageBox);
+	}
+	const configsWidgetBox = document.getElementById('smush-widget-configs');
+	if (configsWidgetBox) {
+		ReactDOM.render(<Configs isWidget={true} />, configsWidgetBox);
+	}
+});

+/* global ajaxurl */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+/**
+ * WordPress dependencies
+ */
+import domReady from '@wordpress/dom-ready';
+
+/**
+ * Internal dependencies
+ */
+import StepsBar from '../views/webp/steps-bar';
+import StepContent from '../views/webp/step-content';
+import FreeContent from '../views/webp/free-content';
+import StepFooter from '../views/webp/step-footer';
+
+export const WebpPage = ({ smushData }) => {
+	const [currentStep, setCurrentStep] = React.useState(
+		parseInt(smushData.startStep)
+	);
+
+	React.useEffect(() => {
+		if (2 === currentStep) {
+			window.SUI.suiCodeSnippet();
+		}
+	}, [currentStep]);
+
+	const [serverType, setServerType] = React.useState(
+		smushData.detectedServer
+	);
+	const [rulesMethod, setRulesMethod] = React.useState('automatic');
+	const [rulesError, setRulesError] = React.useState(false);
+
+	const makeRequest = (action, verb = 'GET') => {
+		return new Promise((resolve, reject) => {
+			const xhr = new XMLHttpRequest();
+			xhr.open(
+				verb,
+				`${ajaxurl}?action=${action}&_ajax_nonce=${smushData.nonce}`,
+				true
+			);
+
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+
+			xhr.onload = () => {
+				if (xhr.status >= 200 && xhr.status < 300) {
+					resolve(JSON.parse(xhr.response));
+				} else {
+					reject(xhr);
+				}
+			};
+			xhr.onerror = () => reject(xhr);
+			xhr.send();
+		});
+	};
+
+	const stepContent = smushData.isPro ? (
+		<StepContent
+			currentStep={currentStep}
+			serverType={serverType}
+			rulesMethod={rulesMethod}
+			setRulesMethod={setRulesMethod}
+			rulesError={rulesError}
+			setServerType={setServerType}
+			smushData={smushData}
+			makeRequest={makeRequest}
+		/>
+	) : (
+		<FreeContent smushData={smushData} />
+	);
+
+	return (
+		<React.Fragment>
+			<div className="sui-box-body sui-no-padding">
+				<div className="sui-row-with-sidenav">
+					<StepsBar smushData={smushData} currentStep={currentStep} />
+					{stepContent}
+				</div>
+			</div>
+			{smushData.isPro && (
+				<StepFooter
+					currentStep={currentStep}
+					setCurrentStep={setCurrentStep}
+					serverType={serverType}
+					rulesMethod={rulesMethod}
+					setRulesError={setRulesError}
+					makeRequest={makeRequest}
+				/>
+			)}
+		</React.Fragment>
+	);
+};
+
+domReady(function () {
+	const webpPageBox = document.getElementById('smush-box-webp-wizard');
+	if (webpPageBox) {
+		ReactDOM.render(
+			<WebpPage smushData={window.smushReact} />,
+			webpPageBox
+		);
+	}
+});

+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+const { __ } = wp.i18n;
+
+export default ({ smushData }) => {
+	return (
+		<div className="sui-box-body">
+			<div className="sui-message">
+				<img
+					className="sui-image"
+					src={smushData.urls.freeImg}
+					alt={__('Smush WebP', 'wp-smushit')}
+				/>
+
+				<div className="sui-message-content">
+					<p>
+						{__(
+							'Fix the "Serve images in next-gen format" Google PageSpeed recommendation by setting up this feature. Serve WebP versions of your images to supported browsers, and gracefully fall back on JPEGs and PNGs for browsers that don\'t support WebP.',
+							'wp-smushit'
+						)}
+					</p>
+
+					<ol className="sui-upsell-list">
+						<li>
+							<span
+								className="sui-icon-check sui-sm"
+								aria-hidden="true"
+							/>
+							{__(
+								'Add or automatically apply the rules to enable Local WebP feature.',
+								'wp-smushit'
+							)}
+						</li>
+						<li>
+							<span
+								className="sui-icon-check sui-sm"
+								aria-hidden="true"
+							/>
+							{__(
+								'Fix “Serve images in next-gen format" Google PageSpeed recommendation.',
+								'wp-smushit'
+							)}
+						</li>
+						<li>
+							<span
+								className="sui-icon-check sui-sm"
+								aria-hidden="true"
+							/>
+							{__(
+								'Serve WebP version of images in the browsers that support it and fall back to JPEGs and PNGs for non supported browsers.',
+								'wp-smushit'
+							)}
+						</li>
+					</ol>
+
+					<p className="sui-margin-top">
+						<a
+							href={smushData.urls.upsell}
+							className="sui-button sui-button-purple"
+							style={{ marginRight: '30px' }}
+							target="_blank"
+							rel="noreferrer"
+						>
+							{__('Try WebP for free', 'wp-smushit')}
+						</a>
+						<a
+							href={smushData.urls.webpDoc}
+							style={{ color: '#8D00B1' }}
+							target="_blank"
+							rel="noreferrer"
+						>
+							{__('Learn more', 'wp-smushit')}
+						</a>
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+};

+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+const { __ } = wp.i18n;
+
+export default ({
+	currentStep,
+	setCurrentStep,
+	serverType,
+	rulesMethod,
+	setRulesError,
+	makeRequest,
+}) => {
+	const genericRequestError = __(
+		'Something went wrong with the request.',
+		'wp-smushit'
+	);
+
+	const checkStatus = () => {
+		setRulesError(false);
+
+		makeRequest('smush_webp_get_status')
+			.then((res) => {
+				if (res.success) {
+					setCurrentStep(currentStep + 1);
+				} else {
+					setRulesError(res.data);
+				}
+			})
+			.catch(() => setRulesError(genericRequestError));
+	};
+
+	const applyRules = () => {
+		setRulesError(false);
+
+		makeRequest('smush_webp_apply_htaccess_rules')
+			.then((res) => {
+				if (res.success) {
+					return checkStatus();
+				}
+
+				setRulesError(res.data);
+			})
+			.catch(() => setRulesError(genericRequestError));
+	};
+
+	const hideWizard = (e) => {
+		e.currentTarget.classList.add(
+			'sui-button-onload',
+			'sui-button-onload-text'
+		);
+		makeRequest('smush_toggle_webp_wizard').then(() => location.reload());
+	};
+
+	// Markup stuff.
+	let buttonsLeft;
+
+	const quitButton = (
+		<button
+			type="button"
+			className="sui-button sui-button-ghost"
+			onClick={hideWizard}
+		>
+			<span className="sui-loading-text">
+				<span className="sui-icon-logout" aria-hidden="true"></span>
+				<span className="sui-hidden-xs">
+					{__('Quit setup', 'wp-smushit')}
+				</span>
+				<span className="sui-hidden-sm sui-hidden-md sui-hidden-lg">
+					{__('Quit', 'wp-smushit')}
+				</span>
+			</span>
+
+			<span
+				className="sui-icon-loader sui-loading"
+				aria-hidden="true"
+			></span>
+		</button>
+	);
+
+	if (1 !== currentStep) {
+		buttonsLeft = (
+			<button
+				type="button"
+				className="sui-button sui-button-compound sui-button-ghost"
+				onClick={() => setCurrentStep(currentStep - 1)}
+			>
+				<span className="sui-compound-desktop" aria-hidden="true">
+					<span className="sui-icon-arrow-left"></span>
+					{__('Previous', 'wp-smushit')}
+				</span>
+
+				<span className="sui-compound-mobile" aria-hidden="true">
+					<span className="sui-icon-arrow-left"></span>
+				</span>
+
+				<span className="sui-screen-reader-text">
+					{__('Previous', 'wp-smushit')}
+				</span>
+			</button>
+		);
+	}
+
+	const getButtonsRight = () => {
+		if (1 === currentStep) {
+			return (
+				<button
+					type="button"
+					className="sui-button sui-button-blue sui-button-icon-right"
+					onClick={() => setCurrentStep(currentStep + 1)}
+				>
+					{__('Next', 'wp-smushit')}
+					<span
+						className="sui-icon-arrow-right"
+						aria-hidden="true"
+					></span>
+				</button>
+			);
+		}
+
+		if (2 === currentStep) {
+			if ('apache' === serverType && 'automatic' === rulesMethod) {
+				return (
+					<button
+						type="button"
+						className="sui-button sui-button-blue"
+						onClick={applyRules}
+					>
+						{__('Apply rules', 'wp-smushit')}
+					</button>
+				);
+			}
+
+			return (
+				<button
+					type="button"
+					className="sui-button sui-button-blue"
+					onClick={checkStatus}
+				>
+					{__('Check status', 'wp-smushit')}
+				</button>
+			);
+		}
+
+		return (
+			<button
+				type="button"
+				className="sui-button sui-button-blue"
+				onClick={hideWizard}
+			>
+				<span className="sui-button-text-default">
+					{__('Finish', 'wp-smushit')}
+				</span>
+
+				<span className="sui-button-text-onload">
+					<span
+						className="sui-icon-loader sui-loading"
+						aria-hidden="true"
+					></span>
+					{__('Finishing setup…', 'wp-smushit')}
+				</span>
+			</button>
+		);
+	};
+
+	return (
+		<div className="sui-box-footer">
+			<div className="sui-actions-left">
+				{quitButton}
+				{buttonsLeft}
+			</div>
+			<div className="sui-actions-right">{getButtonsRight()}</div>
+		</div>
+	);
+};

+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+const { __ } = wp.i18n;
+
+export default ({ currentStep, smushData }) => {
+	const getStepClass = (step) => {
+		const stepClass = 'smush-wizard-bar-step';
+
+		if (!smushData.isPro) {
+			return stepClass + ' disabled';
+		}
+
+		if (step > currentStep) {
+			return stepClass;
+		}
+
+		return (
+			stepClass +
+			(step === currentStep ? ' current' : ' sui-tooltip done')
+		);
+	};
+
+	const getStepNumber = (step) => {
+		return currentStep > step ? (
+			<span className="sui-icon-check" aria-hidden="true"></span>
+		) : (
+			step
+		);
+	};
+
+	const steps = [
+		{ number: 1, title: __('Server Type', 'wp-smushit') },
+		{ number: 2, title: __('Add Rules', 'wp-smushit') },
+		{ number: 3, title: __('Finish Setup', 'wp-smushit') },
+	];
+
+	return (
+		<div className="sui-sidenav">
+			<span className="smush-wizard-bar-subtitle">
+				{__('Setup', 'wp-smushit')}
+			</span>
+			<div className="smush-sidenav-title">
+				<h4>{__('Local WebP', 'wp-smushit')}</h4>
+				{!smushData.isPro && (
+					<span className="sui-tag sui-tag-pro">
+						{__('Pro', 'wp-smushit')}
+					</span>
+				)}
+			</div>
+
+			<div className="smush-wizard-steps-container">
+				<svg
+					className="smush-svg-mobile"
+					focusable="false"
+					aria-hidden="true"
+				>
+					<line
+						x1="0"
+						x2="50%"
+						stroke={1 !== currentStep ? '#1ABC9C' : '#E6E6E6'}
+					/>
+					<line
+						x1="50%"
+						x2="100%"
+						stroke={3 === currentStep ? '#1ABC9C' : '#E6E6E6'}
+					/>
+				</svg>
+				<ul>
+					{steps.map((step) => (
+						<React.Fragment key={step.number}>
+							<li
+								className={getStepClass(step.number)}
+								data-tooltip={__(
+									'This stage is already completed.',
+									'wp-smushit'
+								)}
+							>
+								<div className="smush-wizard-bar-step-number">
+									{getStepNumber(step.number)}
+								</div>
+								{step.title}
+							</li>
+							{3 !== step.number && (
+								<svg
+									data={step.number}
+									data2={currentStep}
+									className="smush-svg-desktop"
+									focusable="false"
+									aria-hidden="true"
+								>
+									<line
+										y1="0"
+										y2="40px"
+										stroke={
+											step.number < currentStep
+												? '#1ABC9C'
+												: '#E6E6E6'
+										}
+									/>
+								</svg>
+							)}
+						</React.Fragment>
+					))}
+				</ul>
+			</div>
+		</div>
+	);
+};

+@include body-class(true) {
+    &.sui-color-accessible {
+        .smush-final-log .smush-bulk-error-row {
+            box-shadow: inset 2px 0 0 0 $accessible-dark;
+            .smush-bulk-image-data:before {
+                color: $accessible-dark;
+            }
+        }
+        // Bulk Smush Fancy Tree
+        ul.fancytree-container {
+            .fancytree-selected {
+                background-color: #F8F8F8;
+                span.fancytree-checkbox {
+                    border: 1px solid $accessible-dark;
+                    background-color: $accessible-dark;
+                }
+            }
+            span.fancytree-expander:before,
+            span.fancytree-icon:before,
+            span.fancytree-title {
+                color: $accessible-dark;
+            }
+        }
+        // CDN
+        .smush-filename-extension {
+            background-color: $accessible-dark;
+        }
+        .smush-cdn-stats {
+            .sui-circle-score {
+                svg {
+                    circle:last-child {
+                        stroke: $accessible-dark;
+                    }
+                }
+            }
+        }
+        // Check images button.
+        .sui-button {
+            &.smush-button-check-success:before {
+                color: $accessible-light;
+            }
+        }
+        // Smush submit note.
+        .smush-submit-note {
+            color: $accessible-dark;
+        }
+    }
+}
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    .sui-wrap .sui-toggle-slider {
+        -ms-high-contrast-adjust: none;
+    }
+}

+// This needs to be here.
+@import "modules/variables";
+
+// Share UI styles
+@import "~@wpmudev/shared-ui/scss/functions";
+@import "~@wpmudev/shared-ui/scss/colors";
+@import "~@wpmudev/shared-ui/scss/variables";
+@import "~@wpmudev/shared-ui/scss/mixins";
+@import "~@wpmudev/shared-ui/scss/accessibility";
+@import "~@wpmudev/shared-ui/scss/animations";
+@import "~@wpmudev/shared-ui/scss/typography";
+@import "~@wpmudev/shared-ui/scss/icons";
+@import "~@wpmudev/shared-ui/scss/buttons";
+@import "~@wpmudev/shared-ui/scss/toggles";
+@import "~@wpmudev/shared-ui/scss/boxes";
+@import "~@wpmudev/shared-ui/scss/box-settings";
+@import "~@wpmudev/shared-ui/scss/layout";
+@import "~@wpmudev/shared-ui/scss/notifications";
+@import "~@wpmudev/shared-ui/scss/header";
+@import "~@wpmudev/shared-ui/scss/summary";
+@import "~@wpmudev/shared-ui/scss/list";
+@import "~@wpmudev/shared-ui/scss/tooltips";
+@import "~@wpmudev/shared-ui/scss/select2";
+@import "~@wpmudev/shared-ui/scss/tags";
+@import "~@wpmudev/shared-ui/scss/forms";
+@import "~@wpmudev/shared-ui/scss/radio-checkbox";
+@import "~@wpmudev/shared-ui/scss/tabs";;
+@import "~@wpmudev/shared-ui/scss/sidenav";
+@import "~@wpmudev/shared-ui/scss/dropdowns";
+@import "~@wpmudev/shared-ui/scss/scores";
+@import "~@wpmudev/shared-ui/scss/footer";
+@import "~@wpmudev/shared-ui/scss/progress-bars";
+@import "~@wpmudev/shared-ui/scss/modals";
+@import "~@wpmudev/shared-ui/scss/utility";
+@import "~@wpmudev/shared-ui/scss/wp-admin-notices";
+@import "~@wpmudev/shared-ui/scss/tables";
+@import "~@wpmudev/shared-ui/scss/accordions";
+// Used on lazy loading page (since 3.2.2).
+@import "~@wpmudev/shared-ui/scss/box-selectors";
+@import "~@wpmudev/shared-ui/scss/upload";
+@import "~@wpmudev/shared-ui/scss/_colorpickers.scss";
+// Upgrade page (since 3.2.3).
+@import "~@wpmudev/shared-ui/scss/upgrade-page";
+@import "~@wpmudev/shared-ui/scss/reviews";
+// Used on WebP page (since 3.8.0).
+@import "~@wpmudev/shared-ui/scss/_code-snippet.scss";
+// Upsells (since 3.9.1).
+@import "~@wpmudev/shared-ui/scss/upsells";
+
+// App styles
+@import "modules/admin";
+@import "modules/directory-smush";
+@import "modules/cdn";
+@import "modules/webp";
+
+// SUI Color Accessibility
+@import "~@wpmudev/shared-ui/scss/color-accessibility";
+@import "accessibility/color-accessibility";

+@import "variables";
+
+/**
+ * CDN styles
+ *
+ * @since 3.0
+ */
+
+@include body-class {
+
+    .sui-wrap {
+
+        .sui-box-settings-row .sui-box-settings-col-1 {
+            vertical-align: top;
+        }
+
+        &.wrap-smush-cdn .sui-block-content-center p {
+            max-width: 600px;
+            margin: 20px auto 30px;
+        }
+
+        .sui-cdn {
+            form p:first-of-type {
+                margin-top: 0;
+            }
+        }
+
+        .wp-smush-stats {
+            display: flex;
+            align-items: center;
+            line-height: 0;
+
+            .sui-tooltip {
+                line-height: 10px;
+                margin-right: 10px;
+            }
+        }
+
+        /* Filename Extensions Icons */
+        .smush-filename-extension {
+            border-radius: 4px;
+            display: inline-block;
+            font-size: 9px;
+            font-weight: 600;
+            color: #fff;
+            text-transform: uppercase;
+            text-align: center;
+            line-height: 43px;
+            height: 30px;
+            margin: 0 5px 0 0;
+            width: 30px;
+
+            &.smush-extension-jpeg,
+            &.smush-extension-jpg { background-color: #F7E100; }
+            &.smush-extension-png { background-color: #FFB694; }
+            &.smush-extension-gif { background-color: #72D5D4; }
+            &.smush-extension-webp { background-color: #72ADD5; }
+            &.smush-extension-svg { background-color: #88D572; }
+            &.smush-extension-iframe {
+                background-color: #8772D5;
+                font-size: 7px;
+            }
+        }
+    }
+
+}

+/* ****************************************************************************
+ * MEDIA AREA SCSS FILE
+ */
+@import "~@wpmudev/shared-ui/scss/functions";
+@import "~@wpmudev/shared-ui/scss/colors";
+@import "~@wpmudev/shared-ui/scss/variables";
+// Override body class
+$sui-version: 'smush-media';
+$sui-wrap-class: false;
+@import "~@wpmudev/shared-ui/scss/mixins";
+@import "~@wpmudev/shared-ui/scss/tooltips";
+
+/* ****************************************************************************
+ * MEDIA AREA STYLES
+ */
+
+// Set column width.
+.manage-column.column-smushit {
+	width: 260px;
+}
+
+// Margin for buttons.
+.sui-smush-media {
+	.button {
+		margin-right: 5px;
+		&:last-of-type {
+			margin-right: 0;
+		}
+	}
+}
+
+// Smush button loading icon.
+#ngg-listimages,
+.column-smushit {
+	.spinner {
+		float: none;
+
+		&.visible {
+			visibility: visible;
+		}
+	}
+}
+
+// Stats table.
+.sui-smush-media {
+	table.wp-smush-stats-holder {
+		width: 100%;
+		border: 1px solid #E6E6E6;
+		border-radius: 4px;
+		margin-top: 6px;
+		border-collapse: collapse;
+		border-spacing: 0;
+		thead {
+			th.smush-stats-header {
+				padding: 8px 10px;
+				border-bottom: 1px solid #E6E6E6 !important;
+				color: #32373D;
+				font-size: 12px;
+				font-weight: bold;
+				letter-spacing: -0.23px;
+				line-height: 16px;
+				text-align: left;
+			}
+		}
+		tr {
+			border: 1px solid #E6E6E6;
+		}
+		td {
+			overflow-wrap: break-word;
+			vertical-align: middle;
+			padding: 8px 10px;
+			color: #555555;
+			font-size: 11px;
+			letter-spacing: -0.21px;
+			line-height: 16px;
+			border-bottom: 1px solid #E6E6E6;
+			&:first-of-type {
+				max-width: 110px;
+				font-weight: 500;
+			}
+		}
+	}
+}
+
+// Override !important set from WordPress.
+#the-list {
+	.sui-smush-media {
+		thead {
+			th.smush-stats-header {
+				border-bottom: 1px solid #E6E6E6 !important;
+			}
+		}
+	}
+}
+
+// Responsive table for list mode.
+@media screen and (max-width: 1024px) {
+	.wp-list-table .smushit {
+		table.wp-smush-stats-holder {
+			th {
+				display: table-cell;
+				box-sizing: border-box;
+			}
+			tr td {
+				word-wrap: break-word;
+				display: table-cell !important;
+				&:first-child {
+					border-right: none;
+					box-sizing: border-box;
+				}
+				&:last-child {
+					box-sizing: border-box;
+					float: none;
+					overflow: visible;
+				}
+			}
+		}
+	}
+}
+
+// NextGen Integration.
+.iedit .wp-smush-action,
+.iedit .smush-stats-details {
+	font-size: 11px;
+}
+
+/*NextGen Gallery stats*/
+#ngg-listimages {
+	table.wp-smush-stats-holder {
+		table-layout: fixed;
+		border: 1px solid lightgray;
+		border-collapse: collapse;
+		width: 100%;
+		td,
+		th {
+			border: 1px solid #CECECE;
+		}
+	}
+	.column-7 {
+		width: 300px;
+	}
+	.spinner {
+		width: auto;
+		padding-left: 30px;
+	}
+}
+
+/** NextGen Gallery tr height, to show the progress bar properly for alternate rows **/
+.alternate.iedit {
+	height: 120px;
+}
+
+/** Allows to click on button, otherwise row-actions from NextGen interferes **/
+.wp-smush-nextgen-send {
+	position: relative;
+	z-index: 2;
+}

+/* ****************************************************************************
+ * MODULE: VARIABLES
+ */
+
+$font--path: "../fonts" !default;
+$img--path: "../images" !default;
+
+$sui-font-path: '~@wpmudev/shared-ui/dist/fonts/';
+
+$summary-image: '#{$img--path}/smush-graphic-dashboard-summary.svg';
+
+// Promo banners for free footer
+$cross-sell-1:       'hummingbird';
+$cross-sell-2:       'defender';
+$cross-sell-3:       'smartcrawl';
+
+$upgrade-image: '../../app/assets/images/hero@2x.png';
+$upgrade-image-mobile: '../../app/assets/images/hero.png';
\ No newline at end of file

+ /**
+ * Webp styles
+ *
+ * @since 3.8.0
+ */
+
+@include body-class(true) {
+
+	#smush-box-webp-webp {
+
+		.smush-webp-supported-browser {
+			height: 30px;
+			width: 30px;
+			padding: 5px;
+			margin-right: 10px;
+			border-radius: 4px;
+			background-color: #F2F2F2;
+			display: inline-block;
+
+			img {
+				height: 20px;
+				width: 20px;
+			}
+		}
+	}
+
+	#smush-box-webp-wizard {
+		.sui-row-with-sidenav {
+			margin-bottom: 0;
+
+			.sui-sidenav {
+				padding: 30px;
+				border-top-left-radius: $border-radius;
+				background-color: #F8F8F8;
+
+				.smush-wizard-bar-subtitle {
+					font-size: 11px;
+					line-height: 20px;
+					font-weight: 700;
+					color: #AAAAAA;
+					text-transform: uppercase;
+				}
+
+				.smush-sidenav-title {
+					display: flex;
+					align-items: center;
+					margin-bottom: 33px;
+
+					h4 {
+						margin: 0;
+						line-height: 20px;
+					}
+				}
+
+				.smush-wizard-steps-container {
+
+					ul {
+						margin: 0;
+
+						@include media(max-width, lg) {
+							display: flex;
+							flex-direction: row;
+							justify-content: space-between;
+						}
+					}
+
+					.smush-wizard-bar-step {
+						display: inline-block;
+						font-size: 13px;
+						color: #AAAAAA;
+						line-height: 22px;
+						font-weight: 500;
+						margin-bottom: 0;
+
+						.smush-wizard-bar-step-number {
+							display: inline-block;
+							margin-right: 10px;
+							text-align: center;
+							border-radius: 50%;
+							width: 22px;
+							height: 22px;
+							font-size: 11px;
+							background-color: #F2F2F2;
+							border: 1px solid #DDDDDD;
+
+							@include media(max-width, lg) {
+								display: block;
+								margin: 0 auto 5px auto;
+							}
+						}
+
+						&.disabled {
+							color: #DDDDDD;
+						}
+
+						&.current {
+							color: #333333;
+
+							.smush-wizard-bar-step-number {
+								background-color: #FFFFFF;
+								border-color: #333333;
+							}
+						}
+
+						&.done .smush-wizard-bar-step-number {
+							background-color: #1ABC9C;
+							border-color: #1ABC9C;
+
+							.sui-icon-check::before {
+								color: #FFFFFF;
+							}
+						}
+
+						@include media(min-width, lg) {
+							display: block;
+						}
+
+						@include media(max-width, lg) {
+							width: 70px;
+							text-align: center;
+						}
+					}
+
+					svg {
+
+						line {
+							stroke-width: 4px;
+						}
+
+						&.smush-svg-desktop {
+							height: 40px;
+							width: 22px;
+							margin-left: 10px;
+							display: none;
+
+							@include media(min-width, lg) {
+								display: block;
+							}
+						}
+
+						&.smush-svg-mobile {
+							width: 100%;
+							height: 4px;
+							display: block;
+							margin-bottom: -14px;
+							padding: 0 35px;
+
+							@include media(min-width, lg) {
+								display: none;
+							}
+						}
+					}
+				}
+
+				@include media(max-width, sm) {
+					padding: 20px;
+				}
+			}
+
+			.smush-wizard-steps-content-wrapper {
+				padding: 20px;
+
+				.smush-wizard-steps-content {
+					padding: 0 70px;
+					text-align: center;
+
+					&:first-child {
+						padding-top: 30px;
+					}
+
+					.smush-step-indicator {
+						font-size: 11px;
+						font-weight: 500;
+						color: #888888;
+					}
+
+					h2 {
+						margin: 0;
+					}
+
+					@include media(max-width, sm) {
+						padding: 0;
+					}
+				}
+
+				&.smush-wizard-step-1 {
+
+					.sui-box-selectors {
+						padding-left: 115px;
+						padding-right: 115px;
+						margin-bottom: 15px;
+					}
+				}
+
+				&.smush-wizard-step-2 {
+
+					.smush-wizard-rules-wrapper {
+						text-align: left;
+					}
+
+					.sui-tabs-menu {
+						justify-content: center;
+					}
+				}
+
+				@include media(min-width, sm) {
+					padding: 30px;
+				}
+			}
+		}
+	}
+}

+@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
+@import "modules/variables";
+$font--path: '~@wpmudev/shared-ui/dist/fonts/';
+
+@font-face {
+	font-family: "wpmudev-plugin-icons";
+	src: url('#{$font--path}/wpmudev-plugin-icons.eot?');
+	src: url('#{$font--path}/wpmudev-plugin-icons.eot?') format('embedded-opentype'),
+	 	 url('#{$font--path}/wpmudev-plugin-icons.ttf') format('truetype'),
+		 url('#{$font--path}/wpmudev-plugin-icons.woff') format('woff'),
+		 url('#{$font--path}/wpmudev-plugin-icons.woff2') format('woff2'),
+		 url('#{$font--path}/wpmudev-plugin-icons.svg') format('svg');
+	font-weight: 400;
+	font-style: normal
+}
+
+@media screen and ( max-width: 800px ) {
+	#smush-image-bar-toggle,
+	#smush-image-bar {
+		display: none;
+	}
+}
+
+@media screen and ( min-width: 800px ) {
+	.smush-detected-img {
+		border-radius: 5px;
+		transition: all 0.5s ease;
+		box-shadow: 0 0 0 5px #FECF2F;
+	}
+
+	#smush-image-bar-toggle {
+		position: fixed;
+		top: 60px;
+		right: 330px;
+		height: 50px;
+		width: 60px;
+		z-index: 9999999;
+		border-radius: 4px 0 0 4px;
+		background-color: #FFF;
+		box-shadow: inset 2px 0 0 0 #FECF2F, -13px 5px 20px 0 rgba(0, 0, 0, 0.1);
+		text-align: center;
+		cursor: pointer;
+		transition-property: all;
+		transition-duration: .5s;
+		transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+
+		&.closed {
+			right: 0;
+		}
+
+		&.smush-toggle-success {
+			box-shadow: inset 2px 0 0 0 #1abc9c, -13px 5px 20px 0 rgba(0, 0, 0, 0.1);
+		}
+
+		i.sui-icon-info,
+		i.sui-icon-loader {
+			font-family: "wpmudev-plugin-icons" !important;
+			font-style: normal;
+			font-size: 16px;
+			line-height: 50px;
+			color: #FECF2F;
+		}
+
+		i.sui-icon-info:before {
+			content: "I";
+		}
+
+		&.smush-toggle-success i.sui-icon-info {
+			color: #1abc9c;
+			&:before {
+				content: "_";
+			}
+		}
+
+		i.sui-icon-loader {
+			&:before {
+				display: block;
+				content: "N";
+				-webkit-animation: spin 1.3s linear infinite;
+						animation: spin 1.3s linear infinite;
+			}
+		}
+
+		@-webkit-keyframes spin {
+			0% {
+				-webkit-transform: rotate(0deg);
+				transform: rotate(0deg);
+			}
+			100% {
+				-webkit-transform: rotate(360deg);
+				transform: rotate(360deg);
+			}
+		}
+
+		@keyframes spin {
+			0% {
+				-webkit-transform: rotate(0deg);
+				transform: rotate(0deg);
+			}
+			100% {
+				-webkit-transform: rotate(360deg);
+				transform: rotate(360deg);
+			}
+		}
+	}
+
+	#smush-image-bar {
+		position: fixed;
+		top: 0;
+		right: 0;
+		width: 330px;
+		height: 100%;
+		background-color: #FFF;
+		box-shadow: 0 0 40px 0 rgba(0,0,0,0.1);
+		z-index: 999999;
+		padding: 0 0 20px;
+		overflow-y: auto;
+		overflow-x: hidden;
+		max-width: 330px;
+		transition-property: all;
+		transition-duration: .5s;
+		transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+
+		&.closed {
+			max-width: 0;
+			overflow-y: hidden;
+		}
+
+		h3, p, strong, span {
+			font-family: 'Roboto', sans-serif;
+			letter-spacing: -0.25px;
+		}
+
+		h3 {
+			color: #333333;
+			font-size: 15px;
+			font-weight: bold;
+			line-height: 30px;
+			background-color: #FAFAFA;
+			padding: 15px 20px;
+			margin: 0;
+		}
+
+		p {
+			color: #888888;
+			font-size: 13px;
+			line-height: 22px;
+			padding: 0 20px;
+		}
+
+		strong {
+			color: #AAAAAA;
+			font-size: 12px;
+			font-weight: bold;
+			line-height: 22px;
+			padding: 0 20px;
+		}
+
+		.smush-resize-box {
+			background-color: #F8F8F8;
+
+			&:first-of-type {
+				border-top: 1px solid #E6E6E6;
+				margin-top: 5px;
+			}
+
+			&:last-of-type {
+				margin-bottom: 20px;
+			}
+
+			span:first-of-type {
+				color: #888;
+				height: 34px;
+				width: 40px;
+				font-size: 13px;
+				font-weight: bold;
+				line-height: 32px;
+				text-align: center;
+				border: 1px solid #DDDDDD;
+				border-radius: 50%;
+				margin-right: 10px;
+			}
+
+			.smush-image-info {
+				background-color: #FFF;
+				display: flex;
+				align-items: center;
+				align-content: center;
+				justify-content: space-between;
+				padding: 17px 20px;
+				border-bottom: 1px solid #E6E6E6;
+				cursor: pointer;
+			}
+
+			.smush-front-icons {
+				margin: 0 10px;
+				line-height: 5px;
+
+				&:before {
+					font-family: "wpmudev-plugin-icons" !important;
+					speak: none;
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 400;
+					font-variant: normal;
+					text-transform: none;
+					text-rendering: auto;
+					color: #AAA;
+					-webkit-font-smoothing: antialiased;
+					-moz-osx-font-smoothing: grayscale;
+				}
+
+				&.smush-front-icon-arrows-in {
+					&:before {
+						content: '\2264';
+					}
+				}
+			}
+
+			.smush-tag {
+				background-color: #fecf2f;
+				color: #333;
+				border-radius: 13px;
+				height: 26px;
+				width: 116px;
+				font-size: 12px;
+				letter-spacing: -0.25px;
+				line-height: 16px;
+				font-weight: 500;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				&.smush-tag-success {
+					background-color: #1abc9c;
+					color: #fff;
+				}
+			}
+
+			&.smush-tooltip {
+				position: relative;
+
+				&:before,
+				&:after {
+					content: "";
+					opacity: 0;
+					backface-visibility: hidden;
+					pointer-events: none;
+					position: absolute;
+					z-index: 1;
+					transition: margin .2s, opacity .2s;
+				}
+
+				&:before {
+					border: 5px solid transparent;
+					bottom: 100%;
+					left: 50%;
+					border-top-color: #000000;
+					transform: translateX(-50%);
+				}
+
+				&:after {
+					content: attr(data-tooltip);
+					min-width: 40px;
+					padding: 8px 12px;
+					border-radius: 4px;
+					background: #000000;
+					box-sizing: border-box;
+					color: #FFFFFF;
+					font: 400 12px/18px "Roboto", Arial, sans-serif;
+					text-transform: none;
+					text-align: center;
+					white-space: nowrap;
+					bottom: 100%;
+					left: 50%;
+					margin: 0 0 10px;
+					transform: translateX(-50%);
+				}
+
+				&.smush-tooltip-constrained {
+					&:after {
+						min-width: 240px;
+						white-space: normal;
+					}
+				}
+
+				&:not(.show-description):hover {
+					&:before,
+					&:after {
+						opacity: 1;
+					}
+				}
+			}
+
+			&:not(.show-description):hover,
+			&.show-description {
+				.smush-image-info { background-color: #F8F8F8; }
+
+				span:first-of-type {
+					background-color: #E6E6E6;
+					color: transparent;
+					&:before {
+						font-family: "wpmudev-plugin-icons" !important;
+						font-weight: 400;
+						content: "";
+						color: #666;
+						margin-right: -7px;
+					}
+				}
+			}
+
+			.smush-image-description {
+				display: none;
+				border-radius: 4px;
+				background-color: #FFFFFF;
+				box-shadow: 0 2px 0 0 #DDDDDD;
+				margin: 0 20px 20px;
+				padding: 20px;
+				color: #888888;
+				font-family: 'Roboto', sans-serif;
+				font-size: 13px;
+				letter-spacing: -0.25px;
+				line-height: 22px;
+			}
+
+			&.show-description {
+				padding-bottom: 1px;
+				border-bottom: 1px solid #E6E6E6;
+
+				.smush-image-info { border-bottom: 0; }
+				.smush-image-description { display: block; }
+
+				span:first-of-type {
+					background-color: #FECF2F;
+					border-color: #FECF2F;
+					&:before { color: #333; }
+				}
+			}
+		}
+
+		#smush-image-bar-notice {
+			display: none;
+			margin: 20px;
+			border: 1px solid #E6E6E6;
+			border-left: 2px solid #1abc9c;
+			border-radius: 4px;
+			padding: 15px 20px 15px 25px;
+
+			p:before {
+				position: absolute;
+				left: 42px;
+				font-family: "wpmudev-plugin-icons" !important;
+				font-weight: 400;
+				content: "_";
+				color: #1abc9c;
+				margin-right: -7px;
+			}
+		}
+	}
+}

+@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);
+@font-face{font-family:"wpmudev-plugin-icons";src:url(../fonts/wpmudev-plugin-icons.eot);src:url(../fonts/wpmudev-plugin-icons.eot) format("embedded-opentype"),url(../fonts/wpmudev-plugin-icons.ttf) format("truetype"),url(../fonts/wpmudev-plugin-icons.woff) format("woff"),url(../fonts/wpmudev-plugin-icons.woff2) format("woff2"),url(../fonts/wpmudev-plugin-icons.svg) format("svg");font-weight:400;font-style:normal}@media screen and (max-width: 800px){#smush-image-bar-toggle,#smush-image-bar{display:none}}@media screen and (min-width: 800px){.smush-detected-img{border-radius:5px;transition:all 0.5s ease;box-shadow:0 0 0 5px #FECF2F}#smush-image-bar-toggle{position:fixed;top:60px;right:330px;height:50px;width:60px;z-index:9999999;border-radius:4px 0 0 4px;background-color:#FFF;box-shadow:inset 2px 0 0 0 #FECF2F,-13px 5px 20px 0 rgba(0,0,0,0.1);text-align:center;cursor:pointer;transition-property:all;transition-duration:.5s;transition-timing-function:cubic-bezier(0, 1, 0.5, 1)}#smush-image-bar-toggle.closed{right:0}#smush-image-bar-toggle.smush-toggle-success{box-shadow:inset 2px 0 0 0 #1abc9c,-13px 5px 20px 0 rgba(0,0,0,0.1)}#smush-image-bar-toggle i.sui-icon-info,#smush-image-bar-toggle i.sui-icon-loader{font-family:"wpmudev-plugin-icons" !important;font-style:normal;font-size:16px;line-height:50px;color:#FECF2F}#smush-image-bar-toggle i.sui-icon-info:before{content:"I"}#smush-image-bar-toggle.smush-toggle-success i.sui-icon-info{color:#1abc9c}#smush-image-bar-toggle.smush-toggle-success i.sui-icon-info:before{content:"_"}#smush-image-bar-toggle i.sui-icon-loader:before{display:block;content:"N";animation:spin 1.3s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}#smush-image-bar{position:fixed;top:0;right:0;width:330px;height:100%;background-color:#FFF;box-shadow:0 0 40px 0 rgba(0,0,0,0.1);z-index:999999;padding:0 0 20px;overflow-y:auto;overflow-x:hidden;max-width:330px;transition-property:all;transition-duration:.5s;transition-timing-function:cubic-bezier(0, 1, 0.5, 1)}#smush-image-bar.closed{max-width:0;overflow-y:hidden}#smush-image-bar h3,#smush-image-bar p,#smush-image-bar strong,#smush-image-bar span{font-family:'Roboto', sans-serif;letter-spacing:-0.25px}#smush-image-bar h3{color:#333333;font-size:15px;font-weight:bold;line-height:30px;background-color:#FAFAFA;padding:15px 20px;margin:0}#smush-image-bar p{color:#888888;font-size:13px;line-height:22px;padding:0 20px}#smush-image-bar strong{color:#AAAAAA;font-size:12px;font-weight:bold;line-height:22px;padding:0 20px}#smush-image-bar .smush-resize-box{background-color:#F8F8F8}#smush-image-bar .smush-resize-box:first-of-type{border-top:1px solid #E6E6E6;margin-top:5px}#smush-image-bar .smush-resize-box:last-of-type{margin-bottom:20px}#smush-image-bar .smush-resize-box span:first-of-type{color:#888;height:34px;width:40px;font-size:13px;font-weight:bold;line-height:32px;text-align:center;border:1px solid #DDDDDD;border-radius:50%;margin-right:10px}#smush-image-bar .smush-resize-box .smush-image-info{background-color:#FFF;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;-ms-flex-pack:justify;justify-content:space-between;padding:17px 20px;border-bottom:1px solid #E6E6E6;cursor:pointer}#smush-image-bar .smush-resize-box .smush-front-icons{margin:0 10px;line-height:5px}#smush-image-bar .smush-resize-box .smush-front-icons:before{font-family:"wpmudev-plugin-icons" !important;speak:none;font-size:12px;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;text-rendering:auto;color:#AAA;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#smush-image-bar .smush-resize-box .smush-front-icons.smush-front-icon-arrows-in:before{content:'\2264'}#smush-image-bar .smush-resize-box .smush-tag{background-color:#fecf2f;color:#333;border-radius:13px;height:26px;width:116px;font-size:12px;letter-spacing:-0.25px;line-height:16px;font-weight:500;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}#smush-image-bar .smush-resize-box .smush-tag.smush-tag-success{background-color:#1abc9c;color:#fff}#smush-image-bar .smush-resize-box.smush-tooltip{position:relative}#smush-image-bar .smush-resize-box.smush-tooltip:before,#smush-image-bar .smush-resize-box.smush-tooltip:after{content:"";opacity:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:none;position:absolute;z-index:1;transition:margin .2s, opacity .2s}#smush-image-bar .smush-resize-box.smush-tooltip:before{border:5px solid transparent;bottom:100%;left:50%;border-top-color:#000000;transform:translateX(-50%)}#smush-image-bar .smush-resize-box.smush-tooltip:after{content:attr(data-tooltip);min-width:40px;padding:8px 12px;border-radius:4px;background:#000000;box-sizing:border-box;color:#FFFFFF;font:400 12px/18px "Roboto", Arial, sans-serif;text-transform:none;text-align:center;white-space:nowrap;bottom:100%;left:50%;margin:0 0 10px;transform:translateX(-50%)}#smush-image-bar .smush-resize-box.smush-tooltip.smush-tooltip-constrained:after{min-width:240px;white-space:normal}#smush-image-bar .smush-resize-box.smush-tooltip:not(.show-description):hover:before,#smush-image-bar .smush-resize-box.smush-tooltip:not(.show-description):hover:after{opacity:1}#smush-image-bar .smush-resize-box:not(.show-description):hover .smush-image-info,#smush-image-bar .smush-resize-box.show-description .smush-image-info{background-color:#F8F8F8}#smush-image-bar .smush-resize-box:not(.show-description):hover span:first-of-type,#smush-image-bar .smush-resize-box.show-description span:first-of-type{background-color:#E6E6E6;color:transparent}#smush-image-bar .smush-resize-box:not(.show-description):hover span:first-of-type:before,#smush-image-bar .smush-resize-box.show-description span:first-of-type:before{font-family:"wpmudev-plugin-icons" !important;font-weight:400;content:"";color:#666;margin-right:-7px}#smush-image-bar .smush-resize-box .smush-image-description{display:none;border-radius:4px;background-color:#FFFFFF;box-shadow:0 2px 0 0 #DDDDDD;margin:0 20px 20px;padding:20px;color:#888888;font-family:'Roboto', sans-serif;font-size:13px;letter-spacing:-0.25px;line-height:22px}#smush-image-bar .smush-resize-box.show-description{padding-bottom:1px;border-bottom:1px solid #E6E6E6}#smush-image-bar .smush-resize-box.show-description .smush-image-info{border-bottom:0}#smush-image-bar .smush-resize-box.show-description .smush-image-description{display:block}#smush-image-bar .smush-resize-box.show-description span:first-of-type{background-color:#FECF2F;border-color:#FECF2F}#smush-image-bar .smush-resize-box.show-description span:first-of-type:before{color:#333}#smush-image-bar #smush-image-bar-notice{display:none;margin:20px;border:1px solid #E6E6E6;border-left:2px solid #1abc9c;border-radius:4px;padding:15px 20px 15px 25px}#smush-image-bar #smush-image-bar-notice p:before{position:absolute;left:42px;font-family:"wpmudev-plugin-icons" !important;font-weight:400;content:"_";color:#1abc9c;margin-right:-7px}}
+
+
+/*# sourceMappingURL=smush-rd.min.css.map*/
\ No newline at end of file

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1160px" height="282px" viewBox="0 0 1160 282" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 63.1 (101010) - https://sketch.com -->
+    <title>746CD678-3498-40DD-881C-3BDFFD316D52@3x</title>
+    <desc>Created with sketchtool.</desc>
+    <defs>
+        <path d="M45.2434076,1.09077368 L209.345,278.415757 L15.8088163,278.420668 C5.52850892,245.342422 0,210.243077 0,173.88174 C0,111.246765 16.4044688,52.3564314 45.2434076,1.09077368 Z M735,173.88174 C735,210.242944 729.471531,245.342166 719.191296,278.420305 L521.611,278.415757 L686.362,0.000757320254 L689.140534,0.000128493021 C718.361795,51.5204993 735,110.802121 735,173.88174 Z" id="path-1"></path>
+    </defs>
+    <g id="Bulk-Smush" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Free-/-Bulk-Smush---Large-screen" transform="translate(-410.000000, -242.000000)">
+            <g id="Body" transform="translate(410.000000, 0.000000)">
+                <g id="Bulk-Smush-/-Advanced-Settings---Free-Upsell-widget-large-screen" transform="translate(0.000000, 183.000000)">
+                    <g id="Graphic/widget-background-smush-icon" transform="translate(0.000000, 59.225748)">
+                        <rect id="Rectangle" fill="#F6F6F6" x="0" y="1" width="1160" height="280.395286"></rect>
+                        <rect id="Rectangle" fill="#FAFAFA" x="259" y="1" width="642" height="280.395286"></rect>
+                        <rect id="Rectangle" fill="#FFFFFF" transform="translate(580.000000, 0.506346) scale(1, -1) translate(-580.000000, -0.506346) " x="0" y="0.0126926564" width="1160" height="1"></rect>
+                        <g id="smush-icon-background" transform="translate(216.000000, 1.987307)">
+                            <g id="Combined-Shape">
+                                <mask id="mask-2" fill="white">
+                                    <use xlink:href="#path-1"></use>
+                                </mask>
+                                <use fill="#F6F6F6" xlink:href="#path-1"></use>
+                            </g>
+                            <polygon id="Rectangle" fill="#EAEAEA" opacity="0.364653088" points="244 80.3950266 491 80.3950266 367.5 279.407978"></polygon>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file