@yoast/related-keyphrase-suggestions 0.1.0

package/build/components/Modal/index.js

@@ -0,0 +1,66 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { __, sprintf } from "@wordpress/i18n";
+import { Link, Modal as BaseModal } from "@yoast/ui-library";
+import { ExternalLinkIcon, ArrowNarrowRightIcon } from "@heroicons/react/outline";
+import { YoastIcon } from "./YoastIcon";
+
+/**
+ * The modal component with header and footer links.
+ *
+ * @param {boolean} isOpen Whether the modal is open.
+ * @param {Function} onClose The function to call when the modal is closed.
+ * @param {string} insightsLink The links to the insights.
+ * @param {string} learnMoreLink The link to the learn more page.
+ * @param {JSX.node?} [children=null] The content of the modal.
+ *
+ * @returns {JSX.Element} The modal component.
+ */
+export const Modal = ({
+  isOpen,
+  onClose,
+  insightsLink,
+  learnMoreLink,
+  children = null
+}) => {
+  return /*#__PURE__*/React.createElement(BaseModal, {
+    onClose: onClose,
+    isOpen: isOpen
+  }, /*#__PURE__*/React.createElement(BaseModal.Panel, {
+    className: "yst-p-0 yst-max-w-2xl"
+  }, /*#__PURE__*/React.createElement(BaseModal.Container.Header, {
+    className: "yst-flex yst-gap-3 yst-p-6 yst-border-b-slate-200 yst-border-b yst-flex-row"
+  }, /*#__PURE__*/React.createElement(YoastIcon, null), /*#__PURE__*/React.createElement(BaseModal.Title, {
+    as: "h3",
+    className: "yst-text-lg yst-font-medium"
+  }, __("Related keyphrases", "wordpress-seo"))), /*#__PURE__*/React.createElement(BaseModal.Container.Content, {
+    className: "yst-related-keyphrase-modal-content yst-m-0"
+  }, children), /*#__PURE__*/React.createElement(BaseModal.Container.Footer, {
+    className: "yst-p-6 yst-border-t yst-border-t-slate-200 yst-flex yst-justify-between"
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: insightsLink,
+    className: "yst-modal-footer-link",
+    target: "_blank"
+  }, sprintf(/* translators: %s expands to Semrush */
+  __("Get more insights at %s", "wordpress-seo"), "Semrush"), /*#__PURE__*/React.createElement("span", {
+    className: "yst-sr-only"
+  }, __("(Opens in a new browser tab)", "wordpress-seo")), /*#__PURE__*/React.createElement(ExternalLinkIcon, {
+    className: "yst-link-icon rtl:yst-rotate-[270deg]"
+  })), /*#__PURE__*/React.createElement(Link, {
+    href: learnMoreLink,
+    className: "yst-modal-footer-link yst-text-primary-500",
+    target: "_blank"
+  }, __("Learn more about the metrics", "wordpress-seo"), /*#__PURE__*/React.createElement("span", {
+    className: "yst-sr-only"
+  }, __("(Opens in a new browser tab)", "wordpress-seo")), /*#__PURE__*/React.createElement(ArrowNarrowRightIcon, {
+    className: "yst-link-icon rtl:yst-rotate-180"
+  })))));
+};
+Modal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  insightsLink: PropTypes.string.isRequired,
+  learnMoreLink: PropTypes.string.isRequired,
+  children: PropTypes.node
+};
+//# sourceMappingURL=index.js.map

package/build/css/style.css

