newspack-components 4.6.3 → 4.7.0-alpha.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# newspack-components [4.7.0-alpha.2](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.7.0-alpha.1...newspack-components@4.7.0-alpha.2) (2026-08-20)
+
+
+### Bug Fixes
+
+* **wizard:** refetch data after the installer adds required plugins ([#893](https://github.com/Automattic/newspack-workspace/issues/893)) ([6b23902](https://github.com/Automattic/newspack-workspace/commit/6b239026e4a3dad5118443d9bc384d53248f38fa))
+
 ## newspack-components [4.6.3](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.6.2...newspack-components@4.6.3) (2026-08-20)
 
 

package/colors/colors.module.scss

@@ -7,12 +7,18 @@
 @use "sass:math";
 
 @function to-rgb($color) {
-	@return color.channel($color, "red", $space: rgb) + ", " + color.channel($color, "green", $space: rgb) + ", " + color.channel($color, "blue", $space: rgb);
+	@return color.channel($color, "red", $space: rgb) + ", " + color.channel($color, "green", $space: rgb) + ", " +
+		color.channel($color, "blue", $space: rgb);
 }
 
 @function to-rgba($color) {
 	$alpha: math.div(math.round(color.channel($color, "alpha") * 100), 100);
-	@return rgba(color.channel($color, "red", $space: rgb), color.channel($color, "green", $space: rgb), color.channel($color, "blue", $space: rgb), $alpha);
+	@return rgba(
+		color.channel($color, "red", $space: rgb),
+		color.channel($color, "green", $space: rgb),
+		color.channel($color, "blue", $space: rgb),
+		$alpha
+	);
 }
 
 // Primary: Hex
@@ -75,7 +81,7 @@ $secondary-1000--rgb: to-rgb($secondary-1000);
 $tertiary-000: #fff4f6;
 $tertiary-050: #fee8ed;
 $tertiary-100: #fedbe3;
-$tertiary-200: #fcded8;
+$tertiary-200: #fdced8;
 $tertiary-300: #fdbfcd;
 $tertiary-400: #fcaec0;
 $tertiary-500: #fc9bb3;
@@ -161,13 +167,13 @@ $neutral-1000--rgb: to-rgb($neutral-1000);
 $overlay-000: #0000000d;
 $overlay-050: #0000001a;
 $overlay-100: #00000026;
-$overlay-200: #00000033;
+$overlay-200: #0003;
 $overlay-300: #0000004d;
-$overlay-400: #00000066;
+$overlay-400: #0006;
 $overlay-500: #00000080;
-$overlay-600: #00000099;
+$overlay-600: #0009;
 $overlay-700: #000000b3;
-$overlay-800: #000000cc;
+$overlay-800: #000c;
 $overlay-900: #000000e6;
 $overlay-1000: #000000f2;
 

package/dist/cjs/autocomplete-tokenfield/style.scss

@@ -3,6 +3,7 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-autocomplete-tokenfield {
 	.components-spinner {
@@ -34,8 +35,9 @@
 
 	.newspack-autocomplete-tokenfield__help {
 		color: wp-colors.$gray-700;
-		font-size: inherit;
-		margin-top: 0;
+		font-size: wp-vars.$helptext-font-size;
+		line-height: wp-vars.$default-line-height;
+		margin: wp-vars.$grid-unit-10 0 0;
 	}
 
 	.components-form-token-field__suggestions-list {

package/dist/cjs/breadcrumbs/format-count.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatCount = void 0;
+/**
+ * Group a number for the site's locale rather than the browser's, so a crumb's count
+ * matches both the translated phrasing beside it and every server-rendered figure on
+ * the page. Callers that build their own `countLabel` share this so the visible count
+ * and the spoken one are grouped the same way.
+ *
+ * WordPress ships locales `Intl` rejects outright — `pt_PT_ao90` yields the BCP-47
+ * tag `pt-PT-ao90`, whose four-character variant subtag must start with a digit — so
+ * the tag is shortened a subtag at a time until one is accepted. Falling straight
+ * through to the browser's locale would group `1,234` beside a server-rendered
+ * `1.234`, which is the divergence this helper exists to prevent.
+ *
+ * @param {number} count Number to format.
+ * @return {string} The grouped number.
+ */
+var formatCount = exports.formatCount = function formatCount(count) {
+  var lang = typeof document !== 'undefined' && document.documentElement.lang || '';
+  var subtags = lang.replace(/_/g, '-').split('-').filter(Boolean);
+  while (subtags.length) {
+    try {
+      return Number(count).toLocaleString(subtags.join('-'));
+    } catch (_unused) {
+      subtags.pop();
+    }
+  }
+  return Number(count).toLocaleString();
+};

package/dist/cjs/breadcrumbs/index.js

@@ -1,20 +1,72 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _i18n = require("@wordpress/i18n");
 var _ui = require("@wordpress/ui");
+var _formatCount = require("./format-count");
 require("./style.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-/**
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * WordPress dependencies.
+ */ /**
+ * Internal dependencies.
+ */ /**
+ * A crumb's count, shown in parentheses and spoken as a phrase.
+ *
+ * @param {Object} props
+ * @param {number} [props.count]      Item count.
+ * @param {string} [props.countLabel] Translated accessible phrasing for the count.
+ * @return {JSX.Element|null} The count, or null when the crumb carries none.
  */
+var CrumbCount = function CrumbCount(_ref) {
+  var count = _ref.count,
+    countLabel = _ref.countLabel;
+  if (!Number.isFinite(count)) {
+    return null;
+  }
+  var formatted = (0, _formatCount.formatCount)(count);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: "newspack-breadcrumbs__count",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      "aria-hidden": "true",
+      children: "(".concat(formatted, ")")
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "screen-reader-text",
+      children: countLabel || (0, _i18n.sprintf)(/* translators: %s: number of items in the current view. */
+      (0, _i18n._n)('%s item', '%s items', count, 'newspack-plugin'), formatted)
+    })]
+  });
+};
 
 /**
- * Internal dependencies.
+ * A crumb's label, with its count appended when the item carries one.
+ *
+ * @param {Object} props
+ * @param {string} props.label        Crumb label.
+ * @param {number} [props.count]      Item count to annotate the label with.
+ * @param {string} [props.countLabel] Translated accessible phrasing for the count.
+ * @return {JSX.Element|string} The label, annotated when a count is present.
  */
+var CrumbLabel = function CrumbLabel(_ref2) {
+  var label = _ref2.label,
+    count = _ref2.count,
+    countLabel = _ref2.countLabel;
+  if (!Number.isFinite(count)) {
+    return label;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [label, " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(CrumbCount, {
+      count: count,
+      countLabel: countLabel
+    })]
+  });
+};
 
 /**
  * Newspack breadcrumb trail.
@@ -25,11 +77,12 @@ var _jsxRuntime = require("react/jsx-runtime");
  * component needs no router context.
  *
  * @param {Object} props
- * @param {Array}  props.items Trail items: `{ label, url? }`.
+ * @param {Array}  props.items Trail items: `{ label, url?, count?, countLabel? }`.
  * @return {JSX.Element|null} Breadcrumbs component.
- */var Breadcrumbs = function Breadcrumbs(_ref) {
-  var _ref$items = _ref.items,
-    items = _ref$items === void 0 ? [] : _ref$items;
+ */
+var Breadcrumbs = function Breadcrumbs(_ref3) {
+  var _ref3$items = _ref3.items,
+    items = _ref3$items === void 0 ? [] : _ref3$items;
   if (!items.length) {
     return null;
   }
@@ -44,21 +97,26 @@ var _jsxRuntime = require("react/jsx-runtime");
       className: "newspack-breadcrumbs__list",
       children: [preceding.map(function (item, index) {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-          children: [item.url ?
-          /*#__PURE__*/
-          // eslint-disable-next-line jsx-a11y/anchor-has-content -- content is supplied via the Text children through @wordpress/ui's render prop.
-          (0, _jsxRuntime.jsx)(_ui.Text, {
-            variant: "body-lg",
-            render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Link, {
-              tone: "neutral",
-              render: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-                href: item.url
-              })
-            }),
-            children: item.label
+          children: [item.url ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Text, {
+              variant: "body-lg",
+              render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Link, {
+                tone: "neutral",
+                render: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+                  href: item.url
+                })
+              }),
+              children: item.label
+            }), Number.isFinite(item.count) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ui.Text, {
+              variant: "body-lg",
+              children: [' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(CrumbCount, {
+                count: item.count,
+                countLabel: item.countLabel
+              })]
+            })]
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Text, {
             variant: "body-lg",
-            children: item.label
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CrumbLabel, _objectSpread({}, item))
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.Text, {
             variant: "body-lg",
             "aria-hidden": "true",
@@ -71,7 +129,7 @@ var _jsxRuntime = require("react/jsx-runtime");
           variant: "heading-lg",
           render: /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {}),
           className: "newspack-breadcrumbs__current",
