newspack-components 3.1.0 → 4.0.0

package/src/with-wizard/style.scss

@@ -3,15 +3,13 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../shared/scss/colors";
 
-// Reset Padding of the Admin Page
+// Styling for full-page-react Wizards (ignoring admin-header-only wizards).
+body.newspack-wizard-page:not(.newspack-admin-header) {
 
-.toplevel_page_newspack:not(.menu-top),
-body[class*="newspack_page_newspack-"],
-body[class*="admin_page_newspack-"] {
 	background: white;
 
+	// Reset Padding
 	#wpcontent {
 		padding-left: 0;
 	}
@@ -20,6 +18,13 @@ body[class*="admin_page_newspack-"] {
 		padding-bottom: 220px;
 		min-height: 100vh;
 
+		// For admin notices directly ">" at top of page above the Wizard header.
+		// PHP code should hide these notices, but just incase add this style.
+		> .notice {
+			margin-bottom: 20px;
+			margin-left: 22px;
+		}
+
 		@media screen and ( min-width: 783px ) {
 			padding-bottom: 202px;
 		}
@@ -30,6 +35,24 @@ body[class*="admin_page_newspack-"] {
 	}
 }
 
+// Styling for wizards that are admin-header-only.
+body.newspack-wizard-page.newspack-admin-header {
+
+	// For mobile.
+	@media screen and (max-width: 600px) {
+
+		// The header bar (and tabs) need padding.
+		#newspack-wizards-admin-header {
+			padding-top: 46px;
+		}
+
+		// Since the padding was added to the header bar, remove from body.
+		#wpbody {
+			padding-top: 0;
+		}
+	}
+}
+
 svg {
 	&.newspack--error {
 		fill: wp-colors.$alert-red;
@@ -41,15 +64,14 @@ svg {
 }
 
 // Blue Screen
-
 .newspack-wizard__blue {
 	#wpwrap {
-		background: colors.$primary-500;
+		background: var(--wp-admin-theme-color);
 	}
 
 	.newspack-footer {
-		background: colors.$primary-500;
-		border-color: colors.$primary-500;
+		background: var(--wp-admin-theme-color);
+		border-color: var(--wp-admin-theme-color);
 		justify-content: center;
 
 		&__logo {
@@ -73,7 +95,6 @@ svg {
 }
 
 // Loading
-
 .newspack-wizard__is-loading {
 	background: white;
 	cursor: wait;
@@ -92,7 +113,7 @@ svg {
 	}
 
 	&::before {
-		background: colors.$primary-500;
+		background: var(--wp-admin-theme-color);
 		box-shadow:
 			24px 0 0 white,
 			69px 0 0 -15px wp-colors.$gray-900,
@@ -137,7 +158,7 @@ svg {
 
 	// Blue Screen
 	.newspack-wizard__blue & {
-		background: colors.$primary-500;
+		background: var(--wp-admin-theme-color);
 
 		&::before {
 			animation: loading-quiet 1.25s ease-in-out infinite;
@@ -193,7 +214,7 @@ svg {
 
 		&::before {
 			animation: loading-quiet 1.25s ease-in-out infinite;
-			background: colors.$primary-500;
+			background: var(--wp-admin-theme-color);
 			height: 8px;
 			right: 100%;
 			z-index: 9999;

package/src/with-wizard-screen/index.js

@@ -8,7 +8,7 @@ import { category } from '@wordpress/icons';
  * Internal dependencies
  */
 import { Button, Handoff, NewspackIcon, Notice, HandoffMessage, TabbedNavigation } from '../';
-import { buttonProps } from '../../../shared/js/';
+import { buttonProps } from '../button-props';
 import './style.scss';
 
 /**

package/src/with-wizard-screen/style.scss

@@ -3,16 +3,16 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
-@use "../../../shared/scss/colors";
+@use "../../../colors/colors.module" as colors;
 
 .newspack-wizard {
 	// Color
-	--wp-admin-theme-color: #{colors.$primary-500};
-	--wp-admin-theme-color--rgb: #{colors.$primary-500--rgb};
-	--wp-admin-theme-color-darker-10: #{colors.$primary-600};
-	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
-	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: #{colors.$primary-600--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-800--rgb};
 
 	color: wp-colors.$gray-900;
 
@@ -83,7 +83,7 @@
 			}
 
 			&:not(.newspack-icon) {
-				background: colors.$primary-500;
+				background: var(--wp-admin-theme-color);
 				left: 50%;
 				margin: -28px 0 0 -28px !important;
 				opacity: 0;
@@ -125,7 +125,7 @@
 		padding: 0 16px;
 
 		@media screen and ( min-width: 744px ) {
-			padding: 32px 84px;
+			padding: 40px 84px;
 		}
 
 		// Typography

package/src/wizard/components/WizardError.js

@@ -33,10 +33,7 @@ const WizardError = () => {
 	if ( 'fatal' === level ) {
 		const fallbackURL = typeof newspack_urls !== 'undefined' && newspack_urls.dashboard;
 		return (
-			<Modal
-				title={ __( 'Unrecoverable error' ) }
-				onRequestClose={ fallbackURL ? () => ( window.location = fallbackURL ) : undefined }
-			>
+			<Modal title={ __( 'Unrecoverable error' ) } onRequestClose={ fallbackURL ? () => ( window.location = fallbackURL ) : undefined }>
 				<Notice noticeText={ message } isError rawHTML />
 				{ fallbackURL && (
 					<Card buttonsCard noBorder className="justify-end">
@@ -49,9 +46,7 @@ const WizardError = () => {
 		);
 	}
 
-	return (
-		<Notice isError className="newspack-wizard__above-header" noticeText={ message } rawHTML />
-	);
+	return <Notice isError className="newspack-wizard__above-header" noticeText={ message } rawHTML />;
 };
 
 export default WizardError;

package/src/wizard/index.js

@@ -7,96 +7,107 @@ import classnames from 'classnames';
  * WordPress dependencies.
  */
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import {
-	Footer,
-	Notice,
-	Button,
-	NewspackIcon,
-	TabbedNavigation,
-	PluginInstaller,
-	HandoffMessage,
-} from '../';
+import { Footer, Notice, Button, NewspackIcon, TabbedNavigation, PluginInstaller, HandoffMessage } from '../';
 import Router from '../proxied-imports/router';
 import registerStore, { WIZARD_STORE_NAMESPACE } from './store';
-import { useWizardData } from './store/utils';
 import WizardError from './components/WizardError';
 
 registerStore();
 
 const { HashRouter, Redirect, Route, Switch } = Router;
 
-const Wizard = ( {
-	sections = [],
-	apiSlug,
-	headerText,
-	subHeaderText,
-	hasSimpleFooter,
-	className,
-	renderAboveSections,
-	requiredPlugins = [],
-} ) => {
+/**
+ * @typedef  {Object}     WizardProps
+ * @property {string}     headerText                The header text.
+ * @property {string}     [subHeaderText]           The sub-header text, optional.
+ * @property {string}     [apiSlug]                 The API slug, optional.
+ * @property {string}     [className]               CSS classes, optional.
+ * @property {any[]}      sections                  Array of sections.
+ * @property {boolean}    [hasSimpleFooter]         Indicates if a simple footer is used, optional.
+ * @property {() => void} [renderAboveSections]     Function to render content above sections, optional.
+ * @property {string[]}   [requiredPlugins]         Array of required plugin strings, optional.
+ * @property {boolean}    [isInitialFetchTriggered] Indicates if the initial fetch should be triggered, optional.
+ */
+
+/**
+ * Wizard Component
+ *
+ * Provides a tabbed UI with history.
+ *
+ * @param {WizardProps} props
+ * @return {JSX.Element} Wizard component
+ */
+const Wizard = (
+	{
+		sections = [],
+		headerText,
+		apiSlug,
+		subHeaderText,
+		hasSimpleFooter,
+		className,
+		renderAboveSections,
+		requiredPlugins = [],
+		isInitialFetchTriggered = true,
+	},
+	ref
+) => {
 	const isLoading = useSelect( select => select( WIZARD_STORE_NAMESPACE ).isLoading() );
 	const isQuietLoading = useSelect( select => select( WIZARD_STORE_NAMESPACE ).isQuietLoading() );
 
 	// Trigger initial data fetch. Some sections might not use the wizard data,
 	// but for consistency, fetching is triggered regardless of the section.
-	useSelect( select => select( WIZARD_STORE_NAMESPACE ).getWizardAPIData( apiSlug ) );
+	useSelect( select => isInitialFetchTriggered && select( WIZARD_STORE_NAMESPACE ).getWizardAPIData( apiSlug ) );
 
 	let displayedSections = sections.filter( section => ! section.isHidden );
 
-	const [ pluginRequirementsSatisfied, setPluginRequirementsSatisfied ] = useState(
-		requiredPlugins.length === 0
-	);
+	const [ pluginRequirementsSatisfied, setPluginRequirementsSatisfied ] = useState( requiredPlugins.length === 0 );
 	if ( ! pluginRequirementsSatisfied ) {
-		headerText =
-			requiredPlugins.length > 1
-				? __( 'Required plugins', 'newspack-plugin' )
-				: __( 'Required plugin', 'newspack-plugin' );
+		headerText = requiredPlugins.length > 1 ? __( 'Required plugins', 'newspack-plugin' ) : __( 'Required plugin', 'newspack-plugin' );
 		displayedSections = [
 			{
 				path: '/',
 				render: () => (
-					<PluginInstaller
-						plugins={ requiredPlugins }
-						onStatus={ ( { complete } ) => setPluginRequirementsSatisfied( complete ) }
-					/>
+					<PluginInstaller plugins={ requiredPlugins } onStatus={ ( { complete } ) => setPluginRequirementsSatisfied( complete ) } />
 				),
 			},
 		];
 	}
 
+	const urlWithoutHash = window.location.href.split( '#' )[ 0 ];
+
 	return (
-		<>
+		<div ref={ ref }>
 			<div
-				className={ classnames(
-					isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded',
-					{
-						'newspack-wizard__is-loading-quiet': isQuietLoading,
-					}
-				) }
+				className={ classnames( isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
+					'newspack-wizard__is-loading-quiet': isQuietLoading,
+				} ) }
 			>
 				<HashRouter hashType="slash">
 					{ newspack_aux_data.is_debug_mode && <Notice debugMode /> }
 					<div className="bg-white">
 						<div className="newspack-wizard__header__inner">
 							<div className="newspack-wizard__title">
-								<Button
-									isLink
-									href={ newspack_urls.dashboard }
-									label={ __( 'Return to Dashboard', 'newspack-plugin' ) }
-									showTooltip={ true }
-									icon={ category }
-									iconSize={ 36 }
-								>
+								{ newspack_urls.dashboard !== urlWithoutHash ? (
+									<Button
+										isLink
+										href={ newspack_urls.dashboard }
+										label={ __( 'Return to Dashboard', 'newspack-plugin' ) }
+										showTooltip={ true }
+										icon={ category }
+										iconSize={ 36 }
+									>
+										<NewspackIcon size={ 36 } />
+									</Button>
+								) : (
 									<NewspackIcon size={ 36 } />
-								</Button>
+								) }
 								<div>
 									{ headerText && <h2>{ headerText }</h2> }
 									{ subHeaderText && <span>{ subHeaderText }</span> }
@@ -116,13 +127,8 @@ const Wizard = ( {
 						{ displayedSections.map( ( section, index ) => {
 							const SectionComponent = section.render;
 							return (
-								<Route key={ index } path={ section.path }>
-									<div
-										className={ classnames(
-											'newspack-wizard newspack-wizard__content',
-											className
-										) }
-									>
+								<Route key={ index } exact={ section.exact ?? false } path={ section.path }>
+									<div className={ classnames( 'newspack-wizard__content', className ) }>
 										{ 'function' === typeof renderAboveSections ? renderAboveSections() : null }
 										<SectionComponent />
 									</div>
@@ -134,12 +140,8 @@ const Wizard = ( {
 				</HashRouter>
 			</div>
 			{ ! isLoading && <Footer simple={ hasSimpleFooter } /> }
-		</>
+		</div>
 	);
 };
 
-Wizard.useWizardData = useWizardData;
-
-Wizard.STORE_NAMESPACE = WIZARD_STORE_NAMESPACE;
-
-export default Wizard;
+export default forwardRef( Wizard );

package/src/wizard/store/index.js

@@ -16,7 +16,7 @@ import { createAction } from './utils.js';
 export const WIZARD_STORE_NAMESPACE = 'newspack/wizards';
 
 const DEFAULT_STATE = {
-	isLoading: true,
+	isLoading: false,
 	isQuietLoading: false,
 	apiData: {},
 	error: null,
@@ -59,13 +59,7 @@ const actions = {
 	setError: createAction( 'SET_ERROR' ),
 
 	// Async actions. These will not show up in Redux devtools.
-	*saveWizardSettings( {
-		slug,
-		section = '',
-		payloadPath = false,
-		auxData = {},
-		updatePayload = null,
-	} ) {
+	*saveWizardSettings( { slug, section = '', payloadPath = false, auxData = {}, updatePayload = null } ) {
 		// Optionally data can be updated before saving - an immediate update case
 		// (without an explicit "save" action).
 		if ( updatePayload ) {
@@ -94,6 +88,7 @@ const selectors = {
 	isLoading: state => state.isLoading,
 	isQuietLoading: state => state.isQuietLoading,
 	getWizardAPIData: ( state, slug ) => state.apiData[ slug ] || {},
+	getWizardData: ( state, slug ) => state.apiData[ slug ] ?? {},
 	getError: state => state.error,
 };
 
@@ -104,8 +99,9 @@ const store = createReduxStore( WIZARD_STORE_NAMESPACE, {
 
 	controls: {
 		FETCH_FROM_API: action => {
+			const { isLocalError = false, isQuietFetch = false } = action.payload;
 			dispatch( WIZARD_STORE_NAMESPACE ).startLoadingData( {
-				isQuietLoading: Boolean( action.payload.isQuietFetch ),
+				isQuietLoading: Boolean( isQuietFetch ),
 			} );
 			return apiFetch( action.payload )
 				.then( data => {
@@ -113,8 +109,10 @@ const store = createReduxStore( WIZARD_STORE_NAMESPACE, {
 					return data;
 				} )
 				.catch( error => {
+					if ( isLocalError ) {
+						throw error;
+					}
 					dispatch( WIZARD_STORE_NAMESPACE ).setError( error );
-					return { error };
 				} )
 				.finally( result => {
 					dispatch( WIZARD_STORE_NAMESPACE ).finishLoadingData();

package/src/wizard/store/utils.js

@@ -10,7 +10,6 @@ import { WIZARD_STORE_NAMESPACE } from '.';
 
 export const createAction = type => payload => ( { type, payload } );
 
-export const useWizardData = ( wizardName, defaultValue = {} ) =>
-	useSelect( select =>
-		select( WIZARD_STORE_NAMESPACE ).getWizardAPIData( `newspack-${ wizardName }-wizard` )
-	) || defaultValue;
+export const useWizardData = ( wizardName, defaultValue = {} ) => {
+	return useSelect( select => select( WIZARD_STORE_NAMESPACE ).getWizardAPIData( wizardName ) ) || defaultValue;
+};

package/dist/cjs/date-range-picker/index.js

@@ -1,39 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactDaterangePicker = _interopRequireDefault(require("react-daterange-picker"));
-var _moment = _interopRequireDefault(require("moment"));
-var _momentRange = require("moment-range");
-require("react-daterange-picker/dist/css/react-calendar.css");
-require("./style.scss");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies.
- */
-
-/**
- * Internal dependencies.
- */
-
-const moment = (0, _momentRange.extendMoment)(_moment.default);
-const DateRangePicker = ({
-  start,
-  end,
-  onChange
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDaterangePicker.default, {
-    value: moment.range(moment(start), moment(end)),
-    firstOfWeek: 1,
-    onSelect: range => {
-      onChange({
-        start: range.start._d,
-        end: range.end._d
-      });
-    }
-  });
-};
-var _default = exports.default = DateRangePicker;

package/dist/cjs/date-range-picker/style.scss

@@ -1,148 +0,0 @@
-@use "../../../shared/scss/colors";
-@use "~@wordpress/base-styles/colors" as wp-colors;
-
-.DateRangePicker {
-	margin: 32px 0;
-	max-width: 296px;
-	width: 100%;
-
-	&__PaginationArrow {
-		background: transparent 50% 50% no-repeat;
-		background-size: 24px 24px;
-		border-radius: 3px;
-		height: 36px;
-		transition: background-image 125ms ease-in-out;
-		width: 36px;
-
-		&--previous {
-			background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" fill="%231e1e1e"/%3E%3C/svg%3E');
-			left: 0;
-
-			&:hover {
-				background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" fill="%2336f"/%3E%3C/svg%3E');
-			}
-		}
-
-		&--next {
-			background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" fill="%231e1e1e"/%3E%3C/svg%3E');
-			right: 0;
-
-			&:hover {
-				background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" fill="%2336f"/%3E%3C/svg%3E');
-			}
-		}
-
-		&:hover {
-			background-color: transparent;
-		}
-	}
-
-	&__PaginationArrowIcon {
-		display: none;
-	}
-
-	&__Month {
-		margin: 0;
-		width: inherit;
-	}
-
-	&__MonthHeader {
-		color: wp-colors.$gray-900;
-		font-size: 17px;
-		height: auto;
-		line-height: 24px;
-		padding: 6px 44px;
-	}
-
-	&__WeekdayHeading,
-	&__Date {
-		font-size: 14px;
-		line-height: 24px;
-		padding: 6px 0;
-	}
-
-	&__WeekdayHeading {
-		border-bottom-color: wp-colors.$gray-300;
-		color: wp-colors.$gray-900;
-
-		abbr[title] {
-			color: inherit;
-		}
-	}
-
-	&__MonthDates {
-		border: 0;
-		border-spacing: 0;
-	}
-
-	&__Date {
-		border-color: wp-colors.$gray-300;
-		border-bottom-width: 1px;
-
-		&--weekend {
-			background-color: wp-colors.$gray-100;
-		}
-
-		&--otherMonth {
-			color: wp-colors.$gray-200;
-			opacity: 1;
-		}
-
-		&--is-disabled {
-			color: wp-colors.$gray-100;
-			cursor: not-allowed;
-		}
-
-		&--is-highlighted {
-			color: white;
-		}
-	}
-
-	&__CalendarSelection,
-	&__CalendarHighlight {
-		border-color: colors.$primary-500;
-		bottom: 4px;
-		top: 4px;
-
-		&--inOtherMonth {
-			opacity: 1;
-		}
-
-		&--start {
-			border-bottom-left-radius: 3px;
-			border-top-left-radius: 3px;
-			left: 4px;
-		}
-
-		&--end {
-			border-bottom-right-radius: 3px;
-			border-top-right-radius: 3px;
-			right: 4px;
-		}
-
-		&--single {
-			border: none;
-			border-radius: 3px;
-			left: 4px;
-			right: 4px;
-		}
-	}
-
-	&__CalendarSelection {
-		background-color: colors.$primary-500;
-	}
-
-	&__CalendarHighlight {
-		background: colors.$primary-500;
-		border: none;
-		bottom: 0;
-		top: 0;
-
-		&--single {
-			border: none;
-			border-radius: 0;
-			left: 0;
-			right: 0;
-		}
-	}
-}

package/dist/cjs/newspack-logo/index.js

@@ -1,54 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _element = require("@wordpress/element");
-var _components = require("@wordpress/components");
-var _classnames = _interopRequireDefault(require("classnames"));
-require("./style.scss");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Newspack Logo.
- */
-
-/**
- * WordPress dependencies.
- */
-
-/**
- * External dependencies.
- */
-
-/**
- * Internal dependencies.
- */
-
-class NewspackLogo extends _element.Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      centered,
-      className,
-      height
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-logo__svg', centered && 'is-centered', className);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SVG, {
-      xmlns: "http://www.w3.org/2000/svg",
-      height: height,
-      viewBox: "0 0 221 64",
-      className: classes,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Path, {
-        d: "M32 0c17.672 0 32 14.328 32 32S49.672 64 32 64C14.326 64 0 49.672 0 32S14.328 0 32 0zm130.57 27.247c3.611 0 6.475 2.521 6.475 7.974 0 5.417-3.134 8.995-8.314 8.995-1.262 0-2.248-.172-3.305-.376v8.551h-4.022V27.67h3.85v1.486c1.534-1.191 3.237-1.908 5.316-1.908zM18.023 17.755v28.49h6.902V34.287l11.733 11.958h9.319l-27.954-28.49zm178.552 9.495c2.009 0 3.219.34 4.581.784v3.407c-1.158-.444-2.878-.921-4.513-.921-2.453 0-4.532 1.294-4.532 5.076 0 4.156 2.077 5.383 4.736 5.387 1.262 0 2.676-.273 4.516-.99v3.34c-1.636.544-3.118.92-5.025.92-6.033 0-8.417-3.442-8.417-8.45 0-5.283 3.305-8.553 8.654-8.553zm-18.195-.003c3.919 0 6.44 1.567 6.435 6.235V43.84h-3.747v-1.771h-.103c-1.327 1.022-2.93 2.079-5.314 2.079-2.112 0-4.36-1.534-4.36-4.6 0-4.133 3.545-4.912 5.997-5.252l3.51-.477v-.47c0-2.181-.886-2.897-2.93-2.897-.989 0-3.338.305-5.28 1.09l-.341-3.237c1.738-.614 4.123-1.058 6.133-1.058zm-73.55-.12c5.145 0 6.951 3.579 6.951 6.987 0 .936-.047 1.518-.102 2.06l-.034.325h-10.358c.101 3.542 2.106 4.36 5.104 4.36 1.637 0 3.158-.372 4.845-.991v3.342c-2.093.644-3.89.921-5.968.921-5.141 0-8.308-2.556-8.308-8.586 0-4.398 2.69-8.417 7.87-8.417zm39.998 0c1.771 0 3.305.172 4.804.614v3.338s-2.188-.714-4.497-.714c-1.43 0-2.76.477-2.76 1.703 0 2.725 8.042 1.262 8.04 6.883 0 4.053-3.611 5.178-7.394 5.178-1.738 0-3.487-.467-4.736-.958v-3.305c1.5.52 3.578 1.026 4.873 1.026 1.84 0 3.1-.374 3.1-1.771 0-2.829-8.04-1.33-8.04-7.156 0-2.998 2.724-4.837 6.61-4.837zm64.01-6.114v13.63c.34-.376.615-.785 5.657-6.952h5.213l-6.543 7.666 7.156 8.485h-5.248l-6.235-7.665v7.665h-4.02v-22.83h4.02zm-127.634 0l8.633 15.263V21.013h4.022v22.83h-4.416L80.81 28.578v15.263h-4.021v-22.83h4.416zm36.758 6.678l2.476 11.469 2.801-11.469h3.572l2.438 11.469 2.75-11.469h4.038l-4.54 16.151h-4.83l-1.714-9.495-2.325 9.495h-4.814l-4.268-16.15h4.416zm62.836 8.616l-3.305.512c-.987.136-2.044.732-2.044 2.231 0 1.322.75 2.067 1.84 2.067 1.157 0 2.452-.716 3.509-1.466v-3.344zm-19.318-5.752c-1.193 0-2.657.545-4.054 1.771v8.415c.885.17 1.77.306 2.997.306 2.829 0 4.464-1.805 4.464-5.517 0-3.476-1.158-4.975-3.407-4.975zm-56.685-.394c-2.009 0-3.235 1.43-3.475 3.678h6.268c0-1.975-.646-3.678-2.793-3.678zm-58.818.836H40.33l2.205 2.248h3.442v-2.248zm0-6.621H33.833l2.205 2.248h9.939v-2.248zm0-6.621h-18.64l2.204 2.248h16.436v-2.248z"
-      })
-    });
-  }
-}
-NewspackLogo.defaultProps = {
-  height: 56
-};
-var _default = exports.default = NewspackLogo;