@@ -0,0 +1,117 @@
+@layer components {
+	.yst-root {
+		.yst-difficulty--very-easy {
+			@apply yst-bg-emerald-300;
+		}
+
+		.yst-difficulty--easy {
+			@apply yst-bg-emerald-600;
+		}
+
+		.yst-difficulty--possible {
+			@apply yst-bg-amber-400;
+		}
+
+		.yst-difficulty--difficult {
+			@apply yst-bg-orange-400;
+		}
+
+		.yst-difficulty--hard {
+			@apply yst-bg-red-500;
+		}
+
+		.yst-difficulty--very-hard {
+			@apply yst-bg-red-700;
+		}
+	}
+}@layer components {
+	.yst-root {
+
+        .yst-intent-badge {
+            @apply yst-rounded-sm yst-w-5 yst-h-5 yst-flex yst-items-center yst-justify-center yst-font-semibold yst-text-sm yst-relative yst-uppercase;
+
+            &.yst-intent-badge--i {
+                @apply yst-text-blue-900 yst-bg-blue-200;
+            }
+            &.yst-intent-badge--n {
+                @apply yst-text-violet-900 yst-bg-violet-200;
+            }
+            &.yst-intent-badge--c {
+                @apply yst-text-amber-900 yst-bg-amber-200;
+            }
+            &.yst-intent-badge--t {
+                @apply yst-text-green-900 yst-bg-green-200;
+            }
+        }
+    }
+}@layer components {
+	.yst-root {
+
+        .yst-table-button {
+			@apply yst-gap-2;
+
+            &.yst-button--secondary {
+                .yst-button-icon {
+                    @apply yst-text-slate-400 yst-w-3 yst-h-3;
+                }
+            }
+    
+            &.yst-button--tertiary {
+                @apply yst-text-red-500 hover:yst-text-red-700;
+    
+                .yst-button-icon {
+                    @apply yst-w-3.5 yst-h-3.5;
+                }
+            }
+        }
+
+        .yst-success-message {
+            @apply 
+            yst-flex 
+            yst-items-center 
+            yst-justify-center 
+            yst-gap-1 
+            yst-text-slate-600 
+            yst-text-xs 
+            yst-px-3 
+            yst-py-1 
+            yst-leading-5
+            yst-transition 
+            yst-duration-300 
+            yst-ease-out;
+
+            .yst-success-icon {
+                @apply yst-w-4 yst-h-4;
+            }
+
+            &.yst-success-message-add {
+                .yst-success-icon {
+                    @apply yst-text-green-400;
+                }
+            }
+
+            &.yst-success-message-remove {
+                .yst-success-icon {
+                    @apply yst-text-red-500;
+                }
+            }
+
+        }
+    }
+}@layer components {
+	.yst-root {
+        .yst-modal-footer-link {
+            @apply yst-flex yst-flex-row yst-gap-1 yst-items-center;
+
+            .yst-link-icon {
+                @apply yst-w-3 yst-h-3;
+            }
+        }
+
+		.yst-related-keyphrase-modal-content {
+			max-height: 60vh;
+			min-height: 350px;
+			@apply yst-p-6 yst-overflow-y-auto;
+		}
+    }
+}

package/build/elements/DifficultyBullet/index.js