-          children: last.label
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CrumbLabel, _objectSpread({}, last))
         })
       })]
     })

package/dist/cjs/breadcrumbs/index.test.js

@@ -13,6 +13,10 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 describe('Breadcrumbs', function () {
+  // Unconditional, so a failing assertion cannot leak a language into later tests.
+  afterEach(function () {
+    document.documentElement.lang = '';
+  });
   it('renders the last item as the only h1 and never a link', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
       items: [{
@@ -106,4 +110,110 @@ describe('Breadcrumbs', function () {
       container = _render3.container;
     expect(container.querySelector('nav')).not.toBeInTheDocument();
   });
+  it('annotates a crumb with its count, hiding the parens from assistive tech', function () {
+    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        items: [{
+          label: 'Plans'
+        }, {
+          label: 'Subscriptions',
+          count: 33
+        }]
+      })),
+      container = _render4.container;
+    var count = container.querySelector('.newspack-breadcrumbs__count');
+    expect(count).not.toBeNull();
+    expect(count.querySelector('[aria-hidden="true"]')).toHaveTextContent('(33)');
+    expect(count.querySelector('.screen-reader-text')).toHaveTextContent('33 items');
+    expect(_react.screen.getByRole('heading', {
+      level: 1
+    })).toContainElement(count);
+  });
+  it('announces a single item in the singular', function () {
+    var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        items: [{
+          label: 'Donations',
+          count: 1
+        }]
+      })),
+      container = _render5.container;
+    expect(container.querySelector('.newspack-breadcrumbs__count .screen-reader-text').textContent).toBe('1 item');
+  });
+  it('renders a zero count rather than dropping the annotation', function () {
+    var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        items: [{
+          label: 'Donations',
+          count: 0
+        }]
+      })),
+      container = _render6.container;
+    expect(container.querySelector('.newspack-breadcrumbs__count [aria-hidden="true"]')).toHaveTextContent('(0)');
+  });
+  it('omits the annotation when a crumb carries no usable count', function () {
+    var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        items: [{
+          label: 'Plans'
+        }, {
+          label: 'Bundles',
+          count: undefined
+        }]
+      })),
+      container = _render7.container;
+    expect(container.querySelector('.newspack-breadcrumbs__count')).toBeNull();
+    expect(_react.screen.getByRole('heading', {
+      level: 1
+    })).toHaveTextContent('Bundles');
+  });
+  it('prefers a supplied countLabel for the accessible phrasing', function () {
+    var _render8 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        items: [{
+          label: 'Subscribers',
+          count: 85,
+          countLabel: '85 subscribers total'
+        }]
+      })),
+      container = _render8.container;
+    expect(container.querySelector('.newspack-breadcrumbs__count .screen-reader-text')).toHaveTextContent('85 subscribers total');
+  });
+  it('annotates a linked crumb outside the link, so the link is named for its destination', function () {
+    var _render9 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        items: [{
+          label: 'Plans',
+          url: '#/',
+          count: 12
+        }, {
+          label: 'Add plan'
+        }]
+      })),
+      container = _render9.container;
+    var link = _react.screen.getByRole('link', {
+      name: 'Plans'
+    });
+    expect(link.getAttribute('href')).toBe('#/');
+    expect(link).not.toHaveTextContent('(12)');
+    var count = container.querySelector('.newspack-breadcrumbs__count');
+    expect(count.querySelector('[aria-hidden="true"]')).toHaveTextContent('(12)');
+    expect(link).not.toContainElement(count);
+  });
+  it('groups the count for the document language', function () {
+    document.documentElement.lang = 'de-DE';
+    var _render0 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        items: [{
+          label: 'Abonnenten',
+          count: 1234
+        }]
+      })),
+      container = _render0.container;
+    expect(container.querySelector('.newspack-breadcrumbs__count [aria-hidden="true"]')).toHaveTextContent('(1.234)');
+  });
+  it('falls back to the default grouping when the document language is not a locale Intl accepts', function () {
+    document.documentElement.lang = 'pt-PT-ao90';
+    var _render1 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
+        items: [{
+          label: 'Planos',
+          count: 1234
+        }]
+      })),
+      container = _render1.container;
+    expect(container.querySelector('.newspack-breadcrumbs__count [aria-hidden="true"]').textContent).toMatch(/^\(1\D?234\)$/);
+  });
 });

