From 1a1cf3dfcade845e6e5f4f7ec81b619487493538 Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Wed, 3 Mar 2021 12:16:46 +0100
Subject: [PATCH 01/22] introduce StarRating component

---
 apps/components/ComponentsExample.js          | 11 ++++++-
 packages/components/src/index.js              |  1 +
 .../components/src/star-rating/StarRating.js  | 30 +++++++++++++++++++
 packages/components/src/star-rating/index.js  |  3 ++
 .../src/star-rating/star-rating.css           | 23 ++++++++++++++
 5 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/src/star-rating/StarRating.js
 create mode 100644 packages/components/src/star-rating/index.js
 create mode 100644 packages/components/src/star-rating/star-rating.css

diff --git a/apps/components/ComponentsExample.js b/apps/components/ComponentsExample.js
index 5a450da704..f5947a0a02 100644
--- a/apps/components/ComponentsExample.js
+++ b/apps/components/ComponentsExample.js
@@ -1,6 +1,6 @@
 import { __ } from "@wordpress/i18n";
 
-import { Alert, CourseDetails, FullHeightCard, Warning } from "@yoast/components";
+import { Alert, CourseDetails, FullHeightCard, StarRating, Warning } from "@yoast/components";
 import { getCourseFeed, getDirectionalStyle, makeOutboundLink } from "@yoast/helpers";
 import React from "react";
 import styled from "styled-components";
@@ -138,6 +138,12 @@ export default class ComponentsExample extends React.Component {
 		</Alert>;
 	}
 
+	updateStars( event ) {
+		this.setState({
+			input: event.target.value
+		} );
+	}
+
 	/**
 	 * Renders all the Component examples.
 	 *
@@ -171,6 +177,9 @@ export default class ComponentsExample extends React.Component {
 							<p key="2">This spans to multiple lines.</p>,
 						] }
 					/>
+					<h2>Star rating</h2>
+					<i>Accepts a rating from 0-5 and colors the stars yellow accordingly</i>
+					<StarRating rating={ 3.5 } />
 					<h2>Outbound links</h2>
 					<p>
 						<NonYoastLink href="http://www.example.org">example.org</NonYoastLink>
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 977f70b6cc..095e062db1 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -12,6 +12,7 @@ export * from "./inputs";
 export * from "./insights-card";
 export * from "./radiobutton";
 export * from "./select";
+export * from "./star-rating";
 export * from "./help-icon";
 export * from "./tables";
 
diff --git a/packages/components/src/star-rating/StarRating.js b/packages/components/src/star-rating/StarRating.js
new file mode 100644
index 0000000000..0a8ec751ce
--- /dev/null
+++ b/packages/components/src/star-rating/StarRating.js
@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+/**
+ * Renders StarRating component.
+ *
+ * @param {Object} props The props.
+ *
+ * @returns {React.Component} The StarRating Component.
+ */
+function StarRating( props ) {
+	const ratingPercentage = props.rating * 20;
+
+	return (
+		<div
+			ariaHidden="true"
+			className="yoast-star-rating"
+		>
+			<span className="yoast-star-rating__placeholder" role="img">
+				<span className="yoast-star-rating__fill" style={ { width: ratingPercentage + "%" } } />
+			</span>
+		</div>
+	);
+}
+
+export default StarRating;
+
+StarRating.propTypes = {
+	rating: PropTypes.number.isRequired,
+};
diff --git a/packages/components/src/star-rating/index.js b/packages/components/src/star-rating/index.js
new file mode 100644
index 0000000000..de1e9a1feb
--- /dev/null
+++ b/packages/components/src/star-rating/index.js
@@ -0,0 +1,3 @@
+import "./star-rating.css";
+
+export { default as StarRating } from "./StarRating.js";
diff --git a/packages/components/src/star-rating/star-rating.css b/packages/components/src/star-rating/star-rating.css
new file mode 100644
index 0000000000..605e49f3af
--- /dev/null
+++ b/packages/components/src/star-rating/star-rating.css
@@ -0,0 +1,23 @@
+.yoast-star-rating {
+	width: 65px;
+	height: 13px;
+}
+
+.yoast-star-rating span {
+	height: 100%;
+	width: 100%;
+	background-size: 13px 12px;
+	background-repeat: repeat-x;
+}
+
+.yoast-star-rating__placeholder {
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAmCAQAAAAYCMGrAAAA+klEQVR4AcWV4cbtMBBFF0MIVUopoVSrhDDv/3gf/RFRpzdNOty1HiBO99mzeYWgCMZMKCPGrCgrxiSUhCkDeukxJKCXAUMiehkxw6FZhxEzmp0x4kCzByYISqlYdal0supS6WrVpdLEK0YSamJiJOPY0c/uOG4s6CcXfuKJaJcRzyNCQJsNiF1sRTR1hP11NNJ8RCrONOPRf+r7J+TZgQ5CNfMOYvW/2YxDqzqA/57+gVY9eiakrnyZEGXDsaE3p/4JScwPX3rtnZATDxnPWT7X16XAHaH8HWNrlxJD9TyGti5tCM84zpZe+RxNjeX9tZqLaGoMxN/P/wHP5Vw+8ZxnEQAAAABJRU5ErkJggg==);
+	display: inline-block;
+	overflow: hidden;
+	position: relative;
+}
+
+.yoast-star-rating__fill {
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAmBAMAAABALxQTAAAAFVBMVEVMaXH4twP4twP4twP4twP4twP4twP7w8S/AAAAB3RSTlMAFv5uPpvQloUsTQAAAMFJREFUeAGE0TEOgzAMQFEXoDNiYC6/wFxxAsTADDkB5f6HqNRENXUi8TYiRfnY8lNXkjBOkuBWSeAhsYJOYiW9xO4MEqshkTbCSyIH7GLdgFasHHgmwkikZQD6OROZRG4Hxju8o/TNhbNhCqkOxaZDVKdxNnq/EjUS/A2o0PuXpyVeb9bjDWY9QSWXDQfBbtbjtWY9bM4sqfx+5yYt8wNcAFEzrGGkk5668KsFrKewPtQ3aFqh8WOnYZ+lIBQkgykAWk8rlAqcHfQAAAAASUVORK5CYII=);
+	display: block;
+}

From 7109bf85f7c09714a38f28f0915d843c59a6b42b Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Tue, 16 Mar 2021 12:08:52 +0100
Subject: [PATCH 02/22] Introduce ProductData components

---
 .../src/snippet-preview/ProductDataDesktop.js | 31 ++++++++++++++
 .../src/snippet-preview/ProductDataMobile.js  | 42 +++++++++++++++++++
 .../src/snippet-preview/SnippetPreview.js     | 39 +++++++++++++++++
 .../src/snippet-preview/product-data.css      |  8 ++++
 4 files changed, 120 insertions(+)
 create mode 100644 packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
 create mode 100644 packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
 create mode 100644 packages/search-metadata-previews/src/snippet-preview/product-data.css

diff --git a/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js b/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
new file mode 100644
index 0000000000..54eae04b3f
--- /dev/null
+++ b/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
@@ -0,0 +1,31 @@
+import React, { Fragment } from "react";
+import PropTypes from "prop-types";
+import { StarRating } from "@yoast/components";
+import "./product-data.css";
+
+/**
+ * Renders ProductData component.
+ *
+ * @param {Object} props The props.
+ *
+ * @returns {React.Component} The StarRating Component.
+ */
+function ProductDataDesktop( props ) {
+	const { shoppingData } = props;
+
+	return (
+		<Fragment>
+			<StarRating rating={ shoppingData.rating } />
+			<span>Rating: { shoppingData.rating * 2 }/10</span> · ‎
+			<span>{ shoppingData.reviewCount } reviews</span> · ‎
+			<span dangerouslySetInnerHTML={ { __html: shoppingData.price } } /> · ‎
+			<span>{ shoppingData.availability }</span>
+		</Fragment>
+	);
+}
+
+export default ProductDataDesktop;
+
+ProductDataDesktop.propTypes = {
+	shoppingData: PropTypes.object.isRequired,
+};
diff --git a/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js b/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
new file mode 100644
index 0000000000..0387380f95
--- /dev/null
+++ b/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
@@ -0,0 +1,42 @@
+import React, { Fragment } from "react";
+import PropTypes from "prop-types";
+import { StarRating } from "@yoast/components";
+import "./product-data.css";
+
+/**
+ * Renders ProductData component.
+ *
+ * @param {Object} props The props.
+ *
+ * @returns {React.Component} The StarRating Component.
+ */
+function ProductDataMobile( props ) {
+	const { shoppingData } = props;
+
+	return (
+		<Fragment>
+			<div className="yoast-shopping-data-preview__column">
+				<div className="yoast-shopping-data-preview__upper">Rating</div>
+				<div className="yoast-shopping-data-preview__lower">
+					<span>{ shoppingData.rating * 2 }/10</span>
+					<StarRating rating={ shoppingData.rating } />
+					<span>{ shoppingData.reviewCount }</span>
+				</div>
+			</div>
+			<div className="yoast-shopping-data-preview__column">
+				<div className="yoast-shopping-data-preview__upper">Price</div>
+				<div className="yoast-shopping-data-preview__lower" dangerouslySetInnerHTML={ { __html: shoppingData.price } } />
+			</div>
+			<div className="yoast-shopping-data-preview__column">
+				<div className="yoast-shopping-data-preview__upper">Availability</div>
+				<div className="yoast-shopping-data-preview__lower">{ shoppingData.availability }</div>
+			</div>
+		</Fragment>
+	);
+}
+
+export default ProductDataMobile;
+
+ProductDataMobile.propTypes = {
+	shoppingData: PropTypes.object.isRequired,
+};
diff --git a/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js b/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
index 21e3066236..579e4b9a20 100644
--- a/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
+++ b/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
@@ -21,6 +21,8 @@ const {
 
 // Internal dependencies.
 import FixedWidthContainer from "./FixedWidthContainer";
+import ProductDataDesktop from "./ProductDataDesktop";
+import ProductDataMobile from "./ProductDataMobile";
 import { DEFAULT_MODE, MODE_DESKTOP, MODE_MOBILE, MODES } from "./constants";
 
 /*
@@ -729,6 +731,30 @@ export default class SnippetPreview extends PureComponent {
 		return null;
 	}
 
+	/**
+	 * Renders the product / shopping data, in mobile or desktop view, based on the mode.
+	 *
+	 * @returns {ReactElement} The rendered description.
+	 */
+	renderProductData() {
+		const {	mode, shoppingData } = this.props;
+
+		if ( mode === MODE_DESKTOP && shoppingData !== null ) {
+			return (
+				<ProductDataDesktop
+					shoppingData={ shoppingData }
+				/>
+			);
+		} else if ( mode === MODE_MOBILE && shoppingData !== null ) {
+			return (
+				<ProductDataMobile
+					shoppingData={ shoppingData }
+				/>
+			);
+		}
+		return null;
+	}
+
 	/**
 	 * Renders the snippet preview.
 	 *
@@ -792,12 +818,24 @@ export default class SnippetPreview extends PureComponent {
 						{ isDesktopMode && this.renderUrl() }
 						{ downArrow }
 					</PartContainer>
+					<PartContainer className="yoast-shopping-data-preview--desktop">
+						<ScreenReaderText>
+							{ __( "Shopping data preview", "yoast-components" ) + ":" }
+						</ScreenReaderText>
+						{ isDesktopMode && this.renderProductData() }
+					</PartContainer>
 					<PartContainer>
 						<ScreenReaderText>
 							{ __( "Meta description preview", "yoast-components" ) + ":" }
 						</ScreenReaderText>
 						{ this.renderDescription() }
 					</PartContainer>
+					<PartContainer className="yoast-shopping-data-preview--mobile">
+						<ScreenReaderText>
+							{ __( "Shopping data preview", "yoast-components" ) + ":" }
+						</ScreenReaderText>
+						{ ! isDesktopMode && this.renderProductData() }
+					</PartContainer>
 				</Container>
 			</section>
 		);
@@ -846,6 +884,7 @@ SnippetPreview.propTypes = {
 	isAmp: PropTypes.bool,
 	faviconSrc: PropTypes.string,
 	mobileImageSrc: PropTypes.string,
+	shoppingData: PropTypes.object.isRequired,
 
 	onMouseUp: PropTypes.func.isRequired,
 	onHover: PropTypes.func,
diff --git a/packages/search-metadata-previews/src/snippet-preview/product-data.css b/packages/search-metadata-previews/src/snippet-preview/product-data.css
new file mode 100644
index 0000000000..1649403bf7
--- /dev/null
+++ b/packages/search-metadata-previews/src/snippet-preview/product-data.css
@@ -0,0 +1,8 @@
+.yoast-shopping-data-preview--desktop {
+	display: flex;
+	color: var(--yoast-color-inactive-text);
+}
+
+.yoast-shopping-data-preview--desktop .yoast-star-rating {
+	margin-right: 0.4em;
+}

From bb1398e6e3e094be5f32c5d82f48a53a27e61651 Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Tue, 16 Mar 2021 12:09:28 +0100
Subject: [PATCH 03/22] pass shoppingData to Preview

---
 .../src/snippet-editor/SnippetEditor.js                        | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/search-metadata-previews/src/snippet-editor/SnippetEditor.js b/packages/search-metadata-previews/src/snippet-editor/SnippetEditor.js
index 3897117897..062fda44c6 100644
--- a/packages/search-metadata-previews/src/snippet-editor/SnippetEditor.js
+++ b/packages/search-metadata-previews/src/snippet-editor/SnippetEditor.js
@@ -518,6 +518,7 @@ class SnippetEditor extends React.Component {
 			faviconSrc,
 			mobileImageSrc,
 			idSuffix,
+			shoppingData,
 		} = this.props;
 
 		const {
@@ -556,6 +557,7 @@ class SnippetEditor extends React.Component {
 						locale={ locale }
 						faviconSrc={ faviconSrc }
 						mobileImageSrc={ mobileImageSrc }
+						shoppingData={ shoppingData }
 						{ ...mappedData }
 					/>
 
@@ -601,6 +603,7 @@ SnippetEditor.propTypes = {
 	faviconSrc: PropTypes.string,
 	mobileImageSrc: PropTypes.string,
 	idSuffix: PropTypes.string,
+	shoppingData: PropTypes.object.isRequired,
 };
 
 SnippetEditor.defaultProps = {

From 96d74c365c4f9e16977a3bb8b03d948fd78bf360 Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Tue, 16 Mar 2021 12:09:47 +0100
Subject: [PATCH 04/22] update export

---
 packages/search-metadata-previews/src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/search-metadata-previews/src/index.js b/packages/search-metadata-previews/src/index.js
index 93e159e089..f6eab82630 100644
--- a/packages/search-metadata-previews/src/index.js
+++ b/packages/search-metadata-previews/src/index.js
@@ -1,7 +1,7 @@
 // Snippet preview exports.
 export { default as FixedWidthContainer } from "./snippet-preview/FixedWidthContainer";
 export { default as HelpTextWrapper } from "./snippet-preview/HelpTextWrapper";
-export { default as SnippetPreview } from "./snippet-preview/SnippetPreview";
+export * from "./snippet-preview/SnippetPreview";
 
 // Snippet editor exports.
 export {

From b279617a3baf2f690768acdde055f76855489afd Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Tue, 16 Mar 2021 12:10:01 +0100
Subject: [PATCH 05/22] fix typo

---
 packages/components/src/star-rating/StarRating.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/star-rating/StarRating.js b/packages/components/src/star-rating/StarRating.js
index 0a8ec751ce..8fbad23f12 100644
--- a/packages/components/src/star-rating/StarRating.js
+++ b/packages/components/src/star-rating/StarRating.js
@@ -13,7 +13,7 @@ function StarRating( props ) {
 
 	return (
 		<div
-			ariaHidden="true"
+			aria-hidden="true"
 			className="yoast-star-rating"
 		>
 			<span className="yoast-star-rating__placeholder" role="img">

From 7046bee1d316799f15f562a120e0e7ea892de134 Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Wed, 17 Mar 2021 16:32:14 +0100
Subject: [PATCH 06/22] add translations

---
 .../src/snippet-preview/ProductDataDesktop.js              | 5 +++--
 .../src/snippet-preview/ProductDataMobile.js               | 7 ++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js b/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
index 54eae04b3f..1984cb77fd 100644
--- a/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
+++ b/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
@@ -2,6 +2,7 @@ import React, { Fragment } from "react";
 import PropTypes from "prop-types";
 import { StarRating } from "@yoast/components";
 import "./product-data.css";
+import { __ } from "@wordpress/i18n";
 
 /**
  * Renders ProductData component.
@@ -16,8 +17,8 @@ function ProductDataDesktop( props ) {
 	return (
 		<Fragment>
 			<StarRating rating={ shoppingData.rating } />
-			<span>Rating: { shoppingData.rating * 2 }/10</span> · ‎
-			<span>{ shoppingData.reviewCount } reviews</span> · ‎
+			<span>{ __( "Rating: ", "yoast-components" ) + shoppingData.rating * 2 }/10</span> · ‎
+			<span>{ shoppingData.reviewCount + __( "Rating: ", "yoast-components" ) } reviews</span> · ‎
 			<span dangerouslySetInnerHTML={ { __html: shoppingData.price } } /> · ‎
 			<span>{ shoppingData.availability }</span>
 		</Fragment>
diff --git a/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js b/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
index 0387380f95..2caa197eb6 100644
--- a/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
+++ b/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
@@ -2,6 +2,7 @@ import React, { Fragment } from "react";
 import PropTypes from "prop-types";
 import { StarRating } from "@yoast/components";
 import "./product-data.css";
+import { __ } from "@wordpress/i18n";
 
 /**
  * Renders ProductData component.
@@ -16,7 +17,7 @@ function ProductDataMobile( props ) {
 	return (
 		<Fragment>
 			<div className="yoast-shopping-data-preview__column">
-				<div className="yoast-shopping-data-preview__upper">Rating</div>
+				<div className="yoast-shopping-data-preview__upper">{ __( "Rating", "yoast-components" ) }</div>
 				<div className="yoast-shopping-data-preview__lower">
 					<span>{ shoppingData.rating * 2 }/10</span>
 					<StarRating rating={ shoppingData.rating } />
@@ -24,11 +25,11 @@ function ProductDataMobile( props ) {
 				</div>
 			</div>
 			<div className="yoast-shopping-data-preview__column">
-				<div className="yoast-shopping-data-preview__upper">Price</div>
+				<div className="yoast-shopping-data-preview__upper">{ __( "Price", "yoast-components" ) }</div>
 				<div className="yoast-shopping-data-preview__lower" dangerouslySetInnerHTML={ { __html: shoppingData.price } } />
 			</div>
 			<div className="yoast-shopping-data-preview__column">
-				<div className="yoast-shopping-data-preview__upper">Availability</div>
+				<div className="yoast-shopping-data-preview__upper">{ __( "Availability", "yoast-components" ) }</div>
 				<div className="yoast-shopping-data-preview__lower">{ shoppingData.availability }</div>
 			</div>
 		</Fragment>

From b01ce11f6fdf92776db5719c01dc69f465f2b08f Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Wed, 17 Mar 2021 16:32:45 +0100
Subject: [PATCH 07/22] remove non-functioning stylesheet

---
 .../src/snippet-preview/ProductDataDesktop.js             | 1 -
 .../src/snippet-preview/ProductDataMobile.js              | 1 -
 .../src/snippet-preview/product-data.css                  | 8 --------
 3 files changed, 10 deletions(-)
 delete mode 100644 packages/search-metadata-previews/src/snippet-preview/product-data.css

diff --git a/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js b/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
index 1984cb77fd..cca2a007ef 100644
--- a/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
+++ b/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
@@ -1,7 +1,6 @@
 import React, { Fragment } from "react";
 import PropTypes from "prop-types";
 import { StarRating } from "@yoast/components";
-import "./product-data.css";
 import { __ } from "@wordpress/i18n";
 
 /**
diff --git a/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js b/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
index 2caa197eb6..c5876f07a0 100644
--- a/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
+++ b/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
@@ -1,7 +1,6 @@
 import React, { Fragment } from "react";
 import PropTypes from "prop-types";
 import { StarRating } from "@yoast/components";
-import "./product-data.css";
 import { __ } from "@wordpress/i18n";
 
 /**
diff --git a/packages/search-metadata-previews/src/snippet-preview/product-data.css b/packages/search-metadata-previews/src/snippet-preview/product-data.css
deleted file mode 100644
index 1649403bf7..0000000000
--- a/packages/search-metadata-previews/src/snippet-preview/product-data.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.yoast-shopping-data-preview--desktop {
-	display: flex;
-	color: var(--yoast-color-inactive-text);
-}
-
-.yoast-shopping-data-preview--desktop .yoast-star-rating {
-	margin-right: 0.4em;
-}

From 9eacdd43b8b985e907ab76a69e57819c5148e783 Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Mon, 22 Mar 2021 16:18:44 +0100
Subject: [PATCH 08/22] Restructure and styling

---
 .../src/star-rating/star-rating.css           |  3 +-
 .../src/snippet-preview/ProductDataDesktop.js | 32 ++++++--
 .../src/snippet-preview/ProductDataMobile.js  | 75 ++++++++++++++-----
 3 files changed, 83 insertions(+), 27 deletions(-)

diff --git a/packages/components/src/star-rating/star-rating.css b/packages/components/src/star-rating/star-rating.css
index 605e49f3af..a8874624a3 100644
--- a/packages/components/src/star-rating/star-rating.css
+++ b/packages/components/src/star-rating/star-rating.css
@@ -1,6 +1,7 @@
 .yoast-star-rating {
 	width: 65px;
-	height: 13px;
+	height: 12px;
+	display: inline-block;
 }
 
 .yoast-star-rating span {
diff --git a/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js b/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
index cca2a007ef..d3d95aa554 100644
--- a/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
+++ b/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
@@ -1,7 +1,16 @@
 import React, { Fragment } from "react";
 import PropTypes from "prop-types";
-import { StarRating } from "@yoast/components";
+import styled from "styled-components";
 import { __ } from "@wordpress/i18n";
+import { round } from "lodash";
+
+import { StarRating } from "@yoast/components";
+
+const ProductData = styled.p`
+	display: inline;
+	margin-left: 0.3em;
+	color: #70757a;
+`;
 
 /**
  * Renders ProductData component.
@@ -15,11 +24,22 @@ function ProductDataDesktop( props ) {
 
 	return (
 		<Fragment>
-			<StarRating rating={ shoppingData.rating } />
-			<span>{ __( "Rating: ", "yoast-components" ) + shoppingData.rating * 2 }/10</span> · ‎
-			<span>{ shoppingData.reviewCount + __( "Rating: ", "yoast-components" ) } reviews</span> · ‎
-			<span dangerouslySetInnerHTML={ { __html: shoppingData.price } } /> · ‎
-			<span>{ shoppingData.availability }</span>
+			{ ( shoppingData.reviewCount > 0 ) ? <StarRating rating={ shoppingData.rating } /> : "" }
+			<ProductData>
+				{ ( shoppingData.reviewCount > 0 )
+					? <Fragment>
+						<span>{ __( "Rating: ", "yoast-components" ) + round( ( shoppingData.rating * 2 ), 1 ) } /10 · </span>
+						<span>{ shoppingData.reviewCount } { __( "reviews", "yoast-components" ) } · </span>
+					</Fragment>
+					: "" }
+				{ ( shoppingData.price )
+					? <Fragment>
+						<span dangerouslySetInnerHTML={ { __html: shoppingData.price } } />‎
+					</Fragment>
+					: ""
+				}
+				{ ( shoppingData.availability ) ? <span> · { shoppingData.availability }</span> : "" }
+			</ProductData>
 		</Fragment>
 	);
 }
diff --git a/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js b/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
index c5876f07a0..c8eac25575 100644
--- a/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
+++ b/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
@@ -1,7 +1,28 @@
-import React, { Fragment } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import { StarRating } from "@yoast/components";
+import styled from "styled-components";
 import { __ } from "@wordpress/i18n";
+import { round } from "lodash";
+
+import { StarRating } from "@yoast/components";
+
+const ProductData = styled.div`
+	display: flex;
+`;
+
+const ProductDataCell50 = styled.div`
+	flex: 1;
+	max-width: 50%;
+`;
+
+const ProductDataCell25 = styled.div`
+	flex: 1;
+	max-width: 25%;
+`;
+
+const ProductDataInnerLower = styled.div`
+	color: #70757a;
+`;
 
 /**
  * Renders ProductData component.
@@ -14,24 +35,38 @@ function ProductDataMobile( props ) {
 	const { shoppingData } = props;
 
 	return (
-		<Fragment>
-			<div className="yoast-shopping-data-preview__column">
-				<div className="yoast-shopping-data-preview__upper">{ __( "Rating", "yoast-components" ) }</div>
-				<div className="yoast-shopping-data-preview__lower">
-					<span>{ shoppingData.rating * 2 }/10</span>
-					<StarRating rating={ shoppingData.rating } />
-					<span>{ shoppingData.reviewCount }</span>
-				</div>
-			</div>
-			<div className="yoast-shopping-data-preview__column">
-				<div className="yoast-shopping-data-preview__upper">{ __( "Price", "yoast-components" ) }</div>
-				<div className="yoast-shopping-data-preview__lower" dangerouslySetInnerHTML={ { __html: shoppingData.price } } />
-			</div>
-			<div className="yoast-shopping-data-preview__column">
-				<div className="yoast-shopping-data-preview__upper">{ __( "Availability", "yoast-components" ) }</div>
-				<div className="yoast-shopping-data-preview__lower">{ shoppingData.availability }</div>
-			</div>
-		</Fragment>
+		<ProductData>
+			{ ( shoppingData.rating > 0 )
+				? <ProductDataCell50 className="yoast-shopping-data-preview__column">
+					<div className="yoast-shopping-data-preview__upper">{ __( "Rating", "yoast-components" ) }</div>
+					<ProductDataInnerLower className="yoast-shopping-data-preview__lower">
+						<span>{ round( ( shoppingData.rating * 2 ), 1 ) }/10 </span>
+						<StarRating rating={ shoppingData.rating } />
+						<span> ({ shoppingData.reviewCount })</span>
+					</ProductDataInnerLower>
+				</ProductDataCell50>
+				: ""
+			}
+			{ ( shoppingData.price )
+				? <ProductDataCell25 className="yoast-shopping-data-preview__column">
+					<div className="yoast-shopping-data-preview__upper">{ __( "Price", "yoast-components" ) }</div>
+					<ProductDataInnerLower
+						className="yoast-shopping-data-preview__lower"
+						dangerouslySetInnerHTML={ { __html: shoppingData.price } }
+					/>
+				</ProductDataCell25>
+				: ""
+			}
+			{ ( shoppingData.availability )
+				? <ProductDataCell25 className="yoast-shopping-data-preview__column">
+					<div className="yoast-shopping-data-preview__upper">{ __( "Availability", "yoast-components" ) }</div>
+					<ProductDataInnerLower className="yoast-shopping-data-preview__lower">
+						{ shoppingData.availability }
+					</ProductDataInnerLower>
+				</ProductDataCell25>
+				: ""
+			}
+		</ProductData>
 	);
 }
 

From 0b14ad556550dd88417d5f89a58a6741f80b366d Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Tue, 23 Mar 2021 11:21:52 +0100
Subject: [PATCH 09/22] fix props existency

---
 .../src/snippet-editor/SnippetEditor.js                        | 3 ++-
 .../src/snippet-preview/SnippetPreview.js                      | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/search-metadata-previews/src/snippet-editor/SnippetEditor.js b/packages/search-metadata-previews/src/snippet-editor/SnippetEditor.js
index 062fda44c6..ca04da5877 100644
--- a/packages/search-metadata-previews/src/snippet-editor/SnippetEditor.js
+++ b/packages/search-metadata-previews/src/snippet-editor/SnippetEditor.js
@@ -603,7 +603,7 @@ SnippetEditor.propTypes = {
 	faviconSrc: PropTypes.string,
 	mobileImageSrc: PropTypes.string,
 	idSuffix: PropTypes.string,
-	shoppingData: PropTypes.object.isRequired,
+	shoppingData: PropTypes.object,
 };
 
 SnippetEditor.defaultProps = {
@@ -632,6 +632,7 @@ SnippetEditor.defaultProps = {
 	faviconSrc: "",
 	mobileImageSrc: "",
 	idSuffix: "",
+	shoppingData: {},
 };
 
 export default SnippetEditor;
diff --git a/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js b/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
index 579e4b9a20..063a85172f 100644
--- a/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
+++ b/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
@@ -884,7 +884,7 @@ SnippetPreview.propTypes = {
 	isAmp: PropTypes.bool,
 	faviconSrc: PropTypes.string,
 	mobileImageSrc: PropTypes.string,
-	shoppingData: PropTypes.object.isRequired,
+	shoppingData: PropTypes.object,
 
 	onMouseUp: PropTypes.func.isRequired,
 	onHover: PropTypes.func,
@@ -904,6 +904,7 @@ SnippetPreview.defaultProps = {
 	isAmp: false,
 	faviconSrc: "",
 	mobileImageSrc: "",
+	shoppingData: {},
 
 	onHover: () => {},
 	onMouseEnter: () => {},

From 6029dc299ad9d90269dff00fde6c3905929605af Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Tue, 23 Mar 2021 11:55:11 +0100
Subject: [PATCH 10/22] update snapshot

---
 .../__snapshots__/SnippetPreviewTest.js.snap  | 860 +++++++++++++++++-
 1 file changed, 830 insertions(+), 30 deletions(-)

diff --git a/packages/search-metadata-previews/tests/__snapshots__/SnippetPreviewTest.js.snap b/packages/search-metadata-previews/tests/__snapshots__/SnippetPreviewTest.js.snap
index ccd55d057b..d4b385c4c7 100644
--- a/packages/search-metadata-previews/tests/__snapshots__/SnippetPreviewTest.js.snap
+++ b/packages/search-metadata-previews/tests/__snapshots__/SnippetPreviewTest.js.snap
@@ -13,6 +13,12 @@ exports[`SnippetPreview changes the colors of the description if it was generate
   width: 600px;
 }
 
+.c10 {
+  display: inline;
+  margin-left: 0.3em;
+  color: #70757a;
+}
+
 .c1 {
   background-color: #fff;
   font-family: arial,sans-serif;
@@ -78,7 +84,7 @@ exports[`SnippetPreview changes the colors of the description if it was generate
   color: #006621;
 }
 
-.c10 {
+.c11 {
   color: #545454;
   cursor: pointer;
   position: relative;
@@ -173,6 +179,32 @@ exports[`SnippetPreview changes the colors of the description if it was generate
           className="c9"
         />
       </div>
+      <div
+        className="yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        
+        <p
+          className="c10"
+        >
+          
+          
+          
+        </p>
+      </div>
       <div
         className=""
       >
@@ -191,7 +223,7 @@ exports[`SnippetPreview changes the colors of the description if it was generate
           Meta description preview:
         </span>
         <div
-          className="c10"
+          className="c11"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
@@ -200,6 +232,24 @@ exports[`SnippetPreview changes the colors of the description if it was generate
           Description
         </div>
       </div>
+      <div
+        className="yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
     </div>
   </div>
 </section>
@@ -218,6 +268,12 @@ exports[`SnippetPreview highlights a keyword in different morphological forms 1`
   width: 600px;
 }
 
+.c10 {
+  display: inline;
+  margin-left: 0.3em;
+  color: #70757a;
+}
+
 .c1 {
   background-color: #fff;
   font-family: arial,sans-serif;
@@ -283,7 +339,7 @@ exports[`SnippetPreview highlights a keyword in different morphological forms 1`
   color: #006621;
 }
 
-.c10 {
+.c11 {
   color: #545454;
   cursor: pointer;
   position: relative;
@@ -378,6 +434,32 @@ exports[`SnippetPreview highlights a keyword in different morphological forms 1`
           className="c9"
         />
       </div>
+      <div
+        className="yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        
+        <p
+          className="c10"
+        >
+          
+          
+          
+        </p>
+      </div>
       <div
         className=""
       >
@@ -396,7 +478,7 @@ exports[`SnippetPreview highlights a keyword in different morphological forms 1`
           Meta description preview:
         </span>
         <div
-          className="c10"
+          className="c11"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
@@ -417,6 +499,24 @@ exports[`SnippetPreview highlights a keyword in different morphological forms 1`
            makes her happy.
         </div>
       </div>
+      <div
+        className="yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
     </div>
   </div>
 </section>
@@ -435,6 +535,12 @@ exports[`SnippetPreview highlights keywords even if they are transliterated 1`]
   width: 600px;
 }
 
+.c10 {
+  display: inline;
+  margin-left: 0.3em;
+  color: #70757a;
+}
+
 .c1 {
   background-color: #fff;
   font-family: arial,sans-serif;
@@ -500,7 +606,7 @@ exports[`SnippetPreview highlights keywords even if they are transliterated 1`]
   color: #006621;
 }
 
-.c10 {
+.c11 {
   color: #545454;
   cursor: pointer;
   position: relative;
@@ -595,6 +701,32 @@ exports[`SnippetPreview highlights keywords even if they are transliterated 1`]
           className="c9"
         />
       </div>
+      <div
+        className="yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        
+        <p
+          className="c10"
+        >
+          
+          
+          
+        </p>
+      </div>
       <div
         className=""
       >
@@ -613,7 +745,7 @@ exports[`SnippetPreview highlights keywords even if they are transliterated 1`]
           Meta description preview:
         </span>
         <div
-          className="c10"
+          className="c11"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
@@ -625,6 +757,24 @@ exports[`SnippetPreview highlights keywords even if they are transliterated 1`]
           </strong>
         </div>
       </div>
+      <div
+        className="yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
     </div>
   </div>
 </section>
@@ -643,6 +793,12 @@ exports[`SnippetPreview highlights keywords inside the description and url 1`] =
   width: 600px;
 }
 
+.c10 {
+  display: inline;
+  margin-left: 0.3em;
+  color: #70757a;
+}
+
 .c1 {
   background-color: #fff;
   font-family: arial,sans-serif;
@@ -708,7 +864,7 @@ exports[`SnippetPreview highlights keywords inside the description and url 1`] =
   color: #006621;
 }
 
-.c10 {
+.c11 {
   color: #545454;
   cursor: pointer;
   position: relative;
@@ -803,6 +959,32 @@ exports[`SnippetPreview highlights keywords inside the description and url 1`] =
           className="c9"
         />
       </div>
+      <div
+        className="yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        
+        <p
+          className="c10"
+        >
+          
+          
+          
+        </p>
+      </div>
       <div
         className=""
       >
@@ -821,7 +1003,7 @@ exports[`SnippetPreview highlights keywords inside the description and url 1`] =
           Meta description preview:
         </span>
         <div
-          className="c10"
+          className="c11"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
@@ -833,6 +1015,24 @@ exports[`SnippetPreview highlights keywords inside the description and url 1`] =
           </strong>
         </div>
       </div>
+      <div
+        className="yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
     </div>
   </div>
 </section>
@@ -851,6 +1051,12 @@ exports[`SnippetPreview highlights separate words from the keyphrase 1`] = `
   width: 600px;
 }
 
+.c10 {
+  display: inline;
+  margin-left: 0.3em;
+  color: #70757a;
+}
+
 .c1 {
   background-color: #fff;
   font-family: arial,sans-serif;
@@ -916,7 +1122,7 @@ exports[`SnippetPreview highlights separate words from the keyphrase 1`] = `
   color: #006621;
 }
 
-.c10 {
+.c11 {
   color: #545454;
   cursor: pointer;
   position: relative;
@@ -1011,6 +1217,32 @@ exports[`SnippetPreview highlights separate words from the keyphrase 1`] = `
           className="c9"
         />
       </div>
+      <div
+        className="yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        
+        <p
+          className="c10"
+        >
+          
+          
+          
+        </p>
+      </div>
       <div
         className=""
       >
@@ -1029,7 +1261,7 @@ exports[`SnippetPreview highlights separate words from the keyphrase 1`] = `
           Meta description preview:
         </span>
         <div
-          className="c10"
+          className="c11"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
@@ -1056,12 +1288,37 @@ exports[`SnippetPreview highlights separate words from the keyphrase 1`] = `
            makes her happy.
         </div>
       </div>
+      <div
+        className="yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
     </div>
   </div>
 </section>
 `;
 
 exports[`SnippetPreview mobile mode renders an AMP logo when isAmp is true 1`] = `
+.c11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c0 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -1256,6 +1513,24 @@ exports[`SnippetPreview mobile mode renders an AMP logo when isAmp is true 1`] =
         className="c9"
       />
     </div>
+    <div
+      className="c1 yoast-shopping-data-preview--desktop"
+    >
+      <span
+        className="screen-reader-text"
+        style={
+          Object {
+            "clip": "rect(1px, 1px, 1px, 1px)",
+            "height": "1px",
+            "overflow": "hidden",
+            "position": "absolute",
+            "width": "1px",
+          }
+        }
+      >
+        Shopping data preview:
+      </span>
+    </div>
     <div
       className="c1"
     >
@@ -1286,6 +1561,31 @@ exports[`SnippetPreview mobile mode renders an AMP logo when isAmp is true 1`] =
           
           Description
         </div>
+      </div>
+    </div>
+    <div
+      className="c1 yoast-shopping-data-preview--mobile"
+    >
+      <span
+        className="screen-reader-text"
+        style={
+          Object {
+            "clip": "rect(1px, 1px, 1px, 1px)",
+            "height": "1px",
+            "overflow": "hidden",
+            "position": "absolute",
+            "width": "1px",
+          }
+        }
+      >
+        Shopping data preview:
+      </span>
+      <div
+        className="c11"
+      >
+        
+        
+        
       </div>
     </div>
   </div>
@@ -1293,6 +1593,13 @@ exports[`SnippetPreview mobile mode renders an AMP logo when isAmp is true 1`] =
 `;
 
 exports[`SnippetPreview mobile mode renders differently than desktop 1`] = `
+.c10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c0 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -1473,6 +1780,24 @@ exports[`SnippetPreview mobile mode renders differently than desktop 1`] = `
         </div>
       </div>
     </div>
+    <div
+      className="c1 yoast-shopping-data-preview--desktop"
+    >
+      <span
+        className="screen-reader-text"
+        style={
+          Object {
+            "clip": "rect(1px, 1px, 1px, 1px)",
+            "height": "1px",
+            "overflow": "hidden",
+            "position": "absolute",
+            "width": "1px",
+          }
+        }
+      >
+        Shopping data preview:
+      </span>
+    </div>
     <div
       className="c1"
     >
@@ -1503,6 +1828,31 @@ exports[`SnippetPreview mobile mode renders differently than desktop 1`] = `
           
           Description
         </div>
+      </div>
+    </div>
+    <div
+      className="c1 yoast-shopping-data-preview--mobile"
+    >
+      <span
+        className="screen-reader-text"
+        style={
+          Object {
+            "clip": "rect(1px, 1px, 1px, 1px)",
+            "height": "1px",
+            "overflow": "hidden",
+            "position": "absolute",
+            "width": "1px",
+          }
+        }
+      >
+        Shopping data preview:
+      </span>
+      <div
+        className="c10"
+      >
+        
+        
+        
       </div>
     </div>
   </div>
@@ -1510,6 +1860,13 @@ exports[`SnippetPreview mobile mode renders differently than desktop 1`] = `
 `;
 
 exports[`SnippetPreview renders a SnippetPreview in the default mode 1`] = `
+.c10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c0 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -1690,6 +2047,24 @@ exports[`SnippetPreview renders a SnippetPreview in the default mode 1`] = `
         </div>
       </div>
     </div>
+    <div
+      className="c1 yoast-shopping-data-preview--desktop"
+    >
+      <span
+        className="screen-reader-text"
+        style={
+          Object {
+            "clip": "rect(1px, 1px, 1px, 1px)",
+            "height": "1px",
+            "overflow": "hidden",
+            "position": "absolute",
+            "width": "1px",
+          }
+        }
+      >
+        Shopping data preview:
+      </span>
+    </div>
     <div
       className="c1"
     >
@@ -1720,6 +2095,31 @@ exports[`SnippetPreview renders a SnippetPreview in the default mode 1`] = `
           
           Description
         </div>
+      </div>
+    </div>
+    <div
+      className="c1 yoast-shopping-data-preview--mobile"
+    >
+      <span
+        className="screen-reader-text"
+        style={
+          Object {
+            "clip": "rect(1px, 1px, 1px, 1px)",
+            "height": "1px",
+            "overflow": "hidden",
+            "position": "absolute",
+            "width": "1px",
+          }
+        }
+      >
+        Shopping data preview:
+      </span>
+      <div
+        className="c10"
+      >
+        
+        
+        
       </div>
     </div>
   </div>
@@ -1739,6 +2139,12 @@ exports[`SnippetPreview renders a SnippetPreview that looks like Google 1`] = `
   width: 600px;
 }
 
+.c10 {
+  display: inline;
+  margin-left: 0.3em;
+  color: #70757a;
+}
+
 .c1 {
   background-color: #fff;
   font-family: arial,sans-serif;
@@ -1804,7 +2210,7 @@ exports[`SnippetPreview renders a SnippetPreview that looks like Google 1`] = `
   color: #006621;
 }
 
-.c10 {
+.c11 {
   color: #545454;
   cursor: pointer;
   position: relative;
@@ -1899,6 +2305,32 @@ exports[`SnippetPreview renders a SnippetPreview that looks like Google 1`] = `
           className="c9"
         />
       </div>
+      <div
+        className="yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        
+        <p
+          className="c10"
+        >
+          
+          
+          
+        </p>
+      </div>
       <div
         className=""
       >
@@ -1917,7 +2349,7 @@ exports[`SnippetPreview renders a SnippetPreview that looks like Google 1`] = `
           Meta description preview:
         </span>
         <div
-          className="c10"
+          className="c11"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
@@ -1926,6 +2358,24 @@ exports[`SnippetPreview renders a SnippetPreview that looks like Google 1`] = `
           Description
         </div>
       </div>
+      <div
+        className="yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
     </div>
   </div>
 </section>
@@ -1944,6 +2394,12 @@ exports[`SnippetPreview renders a caret on activation 1`] = `
   width: 600px;
 }
 
+.c10 {
+  display: inline;
+  margin-left: 0.3em;
+  color: #70757a;
+}
+
 .c1 {
   background-color: #fff;
   font-family: arial,sans-serif;
@@ -2004,7 +2460,7 @@ exports[`SnippetPreview renders a caret on activation 1`] = `
   color: #006621;
 }
 
-.c10 {
+.c11 {
   color: #545454;
   cursor: pointer;
   position: relative;
@@ -2118,6 +2574,32 @@ exports[`SnippetPreview renders a caret on activation 1`] = `
           className="c9"
         />
       </div>
+      <div
+        className="yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        
+        <p
+          className="c10"
+        >
+          
+          
+          
+        </p>
+      </div>
       <div
         className=""
       >
@@ -2136,7 +2618,7 @@ exports[`SnippetPreview renders a caret on activation 1`] = `
           Meta description preview:
         </span>
         <div
-          className="c10"
+          className="c11"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
@@ -2145,6 +2627,24 @@ exports[`SnippetPreview renders a caret on activation 1`] = `
           Description
         </div>
       </div>
+      <div
+        className="yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
     </div>
   </div>
 </section>
@@ -2163,6 +2663,12 @@ exports[`SnippetPreview renders a caret on activation 2`] = `
   width: 600px;
 }
 
+.c10 {
+  display: inline;
+  margin-left: 0.3em;
+  color: #70757a;
+}
+
 .c1 {
   background-color: #fff;
   font-family: arial,sans-serif;
@@ -2238,7 +2744,7 @@ exports[`SnippetPreview renders a caret on activation 2`] = `
   vertical-align: top;
 }
 
-.c10 {
+.c11 {
   color: #545454;
   cursor: pointer;
   position: relative;
@@ -2248,7 +2754,7 @@ exports[`SnippetPreview renders a caret on activation 2`] = `
   line-height: 1.57;
 }
 
-.c10::before {
+.c11::before {
   display: block;
   position: absolute;
   top: 0;
@@ -2337,6 +2843,32 @@ exports[`SnippetPreview renders a caret on activation 2`] = `
           className="c9"
         />
       </div>
+      <div
+        className="yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        
+        <p
+          className="c10"
+        >
+          
+          
+          
+        </p>
+      </div>
       <div
         className=""
       >
@@ -2355,7 +2887,7 @@ exports[`SnippetPreview renders a caret on activation 2`] = `
           Meta description preview:
         </span>
         <div
-          className="c10"
+          className="c11"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
@@ -2364,6 +2896,24 @@ exports[`SnippetPreview renders a caret on activation 2`] = `
           Description
         </div>
       </div>
+      <div
+        className="yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
     </div>
   </div>
 </section>
@@ -2382,6 +2932,12 @@ exports[`SnippetPreview renders a caret on activation 3`] = `
   width: 600px;
 }
 
+.c10 {
+  display: inline;
+  margin-left: 0.3em;
+  color: #70757a;
+}
+
 .c1 {
   background-color: #fff;
   font-family: arial,sans-serif;
@@ -2437,7 +2993,7 @@ exports[`SnippetPreview renders a caret on activation 3`] = `
   color: #006621;
 }
 
-.c10 {
+.c11 {
   color: #545454;
   cursor: pointer;
   position: relative;
@@ -2556,6 +3112,32 @@ exports[`SnippetPreview renders a caret on activation 3`] = `
           className="c9"
         />
       </div>
+      <div
+        className="yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        
+        <p
+          className="c10"
+        >
+          
+          
+          
+        </p>
+      </div>
       <div
         className=""
       >
@@ -2574,7 +3156,7 @@ exports[`SnippetPreview renders a caret on activation 3`] = `
           Meta description preview:
         </span>
         <div
-          className="c10"
+          className="c11"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
@@ -2583,6 +3165,24 @@ exports[`SnippetPreview renders a caret on activation 3`] = `
           Description
         </div>
       </div>
+      <div
+        className="yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
     </div>
   </div>
 </section>
@@ -2601,6 +3201,12 @@ exports[`SnippetPreview renders a caret on hover 1`] = `
   width: 600px;
 }
 
+.c10 {
+  display: inline;
+  margin-left: 0.3em;
+  color: #70757a;
+}
+
 .c1 {
   background-color: #fff;
   font-family: arial,sans-serif;
@@ -2661,7 +3267,7 @@ exports[`SnippetPreview renders a caret on hover 1`] = `
   color: #006621;
 }
 
-.c10 {
+.c11 {
   color: #545454;
   cursor: pointer;
   position: relative;
@@ -2775,6 +3381,32 @@ exports[`SnippetPreview renders a caret on hover 1`] = `
           className="c9"
         />
       </div>
+      <div
+        className="yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        
+        <p
+          className="c10"
+        >
+          
+          
+          
+        </p>
+      </div>
       <div
         className=""
       >
@@ -2793,7 +3425,7 @@ exports[`SnippetPreview renders a caret on hover 1`] = `
           Meta description preview:
         </span>
         <div
-          className="c10"
+          className="c11"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
@@ -2802,6 +3434,24 @@ exports[`SnippetPreview renders a caret on hover 1`] = `
           Description
         </div>
       </div>
+      <div
+        className="yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
     </div>
   </div>
 </section>
@@ -2820,6 +3470,12 @@ exports[`SnippetPreview renders a caret on hover 2`] = `
   width: 600px;
 }
 
+.c10 {
+  display: inline;
+  margin-left: 0.3em;
+  color: #70757a;
+}
+
 .c1 {
   background-color: #fff;
   font-family: arial,sans-serif;
@@ -2895,7 +3551,7 @@ exports[`SnippetPreview renders a caret on hover 2`] = `
   vertical-align: top;
 }
 
-.c10 {
+.c11 {
   color: #545454;
   cursor: pointer;
   position: relative;
@@ -2905,7 +3561,7 @@ exports[`SnippetPreview renders a caret on hover 2`] = `
   line-height: 1.57;
 }
 
-.c10::before {
+.c11::before {
   display: block;
   position: absolute;
   top: 0;
@@ -2994,6 +3650,32 @@ exports[`SnippetPreview renders a caret on hover 2`] = `
           className="c9"
         />
       </div>
+      <div
+        className="yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        
+        <p
+          className="c10"
+        >
+          
+          
+          
+        </p>
+      </div>
       <div
         className=""
       >
@@ -3012,7 +3694,7 @@ exports[`SnippetPreview renders a caret on hover 2`] = `
           Meta description preview:
         </span>
         <div
-          className="c10"
+          className="c11"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
@@ -3021,6 +3703,24 @@ exports[`SnippetPreview renders a caret on hover 2`] = `
           Description
         </div>
       </div>
+      <div
+        className="yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
     </div>
   </div>
 </section>
@@ -3039,6 +3739,12 @@ exports[`SnippetPreview renders a caret on hover 3`] = `
   width: 600px;
 }
 
+.c10 {
+  display: inline;
+  margin-left: 0.3em;
+  color: #70757a;
+}
+
 .c1 {
   background-color: #fff;
   font-family: arial,sans-serif;
@@ -3094,7 +3800,7 @@ exports[`SnippetPreview renders a caret on hover 3`] = `
   color: #006621;
 }
 
-.c10 {
+.c11 {
   color: #545454;
   cursor: pointer;
   position: relative;
@@ -3213,6 +3919,32 @@ exports[`SnippetPreview renders a caret on hover 3`] = `
           className="c9"
         />
       </div>
+      <div
+        className="yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        
+        <p
+          className="c10"
+        >
+          
+          
+          
+        </p>
+      </div>
       <div
         className=""
       >
@@ -3231,7 +3963,7 @@ exports[`SnippetPreview renders a caret on hover 3`] = `
           Meta description preview:
         </span>
         <div
-          className="c10"
+          className="c11"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
@@ -3240,6 +3972,24 @@ exports[`SnippetPreview renders a caret on hover 3`] = `
           Description
         </div>
       </div>
+      <div
+        className="yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
     </div>
   </div>
 </section>
@@ -3258,6 +4008,12 @@ exports[`SnippetPreview shows the date if a date is passed 1`] = `
   width: 600px;
 }
 
+.c10 {
+  display: inline;
+  margin-left: 0.3em;
+  color: #70757a;
+}
+
 .c1 {
   background-color: #fff;
   font-family: arial,sans-serif;
@@ -3323,7 +4079,7 @@ exports[`SnippetPreview shows the date if a date is passed 1`] = `
   color: #006621;
 }
 
-.c10 {
+.c11 {
   color: #545454;
   cursor: pointer;
   position: relative;
@@ -3343,7 +4099,7 @@ exports[`SnippetPreview shows the date if a date is passed 1`] = `
   vertical-align: top;
 }
 
-.c11 {
+.c12 {
   color: #777;
 }
 
@@ -3422,6 +4178,32 @@ exports[`SnippetPreview shows the date if a date is passed 1`] = `
           className="c9"
         />
       </div>
+      <div
+        className="yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        
+        <p
+          className="c10"
+        >
+          
+          
+          
+        </p>
+      </div>
       <div
         className=""
       >
@@ -3440,13 +4222,13 @@ exports[`SnippetPreview shows the date if a date is passed 1`] = `
           Meta description preview:
         </span>
         <div
-          className="c10"
+          className="c11"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
           onMouseUp={[Function]}
         >
           <span
-            className="c11"
+            className="c12"
           >
             Today
              
@@ -3456,6 +4238,24 @@ exports[`SnippetPreview shows the date if a date is passed 1`] = `
           Description
         </div>
       </div>
+      <div
+        className="yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
     </div>
   </div>
 </section>

From b9ab21122c6d14f333a1a0433fd88f6e5ad0432a Mon Sep 17 00:00:00 2001
From: Maarten Leenders <26220788+maartenleenders@users.noreply.github.com>
Date: Wed, 24 Mar 2021 15:53:33 +0100
Subject: [PATCH 11/22] Update snaps

---
 .../__snapshots__/SnippetEditorTest.js.snap   | 2642 ++++++++++++++---
 1 file changed, 2154 insertions(+), 488 deletions(-)

diff --git a/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap b/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap
index 71b5a401ab..5a552fccbb 100644
--- a/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap
+++ b/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap
@@ -1,6 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SnippetEditor accepts a custom data mapping function 1`] = `
+.c14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c4 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -133,7 +140,7 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = `
   cursor: pointer;
 }
 
-.c14 {
+.c15 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -175,17 +182,17 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = `
   padding-left: 8px;
 }
 
-.c14:active {
+.c15:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c14::-moz-focus-inner {
+.c15::-moz-focus-inner {
   border-width: 0;
 }
 
-.c14:focus {
+.c15:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -193,24 +200,24 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = `
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c14:hover {
+.c15:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c14 svg {
+.c15 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
-.c14 svg {
+.c15 svg {
   margin-right: 7px;
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c14::after {
+  .c15::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -335,6 +342,24 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = `
           </div>
         </div>
       </div>
+      <div
+        className="c5 yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
       <div
         className="c5"
       >
@@ -365,13 +390,38 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = `
             
             Totally different description
           </div>
+        </div>
+      </div>
+      <div
+        className="c5 yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        <div
+          className="c14"
+        >
+          
+          
+          
         </div>
       </div>
     </div>
   </section>
   <button
     aria-expanded={false}
-    className="c14"
+    className="c15"
     onClick={[Function]}
     type="button"
   >
@@ -419,6 +469,7 @@ exports[`SnippetEditor activates a field on onMouseUp() and opens the editor 1`]
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
       onMouseUp={[Function]}
+      shoppingData={Object {}}
       title="Test title"
       url="example.org/test-slug"
       wordsToHighlight={Array []}
@@ -508,7 +559,7 @@ exports[`SnippetEditor activates a field on onMouseUp() and opens the editor 1`]
 `;
 
 exports[`SnippetEditor closes when calling close() 1`] = `
-.c17 {
+.c18 {
   -webkit-flex: 1 1 200px;
   -ms-flex: 1 1 200px;
   flex: 1 1 200px;
@@ -521,7 +572,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
   font-weight: 500;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -534,26 +585,26 @@ exports[`SnippetEditor closes when calling close() 1`] = `
   border: 1px solid #ddd;
 }
 
-.c16::-webkit-progress-bar {
+.c17::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c16::-webkit-progress-value {
+.c17::-webkit-progress-value {
   background-color: #dc3232;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c16::-moz-progress-bar {
+.c17::-moz-progress-bar {
   background-color: #dc3232;
 }
 
-.c16::-ms-fill {
+.c17::-ms-fill {
   background-color: #dc3232;
   border: 0;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -566,29 +617,36 @@ exports[`SnippetEditor closes when calling close() 1`] = `
   border: 1px solid #ddd;
 }
 
-.c20::-webkit-progress-bar {
+.c21::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c20::-webkit-progress-value {
+.c21::-webkit-progress-value {
   background-color: #ee7c1b;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c20::-moz-progress-bar {
+.c21::-moz-progress-bar {
   background-color: #ee7c1b;
 }
 
-.c20::-ms-fill {
+.c21::-ms-fill {
   background-color: #ee7c1b;
   border: 0;
 }
 
-.c15 {
+.c16 {
   padding: 0 20px;
 }
 
+.c14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c4 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -693,7 +751,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
   vertical-align: middle;
 }
 
-.c19 {
+.c20 {
   border: none;
   width: 100%;
   height: inherit;
@@ -703,11 +761,11 @@ exports[`SnippetEditor closes when calling close() 1`] = `
   color: inherit;
 }
 
-.c19:focus {
+.c20:focus {
   outline: 0;
 }
 
-.c18 {
+.c19 {
   -webkit-flex: 0 1 100%;
   -ms-flex: 0 1 100%;
   flex: 0 1 100%;
@@ -726,7 +784,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
   cursor: text;
 }
 
-.c18::before {
+.c19::before {
   display: block;
   position: absolute;
   top: -1px;
@@ -766,7 +824,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
   cursor: pointer;
 }
 
-.c14 {
+.c15 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -808,17 +866,17 @@ exports[`SnippetEditor closes when calling close() 1`] = `
   padding-left: 8px;
 }
 
-.c14:active {
+.c15:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c14::-moz-focus-inner {
+.c15::-moz-focus-inner {
   border-width: 0;
 }
 
-.c14:focus {
+.c15:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -826,23 +884,23 @@ exports[`SnippetEditor closes when calling close() 1`] = `
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c14:hover {
+.c15:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c14 svg {
+.c15 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
-.c14 svg {
+.c15 svg {
   margin-right: 7px;
 }
 
-.c21 {
+.c22 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -882,17 +940,17 @@ exports[`SnippetEditor closes when calling close() 1`] = `
   margin-top: 24px;
 }
 
-.c21:active {
+.c22:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c21::-moz-focus-inner {
+.c22::-moz-focus-inner {
   border-width: 0;
 }
 
-.c21:focus {
+.c22:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -900,20 +958,20 @@ exports[`SnippetEditor closes when calling close() 1`] = `
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c21:hover {
+.c22:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c21 svg {
+.c22 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c14::after {
+  .c15::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -921,7 +979,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c21::after {
+  .c22::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -958,6 +1016,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
   onChangeAnalysisData={[Function]}
   recommendedReplacementVariables={Array []}
   replacementVariables={Array []}
+  shoppingData={Object {}}
   showCloseButton={true}
   titleLengthProgress={
     Object {
@@ -1302,6 +1361,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
         onMouseUp={[Function]}
+        shoppingData={Object {}}
         title="Test title"
         url="example.org/test-slug"
         wordsToHighlight={Array []}
@@ -1697,6 +1757,57 @@ exports[`SnippetEditor closes when calling close() 1`] = `
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--desktop"
+                >
+                  <StyledComponent
+                    className="yoast-shopping-data-preview--desktop"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5 yoast-shopping-data-preview--desktop"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Shopping data preview:
+                        </span>
+                      </ScreenReaderText>
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
                 <SnippetPreview__MobilePartContainer>
                   <StyledComponent
                     forwardedComponent={
@@ -1833,6 +1944,92 @@ exports[`SnippetEditor closes when calling close() 1`] = `
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--mobile"
+                >
+                  <StyledComponent
+                    className="yoast-shopping-data-preview--mobile"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5 yoast-shopping-data-preview--mobile"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Shopping data preview:
+                        </span>
+                      </ScreenReaderText>
+                      <ProductDataMobile
+                        shoppingData={Object {}}
+                      >
+                        <ProductDataMobile__ProductData>
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                  "isStatic": false,
+                                  "lastClassName": "c14",
+                                  "rules": Array [
+                                    "display:flex;",
+                                  ],
+                                },
+                                "displayName": "ProductDataMobile__ProductData",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                "target": "div",
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                              }
+                            }
+                            forwardedRef={null}
+                          >
+                            <div
+                              className="c14"
+                            />
+                          </StyledComponent>
+                        </ProductDataMobile__ProductData>
+                      </ProductDataMobile>
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
               </div>
             </StyledComponent>
           </SnippetPreview__MobileContainer>
@@ -1891,7 +2088,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
               "componentStyle": ComponentStyle {
                 "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
                 "isStatic": false,
-                "lastClassName": "c14",
+                "lastClassName": "c15",
                 "rules": Array [
                   "color:",
                   [Function],
@@ -1988,7 +2185,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
         >
           <button
             aria-expanded={true}
-            className="c14"
+            className="c15"
             onClick={[Function]}
             type="button"
           >
@@ -2322,7 +2519,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
                 "componentStyle": ComponentStyle {
                   "componentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
                   "isStatic": false,
-                  "lastClassName": "c15",
+                  "lastClassName": "c16",
                   "rules": Array [
                     "padding:",
                     [Function],
@@ -2343,7 +2540,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
             padding="0 20px"
           >
             <section
-              className="c15"
+              className="c16"
             >
               <ReplacementVariableEditorMock
                 content="Test title"
@@ -2389,7 +2586,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
                       "componentStyle": ComponentStyle {
                         "componentId": "ProgressBar-sc-9g9yx6-0",
                         "isStatic": false,
-                        "lastClassName": "c20",
+                        "lastClassName": "c21",
                         "rules": Array [
                           "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
                           [Function],
@@ -2431,7 +2628,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
                 >
                   <progress
                     aria-hidden="true"
-                    className="c16"
+                    className="c17"
                     max={600}
                     value={0}
                   />
@@ -2449,7 +2646,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
                       "componentStyle": ComponentStyle {
                         "componentId": "Label__SimulatedLabel-mitdcc-0",
                         "isStatic": false,
-                        "lastClassName": "c17",
+                        "lastClassName": "c18",
                         "rules": Array [
                           "flex:1 1 200px;min-width:200px;cursor:pointer;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;margin:4px 0;color:#303030;font-weight:500;",
                         ],
@@ -2469,7 +2666,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
                   onClick={[Function]}
                 >
                   <div
-                    className="c17"
+                    className="c18"
                     id="snippet-editor-field-3-slug"
                     onClick={[Function]}
                   >
@@ -2492,7 +2689,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
                       "componentStyle": ComponentStyle {
                         "componentId": "helpers-sc-15q2ybx-0",
                         "isStatic": false,
-                        "lastClassName": "c18",
+                        "lastClassName": "c19",
                         "rules": Array [
                           "flex:0 1 100%;border:1px solid ",
                           [Function],
@@ -2524,7 +2721,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
                   onClick={[Function]}
                 >
                   <div
-                    className="c18"
+                    className="c19"
                     onClick={[Function]}
                   >
                     <SnippetEditorFields__SlugInput
@@ -2544,7 +2741,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
                             "componentStyle": ComponentStyle {
                               "componentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
                               "isStatic": false,
-                              "lastClassName": "c19",
+                              "lastClassName": "c20",
                               "rules": Array [
                                 "border:none;width:100%;height:inherit;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;&:focus{outline:0;}",
                               ],
@@ -2568,7 +2765,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
                       >
                         <input
                           aria-labelledby="snippet-editor-field-3-slug"
-                          className="c19"
+                          className="c20"
                           id="yoast-google-preview-slug"
                           onBlur={[Function]}
                           onChange={[Function]}
@@ -2625,7 +2822,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
                       "componentStyle": ComponentStyle {
                         "componentId": "ProgressBar-sc-9g9yx6-0",
                         "isStatic": false,
-                        "lastClassName": "c20",
+                        "lastClassName": "c21",
                         "rules": Array [
                           "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
                           [Function],
@@ -2667,7 +2864,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
                 >
                   <progress
                     aria-hidden="true"
-                    className="c20"
+                    className="c21"
                     max={156}
                     value={42}
                   />
@@ -2728,7 +2925,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
               "componentStyle": ComponentStyle {
                 "componentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
                 "isStatic": false,
-                "lastClassName": "c21",
+                "lastClassName": "c22",
                 "rules": Array [
                   "color:",
                   [Function],
@@ -2818,7 +3015,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
           type="button"
         >
           <button
-            className="c21"
+            className="c22"
             onClick={[Function]}
             type="button"
           >
@@ -2832,6 +3029,13 @@ exports[`SnippetEditor closes when calling close() 1`] = `
 `;
 
 exports[`SnippetEditor closes when calling close() 2`] = `
+.c14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c4 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -2964,7 +3168,7 @@ exports[`SnippetEditor closes when calling close() 2`] = `
   cursor: pointer;
 }
 
-.c14 {
+.c15 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -3006,17 +3210,17 @@ exports[`SnippetEditor closes when calling close() 2`] = `
   padding-left: 8px;
 }
 
-.c14:active {
+.c15:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c14::-moz-focus-inner {
+.c15::-moz-focus-inner {
   border-width: 0;
 }
 
-.c14:focus {
+.c15:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -3024,24 +3228,24 @@ exports[`SnippetEditor closes when calling close() 2`] = `
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c14:hover {
+.c15:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c14 svg {
+.c15 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
-.c14 svg {
+.c15 svg {
   margin-right: 7px;
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c14::after {
+  .c15::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -3078,6 +3282,7 @@ exports[`SnippetEditor closes when calling close() 2`] = `
   onChangeAnalysisData={[Function]}
   recommendedReplacementVariables={Array []}
   replacementVariables={Array []}
+  shoppingData={Object {}}
   showCloseButton={true}
   titleLengthProgress={
     Object {
@@ -3422,6 +3627,7 @@ exports[`SnippetEditor closes when calling close() 2`] = `
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
         onMouseUp={[Function]}
+        shoppingData={Object {}}
         title="Test title"
         url="example.org/test-slug"
         wordsToHighlight={Array []}
@@ -3817,8 +4023,11 @@ exports[`SnippetEditor closes when calling close() 2`] = `
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--desktop"
+                >
                   <StyledComponent
+                    className="yoast-shopping-data-preview--desktop"
                     forwardedComponent={
                       Object {
                         "$$typeof": Symbol(react.forward_ref),
@@ -3844,7 +4053,7 @@ exports[`SnippetEditor closes when calling close() 2`] = `
                     forwardedRef={null}
                   >
                     <div
-                      className="c5"
+                      className="c5 yoast-shopping-data-preview--desktop"
                     >
                       <ScreenReaderText>
                         <span
@@ -3859,30 +4068,78 @@ exports[`SnippetEditor closes when calling close() 2`] = `
                             }
                           }
                         >
-                          Meta description preview:
+                          Shopping data preview:
                         </span>
                       </ScreenReaderText>
-                      <SnippetPreview__MobileDescription
-                        isDescriptionPlaceholder={false}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-12",
-                                "isStatic": false,
-                                "lastClassName": "c13",
-                                "rules": Array [
-                                  "color:",
-                                  "#3c4043",
-                                  ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                  "600",
-                                  "px;&:after{display:table;content:\\"\\";clear:both;}",
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer>
+                  <StyledComponent
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Meta description preview:
+                        </span>
+                      </ScreenReaderText>
+                      <SnippetPreview__MobileDescription
+                        isDescriptionPlaceholder={false}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseUp={[Function]}
+                      >
+                        <StyledComponent
+                          forwardedComponent={
+                            Object {
+                              "$$typeof": Symbol(react.forward_ref),
+                              "attrs": Array [],
+                              "componentStyle": ComponentStyle {
+                                "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-12",
+                                "isStatic": false,
+                                "lastClassName": "c13",
+                                "rules": Array [
+                                  "color:",
+                                  "#3c4043",
+                                  ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
+                                  "600",
+                                  "px;&:after{display:table;content:\\"\\";clear:both;}",
                                 ],
                               },
                               "displayName": "SnippetPreview__MobileDescription",
@@ -3953,6 +4210,92 @@ exports[`SnippetEditor closes when calling close() 2`] = `
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--mobile"
+                >
+                  <StyledComponent
+                    className="yoast-shopping-data-preview--mobile"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5 yoast-shopping-data-preview--mobile"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Shopping data preview:
+                        </span>
+                      </ScreenReaderText>
+                      <ProductDataMobile
+                        shoppingData={Object {}}
+                      >
+                        <ProductDataMobile__ProductData>
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                  "isStatic": false,
+                                  "lastClassName": "c14",
+                                  "rules": Array [
+                                    "display:flex;",
+                                  ],
+                                },
+                                "displayName": "ProductDataMobile__ProductData",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                "target": "div",
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                              }
+                            }
+                            forwardedRef={null}
+                          >
+                            <div
+                              className="c14"
+                            />
+                          </StyledComponent>
+                        </ProductDataMobile__ProductData>
+                      </ProductDataMobile>
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
               </div>
             </StyledComponent>
           </SnippetPreview__MobileContainer>
@@ -4011,7 +4354,7 @@ exports[`SnippetEditor closes when calling close() 2`] = `
               "componentStyle": ComponentStyle {
                 "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
                 "isStatic": false,
-                "lastClassName": "c14",
+                "lastClassName": "c15",
                 "rules": Array [
                   "color:",
                   [Function],
@@ -4108,7 +4451,7 @@ exports[`SnippetEditor closes when calling close() 2`] = `
         >
           <button
             aria-expanded={false}
-            className="c14"
+            className="c15"
             onClick={[Function]}
             type="button"
           >
@@ -4402,7 +4745,7 @@ exports[`SnippetEditor closes when calling close() 2`] = `
 `;
 
 exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
-.c17 {
+.c18 {
   -webkit-flex: 1 1 200px;
   -ms-flex: 1 1 200px;
   flex: 1 1 200px;
@@ -4415,7 +4758,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
   font-weight: 500;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -4428,26 +4771,26 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
   border: 1px solid #ddd;
 }
 
-.c16::-webkit-progress-bar {
+.c17::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c16::-webkit-progress-value {
+.c17::-webkit-progress-value {
   background-color: #dc3232;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c16::-moz-progress-bar {
+.c17::-moz-progress-bar {
   background-color: #dc3232;
 }
 
-.c16::-ms-fill {
+.c17::-ms-fill {
   background-color: #dc3232;
   border: 0;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -4460,29 +4803,36 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
   border: 1px solid #ddd;
 }
 
-.c20::-webkit-progress-bar {
+.c21::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c20::-webkit-progress-value {
+.c21::-webkit-progress-value {
   background-color: #ee7c1b;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c20::-moz-progress-bar {
+.c21::-moz-progress-bar {
   background-color: #ee7c1b;
 }
 
-.c20::-ms-fill {
+.c21::-ms-fill {
   background-color: #ee7c1b;
   border: 0;
 }
 
-.c15 {
+.c16 {
   padding: 0 20px;
 }
 
+.c14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c4 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -4587,7 +4937,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
   vertical-align: middle;
 }
 
-.c19 {
+.c20 {
   border: none;
   width: 100%;
   height: inherit;
@@ -4597,11 +4947,11 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
   color: inherit;
 }
 
-.c19:focus {
+.c20:focus {
   outline: 0;
 }
 
-.c18 {
+.c19 {
   -webkit-flex: 0 1 100%;
   -ms-flex: 0 1 100%;
   flex: 0 1 100%;
@@ -4620,7 +4970,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
   cursor: text;
 }
 
-.c18::before {
+.c19::before {
   display: block;
   position: absolute;
   top: -1px;
@@ -4660,7 +5010,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
   cursor: pointer;
 }
 
-.c14 {
+.c15 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -4702,17 +5052,17 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
   padding-left: 8px;
 }
 
-.c14:active {
+.c15:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c14::-moz-focus-inner {
+.c15::-moz-focus-inner {
   border-width: 0;
 }
 
-.c14:focus {
+.c15:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -4720,23 +5070,23 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c14:hover {
+.c15:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c14 svg {
+.c15 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
-.c14 svg {
+.c15 svg {
   margin-right: 7px;
 }
 
-.c21 {
+.c22 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -4776,17 +5126,17 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
   margin-top: 24px;
 }
 
-.c21:active {
+.c22:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c21::-moz-focus-inner {
+.c22::-moz-focus-inner {
   border-width: 0;
 }
 
-.c21:focus {
+.c22:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -4794,20 +5144,20 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c21:hover {
+.c22:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c21 svg {
+.c22 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c14::after {
+  .c15::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -4815,7 +5165,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c21::after {
+  .c22::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -4852,6 +5202,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
   onChangeAnalysisData={[Function]}
   recommendedReplacementVariables={Array []}
   replacementVariables={Array []}
+  shoppingData={Object {}}
   showCloseButton={true}
   titleLengthProgress={
     Object {
@@ -5196,6 +5547,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
         onMouseUp={[Function]}
+        shoppingData={Object {}}
         title="Test title"
         url="example.org/test-slug"
         wordsToHighlight={Array []}
@@ -5591,6 +5943,57 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--desktop"
+                >
+                  <StyledComponent
+                    className="yoast-shopping-data-preview--desktop"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5 yoast-shopping-data-preview--desktop"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Shopping data preview:
+                        </span>
+                      </ScreenReaderText>
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
                 <SnippetPreview__MobilePartContainer>
                   <StyledComponent
                     forwardedComponent={
@@ -5727,6 +6130,92 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--mobile"
+                >
+                  <StyledComponent
+                    className="yoast-shopping-data-preview--mobile"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5 yoast-shopping-data-preview--mobile"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Shopping data preview:
+                        </span>
+                      </ScreenReaderText>
+                      <ProductDataMobile
+                        shoppingData={Object {}}
+                      >
+                        <ProductDataMobile__ProductData>
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                  "isStatic": false,
+                                  "lastClassName": "c14",
+                                  "rules": Array [
+                                    "display:flex;",
+                                  ],
+                                },
+                                "displayName": "ProductDataMobile__ProductData",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                "target": "div",
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                              }
+                            }
+                            forwardedRef={null}
+                          >
+                            <div
+                              className="c14"
+                            />
+                          </StyledComponent>
+                        </ProductDataMobile__ProductData>
+                      </ProductDataMobile>
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
               </div>
             </StyledComponent>
           </SnippetPreview__MobileContainer>
@@ -5785,7 +6274,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
               "componentStyle": ComponentStyle {
                 "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
                 "isStatic": false,
-                "lastClassName": "c14",
+                "lastClassName": "c15",
                 "rules": Array [
                   "color:",
                   [Function],
@@ -5882,7 +6371,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
         >
           <button
             aria-expanded={true}
-            className="c14"
+            className="c15"
             onClick={[Function]}
             type="button"
           >
@@ -6216,7 +6705,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
                 "componentStyle": ComponentStyle {
                   "componentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
                   "isStatic": false,
-                  "lastClassName": "c15",
+                  "lastClassName": "c16",
                   "rules": Array [
                     "padding:",
                     [Function],
@@ -6237,7 +6726,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
             padding="0 20px"
           >
             <section
-              className="c15"
+              className="c16"
             >
               <ReplacementVariableEditorMock
                 content="Test title"
@@ -6283,7 +6772,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
                       "componentStyle": ComponentStyle {
                         "componentId": "ProgressBar-sc-9g9yx6-0",
                         "isStatic": false,
-                        "lastClassName": "c20",
+                        "lastClassName": "c21",
                         "rules": Array [
                           "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
                           [Function],
@@ -6325,7 +6814,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
                 >
                   <progress
                     aria-hidden="true"
-                    className="c16"
+                    className="c17"
                     max={600}
                     value={0}
                   />
@@ -6343,7 +6832,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
                       "componentStyle": ComponentStyle {
                         "componentId": "Label__SimulatedLabel-mitdcc-0",
                         "isStatic": false,
-                        "lastClassName": "c17",
+                        "lastClassName": "c18",
                         "rules": Array [
                           "flex:1 1 200px;min-width:200px;cursor:pointer;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;margin:4px 0;color:#303030;font-weight:500;",
                         ],
@@ -6363,7 +6852,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
                   onClick={[Function]}
                 >
                   <div
-                    className="c17"
+                    className="c18"
                     id="snippet-editor-field-9-slug"
                     onClick={[Function]}
                   >
@@ -6386,7 +6875,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
                       "componentStyle": ComponentStyle {
                         "componentId": "helpers-sc-15q2ybx-0",
                         "isStatic": false,
-                        "lastClassName": "c18",
+                        "lastClassName": "c19",
                         "rules": Array [
                           "flex:0 1 100%;border:1px solid ",
                           [Function],
@@ -6418,7 +6907,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
                   onClick={[Function]}
                 >
                   <div
-                    className="c18"
+                    className="c19"
                     onClick={[Function]}
                   >
                     <SnippetEditorFields__SlugInput
@@ -6438,7 +6927,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
                             "componentStyle": ComponentStyle {
                               "componentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
                               "isStatic": false,
-                              "lastClassName": "c19",
+                              "lastClassName": "c20",
                               "rules": Array [
                                 "border:none;width:100%;height:inherit;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;&:focus{outline:0;}",
                               ],
@@ -6462,7 +6951,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
                       >
                         <input
                           aria-labelledby="snippet-editor-field-9-slug"
-                          className="c19"
+                          className="c20"
                           id="yoast-google-preview-slug"
                           onBlur={[Function]}
                           onChange={[Function]}
@@ -6519,7 +7008,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
                       "componentStyle": ComponentStyle {
                         "componentId": "ProgressBar-sc-9g9yx6-0",
                         "isStatic": false,
-                        "lastClassName": "c20",
+                        "lastClassName": "c21",
                         "rules": Array [
                           "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
                           [Function],
@@ -6561,7 +7050,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
                 >
                   <progress
                     aria-hidden="true"
-                    className="c20"
+                    className="c21"
                     max={156}
                     value={42}
                   />
@@ -6622,7 +7111,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
               "componentStyle": ComponentStyle {
                 "componentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
                 "isStatic": false,
-                "lastClassName": "c21",
+                "lastClassName": "c22",
                 "rules": Array [
                   "color:",
                   [Function],
@@ -6712,7 +7201,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
           type="button"
         >
           <button
-            className="c21"
+            className="c22"
             onClick={[Function]}
             type="button"
           >
@@ -6726,7 +7215,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
 `;
 
 exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] = `
-.c17 {
+.c18 {
   -webkit-flex: 1 1 200px;
   -ms-flex: 1 1 200px;
   flex: 1 1 200px;
@@ -6739,7 +7228,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
   font-weight: 500;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -6752,26 +7241,26 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
   border: 1px solid #ddd;
 }
 
-.c16::-webkit-progress-bar {
+.c17::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c16::-webkit-progress-value {
+.c17::-webkit-progress-value {
   background-color: #dc3232;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c16::-moz-progress-bar {
+.c17::-moz-progress-bar {
   background-color: #dc3232;
 }
 
-.c16::-ms-fill {
+.c17::-ms-fill {
   background-color: #dc3232;
   border: 0;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -6784,29 +7273,36 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
   border: 1px solid #ddd;
 }
 
-.c20::-webkit-progress-bar {
+.c21::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c20::-webkit-progress-value {
+.c21::-webkit-progress-value {
   background-color: #ee7c1b;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c20::-moz-progress-bar {
+.c21::-moz-progress-bar {
   background-color: #ee7c1b;
 }
 
-.c20::-ms-fill {
+.c21::-ms-fill {
   background-color: #ee7c1b;
   border: 0;
 }
 
-.c15 {
+.c16 {
   padding: 0 20px;
 }
 
+.c14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c4 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -6911,7 +7407,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
   vertical-align: middle;
 }
 
-.c19 {
+.c20 {
   border: none;
   width: 100%;
   height: inherit;
@@ -6921,11 +7417,11 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
   color: inherit;
 }
 
-.c19:focus {
+.c20:focus {
   outline: 0;
 }
 
-.c18 {
+.c19 {
   -webkit-flex: 0 1 100%;
   -ms-flex: 0 1 100%;
   flex: 0 1 100%;
@@ -6944,7 +7440,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
   cursor: text;
 }
 
-.c18::before {
+.c19::before {
   display: block;
   position: absolute;
   top: -1px;
@@ -6984,7 +7480,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
   cursor: pointer;
 }
 
-.c14 {
+.c15 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -7026,17 +7522,17 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
   padding-left: 8px;
 }
 
-.c14:active {
+.c15:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c14::-moz-focus-inner {
+.c15::-moz-focus-inner {
   border-width: 0;
 }
 
-.c14:focus {
+.c15:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -7044,23 +7540,23 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c14:hover {
+.c15:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c14 svg {
+.c15 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
-.c14 svg {
+.c15 svg {
   margin-right: 7px;
 }
 
-.c21 {
+.c22 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -7100,17 +7596,17 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
   margin-top: 24px;
 }
 
-.c21:active {
+.c22:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c21::-moz-focus-inner {
+.c22::-moz-focus-inner {
   border-width: 0;
 }
 
-.c21:focus {
+.c22:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -7118,20 +7614,20 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c21:hover {
+.c22:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c21 svg {
+.c22 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c14::after {
+  .c15::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -7139,7 +7635,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c21::after {
+  .c22::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -7176,6 +7672,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
   onChangeAnalysisData={[Function]}
   recommendedReplacementVariables={Array []}
   replacementVariables={Array []}
+  shoppingData={Object {}}
   showCloseButton={true}
   titleLengthProgress={
     Object {
@@ -7520,6 +8017,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
         onMouseUp={[Function]}
+        shoppingData={Object {}}
         title="Test title"
         url="example.org/test-slug"
         wordsToHighlight={Array []}
@@ -7915,6 +8413,57 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--desktop"
+                >
+                  <StyledComponent
+                    className="yoast-shopping-data-preview--desktop"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5 yoast-shopping-data-preview--desktop"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Shopping data preview:
+                        </span>
+                      </ScreenReaderText>
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
                 <SnippetPreview__MobilePartContainer>
                   <StyledComponent
                     forwardedComponent={
@@ -8051,6 +8600,92 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--mobile"
+                >
+                  <StyledComponent
+                    className="yoast-shopping-data-preview--mobile"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5 yoast-shopping-data-preview--mobile"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Shopping data preview:
+                        </span>
+                      </ScreenReaderText>
+                      <ProductDataMobile
+                        shoppingData={Object {}}
+                      >
+                        <ProductDataMobile__ProductData>
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                  "isStatic": false,
+                                  "lastClassName": "c14",
+                                  "rules": Array [
+                                    "display:flex;",
+                                  ],
+                                },
+                                "displayName": "ProductDataMobile__ProductData",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                "target": "div",
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                              }
+                            }
+                            forwardedRef={null}
+                          >
+                            <div
+                              className="c14"
+                            />
+                          </StyledComponent>
+                        </ProductDataMobile__ProductData>
+                      </ProductDataMobile>
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
               </div>
             </StyledComponent>
           </SnippetPreview__MobileContainer>
@@ -8109,7 +8744,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
               "componentStyle": ComponentStyle {
                 "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
                 "isStatic": false,
-                "lastClassName": "c14",
+                "lastClassName": "c15",
                 "rules": Array [
                   "color:",
                   [Function],
@@ -8206,7 +8841,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
         >
           <button
             aria-expanded={true}
-            className="c14"
+            className="c15"
             onClick={[Function]}
             type="button"
           >
@@ -8540,7 +9175,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
                 "componentStyle": ComponentStyle {
                   "componentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
                   "isStatic": false,
-                  "lastClassName": "c15",
+                  "lastClassName": "c16",
                   "rules": Array [
                     "padding:",
                     [Function],
@@ -8561,7 +9196,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
             padding="0 20px"
           >
             <section
-              className="c15"
+              className="c16"
             >
               <ReplacementVariableEditorMock
                 content="Test title"
@@ -8607,7 +9242,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
                       "componentStyle": ComponentStyle {
                         "componentId": "ProgressBar-sc-9g9yx6-0",
                         "isStatic": false,
-                        "lastClassName": "c20",
+                        "lastClassName": "c21",
                         "rules": Array [
                           "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
                           [Function],
@@ -8649,7 +9284,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
                 >
                   <progress
                     aria-hidden="true"
-                    className="c16"
+                    className="c17"
                     max={600}
                     value={0}
                   />
@@ -8667,7 +9302,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
                       "componentStyle": ComponentStyle {
                         "componentId": "Label__SimulatedLabel-mitdcc-0",
                         "isStatic": false,
-                        "lastClassName": "c17",
+                        "lastClassName": "c18",
                         "rules": Array [
                           "flex:1 1 200px;min-width:200px;cursor:pointer;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;margin:4px 0;color:#303030;font-weight:500;",
                         ],
@@ -8687,7 +9322,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
                   onClick={[Function]}
                 >
                   <div
-                    className="c17"
+                    className="c18"
                     id="snippet-editor-field-8-slug"
                     onClick={[Function]}
                   >
@@ -8710,7 +9345,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
                       "componentStyle": ComponentStyle {
                         "componentId": "helpers-sc-15q2ybx-0",
                         "isStatic": false,
-                        "lastClassName": "c18",
+                        "lastClassName": "c19",
                         "rules": Array [
                           "flex:0 1 100%;border:1px solid ",
                           [Function],
@@ -8742,7 +9377,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
                   onClick={[Function]}
                 >
                   <div
-                    className="c18"
+                    className="c19"
                     onClick={[Function]}
                   >
                     <SnippetEditorFields__SlugInput
@@ -8762,7 +9397,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
                             "componentStyle": ComponentStyle {
                               "componentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
                               "isStatic": false,
-                              "lastClassName": "c19",
+                              "lastClassName": "c20",
                               "rules": Array [
                                 "border:none;width:100%;height:inherit;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;&:focus{outline:0;}",
                               ],
@@ -8786,7 +9421,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
                       >
                         <input
                           aria-labelledby="snippet-editor-field-8-slug"
-                          className="c19"
+                          className="c20"
                           id="yoast-google-preview-slug"
                           onBlur={[Function]}
                           onChange={[Function]}
@@ -8843,7 +9478,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
                       "componentStyle": ComponentStyle {
                         "componentId": "ProgressBar-sc-9g9yx6-0",
                         "isStatic": false,
-                        "lastClassName": "c20",
+                        "lastClassName": "c21",
                         "rules": Array [
                           "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
                           [Function],
@@ -8885,7 +9520,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
                 >
                   <progress
                     aria-hidden="true"
-                    className="c20"
+                    className="c21"
                     max={156}
                     value={42}
                   />
@@ -8946,7 +9581,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
               "componentStyle": ComponentStyle {
                 "componentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
                 "isStatic": false,
-                "lastClassName": "c21",
+                "lastClassName": "c22",
                 "rules": Array [
                   "color:",
                   [Function],
@@ -9036,7 +9671,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
           type="button"
         >
           <button
-            className="c21"
+            className="c22"
             onClick={[Function]}
             type="button"
           >
@@ -9050,6 +9685,13 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
 `;
 
 exports[`SnippetEditor highlights a focused field 1`] = `
+.c14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c4 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -9182,7 +9824,7 @@ exports[`SnippetEditor highlights a focused field 1`] = `
   cursor: pointer;
 }
 
-.c14 {
+.c15 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -9224,17 +9866,17 @@ exports[`SnippetEditor highlights a focused field 1`] = `
   padding-left: 8px;
 }
 
-.c14:active {
+.c15:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c14::-moz-focus-inner {
+.c15::-moz-focus-inner {
   border-width: 0;
 }
 
-.c14:focus {
+.c15:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -9242,24 +9884,24 @@ exports[`SnippetEditor highlights a focused field 1`] = `
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c14:hover {
+.c15:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c14 svg {
+.c15 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
-.c14 svg {
+.c15 svg {
   margin-right: 7px;
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c14::after {
+  .c15::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -9384,6 +10026,24 @@ exports[`SnippetEditor highlights a focused field 1`] = `
           </div>
         </div>
       </div>
+      <div
+        className="c5 yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
       <div
         className="c5"
       >
@@ -9414,13 +10074,38 @@ exports[`SnippetEditor highlights a focused field 1`] = `
             
             Test description, %%replacement_variable%%
           </div>
+        </div>
+      </div>
+      <div
+        className="c5 yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        <div
+          className="c14"
+        >
+          
+          
+          
         </div>
       </div>
     </div>
   </section>
   <button
     aria-expanded={false}
-    className="c14"
+    className="c15"
     onClick={[Function]}
     type="button"
   >
@@ -9444,6 +10129,13 @@ exports[`SnippetEditor highlights a focused field 1`] = `
 `;
 
 exports[`SnippetEditor highlights a hovered field 1`] = `
+.c14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c4 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -9576,7 +10268,7 @@ exports[`SnippetEditor highlights a hovered field 1`] = `
   cursor: pointer;
 }
 
-.c14 {
+.c15 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -9618,17 +10310,17 @@ exports[`SnippetEditor highlights a hovered field 1`] = `
   padding-left: 8px;
 }
 
-.c14:active {
+.c15:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c14::-moz-focus-inner {
+.c15::-moz-focus-inner {
   border-width: 0;
 }
 
-.c14:focus {
+.c15:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -9636,24 +10328,24 @@ exports[`SnippetEditor highlights a hovered field 1`] = `
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c14:hover {
+.c15:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c14 svg {
+.c15 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
-.c14 svg {
+.c15 svg {
   margin-right: 7px;
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c14::after {
+  .c15::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -9778,6 +10470,24 @@ exports[`SnippetEditor highlights a hovered field 1`] = `
           </div>
         </div>
       </div>
+      <div
+        className="c5 yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
       <div
         className="c5"
       >
@@ -9808,13 +10518,38 @@ exports[`SnippetEditor highlights a hovered field 1`] = `
             
             Test description, %%replacement_variable%%
           </div>
+        </div>
+      </div>
+      <div
+        className="c5 yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        <div
+          className="c14"
+        >
+          
+          
+          
         </div>
       </div>
     </div>
   </section>
   <button
     aria-expanded={false}
-    className="c14"
+    className="c15"
     onClick={[Function]}
     type="button"
   >
@@ -9838,7 +10573,7 @@ exports[`SnippetEditor highlights a hovered field 1`] = `
 `;
 
 exports[`SnippetEditor highlights the active ReplacementVariableEditor when calling setFieldFocus 1`] = `
-.c18 {
+.c19 {
   -webkit-flex: 1 1 200px;
   -ms-flex: 1 1 200px;
   flex: 1 1 200px;
@@ -9851,7 +10586,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
   font-weight: 500;
 }
 
-.c17 {
+.c18 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -9864,26 +10599,26 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
   border: 1px solid #ddd;
 }
 
-.c17::-webkit-progress-bar {
+.c18::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c17::-webkit-progress-value {
+.c18::-webkit-progress-value {
   background-color: #dc3232;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c17::-moz-progress-bar {
+.c18::-moz-progress-bar {
   background-color: #dc3232;
 }
 
-.c17::-ms-fill {
+.c18::-ms-fill {
   background-color: #dc3232;
   border: 0;
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -9896,29 +10631,36 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
   border: 1px solid #ddd;
 }
 
-.c21::-webkit-progress-bar {
+.c22::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c21::-webkit-progress-value {
+.c22::-webkit-progress-value {
   background-color: #ee7c1b;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c21::-moz-progress-bar {
+.c22::-moz-progress-bar {
   background-color: #ee7c1b;
 }
 
-.c21::-ms-fill {
+.c22::-ms-fill {
   background-color: #ee7c1b;
   border: 0;
 }
 
-.c16 {
+.c17 {
   padding: 0 20px;
 }
 
+.c15 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c4 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -10023,7 +10765,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
   vertical-align: middle;
 }
 
-.c20 {
+.c21 {
   border: none;
   width: 100%;
   height: inherit;
@@ -10033,11 +10775,11 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
   color: inherit;
 }
 
-.c20:focus {
+.c21:focus {
   outline: 0;
 }
 
-.c19 {
+.c20 {
   -webkit-flex: 0 1 100%;
   -ms-flex: 0 1 100%;
   flex: 0 1 100%;
@@ -10056,7 +10798,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
   cursor: text;
 }
 
-.c19::before {
+.c20::before {
   display: block;
   position: absolute;
   top: -1px;
@@ -10096,7 +10838,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
   cursor: pointer;
 }
 
-.c15 {
+.c16 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -10138,17 +10880,17 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
   padding-left: 8px;
 }
 
-.c15:active {
+.c16:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c15::-moz-focus-inner {
+.c16::-moz-focus-inner {
   border-width: 0;
 }
 
-.c15:focus {
+.c16:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -10156,23 +10898,23 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c15:hover {
+.c16:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c15 svg {
+.c16 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
-.c15 svg {
+.c16 svg {
   margin-right: 7px;
 }
 
-.c22 {
+.c23 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -10212,17 +10954,17 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
   margin-top: 24px;
 }
 
-.c22:active {
+.c23:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c22::-moz-focus-inner {
+.c23::-moz-focus-inner {
   border-width: 0;
 }
 
-.c22:focus {
+.c23:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -10230,13 +10972,13 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c22:hover {
+.c23:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c22 svg {
+.c23 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -10272,7 +11014,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c15::after {
+  .c16::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -10280,7 +11022,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c22::after {
+  .c23::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -10317,6 +11059,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
   onChangeAnalysisData={[Function]}
   recommendedReplacementVariables={Array []}
   replacementVariables={Array []}
+  shoppingData={Object {}}
   showCloseButton={true}
   titleLengthProgress={
     Object {
@@ -10661,6 +11404,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
         onMouseUp={[Function]}
+        shoppingData={Object {}}
         title="Test title"
         url="example.org/test-slug"
         wordsToHighlight={Array []}
@@ -11056,6 +11800,57 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--desktop"
+                >
+                  <StyledComponent
+                    className="yoast-shopping-data-preview--desktop"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5 yoast-shopping-data-preview--desktop"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Shopping data preview:
+                        </span>
+                      </ScreenReaderText>
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
                 <SnippetPreview__MobilePartContainer>
                   <StyledComponent
                     forwardedComponent={
@@ -11201,6 +11996,92 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--mobile"
+                >
+                  <StyledComponent
+                    className="yoast-shopping-data-preview--mobile"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5 yoast-shopping-data-preview--mobile"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Shopping data preview:
+                        </span>
+                      </ScreenReaderText>
+                      <ProductDataMobile
+                        shoppingData={Object {}}
+                      >
+                        <ProductDataMobile__ProductData>
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                  "isStatic": false,
+                                  "lastClassName": "c15",
+                                  "rules": Array [
+                                    "display:flex;",
+                                  ],
+                                },
+                                "displayName": "ProductDataMobile__ProductData",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                "target": "div",
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                              }
+                            }
+                            forwardedRef={null}
+                          >
+                            <div
+                              className="c15"
+                            />
+                          </StyledComponent>
+                        </ProductDataMobile__ProductData>
+                      </ProductDataMobile>
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
               </div>
             </StyledComponent>
           </SnippetPreview__MobileContainer>
@@ -11259,7 +12140,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
               "componentStyle": ComponentStyle {
                 "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
                 "isStatic": false,
-                "lastClassName": "c15",
+                "lastClassName": "c16",
                 "rules": Array [
                   "color:",
                   [Function],
@@ -11356,7 +12237,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
         >
           <button
             aria-expanded={true}
-            className="c15"
+            className="c16"
             onClick={[Function]}
             type="button"
           >
@@ -11690,7 +12571,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
                 "componentStyle": ComponentStyle {
                   "componentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
                   "isStatic": false,
-                  "lastClassName": "c16",
+                  "lastClassName": "c17",
                   "rules": Array [
                     "padding:",
                     [Function],
@@ -11711,7 +12592,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
             padding="0 20px"
           >
             <section
-              className="c16"
+              className="c17"
             >
               <ReplacementVariableEditorMock
                 content="Test title"
@@ -11757,7 +12638,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
                       "componentStyle": ComponentStyle {
                         "componentId": "ProgressBar-sc-9g9yx6-0",
                         "isStatic": false,
-                        "lastClassName": "c21",
+                        "lastClassName": "c22",
                         "rules": Array [
                           "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
                           [Function],
@@ -11799,7 +12680,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
                 >
                   <progress
                     aria-hidden="true"
-                    className="c17"
+                    className="c18"
                     max={600}
                     value={0}
                   />
@@ -11817,7 +12698,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
                       "componentStyle": ComponentStyle {
                         "componentId": "Label__SimulatedLabel-mitdcc-0",
                         "isStatic": false,
-                        "lastClassName": "c18",
+                        "lastClassName": "c19",
                         "rules": Array [
                           "flex:1 1 200px;min-width:200px;cursor:pointer;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;margin:4px 0;color:#303030;font-weight:500;",
                         ],
@@ -11837,7 +12718,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
                   onClick={[Function]}
                 >
                   <div
-                    className="c18"
+                    className="c19"
                     id="snippet-editor-field-5-slug"
                     onClick={[Function]}
                   >
@@ -11860,7 +12741,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
                       "componentStyle": ComponentStyle {
                         "componentId": "helpers-sc-15q2ybx-0",
                         "isStatic": false,
-                        "lastClassName": "c19",
+                        "lastClassName": "c20",
                         "rules": Array [
                           "flex:0 1 100%;border:1px solid ",
                           [Function],
@@ -11892,7 +12773,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
                   onClick={[Function]}
                 >
                   <div
-                    className="c19"
+                    className="c20"
                     onClick={[Function]}
                   >
                     <SnippetEditorFields__SlugInput
@@ -11912,7 +12793,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
                             "componentStyle": ComponentStyle {
                               "componentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
                               "isStatic": false,
-                              "lastClassName": "c20",
+                              "lastClassName": "c21",
                               "rules": Array [
                                 "border:none;width:100%;height:inherit;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;&:focus{outline:0;}",
                               ],
@@ -11936,7 +12817,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
                       >
                         <input
                           aria-labelledby="snippet-editor-field-5-slug"
-                          className="c20"
+                          className="c21"
                           id="yoast-google-preview-slug"
                           onBlur={[Function]}
                           onChange={[Function]}
@@ -11993,7 +12874,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
                       "componentStyle": ComponentStyle {
                         "componentId": "ProgressBar-sc-9g9yx6-0",
                         "isStatic": false,
-                        "lastClassName": "c21",
+                        "lastClassName": "c22",
                         "rules": Array [
                           "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
                           [Function],
@@ -12035,7 +12916,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
                 >
                   <progress
                     aria-hidden="true"
-                    className="c21"
+                    className="c22"
                     max={156}
                     value={42}
                   />
@@ -12096,7 +12977,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
               "componentStyle": ComponentStyle {
                 "componentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
                 "isStatic": false,
-                "lastClassName": "c22",
+                "lastClassName": "c23",
                 "rules": Array [
                   "color:",
                   [Function],
@@ -12186,7 +13067,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
           type="button"
         >
           <button
-            className="c22"
+            className="c23"
             onClick={[Function]}
             type="button"
           >
@@ -12200,7 +13081,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
 `;
 
 exports[`SnippetEditor highlights the hovered field when onMouseEnter() is called 1`] = `
-.c18 {
+.c19 {
   -webkit-flex: 1 1 200px;
   -ms-flex: 1 1 200px;
   flex: 1 1 200px;
@@ -12213,7 +13094,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
   font-weight: 500;
 }
 
-.c17 {
+.c18 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -12226,26 +13107,26 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
   border: 1px solid #ddd;
 }
 
-.c17::-webkit-progress-bar {
+.c18::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c17::-webkit-progress-value {
+.c18::-webkit-progress-value {
   background-color: #dc3232;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c17::-moz-progress-bar {
+.c18::-moz-progress-bar {
   background-color: #dc3232;
 }
 
-.c17::-ms-fill {
+.c18::-ms-fill {
   background-color: #dc3232;
   border: 0;
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -12258,29 +13139,36 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
   border: 1px solid #ddd;
 }
 
-.c21::-webkit-progress-bar {
+.c22::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c21::-webkit-progress-value {
+.c22::-webkit-progress-value {
   background-color: #ee7c1b;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c21::-moz-progress-bar {
+.c22::-moz-progress-bar {
   background-color: #ee7c1b;
 }
 
-.c21::-ms-fill {
+.c22::-ms-fill {
   background-color: #ee7c1b;
   border: 0;
 }
 
-.c16 {
+.c17 {
   padding: 0 20px;
 }
 
+.c15 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c4 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -12385,7 +13273,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
   vertical-align: middle;
 }
 
-.c20 {
+.c21 {
   border: none;
   width: 100%;
   height: inherit;
@@ -12395,11 +13283,11 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
   color: inherit;
 }
 
-.c20:focus {
+.c21:focus {
   outline: 0;
 }
 
-.c19 {
+.c20 {
   -webkit-flex: 0 1 100%;
   -ms-flex: 0 1 100%;
   flex: 0 1 100%;
@@ -12418,7 +13306,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
   cursor: text;
 }
 
-.c19::before {
+.c20::before {
   display: block;
   position: absolute;
   top: -1px;
@@ -12458,7 +13346,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
   cursor: pointer;
 }
 
-.c15 {
+.c16 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -12500,17 +13388,17 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
   padding-left: 8px;
 }
 
-.c15:active {
+.c16:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c15::-moz-focus-inner {
+.c16::-moz-focus-inner {
   border-width: 0;
 }
 
-.c15:focus {
+.c16:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -12518,23 +13406,23 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c15:hover {
+.c16:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c15 svg {
+.c16 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
-.c15 svg {
+.c16 svg {
   margin-right: 7px;
 }
 
-.c22 {
+.c23 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -12574,17 +13462,17 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
   margin-top: 24px;
 }
 
-.c22:active {
+.c23:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c22::-moz-focus-inner {
+.c23::-moz-focus-inner {
   border-width: 0;
 }
 
-.c22:focus {
+.c23:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -12592,13 +13480,13 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c22:hover {
+.c23:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c22 svg {
+.c23 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -12634,7 +13522,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c15::after {
+  .c16::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -12642,7 +13530,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c22::after {
+  .c23::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -12679,6 +13567,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
   onChangeAnalysisData={[Function]}
   recommendedReplacementVariables={Array []}
   replacementVariables={Array []}
+  shoppingData={Object {}}
   showCloseButton={true}
   titleLengthProgress={
     Object {
@@ -13023,6 +13912,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
         onMouseUp={[Function]}
+        shoppingData={Object {}}
         title="Test title"
         url="example.org/test-slug"
         wordsToHighlight={Array []}
@@ -13418,6 +14308,57 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--desktop"
+                >
+                  <StyledComponent
+                    className="yoast-shopping-data-preview--desktop"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5 yoast-shopping-data-preview--desktop"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Shopping data preview:
+                        </span>
+                      </ScreenReaderText>
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
                 <SnippetPreview__MobilePartContainer>
                   <StyledComponent
                     forwardedComponent={
@@ -13563,6 +14504,92 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--mobile"
+                >
+                  <StyledComponent
+                    className="yoast-shopping-data-preview--mobile"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5 yoast-shopping-data-preview--mobile"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Shopping data preview:
+                        </span>
+                      </ScreenReaderText>
+                      <ProductDataMobile
+                        shoppingData={Object {}}
+                      >
+                        <ProductDataMobile__ProductData>
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                  "isStatic": false,
+                                  "lastClassName": "c15",
+                                  "rules": Array [
+                                    "display:flex;",
+                                  ],
+                                },
+                                "displayName": "ProductDataMobile__ProductData",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                "target": "div",
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                              }
+                            }
+                            forwardedRef={null}
+                          >
+                            <div
+                              className="c15"
+                            />
+                          </StyledComponent>
+                        </ProductDataMobile__ProductData>
+                      </ProductDataMobile>
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
               </div>
             </StyledComponent>
           </SnippetPreview__MobileContainer>
@@ -13621,7 +14648,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
               "componentStyle": ComponentStyle {
                 "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
                 "isStatic": false,
-                "lastClassName": "c15",
+                "lastClassName": "c16",
                 "rules": Array [
                   "color:",
                   [Function],
@@ -13718,7 +14745,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
         >
           <button
             aria-expanded={true}
-            className="c15"
+            className="c16"
             onClick={[Function]}
             type="button"
           >
@@ -14052,7 +15079,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
                 "componentStyle": ComponentStyle {
                   "componentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
                   "isStatic": false,
-                  "lastClassName": "c16",
+                  "lastClassName": "c17",
                   "rules": Array [
                     "padding:",
                     [Function],
@@ -14073,7 +15100,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
             padding="0 20px"
           >
             <section
-              className="c16"
+              className="c17"
             >
               <ReplacementVariableEditorMock
                 content="Test title"
@@ -14119,7 +15146,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
                       "componentStyle": ComponentStyle {
                         "componentId": "ProgressBar-sc-9g9yx6-0",
                         "isStatic": false,
-                        "lastClassName": "c21",
+                        "lastClassName": "c22",
                         "rules": Array [
                           "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
                           [Function],
@@ -14161,7 +15188,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
                 >
                   <progress
                     aria-hidden="true"
-                    className="c17"
+                    className="c18"
                     max={600}
                     value={0}
                   />
@@ -14179,7 +15206,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
                       "componentStyle": ComponentStyle {
                         "componentId": "Label__SimulatedLabel-mitdcc-0",
                         "isStatic": false,
-                        "lastClassName": "c18",
+                        "lastClassName": "c19",
                         "rules": Array [
                           "flex:1 1 200px;min-width:200px;cursor:pointer;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;margin:4px 0;color:#303030;font-weight:500;",
                         ],
@@ -14199,7 +15226,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
                   onClick={[Function]}
                 >
                   <div
-                    className="c18"
+                    className="c19"
                     id="snippet-editor-field-4-slug"
                     onClick={[Function]}
                   >
@@ -14222,7 +15249,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
                       "componentStyle": ComponentStyle {
                         "componentId": "helpers-sc-15q2ybx-0",
                         "isStatic": false,
-                        "lastClassName": "c19",
+                        "lastClassName": "c20",
                         "rules": Array [
                           "flex:0 1 100%;border:1px solid ",
                           [Function],
@@ -14254,7 +15281,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
                   onClick={[Function]}
                 >
                   <div
-                    className="c19"
+                    className="c20"
                     onClick={[Function]}
                   >
                     <SnippetEditorFields__SlugInput
@@ -14274,7 +15301,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
                             "componentStyle": ComponentStyle {
                               "componentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
                               "isStatic": false,
-                              "lastClassName": "c20",
+                              "lastClassName": "c21",
                               "rules": Array [
                                 "border:none;width:100%;height:inherit;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;&:focus{outline:0;}",
                               ],
@@ -14298,7 +15325,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
                       >
                         <input
                           aria-labelledby="snippet-editor-field-4-slug"
-                          className="c20"
+                          className="c21"
                           id="yoast-google-preview-slug"
                           onBlur={[Function]}
                           onChange={[Function]}
@@ -14355,7 +15382,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
                       "componentStyle": ComponentStyle {
                         "componentId": "ProgressBar-sc-9g9yx6-0",
                         "isStatic": false,
-                        "lastClassName": "c21",
+                        "lastClassName": "c22",
                         "rules": Array [
                           "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
                           [Function],
@@ -14397,7 +15424,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
                 >
                   <progress
                     aria-hidden="true"
-                    className="c21"
+                    className="c22"
                     max={156}
                     value={42}
                   />
@@ -14458,7 +15485,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
               "componentStyle": ComponentStyle {
                 "componentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
                 "isStatic": false,
-                "lastClassName": "c22",
+                "lastClassName": "c23",
                 "rules": Array [
                   "color:",
                   [Function],
@@ -14548,7 +15575,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
           type="button"
         >
           <button
-            className="c22"
+            className="c23"
             onClick={[Function]}
             type="button"
           >
@@ -14562,7 +15589,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseEnter() is calle
 `;
 
 exports[`SnippetEditor opens when calling open() 1`] = `
-.c17 {
+.c18 {
   -webkit-flex: 1 1 200px;
   -ms-flex: 1 1 200px;
   flex: 1 1 200px;
@@ -14575,7 +15602,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
   font-weight: 500;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -14588,26 +15615,26 @@ exports[`SnippetEditor opens when calling open() 1`] = `
   border: 1px solid #ddd;
 }
 
-.c16::-webkit-progress-bar {
+.c17::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c16::-webkit-progress-value {
+.c17::-webkit-progress-value {
   background-color: #dc3232;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c16::-moz-progress-bar {
+.c17::-moz-progress-bar {
   background-color: #dc3232;
 }
 
-.c16::-ms-fill {
+.c17::-ms-fill {
   background-color: #dc3232;
   border: 0;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -14620,29 +15647,36 @@ exports[`SnippetEditor opens when calling open() 1`] = `
   border: 1px solid #ddd;
 }
 
-.c20::-webkit-progress-bar {
+.c21::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c20::-webkit-progress-value {
+.c21::-webkit-progress-value {
   background-color: #ee7c1b;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c20::-moz-progress-bar {
+.c21::-moz-progress-bar {
   background-color: #ee7c1b;
 }
 
-.c20::-ms-fill {
+.c21::-ms-fill {
   background-color: #ee7c1b;
   border: 0;
 }
 
-.c15 {
+.c16 {
   padding: 0 20px;
 }
 
+.c14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c4 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -14747,7 +15781,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
   vertical-align: middle;
 }
 
-.c19 {
+.c20 {
   border: none;
   width: 100%;
   height: inherit;
@@ -14757,11 +15791,11 @@ exports[`SnippetEditor opens when calling open() 1`] = `
   color: inherit;
 }
 
-.c19:focus {
+.c20:focus {
   outline: 0;
 }
 
-.c18 {
+.c19 {
   -webkit-flex: 0 1 100%;
   -ms-flex: 0 1 100%;
   flex: 0 1 100%;
@@ -14780,7 +15814,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
   cursor: text;
 }
 
-.c18::before {
+.c19::before {
   display: block;
   position: absolute;
   top: -1px;
@@ -14820,7 +15854,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
   cursor: pointer;
 }
 
-.c14 {
+.c15 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -14862,17 +15896,17 @@ exports[`SnippetEditor opens when calling open() 1`] = `
   padding-left: 8px;
 }
 
-.c14:active {
+.c15:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c14::-moz-focus-inner {
+.c15::-moz-focus-inner {
   border-width: 0;
 }
 
-.c14:focus {
+.c15:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -14880,23 +15914,23 @@ exports[`SnippetEditor opens when calling open() 1`] = `
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c14:hover {
+.c15:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c14 svg {
+.c15 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
-.c14 svg {
+.c15 svg {
   margin-right: 7px;
 }
 
-.c21 {
+.c22 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -14936,17 +15970,17 @@ exports[`SnippetEditor opens when calling open() 1`] = `
   margin-top: 24px;
 }
 
-.c21:active {
+.c22:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c21::-moz-focus-inner {
+.c22::-moz-focus-inner {
   border-width: 0;
 }
 
-.c21:focus {
+.c22:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -14954,20 +15988,20 @@ exports[`SnippetEditor opens when calling open() 1`] = `
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c21:hover {
+.c22:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c21 svg {
+.c22 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c14::after {
+  .c15::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -14975,7 +16009,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c21::after {
+  .c22::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -15012,6 +16046,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
   onChangeAnalysisData={[Function]}
   recommendedReplacementVariables={Array []}
   replacementVariables={Array []}
+  shoppingData={Object {}}
   showCloseButton={true}
   titleLengthProgress={
     Object {
@@ -15356,6 +16391,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
         onMouseUp={[Function]}
+        shoppingData={Object {}}
         title="Test title"
         url="example.org/test-slug"
         wordsToHighlight={Array []}
@@ -15751,6 +16787,57 @@ exports[`SnippetEditor opens when calling open() 1`] = `
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--desktop"
+                >
+                  <StyledComponent
+                    className="yoast-shopping-data-preview--desktop"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5 yoast-shopping-data-preview--desktop"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Shopping data preview:
+                        </span>
+                      </ScreenReaderText>
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
                 <SnippetPreview__MobilePartContainer>
                   <StyledComponent
                     forwardedComponent={
@@ -15887,6 +16974,92 @@ exports[`SnippetEditor opens when calling open() 1`] = `
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--mobile"
+                >
+                  <StyledComponent
+                    className="yoast-shopping-data-preview--mobile"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5 yoast-shopping-data-preview--mobile"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Shopping data preview:
+                        </span>
+                      </ScreenReaderText>
+                      <ProductDataMobile
+                        shoppingData={Object {}}
+                      >
+                        <ProductDataMobile__ProductData>
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                  "isStatic": false,
+                                  "lastClassName": "c14",
+                                  "rules": Array [
+                                    "display:flex;",
+                                  ],
+                                },
+                                "displayName": "ProductDataMobile__ProductData",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                "target": "div",
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                              }
+                            }
+                            forwardedRef={null}
+                          >
+                            <div
+                              className="c14"
+                            />
+                          </StyledComponent>
+                        </ProductDataMobile__ProductData>
+                      </ProductDataMobile>
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
               </div>
             </StyledComponent>
           </SnippetPreview__MobileContainer>
@@ -15945,7 +17118,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
               "componentStyle": ComponentStyle {
                 "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
                 "isStatic": false,
-                "lastClassName": "c14",
+                "lastClassName": "c15",
                 "rules": Array [
                   "color:",
                   [Function],
@@ -16042,7 +17215,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
         >
           <button
             aria-expanded={true}
-            className="c14"
+            className="c15"
             onClick={[Function]}
             type="button"
           >
@@ -16376,7 +17549,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
                 "componentStyle": ComponentStyle {
                   "componentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
                   "isStatic": false,
-                  "lastClassName": "c15",
+                  "lastClassName": "c16",
                   "rules": Array [
                     "padding:",
                     [Function],
@@ -16397,7 +17570,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
             padding="0 20px"
           >
             <section
-              className="c15"
+              className="c16"
             >
               <ReplacementVariableEditorMock
                 content="Test title"
@@ -16443,7 +17616,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
                       "componentStyle": ComponentStyle {
                         "componentId": "ProgressBar-sc-9g9yx6-0",
                         "isStatic": false,
-                        "lastClassName": "c20",
+                        "lastClassName": "c21",
                         "rules": Array [
                           "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
                           [Function],
@@ -16485,7 +17658,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
                 >
                   <progress
                     aria-hidden="true"
-                    className="c16"
+                    className="c17"
                     max={600}
                     value={0}
                   />
@@ -16503,7 +17676,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
                       "componentStyle": ComponentStyle {
                         "componentId": "Label__SimulatedLabel-mitdcc-0",
                         "isStatic": false,
-                        "lastClassName": "c17",
+                        "lastClassName": "c18",
                         "rules": Array [
                           "flex:1 1 200px;min-width:200px;cursor:pointer;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;margin:4px 0;color:#303030;font-weight:500;",
                         ],
@@ -16523,7 +17696,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
                   onClick={[Function]}
                 >
                   <div
-                    className="c17"
+                    className="c18"
                     id="snippet-editor-field-2-slug"
                     onClick={[Function]}
                   >
@@ -16546,7 +17719,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
                       "componentStyle": ComponentStyle {
                         "componentId": "helpers-sc-15q2ybx-0",
                         "isStatic": false,
-                        "lastClassName": "c18",
+                        "lastClassName": "c19",
                         "rules": Array [
                           "flex:0 1 100%;border:1px solid ",
                           [Function],
@@ -16578,7 +17751,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
                   onClick={[Function]}
                 >
                   <div
-                    className="c18"
+                    className="c19"
                     onClick={[Function]}
                   >
                     <SnippetEditorFields__SlugInput
@@ -16598,7 +17771,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
                             "componentStyle": ComponentStyle {
                               "componentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
                               "isStatic": false,
-                              "lastClassName": "c19",
+                              "lastClassName": "c20",
                               "rules": Array [
                                 "border:none;width:100%;height:inherit;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;&:focus{outline:0;}",
                               ],
@@ -16622,7 +17795,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
                       >
                         <input
                           aria-labelledby="snippet-editor-field-2-slug"
-                          className="c19"
+                          className="c20"
                           id="yoast-google-preview-slug"
                           onBlur={[Function]}
                           onChange={[Function]}
@@ -16679,7 +17852,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
                       "componentStyle": ComponentStyle {
                         "componentId": "ProgressBar-sc-9g9yx6-0",
                         "isStatic": false,
-                        "lastClassName": "c20",
+                        "lastClassName": "c21",
                         "rules": Array [
                           "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
                           [Function],
@@ -16721,7 +17894,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
                 >
                   <progress
                     aria-hidden="true"
-                    className="c20"
+                    className="c21"
                     max={156}
                     value={42}
                   />
@@ -16782,7 +17955,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
               "componentStyle": ComponentStyle {
                 "componentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
                 "isStatic": false,
-                "lastClassName": "c21",
+                "lastClassName": "c22",
                 "rules": Array [
                   "color:",
                   [Function],
@@ -16872,7 +18045,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
           type="button"
         >
           <button
-            className="c21"
+            className="c22"
             onClick={[Function]}
             type="button"
           >
@@ -16886,7 +18059,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
 `;
 
 exports[`SnippetEditor passes replacement variables to the title and description editor 1`] = `
-.c17 {
+.c18 {
   -webkit-flex: 1 1 200px;
   -ms-flex: 1 1 200px;
   flex: 1 1 200px;
@@ -16899,7 +18072,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
   font-weight: 500;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -16912,26 +18085,26 @@ exports[`SnippetEditor passes replacement variables to the title and description
   border: 1px solid #ddd;
 }
 
-.c16::-webkit-progress-bar {
+.c17::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c16::-webkit-progress-value {
+.c17::-webkit-progress-value {
   background-color: #dc3232;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c16::-moz-progress-bar {
+.c17::-moz-progress-bar {
   background-color: #dc3232;
 }
 
-.c16::-ms-fill {
+.c17::-ms-fill {
   background-color: #dc3232;
   border: 0;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -16944,29 +18117,36 @@ exports[`SnippetEditor passes replacement variables to the title and description
   border: 1px solid #ddd;
 }
 
-.c20::-webkit-progress-bar {
+.c21::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c20::-webkit-progress-value {
+.c21::-webkit-progress-value {
   background-color: #ee7c1b;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c20::-moz-progress-bar {
+.c21::-moz-progress-bar {
   background-color: #ee7c1b;
 }
 
-.c20::-ms-fill {
+.c21::-ms-fill {
   background-color: #ee7c1b;
   border: 0;
 }
 
-.c15 {
+.c16 {
   padding: 0 20px;
 }
 
+.c14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c4 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -17071,7 +18251,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
   vertical-align: middle;
 }
 
-.c19 {
+.c20 {
   border: none;
   width: 100%;
   height: inherit;
@@ -17081,11 +18261,11 @@ exports[`SnippetEditor passes replacement variables to the title and description
   color: inherit;
 }
 
-.c19:focus {
+.c20:focus {
   outline: 0;
 }
 
-.c18 {
+.c19 {
   -webkit-flex: 0 1 100%;
   -ms-flex: 0 1 100%;
   flex: 0 1 100%;
@@ -17104,7 +18284,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
   cursor: text;
 }
 
-.c18::before {
+.c19::before {
   display: block;
   position: absolute;
   top: -1px;
@@ -17144,7 +18324,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
   cursor: pointer;
 }
 
-.c14 {
+.c15 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -17186,17 +18366,17 @@ exports[`SnippetEditor passes replacement variables to the title and description
   padding-left: 8px;
 }
 
-.c14:active {
+.c15:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c14::-moz-focus-inner {
+.c15::-moz-focus-inner {
   border-width: 0;
 }
 
-.c14:focus {
+.c15:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -17204,23 +18384,23 @@ exports[`SnippetEditor passes replacement variables to the title and description
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c14:hover {
+.c15:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c14 svg {
+.c15 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
-.c14 svg {
+.c15 svg {
   margin-right: 7px;
 }
 
-.c21 {
+.c22 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -17260,17 +18440,17 @@ exports[`SnippetEditor passes replacement variables to the title and description
   margin-top: 24px;
 }
 
-.c21:active {
+.c22:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c21::-moz-focus-inner {
+.c22::-moz-focus-inner {
   border-width: 0;
 }
 
-.c21:focus {
+.c22:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -17278,20 +18458,20 @@ exports[`SnippetEditor passes replacement variables to the title and description
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c21:hover {
+.c22:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c21 svg {
+.c22 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c14::after {
+  .c15::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -17299,7 +18479,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c21::after {
+  .c22::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -17351,6 +18531,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
       },
     ]
   }
+  shoppingData={Object {}}
   showCloseButton={true}
   titleLengthProgress={
     Object {
@@ -17695,6 +18876,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
         onMouseUp={[Function]}
+        shoppingData={Object {}}
         title="Test title"
         url="example.org/test-slug"
         wordsToHighlight={Array []}
@@ -18090,6 +19272,57 @@ exports[`SnippetEditor passes replacement variables to the title and description
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--desktop"
+                >
+                  <StyledComponent
+                    className="yoast-shopping-data-preview--desktop"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5 yoast-shopping-data-preview--desktop"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Shopping data preview:
+                        </span>
+                      </ScreenReaderText>
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
                 <SnippetPreview__MobilePartContainer>
                   <StyledComponent
                     forwardedComponent={
@@ -18226,6 +19459,92 @@ exports[`SnippetEditor passes replacement variables to the title and description
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--mobile"
+                >
+                  <StyledComponent
+                    className="yoast-shopping-data-preview--mobile"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5 yoast-shopping-data-preview--mobile"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Shopping data preview:
+                        </span>
+                      </ScreenReaderText>
+                      <ProductDataMobile
+                        shoppingData={Object {}}
+                      >
+                        <ProductDataMobile__ProductData>
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                  "isStatic": false,
+                                  "lastClassName": "c14",
+                                  "rules": Array [
+                                    "display:flex;",
+                                  ],
+                                },
+                                "displayName": "ProductDataMobile__ProductData",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                "target": "div",
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                              }
+                            }
+                            forwardedRef={null}
+                          >
+                            <div
+                              className="c14"
+                            />
+                          </StyledComponent>
+                        </ProductDataMobile__ProductData>
+                      </ProductDataMobile>
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
               </div>
             </StyledComponent>
           </SnippetPreview__MobileContainer>
@@ -18284,7 +19603,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
               "componentStyle": ComponentStyle {
                 "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
                 "isStatic": false,
-                "lastClassName": "c14",
+                "lastClassName": "c15",
                 "rules": Array [
                   "color:",
                   [Function],
@@ -18381,7 +19700,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
         >
           <button
             aria-expanded={true}
-            className="c14"
+            className="c15"
             onClick={[Function]}
             type="button"
           >
@@ -18730,7 +20049,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
                 "componentStyle": ComponentStyle {
                   "componentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
                   "isStatic": false,
-                  "lastClassName": "c15",
+                  "lastClassName": "c16",
                   "rules": Array [
                     "padding:",
                     [Function],
@@ -18751,7 +20070,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
             padding="0 20px"
           >
             <section
-              className="c15"
+              className="c16"
             >
               <ReplacementVariableEditorMock
                 content="Test title"
@@ -18812,7 +20131,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
                       "componentStyle": ComponentStyle {
                         "componentId": "ProgressBar-sc-9g9yx6-0",
                         "isStatic": false,
-                        "lastClassName": "c20",
+                        "lastClassName": "c21",
                         "rules": Array [
                           "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
                           [Function],
@@ -18854,7 +20173,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
                 >
                   <progress
                     aria-hidden="true"
-                    className="c16"
+                    className="c17"
                     max={600}
                     value={0}
                   />
@@ -18872,7 +20191,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
                       "componentStyle": ComponentStyle {
                         "componentId": "Label__SimulatedLabel-mitdcc-0",
                         "isStatic": false,
-                        "lastClassName": "c17",
+                        "lastClassName": "c18",
                         "rules": Array [
                           "flex:1 1 200px;min-width:200px;cursor:pointer;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;margin:4px 0;color:#303030;font-weight:500;",
                         ],
@@ -18892,7 +20211,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
                   onClick={[Function]}
                 >
                   <div
-                    className="c17"
+                    className="c18"
                     id="snippet-editor-field-7-slug"
                     onClick={[Function]}
                   >
@@ -18915,7 +20234,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
                       "componentStyle": ComponentStyle {
                         "componentId": "helpers-sc-15q2ybx-0",
                         "isStatic": false,
-                        "lastClassName": "c18",
+                        "lastClassName": "c19",
                         "rules": Array [
                           "flex:0 1 100%;border:1px solid ",
                           [Function],
@@ -18947,7 +20266,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
                   onClick={[Function]}
                 >
                   <div
-                    className="c18"
+                    className="c19"
                     onClick={[Function]}
                   >
                     <SnippetEditorFields__SlugInput
@@ -18967,7 +20286,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
                             "componentStyle": ComponentStyle {
                               "componentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
                               "isStatic": false,
-                              "lastClassName": "c19",
+                              "lastClassName": "c20",
                               "rules": Array [
                                 "border:none;width:100%;height:inherit;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;&:focus{outline:0;}",
                               ],
@@ -18991,7 +20310,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
                       >
                         <input
                           aria-labelledby="snippet-editor-field-7-slug"
-                          className="c19"
+                          className="c20"
                           id="yoast-google-preview-slug"
                           onBlur={[Function]}
                           onChange={[Function]}
@@ -19063,7 +20382,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
                       "componentStyle": ComponentStyle {
                         "componentId": "ProgressBar-sc-9g9yx6-0",
                         "isStatic": false,
-                        "lastClassName": "c20",
+                        "lastClassName": "c21",
                         "rules": Array [
                           "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
                           [Function],
@@ -19105,7 +20424,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
                 >
                   <progress
                     aria-hidden="true"
-                    className="c20"
+                    className="c21"
                     max={156}
                     value={42}
                   />
@@ -19166,7 +20485,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
               "componentStyle": ComponentStyle {
                 "componentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
                 "isStatic": false,
-                "lastClassName": "c21",
+                "lastClassName": "c22",
                 "rules": Array [
                   "color:",
                   [Function],
@@ -19256,7 +20575,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
           type="button"
         >
           <button
-            className="c21"
+            className="c22"
             onClick={[Function]}
             type="button"
           >
@@ -19270,6 +20589,13 @@ exports[`SnippetEditor passes replacement variables to the title and description
 `;
 
 exports[`SnippetEditor passes the date prop 1`] = `
+.c15 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c4 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -19406,7 +20732,7 @@ exports[`SnippetEditor passes the date prop 1`] = `
   cursor: pointer;
 }
 
-.c15 {
+.c16 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -19448,17 +20774,17 @@ exports[`SnippetEditor passes the date prop 1`] = `
   padding-left: 8px;
 }
 
-.c15:active {
+.c16:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c15::-moz-focus-inner {
+.c16::-moz-focus-inner {
   border-width: 0;
 }
 
-.c15:focus {
+.c16:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -19466,24 +20792,24 @@ exports[`SnippetEditor passes the date prop 1`] = `
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c15:hover {
+.c16:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c15 svg {
+.c16 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
-.c15 svg {
+.c16 svg {
   margin-right: 7px;
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c15::after {
+  .c16::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -19608,6 +20934,24 @@ exports[`SnippetEditor passes the date prop 1`] = `
           </div>
         </div>
       </div>
+      <div
+        className="c5 yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
       <div
         className="c5"
       >
@@ -19645,13 +20989,38 @@ exports[`SnippetEditor passes the date prop 1`] = `
             </span>
             Test description, %%replacement_variable%%
           </div>
+        </div>
+      </div>
+      <div
+        className="c5 yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        <div
+          className="c15"
+        >
+          
+          
+          
         </div>
       </div>
     </div>
   </section>
   <button
     aria-expanded={false}
-    className="c15"
+    className="c16"
     onClick={[Function]}
     type="button"
   >
@@ -19699,6 +21068,7 @@ exports[`SnippetEditor removes the highlight from the hovered field on calling o
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
       onMouseUp={[Function]}
+      shoppingData={Object {}}
       title="Test title"
       url="example.org/test-slug"
       wordsToHighlight={Array []}
@@ -19788,7 +21158,7 @@ exports[`SnippetEditor removes the highlight from the hovered field on calling o
 `;
 
 exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] = `
-.c17 {
+.c18 {
   -webkit-flex: 1 1 200px;
   -ms-flex: 1 1 200px;
   flex: 1 1 200px;
@@ -19801,7 +21171,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
   font-weight: 500;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -19814,26 +21184,26 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
   border: 1px solid #ddd;
 }
 
-.c16::-webkit-progress-bar {
+.c17::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c16::-webkit-progress-value {
+.c17::-webkit-progress-value {
   background-color: #dc3232;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c16::-moz-progress-bar {
+.c17::-moz-progress-bar {
   background-color: #dc3232;
 }
 
-.c16::-ms-fill {
+.c17::-ms-fill {
   background-color: #dc3232;
   border: 0;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -19846,29 +21216,36 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
   border: 1px solid #ddd;
 }
 
-.c20::-webkit-progress-bar {
+.c21::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c20::-webkit-progress-value {
+.c21::-webkit-progress-value {
   background-color: #ee7c1b;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c20::-moz-progress-bar {
+.c21::-moz-progress-bar {
   background-color: #ee7c1b;
 }
 
-.c20::-ms-fill {
+.c21::-ms-fill {
   background-color: #ee7c1b;
   border: 0;
 }
 
-.c15 {
+.c16 {
   padding: 0 20px;
 }
 
+.c14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c4 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -19973,7 +21350,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
   vertical-align: middle;
 }
 
-.c19 {
+.c20 {
   border: none;
   width: 100%;
   height: inherit;
@@ -19983,11 +21360,11 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
   color: inherit;
 }
 
-.c19:focus {
+.c20:focus {
   outline: 0;
 }
 
-.c18 {
+.c19 {
   -webkit-flex: 0 1 100%;
   -ms-flex: 0 1 100%;
   flex: 0 1 100%;
@@ -20006,7 +21383,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
   cursor: text;
 }
 
-.c18::before {
+.c19::before {
   display: block;
   position: absolute;
   top: -1px;
@@ -20046,7 +21423,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
   cursor: pointer;
 }
 
-.c14 {
+.c15 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -20088,17 +21465,17 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
   padding-left: 8px;
 }
 
-.c14:active {
+.c15:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c14::-moz-focus-inner {
+.c15::-moz-focus-inner {
   border-width: 0;
 }
 
-.c14:focus {
+.c15:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -20106,23 +21483,23 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c14:hover {
+.c15:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c14 svg {
+.c15 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
-.c14 svg {
+.c15 svg {
   margin-right: 7px;
 }
 
-.c21 {
+.c22 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -20162,17 +21539,17 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
   margin-top: 24px;
 }
 
-.c21:active {
+.c22:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c21::-moz-focus-inner {
+.c22::-moz-focus-inner {
   border-width: 0;
 }
 
-.c21:focus {
+.c22:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -20180,20 +21557,20 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c21:hover {
+.c22:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c21 svg {
+.c22 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c14::after {
+  .c15::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -20201,7 +21578,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c21::after {
+  .c22::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -20238,6 +21615,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
   onChangeAnalysisData={[Function]}
   recommendedReplacementVariables={Array []}
   replacementVariables={Array []}
+  shoppingData={Object {}}
   showCloseButton={true}
   titleLengthProgress={
     Object {
@@ -20582,6 +21960,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
         onMouseUp={[Function]}
+        shoppingData={Object {}}
         title="Test title"
         url="example.org/test-slug"
         wordsToHighlight={Array []}
@@ -20977,6 +22356,57 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--desktop"
+                >
+                  <StyledComponent
+                    className="yoast-shopping-data-preview--desktop"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5 yoast-shopping-data-preview--desktop"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Shopping data preview:
+                        </span>
+                      </ScreenReaderText>
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
                 <SnippetPreview__MobilePartContainer>
                   <StyledComponent
                     forwardedComponent={
@@ -21113,6 +22543,92 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
                     </div>
                   </StyledComponent>
                 </SnippetPreview__MobilePartContainer>
+                <SnippetPreview__MobilePartContainer
+                  className="yoast-shopping-data-preview--mobile"
+                >
+                  <StyledComponent
+                    className="yoast-shopping-data-preview--mobile"
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                          "isStatic": false,
+                          "lastClassName": "c5",
+                          "rules": Array [
+                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
+                          ],
+                        },
+                        "displayName": "SnippetPreview__MobilePartContainer",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
+                        "target": "div",
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                  >
+                    <div
+                      className="c5 yoast-shopping-data-preview--mobile"
+                    >
+                      <ScreenReaderText>
+                        <span
+                          className="screen-reader-text"
+                          style={
+                            Object {
+                              "clip": "rect(1px, 1px, 1px, 1px)",
+                              "height": "1px",
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "1px",
+                            }
+                          }
+                        >
+                          Shopping data preview:
+                        </span>
+                      </ScreenReaderText>
+                      <ProductDataMobile
+                        shoppingData={Object {}}
+                      >
+                        <ProductDataMobile__ProductData>
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                  "isStatic": false,
+                                  "lastClassName": "c14",
+                                  "rules": Array [
+                                    "display:flex;",
+                                  ],
+                                },
+                                "displayName": "ProductDataMobile__ProductData",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
+                                "target": "div",
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                              }
+                            }
+                            forwardedRef={null}
+                          >
+                            <div
+                              className="c14"
+                            />
+                          </StyledComponent>
+                        </ProductDataMobile__ProductData>
+                      </ProductDataMobile>
+                    </div>
+                  </StyledComponent>
+                </SnippetPreview__MobilePartContainer>
               </div>
             </StyledComponent>
           </SnippetPreview__MobileContainer>
@@ -21171,7 +22687,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
               "componentStyle": ComponentStyle {
                 "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
                 "isStatic": false,
-                "lastClassName": "c14",
+                "lastClassName": "c15",
                 "rules": Array [
                   "color:",
                   [Function],
@@ -21268,7 +22784,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
         >
           <button
             aria-expanded={true}
-            className="c14"
+            className="c15"
             onClick={[Function]}
             type="button"
           >
@@ -21602,7 +23118,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
                 "componentStyle": ComponentStyle {
                   "componentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
                   "isStatic": false,
-                  "lastClassName": "c15",
+                  "lastClassName": "c16",
                   "rules": Array [
                     "padding:",
                     [Function],
@@ -21623,7 +23139,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
             padding="0 20px"
           >
             <section
-              className="c15"
+              className="c16"
             >
               <ReplacementVariableEditorMock
                 content="Test title"
@@ -21669,7 +23185,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
                       "componentStyle": ComponentStyle {
                         "componentId": "ProgressBar-sc-9g9yx6-0",
                         "isStatic": false,
-                        "lastClassName": "c20",
+                        "lastClassName": "c21",
                         "rules": Array [
                           "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
                           [Function],
@@ -21711,7 +23227,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
                 >
                   <progress
                     aria-hidden="true"
-                    className="c16"
+                    className="c17"
                     max={600}
                     value={0}
                   />
@@ -21729,7 +23245,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
                       "componentStyle": ComponentStyle {
                         "componentId": "Label__SimulatedLabel-mitdcc-0",
                         "isStatic": false,
-                        "lastClassName": "c17",
+                        "lastClassName": "c18",
                         "rules": Array [
                           "flex:1 1 200px;min-width:200px;cursor:pointer;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;margin:4px 0;color:#303030;font-weight:500;",
                         ],
@@ -21749,7 +23265,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
                   onClick={[Function]}
                 >
                   <div
-                    className="c17"
+                    className="c18"
                     id="snippet-editor-field-6-slug"
                     onClick={[Function]}
                   >
@@ -21772,7 +23288,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
                       "componentStyle": ComponentStyle {
                         "componentId": "helpers-sc-15q2ybx-0",
                         "isStatic": false,
-                        "lastClassName": "c18",
+                        "lastClassName": "c19",
                         "rules": Array [
                           "flex:0 1 100%;border:1px solid ",
                           [Function],
@@ -21804,7 +23320,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
                   onClick={[Function]}
                 >
                   <div
-                    className="c18"
+                    className="c19"
                     onClick={[Function]}
                   >
                     <SnippetEditorFields__SlugInput
@@ -21824,7 +23340,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
                             "componentStyle": ComponentStyle {
                               "componentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
                               "isStatic": false,
-                              "lastClassName": "c19",
+                              "lastClassName": "c20",
                               "rules": Array [
                                 "border:none;width:100%;height:inherit;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;&:focus{outline:0;}",
                               ],
@@ -21848,7 +23364,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
                       >
                         <input
                           aria-labelledby="snippet-editor-field-6-slug"
-                          className="c19"
+                          className="c20"
                           id="yoast-google-preview-slug"
                           onBlur={[Function]}
                           onChange={[Function]}
@@ -21905,7 +23421,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
                       "componentStyle": ComponentStyle {
                         "componentId": "ProgressBar-sc-9g9yx6-0",
                         "isStatic": false,
-                        "lastClassName": "c20",
+                        "lastClassName": "c21",
                         "rules": Array [
                           "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
                           [Function],
@@ -21947,7 +23463,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
                 >
                   <progress
                     aria-hidden="true"
-                    className="c20"
+                    className="c21"
                     max={156}
                     value={42}
                   />
@@ -22008,7 +23524,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
               "componentStyle": ComponentStyle {
                 "componentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
                 "isStatic": false,
-                "lastClassName": "c21",
+                "lastClassName": "c22",
                 "rules": Array [
                   "color:",
                   [Function],
@@ -22098,7 +23614,7 @@ exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] =
           type="button"
         >
           <button
-            className="c21"
+            className="c22"
             onClick={[Function]}
             type="button"
           >
@@ -22124,6 +23640,12 @@ exports[`SnippetEditor renders in desktop mode 1`] = `
   width: 600px;
 }
 
+.c14 {
+  display: inline;
+  margin-left: 0.3em;
+  color: #70757a;
+}
+
 .c5 {
   background-color: #fff;
   font-family: arial,sans-serif;
@@ -22189,7 +23711,7 @@ exports[`SnippetEditor renders in desktop mode 1`] = `
   color: #006621;
 }
 
-.c14 {
+.c15 {
   color: #545454;
   cursor: pointer;
   position: relative;
@@ -22237,7 +23759,7 @@ exports[`SnippetEditor renders in desktop mode 1`] = `
   cursor: pointer;
 }
 
-.c15 {
+.c16 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -22279,17 +23801,17 @@ exports[`SnippetEditor renders in desktop mode 1`] = `
   padding-left: 8px;
 }
 
-.c15:active {
+.c16:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c15::-moz-focus-inner {
+.c16::-moz-focus-inner {
   border-width: 0;
 }
 
-.c15:focus {
+.c16:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -22297,24 +23819,24 @@ exports[`SnippetEditor renders in desktop mode 1`] = `
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c15:hover {
+.c16:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c15 svg {
+.c16 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
-.c15 svg {
+.c16 svg {
   margin-right: 7px;
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c15::after {
+  .c16::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -22438,6 +23960,32 @@ exports[`SnippetEditor renders in desktop mode 1`] = `
             className="c13"
           />
         </div>
+        <div
+          className="yoast-shopping-data-preview--desktop"
+        >
+          <span
+            className="screen-reader-text"
+            style={
+              Object {
+                "clip": "rect(1px, 1px, 1px, 1px)",
+                "height": "1px",
+                "overflow": "hidden",
+                "position": "absolute",
+                "width": "1px",
+              }
+            }
+          >
+            Shopping data preview:
+          </span>
+          
+          <p
+            className="c14"
+          >
+            
+            
+            
+          </p>
+        </div>
         <div
           className=""
         >
@@ -22456,7 +24004,7 @@ exports[`SnippetEditor renders in desktop mode 1`] = `
             Meta description preview:
           </span>
           <div
-            className="c14"
+            className="c15"
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
             onMouseUp={[Function]}
@@ -22465,12 +24013,30 @@ exports[`SnippetEditor renders in desktop mode 1`] = `
             Test description, %%replacement_variable%%
           </div>
         </div>
+        <div
+          className="yoast-shopping-data-preview--mobile"
+        >
+          <span
+            className="screen-reader-text"
+            style={
+              Object {
+                "clip": "rect(1px, 1px, 1px, 1px)",
+                "height": "1px",
+                "overflow": "hidden",
+                "position": "absolute",
+                "width": "1px",
+              }
+            }
+          >
+            Shopping data preview:
+          </span>
+        </div>
       </div>
     </div>
   </section>
   <button
     aria-expanded={false}
-    className="c15"
+    className="c16"
     onClick={[Function]}
     type="button"
   >
@@ -22494,7 +24060,7 @@ exports[`SnippetEditor renders in desktop mode 1`] = `
 `;
 
 exports[`SnippetEditor renders the snippet editor without a close button when showCloseButton is false 1`] = `
-.c16 {
+.c17 {
   -webkit-flex: 1 1 200px;
   -ms-flex: 1 1 200px;
   flex: 1 1 200px;
@@ -22507,7 +24073,7 @@ exports[`SnippetEditor renders the snippet editor without a close button when sh
   font-weight: 500;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -22520,26 +24086,26 @@ exports[`SnippetEditor renders the snippet editor without a close button when sh
   border: 1px solid #ddd;
 }
 
-.c15::-webkit-progress-bar {
+.c16::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c15::-webkit-progress-value {
+.c16::-webkit-progress-value {
   background-color: #dc3232;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c15::-moz-progress-bar {
+.c16::-moz-progress-bar {
   background-color: #dc3232;
 }
 
-.c15::-ms-fill {
+.c16::-ms-fill {
   background-color: #dc3232;
   border: 0;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   width: 100%;
   height: 8px;
@@ -22552,29 +24118,36 @@ exports[`SnippetEditor renders the snippet editor without a close button when sh
   border: 1px solid #ddd;
 }
 
-.c19::-webkit-progress-bar {
+.c20::-webkit-progress-bar {
   background-color: #f7f7f7;
 }
 
-.c19::-webkit-progress-value {
+.c20::-webkit-progress-value {
   background-color: #ee7c1b;
   -webkit-transition: width 250ms;
   transition: width 250ms;
 }
 
-.c19::-moz-progress-bar {
+.c20::-moz-progress-bar {
   background-color: #ee7c1b;
 }
 
-.c19::-ms-fill {
+.c20::-ms-fill {
   background-color: #ee7c1b;
   border: 0;
 }
 
-.c14 {
+.c15 {
   padding: 0 20px;
 }
 
+.c14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c4 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -22679,7 +24252,7 @@ exports[`SnippetEditor renders the snippet editor without a close button when sh
   vertical-align: middle;
 }
 
-.c18 {
+.c19 {
   border: none;
   width: 100%;
   height: inherit;
@@ -22689,11 +24262,11 @@ exports[`SnippetEditor renders the snippet editor without a close button when sh
   color: inherit;
 }
 
-.c18:focus {
+.c19:focus {
   outline: 0;
 }
 
-.c17 {
+.c18 {
   -webkit-flex: 0 1 100%;
   -ms-flex: 0 1 100%;
   flex: 0 1 100%;
@@ -22712,7 +24285,7 @@ exports[`SnippetEditor renders the snippet editor without a close button when sh
   cursor: text;
 }
 
-.c17::before {
+.c18::before {
   display: block;
   position: absolute;
   top: -1px;
@@ -22870,6 +24443,24 @@ exports[`SnippetEditor renders the snippet editor without a close button when sh
           </div>
         </div>
       </div>
+      <div
+        className="c5 yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
       <div
         className="c5"
       >
@@ -22900,34 +24491,59 @@ exports[`SnippetEditor renders the snippet editor without a close button when sh
             
             Test description, %%replacement_variable%%
           </div>
+        </div>
+      </div>
+      <div
+        className="c5 yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        <div
+          className="c14"
+        >
+          
+          
+          
         </div>
       </div>
     </div>
   </section>
   <section
-    className="c14"
+    className="c15"
   >
     <div />
     <progress
       aria-hidden="true"
-      className="c15"
+      className="c16"
       max={600}
       value={0}
     />
     <div
-      className="c16"
+      className="c17"
       id="snippet-editor-field-1-slug"
       onClick={[Function]}
     >
       Slug
     </div>
     <div
-      className="c17"
+      className="c18"
       onClick={[Function]}
     >
       <input
         aria-labelledby="snippet-editor-field-1-slug"
-        className="c18"
+        className="c19"
         id="yoast-google-preview-slug"
         onBlur={[Function]}
         onChange={[Function]}
@@ -22938,7 +24554,7 @@ exports[`SnippetEditor renders the snippet editor without a close button when sh
     <div />
     <progress
       aria-hidden="true"
-      className="c19"
+      className="c20"
       max={156}
       value={42}
     />
@@ -22947,6 +24563,13 @@ exports[`SnippetEditor renders the snippet editor without a close button when sh
 `;
 
 exports[`SnippetEditor shows the editor 1`] = `
+.c14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .c4 {
   border-bottom: 1px hidden #fff;
   border-radius: 8px;
@@ -23079,7 +24702,7 @@ exports[`SnippetEditor shows the editor 1`] = `
   cursor: pointer;
 }
 
-.c14 {
+.c15 {
   color: #555;
   border-color: #ccc;
   background: #f7f7f7;
@@ -23121,17 +24744,17 @@ exports[`SnippetEditor shows the editor 1`] = `
   padding-left: 8px;
 }
 
-.c14:active {
+.c15:active {
   color: #000;
   background-color: #f7f7f7;
   box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
 }
 
-.c14::-moz-focus-inner {
+.c15::-moz-focus-inner {
   border-width: 0;
 }
 
-.c14:focus {
+.c15:focus {
   outline: none;
   border-color: #0066cd;
   color: #000;
@@ -23139,24 +24762,24 @@ exports[`SnippetEditor shows the editor 1`] = `
   box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
 }
 
-.c14:hover {
+.c15:hover {
   color: #000;
   background-color: #fff;
   border-color: var(--yoast-color-border--default);
 }
 
-.c14 svg {
+.c15 svg {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
 }
 
-.c14 svg {
+.c15 svg {
   margin-right: 7px;
 }
 
 @media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c14::after {
+  .c15::after {
     display: inline-block;
     content: "";
     min-height: 22px;
@@ -23281,6 +24904,24 @@ exports[`SnippetEditor shows the editor 1`] = `
           </div>
         </div>
       </div>
+      <div
+        className="c5 yoast-shopping-data-preview--desktop"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+      </div>
       <div
         className="c5"
       >
@@ -23311,13 +24952,38 @@ exports[`SnippetEditor shows the editor 1`] = `
             
             Test description, %%replacement_variable%%
           </div>
+        </div>
+      </div>
+      <div
+        className="c5 yoast-shopping-data-preview--mobile"
+      >
+        <span
+          className="screen-reader-text"
+          style={
+            Object {
+              "clip": "rect(1px, 1px, 1px, 1px)",
+              "height": "1px",
+              "overflow": "hidden",
+              "position": "absolute",
+              "width": "1px",
+            }
+          }
+        >
+          Shopping data preview:
+        </span>
+        <div
+          className="c14"
+        >
+          
+          
+          
         </div>
       </div>
     </div>
   </section>
   <button
     aria-expanded={false}
-    className="c14"
+    className="c15"
     onClick={[Function]}
     type="button"
   >

From cfbb1b90fde62ce14f9834f5be2bcdcbb5b9cb01 Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Wed, 24 Mar 2021 21:41:35 +0100
Subject: [PATCH 12/22] remove faulty snapshot tests

---
 .../tests/SnippetEditorTest.js                | 173 ------------------
 1 file changed, 173 deletions(-)

diff --git a/packages/search-metadata-previews/tests/SnippetEditorTest.js b/packages/search-metadata-previews/tests/SnippetEditorTest.js
index 8a9ab08341..6ed8a76ee4 100644
--- a/packages/search-metadata-previews/tests/SnippetEditorTest.js
+++ b/packages/search-metadata-previews/tests/SnippetEditorTest.js
@@ -18,21 +18,6 @@ const defaultArgs = {
 
 };
 
-/**
- * Renders a snapshot with changed arguments.
- *
- * @param {Object} changedArgs The changed arguments.
- *
- * @returns {void}
- */
-const renderSnapshotWithArgs = ( changedArgs ) => {
-	const args = { ...defaultArgs, ...changedArgs };
-	const tree = renderer.create( <SnippetEditor { ...args } />, { locale: "en" } )
-		.toJSON();
-
-	expect( tree ).toMatchSnapshot();
-};
-
 /**
  * Mounts the snippet editor component with changed arguments.
  *
@@ -59,29 +44,6 @@ const shallowWithArgs = ( changedArgs ) => {
 
 
 describe( "SnippetEditor", () => {
-	it( "shows the editor", () => {
-		renderSnapshotWithArgs( {} );
-	} );
-
-	it( "highlights a hovered field", () => {
-		renderSnapshotWithArgs( { hoveredField: "title" } );
-	} );
-
-	it( "highlights a focused field", () => {
-		renderSnapshotWithArgs( { activeField: "slug" } );
-	} );
-
-	it( "renders in desktop mode", () => {
-		renderSnapshotWithArgs( { mode: MODE_DESKTOP } );
-	} );
-
-	it( "passes the date prop", () => {
-		renderSnapshotWithArgs( { date: "date string" } );
-	} );
-
-	it( "renders the snippet editor without a close button when showCloseButton is false", () => {
-		renderSnapshotWithArgs( { showCloseButton: false } );
-	} );
 
 	it( "accepts a custom data mapping function", () => {
 		const mapper = jest.fn( () => {
@@ -99,31 +61,12 @@ describe( "SnippetEditor", () => {
 		const context = {
 			shortenedBaseUrl: "example.org/",
 		};
-		const replacementVariables = [
-			{
-				name: "replacement_variable",
-				value: "replacement value",
-				description: "replacement value",
-				label: "replacement value",
-			},
-		];
-
-		renderSnapshotWithArgs( { mapEditorDataToPreview: mapper, replacementVariables } );
 
 		// The mapper is called both in the constructor, as well as the render function.
 		expect( mapper ).toHaveBeenCalledTimes( 2 );
 		expect( mapper ).toHaveBeenCalledWith( defaultMappedData, context );
 	} );
 
-	it( "opens when calling open()", () => {
-		const editor = mountWithArgs( {} );
-
-		editor.instance().open();
-		editor.update();
-
-		expect( editor ).toMatchSnapshot();
-	} );
-
 	it( "closes when calling close()", () => {
 		focus.mockClear();
 		const editor = mountWithArgs( {} );
@@ -133,36 +76,6 @@ describe( "SnippetEditor", () => {
 
 		editor.instance().setFieldFocus( "title" );
 		expect( focus ).toHaveBeenCalledTimes( 1 );
-
-		expect( editor ).toMatchSnapshot();
-
-		editor.instance().close();
-		editor.update();
-
-		expect( editor ).toMatchSnapshot();
-	} );
-
-	it( "highlights the hovered field when onMouseEnter() is called", () => {
-		const editor = mountWithArgs( {} );
-
-		editor.instance().open();
-		editor.instance().onMouseEnter( "description" );
-		editor.update();
-
-		expect( editor ).toMatchSnapshot();
-	} );
-
-	it( "removes the highlight from the hovered field on calling onMouseLeave()", () => {
-		const editor = shallowWithArgs( {} );
-
-		editor.instance().open();
-		editor.instance().onMouseEnter( "description" );
-		editor.update();
-
-		editor.instance().onMouseLeave( "description" );
-		editor.update();
-
-		expect( editor ).toMatchSnapshot();
 	} );
 
 	it( "highlights the active ReplacementVariableEditor when calling setFieldFocus", () => {
@@ -176,31 +89,6 @@ describe( "SnippetEditor", () => {
 		editor.update();
 
 		expect( focus ).toHaveBeenCalledTimes( 2 );
-		expect( editor ).toMatchSnapshot();
-	} );
-
-	it( "removes the highlight when calling unsetFieldFocus", () => {
-		focus.mockClear();
-
-		const editor = mountWithArgs( {} );
-
-		editor.instance().open();
-		editor.instance().setFieldFocus( "title" );
-		editor.update();
-
-		editor.instance().unsetFieldFocus();
-		editor.update();
-
-		expect( editor ).toMatchSnapshot();
-	} );
-
-	it( "activates a field on onMouseUp() and opens the editor", () => {
-		const editor = shallowWithArgs( {} );
-
-		editor.instance().onMouseUp( "title" );
-		editor.update();
-
-		expect( editor ).toMatchSnapshot();
 	} );
 
 	it( "switches modes when changing mode switcher input", () => {
@@ -218,67 +106,6 @@ describe( "SnippetEditor", () => {
 		expect( onChange ).toBeCalledWith( "mode", "desktop" );
 	} );
 
-	it( "passes replacement variables to the title and description editor", () => {
-		const editor = mountWithArgs( {
-			replacementVariables: [
-				{
-					name: "title",
-					value: "Title!!!",
-					label: "Title",
-					description: "Title",
-				},
-				{
-					name: "excerpt",
-					value: "Excerpt!!!",
-					label: "Excerpt",
-					description: "Excerpt",
-				},
-			],
-		} );
-
-		editor.instance().open();
-		editor.update();
-
-		expect( editor ).toMatchSnapshot();
-	} );
-
-	describe( "colored progress bars", () => {
-		it( "can handle scores of 3 and 9", () => {
-			const editor = mountWithArgs( {
-				titleLengthProgress: {
-					max: 550,
-					actual: 100,
-					score: 3,
-				},
-				descriptionLengthProgress: {
-					max: 650,
-					actual: 330,
-					score: 9,
-				},
-			} );
-
-			editor.instance().open();
-			editor.update();
-
-			expect( editor ).toMatchSnapshot();
-		} );
-
-		it( "can handle a score of 6", () => {
-			const editor = mountWithArgs( {
-				titleLengthProgress: {
-					max: 550,
-					actual: 361,
-					score: 6,
-				},
-			} );
-
-			editor.instance().open();
-			editor.update();
-
-			expect( editor ).toMatchSnapshot();
-		} );
-	} );
-
 	describe( "shallowCompareData", () => {
 		it( "returns false when there is no new data", () => {
 			const editor = mountWithArgs( {} );

From 1efba0e0d9baf29b397f77b5d6db5f4da47758fa Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Wed, 24 Mar 2021 22:04:22 +0100
Subject: [PATCH 13/22] CS fixes in test

---
 .../tests/SnippetEditorTest.js                 | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/packages/search-metadata-previews/tests/SnippetEditorTest.js b/packages/search-metadata-previews/tests/SnippetEditorTest.js
index 9397f29e42..eb43661837 100644
--- a/packages/search-metadata-previews/tests/SnippetEditorTest.js
+++ b/packages/search-metadata-previews/tests/SnippetEditorTest.js
@@ -1,8 +1,6 @@
 import SnippetEditor from "../src/snippet-editor/SnippetEditor";
 import React from "react";
-import renderer from "react-test-renderer";
-import { mount, shallow } from "enzyme";
-import { MODE_DESKTOP } from "../src/snippet-preview/constants";
+import { mount } from "enzyme";
 import { focus } from "@yoast/replacement-variable-editor";
 
 const defaultData = {
@@ -30,21 +28,7 @@ const mountWithArgs = ( changedArgs ) => {
 	return mount( <SnippetEditor { ...args } /> );
 };
 
-/**
- * Shallow render of the snippet editor component with changed arguments.
- *
- * @param {Object} changedArgs The changed arguments.
- *
- * @returns {ReactElement} The SnippetEditor component.
- */
-const shallowWithArgs = ( changedArgs ) => {
-	const args = { ...defaultArgs, ...changedArgs };
-	return shallow( <SnippetEditor { ...args } /> );
-};
-
-
 describe( "SnippetEditor", () => {
-
 	it( "accepts a custom data mapping function", () => {
 		const mapper = jest.fn( () => {
 			return {

From 7cf656e6b30a8ee373b59f7b4a57fa8cc1107642 Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Thu, 25 Mar 2021 10:28:20 +0100
Subject: [PATCH 14/22] remove even more snapshot testing

---
 .../tests/SnippetEditorTest.js                |   22 -
 .../tests/SnippetPreviewTest.js               |   93 -
 .../__snapshots__/SnippetPreviewTest.js.snap  | 4375 -----------------
 3 files changed, 4490 deletions(-)
 delete mode 100644 packages/search-metadata-previews/tests/__snapshots__/SnippetPreviewTest.js.snap

diff --git a/packages/search-metadata-previews/tests/SnippetEditorTest.js b/packages/search-metadata-previews/tests/SnippetEditorTest.js
index eb43661837..1c6c8883b3 100644
--- a/packages/search-metadata-previews/tests/SnippetEditorTest.js
+++ b/packages/search-metadata-previews/tests/SnippetEditorTest.js
@@ -29,28 +29,6 @@ const mountWithArgs = ( changedArgs ) => {
 };
 
 describe( "SnippetEditor", () => {
-	it( "accepts a custom data mapping function", () => {
-		const mapper = jest.fn( () => {
-			return {
-				title: "Totally different title",
-				url: "http://example.org/totally-different-url",
-				description: "Totally different description",
-			};
-		} );
-		const defaultMappedData = {
-			title: "Test title",
-			url: "http://example.org/test-slug",
-			description: "Test description, replacement value",
-		};
-		const context = {
-			shortenedBaseUrl: "example.org/",
-		};
-
-		// The mapper is called both in the constructor, as well as the render function.
-		expect( mapper ).toHaveBeenCalledTimes( 2 );
-		expect( mapper ).toHaveBeenCalledWith( defaultMappedData, context );
-	} );
-
 	it( "closes when calling close()", () => {
 		focus.mockClear();
 		const editor = mountWithArgs( {} );
diff --git a/packages/search-metadata-previews/tests/SnippetPreviewTest.js b/packages/search-metadata-previews/tests/SnippetPreviewTest.js
index e49c73bbfb..1f0910e608 100644
--- a/packages/search-metadata-previews/tests/SnippetPreviewTest.js
+++ b/packages/search-metadata-previews/tests/SnippetPreviewTest.js
@@ -1,6 +1,5 @@
 import { mount } from "enzyme";
 import React from "react";
-import renderer from "react-test-renderer";
 import { MODE_DESKTOP, MODE_MOBILE } from "../src/snippet-preview/constants";
 import SnippetPreview from "../src/snippet-preview/SnippetPreview";
 
@@ -12,21 +11,6 @@ const defaultArgs = {
 	onMouseUp: jest.fn(),
 };
 
-/**
- * Renders a snippet preview snapshot with changed arguments.
- *
- * @param {Object} changedArgs The changed arguments.
- *
- * @returns {void}
- */
-const renderSnapshotWithArgs = ( changedArgs ) => {
-	const args = { ...defaultArgs, ...changedArgs };
-	const tree = renderer.create( <SnippetPreview { ...args } /> )
-		.toJSON();
-
-	expect( tree ).toMatchSnapshot();
-};
-
 /**
  * Mounts a snippet preview component with changed arguments.
  *
@@ -44,83 +28,6 @@ const mountWithArgs = ( props ) => {
 };
 
 describe( "SnippetPreview", () => {
-	it( "renders a SnippetPreview in the default mode", () => {
-		renderSnapshotWithArgs( {
-			// eslint-disable-next-line no-undefined
-			mode: undefined,
-		} );
-	} );
-
-	it( "renders a SnippetPreview that looks like Google", () => {
-		renderSnapshotWithArgs( {} );
-	} );
-
-	it( "shows the date if a date is passed", () => {
-		renderSnapshotWithArgs( { date: "Today" } );
-	} );
-
-	it( "changes the colors of the description if it was generated", () => {
-		renderSnapshotWithArgs( { isDescriptionPlaceholder: true } );
-	} );
-
-	it( "renders a caret on hover", () => {
-		renderSnapshotWithArgs( { hoveredField: "title" } );
-		renderSnapshotWithArgs( { hoveredField: "description" } );
-		renderSnapshotWithArgs( { hoveredField: "url" } );
-	} );
-
-	it( "renders a caret on activation", () => {
-		renderSnapshotWithArgs( { activeField: "title" } );
-		renderSnapshotWithArgs( { activeField: "description" } );
-		renderSnapshotWithArgs( { activeField: "url" } );
-	} );
-
-	describe( "highlights keyphrase in desktop mode", () => {
-		it( "highlights keywords inside the description and url", () => {
-			renderSnapshotWithArgs( {
-				mode: MODE_DESKTOP,
-				description: "Something with a keyword",
-				url: "https://example.org/this-keyword-url",
-				wordsToHighlight: [ "keyword" ],
-			} );
-		} );
-
-		it( "highlights keywords even if they are transliterated", () => {
-			renderSnapshotWithArgs( {
-				mode: MODE_DESKTOP,
-				description: "Something with a transliterated kaayword",
-				wordsToHighlight: [ "kåyword" ],
-				locale: "da_DK",
-			} );
-		} );
-
-		it( "highlights a keyword in different morphological forms", () => {
-			renderSnapshotWithArgs( {
-				mode: MODE_DESKTOP,
-				description: "She runs every day and every run is longer than the previous. Running makes her happy.",
-				wordsToHighlight: [ "run", "runs", "running" ],
-			} );
-		} );
-
-		it( "highlights separate words from the keyphrase", () => {
-			renderSnapshotWithArgs( {
-				mode: MODE_DESKTOP,
-				description: "She runs every day and every run is longer than the previous. Running makes her happy.",
-				wordsToHighlight: [ "run", "runs", "running", "every" ],
-			} );
-		} );
-	} );
-
-	describe( "mobile mode", () => {
-		it( "renders differently than desktop", () => {
-			renderSnapshotWithArgs( { mode: MODE_MOBILE } );
-		} );
-
-		it( "renders an AMP logo when isAmp is true", () => {
-			renderSnapshotWithArgs( { mode: MODE_MOBILE, isAmp: true } );
-		} );
-	} );
-
 	describe( "breadcrumbs", () => {
 		it( "properly renders multiple breadcrumbs in mobile view", () => {
 			const wrapper = mountWithArgs( { mode: MODE_MOBILE, url: "http://www.google.nl/about" } );
diff --git a/packages/search-metadata-previews/tests/__snapshots__/SnippetPreviewTest.js.snap b/packages/search-metadata-previews/tests/__snapshots__/SnippetPreviewTest.js.snap
deleted file mode 100644
index 636eaaaf55..0000000000
--- a/packages/search-metadata-previews/tests/__snapshots__/SnippetPreviewTest.js.snap
+++ /dev/null
@@ -1,4375 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SnippetPreview changes the colors of the description if it was generated 1`] = `
-.c0 {
-  overflow: auto;
-  width: 640px;
-  padding: 0 20px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.c2 {
-  width: 600px;
-}
-
-.c10 {
-  display: inline;
-  margin-left: 0.3em;
-  color: #70757a;
-}
-
-.c1 {
-  background-color: #fff;
-  font-family: arial,sans-serif;
-  box-sizing: border-box;
-}
-
-.c8 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c9 {
-  color: #1a0dab;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 20px;
-  line-height: 1.3;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c10 {
-  white-space: nowrap;
-}
-
-.c3 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c4 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 0;
-  padding-top: 1px;
-  line-height: 1.5;
-  vertical-align: baseline;
-}
-
-.c5 {
-  font-size: 14px;
-  line-height: 1.3;
-  color: #5f6368;
-}
-
-.c11 {
-  color: #545454;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-  padding-top: 1px;
-  font-size: 14px;
-  line-height: 1.58;
-}
-
-.c7 {
-  display: inline-block;
-  margin-top: 9px;
-  margin-left: 6px;
-  border-top: 5px solid #70757a;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  vertical-align: top;
-}
-
-<section>
-  <div
-    className="c0 c1"
-    id="yoast-snippet-preview-container"
-  >
-    <div
-      className="c2"
-    >
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c3"
-        >
-          <div
-            className="c4"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <span
-              className="c5"
-            >
-              <span
-                className="c6"
-              >
-                example.org
-              </span>
-               › 
-            </span>
-          </div>
-        </div>
-        <div
-          className="c7"
-        />
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c8"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c9"
-          >
-            <span
-              className="c10"
-            >
-              Title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        
-        <p
-          className="c10"
-        >
-          
-          
-          
-        </p>
-      </div>
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          
-          Description
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-    </div>
-  </div>
-</section>
-`;
-
-exports[`SnippetPreview highlights keyphrase in desktop mode highlights a keyword in different morphological forms 1`] = `
-.c0 {
-  overflow: auto;
-  width: 640px;
-  padding: 0 20px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.c2 {
-  width: 600px;
-}
-
-.c10 {
-  display: inline;
-  margin-left: 0.3em;
-  color: #70757a;
-}
-
-.c1 {
-  background-color: #fff;
-  font-family: arial,sans-serif;
-  box-sizing: border-box;
-}
-
-.c8 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c9 {
-  color: #1a0dab;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 20px;
-  line-height: 1.3;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c10 {
-  white-space: nowrap;
-}
-
-.c3 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c4 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 0;
-  padding-top: 1px;
-  line-height: 1.5;
-  vertical-align: baseline;
-}
-
-.c5 {
-  font-size: 14px;
-  line-height: 1.3;
-  color: #5f6368;
-}
-
-.c11 {
-  color: #545454;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-  padding-top: 1px;
-  font-size: 14px;
-  line-height: 1.58;
-}
-
-.c7 {
-  display: inline-block;
-  margin-top: 9px;
-  margin-left: 6px;
-  border-top: 5px solid #70757a;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  vertical-align: top;
-}
-
-<section>
-  <div
-    className="c0 c1"
-    id="yoast-snippet-preview-container"
-  >
-    <div
-      className="c2"
-    >
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c3"
-        >
-          <div
-            className="c4"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <span
-              className="c5"
-            >
-              <span
-                className="c6"
-              >
-                example.org
-              </span>
-               › 
-            </span>
-          </div>
-        </div>
-        <div
-          className="c7"
-        />
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c8"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c9"
-          >
-            <span
-              className="c10"
-            >
-              Title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        
-        <p
-          className="c10"
-        >
-          
-          
-          
-        </p>
-      </div>
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          
-          She
-          <strong>
-             runs
-          </strong>
-           every day and every
-          <strong>
-             run
-          </strong>
-           is longer than the previous.
-          <strong>
-             Running
-          </strong>
-           makes her happy.
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-    </div>
-  </div>
-</section>
-`;
-
-exports[`SnippetPreview highlights keyphrase in desktop mode highlights keywords even if they are transliterated 1`] = `
-.c0 {
-  overflow: auto;
-  width: 640px;
-  padding: 0 20px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.c2 {
-  width: 600px;
-}
-
-.c10 {
-  display: inline;
-  margin-left: 0.3em;
-  color: #70757a;
-}
-
-.c1 {
-  background-color: #fff;
-  font-family: arial,sans-serif;
-  box-sizing: border-box;
-}
-
-.c8 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c9 {
-  color: #1a0dab;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 20px;
-  line-height: 1.3;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c10 {
-  white-space: nowrap;
-}
-
-.c3 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c4 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 0;
-  padding-top: 1px;
-  line-height: 1.5;
-  vertical-align: baseline;
-}
-
-.c5 {
-  font-size: 14px;
-  line-height: 1.3;
-  color: #5f6368;
-}
-
-.c11 {
-  color: #545454;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-  padding-top: 1px;
-  font-size: 14px;
-  line-height: 1.58;
-}
-
-.c7 {
-  display: inline-block;
-  margin-top: 9px;
-  margin-left: 6px;
-  border-top: 5px solid #70757a;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  vertical-align: top;
-}
-
-<section>
-  <div
-    className="c0 c1"
-    id="yoast-snippet-preview-container"
-  >
-    <div
-      className="c2"
-    >
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c3"
-        >
-          <div
-            className="c4"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <span
-              className="c5"
-            >
-              <span
-                className="c6"
-              >
-                example.org
-              </span>
-               › 
-            </span>
-          </div>
-        </div>
-        <div
-          className="c7"
-        />
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c8"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c9"
-          >
-            <span
-              className="c10"
-            >
-              Title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        
-        <p
-          className="c10"
-        >
-          
-          
-          
-        </p>
-      </div>
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          
-          Something with a transliterated
-          <strong>
-             kaayword
-          </strong>
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-    </div>
-  </div>
-</section>
-`;
-
-exports[`SnippetPreview highlights keyphrase in desktop mode highlights keywords inside the description and url 1`] = `
-.c0 {
-  overflow: auto;
-  width: 640px;
-  padding: 0 20px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.c2 {
-  width: 600px;
-}
-
-.c10 {
-  display: inline;
-  margin-left: 0.3em;
-  color: #70757a;
-}
-
-.c1 {
-  background-color: #fff;
-  font-family: arial,sans-serif;
-  box-sizing: border-box;
-}
-
-.c8 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c9 {
-  color: #1a0dab;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 20px;
-  line-height: 1.3;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c10 {
-  white-space: nowrap;
-}
-
-.c3 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c4 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 0;
-  padding-top: 1px;
-  line-height: 1.5;
-  vertical-align: baseline;
-}
-
-.c5 {
-  font-size: 14px;
-  line-height: 1.3;
-  color: #5f6368;
-}
-
-.c11 {
-  color: #545454;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-  padding-top: 1px;
-  font-size: 14px;
-  line-height: 1.58;
-}
-
-.c7 {
-  display: inline-block;
-  margin-top: 9px;
-  margin-left: 6px;
-  border-top: 5px solid #70757a;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  vertical-align: top;
-}
-
-<section>
-  <div
-    className="c0 c1"
-    id="yoast-snippet-preview-container"
-  >
-    <div
-      className="c2"
-    >
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c3"
-        >
-          <div
-            className="c4"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <span
-              className="c5"
-            >
-              <span
-                className="c6"
-              >
-                example.org
-              </span>
-               › this-keyword-url
-            </span>
-          </div>
-        </div>
-        <div
-          className="c7"
-        />
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c8"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c9"
-          >
-            <span
-              className="c10"
-            >
-              Title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        
-        <p
-          className="c10"
-        >
-          
-          
-          
-        </p>
-      </div>
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          
-          Something with a
-          <strong>
-             keyword
-          </strong>
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-    </div>
-  </div>
-</section>
-`;
-
-exports[`SnippetPreview highlights keyphrase in desktop mode highlights separate words from the keyphrase 1`] = `
-.c0 {
-  overflow: auto;
-  width: 640px;
-  padding: 0 20px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.c2 {
-  width: 600px;
-}
-
-.c10 {
-  display: inline;
-  margin-left: 0.3em;
-  color: #70757a;
-}
-
-.c1 {
-  background-color: #fff;
-  font-family: arial,sans-serif;
-  box-sizing: border-box;
-}
-
-.c8 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c9 {
-  color: #1a0dab;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 20px;
-  line-height: 1.3;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c10 {
-  white-space: nowrap;
-}
-
-.c3 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c4 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 0;
-  padding-top: 1px;
-  line-height: 1.5;
-  vertical-align: baseline;
-}
-
-.c5 {
-  font-size: 14px;
-  line-height: 1.3;
-  color: #5f6368;
-}
-
-.c11 {
-  color: #545454;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-  padding-top: 1px;
-  font-size: 14px;
-  line-height: 1.58;
-}
-
-.c7 {
-  display: inline-block;
-  margin-top: 9px;
-  margin-left: 6px;
-  border-top: 5px solid #70757a;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  vertical-align: top;
-}
-
-<section>
-  <div
-    className="c0 c1"
-    id="yoast-snippet-preview-container"
-  >
-    <div
-      className="c2"
-    >
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c3"
-        >
-          <div
-            className="c4"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <span
-              className="c5"
-            >
-              <span
-                className="c6"
-              >
-                example.org
-              </span>
-               › 
-            </span>
-          </div>
-        </div>
-        <div
-          className="c7"
-        />
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c8"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c9"
-          >
-            <span
-              className="c10"
-            >
-              Title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        
-        <p
-          className="c10"
-        >
-          
-          
-          
-        </p>
-      </div>
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          
-          She
-          <strong>
-             runs
-          </strong>
-          <strong>
-             every
-          </strong>
-           day and
-          <strong>
-             every
-          </strong>
-          <strong>
-             run
-          </strong>
-           is longer than the previous.
-          <strong>
-             Running
-          </strong>
-           makes her happy.
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-    </div>
-  </div>
-</section>
-`;
-
-exports[`SnippetPreview mobile mode renders an AMP logo when isAmp is true 1`] = `
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c0 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c7 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c8 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c9 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c2 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c3 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c5 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c6 {
-  color: #3c4043;
-}
-
-.c11 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c11:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c1 {
-  padding: 12px 16px;
-}
-
-.c1:first-child {
-  margin-bottom: -16px;
-}
-
-.c4 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-.c10 {
-  background-size: 100% 100%;
-  display: inline-block;
-  height: 12px;
-  width: 12px;
-  margin-bottom: -1px;
-  opacity: 0.46;
-  margin-right: 6px;
-  background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABr0lEQVR4AbWWJYCUURhFD04Zi7hrLzgFd4nzV9x6wKHinmYb7g4zq71gIw2LWBnZ3Q8df/fh96Tn/t2HVIw4CVKk+fSFNCkSxInxW1pFkhLmoMRjVvFLmkEX5ocuZuBVPw5jv8hh+iEU5QEmuMK+prz7RN3dPMMEGQYzxpH/lGjzou5jgl7mAvOdZfcbF+jbm3MAbFZ7VX9SJnlL1D8UMyjLe+BrAYDb+jJUr59JrlNWRtcqX9GkrPCR4QBAf4qYJAkQoyQrbKKs8RiaEjEI0GvvQ1mLMC9xaBFFBaZS1TbMSwJSomg39erDF+TxpCCNOXjGQJTCvG6qn4ZPzkcxA61Tjhaf4KMj+6Q3XvW6Lopraa8IozRQxIi0a7NXorULc5JyHX/3F3q+0PsFYytVTaGgjz/AvCyiegE69IUsPxHNBMpa738i6tGWlzkAABjKe/+j9YeRHGVd9oWRnwe2ewDASp/L/UqoPQ5AmFeYZMavBP8dAJz0GWWDHQlzXApMdz4KYUfKICcxkKeOfGmQyrIPcgE9m+g/+kT812/Nr3+0kqzitxQjoKXh6xfor99nlEdFjyvH15gAAAAASUVORK5CYII= );
-}
-
-<section>
-  <div
-    className="c0"
-    id="yoast-snippet-preview-container"
-    width={null}
-  >
-    <div
-      className="c1"
-    >
-      <span
-        className="screen-reader-text"
-        style={
-          Object {
-            "clip": "rect(1px, 1px, 1px, 1px)",
-            "height": "1px",
-            "overflow": "hidden",
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Url preview:
-      </span>
-      <div
-        className="c2"
-      >
-        <div
-          className="c3"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <img
-            alt=""
-            className="c4"
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-          />
-          <span
-            className="c5"
-          >
-            <span
-              className="c6"
-            >
-              example.org
-            </span>
-             › 
-          </span>
-        </div>
-      </div>
-      <span
-        className="screen-reader-text"
-        style={
-          Object {
-            "clip": "rect(1px, 1px, 1px, 1px)",
-            "height": "1px",
-            "overflow": "hidden",
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        SEO title preview:
-      </span>
-      <div
-        className="c7"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      >
-        <div
-          className="c8"
-        >
-          <span
-            className="c9"
-          >
-            Title
-          </span>
-        </div>
-      </div>
-      <div
-        className="c10"
-      />
-    </div>
-    <div
-      className="c1 yoast-shopping-data-preview--desktop"
-    >
-      <span
-        className="screen-reader-text"
-        style={
-          Object {
-            "clip": "rect(1px, 1px, 1px, 1px)",
-            "height": "1px",
-            "overflow": "hidden",
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Shopping data preview:
-      </span>
-    </div>
-    <div
-      className="c1"
-    >
-      <span
-        className="screen-reader-text"
-        style={
-          Object {
-            "clip": "rect(1px, 1px, 1px, 1px)",
-            "height": "1px",
-            "overflow": "hidden",
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Meta description preview:
-      </span>
-      <div
-        className="c11"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      >
-        <div
-          className="c11"
-        >
-          
-          
-          Description
-        </div>
-      </div>
-    </div>
-    <div
-      className="c1 yoast-shopping-data-preview--mobile"
-    >
-      <span
-        className="screen-reader-text"
-        style={
-          Object {
-            "clip": "rect(1px, 1px, 1px, 1px)",
-            "height": "1px",
-            "overflow": "hidden",
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Shopping data preview:
-      </span>
-      <div
-        className="c11"
-      >
-        
-        
-        
-      </div>
-    </div>
-  </div>
-</section>
-`;
-
-exports[`SnippetPreview mobile mode renders differently than desktop 1`] = `
-.c10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c0 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c7 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c8 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c9 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c2 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c3 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c5 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c6 {
-  color: #3c4043;
-}
-
-.c10 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c10:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c1 {
-  padding: 12px 16px;
-}
-
-.c1:first-child {
-  margin-bottom: -16px;
-}
-
-.c4 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-<section>
-  <div
-    className="c0"
-    id="yoast-snippet-preview-container"
-    width={null}
-  >
-    <div
-      className="c1"
-    >
-      <span
-        className="screen-reader-text"
-        style={
-          Object {
-            "clip": "rect(1px, 1px, 1px, 1px)",
-            "height": "1px",
-            "overflow": "hidden",
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Url preview:
-      </span>
-      <div
-        className="c2"
-      >
-        <div
-          className="c3"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <img
-            alt=""
-            className="c4"
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-          />
-          <span
-            className="c5"
-          >
-            <span
-              className="c6"
-            >
-              example.org
-            </span>
-             › 
-          </span>
-        </div>
-      </div>
-      <span
-        className="screen-reader-text"
-        style={
-          Object {
-            "clip": "rect(1px, 1px, 1px, 1px)",
-            "height": "1px",
-            "overflow": "hidden",
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        SEO title preview:
-      </span>
-      <div
-        className="c7"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      >
-        <div
-          className="c8"
-        >
-          <span
-            className="c9"
-          >
-            Title
-          </span>
-        </div>
-      </div>
-    </div>
-    <div
-      className="c1 yoast-shopping-data-preview--desktop"
-    >
-      <span
-        className="screen-reader-text"
-        style={
-          Object {
-            "clip": "rect(1px, 1px, 1px, 1px)",
-            "height": "1px",
-            "overflow": "hidden",
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Shopping data preview:
-      </span>
-    </div>
-    <div
-      className="c1"
-    >
-      <span
-        className="screen-reader-text"
-        style={
-          Object {
-            "clip": "rect(1px, 1px, 1px, 1px)",
-            "height": "1px",
-            "overflow": "hidden",
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Meta description preview:
-      </span>
-      <div
-        className="c10"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      >
-        <div
-          className="c10"
-        >
-          
-          
-          Description
-        </div>
-      </div>
-    </div>
-    <div
-      className="c1 yoast-shopping-data-preview--mobile"
-    >
-      <span
-        className="screen-reader-text"
-        style={
-          Object {
-            "clip": "rect(1px, 1px, 1px, 1px)",
-            "height": "1px",
-            "overflow": "hidden",
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Shopping data preview:
-      </span>
-      <div
-        className="c10"
-      >
-        
-        
-        
-      </div>
-    </div>
-  </div>
-</section>
-`;
-
-exports[`SnippetPreview renders a SnippetPreview in the default mode 1`] = `
-.c10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c0 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c7 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c8 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c9 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c2 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c3 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c5 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c6 {
-  color: #3c4043;
-}
-
-.c10 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c10:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c1 {
-  padding: 12px 16px;
-}
-
-.c1:first-child {
-  margin-bottom: -16px;
-}
-
-.c4 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-<section>
-  <div
-    className="c0"
-    id="yoast-snippet-preview-container"
-    width={null}
-  >
-    <div
-      className="c1"
-    >
-      <span
-        className="screen-reader-text"
-        style={
-          Object {
-            "clip": "rect(1px, 1px, 1px, 1px)",
-            "height": "1px",
-            "overflow": "hidden",
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Url preview:
-      </span>
-      <div
-        className="c2"
-      >
-        <div
-          className="c3"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <img
-            alt=""
-            className="c4"
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-          />
-          <span
-            className="c5"
-          >
-            <span
-              className="c6"
-            >
-              example.org
-            </span>
-             › 
-          </span>
-        </div>
-      </div>
-      <span
-        className="screen-reader-text"
-        style={
-          Object {
-            "clip": "rect(1px, 1px, 1px, 1px)",
-            "height": "1px",
-            "overflow": "hidden",
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        SEO title preview:
-      </span>
-      <div
-        className="c7"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      >
-        <div
-          className="c8"
-        >
-          <span
-            className="c9"
-          >
-            Title
-          </span>
-        </div>
-      </div>
-    </div>
-    <div
-      className="c1 yoast-shopping-data-preview--desktop"
-    >
-      <span
-        className="screen-reader-text"
-        style={
-          Object {
-            "clip": "rect(1px, 1px, 1px, 1px)",
-            "height": "1px",
-            "overflow": "hidden",
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Shopping data preview:
-      </span>
-    </div>
-    <div
-      className="c1"
-    >
-      <span
-        className="screen-reader-text"
-        style={
-          Object {
-            "clip": "rect(1px, 1px, 1px, 1px)",
-            "height": "1px",
-            "overflow": "hidden",
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Meta description preview:
-      </span>
-      <div
-        className="c10"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      >
-        <div
-          className="c10"
-        >
-          
-          
-          Description
-        </div>
-      </div>
-    </div>
-    <div
-      className="c1 yoast-shopping-data-preview--mobile"
-    >
-      <span
-        className="screen-reader-text"
-        style={
-          Object {
-            "clip": "rect(1px, 1px, 1px, 1px)",
-            "height": "1px",
-            "overflow": "hidden",
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Shopping data preview:
-      </span>
-      <div
-        className="c10"
-      >
-        
-        
-        
-      </div>
-    </div>
-  </div>
-</section>
-`;
-
-exports[`SnippetPreview renders a SnippetPreview that looks like Google 1`] = `
-.c0 {
-  overflow: auto;
-  width: 640px;
-  padding: 0 20px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.c2 {
-  width: 600px;
-}
-
-.c10 {
-  display: inline;
-  margin-left: 0.3em;
-  color: #70757a;
-}
-
-.c1 {
-  background-color: #fff;
-  font-family: arial,sans-serif;
-  box-sizing: border-box;
-}
-
-.c8 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c9 {
-  color: #1a0dab;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 20px;
-  line-height: 1.3;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c10 {
-  white-space: nowrap;
-}
-
-.c3 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c4 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 0;
-  padding-top: 1px;
-  line-height: 1.5;
-  vertical-align: baseline;
-}
-
-.c5 {
-  font-size: 14px;
-  line-height: 1.3;
-  color: #5f6368;
-}
-
-.c11 {
-  color: #545454;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-  padding-top: 1px;
-  font-size: 14px;
-  line-height: 1.58;
-}
-
-.c7 {
-  display: inline-block;
-  margin-top: 9px;
-  margin-left: 6px;
-  border-top: 5px solid #70757a;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  vertical-align: top;
-}
-
-<section>
-  <div
-    className="c0 c1"
-    id="yoast-snippet-preview-container"
-  >
-    <div
-      className="c2"
-    >
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c3"
-        >
-          <div
-            className="c4"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <span
-              className="c5"
-            >
-              <span
-                className="c6"
-              >
-                example.org
-              </span>
-               › 
-            </span>
-          </div>
-        </div>
-        <div
-          className="c7"
-        />
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c8"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c9"
-          >
-            <span
-              className="c10"
-            >
-              Title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        
-        <p
-          className="c10"
-        >
-          
-          
-          
-        </p>
-      </div>
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          
-          Description
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-    </div>
-  </div>
-</section>
-`;
-
-exports[`SnippetPreview renders a caret on activation 1`] = `
-.c0 {
-  overflow: auto;
-  width: 640px;
-  padding: 0 20px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.c2 {
-  width: 600px;
-}
-
-.c10 {
-  display: inline;
-  margin-left: 0.3em;
-  color: #70757a;
-}
-
-.c1 {
-  background-color: #fff;
-  font-family: arial,sans-serif;
-  box-sizing: border-box;
-}
-
-.c9 {
-  color: #1a0dab;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 20px;
-  line-height: 1.3;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c10 {
-  white-space: nowrap;
-}
-
-.c3 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c4 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 0;
-  padding-top: 1px;
-  line-height: 1.5;
-  vertical-align: baseline;
-}
-
-.c5 {
-  font-size: 14px;
-  line-height: 1.3;
-  color: #5f6368;
-}
-
-.c11 {
-  color: #545454;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-  padding-top: 1px;
-  font-size: 14px;
-  line-height: 1.58;
-}
-
-.c7 {
-  display: inline-block;
-  margin-top: 9px;
-  margin-left: 6px;
-  border-top: 5px solid #70757a;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  vertical-align: top;
-}
-
-.c8 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c8::before {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: -22px;
-  width: 22px;
-  height: 22px;
-  background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23555%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
-  background-size: 24px;
-  background-repeat: no-repeat;
-  background-position: center;
-  content: "";
-}
-
-<section>
-  <div
-    className="c0 c1"
-    id="yoast-snippet-preview-container"
-  >
-    <div
-      className="c2"
-    >
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c3"
-        >
-          <div
-            className="c4"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <span
-              className="c5"
-            >
-              <span
-                className="c6"
-              >
-                example.org
-              </span>
-               › 
-            </span>
-          </div>
-        </div>
-        <div
-          className="c7"
-        />
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c8"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c9"
-          >
-            <span
-              className="c10"
-            >
-              Title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        
-        <p
-          className="c10"
-        >
-          
-          
-          
-        </p>
-      </div>
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          
-          Description
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-    </div>
-  </div>
-</section>
-`;
-
-exports[`SnippetPreview renders a caret on activation 2`] = `
-.c0 {
-  overflow: auto;
-  width: 640px;
-  padding: 0 20px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.c2 {
-  width: 600px;
-}
-
-.c10 {
-  display: inline;
-  margin-left: 0.3em;
-  color: #70757a;
-}
-
-.c1 {
-  background-color: #fff;
-  font-family: arial,sans-serif;
-  box-sizing: border-box;
-}
-
-.c8 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c9 {
-  color: #1a0dab;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 20px;
-  line-height: 1.3;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c10 {
-  white-space: nowrap;
-}
-
-.c3 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c4 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 0;
-  padding-top: 1px;
-  line-height: 1.5;
-  vertical-align: baseline;
-}
-
-.c5 {
-  font-size: 14px;
-  line-height: 1.3;
-  color: #5f6368;
-}
-
-.c6 {
-  color: #3c4043;
-}
-
-.c7 {
-  display: inline-block;
-  margin-top: 9px;
-  margin-left: 6px;
-  border-top: 5px solid #70757a;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  vertical-align: top;
-}
-
-.c11 {
-  color: #545454;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-  padding-top: 1px;
-  font-size: 14px;
-  line-height: 1.58;
-}
-
-.c11::before {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: -22px;
-  width: 22px;
-  height: 22px;
-  background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23555%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
-  background-size: 24px;
-  background-repeat: no-repeat;
-  background-position: center;
-  content: "";
-}
-
-<section>
-  <div
-    className="c0 c1"
-    id="yoast-snippet-preview-container"
-  >
-    <div
-      className="c2"
-    >
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c3"
-        >
-          <div
-            className="c4"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <span
-              className="c5"
-            >
-              <span
-                className="c6"
-              >
-                example.org
-              </span>
-               › 
-            </span>
-          </div>
-        </div>
-        <div
-          className="c7"
-        />
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c8"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c9"
-          >
-            <span
-              className="c10"
-            >
-              Title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        
-        <p
-          className="c10"
-        >
-          
-          
-          
-        </p>
-      </div>
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          
-          Description
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-    </div>
-  </div>
-</section>
-`;
-
-exports[`SnippetPreview renders a caret on activation 3`] = `
-.c0 {
-  overflow: auto;
-  width: 640px;
-  padding: 0 20px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.c2 {
-  width: 600px;
-}
-
-.c10 {
-  display: inline;
-  margin-left: 0.3em;
-  color: #70757a;
-}
-
-.c1 {
-  background-color: #fff;
-  font-family: arial,sans-serif;
-  box-sizing: border-box;
-}
-
-.c8 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c9 {
-  color: #1a0dab;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 20px;
-  line-height: 1.3;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c10 {
-  white-space: nowrap;
-}
-
-.c4 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 0;
-  padding-top: 1px;
-  line-height: 1.5;
-  vertical-align: baseline;
-}
-
-.c5 {
-  font-size: 14px;
-  line-height: 1.3;
-  color: #5f6368;
-}
-
-.c11 {
-  color: #545454;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-  padding-top: 1px;
-  font-size: 14px;
-  line-height: 1.58;
-}
-
-.c7 {
-  display: inline-block;
-  margin-top: 9px;
-  margin-left: 6px;
-  border-top: 5px solid #70757a;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  vertical-align: top;
-}
-
-.c3 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c3::before {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: -22px;
-  width: 22px;
-  height: 22px;
-  background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23555%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
-  background-size: 24px;
-  background-repeat: no-repeat;
-  background-position: center;
-  content: "";
-}
-
-<section>
-  <div
-    className="c0 c1"
-    id="yoast-snippet-preview-container"
-  >
-    <div
-      className="c2"
-    >
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c3"
-        >
-          <div
-            className="c4"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <span
-              className="c5"
-            >
-              <span
-                className="c6"
-              >
-                example.org
-              </span>
-               › 
-            </span>
-          </div>
-        </div>
-        <div
-          className="c7"
-        />
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c8"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c9"
-          >
-            <span
-              className="c10"
-            >
-              Title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        
-        <p
-          className="c10"
-        >
-          
-          
-          
-        </p>
-      </div>
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          
-          Description
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-    </div>
-  </div>
-</section>
-`;
-
-exports[`SnippetPreview renders a caret on hover 1`] = `
-.c0 {
-  overflow: auto;
-  width: 640px;
-  padding: 0 20px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.c2 {
-  width: 600px;
-}
-
-.c10 {
-  display: inline;
-  margin-left: 0.3em;
-  color: #70757a;
-}
-
-.c1 {
-  background-color: #fff;
-  font-family: arial,sans-serif;
-  box-sizing: border-box;
-}
-
-.c9 {
-  color: #1a0dab;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 20px;
-  line-height: 1.3;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c10 {
-  white-space: nowrap;
-}
-
-.c3 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c4 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 0;
-  padding-top: 1px;
-  line-height: 1.5;
-  vertical-align: baseline;
-}
-
-.c5 {
-  font-size: 14px;
-  line-height: 1.3;
-  color: #5f6368;
-}
-
-.c11 {
-  color: #545454;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-  padding-top: 1px;
-  font-size: 14px;
-  line-height: 1.58;
-}
-
-.c7 {
-  display: inline-block;
-  margin-top: 9px;
-  margin-left: 6px;
-  border-top: 5px solid #70757a;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  vertical-align: top;
-}
-
-.c8 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c8::before {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: -22px;
-  width: 22px;
-  height: 22px;
-  background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23ccc%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
-  background-size: 24px;
-  background-repeat: no-repeat;
-  background-position: center;
-  content: "";
-}
-
-<section>
-  <div
-    className="c0 c1"
-    id="yoast-snippet-preview-container"
-  >
-    <div
-      className="c2"
-    >
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c3"
-        >
-          <div
-            className="c4"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <span
-              className="c5"
-            >
-              <span
-                className="c6"
-              >
-                example.org
-              </span>
-               › 
-            </span>
-          </div>
-        </div>
-        <div
-          className="c7"
-        />
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c8"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c9"
-          >
-            <span
-              className="c10"
-            >
-              Title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        
-        <p
-          className="c10"
-        >
-          
-          
-          
-        </p>
-      </div>
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          
-          Description
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-    </div>
-  </div>
-</section>
-`;
-
-exports[`SnippetPreview renders a caret on hover 2`] = `
-.c0 {
-  overflow: auto;
-  width: 640px;
-  padding: 0 20px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.c2 {
-  width: 600px;
-}
-
-.c10 {
-  display: inline;
-  margin-left: 0.3em;
-  color: #70757a;
-}
-
-.c1 {
-  background-color: #fff;
-  font-family: arial,sans-serif;
-  box-sizing: border-box;
-}
-
-.c8 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c9 {
-  color: #1a0dab;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 20px;
-  line-height: 1.3;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c10 {
-  white-space: nowrap;
-}
-
-.c3 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c4 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 0;
-  padding-top: 1px;
-  line-height: 1.5;
-  vertical-align: baseline;
-}
-
-.c5 {
-  font-size: 14px;
-  line-height: 1.3;
-  color: #5f6368;
-}
-
-.c6 {
-  color: #3c4043;
-}
-
-.c7 {
-  display: inline-block;
-  margin-top: 9px;
-  margin-left: 6px;
-  border-top: 5px solid #70757a;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  vertical-align: top;
-}
-
-.c11 {
-  color: #545454;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-  padding-top: 1px;
-  font-size: 14px;
-  line-height: 1.58;
-}
-
-.c11::before {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: -22px;
-  width: 22px;
-  height: 22px;
-  background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23ccc%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
-  background-size: 24px;
-  background-repeat: no-repeat;
-  background-position: center;
-  content: "";
-}
-
-<section>
-  <div
-    className="c0 c1"
-    id="yoast-snippet-preview-container"
-  >
-    <div
-      className="c2"
-    >
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c3"
-        >
-          <div
-            className="c4"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <span
-              className="c5"
-            >
-              <span
-                className="c6"
-              >
-                example.org
-              </span>
-               › 
-            </span>
-          </div>
-        </div>
-        <div
-          className="c7"
-        />
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c8"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c9"
-          >
-            <span
-              className="c10"
-            >
-              Title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        
-        <p
-          className="c10"
-        >
-          
-          
-          
-        </p>
-      </div>
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          
-          Description
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-    </div>
-  </div>
-</section>
-`;
-
-exports[`SnippetPreview renders a caret on hover 3`] = `
-.c0 {
-  overflow: auto;
-  width: 640px;
-  padding: 0 20px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.c2 {
-  width: 600px;
-}
-
-.c10 {
-  display: inline;
-  margin-left: 0.3em;
-  color: #70757a;
-}
-
-.c1 {
-  background-color: #fff;
-  font-family: arial,sans-serif;
-  box-sizing: border-box;
-}
-
-.c8 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c9 {
-  color: #1a0dab;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 20px;
-  line-height: 1.3;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c10 {
-  white-space: nowrap;
-}
-
-.c4 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 0;
-  padding-top: 1px;
-  line-height: 1.5;
-  vertical-align: baseline;
-}
-
-.c5 {
-  font-size: 14px;
-  line-height: 1.3;
-  color: #5f6368;
-}
-
-.c11 {
-  color: #545454;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-  padding-top: 1px;
-  font-size: 14px;
-  line-height: 1.58;
-}
-
-.c7 {
-  display: inline-block;
-  margin-top: 9px;
-  margin-left: 6px;
-  border-top: 5px solid #70757a;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  vertical-align: top;
-}
-
-.c3 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c3::before {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: -22px;
-  width: 22px;
-  height: 22px;
-  background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23ccc%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
-  background-size: 24px;
-  background-repeat: no-repeat;
-  background-position: center;
-  content: "";
-}
-
-<section>
-  <div
-    className="c0 c1"
-    id="yoast-snippet-preview-container"
-  >
-    <div
-      className="c2"
-    >
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c3"
-        >
-          <div
-            className="c4"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <span
-              className="c5"
-            >
-              <span
-                className="c6"
-              >
-                example.org
-              </span>
-               › 
-            </span>
-          </div>
-        </div>
-        <div
-          className="c7"
-        />
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c8"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c9"
-          >
-            <span
-              className="c10"
-            >
-              Title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        
-        <p
-          className="c10"
-        >
-          
-          
-          
-        </p>
-      </div>
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          
-          Description
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-    </div>
-  </div>
-</section>
-`;
-
-exports[`SnippetPreview shows the date if a date is passed 1`] = `
-.c0 {
-  overflow: auto;
-  width: 640px;
-  padding: 0 20px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.c2 {
-  width: 600px;
-}
-
-.c10 {
-  display: inline;
-  margin-left: 0.3em;
-  color: #70757a;
-}
-
-.c1 {
-  background-color: #fff;
-  font-family: arial,sans-serif;
-  box-sizing: border-box;
-}
-
-.c8 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c9 {
-  color: #1a0dab;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 20px;
-  line-height: 1.3;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c10 {
-  white-space: nowrap;
-}
-
-.c3 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c4 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 0;
-  padding-top: 1px;
-  line-height: 1.5;
-  vertical-align: baseline;
-}
-
-.c5 {
-  font-size: 14px;
-  line-height: 1.3;
-  color: #5f6368;
-}
-
-.c11 {
-  color: #545454;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-  padding-top: 1px;
-  font-size: 14px;
-  line-height: 1.58;
-}
-
-.c7 {
-  display: inline-block;
-  margin-top: 9px;
-  margin-left: 6px;
-  border-top: 5px solid #70757a;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  vertical-align: top;
-}
-
-.c12 {
-  color: #777;
-}
-
-<section>
-  <div
-    className="c0 c1"
-    id="yoast-snippet-preview-container"
-  >
-    <div
-      className="c2"
-    >
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c3"
-        >
-          <div
-            className="c4"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <span
-              className="c5"
-            >
-              <span
-                className="c6"
-              >
-                example.org
-              </span>
-               › 
-            </span>
-          </div>
-        </div>
-        <div
-          className="c7"
-        />
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c8"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c9"
-          >
-            <span
-              className="c10"
-            >
-              Title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        
-        <p
-          className="c10"
-        >
-          
-          
-          
-        </p>
-      </div>
-      <div
-        className=""
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <span
-            className="c12"
-          >
-            Today
-             
-            -
-             
-          </span>
-          Description
-        </div>
-      </div>
-      <div
-        className="yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-    </div>
-  </div>
-</section>
-`;

From 505e6c817c9b2d1f906d07341ef0ae24db115a5f Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Thu, 25 Mar 2021 11:04:08 +0100
Subject: [PATCH 15/22] remove obsolete snapshots

---
 .../__snapshots__/SnippetEditorTest.js.snap   | 25445 ----------------
 1 file changed, 25445 deletions(-)
 delete mode 100644 packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap

diff --git a/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap b/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap
deleted file mode 100644
index 35790155bc..0000000000
--- a/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap
+++ /dev/null
@@ -1,25445 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SnippetEditor accepts a custom data mapping function 1`] = `
-.c14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c4 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c11 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c12 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c13 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c6 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c7 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c9 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c10 {
-  color: #3c4043;
-}
-
-.c14 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c14:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c5 {
-  padding: 12px 16px;
-}
-
-.c5:first-child {
-  margin-bottom: -16px;
-}
-
-.c8 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-.c0 {
-  border: 0;
-  padding: 0;
-  margin: 0 0 16px;
-}
-
-.c1 {
-  margin: 8px 0;
-  padding: 0;
-  color: #555;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.c3 {
-  margin-right: 16px;
-  color: inherit;
-  font-size: 14px;
-  line-height: 1.71428571;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c2.c2 {
-  margin: 0 8px 0 0;
-  cursor: pointer;
-}
-
-.c15 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin: 10px 0 0 4px;
-  fill: #555;
-  padding-left: 8px;
-}
-
-.c15:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c15::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c15:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c15:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c15 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c15 svg {
-  margin-right: 7px;
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c15::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-<div>
-  <fieldset
-    className="c0"
-  >
-    <legend
-      className="c1"
-    >
-      Preview as:
-    </legend>
-    <input
-      autoComplete={undefined}
-      checked={true}
-      className="c2"
-      defaultValue="mobile"
-      id="yoast-google-preview-mode-mobile"
-      name="screen"
-      onChange={[Function]}
-      type="radio"
-    />
-    <label
-      className="c3"
-      htmlFor="yoast-google-preview-mode-mobile"
-    >
-      Mobile result
-    </label>
-    <input
-      autoComplete={undefined}
-      checked={false}
-      className="c2"
-      defaultValue="desktop"
-      id="yoast-google-preview-mode-desktop"
-      name="screen"
-      onChange={[Function]}
-      type="radio"
-    />
-    <label
-      className="c3"
-      htmlFor="yoast-google-preview-mode-desktop"
-    >
-      Desktop result
-    </label>
-  </fieldset>
-  <section>
-    <div
-      className="c4"
-      id="yoast-snippet-preview-container"
-      width={null}
-    >
-      <div
-        className="c5"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c6"
-        >
-          <div
-            className="c7"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <img
-              alt=""
-              className="c8"
-              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-            />
-            <span
-              className="c9"
-            >
-              <span
-                className="c10"
-              >
-                example.org
-              </span>
-               › totally-different-url
-            </span>
-          </div>
-        </div>
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c12"
-          >
-            <span
-              className="c13"
-            >
-              Totally different title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="c5 yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-      <div
-        className="c5"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c14"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c14"
-          >
-            
-            
-            Totally different description
-          </div>
-        </div>
-      </div>
-      <div
-        className="c5 yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        <div
-          className="c14"
-        >
-          
-          
-          
-        </div>
-      </div>
-    </div>
-  </section>
-  <button
-    aria-expanded={false}
-    className="c15"
-    onClick={[Function]}
-    type="button"
-  >
-    <svg
-      aria-hidden={true}
-      className="yoast-svg-icon yoast-svg-icon-edit createSvgIconComponent__StyledSvg-sc-1h4gl3a-0 cPnaHk"
-      fill="currentColor"
-      focusable="false"
-      role="img"
-      size="16px"
-      viewBox="0 0 1792 1792"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"
-      />
-    </svg>
-    Edit snippet
-  </button>
-</div>
-`;
-
-exports[`SnippetEditor activates a field on onMouseUp() and opens the editor 1`] = `
-<ErrorBoundary>
-  <div>
-    <ModeSwitcher
-      active="mobile"
-      desktopModeInputId="yoast-google-preview-mode-desktop"
-      mobileModeInputId="yoast-google-preview-mode-mobile"
-      onChange={[Function]}
-    />
-    <SnippetPreview
-      activeField={null}
-      breadcrumbs={null}
-      date=""
-      description="Test description, %%replacement_variable%%"
-      faviconSrc=""
-      hoveredField={null}
-      isAmp={false}
-      keyword=""
-      locale="en"
-      mobileImageSrc=""
-      mode="mobile"
-      onHover={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-      onMouseUp={[Function]}
-      shoppingData={Object {}}
-      title="Test title"
-      url="http://example.org/test-slug"
-      wordsToHighlight={Array []}
-    />
-    <SnippetEditor__EditSnippetButton
-      activeBackgroundColor="#f7f7f7"
-      activeBorderColor="#000"
-      activeColor="#000"
-      aria-expanded={true}
-      backgroundColor="#f7f7f7"
-      borderColor="#ccc"
-      boxShadowColor="#ccc"
-      focusBackgroundColor="#fff"
-      focusBorderColor="#0066cd"
-      focusBoxShadowColor="#084a67"
-      focusColor="#000"
-      hoverBackgroundColor="#fff"
-      hoverColor="#000"
-      onClick={[Function]}
-      textColor="#555"
-      type="button"
-    >
-      <SvgIcon
-        className=""
-        color="currentColor"
-        icon="edit"
-        size="16px"
-      />
-      Edit snippet
-    </SnippetEditor__EditSnippetButton>
-    <SnippetEditorFields
-      activeField={null}
-      containerPadding="0 20px"
-      data={
-        Object {
-          "description": "Test description, %%replacement_variable%%",
-          "slug": "test-slug",
-          "title": "Test title",
-        }
-      }
-      descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here"
-      descriptionInputId="yoast-google-preview-description"
-      descriptionLengthProgress={
-        Object {
-          "actual": 42,
-          "max": 156,
-          "score": 6,
-        }
-      }
-      hoveredField={null}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      recommendedReplacementVariables={Array []}
-      replacementVariables={Array []}
-      slugInputId="yoast-google-preview-slug"
-      titleInputId="yoast-google-preview-title"
-      titleLengthProgress={
-        Object {
-          "actual": 0,
-          "max": 600,
-          "score": 1,
-        }
-      }
-    />
-    <SnippetEditor__CloseEditorButton
-      activeBackgroundColor="#f7f7f7"
-      activeBorderColor="#000"
-      activeColor="#000"
-      backgroundColor="#f7f7f7"
-      borderColor="#ccc"
-      boxShadowColor="#ccc"
-      focusBackgroundColor="#fff"
-      focusBorderColor="#0066cd"
-      focusBoxShadowColor="#084a67"
-      focusColor="#000"
-      hoverBackgroundColor="#fff"
-      hoverColor="#000"
-      onClick={[Function]}
-      textColor="#555"
-      type="button"
-    >
-      Close snippet editor
-    </SnippetEditor__CloseEditorButton>
-  </div>
-</ErrorBoundary>
-`;
-
-exports[`SnippetEditor closes when calling close() 1`] = `
-.c18 {
-  -webkit-flex: 1 1 200px;
-  -ms-flex: 1 1 200px;
-  flex: 1 1 200px;
-  min-width: 200px;
-  cursor: pointer;
-  font-size: 14px;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  margin: 4px 0;
-  color: #303030;
-  font-weight: 500;
-}
-
-.c17 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c17::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c17::-webkit-progress-value {
-  background-color: #dc3232;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c17::-moz-progress-bar {
-  background-color: #dc3232;
-}
-
-.c17::-ms-fill {
-  background-color: #dc3232;
-  border: 0;
-}
-
-.c21 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c21::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c21::-webkit-progress-value {
-  background-color: #ee7c1b;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c21::-moz-progress-bar {
-  background-color: #ee7c1b;
-}
-
-.c21::-ms-fill {
-  background-color: #ee7c1b;
-  border: 0;
-}
-
-.c16 {
-  padding: 0 20px;
-}
-
-.c14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c4 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c11 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c12 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c13 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c6 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c7 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c9 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c10 {
-  color: #3c4043;
-}
-
-.c14 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c14:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c5 {
-  padding: 12px 16px;
-}
-
-.c5:first-child {
-  margin-bottom: -16px;
-}
-
-.c8 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-.c20 {
-  border: none;
-  width: 100%;
-  height: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-}
-
-.c20:focus {
-  outline: 0;
-}
-
-.c19 {
-  -webkit-flex: 0 1 100%;
-  -ms-flex: 0 1 100%;
-  flex: 0 1 100%;
-  border: 1px solid #ddd;
-  padding: 3px 5px;
-  box-sizing: border-box;
-  box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
-  background-color: #fff;
-  color: #32373c;
-  outline: 0;
-  -webkit-transition: 50ms border-color ease-in-out;
-  transition: 50ms border-color ease-in-out;
-  position: relative;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-size: 14px;
-  cursor: text;
-}
-
-.c19::before {
-  display: block;
-  position: absolute;
-  top: -1px;
-  left: -25px;
-  width: 24px;
-  height: 24px;
-  background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22transparent%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
-  background-size: 25px;
-  content: "";
-}
-
-.c0 {
-  border: 0;
-  padding: 0;
-  margin: 0 0 16px;
-}
-
-.c1 {
-  margin: 8px 0;
-  padding: 0;
-  color: #555;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.c3 {
-  margin-right: 16px;
-  color: inherit;
-  font-size: 14px;
-  line-height: 1.71428571;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c2.c2 {
-  margin: 0 8px 0 0;
-  cursor: pointer;
-}
-
-.c15 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin: 10px 0 0 4px;
-  fill: #555;
-  padding-left: 8px;
-}
-
-.c15:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c15::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c15:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c15:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c15 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c15 svg {
-  margin-right: 7px;
-}
-
-.c22 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin-top: 24px;
-}
-
-.c22:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c22::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c22:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c22:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c22 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c15::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c22::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-<SnippetEditor
-  baseUrl="http://example.org/"
-  data={
-    Object {
-      "description": "Test description, %%replacement_variable%%",
-      "slug": "test-slug",
-      "title": "Test title",
-    }
-  }
-  date=""
-  descriptionEditorFieldPlaceholder=""
-  descriptionLengthProgress={
-    Object {
-      "actual": 0,
-      "max": 156,
-      "score": 0,
-    }
-  }
-  faviconSrc=""
-  hasPaperStyle={true}
-  idSuffix=""
-  keyword=""
-  locale="en"
-  mapEditorDataToPreview={null}
-  mobileImageSrc=""
-  mode="mobile"
-  onChange={[Function]}
-  onChangeAnalysisData={[Function]}
-  recommendedReplacementVariables={Array []}
-  replacementVariables={Array []}
-  shoppingData={Object {}}
-  showCloseButton={true}
-  titleLengthProgress={
-    Object {
-      "actual": 0,
-      "max": 600,
-      "score": 0,
-    }
-  }
-  wordsToHighlight={Array []}
->
-  <ErrorBoundary>
-    <div>
-      <ModeSwitcher
-        active="mobile"
-        desktopModeInputId="yoast-google-preview-mode-desktop"
-        mobileModeInputId="yoast-google-preview-mode-mobile"
-        onChange={[Function]}
-      >
-        <ModeSwitcher__Switcher>
-          <StyledComponent
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                  "isStatic": false,
-                  "lastClassName": "c0",
-                  "rules": Array [
-                    "border:0;padding:0;margin:0 0 16px;",
-                  ],
-                },
-                "displayName": "ModeSwitcher__Switcher",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                "target": "fieldset",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
-              }
-            }
-            forwardedRef={null}
-          >
-            <fieldset
-              className="c0"
-            >
-              <ModeSwitcher__SwitcherTitle>
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                        "isStatic": false,
-                        "lastClassName": "c1",
-                        "rules": Array [
-                          "margin:8px 0;padding:0;color:",
-                          "#555",
-                          ";font-size:14px;font-weight:600;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__SwitcherTitle",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                      "target": "legend",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <legend
-                    className="c1"
-                  >
-                    Preview as:
-                  </legend>
-                </StyledComponent>
-              </ModeSwitcher__SwitcherTitle>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": true,
-                    "id": "yoast-google-preview-mode-mobile",
-                  }
-                }
-                type="radio"
-                value="mobile"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": true,
-                      "id": "yoast-google-preview-mode-mobile",
-                    }
-                  }
-                  type="radio"
-                  value="mobile"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": true,
-                        "id": "yoast-google-preview-mode-mobile",
-                      }
-                    }
-                    type="radio"
-                    value="mobile"
-                  >
-                    <input
-                      checked={true}
-                      className="c2"
-                      defaultValue="mobile"
-                      id="yoast-google-preview-mode-mobile"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-mobile"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-mobile"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-mobile"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-mobile"
-                    >
-                      Mobile result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": false,
-                    "id": "yoast-google-preview-mode-desktop",
-                  }
-                }
-                type="radio"
-                value="desktop"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": false,
-                      "id": "yoast-google-preview-mode-desktop",
-                    }
-                  }
-                  type="radio"
-                  value="desktop"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": false,
-                        "id": "yoast-google-preview-mode-desktop",
-                      }
-                    }
-                    type="radio"
-                    value="desktop"
-                  >
-                    <input
-                      checked={false}
-                      className="c2"
-                      defaultValue="desktop"
-                      id="yoast-google-preview-mode-desktop"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-desktop"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-desktop"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-desktop"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-desktop"
-                    >
-                      Desktop result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-            </fieldset>
-          </StyledComponent>
-        </ModeSwitcher__Switcher>
-      </ModeSwitcher>
-      <SnippetPreview
-        activeField={null}
-        breadcrumbs={null}
-        date=""
-        description="Test description, %%replacement_variable%%"
-        faviconSrc=""
-        hoveredField={null}
-        isAmp={false}
-        keyword=""
-        locale="en"
-        mobileImageSrc=""
-        mode="mobile"
-        onHover={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-        shoppingData={Object {}}
-        title="Test title"
-        url="http://example.org/test-slug"
-        wordsToHighlight={Array []}
-      >
-        <section>
-          <SnippetPreview__MobileContainer
-            id="yoast-snippet-preview-container"
-            padding={20}
-            width={null}
-          >
-            <StyledComponent
-              forwardedComponent={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "attrs": Array [],
-                  "componentStyle": ComponentStyle {
-                    "componentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                    "isStatic": false,
-                    "lastClassName": "c4",
-                    "rules": Array [
-                      "border-bottom:1px hidden #fff;border-radius:8px;box-shadow:0 1px 6px rgba(32,33,36,0.28);font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;max-width:",
-                      "400",
-                      "px;box-sizing:border-box;font-size:14px;",
-                    ],
-                  },
-                  "displayName": "SnippetPreview__MobileContainer",
-                  "foldedComponentIds": Array [],
-                  "render": [Function],
-                  "styledComponentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                  "target": "div",
-                  "toString": [Function],
-                  "warnTooManyClasses": [Function],
-                  "withComponent": [Function],
-                }
-              }
-              forwardedRef={null}
-              id="yoast-snippet-preview-container"
-              padding={20}
-              width={null}
-            >
-              <div
-                className="c4"
-                id="yoast-snippet-preview-container"
-                width={null}
-              >
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Url preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseUrl>
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                "isStatic": false,
-                                "lastClassName": "c6",
-                                "rules": Array [
-                                  "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseUrl",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                        >
-                          <div
-                            className="c6"
-                          >
-                            <SnippetPreview__BaseUrlOverflowContainer
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseUp={[Function]}
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                      "isStatic": false,
-                                      "lastClassName": "c7",
-                                      "rules": Array [
-                                        "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                        "overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-bottom:",
-                                        [Function],
-                                        ";padding-top:1px;line-height:",
-                                        [Function],
-                                        ";vertical-align:",
-                                        [Function],
-                                        ";",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__BaseUrlOverflowContainer",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                onMouseUp={[Function]}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c7"
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  onMouseUp={[Function]}
-                                >
-                                  <SnippetPreview__Favicon
-                                    alt=""
-                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                  >
-                                    <StyledComponent
-                                      alt=""
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                            "isStatic": false,
-                                            "lastClassName": "c8",
-                                            "rules": Array [
-                                              "width:16px;height:16px;margin-right:12px;vertical-align:middle;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__Favicon",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                          "target": "img",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                    >
-                                      <img
-                                        alt=""
-                                        className="c8"
-                                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                      />
-                                    </StyledComponent>
-                                  </SnippetPreview__Favicon>
-                                  <SnippetPreview__UrlContentContainer
-                                    screenMode="mobile"
-                                  >
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                            "isStatic": false,
-                                            "lastClassName": "c9",
-                                            "rules": Array [
-                                              "font-size:",
-                                              [Function],
-                                              ";line-height:",
-                                              [Function],
-                                              ";color:",
-                                              [Function],
-                                              ";",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__UrlContentContainer",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      screenMode="mobile"
-                                    >
-                                      <span
-                                        className="c9"
-                                      >
-                                        <SnippetPreview__UrlBaseContainer>
-                                          <StyledComponent
-                                            forwardedComponent={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "attrs": Array [],
-                                                "componentStyle": ComponentStyle {
-                                                  "componentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                  "isStatic": false,
-                                                  "lastClassName": "c10",
-                                                  "rules": Array [
-                                                    "color:",
-                                                    [Function],
-                                                    ";",
-                                                  ],
-                                                },
-                                                "displayName": "SnippetPreview__UrlBaseContainer",
-                                                "foldedComponentIds": Array [],
-                                                "render": [Function],
-                                                "styledComponentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                "target": "span",
-                                                "toString": [Function],
-                                                "warnTooManyClasses": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            forwardedRef={null}
-                                          >
-                                            <span
-                                              className="c10"
-                                            >
-                                              example.org
-                                            </span>
-                                          </StyledComponent>
-                                        </SnippetPreview__UrlBaseContainer>
-                                         › test-slug
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__UrlContentContainer>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__BaseUrlOverflowContainer>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseUrl>
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          SEO title preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseTitle
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                                "isStatic": false,
-                                "lastClassName": "c11",
-                                "rules": Array [
-                                  "cursor:pointer;position:relative;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseTitle",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c11"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__TitleBounded
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                      "isStatic": false,
-                                      "lastClassName": "c12",
-                                      "rules": Array [
-                                        "color:",
-                                        [Function],
-                                        ";text-decoration:none;font-size:",
-                                        [Function],
-                                        ";line-height:",
-                                        [Function],
-                                        ";font-weight:normal;margin:0;display:inline-block;overflow:hidden;max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                        "max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__TitleBounded",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__Title-sc-1hxg8jo-4",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c12"
-                                >
-                                  <SnippetPreview__TitleUnboundedMobile>
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                            "isStatic": false,
-                                            "lastClassName": "c13",
-                                            "rules": Array [
-                                              "display:inline-block;max-height:40px;padding-top:1px;vertical-align:top;overflow:hidden;text-overflow:ellipsis;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__TitleUnboundedMobile",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={[Function]}
-                                    >
-                                      <span
-                                        className="c13"
-                                      >
-                                        Test title
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__TitleUnboundedMobile>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__TitleBounded>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseTitle>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--desktop"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--desktop"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--desktop"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Meta description preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__MobileDescription
-                        isDescriptionPlaceholder={false}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                "isStatic": false,
-                                "lastClassName": "c14",
-                                "rules": Array [
-                                  "color:",
-                                  "#3c4043",
-                                  ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                  "600",
-                                  "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__MobileDescription",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          isDescriptionPlaceholder={false}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c14"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__MobileDescription
-                              isDescriptionPlaceholder={false}
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                      "isStatic": false,
-                                      "lastClassName": "c14",
-                                      "rules": Array [
-                                        "color:",
-                                        "#3c4043",
-                                        ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                        "600",
-                                        "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__MobileDescription",
-                                    "foldedComponentIds": Array [],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={[Function]}
-                                isDescriptionPlaceholder={false}
-                              >
-                                <div
-                                  className="c14"
-                                >
-                                  Test description, %%replacement_variable%%
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__MobileDescription>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__MobileDescription>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--mobile"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--mobile"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--mobile"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                      <ProductDataMobile
-                        shoppingData={Object {}}
-                      >
-                        <ProductDataMobile__ProductData>
-                          <StyledComponent
-                            forwardedComponent={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "attrs": Array [],
-                                "componentStyle": ComponentStyle {
-                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                  "isStatic": false,
-                                  "lastClassName": "c14",
-                                  "rules": Array [
-                                    "display:flex;",
-                                  ],
-                                },
-                                "displayName": "ProductDataMobile__ProductData",
-                                "foldedComponentIds": Array [],
-                                "render": [Function],
-                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                "target": "div",
-                                "toString": [Function],
-                                "warnTooManyClasses": [Function],
-                                "withComponent": [Function],
-                              }
-                            }
-                            forwardedRef={null}
-                          >
-                            <div
-                              className="c14"
-                            />
-                          </StyledComponent>
-                        </ProductDataMobile__ProductData>
-                      </ProductDataMobile>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-              </div>
-            </StyledComponent>
-          </SnippetPreview__MobileContainer>
-        </section>
-      </SnippetPreview>
-      <SnippetEditor__EditSnippetButton
-        activeBackgroundColor="#f7f7f7"
-        activeBorderColor="#000"
-        activeColor="#000"
-        aria-expanded={true}
-        backgroundColor="#f7f7f7"
-        borderColor="#ccc"
-        boxShadowColor="#ccc"
-        focusBackgroundColor="#fff"
-        focusBorderColor="#0066cd"
-        focusBoxShadowColor="#084a67"
-        focusColor="#000"
-        hoverBackgroundColor="#fff"
-        hoverColor="#000"
-        onClick={[Function]}
-        textColor="#555"
-        type="button"
-      >
-        <StyledComponent
-          activeBackgroundColor="#f7f7f7"
-          activeBorderColor="#000"
-          activeColor="#000"
-          aria-expanded={true}
-          backgroundColor="#f7f7f7"
-          borderColor="#ccc"
-          boxShadowColor="#ccc"
-          focusBackgroundColor="#fff"
-          focusBorderColor="#0066cd"
-          focusBoxShadowColor="#084a67"
-          focusColor="#000"
-          forwardedComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "_foldedDefaultProps": Object {
-                "activeBackgroundColor": "#f7f7f7",
-                "activeBorderColor": "#000",
-                "activeColor": "#000",
-                "backgroundColor": "#f7f7f7",
-                "borderColor": "#ccc",
-                "boxShadowColor": "#ccc",
-                "focusBackgroundColor": "#fff",
-                "focusBorderColor": "#0066cd",
-                "focusBoxShadowColor": "#084a67",
-                "focusColor": "#000",
-                "hoverBackgroundColor": "#fff",
-                "hoverColor": "#000",
-                "textColor": "#555",
-                "type": "button",
-              },
-              "attrs": Array [],
-              "componentStyle": ComponentStyle {
-                "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-                "isStatic": false,
-                "lastClassName": "c15",
-                "rules": Array [
-                  "color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";background:",
-                  [Function],
-                  ";box-shadow:0 1px 0 ",
-                  [Function],
-                  ";",
-                  "&:active{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";box-shadow:inset 0 2px 5px -3px ",
-                  [Function],
-                  "}",
-                  "&::-moz-focus-inner{border-width:0;}&:focus{outline:none;border-color:",
-                  [Function],
-                  ";color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";box-shadow:0 0 3px ",
-                  [Function],
-                  "}",
-                  "&:hover{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:var(--yoast-color-border--default);}",
-                  "display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-width:",
-                  "1px",
-                  ";border-style:solid;margin:0;padding:",
-                  "4px",
-                  " 10px;border-radius:3px;cursor:pointer;box-sizing:border-box;font-size:inherit;font-family:inherit;font-weight:inherit;text-align:",
-                  [Function],
-                  ";overflow:visible;min-height:",
-                  "32px",
-                  ";transition:var(--yoast-transition-default);svg{align-self:center;}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){::after{display:inline-block;content:\\"\\";min-height:",
-                  "22px",
-                  ";}}",
-                  "height:33px;border:1px solid #dbdbdb;box-shadow:none;font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;",
-                  "margin:",
-                  [Function],
-                  ";fill:",
-                  "#555",
-                  ";padding-left:8px;& svg{",
-                  [Function],
-                  ":7px;}",
-                ],
-              },
-              "displayName": "SnippetEditor__EditSnippetButton",
-              "foldedComponentIds": Array [
-                "Button__BaseButton-sc-32rbq-4",
-                "Button-sc-32rbq-3",
-                "Button-sc-32rbq-1",
-                "Button-sc-32rbq-2",
-                "Button-sc-32rbq-0",
-                "SnippetEditor__SnippetEditorButton-sc-144bmm3-0",
-              ],
-              "propTypes": Object {
-                "activeBackgroundColor": [Function],
-                "activeBorderColor": [Function],
-                "activeColor": [Function],
-                "backgroundColor": [Function],
-                "borderColor": [Function],
-                "boxShadowColor": [Function],
-                "focusBackgroundColor": [Function],
-                "focusBorderColor": [Function],
-                "focusBoxShadowColor": [Function],
-                "focusColor": [Function],
-                "hoverBackgroundColor": [Function],
-                "hoverColor": [Function],
-                "textColor": [Function],
-                "type": [Function],
-              },
-              "render": [Function],
-              "styledComponentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-              "target": "button",
-              "toString": [Function],
-              "warnTooManyClasses": [Function],
-              "withComponent": [Function],
-            }
-          }
-          forwardedRef={[Function]}
-          hoverBackgroundColor="#fff"
-          hoverColor="#000"
-          onClick={[Function]}
-          textColor="#555"
-          type="button"
-        >
-          <button
-            aria-expanded={true}
-            className="c15"
-            onClick={[Function]}
-            type="button"
-          >
-            <SvgIcon
-              className=""
-              color="currentColor"
-              icon="edit"
-              size="16px"
-            >
-              <SvgIconSet
-                className=""
-                color="currentColor"
-                icon="edit"
-                iconSet={
-                  Object {
-                    "alert-error": Object {
-                      "path": "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-info": Object {
-                      "path": "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-success": Object {
-                      "path": "M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-warning": Object {
-                      "path": "M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z",
-                      "viewbox": "0 0 576 512",
-                    },
-                    "angle-down": Object {
-                      "path": "M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-left": Object {
-                      "path": "M1203 544q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-right": Object {
-                      "path": "M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-up": Object {
-                      "path": "M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-down": Object {
-                      "path": "M896 1791L120.91 448.5L1671.09 448.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-left": Object {
-                      "path": "M1343.5 1671.09L1 896L1343.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-right": Object {
-                      "path": "M1791 896L448.5 1671.09L448.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-up": Object {
-                      "path": "M1671.09 1343.5L120.91 1343.5L896 1z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "caret-right": Object {
-                      "path": "M 0 384.662 V 127.338 c 0 -17.818 21.543 -26.741 34.142 -14.142 l 128.662 128.662 c 7.81 7.81 7.81 20.474 0 28.284 L 34.142 398.804 C 21.543 411.404 0 402.48 0 384.662 Z",
-                      "viewbox": "0 0 192 512",
-                    },
-                    "check": Object {
-                      "path": "M249.2,431.2c-23,0-45.6,9.4-61.8,25.6L25.6,618.6C9.4,634.8,0,657.4,0,680.4c0,23,9.4,45.6,25.6,61.8 l593.1,593.1c16.2,16.2,38.8,25.6,61.8,25.6c23,0,45.6-9.4,61.8-25.6L1766.4,311c16.2-16.2,25.6-38.8,25.6-61.8 s-9.4-45.6-25.6-61.8L1604.5,25.6C1588.3,9.4,1565.8,0,1542.8,0c-23,0-45.6,9.4-61.8,25.6L680.4,827L311,456.3 C294.8,440.5,272.3,431.2,249.2,431.2z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "chevron-down": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "chevron-up": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "circle": Object {
-                      "path": "M1664 896q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "clipboard": Object {
-                      "path": "M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "desktop": Object {
-                      "path": "M1728 992v-832q0-13-9.5-22.5t-22.5-9.5h-1600q-13 0-22.5 9.5t-9.5 22.5v832q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5zm128-832v1088q0 66-47 113t-113 47h-544q0 37 16 77.5t32 71 16 43.5q0 26-19 45t-45 19h-512q-26 0-45-19t-19-45q0-14 16-44t32-70 16-78h-544q-66 0-113-47t-47-113v-1088q0-66 47-113t113-47h1600q66 0 113 47t47 113z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "edit": Object {
-                      "path": "M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "exclamation-triangle": Object {
-                      "path": "M1024 1375v-190q0-14-9.5-23.5T992 1152H800q-13 0-22.5 9.5T768 1185v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11H786q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17H128q-34 0-63.5-17T18 1601q-37-63-2-126L784 67q17-31 47-49t65-18 65 18 47 49z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "eye": Object {
-                      "path": "M1664 960q-152-236-381-353 61 104 61 225 0 185-131.5 316.5t-316.5 131.5-316.5-131.5-131.5-316.5q0-121 61-225-229 117-381 353 133 205 333.5 326.5t434.5 121.5 434.5-121.5 333.5-326.5zm-720-384q0-20-14-34t-34-14q-125 0-214.5 89.5t-89.5 214.5q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5t-499.5 138.5-499.5-139-376.5-368q-20-35-20-69t20-69q140-229 376.5-368t499.5-139 499.5 139 376.5 368q20 35 20 69z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "file-text": Object {
-                      "path": "M1596 380q28 28 48 76t20 88v1152q0 40-28 68t-68 28h-1344q-40 0-68-28t-28-68v-1600q0-40 28-68t68-28h896q40 0 88 20t76 48zm-444-244v376h376q-10-29-22-41l-313-313q-12-12-41-22zm384 1528v-1024h-416q-40 0-68-28t-28-68v-416h-768v1536h1280zm-1024-864q0-14 9-23t23-9h704q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64zm736 224q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704zm0 256q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "gear": Object {
-                      "path": "M1800 800h-218q-26 -107 -81 -193l154 -154l-210 -210l-154 154q-88 -55 -191 -79v-218h-300v218q-103 24 -191 79l-154 -154l-212 212l154 154q-55 88 -79 191h-218v297h217q23 101 80 194l-154 154l210 210l154 -154q85 54 193 81v218h300v-218q103 -24 191 -79 l154 154l212 -212l-154 -154q57 -93 80 -194h217v-297zM950 650q124 0 212 88t88 212t-88 212t-212 88t-212 -88t-88 -212t88 -212t212 -88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "key": Object {
-                      "path": "M832 512q0-80-56-136t-136-56-136 56-56 136q0 42 19 83-41-19-83-19-80 0-136 56t-56 136 56 136 136 56 136-56 56-136q0-42-19-83 41 19 83 19 80 0 136-56t56-136zm851 704q0 17-49 66t-66 49q-9 0-28.5-16t-36.5-33-38.5-40-24.5-26l-96 96 220 220q28 28 28 68 0 42-39 81t-81 39q-40 0-68-28l-671-671q-176 131-365 131-163 0-265.5-102.5t-102.5-265.5q0-160 95-313t248-248 313-95q163 0 265.5 102.5t102.5 265.5q0 189-131 365l355 355 96-96q-3-3-26-24.5t-40-38.5-33-36.5-16-28.5q0-17 49-66t66-49q13 0 23 10 6 6 46 44.5t82 79.5 86.5 86 73 78 28.5 41z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "list": Object {
-                      "path": "M384 1408q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm0-512q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm-1408-928q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm0-512v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "loading-spinner": Object {
-                      "CustomComponent": Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                          "isStatic": false,
-                          "rules": Array [
-                            "width:",
-                            [Function],
-                            ";height:",
-                            [Function],
-                            ";flex:none;animation:loadingSpinnerRotator 1.4s linear infinite;& .path{stroke:",
-                            [Function],
-                            ";stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:loadingSpinnerDash 1.4s ease-in-out infinite;}@keyframes loadingSpinnerRotator{0%{transform:rotate( 0deg );}100%{transform:rotate( 270deg );}}@keyframes loadingSpinnerDash{0%{stroke-dashoffset:187;}50%{stroke-dashoffset:47;transform:rotate( 135deg );}100%{stroke-dashoffset:187;transform:rotate( 450deg );}}",
-                          ],
-                        },
-                        "displayName": "SvgIcon__StyledSvgSpinner",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                        "target": "svg",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      },
-                      "path": Array [
-                        <circle
-                          className="path"
-                          cx="33"
-                          cy="33"
-                          fill="none"
-                          r="30"
-                          strokeLinecap="round"
-                          strokeWidth="6"
-                        />,
-                      ],
-                      "viewbox": "0 0 66 66",
-                    },
-                    "mobile": Object {
-                      "path": "M976 1408q0-33-23.5-56.5t-56.5-23.5-56.5 23.5-23.5 56.5 23.5 56.5 56.5 23.5 56.5-23.5 23.5-56.5zm208-160v-704q0-13-9.5-22.5t-22.5-9.5h-512q-13 0-22.5 9.5t-9.5 22.5v704q0 13 9.5 22.5t22.5 9.5h512q13 0 22.5-9.5t9.5-22.5zm-192-848q0-16-16-16h-160q-16 0-16 16t16 16h160q16 0 16-16zm288-16v1024q0 52-38 90t-90 38h-512q-52 0-90-38t-38-90v-1024q0-52 38-90t90-38h512q52 0 90 38t38 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "pencil-square": Object {
-                      "path": "M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus": Object {
-                      "path": "M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus-circle": Object {
-                      "path": "M1344 960v-128q0-26-19-45t-45-19h-256v-256q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v256h-256q-26 0-45 19t-19 45v128q0 26 19 45t45 19h256v256q0 26 19 45t45 19h128q26 0 45-19t19-45v-256h256q26 0 45-19t19-45zm320-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "question-circle": Object {
-                      "path": "M1024 1376v-192q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v192q0 14 9 23t23 9h192q14 0 23-9t9-23zm256-672q0-88-55.5-163t-138.5-116-170-41q-243 0-371 213-15 24 8 42l132 100q7 6 19 6 16 0 25-12 53-68 86-92 34-24 86-24 48 0 85.5 26t37.5 59q0 38-20 61t-68 45q-63 28-115.5 86.5t-52.5 125.5v36q0 14 9 23t23 9h192q14 0 23-9t9-23q0-19 21.5-49.5t54.5-49.5q32-18 49-28.5t46-35 44.5-48 28-60.5 12.5-81zm384 192q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "search": Object {
-                      "path": "M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "seo-score-bad": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M338.2 394.2C315.8 367.4 282.9 352 248 352s-67.8 15.4-90.2 42.2c-13.5 16.3-38.1-4.2-24.6-20.5C161.7 339.6 203.6 320 248 320 s86.3 19.6 114.7 53.8C376.3 390 351.7 410.5 338.2 394.2L338.2 394.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-good": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M362.8 346.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5c22.4 26.9 55.2 42.2 90.2 42.2 s67.8-15.4 90.2-42.2C351.6 309.5 376.3 329.9 362.8 346.2L362.8 346.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-none": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-ok": Object {
-                      "path": Array [
-                        <path
-                          d="M344 336c21.2 0 21.2 32 0 32H152c-21.2 0-21.2-32 0-32H344z"
-                          fill="#000000"
-                        />,
-                        <circle
-                          cx="328"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <circle
-                          cx="168"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <path
-                          d="M248 8c137 0 248 111 248 248S385 504 248 504S0 393 0 256S111 8 248 8z M360 208c0-17.7-14.3-32-32-32 s-32 14.3-32 32s14.3 32 32 32S360 225.7 360 208z M344 368c21.2 0 21.2-32 0-32H152c-21.2 0-21.2 32 0 32H344z M200 208 c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32S200 225.7 200 208z"
-                        />,
-                      ],
-                      "viewbox": "0 0 496 512",
-                    },
-                    "times": Object {
-                      "path": "M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "times-circle": Object {
-                      "path": "M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z",
-                      "viewbox": "0 0 20 20",
-                    },
-                  }
-                }
-                size="16px"
-              >
-                <createSvgIconComponent__StyledSvg
-                  aria-hidden={true}
-                  className="yoast-svg-icon yoast-svg-icon-edit"
-                  fill="currentColor"
-                  focusable="false"
-                  role="img"
-                  size="16px"
-                  viewBox="0 0 1792 1792"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <svg
-                    aria-hidden={true}
-                    className="yoast-svg-icon yoast-svg-icon-edit createSvgIconComponent__StyledSvg-sc-1h4gl3a-0 cPnaHk"
-                    fill="currentColor"
-                    focusable="false"
-                    role="img"
-                    size="16px"
-                    viewBox="0 0 1792 1792"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"
-                    />
-                  </svg>
-                </createSvgIconComponent__StyledSvg>
-              </SvgIconSet>
-            </SvgIcon>
-            Edit snippet
-          </button>
-        </StyledComponent>
-      </SnippetEditor__EditSnippetButton>
-      <SnippetEditorFields
-        activeField={null}
-        containerPadding="0 20px"
-        data={
-          Object {
-            "description": "Test description, %%replacement_variable%%",
-            "slug": "test-slug",
-            "title": "Test title",
-          }
-        }
-        descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here"
-        descriptionInputId="yoast-google-preview-description"
-        descriptionLengthProgress={
-          Object {
-            "actual": 42,
-            "max": 156,
-            "score": 6,
-          }
-        }
-        hoveredField={null}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        recommendedReplacementVariables={Array []}
-        replacementVariables={Array []}
-        slugInputId="yoast-google-preview-slug"
-        titleInputId="yoast-google-preview-title"
-        titleLengthProgress={
-          Object {
-            "actual": 0,
-            "max": 600,
-            "score": 1,
-          }
-        }
-      >
-        <SettingsSnippetEditorFields__StyledEditor
-          padding="0 20px"
-        >
-          <StyledComponent
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
-                  "isStatic": false,
-                  "lastClassName": "c16",
-                  "rules": Array [
-                    "padding:",
-                    [Function],
-                    ";",
-                  ],
-                },
-                "displayName": "SettingsSnippetEditorFields__StyledEditor",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
-                "target": "section",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
-              }
-            }
-            forwardedRef={null}
-            padding="0 20px"
-          >
-            <section
-              className="c16"
-            >
-              <ReplacementVariableEditorMock
-                content="Test title"
-                editorRef={[Function]}
-                fieldId="yoast-google-preview-title"
-                isActive={false}
-                isHovered={false}
-                label="SEO title"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                recommendedReplacementVariables={Array []}
-                replacementVariables={Array []}
-                type="title"
-                withCaret={true}
-              >
-                <div />
-              </ReplacementVariableEditorMock>
-              <ProgressBar
-                aria-hidden="true"
-                backgroundColor="#f7f7f7"
-                borderColor="#ddd"
-                max={600}
-                progressColor="#dc3232"
-                value={0}
-              >
-                <StyledComponent
-                  aria-hidden="true"
-                  backgroundColor="#f7f7f7"
-                  borderColor="#ddd"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "_foldedDefaultProps": Object {
-                        "aria-hidden": "true",
-                        "backgroundColor": "#f7f7f7",
-                        "borderColor": "#ddd",
-                        "max": 1,
-                        "progressColor": "#7ad03a",
-                        "value": 0,
-                      },
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ProgressBar-sc-9g9yx6-0",
-                        "isStatic": false,
-                        "lastClassName": "c21",
-                        "rules": Array [
-                          "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
-                          [Function],
-                          ";border:1px solid ",
-                          [Function],
-                          ";::-webkit-progress-bar{background-color:",
-                          [Function],
-                          ";}::-webkit-progress-value{background-color:",
-                          [Function],
-                          ";transition:width 250ms;}::-moz-progress-bar{background-color:",
-                          [Function],
-                          ";}::-ms-fill{background-color:",
-                          [Function],
-                          ";border:0;}",
-                        ],
-                      },
-                      "displayName": "ProgressBar",
-                      "foldedComponentIds": Array [],
-                      "propTypes": Object {
-                        "aria-hidden": [Function],
-                        "backgroundColor": [Function],
-                        "borderColor": [Function],
-                        "max": [Function],
-                        "progressColor": [Function],
-                        "value": [Function],
-                      },
-                      "render": [Function],
-                      "styledComponentId": "ProgressBar-sc-9g9yx6-0",
-                      "target": "progress",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  max={600}
-                  progressColor="#dc3232"
-                  value={0}
-                >
-                  <progress
-                    aria-hidden="true"
-                    className="c17"
-                    max={600}
-                    value={0}
-                  />
-                </StyledComponent>
-              </ProgressBar>
-              <Label__SimulatedLabel
-                id="snippet-editor-field-3-slug"
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "Label__SimulatedLabel-mitdcc-0",
-                        "isStatic": false,
-                        "lastClassName": "c18",
-                        "rules": Array [
-                          "flex:1 1 200px;min-width:200px;cursor:pointer;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;margin:4px 0;color:#303030;font-weight:500;",
-                        ],
-                      },
-                      "displayName": "Label__SimulatedLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "Label__SimulatedLabel-mitdcc-0",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  id="snippet-editor-field-3-slug"
-                  onClick={[Function]}
-                >
-                  <div
-                    className="c18"
-                    id="snippet-editor-field-3-slug"
-                    onClick={[Function]}
-                  >
-                    Slug
-                  </div>
-                </StyledComponent>
-              </Label__SimulatedLabel>
-              <helpers
-                isActive={false}
-                isHovered={false}
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        Object {},
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "helpers-sc-15q2ybx-0",
-                        "isStatic": false,
-                        "lastClassName": "c19",
-                        "rules": Array [
-                          "flex:0 1 100%;border:1px solid ",
-                          [Function],
-                          ";padding:3px 5px;box-sizing:border-box;box-shadow:",
-                          [Function],
-                          ";background-color:#fff;color:#32373c;outline:0;transition:50ms border-color ease-in-out;position:relative;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;font-size:14px;cursor:text;",
-                          "&::before{display:block;position:absolute;top:-1px;",
-                          [Function],
-                          ":-25px;width:24px;height:24px;background-image:url( ",
-                          [Function],
-                          " );background-size:25px;content:\\"\\";}",
-                        ],
-                      },
-                      "displayName": "helpers",
-                      "foldedComponentIds": Array [
-                        "InputContainer__VariableEditorInputContainer-sc-140v6lg-0",
-                      ],
-                      "render": [Function],
-                      "styledComponentId": "helpers-sc-15q2ybx-0",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  isActive={false}
-                  isHovered={false}
-                  onClick={[Function]}
-                >
-                  <div
-                    className="c19"
-                    onClick={[Function]}
-                  >
-                    <SnippetEditorFields__SlugInput
-                      aria-labelledby="snippet-editor-field-3-slug"
-                      id="yoast-google-preview-slug"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      value="test-slug"
-                    >
-                      <StyledComponent
-                        aria-labelledby="snippet-editor-field-3-slug"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
-                              "isStatic": false,
-                              "lastClassName": "c20",
-                              "rules": Array [
-                                "border:none;width:100%;height:inherit;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;&:focus{outline:0;}",
-                              ],
-                            },
-                            "displayName": "SnippetEditorFields__SlugInput",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
-                          }
-                        }
-                        forwardedRef={[Function]}
-                        id="yoast-google-preview-slug"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onFocus={[Function]}
-                        value="test-slug"
-                      >
-                        <input
-                          aria-labelledby="snippet-editor-field-3-slug"
-                          className="c20"
-                          id="yoast-google-preview-slug"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          value="test-slug"
-                        />
-                      </StyledComponent>
-                    </SnippetEditorFields__SlugInput>
-                  </div>
-                </StyledComponent>
-              </helpers>
-              <ReplacementVariableEditorMock
-                content="Test description, %%replacement_variable%%"
-                editorRef={[Function]}
-                fieldId="yoast-google-preview-description"
-                isActive={false}
-                isHovered={false}
-                label="Meta description"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                placeholder="Modify your meta description by editing it right here"
-                recommendedReplacementVariables={Array []}
-                replacementVariables={Array []}
-                type="description"
-                withCaret={true}
-              >
-                <div />
-              </ReplacementVariableEditorMock>
-              <ProgressBar
-                aria-hidden="true"
-                backgroundColor="#f7f7f7"
-                borderColor="#ddd"
-                max={156}
-                progressColor="#ee7c1b"
-                value={42}
-              >
-                <StyledComponent
-                  aria-hidden="true"
-                  backgroundColor="#f7f7f7"
-                  borderColor="#ddd"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "_foldedDefaultProps": Object {
-                        "aria-hidden": "true",
-                        "backgroundColor": "#f7f7f7",
-                        "borderColor": "#ddd",
-                        "max": 1,
-                        "progressColor": "#7ad03a",
-                        "value": 0,
-                      },
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ProgressBar-sc-9g9yx6-0",
-                        "isStatic": false,
-                        "lastClassName": "c21",
-                        "rules": Array [
-                          "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
-                          [Function],
-                          ";border:1px solid ",
-                          [Function],
-                          ";::-webkit-progress-bar{background-color:",
-                          [Function],
-                          ";}::-webkit-progress-value{background-color:",
-                          [Function],
-                          ";transition:width 250ms;}::-moz-progress-bar{background-color:",
-                          [Function],
-                          ";}::-ms-fill{background-color:",
-                          [Function],
-                          ";border:0;}",
-                        ],
-                      },
-                      "displayName": "ProgressBar",
-                      "foldedComponentIds": Array [],
-                      "propTypes": Object {
-                        "aria-hidden": [Function],
-                        "backgroundColor": [Function],
-                        "borderColor": [Function],
-                        "max": [Function],
-                        "progressColor": [Function],
-                        "value": [Function],
-                      },
-                      "render": [Function],
-                      "styledComponentId": "ProgressBar-sc-9g9yx6-0",
-                      "target": "progress",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  max={156}
-                  progressColor="#ee7c1b"
-                  value={42}
-                >
-                  <progress
-                    aria-hidden="true"
-                    className="c21"
-                    max={156}
-                    value={42}
-                  />
-                </StyledComponent>
-              </ProgressBar>
-            </section>
-          </StyledComponent>
-        </SettingsSnippetEditorFields__StyledEditor>
-      </SnippetEditorFields>
-      <SnippetEditor__CloseEditorButton
-        activeBackgroundColor="#f7f7f7"
-        activeBorderColor="#000"
-        activeColor="#000"
-        backgroundColor="#f7f7f7"
-        borderColor="#ccc"
-        boxShadowColor="#ccc"
-        focusBackgroundColor="#fff"
-        focusBorderColor="#0066cd"
-        focusBoxShadowColor="#084a67"
-        focusColor="#000"
-        hoverBackgroundColor="#fff"
-        hoverColor="#000"
-        onClick={[Function]}
-        textColor="#555"
-        type="button"
-      >
-        <StyledComponent
-          activeBackgroundColor="#f7f7f7"
-          activeBorderColor="#000"
-          activeColor="#000"
-          backgroundColor="#f7f7f7"
-          borderColor="#ccc"
-          boxShadowColor="#ccc"
-          focusBackgroundColor="#fff"
-          focusBorderColor="#0066cd"
-          focusBoxShadowColor="#084a67"
-          focusColor="#000"
-          forwardedComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "_foldedDefaultProps": Object {
-                "activeBackgroundColor": "#f7f7f7",
-                "activeBorderColor": "#000",
-                "activeColor": "#000",
-                "backgroundColor": "#f7f7f7",
-                "borderColor": "#ccc",
-                "boxShadowColor": "#ccc",
-                "focusBackgroundColor": "#fff",
-                "focusBorderColor": "#0066cd",
-                "focusBoxShadowColor": "#084a67",
-                "focusColor": "#000",
-                "hoverBackgroundColor": "#fff",
-                "hoverColor": "#000",
-                "textColor": "#555",
-                "type": "button",
-              },
-              "attrs": Array [],
-              "componentStyle": ComponentStyle {
-                "componentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
-                "isStatic": false,
-                "lastClassName": "c22",
-                "rules": Array [
-                  "color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";background:",
-                  [Function],
-                  ";box-shadow:0 1px 0 ",
-                  [Function],
-                  ";",
-                  "&:active{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";box-shadow:inset 0 2px 5px -3px ",
-                  [Function],
-                  "}",
-                  "&::-moz-focus-inner{border-width:0;}&:focus{outline:none;border-color:",
-                  [Function],
-                  ";color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";box-shadow:0 0 3px ",
-                  [Function],
-                  "}",
-                  "&:hover{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:var(--yoast-color-border--default);}",
-                  "display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-width:",
-                  "1px",
-                  ";border-style:solid;margin:0;padding:",
-                  "4px",
-                  " 10px;border-radius:3px;cursor:pointer;box-sizing:border-box;font-size:inherit;font-family:inherit;font-weight:inherit;text-align:",
-                  [Function],
-                  ";overflow:visible;min-height:",
-                  "32px",
-                  ";transition:var(--yoast-transition-default);svg{align-self:center;}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){::after{display:inline-block;content:\\"\\";min-height:",
-                  "22px",
-                  ";}}",
-                  "height:33px;border:1px solid #dbdbdb;box-shadow:none;font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;",
-                  "margin-top:24px;",
-                ],
-              },
-              "displayName": "SnippetEditor__CloseEditorButton",
-              "foldedComponentIds": Array [
-                "Button__BaseButton-sc-32rbq-4",
-                "Button-sc-32rbq-3",
-                "Button-sc-32rbq-1",
-                "Button-sc-32rbq-2",
-                "Button-sc-32rbq-0",
-                "SnippetEditor__SnippetEditorButton-sc-144bmm3-0",
-              ],
-              "propTypes": Object {
-                "activeBackgroundColor": [Function],
-                "activeBorderColor": [Function],
-                "activeColor": [Function],
-                "backgroundColor": [Function],
-                "borderColor": [Function],
-                "boxShadowColor": [Function],
-                "focusBackgroundColor": [Function],
-                "focusBorderColor": [Function],
-                "focusBoxShadowColor": [Function],
-                "focusColor": [Function],
-                "hoverBackgroundColor": [Function],
-                "hoverColor": [Function],
-                "textColor": [Function],
-                "type": [Function],
-              },
-              "render": [Function],
-              "styledComponentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
-              "target": "button",
-              "toString": [Function],
-              "warnTooManyClasses": [Function],
-              "withComponent": [Function],
-            }
-          }
-          forwardedRef={null}
-          hoverBackgroundColor="#fff"
-          hoverColor="#000"
-          onClick={[Function]}
-          textColor="#555"
-          type="button"
-        >
-          <button
-            className="c22"
-            onClick={[Function]}
-            type="button"
-          >
-            Close snippet editor
-          </button>
-        </StyledComponent>
-      </SnippetEditor__CloseEditorButton>
-    </div>
-  </ErrorBoundary>
-</SnippetEditor>
-`;
-
-exports[`SnippetEditor closes when calling close() 2`] = `
-.c14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c4 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c11 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c12 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c13 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c6 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c7 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c9 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c10 {
-  color: #3c4043;
-}
-
-.c14 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c14:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c5 {
-  padding: 12px 16px;
-}
-
-.c5:first-child {
-  margin-bottom: -16px;
-}
-
-.c8 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-.c0 {
-  border: 0;
-  padding: 0;
-  margin: 0 0 16px;
-}
-
-.c1 {
-  margin: 8px 0;
-  padding: 0;
-  color: #555;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.c3 {
-  margin-right: 16px;
-  color: inherit;
-  font-size: 14px;
-  line-height: 1.71428571;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c2.c2 {
-  margin: 0 8px 0 0;
-  cursor: pointer;
-}
-
-.c15 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin: 10px 0 0 4px;
-  fill: #555;
-  padding-left: 8px;
-}
-
-.c15:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c15::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c15:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c15:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c15 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c15 svg {
-  margin-right: 7px;
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c15::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-<SnippetEditor
-  baseUrl="http://example.org/"
-  data={
-    Object {
-      "description": "Test description, %%replacement_variable%%",
-      "slug": "test-slug",
-      "title": "Test title",
-    }
-  }
-  date=""
-  descriptionEditorFieldPlaceholder=""
-  descriptionLengthProgress={
-    Object {
-      "actual": 0,
-      "max": 156,
-      "score": 0,
-    }
-  }
-  faviconSrc=""
-  hasPaperStyle={true}
-  idSuffix=""
-  keyword=""
-  locale="en"
-  mapEditorDataToPreview={null}
-  mobileImageSrc=""
-  mode="mobile"
-  onChange={[Function]}
-  onChangeAnalysisData={[Function]}
-  recommendedReplacementVariables={Array []}
-  replacementVariables={Array []}
-  shoppingData={Object {}}
-  showCloseButton={true}
-  titleLengthProgress={
-    Object {
-      "actual": 0,
-      "max": 600,
-      "score": 0,
-    }
-  }
-  wordsToHighlight={Array []}
->
-  <ErrorBoundary>
-    <div>
-      <ModeSwitcher
-        active="mobile"
-        desktopModeInputId="yoast-google-preview-mode-desktop"
-        mobileModeInputId="yoast-google-preview-mode-mobile"
-        onChange={[Function]}
-      >
-        <ModeSwitcher__Switcher>
-          <StyledComponent
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                  "isStatic": false,
-                  "lastClassName": "c0",
-                  "rules": Array [
-                    "border:0;padding:0;margin:0 0 16px;",
-                  ],
-                },
-                "displayName": "ModeSwitcher__Switcher",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                "target": "fieldset",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
-              }
-            }
-            forwardedRef={null}
-          >
-            <fieldset
-              className="c0"
-            >
-              <ModeSwitcher__SwitcherTitle>
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                        "isStatic": false,
-                        "lastClassName": "c1",
-                        "rules": Array [
-                          "margin:8px 0;padding:0;color:",
-                          "#555",
-                          ";font-size:14px;font-weight:600;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__SwitcherTitle",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                      "target": "legend",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <legend
-                    className="c1"
-                  >
-                    Preview as:
-                  </legend>
-                </StyledComponent>
-              </ModeSwitcher__SwitcherTitle>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": true,
-                    "id": "yoast-google-preview-mode-mobile",
-                  }
-                }
-                type="radio"
-                value="mobile"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": true,
-                      "id": "yoast-google-preview-mode-mobile",
-                    }
-                  }
-                  type="radio"
-                  value="mobile"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": true,
-                        "id": "yoast-google-preview-mode-mobile",
-                      }
-                    }
-                    type="radio"
-                    value="mobile"
-                  >
-                    <input
-                      checked={true}
-                      className="c2"
-                      defaultValue="mobile"
-                      id="yoast-google-preview-mode-mobile"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-mobile"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-mobile"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-mobile"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-mobile"
-                    >
-                      Mobile result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": false,
-                    "id": "yoast-google-preview-mode-desktop",
-                  }
-                }
-                type="radio"
-                value="desktop"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": false,
-                      "id": "yoast-google-preview-mode-desktop",
-                    }
-                  }
-                  type="radio"
-                  value="desktop"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": false,
-                        "id": "yoast-google-preview-mode-desktop",
-                      }
-                    }
-                    type="radio"
-                    value="desktop"
-                  >
-                    <input
-                      checked={false}
-                      className="c2"
-                      defaultValue="desktop"
-                      id="yoast-google-preview-mode-desktop"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-desktop"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-desktop"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-desktop"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-desktop"
-                    >
-                      Desktop result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-            </fieldset>
-          </StyledComponent>
-        </ModeSwitcher__Switcher>
-      </ModeSwitcher>
-      <SnippetPreview
-        activeField={null}
-        breadcrumbs={null}
-        date=""
-        description="Test description, %%replacement_variable%%"
-        faviconSrc=""
-        hoveredField={null}
-        isAmp={false}
-        keyword=""
-        locale="en"
-        mobileImageSrc=""
-        mode="mobile"
-        onHover={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-        shoppingData={Object {}}
-        title="Test title"
-        url="http://example.org/test-slug"
-        wordsToHighlight={Array []}
-      >
-        <section>
-          <SnippetPreview__MobileContainer
-            id="yoast-snippet-preview-container"
-            padding={20}
-            width={null}
-          >
-            <StyledComponent
-              forwardedComponent={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "attrs": Array [],
-                  "componentStyle": ComponentStyle {
-                    "componentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                    "isStatic": false,
-                    "lastClassName": "c4",
-                    "rules": Array [
-                      "border-bottom:1px hidden #fff;border-radius:8px;box-shadow:0 1px 6px rgba(32,33,36,0.28);font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;max-width:",
-                      "400",
-                      "px;box-sizing:border-box;font-size:14px;",
-                    ],
-                  },
-                  "displayName": "SnippetPreview__MobileContainer",
-                  "foldedComponentIds": Array [],
-                  "render": [Function],
-                  "styledComponentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                  "target": "div",
-                  "toString": [Function],
-                  "warnTooManyClasses": [Function],
-                  "withComponent": [Function],
-                }
-              }
-              forwardedRef={null}
-              id="yoast-snippet-preview-container"
-              padding={20}
-              width={null}
-            >
-              <div
-                className="c4"
-                id="yoast-snippet-preview-container"
-                width={null}
-              >
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Url preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseUrl>
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                "isStatic": false,
-                                "lastClassName": "c6",
-                                "rules": Array [
-                                  "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseUrl",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                        >
-                          <div
-                            className="c6"
-                          >
-                            <SnippetPreview__BaseUrlOverflowContainer
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseUp={[Function]}
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                      "isStatic": false,
-                                      "lastClassName": "c7",
-                                      "rules": Array [
-                                        "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                        "overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-bottom:",
-                                        [Function],
-                                        ";padding-top:1px;line-height:",
-                                        [Function],
-                                        ";vertical-align:",
-                                        [Function],
-                                        ";",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__BaseUrlOverflowContainer",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                onMouseUp={[Function]}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c7"
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  onMouseUp={[Function]}
-                                >
-                                  <SnippetPreview__Favicon
-                                    alt=""
-                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                  >
-                                    <StyledComponent
-                                      alt=""
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                            "isStatic": false,
-                                            "lastClassName": "c8",
-                                            "rules": Array [
-                                              "width:16px;height:16px;margin-right:12px;vertical-align:middle;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__Favicon",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                          "target": "img",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                    >
-                                      <img
-                                        alt=""
-                                        className="c8"
-                                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                      />
-                                    </StyledComponent>
-                                  </SnippetPreview__Favicon>
-                                  <SnippetPreview__UrlContentContainer
-                                    screenMode="mobile"
-                                  >
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                            "isStatic": false,
-                                            "lastClassName": "c9",
-                                            "rules": Array [
-                                              "font-size:",
-                                              [Function],
-                                              ";line-height:",
-                                              [Function],
-                                              ";color:",
-                                              [Function],
-                                              ";",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__UrlContentContainer",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      screenMode="mobile"
-                                    >
-                                      <span
-                                        className="c9"
-                                      >
-                                        <SnippetPreview__UrlBaseContainer>
-                                          <StyledComponent
-                                            forwardedComponent={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "attrs": Array [],
-                                                "componentStyle": ComponentStyle {
-                                                  "componentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                  "isStatic": false,
-                                                  "lastClassName": "c10",
-                                                  "rules": Array [
-                                                    "color:",
-                                                    [Function],
-                                                    ";",
-                                                  ],
-                                                },
-                                                "displayName": "SnippetPreview__UrlBaseContainer",
-                                                "foldedComponentIds": Array [],
-                                                "render": [Function],
-                                                "styledComponentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                "target": "span",
-                                                "toString": [Function],
-                                                "warnTooManyClasses": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            forwardedRef={null}
-                                          >
-                                            <span
-                                              className="c10"
-                                            >
-                                              example.org
-                                            </span>
-                                          </StyledComponent>
-                                        </SnippetPreview__UrlBaseContainer>
-                                         › test-slug
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__UrlContentContainer>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__BaseUrlOverflowContainer>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseUrl>
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          SEO title preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseTitle
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                                "isStatic": false,
-                                "lastClassName": "c11",
-                                "rules": Array [
-                                  "cursor:pointer;position:relative;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseTitle",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c11"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__TitleBounded
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                      "isStatic": false,
-                                      "lastClassName": "c12",
-                                      "rules": Array [
-                                        "color:",
-                                        [Function],
-                                        ";text-decoration:none;font-size:",
-                                        [Function],
-                                        ";line-height:",
-                                        [Function],
-                                        ";font-weight:normal;margin:0;display:inline-block;overflow:hidden;max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                        "max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__TitleBounded",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__Title-sc-1hxg8jo-4",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c12"
-                                >
-                                  <SnippetPreview__TitleUnboundedMobile>
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                            "isStatic": false,
-                                            "lastClassName": "c13",
-                                            "rules": Array [
-                                              "display:inline-block;max-height:40px;padding-top:1px;vertical-align:top;overflow:hidden;text-overflow:ellipsis;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__TitleUnboundedMobile",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={[Function]}
-                                    >
-                                      <span
-                                        className="c13"
-                                      >
-                                        Test title
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__TitleUnboundedMobile>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__TitleBounded>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseTitle>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--desktop"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--desktop"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--desktop"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Meta description preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__MobileDescription
-                        isDescriptionPlaceholder={false}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-12",
-                                "isStatic": false,
-                                "lastClassName": "c13",
-                                "rules": Array [
-                                  "color:",
-                                  "#3c4043",
-                                  ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                  "600",
-                                  "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__MobileDescription",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          isDescriptionPlaceholder={false}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c14"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__MobileDescription
-                              isDescriptionPlaceholder={false}
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                      "isStatic": false,
-                                      "lastClassName": "c14",
-                                      "rules": Array [
-                                        "color:",
-                                        "#3c4043",
-                                        ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                        "600",
-                                        "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__MobileDescription",
-                                    "foldedComponentIds": Array [],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={[Function]}
-                                isDescriptionPlaceholder={false}
-                              >
-                                <div
-                                  className="c14"
-                                >
-                                  Test description, %%replacement_variable%%
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__MobileDescription>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__MobileDescription>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--mobile"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--mobile"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--mobile"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                      <ProductDataMobile
-                        shoppingData={Object {}}
-                      >
-                        <ProductDataMobile__ProductData>
-                          <StyledComponent
-                            forwardedComponent={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "attrs": Array [],
-                                "componentStyle": ComponentStyle {
-                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                  "isStatic": false,
-                                  "lastClassName": "c14",
-                                  "rules": Array [
-                                    "display:flex;",
-                                  ],
-                                },
-                                "displayName": "ProductDataMobile__ProductData",
-                                "foldedComponentIds": Array [],
-                                "render": [Function],
-                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                "target": "div",
-                                "toString": [Function],
-                                "warnTooManyClasses": [Function],
-                                "withComponent": [Function],
-                              }
-                            }
-                            forwardedRef={null}
-                          >
-                            <div
-                              className="c14"
-                            />
-                          </StyledComponent>
-                        </ProductDataMobile__ProductData>
-                      </ProductDataMobile>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-              </div>
-            </StyledComponent>
-          </SnippetPreview__MobileContainer>
-        </section>
-      </SnippetPreview>
-      <SnippetEditor__EditSnippetButton
-        activeBackgroundColor="#f7f7f7"
-        activeBorderColor="#000"
-        activeColor="#000"
-        aria-expanded={false}
-        backgroundColor="#f7f7f7"
-        borderColor="#ccc"
-        boxShadowColor="#ccc"
-        focusBackgroundColor="#fff"
-        focusBorderColor="#0066cd"
-        focusBoxShadowColor="#084a67"
-        focusColor="#000"
-        hoverBackgroundColor="#fff"
-        hoverColor="#000"
-        onClick={[Function]}
-        textColor="#555"
-        type="button"
-      >
-        <StyledComponent
-          activeBackgroundColor="#f7f7f7"
-          activeBorderColor="#000"
-          activeColor="#000"
-          aria-expanded={false}
-          backgroundColor="#f7f7f7"
-          borderColor="#ccc"
-          boxShadowColor="#ccc"
-          focusBackgroundColor="#fff"
-          focusBorderColor="#0066cd"
-          focusBoxShadowColor="#084a67"
-          focusColor="#000"
-          forwardedComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "_foldedDefaultProps": Object {
-                "activeBackgroundColor": "#f7f7f7",
-                "activeBorderColor": "#000",
-                "activeColor": "#000",
-                "backgroundColor": "#f7f7f7",
-                "borderColor": "#ccc",
-                "boxShadowColor": "#ccc",
-                "focusBackgroundColor": "#fff",
-                "focusBorderColor": "#0066cd",
-                "focusBoxShadowColor": "#084a67",
-                "focusColor": "#000",
-                "hoverBackgroundColor": "#fff",
-                "hoverColor": "#000",
-                "textColor": "#555",
-                "type": "button",
-              },
-              "attrs": Array [],
-              "componentStyle": ComponentStyle {
-                "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-                "isStatic": false,
-                "lastClassName": "c15",
-                "rules": Array [
-                  "color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";background:",
-                  [Function],
-                  ";box-shadow:0 1px 0 ",
-                  [Function],
-                  ";",
-                  "&:active{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";box-shadow:inset 0 2px 5px -3px ",
-                  [Function],
-                  "}",
-                  "&::-moz-focus-inner{border-width:0;}&:focus{outline:none;border-color:",
-                  [Function],
-                  ";color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";box-shadow:0 0 3px ",
-                  [Function],
-                  "}",
-                  "&:hover{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:var(--yoast-color-border--default);}",
-                  "display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-width:",
-                  "1px",
-                  ";border-style:solid;margin:0;padding:",
-                  "4px",
-                  " 10px;border-radius:3px;cursor:pointer;box-sizing:border-box;font-size:inherit;font-family:inherit;font-weight:inherit;text-align:",
-                  [Function],
-                  ";overflow:visible;min-height:",
-                  "32px",
-                  ";transition:var(--yoast-transition-default);svg{align-self:center;}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){::after{display:inline-block;content:\\"\\";min-height:",
-                  "22px",
-                  ";}}",
-                  "height:33px;border:1px solid #dbdbdb;box-shadow:none;font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;",
-                  "margin:",
-                  [Function],
-                  ";fill:",
-                  "#555",
-                  ";padding-left:8px;& svg{",
-                  [Function],
-                  ":7px;}",
-                ],
-              },
-              "displayName": "SnippetEditor__EditSnippetButton",
-              "foldedComponentIds": Array [
-                "Button__BaseButton-sc-32rbq-4",
-                "Button-sc-32rbq-3",
-                "Button-sc-32rbq-1",
-                "Button-sc-32rbq-2",
-                "Button-sc-32rbq-0",
-                "SnippetEditor__SnippetEditorButton-sc-144bmm3-0",
-              ],
-              "propTypes": Object {
-                "activeBackgroundColor": [Function],
-                "activeBorderColor": [Function],
-                "activeColor": [Function],
-                "backgroundColor": [Function],
-                "borderColor": [Function],
-                "boxShadowColor": [Function],
-                "focusBackgroundColor": [Function],
-                "focusBorderColor": [Function],
-                "focusBoxShadowColor": [Function],
-                "focusColor": [Function],
-                "hoverBackgroundColor": [Function],
-                "hoverColor": [Function],
-                "textColor": [Function],
-                "type": [Function],
-              },
-              "render": [Function],
-              "styledComponentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-              "target": "button",
-              "toString": [Function],
-              "warnTooManyClasses": [Function],
-              "withComponent": [Function],
-            }
-          }
-          forwardedRef={[Function]}
-          hoverBackgroundColor="#fff"
-          hoverColor="#000"
-          onClick={[Function]}
-          textColor="#555"
-          type="button"
-        >
-          <button
-            aria-expanded={false}
-            className="c15"
-            onClick={[Function]}
-            type="button"
-          >
-            <SvgIcon
-              className=""
-              color="currentColor"
-              icon="edit"
-              size="16px"
-            >
-              <SvgIconSet
-                className=""
-                color="currentColor"
-                icon="edit"
-                iconSet={
-                  Object {
-                    "alert-error": Object {
-                      "path": "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-info": Object {
-                      "path": "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-success": Object {
-                      "path": "M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-warning": Object {
-                      "path": "M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z",
-                      "viewbox": "0 0 576 512",
-                    },
-                    "angle-down": Object {
-                      "path": "M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-left": Object {
-                      "path": "M1203 544q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-right": Object {
-                      "path": "M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-up": Object {
-                      "path": "M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-down": Object {
-                      "path": "M896 1791L120.91 448.5L1671.09 448.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-left": Object {
-                      "path": "M1343.5 1671.09L1 896L1343.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-right": Object {
-                      "path": "M1791 896L448.5 1671.09L448.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-up": Object {
-                      "path": "M1671.09 1343.5L120.91 1343.5L896 1z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "caret-right": Object {
-                      "path": "M 0 384.662 V 127.338 c 0 -17.818 21.543 -26.741 34.142 -14.142 l 128.662 128.662 c 7.81 7.81 7.81 20.474 0 28.284 L 34.142 398.804 C 21.543 411.404 0 402.48 0 384.662 Z",
-                      "viewbox": "0 0 192 512",
-                    },
-                    "check": Object {
-                      "path": "M249.2,431.2c-23,0-45.6,9.4-61.8,25.6L25.6,618.6C9.4,634.8,0,657.4,0,680.4c0,23,9.4,45.6,25.6,61.8 l593.1,593.1c16.2,16.2,38.8,25.6,61.8,25.6c23,0,45.6-9.4,61.8-25.6L1766.4,311c16.2-16.2,25.6-38.8,25.6-61.8 s-9.4-45.6-25.6-61.8L1604.5,25.6C1588.3,9.4,1565.8,0,1542.8,0c-23,0-45.6,9.4-61.8,25.6L680.4,827L311,456.3 C294.8,440.5,272.3,431.2,249.2,431.2z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "chevron-down": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "chevron-up": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "circle": Object {
-                      "path": "M1664 896q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "clipboard": Object {
-                      "path": "M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "desktop": Object {
-                      "path": "M1728 992v-832q0-13-9.5-22.5t-22.5-9.5h-1600q-13 0-22.5 9.5t-9.5 22.5v832q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5zm128-832v1088q0 66-47 113t-113 47h-544q0 37 16 77.5t32 71 16 43.5q0 26-19 45t-45 19h-512q-26 0-45-19t-19-45q0-14 16-44t32-70 16-78h-544q-66 0-113-47t-47-113v-1088q0-66 47-113t113-47h1600q66 0 113 47t47 113z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "edit": Object {
-                      "path": "M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "exclamation-triangle": Object {
-                      "path": "M1024 1375v-190q0-14-9.5-23.5T992 1152H800q-13 0-22.5 9.5T768 1185v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11H786q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17H128q-34 0-63.5-17T18 1601q-37-63-2-126L784 67q17-31 47-49t65-18 65 18 47 49z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "eye": Object {
-                      "path": "M1664 960q-152-236-381-353 61 104 61 225 0 185-131.5 316.5t-316.5 131.5-316.5-131.5-131.5-316.5q0-121 61-225-229 117-381 353 133 205 333.5 326.5t434.5 121.5 434.5-121.5 333.5-326.5zm-720-384q0-20-14-34t-34-14q-125 0-214.5 89.5t-89.5 214.5q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5t-499.5 138.5-499.5-139-376.5-368q-20-35-20-69t20-69q140-229 376.5-368t499.5-139 499.5 139 376.5 368q20 35 20 69z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "file-text": Object {
-                      "path": "M1596 380q28 28 48 76t20 88v1152q0 40-28 68t-68 28h-1344q-40 0-68-28t-28-68v-1600q0-40 28-68t68-28h896q40 0 88 20t76 48zm-444-244v376h376q-10-29-22-41l-313-313q-12-12-41-22zm384 1528v-1024h-416q-40 0-68-28t-28-68v-416h-768v1536h1280zm-1024-864q0-14 9-23t23-9h704q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64zm736 224q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704zm0 256q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "gear": Object {
-                      "path": "M1800 800h-218q-26 -107 -81 -193l154 -154l-210 -210l-154 154q-88 -55 -191 -79v-218h-300v218q-103 24 -191 79l-154 -154l-212 212l154 154q-55 88 -79 191h-218v297h217q23 101 80 194l-154 154l210 210l154 -154q85 54 193 81v218h300v-218q103 -24 191 -79 l154 154l212 -212l-154 -154q57 -93 80 -194h217v-297zM950 650q124 0 212 88t88 212t-88 212t-212 88t-212 -88t-88 -212t88 -212t212 -88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "key": Object {
-                      "path": "M832 512q0-80-56-136t-136-56-136 56-56 136q0 42 19 83-41-19-83-19-80 0-136 56t-56 136 56 136 136 56 136-56 56-136q0-42-19-83 41 19 83 19 80 0 136-56t56-136zm851 704q0 17-49 66t-66 49q-9 0-28.5-16t-36.5-33-38.5-40-24.5-26l-96 96 220 220q28 28 28 68 0 42-39 81t-81 39q-40 0-68-28l-671-671q-176 131-365 131-163 0-265.5-102.5t-102.5-265.5q0-160 95-313t248-248 313-95q163 0 265.5 102.5t102.5 265.5q0 189-131 365l355 355 96-96q-3-3-26-24.5t-40-38.5-33-36.5-16-28.5q0-17 49-66t66-49q13 0 23 10 6 6 46 44.5t82 79.5 86.5 86 73 78 28.5 41z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "list": Object {
-                      "path": "M384 1408q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm0-512q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm-1408-928q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm0-512v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "loading-spinner": Object {
-                      "CustomComponent": Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                          "isStatic": false,
-                          "rules": Array [
-                            "width:",
-                            [Function],
-                            ";height:",
-                            [Function],
-                            ";flex:none;animation:loadingSpinnerRotator 1.4s linear infinite;& .path{stroke:",
-                            [Function],
-                            ";stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:loadingSpinnerDash 1.4s ease-in-out infinite;}@keyframes loadingSpinnerRotator{0%{transform:rotate( 0deg );}100%{transform:rotate( 270deg );}}@keyframes loadingSpinnerDash{0%{stroke-dashoffset:187;}50%{stroke-dashoffset:47;transform:rotate( 135deg );}100%{stroke-dashoffset:187;transform:rotate( 450deg );}}",
-                          ],
-                        },
-                        "displayName": "SvgIcon__StyledSvgSpinner",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                        "target": "svg",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      },
-                      "path": Array [
-                        <circle
-                          className="path"
-                          cx="33"
-                          cy="33"
-                          fill="none"
-                          r="30"
-                          strokeLinecap="round"
-                          strokeWidth="6"
-                        />,
-                      ],
-                      "viewbox": "0 0 66 66",
-                    },
-                    "mobile": Object {
-                      "path": "M976 1408q0-33-23.5-56.5t-56.5-23.5-56.5 23.5-23.5 56.5 23.5 56.5 56.5 23.5 56.5-23.5 23.5-56.5zm208-160v-704q0-13-9.5-22.5t-22.5-9.5h-512q-13 0-22.5 9.5t-9.5 22.5v704q0 13 9.5 22.5t22.5 9.5h512q13 0 22.5-9.5t9.5-22.5zm-192-848q0-16-16-16h-160q-16 0-16 16t16 16h160q16 0 16-16zm288-16v1024q0 52-38 90t-90 38h-512q-52 0-90-38t-38-90v-1024q0-52 38-90t90-38h512q52 0 90 38t38 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "pencil-square": Object {
-                      "path": "M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus": Object {
-                      "path": "M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus-circle": Object {
-                      "path": "M1344 960v-128q0-26-19-45t-45-19h-256v-256q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v256h-256q-26 0-45 19t-19 45v128q0 26 19 45t45 19h256v256q0 26 19 45t45 19h128q26 0 45-19t19-45v-256h256q26 0 45-19t19-45zm320-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "question-circle": Object {
-                      "path": "M1024 1376v-192q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v192q0 14 9 23t23 9h192q14 0 23-9t9-23zm256-672q0-88-55.5-163t-138.5-116-170-41q-243 0-371 213-15 24 8 42l132 100q7 6 19 6 16 0 25-12 53-68 86-92 34-24 86-24 48 0 85.5 26t37.5 59q0 38-20 61t-68 45q-63 28-115.5 86.5t-52.5 125.5v36q0 14 9 23t23 9h192q14 0 23-9t9-23q0-19 21.5-49.5t54.5-49.5q32-18 49-28.5t46-35 44.5-48 28-60.5 12.5-81zm384 192q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "search": Object {
-                      "path": "M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "seo-score-bad": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M338.2 394.2C315.8 367.4 282.9 352 248 352s-67.8 15.4-90.2 42.2c-13.5 16.3-38.1-4.2-24.6-20.5C161.7 339.6 203.6 320 248 320 s86.3 19.6 114.7 53.8C376.3 390 351.7 410.5 338.2 394.2L338.2 394.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-good": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M362.8 346.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5c22.4 26.9 55.2 42.2 90.2 42.2 s67.8-15.4 90.2-42.2C351.6 309.5 376.3 329.9 362.8 346.2L362.8 346.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-none": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-ok": Object {
-                      "path": Array [
-                        <path
-                          d="M344 336c21.2 0 21.2 32 0 32H152c-21.2 0-21.2-32 0-32H344z"
-                          fill="#000000"
-                        />,
-                        <circle
-                          cx="328"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <circle
-                          cx="168"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <path
-                          d="M248 8c137 0 248 111 248 248S385 504 248 504S0 393 0 256S111 8 248 8z M360 208c0-17.7-14.3-32-32-32 s-32 14.3-32 32s14.3 32 32 32S360 225.7 360 208z M344 368c21.2 0 21.2-32 0-32H152c-21.2 0-21.2 32 0 32H344z M200 208 c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32S200 225.7 200 208z"
-                        />,
-                      ],
-                      "viewbox": "0 0 496 512",
-                    },
-                    "times": Object {
-                      "path": "M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "times-circle": Object {
-                      "path": "M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z",
-                      "viewbox": "0 0 20 20",
-                    },
-                  }
-                }
-                size="16px"
-              >
-                <createSvgIconComponent__StyledSvg
-                  aria-hidden={true}
-                  className="yoast-svg-icon yoast-svg-icon-edit"
-                  fill="currentColor"
-                  focusable="false"
-                  role="img"
-                  size="16px"
-                  viewBox="0 0 1792 1792"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <svg
-                    aria-hidden={true}
-                    className="yoast-svg-icon yoast-svg-icon-edit createSvgIconComponent__StyledSvg-sc-1h4gl3a-0 cPnaHk"
-                    fill="currentColor"
-                    focusable="false"
-                    role="img"
-                    size="16px"
-                    viewBox="0 0 1792 1792"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"
-                    />
-                  </svg>
-                </createSvgIconComponent__StyledSvg>
-              </SvgIconSet>
-            </SvgIcon>
-            Edit snippet
-          </button>
-        </StyledComponent>
-      </SnippetEditor__EditSnippetButton>
-    </div>
-  </ErrorBoundary>
-</SnippetEditor>
-`;
-
-exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
-.c18 {
-  -webkit-flex: 1 1 200px;
-  -ms-flex: 1 1 200px;
-  flex: 1 1 200px;
-  min-width: 200px;
-  cursor: pointer;
-  font-size: 14px;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  margin: 4px 0;
-  color: #303030;
-  font-weight: 500;
-}
-
-.c17 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c17::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c17::-webkit-progress-value {
-  background-color: #dc3232;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c17::-moz-progress-bar {
-  background-color: #dc3232;
-}
-
-.c17::-ms-fill {
-  background-color: #dc3232;
-  border: 0;
-}
-
-.c21 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c21::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c21::-webkit-progress-value {
-  background-color: #ee7c1b;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c21::-moz-progress-bar {
-  background-color: #ee7c1b;
-}
-
-.c21::-ms-fill {
-  background-color: #ee7c1b;
-  border: 0;
-}
-
-.c16 {
-  padding: 0 20px;
-}
-
-.c14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c4 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c11 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c12 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c13 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c6 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c7 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c9 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c10 {
-  color: #3c4043;
-}
-
-.c14 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c14:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c5 {
-  padding: 12px 16px;
-}
-
-.c5:first-child {
-  margin-bottom: -16px;
-}
-
-.c8 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-.c20 {
-  border: none;
-  width: 100%;
-  height: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-}
-
-.c20:focus {
-  outline: 0;
-}
-
-.c19 {
-  -webkit-flex: 0 1 100%;
-  -ms-flex: 0 1 100%;
-  flex: 0 1 100%;
-  border: 1px solid #ddd;
-  padding: 3px 5px;
-  box-sizing: border-box;
-  box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
-  background-color: #fff;
-  color: #32373c;
-  outline: 0;
-  -webkit-transition: 50ms border-color ease-in-out;
-  transition: 50ms border-color ease-in-out;
-  position: relative;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-size: 14px;
-  cursor: text;
-}
-
-.c19::before {
-  display: block;
-  position: absolute;
-  top: -1px;
-  left: -25px;
-  width: 24px;
-  height: 24px;
-  background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22transparent%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
-  background-size: 25px;
-  content: "";
-}
-
-.c0 {
-  border: 0;
-  padding: 0;
-  margin: 0 0 16px;
-}
-
-.c1 {
-  margin: 8px 0;
-  padding: 0;
-  color: #555;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.c3 {
-  margin-right: 16px;
-  color: inherit;
-  font-size: 14px;
-  line-height: 1.71428571;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c2.c2 {
-  margin: 0 8px 0 0;
-  cursor: pointer;
-}
-
-.c15 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin: 10px 0 0 4px;
-  fill: #555;
-  padding-left: 8px;
-}
-
-.c15:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c15::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c15:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c15:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c15 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c15 svg {
-  margin-right: 7px;
-}
-
-.c22 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin-top: 24px;
-}
-
-.c22:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c22::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c22:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c22:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c22 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c15::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c22::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-<SnippetEditor
-  baseUrl="http://example.org/"
-  data={
-    Object {
-      "description": "Test description, %%replacement_variable%%",
-      "slug": "test-slug",
-      "title": "Test title",
-    }
-  }
-  date=""
-  descriptionEditorFieldPlaceholder=""
-  descriptionLengthProgress={
-    Object {
-      "actual": 0,
-      "max": 156,
-      "score": 0,
-    }
-  }
-  faviconSrc=""
-  hasPaperStyle={true}
-  idSuffix=""
-  keyword=""
-  locale="en"
-  mapEditorDataToPreview={null}
-  mobileImageSrc=""
-  mode="mobile"
-  onChange={[Function]}
-  onChangeAnalysisData={[Function]}
-  recommendedReplacementVariables={Array []}
-  replacementVariables={Array []}
-  shoppingData={Object {}}
-  showCloseButton={true}
-  titleLengthProgress={
-    Object {
-      "actual": 361,
-      "max": 550,
-      "score": 6,
-    }
-  }
-  wordsToHighlight={Array []}
->
-  <ErrorBoundary>
-    <div>
-      <ModeSwitcher
-        active="mobile"
-        desktopModeInputId="yoast-google-preview-mode-desktop"
-        mobileModeInputId="yoast-google-preview-mode-mobile"
-        onChange={[Function]}
-      >
-        <ModeSwitcher__Switcher>
-          <StyledComponent
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                  "isStatic": false,
-                  "lastClassName": "c0",
-                  "rules": Array [
-                    "border:0;padding:0;margin:0 0 16px;",
-                  ],
-                },
-                "displayName": "ModeSwitcher__Switcher",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                "target": "fieldset",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
-              }
-            }
-            forwardedRef={null}
-          >
-            <fieldset
-              className="c0"
-            >
-              <ModeSwitcher__SwitcherTitle>
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                        "isStatic": false,
-                        "lastClassName": "c1",
-                        "rules": Array [
-                          "margin:8px 0;padding:0;color:",
-                          "#555",
-                          ";font-size:14px;font-weight:600;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__SwitcherTitle",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                      "target": "legend",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <legend
-                    className="c1"
-                  >
-                    Preview as:
-                  </legend>
-                </StyledComponent>
-              </ModeSwitcher__SwitcherTitle>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": true,
-                    "id": "yoast-google-preview-mode-mobile",
-                  }
-                }
-                type="radio"
-                value="mobile"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": true,
-                      "id": "yoast-google-preview-mode-mobile",
-                    }
-                  }
-                  type="radio"
-                  value="mobile"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": true,
-                        "id": "yoast-google-preview-mode-mobile",
-                      }
-                    }
-                    type="radio"
-                    value="mobile"
-                  >
-                    <input
-                      checked={true}
-                      className="c2"
-                      defaultValue="mobile"
-                      id="yoast-google-preview-mode-mobile"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-mobile"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-mobile"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-mobile"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-mobile"
-                    >
-                      Mobile result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": false,
-                    "id": "yoast-google-preview-mode-desktop",
-                  }
-                }
-                type="radio"
-                value="desktop"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": false,
-                      "id": "yoast-google-preview-mode-desktop",
-                    }
-                  }
-                  type="radio"
-                  value="desktop"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": false,
-                        "id": "yoast-google-preview-mode-desktop",
-                      }
-                    }
-                    type="radio"
-                    value="desktop"
-                  >
-                    <input
-                      checked={false}
-                      className="c2"
-                      defaultValue="desktop"
-                      id="yoast-google-preview-mode-desktop"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-desktop"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-desktop"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-desktop"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-desktop"
-                    >
-                      Desktop result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-            </fieldset>
-          </StyledComponent>
-        </ModeSwitcher__Switcher>
-      </ModeSwitcher>
-      <SnippetPreview
-        activeField={null}
-        breadcrumbs={null}
-        date=""
-        description="Test description, %%replacement_variable%%"
-        faviconSrc=""
-        hoveredField={null}
-        isAmp={false}
-        keyword=""
-        locale="en"
-        mobileImageSrc=""
-        mode="mobile"
-        onHover={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-        shoppingData={Object {}}
-        title="Test title"
-        url="http://example.org/test-slug"
-        wordsToHighlight={Array []}
-      >
-        <section>
-          <SnippetPreview__MobileContainer
-            id="yoast-snippet-preview-container"
-            padding={20}
-            width={null}
-          >
-            <StyledComponent
-              forwardedComponent={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "attrs": Array [],
-                  "componentStyle": ComponentStyle {
-                    "componentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                    "isStatic": false,
-                    "lastClassName": "c4",
-                    "rules": Array [
-                      "border-bottom:1px hidden #fff;border-radius:8px;box-shadow:0 1px 6px rgba(32,33,36,0.28);font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;max-width:",
-                      "400",
-                      "px;box-sizing:border-box;font-size:14px;",
-                    ],
-                  },
-                  "displayName": "SnippetPreview__MobileContainer",
-                  "foldedComponentIds": Array [],
-                  "render": [Function],
-                  "styledComponentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                  "target": "div",
-                  "toString": [Function],
-                  "warnTooManyClasses": [Function],
-                  "withComponent": [Function],
-                }
-              }
-              forwardedRef={null}
-              id="yoast-snippet-preview-container"
-              padding={20}
-              width={null}
-            >
-              <div
-                className="c4"
-                id="yoast-snippet-preview-container"
-                width={null}
-              >
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Url preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseUrl>
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                "isStatic": false,
-                                "lastClassName": "c6",
-                                "rules": Array [
-                                  "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseUrl",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                        >
-                          <div
-                            className="c6"
-                          >
-                            <SnippetPreview__BaseUrlOverflowContainer
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseUp={[Function]}
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                      "isStatic": false,
-                                      "lastClassName": "c7",
-                                      "rules": Array [
-                                        "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                        "overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-bottom:",
-                                        [Function],
-                                        ";padding-top:1px;line-height:",
-                                        [Function],
-                                        ";vertical-align:",
-                                        [Function],
-                                        ";",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__BaseUrlOverflowContainer",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                onMouseUp={[Function]}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c7"
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  onMouseUp={[Function]}
-                                >
-                                  <SnippetPreview__Favicon
-                                    alt=""
-                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                  >
-                                    <StyledComponent
-                                      alt=""
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                            "isStatic": false,
-                                            "lastClassName": "c8",
-                                            "rules": Array [
-                                              "width:16px;height:16px;margin-right:12px;vertical-align:middle;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__Favicon",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                          "target": "img",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                    >
-                                      <img
-                                        alt=""
-                                        className="c8"
-                                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                      />
-                                    </StyledComponent>
-                                  </SnippetPreview__Favicon>
-                                  <SnippetPreview__UrlContentContainer
-                                    screenMode="mobile"
-                                  >
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                            "isStatic": false,
-                                            "lastClassName": "c9",
-                                            "rules": Array [
-                                              "font-size:",
-                                              [Function],
-                                              ";line-height:",
-                                              [Function],
-                                              ";color:",
-                                              [Function],
-                                              ";",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__UrlContentContainer",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      screenMode="mobile"
-                                    >
-                                      <span
-                                        className="c9"
-                                      >
-                                        <SnippetPreview__UrlBaseContainer>
-                                          <StyledComponent
-                                            forwardedComponent={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "attrs": Array [],
-                                                "componentStyle": ComponentStyle {
-                                                  "componentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                  "isStatic": false,
-                                                  "lastClassName": "c10",
-                                                  "rules": Array [
-                                                    "color:",
-                                                    [Function],
-                                                    ";",
-                                                  ],
-                                                },
-                                                "displayName": "SnippetPreview__UrlBaseContainer",
-                                                "foldedComponentIds": Array [],
-                                                "render": [Function],
-                                                "styledComponentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                "target": "span",
-                                                "toString": [Function],
-                                                "warnTooManyClasses": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            forwardedRef={null}
-                                          >
-                                            <span
-                                              className="c10"
-                                            >
-                                              example.org
-                                            </span>
-                                          </StyledComponent>
-                                        </SnippetPreview__UrlBaseContainer>
-                                         › test-slug
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__UrlContentContainer>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__BaseUrlOverflowContainer>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseUrl>
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          SEO title preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseTitle
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                                "isStatic": false,
-                                "lastClassName": "c11",
-                                "rules": Array [
-                                  "cursor:pointer;position:relative;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseTitle",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c11"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__TitleBounded
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                      "isStatic": false,
-                                      "lastClassName": "c12",
-                                      "rules": Array [
-                                        "color:",
-                                        [Function],
-                                        ";text-decoration:none;font-size:",
-                                        [Function],
-                                        ";line-height:",
-                                        [Function],
-                                        ";font-weight:normal;margin:0;display:inline-block;overflow:hidden;max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                        "max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__TitleBounded",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__Title-sc-1hxg8jo-4",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c12"
-                                >
-                                  <SnippetPreview__TitleUnboundedMobile>
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                            "isStatic": false,
-                                            "lastClassName": "c13",
-                                            "rules": Array [
-                                              "display:inline-block;max-height:40px;padding-top:1px;vertical-align:top;overflow:hidden;text-overflow:ellipsis;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__TitleUnboundedMobile",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={[Function]}
-                                    >
-                                      <span
-                                        className="c13"
-                                      >
-                                        Test title
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__TitleUnboundedMobile>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__TitleBounded>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseTitle>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--desktop"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--desktop"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--desktop"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Meta description preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__MobileDescription
-                        isDescriptionPlaceholder={false}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                "isStatic": false,
-                                "lastClassName": "c14",
-                                "rules": Array [
-                                  "color:",
-                                  "#3c4043",
-                                  ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                  "600",
-                                  "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__MobileDescription",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          isDescriptionPlaceholder={false}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c14"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__MobileDescription
-                              isDescriptionPlaceholder={false}
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                      "isStatic": false,
-                                      "lastClassName": "c14",
-                                      "rules": Array [
-                                        "color:",
-                                        "#3c4043",
-                                        ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                        "600",
-                                        "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__MobileDescription",
-                                    "foldedComponentIds": Array [],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={[Function]}
-                                isDescriptionPlaceholder={false}
-                              >
-                                <div
-                                  className="c14"
-                                >
-                                  Test description, %%replacement_variable%%
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__MobileDescription>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__MobileDescription>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--mobile"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--mobile"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--mobile"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                      <ProductDataMobile
-                        shoppingData={Object {}}
-                      >
-                        <ProductDataMobile__ProductData>
-                          <StyledComponent
-                            forwardedComponent={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "attrs": Array [],
-                                "componentStyle": ComponentStyle {
-                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                  "isStatic": false,
-                                  "lastClassName": "c14",
-                                  "rules": Array [
-                                    "display:flex;",
-                                  ],
-                                },
-                                "displayName": "ProductDataMobile__ProductData",
-                                "foldedComponentIds": Array [],
-                                "render": [Function],
-                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                "target": "div",
-                                "toString": [Function],
-                                "warnTooManyClasses": [Function],
-                                "withComponent": [Function],
-                              }
-                            }
-                            forwardedRef={null}
-                          >
-                            <div
-                              className="c14"
-                            />
-                          </StyledComponent>
-                        </ProductDataMobile__ProductData>
-                      </ProductDataMobile>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-              </div>
-            </StyledComponent>
-          </SnippetPreview__MobileContainer>
-        </section>
-      </SnippetPreview>
-      <SnippetEditor__EditSnippetButton
-        activeBackgroundColor="#f7f7f7"
-        activeBorderColor="#000"
-        activeColor="#000"
-        aria-expanded={true}
-        backgroundColor="#f7f7f7"
-        borderColor="#ccc"
-        boxShadowColor="#ccc"
-        focusBackgroundColor="#fff"
-        focusBorderColor="#0066cd"
-        focusBoxShadowColor="#084a67"
-        focusColor="#000"
-        hoverBackgroundColor="#fff"
-        hoverColor="#000"
-        onClick={[Function]}
-        textColor="#555"
-        type="button"
-      >
-        <StyledComponent
-          activeBackgroundColor="#f7f7f7"
-          activeBorderColor="#000"
-          activeColor="#000"
-          aria-expanded={true}
-          backgroundColor="#f7f7f7"
-          borderColor="#ccc"
-          boxShadowColor="#ccc"
-          focusBackgroundColor="#fff"
-          focusBorderColor="#0066cd"
-          focusBoxShadowColor="#084a67"
-          focusColor="#000"
-          forwardedComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "_foldedDefaultProps": Object {
-                "activeBackgroundColor": "#f7f7f7",
-                "activeBorderColor": "#000",
-                "activeColor": "#000",
-                "backgroundColor": "#f7f7f7",
-                "borderColor": "#ccc",
-                "boxShadowColor": "#ccc",
-                "focusBackgroundColor": "#fff",
-                "focusBorderColor": "#0066cd",
-                "focusBoxShadowColor": "#084a67",
-                "focusColor": "#000",
-                "hoverBackgroundColor": "#fff",
-                "hoverColor": "#000",
-                "textColor": "#555",
-                "type": "button",
-              },
-              "attrs": Array [],
-              "componentStyle": ComponentStyle {
-                "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-                "isStatic": false,
-                "lastClassName": "c15",
-                "rules": Array [
-                  "color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";background:",
-                  [Function],
-                  ";box-shadow:0 1px 0 ",
-                  [Function],
-                  ";",
-                  "&:active{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";box-shadow:inset 0 2px 5px -3px ",
-                  [Function],
-                  "}",
-                  "&::-moz-focus-inner{border-width:0;}&:focus{outline:none;border-color:",
-                  [Function],
-                  ";color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";box-shadow:0 0 3px ",
-                  [Function],
-                  "}",
-                  "&:hover{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:var(--yoast-color-border--default);}",
-                  "display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-width:",
-                  "1px",
-                  ";border-style:solid;margin:0;padding:",
-                  "4px",
-                  " 10px;border-radius:3px;cursor:pointer;box-sizing:border-box;font-size:inherit;font-family:inherit;font-weight:inherit;text-align:",
-                  [Function],
-                  ";overflow:visible;min-height:",
-                  "32px",
-                  ";transition:var(--yoast-transition-default);svg{align-self:center;}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){::after{display:inline-block;content:\\"\\";min-height:",
-                  "22px",
-                  ";}}",
-                  "height:33px;border:1px solid #dbdbdb;box-shadow:none;font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;",
-                  "margin:",
-                  [Function],
-                  ";fill:",
-                  "#555",
-                  ";padding-left:8px;& svg{",
-                  [Function],
-                  ":7px;}",
-                ],
-              },
-              "displayName": "SnippetEditor__EditSnippetButton",
-              "foldedComponentIds": Array [
-                "Button__BaseButton-sc-32rbq-4",
-                "Button-sc-32rbq-3",
-                "Button-sc-32rbq-1",
-                "Button-sc-32rbq-2",
-                "Button-sc-32rbq-0",
-                "SnippetEditor__SnippetEditorButton-sc-144bmm3-0",
-              ],
-              "propTypes": Object {
-                "activeBackgroundColor": [Function],
-                "activeBorderColor": [Function],
-                "activeColor": [Function],
-                "backgroundColor": [Function],
-                "borderColor": [Function],
-                "boxShadowColor": [Function],
-                "focusBackgroundColor": [Function],
-                "focusBorderColor": [Function],
-                "focusBoxShadowColor": [Function],
-                "focusColor": [Function],
-                "hoverBackgroundColor": [Function],
-                "hoverColor": [Function],
-                "textColor": [Function],
-                "type": [Function],
-              },
-              "render": [Function],
-              "styledComponentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-              "target": "button",
-              "toString": [Function],
-              "warnTooManyClasses": [Function],
-              "withComponent": [Function],
-            }
-          }
-          forwardedRef={[Function]}
-          hoverBackgroundColor="#fff"
-          hoverColor="#000"
-          onClick={[Function]}
-          textColor="#555"
-          type="button"
-        >
-          <button
-            aria-expanded={true}
-            className="c15"
-            onClick={[Function]}
-            type="button"
-          >
-            <SvgIcon
-              className=""
-              color="currentColor"
-              icon="edit"
-              size="16px"
-            >
-              <SvgIconSet
-                className=""
-                color="currentColor"
-                icon="edit"
-                iconSet={
-                  Object {
-                    "alert-error": Object {
-                      "path": "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-info": Object {
-                      "path": "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-success": Object {
-                      "path": "M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-warning": Object {
-                      "path": "M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z",
-                      "viewbox": "0 0 576 512",
-                    },
-                    "angle-down": Object {
-                      "path": "M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-left": Object {
-                      "path": "M1203 544q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-right": Object {
-                      "path": "M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-up": Object {
-                      "path": "M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-down": Object {
-                      "path": "M896 1791L120.91 448.5L1671.09 448.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-left": Object {
-                      "path": "M1343.5 1671.09L1 896L1343.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-right": Object {
-                      "path": "M1791 896L448.5 1671.09L448.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-up": Object {
-                      "path": "M1671.09 1343.5L120.91 1343.5L896 1z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "caret-right": Object {
-                      "path": "M 0 384.662 V 127.338 c 0 -17.818 21.543 -26.741 34.142 -14.142 l 128.662 128.662 c 7.81 7.81 7.81 20.474 0 28.284 L 34.142 398.804 C 21.543 411.404 0 402.48 0 384.662 Z",
-                      "viewbox": "0 0 192 512",
-                    },
-                    "check": Object {
-                      "path": "M249.2,431.2c-23,0-45.6,9.4-61.8,25.6L25.6,618.6C9.4,634.8,0,657.4,0,680.4c0,23,9.4,45.6,25.6,61.8 l593.1,593.1c16.2,16.2,38.8,25.6,61.8,25.6c23,0,45.6-9.4,61.8-25.6L1766.4,311c16.2-16.2,25.6-38.8,25.6-61.8 s-9.4-45.6-25.6-61.8L1604.5,25.6C1588.3,9.4,1565.8,0,1542.8,0c-23,0-45.6,9.4-61.8,25.6L680.4,827L311,456.3 C294.8,440.5,272.3,431.2,249.2,431.2z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "chevron-down": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "chevron-up": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "circle": Object {
-                      "path": "M1664 896q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "clipboard": Object {
-                      "path": "M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "desktop": Object {
-                      "path": "M1728 992v-832q0-13-9.5-22.5t-22.5-9.5h-1600q-13 0-22.5 9.5t-9.5 22.5v832q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5zm128-832v1088q0 66-47 113t-113 47h-544q0 37 16 77.5t32 71 16 43.5q0 26-19 45t-45 19h-512q-26 0-45-19t-19-45q0-14 16-44t32-70 16-78h-544q-66 0-113-47t-47-113v-1088q0-66 47-113t113-47h1600q66 0 113 47t47 113z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "edit": Object {
-                      "path": "M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "exclamation-triangle": Object {
-                      "path": "M1024 1375v-190q0-14-9.5-23.5T992 1152H800q-13 0-22.5 9.5T768 1185v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11H786q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17H128q-34 0-63.5-17T18 1601q-37-63-2-126L784 67q17-31 47-49t65-18 65 18 47 49z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "eye": Object {
-                      "path": "M1664 960q-152-236-381-353 61 104 61 225 0 185-131.5 316.5t-316.5 131.5-316.5-131.5-131.5-316.5q0-121 61-225-229 117-381 353 133 205 333.5 326.5t434.5 121.5 434.5-121.5 333.5-326.5zm-720-384q0-20-14-34t-34-14q-125 0-214.5 89.5t-89.5 214.5q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5t-499.5 138.5-499.5-139-376.5-368q-20-35-20-69t20-69q140-229 376.5-368t499.5-139 499.5 139 376.5 368q20 35 20 69z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "file-text": Object {
-                      "path": "M1596 380q28 28 48 76t20 88v1152q0 40-28 68t-68 28h-1344q-40 0-68-28t-28-68v-1600q0-40 28-68t68-28h896q40 0 88 20t76 48zm-444-244v376h376q-10-29-22-41l-313-313q-12-12-41-22zm384 1528v-1024h-416q-40 0-68-28t-28-68v-416h-768v1536h1280zm-1024-864q0-14 9-23t23-9h704q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64zm736 224q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704zm0 256q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "gear": Object {
-                      "path": "M1800 800h-218q-26 -107 -81 -193l154 -154l-210 -210l-154 154q-88 -55 -191 -79v-218h-300v218q-103 24 -191 79l-154 -154l-212 212l154 154q-55 88 -79 191h-218v297h217q23 101 80 194l-154 154l210 210l154 -154q85 54 193 81v218h300v-218q103 -24 191 -79 l154 154l212 -212l-154 -154q57 -93 80 -194h217v-297zM950 650q124 0 212 88t88 212t-88 212t-212 88t-212 -88t-88 -212t88 -212t212 -88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "key": Object {
-                      "path": "M832 512q0-80-56-136t-136-56-136 56-56 136q0 42 19 83-41-19-83-19-80 0-136 56t-56 136 56 136 136 56 136-56 56-136q0-42-19-83 41 19 83 19 80 0 136-56t56-136zm851 704q0 17-49 66t-66 49q-9 0-28.5-16t-36.5-33-38.5-40-24.5-26l-96 96 220 220q28 28 28 68 0 42-39 81t-81 39q-40 0-68-28l-671-671q-176 131-365 131-163 0-265.5-102.5t-102.5-265.5q0-160 95-313t248-248 313-95q163 0 265.5 102.5t102.5 265.5q0 189-131 365l355 355 96-96q-3-3-26-24.5t-40-38.5-33-36.5-16-28.5q0-17 49-66t66-49q13 0 23 10 6 6 46 44.5t82 79.5 86.5 86 73 78 28.5 41z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "list": Object {
-                      "path": "M384 1408q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm0-512q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm-1408-928q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm0-512v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "loading-spinner": Object {
-                      "CustomComponent": Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                          "isStatic": false,
-                          "rules": Array [
-                            "width:",
-                            [Function],
-                            ";height:",
-                            [Function],
-                            ";flex:none;animation:loadingSpinnerRotator 1.4s linear infinite;& .path{stroke:",
-                            [Function],
-                            ";stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:loadingSpinnerDash 1.4s ease-in-out infinite;}@keyframes loadingSpinnerRotator{0%{transform:rotate( 0deg );}100%{transform:rotate( 270deg );}}@keyframes loadingSpinnerDash{0%{stroke-dashoffset:187;}50%{stroke-dashoffset:47;transform:rotate( 135deg );}100%{stroke-dashoffset:187;transform:rotate( 450deg );}}",
-                          ],
-                        },
-                        "displayName": "SvgIcon__StyledSvgSpinner",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                        "target": "svg",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      },
-                      "path": Array [
-                        <circle
-                          className="path"
-                          cx="33"
-                          cy="33"
-                          fill="none"
-                          r="30"
-                          strokeLinecap="round"
-                          strokeWidth="6"
-                        />,
-                      ],
-                      "viewbox": "0 0 66 66",
-                    },
-                    "mobile": Object {
-                      "path": "M976 1408q0-33-23.5-56.5t-56.5-23.5-56.5 23.5-23.5 56.5 23.5 56.5 56.5 23.5 56.5-23.5 23.5-56.5zm208-160v-704q0-13-9.5-22.5t-22.5-9.5h-512q-13 0-22.5 9.5t-9.5 22.5v704q0 13 9.5 22.5t22.5 9.5h512q13 0 22.5-9.5t9.5-22.5zm-192-848q0-16-16-16h-160q-16 0-16 16t16 16h160q16 0 16-16zm288-16v1024q0 52-38 90t-90 38h-512q-52 0-90-38t-38-90v-1024q0-52 38-90t90-38h512q52 0 90 38t38 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "pencil-square": Object {
-                      "path": "M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus": Object {
-                      "path": "M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus-circle": Object {
-                      "path": "M1344 960v-128q0-26-19-45t-45-19h-256v-256q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v256h-256q-26 0-45 19t-19 45v128q0 26 19 45t45 19h256v256q0 26 19 45t45 19h128q26 0 45-19t19-45v-256h256q26 0 45-19t19-45zm320-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "question-circle": Object {
-                      "path": "M1024 1376v-192q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v192q0 14 9 23t23 9h192q14 0 23-9t9-23zm256-672q0-88-55.5-163t-138.5-116-170-41q-243 0-371 213-15 24 8 42l132 100q7 6 19 6 16 0 25-12 53-68 86-92 34-24 86-24 48 0 85.5 26t37.5 59q0 38-20 61t-68 45q-63 28-115.5 86.5t-52.5 125.5v36q0 14 9 23t23 9h192q14 0 23-9t9-23q0-19 21.5-49.5t54.5-49.5q32-18 49-28.5t46-35 44.5-48 28-60.5 12.5-81zm384 192q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "search": Object {
-                      "path": "M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "seo-score-bad": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M338.2 394.2C315.8 367.4 282.9 352 248 352s-67.8 15.4-90.2 42.2c-13.5 16.3-38.1-4.2-24.6-20.5C161.7 339.6 203.6 320 248 320 s86.3 19.6 114.7 53.8C376.3 390 351.7 410.5 338.2 394.2L338.2 394.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-good": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M362.8 346.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5c22.4 26.9 55.2 42.2 90.2 42.2 s67.8-15.4 90.2-42.2C351.6 309.5 376.3 329.9 362.8 346.2L362.8 346.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-none": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-ok": Object {
-                      "path": Array [
-                        <path
-                          d="M344 336c21.2 0 21.2 32 0 32H152c-21.2 0-21.2-32 0-32H344z"
-                          fill="#000000"
-                        />,
-                        <circle
-                          cx="328"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <circle
-                          cx="168"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <path
-                          d="M248 8c137 0 248 111 248 248S385 504 248 504S0 393 0 256S111 8 248 8z M360 208c0-17.7-14.3-32-32-32 s-32 14.3-32 32s14.3 32 32 32S360 225.7 360 208z M344 368c21.2 0 21.2-32 0-32H152c-21.2 0-21.2 32 0 32H344z M200 208 c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32S200 225.7 200 208z"
-                        />,
-                      ],
-                      "viewbox": "0 0 496 512",
-                    },
-                    "times": Object {
-                      "path": "M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "times-circle": Object {
-                      "path": "M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z",
-                      "viewbox": "0 0 20 20",
-                    },
-                  }
-                }
-                size="16px"
-              >
-                <createSvgIconComponent__StyledSvg
-                  aria-hidden={true}
-                  className="yoast-svg-icon yoast-svg-icon-edit"
-                  fill="currentColor"
-                  focusable="false"
-                  role="img"
-                  size="16px"
-                  viewBox="0 0 1792 1792"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <svg
-                    aria-hidden={true}
-                    className="yoast-svg-icon yoast-svg-icon-edit createSvgIconComponent__StyledSvg-sc-1h4gl3a-0 cPnaHk"
-                    fill="currentColor"
-                    focusable="false"
-                    role="img"
-                    size="16px"
-                    viewBox="0 0 1792 1792"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"
-                    />
-                  </svg>
-                </createSvgIconComponent__StyledSvg>
-              </SvgIconSet>
-            </SvgIcon>
-            Edit snippet
-          </button>
-        </StyledComponent>
-      </SnippetEditor__EditSnippetButton>
-      <SnippetEditorFields
-        activeField={null}
-        containerPadding="0 20px"
-        data={
-          Object {
-            "description": "Test description, %%replacement_variable%%",
-            "slug": "test-slug",
-            "title": "Test title",
-          }
-        }
-        descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here"
-        descriptionInputId="yoast-google-preview-description"
-        descriptionLengthProgress={
-          Object {
-            "actual": 42,
-            "max": 156,
-            "score": 6,
-          }
-        }
-        hoveredField={null}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        recommendedReplacementVariables={Array []}
-        replacementVariables={Array []}
-        slugInputId="yoast-google-preview-slug"
-        titleInputId="yoast-google-preview-title"
-        titleLengthProgress={
-          Object {
-            "actual": 0,
-            "max": 600,
-            "score": 1,
-          }
-        }
-      >
-        <SettingsSnippetEditorFields__StyledEditor
-          padding="0 20px"
-        >
-          <StyledComponent
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
-                  "isStatic": false,
-                  "lastClassName": "c16",
-                  "rules": Array [
-                    "padding:",
-                    [Function],
-                    ";",
-                  ],
-                },
-                "displayName": "SettingsSnippetEditorFields__StyledEditor",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
-                "target": "section",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
-              }
-            }
-            forwardedRef={null}
-            padding="0 20px"
-          >
-            <section
-              className="c16"
-            >
-              <ReplacementVariableEditorMock
-                content="Test title"
-                editorRef={[Function]}
-                fieldId="yoast-google-preview-title"
-                isActive={false}
-                isHovered={false}
-                label="SEO title"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                recommendedReplacementVariables={Array []}
-                replacementVariables={Array []}
-                type="title"
-                withCaret={true}
-              >
-                <div />
-              </ReplacementVariableEditorMock>
-              <ProgressBar
-                aria-hidden="true"
-                backgroundColor="#f7f7f7"
-                borderColor="#ddd"
-                max={600}
-                progressColor="#dc3232"
-                value={0}
-              >
-                <StyledComponent
-                  aria-hidden="true"
-                  backgroundColor="#f7f7f7"
-                  borderColor="#ddd"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "_foldedDefaultProps": Object {
-                        "aria-hidden": "true",
-                        "backgroundColor": "#f7f7f7",
-                        "borderColor": "#ddd",
-                        "max": 1,
-                        "progressColor": "#7ad03a",
-                        "value": 0,
-                      },
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ProgressBar-sc-9g9yx6-0",
-                        "isStatic": false,
-                        "lastClassName": "c21",
-                        "rules": Array [
-                          "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
-                          [Function],
-                          ";border:1px solid ",
-                          [Function],
-                          ";::-webkit-progress-bar{background-color:",
-                          [Function],
-                          ";}::-webkit-progress-value{background-color:",
-                          [Function],
-                          ";transition:width 250ms;}::-moz-progress-bar{background-color:",
-                          [Function],
-                          ";}::-ms-fill{background-color:",
-                          [Function],
-                          ";border:0;}",
-                        ],
-                      },
-                      "displayName": "ProgressBar",
-                      "foldedComponentIds": Array [],
-                      "propTypes": Object {
-                        "aria-hidden": [Function],
-                        "backgroundColor": [Function],
-                        "borderColor": [Function],
-                        "max": [Function],
-                        "progressColor": [Function],
-                        "value": [Function],
-                      },
-                      "render": [Function],
-                      "styledComponentId": "ProgressBar-sc-9g9yx6-0",
-                      "target": "progress",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  max={600}
-                  progressColor="#dc3232"
-                  value={0}
-                >
-                  <progress
-                    aria-hidden="true"
-                    className="c17"
-                    max={600}
-                    value={0}
-                  />
-                </StyledComponent>
-              </ProgressBar>
-              <Label__SimulatedLabel
-                id="snippet-editor-field-9-slug"
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "Label__SimulatedLabel-mitdcc-0",
-                        "isStatic": false,
-                        "lastClassName": "c18",
-                        "rules": Array [
-                          "flex:1 1 200px;min-width:200px;cursor:pointer;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;margin:4px 0;color:#303030;font-weight:500;",
-                        ],
-                      },
-                      "displayName": "Label__SimulatedLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "Label__SimulatedLabel-mitdcc-0",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  id="snippet-editor-field-9-slug"
-                  onClick={[Function]}
-                >
-                  <div
-                    className="c18"
-                    id="snippet-editor-field-9-slug"
-                    onClick={[Function]}
-                  >
-                    Slug
-                  </div>
-                </StyledComponent>
-              </Label__SimulatedLabel>
-              <helpers
-                isActive={false}
-                isHovered={false}
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        Object {},
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "helpers-sc-15q2ybx-0",
-                        "isStatic": false,
-                        "lastClassName": "c19",
-                        "rules": Array [
-                          "flex:0 1 100%;border:1px solid ",
-                          [Function],
-                          ";padding:3px 5px;box-sizing:border-box;box-shadow:",
-                          [Function],
-                          ";background-color:#fff;color:#32373c;outline:0;transition:50ms border-color ease-in-out;position:relative;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;font-size:14px;cursor:text;",
-                          "&::before{display:block;position:absolute;top:-1px;",
-                          [Function],
-                          ":-25px;width:24px;height:24px;background-image:url( ",
-                          [Function],
-                          " );background-size:25px;content:\\"\\";}",
-                        ],
-                      },
-                      "displayName": "helpers",
-                      "foldedComponentIds": Array [
-                        "InputContainer__VariableEditorInputContainer-sc-140v6lg-0",
-                      ],
-                      "render": [Function],
-                      "styledComponentId": "helpers-sc-15q2ybx-0",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  isActive={false}
-                  isHovered={false}
-                  onClick={[Function]}
-                >
-                  <div
-                    className="c19"
-                    onClick={[Function]}
-                  >
-                    <SnippetEditorFields__SlugInput
-                      aria-labelledby="snippet-editor-field-9-slug"
-                      id="yoast-google-preview-slug"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      value="test-slug"
-                    >
-                      <StyledComponent
-                        aria-labelledby="snippet-editor-field-9-slug"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
-                              "isStatic": false,
-                              "lastClassName": "c20",
-                              "rules": Array [
-                                "border:none;width:100%;height:inherit;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;&:focus{outline:0;}",
-                              ],
-                            },
-                            "displayName": "SnippetEditorFields__SlugInput",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
-                          }
-                        }
-                        forwardedRef={[Function]}
-                        id="yoast-google-preview-slug"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onFocus={[Function]}
-                        value="test-slug"
-                      >
-                        <input
-                          aria-labelledby="snippet-editor-field-9-slug"
-                          className="c20"
-                          id="yoast-google-preview-slug"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          value="test-slug"
-                        />
-                      </StyledComponent>
-                    </SnippetEditorFields__SlugInput>
-                  </div>
-                </StyledComponent>
-              </helpers>
-              <ReplacementVariableEditorMock
-                content="Test description, %%replacement_variable%%"
-                editorRef={[Function]}
-                fieldId="yoast-google-preview-description"
-                isActive={false}
-                isHovered={false}
-                label="Meta description"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                placeholder="Modify your meta description by editing it right here"
-                recommendedReplacementVariables={Array []}
-                replacementVariables={Array []}
-                type="description"
-                withCaret={true}
-              >
-                <div />
-              </ReplacementVariableEditorMock>
-              <ProgressBar
-                aria-hidden="true"
-                backgroundColor="#f7f7f7"
-                borderColor="#ddd"
-                max={156}
-                progressColor="#ee7c1b"
-                value={42}
-              >
-                <StyledComponent
-                  aria-hidden="true"
-                  backgroundColor="#f7f7f7"
-                  borderColor="#ddd"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "_foldedDefaultProps": Object {
-                        "aria-hidden": "true",
-                        "backgroundColor": "#f7f7f7",
-                        "borderColor": "#ddd",
-                        "max": 1,
-                        "progressColor": "#7ad03a",
-                        "value": 0,
-                      },
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ProgressBar-sc-9g9yx6-0",
-                        "isStatic": false,
-                        "lastClassName": "c21",
-                        "rules": Array [
-                          "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
-                          [Function],
-                          ";border:1px solid ",
-                          [Function],
-                          ";::-webkit-progress-bar{background-color:",
-                          [Function],
-                          ";}::-webkit-progress-value{background-color:",
-                          [Function],
-                          ";transition:width 250ms;}::-moz-progress-bar{background-color:",
-                          [Function],
-                          ";}::-ms-fill{background-color:",
-                          [Function],
-                          ";border:0;}",
-                        ],
-                      },
-                      "displayName": "ProgressBar",
-                      "foldedComponentIds": Array [],
-                      "propTypes": Object {
-                        "aria-hidden": [Function],
-                        "backgroundColor": [Function],
-                        "borderColor": [Function],
-                        "max": [Function],
-                        "progressColor": [Function],
-                        "value": [Function],
-                      },
-                      "render": [Function],
-                      "styledComponentId": "ProgressBar-sc-9g9yx6-0",
-                      "target": "progress",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  max={156}
-                  progressColor="#ee7c1b"
-                  value={42}
-                >
-                  <progress
-                    aria-hidden="true"
-                    className="c21"
-                    max={156}
-                    value={42}
-                  />
-                </StyledComponent>
-              </ProgressBar>
-            </section>
-          </StyledComponent>
-        </SettingsSnippetEditorFields__StyledEditor>
-      </SnippetEditorFields>
-      <SnippetEditor__CloseEditorButton
-        activeBackgroundColor="#f7f7f7"
-        activeBorderColor="#000"
-        activeColor="#000"
-        backgroundColor="#f7f7f7"
-        borderColor="#ccc"
-        boxShadowColor="#ccc"
-        focusBackgroundColor="#fff"
-        focusBorderColor="#0066cd"
-        focusBoxShadowColor="#084a67"
-        focusColor="#000"
-        hoverBackgroundColor="#fff"
-        hoverColor="#000"
-        onClick={[Function]}
-        textColor="#555"
-        type="button"
-      >
-        <StyledComponent
-          activeBackgroundColor="#f7f7f7"
-          activeBorderColor="#000"
-          activeColor="#000"
-          backgroundColor="#f7f7f7"
-          borderColor="#ccc"
-          boxShadowColor="#ccc"
-          focusBackgroundColor="#fff"
-          focusBorderColor="#0066cd"
-          focusBoxShadowColor="#084a67"
-          focusColor="#000"
-          forwardedComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "_foldedDefaultProps": Object {
-                "activeBackgroundColor": "#f7f7f7",
-                "activeBorderColor": "#000",
-                "activeColor": "#000",
-                "backgroundColor": "#f7f7f7",
-                "borderColor": "#ccc",
-                "boxShadowColor": "#ccc",
-                "focusBackgroundColor": "#fff",
-                "focusBorderColor": "#0066cd",
-                "focusBoxShadowColor": "#084a67",
-                "focusColor": "#000",
-                "hoverBackgroundColor": "#fff",
-                "hoverColor": "#000",
-                "textColor": "#555",
-                "type": "button",
-              },
-              "attrs": Array [],
-              "componentStyle": ComponentStyle {
-                "componentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
-                "isStatic": false,
-                "lastClassName": "c22",
-                "rules": Array [
-                  "color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";background:",
-                  [Function],
-                  ";box-shadow:0 1px 0 ",
-                  [Function],
-                  ";",
-                  "&:active{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";box-shadow:inset 0 2px 5px -3px ",
-                  [Function],
-                  "}",
-                  "&::-moz-focus-inner{border-width:0;}&:focus{outline:none;border-color:",
-                  [Function],
-                  ";color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";box-shadow:0 0 3px ",
-                  [Function],
-                  "}",
-                  "&:hover{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:var(--yoast-color-border--default);}",
-                  "display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-width:",
-                  "1px",
-                  ";border-style:solid;margin:0;padding:",
-                  "4px",
-                  " 10px;border-radius:3px;cursor:pointer;box-sizing:border-box;font-size:inherit;font-family:inherit;font-weight:inherit;text-align:",
-                  [Function],
-                  ";overflow:visible;min-height:",
-                  "32px",
-                  ";transition:var(--yoast-transition-default);svg{align-self:center;}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){::after{display:inline-block;content:\\"\\";min-height:",
-                  "22px",
-                  ";}}",
-                  "height:33px;border:1px solid #dbdbdb;box-shadow:none;font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;",
-                  "margin-top:24px;",
-                ],
-              },
-              "displayName": "SnippetEditor__CloseEditorButton",
-              "foldedComponentIds": Array [
-                "Button__BaseButton-sc-32rbq-4",
-                "Button-sc-32rbq-3",
-                "Button-sc-32rbq-1",
-                "Button-sc-32rbq-2",
-                "Button-sc-32rbq-0",
-                "SnippetEditor__SnippetEditorButton-sc-144bmm3-0",
-              ],
-              "propTypes": Object {
-                "activeBackgroundColor": [Function],
-                "activeBorderColor": [Function],
-                "activeColor": [Function],
-                "backgroundColor": [Function],
-                "borderColor": [Function],
-                "boxShadowColor": [Function],
-                "focusBackgroundColor": [Function],
-                "focusBorderColor": [Function],
-                "focusBoxShadowColor": [Function],
-                "focusColor": [Function],
-                "hoverBackgroundColor": [Function],
-                "hoverColor": [Function],
-                "textColor": [Function],
-                "type": [Function],
-              },
-              "render": [Function],
-              "styledComponentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
-              "target": "button",
-              "toString": [Function],
-              "warnTooManyClasses": [Function],
-              "withComponent": [Function],
-            }
-          }
-          forwardedRef={null}
-          hoverBackgroundColor="#fff"
-          hoverColor="#000"
-          onClick={[Function]}
-          textColor="#555"
-          type="button"
-        >
-          <button
-            className="c22"
-            onClick={[Function]}
-            type="button"
-          >
-            Close snippet editor
-          </button>
-        </StyledComponent>
-      </SnippetEditor__CloseEditorButton>
-    </div>
-  </ErrorBoundary>
-</SnippetEditor>
-`;
-
-exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] = `
-.c18 {
-  -webkit-flex: 1 1 200px;
-  -ms-flex: 1 1 200px;
-  flex: 1 1 200px;
-  min-width: 200px;
-  cursor: pointer;
-  font-size: 14px;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  margin: 4px 0;
-  color: #303030;
-  font-weight: 500;
-}
-
-.c17 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c17::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c17::-webkit-progress-value {
-  background-color: #dc3232;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c17::-moz-progress-bar {
-  background-color: #dc3232;
-}
-
-.c17::-ms-fill {
-  background-color: #dc3232;
-  border: 0;
-}
-
-.c21 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c21::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c21::-webkit-progress-value {
-  background-color: #ee7c1b;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c21::-moz-progress-bar {
-  background-color: #ee7c1b;
-}
-
-.c21::-ms-fill {
-  background-color: #ee7c1b;
-  border: 0;
-}
-
-.c16 {
-  padding: 0 20px;
-}
-
-.c14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c4 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c11 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c12 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c13 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c6 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c7 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c9 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c10 {
-  color: #3c4043;
-}
-
-.c14 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c14:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c5 {
-  padding: 12px 16px;
-}
-
-.c5:first-child {
-  margin-bottom: -16px;
-}
-
-.c8 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-.c20 {
-  border: none;
-  width: 100%;
-  height: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-}
-
-.c20:focus {
-  outline: 0;
-}
-
-.c19 {
-  -webkit-flex: 0 1 100%;
-  -ms-flex: 0 1 100%;
-  flex: 0 1 100%;
-  border: 1px solid #ddd;
-  padding: 3px 5px;
-  box-sizing: border-box;
-  box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
-  background-color: #fff;
-  color: #32373c;
-  outline: 0;
-  -webkit-transition: 50ms border-color ease-in-out;
-  transition: 50ms border-color ease-in-out;
-  position: relative;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-size: 14px;
-  cursor: text;
-}
-
-.c19::before {
-  display: block;
-  position: absolute;
-  top: -1px;
-  left: -25px;
-  width: 24px;
-  height: 24px;
-  background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22transparent%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
-  background-size: 25px;
-  content: "";
-}
-
-.c0 {
-  border: 0;
-  padding: 0;
-  margin: 0 0 16px;
-}
-
-.c1 {
-  margin: 8px 0;
-  padding: 0;
-  color: #555;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.c3 {
-  margin-right: 16px;
-  color: inherit;
-  font-size: 14px;
-  line-height: 1.71428571;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c2.c2 {
-  margin: 0 8px 0 0;
-  cursor: pointer;
-}
-
-.c15 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin: 10px 0 0 4px;
-  fill: #555;
-  padding-left: 8px;
-}
-
-.c15:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c15::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c15:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c15:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c15 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c15 svg {
-  margin-right: 7px;
-}
-
-.c22 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin-top: 24px;
-}
-
-.c22:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c22::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c22:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c22:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c22 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c15::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c22::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-<SnippetEditor
-  baseUrl="http://example.org/"
-  data={
-    Object {
-      "description": "Test description, %%replacement_variable%%",
-      "slug": "test-slug",
-      "title": "Test title",
-    }
-  }
-  date=""
-  descriptionEditorFieldPlaceholder=""
-  descriptionLengthProgress={
-    Object {
-      "actual": 330,
-      "max": 650,
-      "score": 9,
-    }
-  }
-  faviconSrc=""
-  hasPaperStyle={true}
-  idSuffix=""
-  keyword=""
-  locale="en"
-  mapEditorDataToPreview={null}
-  mobileImageSrc=""
-  mode="mobile"
-  onChange={[Function]}
-  onChangeAnalysisData={[Function]}
-  recommendedReplacementVariables={Array []}
-  replacementVariables={Array []}
-  shoppingData={Object {}}
-  showCloseButton={true}
-  titleLengthProgress={
-    Object {
-      "actual": 100,
-      "max": 550,
-      "score": 3,
-    }
-  }
-  wordsToHighlight={Array []}
->
-  <ErrorBoundary>
-    <div>
-      <ModeSwitcher
-        active="mobile"
-        desktopModeInputId="yoast-google-preview-mode-desktop"
-        mobileModeInputId="yoast-google-preview-mode-mobile"
-        onChange={[Function]}
-      >
-        <ModeSwitcher__Switcher>
-          <StyledComponent
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                  "isStatic": false,
-                  "lastClassName": "c0",
-                  "rules": Array [
-                    "border:0;padding:0;margin:0 0 16px;",
-                  ],
-                },
-                "displayName": "ModeSwitcher__Switcher",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                "target": "fieldset",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
-              }
-            }
-            forwardedRef={null}
-          >
-            <fieldset
-              className="c0"
-            >
-              <ModeSwitcher__SwitcherTitle>
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                        "isStatic": false,
-                        "lastClassName": "c1",
-                        "rules": Array [
-                          "margin:8px 0;padding:0;color:",
-                          "#555",
-                          ";font-size:14px;font-weight:600;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__SwitcherTitle",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                      "target": "legend",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <legend
-                    className="c1"
-                  >
-                    Preview as:
-                  </legend>
-                </StyledComponent>
-              </ModeSwitcher__SwitcherTitle>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": true,
-                    "id": "yoast-google-preview-mode-mobile",
-                  }
-                }
-                type="radio"
-                value="mobile"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": true,
-                      "id": "yoast-google-preview-mode-mobile",
-                    }
-                  }
-                  type="radio"
-                  value="mobile"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": true,
-                        "id": "yoast-google-preview-mode-mobile",
-                      }
-                    }
-                    type="radio"
-                    value="mobile"
-                  >
-                    <input
-                      checked={true}
-                      className="c2"
-                      defaultValue="mobile"
-                      id="yoast-google-preview-mode-mobile"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-mobile"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-mobile"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-mobile"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-mobile"
-                    >
-                      Mobile result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": false,
-                    "id": "yoast-google-preview-mode-desktop",
-                  }
-                }
-                type="radio"
-                value="desktop"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": false,
-                      "id": "yoast-google-preview-mode-desktop",
-                    }
-                  }
-                  type="radio"
-                  value="desktop"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": false,
-                        "id": "yoast-google-preview-mode-desktop",
-                      }
-                    }
-                    type="radio"
-                    value="desktop"
-                  >
-                    <input
-                      checked={false}
-                      className="c2"
-                      defaultValue="desktop"
-                      id="yoast-google-preview-mode-desktop"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-desktop"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-desktop"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-desktop"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-desktop"
-                    >
-                      Desktop result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-            </fieldset>
-          </StyledComponent>
-        </ModeSwitcher__Switcher>
-      </ModeSwitcher>
-      <SnippetPreview
-        activeField={null}
-        breadcrumbs={null}
-        date=""
-        description="Test description, %%replacement_variable%%"
-        faviconSrc=""
-        hoveredField={null}
-        isAmp={false}
-        keyword=""
-        locale="en"
-        mobileImageSrc=""
-        mode="mobile"
-        onHover={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-        shoppingData={Object {}}
-        title="Test title"
-        url="http://example.org/test-slug"
-        wordsToHighlight={Array []}
-      >
-        <section>
-          <SnippetPreview__MobileContainer
-            id="yoast-snippet-preview-container"
-            padding={20}
-            width={null}
-          >
-            <StyledComponent
-              forwardedComponent={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "attrs": Array [],
-                  "componentStyle": ComponentStyle {
-                    "componentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                    "isStatic": false,
-                    "lastClassName": "c4",
-                    "rules": Array [
-                      "border-bottom:1px hidden #fff;border-radius:8px;box-shadow:0 1px 6px rgba(32,33,36,0.28);font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;max-width:",
-                      "400",
-                      "px;box-sizing:border-box;font-size:14px;",
-                    ],
-                  },
-                  "displayName": "SnippetPreview__MobileContainer",
-                  "foldedComponentIds": Array [],
-                  "render": [Function],
-                  "styledComponentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                  "target": "div",
-                  "toString": [Function],
-                  "warnTooManyClasses": [Function],
-                  "withComponent": [Function],
-                }
-              }
-              forwardedRef={null}
-              id="yoast-snippet-preview-container"
-              padding={20}
-              width={null}
-            >
-              <div
-                className="c4"
-                id="yoast-snippet-preview-container"
-                width={null}
-              >
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Url preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseUrl>
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                "isStatic": false,
-                                "lastClassName": "c6",
-                                "rules": Array [
-                                  "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseUrl",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                        >
-                          <div
-                            className="c6"
-                          >
-                            <SnippetPreview__BaseUrlOverflowContainer
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseUp={[Function]}
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                      "isStatic": false,
-                                      "lastClassName": "c7",
-                                      "rules": Array [
-                                        "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                        "overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-bottom:",
-                                        [Function],
-                                        ";padding-top:1px;line-height:",
-                                        [Function],
-                                        ";vertical-align:",
-                                        [Function],
-                                        ";",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__BaseUrlOverflowContainer",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                onMouseUp={[Function]}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c7"
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  onMouseUp={[Function]}
-                                >
-                                  <SnippetPreview__Favicon
-                                    alt=""
-                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                  >
-                                    <StyledComponent
-                                      alt=""
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                            "isStatic": false,
-                                            "lastClassName": "c8",
-                                            "rules": Array [
-                                              "width:16px;height:16px;margin-right:12px;vertical-align:middle;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__Favicon",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                          "target": "img",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                    >
-                                      <img
-                                        alt=""
-                                        className="c8"
-                                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                      />
-                                    </StyledComponent>
-                                  </SnippetPreview__Favicon>
-                                  <SnippetPreview__UrlContentContainer
-                                    screenMode="mobile"
-                                  >
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                            "isStatic": false,
-                                            "lastClassName": "c9",
-                                            "rules": Array [
-                                              "font-size:",
-                                              [Function],
-                                              ";line-height:",
-                                              [Function],
-                                              ";color:",
-                                              [Function],
-                                              ";",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__UrlContentContainer",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      screenMode="mobile"
-                                    >
-                                      <span
-                                        className="c9"
-                                      >
-                                        <SnippetPreview__UrlBaseContainer>
-                                          <StyledComponent
-                                            forwardedComponent={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "attrs": Array [],
-                                                "componentStyle": ComponentStyle {
-                                                  "componentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                  "isStatic": false,
-                                                  "lastClassName": "c10",
-                                                  "rules": Array [
-                                                    "color:",
-                                                    [Function],
-                                                    ";",
-                                                  ],
-                                                },
-                                                "displayName": "SnippetPreview__UrlBaseContainer",
-                                                "foldedComponentIds": Array [],
-                                                "render": [Function],
-                                                "styledComponentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                "target": "span",
-                                                "toString": [Function],
-                                                "warnTooManyClasses": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            forwardedRef={null}
-                                          >
-                                            <span
-                                              className="c10"
-                                            >
-                                              example.org
-                                            </span>
-                                          </StyledComponent>
-                                        </SnippetPreview__UrlBaseContainer>
-                                         › test-slug
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__UrlContentContainer>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__BaseUrlOverflowContainer>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseUrl>
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          SEO title preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseTitle
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                                "isStatic": false,
-                                "lastClassName": "c11",
-                                "rules": Array [
-                                  "cursor:pointer;position:relative;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseTitle",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c11"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__TitleBounded
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                      "isStatic": false,
-                                      "lastClassName": "c12",
-                                      "rules": Array [
-                                        "color:",
-                                        [Function],
-                                        ";text-decoration:none;font-size:",
-                                        [Function],
-                                        ";line-height:",
-                                        [Function],
-                                        ";font-weight:normal;margin:0;display:inline-block;overflow:hidden;max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                        "max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__TitleBounded",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__Title-sc-1hxg8jo-4",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c12"
-                                >
-                                  <SnippetPreview__TitleUnboundedMobile>
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                            "isStatic": false,
-                                            "lastClassName": "c13",
-                                            "rules": Array [
-                                              "display:inline-block;max-height:40px;padding-top:1px;vertical-align:top;overflow:hidden;text-overflow:ellipsis;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__TitleUnboundedMobile",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={[Function]}
-                                    >
-                                      <span
-                                        className="c13"
-                                      >
-                                        Test title
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__TitleUnboundedMobile>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__TitleBounded>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseTitle>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--desktop"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--desktop"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--desktop"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Meta description preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__MobileDescription
-                        isDescriptionPlaceholder={false}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                "isStatic": false,
-                                "lastClassName": "c14",
-                                "rules": Array [
-                                  "color:",
-                                  "#3c4043",
-                                  ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                  "600",
-                                  "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__MobileDescription",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          isDescriptionPlaceholder={false}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c14"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__MobileDescription
-                              isDescriptionPlaceholder={false}
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                      "isStatic": false,
-                                      "lastClassName": "c14",
-                                      "rules": Array [
-                                        "color:",
-                                        "#3c4043",
-                                        ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                        "600",
-                                        "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__MobileDescription",
-                                    "foldedComponentIds": Array [],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={[Function]}
-                                isDescriptionPlaceholder={false}
-                              >
-                                <div
-                                  className="c14"
-                                >
-                                  Test description, %%replacement_variable%%
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__MobileDescription>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__MobileDescription>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--mobile"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--mobile"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--mobile"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                      <ProductDataMobile
-                        shoppingData={Object {}}
-                      >
-                        <ProductDataMobile__ProductData>
-                          <StyledComponent
-                            forwardedComponent={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "attrs": Array [],
-                                "componentStyle": ComponentStyle {
-                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                  "isStatic": false,
-                                  "lastClassName": "c14",
-                                  "rules": Array [
-                                    "display:flex;",
-                                  ],
-                                },
-                                "displayName": "ProductDataMobile__ProductData",
-                                "foldedComponentIds": Array [],
-                                "render": [Function],
-                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                "target": "div",
-                                "toString": [Function],
-                                "warnTooManyClasses": [Function],
-                                "withComponent": [Function],
-                              }
-                            }
-                            forwardedRef={null}
-                          >
-                            <div
-                              className="c14"
-                            />
-                          </StyledComponent>
-                        </ProductDataMobile__ProductData>
-                      </ProductDataMobile>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-              </div>
-            </StyledComponent>
-          </SnippetPreview__MobileContainer>
-        </section>
-      </SnippetPreview>
-      <SnippetEditor__EditSnippetButton
-        activeBackgroundColor="#f7f7f7"
-        activeBorderColor="#000"
-        activeColor="#000"
-        aria-expanded={true}
-        backgroundColor="#f7f7f7"
-        borderColor="#ccc"
-        boxShadowColor="#ccc"
-        focusBackgroundColor="#fff"
-        focusBorderColor="#0066cd"
-        focusBoxShadowColor="#084a67"
-        focusColor="#000"
-        hoverBackgroundColor="#fff"
-        hoverColor="#000"
-        onClick={[Function]}
-        textColor="#555"
-        type="button"
-      >
-        <StyledComponent
-          activeBackgroundColor="#f7f7f7"
-          activeBorderColor="#000"
-          activeColor="#000"
-          aria-expanded={true}
-          backgroundColor="#f7f7f7"
-          borderColor="#ccc"
-          boxShadowColor="#ccc"
-          focusBackgroundColor="#fff"
-          focusBorderColor="#0066cd"
-          focusBoxShadowColor="#084a67"
-          focusColor="#000"
-          forwardedComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "_foldedDefaultProps": Object {
-                "activeBackgroundColor": "#f7f7f7",
-                "activeBorderColor": "#000",
-                "activeColor": "#000",
-                "backgroundColor": "#f7f7f7",
-                "borderColor": "#ccc",
-                "boxShadowColor": "#ccc",
-                "focusBackgroundColor": "#fff",
-                "focusBorderColor": "#0066cd",
-                "focusBoxShadowColor": "#084a67",
-                "focusColor": "#000",
-                "hoverBackgroundColor": "#fff",
-                "hoverColor": "#000",
-                "textColor": "#555",
-                "type": "button",
-              },
-              "attrs": Array [],
-              "componentStyle": ComponentStyle {
-                "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-                "isStatic": false,
-                "lastClassName": "c15",
-                "rules": Array [
-                  "color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";background:",
-                  [Function],
-                  ";box-shadow:0 1px 0 ",
-                  [Function],
-                  ";",
-                  "&:active{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";box-shadow:inset 0 2px 5px -3px ",
-                  [Function],
-                  "}",
-                  "&::-moz-focus-inner{border-width:0;}&:focus{outline:none;border-color:",
-                  [Function],
-                  ";color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";box-shadow:0 0 3px ",
-                  [Function],
-                  "}",
-                  "&:hover{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:var(--yoast-color-border--default);}",
-                  "display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-width:",
-                  "1px",
-                  ";border-style:solid;margin:0;padding:",
-                  "4px",
-                  " 10px;border-radius:3px;cursor:pointer;box-sizing:border-box;font-size:inherit;font-family:inherit;font-weight:inherit;text-align:",
-                  [Function],
-                  ";overflow:visible;min-height:",
-                  "32px",
-                  ";transition:var(--yoast-transition-default);svg{align-self:center;}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){::after{display:inline-block;content:\\"\\";min-height:",
-                  "22px",
-                  ";}}",
-                  "height:33px;border:1px solid #dbdbdb;box-shadow:none;font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;",
-                  "margin:",
-                  [Function],
-                  ";fill:",
-                  "#555",
-                  ";padding-left:8px;& svg{",
-                  [Function],
-                  ":7px;}",
-                ],
-              },
-              "displayName": "SnippetEditor__EditSnippetButton",
-              "foldedComponentIds": Array [
-                "Button__BaseButton-sc-32rbq-4",
-                "Button-sc-32rbq-3",
-                "Button-sc-32rbq-1",
-                "Button-sc-32rbq-2",
-                "Button-sc-32rbq-0",
-                "SnippetEditor__SnippetEditorButton-sc-144bmm3-0",
-              ],
-              "propTypes": Object {
-                "activeBackgroundColor": [Function],
-                "activeBorderColor": [Function],
-                "activeColor": [Function],
-                "backgroundColor": [Function],
-                "borderColor": [Function],
-                "boxShadowColor": [Function],
-                "focusBackgroundColor": [Function],
-                "focusBorderColor": [Function],
-                "focusBoxShadowColor": [Function],
-                "focusColor": [Function],
-                "hoverBackgroundColor": [Function],
-                "hoverColor": [Function],
-                "textColor": [Function],
-                "type": [Function],
-              },
-              "render": [Function],
-              "styledComponentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-              "target": "button",
-              "toString": [Function],
-              "warnTooManyClasses": [Function],
-              "withComponent": [Function],
-            }
-          }
-          forwardedRef={[Function]}
-          hoverBackgroundColor="#fff"
-          hoverColor="#000"
-          onClick={[Function]}
-          textColor="#555"
-          type="button"
-        >
-          <button
-            aria-expanded={true}
-            className="c15"
-            onClick={[Function]}
-            type="button"
-          >
-            <SvgIcon
-              className=""
-              color="currentColor"
-              icon="edit"
-              size="16px"
-            >
-              <SvgIconSet
-                className=""
-                color="currentColor"
-                icon="edit"
-                iconSet={
-                  Object {
-                    "alert-error": Object {
-                      "path": "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-info": Object {
-                      "path": "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-success": Object {
-                      "path": "M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-warning": Object {
-                      "path": "M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z",
-                      "viewbox": "0 0 576 512",
-                    },
-                    "angle-down": Object {
-                      "path": "M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-left": Object {
-                      "path": "M1203 544q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-right": Object {
-                      "path": "M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-up": Object {
-                      "path": "M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-down": Object {
-                      "path": "M896 1791L120.91 448.5L1671.09 448.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-left": Object {
-                      "path": "M1343.5 1671.09L1 896L1343.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-right": Object {
-                      "path": "M1791 896L448.5 1671.09L448.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-up": Object {
-                      "path": "M1671.09 1343.5L120.91 1343.5L896 1z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "caret-right": Object {
-                      "path": "M 0 384.662 V 127.338 c 0 -17.818 21.543 -26.741 34.142 -14.142 l 128.662 128.662 c 7.81 7.81 7.81 20.474 0 28.284 L 34.142 398.804 C 21.543 411.404 0 402.48 0 384.662 Z",
-                      "viewbox": "0 0 192 512",
-                    },
-                    "check": Object {
-                      "path": "M249.2,431.2c-23,0-45.6,9.4-61.8,25.6L25.6,618.6C9.4,634.8,0,657.4,0,680.4c0,23,9.4,45.6,25.6,61.8 l593.1,593.1c16.2,16.2,38.8,25.6,61.8,25.6c23,0,45.6-9.4,61.8-25.6L1766.4,311c16.2-16.2,25.6-38.8,25.6-61.8 s-9.4-45.6-25.6-61.8L1604.5,25.6C1588.3,9.4,1565.8,0,1542.8,0c-23,0-45.6,9.4-61.8,25.6L680.4,827L311,456.3 C294.8,440.5,272.3,431.2,249.2,431.2z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "chevron-down": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "chevron-up": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "circle": Object {
-                      "path": "M1664 896q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "clipboard": Object {
-                      "path": "M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "desktop": Object {
-                      "path": "M1728 992v-832q0-13-9.5-22.5t-22.5-9.5h-1600q-13 0-22.5 9.5t-9.5 22.5v832q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5zm128-832v1088q0 66-47 113t-113 47h-544q0 37 16 77.5t32 71 16 43.5q0 26-19 45t-45 19h-512q-26 0-45-19t-19-45q0-14 16-44t32-70 16-78h-544q-66 0-113-47t-47-113v-1088q0-66 47-113t113-47h1600q66 0 113 47t47 113z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "edit": Object {
-                      "path": "M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "exclamation-triangle": Object {
-                      "path": "M1024 1375v-190q0-14-9.5-23.5T992 1152H800q-13 0-22.5 9.5T768 1185v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11H786q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17H128q-34 0-63.5-17T18 1601q-37-63-2-126L784 67q17-31 47-49t65-18 65 18 47 49z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "eye": Object {
-                      "path": "M1664 960q-152-236-381-353 61 104 61 225 0 185-131.5 316.5t-316.5 131.5-316.5-131.5-131.5-316.5q0-121 61-225-229 117-381 353 133 205 333.5 326.5t434.5 121.5 434.5-121.5 333.5-326.5zm-720-384q0-20-14-34t-34-14q-125 0-214.5 89.5t-89.5 214.5q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5t-499.5 138.5-499.5-139-376.5-368q-20-35-20-69t20-69q140-229 376.5-368t499.5-139 499.5 139 376.5 368q20 35 20 69z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "file-text": Object {
-                      "path": "M1596 380q28 28 48 76t20 88v1152q0 40-28 68t-68 28h-1344q-40 0-68-28t-28-68v-1600q0-40 28-68t68-28h896q40 0 88 20t76 48zm-444-244v376h376q-10-29-22-41l-313-313q-12-12-41-22zm384 1528v-1024h-416q-40 0-68-28t-28-68v-416h-768v1536h1280zm-1024-864q0-14 9-23t23-9h704q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64zm736 224q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704zm0 256q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "gear": Object {
-                      "path": "M1800 800h-218q-26 -107 -81 -193l154 -154l-210 -210l-154 154q-88 -55 -191 -79v-218h-300v218q-103 24 -191 79l-154 -154l-212 212l154 154q-55 88 -79 191h-218v297h217q23 101 80 194l-154 154l210 210l154 -154q85 54 193 81v218h300v-218q103 -24 191 -79 l154 154l212 -212l-154 -154q57 -93 80 -194h217v-297zM950 650q124 0 212 88t88 212t-88 212t-212 88t-212 -88t-88 -212t88 -212t212 -88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "key": Object {
-                      "path": "M832 512q0-80-56-136t-136-56-136 56-56 136q0 42 19 83-41-19-83-19-80 0-136 56t-56 136 56 136 136 56 136-56 56-136q0-42-19-83 41 19 83 19 80 0 136-56t56-136zm851 704q0 17-49 66t-66 49q-9 0-28.5-16t-36.5-33-38.5-40-24.5-26l-96 96 220 220q28 28 28 68 0 42-39 81t-81 39q-40 0-68-28l-671-671q-176 131-365 131-163 0-265.5-102.5t-102.5-265.5q0-160 95-313t248-248 313-95q163 0 265.5 102.5t102.5 265.5q0 189-131 365l355 355 96-96q-3-3-26-24.5t-40-38.5-33-36.5-16-28.5q0-17 49-66t66-49q13 0 23 10 6 6 46 44.5t82 79.5 86.5 86 73 78 28.5 41z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "list": Object {
-                      "path": "M384 1408q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm0-512q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm-1408-928q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm0-512v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "loading-spinner": Object {
-                      "CustomComponent": Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                          "isStatic": false,
-                          "rules": Array [
-                            "width:",
-                            [Function],
-                            ";height:",
-                            [Function],
-                            ";flex:none;animation:loadingSpinnerRotator 1.4s linear infinite;& .path{stroke:",
-                            [Function],
-                            ";stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:loadingSpinnerDash 1.4s ease-in-out infinite;}@keyframes loadingSpinnerRotator{0%{transform:rotate( 0deg );}100%{transform:rotate( 270deg );}}@keyframes loadingSpinnerDash{0%{stroke-dashoffset:187;}50%{stroke-dashoffset:47;transform:rotate( 135deg );}100%{stroke-dashoffset:187;transform:rotate( 450deg );}}",
-                          ],
-                        },
-                        "displayName": "SvgIcon__StyledSvgSpinner",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                        "target": "svg",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      },
-                      "path": Array [
-                        <circle
-                          className="path"
-                          cx="33"
-                          cy="33"
-                          fill="none"
-                          r="30"
-                          strokeLinecap="round"
-                          strokeWidth="6"
-                        />,
-                      ],
-                      "viewbox": "0 0 66 66",
-                    },
-                    "mobile": Object {
-                      "path": "M976 1408q0-33-23.5-56.5t-56.5-23.5-56.5 23.5-23.5 56.5 23.5 56.5 56.5 23.5 56.5-23.5 23.5-56.5zm208-160v-704q0-13-9.5-22.5t-22.5-9.5h-512q-13 0-22.5 9.5t-9.5 22.5v704q0 13 9.5 22.5t22.5 9.5h512q13 0 22.5-9.5t9.5-22.5zm-192-848q0-16-16-16h-160q-16 0-16 16t16 16h160q16 0 16-16zm288-16v1024q0 52-38 90t-90 38h-512q-52 0-90-38t-38-90v-1024q0-52 38-90t90-38h512q52 0 90 38t38 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "pencil-square": Object {
-                      "path": "M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus": Object {
-                      "path": "M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus-circle": Object {
-                      "path": "M1344 960v-128q0-26-19-45t-45-19h-256v-256q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v256h-256q-26 0-45 19t-19 45v128q0 26 19 45t45 19h256v256q0 26 19 45t45 19h128q26 0 45-19t19-45v-256h256q26 0 45-19t19-45zm320-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "question-circle": Object {
-                      "path": "M1024 1376v-192q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v192q0 14 9 23t23 9h192q14 0 23-9t9-23zm256-672q0-88-55.5-163t-138.5-116-170-41q-243 0-371 213-15 24 8 42l132 100q7 6 19 6 16 0 25-12 53-68 86-92 34-24 86-24 48 0 85.5 26t37.5 59q0 38-20 61t-68 45q-63 28-115.5 86.5t-52.5 125.5v36q0 14 9 23t23 9h192q14 0 23-9t9-23q0-19 21.5-49.5t54.5-49.5q32-18 49-28.5t46-35 44.5-48 28-60.5 12.5-81zm384 192q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "search": Object {
-                      "path": "M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "seo-score-bad": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M338.2 394.2C315.8 367.4 282.9 352 248 352s-67.8 15.4-90.2 42.2c-13.5 16.3-38.1-4.2-24.6-20.5C161.7 339.6 203.6 320 248 320 s86.3 19.6 114.7 53.8C376.3 390 351.7 410.5 338.2 394.2L338.2 394.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-good": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M362.8 346.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5c22.4 26.9 55.2 42.2 90.2 42.2 s67.8-15.4 90.2-42.2C351.6 309.5 376.3 329.9 362.8 346.2L362.8 346.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-none": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-ok": Object {
-                      "path": Array [
-                        <path
-                          d="M344 336c21.2 0 21.2 32 0 32H152c-21.2 0-21.2-32 0-32H344z"
-                          fill="#000000"
-                        />,
-                        <circle
-                          cx="328"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <circle
-                          cx="168"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <path
-                          d="M248 8c137 0 248 111 248 248S385 504 248 504S0 393 0 256S111 8 248 8z M360 208c0-17.7-14.3-32-32-32 s-32 14.3-32 32s14.3 32 32 32S360 225.7 360 208z M344 368c21.2 0 21.2-32 0-32H152c-21.2 0-21.2 32 0 32H344z M200 208 c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32S200 225.7 200 208z"
-                        />,
-                      ],
-                      "viewbox": "0 0 496 512",
-                    },
-                    "times": Object {
-                      "path": "M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "times-circle": Object {
-                      "path": "M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z",
-                      "viewbox": "0 0 20 20",
-                    },
-                  }
-                }
-                size="16px"
-              >
-                <createSvgIconComponent__StyledSvg
-                  aria-hidden={true}
-                  className="yoast-svg-icon yoast-svg-icon-edit"
-                  fill="currentColor"
-                  focusable="false"
-                  role="img"
-                  size="16px"
-                  viewBox="0 0 1792 1792"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <svg
-                    aria-hidden={true}
-                    className="yoast-svg-icon yoast-svg-icon-edit createSvgIconComponent__StyledSvg-sc-1h4gl3a-0 cPnaHk"
-                    fill="currentColor"
-                    focusable="false"
-                    role="img"
-                    size="16px"
-                    viewBox="0 0 1792 1792"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"
-                    />
-                  </svg>
-                </createSvgIconComponent__StyledSvg>
-              </SvgIconSet>
-            </SvgIcon>
-            Edit snippet
-          </button>
-        </StyledComponent>
-      </SnippetEditor__EditSnippetButton>
-      <SnippetEditorFields
-        activeField={null}
-        containerPadding="0 20px"
-        data={
-          Object {
-            "description": "Test description, %%replacement_variable%%",
-            "slug": "test-slug",
-            "title": "Test title",
-          }
-        }
-        descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here"
-        descriptionInputId="yoast-google-preview-description"
-        descriptionLengthProgress={
-          Object {
-            "actual": 42,
-            "max": 156,
-            "score": 6,
-          }
-        }
-        hoveredField={null}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        recommendedReplacementVariables={Array []}
-        replacementVariables={Array []}
-        slugInputId="yoast-google-preview-slug"
-        titleInputId="yoast-google-preview-title"
-        titleLengthProgress={
-          Object {
-            "actual": 0,
-            "max": 600,
-            "score": 1,
-          }
-        }
-      >
-        <SettingsSnippetEditorFields__StyledEditor
-          padding="0 20px"
-        >
-          <StyledComponent
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
-                  "isStatic": false,
-                  "lastClassName": "c16",
-                  "rules": Array [
-                    "padding:",
-                    [Function],
-                    ";",
-                  ],
-                },
-                "displayName": "SettingsSnippetEditorFields__StyledEditor",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
-                "target": "section",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
-              }
-            }
-            forwardedRef={null}
-            padding="0 20px"
-          >
-            <section
-              className="c16"
-            >
-              <ReplacementVariableEditorMock
-                content="Test title"
-                editorRef={[Function]}
-                fieldId="yoast-google-preview-title"
-                isActive={false}
-                isHovered={false}
-                label="SEO title"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                recommendedReplacementVariables={Array []}
-                replacementVariables={Array []}
-                type="title"
-                withCaret={true}
-              >
-                <div />
-              </ReplacementVariableEditorMock>
-              <ProgressBar
-                aria-hidden="true"
-                backgroundColor="#f7f7f7"
-                borderColor="#ddd"
-                max={600}
-                progressColor="#dc3232"
-                value={0}
-              >
-                <StyledComponent
-                  aria-hidden="true"
-                  backgroundColor="#f7f7f7"
-                  borderColor="#ddd"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "_foldedDefaultProps": Object {
-                        "aria-hidden": "true",
-                        "backgroundColor": "#f7f7f7",
-                        "borderColor": "#ddd",
-                        "max": 1,
-                        "progressColor": "#7ad03a",
-                        "value": 0,
-                      },
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ProgressBar-sc-9g9yx6-0",
-                        "isStatic": false,
-                        "lastClassName": "c21",
-                        "rules": Array [
-                          "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
-                          [Function],
-                          ";border:1px solid ",
-                          [Function],
-                          ";::-webkit-progress-bar{background-color:",
-                          [Function],
-                          ";}::-webkit-progress-value{background-color:",
-                          [Function],
-                          ";transition:width 250ms;}::-moz-progress-bar{background-color:",
-                          [Function],
-                          ";}::-ms-fill{background-color:",
-                          [Function],
-                          ";border:0;}",
-                        ],
-                      },
-                      "displayName": "ProgressBar",
-                      "foldedComponentIds": Array [],
-                      "propTypes": Object {
-                        "aria-hidden": [Function],
-                        "backgroundColor": [Function],
-                        "borderColor": [Function],
-                        "max": [Function],
-                        "progressColor": [Function],
-                        "value": [Function],
-                      },
-                      "render": [Function],
-                      "styledComponentId": "ProgressBar-sc-9g9yx6-0",
-                      "target": "progress",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  max={600}
-                  progressColor="#dc3232"
-                  value={0}
-                >
-                  <progress
-                    aria-hidden="true"
-                    className="c17"
-                    max={600}
-                    value={0}
-                  />
-                </StyledComponent>
-              </ProgressBar>
-              <Label__SimulatedLabel
-                id="snippet-editor-field-8-slug"
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "Label__SimulatedLabel-mitdcc-0",
-                        "isStatic": false,
-                        "lastClassName": "c18",
-                        "rules": Array [
-                          "flex:1 1 200px;min-width:200px;cursor:pointer;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;margin:4px 0;color:#303030;font-weight:500;",
-                        ],
-                      },
-                      "displayName": "Label__SimulatedLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "Label__SimulatedLabel-mitdcc-0",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  id="snippet-editor-field-8-slug"
-                  onClick={[Function]}
-                >
-                  <div
-                    className="c18"
-                    id="snippet-editor-field-8-slug"
-                    onClick={[Function]}
-                  >
-                    Slug
-                  </div>
-                </StyledComponent>
-              </Label__SimulatedLabel>
-              <helpers
-                isActive={false}
-                isHovered={false}
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        Object {},
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "helpers-sc-15q2ybx-0",
-                        "isStatic": false,
-                        "lastClassName": "c19",
-                        "rules": Array [
-                          "flex:0 1 100%;border:1px solid ",
-                          [Function],
-                          ";padding:3px 5px;box-sizing:border-box;box-shadow:",
-                          [Function],
-                          ";background-color:#fff;color:#32373c;outline:0;transition:50ms border-color ease-in-out;position:relative;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;font-size:14px;cursor:text;",
-                          "&::before{display:block;position:absolute;top:-1px;",
-                          [Function],
-                          ":-25px;width:24px;height:24px;background-image:url( ",
-                          [Function],
-                          " );background-size:25px;content:\\"\\";}",
-                        ],
-                      },
-                      "displayName": "helpers",
-                      "foldedComponentIds": Array [
-                        "InputContainer__VariableEditorInputContainer-sc-140v6lg-0",
-                      ],
-                      "render": [Function],
-                      "styledComponentId": "helpers-sc-15q2ybx-0",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  isActive={false}
-                  isHovered={false}
-                  onClick={[Function]}
-                >
-                  <div
-                    className="c19"
-                    onClick={[Function]}
-                  >
-                    <SnippetEditorFields__SlugInput
-                      aria-labelledby="snippet-editor-field-8-slug"
-                      id="yoast-google-preview-slug"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      value="test-slug"
-                    >
-                      <StyledComponent
-                        aria-labelledby="snippet-editor-field-8-slug"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
-                              "isStatic": false,
-                              "lastClassName": "c20",
-                              "rules": Array [
-                                "border:none;width:100%;height:inherit;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;&:focus{outline:0;}",
-                              ],
-                            },
-                            "displayName": "SnippetEditorFields__SlugInput",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
-                          }
-                        }
-                        forwardedRef={[Function]}
-                        id="yoast-google-preview-slug"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onFocus={[Function]}
-                        value="test-slug"
-                      >
-                        <input
-                          aria-labelledby="snippet-editor-field-8-slug"
-                          className="c20"
-                          id="yoast-google-preview-slug"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          value="test-slug"
-                        />
-                      </StyledComponent>
-                    </SnippetEditorFields__SlugInput>
-                  </div>
-                </StyledComponent>
-              </helpers>
-              <ReplacementVariableEditorMock
-                content="Test description, %%replacement_variable%%"
-                editorRef={[Function]}
-                fieldId="yoast-google-preview-description"
-                isActive={false}
-                isHovered={false}
-                label="Meta description"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                placeholder="Modify your meta description by editing it right here"
-                recommendedReplacementVariables={Array []}
-                replacementVariables={Array []}
-                type="description"
-                withCaret={true}
-              >
-                <div />
-              </ReplacementVariableEditorMock>
-              <ProgressBar
-                aria-hidden="true"
-                backgroundColor="#f7f7f7"
-                borderColor="#ddd"
-                max={156}
-                progressColor="#ee7c1b"
-                value={42}
-              >
-                <StyledComponent
-                  aria-hidden="true"
-                  backgroundColor="#f7f7f7"
-                  borderColor="#ddd"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "_foldedDefaultProps": Object {
-                        "aria-hidden": "true",
-                        "backgroundColor": "#f7f7f7",
-                        "borderColor": "#ddd",
-                        "max": 1,
-                        "progressColor": "#7ad03a",
-                        "value": 0,
-                      },
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ProgressBar-sc-9g9yx6-0",
-                        "isStatic": false,
-                        "lastClassName": "c21",
-                        "rules": Array [
-                          "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
-                          [Function],
-                          ";border:1px solid ",
-                          [Function],
-                          ";::-webkit-progress-bar{background-color:",
-                          [Function],
-                          ";}::-webkit-progress-value{background-color:",
-                          [Function],
-                          ";transition:width 250ms;}::-moz-progress-bar{background-color:",
-                          [Function],
-                          ";}::-ms-fill{background-color:",
-                          [Function],
-                          ";border:0;}",
-                        ],
-                      },
-                      "displayName": "ProgressBar",
-                      "foldedComponentIds": Array [],
-                      "propTypes": Object {
-                        "aria-hidden": [Function],
-                        "backgroundColor": [Function],
-                        "borderColor": [Function],
-                        "max": [Function],
-                        "progressColor": [Function],
-                        "value": [Function],
-                      },
-                      "render": [Function],
-                      "styledComponentId": "ProgressBar-sc-9g9yx6-0",
-                      "target": "progress",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  max={156}
-                  progressColor="#ee7c1b"
-                  value={42}
-                >
-                  <progress
-                    aria-hidden="true"
-                    className="c21"
-                    max={156}
-                    value={42}
-                  />
-                </StyledComponent>
-              </ProgressBar>
-            </section>
-          </StyledComponent>
-        </SettingsSnippetEditorFields__StyledEditor>
-      </SnippetEditorFields>
-      <SnippetEditor__CloseEditorButton
-        activeBackgroundColor="#f7f7f7"
-        activeBorderColor="#000"
-        activeColor="#000"
-        backgroundColor="#f7f7f7"
-        borderColor="#ccc"
-        boxShadowColor="#ccc"
-        focusBackgroundColor="#fff"
-        focusBorderColor="#0066cd"
-        focusBoxShadowColor="#084a67"
-        focusColor="#000"
-        hoverBackgroundColor="#fff"
-        hoverColor="#000"
-        onClick={[Function]}
-        textColor="#555"
-        type="button"
-      >
-        <StyledComponent
-          activeBackgroundColor="#f7f7f7"
-          activeBorderColor="#000"
-          activeColor="#000"
-          backgroundColor="#f7f7f7"
-          borderColor="#ccc"
-          boxShadowColor="#ccc"
-          focusBackgroundColor="#fff"
-          focusBorderColor="#0066cd"
-          focusBoxShadowColor="#084a67"
-          focusColor="#000"
-          forwardedComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "_foldedDefaultProps": Object {
-                "activeBackgroundColor": "#f7f7f7",
-                "activeBorderColor": "#000",
-                "activeColor": "#000",
-                "backgroundColor": "#f7f7f7",
-                "borderColor": "#ccc",
-                "boxShadowColor": "#ccc",
-                "focusBackgroundColor": "#fff",
-                "focusBorderColor": "#0066cd",
-                "focusBoxShadowColor": "#084a67",
-                "focusColor": "#000",
-                "hoverBackgroundColor": "#fff",
-                "hoverColor": "#000",
-                "textColor": "#555",
-                "type": "button",
-              },
-              "attrs": Array [],
-              "componentStyle": ComponentStyle {
-                "componentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
-                "isStatic": false,
-                "lastClassName": "c22",
-                "rules": Array [
-                  "color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";background:",
-                  [Function],
-                  ";box-shadow:0 1px 0 ",
-                  [Function],
-                  ";",
-                  "&:active{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";box-shadow:inset 0 2px 5px -3px ",
-                  [Function],
-                  "}",
-                  "&::-moz-focus-inner{border-width:0;}&:focus{outline:none;border-color:",
-                  [Function],
-                  ";color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";box-shadow:0 0 3px ",
-                  [Function],
-                  "}",
-                  "&:hover{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:var(--yoast-color-border--default);}",
-                  "display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-width:",
-                  "1px",
-                  ";border-style:solid;margin:0;padding:",
-                  "4px",
-                  " 10px;border-radius:3px;cursor:pointer;box-sizing:border-box;font-size:inherit;font-family:inherit;font-weight:inherit;text-align:",
-                  [Function],
-                  ";overflow:visible;min-height:",
-                  "32px",
-                  ";transition:var(--yoast-transition-default);svg{align-self:center;}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){::after{display:inline-block;content:\\"\\";min-height:",
-                  "22px",
-                  ";}}",
-                  "height:33px;border:1px solid #dbdbdb;box-shadow:none;font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;",
-                  "margin-top:24px;",
-                ],
-              },
-              "displayName": "SnippetEditor__CloseEditorButton",
-              "foldedComponentIds": Array [
-                "Button__BaseButton-sc-32rbq-4",
-                "Button-sc-32rbq-3",
-                "Button-sc-32rbq-1",
-                "Button-sc-32rbq-2",
-                "Button-sc-32rbq-0",
-                "SnippetEditor__SnippetEditorButton-sc-144bmm3-0",
-              ],
-              "propTypes": Object {
-                "activeBackgroundColor": [Function],
-                "activeBorderColor": [Function],
-                "activeColor": [Function],
-                "backgroundColor": [Function],
-                "borderColor": [Function],
-                "boxShadowColor": [Function],
-                "focusBackgroundColor": [Function],
-                "focusBorderColor": [Function],
-                "focusBoxShadowColor": [Function],
-                "focusColor": [Function],
-                "hoverBackgroundColor": [Function],
-                "hoverColor": [Function],
-                "textColor": [Function],
-                "type": [Function],
-              },
-              "render": [Function],
-              "styledComponentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
-              "target": "button",
-              "toString": [Function],
-              "warnTooManyClasses": [Function],
-              "withComponent": [Function],
-            }
-          }
-          forwardedRef={null}
-          hoverBackgroundColor="#fff"
-          hoverColor="#000"
-          onClick={[Function]}
-          textColor="#555"
-          type="button"
-        >
-          <button
-            className="c22"
-            onClick={[Function]}
-            type="button"
-          >
-            Close snippet editor
-          </button>
-        </StyledComponent>
-      </SnippetEditor__CloseEditorButton>
-    </div>
-  </ErrorBoundary>
-</SnippetEditor>
-`;
-
-exports[`SnippetEditor highlights a focused field 1`] = `
-.c14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c4 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c11 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c12 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c13 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c6 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c7 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c9 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c10 {
-  color: #3c4043;
-}
-
-.c14 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c14:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c5 {
-  padding: 12px 16px;
-}
-
-.c5:first-child {
-  margin-bottom: -16px;
-}
-
-.c8 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-.c0 {
-  border: 0;
-  padding: 0;
-  margin: 0 0 16px;
-}
-
-.c1 {
-  margin: 8px 0;
-  padding: 0;
-  color: #555;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.c3 {
-  margin-right: 16px;
-  color: inherit;
-  font-size: 14px;
-  line-height: 1.71428571;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c2.c2 {
-  margin: 0 8px 0 0;
-  cursor: pointer;
-}
-
-.c15 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin: 10px 0 0 4px;
-  fill: #555;
-  padding-left: 8px;
-}
-
-.c15:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c15::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c15:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c15:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c15 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c15 svg {
-  margin-right: 7px;
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c15::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-<div>
-  <fieldset
-    className="c0"
-  >
-    <legend
-      className="c1"
-    >
-      Preview as:
-    </legend>
-    <input
-      autoComplete={undefined}
-      checked={true}
-      className="c2"
-      defaultValue="mobile"
-      id="yoast-google-preview-mode-mobile"
-      name="screen"
-      onChange={[Function]}
-      type="radio"
-    />
-    <label
-      className="c3"
-      htmlFor="yoast-google-preview-mode-mobile"
-    >
-      Mobile result
-    </label>
-    <input
-      autoComplete={undefined}
-      checked={false}
-      className="c2"
-      defaultValue="desktop"
-      id="yoast-google-preview-mode-desktop"
-      name="screen"
-      onChange={[Function]}
-      type="radio"
-    />
-    <label
-      className="c3"
-      htmlFor="yoast-google-preview-mode-desktop"
-    >
-      Desktop result
-    </label>
-  </fieldset>
-  <section>
-    <div
-      className="c4"
-      id="yoast-snippet-preview-container"
-      width={null}
-    >
-      <div
-        className="c5"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c6"
-        >
-          <div
-            className="c7"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <img
-              alt=""
-              className="c8"
-              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-            />
-            <span
-              className="c9"
-            >
-              <span
-                className="c10"
-              >
-                example.org
-              </span>
-               › test-slug
-            </span>
-          </div>
-        </div>
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c12"
-          >
-            <span
-              className="c13"
-            >
-              Test title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="c5 yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-      <div
-        className="c5"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c14"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c14"
-          >
-            
-            
-            Test description, %%replacement_variable%%
-          </div>
-        </div>
-      </div>
-      <div
-        className="c5 yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        <div
-          className="c14"
-        >
-          
-          
-          
-        </div>
-      </div>
-    </div>
-  </section>
-  <button
-    aria-expanded={false}
-    className="c15"
-    onClick={[Function]}
-    type="button"
-  >
-    <svg
-      aria-hidden={true}
-      className="yoast-svg-icon yoast-svg-icon-edit createSvgIconComponent__StyledSvg-sc-1h4gl3a-0 cPnaHk"
-      fill="currentColor"
-      focusable="false"
-      role="img"
-      size="16px"
-      viewBox="0 0 1792 1792"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"
-      />
-    </svg>
-    Edit snippet
-  </button>
-</div>
-`;
-
-exports[`SnippetEditor highlights a hovered field 1`] = `
-.c14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c4 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c11 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c12 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c13 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c6 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c7 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c9 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c10 {
-  color: #3c4043;
-}
-
-.c14 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c14:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c5 {
-  padding: 12px 16px;
-}
-
-.c5:first-child {
-  margin-bottom: -16px;
-}
-
-.c8 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-.c0 {
-  border: 0;
-  padding: 0;
-  margin: 0 0 16px;
-}
-
-.c1 {
-  margin: 8px 0;
-  padding: 0;
-  color: #555;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.c3 {
-  margin-right: 16px;
-  color: inherit;
-  font-size: 14px;
-  line-height: 1.71428571;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c2.c2 {
-  margin: 0 8px 0 0;
-  cursor: pointer;
-}
-
-.c15 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin: 10px 0 0 4px;
-  fill: #555;
-  padding-left: 8px;
-}
-
-.c15:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c15::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c15:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c15:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c15 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c15 svg {
-  margin-right: 7px;
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c15::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-<div>
-  <fieldset
-    className="c0"
-  >
-    <legend
-      className="c1"
-    >
-      Preview as:
-    </legend>
-    <input
-      autoComplete={undefined}
-      checked={true}
-      className="c2"
-      defaultValue="mobile"
-      id="yoast-google-preview-mode-mobile"
-      name="screen"
-      onChange={[Function]}
-      type="radio"
-    />
-    <label
-      className="c3"
-      htmlFor="yoast-google-preview-mode-mobile"
-    >
-      Mobile result
-    </label>
-    <input
-      autoComplete={undefined}
-      checked={false}
-      className="c2"
-      defaultValue="desktop"
-      id="yoast-google-preview-mode-desktop"
-      name="screen"
-      onChange={[Function]}
-      type="radio"
-    />
-    <label
-      className="c3"
-      htmlFor="yoast-google-preview-mode-desktop"
-    >
-      Desktop result
-    </label>
-  </fieldset>
-  <section>
-    <div
-      className="c4"
-      id="yoast-snippet-preview-container"
-      width={null}
-    >
-      <div
-        className="c5"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c6"
-        >
-          <div
-            className="c7"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <img
-              alt=""
-              className="c8"
-              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-            />
-            <span
-              className="c9"
-            >
-              <span
-                className="c10"
-              >
-                example.org
-              </span>
-               › test-slug
-            </span>
-          </div>
-        </div>
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c12"
-          >
-            <span
-              className="c13"
-            >
-              Test title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="c5 yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-      <div
-        className="c5"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c14"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c14"
-          >
-            
-            
-            Test description, %%replacement_variable%%
-          </div>
-        </div>
-      </div>
-      <div
-        className="c5 yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        <div
-          className="c14"
-        >
-          
-          
-          
-        </div>
-      </div>
-    </div>
-  </section>
-  <button
-    aria-expanded={false}
-    className="c15"
-    onClick={[Function]}
-    type="button"
-  >
-    <svg
-      aria-hidden={true}
-      className="yoast-svg-icon yoast-svg-icon-edit createSvgIconComponent__StyledSvg-sc-1h4gl3a-0 cPnaHk"
-      fill="currentColor"
-      focusable="false"
-      role="img"
-      size="16px"
-      viewBox="0 0 1792 1792"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"
-      />
-    </svg>
-    Edit snippet
-  </button>
-</div>
-`;
-
-exports[`SnippetEditor highlights the active ReplacementVariableEditor when calling setFieldFocus 1`] = `
-.c19 {
-  -webkit-flex: 1 1 200px;
-  -ms-flex: 1 1 200px;
-  flex: 1 1 200px;
-  min-width: 200px;
-  cursor: pointer;
-  font-size: 14px;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  margin: 4px 0;
-  color: #303030;
-  font-weight: 500;
-}
-
-.c18 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c18::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c18::-webkit-progress-value {
-  background-color: #dc3232;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c18::-moz-progress-bar {
-  background-color: #dc3232;
-}
-
-.c18::-ms-fill {
-  background-color: #dc3232;
-  border: 0;
-}
-
-.c22 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c22::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c22::-webkit-progress-value {
-  background-color: #ee7c1b;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c22::-moz-progress-bar {
-  background-color: #ee7c1b;
-}
-
-.c22::-ms-fill {
-  background-color: #ee7c1b;
-  border: 0;
-}
-
-.c17 {
-  padding: 0 20px;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c4 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c11 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c12 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c13 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c6 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c7 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c9 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c10 {
-  color: #3c4043;
-}
-
-.c15 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c15:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c5 {
-  padding: 12px 16px;
-}
-
-.c5:first-child {
-  margin-bottom: -16px;
-}
-
-.c8 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-.c21 {
-  border: none;
-  width: 100%;
-  height: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-}
-
-.c21:focus {
-  outline: 0;
-}
-
-.c20 {
-  -webkit-flex: 0 1 100%;
-  -ms-flex: 0 1 100%;
-  flex: 0 1 100%;
-  border: 1px solid #ddd;
-  padding: 3px 5px;
-  box-sizing: border-box;
-  box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
-  background-color: #fff;
-  color: #32373c;
-  outline: 0;
-  -webkit-transition: 50ms border-color ease-in-out;
-  transition: 50ms border-color ease-in-out;
-  position: relative;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-size: 14px;
-  cursor: text;
-}
-
-.c20::before {
-  display: block;
-  position: absolute;
-  top: -1px;
-  left: -25px;
-  width: 24px;
-  height: 24px;
-  background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22transparent%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
-  background-size: 25px;
-  content: "";
-}
-
-.c0 {
-  border: 0;
-  padding: 0;
-  margin: 0 0 16px;
-}
-
-.c1 {
-  margin: 8px 0;
-  padding: 0;
-  color: #555;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.c3 {
-  margin-right: 16px;
-  color: inherit;
-  font-size: 14px;
-  line-height: 1.71428571;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c2.c2 {
-  margin: 0 8px 0 0;
-  cursor: pointer;
-}
-
-.c16 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin: 10px 0 0 4px;
-  fill: #555;
-  padding-left: 8px;
-}
-
-.c16:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c16::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c16:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c16:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c16 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c16 svg {
-  margin-right: 7px;
-}
-
-.c23 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin-top: 24px;
-}
-
-.c23:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c23::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c23:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c23:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c23 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c14 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c14:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c14::before {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: -40px;
-  width: 22px;
-  height: 22px;
-  background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23555%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
-  background-size: 24px;
-  background-repeat: no-repeat;
-  background-position: center;
-  content: "";
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c16::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c23::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-<SnippetEditor
-  baseUrl="http://example.org/"
-  data={
-    Object {
-      "description": "Test description, %%replacement_variable%%",
-      "slug": "test-slug",
-      "title": "Test title",
-    }
-  }
-  date=""
-  descriptionEditorFieldPlaceholder=""
-  descriptionLengthProgress={
-    Object {
-      "actual": 0,
-      "max": 156,
-      "score": 0,
-    }
-  }
-  faviconSrc=""
-  hasPaperStyle={true}
-  idSuffix=""
-  keyword=""
-  locale="en"
-  mapEditorDataToPreview={null}
-  mobileImageSrc=""
-  mode="mobile"
-  onChange={[Function]}
-  onChangeAnalysisData={[Function]}
-  recommendedReplacementVariables={Array []}
-  replacementVariables={Array []}
-  shoppingData={Object {}}
-  showCloseButton={true}
-  titleLengthProgress={
-    Object {
-      "actual": 0,
-      "max": 600,
-      "score": 0,
-    }
-  }
-  wordsToHighlight={Array []}
->
-  <ErrorBoundary>
-    <div>
-      <ModeSwitcher
-        active="mobile"
-        desktopModeInputId="yoast-google-preview-mode-desktop"
-        mobileModeInputId="yoast-google-preview-mode-mobile"
-        onChange={[Function]}
-      >
-        <ModeSwitcher__Switcher>
-          <StyledComponent
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                  "isStatic": false,
-                  "lastClassName": "c0",
-                  "rules": Array [
-                    "border:0;padding:0;margin:0 0 16px;",
-                  ],
-                },
-                "displayName": "ModeSwitcher__Switcher",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                "target": "fieldset",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
-              }
-            }
-            forwardedRef={null}
-          >
-            <fieldset
-              className="c0"
-            >
-              <ModeSwitcher__SwitcherTitle>
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                        "isStatic": false,
-                        "lastClassName": "c1",
-                        "rules": Array [
-                          "margin:8px 0;padding:0;color:",
-                          "#555",
-                          ";font-size:14px;font-weight:600;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__SwitcherTitle",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                      "target": "legend",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <legend
-                    className="c1"
-                  >
-                    Preview as:
-                  </legend>
-                </StyledComponent>
-              </ModeSwitcher__SwitcherTitle>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": true,
-                    "id": "yoast-google-preview-mode-mobile",
-                  }
-                }
-                type="radio"
-                value="mobile"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": true,
-                      "id": "yoast-google-preview-mode-mobile",
-                    }
-                  }
-                  type="radio"
-                  value="mobile"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": true,
-                        "id": "yoast-google-preview-mode-mobile",
-                      }
-                    }
-                    type="radio"
-                    value="mobile"
-                  >
-                    <input
-                      checked={true}
-                      className="c2"
-                      defaultValue="mobile"
-                      id="yoast-google-preview-mode-mobile"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-mobile"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-mobile"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-mobile"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-mobile"
-                    >
-                      Mobile result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": false,
-                    "id": "yoast-google-preview-mode-desktop",
-                  }
-                }
-                type="radio"
-                value="desktop"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": false,
-                      "id": "yoast-google-preview-mode-desktop",
-                    }
-                  }
-                  type="radio"
-                  value="desktop"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": false,
-                        "id": "yoast-google-preview-mode-desktop",
-                      }
-                    }
-                    type="radio"
-                    value="desktop"
-                  >
-                    <input
-                      checked={false}
-                      className="c2"
-                      defaultValue="desktop"
-                      id="yoast-google-preview-mode-desktop"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-desktop"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-desktop"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-desktop"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-desktop"
-                    >
-                      Desktop result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-            </fieldset>
-          </StyledComponent>
-        </ModeSwitcher__Switcher>
-      </ModeSwitcher>
-      <SnippetPreview
-        activeField="description"
-        breadcrumbs={null}
-        date=""
-        description="Test description, %%replacement_variable%%"
-        faviconSrc=""
-        hoveredField={null}
-        isAmp={false}
-        keyword=""
-        locale="en"
-        mobileImageSrc=""
-        mode="mobile"
-        onHover={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-        shoppingData={Object {}}
-        title="Test title"
-        url="http://example.org/test-slug"
-        wordsToHighlight={Array []}
-      >
-        <section>
-          <SnippetPreview__MobileContainer
-            id="yoast-snippet-preview-container"
-            padding={20}
-            width={null}
-          >
-            <StyledComponent
-              forwardedComponent={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "attrs": Array [],
-                  "componentStyle": ComponentStyle {
-                    "componentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                    "isStatic": false,
-                    "lastClassName": "c4",
-                    "rules": Array [
-                      "border-bottom:1px hidden #fff;border-radius:8px;box-shadow:0 1px 6px rgba(32,33,36,0.28);font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;max-width:",
-                      "400",
-                      "px;box-sizing:border-box;font-size:14px;",
-                    ],
-                  },
-                  "displayName": "SnippetPreview__MobileContainer",
-                  "foldedComponentIds": Array [],
-                  "render": [Function],
-                  "styledComponentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                  "target": "div",
-                  "toString": [Function],
-                  "warnTooManyClasses": [Function],
-                  "withComponent": [Function],
-                }
-              }
-              forwardedRef={null}
-              id="yoast-snippet-preview-container"
-              padding={20}
-              width={null}
-            >
-              <div
-                className="c4"
-                id="yoast-snippet-preview-container"
-                width={null}
-              >
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Url preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseUrl>
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                "isStatic": false,
-                                "lastClassName": "c6",
-                                "rules": Array [
-                                  "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseUrl",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                        >
-                          <div
-                            className="c6"
-                          >
-                            <SnippetPreview__BaseUrlOverflowContainer
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseUp={[Function]}
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                      "isStatic": false,
-                                      "lastClassName": "c7",
-                                      "rules": Array [
-                                        "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                        "overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-bottom:",
-                                        [Function],
-                                        ";padding-top:1px;line-height:",
-                                        [Function],
-                                        ";vertical-align:",
-                                        [Function],
-                                        ";",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__BaseUrlOverflowContainer",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                onMouseUp={[Function]}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c7"
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  onMouseUp={[Function]}
-                                >
-                                  <SnippetPreview__Favicon
-                                    alt=""
-                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                  >
-                                    <StyledComponent
-                                      alt=""
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                            "isStatic": false,
-                                            "lastClassName": "c8",
-                                            "rules": Array [
-                                              "width:16px;height:16px;margin-right:12px;vertical-align:middle;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__Favicon",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                          "target": "img",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                    >
-                                      <img
-                                        alt=""
-                                        className="c8"
-                                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                      />
-                                    </StyledComponent>
-                                  </SnippetPreview__Favicon>
-                                  <SnippetPreview__UrlContentContainer
-                                    screenMode="mobile"
-                                  >
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                            "isStatic": false,
-                                            "lastClassName": "c9",
-                                            "rules": Array [
-                                              "font-size:",
-                                              [Function],
-                                              ";line-height:",
-                                              [Function],
-                                              ";color:",
-                                              [Function],
-                                              ";",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__UrlContentContainer",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      screenMode="mobile"
-                                    >
-                                      <span
-                                        className="c9"
-                                      >
-                                        <SnippetPreview__UrlBaseContainer>
-                                          <StyledComponent
-                                            forwardedComponent={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "attrs": Array [],
-                                                "componentStyle": ComponentStyle {
-                                                  "componentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                  "isStatic": false,
-                                                  "lastClassName": "c10",
-                                                  "rules": Array [
-                                                    "color:",
-                                                    [Function],
-                                                    ";",
-                                                  ],
-                                                },
-                                                "displayName": "SnippetPreview__UrlBaseContainer",
-                                                "foldedComponentIds": Array [],
-                                                "render": [Function],
-                                                "styledComponentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                "target": "span",
-                                                "toString": [Function],
-                                                "warnTooManyClasses": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            forwardedRef={null}
-                                          >
-                                            <span
-                                              className="c10"
-                                            >
-                                              example.org
-                                            </span>
-                                          </StyledComponent>
-                                        </SnippetPreview__UrlBaseContainer>
-                                         › test-slug
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__UrlContentContainer>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__BaseUrlOverflowContainer>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseUrl>
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          SEO title preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseTitle
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                                "isStatic": false,
-                                "lastClassName": "c11",
-                                "rules": Array [
-                                  "cursor:pointer;position:relative;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseTitle",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c11"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__TitleBounded
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                      "isStatic": false,
-                                      "lastClassName": "c12",
-                                      "rules": Array [
-                                        "color:",
-                                        [Function],
-                                        ";text-decoration:none;font-size:",
-                                        [Function],
-                                        ";line-height:",
-                                        [Function],
-                                        ";font-weight:normal;margin:0;display:inline-block;overflow:hidden;max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                        "max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__TitleBounded",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__Title-sc-1hxg8jo-4",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c12"
-                                >
-                                  <SnippetPreview__TitleUnboundedMobile>
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                            "isStatic": false,
-                                            "lastClassName": "c13",
-                                            "rules": Array [
-                                              "display:inline-block;max-height:40px;padding-top:1px;vertical-align:top;overflow:hidden;text-overflow:ellipsis;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__TitleUnboundedMobile",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={[Function]}
-                                    >
-                                      <span
-                                        className="c13"
-                                      >
-                                        Test title
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__TitleUnboundedMobile>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__TitleBounded>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseTitle>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--desktop"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--desktop"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--desktop"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Meta description preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview
-                        isDescriptionPlaceholder={false}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview-sc-1hxg8jo-3",
-                                "isStatic": false,
-                                "lastClassName": "c14",
-                                "rules": Array [
-                                  "color:",
-                                  "#3c4043",
-                                  ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                  "600",
-                                  "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                  "&::before{display:block;position:absolute;top:0;",
-                                  [Function],
-                                  ":",
-                                  [Function],
-                                  ";width:22px;height:22px;background-image:url( ",
-                                  [Function],
-                                  " );background-size:24px;background-repeat:no-repeat;background-position:center;content:\\"\\";}",
-                                ],
-                              },
-                              "displayName": "SnippetPreview",
-                              "foldedComponentIds": Array [
-                                "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                              ],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview-sc-1hxg8jo-3",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          isDescriptionPlaceholder={false}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c14"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__MobileDescription
-                              isDescriptionPlaceholder={false}
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                      "isStatic": false,
-                                      "lastClassName": "c15",
-                                      "rules": Array [
-                                        "color:",
-                                        "#3c4043",
-                                        ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                        "600",
-                                        "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__MobileDescription",
-                                    "foldedComponentIds": Array [],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={[Function]}
-                                isDescriptionPlaceholder={false}
-                              >
-                                <div
-                                  className="c15"
-                                >
-                                  Test description, %%replacement_variable%%
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__MobileDescription>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--mobile"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--mobile"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--mobile"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                      <ProductDataMobile
-                        shoppingData={Object {}}
-                      >
-                        <ProductDataMobile__ProductData>
-                          <StyledComponent
-                            forwardedComponent={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "attrs": Array [],
-                                "componentStyle": ComponentStyle {
-                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                  "isStatic": false,
-                                  "lastClassName": "c15",
-                                  "rules": Array [
-                                    "display:flex;",
-                                  ],
-                                },
-                                "displayName": "ProductDataMobile__ProductData",
-                                "foldedComponentIds": Array [],
-                                "render": [Function],
-                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                "target": "div",
-                                "toString": [Function],
-                                "warnTooManyClasses": [Function],
-                                "withComponent": [Function],
-                              }
-                            }
-                            forwardedRef={null}
-                          >
-                            <div
-                              className="c15"
-                            />
-                          </StyledComponent>
-                        </ProductDataMobile__ProductData>
-                      </ProductDataMobile>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-              </div>
-            </StyledComponent>
-          </SnippetPreview__MobileContainer>
-        </section>
-      </SnippetPreview>
-      <SnippetEditor__EditSnippetButton
-        activeBackgroundColor="#f7f7f7"
-        activeBorderColor="#000"
-        activeColor="#000"
-        aria-expanded={true}
-        backgroundColor="#f7f7f7"
-        borderColor="#ccc"
-        boxShadowColor="#ccc"
-        focusBackgroundColor="#fff"
-        focusBorderColor="#0066cd"
-        focusBoxShadowColor="#084a67"
-        focusColor="#000"
-        hoverBackgroundColor="#fff"
-        hoverColor="#000"
-        onClick={[Function]}
-        textColor="#555"
-        type="button"
-      >
-        <StyledComponent
-          activeBackgroundColor="#f7f7f7"
-          activeBorderColor="#000"
-          activeColor="#000"
-          aria-expanded={true}
-          backgroundColor="#f7f7f7"
-          borderColor="#ccc"
-          boxShadowColor="#ccc"
-          focusBackgroundColor="#fff"
-          focusBorderColor="#0066cd"
-          focusBoxShadowColor="#084a67"
-          focusColor="#000"
-          forwardedComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "_foldedDefaultProps": Object {
-                "activeBackgroundColor": "#f7f7f7",
-                "activeBorderColor": "#000",
-                "activeColor": "#000",
-                "backgroundColor": "#f7f7f7",
-                "borderColor": "#ccc",
-                "boxShadowColor": "#ccc",
-                "focusBackgroundColor": "#fff",
-                "focusBorderColor": "#0066cd",
-                "focusBoxShadowColor": "#084a67",
-                "focusColor": "#000",
-                "hoverBackgroundColor": "#fff",
-                "hoverColor": "#000",
-                "textColor": "#555",
-                "type": "button",
-              },
-              "attrs": Array [],
-              "componentStyle": ComponentStyle {
-                "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-                "isStatic": false,
-                "lastClassName": "c16",
-                "rules": Array [
-                  "color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";background:",
-                  [Function],
-                  ";box-shadow:0 1px 0 ",
-                  [Function],
-                  ";",
-                  "&:active{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";box-shadow:inset 0 2px 5px -3px ",
-                  [Function],
-                  "}",
-                  "&::-moz-focus-inner{border-width:0;}&:focus{outline:none;border-color:",
-                  [Function],
-                  ";color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";box-shadow:0 0 3px ",
-                  [Function],
-                  "}",
-                  "&:hover{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:var(--yoast-color-border--default);}",
-                  "display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-width:",
-                  "1px",
-                  ";border-style:solid;margin:0;padding:",
-                  "4px",
-                  " 10px;border-radius:3px;cursor:pointer;box-sizing:border-box;font-size:inherit;font-family:inherit;font-weight:inherit;text-align:",
-                  [Function],
-                  ";overflow:visible;min-height:",
-                  "32px",
-                  ";transition:var(--yoast-transition-default);svg{align-self:center;}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){::after{display:inline-block;content:\\"\\";min-height:",
-                  "22px",
-                  ";}}",
-                  "height:33px;border:1px solid #dbdbdb;box-shadow:none;font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;",
-                  "margin:",
-                  [Function],
-                  ";fill:",
-                  "#555",
-                  ";padding-left:8px;& svg{",
-                  [Function],
-                  ":7px;}",
-                ],
-              },
-              "displayName": "SnippetEditor__EditSnippetButton",
-              "foldedComponentIds": Array [
-                "Button__BaseButton-sc-32rbq-4",
-                "Button-sc-32rbq-3",
-                "Button-sc-32rbq-1",
-                "Button-sc-32rbq-2",
-                "Button-sc-32rbq-0",
-                "SnippetEditor__SnippetEditorButton-sc-144bmm3-0",
-              ],
-              "propTypes": Object {
-                "activeBackgroundColor": [Function],
-                "activeBorderColor": [Function],
-                "activeColor": [Function],
-                "backgroundColor": [Function],
-                "borderColor": [Function],
-                "boxShadowColor": [Function],
-                "focusBackgroundColor": [Function],
-                "focusBorderColor": [Function],
-                "focusBoxShadowColor": [Function],
-                "focusColor": [Function],
-                "hoverBackgroundColor": [Function],
-                "hoverColor": [Function],
-                "textColor": [Function],
-                "type": [Function],
-              },
-              "render": [Function],
-              "styledComponentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-              "target": "button",
-              "toString": [Function],
-              "warnTooManyClasses": [Function],
-              "withComponent": [Function],
-            }
-          }
-          forwardedRef={[Function]}
-          hoverBackgroundColor="#fff"
-          hoverColor="#000"
-          onClick={[Function]}
-          textColor="#555"
-          type="button"
-        >
-          <button
-            aria-expanded={true}
-            className="c16"
-            onClick={[Function]}
-            type="button"
-          >
-            <SvgIcon
-              className=""
-              color="currentColor"
-              icon="edit"
-              size="16px"
-            >
-              <SvgIconSet
-                className=""
-                color="currentColor"
-                icon="edit"
-                iconSet={
-                  Object {
-                    "alert-error": Object {
-                      "path": "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-info": Object {
-                      "path": "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-success": Object {
-                      "path": "M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-warning": Object {
-                      "path": "M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z",
-                      "viewbox": "0 0 576 512",
-                    },
-                    "angle-down": Object {
-                      "path": "M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-left": Object {
-                      "path": "M1203 544q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-right": Object {
-                      "path": "M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-up": Object {
-                      "path": "M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-down": Object {
-                      "path": "M896 1791L120.91 448.5L1671.09 448.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-left": Object {
-                      "path": "M1343.5 1671.09L1 896L1343.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-right": Object {
-                      "path": "M1791 896L448.5 1671.09L448.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-up": Object {
-                      "path": "M1671.09 1343.5L120.91 1343.5L896 1z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "caret-right": Object {
-                      "path": "M 0 384.662 V 127.338 c 0 -17.818 21.543 -26.741 34.142 -14.142 l 128.662 128.662 c 7.81 7.81 7.81 20.474 0 28.284 L 34.142 398.804 C 21.543 411.404 0 402.48 0 384.662 Z",
-                      "viewbox": "0 0 192 512",
-                    },
-                    "check": Object {
-                      "path": "M249.2,431.2c-23,0-45.6,9.4-61.8,25.6L25.6,618.6C9.4,634.8,0,657.4,0,680.4c0,23,9.4,45.6,25.6,61.8 l593.1,593.1c16.2,16.2,38.8,25.6,61.8,25.6c23,0,45.6-9.4,61.8-25.6L1766.4,311c16.2-16.2,25.6-38.8,25.6-61.8 s-9.4-45.6-25.6-61.8L1604.5,25.6C1588.3,9.4,1565.8,0,1542.8,0c-23,0-45.6,9.4-61.8,25.6L680.4,827L311,456.3 C294.8,440.5,272.3,431.2,249.2,431.2z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "chevron-down": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "chevron-up": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "circle": Object {
-                      "path": "M1664 896q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "clipboard": Object {
-                      "path": "M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "desktop": Object {
-                      "path": "M1728 992v-832q0-13-9.5-22.5t-22.5-9.5h-1600q-13 0-22.5 9.5t-9.5 22.5v832q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5zm128-832v1088q0 66-47 113t-113 47h-544q0 37 16 77.5t32 71 16 43.5q0 26-19 45t-45 19h-512q-26 0-45-19t-19-45q0-14 16-44t32-70 16-78h-544q-66 0-113-47t-47-113v-1088q0-66 47-113t113-47h1600q66 0 113 47t47 113z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "edit": Object {
-                      "path": "M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "exclamation-triangle": Object {
-                      "path": "M1024 1375v-190q0-14-9.5-23.5T992 1152H800q-13 0-22.5 9.5T768 1185v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11H786q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17H128q-34 0-63.5-17T18 1601q-37-63-2-126L784 67q17-31 47-49t65-18 65 18 47 49z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "eye": Object {
-                      "path": "M1664 960q-152-236-381-353 61 104 61 225 0 185-131.5 316.5t-316.5 131.5-316.5-131.5-131.5-316.5q0-121 61-225-229 117-381 353 133 205 333.5 326.5t434.5 121.5 434.5-121.5 333.5-326.5zm-720-384q0-20-14-34t-34-14q-125 0-214.5 89.5t-89.5 214.5q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5t-499.5 138.5-499.5-139-376.5-368q-20-35-20-69t20-69q140-229 376.5-368t499.5-139 499.5 139 376.5 368q20 35 20 69z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "file-text": Object {
-                      "path": "M1596 380q28 28 48 76t20 88v1152q0 40-28 68t-68 28h-1344q-40 0-68-28t-28-68v-1600q0-40 28-68t68-28h896q40 0 88 20t76 48zm-444-244v376h376q-10-29-22-41l-313-313q-12-12-41-22zm384 1528v-1024h-416q-40 0-68-28t-28-68v-416h-768v1536h1280zm-1024-864q0-14 9-23t23-9h704q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64zm736 224q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704zm0 256q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "gear": Object {
-                      "path": "M1800 800h-218q-26 -107 -81 -193l154 -154l-210 -210l-154 154q-88 -55 -191 -79v-218h-300v218q-103 24 -191 79l-154 -154l-212 212l154 154q-55 88 -79 191h-218v297h217q23 101 80 194l-154 154l210 210l154 -154q85 54 193 81v218h300v-218q103 -24 191 -79 l154 154l212 -212l-154 -154q57 -93 80 -194h217v-297zM950 650q124 0 212 88t88 212t-88 212t-212 88t-212 -88t-88 -212t88 -212t212 -88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "key": Object {
-                      "path": "M832 512q0-80-56-136t-136-56-136 56-56 136q0 42 19 83-41-19-83-19-80 0-136 56t-56 136 56 136 136 56 136-56 56-136q0-42-19-83 41 19 83 19 80 0 136-56t56-136zm851 704q0 17-49 66t-66 49q-9 0-28.5-16t-36.5-33-38.5-40-24.5-26l-96 96 220 220q28 28 28 68 0 42-39 81t-81 39q-40 0-68-28l-671-671q-176 131-365 131-163 0-265.5-102.5t-102.5-265.5q0-160 95-313t248-248 313-95q163 0 265.5 102.5t102.5 265.5q0 189-131 365l355 355 96-96q-3-3-26-24.5t-40-38.5-33-36.5-16-28.5q0-17 49-66t66-49q13 0 23 10 6 6 46 44.5t82 79.5 86.5 86 73 78 28.5 41z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "list": Object {
-                      "path": "M384 1408q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm0-512q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm-1408-928q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm0-512v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "loading-spinner": Object {
-                      "CustomComponent": Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                          "isStatic": false,
-                          "rules": Array [
-                            "width:",
-                            [Function],
-                            ";height:",
-                            [Function],
-                            ";flex:none;animation:loadingSpinnerRotator 1.4s linear infinite;& .path{stroke:",
-                            [Function],
-                            ";stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:loadingSpinnerDash 1.4s ease-in-out infinite;}@keyframes loadingSpinnerRotator{0%{transform:rotate( 0deg );}100%{transform:rotate( 270deg );}}@keyframes loadingSpinnerDash{0%{stroke-dashoffset:187;}50%{stroke-dashoffset:47;transform:rotate( 135deg );}100%{stroke-dashoffset:187;transform:rotate( 450deg );}}",
-                          ],
-                        },
-                        "displayName": "SvgIcon__StyledSvgSpinner",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                        "target": "svg",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      },
-                      "path": Array [
-                        <circle
-                          className="path"
-                          cx="33"
-                          cy="33"
-                          fill="none"
-                          r="30"
-                          strokeLinecap="round"
-                          strokeWidth="6"
-                        />,
-                      ],
-                      "viewbox": "0 0 66 66",
-                    },
-                    "mobile": Object {
-                      "path": "M976 1408q0-33-23.5-56.5t-56.5-23.5-56.5 23.5-23.5 56.5 23.5 56.5 56.5 23.5 56.5-23.5 23.5-56.5zm208-160v-704q0-13-9.5-22.5t-22.5-9.5h-512q-13 0-22.5 9.5t-9.5 22.5v704q0 13 9.5 22.5t22.5 9.5h512q13 0 22.5-9.5t9.5-22.5zm-192-848q0-16-16-16h-160q-16 0-16 16t16 16h160q16 0 16-16zm288-16v1024q0 52-38 90t-90 38h-512q-52 0-90-38t-38-90v-1024q0-52 38-90t90-38h512q52 0 90 38t38 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "pencil-square": Object {
-                      "path": "M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus": Object {
-                      "path": "M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus-circle": Object {
-                      "path": "M1344 960v-128q0-26-19-45t-45-19h-256v-256q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v256h-256q-26 0-45 19t-19 45v128q0 26 19 45t45 19h256v256q0 26 19 45t45 19h128q26 0 45-19t19-45v-256h256q26 0 45-19t19-45zm320-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "question-circle": Object {
-                      "path": "M1024 1376v-192q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v192q0 14 9 23t23 9h192q14 0 23-9t9-23zm256-672q0-88-55.5-163t-138.5-116-170-41q-243 0-371 213-15 24 8 42l132 100q7 6 19 6 16 0 25-12 53-68 86-92 34-24 86-24 48 0 85.5 26t37.5 59q0 38-20 61t-68 45q-63 28-115.5 86.5t-52.5 125.5v36q0 14 9 23t23 9h192q14 0 23-9t9-23q0-19 21.5-49.5t54.5-49.5q32-18 49-28.5t46-35 44.5-48 28-60.5 12.5-81zm384 192q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "search": Object {
-                      "path": "M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "seo-score-bad": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M338.2 394.2C315.8 367.4 282.9 352 248 352s-67.8 15.4-90.2 42.2c-13.5 16.3-38.1-4.2-24.6-20.5C161.7 339.6 203.6 320 248 320 s86.3 19.6 114.7 53.8C376.3 390 351.7 410.5 338.2 394.2L338.2 394.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-good": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M362.8 346.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5c22.4 26.9 55.2 42.2 90.2 42.2 s67.8-15.4 90.2-42.2C351.6 309.5 376.3 329.9 362.8 346.2L362.8 346.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-none": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-ok": Object {
-                      "path": Array [
-                        <path
-                          d="M344 336c21.2 0 21.2 32 0 32H152c-21.2 0-21.2-32 0-32H344z"
-                          fill="#000000"
-                        />,
-                        <circle
-                          cx="328"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <circle
-                          cx="168"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <path
-                          d="M248 8c137 0 248 111 248 248S385 504 248 504S0 393 0 256S111 8 248 8z M360 208c0-17.7-14.3-32-32-32 s-32 14.3-32 32s14.3 32 32 32S360 225.7 360 208z M344 368c21.2 0 21.2-32 0-32H152c-21.2 0-21.2 32 0 32H344z M200 208 c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32S200 225.7 200 208z"
-                        />,
-                      ],
-                      "viewbox": "0 0 496 512",
-                    },
-                    "times": Object {
-                      "path": "M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "times-circle": Object {
-                      "path": "M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z",
-                      "viewbox": "0 0 20 20",
-                    },
-                  }
-                }
-                size="16px"
-              >
-                <createSvgIconComponent__StyledSvg
-                  aria-hidden={true}
-                  className="yoast-svg-icon yoast-svg-icon-edit"
-                  fill="currentColor"
-                  focusable="false"
-                  role="img"
-                  size="16px"
-                  viewBox="0 0 1792 1792"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <svg
-                    aria-hidden={true}
-                    className="yoast-svg-icon yoast-svg-icon-edit createSvgIconComponent__StyledSvg-sc-1h4gl3a-0 cPnaHk"
-                    fill="currentColor"
-                    focusable="false"
-                    role="img"
-                    size="16px"
-                    viewBox="0 0 1792 1792"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"
-                    />
-                  </svg>
-                </createSvgIconComponent__StyledSvg>
-              </SvgIconSet>
-            </SvgIcon>
-            Edit snippet
-          </button>
-        </StyledComponent>
-      </SnippetEditor__EditSnippetButton>
-      <SnippetEditorFields
-        activeField="description"
-        containerPadding="0 20px"
-        data={
-          Object {
-            "description": "Test description, %%replacement_variable%%",
-            "slug": "test-slug",
-            "title": "Test title",
-          }
-        }
-        descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here"
-        descriptionInputId="yoast-google-preview-description"
-        descriptionLengthProgress={
-          Object {
-            "actual": 42,
-            "max": 156,
-            "score": 6,
-          }
-        }
-        hoveredField={null}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        recommendedReplacementVariables={Array []}
-        replacementVariables={Array []}
-        slugInputId="yoast-google-preview-slug"
-        titleInputId="yoast-google-preview-title"
-        titleLengthProgress={
-          Object {
-            "actual": 0,
-            "max": 600,
-            "score": 1,
-          }
-        }
-      >
-        <SettingsSnippetEditorFields__StyledEditor
-          padding="0 20px"
-        >
-          <StyledComponent
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
-                  "isStatic": false,
-                  "lastClassName": "c17",
-                  "rules": Array [
-                    "padding:",
-                    [Function],
-                    ";",
-                  ],
-                },
-                "displayName": "SettingsSnippetEditorFields__StyledEditor",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
-                "target": "section",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
-              }
-            }
-            forwardedRef={null}
-            padding="0 20px"
-          >
-            <section
-              className="c17"
-            >
-              <ReplacementVariableEditorMock
-                content="Test title"
-                editorRef={[Function]}
-                fieldId="yoast-google-preview-title"
-                isActive={false}
-                isHovered={false}
-                label="SEO title"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                recommendedReplacementVariables={Array []}
-                replacementVariables={Array []}
-                type="title"
-                withCaret={true}
-              >
-                <div />
-              </ReplacementVariableEditorMock>
-              <ProgressBar
-                aria-hidden="true"
-                backgroundColor="#f7f7f7"
-                borderColor="#ddd"
-                max={600}
-                progressColor="#dc3232"
-                value={0}
-              >
-                <StyledComponent
-                  aria-hidden="true"
-                  backgroundColor="#f7f7f7"
-                  borderColor="#ddd"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "_foldedDefaultProps": Object {
-                        "aria-hidden": "true",
-                        "backgroundColor": "#f7f7f7",
-                        "borderColor": "#ddd",
-                        "max": 1,
-                        "progressColor": "#7ad03a",
-                        "value": 0,
-                      },
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ProgressBar-sc-9g9yx6-0",
-                        "isStatic": false,
-                        "lastClassName": "c22",
-                        "rules": Array [
-                          "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
-                          [Function],
-                          ";border:1px solid ",
-                          [Function],
-                          ";::-webkit-progress-bar{background-color:",
-                          [Function],
-                          ";}::-webkit-progress-value{background-color:",
-                          [Function],
-                          ";transition:width 250ms;}::-moz-progress-bar{background-color:",
-                          [Function],
-                          ";}::-ms-fill{background-color:",
-                          [Function],
-                          ";border:0;}",
-                        ],
-                      },
-                      "displayName": "ProgressBar",
-                      "foldedComponentIds": Array [],
-                      "propTypes": Object {
-                        "aria-hidden": [Function],
-                        "backgroundColor": [Function],
-                        "borderColor": [Function],
-                        "max": [Function],
-                        "progressColor": [Function],
-                        "value": [Function],
-                      },
-                      "render": [Function],
-                      "styledComponentId": "ProgressBar-sc-9g9yx6-0",
-                      "target": "progress",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  max={600}
-                  progressColor="#dc3232"
-                  value={0}
-                >
-                  <progress
-                    aria-hidden="true"
-                    className="c18"
-                    max={600}
-                    value={0}
-                  />
-                </StyledComponent>
-              </ProgressBar>
-              <Label__SimulatedLabel
-                id="snippet-editor-field-5-slug"
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "Label__SimulatedLabel-mitdcc-0",
-                        "isStatic": false,
-                        "lastClassName": "c19",
-                        "rules": Array [
-                          "flex:1 1 200px;min-width:200px;cursor:pointer;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;margin:4px 0;color:#303030;font-weight:500;",
-                        ],
-                      },
-                      "displayName": "Label__SimulatedLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "Label__SimulatedLabel-mitdcc-0",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  id="snippet-editor-field-5-slug"
-                  onClick={[Function]}
-                >
-                  <div
-                    className="c19"
-                    id="snippet-editor-field-5-slug"
-                    onClick={[Function]}
-                  >
-                    Slug
-                  </div>
-                </StyledComponent>
-              </Label__SimulatedLabel>
-              <helpers
-                isActive={false}
-                isHovered={false}
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        Object {},
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "helpers-sc-15q2ybx-0",
-                        "isStatic": false,
-                        "lastClassName": "c20",
-                        "rules": Array [
-                          "flex:0 1 100%;border:1px solid ",
-                          [Function],
-                          ";padding:3px 5px;box-sizing:border-box;box-shadow:",
-                          [Function],
-                          ";background-color:#fff;color:#32373c;outline:0;transition:50ms border-color ease-in-out;position:relative;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;font-size:14px;cursor:text;",
-                          "&::before{display:block;position:absolute;top:-1px;",
-                          [Function],
-                          ":-25px;width:24px;height:24px;background-image:url( ",
-                          [Function],
-                          " );background-size:25px;content:\\"\\";}",
-                        ],
-                      },
-                      "displayName": "helpers",
-                      "foldedComponentIds": Array [
-                        "InputContainer__VariableEditorInputContainer-sc-140v6lg-0",
-                      ],
-                      "render": [Function],
-                      "styledComponentId": "helpers-sc-15q2ybx-0",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  isActive={false}
-                  isHovered={false}
-                  onClick={[Function]}
-                >
-                  <div
-                    className="c20"
-                    onClick={[Function]}
-                  >
-                    <SnippetEditorFields__SlugInput
-                      aria-labelledby="snippet-editor-field-5-slug"
-                      id="yoast-google-preview-slug"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      value="test-slug"
-                    >
-                      <StyledComponent
-                        aria-labelledby="snippet-editor-field-5-slug"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
-                              "isStatic": false,
-                              "lastClassName": "c21",
-                              "rules": Array [
-                                "border:none;width:100%;height:inherit;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;&:focus{outline:0;}",
-                              ],
-                            },
-                            "displayName": "SnippetEditorFields__SlugInput",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
-                          }
-                        }
-                        forwardedRef={[Function]}
-                        id="yoast-google-preview-slug"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onFocus={[Function]}
-                        value="test-slug"
-                      >
-                        <input
-                          aria-labelledby="snippet-editor-field-5-slug"
-                          className="c21"
-                          id="yoast-google-preview-slug"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          value="test-slug"
-                        />
-                      </StyledComponent>
-                    </SnippetEditorFields__SlugInput>
-                  </div>
-                </StyledComponent>
-              </helpers>
-              <ReplacementVariableEditorMock
-                content="Test description, %%replacement_variable%%"
-                editorRef={[Function]}
-                fieldId="yoast-google-preview-description"
-                isActive={true}
-                isHovered={false}
-                label="Meta description"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                placeholder="Modify your meta description by editing it right here"
-                recommendedReplacementVariables={Array []}
-                replacementVariables={Array []}
-                type="description"
-                withCaret={true}
-              >
-                <div />
-              </ReplacementVariableEditorMock>
-              <ProgressBar
-                aria-hidden="true"
-                backgroundColor="#f7f7f7"
-                borderColor="#ddd"
-                max={156}
-                progressColor="#ee7c1b"
-                value={42}
-              >
-                <StyledComponent
-                  aria-hidden="true"
-                  backgroundColor="#f7f7f7"
-                  borderColor="#ddd"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "_foldedDefaultProps": Object {
-                        "aria-hidden": "true",
-                        "backgroundColor": "#f7f7f7",
-                        "borderColor": "#ddd",
-                        "max": 1,
-                        "progressColor": "#7ad03a",
-                        "value": 0,
-                      },
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ProgressBar-sc-9g9yx6-0",
-                        "isStatic": false,
-                        "lastClassName": "c22",
-                        "rules": Array [
-                          "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
-                          [Function],
-                          ";border:1px solid ",
-                          [Function],
-                          ";::-webkit-progress-bar{background-color:",
-                          [Function],
-                          ";}::-webkit-progress-value{background-color:",
-                          [Function],
-                          ";transition:width 250ms;}::-moz-progress-bar{background-color:",
-                          [Function],
-                          ";}::-ms-fill{background-color:",
-                          [Function],
-                          ";border:0;}",
-                        ],
-                      },
-                      "displayName": "ProgressBar",
-                      "foldedComponentIds": Array [],
-                      "propTypes": Object {
-                        "aria-hidden": [Function],
-                        "backgroundColor": [Function],
-                        "borderColor": [Function],
-                        "max": [Function],
-                        "progressColor": [Function],
-                        "value": [Function],
-                      },
-                      "render": [Function],
-                      "styledComponentId": "ProgressBar-sc-9g9yx6-0",
-                      "target": "progress",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  max={156}
-                  progressColor="#ee7c1b"
-                  value={42}
-                >
-                  <progress
-                    aria-hidden="true"
-                    className="c22"
-                    max={156}
-                    value={42}
-                  />
-                </StyledComponent>
-              </ProgressBar>
-            </section>
-          </StyledComponent>
-        </SettingsSnippetEditorFields__StyledEditor>
-      </SnippetEditorFields>
-      <SnippetEditor__CloseEditorButton
-        activeBackgroundColor="#f7f7f7"
-        activeBorderColor="#000"
-        activeColor="#000"
-        backgroundColor="#f7f7f7"
-        borderColor="#ccc"
-        boxShadowColor="#ccc"
-        focusBackgroundColor="#fff"
-        focusBorderColor="#0066cd"
-        focusBoxShadowColor="#084a67"
-        focusColor="#000"
-        hoverBackgroundColor="#fff"
-        hoverColor="#000"
-        onClick={[Function]}
-        textColor="#555"
-        type="button"
-      >
-        <StyledComponent
-          activeBackgroundColor="#f7f7f7"
-          activeBorderColor="#000"
-          activeColor="#000"
-          backgroundColor="#f7f7f7"
-          borderColor="#ccc"
-          boxShadowColor="#ccc"
-          focusBackgroundColor="#fff"
-          focusBorderColor="#0066cd"
-          focusBoxShadowColor="#084a67"
-          focusColor="#000"
-          forwardedComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "_foldedDefaultProps": Object {
-                "activeBackgroundColor": "#f7f7f7",
-                "activeBorderColor": "#000",
-                "activeColor": "#000",
-                "backgroundColor": "#f7f7f7",
-                "borderColor": "#ccc",
-                "boxShadowColor": "#ccc",
-                "focusBackgroundColor": "#fff",
-                "focusBorderColor": "#0066cd",
-                "focusBoxShadowColor": "#084a67",
-                "focusColor": "#000",
-                "hoverBackgroundColor": "#fff",
-                "hoverColor": "#000",
-                "textColor": "#555",
-                "type": "button",
-              },
-              "attrs": Array [],
-              "componentStyle": ComponentStyle {
-                "componentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
-                "isStatic": false,
-                "lastClassName": "c23",
-                "rules": Array [
-                  "color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";background:",
-                  [Function],
-                  ";box-shadow:0 1px 0 ",
-                  [Function],
-                  ";",
-                  "&:active{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";box-shadow:inset 0 2px 5px -3px ",
-                  [Function],
-                  "}",
-                  "&::-moz-focus-inner{border-width:0;}&:focus{outline:none;border-color:",
-                  [Function],
-                  ";color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";box-shadow:0 0 3px ",
-                  [Function],
-                  "}",
-                  "&:hover{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:var(--yoast-color-border--default);}",
-                  "display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-width:",
-                  "1px",
-                  ";border-style:solid;margin:0;padding:",
-                  "4px",
-                  " 10px;border-radius:3px;cursor:pointer;box-sizing:border-box;font-size:inherit;font-family:inherit;font-weight:inherit;text-align:",
-                  [Function],
-                  ";overflow:visible;min-height:",
-                  "32px",
-                  ";transition:var(--yoast-transition-default);svg{align-self:center;}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){::after{display:inline-block;content:\\"\\";min-height:",
-                  "22px",
-                  ";}}",
-                  "height:33px;border:1px solid #dbdbdb;box-shadow:none;font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;",
-                  "margin-top:24px;",
-                ],
-              },
-              "displayName": "SnippetEditor__CloseEditorButton",
-              "foldedComponentIds": Array [
-                "Button__BaseButton-sc-32rbq-4",
-                "Button-sc-32rbq-3",
-                "Button-sc-32rbq-1",
-                "Button-sc-32rbq-2",
-                "Button-sc-32rbq-0",
-                "SnippetEditor__SnippetEditorButton-sc-144bmm3-0",
-              ],
-              "propTypes": Object {
-                "activeBackgroundColor": [Function],
-                "activeBorderColor": [Function],
-                "activeColor": [Function],
-                "backgroundColor": [Function],
-                "borderColor": [Function],
-                "boxShadowColor": [Function],
-                "focusBackgroundColor": [Function],
-                "focusBorderColor": [Function],
-                "focusBoxShadowColor": [Function],
-                "focusColor": [Function],
-                "hoverBackgroundColor": [Function],
-                "hoverColor": [Function],
-                "textColor": [Function],
-                "type": [Function],
-              },
-              "render": [Function],
-              "styledComponentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
-              "target": "button",
-              "toString": [Function],
-              "warnTooManyClasses": [Function],
-              "withComponent": [Function],
-            }
-          }
-          forwardedRef={null}
-          hoverBackgroundColor="#fff"
-          hoverColor="#000"
-          onClick={[Function]}
-          textColor="#555"
-          type="button"
-        >
-          <button
-            className="c23"
-            onClick={[Function]}
-            type="button"
-          >
-            Close snippet editor
-          </button>
-        </StyledComponent>
-      </SnippetEditor__CloseEditorButton>
-    </div>
-  </ErrorBoundary>
-</SnippetEditor>
-`;
-
-exports[`SnippetEditor highlights the hovered field when onMouseEnter() is called 1`] = `
-.c19 {
-  -webkit-flex: 1 1 200px;
-  -ms-flex: 1 1 200px;
-  flex: 1 1 200px;
-  min-width: 200px;
-  cursor: pointer;
-  font-size: 14px;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  margin: 4px 0;
-  color: #303030;
-  font-weight: 500;
-}
-
-.c18 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c18::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c18::-webkit-progress-value {
-  background-color: #dc3232;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c18::-moz-progress-bar {
-  background-color: #dc3232;
-}
-
-.c18::-ms-fill {
-  background-color: #dc3232;
-  border: 0;
-}
-
-.c22 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c22::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c22::-webkit-progress-value {
-  background-color: #ee7c1b;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c22::-moz-progress-bar {
-  background-color: #ee7c1b;
-}
-
-.c22::-ms-fill {
-  background-color: #ee7c1b;
-  border: 0;
-}
-
-.c17 {
-  padding: 0 20px;
-}
-
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c4 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c11 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c12 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c13 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c6 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c7 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c9 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c10 {
-  color: #3c4043;
-}
-
-.c15 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c15:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c5 {
-  padding: 12px 16px;
-}
-
-.c5:first-child {
-  margin-bottom: -16px;
-}
-
-.c8 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-.c21 {
-  border: none;
-  width: 100%;
-  height: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-}
-
-.c21:focus {
-  outline: 0;
-}
-
-.c20 {
-  -webkit-flex: 0 1 100%;
-  -ms-flex: 0 1 100%;
-  flex: 0 1 100%;
-  border: 1px solid #ddd;
-  padding: 3px 5px;
-  box-sizing: border-box;
-  box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
-  background-color: #fff;
-  color: #32373c;
-  outline: 0;
-  -webkit-transition: 50ms border-color ease-in-out;
-  transition: 50ms border-color ease-in-out;
-  position: relative;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-size: 14px;
-  cursor: text;
-}
-
-.c20::before {
-  display: block;
-  position: absolute;
-  top: -1px;
-  left: -25px;
-  width: 24px;
-  height: 24px;
-  background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22transparent%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
-  background-size: 25px;
-  content: "";
-}
-
-.c0 {
-  border: 0;
-  padding: 0;
-  margin: 0 0 16px;
-}
-
-.c1 {
-  margin: 8px 0;
-  padding: 0;
-  color: #555;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.c3 {
-  margin-right: 16px;
-  color: inherit;
-  font-size: 14px;
-  line-height: 1.71428571;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c2.c2 {
-  margin: 0 8px 0 0;
-  cursor: pointer;
-}
-
-.c16 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin: 10px 0 0 4px;
-  fill: #555;
-  padding-left: 8px;
-}
-
-.c16:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c16::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c16:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c16:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c16 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c16 svg {
-  margin-right: 7px;
-}
-
-.c23 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin-top: 24px;
-}
-
-.c23:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c23::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c23:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c23:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c23 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c14 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c14:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c14::before {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: -40px;
-  width: 22px;
-  height: 22px;
-  background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23ccc%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
-  background-size: 24px;
-  background-repeat: no-repeat;
-  background-position: center;
-  content: "";
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c16::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c23::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-<SnippetEditor
-  baseUrl="http://example.org/"
-  data={
-    Object {
-      "description": "Test description, %%replacement_variable%%",
-      "slug": "test-slug",
-      "title": "Test title",
-    }
-  }
-  date=""
-  descriptionEditorFieldPlaceholder=""
-  descriptionLengthProgress={
-    Object {
-      "actual": 0,
-      "max": 156,
-      "score": 0,
-    }
-  }
-  faviconSrc=""
-  hasPaperStyle={true}
-  idSuffix=""
-  keyword=""
-  locale="en"
-  mapEditorDataToPreview={null}
-  mobileImageSrc=""
-  mode="mobile"
-  onChange={[Function]}
-  onChangeAnalysisData={[Function]}
-  recommendedReplacementVariables={Array []}
-  replacementVariables={Array []}
-  shoppingData={Object {}}
-  showCloseButton={true}
-  titleLengthProgress={
-    Object {
-      "actual": 0,
-      "max": 600,
-      "score": 0,
-    }
-  }
-  wordsToHighlight={Array []}
->
-  <ErrorBoundary>
-    <div>
-      <ModeSwitcher
-        active="mobile"
-        desktopModeInputId="yoast-google-preview-mode-desktop"
-        mobileModeInputId="yoast-google-preview-mode-mobile"
-        onChange={[Function]}
-      >
-        <ModeSwitcher__Switcher>
-          <StyledComponent
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                  "isStatic": false,
-                  "lastClassName": "c0",
-                  "rules": Array [
-                    "border:0;padding:0;margin:0 0 16px;",
-                  ],
-                },
-                "displayName": "ModeSwitcher__Switcher",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                "target": "fieldset",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
-              }
-            }
-            forwardedRef={null}
-          >
-            <fieldset
-              className="c0"
-            >
-              <ModeSwitcher__SwitcherTitle>
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                        "isStatic": false,
-                        "lastClassName": "c1",
-                        "rules": Array [
-                          "margin:8px 0;padding:0;color:",
-                          "#555",
-                          ";font-size:14px;font-weight:600;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__SwitcherTitle",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                      "target": "legend",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <legend
-                    className="c1"
-                  >
-                    Preview as:
-                  </legend>
-                </StyledComponent>
-              </ModeSwitcher__SwitcherTitle>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": true,
-                    "id": "yoast-google-preview-mode-mobile",
-                  }
-                }
-                type="radio"
-                value="mobile"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": true,
-                      "id": "yoast-google-preview-mode-mobile",
-                    }
-                  }
-                  type="radio"
-                  value="mobile"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": true,
-                        "id": "yoast-google-preview-mode-mobile",
-                      }
-                    }
-                    type="radio"
-                    value="mobile"
-                  >
-                    <input
-                      checked={true}
-                      className="c2"
-                      defaultValue="mobile"
-                      id="yoast-google-preview-mode-mobile"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-mobile"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-mobile"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-mobile"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-mobile"
-                    >
-                      Mobile result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": false,
-                    "id": "yoast-google-preview-mode-desktop",
-                  }
-                }
-                type="radio"
-                value="desktop"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": false,
-                      "id": "yoast-google-preview-mode-desktop",
-                    }
-                  }
-                  type="radio"
-                  value="desktop"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": false,
-                        "id": "yoast-google-preview-mode-desktop",
-                      }
-                    }
-                    type="radio"
-                    value="desktop"
-                  >
-                    <input
-                      checked={false}
-                      className="c2"
-                      defaultValue="desktop"
-                      id="yoast-google-preview-mode-desktop"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-desktop"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-desktop"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-desktop"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-desktop"
-                    >
-                      Desktop result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-            </fieldset>
-          </StyledComponent>
-        </ModeSwitcher__Switcher>
-      </ModeSwitcher>
-      <SnippetPreview
-        activeField={null}
-        breadcrumbs={null}
-        date=""
-        description="Test description, %%replacement_variable%%"
-        faviconSrc=""
-        hoveredField="description"
-        isAmp={false}
-        keyword=""
-        locale="en"
-        mobileImageSrc=""
-        mode="mobile"
-        onHover={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-        shoppingData={Object {}}
-        title="Test title"
-        url="http://example.org/test-slug"
-        wordsToHighlight={Array []}
-      >
-        <section>
-          <SnippetPreview__MobileContainer
-            id="yoast-snippet-preview-container"
-            padding={20}
-            width={null}
-          >
-            <StyledComponent
-              forwardedComponent={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "attrs": Array [],
-                  "componentStyle": ComponentStyle {
-                    "componentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                    "isStatic": false,
-                    "lastClassName": "c4",
-                    "rules": Array [
-                      "border-bottom:1px hidden #fff;border-radius:8px;box-shadow:0 1px 6px rgba(32,33,36,0.28);font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;max-width:",
-                      "400",
-                      "px;box-sizing:border-box;font-size:14px;",
-                    ],
-                  },
-                  "displayName": "SnippetPreview__MobileContainer",
-                  "foldedComponentIds": Array [],
-                  "render": [Function],
-                  "styledComponentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                  "target": "div",
-                  "toString": [Function],
-                  "warnTooManyClasses": [Function],
-                  "withComponent": [Function],
-                }
-              }
-              forwardedRef={null}
-              id="yoast-snippet-preview-container"
-              padding={20}
-              width={null}
-            >
-              <div
-                className="c4"
-                id="yoast-snippet-preview-container"
-                width={null}
-              >
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Url preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseUrl>
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                "isStatic": false,
-                                "lastClassName": "c6",
-                                "rules": Array [
-                                  "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseUrl",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                        >
-                          <div
-                            className="c6"
-                          >
-                            <SnippetPreview__BaseUrlOverflowContainer
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseUp={[Function]}
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                      "isStatic": false,
-                                      "lastClassName": "c7",
-                                      "rules": Array [
-                                        "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                        "overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-bottom:",
-                                        [Function],
-                                        ";padding-top:1px;line-height:",
-                                        [Function],
-                                        ";vertical-align:",
-                                        [Function],
-                                        ";",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__BaseUrlOverflowContainer",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                onMouseUp={[Function]}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c7"
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  onMouseUp={[Function]}
-                                >
-                                  <SnippetPreview__Favicon
-                                    alt=""
-                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                  >
-                                    <StyledComponent
-                                      alt=""
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                            "isStatic": false,
-                                            "lastClassName": "c8",
-                                            "rules": Array [
-                                              "width:16px;height:16px;margin-right:12px;vertical-align:middle;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__Favicon",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                          "target": "img",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                    >
-                                      <img
-                                        alt=""
-                                        className="c8"
-                                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                      />
-                                    </StyledComponent>
-                                  </SnippetPreview__Favicon>
-                                  <SnippetPreview__UrlContentContainer
-                                    screenMode="mobile"
-                                  >
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                            "isStatic": false,
-                                            "lastClassName": "c9",
-                                            "rules": Array [
-                                              "font-size:",
-                                              [Function],
-                                              ";line-height:",
-                                              [Function],
-                                              ";color:",
-                                              [Function],
-                                              ";",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__UrlContentContainer",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      screenMode="mobile"
-                                    >
-                                      <span
-                                        className="c9"
-                                      >
-                                        <SnippetPreview__UrlBaseContainer>
-                                          <StyledComponent
-                                            forwardedComponent={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "attrs": Array [],
-                                                "componentStyle": ComponentStyle {
-                                                  "componentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                  "isStatic": false,
-                                                  "lastClassName": "c10",
-                                                  "rules": Array [
-                                                    "color:",
-                                                    [Function],
-                                                    ";",
-                                                  ],
-                                                },
-                                                "displayName": "SnippetPreview__UrlBaseContainer",
-                                                "foldedComponentIds": Array [],
-                                                "render": [Function],
-                                                "styledComponentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                "target": "span",
-                                                "toString": [Function],
-                                                "warnTooManyClasses": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            forwardedRef={null}
-                                          >
-                                            <span
-                                              className="c10"
-                                            >
-                                              example.org
-                                            </span>
-                                          </StyledComponent>
-                                        </SnippetPreview__UrlBaseContainer>
-                                         › test-slug
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__UrlContentContainer>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__BaseUrlOverflowContainer>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseUrl>
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          SEO title preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseTitle
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                                "isStatic": false,
-                                "lastClassName": "c11",
-                                "rules": Array [
-                                  "cursor:pointer;position:relative;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseTitle",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c11"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__TitleBounded
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                      "isStatic": false,
-                                      "lastClassName": "c12",
-                                      "rules": Array [
-                                        "color:",
-                                        [Function],
-                                        ";text-decoration:none;font-size:",
-                                        [Function],
-                                        ";line-height:",
-                                        [Function],
-                                        ";font-weight:normal;margin:0;display:inline-block;overflow:hidden;max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                        "max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__TitleBounded",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__Title-sc-1hxg8jo-4",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c12"
-                                >
-                                  <SnippetPreview__TitleUnboundedMobile>
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                            "isStatic": false,
-                                            "lastClassName": "c13",
-                                            "rules": Array [
-                                              "display:inline-block;max-height:40px;padding-top:1px;vertical-align:top;overflow:hidden;text-overflow:ellipsis;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__TitleUnboundedMobile",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={[Function]}
-                                    >
-                                      <span
-                                        className="c13"
-                                      >
-                                        Test title
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__TitleUnboundedMobile>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__TitleBounded>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseTitle>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--desktop"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--desktop"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--desktop"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Meta description preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview
-                        isDescriptionPlaceholder={false}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview-sc-1hxg8jo-3",
-                                "isStatic": false,
-                                "lastClassName": "c14",
-                                "rules": Array [
-                                  "color:",
-                                  "#3c4043",
-                                  ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                  "600",
-                                  "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                  "&::before{display:block;position:absolute;top:0;",
-                                  [Function],
-                                  ":",
-                                  [Function],
-                                  ";width:22px;height:22px;background-image:url( ",
-                                  [Function],
-                                  " );background-size:24px;background-repeat:no-repeat;background-position:center;content:\\"\\";}",
-                                ],
-                              },
-                              "displayName": "SnippetPreview",
-                              "foldedComponentIds": Array [
-                                "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                              ],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview-sc-1hxg8jo-3",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          isDescriptionPlaceholder={false}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c14"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__MobileDescription
-                              isDescriptionPlaceholder={false}
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                      "isStatic": false,
-                                      "lastClassName": "c15",
-                                      "rules": Array [
-                                        "color:",
-                                        "#3c4043",
-                                        ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                        "600",
-                                        "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__MobileDescription",
-                                    "foldedComponentIds": Array [],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={[Function]}
-                                isDescriptionPlaceholder={false}
-                              >
-                                <div
-                                  className="c15"
-                                >
-                                  Test description, %%replacement_variable%%
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__MobileDescription>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--mobile"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--mobile"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--mobile"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                      <ProductDataMobile
-                        shoppingData={Object {}}
-                      >
-                        <ProductDataMobile__ProductData>
-                          <StyledComponent
-                            forwardedComponent={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "attrs": Array [],
-                                "componentStyle": ComponentStyle {
-                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                  "isStatic": false,
-                                  "lastClassName": "c15",
-                                  "rules": Array [
-                                    "display:flex;",
-                                  ],
-                                },
-                                "displayName": "ProductDataMobile__ProductData",
-                                "foldedComponentIds": Array [],
-                                "render": [Function],
-                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                "target": "div",
-                                "toString": [Function],
-                                "warnTooManyClasses": [Function],
-                                "withComponent": [Function],
-                              }
-                            }
-                            forwardedRef={null}
-                          >
-                            <div
-                              className="c15"
-                            />
-                          </StyledComponent>
-                        </ProductDataMobile__ProductData>
-                      </ProductDataMobile>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-              </div>
-            </StyledComponent>
-          </SnippetPreview__MobileContainer>
-        </section>
-      </SnippetPreview>
-      <SnippetEditor__EditSnippetButton
-        activeBackgroundColor="#f7f7f7"
-        activeBorderColor="#000"
-        activeColor="#000"
-        aria-expanded={true}
-        backgroundColor="#f7f7f7"
-        borderColor="#ccc"
-        boxShadowColor="#ccc"
-        focusBackgroundColor="#fff"
-        focusBorderColor="#0066cd"
-        focusBoxShadowColor="#084a67"
-        focusColor="#000"
-        hoverBackgroundColor="#fff"
-        hoverColor="#000"
-        onClick={[Function]}
-        textColor="#555"
-        type="button"
-      >
-        <StyledComponent
-          activeBackgroundColor="#f7f7f7"
-          activeBorderColor="#000"
-          activeColor="#000"
-          aria-expanded={true}
-          backgroundColor="#f7f7f7"
-          borderColor="#ccc"
-          boxShadowColor="#ccc"
-          focusBackgroundColor="#fff"
-          focusBorderColor="#0066cd"
-          focusBoxShadowColor="#084a67"
-          focusColor="#000"
-          forwardedComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "_foldedDefaultProps": Object {
-                "activeBackgroundColor": "#f7f7f7",
-                "activeBorderColor": "#000",
-                "activeColor": "#000",
-                "backgroundColor": "#f7f7f7",
-                "borderColor": "#ccc",
-                "boxShadowColor": "#ccc",
-                "focusBackgroundColor": "#fff",
-                "focusBorderColor": "#0066cd",
-                "focusBoxShadowColor": "#084a67",
-                "focusColor": "#000",
-                "hoverBackgroundColor": "#fff",
-                "hoverColor": "#000",
-                "textColor": "#555",
-                "type": "button",
-              },
-              "attrs": Array [],
-              "componentStyle": ComponentStyle {
-                "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-                "isStatic": false,
-                "lastClassName": "c16",
-                "rules": Array [
-                  "color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";background:",
-                  [Function],
-                  ";box-shadow:0 1px 0 ",
-                  [Function],
-                  ";",
-                  "&:active{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";box-shadow:inset 0 2px 5px -3px ",
-                  [Function],
-                  "}",
-                  "&::-moz-focus-inner{border-width:0;}&:focus{outline:none;border-color:",
-                  [Function],
-                  ";color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";box-shadow:0 0 3px ",
-                  [Function],
-                  "}",
-                  "&:hover{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:var(--yoast-color-border--default);}",
-                  "display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-width:",
-                  "1px",
-                  ";border-style:solid;margin:0;padding:",
-                  "4px",
-                  " 10px;border-radius:3px;cursor:pointer;box-sizing:border-box;font-size:inherit;font-family:inherit;font-weight:inherit;text-align:",
-                  [Function],
-                  ";overflow:visible;min-height:",
-                  "32px",
-                  ";transition:var(--yoast-transition-default);svg{align-self:center;}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){::after{display:inline-block;content:\\"\\";min-height:",
-                  "22px",
-                  ";}}",
-                  "height:33px;border:1px solid #dbdbdb;box-shadow:none;font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;",
-                  "margin:",
-                  [Function],
-                  ";fill:",
-                  "#555",
-                  ";padding-left:8px;& svg{",
-                  [Function],
-                  ":7px;}",
-                ],
-              },
-              "displayName": "SnippetEditor__EditSnippetButton",
-              "foldedComponentIds": Array [
-                "Button__BaseButton-sc-32rbq-4",
-                "Button-sc-32rbq-3",
-                "Button-sc-32rbq-1",
-                "Button-sc-32rbq-2",
-                "Button-sc-32rbq-0",
-                "SnippetEditor__SnippetEditorButton-sc-144bmm3-0",
-              ],
-              "propTypes": Object {
-                "activeBackgroundColor": [Function],
-                "activeBorderColor": [Function],
-                "activeColor": [Function],
-                "backgroundColor": [Function],
-                "borderColor": [Function],
-                "boxShadowColor": [Function],
-                "focusBackgroundColor": [Function],
-                "focusBorderColor": [Function],
-                "focusBoxShadowColor": [Function],
-                "focusColor": [Function],
-                "hoverBackgroundColor": [Function],
-                "hoverColor": [Function],
-                "textColor": [Function],
-                "type": [Function],
-              },
-              "render": [Function],
-              "styledComponentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-              "target": "button",
-              "toString": [Function],
-              "warnTooManyClasses": [Function],
-              "withComponent": [Function],
-            }
-          }
-          forwardedRef={[Function]}
-          hoverBackgroundColor="#fff"
-          hoverColor="#000"
-          onClick={[Function]}
-          textColor="#555"
-          type="button"
-        >
-          <button
-            aria-expanded={true}
-            className="c16"
-            onClick={[Function]}
-            type="button"
-          >
-            <SvgIcon
-              className=""
-              color="currentColor"
-              icon="edit"
-              size="16px"
-            >
-              <SvgIconSet
-                className=""
-                color="currentColor"
-                icon="edit"
-                iconSet={
-                  Object {
-                    "alert-error": Object {
-                      "path": "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-info": Object {
-                      "path": "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-success": Object {
-                      "path": "M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-warning": Object {
-                      "path": "M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z",
-                      "viewbox": "0 0 576 512",
-                    },
-                    "angle-down": Object {
-                      "path": "M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-left": Object {
-                      "path": "M1203 544q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-right": Object {
-                      "path": "M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-up": Object {
-                      "path": "M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-down": Object {
-                      "path": "M896 1791L120.91 448.5L1671.09 448.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-left": Object {
-                      "path": "M1343.5 1671.09L1 896L1343.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-right": Object {
-                      "path": "M1791 896L448.5 1671.09L448.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-up": Object {
-                      "path": "M1671.09 1343.5L120.91 1343.5L896 1z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "caret-right": Object {
-                      "path": "M 0 384.662 V 127.338 c 0 -17.818 21.543 -26.741 34.142 -14.142 l 128.662 128.662 c 7.81 7.81 7.81 20.474 0 28.284 L 34.142 398.804 C 21.543 411.404 0 402.48 0 384.662 Z",
-                      "viewbox": "0 0 192 512",
-                    },
-                    "check": Object {
-                      "path": "M249.2,431.2c-23,0-45.6,9.4-61.8,25.6L25.6,618.6C9.4,634.8,0,657.4,0,680.4c0,23,9.4,45.6,25.6,61.8 l593.1,593.1c16.2,16.2,38.8,25.6,61.8,25.6c23,0,45.6-9.4,61.8-25.6L1766.4,311c16.2-16.2,25.6-38.8,25.6-61.8 s-9.4-45.6-25.6-61.8L1604.5,25.6C1588.3,9.4,1565.8,0,1542.8,0c-23,0-45.6,9.4-61.8,25.6L680.4,827L311,456.3 C294.8,440.5,272.3,431.2,249.2,431.2z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "chevron-down": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "chevron-up": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "circle": Object {
-                      "path": "M1664 896q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "clipboard": Object {
-                      "path": "M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "desktop": Object {
-                      "path": "M1728 992v-832q0-13-9.5-22.5t-22.5-9.5h-1600q-13 0-22.5 9.5t-9.5 22.5v832q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5zm128-832v1088q0 66-47 113t-113 47h-544q0 37 16 77.5t32 71 16 43.5q0 26-19 45t-45 19h-512q-26 0-45-19t-19-45q0-14 16-44t32-70 16-78h-544q-66 0-113-47t-47-113v-1088q0-66 47-113t113-47h1600q66 0 113 47t47 113z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "edit": Object {
-                      "path": "M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "exclamation-triangle": Object {
-                      "path": "M1024 1375v-190q0-14-9.5-23.5T992 1152H800q-13 0-22.5 9.5T768 1185v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11H786q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17H128q-34 0-63.5-17T18 1601q-37-63-2-126L784 67q17-31 47-49t65-18 65 18 47 49z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "eye": Object {
-                      "path": "M1664 960q-152-236-381-353 61 104 61 225 0 185-131.5 316.5t-316.5 131.5-316.5-131.5-131.5-316.5q0-121 61-225-229 117-381 353 133 205 333.5 326.5t434.5 121.5 434.5-121.5 333.5-326.5zm-720-384q0-20-14-34t-34-14q-125 0-214.5 89.5t-89.5 214.5q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5t-499.5 138.5-499.5-139-376.5-368q-20-35-20-69t20-69q140-229 376.5-368t499.5-139 499.5 139 376.5 368q20 35 20 69z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "file-text": Object {
-                      "path": "M1596 380q28 28 48 76t20 88v1152q0 40-28 68t-68 28h-1344q-40 0-68-28t-28-68v-1600q0-40 28-68t68-28h896q40 0 88 20t76 48zm-444-244v376h376q-10-29-22-41l-313-313q-12-12-41-22zm384 1528v-1024h-416q-40 0-68-28t-28-68v-416h-768v1536h1280zm-1024-864q0-14 9-23t23-9h704q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64zm736 224q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704zm0 256q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "gear": Object {
-                      "path": "M1800 800h-218q-26 -107 -81 -193l154 -154l-210 -210l-154 154q-88 -55 -191 -79v-218h-300v218q-103 24 -191 79l-154 -154l-212 212l154 154q-55 88 -79 191h-218v297h217q23 101 80 194l-154 154l210 210l154 -154q85 54 193 81v218h300v-218q103 -24 191 -79 l154 154l212 -212l-154 -154q57 -93 80 -194h217v-297zM950 650q124 0 212 88t88 212t-88 212t-212 88t-212 -88t-88 -212t88 -212t212 -88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "key": Object {
-                      "path": "M832 512q0-80-56-136t-136-56-136 56-56 136q0 42 19 83-41-19-83-19-80 0-136 56t-56 136 56 136 136 56 136-56 56-136q0-42-19-83 41 19 83 19 80 0 136-56t56-136zm851 704q0 17-49 66t-66 49q-9 0-28.5-16t-36.5-33-38.5-40-24.5-26l-96 96 220 220q28 28 28 68 0 42-39 81t-81 39q-40 0-68-28l-671-671q-176 131-365 131-163 0-265.5-102.5t-102.5-265.5q0-160 95-313t248-248 313-95q163 0 265.5 102.5t102.5 265.5q0 189-131 365l355 355 96-96q-3-3-26-24.5t-40-38.5-33-36.5-16-28.5q0-17 49-66t66-49q13 0 23 10 6 6 46 44.5t82 79.5 86.5 86 73 78 28.5 41z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "list": Object {
-                      "path": "M384 1408q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm0-512q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm-1408-928q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm0-512v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "loading-spinner": Object {
-                      "CustomComponent": Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                          "isStatic": false,
-                          "rules": Array [
-                            "width:",
-                            [Function],
-                            ";height:",
-                            [Function],
-                            ";flex:none;animation:loadingSpinnerRotator 1.4s linear infinite;& .path{stroke:",
-                            [Function],
-                            ";stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:loadingSpinnerDash 1.4s ease-in-out infinite;}@keyframes loadingSpinnerRotator{0%{transform:rotate( 0deg );}100%{transform:rotate( 270deg );}}@keyframes loadingSpinnerDash{0%{stroke-dashoffset:187;}50%{stroke-dashoffset:47;transform:rotate( 135deg );}100%{stroke-dashoffset:187;transform:rotate( 450deg );}}",
-                          ],
-                        },
-                        "displayName": "SvgIcon__StyledSvgSpinner",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                        "target": "svg",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      },
-                      "path": Array [
-                        <circle
-                          className="path"
-                          cx="33"
-                          cy="33"
-                          fill="none"
-                          r="30"
-                          strokeLinecap="round"
-                          strokeWidth="6"
-                        />,
-                      ],
-                      "viewbox": "0 0 66 66",
-                    },
-                    "mobile": Object {
-                      "path": "M976 1408q0-33-23.5-56.5t-56.5-23.5-56.5 23.5-23.5 56.5 23.5 56.5 56.5 23.5 56.5-23.5 23.5-56.5zm208-160v-704q0-13-9.5-22.5t-22.5-9.5h-512q-13 0-22.5 9.5t-9.5 22.5v704q0 13 9.5 22.5t22.5 9.5h512q13 0 22.5-9.5t9.5-22.5zm-192-848q0-16-16-16h-160q-16 0-16 16t16 16h160q16 0 16-16zm288-16v1024q0 52-38 90t-90 38h-512q-52 0-90-38t-38-90v-1024q0-52 38-90t90-38h512q52 0 90 38t38 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "pencil-square": Object {
-                      "path": "M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus": Object {
-                      "path": "M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus-circle": Object {
-                      "path": "M1344 960v-128q0-26-19-45t-45-19h-256v-256q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v256h-256q-26 0-45 19t-19 45v128q0 26 19 45t45 19h256v256q0 26 19 45t45 19h128q26 0 45-19t19-45v-256h256q26 0 45-19t19-45zm320-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "question-circle": Object {
-                      "path": "M1024 1376v-192q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v192q0 14 9 23t23 9h192q14 0 23-9t9-23zm256-672q0-88-55.5-163t-138.5-116-170-41q-243 0-371 213-15 24 8 42l132 100q7 6 19 6 16 0 25-12 53-68 86-92 34-24 86-24 48 0 85.5 26t37.5 59q0 38-20 61t-68 45q-63 28-115.5 86.5t-52.5 125.5v36q0 14 9 23t23 9h192q14 0 23-9t9-23q0-19 21.5-49.5t54.5-49.5q32-18 49-28.5t46-35 44.5-48 28-60.5 12.5-81zm384 192q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "search": Object {
-                      "path": "M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "seo-score-bad": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M338.2 394.2C315.8 367.4 282.9 352 248 352s-67.8 15.4-90.2 42.2c-13.5 16.3-38.1-4.2-24.6-20.5C161.7 339.6 203.6 320 248 320 s86.3 19.6 114.7 53.8C376.3 390 351.7 410.5 338.2 394.2L338.2 394.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-good": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M362.8 346.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5c22.4 26.9 55.2 42.2 90.2 42.2 s67.8-15.4 90.2-42.2C351.6 309.5 376.3 329.9 362.8 346.2L362.8 346.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-none": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-ok": Object {
-                      "path": Array [
-                        <path
-                          d="M344 336c21.2 0 21.2 32 0 32H152c-21.2 0-21.2-32 0-32H344z"
-                          fill="#000000"
-                        />,
-                        <circle
-                          cx="328"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <circle
-                          cx="168"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <path
-                          d="M248 8c137 0 248 111 248 248S385 504 248 504S0 393 0 256S111 8 248 8z M360 208c0-17.7-14.3-32-32-32 s-32 14.3-32 32s14.3 32 32 32S360 225.7 360 208z M344 368c21.2 0 21.2-32 0-32H152c-21.2 0-21.2 32 0 32H344z M200 208 c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32S200 225.7 200 208z"
-                        />,
-                      ],
-                      "viewbox": "0 0 496 512",
-                    },
-                    "times": Object {
-                      "path": "M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "times-circle": Object {
-                      "path": "M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z",
-                      "viewbox": "0 0 20 20",
-                    },
-                  }
-                }
-                size="16px"
-              >
-                <createSvgIconComponent__StyledSvg
-                  aria-hidden={true}
-                  className="yoast-svg-icon yoast-svg-icon-edit"
-                  fill="currentColor"
-                  focusable="false"
-                  role="img"
-                  size="16px"
-                  viewBox="0 0 1792 1792"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <svg
-                    aria-hidden={true}
-                    className="yoast-svg-icon yoast-svg-icon-edit createSvgIconComponent__StyledSvg-sc-1h4gl3a-0 cPnaHk"
-                    fill="currentColor"
-                    focusable="false"
-                    role="img"
-                    size="16px"
-                    viewBox="0 0 1792 1792"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"
-                    />
-                  </svg>
-                </createSvgIconComponent__StyledSvg>
-              </SvgIconSet>
-            </SvgIcon>
-            Edit snippet
-          </button>
-        </StyledComponent>
-      </SnippetEditor__EditSnippetButton>
-      <SnippetEditorFields
-        activeField={null}
-        containerPadding="0 20px"
-        data={
-          Object {
-            "description": "Test description, %%replacement_variable%%",
-            "slug": "test-slug",
-            "title": "Test title",
-          }
-        }
-        descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here"
-        descriptionInputId="yoast-google-preview-description"
-        descriptionLengthProgress={
-          Object {
-            "actual": 42,
-            "max": 156,
-            "score": 6,
-          }
-        }
-        hoveredField="description"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        recommendedReplacementVariables={Array []}
-        replacementVariables={Array []}
-        slugInputId="yoast-google-preview-slug"
-        titleInputId="yoast-google-preview-title"
-        titleLengthProgress={
-          Object {
-            "actual": 0,
-            "max": 600,
-            "score": 1,
-          }
-        }
-      >
-        <SettingsSnippetEditorFields__StyledEditor
-          padding="0 20px"
-        >
-          <StyledComponent
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
-                  "isStatic": false,
-                  "lastClassName": "c17",
-                  "rules": Array [
-                    "padding:",
-                    [Function],
-                    ";",
-                  ],
-                },
-                "displayName": "SettingsSnippetEditorFields__StyledEditor",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
-                "target": "section",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
-              }
-            }
-            forwardedRef={null}
-            padding="0 20px"
-          >
-            <section
-              className="c17"
-            >
-              <ReplacementVariableEditorMock
-                content="Test title"
-                editorRef={[Function]}
-                fieldId="yoast-google-preview-title"
-                isActive={false}
-                isHovered={false}
-                label="SEO title"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                recommendedReplacementVariables={Array []}
-                replacementVariables={Array []}
-                type="title"
-                withCaret={true}
-              >
-                <div />
-              </ReplacementVariableEditorMock>
-              <ProgressBar
-                aria-hidden="true"
-                backgroundColor="#f7f7f7"
-                borderColor="#ddd"
-                max={600}
-                progressColor="#dc3232"
-                value={0}
-              >
-                <StyledComponent
-                  aria-hidden="true"
-                  backgroundColor="#f7f7f7"
-                  borderColor="#ddd"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "_foldedDefaultProps": Object {
-                        "aria-hidden": "true",
-                        "backgroundColor": "#f7f7f7",
-                        "borderColor": "#ddd",
-                        "max": 1,
-                        "progressColor": "#7ad03a",
-                        "value": 0,
-                      },
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ProgressBar-sc-9g9yx6-0",
-                        "isStatic": false,
-                        "lastClassName": "c22",
-                        "rules": Array [
-                          "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
-                          [Function],
-                          ";border:1px solid ",
-                          [Function],
-                          ";::-webkit-progress-bar{background-color:",
-                          [Function],
-                          ";}::-webkit-progress-value{background-color:",
-                          [Function],
-                          ";transition:width 250ms;}::-moz-progress-bar{background-color:",
-                          [Function],
-                          ";}::-ms-fill{background-color:",
-                          [Function],
-                          ";border:0;}",
-                        ],
-                      },
-                      "displayName": "ProgressBar",
-                      "foldedComponentIds": Array [],
-                      "propTypes": Object {
-                        "aria-hidden": [Function],
-                        "backgroundColor": [Function],
-                        "borderColor": [Function],
-                        "max": [Function],
-                        "progressColor": [Function],
-                        "value": [Function],
-                      },
-                      "render": [Function],
-                      "styledComponentId": "ProgressBar-sc-9g9yx6-0",
-                      "target": "progress",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  max={600}
-                  progressColor="#dc3232"
-                  value={0}
-                >
-                  <progress
-                    aria-hidden="true"
-                    className="c18"
-                    max={600}
-                    value={0}
-                  />
-                </StyledComponent>
-              </ProgressBar>
-              <Label__SimulatedLabel
-                id="snippet-editor-field-4-slug"
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "Label__SimulatedLabel-mitdcc-0",
-                        "isStatic": false,
-                        "lastClassName": "c19",
-                        "rules": Array [
-                          "flex:1 1 200px;min-width:200px;cursor:pointer;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;margin:4px 0;color:#303030;font-weight:500;",
-                        ],
-                      },
-                      "displayName": "Label__SimulatedLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "Label__SimulatedLabel-mitdcc-0",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  id="snippet-editor-field-4-slug"
-                  onClick={[Function]}
-                >
-                  <div
-                    className="c19"
-                    id="snippet-editor-field-4-slug"
-                    onClick={[Function]}
-                  >
-                    Slug
-                  </div>
-                </StyledComponent>
-              </Label__SimulatedLabel>
-              <helpers
-                isActive={false}
-                isHovered={false}
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        Object {},
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "helpers-sc-15q2ybx-0",
-                        "isStatic": false,
-                        "lastClassName": "c20",
-                        "rules": Array [
-                          "flex:0 1 100%;border:1px solid ",
-                          [Function],
-                          ";padding:3px 5px;box-sizing:border-box;box-shadow:",
-                          [Function],
-                          ";background-color:#fff;color:#32373c;outline:0;transition:50ms border-color ease-in-out;position:relative;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;font-size:14px;cursor:text;",
-                          "&::before{display:block;position:absolute;top:-1px;",
-                          [Function],
-                          ":-25px;width:24px;height:24px;background-image:url( ",
-                          [Function],
-                          " );background-size:25px;content:\\"\\";}",
-                        ],
-                      },
-                      "displayName": "helpers",
-                      "foldedComponentIds": Array [
-                        "InputContainer__VariableEditorInputContainer-sc-140v6lg-0",
-                      ],
-                      "render": [Function],
-                      "styledComponentId": "helpers-sc-15q2ybx-0",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  isActive={false}
-                  isHovered={false}
-                  onClick={[Function]}
-                >
-                  <div
-                    className="c20"
-                    onClick={[Function]}
-                  >
-                    <SnippetEditorFields__SlugInput
-                      aria-labelledby="snippet-editor-field-4-slug"
-                      id="yoast-google-preview-slug"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      value="test-slug"
-                    >
-                      <StyledComponent
-                        aria-labelledby="snippet-editor-field-4-slug"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
-                              "isStatic": false,
-                              "lastClassName": "c21",
-                              "rules": Array [
-                                "border:none;width:100%;height:inherit;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;&:focus{outline:0;}",
-                              ],
-                            },
-                            "displayName": "SnippetEditorFields__SlugInput",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
-                          }
-                        }
-                        forwardedRef={[Function]}
-                        id="yoast-google-preview-slug"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onFocus={[Function]}
-                        value="test-slug"
-                      >
-                        <input
-                          aria-labelledby="snippet-editor-field-4-slug"
-                          className="c21"
-                          id="yoast-google-preview-slug"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          value="test-slug"
-                        />
-                      </StyledComponent>
-                    </SnippetEditorFields__SlugInput>
-                  </div>
-                </StyledComponent>
-              </helpers>
-              <ReplacementVariableEditorMock
-                content="Test description, %%replacement_variable%%"
-                editorRef={[Function]}
-                fieldId="yoast-google-preview-description"
-                isActive={false}
-                isHovered={true}
-                label="Meta description"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                placeholder="Modify your meta description by editing it right here"
-                recommendedReplacementVariables={Array []}
-                replacementVariables={Array []}
-                type="description"
-                withCaret={true}
-              >
-                <div />
-              </ReplacementVariableEditorMock>
-              <ProgressBar
-                aria-hidden="true"
-                backgroundColor="#f7f7f7"
-                borderColor="#ddd"
-                max={156}
-                progressColor="#ee7c1b"
-                value={42}
-              >
-                <StyledComponent
-                  aria-hidden="true"
-                  backgroundColor="#f7f7f7"
-                  borderColor="#ddd"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "_foldedDefaultProps": Object {
-                        "aria-hidden": "true",
-                        "backgroundColor": "#f7f7f7",
-                        "borderColor": "#ddd",
-                        "max": 1,
-                        "progressColor": "#7ad03a",
-                        "value": 0,
-                      },
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ProgressBar-sc-9g9yx6-0",
-                        "isStatic": false,
-                        "lastClassName": "c22",
-                        "rules": Array [
-                          "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
-                          [Function],
-                          ";border:1px solid ",
-                          [Function],
-                          ";::-webkit-progress-bar{background-color:",
-                          [Function],
-                          ";}::-webkit-progress-value{background-color:",
-                          [Function],
-                          ";transition:width 250ms;}::-moz-progress-bar{background-color:",
-                          [Function],
-                          ";}::-ms-fill{background-color:",
-                          [Function],
-                          ";border:0;}",
-                        ],
-                      },
-                      "displayName": "ProgressBar",
-                      "foldedComponentIds": Array [],
-                      "propTypes": Object {
-                        "aria-hidden": [Function],
-                        "backgroundColor": [Function],
-                        "borderColor": [Function],
-                        "max": [Function],
-                        "progressColor": [Function],
-                        "value": [Function],
-                      },
-                      "render": [Function],
-                      "styledComponentId": "ProgressBar-sc-9g9yx6-0",
-                      "target": "progress",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  max={156}
-                  progressColor="#ee7c1b"
-                  value={42}
-                >
-                  <progress
-                    aria-hidden="true"
-                    className="c22"
-                    max={156}
-                    value={42}
-                  />
-                </StyledComponent>
-              </ProgressBar>
-            </section>
-          </StyledComponent>
-        </SettingsSnippetEditorFields__StyledEditor>
-      </SnippetEditorFields>
-      <SnippetEditor__CloseEditorButton
-        activeBackgroundColor="#f7f7f7"
-        activeBorderColor="#000"
-        activeColor="#000"
-        backgroundColor="#f7f7f7"
-        borderColor="#ccc"
-        boxShadowColor="#ccc"
-        focusBackgroundColor="#fff"
-        focusBorderColor="#0066cd"
-        focusBoxShadowColor="#084a67"
-        focusColor="#000"
-        hoverBackgroundColor="#fff"
-        hoverColor="#000"
-        onClick={[Function]}
-        textColor="#555"
-        type="button"
-      >
-        <StyledComponent
-          activeBackgroundColor="#f7f7f7"
-          activeBorderColor="#000"
-          activeColor="#000"
-          backgroundColor="#f7f7f7"
-          borderColor="#ccc"
-          boxShadowColor="#ccc"
-          focusBackgroundColor="#fff"
-          focusBorderColor="#0066cd"
-          focusBoxShadowColor="#084a67"
-          focusColor="#000"
-          forwardedComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "_foldedDefaultProps": Object {
-                "activeBackgroundColor": "#f7f7f7",
-                "activeBorderColor": "#000",
-                "activeColor": "#000",
-                "backgroundColor": "#f7f7f7",
-                "borderColor": "#ccc",
-                "boxShadowColor": "#ccc",
-                "focusBackgroundColor": "#fff",
-                "focusBorderColor": "#0066cd",
-                "focusBoxShadowColor": "#084a67",
-                "focusColor": "#000",
-                "hoverBackgroundColor": "#fff",
-                "hoverColor": "#000",
-                "textColor": "#555",
-                "type": "button",
-              },
-              "attrs": Array [],
-              "componentStyle": ComponentStyle {
-                "componentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
-                "isStatic": false,
-                "lastClassName": "c23",
-                "rules": Array [
-                  "color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";background:",
-                  [Function],
-                  ";box-shadow:0 1px 0 ",
-                  [Function],
-                  ";",
-                  "&:active{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";box-shadow:inset 0 2px 5px -3px ",
-                  [Function],
-                  "}",
-                  "&::-moz-focus-inner{border-width:0;}&:focus{outline:none;border-color:",
-                  [Function],
-                  ";color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";box-shadow:0 0 3px ",
-                  [Function],
-                  "}",
-                  "&:hover{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:var(--yoast-color-border--default);}",
-                  "display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-width:",
-                  "1px",
-                  ";border-style:solid;margin:0;padding:",
-                  "4px",
-                  " 10px;border-radius:3px;cursor:pointer;box-sizing:border-box;font-size:inherit;font-family:inherit;font-weight:inherit;text-align:",
-                  [Function],
-                  ";overflow:visible;min-height:",
-                  "32px",
-                  ";transition:var(--yoast-transition-default);svg{align-self:center;}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){::after{display:inline-block;content:\\"\\";min-height:",
-                  "22px",
-                  ";}}",
-                  "height:33px;border:1px solid #dbdbdb;box-shadow:none;font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;",
-                  "margin-top:24px;",
-                ],
-              },
-              "displayName": "SnippetEditor__CloseEditorButton",
-              "foldedComponentIds": Array [
-                "Button__BaseButton-sc-32rbq-4",
-                "Button-sc-32rbq-3",
-                "Button-sc-32rbq-1",
-                "Button-sc-32rbq-2",
-                "Button-sc-32rbq-0",
-                "SnippetEditor__SnippetEditorButton-sc-144bmm3-0",
-              ],
-              "propTypes": Object {
-                "activeBackgroundColor": [Function],
-                "activeBorderColor": [Function],
-                "activeColor": [Function],
-                "backgroundColor": [Function],
-                "borderColor": [Function],
-                "boxShadowColor": [Function],
-                "focusBackgroundColor": [Function],
-                "focusBorderColor": [Function],
-                "focusBoxShadowColor": [Function],
-                "focusColor": [Function],
-                "hoverBackgroundColor": [Function],
-                "hoverColor": [Function],
-                "textColor": [Function],
-                "type": [Function],
-              },
-              "render": [Function],
-              "styledComponentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
-              "target": "button",
-              "toString": [Function],
-              "warnTooManyClasses": [Function],
-              "withComponent": [Function],
-            }
-          }
-          forwardedRef={null}
-          hoverBackgroundColor="#fff"
-          hoverColor="#000"
-          onClick={[Function]}
-          textColor="#555"
-          type="button"
-        >
-          <button
-            className="c23"
-            onClick={[Function]}
-            type="button"
-          >
-            Close snippet editor
-          </button>
-        </StyledComponent>
-      </SnippetEditor__CloseEditorButton>
-    </div>
-  </ErrorBoundary>
-</SnippetEditor>
-`;
-
-exports[`SnippetEditor opens when calling open() 1`] = `
-.c18 {
-  -webkit-flex: 1 1 200px;
-  -ms-flex: 1 1 200px;
-  flex: 1 1 200px;
-  min-width: 200px;
-  cursor: pointer;
-  font-size: 14px;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  margin: 4px 0;
-  color: #303030;
-  font-weight: 500;
-}
-
-.c17 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c17::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c17::-webkit-progress-value {
-  background-color: #dc3232;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c17::-moz-progress-bar {
-  background-color: #dc3232;
-}
-
-.c17::-ms-fill {
-  background-color: #dc3232;
-  border: 0;
-}
-
-.c21 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c21::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c21::-webkit-progress-value {
-  background-color: #ee7c1b;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c21::-moz-progress-bar {
-  background-color: #ee7c1b;
-}
-
-.c21::-ms-fill {
-  background-color: #ee7c1b;
-  border: 0;
-}
-
-.c16 {
-  padding: 0 20px;
-}
-
-.c14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c4 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c11 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c12 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c13 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c6 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c7 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c9 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c10 {
-  color: #3c4043;
-}
-
-.c14 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c14:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c5 {
-  padding: 12px 16px;
-}
-
-.c5:first-child {
-  margin-bottom: -16px;
-}
-
-.c8 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-.c20 {
-  border: none;
-  width: 100%;
-  height: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-}
-
-.c20:focus {
-  outline: 0;
-}
-
-.c19 {
-  -webkit-flex: 0 1 100%;
-  -ms-flex: 0 1 100%;
-  flex: 0 1 100%;
-  border: 1px solid #ddd;
-  padding: 3px 5px;
-  box-sizing: border-box;
-  box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
-  background-color: #fff;
-  color: #32373c;
-  outline: 0;
-  -webkit-transition: 50ms border-color ease-in-out;
-  transition: 50ms border-color ease-in-out;
-  position: relative;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-size: 14px;
-  cursor: text;
-}
-
-.c19::before {
-  display: block;
-  position: absolute;
-  top: -1px;
-  left: -25px;
-  width: 24px;
-  height: 24px;
-  background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22transparent%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
-  background-size: 25px;
-  content: "";
-}
-
-.c0 {
-  border: 0;
-  padding: 0;
-  margin: 0 0 16px;
-}
-
-.c1 {
-  margin: 8px 0;
-  padding: 0;
-  color: #555;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.c3 {
-  margin-right: 16px;
-  color: inherit;
-  font-size: 14px;
-  line-height: 1.71428571;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c2.c2 {
-  margin: 0 8px 0 0;
-  cursor: pointer;
-}
-
-.c15 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin: 10px 0 0 4px;
-  fill: #555;
-  padding-left: 8px;
-}
-
-.c15:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c15::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c15:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c15:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c15 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c15 svg {
-  margin-right: 7px;
-}
-
-.c22 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin-top: 24px;
-}
-
-.c22:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c22::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c22:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c22:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c22 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c15::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c22::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-<SnippetEditor
-  baseUrl="http://example.org/"
-  data={
-    Object {
-      "description": "Test description, %%replacement_variable%%",
-      "slug": "test-slug",
-      "title": "Test title",
-    }
-  }
-  date=""
-  descriptionEditorFieldPlaceholder=""
-  descriptionLengthProgress={
-    Object {
-      "actual": 0,
-      "max": 156,
-      "score": 0,
-    }
-  }
-  faviconSrc=""
-  hasPaperStyle={true}
-  idSuffix=""
-  keyword=""
-  locale="en"
-  mapEditorDataToPreview={null}
-  mobileImageSrc=""
-  mode="mobile"
-  onChange={[Function]}
-  onChangeAnalysisData={[Function]}
-  recommendedReplacementVariables={Array []}
-  replacementVariables={Array []}
-  shoppingData={Object {}}
-  showCloseButton={true}
-  titleLengthProgress={
-    Object {
-      "actual": 0,
-      "max": 600,
-      "score": 0,
-    }
-  }
-  wordsToHighlight={Array []}
->
-  <ErrorBoundary>
-    <div>
-      <ModeSwitcher
-        active="mobile"
-        desktopModeInputId="yoast-google-preview-mode-desktop"
-        mobileModeInputId="yoast-google-preview-mode-mobile"
-        onChange={[Function]}
-      >
-        <ModeSwitcher__Switcher>
-          <StyledComponent
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                  "isStatic": false,
-                  "lastClassName": "c0",
-                  "rules": Array [
-                    "border:0;padding:0;margin:0 0 16px;",
-                  ],
-                },
-                "displayName": "ModeSwitcher__Switcher",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                "target": "fieldset",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
-              }
-            }
-            forwardedRef={null}
-          >
-            <fieldset
-              className="c0"
-            >
-              <ModeSwitcher__SwitcherTitle>
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                        "isStatic": false,
-                        "lastClassName": "c1",
-                        "rules": Array [
-                          "margin:8px 0;padding:0;color:",
-                          "#555",
-                          ";font-size:14px;font-weight:600;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__SwitcherTitle",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                      "target": "legend",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <legend
-                    className="c1"
-                  >
-                    Preview as:
-                  </legend>
-                </StyledComponent>
-              </ModeSwitcher__SwitcherTitle>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": true,
-                    "id": "yoast-google-preview-mode-mobile",
-                  }
-                }
-                type="radio"
-                value="mobile"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": true,
-                      "id": "yoast-google-preview-mode-mobile",
-                    }
-                  }
-                  type="radio"
-                  value="mobile"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": true,
-                        "id": "yoast-google-preview-mode-mobile",
-                      }
-                    }
-                    type="radio"
-                    value="mobile"
-                  >
-                    <input
-                      checked={true}
-                      className="c2"
-                      defaultValue="mobile"
-                      id="yoast-google-preview-mode-mobile"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-mobile"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-mobile"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-mobile"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-mobile"
-                    >
-                      Mobile result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": false,
-                    "id": "yoast-google-preview-mode-desktop",
-                  }
-                }
-                type="radio"
-                value="desktop"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": false,
-                      "id": "yoast-google-preview-mode-desktop",
-                    }
-                  }
-                  type="radio"
-                  value="desktop"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": false,
-                        "id": "yoast-google-preview-mode-desktop",
-                      }
-                    }
-                    type="radio"
-                    value="desktop"
-                  >
-                    <input
-                      checked={false}
-                      className="c2"
-                      defaultValue="desktop"
-                      id="yoast-google-preview-mode-desktop"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-desktop"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-desktop"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-desktop"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-desktop"
-                    >
-                      Desktop result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-            </fieldset>
-          </StyledComponent>
-        </ModeSwitcher__Switcher>
-      </ModeSwitcher>
-      <SnippetPreview
-        activeField={null}
-        breadcrumbs={null}
-        date=""
-        description="Test description, %%replacement_variable%%"
-        faviconSrc=""
-        hoveredField={null}
-        isAmp={false}
-        keyword=""
-        locale="en"
-        mobileImageSrc=""
-        mode="mobile"
-        onHover={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-        shoppingData={Object {}}
-        title="Test title"
-        url="http://example.org/test-slug"
-        wordsToHighlight={Array []}
-      >
-        <section>
-          <SnippetPreview__MobileContainer
-            id="yoast-snippet-preview-container"
-            padding={20}
-            width={null}
-          >
-            <StyledComponent
-              forwardedComponent={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "attrs": Array [],
-                  "componentStyle": ComponentStyle {
-                    "componentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                    "isStatic": false,
-                    "lastClassName": "c4",
-                    "rules": Array [
-                      "border-bottom:1px hidden #fff;border-radius:8px;box-shadow:0 1px 6px rgba(32,33,36,0.28);font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;max-width:",
-                      "400",
-                      "px;box-sizing:border-box;font-size:14px;",
-                    ],
-                  },
-                  "displayName": "SnippetPreview__MobileContainer",
-                  "foldedComponentIds": Array [],
-                  "render": [Function],
-                  "styledComponentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                  "target": "div",
-                  "toString": [Function],
-                  "warnTooManyClasses": [Function],
-                  "withComponent": [Function],
-                }
-              }
-              forwardedRef={null}
-              id="yoast-snippet-preview-container"
-              padding={20}
-              width={null}
-            >
-              <div
-                className="c4"
-                id="yoast-snippet-preview-container"
-                width={null}
-              >
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Url preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseUrl>
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                "isStatic": false,
-                                "lastClassName": "c6",
-                                "rules": Array [
-                                  "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseUrl",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                        >
-                          <div
-                            className="c6"
-                          >
-                            <SnippetPreview__BaseUrlOverflowContainer
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseUp={[Function]}
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                      "isStatic": false,
-                                      "lastClassName": "c7",
-                                      "rules": Array [
-                                        "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                        "overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-bottom:",
-                                        [Function],
-                                        ";padding-top:1px;line-height:",
-                                        [Function],
-                                        ";vertical-align:",
-                                        [Function],
-                                        ";",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__BaseUrlOverflowContainer",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                onMouseUp={[Function]}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c7"
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  onMouseUp={[Function]}
-                                >
-                                  <SnippetPreview__Favicon
-                                    alt=""
-                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                  >
-                                    <StyledComponent
-                                      alt=""
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                            "isStatic": false,
-                                            "lastClassName": "c8",
-                                            "rules": Array [
-                                              "width:16px;height:16px;margin-right:12px;vertical-align:middle;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__Favicon",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                          "target": "img",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                    >
-                                      <img
-                                        alt=""
-                                        className="c8"
-                                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                      />
-                                    </StyledComponent>
-                                  </SnippetPreview__Favicon>
-                                  <SnippetPreview__UrlContentContainer
-                                    screenMode="mobile"
-                                  >
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                            "isStatic": false,
-                                            "lastClassName": "c9",
-                                            "rules": Array [
-                                              "font-size:",
-                                              [Function],
-                                              ";line-height:",
-                                              [Function],
-                                              ";color:",
-                                              [Function],
-                                              ";",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__UrlContentContainer",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      screenMode="mobile"
-                                    >
-                                      <span
-                                        className="c9"
-                                      >
-                                        <SnippetPreview__UrlBaseContainer>
-                                          <StyledComponent
-                                            forwardedComponent={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "attrs": Array [],
-                                                "componentStyle": ComponentStyle {
-                                                  "componentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                  "isStatic": false,
-                                                  "lastClassName": "c10",
-                                                  "rules": Array [
-                                                    "color:",
-                                                    [Function],
-                                                    ";",
-                                                  ],
-                                                },
-                                                "displayName": "SnippetPreview__UrlBaseContainer",
-                                                "foldedComponentIds": Array [],
-                                                "render": [Function],
-                                                "styledComponentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                "target": "span",
-                                                "toString": [Function],
-                                                "warnTooManyClasses": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            forwardedRef={null}
-                                          >
-                                            <span
-                                              className="c10"
-                                            >
-                                              example.org
-                                            </span>
-                                          </StyledComponent>
-                                        </SnippetPreview__UrlBaseContainer>
-                                         › test-slug
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__UrlContentContainer>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__BaseUrlOverflowContainer>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseUrl>
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          SEO title preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseTitle
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                                "isStatic": false,
-                                "lastClassName": "c11",
-                                "rules": Array [
-                                  "cursor:pointer;position:relative;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseTitle",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c11"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__TitleBounded
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                      "isStatic": false,
-                                      "lastClassName": "c12",
-                                      "rules": Array [
-                                        "color:",
-                                        [Function],
-                                        ";text-decoration:none;font-size:",
-                                        [Function],
-                                        ";line-height:",
-                                        [Function],
-                                        ";font-weight:normal;margin:0;display:inline-block;overflow:hidden;max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                        "max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__TitleBounded",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__Title-sc-1hxg8jo-4",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c12"
-                                >
-                                  <SnippetPreview__TitleUnboundedMobile>
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                            "isStatic": false,
-                                            "lastClassName": "c13",
-                                            "rules": Array [
-                                              "display:inline-block;max-height:40px;padding-top:1px;vertical-align:top;overflow:hidden;text-overflow:ellipsis;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__TitleUnboundedMobile",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={[Function]}
-                                    >
-                                      <span
-                                        className="c13"
-                                      >
-                                        Test title
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__TitleUnboundedMobile>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__TitleBounded>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseTitle>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--desktop"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--desktop"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--desktop"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Meta description preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__MobileDescription
-                        isDescriptionPlaceholder={false}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                "isStatic": false,
-                                "lastClassName": "c14",
-                                "rules": Array [
-                                  "color:",
-                                  "#3c4043",
-                                  ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                  "600",
-                                  "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__MobileDescription",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          isDescriptionPlaceholder={false}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c14"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__MobileDescription
-                              isDescriptionPlaceholder={false}
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                      "isStatic": false,
-                                      "lastClassName": "c14",
-                                      "rules": Array [
-                                        "color:",
-                                        "#3c4043",
-                                        ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                        "600",
-                                        "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__MobileDescription",
-                                    "foldedComponentIds": Array [],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={[Function]}
-                                isDescriptionPlaceholder={false}
-                              >
-                                <div
-                                  className="c14"
-                                >
-                                  Test description, %%replacement_variable%%
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__MobileDescription>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__MobileDescription>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--mobile"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--mobile"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--mobile"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                      <ProductDataMobile
-                        shoppingData={Object {}}
-                      >
-                        <ProductDataMobile__ProductData>
-                          <StyledComponent
-                            forwardedComponent={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "attrs": Array [],
-                                "componentStyle": ComponentStyle {
-                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                  "isStatic": false,
-                                  "lastClassName": "c14",
-                                  "rules": Array [
-                                    "display:flex;",
-                                  ],
-                                },
-                                "displayName": "ProductDataMobile__ProductData",
-                                "foldedComponentIds": Array [],
-                                "render": [Function],
-                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                "target": "div",
-                                "toString": [Function],
-                                "warnTooManyClasses": [Function],
-                                "withComponent": [Function],
-                              }
-                            }
-                            forwardedRef={null}
-                          >
-                            <div
-                              className="c14"
-                            />
-                          </StyledComponent>
-                        </ProductDataMobile__ProductData>
-                      </ProductDataMobile>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-              </div>
-            </StyledComponent>
-          </SnippetPreview__MobileContainer>
-        </section>
-      </SnippetPreview>
-      <SnippetEditor__EditSnippetButton
-        activeBackgroundColor="#f7f7f7"
-        activeBorderColor="#000"
-        activeColor="#000"
-        aria-expanded={true}
-        backgroundColor="#f7f7f7"
-        borderColor="#ccc"
-        boxShadowColor="#ccc"
-        focusBackgroundColor="#fff"
-        focusBorderColor="#0066cd"
-        focusBoxShadowColor="#084a67"
-        focusColor="#000"
-        hoverBackgroundColor="#fff"
-        hoverColor="#000"
-        onClick={[Function]}
-        textColor="#555"
-        type="button"
-      >
-        <StyledComponent
-          activeBackgroundColor="#f7f7f7"
-          activeBorderColor="#000"
-          activeColor="#000"
-          aria-expanded={true}
-          backgroundColor="#f7f7f7"
-          borderColor="#ccc"
-          boxShadowColor="#ccc"
-          focusBackgroundColor="#fff"
-          focusBorderColor="#0066cd"
-          focusBoxShadowColor="#084a67"
-          focusColor="#000"
-          forwardedComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "_foldedDefaultProps": Object {
-                "activeBackgroundColor": "#f7f7f7",
-                "activeBorderColor": "#000",
-                "activeColor": "#000",
-                "backgroundColor": "#f7f7f7",
-                "borderColor": "#ccc",
-                "boxShadowColor": "#ccc",
-                "focusBackgroundColor": "#fff",
-                "focusBorderColor": "#0066cd",
-                "focusBoxShadowColor": "#084a67",
-                "focusColor": "#000",
-                "hoverBackgroundColor": "#fff",
-                "hoverColor": "#000",
-                "textColor": "#555",
-                "type": "button",
-              },
-              "attrs": Array [],
-              "componentStyle": ComponentStyle {
-                "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-                "isStatic": false,
-                "lastClassName": "c15",
-                "rules": Array [
-                  "color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";background:",
-                  [Function],
-                  ";box-shadow:0 1px 0 ",
-                  [Function],
-                  ";",
-                  "&:active{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";box-shadow:inset 0 2px 5px -3px ",
-                  [Function],
-                  "}",
-                  "&::-moz-focus-inner{border-width:0;}&:focus{outline:none;border-color:",
-                  [Function],
-                  ";color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";box-shadow:0 0 3px ",
-                  [Function],
-                  "}",
-                  "&:hover{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:var(--yoast-color-border--default);}",
-                  "display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-width:",
-                  "1px",
-                  ";border-style:solid;margin:0;padding:",
-                  "4px",
-                  " 10px;border-radius:3px;cursor:pointer;box-sizing:border-box;font-size:inherit;font-family:inherit;font-weight:inherit;text-align:",
-                  [Function],
-                  ";overflow:visible;min-height:",
-                  "32px",
-                  ";transition:var(--yoast-transition-default);svg{align-self:center;}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){::after{display:inline-block;content:\\"\\";min-height:",
-                  "22px",
-                  ";}}",
-                  "height:33px;border:1px solid #dbdbdb;box-shadow:none;font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;",
-                  "margin:",
-                  [Function],
-                  ";fill:",
-                  "#555",
-                  ";padding-left:8px;& svg{",
-                  [Function],
-                  ":7px;}",
-                ],
-              },
-              "displayName": "SnippetEditor__EditSnippetButton",
-              "foldedComponentIds": Array [
-                "Button__BaseButton-sc-32rbq-4",
-                "Button-sc-32rbq-3",
-                "Button-sc-32rbq-1",
-                "Button-sc-32rbq-2",
-                "Button-sc-32rbq-0",
-                "SnippetEditor__SnippetEditorButton-sc-144bmm3-0",
-              ],
-              "propTypes": Object {
-                "activeBackgroundColor": [Function],
-                "activeBorderColor": [Function],
-                "activeColor": [Function],
-                "backgroundColor": [Function],
-                "borderColor": [Function],
-                "boxShadowColor": [Function],
-                "focusBackgroundColor": [Function],
-                "focusBorderColor": [Function],
-                "focusBoxShadowColor": [Function],
-                "focusColor": [Function],
-                "hoverBackgroundColor": [Function],
-                "hoverColor": [Function],
-                "textColor": [Function],
-                "type": [Function],
-              },
-              "render": [Function],
-              "styledComponentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-              "target": "button",
-              "toString": [Function],
-              "warnTooManyClasses": [Function],
-              "withComponent": [Function],
-            }
-          }
-          forwardedRef={[Function]}
-          hoverBackgroundColor="#fff"
-          hoverColor="#000"
-          onClick={[Function]}
-          textColor="#555"
-          type="button"
-        >
-          <button
-            aria-expanded={true}
-            className="c15"
-            onClick={[Function]}
-            type="button"
-          >
-            <SvgIcon
-              className=""
-              color="currentColor"
-              icon="edit"
-              size="16px"
-            >
-              <SvgIconSet
-                className=""
-                color="currentColor"
-                icon="edit"
-                iconSet={
-                  Object {
-                    "alert-error": Object {
-                      "path": "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-info": Object {
-                      "path": "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-success": Object {
-                      "path": "M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-warning": Object {
-                      "path": "M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z",
-                      "viewbox": "0 0 576 512",
-                    },
-                    "angle-down": Object {
-                      "path": "M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-left": Object {
-                      "path": "M1203 544q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-right": Object {
-                      "path": "M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-up": Object {
-                      "path": "M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-down": Object {
-                      "path": "M896 1791L120.91 448.5L1671.09 448.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-left": Object {
-                      "path": "M1343.5 1671.09L1 896L1343.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-right": Object {
-                      "path": "M1791 896L448.5 1671.09L448.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-up": Object {
-                      "path": "M1671.09 1343.5L120.91 1343.5L896 1z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "caret-right": Object {
-                      "path": "M 0 384.662 V 127.338 c 0 -17.818 21.543 -26.741 34.142 -14.142 l 128.662 128.662 c 7.81 7.81 7.81 20.474 0 28.284 L 34.142 398.804 C 21.543 411.404 0 402.48 0 384.662 Z",
-                      "viewbox": "0 0 192 512",
-                    },
-                    "check": Object {
-                      "path": "M249.2,431.2c-23,0-45.6,9.4-61.8,25.6L25.6,618.6C9.4,634.8,0,657.4,0,680.4c0,23,9.4,45.6,25.6,61.8 l593.1,593.1c16.2,16.2,38.8,25.6,61.8,25.6c23,0,45.6-9.4,61.8-25.6L1766.4,311c16.2-16.2,25.6-38.8,25.6-61.8 s-9.4-45.6-25.6-61.8L1604.5,25.6C1588.3,9.4,1565.8,0,1542.8,0c-23,0-45.6,9.4-61.8,25.6L680.4,827L311,456.3 C294.8,440.5,272.3,431.2,249.2,431.2z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "chevron-down": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "chevron-up": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "circle": Object {
-                      "path": "M1664 896q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "clipboard": Object {
-                      "path": "M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "desktop": Object {
-                      "path": "M1728 992v-832q0-13-9.5-22.5t-22.5-9.5h-1600q-13 0-22.5 9.5t-9.5 22.5v832q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5zm128-832v1088q0 66-47 113t-113 47h-544q0 37 16 77.5t32 71 16 43.5q0 26-19 45t-45 19h-512q-26 0-45-19t-19-45q0-14 16-44t32-70 16-78h-544q-66 0-113-47t-47-113v-1088q0-66 47-113t113-47h1600q66 0 113 47t47 113z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "edit": Object {
-                      "path": "M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "exclamation-triangle": Object {
-                      "path": "M1024 1375v-190q0-14-9.5-23.5T992 1152H800q-13 0-22.5 9.5T768 1185v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11H786q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17H128q-34 0-63.5-17T18 1601q-37-63-2-126L784 67q17-31 47-49t65-18 65 18 47 49z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "eye": Object {
-                      "path": "M1664 960q-152-236-381-353 61 104 61 225 0 185-131.5 316.5t-316.5 131.5-316.5-131.5-131.5-316.5q0-121 61-225-229 117-381 353 133 205 333.5 326.5t434.5 121.5 434.5-121.5 333.5-326.5zm-720-384q0-20-14-34t-34-14q-125 0-214.5 89.5t-89.5 214.5q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5t-499.5 138.5-499.5-139-376.5-368q-20-35-20-69t20-69q140-229 376.5-368t499.5-139 499.5 139 376.5 368q20 35 20 69z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "file-text": Object {
-                      "path": "M1596 380q28 28 48 76t20 88v1152q0 40-28 68t-68 28h-1344q-40 0-68-28t-28-68v-1600q0-40 28-68t68-28h896q40 0 88 20t76 48zm-444-244v376h376q-10-29-22-41l-313-313q-12-12-41-22zm384 1528v-1024h-416q-40 0-68-28t-28-68v-416h-768v1536h1280zm-1024-864q0-14 9-23t23-9h704q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64zm736 224q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704zm0 256q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "gear": Object {
-                      "path": "M1800 800h-218q-26 -107 -81 -193l154 -154l-210 -210l-154 154q-88 -55 -191 -79v-218h-300v218q-103 24 -191 79l-154 -154l-212 212l154 154q-55 88 -79 191h-218v297h217q23 101 80 194l-154 154l210 210l154 -154q85 54 193 81v218h300v-218q103 -24 191 -79 l154 154l212 -212l-154 -154q57 -93 80 -194h217v-297zM950 650q124 0 212 88t88 212t-88 212t-212 88t-212 -88t-88 -212t88 -212t212 -88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "key": Object {
-                      "path": "M832 512q0-80-56-136t-136-56-136 56-56 136q0 42 19 83-41-19-83-19-80 0-136 56t-56 136 56 136 136 56 136-56 56-136q0-42-19-83 41 19 83 19 80 0 136-56t56-136zm851 704q0 17-49 66t-66 49q-9 0-28.5-16t-36.5-33-38.5-40-24.5-26l-96 96 220 220q28 28 28 68 0 42-39 81t-81 39q-40 0-68-28l-671-671q-176 131-365 131-163 0-265.5-102.5t-102.5-265.5q0-160 95-313t248-248 313-95q163 0 265.5 102.5t102.5 265.5q0 189-131 365l355 355 96-96q-3-3-26-24.5t-40-38.5-33-36.5-16-28.5q0-17 49-66t66-49q13 0 23 10 6 6 46 44.5t82 79.5 86.5 86 73 78 28.5 41z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "list": Object {
-                      "path": "M384 1408q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm0-512q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm-1408-928q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm0-512v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "loading-spinner": Object {
-                      "CustomComponent": Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                          "isStatic": false,
-                          "rules": Array [
-                            "width:",
-                            [Function],
-                            ";height:",
-                            [Function],
-                            ";flex:none;animation:loadingSpinnerRotator 1.4s linear infinite;& .path{stroke:",
-                            [Function],
-                            ";stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:loadingSpinnerDash 1.4s ease-in-out infinite;}@keyframes loadingSpinnerRotator{0%{transform:rotate( 0deg );}100%{transform:rotate( 270deg );}}@keyframes loadingSpinnerDash{0%{stroke-dashoffset:187;}50%{stroke-dashoffset:47;transform:rotate( 135deg );}100%{stroke-dashoffset:187;transform:rotate( 450deg );}}",
-                          ],
-                        },
-                        "displayName": "SvgIcon__StyledSvgSpinner",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                        "target": "svg",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      },
-                      "path": Array [
-                        <circle
-                          className="path"
-                          cx="33"
-                          cy="33"
-                          fill="none"
-                          r="30"
-                          strokeLinecap="round"
-                          strokeWidth="6"
-                        />,
-                      ],
-                      "viewbox": "0 0 66 66",
-                    },
-                    "mobile": Object {
-                      "path": "M976 1408q0-33-23.5-56.5t-56.5-23.5-56.5 23.5-23.5 56.5 23.5 56.5 56.5 23.5 56.5-23.5 23.5-56.5zm208-160v-704q0-13-9.5-22.5t-22.5-9.5h-512q-13 0-22.5 9.5t-9.5 22.5v704q0 13 9.5 22.5t22.5 9.5h512q13 0 22.5-9.5t9.5-22.5zm-192-848q0-16-16-16h-160q-16 0-16 16t16 16h160q16 0 16-16zm288-16v1024q0 52-38 90t-90 38h-512q-52 0-90-38t-38-90v-1024q0-52 38-90t90-38h512q52 0 90 38t38 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "pencil-square": Object {
-                      "path": "M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus": Object {
-                      "path": "M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus-circle": Object {
-                      "path": "M1344 960v-128q0-26-19-45t-45-19h-256v-256q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v256h-256q-26 0-45 19t-19 45v128q0 26 19 45t45 19h256v256q0 26 19 45t45 19h128q26 0 45-19t19-45v-256h256q26 0 45-19t19-45zm320-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "question-circle": Object {
-                      "path": "M1024 1376v-192q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v192q0 14 9 23t23 9h192q14 0 23-9t9-23zm256-672q0-88-55.5-163t-138.5-116-170-41q-243 0-371 213-15 24 8 42l132 100q7 6 19 6 16 0 25-12 53-68 86-92 34-24 86-24 48 0 85.5 26t37.5 59q0 38-20 61t-68 45q-63 28-115.5 86.5t-52.5 125.5v36q0 14 9 23t23 9h192q14 0 23-9t9-23q0-19 21.5-49.5t54.5-49.5q32-18 49-28.5t46-35 44.5-48 28-60.5 12.5-81zm384 192q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "search": Object {
-                      "path": "M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "seo-score-bad": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M338.2 394.2C315.8 367.4 282.9 352 248 352s-67.8 15.4-90.2 42.2c-13.5 16.3-38.1-4.2-24.6-20.5C161.7 339.6 203.6 320 248 320 s86.3 19.6 114.7 53.8C376.3 390 351.7 410.5 338.2 394.2L338.2 394.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-good": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M362.8 346.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5c22.4 26.9 55.2 42.2 90.2 42.2 s67.8-15.4 90.2-42.2C351.6 309.5 376.3 329.9 362.8 346.2L362.8 346.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-none": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-ok": Object {
-                      "path": Array [
-                        <path
-                          d="M344 336c21.2 0 21.2 32 0 32H152c-21.2 0-21.2-32 0-32H344z"
-                          fill="#000000"
-                        />,
-                        <circle
-                          cx="328"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <circle
-                          cx="168"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <path
-                          d="M248 8c137 0 248 111 248 248S385 504 248 504S0 393 0 256S111 8 248 8z M360 208c0-17.7-14.3-32-32-32 s-32 14.3-32 32s14.3 32 32 32S360 225.7 360 208z M344 368c21.2 0 21.2-32 0-32H152c-21.2 0-21.2 32 0 32H344z M200 208 c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32S200 225.7 200 208z"
-                        />,
-                      ],
-                      "viewbox": "0 0 496 512",
-                    },
-                    "times": Object {
-                      "path": "M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "times-circle": Object {
-                      "path": "M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z",
-                      "viewbox": "0 0 20 20",
-                    },
-                  }
-                }
-                size="16px"
-              >
-                <createSvgIconComponent__StyledSvg
-                  aria-hidden={true}
-                  className="yoast-svg-icon yoast-svg-icon-edit"
-                  fill="currentColor"
-                  focusable="false"
-                  role="img"
-                  size="16px"
-                  viewBox="0 0 1792 1792"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <svg
-                    aria-hidden={true}
-                    className="yoast-svg-icon yoast-svg-icon-edit createSvgIconComponent__StyledSvg-sc-1h4gl3a-0 cPnaHk"
-                    fill="currentColor"
-                    focusable="false"
-                    role="img"
-                    size="16px"
-                    viewBox="0 0 1792 1792"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"
-                    />
-                  </svg>
-                </createSvgIconComponent__StyledSvg>
-              </SvgIconSet>
-            </SvgIcon>
-            Edit snippet
-          </button>
-        </StyledComponent>
-      </SnippetEditor__EditSnippetButton>
-      <SnippetEditorFields
-        activeField={null}
-        containerPadding="0 20px"
-        data={
-          Object {
-            "description": "Test description, %%replacement_variable%%",
-            "slug": "test-slug",
-            "title": "Test title",
-          }
-        }
-        descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here"
-        descriptionInputId="yoast-google-preview-description"
-        descriptionLengthProgress={
-          Object {
-            "actual": 42,
-            "max": 156,
-            "score": 6,
-          }
-        }
-        hoveredField={null}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        recommendedReplacementVariables={Array []}
-        replacementVariables={Array []}
-        slugInputId="yoast-google-preview-slug"
-        titleInputId="yoast-google-preview-title"
-        titleLengthProgress={
-          Object {
-            "actual": 0,
-            "max": 600,
-            "score": 1,
-          }
-        }
-      >
-        <SettingsSnippetEditorFields__StyledEditor
-          padding="0 20px"
-        >
-          <StyledComponent
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
-                  "isStatic": false,
-                  "lastClassName": "c16",
-                  "rules": Array [
-                    "padding:",
-                    [Function],
-                    ";",
-                  ],
-                },
-                "displayName": "SettingsSnippetEditorFields__StyledEditor",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
-                "target": "section",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
-              }
-            }
-            forwardedRef={null}
-            padding="0 20px"
-          >
-            <section
-              className="c16"
-            >
-              <ReplacementVariableEditorMock
-                content="Test title"
-                editorRef={[Function]}
-                fieldId="yoast-google-preview-title"
-                isActive={false}
-                isHovered={false}
-                label="SEO title"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                recommendedReplacementVariables={Array []}
-                replacementVariables={Array []}
-                type="title"
-                withCaret={true}
-              >
-                <div />
-              </ReplacementVariableEditorMock>
-              <ProgressBar
-                aria-hidden="true"
-                backgroundColor="#f7f7f7"
-                borderColor="#ddd"
-                max={600}
-                progressColor="#dc3232"
-                value={0}
-              >
-                <StyledComponent
-                  aria-hidden="true"
-                  backgroundColor="#f7f7f7"
-                  borderColor="#ddd"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "_foldedDefaultProps": Object {
-                        "aria-hidden": "true",
-                        "backgroundColor": "#f7f7f7",
-                        "borderColor": "#ddd",
-                        "max": 1,
-                        "progressColor": "#7ad03a",
-                        "value": 0,
-                      },
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ProgressBar-sc-9g9yx6-0",
-                        "isStatic": false,
-                        "lastClassName": "c21",
-                        "rules": Array [
-                          "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
-                          [Function],
-                          ";border:1px solid ",
-                          [Function],
-                          ";::-webkit-progress-bar{background-color:",
-                          [Function],
-                          ";}::-webkit-progress-value{background-color:",
-                          [Function],
-                          ";transition:width 250ms;}::-moz-progress-bar{background-color:",
-                          [Function],
-                          ";}::-ms-fill{background-color:",
-                          [Function],
-                          ";border:0;}",
-                        ],
-                      },
-                      "displayName": "ProgressBar",
-                      "foldedComponentIds": Array [],
-                      "propTypes": Object {
-                        "aria-hidden": [Function],
-                        "backgroundColor": [Function],
-                        "borderColor": [Function],
-                        "max": [Function],
-                        "progressColor": [Function],
-                        "value": [Function],
-                      },
-                      "render": [Function],
-                      "styledComponentId": "ProgressBar-sc-9g9yx6-0",
-                      "target": "progress",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  max={600}
-                  progressColor="#dc3232"
-                  value={0}
-                >
-                  <progress
-                    aria-hidden="true"
-                    className="c17"
-                    max={600}
-                    value={0}
-                  />
-                </StyledComponent>
-              </ProgressBar>
-              <Label__SimulatedLabel
-                id="snippet-editor-field-2-slug"
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "Label__SimulatedLabel-mitdcc-0",
-                        "isStatic": false,
-                        "lastClassName": "c18",
-                        "rules": Array [
-                          "flex:1 1 200px;min-width:200px;cursor:pointer;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;margin:4px 0;color:#303030;font-weight:500;",
-                        ],
-                      },
-                      "displayName": "Label__SimulatedLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "Label__SimulatedLabel-mitdcc-0",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  id="snippet-editor-field-2-slug"
-                  onClick={[Function]}
-                >
-                  <div
-                    className="c18"
-                    id="snippet-editor-field-2-slug"
-                    onClick={[Function]}
-                  >
-                    Slug
-                  </div>
-                </StyledComponent>
-              </Label__SimulatedLabel>
-              <helpers
-                isActive={false}
-                isHovered={false}
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        Object {},
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "helpers-sc-15q2ybx-0",
-                        "isStatic": false,
-                        "lastClassName": "c19",
-                        "rules": Array [
-                          "flex:0 1 100%;border:1px solid ",
-                          [Function],
-                          ";padding:3px 5px;box-sizing:border-box;box-shadow:",
-                          [Function],
-                          ";background-color:#fff;color:#32373c;outline:0;transition:50ms border-color ease-in-out;position:relative;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;font-size:14px;cursor:text;",
-                          "&::before{display:block;position:absolute;top:-1px;",
-                          [Function],
-                          ":-25px;width:24px;height:24px;background-image:url( ",
-                          [Function],
-                          " );background-size:25px;content:\\"\\";}",
-                        ],
-                      },
-                      "displayName": "helpers",
-                      "foldedComponentIds": Array [
-                        "InputContainer__VariableEditorInputContainer-sc-140v6lg-0",
-                      ],
-                      "render": [Function],
-                      "styledComponentId": "helpers-sc-15q2ybx-0",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  isActive={false}
-                  isHovered={false}
-                  onClick={[Function]}
-                >
-                  <div
-                    className="c19"
-                    onClick={[Function]}
-                  >
-                    <SnippetEditorFields__SlugInput
-                      aria-labelledby="snippet-editor-field-2-slug"
-                      id="yoast-google-preview-slug"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      value="test-slug"
-                    >
-                      <StyledComponent
-                        aria-labelledby="snippet-editor-field-2-slug"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
-                              "isStatic": false,
-                              "lastClassName": "c20",
-                              "rules": Array [
-                                "border:none;width:100%;height:inherit;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;&:focus{outline:0;}",
-                              ],
-                            },
-                            "displayName": "SnippetEditorFields__SlugInput",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
-                          }
-                        }
-                        forwardedRef={[Function]}
-                        id="yoast-google-preview-slug"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onFocus={[Function]}
-                        value="test-slug"
-                      >
-                        <input
-                          aria-labelledby="snippet-editor-field-2-slug"
-                          className="c20"
-                          id="yoast-google-preview-slug"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          value="test-slug"
-                        />
-                      </StyledComponent>
-                    </SnippetEditorFields__SlugInput>
-                  </div>
-                </StyledComponent>
-              </helpers>
-              <ReplacementVariableEditorMock
-                content="Test description, %%replacement_variable%%"
-                editorRef={[Function]}
-                fieldId="yoast-google-preview-description"
-                isActive={false}
-                isHovered={false}
-                label="Meta description"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                placeholder="Modify your meta description by editing it right here"
-                recommendedReplacementVariables={Array []}
-                replacementVariables={Array []}
-                type="description"
-                withCaret={true}
-              >
-                <div />
-              </ReplacementVariableEditorMock>
-              <ProgressBar
-                aria-hidden="true"
-                backgroundColor="#f7f7f7"
-                borderColor="#ddd"
-                max={156}
-                progressColor="#ee7c1b"
-                value={42}
-              >
-                <StyledComponent
-                  aria-hidden="true"
-                  backgroundColor="#f7f7f7"
-                  borderColor="#ddd"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "_foldedDefaultProps": Object {
-                        "aria-hidden": "true",
-                        "backgroundColor": "#f7f7f7",
-                        "borderColor": "#ddd",
-                        "max": 1,
-                        "progressColor": "#7ad03a",
-                        "value": 0,
-                      },
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ProgressBar-sc-9g9yx6-0",
-                        "isStatic": false,
-                        "lastClassName": "c21",
-                        "rules": Array [
-                          "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
-                          [Function],
-                          ";border:1px solid ",
-                          [Function],
-                          ";::-webkit-progress-bar{background-color:",
-                          [Function],
-                          ";}::-webkit-progress-value{background-color:",
-                          [Function],
-                          ";transition:width 250ms;}::-moz-progress-bar{background-color:",
-                          [Function],
-                          ";}::-ms-fill{background-color:",
-                          [Function],
-                          ";border:0;}",
-                        ],
-                      },
-                      "displayName": "ProgressBar",
-                      "foldedComponentIds": Array [],
-                      "propTypes": Object {
-                        "aria-hidden": [Function],
-                        "backgroundColor": [Function],
-                        "borderColor": [Function],
-                        "max": [Function],
-                        "progressColor": [Function],
-                        "value": [Function],
-                      },
-                      "render": [Function],
-                      "styledComponentId": "ProgressBar-sc-9g9yx6-0",
-                      "target": "progress",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  max={156}
-                  progressColor="#ee7c1b"
-                  value={42}
-                >
-                  <progress
-                    aria-hidden="true"
-                    className="c21"
-                    max={156}
-                    value={42}
-                  />
-                </StyledComponent>
-              </ProgressBar>
-            </section>
-          </StyledComponent>
-        </SettingsSnippetEditorFields__StyledEditor>
-      </SnippetEditorFields>
-      <SnippetEditor__CloseEditorButton
-        activeBackgroundColor="#f7f7f7"
-        activeBorderColor="#000"
-        activeColor="#000"
-        backgroundColor="#f7f7f7"
-        borderColor="#ccc"
-        boxShadowColor="#ccc"
-        focusBackgroundColor="#fff"
-        focusBorderColor="#0066cd"
-        focusBoxShadowColor="#084a67"
-        focusColor="#000"
-        hoverBackgroundColor="#fff"
-        hoverColor="#000"
-        onClick={[Function]}
-        textColor="#555"
-        type="button"
-      >
-        <StyledComponent
-          activeBackgroundColor="#f7f7f7"
-          activeBorderColor="#000"
-          activeColor="#000"
-          backgroundColor="#f7f7f7"
-          borderColor="#ccc"
-          boxShadowColor="#ccc"
-          focusBackgroundColor="#fff"
-          focusBorderColor="#0066cd"
-          focusBoxShadowColor="#084a67"
-          focusColor="#000"
-          forwardedComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "_foldedDefaultProps": Object {
-                "activeBackgroundColor": "#f7f7f7",
-                "activeBorderColor": "#000",
-                "activeColor": "#000",
-                "backgroundColor": "#f7f7f7",
-                "borderColor": "#ccc",
-                "boxShadowColor": "#ccc",
-                "focusBackgroundColor": "#fff",
-                "focusBorderColor": "#0066cd",
-                "focusBoxShadowColor": "#084a67",
-                "focusColor": "#000",
-                "hoverBackgroundColor": "#fff",
-                "hoverColor": "#000",
-                "textColor": "#555",
-                "type": "button",
-              },
-              "attrs": Array [],
-              "componentStyle": ComponentStyle {
-                "componentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
-                "isStatic": false,
-                "lastClassName": "c22",
-                "rules": Array [
-                  "color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";background:",
-                  [Function],
-                  ";box-shadow:0 1px 0 ",
-                  [Function],
-                  ";",
-                  "&:active{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";box-shadow:inset 0 2px 5px -3px ",
-                  [Function],
-                  "}",
-                  "&::-moz-focus-inner{border-width:0;}&:focus{outline:none;border-color:",
-                  [Function],
-                  ";color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";box-shadow:0 0 3px ",
-                  [Function],
-                  "}",
-                  "&:hover{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:var(--yoast-color-border--default);}",
-                  "display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-width:",
-                  "1px",
-                  ";border-style:solid;margin:0;padding:",
-                  "4px",
-                  " 10px;border-radius:3px;cursor:pointer;box-sizing:border-box;font-size:inherit;font-family:inherit;font-weight:inherit;text-align:",
-                  [Function],
-                  ";overflow:visible;min-height:",
-                  "32px",
-                  ";transition:var(--yoast-transition-default);svg{align-self:center;}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){::after{display:inline-block;content:\\"\\";min-height:",
-                  "22px",
-                  ";}}",
-                  "height:33px;border:1px solid #dbdbdb;box-shadow:none;font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;",
-                  "margin-top:24px;",
-                ],
-              },
-              "displayName": "SnippetEditor__CloseEditorButton",
-              "foldedComponentIds": Array [
-                "Button__BaseButton-sc-32rbq-4",
-                "Button-sc-32rbq-3",
-                "Button-sc-32rbq-1",
-                "Button-sc-32rbq-2",
-                "Button-sc-32rbq-0",
-                "SnippetEditor__SnippetEditorButton-sc-144bmm3-0",
-              ],
-              "propTypes": Object {
-                "activeBackgroundColor": [Function],
-                "activeBorderColor": [Function],
-                "activeColor": [Function],
-                "backgroundColor": [Function],
-                "borderColor": [Function],
-                "boxShadowColor": [Function],
-                "focusBackgroundColor": [Function],
-                "focusBorderColor": [Function],
-                "focusBoxShadowColor": [Function],
-                "focusColor": [Function],
-                "hoverBackgroundColor": [Function],
-                "hoverColor": [Function],
-                "textColor": [Function],
-                "type": [Function],
-              },
-              "render": [Function],
-              "styledComponentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
-              "target": "button",
-              "toString": [Function],
-              "warnTooManyClasses": [Function],
-              "withComponent": [Function],
-            }
-          }
-          forwardedRef={null}
-          hoverBackgroundColor="#fff"
-          hoverColor="#000"
-          onClick={[Function]}
-          textColor="#555"
-          type="button"
-        >
-          <button
-            className="c22"
-            onClick={[Function]}
-            type="button"
-          >
-            Close snippet editor
-          </button>
-        </StyledComponent>
-      </SnippetEditor__CloseEditorButton>
-    </div>
-  </ErrorBoundary>
-</SnippetEditor>
-`;
-
-exports[`SnippetEditor passes replacement variables to the title and description editor 1`] = `
-.c18 {
-  -webkit-flex: 1 1 200px;
-  -ms-flex: 1 1 200px;
-  flex: 1 1 200px;
-  min-width: 200px;
-  cursor: pointer;
-  font-size: 14px;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  margin: 4px 0;
-  color: #303030;
-  font-weight: 500;
-}
-
-.c17 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c17::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c17::-webkit-progress-value {
-  background-color: #dc3232;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c17::-moz-progress-bar {
-  background-color: #dc3232;
-}
-
-.c17::-ms-fill {
-  background-color: #dc3232;
-  border: 0;
-}
-
-.c21 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c21::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c21::-webkit-progress-value {
-  background-color: #ee7c1b;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c21::-moz-progress-bar {
-  background-color: #ee7c1b;
-}
-
-.c21::-ms-fill {
-  background-color: #ee7c1b;
-  border: 0;
-}
-
-.c16 {
-  padding: 0 20px;
-}
-
-.c14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c4 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c11 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c12 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c13 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c6 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c7 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c9 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c10 {
-  color: #3c4043;
-}
-
-.c14 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c14:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c5 {
-  padding: 12px 16px;
-}
-
-.c5:first-child {
-  margin-bottom: -16px;
-}
-
-.c8 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-.c20 {
-  border: none;
-  width: 100%;
-  height: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-}
-
-.c20:focus {
-  outline: 0;
-}
-
-.c19 {
-  -webkit-flex: 0 1 100%;
-  -ms-flex: 0 1 100%;
-  flex: 0 1 100%;
-  border: 1px solid #ddd;
-  padding: 3px 5px;
-  box-sizing: border-box;
-  box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
-  background-color: #fff;
-  color: #32373c;
-  outline: 0;
-  -webkit-transition: 50ms border-color ease-in-out;
-  transition: 50ms border-color ease-in-out;
-  position: relative;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-size: 14px;
-  cursor: text;
-}
-
-.c19::before {
-  display: block;
-  position: absolute;
-  top: -1px;
-  left: -25px;
-  width: 24px;
-  height: 24px;
-  background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22transparent%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
-  background-size: 25px;
-  content: "";
-}
-
-.c0 {
-  border: 0;
-  padding: 0;
-  margin: 0 0 16px;
-}
-
-.c1 {
-  margin: 8px 0;
-  padding: 0;
-  color: #555;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.c3 {
-  margin-right: 16px;
-  color: inherit;
-  font-size: 14px;
-  line-height: 1.71428571;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c2.c2 {
-  margin: 0 8px 0 0;
-  cursor: pointer;
-}
-
-.c15 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin: 10px 0 0 4px;
-  fill: #555;
-  padding-left: 8px;
-}
-
-.c15:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c15::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c15:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c15:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c15 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c15 svg {
-  margin-right: 7px;
-}
-
-.c22 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin-top: 24px;
-}
-
-.c22:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c22::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c22:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c22:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c22 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c15::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c22::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-<SnippetEditor
-  baseUrl="http://example.org/"
-  data={
-    Object {
-      "description": "Test description, %%replacement_variable%%",
-      "slug": "test-slug",
-      "title": "Test title",
-    }
-  }
-  date=""
-  descriptionEditorFieldPlaceholder=""
-  descriptionLengthProgress={
-    Object {
-      "actual": 0,
-      "max": 156,
-      "score": 0,
-    }
-  }
-  faviconSrc=""
-  hasPaperStyle={true}
-  idSuffix=""
-  keyword=""
-  locale="en"
-  mapEditorDataToPreview={null}
-  mobileImageSrc=""
-  mode="mobile"
-  onChange={[Function]}
-  onChangeAnalysisData={[Function]}
-  recommendedReplacementVariables={Array []}
-  replacementVariables={
-    Array [
-      Object {
-        "description": "Title",
-        "label": "Title",
-        "name": "title",
-        "value": "Title!!!",
-      },
-      Object {
-        "description": "Excerpt",
-        "label": "Excerpt",
-        "name": "excerpt",
-        "value": "Excerpt!!!",
-      },
-    ]
-  }
-  shoppingData={Object {}}
-  showCloseButton={true}
-  titleLengthProgress={
-    Object {
-      "actual": 0,
-      "max": 600,
-      "score": 0,
-    }
-  }
-  wordsToHighlight={Array []}
->
-  <ErrorBoundary>
-    <div>
-      <ModeSwitcher
-        active="mobile"
-        desktopModeInputId="yoast-google-preview-mode-desktop"
-        mobileModeInputId="yoast-google-preview-mode-mobile"
-        onChange={[Function]}
-      >
-        <ModeSwitcher__Switcher>
-          <StyledComponent
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                  "isStatic": false,
-                  "lastClassName": "c0",
-                  "rules": Array [
-                    "border:0;padding:0;margin:0 0 16px;",
-                  ],
-                },
-                "displayName": "ModeSwitcher__Switcher",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                "target": "fieldset",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
-              }
-            }
-            forwardedRef={null}
-          >
-            <fieldset
-              className="c0"
-            >
-              <ModeSwitcher__SwitcherTitle>
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                        "isStatic": false,
-                        "lastClassName": "c1",
-                        "rules": Array [
-                          "margin:8px 0;padding:0;color:",
-                          "#555",
-                          ";font-size:14px;font-weight:600;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__SwitcherTitle",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                      "target": "legend",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <legend
-                    className="c1"
-                  >
-                    Preview as:
-                  </legend>
-                </StyledComponent>
-              </ModeSwitcher__SwitcherTitle>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": true,
-                    "id": "yoast-google-preview-mode-mobile",
-                  }
-                }
-                type="radio"
-                value="mobile"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": true,
-                      "id": "yoast-google-preview-mode-mobile",
-                    }
-                  }
-                  type="radio"
-                  value="mobile"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": true,
-                        "id": "yoast-google-preview-mode-mobile",
-                      }
-                    }
-                    type="radio"
-                    value="mobile"
-                  >
-                    <input
-                      checked={true}
-                      className="c2"
-                      defaultValue="mobile"
-                      id="yoast-google-preview-mode-mobile"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-mobile"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-mobile"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-mobile"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-mobile"
-                    >
-                      Mobile result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": false,
-                    "id": "yoast-google-preview-mode-desktop",
-                  }
-                }
-                type="radio"
-                value="desktop"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": false,
-                      "id": "yoast-google-preview-mode-desktop",
-                    }
-                  }
-                  type="radio"
-                  value="desktop"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": false,
-                        "id": "yoast-google-preview-mode-desktop",
-                      }
-                    }
-                    type="radio"
-                    value="desktop"
-                  >
-                    <input
-                      checked={false}
-                      className="c2"
-                      defaultValue="desktop"
-                      id="yoast-google-preview-mode-desktop"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-desktop"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-desktop"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-desktop"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-desktop"
-                    >
-                      Desktop result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-            </fieldset>
-          </StyledComponent>
-        </ModeSwitcher__Switcher>
-      </ModeSwitcher>
-      <SnippetPreview
-        activeField={null}
-        breadcrumbs={null}
-        date=""
-        description="Test description, %%replacement_variable%%"
-        faviconSrc=""
-        hoveredField={null}
-        isAmp={false}
-        keyword=""
-        locale="en"
-        mobileImageSrc=""
-        mode="mobile"
-        onHover={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-        shoppingData={Object {}}
-        title="Test title"
-        url="http://example.org/test-slug"
-        wordsToHighlight={Array []}
-      >
-        <section>
-          <SnippetPreview__MobileContainer
-            id="yoast-snippet-preview-container"
-            padding={20}
-            width={null}
-          >
-            <StyledComponent
-              forwardedComponent={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "attrs": Array [],
-                  "componentStyle": ComponentStyle {
-                    "componentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                    "isStatic": false,
-                    "lastClassName": "c4",
-                    "rules": Array [
-                      "border-bottom:1px hidden #fff;border-radius:8px;box-shadow:0 1px 6px rgba(32,33,36,0.28);font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;max-width:",
-                      "400",
-                      "px;box-sizing:border-box;font-size:14px;",
-                    ],
-                  },
-                  "displayName": "SnippetPreview__MobileContainer",
-                  "foldedComponentIds": Array [],
-                  "render": [Function],
-                  "styledComponentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                  "target": "div",
-                  "toString": [Function],
-                  "warnTooManyClasses": [Function],
-                  "withComponent": [Function],
-                }
-              }
-              forwardedRef={null}
-              id="yoast-snippet-preview-container"
-              padding={20}
-              width={null}
-            >
-              <div
-                className="c4"
-                id="yoast-snippet-preview-container"
-                width={null}
-              >
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Url preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseUrl>
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                "isStatic": false,
-                                "lastClassName": "c6",
-                                "rules": Array [
-                                  "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseUrl",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                        >
-                          <div
-                            className="c6"
-                          >
-                            <SnippetPreview__BaseUrlOverflowContainer
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseUp={[Function]}
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                      "isStatic": false,
-                                      "lastClassName": "c7",
-                                      "rules": Array [
-                                        "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                        "overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-bottom:",
-                                        [Function],
-                                        ";padding-top:1px;line-height:",
-                                        [Function],
-                                        ";vertical-align:",
-                                        [Function],
-                                        ";",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__BaseUrlOverflowContainer",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                onMouseUp={[Function]}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c7"
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  onMouseUp={[Function]}
-                                >
-                                  <SnippetPreview__Favicon
-                                    alt=""
-                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                  >
-                                    <StyledComponent
-                                      alt=""
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                            "isStatic": false,
-                                            "lastClassName": "c8",
-                                            "rules": Array [
-                                              "width:16px;height:16px;margin-right:12px;vertical-align:middle;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__Favicon",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                          "target": "img",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                    >
-                                      <img
-                                        alt=""
-                                        className="c8"
-                                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                      />
-                                    </StyledComponent>
-                                  </SnippetPreview__Favicon>
-                                  <SnippetPreview__UrlContentContainer
-                                    screenMode="mobile"
-                                  >
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                            "isStatic": false,
-                                            "lastClassName": "c9",
-                                            "rules": Array [
-                                              "font-size:",
-                                              [Function],
-                                              ";line-height:",
-                                              [Function],
-                                              ";color:",
-                                              [Function],
-                                              ";",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__UrlContentContainer",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      screenMode="mobile"
-                                    >
-                                      <span
-                                        className="c9"
-                                      >
-                                        <SnippetPreview__UrlBaseContainer>
-                                          <StyledComponent
-                                            forwardedComponent={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "attrs": Array [],
-                                                "componentStyle": ComponentStyle {
-                                                  "componentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                  "isStatic": false,
-                                                  "lastClassName": "c10",
-                                                  "rules": Array [
-                                                    "color:",
-                                                    [Function],
-                                                    ";",
-                                                  ],
-                                                },
-                                                "displayName": "SnippetPreview__UrlBaseContainer",
-                                                "foldedComponentIds": Array [],
-                                                "render": [Function],
-                                                "styledComponentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                "target": "span",
-                                                "toString": [Function],
-                                                "warnTooManyClasses": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            forwardedRef={null}
-                                          >
-                                            <span
-                                              className="c10"
-                                            >
-                                              example.org
-                                            </span>
-                                          </StyledComponent>
-                                        </SnippetPreview__UrlBaseContainer>
-                                         › test-slug
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__UrlContentContainer>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__BaseUrlOverflowContainer>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseUrl>
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          SEO title preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseTitle
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                                "isStatic": false,
-                                "lastClassName": "c11",
-                                "rules": Array [
-                                  "cursor:pointer;position:relative;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseTitle",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c11"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__TitleBounded
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                      "isStatic": false,
-                                      "lastClassName": "c12",
-                                      "rules": Array [
-                                        "color:",
-                                        [Function],
-                                        ";text-decoration:none;font-size:",
-                                        [Function],
-                                        ";line-height:",
-                                        [Function],
-                                        ";font-weight:normal;margin:0;display:inline-block;overflow:hidden;max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                        "max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__TitleBounded",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__Title-sc-1hxg8jo-4",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c12"
-                                >
-                                  <SnippetPreview__TitleUnboundedMobile>
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                            "isStatic": false,
-                                            "lastClassName": "c13",
-                                            "rules": Array [
-                                              "display:inline-block;max-height:40px;padding-top:1px;vertical-align:top;overflow:hidden;text-overflow:ellipsis;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__TitleUnboundedMobile",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={[Function]}
-                                    >
-                                      <span
-                                        className="c13"
-                                      >
-                                        Test title
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__TitleUnboundedMobile>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__TitleBounded>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseTitle>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--desktop"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--desktop"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--desktop"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Meta description preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__MobileDescription
-                        isDescriptionPlaceholder={false}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                "isStatic": false,
-                                "lastClassName": "c14",
-                                "rules": Array [
-                                  "color:",
-                                  "#3c4043",
-                                  ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                  "600",
-                                  "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__MobileDescription",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          isDescriptionPlaceholder={false}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c14"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__MobileDescription
-                              isDescriptionPlaceholder={false}
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                      "isStatic": false,
-                                      "lastClassName": "c14",
-                                      "rules": Array [
-                                        "color:",
-                                        "#3c4043",
-                                        ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                        "600",
-                                        "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__MobileDescription",
-                                    "foldedComponentIds": Array [],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={[Function]}
-                                isDescriptionPlaceholder={false}
-                              >
-                                <div
-                                  className="c14"
-                                >
-                                  Test description, %%replacement_variable%%
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__MobileDescription>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__MobileDescription>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--mobile"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--mobile"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--mobile"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                      <ProductDataMobile
-                        shoppingData={Object {}}
-                      >
-                        <ProductDataMobile__ProductData>
-                          <StyledComponent
-                            forwardedComponent={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "attrs": Array [],
-                                "componentStyle": ComponentStyle {
-                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                  "isStatic": false,
-                                  "lastClassName": "c14",
-                                  "rules": Array [
-                                    "display:flex;",
-                                  ],
-                                },
-                                "displayName": "ProductDataMobile__ProductData",
-                                "foldedComponentIds": Array [],
-                                "render": [Function],
-                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                "target": "div",
-                                "toString": [Function],
-                                "warnTooManyClasses": [Function],
-                                "withComponent": [Function],
-                              }
-                            }
-                            forwardedRef={null}
-                          >
-                            <div
-                              className="c14"
-                            />
-                          </StyledComponent>
-                        </ProductDataMobile__ProductData>
-                      </ProductDataMobile>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-              </div>
-            </StyledComponent>
-          </SnippetPreview__MobileContainer>
-        </section>
-      </SnippetPreview>
-      <SnippetEditor__EditSnippetButton
-        activeBackgroundColor="#f7f7f7"
-        activeBorderColor="#000"
-        activeColor="#000"
-        aria-expanded={true}
-        backgroundColor="#f7f7f7"
-        borderColor="#ccc"
-        boxShadowColor="#ccc"
-        focusBackgroundColor="#fff"
-        focusBorderColor="#0066cd"
-        focusBoxShadowColor="#084a67"
-        focusColor="#000"
-        hoverBackgroundColor="#fff"
-        hoverColor="#000"
-        onClick={[Function]}
-        textColor="#555"
-        type="button"
-      >
-        <StyledComponent
-          activeBackgroundColor="#f7f7f7"
-          activeBorderColor="#000"
-          activeColor="#000"
-          aria-expanded={true}
-          backgroundColor="#f7f7f7"
-          borderColor="#ccc"
-          boxShadowColor="#ccc"
-          focusBackgroundColor="#fff"
-          focusBorderColor="#0066cd"
-          focusBoxShadowColor="#084a67"
-          focusColor="#000"
-          forwardedComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "_foldedDefaultProps": Object {
-                "activeBackgroundColor": "#f7f7f7",
-                "activeBorderColor": "#000",
-                "activeColor": "#000",
-                "backgroundColor": "#f7f7f7",
-                "borderColor": "#ccc",
-                "boxShadowColor": "#ccc",
-                "focusBackgroundColor": "#fff",
-                "focusBorderColor": "#0066cd",
-                "focusBoxShadowColor": "#084a67",
-                "focusColor": "#000",
-                "hoverBackgroundColor": "#fff",
-                "hoverColor": "#000",
-                "textColor": "#555",
-                "type": "button",
-              },
-              "attrs": Array [],
-              "componentStyle": ComponentStyle {
-                "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-                "isStatic": false,
-                "lastClassName": "c15",
-                "rules": Array [
-                  "color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";background:",
-                  [Function],
-                  ";box-shadow:0 1px 0 ",
-                  [Function],
-                  ";",
-                  "&:active{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";box-shadow:inset 0 2px 5px -3px ",
-                  [Function],
-                  "}",
-                  "&::-moz-focus-inner{border-width:0;}&:focus{outline:none;border-color:",
-                  [Function],
-                  ";color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";box-shadow:0 0 3px ",
-                  [Function],
-                  "}",
-                  "&:hover{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:var(--yoast-color-border--default);}",
-                  "display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-width:",
-                  "1px",
-                  ";border-style:solid;margin:0;padding:",
-                  "4px",
-                  " 10px;border-radius:3px;cursor:pointer;box-sizing:border-box;font-size:inherit;font-family:inherit;font-weight:inherit;text-align:",
-                  [Function],
-                  ";overflow:visible;min-height:",
-                  "32px",
-                  ";transition:var(--yoast-transition-default);svg{align-self:center;}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){::after{display:inline-block;content:\\"\\";min-height:",
-                  "22px",
-                  ";}}",
-                  "height:33px;border:1px solid #dbdbdb;box-shadow:none;font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;",
-                  "margin:",
-                  [Function],
-                  ";fill:",
-                  "#555",
-                  ";padding-left:8px;& svg{",
-                  [Function],
-                  ":7px;}",
-                ],
-              },
-              "displayName": "SnippetEditor__EditSnippetButton",
-              "foldedComponentIds": Array [
-                "Button__BaseButton-sc-32rbq-4",
-                "Button-sc-32rbq-3",
-                "Button-sc-32rbq-1",
-                "Button-sc-32rbq-2",
-                "Button-sc-32rbq-0",
-                "SnippetEditor__SnippetEditorButton-sc-144bmm3-0",
-              ],
-              "propTypes": Object {
-                "activeBackgroundColor": [Function],
-                "activeBorderColor": [Function],
-                "activeColor": [Function],
-                "backgroundColor": [Function],
-                "borderColor": [Function],
-                "boxShadowColor": [Function],
-                "focusBackgroundColor": [Function],
-                "focusBorderColor": [Function],
-                "focusBoxShadowColor": [Function],
-                "focusColor": [Function],
-                "hoverBackgroundColor": [Function],
-                "hoverColor": [Function],
-                "textColor": [Function],
-                "type": [Function],
-              },
-              "render": [Function],
-              "styledComponentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-              "target": "button",
-              "toString": [Function],
-              "warnTooManyClasses": [Function],
-              "withComponent": [Function],
-            }
-          }
-          forwardedRef={[Function]}
-          hoverBackgroundColor="#fff"
-          hoverColor="#000"
-          onClick={[Function]}
-          textColor="#555"
-          type="button"
-        >
-          <button
-            aria-expanded={true}
-            className="c15"
-            onClick={[Function]}
-            type="button"
-          >
-            <SvgIcon
-              className=""
-              color="currentColor"
-              icon="edit"
-              size="16px"
-            >
-              <SvgIconSet
-                className=""
-                color="currentColor"
-                icon="edit"
-                iconSet={
-                  Object {
-                    "alert-error": Object {
-                      "path": "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-info": Object {
-                      "path": "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-success": Object {
-                      "path": "M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-warning": Object {
-                      "path": "M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z",
-                      "viewbox": "0 0 576 512",
-                    },
-                    "angle-down": Object {
-                      "path": "M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-left": Object {
-                      "path": "M1203 544q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-right": Object {
-                      "path": "M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-up": Object {
-                      "path": "M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-down": Object {
-                      "path": "M896 1791L120.91 448.5L1671.09 448.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-left": Object {
-                      "path": "M1343.5 1671.09L1 896L1343.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-right": Object {
-                      "path": "M1791 896L448.5 1671.09L448.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-up": Object {
-                      "path": "M1671.09 1343.5L120.91 1343.5L896 1z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "caret-right": Object {
-                      "path": "M 0 384.662 V 127.338 c 0 -17.818 21.543 -26.741 34.142 -14.142 l 128.662 128.662 c 7.81 7.81 7.81 20.474 0 28.284 L 34.142 398.804 C 21.543 411.404 0 402.48 0 384.662 Z",
-                      "viewbox": "0 0 192 512",
-                    },
-                    "check": Object {
-                      "path": "M249.2,431.2c-23,0-45.6,9.4-61.8,25.6L25.6,618.6C9.4,634.8,0,657.4,0,680.4c0,23,9.4,45.6,25.6,61.8 l593.1,593.1c16.2,16.2,38.8,25.6,61.8,25.6c23,0,45.6-9.4,61.8-25.6L1766.4,311c16.2-16.2,25.6-38.8,25.6-61.8 s-9.4-45.6-25.6-61.8L1604.5,25.6C1588.3,9.4,1565.8,0,1542.8,0c-23,0-45.6,9.4-61.8,25.6L680.4,827L311,456.3 C294.8,440.5,272.3,431.2,249.2,431.2z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "chevron-down": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "chevron-up": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "circle": Object {
-                      "path": "M1664 896q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "clipboard": Object {
-                      "path": "M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "desktop": Object {
-                      "path": "M1728 992v-832q0-13-9.5-22.5t-22.5-9.5h-1600q-13 0-22.5 9.5t-9.5 22.5v832q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5zm128-832v1088q0 66-47 113t-113 47h-544q0 37 16 77.5t32 71 16 43.5q0 26-19 45t-45 19h-512q-26 0-45-19t-19-45q0-14 16-44t32-70 16-78h-544q-66 0-113-47t-47-113v-1088q0-66 47-113t113-47h1600q66 0 113 47t47 113z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "edit": Object {
-                      "path": "M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "exclamation-triangle": Object {
-                      "path": "M1024 1375v-190q0-14-9.5-23.5T992 1152H800q-13 0-22.5 9.5T768 1185v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11H786q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17H128q-34 0-63.5-17T18 1601q-37-63-2-126L784 67q17-31 47-49t65-18 65 18 47 49z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "eye": Object {
-                      "path": "M1664 960q-152-236-381-353 61 104 61 225 0 185-131.5 316.5t-316.5 131.5-316.5-131.5-131.5-316.5q0-121 61-225-229 117-381 353 133 205 333.5 326.5t434.5 121.5 434.5-121.5 333.5-326.5zm-720-384q0-20-14-34t-34-14q-125 0-214.5 89.5t-89.5 214.5q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5t-499.5 138.5-499.5-139-376.5-368q-20-35-20-69t20-69q140-229 376.5-368t499.5-139 499.5 139 376.5 368q20 35 20 69z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "file-text": Object {
-                      "path": "M1596 380q28 28 48 76t20 88v1152q0 40-28 68t-68 28h-1344q-40 0-68-28t-28-68v-1600q0-40 28-68t68-28h896q40 0 88 20t76 48zm-444-244v376h376q-10-29-22-41l-313-313q-12-12-41-22zm384 1528v-1024h-416q-40 0-68-28t-28-68v-416h-768v1536h1280zm-1024-864q0-14 9-23t23-9h704q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64zm736 224q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704zm0 256q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "gear": Object {
-                      "path": "M1800 800h-218q-26 -107 -81 -193l154 -154l-210 -210l-154 154q-88 -55 -191 -79v-218h-300v218q-103 24 -191 79l-154 -154l-212 212l154 154q-55 88 -79 191h-218v297h217q23 101 80 194l-154 154l210 210l154 -154q85 54 193 81v218h300v-218q103 -24 191 -79 l154 154l212 -212l-154 -154q57 -93 80 -194h217v-297zM950 650q124 0 212 88t88 212t-88 212t-212 88t-212 -88t-88 -212t88 -212t212 -88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "key": Object {
-                      "path": "M832 512q0-80-56-136t-136-56-136 56-56 136q0 42 19 83-41-19-83-19-80 0-136 56t-56 136 56 136 136 56 136-56 56-136q0-42-19-83 41 19 83 19 80 0 136-56t56-136zm851 704q0 17-49 66t-66 49q-9 0-28.5-16t-36.5-33-38.5-40-24.5-26l-96 96 220 220q28 28 28 68 0 42-39 81t-81 39q-40 0-68-28l-671-671q-176 131-365 131-163 0-265.5-102.5t-102.5-265.5q0-160 95-313t248-248 313-95q163 0 265.5 102.5t102.5 265.5q0 189-131 365l355 355 96-96q-3-3-26-24.5t-40-38.5-33-36.5-16-28.5q0-17 49-66t66-49q13 0 23 10 6 6 46 44.5t82 79.5 86.5 86 73 78 28.5 41z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "list": Object {
-                      "path": "M384 1408q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm0-512q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm-1408-928q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm0-512v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "loading-spinner": Object {
-                      "CustomComponent": Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                          "isStatic": false,
-                          "rules": Array [
-                            "width:",
-                            [Function],
-                            ";height:",
-                            [Function],
-                            ";flex:none;animation:loadingSpinnerRotator 1.4s linear infinite;& .path{stroke:",
-                            [Function],
-                            ";stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:loadingSpinnerDash 1.4s ease-in-out infinite;}@keyframes loadingSpinnerRotator{0%{transform:rotate( 0deg );}100%{transform:rotate( 270deg );}}@keyframes loadingSpinnerDash{0%{stroke-dashoffset:187;}50%{stroke-dashoffset:47;transform:rotate( 135deg );}100%{stroke-dashoffset:187;transform:rotate( 450deg );}}",
-                          ],
-                        },
-                        "displayName": "SvgIcon__StyledSvgSpinner",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                        "target": "svg",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      },
-                      "path": Array [
-                        <circle
-                          className="path"
-                          cx="33"
-                          cy="33"
-                          fill="none"
-                          r="30"
-                          strokeLinecap="round"
-                          strokeWidth="6"
-                        />,
-                      ],
-                      "viewbox": "0 0 66 66",
-                    },
-                    "mobile": Object {
-                      "path": "M976 1408q0-33-23.5-56.5t-56.5-23.5-56.5 23.5-23.5 56.5 23.5 56.5 56.5 23.5 56.5-23.5 23.5-56.5zm208-160v-704q0-13-9.5-22.5t-22.5-9.5h-512q-13 0-22.5 9.5t-9.5 22.5v704q0 13 9.5 22.5t22.5 9.5h512q13 0 22.5-9.5t9.5-22.5zm-192-848q0-16-16-16h-160q-16 0-16 16t16 16h160q16 0 16-16zm288-16v1024q0 52-38 90t-90 38h-512q-52 0-90-38t-38-90v-1024q0-52 38-90t90-38h512q52 0 90 38t38 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "pencil-square": Object {
-                      "path": "M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus": Object {
-                      "path": "M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus-circle": Object {
-                      "path": "M1344 960v-128q0-26-19-45t-45-19h-256v-256q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v256h-256q-26 0-45 19t-19 45v128q0 26 19 45t45 19h256v256q0 26 19 45t45 19h128q26 0 45-19t19-45v-256h256q26 0 45-19t19-45zm320-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "question-circle": Object {
-                      "path": "M1024 1376v-192q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v192q0 14 9 23t23 9h192q14 0 23-9t9-23zm256-672q0-88-55.5-163t-138.5-116-170-41q-243 0-371 213-15 24 8 42l132 100q7 6 19 6 16 0 25-12 53-68 86-92 34-24 86-24 48 0 85.5 26t37.5 59q0 38-20 61t-68 45q-63 28-115.5 86.5t-52.5 125.5v36q0 14 9 23t23 9h192q14 0 23-9t9-23q0-19 21.5-49.5t54.5-49.5q32-18 49-28.5t46-35 44.5-48 28-60.5 12.5-81zm384 192q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "search": Object {
-                      "path": "M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "seo-score-bad": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M338.2 394.2C315.8 367.4 282.9 352 248 352s-67.8 15.4-90.2 42.2c-13.5 16.3-38.1-4.2-24.6-20.5C161.7 339.6 203.6 320 248 320 s86.3 19.6 114.7 53.8C376.3 390 351.7 410.5 338.2 394.2L338.2 394.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-good": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M362.8 346.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5c22.4 26.9 55.2 42.2 90.2 42.2 s67.8-15.4 90.2-42.2C351.6 309.5 376.3 329.9 362.8 346.2L362.8 346.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-none": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-ok": Object {
-                      "path": Array [
-                        <path
-                          d="M344 336c21.2 0 21.2 32 0 32H152c-21.2 0-21.2-32 0-32H344z"
-                          fill="#000000"
-                        />,
-                        <circle
-                          cx="328"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <circle
-                          cx="168"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <path
-                          d="M248 8c137 0 248 111 248 248S385 504 248 504S0 393 0 256S111 8 248 8z M360 208c0-17.7-14.3-32-32-32 s-32 14.3-32 32s14.3 32 32 32S360 225.7 360 208z M344 368c21.2 0 21.2-32 0-32H152c-21.2 0-21.2 32 0 32H344z M200 208 c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32S200 225.7 200 208z"
-                        />,
-                      ],
-                      "viewbox": "0 0 496 512",
-                    },
-                    "times": Object {
-                      "path": "M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "times-circle": Object {
-                      "path": "M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z",
-                      "viewbox": "0 0 20 20",
-                    },
-                  }
-                }
-                size="16px"
-              >
-                <createSvgIconComponent__StyledSvg
-                  aria-hidden={true}
-                  className="yoast-svg-icon yoast-svg-icon-edit"
-                  fill="currentColor"
-                  focusable="false"
-                  role="img"
-                  size="16px"
-                  viewBox="0 0 1792 1792"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <svg
-                    aria-hidden={true}
-                    className="yoast-svg-icon yoast-svg-icon-edit createSvgIconComponent__StyledSvg-sc-1h4gl3a-0 cPnaHk"
-                    fill="currentColor"
-                    focusable="false"
-                    role="img"
-                    size="16px"
-                    viewBox="0 0 1792 1792"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"
-                    />
-                  </svg>
-                </createSvgIconComponent__StyledSvg>
-              </SvgIconSet>
-            </SvgIcon>
-            Edit snippet
-          </button>
-        </StyledComponent>
-      </SnippetEditor__EditSnippetButton>
-      <SnippetEditorFields
-        activeField={null}
-        containerPadding="0 20px"
-        data={
-          Object {
-            "description": "Test description, %%replacement_variable%%",
-            "slug": "test-slug",
-            "title": "Test title",
-          }
-        }
-        descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here"
-        descriptionInputId="yoast-google-preview-description"
-        descriptionLengthProgress={
-          Object {
-            "actual": 42,
-            "max": 156,
-            "score": 6,
-          }
-        }
-        hoveredField={null}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        recommendedReplacementVariables={Array []}
-        replacementVariables={
-          Array [
-            Object {
-              "description": "Title",
-              "label": "Title",
-              "name": "title",
-              "value": "Title!!!",
-            },
-            Object {
-              "description": "Excerpt",
-              "label": "Excerpt",
-              "name": "excerpt",
-              "value": "Excerpt!!!",
-            },
-          ]
-        }
-        slugInputId="yoast-google-preview-slug"
-        titleInputId="yoast-google-preview-title"
-        titleLengthProgress={
-          Object {
-            "actual": 0,
-            "max": 600,
-            "score": 1,
-          }
-        }
-      >
-        <SettingsSnippetEditorFields__StyledEditor
-          padding="0 20px"
-        >
-          <StyledComponent
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
-                  "isStatic": false,
-                  "lastClassName": "c16",
-                  "rules": Array [
-                    "padding:",
-                    [Function],
-                    ";",
-                  ],
-                },
-                "displayName": "SettingsSnippetEditorFields__StyledEditor",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
-                "target": "section",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
-              }
-            }
-            forwardedRef={null}
-            padding="0 20px"
-          >
-            <section
-              className="c16"
-            >
-              <ReplacementVariableEditorMock
-                content="Test title"
-                editorRef={[Function]}
-                fieldId="yoast-google-preview-title"
-                isActive={false}
-                isHovered={false}
-                label="SEO title"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                recommendedReplacementVariables={Array []}
-                replacementVariables={
-                  Array [
-                    Object {
-                      "description": "Title",
-                      "label": "Title",
-                      "name": "title",
-                      "value": "Title!!!",
-                    },
-                    Object {
-                      "description": "Excerpt",
-                      "label": "Excerpt",
-                      "name": "excerpt",
-                      "value": "Excerpt!!!",
-                    },
-                  ]
-                }
-                type="title"
-                withCaret={true}
-              >
-                <div />
-              </ReplacementVariableEditorMock>
-              <ProgressBar
-                aria-hidden="true"
-                backgroundColor="#f7f7f7"
-                borderColor="#ddd"
-                max={600}
-                progressColor="#dc3232"
-                value={0}
-              >
-                <StyledComponent
-                  aria-hidden="true"
-                  backgroundColor="#f7f7f7"
-                  borderColor="#ddd"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "_foldedDefaultProps": Object {
-                        "aria-hidden": "true",
-                        "backgroundColor": "#f7f7f7",
-                        "borderColor": "#ddd",
-                        "max": 1,
-                        "progressColor": "#7ad03a",
-                        "value": 0,
-                      },
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ProgressBar-sc-9g9yx6-0",
-                        "isStatic": false,
-                        "lastClassName": "c21",
-                        "rules": Array [
-                          "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
-                          [Function],
-                          ";border:1px solid ",
-                          [Function],
-                          ";::-webkit-progress-bar{background-color:",
-                          [Function],
-                          ";}::-webkit-progress-value{background-color:",
-                          [Function],
-                          ";transition:width 250ms;}::-moz-progress-bar{background-color:",
-                          [Function],
-                          ";}::-ms-fill{background-color:",
-                          [Function],
-                          ";border:0;}",
-                        ],
-                      },
-                      "displayName": "ProgressBar",
-                      "foldedComponentIds": Array [],
-                      "propTypes": Object {
-                        "aria-hidden": [Function],
-                        "backgroundColor": [Function],
-                        "borderColor": [Function],
-                        "max": [Function],
-                        "progressColor": [Function],
-                        "value": [Function],
-                      },
-                      "render": [Function],
-                      "styledComponentId": "ProgressBar-sc-9g9yx6-0",
-                      "target": "progress",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  max={600}
-                  progressColor="#dc3232"
-                  value={0}
-                >
-                  <progress
-                    aria-hidden="true"
-                    className="c17"
-                    max={600}
-                    value={0}
-                  />
-                </StyledComponent>
-              </ProgressBar>
-              <Label__SimulatedLabel
-                id="snippet-editor-field-7-slug"
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "Label__SimulatedLabel-mitdcc-0",
-                        "isStatic": false,
-                        "lastClassName": "c18",
-                        "rules": Array [
-                          "flex:1 1 200px;min-width:200px;cursor:pointer;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;margin:4px 0;color:#303030;font-weight:500;",
-                        ],
-                      },
-                      "displayName": "Label__SimulatedLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "Label__SimulatedLabel-mitdcc-0",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  id="snippet-editor-field-7-slug"
-                  onClick={[Function]}
-                >
-                  <div
-                    className="c18"
-                    id="snippet-editor-field-7-slug"
-                    onClick={[Function]}
-                  >
-                    Slug
-                  </div>
-                </StyledComponent>
-              </Label__SimulatedLabel>
-              <helpers
-                isActive={false}
-                isHovered={false}
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        Object {},
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "helpers-sc-15q2ybx-0",
-                        "isStatic": false,
-                        "lastClassName": "c19",
-                        "rules": Array [
-                          "flex:0 1 100%;border:1px solid ",
-                          [Function],
-                          ";padding:3px 5px;box-sizing:border-box;box-shadow:",
-                          [Function],
-                          ";background-color:#fff;color:#32373c;outline:0;transition:50ms border-color ease-in-out;position:relative;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;font-size:14px;cursor:text;",
-                          "&::before{display:block;position:absolute;top:-1px;",
-                          [Function],
-                          ":-25px;width:24px;height:24px;background-image:url( ",
-                          [Function],
-                          " );background-size:25px;content:\\"\\";}",
-                        ],
-                      },
-                      "displayName": "helpers",
-                      "foldedComponentIds": Array [
-                        "InputContainer__VariableEditorInputContainer-sc-140v6lg-0",
-                      ],
-                      "render": [Function],
-                      "styledComponentId": "helpers-sc-15q2ybx-0",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  isActive={false}
-                  isHovered={false}
-                  onClick={[Function]}
-                >
-                  <div
-                    className="c19"
-                    onClick={[Function]}
-                  >
-                    <SnippetEditorFields__SlugInput
-                      aria-labelledby="snippet-editor-field-7-slug"
-                      id="yoast-google-preview-slug"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      value="test-slug"
-                    >
-                      <StyledComponent
-                        aria-labelledby="snippet-editor-field-7-slug"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
-                              "isStatic": false,
-                              "lastClassName": "c20",
-                              "rules": Array [
-                                "border:none;width:100%;height:inherit;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;&:focus{outline:0;}",
-                              ],
-                            },
-                            "displayName": "SnippetEditorFields__SlugInput",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
-                          }
-                        }
-                        forwardedRef={[Function]}
-                        id="yoast-google-preview-slug"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onFocus={[Function]}
-                        value="test-slug"
-                      >
-                        <input
-                          aria-labelledby="snippet-editor-field-7-slug"
-                          className="c20"
-                          id="yoast-google-preview-slug"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          value="test-slug"
-                        />
-                      </StyledComponent>
-                    </SnippetEditorFields__SlugInput>
-                  </div>
-                </StyledComponent>
-              </helpers>
-              <ReplacementVariableEditorMock
-                content="Test description, %%replacement_variable%%"
-                editorRef={[Function]}
-                fieldId="yoast-google-preview-description"
-                isActive={false}
-                isHovered={false}
-                label="Meta description"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                placeholder="Modify your meta description by editing it right here"
-                recommendedReplacementVariables={Array []}
-                replacementVariables={
-                  Array [
-                    Object {
-                      "description": "Title",
-                      "label": "Title",
-                      "name": "title",
-                      "value": "Title!!!",
-                    },
-                    Object {
-                      "description": "Excerpt",
-                      "label": "Excerpt",
-                      "name": "excerpt",
-                      "value": "Excerpt!!!",
-                    },
-                  ]
-                }
-                type="description"
-                withCaret={true}
-              >
-                <div />
-              </ReplacementVariableEditorMock>
-              <ProgressBar
-                aria-hidden="true"
-                backgroundColor="#f7f7f7"
-                borderColor="#ddd"
-                max={156}
-                progressColor="#ee7c1b"
-                value={42}
-              >
-                <StyledComponent
-                  aria-hidden="true"
-                  backgroundColor="#f7f7f7"
-                  borderColor="#ddd"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "_foldedDefaultProps": Object {
-                        "aria-hidden": "true",
-                        "backgroundColor": "#f7f7f7",
-                        "borderColor": "#ddd",
-                        "max": 1,
-                        "progressColor": "#7ad03a",
-                        "value": 0,
-                      },
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ProgressBar-sc-9g9yx6-0",
-                        "isStatic": false,
-                        "lastClassName": "c21",
-                        "rules": Array [
-                          "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
-                          [Function],
-                          ";border:1px solid ",
-                          [Function],
-                          ";::-webkit-progress-bar{background-color:",
-                          [Function],
-                          ";}::-webkit-progress-value{background-color:",
-                          [Function],
-                          ";transition:width 250ms;}::-moz-progress-bar{background-color:",
-                          [Function],
-                          ";}::-ms-fill{background-color:",
-                          [Function],
-                          ";border:0;}",
-                        ],
-                      },
-                      "displayName": "ProgressBar",
-                      "foldedComponentIds": Array [],
-                      "propTypes": Object {
-                        "aria-hidden": [Function],
-                        "backgroundColor": [Function],
-                        "borderColor": [Function],
-                        "max": [Function],
-                        "progressColor": [Function],
-                        "value": [Function],
-                      },
-                      "render": [Function],
-                      "styledComponentId": "ProgressBar-sc-9g9yx6-0",
-                      "target": "progress",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  max={156}
-                  progressColor="#ee7c1b"
-                  value={42}
-                >
-                  <progress
-                    aria-hidden="true"
-                    className="c21"
-                    max={156}
-                    value={42}
-                  />
-                </StyledComponent>
-              </ProgressBar>
-            </section>
-          </StyledComponent>
-        </SettingsSnippetEditorFields__StyledEditor>
-      </SnippetEditorFields>
-      <SnippetEditor__CloseEditorButton
-        activeBackgroundColor="#f7f7f7"
-        activeBorderColor="#000"
-        activeColor="#000"
-        backgroundColor="#f7f7f7"
-        borderColor="#ccc"
-        boxShadowColor="#ccc"
-        focusBackgroundColor="#fff"
-        focusBorderColor="#0066cd"
-        focusBoxShadowColor="#084a67"
-        focusColor="#000"
-        hoverBackgroundColor="#fff"
-        hoverColor="#000"
-        onClick={[Function]}
-        textColor="#555"
-        type="button"
-      >
-        <StyledComponent
-          activeBackgroundColor="#f7f7f7"
-          activeBorderColor="#000"
-          activeColor="#000"
-          backgroundColor="#f7f7f7"
-          borderColor="#ccc"
-          boxShadowColor="#ccc"
-          focusBackgroundColor="#fff"
-          focusBorderColor="#0066cd"
-          focusBoxShadowColor="#084a67"
-          focusColor="#000"
-          forwardedComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "_foldedDefaultProps": Object {
-                "activeBackgroundColor": "#f7f7f7",
-                "activeBorderColor": "#000",
-                "activeColor": "#000",
-                "backgroundColor": "#f7f7f7",
-                "borderColor": "#ccc",
-                "boxShadowColor": "#ccc",
-                "focusBackgroundColor": "#fff",
-                "focusBorderColor": "#0066cd",
-                "focusBoxShadowColor": "#084a67",
-                "focusColor": "#000",
-                "hoverBackgroundColor": "#fff",
-                "hoverColor": "#000",
-                "textColor": "#555",
-                "type": "button",
-              },
-              "attrs": Array [],
-              "componentStyle": ComponentStyle {
-                "componentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
-                "isStatic": false,
-                "lastClassName": "c22",
-                "rules": Array [
-                  "color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";background:",
-                  [Function],
-                  ";box-shadow:0 1px 0 ",
-                  [Function],
-                  ";",
-                  "&:active{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";box-shadow:inset 0 2px 5px -3px ",
-                  [Function],
-                  "}",
-                  "&::-moz-focus-inner{border-width:0;}&:focus{outline:none;border-color:",
-                  [Function],
-                  ";color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";box-shadow:0 0 3px ",
-                  [Function],
-                  "}",
-                  "&:hover{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:var(--yoast-color-border--default);}",
-                  "display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-width:",
-                  "1px",
-                  ";border-style:solid;margin:0;padding:",
-                  "4px",
-                  " 10px;border-radius:3px;cursor:pointer;box-sizing:border-box;font-size:inherit;font-family:inherit;font-weight:inherit;text-align:",
-                  [Function],
-                  ";overflow:visible;min-height:",
-                  "32px",
-                  ";transition:var(--yoast-transition-default);svg{align-self:center;}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){::after{display:inline-block;content:\\"\\";min-height:",
-                  "22px",
-                  ";}}",
-                  "height:33px;border:1px solid #dbdbdb;box-shadow:none;font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;",
-                  "margin-top:24px;",
-                ],
-              },
-              "displayName": "SnippetEditor__CloseEditorButton",
-              "foldedComponentIds": Array [
-                "Button__BaseButton-sc-32rbq-4",
-                "Button-sc-32rbq-3",
-                "Button-sc-32rbq-1",
-                "Button-sc-32rbq-2",
-                "Button-sc-32rbq-0",
-                "SnippetEditor__SnippetEditorButton-sc-144bmm3-0",
-              ],
-              "propTypes": Object {
-                "activeBackgroundColor": [Function],
-                "activeBorderColor": [Function],
-                "activeColor": [Function],
-                "backgroundColor": [Function],
-                "borderColor": [Function],
-                "boxShadowColor": [Function],
-                "focusBackgroundColor": [Function],
-                "focusBorderColor": [Function],
-                "focusBoxShadowColor": [Function],
-                "focusColor": [Function],
-                "hoverBackgroundColor": [Function],
-                "hoverColor": [Function],
-                "textColor": [Function],
-                "type": [Function],
-              },
-              "render": [Function],
-              "styledComponentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
-              "target": "button",
-              "toString": [Function],
-              "warnTooManyClasses": [Function],
-              "withComponent": [Function],
-            }
-          }
-          forwardedRef={null}
-          hoverBackgroundColor="#fff"
-          hoverColor="#000"
-          onClick={[Function]}
-          textColor="#555"
-          type="button"
-        >
-          <button
-            className="c22"
-            onClick={[Function]}
-            type="button"
-          >
-            Close snippet editor
-          </button>
-        </StyledComponent>
-      </SnippetEditor__CloseEditorButton>
-    </div>
-  </ErrorBoundary>
-</SnippetEditor>
-`;
-
-exports[`SnippetEditor passes the date prop 1`] = `
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c4 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c11 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c12 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c13 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c6 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c7 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c9 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c10 {
-  color: #3c4043;
-}
-
-.c14 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c14:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c5 {
-  padding: 12px 16px;
-}
-
-.c5:first-child {
-  margin-bottom: -16px;
-}
-
-.c15 {
-  color: #70757a;
-}
-
-.c8 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-.c0 {
-  border: 0;
-  padding: 0;
-  margin: 0 0 16px;
-}
-
-.c1 {
-  margin: 8px 0;
-  padding: 0;
-  color: #555;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.c3 {
-  margin-right: 16px;
-  color: inherit;
-  font-size: 14px;
-  line-height: 1.71428571;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c2.c2 {
-  margin: 0 8px 0 0;
-  cursor: pointer;
-}
-
-.c16 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin: 10px 0 0 4px;
-  fill: #555;
-  padding-left: 8px;
-}
-
-.c16:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c16::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c16:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c16:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c16 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c16 svg {
-  margin-right: 7px;
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c16::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-<div>
-  <fieldset
-    className="c0"
-  >
-    <legend
-      className="c1"
-    >
-      Preview as:
-    </legend>
-    <input
-      autoComplete={undefined}
-      checked={true}
-      className="c2"
-      defaultValue="mobile"
-      id="yoast-google-preview-mode-mobile"
-      name="screen"
-      onChange={[Function]}
-      type="radio"
-    />
-    <label
-      className="c3"
-      htmlFor="yoast-google-preview-mode-mobile"
-    >
-      Mobile result
-    </label>
-    <input
-      autoComplete={undefined}
-      checked={false}
-      className="c2"
-      defaultValue="desktop"
-      id="yoast-google-preview-mode-desktop"
-      name="screen"
-      onChange={[Function]}
-      type="radio"
-    />
-    <label
-      className="c3"
-      htmlFor="yoast-google-preview-mode-desktop"
-    >
-      Desktop result
-    </label>
-  </fieldset>
-  <section>
-    <div
-      className="c4"
-      id="yoast-snippet-preview-container"
-      width={null}
-    >
-      <div
-        className="c5"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c6"
-        >
-          <div
-            className="c7"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <img
-              alt=""
-              className="c8"
-              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-            />
-            <span
-              className="c9"
-            >
-              <span
-                className="c10"
-              >
-                example.org
-              </span>
-               › test-slug
-            </span>
-          </div>
-        </div>
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c12"
-          >
-            <span
-              className="c13"
-            >
-              Test title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="c5 yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-      <div
-        className="c5"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c14"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c14"
-          >
-            
-            <span
-              className="c15"
-            >
-              date string
-               
-              ⋅
-               
-            </span>
-            Test description, %%replacement_variable%%
-          </div>
-        </div>
-      </div>
-      <div
-        className="c5 yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        <div
-          className="c15"
-        >
-          
-          
-          
-        </div>
-      </div>
-    </div>
-  </section>
-  <button
-    aria-expanded={false}
-    className="c16"
-    onClick={[Function]}
-    type="button"
-  >
-    <svg
-      aria-hidden={true}
-      className="yoast-svg-icon yoast-svg-icon-edit createSvgIconComponent__StyledSvg-sc-1h4gl3a-0 cPnaHk"
-      fill="currentColor"
-      focusable="false"
-      role="img"
-      size="16px"
-      viewBox="0 0 1792 1792"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"
-      />
-    </svg>
-    Edit snippet
-  </button>
-</div>
-`;
-
-exports[`SnippetEditor removes the highlight from the hovered field on calling onMouseLeave() 1`] = `
-<ErrorBoundary>
-  <div>
-    <ModeSwitcher
-      active="mobile"
-      desktopModeInputId="yoast-google-preview-mode-desktop"
-      mobileModeInputId="yoast-google-preview-mode-mobile"
-      onChange={[Function]}
-    />
-    <SnippetPreview
-      activeField={null}
-      breadcrumbs={null}
-      date=""
-      description="Test description, %%replacement_variable%%"
-      faviconSrc=""
-      hoveredField={null}
-      isAmp={false}
-      keyword=""
-      locale="en"
-      mobileImageSrc=""
-      mode="mobile"
-      onHover={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-      onMouseUp={[Function]}
-      shoppingData={Object {}}
-      title="Test title"
-      url="http://example.org/test-slug"
-      wordsToHighlight={Array []}
-    />
-    <SnippetEditor__EditSnippetButton
-      activeBackgroundColor="#f7f7f7"
-      activeBorderColor="#000"
-      activeColor="#000"
-      aria-expanded={true}
-      backgroundColor="#f7f7f7"
-      borderColor="#ccc"
-      boxShadowColor="#ccc"
-      focusBackgroundColor="#fff"
-      focusBorderColor="#0066cd"
-      focusBoxShadowColor="#084a67"
-      focusColor="#000"
-      hoverBackgroundColor="#fff"
-      hoverColor="#000"
-      onClick={[Function]}
-      textColor="#555"
-      type="button"
-    >
-      <SvgIcon
-        className=""
-        color="currentColor"
-        icon="edit"
-        size="16px"
-      />
-      Edit snippet
-    </SnippetEditor__EditSnippetButton>
-    <SnippetEditorFields
-      activeField={null}
-      containerPadding="0 20px"
-      data={
-        Object {
-          "description": "Test description, %%replacement_variable%%",
-          "slug": "test-slug",
-          "title": "Test title",
-        }
-      }
-      descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here"
-      descriptionInputId="yoast-google-preview-description"
-      descriptionLengthProgress={
-        Object {
-          "actual": 42,
-          "max": 156,
-          "score": 6,
-        }
-      }
-      hoveredField={null}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      recommendedReplacementVariables={Array []}
-      replacementVariables={Array []}
-      slugInputId="yoast-google-preview-slug"
-      titleInputId="yoast-google-preview-title"
-      titleLengthProgress={
-        Object {
-          "actual": 0,
-          "max": 600,
-          "score": 1,
-        }
-      }
-    />
-    <SnippetEditor__CloseEditorButton
-      activeBackgroundColor="#f7f7f7"
-      activeBorderColor="#000"
-      activeColor="#000"
-      backgroundColor="#f7f7f7"
-      borderColor="#ccc"
-      boxShadowColor="#ccc"
-      focusBackgroundColor="#fff"
-      focusBorderColor="#0066cd"
-      focusBoxShadowColor="#084a67"
-      focusColor="#000"
-      hoverBackgroundColor="#fff"
-      hoverColor="#000"
-      onClick={[Function]}
-      textColor="#555"
-      type="button"
-    >
-      Close snippet editor
-    </SnippetEditor__CloseEditorButton>
-  </div>
-</ErrorBoundary>
-`;
-
-exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] = `
-.c18 {
-  -webkit-flex: 1 1 200px;
-  -ms-flex: 1 1 200px;
-  flex: 1 1 200px;
-  min-width: 200px;
-  cursor: pointer;
-  font-size: 14px;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  margin: 4px 0;
-  color: #303030;
-  font-weight: 500;
-}
-
-.c17 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c17::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c17::-webkit-progress-value {
-  background-color: #dc3232;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c17::-moz-progress-bar {
-  background-color: #dc3232;
-}
-
-.c17::-ms-fill {
-  background-color: #dc3232;
-  border: 0;
-}
-
-.c21 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c21::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c21::-webkit-progress-value {
-  background-color: #ee7c1b;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c21::-moz-progress-bar {
-  background-color: #ee7c1b;
-}
-
-.c21::-ms-fill {
-  background-color: #ee7c1b;
-  border: 0;
-}
-
-.c16 {
-  padding: 0 20px;
-}
-
-.c14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c4 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c11 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c12 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c13 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c6 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c7 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c9 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c10 {
-  color: #3c4043;
-}
-
-.c14 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c14:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c5 {
-  padding: 12px 16px;
-}
-
-.c5:first-child {
-  margin-bottom: -16px;
-}
-
-.c8 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-.c20 {
-  border: none;
-  width: 100%;
-  height: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-}
-
-.c20:focus {
-  outline: 0;
-}
-
-.c19 {
-  -webkit-flex: 0 1 100%;
-  -ms-flex: 0 1 100%;
-  flex: 0 1 100%;
-  border: 1px solid #ddd;
-  padding: 3px 5px;
-  box-sizing: border-box;
-  box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
-  background-color: #fff;
-  color: #32373c;
-  outline: 0;
-  -webkit-transition: 50ms border-color ease-in-out;
-  transition: 50ms border-color ease-in-out;
-  position: relative;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-size: 14px;
-  cursor: text;
-}
-
-.c19::before {
-  display: block;
-  position: absolute;
-  top: -1px;
-  left: -25px;
-  width: 24px;
-  height: 24px;
-  background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22transparent%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
-  background-size: 25px;
-  content: "";
-}
-
-.c0 {
-  border: 0;
-  padding: 0;
-  margin: 0 0 16px;
-}
-
-.c1 {
-  margin: 8px 0;
-  padding: 0;
-  color: #555;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.c3 {
-  margin-right: 16px;
-  color: inherit;
-  font-size: 14px;
-  line-height: 1.71428571;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c2.c2 {
-  margin: 0 8px 0 0;
-  cursor: pointer;
-}
-
-.c15 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin: 10px 0 0 4px;
-  fill: #555;
-  padding-left: 8px;
-}
-
-.c15:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c15::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c15:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c15:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c15 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c15 svg {
-  margin-right: 7px;
-}
-
-.c22 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin-top: 24px;
-}
-
-.c22:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c22::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c22:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c22:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c22 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c15::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c22::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-<SnippetEditor
-  baseUrl="http://example.org/"
-  data={
-    Object {
-      "description": "Test description, %%replacement_variable%%",
-      "slug": "test-slug",
-      "title": "Test title",
-    }
-  }
-  date=""
-  descriptionEditorFieldPlaceholder=""
-  descriptionLengthProgress={
-    Object {
-      "actual": 0,
-      "max": 156,
-      "score": 0,
-    }
-  }
-  faviconSrc=""
-  hasPaperStyle={true}
-  idSuffix=""
-  keyword=""
-  locale="en"
-  mapEditorDataToPreview={null}
-  mobileImageSrc=""
-  mode="mobile"
-  onChange={[Function]}
-  onChangeAnalysisData={[Function]}
-  recommendedReplacementVariables={Array []}
-  replacementVariables={Array []}
-  shoppingData={Object {}}
-  showCloseButton={true}
-  titleLengthProgress={
-    Object {
-      "actual": 0,
-      "max": 600,
-      "score": 0,
-    }
-  }
-  wordsToHighlight={Array []}
->
-  <ErrorBoundary>
-    <div>
-      <ModeSwitcher
-        active="mobile"
-        desktopModeInputId="yoast-google-preview-mode-desktop"
-        mobileModeInputId="yoast-google-preview-mode-mobile"
-        onChange={[Function]}
-      >
-        <ModeSwitcher__Switcher>
-          <StyledComponent
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                  "isStatic": false,
-                  "lastClassName": "c0",
-                  "rules": Array [
-                    "border:0;padding:0;margin:0 0 16px;",
-                  ],
-                },
-                "displayName": "ModeSwitcher__Switcher",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "ModeSwitcher__Switcher-sc-9lbpr3-0",
-                "target": "fieldset",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
-              }
-            }
-            forwardedRef={null}
-          >
-            <fieldset
-              className="c0"
-            >
-              <ModeSwitcher__SwitcherTitle>
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                        "isStatic": false,
-                        "lastClassName": "c1",
-                        "rules": Array [
-                          "margin:8px 0;padding:0;color:",
-                          "#555",
-                          ";font-size:14px;font-weight:600;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__SwitcherTitle",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__SwitcherTitle-sc-9lbpr3-1",
-                      "target": "legend",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <legend
-                    className="c1"
-                  >
-                    Preview as:
-                  </legend>
-                </StyledComponent>
-              </ModeSwitcher__SwitcherTitle>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": true,
-                    "id": "yoast-google-preview-mode-mobile",
-                  }
-                }
-                type="radio"
-                value="mobile"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": true,
-                      "id": "yoast-google-preview-mode-mobile",
-                    }
-                  }
-                  type="radio"
-                  value="mobile"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": true,
-                        "id": "yoast-google-preview-mode-mobile",
-                      }
-                    }
-                    type="radio"
-                    value="mobile"
-                  >
-                    <input
-                      checked={true}
-                      className="c2"
-                      defaultValue="mobile"
-                      id="yoast-google-preview-mode-mobile"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-mobile"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-mobile"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-mobile"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-mobile"
-                    >
-                      Mobile result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-              <ModeSwitcher__ModeRadio
-                name="screen"
-                onChange={[Function]}
-                optionalAttributes={
-                  Object {
-                    "checked": false,
-                    "id": "yoast-google-preview-mode-desktop",
-                  }
-                }
-                type="radio"
-                value="desktop"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                        "isStatic": false,
-                        "lastClassName": "c2",
-                        "rules": Array [
-                          "&&{",
-                          [Function],
-                          ";cursor:pointer;}",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeRadio",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeRadio-sc-9lbpr3-3",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  name="screen"
-                  onChange={[Function]}
-                  optionalAttributes={
-                    Object {
-                      "checked": false,
-                      "id": "yoast-google-preview-mode-desktop",
-                    }
-                  }
-                  type="radio"
-                  value="desktop"
-                >
-                  <Input
-                    className="c2"
-                    hasFocus={false}
-                    name="screen"
-                    onChange={[Function]}
-                    optionalAttributes={
-                      Object {
-                        "checked": false,
-                        "id": "yoast-google-preview-mode-desktop",
-                      }
-                    }
-                    type="radio"
-                    value="desktop"
-                  >
-                    <input
-                      checked={false}
-                      className="c2"
-                      defaultValue="desktop"
-                      id="yoast-google-preview-mode-desktop"
-                      name="screen"
-                      onChange={[Function]}
-                      type="radio"
-                    />
-                  </Input>
-                </StyledComponent>
-              </ModeSwitcher__ModeRadio>
-              <ModeSwitcher__ModeLabel
-                for="yoast-google-preview-mode-desktop"
-              >
-                <StyledComponent
-                  for="yoast-google-preview-mode-desktop"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                        "isStatic": false,
-                        "lastClassName": "c3",
-                        "rules": Array [
-                          [Function],
-                          ";color:inherit;font-size:14px;line-height:1.71428571;cursor:pointer;display:inline-block;",
-                        ],
-                      },
-                      "displayName": "ModeSwitcher__ModeLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "ModeSwitcher__ModeLabel-sc-9lbpr3-2",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                      Symbol(Symbol.hasInstance): [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <Label
-                    className="c3"
-                    for="yoast-google-preview-mode-desktop"
-                    optionalAttributes={Object {}}
-                  >
-                    <label
-                      className="c3"
-                      htmlFor="yoast-google-preview-mode-desktop"
-                    >
-                      Desktop result
-                    </label>
-                  </Label>
-                </StyledComponent>
-              </ModeSwitcher__ModeLabel>
-            </fieldset>
-          </StyledComponent>
-        </ModeSwitcher__Switcher>
-      </ModeSwitcher>
-      <SnippetPreview
-        activeField={null}
-        breadcrumbs={null}
-        date=""
-        description="Test description, %%replacement_variable%%"
-        faviconSrc=""
-        hoveredField={null}
-        isAmp={false}
-        keyword=""
-        locale="en"
-        mobileImageSrc=""
-        mode="mobile"
-        onHover={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-        shoppingData={Object {}}
-        title="Test title"
-        url="http://example.org/test-slug"
-        wordsToHighlight={Array []}
-      >
-        <section>
-          <SnippetPreview__MobileContainer
-            id="yoast-snippet-preview-container"
-            padding={20}
-            width={null}
-          >
-            <StyledComponent
-              forwardedComponent={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "attrs": Array [],
-                  "componentStyle": ComponentStyle {
-                    "componentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                    "isStatic": false,
-                    "lastClassName": "c4",
-                    "rules": Array [
-                      "border-bottom:1px hidden #fff;border-radius:8px;box-shadow:0 1px 6px rgba(32,33,36,0.28);font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;max-width:",
-                      "400",
-                      "px;box-sizing:border-box;font-size:14px;",
-                    ],
-                  },
-                  "displayName": "SnippetPreview__MobileContainer",
-                  "foldedComponentIds": Array [],
-                  "render": [Function],
-                  "styledComponentId": "SnippetPreview__MobileContainer-sc-1hxg8jo-1",
-                  "target": "div",
-                  "toString": [Function],
-                  "warnTooManyClasses": [Function],
-                  "withComponent": [Function],
-                }
-              }
-              forwardedRef={null}
-              id="yoast-snippet-preview-container"
-              padding={20}
-              width={null}
-            >
-              <div
-                className="c4"
-                id="yoast-snippet-preview-container"
-                width={null}
-              >
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Url preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseUrl>
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                "isStatic": false,
-                                "lastClassName": "c6",
-                                "rules": Array [
-                                  "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseUrl",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                        >
-                          <div
-                            className="c6"
-                          >
-                            <SnippetPreview__BaseUrlOverflowContainer
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              onMouseUp={[Function]}
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                      "isStatic": false,
-                                      "lastClassName": "c7",
-                                      "rules": Array [
-                                        "display:inline-block;cursor:pointer;position:relative;max-width:90%;white-space:nowrap;font-size:14px;vertical-align:top;",
-                                        "overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-bottom:",
-                                        [Function],
-                                        ";padding-top:1px;line-height:",
-                                        [Function],
-                                        ";vertical-align:",
-                                        [Function],
-                                        ";",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__BaseUrlOverflowContainer",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__BaseUrl-sc-1hxg8jo-8",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__BaseUrlOverflowContainer-sc-1hxg8jo-9",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                onMouseUp={[Function]}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c7"
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  onMouseUp={[Function]}
-                                >
-                                  <SnippetPreview__Favicon
-                                    alt=""
-                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                  >
-                                    <StyledComponent
-                                      alt=""
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                            "isStatic": false,
-                                            "lastClassName": "c8",
-                                            "rules": Array [
-                                              "width:16px;height:16px;margin-right:12px;vertical-align:middle;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__Favicon",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__Favicon-sc-1hxg8jo-20",
-                                          "target": "img",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                    >
-                                      <img
-                                        alt=""
-                                        className="c8"
-                                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-                                      />
-                                    </StyledComponent>
-                                  </SnippetPreview__Favicon>
-                                  <SnippetPreview__UrlContentContainer
-                                    screenMode="mobile"
-                                  >
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                            "isStatic": false,
-                                            "lastClassName": "c9",
-                                            "rules": Array [
-                                              "font-size:",
-                                              [Function],
-                                              ";line-height:",
-                                              [Function],
-                                              ";color:",
-                                              [Function],
-                                              ";",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__UrlContentContainer",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__UrlContentContainer-sc-1hxg8jo-10",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={null}
-                                      screenMode="mobile"
-                                    >
-                                      <span
-                                        className="c9"
-                                      >
-                                        <SnippetPreview__UrlBaseContainer>
-                                          <StyledComponent
-                                            forwardedComponent={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "attrs": Array [],
-                                                "componentStyle": ComponentStyle {
-                                                  "componentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                  "isStatic": false,
-                                                  "lastClassName": "c10",
-                                                  "rules": Array [
-                                                    "color:",
-                                                    [Function],
-                                                    ";",
-                                                  ],
-                                                },
-                                                "displayName": "SnippetPreview__UrlBaseContainer",
-                                                "foldedComponentIds": Array [],
-                                                "render": [Function],
-                                                "styledComponentId": "SnippetPreview__UrlBaseContainer-sc-1hxg8jo-11",
-                                                "target": "span",
-                                                "toString": [Function],
-                                                "warnTooManyClasses": [Function],
-                                                "withComponent": [Function],
-                                              }
-                                            }
-                                            forwardedRef={null}
-                                          >
-                                            <span
-                                              className="c10"
-                                            >
-                                              example.org
-                                            </span>
-                                          </StyledComponent>
-                                        </SnippetPreview__UrlBaseContainer>
-                                         › test-slug
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__UrlContentContainer>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__BaseUrlOverflowContainer>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseUrl>
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          SEO title preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__BaseTitle
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                                "isStatic": false,
-                                "lastClassName": "c11",
-                                "rules": Array [
-                                  "cursor:pointer;position:relative;",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__BaseTitle",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__BaseTitle-sc-1hxg8jo-2",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c11"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__TitleBounded
-                              screenMode="mobile"
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                      "isStatic": false,
-                                      "lastClassName": "c12",
-                                      "rules": Array [
-                                        "color:",
-                                        [Function],
-                                        ";text-decoration:none;font-size:",
-                                        [Function],
-                                        ";line-height:",
-                                        [Function],
-                                        ";font-weight:normal;margin:0;display:inline-block;overflow:hidden;max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                        "max-width:",
-                                        "600",
-                                        "px;vertical-align:top;text-overflow:ellipsis;",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__TitleBounded",
-                                    "foldedComponentIds": Array [
-                                      "SnippetPreview__Title-sc-1hxg8jo-4",
-                                    ],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__TitleBounded-sc-1hxg8jo-5",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                screenMode="mobile"
-                              >
-                                <div
-                                  className="c12"
-                                >
-                                  <SnippetPreview__TitleUnboundedMobile>
-                                    <StyledComponent
-                                      forwardedComponent={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "attrs": Array [],
-                                          "componentStyle": ComponentStyle {
-                                            "componentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                            "isStatic": false,
-                                            "lastClassName": "c13",
-                                            "rules": Array [
-                                              "display:inline-block;max-height:40px;padding-top:1px;vertical-align:top;overflow:hidden;text-overflow:ellipsis;",
-                                            ],
-                                          },
-                                          "displayName": "SnippetPreview__TitleUnboundedMobile",
-                                          "foldedComponentIds": Array [],
-                                          "render": [Function],
-                                          "styledComponentId": "SnippetPreview__TitleUnboundedMobile-sc-1hxg8jo-7",
-                                          "target": "span",
-                                          "toString": [Function],
-                                          "warnTooManyClasses": [Function],
-                                          "withComponent": [Function],
-                                        }
-                                      }
-                                      forwardedRef={[Function]}
-                                    >
-                                      <span
-                                        className="c13"
-                                      >
-                                        Test title
-                                      </span>
-                                    </StyledComponent>
-                                  </SnippetPreview__TitleUnboundedMobile>
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__TitleBounded>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__BaseTitle>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--desktop"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--desktop"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--desktop"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer>
-                  <StyledComponent
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-16",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Meta description preview:
-                        </span>
-                      </ScreenReaderText>
-                      <SnippetPreview__MobileDescription
-                        isDescriptionPlaceholder={false}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        onMouseUp={[Function]}
-                      >
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                "isStatic": false,
-                                "lastClassName": "c14",
-                                "rules": Array [
-                                  "color:",
-                                  "#3c4043",
-                                  ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                  "600",
-                                  "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                ],
-                              },
-                              "displayName": "SnippetPreview__MobileDescription",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                              "target": "div",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          isDescriptionPlaceholder={false}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          onMouseUp={[Function]}
-                        >
-                          <div
-                            className="c14"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                          >
-                            <SnippetPreview__MobileDescription
-                              isDescriptionPlaceholder={false}
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                      "isStatic": false,
-                                      "lastClassName": "c14",
-                                      "rules": Array [
-                                        "color:",
-                                        "#3c4043",
-                                        ";font-size:14px;line-height:20px;cursor:pointer;position:relative;max-width:",
-                                        "600",
-                                        "px;&:after{display:table;content:\\"\\";clear:both;}",
-                                      ],
-                                    },
-                                    "displayName": "SnippetPreview__MobileDescription",
-                                    "foldedComponentIds": Array [],
-                                    "render": [Function],
-                                    "styledComponentId": "SnippetPreview__MobileDescription-sc-1hxg8jo-13",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={[Function]}
-                                isDescriptionPlaceholder={false}
-                              >
-                                <div
-                                  className="c14"
-                                >
-                                  Test description, %%replacement_variable%%
-                                </div>
-                              </StyledComponent>
-                            </SnippetPreview__MobileDescription>
-                          </div>
-                        </StyledComponent>
-                      </SnippetPreview__MobileDescription>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-                <SnippetPreview__MobilePartContainer
-                  className="yoast-shopping-data-preview--mobile"
-                >
-                  <StyledComponent
-                    className="yoast-shopping-data-preview--mobile"
-                    forwardedComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                          "isStatic": false,
-                          "lastClassName": "c5",
-                          "rules": Array [
-                            "padding:12px 16px;&:first-child{margin-bottom:-16px;}",
-                          ],
-                        },
-                        "displayName": "SnippetPreview__MobilePartContainer",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SnippetPreview__MobilePartContainer-sc-1hxg8jo-15",
-                        "target": "div",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    forwardedRef={null}
-                  >
-                    <div
-                      className="c5 yoast-shopping-data-preview--mobile"
-                    >
-                      <ScreenReaderText>
-                        <span
-                          className="screen-reader-text"
-                          style={
-                            Object {
-                              "clip": "rect(1px, 1px, 1px, 1px)",
-                              "height": "1px",
-                              "overflow": "hidden",
-                              "position": "absolute",
-                              "width": "1px",
-                            }
-                          }
-                        >
-                          Shopping data preview:
-                        </span>
-                      </ScreenReaderText>
-                      <ProductDataMobile
-                        shoppingData={Object {}}
-                      >
-                        <ProductDataMobile__ProductData>
-                          <StyledComponent
-                            forwardedComponent={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "attrs": Array [],
-                                "componentStyle": ComponentStyle {
-                                  "componentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                  "isStatic": false,
-                                  "lastClassName": "c14",
-                                  "rules": Array [
-                                    "display:flex;",
-                                  ],
-                                },
-                                "displayName": "ProductDataMobile__ProductData",
-                                "foldedComponentIds": Array [],
-                                "render": [Function],
-                                "styledComponentId": "ProductDataMobile__ProductData-cbo3ka-0",
-                                "target": "div",
-                                "toString": [Function],
-                                "warnTooManyClasses": [Function],
-                                "withComponent": [Function],
-                              }
-                            }
-                            forwardedRef={null}
-                          >
-                            <div
-                              className="c14"
-                            />
-                          </StyledComponent>
-                        </ProductDataMobile__ProductData>
-                      </ProductDataMobile>
-                    </div>
-                  </StyledComponent>
-                </SnippetPreview__MobilePartContainer>
-              </div>
-            </StyledComponent>
-          </SnippetPreview__MobileContainer>
-        </section>
-      </SnippetPreview>
-      <SnippetEditor__EditSnippetButton
-        activeBackgroundColor="#f7f7f7"
-        activeBorderColor="#000"
-        activeColor="#000"
-        aria-expanded={true}
-        backgroundColor="#f7f7f7"
-        borderColor="#ccc"
-        boxShadowColor="#ccc"
-        focusBackgroundColor="#fff"
-        focusBorderColor="#0066cd"
-        focusBoxShadowColor="#084a67"
-        focusColor="#000"
-        hoverBackgroundColor="#fff"
-        hoverColor="#000"
-        onClick={[Function]}
-        textColor="#555"
-        type="button"
-      >
-        <StyledComponent
-          activeBackgroundColor="#f7f7f7"
-          activeBorderColor="#000"
-          activeColor="#000"
-          aria-expanded={true}
-          backgroundColor="#f7f7f7"
-          borderColor="#ccc"
-          boxShadowColor="#ccc"
-          focusBackgroundColor="#fff"
-          focusBorderColor="#0066cd"
-          focusBoxShadowColor="#084a67"
-          focusColor="#000"
-          forwardedComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "_foldedDefaultProps": Object {
-                "activeBackgroundColor": "#f7f7f7",
-                "activeBorderColor": "#000",
-                "activeColor": "#000",
-                "backgroundColor": "#f7f7f7",
-                "borderColor": "#ccc",
-                "boxShadowColor": "#ccc",
-                "focusBackgroundColor": "#fff",
-                "focusBorderColor": "#0066cd",
-                "focusBoxShadowColor": "#084a67",
-                "focusColor": "#000",
-                "hoverBackgroundColor": "#fff",
-                "hoverColor": "#000",
-                "textColor": "#555",
-                "type": "button",
-              },
-              "attrs": Array [],
-              "componentStyle": ComponentStyle {
-                "componentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-                "isStatic": false,
-                "lastClassName": "c15",
-                "rules": Array [
-                  "color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";background:",
-                  [Function],
-                  ";box-shadow:0 1px 0 ",
-                  [Function],
-                  ";",
-                  "&:active{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";box-shadow:inset 0 2px 5px -3px ",
-                  [Function],
-                  "}",
-                  "&::-moz-focus-inner{border-width:0;}&:focus{outline:none;border-color:",
-                  [Function],
-                  ";color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";box-shadow:0 0 3px ",
-                  [Function],
-                  "}",
-                  "&:hover{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:var(--yoast-color-border--default);}",
-                  "display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-width:",
-                  "1px",
-                  ";border-style:solid;margin:0;padding:",
-                  "4px",
-                  " 10px;border-radius:3px;cursor:pointer;box-sizing:border-box;font-size:inherit;font-family:inherit;font-weight:inherit;text-align:",
-                  [Function],
-                  ";overflow:visible;min-height:",
-                  "32px",
-                  ";transition:var(--yoast-transition-default);svg{align-self:center;}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){::after{display:inline-block;content:\\"\\";min-height:",
-                  "22px",
-                  ";}}",
-                  "height:33px;border:1px solid #dbdbdb;box-shadow:none;font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;",
-                  "margin:",
-                  [Function],
-                  ";fill:",
-                  "#555",
-                  ";padding-left:8px;& svg{",
-                  [Function],
-                  ":7px;}",
-                ],
-              },
-              "displayName": "SnippetEditor__EditSnippetButton",
-              "foldedComponentIds": Array [
-                "Button__BaseButton-sc-32rbq-4",
-                "Button-sc-32rbq-3",
-                "Button-sc-32rbq-1",
-                "Button-sc-32rbq-2",
-                "Button-sc-32rbq-0",
-                "SnippetEditor__SnippetEditorButton-sc-144bmm3-0",
-              ],
-              "propTypes": Object {
-                "activeBackgroundColor": [Function],
-                "activeBorderColor": [Function],
-                "activeColor": [Function],
-                "backgroundColor": [Function],
-                "borderColor": [Function],
-                "boxShadowColor": [Function],
-                "focusBackgroundColor": [Function],
-                "focusBorderColor": [Function],
-                "focusBoxShadowColor": [Function],
-                "focusColor": [Function],
-                "hoverBackgroundColor": [Function],
-                "hoverColor": [Function],
-                "textColor": [Function],
-                "type": [Function],
-              },
-              "render": [Function],
-              "styledComponentId": "SnippetEditor__EditSnippetButton-sc-144bmm3-1",
-              "target": "button",
-              "toString": [Function],
-              "warnTooManyClasses": [Function],
-              "withComponent": [Function],
-            }
-          }
-          forwardedRef={[Function]}
-          hoverBackgroundColor="#fff"
-          hoverColor="#000"
-          onClick={[Function]}
-          textColor="#555"
-          type="button"
-        >
-          <button
-            aria-expanded={true}
-            className="c15"
-            onClick={[Function]}
-            type="button"
-          >
-            <SvgIcon
-              className=""
-              color="currentColor"
-              icon="edit"
-              size="16px"
-            >
-              <SvgIconSet
-                className=""
-                color="currentColor"
-                icon="edit"
-                iconSet={
-                  Object {
-                    "alert-error": Object {
-                      "path": "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-info": Object {
-                      "path": "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-success": Object {
-                      "path": "M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z",
-                      "viewbox": "0 0 512 512",
-                    },
-                    "alert-warning": Object {
-                      "path": "M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z",
-                      "viewbox": "0 0 576 512",
-                    },
-                    "angle-down": Object {
-                      "path": "M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-left": Object {
-                      "path": "M1203 544q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-right": Object {
-                      "path": "M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "angle-up": Object {
-                      "path": "M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-down": Object {
-                      "path": "M896 1791L120.91 448.5L1671.09 448.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-left": Object {
-                      "path": "M1343.5 1671.09L1 896L1343.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-right": Object {
-                      "path": "M1791 896L448.5 1671.09L448.5 120.91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "arrow-up": Object {
-                      "path": "M1671.09 1343.5L120.91 1343.5L896 1z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "caret-right": Object {
-                      "path": "M 0 384.662 V 127.338 c 0 -17.818 21.543 -26.741 34.142 -14.142 l 128.662 128.662 c 7.81 7.81 7.81 20.474 0 28.284 L 34.142 398.804 C 21.543 411.404 0 402.48 0 384.662 Z",
-                      "viewbox": "0 0 192 512",
-                    },
-                    "check": Object {
-                      "path": "M249.2,431.2c-23,0-45.6,9.4-61.8,25.6L25.6,618.6C9.4,634.8,0,657.4,0,680.4c0,23,9.4,45.6,25.6,61.8 l593.1,593.1c16.2,16.2,38.8,25.6,61.8,25.6c23,0,45.6-9.4,61.8-25.6L1766.4,311c16.2-16.2,25.6-38.8,25.6-61.8 s-9.4-45.6-25.6-61.8L1604.5,25.6C1588.3,9.4,1565.8,0,1542.8,0c-23,0-45.6,9.4-61.8,25.6L680.4,827L311,456.3 C294.8,440.5,272.3,431.2,249.2,431.2z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "chevron-down": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "chevron-up": Object {
-                      "path": Array [
-                        <g>
-                          <path
-                            d="M0,0h24v24H0V0z"
-                            fill="none"
-                          />
-                        </g>,
-                        <g>
-                          <path
-                            d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
-                          />
-                        </g>,
-                      ],
-                      "viewbox": "0 0 24 24",
-                      "width": "24px",
-                    },
-                    "circle": Object {
-                      "path": "M1664 896q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "clipboard": Object {
-                      "path": "M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "desktop": Object {
-                      "path": "M1728 992v-832q0-13-9.5-22.5t-22.5-9.5h-1600q-13 0-22.5 9.5t-9.5 22.5v832q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5zm128-832v1088q0 66-47 113t-113 47h-544q0 37 16 77.5t32 71 16 43.5q0 26-19 45t-45 19h-512q-26 0-45-19t-19-45q0-14 16-44t32-70 16-78h-544q-66 0-113-47t-47-113v-1088q0-66 47-113t113-47h1600q66 0 113 47t47 113z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "edit": Object {
-                      "path": "M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "exclamation-triangle": Object {
-                      "path": "M1024 1375v-190q0-14-9.5-23.5T992 1152H800q-13 0-22.5 9.5T768 1185v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11H786q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17H128q-34 0-63.5-17T18 1601q-37-63-2-126L784 67q17-31 47-49t65-18 65 18 47 49z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "eye": Object {
-                      "path": "M1664 960q-152-236-381-353 61 104 61 225 0 185-131.5 316.5t-316.5 131.5-316.5-131.5-131.5-316.5q0-121 61-225-229 117-381 353 133 205 333.5 326.5t434.5 121.5 434.5-121.5 333.5-326.5zm-720-384q0-20-14-34t-34-14q-125 0-214.5 89.5t-89.5 214.5q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5t-499.5 138.5-499.5-139-376.5-368q-20-35-20-69t20-69q140-229 376.5-368t499.5-139 499.5 139 376.5 368q20 35 20 69z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "file-text": Object {
-                      "path": "M1596 380q28 28 48 76t20 88v1152q0 40-28 68t-68 28h-1344q-40 0-68-28t-28-68v-1600q0-40 28-68t68-28h896q40 0 88 20t76 48zm-444-244v376h376q-10-29-22-41l-313-313q-12-12-41-22zm384 1528v-1024h-416q-40 0-68-28t-28-68v-416h-768v1536h1280zm-1024-864q0-14 9-23t23-9h704q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64zm736 224q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704zm0 256q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h704z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "gear": Object {
-                      "path": "M1800 800h-218q-26 -107 -81 -193l154 -154l-210 -210l-154 154q-88 -55 -191 -79v-218h-300v218q-103 24 -191 79l-154 -154l-212 212l154 154q-55 88 -79 191h-218v297h217q23 101 80 194l-154 154l210 210l154 -154q85 54 193 81v218h300v-218q103 -24 191 -79 l154 154l212 -212l-154 -154q57 -93 80 -194h217v-297zM950 650q124 0 212 88t88 212t-88 212t-212 88t-212 -88t-88 -212t88 -212t212 -88z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "key": Object {
-                      "path": "M832 512q0-80-56-136t-136-56-136 56-56 136q0 42 19 83-41-19-83-19-80 0-136 56t-56 136 56 136 136 56 136-56 56-136q0-42-19-83 41 19 83 19 80 0 136-56t56-136zm851 704q0 17-49 66t-66 49q-9 0-28.5-16t-36.5-33-38.5-40-24.5-26l-96 96 220 220q28 28 28 68 0 42-39 81t-81 39q-40 0-68-28l-671-671q-176 131-365 131-163 0-265.5-102.5t-102.5-265.5q0-160 95-313t248-248 313-95q163 0 265.5 102.5t102.5 265.5q0 189-131 365l355 355 96-96q-3-3-26-24.5t-40-38.5-33-36.5-16-28.5q0-17 49-66t66-49q13 0 23 10 6 6 46 44.5t82 79.5 86.5 86 73 78 28.5 41z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "list": Object {
-                      "path": "M384 1408q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm0-512q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm-1408-928q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm0-512v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "loading-spinner": Object {
-                      "CustomComponent": Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "componentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                          "isStatic": false,
-                          "rules": Array [
-                            "width:",
-                            [Function],
-                            ";height:",
-                            [Function],
-                            ";flex:none;animation:loadingSpinnerRotator 1.4s linear infinite;& .path{stroke:",
-                            [Function],
-                            ";stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:loadingSpinnerDash 1.4s ease-in-out infinite;}@keyframes loadingSpinnerRotator{0%{transform:rotate( 0deg );}100%{transform:rotate( 270deg );}}@keyframes loadingSpinnerDash{0%{stroke-dashoffset:187;}50%{stroke-dashoffset:47;transform:rotate( 135deg );}100%{stroke-dashoffset:187;transform:rotate( 450deg );}}",
-                          ],
-                        },
-                        "displayName": "SvgIcon__StyledSvgSpinner",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "styledComponentId": "SvgIcon__StyledSvgSpinner-sc-1l8fxgb-0",
-                        "target": "svg",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      },
-                      "path": Array [
-                        <circle
-                          className="path"
-                          cx="33"
-                          cy="33"
-                          fill="none"
-                          r="30"
-                          strokeLinecap="round"
-                          strokeWidth="6"
-                        />,
-                      ],
-                      "viewbox": "0 0 66 66",
-                    },
-                    "mobile": Object {
-                      "path": "M976 1408q0-33-23.5-56.5t-56.5-23.5-56.5 23.5-23.5 56.5 23.5 56.5 56.5 23.5 56.5-23.5 23.5-56.5zm208-160v-704q0-13-9.5-22.5t-22.5-9.5h-512q-13 0-22.5 9.5t-9.5 22.5v704q0 13 9.5 22.5t22.5 9.5h512q13 0 22.5-9.5t9.5-22.5zm-192-848q0-16-16-16h-160q-16 0-16 16t16 16h160q16 0 16-16zm288-16v1024q0 52-38 90t-90 38h-512q-52 0-90-38t-38-90v-1024q0-52 38-90t90-38h512q52 0 90 38t38 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "pencil-square": Object {
-                      "path": "M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus": Object {
-                      "path": "M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "plus-circle": Object {
-                      "path": "M1344 960v-128q0-26-19-45t-45-19h-256v-256q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v256h-256q-26 0-45 19t-19 45v128q0 26 19 45t45 19h256v256q0 26 19 45t45 19h128q26 0 45-19t19-45v-256h256q26 0 45-19t19-45zm320-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "question-circle": Object {
-                      "path": "M1024 1376v-192q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v192q0 14 9 23t23 9h192q14 0 23-9t9-23zm256-672q0-88-55.5-163t-138.5-116-170-41q-243 0-371 213-15 24 8 42l132 100q7 6 19 6 16 0 25-12 53-68 86-92 34-24 86-24 48 0 85.5 26t37.5 59q0 38-20 61t-68 45q-63 28-115.5 86.5t-52.5 125.5v36q0 14 9 23t23 9h192q14 0 23-9t9-23q0-19 21.5-49.5t54.5-49.5q32-18 49-28.5t46-35 44.5-48 28-60.5 12.5-81zm384 192q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "search": Object {
-                      "path": "M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "seo-score-bad": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M338.2 394.2C315.8 367.4 282.9 352 248 352s-67.8 15.4-90.2 42.2c-13.5 16.3-38.1-4.2-24.6-20.5C161.7 339.6 203.6 320 248 320 s86.3 19.6 114.7 53.8C376.3 390 351.7 410.5 338.2 394.2L338.2 394.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-good": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z M328 176c17.7 0 32 14.3 32 32 s-14.3 32-32 32s-32-14.3-32-32S310.3 176 328 176z M168 176c17.7 0 32 14.3 32 32s-14.3 32-32 32s-32-14.3-32-32S150.3 176 168 176 z M362.8 346.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5c22.4 26.9 55.2 42.2 90.2 42.2 s67.8-15.4 90.2-42.2C351.6 309.5 376.3 329.9 362.8 346.2L362.8 346.2z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-none": Object {
-                      "path": "M248 8C111 8 0 119 0 256s111 248 248 248s248-111 248-248S385 8 248 8z",
-                      "viewbox": "0 0 496 512",
-                    },
-                    "seo-score-ok": Object {
-                      "path": Array [
-                        <path
-                          d="M344 336c21.2 0 21.2 32 0 32H152c-21.2 0-21.2-32 0-32H344z"
-                          fill="#000000"
-                        />,
-                        <circle
-                          cx="328"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <circle
-                          cx="168"
-                          cy="208"
-                          fill="#000000"
-                          r="32"
-                        />,
-                        <path
-                          d="M248 8c137 0 248 111 248 248S385 504 248 504S0 393 0 256S111 8 248 8z M360 208c0-17.7-14.3-32-32-32 s-32 14.3-32 32s14.3 32 32 32S360 225.7 360 208z M344 368c21.2 0 21.2-32 0-32H152c-21.2 0-21.2 32 0 32H344z M200 208 c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32S200 225.7 200 208z"
-                        />,
-                      ],
-                      "viewbox": "0 0 496 512",
-                    },
-                    "times": Object {
-                      "path": "M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z",
-                      "viewbox": "0 0 1792 1792",
-                    },
-                    "times-circle": Object {
-                      "path": "M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z",
-                      "viewbox": "0 0 20 20",
-                    },
-                  }
-                }
-                size="16px"
-              >
-                <createSvgIconComponent__StyledSvg
-                  aria-hidden={true}
-                  className="yoast-svg-icon yoast-svg-icon-edit"
-                  fill="currentColor"
-                  focusable="false"
-                  role="img"
-                  size="16px"
-                  viewBox="0 0 1792 1792"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <svg
-                    aria-hidden={true}
-                    className="yoast-svg-icon yoast-svg-icon-edit createSvgIconComponent__StyledSvg-sc-1h4gl3a-0 cPnaHk"
-                    fill="currentColor"
-                    focusable="false"
-                    role="img"
-                    size="16px"
-                    viewBox="0 0 1792 1792"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"
-                    />
-                  </svg>
-                </createSvgIconComponent__StyledSvg>
-              </SvgIconSet>
-            </SvgIcon>
-            Edit snippet
-          </button>
-        </StyledComponent>
-      </SnippetEditor__EditSnippetButton>
-      <SnippetEditorFields
-        activeField={null}
-        containerPadding="0 20px"
-        data={
-          Object {
-            "description": "Test description, %%replacement_variable%%",
-            "slug": "test-slug",
-            "title": "Test title",
-          }
-        }
-        descriptionEditorFieldPlaceholder="Modify your meta description by editing it right here"
-        descriptionInputId="yoast-google-preview-description"
-        descriptionLengthProgress={
-          Object {
-            "actual": 42,
-            "max": 156,
-            "score": 6,
-          }
-        }
-        hoveredField={null}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        recommendedReplacementVariables={Array []}
-        replacementVariables={Array []}
-        slugInputId="yoast-google-preview-slug"
-        titleInputId="yoast-google-preview-title"
-        titleLengthProgress={
-          Object {
-            "actual": 0,
-            "max": 600,
-            "score": 1,
-          }
-        }
-      >
-        <SettingsSnippetEditorFields__StyledEditor
-          padding="0 20px"
-        >
-          <StyledComponent
-            forwardedComponent={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
-                  "isStatic": false,
-                  "lastClassName": "c16",
-                  "rules": Array [
-                    "padding:",
-                    [Function],
-                    ";",
-                  ],
-                },
-                "displayName": "SettingsSnippetEditorFields__StyledEditor",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "SettingsSnippetEditorFields__StyledEditor-sc-1j5cads-0",
-                "target": "section",
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
-              }
-            }
-            forwardedRef={null}
-            padding="0 20px"
-          >
-            <section
-              className="c16"
-            >
-              <ReplacementVariableEditorMock
-                content="Test title"
-                editorRef={[Function]}
-                fieldId="yoast-google-preview-title"
-                isActive={false}
-                isHovered={false}
-                label="SEO title"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                recommendedReplacementVariables={Array []}
-                replacementVariables={Array []}
-                type="title"
-                withCaret={true}
-              >
-                <div />
-              </ReplacementVariableEditorMock>
-              <ProgressBar
-                aria-hidden="true"
-                backgroundColor="#f7f7f7"
-                borderColor="#ddd"
-                max={600}
-                progressColor="#dc3232"
-                value={0}
-              >
-                <StyledComponent
-                  aria-hidden="true"
-                  backgroundColor="#f7f7f7"
-                  borderColor="#ddd"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "_foldedDefaultProps": Object {
-                        "aria-hidden": "true",
-                        "backgroundColor": "#f7f7f7",
-                        "borderColor": "#ddd",
-                        "max": 1,
-                        "progressColor": "#7ad03a",
-                        "value": 0,
-                      },
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ProgressBar-sc-9g9yx6-0",
-                        "isStatic": false,
-                        "lastClassName": "c21",
-                        "rules": Array [
-                          "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
-                          [Function],
-                          ";border:1px solid ",
-                          [Function],
-                          ";::-webkit-progress-bar{background-color:",
-                          [Function],
-                          ";}::-webkit-progress-value{background-color:",
-                          [Function],
-                          ";transition:width 250ms;}::-moz-progress-bar{background-color:",
-                          [Function],
-                          ";}::-ms-fill{background-color:",
-                          [Function],
-                          ";border:0;}",
-                        ],
-                      },
-                      "displayName": "ProgressBar",
-                      "foldedComponentIds": Array [],
-                      "propTypes": Object {
-                        "aria-hidden": [Function],
-                        "backgroundColor": [Function],
-                        "borderColor": [Function],
-                        "max": [Function],
-                        "progressColor": [Function],
-                        "value": [Function],
-                      },
-                      "render": [Function],
-                      "styledComponentId": "ProgressBar-sc-9g9yx6-0",
-                      "target": "progress",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  max={600}
-                  progressColor="#dc3232"
-                  value={0}
-                >
-                  <progress
-                    aria-hidden="true"
-                    className="c17"
-                    max={600}
-                    value={0}
-                  />
-                </StyledComponent>
-              </ProgressBar>
-              <Label__SimulatedLabel
-                id="snippet-editor-field-6-slug"
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "Label__SimulatedLabel-mitdcc-0",
-                        "isStatic": false,
-                        "lastClassName": "c18",
-                        "rules": Array [
-                          "flex:1 1 200px;min-width:200px;cursor:pointer;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;margin:4px 0;color:#303030;font-weight:500;",
-                        ],
-                      },
-                      "displayName": "Label__SimulatedLabel",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "Label__SimulatedLabel-mitdcc-0",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  id="snippet-editor-field-6-slug"
-                  onClick={[Function]}
-                >
-                  <div
-                    className="c18"
-                    id="snippet-editor-field-6-slug"
-                    onClick={[Function]}
-                  >
-                    Slug
-                  </div>
-                </StyledComponent>
-              </Label__SimulatedLabel>
-              <helpers
-                isActive={false}
-                isHovered={false}
-                onClick={[Function]}
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [
-                        Object {},
-                      ],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "helpers-sc-15q2ybx-0",
-                        "isStatic": false,
-                        "lastClassName": "c19",
-                        "rules": Array [
-                          "flex:0 1 100%;border:1px solid ",
-                          [Function],
-                          ";padding:3px 5px;box-sizing:border-box;box-shadow:",
-                          [Function],
-                          ";background-color:#fff;color:#32373c;outline:0;transition:50ms border-color ease-in-out;position:relative;font-family:-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\"Helvetica Neue\\",sans-serif;font-size:14px;cursor:text;",
-                          "&::before{display:block;position:absolute;top:-1px;",
-                          [Function],
-                          ":-25px;width:24px;height:24px;background-image:url( ",
-                          [Function],
-                          " );background-size:25px;content:\\"\\";}",
-                        ],
-                      },
-                      "displayName": "helpers",
-                      "foldedComponentIds": Array [
-                        "InputContainer__VariableEditorInputContainer-sc-140v6lg-0",
-                      ],
-                      "render": [Function],
-                      "styledComponentId": "helpers-sc-15q2ybx-0",
-                      "target": "div",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  isActive={false}
-                  isHovered={false}
-                  onClick={[Function]}
-                >
-                  <div
-                    className="c19"
-                    onClick={[Function]}
-                  >
-                    <SnippetEditorFields__SlugInput
-                      aria-labelledby="snippet-editor-field-6-slug"
-                      id="yoast-google-preview-slug"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      value="test-slug"
-                    >
-                      <StyledComponent
-                        aria-labelledby="snippet-editor-field-6-slug"
-                        forwardedComponent={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "attrs": Array [],
-                            "componentStyle": ComponentStyle {
-                              "componentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
-                              "isStatic": false,
-                              "lastClassName": "c20",
-                              "rules": Array [
-                                "border:none;width:100%;height:inherit;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;&:focus{outline:0;}",
-                              ],
-                            },
-                            "displayName": "SnippetEditorFields__SlugInput",
-                            "foldedComponentIds": Array [],
-                            "render": [Function],
-                            "styledComponentId": "SnippetEditorFields__SlugInput-sc-1ioqi3y-0",
-                            "target": "input",
-                            "toString": [Function],
-                            "warnTooManyClasses": [Function],
-                            "withComponent": [Function],
-                          }
-                        }
-                        forwardedRef={[Function]}
-                        id="yoast-google-preview-slug"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onFocus={[Function]}
-                        value="test-slug"
-                      >
-                        <input
-                          aria-labelledby="snippet-editor-field-6-slug"
-                          className="c20"
-                          id="yoast-google-preview-slug"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          value="test-slug"
-                        />
-                      </StyledComponent>
-                    </SnippetEditorFields__SlugInput>
-                  </div>
-                </StyledComponent>
-              </helpers>
-              <ReplacementVariableEditorMock
-                content="Test description, %%replacement_variable%%"
-                editorRef={[Function]}
-                fieldId="yoast-google-preview-description"
-                isActive={false}
-                isHovered={false}
-                label="Meta description"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                placeholder="Modify your meta description by editing it right here"
-                recommendedReplacementVariables={Array []}
-                replacementVariables={Array []}
-                type="description"
-                withCaret={true}
-              >
-                <div />
-              </ReplacementVariableEditorMock>
-              <ProgressBar
-                aria-hidden="true"
-                backgroundColor="#f7f7f7"
-                borderColor="#ddd"
-                max={156}
-                progressColor="#ee7c1b"
-                value={42}
-              >
-                <StyledComponent
-                  aria-hidden="true"
-                  backgroundColor="#f7f7f7"
-                  borderColor="#ddd"
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "_foldedDefaultProps": Object {
-                        "aria-hidden": "true",
-                        "backgroundColor": "#f7f7f7",
-                        "borderColor": "#ddd",
-                        "max": 1,
-                        "progressColor": "#7ad03a",
-                        "value": 0,
-                      },
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "ProgressBar-sc-9g9yx6-0",
-                        "isStatic": false,
-                        "lastClassName": "c21",
-                        "rules": Array [
-                          "box-sizing:border-box;width:100%;height:8px;display:block;margin-top:8px;appearance:none;background-color:",
-                          [Function],
-                          ";border:1px solid ",
-                          [Function],
-                          ";::-webkit-progress-bar{background-color:",
-                          [Function],
-                          ";}::-webkit-progress-value{background-color:",
-                          [Function],
-                          ";transition:width 250ms;}::-moz-progress-bar{background-color:",
-                          [Function],
-                          ";}::-ms-fill{background-color:",
-                          [Function],
-                          ";border:0;}",
-                        ],
-                      },
-                      "displayName": "ProgressBar",
-                      "foldedComponentIds": Array [],
-                      "propTypes": Object {
-                        "aria-hidden": [Function],
-                        "backgroundColor": [Function],
-                        "borderColor": [Function],
-                        "max": [Function],
-                        "progressColor": [Function],
-                        "value": [Function],
-                      },
-                      "render": [Function],
-                      "styledComponentId": "ProgressBar-sc-9g9yx6-0",
-                      "target": "progress",
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  max={156}
-                  progressColor="#ee7c1b"
-                  value={42}
-                >
-                  <progress
-                    aria-hidden="true"
-                    className="c21"
-                    max={156}
-                    value={42}
-                  />
-                </StyledComponent>
-              </ProgressBar>
-            </section>
-          </StyledComponent>
-        </SettingsSnippetEditorFields__StyledEditor>
-      </SnippetEditorFields>
-      <SnippetEditor__CloseEditorButton
-        activeBackgroundColor="#f7f7f7"
-        activeBorderColor="#000"
-        activeColor="#000"
-        backgroundColor="#f7f7f7"
-        borderColor="#ccc"
-        boxShadowColor="#ccc"
-        focusBackgroundColor="#fff"
-        focusBorderColor="#0066cd"
-        focusBoxShadowColor="#084a67"
-        focusColor="#000"
-        hoverBackgroundColor="#fff"
-        hoverColor="#000"
-        onClick={[Function]}
-        textColor="#555"
-        type="button"
-      >
-        <StyledComponent
-          activeBackgroundColor="#f7f7f7"
-          activeBorderColor="#000"
-          activeColor="#000"
-          backgroundColor="#f7f7f7"
-          borderColor="#ccc"
-          boxShadowColor="#ccc"
-          focusBackgroundColor="#fff"
-          focusBorderColor="#0066cd"
-          focusBoxShadowColor="#084a67"
-          focusColor="#000"
-          forwardedComponent={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "_foldedDefaultProps": Object {
-                "activeBackgroundColor": "#f7f7f7",
-                "activeBorderColor": "#000",
-                "activeColor": "#000",
-                "backgroundColor": "#f7f7f7",
-                "borderColor": "#ccc",
-                "boxShadowColor": "#ccc",
-                "focusBackgroundColor": "#fff",
-                "focusBorderColor": "#0066cd",
-                "focusBoxShadowColor": "#084a67",
-                "focusColor": "#000",
-                "hoverBackgroundColor": "#fff",
-                "hoverColor": "#000",
-                "textColor": "#555",
-                "type": "button",
-              },
-              "attrs": Array [],
-              "componentStyle": ComponentStyle {
-                "componentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
-                "isStatic": false,
-                "lastClassName": "c22",
-                "rules": Array [
-                  "color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";background:",
-                  [Function],
-                  ";box-shadow:0 1px 0 ",
-                  [Function],
-                  ";",
-                  "&:active{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:",
-                  [Function],
-                  ";box-shadow:inset 0 2px 5px -3px ",
-                  [Function],
-                  "}",
-                  "&::-moz-focus-inner{border-width:0;}&:focus{outline:none;border-color:",
-                  [Function],
-                  ";color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";box-shadow:0 0 3px ",
-                  [Function],
-                  "}",
-                  "&:hover{color:",
-                  [Function],
-                  ";background-color:",
-                  [Function],
-                  ";border-color:var(--yoast-color-border--default);}",
-                  "display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-width:",
-                  "1px",
-                  ";border-style:solid;margin:0;padding:",
-                  "4px",
-                  " 10px;border-radius:3px;cursor:pointer;box-sizing:border-box;font-size:inherit;font-family:inherit;font-weight:inherit;text-align:",
-                  [Function],
-                  ";overflow:visible;min-height:",
-                  "32px",
-                  ";transition:var(--yoast-transition-default);svg{align-self:center;}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){::after{display:inline-block;content:\\"\\";min-height:",
-                  "22px",
-                  ";}}",
-                  "height:33px;border:1px solid #dbdbdb;box-shadow:none;font-family:Arial,Roboto-Regular,HelveticaNeue,sans-serif;",
-                  "margin-top:24px;",
-                ],
-              },
-              "displayName": "SnippetEditor__CloseEditorButton",
-              "foldedComponentIds": Array [
-                "Button__BaseButton-sc-32rbq-4",
-                "Button-sc-32rbq-3",
-                "Button-sc-32rbq-1",
-                "Button-sc-32rbq-2",
-                "Button-sc-32rbq-0",
-                "SnippetEditor__SnippetEditorButton-sc-144bmm3-0",
-              ],
-              "propTypes": Object {
-                "activeBackgroundColor": [Function],
-                "activeBorderColor": [Function],
-                "activeColor": [Function],
-                "backgroundColor": [Function],
-                "borderColor": [Function],
-                "boxShadowColor": [Function],
-                "focusBackgroundColor": [Function],
-                "focusBorderColor": [Function],
-                "focusBoxShadowColor": [Function],
-                "focusColor": [Function],
-                "hoverBackgroundColor": [Function],
-                "hoverColor": [Function],
-                "textColor": [Function],
-                "type": [Function],
-              },
-              "render": [Function],
-              "styledComponentId": "SnippetEditor__CloseEditorButton-sc-144bmm3-2",
-              "target": "button",
-              "toString": [Function],
-              "warnTooManyClasses": [Function],
-              "withComponent": [Function],
-            }
-          }
-          forwardedRef={null}
-          hoverBackgroundColor="#fff"
-          hoverColor="#000"
-          onClick={[Function]}
-          textColor="#555"
-          type="button"
-        >
-          <button
-            className="c22"
-            onClick={[Function]}
-            type="button"
-          >
-            Close snippet editor
-          </button>
-        </StyledComponent>
-      </SnippetEditor__CloseEditorButton>
-    </div>
-  </ErrorBoundary>
-</SnippetEditor>
-`;
-
-exports[`SnippetEditor renders in desktop mode 1`] = `
-.c4 {
-  overflow: auto;
-  width: 640px;
-  padding: 0 20px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.c6 {
-  width: 600px;
-}
-
-.c14 {
-  display: inline;
-  margin-left: 0.3em;
-  color: #70757a;
-}
-
-.c5 {
-  background-color: #fff;
-  font-family: arial,sans-serif;
-  box-sizing: border-box;
-}
-
-.c12 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c13 {
-  color: #1a0dab;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 20px;
-  line-height: 1.3;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c14 {
-  white-space: nowrap;
-}
-
-.c7 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c8 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 0;
-  padding-top: 1px;
-  line-height: 1.5;
-  vertical-align: baseline;
-}
-
-.c9 {
-  font-size: 14px;
-  line-height: 1.3;
-  color: #5f6368;
-}
-
-.c15 {
-  color: #545454;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-  padding-top: 1px;
-  font-size: 14px;
-  line-height: 1.58;
-}
-
-.c11 {
-  display: inline-block;
-  margin-top: 9px;
-  margin-left: 6px;
-  border-top: 5px solid #70757a;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  vertical-align: top;
-}
-
-.c0 {
-  border: 0;
-  padding: 0;
-  margin: 0 0 16px;
-}
-
-.c1 {
-  margin: 8px 0;
-  padding: 0;
-  color: #555;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.c3 {
-  margin-right: 16px;
-  color: inherit;
-  font-size: 14px;
-  line-height: 1.71428571;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c2.c2 {
-  margin: 0 8px 0 0;
-  cursor: pointer;
-}
-
-.c16 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin: 10px 0 0 4px;
-  fill: #555;
-  padding-left: 8px;
-}
-
-.c16:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c16::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c16:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c16:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c16 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c16 svg {
-  margin-right: 7px;
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c16::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-<div>
-  <fieldset
-    className="c0"
-  >
-    <legend
-      className="c1"
-    >
-      Preview as:
-    </legend>
-    <input
-      autoComplete={undefined}
-      checked={false}
-      className="c2"
-      defaultValue="mobile"
-      id="yoast-google-preview-mode-mobile"
-      name="screen"
-      onChange={[Function]}
-      type="radio"
-    />
-    <label
-      className="c3"
-      htmlFor="yoast-google-preview-mode-mobile"
-    >
-      Mobile result
-    </label>
-    <input
-      autoComplete={undefined}
-      checked={true}
-      className="c2"
-      defaultValue="desktop"
-      id="yoast-google-preview-mode-desktop"
-      name="screen"
-      onChange={[Function]}
-      type="radio"
-    />
-    <label
-      className="c3"
-      htmlFor="yoast-google-preview-mode-desktop"
-    >
-      Desktop result
-    </label>
-  </fieldset>
-  <section>
-    <div
-      className="c4 c5"
-      id="yoast-snippet-preview-container"
-    >
-      <div
-        className="c6"
-      >
-        <div
-          className=""
-        >
-          <span
-            className="screen-reader-text"
-            style={
-              Object {
-                "clip": "rect(1px, 1px, 1px, 1px)",
-                "height": "1px",
-                "overflow": "hidden",
-                "position": "absolute",
-                "width": "1px",
-              }
-            }
-          >
-            Url preview:
-          </span>
-          <div
-            className="c7"
-          >
-            <div
-              className="c8"
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              onMouseUp={[Function]}
-            >
-              <span
-                className="c9"
-              >
-                <span
-                  className="c10"
-                >
-                  example.org
-                </span>
-                 › test-slug
-              </span>
-            </div>
-          </div>
-          <div
-            className="c11"
-          />
-          <span
-            className="screen-reader-text"
-            style={
-              Object {
-                "clip": "rect(1px, 1px, 1px, 1px)",
-                "height": "1px",
-                "overflow": "hidden",
-                "position": "absolute",
-                "width": "1px",
-              }
-            }
-          >
-            SEO title preview:
-          </span>
-          <div
-            className="c12"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <div
-              className="c13"
-            >
-              <span
-                className="c14"
-              >
-                Test title
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          className="yoast-shopping-data-preview--desktop"
-        >
-          <span
-            className="screen-reader-text"
-            style={
-              Object {
-                "clip": "rect(1px, 1px, 1px, 1px)",
-                "height": "1px",
-                "overflow": "hidden",
-                "position": "absolute",
-                "width": "1px",
-              }
-            }
-          >
-            Shopping data preview:
-          </span>
-          
-          <p
-            className="c14"
-          >
-            
-            
-            
-          </p>
-        </div>
-        <div
-          className=""
-        >
-          <span
-            className="screen-reader-text"
-            style={
-              Object {
-                "clip": "rect(1px, 1px, 1px, 1px)",
-                "height": "1px",
-                "overflow": "hidden",
-                "position": "absolute",
-                "width": "1px",
-              }
-            }
-          >
-            Meta description preview:
-          </span>
-          <div
-            className="c15"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            
-            Test description, %%replacement_variable%%
-          </div>
-        </div>
-        <div
-          className="yoast-shopping-data-preview--mobile"
-        >
-          <span
-            className="screen-reader-text"
-            style={
-              Object {
-                "clip": "rect(1px, 1px, 1px, 1px)",
-                "height": "1px",
-                "overflow": "hidden",
-                "position": "absolute",
-                "width": "1px",
-              }
-            }
-          >
-            Shopping data preview:
-          </span>
-        </div>
-      </div>
-    </div>
-  </section>
-  <button
-    aria-expanded={false}
-    className="c16"
-    onClick={[Function]}
-    type="button"
-  >
-    <svg
-      aria-hidden={true}
-      className="yoast-svg-icon yoast-svg-icon-edit createSvgIconComponent__StyledSvg-sc-1h4gl3a-0 cPnaHk"
-      fill="currentColor"
-      focusable="false"
-      role="img"
-      size="16px"
-      viewBox="0 0 1792 1792"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"
-      />
-    </svg>
-    Edit snippet
-  </button>
-</div>
-`;
-
-exports[`SnippetEditor renders the snippet editor without a close button when showCloseButton is false 1`] = `
-.c17 {
-  -webkit-flex: 1 1 200px;
-  -ms-flex: 1 1 200px;
-  flex: 1 1 200px;
-  min-width: 200px;
-  cursor: pointer;
-  font-size: 14px;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  margin: 4px 0;
-  color: #303030;
-  font-weight: 500;
-}
-
-.c16 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c16::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c16::-webkit-progress-value {
-  background-color: #dc3232;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c16::-moz-progress-bar {
-  background-color: #dc3232;
-}
-
-.c16::-ms-fill {
-  background-color: #dc3232;
-  border: 0;
-}
-
-.c20 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 8px;
-  display: block;
-  margin-top: 8px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #f7f7f7;
-  border: 1px solid #ddd;
-}
-
-.c20::-webkit-progress-bar {
-  background-color: #f7f7f7;
-}
-
-.c20::-webkit-progress-value {
-  background-color: #ee7c1b;
-  -webkit-transition: width 250ms;
-  transition: width 250ms;
-}
-
-.c20::-moz-progress-bar {
-  background-color: #ee7c1b;
-}
-
-.c20::-ms-fill {
-  background-color: #ee7c1b;
-  border: 0;
-}
-
-.c15 {
-  padding: 0 20px;
-}
-
-.c14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c4 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c11 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c12 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c13 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c6 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c7 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c9 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c10 {
-  color: #3c4043;
-}
-
-.c14 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c14:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c5 {
-  padding: 12px 16px;
-}
-
-.c5:first-child {
-  margin-bottom: -16px;
-}
-
-.c8 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-.c19 {
-  border: none;
-  width: 100%;
-  height: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-}
-
-.c19:focus {
-  outline: 0;
-}
-
-.c18 {
-  -webkit-flex: 0 1 100%;
-  -ms-flex: 0 1 100%;
-  flex: 0 1 100%;
-  border: 1px solid #ddd;
-  padding: 3px 5px;
-  box-sizing: border-box;
-  box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
-  background-color: #fff;
-  color: #32373c;
-  outline: 0;
-  -webkit-transition: 50ms border-color ease-in-out;
-  transition: 50ms border-color ease-in-out;
-  position: relative;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-size: 14px;
-  cursor: text;
-}
-
-.c18::before {
-  display: block;
-  position: absolute;
-  top: -1px;
-  left: -25px;
-  width: 24px;
-  height: 24px;
-  background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22transparent%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
-  background-size: 25px;
-  content: "";
-}
-
-.c0 {
-  border: 0;
-  padding: 0;
-  margin: 0 0 16px;
-}
-
-.c1 {
-  margin: 8px 0;
-  padding: 0;
-  color: #555;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.c3 {
-  margin-right: 16px;
-  color: inherit;
-  font-size: 14px;
-  line-height: 1.71428571;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c2.c2 {
-  margin: 0 8px 0 0;
-  cursor: pointer;
-}
-
-<div>
-  <fieldset
-    className="c0"
-  >
-    <legend
-      className="c1"
-    >
-      Preview as:
-    </legend>
-    <input
-      autoComplete={undefined}
-      checked={true}
-      className="c2"
-      defaultValue="mobile"
-      id="yoast-google-preview-mode-mobile"
-      name="screen"
-      onChange={[Function]}
-      type="radio"
-    />
-    <label
-      className="c3"
-      htmlFor="yoast-google-preview-mode-mobile"
-    >
-      Mobile result
-    </label>
-    <input
-      autoComplete={undefined}
-      checked={false}
-      className="c2"
-      defaultValue="desktop"
-      id="yoast-google-preview-mode-desktop"
-      name="screen"
-      onChange={[Function]}
-      type="radio"
-    />
-    <label
-      className="c3"
-      htmlFor="yoast-google-preview-mode-desktop"
-    >
-      Desktop result
-    </label>
-  </fieldset>
-  <section>
-    <div
-      className="c4"
-      id="yoast-snippet-preview-container"
-      width={null}
-    >
-      <div
-        className="c5"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c6"
-        >
-          <div
-            className="c7"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <img
-              alt=""
-              className="c8"
-              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-            />
-            <span
-              className="c9"
-            >
-              <span
-                className="c10"
-              >
-                example.org
-              </span>
-               › test-slug
-            </span>
-          </div>
-        </div>
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c12"
-          >
-            <span
-              className="c13"
-            >
-              Test title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="c5 yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-      <div
-        className="c5"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c14"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c14"
-          >
-            
-            
-            Test description, %%replacement_variable%%
-          </div>
-        </div>
-      </div>
-      <div
-        className="c5 yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        <div
-          className="c14"
-        >
-          
-          
-          
-        </div>
-      </div>
-    </div>
-  </section>
-  <section
-    className="c15"
-  >
-    <div />
-    <progress
-      aria-hidden="true"
-      className="c16"
-      max={600}
-      value={0}
-    />
-    <div
-      className="c17"
-      id="snippet-editor-field-1-slug"
-      onClick={[Function]}
-    >
-      Slug
-    </div>
-    <div
-      className="c18"
-      onClick={[Function]}
-    >
-      <input
-        aria-labelledby="snippet-editor-field-1-slug"
-        className="c19"
-        id="yoast-google-preview-slug"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        value="test-slug"
-      />
-    </div>
-    <div />
-    <progress
-      aria-hidden="true"
-      className="c20"
-      max={156}
-      value={42}
-    />
-  </section>
-</div>
-`;
-
-exports[`SnippetEditor shows the editor 1`] = `
-.c14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c4 {
-  border-bottom: 1px hidden #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  max-width: 400px;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-
-.c11 {
-  cursor: pointer;
-  position: relative;
-}
-
-.c12 {
-  color: #1967d2;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: normal;
-  margin: 0;
-  display: inline-block;
-  overflow: hidden;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-  max-width: 600px;
-  vertical-align: top;
-  text-overflow: ellipsis;
-}
-
-.c13 {
-  display: inline-block;
-  max-height: 40px;
-  padding-top: 1px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c6 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-}
-
-.c7 {
-  display: inline-block;
-  cursor: pointer;
-  position: relative;
-  max-width: 90%;
-  white-space: nowrap;
-  font-size: 14px;
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  margin-bottom: 12px;
-  padding-top: 1px;
-  line-height: 20px;
-  vertical-align: top;
-}
-
-.c9 {
-  font-size: 12px;
-  line-height: 20px;
-  color: #3c4043;
-}
-
-.c10 {
-  color: #3c4043;
-}
-
-.c14 {
-  color: #3c4043;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  position: relative;
-  max-width: 600px;
-}
-
-.c14:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.c5 {
-  padding: 12px 16px;
-}
-
-.c5:first-child {
-  margin-bottom: -16px;
-}
-
-.c8 {
-  width: 16px;
-  height: 16px;
-  margin-right: 12px;
-  vertical-align: middle;
-}
-
-.c0 {
-  border: 0;
-  padding: 0;
-  margin: 0 0 16px;
-}
-
-.c1 {
-  margin: 8px 0;
-  padding: 0;
-  color: #555;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.c3 {
-  margin-right: 16px;
-  color: inherit;
-  font-size: 14px;
-  line-height: 1.71428571;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.c2.c2 {
-  margin: 0 8px 0 0;
-  cursor: pointer;
-}
-
-.c15 {
-  color: #555;
-  border-color: #ccc;
-  background: #f7f7f7;
-  box-shadow: 0 1px 0 rgba( 204,204,204,1 );
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  vertical-align: middle;
-  border-width: 1px;
-  border-style: solid;
-  margin: 0;
-  padding: 4px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  box-sizing: border-box;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  text-align: left;
-  overflow: visible;
-  min-height: 32px;
-  -webkit-transition: var(--yoast-transition-default);
-  transition: var(--yoast-transition-default);
-  height: 33px;
-  border: 1px solid #dbdbdb;
-  box-shadow: none;
-  font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
-  margin: 10px 0 0 4px;
-  fill: #555;
-  padding-left: 8px;
-}
-
-.c15:active {
-  color: #000;
-  background-color: #f7f7f7;
-  box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c15::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c15:focus {
-  outline: none;
-  border-color: #0066cd;
-  color: #000;
-  background-color: #fff;
-  box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c15:hover {
-  color: #000;
-  background-color: #fff;
-  border-color: var(--yoast-color-border--default);
-}
-
-.c15 svg {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-}
-
-.c15 svg {
-  margin-right: 7px;
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
-  .c15::after {
-    display: inline-block;
-    content: "";
-    min-height: 22px;
-  }
-}
-
-<div>
-  <fieldset
-    className="c0"
-  >
-    <legend
-      className="c1"
-    >
-      Preview as:
-    </legend>
-    <input
-      autoComplete={undefined}
-      checked={true}
-      className="c2"
-      defaultValue="mobile"
-      id="yoast-google-preview-mode-mobile"
-      name="screen"
-      onChange={[Function]}
-      type="radio"
-    />
-    <label
-      className="c3"
-      htmlFor="yoast-google-preview-mode-mobile"
-    >
-      Mobile result
-    </label>
-    <input
-      autoComplete={undefined}
-      checked={false}
-      className="c2"
-      defaultValue="desktop"
-      id="yoast-google-preview-mode-desktop"
-      name="screen"
-      onChange={[Function]}
-      type="radio"
-    />
-    <label
-      className="c3"
-      htmlFor="yoast-google-preview-mode-desktop"
-    >
-      Desktop result
-    </label>
-  </fieldset>
-  <section>
-    <div
-      className="c4"
-      id="yoast-snippet-preview-container"
-      width={null}
-    >
-      <div
-        className="c5"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Url preview:
-        </span>
-        <div
-          className="c6"
-        >
-          <div
-            className="c7"
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          >
-            <img
-              alt=""
-              className="c8"
-              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC"
-            />
-            <span
-              className="c9"
-            >
-              <span
-                className="c10"
-              >
-                example.org
-              </span>
-               › test-slug
-            </span>
-          </div>
-        </div>
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          SEO title preview:
-        </span>
-        <div
-          className="c11"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c12"
-          >
-            <span
-              className="c13"
-            >
-              Test title
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        className="c5 yoast-shopping-data-preview--desktop"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-      </div>
-      <div
-        className="c5"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Meta description preview:
-        </span>
-        <div
-          className="c14"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <div
-            className="c14"
-          >
-            
-            
-            Test description, %%replacement_variable%%
-          </div>
-        </div>
-      </div>
-      <div
-        className="c5 yoast-shopping-data-preview--mobile"
-      >
-        <span
-          className="screen-reader-text"
-          style={
-            Object {
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "height": "1px",
-              "overflow": "hidden",
-              "position": "absolute",
-              "width": "1px",
-            }
-          }
-        >
-          Shopping data preview:
-        </span>
-        <div
-          className="c14"
-        >
-          
-          
-          
-        </div>
-      </div>
-    </div>
-  </section>
-  <button
-    aria-expanded={false}
-    className="c15"
-    onClick={[Function]}
-    type="button"
-  >
-    <svg
-      aria-hidden={true}
-      className="yoast-svg-icon yoast-svg-icon-edit createSvgIconComponent__StyledSvg-sc-1h4gl3a-0 cPnaHk"
-      fill="currentColor"
-      focusable="false"
-      role="img"
-      size="16px"
-      viewBox="0 0 1792 1792"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"
-      />
-    </svg>
-    Edit snippet
-  </button>
-</div>
-`;

From fb4ca072761cc53449991df05e90e490a672d258 Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Thu, 1 Apr 2021 13:51:29 +0200
Subject: [PATCH 16/22] limit rating input between 0 and 5

---
 packages/components/src/star-rating/StarRating.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/star-rating/StarRating.js b/packages/components/src/star-rating/StarRating.js
index 8fbad23f12..a763b36e66 100644
--- a/packages/components/src/star-rating/StarRating.js
+++ b/packages/components/src/star-rating/StarRating.js
@@ -6,10 +6,21 @@ import PropTypes from "prop-types";
  *
  * @param {Object} props The props.
  *
- * @returns {React.Component} The StarRating Component.
+ * @returns {React.Component} The StarRating Component displays a number between 0 and 5 as (partly) colored stars.
  */
 function StarRating( props ) {
-	const ratingPercentage = props.rating * 20;
+	let rating = props.rating;
+
+	// As we have 5 stars, the rating should be between 0 and 5.
+	if ( rating < 0 ) {
+		rating = 0;
+	}
+
+	if ( rating > 5 ) {
+		rating = 5;
+	}
+
+	const ratingPercentage = rating * 20;
 
 	return (
 		<div

From 987d696f6f445da4079a9b41a1f88855e3068c8a Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Tue, 6 Apr 2021 12:01:33 +0200
Subject: [PATCH 17/22] update translateability and replace ternary's

---
 .../src/snippet-preview/ProductDataDesktop.js | 35 ++++++++++---------
 .../src/snippet-preview/ProductDataMobile.js  | 15 ++++----
 .../src/snippet-preview/SnippetPreview.js     |  6 ++--
 3 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js b/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
index d3d95aa554..d3822b5197 100644
--- a/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
+++ b/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
@@ -1,14 +1,11 @@
 import React, { Fragment } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import { __ } from "@wordpress/i18n";
+import { __, sprintf } from "@wordpress/i18n";
 import { round } from "lodash";
-
 import { StarRating } from "@yoast/components";
 
-const ProductData = styled.p`
-	display: inline;
-	margin-left: 0.3em;
+const ProductData = styled.span`
 	color: #70757a;
 `;
 
@@ -22,25 +19,29 @@ const ProductData = styled.p`
 function ProductDataDesktop( props ) {
 	const { shoppingData } = props;
 
+	/* Translators: %s expands to the actual rating. */
+	const ratingPart = sprintf( __( "Rating: %s", "yoast-components" ), round( ( shoppingData.rating * 2 ), 1 ) + "/10" );
+
+	/* Translators: %s expands to the actual rating. */
+	const reviewPart = sprintf( __( "%s reviews", "yoast-components" ), shoppingData.reviewCount );
+
 	return (
-		<Fragment>
-			{ ( shoppingData.reviewCount > 0 ) ? <StarRating rating={ shoppingData.rating } /> : "" }
 			<ProductData>
-				{ ( shoppingData.reviewCount > 0 )
-					? <Fragment>
-						<span>{ __( "Rating: ", "yoast-components" ) + round( ( shoppingData.rating * 2 ), 1 ) } /10 · </span>
-						<span>{ shoppingData.reviewCount } { __( "reviews", "yoast-components" ) } · </span>
+			{ ( shoppingData.reviewCount > 0 ) &&
+				<Fragment>
+					<StarRating rating={ shoppingData.rating } />
+					<span> { ratingPart } · </span>
+					<span>{ reviewPart } · </span>
 					</Fragment>
-					: "" }
-				{ ( shoppingData.price )
-					? <Fragment>
+			}
+			{ shoppingData.price &&
+				<Fragment>
 						<span dangerouslySetInnerHTML={ { __html: shoppingData.price } } />‎
 					</Fragment>
-					: ""
 				}
-				{ ( shoppingData.availability ) ? <span> · { shoppingData.availability }</span> : "" }
+			{ shoppingData.availability &&
+				<span> · { shoppingData.availability }</span> }
 			</ProductData>
-		</Fragment>
 	);
 }
 
diff --git a/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js b/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
index c8eac25575..4f2fb30ecc 100644
--- a/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
+++ b/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
@@ -36,8 +36,8 @@ function ProductDataMobile( props ) {
 
 	return (
 		<ProductData>
-			{ ( shoppingData.rating > 0 )
-				? <ProductDataCell50 className="yoast-shopping-data-preview__column">
+			{ ( shoppingData.rating > 0 ) &&
+				<ProductDataCell50 className="yoast-shopping-data-preview__column">
 					<div className="yoast-shopping-data-preview__upper">{ __( "Rating", "yoast-components" ) }</div>
 					<ProductDataInnerLower className="yoast-shopping-data-preview__lower">
 						<span>{ round( ( shoppingData.rating * 2 ), 1 ) }/10 </span>
@@ -45,26 +45,23 @@ function ProductDataMobile( props ) {
 						<span> ({ shoppingData.reviewCount })</span>
 					</ProductDataInnerLower>
 				</ProductDataCell50>
-				: ""
 			}
-			{ ( shoppingData.price )
-				? <ProductDataCell25 className="yoast-shopping-data-preview__column">
+			{ ( shoppingData.price ) &&
+				<ProductDataCell25 className="yoast-shopping-data-preview__column">
 					<div className="yoast-shopping-data-preview__upper">{ __( "Price", "yoast-components" ) }</div>
 					<ProductDataInnerLower
 						className="yoast-shopping-data-preview__lower"
 						dangerouslySetInnerHTML={ { __html: shoppingData.price } }
 					/>
 				</ProductDataCell25>
-				: ""
 			}
-			{ ( shoppingData.availability )
-				? <ProductDataCell25 className="yoast-shopping-data-preview__column">
+			{ ( shoppingData.availability ) &&
+				<ProductDataCell25 className="yoast-shopping-data-preview__column">
 					<div className="yoast-shopping-data-preview__upper">{ __( "Availability", "yoast-components" ) }</div>
 					<ProductDataInnerLower className="yoast-shopping-data-preview__lower">
 						{ shoppingData.availability }
 					</ProductDataInnerLower>
 				</ProductDataCell25>
-				: ""
 			}
 		</ProductData>
 	);
diff --git a/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js b/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
index 1af0940380..bc9fb2737d 100644
--- a/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
+++ b/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
@@ -811,19 +811,19 @@ export default class SnippetPreview extends PureComponent {
 					</PartContainer>
 					<PartContainer className="yoast-shopping-data-preview--desktop">
 						<ScreenReaderText>
-							{ __( "Shopping data preview", "yoast-components" ) + ":" }
+							{ __( "Shopping data preview:", "yoast-components" ) }
 						</ScreenReaderText>
 						{ isDesktopMode && this.renderProductData() }
 					</PartContainer>
 					<PartContainer>
 						<ScreenReaderText>
-							{ __( "Meta description preview", "yoast-components" ) + ":" }
+							{ __( "Meta description preview:", "yoast-components" ) }
 						</ScreenReaderText>
 						{ this.renderDescription() }
 					</PartContainer>
 					<PartContainer className="yoast-shopping-data-preview--mobile">
 						<ScreenReaderText>
-							{ __( "Shopping data preview", "yoast-components" ) + ":" }
+							{ __( "Shopping data preview:", "yoast-components" ) }
 						</ScreenReaderText>
 						{ ! isDesktopMode && this.renderProductData() }
 					</PartContainer>

From 74e8ba7ea81e6544ea3e779de09534160c5326c1 Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Tue, 6 Apr 2021 12:02:02 +0200
Subject: [PATCH 18/22] define PropType shape

---
 .../src/snippet-preview/ProductDataDesktop.js | 19 ++++++++++++-------
 .../src/snippet-preview/ProductDataMobile.js  |  7 ++++++-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js b/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
index d3822b5197..198c393c37 100644
--- a/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
+++ b/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
@@ -26,27 +26,32 @@ function ProductDataDesktop( props ) {
 	const reviewPart = sprintf( __( "%s reviews", "yoast-components" ), shoppingData.reviewCount );
 
 	return (
-			<ProductData>
+		<ProductData>
 			{ ( shoppingData.reviewCount > 0 ) &&
 				<Fragment>
 					<StarRating rating={ shoppingData.rating } />
 					<span> { ratingPart } · </span>
 					<span>{ reviewPart } · </span>
-					</Fragment>
+				</Fragment>
 			}
 			{ shoppingData.price &&
 				<Fragment>
-						<span dangerouslySetInnerHTML={ { __html: shoppingData.price } } />‎
-					</Fragment>
-				}
+					<span dangerouslySetInnerHTML={ { __html: shoppingData.price } } />‎
+				</Fragment>
+			}
 			{ shoppingData.availability &&
 				<span> · { shoppingData.availability }</span> }
-			</ProductData>
+		</ProductData>
 	);
 }
 
 export default ProductDataDesktop;
 
 ProductDataDesktop.propTypes = {
-	shoppingData: PropTypes.object.isRequired,
+	shoppingData: PropTypes.shape( {
+		rating: PropTypes.number,
+		reviewCount: PropTypes.number,
+		availability: PropTypes.string,
+		price: PropTypes.string,
+	} ).isRequired,
 };
diff --git a/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js b/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
index 4f2fb30ecc..f1a6e644aa 100644
--- a/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
+++ b/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
@@ -70,5 +70,10 @@ function ProductDataMobile( props ) {
 export default ProductDataMobile;
 
 ProductDataMobile.propTypes = {
-	shoppingData: PropTypes.object.isRequired,
+	shoppingData: PropTypes.shape( {
+		rating: PropTypes.number,
+		reviewCount: PropTypes.number,
+		availability: PropTypes.string,
+		price: PropTypes.string,
+	} ).isRequired,
 };

From e487a15232ac13663e7cfe3d8e80136b3a774ac8 Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Tue, 6 Apr 2021 12:14:52 +0200
Subject: [PATCH 19/22] simplify existence check

---
 .../src/snippet-preview/SnippetPreview.js     | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js b/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
index bc9fb2737d..d114d0e55d 100644
--- a/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
+++ b/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
@@ -732,20 +732,25 @@ export default class SnippetPreview extends PureComponent {
 	renderProductData() {
 		const {	mode, shoppingData } = this.props;
 
-		if ( mode === MODE_DESKTOP && shoppingData !== null ) {
-			return (
-				<ProductDataDesktop
-					shoppingData={ shoppingData }
-				/>
-			);
-		} else if ( mode === MODE_MOBILE && shoppingData !== null ) {
-			return (
-				<ProductDataMobile
-					shoppingData={ shoppingData }
-				/>
-			);
-		}
-		return null;
+		if ( shoppingData !== {} ) {
+
+			if ( mode === MODE_DESKTOP ) {
+				return (
+					<ProductDataDesktop
+						shoppingData={ shoppingData }
+					/>
+				);
+			}
+			
+			if ( mode === MODE_MOBILE ) {
+				return (
+					<ProductDataMobile
+						shoppingData={ shoppingData }
+					/>
+				);
+			}
+
+			return null;	
 	}
 
 	/**

From bc4cba5e3563f264174734a6e44479464912bcca Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Tue, 6 Apr 2021 12:47:15 +0200
Subject: [PATCH 20/22] fix typo

---
 .../src/snippet-preview/SnippetPreview.js                   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js b/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
index d114d0e55d..c5d4d9567f 100644
--- a/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
+++ b/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
@@ -733,7 +733,6 @@ export default class SnippetPreview extends PureComponent {
 		const {	mode, shoppingData } = this.props;
 
 		if ( shoppingData !== {} ) {
-
 			if ( mode === MODE_DESKTOP ) {
 				return (
 					<ProductDataDesktop
@@ -741,7 +740,7 @@ export default class SnippetPreview extends PureComponent {
 					/>
 				);
 			}
-			
+
 			if ( mode === MODE_MOBILE ) {
 				return (
 					<ProductDataMobile
@@ -750,7 +749,8 @@ export default class SnippetPreview extends PureComponent {
 				);
 			}
 
-			return null;	
+			return null;
+		}
 	}
 
 	/**

From c98f93ec4bcd26cee8e07012b3b1b8894b79d310 Mon Sep 17 00:00:00 2001
From: Marijn Koopman <69148430+marijnyoast@users.noreply.github.com>
Date: Wed, 7 Apr 2021 10:52:39 +0200
Subject: [PATCH 21/22] Apply suggestions from code review

Co-authored-by: Igor <35524806+igorschoester@users.noreply.github.com>
---
 .../src/snippet-preview/ProductDataDesktop.js                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js b/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
index 198c393c37..4db094cf29 100644
--- a/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
+++ b/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
@@ -19,10 +19,10 @@ const ProductData = styled.span`
 function ProductDataDesktop( props ) {
 	const { shoppingData } = props;
 
-	/* Translators: %s expands to the actual rating. */
+	/* Translators: %s expands to the actual rating, e.g. 8/10. */
 	const ratingPart = sprintf( __( "Rating: %s", "yoast-components" ), round( ( shoppingData.rating * 2 ), 1 ) + "/10" );
 
-	/* Translators: %s expands to the actual rating. */
+	/* Translators: %s expands to the review count. */
 	const reviewPart = sprintf( __( "%s reviews", "yoast-components" ), shoppingData.reviewCount );
 
 	return (

From f90465904f24dc5d43bc8dd52c6bdac0291b9f9a Mon Sep 17 00:00:00 2001
From: marijnyoast <marijn@yoast.com>
Date: Wed, 7 Apr 2021 10:55:55 +0200
Subject: [PATCH 22/22] fix object empty check

---
 .../src/snippet-preview/SnippetPreview.js     | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js b/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
index c5d4d9567f..9ad2c1de9b 100644
--- a/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
+++ b/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
@@ -732,25 +732,27 @@ export default class SnippetPreview extends PureComponent {
 	renderProductData() {
 		const {	mode, shoppingData } = this.props;
 
-		if ( shoppingData !== {} ) {
-			if ( mode === MODE_DESKTOP ) {
-				return (
-					<ProductDataDesktop
-						shoppingData={ shoppingData }
-					/>
-				);
-			}
+		if ( Object.values( shoppingData ).length === 0 ) {
+			return null;
+		}
 
-			if ( mode === MODE_MOBILE ) {
-				return (
-					<ProductDataMobile
-						shoppingData={ shoppingData }
-					/>
-				);
-			}
+		if ( mode === MODE_DESKTOP ) {
+			return (
+				<ProductDataDesktop
+					shoppingData={ shoppingData }
+				/>
+			);
+		}
 
-			return null;
+		if ( mode === MODE_MOBILE ) {
+			return (
+				<ProductDataMobile
+					shoppingData={ shoppingData }
+				/>
+			);
 		}
+
+		return null;
 	}
 
 	/**