@@ -0,0 +1,104 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import { __ } from "@wordpress/i18n";
+import { TooltipContainer, TooltipTrigger, TooltipWithContext } from "@yoast/ui-library";
+const variants = [{
+  min: 0,
+  max: 14,
+  name: "very-easy",
+  tooltip: {
+    title: __("Very easy", "wordpress-seo"),
+    description: __("Your chance to start ranking new pages.", "wordpress-seo")
+  }
+}, {
+  min: 15,
+  max: 29,
+  name: "easy",
+  tooltip: {
+    title: __("Easy", "wordpress-seo"),
+    description: __("You will need quality content focused on the keyword’s intent.", "wordpress-seo")
+  }
+}, {
+  min: 30,
+  max: 49,
+  name: "possible",
+  tooltip: {
+    title: __("Possible", "wordpress-seo"),
+    description: __("You will need well-structured and unique content.", "wordpress-seo")
+  }
+}, {
+  min: 50,
+  max: 69,
+  name: "difficult",
+  tooltip: {
+    title: __("Difficult", "wordpress-seo"),
+    description: __("You will need lots of ref. domains and optimized content.", "wordpress-seo")
+  }
+}, {
+  min: 70,
+  max: 84,
+  name: "hard",
+  tooltip: {
+    title: __("Hard", "wordpress-seo"),
+    description: __("You will need lots of high-quality ref. domains and optimized content.", "wordpress-seo")
+  }
+}, {
+  min: 85,
+  max: 100,
+  name: "very-hard",
+  tooltip: {
+    title: __("Very hard", "wordpress-seo"),
+    description: __("It will take a lot of on-page SEO, link building, and content promotion efforts.", "wordpress-seo")
+  }
+}];
+
+/**
+ * Returns the variant of the difficulty.
+ *
+ * @param {number} value The difficulty index (0-100).
+ * @returns {object} The variant of the difficulty.
+ */
+const getVariant = value => {
+  for (const variant of variants) {
+    if (variant.min <= value && value <= variant.max) {
+      return variant;
+    }
+  }
+};
+
+/**
+ *
+ * @param {number} value The index of difficulty (0-100).
+ * @param {string} id The id of the tooltip.
+ *
+ * @returns {JSX.Element} The percentage of difficulty with a bullet with matching color.
+ */
+export const DifficultyBullet = ({
+  value,
+  id
+}) => {
+  const variant = getVariant(value);
+  if (!variant) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(TooltipContainer, null, /*#__PURE__*/React.createElement(TooltipTrigger, {
+    ariaDescribedby: id,
+    className: "yst-flex yst-gap-2 yst-items-center yst-relative yst-w-10"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "yst-text-right yst-w-5"
+  }, value), /*#__PURE__*/React.createElement("div", {
+    className: classNames("yst-w-3 yst-h-3 yst-rounded-full", `yst-difficulty--${variant.name}`)
+  })), /*#__PURE__*/React.createElement(TooltipWithContext, {
+    id: id,
+    className: "yst-w-48 yst-text-xs yst-leading-4 yst-font-normal",
+    position: "left"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "yst-font-medium"
+  }, variant.tooltip.title, " "), variant.tooltip.description));
+};
+DifficultyBullet.propTypes = {
+  value: PropTypes.number.isRequired,
+  id: PropTypes.string.isRequired
+};
+//# sourceMappingURL=index.js.map

package/build/elements/IntentBadge/index.js

@@ -0,0 +1,57 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import { TooltipContainer, TooltipTrigger, TooltipWithContext } from "@yoast/ui-library";
+import { __ } from "@wordpress/i18n";
+const variants = {
+  i: {
+    title: __("Informational", "wordpress-seo"),
+    description: __("The user wants to find an answer to a specific question.", "wordpress-seo")
+  },
+  n: {
+    title: __("Navigational", "wordpress-seo"),
+    description: __("The user wants to find a specific page or site.", "wordpress-seo")
+  },
+  c: {
+    title: __("Commercial", "wordpress-seo"),
+    description: __("The user wants to investigate brands or services.", "wordpress-seo")
+  },
+  t: {
+    title: __("Transactional", "wordpress-seo"),
+    description: __("The user wants to complete an action (conversion).", "wordpress-seo")
+  }
+};
+
+/**
+ * The intent badge component.
+ *
+ * @param {string} id The id of the tooltip.
+ * @param {string} value The initial of the intent, can be i,n,c or t only.
+ * @param {string} className The class name.
+ *
+ * @returns {JSX.Element} The colored initial badge.
+ */
+export const IntentBadge = ({
+  id,
+  value,
+  className = ""
+}) => {
+  if (!variants[value]) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(TooltipContainer, null, /*#__PURE__*/React.createElement(TooltipTrigger, {
+    ariaDescribedby: id,
+    className: classNames("yst-intent-badge", `yst-intent-badge--${value}`, className)
+  }, value), /*#__PURE__*/React.createElement(TooltipWithContext, {
+    id: id,
+    className: "yst-w-48 yst-text-xs yst-leading-4 yst-font-normal"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "yst-font-medium"
+  }, variants[value].title, " "), variants[value].description));
+};
+IntentBadge.propTypes = {
+  id: PropTypes.string.isRequired,
+  value: PropTypes.oneOf(["i", "n", "c", "t"]).isRequired,
+  className: PropTypes.string
+};
+//# sourceMappingURL=index.js.map