package/dist/cjs/breadcrumbs/style.scss

@@ -1,4 +1,5 @@
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 
 .newspack-breadcrumbs__list {
 	list-style: none;
@@ -26,6 +27,11 @@
 	}
 }
 
+.newspack-breadcrumbs__count {
+	color: var(--wpds-color-foreground-content-neutral-weak, #{wp-colors.$gray-700});
+	font-weight: wp-vars.$font-weight-regular;
+}
+
 .newspack-breadcrumbs__separator {
 	color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
 	margin: 0 var(--wpds-dimension-gap-sm, 8px);

package/dist/cjs/button/index.js

@@ -29,6 +29,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 var useHistory = _router["default"].useHistory;
+// Control characters are stripped first, as browsers do, so `java\nscript:`
+// cannot slip past.
+var isJavascriptHref = function isJavascriptHref(href) {
+  return 'string' === typeof href && href.replace(/[\u0000-\u0020]/g, '').toLowerCase().startsWith('javascript:');
+};
 var Button = function Button(_ref) {
   var href = _ref.href,
     _ref$loading = _ref.loading,
@@ -40,26 +45,45 @@ var Button = function Button(_ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isAwaitingOnClick = _useState2[0],
     setIsAwaitingOnClick = _useState2[1];
+  var isUnsafeHref = isJavascriptHref(href);
+  var safeHref = isUnsafeHref ? undefined : href;
+  (0, _element.useEffect)(function () {
+    if ('production' === process.env.NODE_ENV || !isUnsafeHref) {
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.warn('Button: a `javascript:` href is not a link and has been dropped.');
+  }, [isUnsafeHref]);
 
   // If both onClick and href are present, await the onClick action an then redirect.
-  if (href && onClick) {
-    otherProps.onClick = /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee() {
-      return _regenerator().w(function (_context) {
-        while (1) switch (_context.n) {
-          case 0:
-            setIsAwaitingOnClick(true);
-            _context.n = 1;
-            return onClick();
-          case 1:
-            setIsAwaitingOnClick(false);
-            history.push((href || '').replace('#', ''));
-          case 2:
-            return _context.a(2);
-        }
-      }, _callee);
-    }));
+  if (safeHref && onClick) {
+    otherProps.onClick = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee(event) {
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              setIsAwaitingOnClick(true);
+              _context.n = 1;
+              return onClick(event);
+            case 1:
+              setIsAwaitingOnClick(false);
+              // Outside a Router the href can only mean a real URL.
+              if (history) {
+                history.push(safeHref.replace('#', ''));
+              } else {
+                window.location.href = safeHref;
+              }
+            case 2:
+              return _context.a(2);
+          }
+        }, _callee);
+      }));
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
   } else {
-    otherProps.href = href;
+    otherProps.href = safeHref;
     otherProps.onClick = onClick;
   }
   if (isAwaitingOnClick) {