package/build/elements/PremiumUpsell/index.js

@@ -0,0 +1,39 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { __, sprintf } from "@wordpress/i18n";
+import { Button } from "@yoast/ui-library";
+import { LockOpenIcon } from "@heroicons/react/outline";
+
+/**
+ * The premium upsell component.
+ *
+ * @param {string} url The URL to the premium page.
+ * @param {string} [className=""] The class name for the component.
+ *
+ * @returns {JSX.Element} The premium upsell component.
+ */
+export const PremiumUpsell = ({
+  url,
+  className = ""
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React.createElement("p", null, sprintf(/* translators: %s: Expands to "Yoast SEO". */
+  __("You’ll reach more people with multiple keyphrases! Want to quickly add these related keyphrases to the %s analyses for even better content optimization?", "wordpress-seo"), "Yoast SEO")), /*#__PURE__*/React.createElement(Button, {
+    variant: "upsell",
+    as: "a",
+    href: url,
+    className: "yst-mt-4 yst-gap-2",
+    target: "_blank"
+  }, /*#__PURE__*/React.createElement(LockOpenIcon, {
+    className: "yst-w-4 yst-h-4 yst-text-amber-900"
+  }), sprintf(/* translators: %s: Expands to "Yoast SEO Premium". */
+  __("Explore %s!", "wordpress-seo"), "Yoast SEO Premium"), /*#__PURE__*/React.createElement("span", {
+    className: "yst-sr-only"
+  }, __("(Opens in a new browser tab)", "wordpress-seo"))));
+};
+PremiumUpsell.propTypes = {
+  url: PropTypes.string.isRequired,
+  className: PropTypes.string
+};
+//# sourceMappingURL=index.js.map

package/build/elements/TableButton/index.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from "react";
+import classNames from "classnames";
+import PropTypes from "prop-types";
+import { TrashIcon, PlusIcon, CheckIcon, XIcon } from "@heroicons/react/outline";
+import { Button } from "@yoast/ui-library";
+import { __ } from "@wordpress/i18n";
+const variants = {
+  add: {
+    button: {
+      Icon: PlusIcon,
+      label: __("Add", "wordpress-seo"),
+      variant: "secondary"
+    },
+    success: {
+      Icon: CheckIcon,
+      label: __("Added!", "wordpress-seo")
+    }
+  },
+  remove: {
+    button: {
+      Icon: TrashIcon,
+      label: __("Remove", "wordpress-seo"),
+      variant: "tertiary"
+    },
+    success: {
+      Icon: XIcon,
+      label: __("Removed!", "wordpress-seo")
+    }
+  }
+};
+
+/**
+ * The success message for the table buttons.
+ *
+ * @param {string} [variant="add"] The variant of the success message.
+ * @param {string} className The class name.
+ *
+ * @returns {JSX.Element} The success message.
+ */
+const SuccessMessage = ({
+  variant = "add",
+  className = ""
+}) => {
+  const SuccessIcon = variants[variant].success.Icon;
+  return /*#__PURE__*/React.createElement("div", {
+    role: "alert",
+    className: classNames("yst-success-message yst-animate-appear-disappear", `yst-success-message-${variant}`, className)
+  }, /*#__PURE__*/React.createElement(SuccessIcon, {
+    className: "yst-success-icon"
+  }), variants[variant].success.label);
+};
+SuccessMessage.propTypes = {
+  variant: PropTypes.oneOf(["add", "remove"]),
+  className: PropTypes.string
+};
+
+/**
+ *
+ * @param {string} variant Whether it is an add button or not.
+ * @param {string} [className=""] The class name.
+ *
+ * @returns {JSX.Element} The button.
+ */
+export const TableButton = /*#__PURE__*/forwardRef(({
+  variant = "add",
+  className = "",
+  ...props
+}, ref) => {
+  const ButtonIcon = variants[variant].button.Icon;
+  return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
+    ref: ref,
+    variant: variants[variant].button.variant,
+    size: "small",
+    className: classNames("yst-table-button", className)
+  }), /*#__PURE__*/React.createElement(ButtonIcon, {
+    className: "yst-button-icon yst--mx-1"
+  }), variants[variant].button.label);
+});
+TableButton.propTypes = {
+  variant: PropTypes.oneOf(["add", "remove"]).isRequired,
+  className: PropTypes.string
+};
+TableButton.displayName = "TableButton";
+TableButton.SuccessMessage = SuccessMessage;
+//# sourceMappingURL=index.js.map

package/build/elements/TrendGraph/TrendGraphScreenReader.js

@@ -0,0 +1,46 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { __ } from "@wordpress/i18n";
+const dataTableHeaderLabels = [__("Twelve months ago", "wordpress-seo"), __("Eleven months ago", "wordpress-seo"), __("Ten months ago", "wordpress-seo"), __("Nine months ago", "wordpress-seo"), __("Eight months ago", "wordpress-seo"), __("Seven months ago", "wordpress-seo"), __("Six months ago", "wordpress-seo"), __("Five months ago", "wordpress-seo"), __("Four months ago", "wordpress-seo"), __("Three months ago", "wordpress-seo"), __("Two months ago", "wordpress-seo"), __("Last month", "wordpress-seo")];
+
+/**
+ * Adapts the chart y axis data to a more meaningful format for the alternative representation in the data table.
+ *
+ * @param {number} y The raw y axis data of the chart.
+ *
+ * @returns {number} The formatted y axis data.
+ */
+const mapChartDataToTableData = y => {
+  return Math.round(y * 100);
+};
+
+/**
+ * Renders a table for an accessible representation of the SVG area chart.
+ *
+ * @param {array}    data                      Array of objects with X and Y coordinates for the SVG chart points.
+ * @param {Function} mapChartDataToTableData   Function to adapt the chart points to meaningful data for the table.
+ *
+ * @returns {JSX.Element} The data table for the SVG area chart.
+ */
+export const TrendGraphScreenReader = ({
+  data
+}) => {
+  if (data.length !== dataTableHeaderLabels.length) {
+    throw new Error("The number of headers and header labels don't match.");
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "yst-sr-only"
+  }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("caption", null, __("Keyphrase volume in the last 12 months on a scale from 0 to 100.", "wordpress-seo")), /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, dataTableHeaderLabels.map((label, index) => {
+    return /*#__PURE__*/React.createElement("th", {
+      key: index
+    }, label);
+  }))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, data.map((point, index) => {
+    return /*#__PURE__*/React.createElement("td", {
+      key: index
+    }, mapChartDataToTableData(point));
+  })))));
+};
+TrendGraphScreenReader.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.number).isRequired
+};
+//# sourceMappingURL=TrendGraphScreenReader.js.map

package/build/elements/TrendGraph/index.js

@@ -0,0 +1,64 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { TrendGraphScreenReader } from "./TrendGraphScreenReader";
+
+/**
+ * Renders a SVG area chart.
+ *
+ * @param {array} data Array of objects with X and Y coordinates for the SVG chart points.
+ *
+ * @returns {JSX.Element} The SVG area chart component.
+ */
+export const TrendGraph = ({
+  data
+}) => {
+  const width = 66;
+  const height = 24;
+  const strokeWidth = 1.8;
+  if (data.length !== 12) {
+    const missingLength = 12 - data.length;
+    for (let i = 0; i < missingLength; i++) {
+      data.unshift(0);
+    }
+  }
+
+  // When all the y values are zero, make sure the maximumY value is at least 1 to avoid a division by zero later.
+  const maximumYFromData = Math.max(1, ...data.map(point => point));
+
+  // Reserve some vertical spacing to prevent the SVG stroke from being cut-off.
+  const chartHeight = height - strokeWidth;
+  const polylinePoints = data.map((point, index) => {
+    const x = index / 11 * width;
+    // Add some vertical padding to make sure the line stroke is always drawn within the SVG.
+    const y = chartHeight - point / maximumYFromData * chartHeight + strokeWidth;
+    return `${x},${y}`;
+  }).join(" ");
+
+  // Add points to close the polygon used for the area background.
+  const polygonPoints = `0,${chartHeight + strokeWidth} ` + polylinePoints + ` ${width},${chartHeight + strokeWidth}`;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: `0 0 ${width} ${height}`,
+    className: "yst-block",
+    role: "img",
+    "aria-hidden": "true",
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("polygon", {
+    className: "yst-fill-sky-200",
+    points: polygonPoints
+  }), /*#__PURE__*/React.createElement("polyline", {
+    fill: "none",
+    className: "yst-stroke-blue-500",
+    strokeWidth: strokeWidth,
+    strokeLinejoin: "round",
+    strokeLinecap: "round",
+    points: polylinePoints
+  })), /*#__PURE__*/React.createElement(TrendGraphScreenReader, {
+    data: data
+  }));
+};
+TrendGraph.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.number).isRequired
+};
+//# sourceMappingURL=index.js.map

package/build/elements/UserMessage/components/MaxRelatedKeyphrases.js

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { __, sprintf } from "@wordpress/i18n";
+import { Alert } from "@yoast/ui-library";
+
+/**
+ * Display the message when reaching max related keyphrases.
+ *
+ * @param {string} [className=""] The class name for the alert.
+ *
+ * @returns {React.Component} The alert for max related keyphrases.
+ */
+export const MaxRelatedKeyphrases = ({
+  className = ""
+}) => {
+  return /*#__PURE__*/React.createElement(Alert, {
+    variant: "warning",
+    className: className
+  }, sprintf(/* translators: %s: Expands to "Yoast SEO". */
+  __("You've reached the maximum amount of 4 related keyphrases. You can change or remove related keyphrases in the %s metabox or sidebar.", "wordpress-seo"), "Yoast SEO"));
+};
+MaxRelatedKeyphrases.propTypes = {
+  className: PropTypes.string
+};
+//# sourceMappingURL=MaxRelatedKeyphrases.js.map

package/build/elements/UserMessage/components/RequestEmpty.js

@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { __ } from "@wordpress/i18n";
+import { Alert } from "@yoast/ui-library";
+
+/**
+ * Display the message for a empty request.
+ *
+ * @param {string} [className=""] The class name for the alert.
+ *
+ * @returns {React.Component} The message for a empty request.
+ */
+export const RequestEmpty = ({
+  className = ""
+}) => {
+  return /*#__PURE__*/React.createElement(Alert, {
+    variant: "info",
+    className: className
+  }, __("Sorry, there's no data available for that keyphrase/country combination.", "wordpress-seo"));
+};
+RequestEmpty.propTypes = {
+  className: PropTypes.string
+};
+//# sourceMappingURL=RequestEmpty.js.map

package/build/elements/UserMessage/components/RequestFailed.js

@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { __ } from "@wordpress/i18n";
+import { Alert } from "@yoast/ui-library";
+
+/**
+ * Display the message for a failed request.
+ *
+ * @param {string} [className=""] The class name for the alert.
+ *
+ * @returns {React.Component} The message for a failed request.
+ */
+export const RequestFailed = ({
+  className = ""
+}) => {
+  return /*#__PURE__*/React.createElement(Alert, {
+    variant: "error",
+    className: className
+  }, __("We've encountered a problem trying to get related keyphrases. Please try again later.", "wordpress-seo"));
+};
+RequestFailed.propTypes = {
+  className: PropTypes.string
+};
+//# sourceMappingURL=RequestFailed.js.map