newspack-components 3.0.0-alpha.1 → 3.0.0-alpha.2

package/dist/{cjs/wizard → wizard}/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -16,17 +15,21 @@ var _router = _interopRequireDefault(require("../proxied-imports/router"));
 var _store = _interopRequireWildcard(require("./store"));
 var _utils = require("./store/utils");
 var _WizardError = _interopRequireDefault(require("./components/WizardError"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * External dependencies.
  */
+
 /**
  * WordPress dependencies.
  */
-const __ = _i18n.__;
+
 /**
  * Internal dependencies
  */
+
 (0, _store.default)();
 const {
   HashRouter,
@@ -53,10 +56,10 @@ const Wizard = ({
   let displayedSections = sections.filter(section => !section.isHidden);
   const [pluginRequirementsSatisfied, setPluginRequirementsSatisfied] = (0, _element.useState)(requiredPlugins.length === 0);
   if (!pluginRequirementsSatisfied) {
-    headerText = requiredPlugins.length > 1 ? __('Required plugins', 'newspack-plugin') : __('Required plugin', 'newspack-plugin');
+    headerText = requiredPlugins.length > 1 ? (0, _i18n.__)('Required plugins', 'newspack-plugin') : (0, _i18n.__)('Required plugin', 'newspack-plugin');
     displayedSections = [{
       path: '/',
-      render: () => (0, _jsxRuntime.jsx)(_.PluginInstaller, {
+      render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PluginInstaller, {
         plugins: requiredPlugins,
         onStatus: ({
           complete
@@ -64,59 +67,59 @@ const Wizard = ({
       })
     }];
   }
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsx)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames.default)(isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
         'newspack-wizard__is-loading-quiet': isQuietLoading
       }),
-      children: (0, _jsxRuntime.jsxs)(HashRouter, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(HashRouter, {
         hashType: "slash",
-        children: [newspack_aux_data.is_debug_mode && (0, _jsxRuntime.jsx)(_.Notice, {
+        children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
           debugMode: true
-        }), (0, _jsxRuntime.jsx)("div", {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "bg-white",
-          children: (0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "newspack-wizard__header__inner",
-            children: (0, _jsxRuntime.jsxs)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: "newspack-wizard__title",
-              children: [(0, _jsxRuntime.jsx)(_.Button, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
                 isLink: true,
                 href: newspack_urls.dashboard,
-                label: __('Return to Dashboard', 'newspack-plugin'),
+                label: (0, _i18n.__)('Return to Dashboard', 'newspack-plugin'),
                 showTooltip: true,
                 icon: _icons.category,
                 iconSize: 36,
-                children: (0, _jsxRuntime.jsx)(_.NewspackIcon, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewspackIcon, {
                   size: 36
                 })
-              }), (0, _jsxRuntime.jsxs)("div", {
-                children: [headerText && (0, _jsxRuntime.jsx)("h2", {
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                children: [headerText && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
                   children: headerText
-                }), subHeaderText && (0, _jsxRuntime.jsx)("span", {
+                }), subHeaderText && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   children: subHeaderText
                 })]
               })]
             })
           })
-        }), displayedSections.length > 1 && (0, _jsxRuntime.jsx)(_.TabbedNavigation, {
+        }), displayedSections.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TabbedNavigation, {
           items: displayedSections,
-          children: (0, _jsxRuntime.jsx)(_WizardError.default, {})
-        }), (0, _jsxRuntime.jsx)(_.HandoffMessage, {}), (0, _jsxRuntime.jsxs)(Switch, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardError.default, {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HandoffMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Switch, {
           children: [displayedSections.map((section, index) => {
             const SectionComponent = section.render;
-            return (0, _jsxRuntime.jsx)(Route, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Route, {
               path: section.path,
-              children: (0, _jsxRuntime.jsxs)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 className: (0, _classnames.default)('newspack-wizard newspack-wizard__content', className),
-                children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, (0, _jsxRuntime.jsx)(SectionComponent, {})]
+                children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(SectionComponent, {})]
               })
             }, index);
-          }), (0, _jsxRuntime.jsx)(Redirect, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Redirect, {
             to: displayedSections[0].path
           })]
         })]
       })
-    }), !isLoading && (0, _jsxRuntime.jsx)(_.Footer, {
+    }), !isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Footer, {
       simple: hasSimpleFooter
     })]
   });

package/dist/{cjs/wizard → wizard}/store/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "3.0.0-alpha.1",
+	"version": "3.0.0-alpha.2",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -16,29 +16,32 @@
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/Automattic/newspack-plugin.git",
-		"directory": "assets/src/components"
+		"directory": "src/components"
 	},
-	"main": "dist/esm/index.js",
+	"main": "dist/index.js",
 	"publishConfig": {
 		"access": "public"
 	},
 	"dependencies": {
-		"@wordpress/base-styles": "^5.1.0",
-		"@wordpress/components": "^28.1.0",
-		"@wordpress/element": "^6.1.0",
-		"@wordpress/i18n": "^5.1.0",
-		"@wordpress/icons": "^10.1.0",
+		"@wordpress/base-styles": "^5.0.0",
+		"@wordpress/components": "^28.0.0",
+		"@wordpress/element": "^6.0.0",
+		"@wordpress/i18n": "^5.0.0",
+		"@wordpress/icons": "^10.0.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
+		"moment-range": "^3.1.1",
 		"qs": "^6.10.1",
-		"react-router-dom": "^5.3.0"
+		"react-daterange-picker": "^2.0.1",
+		"react-router-dom": "^5.3.4"
 	},
 	"devDependencies": {
-		"@automattic/calypso-build": "^10.0.0",
-		"@babel/cli": "^7.15.0",
-		"@babel/core": "^7.15.0",
-		"@types/wordpress__components": "^23.0.11",
-		"recursive-copy": "^2.0.13"
+		"@babel/cli": "^7.24.0",
+		"@babel/core": "^7.24.0",
+		"@babel/preset-env": "^7.24.7",
+		"@babel/preset-react": "^7.24.7",
+		"@babel/preset-typescript": "^7.24.7",
+		"recursive-copy": "^2.0.0"
 	},
 	"babel": {
 		"ignore": [
@@ -46,7 +49,7 @@
 		]
 	},
 	"scripts": {
-		"prepublishOnly": "transpile && node copy-styles.js",
+		"prepublishOnly": "npx babel src --out-dir dist && node copy-styles.js",
 		"postpublish": "rm -r dist && rm -r shared"
 	}
 }

package/shared/scss/_mixins.scss

@@ -1,7 +1,7 @@
 @mixin visuallyHidden {
 	border: 0;
-	clip: rect( 1px, 1px, 1px, 1px );
-	clip-path: inset( 50% );
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
 	width: 1px;
 	height: 1px;
 	margin: -1px;

package/src/accordion/index.js

@@ -0,0 +1,35 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { Icon, chevronRight } from '@wordpress/icons';
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const Accordion = ( { children, title } ) => {
+	const [ isOpen, setIsOpen ] = useState( false );
+	return (
+		<details
+			className={ classNames( 'newspack-accordion', { 'newspack-accordion--is-open': isOpen } ) }
+		>
+			<summary onClick={ () => setIsOpen( ! isOpen ) }>
+				{ title }
+				<Icon className="newspack-accordion__icon" icon={ chevronRight } size={ 24 } />
+			</summary>
+			<div className="newspack-accordion__content">{ children }</div>
+		</details>
+	);
+};
+
+export default Accordion;

package/src/accordion/style.scss

@@ -0,0 +1,31 @@
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-accordion {
+	border: 1px solid wp-colors.$gray-300;
+
+	&__icon {
+		transition: transform 200ms ease-out;
+		transform: rotate(90deg);
+	}
+
+	&--is-open {
+		.newspack-accordion {
+			&__icon {
+				transform: rotate(-90deg);
+			}
+		}
+	}
+	summary {
+		padding: 16px 32px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		cursor: pointer;
+		font-size: 14px;
+		font-weight: bold;
+	}
+
+	&__content {
+		padding: 16px 32px;
+	}
+}

package/src/action-card/style.scss

@@ -2,8 +2,8 @@
  * Action Card
  */
 
-@use 'sass:color';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "sass:color";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-card.newspack-action-card {
 	padding: 0;
@@ -15,7 +15,7 @@
 		transition: box-shadow 125ms ease-in-out;
 
 		&:hover {
-			box-shadow: 0 4px 8px rgba( black, 0.08 );
+			box-shadow: 0 4px 8px rgba(black, 0.08);
 		}
 	}
 
@@ -34,7 +34,7 @@
 	}
 
 	&.newspack-card__is-primary {
-		box-shadow: inset 4px 0 0 var( --wp-admin-theme-color );
+		box-shadow: inset 4px 0 0 var(--wp-admin-theme-color);
 	}
 
 	&.newspack-card__is-secondary {
@@ -181,12 +181,12 @@
 		}
 
 		.newspack-action-card__region-top {
-			background-color: rgba( black, 0.025 );
+			background-color: rgba(black, 0.025);
 		}
 
 		.newspack-action-card__region-center {
 			p {
-				color: color.adjust( wp-colors.$gray-700, $lightness: -0.75% );
+				color: color.adjust(wp-colors.$gray-700, $lightness: -0.75%);
 			}
 		}
 	}
@@ -209,7 +209,7 @@
 			border-left-width: 1px;
 			border-bottom-width: 1px;
 			border-radius: 0 0 0 2px;
-			content: '';
+			content: "";
 			display: block;
 			position: absolute;
 			inset: -17px 100% 50% -28px;
@@ -219,7 +219,7 @@
 	// Typography
 
 	h2,
-	p:not( [class*='components-base-control'] ) {
+	p:not([class*="components-base-control"]) {
 		margin: 0;
 		max-width: 100%;
 		width: 100%;
@@ -242,7 +242,7 @@
 			&:active,
 			&:focus,
 			&:hover {
-				color: var( --wp-admin-theme-color );
+				color: var(--wp-admin-theme-color);
 			}
 		}
 	}

package/src/autocomplete-tokenfield/style.scss

@@ -2,7 +2,7 @@
  * Autocomplete Token Field
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-autocomplete-tokenfield {
 	.components-spinner {
@@ -43,7 +43,7 @@
 		padding-left: 0;
 	}
 
-	.components-button:focus:not( :disabled ) {
-		box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+	.components-button:focus:not(:disabled) {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 	}
 }

package/src/autocomplete-with-suggestions/index.js

@@ -81,24 +81,24 @@ const AutocompleteWithSuggestions = ( {
 	const handleFetchSaved = fetchSavedPosts
 		? fetchSavedPosts
 		: async ( postIds = [], searchSlug = null ) => {
-				const postTypeSlug = searchSlug || postTypeToSearch;
-				const endpoint =
+			const postTypeSlug = searchSlug || postTypeToSearch;
+			const endpoint =
 					'post' === postTypeSlug || 'page' === postTypeSlug
 						? postTypeSlug + 's' // Default post type endpoints are plural.
 						: postTypeSlug; // Custom post type endpoints are singular.
-				const posts = await apiFetch( {
-					path: addQueryArgs( '/wp/v2/' + endpoint, {
-						per_page: 100,
-						include: postIds.join( ',' ),
-						_fields: 'id,title',
-					} ),
-				} );
+			const posts = await apiFetch( {
+				path: addQueryArgs( '/wp/v2/' + endpoint, {
+					per_page: 100,
+					include: postIds.join( ',' ),
+					_fields: 'id,title',
+				} ),
+			} );
 
-				return posts.map( post => ( {
-					value: parseInt( post.id ),
-					label: decodeEntities( post.title ) || __( '(no title)', 'newspack-plugin' ),
-				} ) );
-		  };
+			return posts.map( post => ( {
+				value: parseInt( post.id ),
+				label: decodeEntities( post.title ) || __( '(no title)', 'newspack-plugin' ),
+			} ) );
+		};
 
 	/**
 	 * If passed a `fetchSuggestions` prop, use that, otherwise, build it based on the selected post type.
@@ -106,36 +106,36 @@ const AutocompleteWithSuggestions = ( {
 	const handleFetchSuggestions = fetchSuggestions
 		? fetchSuggestions
 		: async ( search = null, offset = 0, searchSlug = null ) => {
-				const postTypeSlug = searchSlug || postTypeToSearch;
-				const endpoint =
+			const postTypeSlug = searchSlug || postTypeToSearch;
+			const endpoint =
 					'post' === postTypeSlug || 'page' === postTypeSlug
 						? postTypeSlug + 's' // Default post type endpoints are plural.
 						: postTypeSlug; // Custom post type endpoints are singular.
-				const response = await apiFetch( {
-					parse: false,
-					path: addQueryArgs( '/wp/v2/' + endpoint, {
-						search,
-						offset,
-						per_page: suggestionsToFetch,
-						_fields: 'id,title',
-					} ),
-				} );
+			const response = await apiFetch( {
+				parse: false,
+				path: addQueryArgs( '/wp/v2/' + endpoint, {
+					search,
+					offset,
+					per_page: suggestionsToFetch,
+					_fields: 'id,title',
+				} ),
+			} );
 
-				const total = parseInt( response.headers.get( 'x-wp-total' ) || 0 );
-				const posts = await response.json();
+			const total = parseInt( response.headers.get( 'x-wp-total' ) || 0 );
+			const posts = await response.json();
 
-				setMaxSuggestions( total );
+			setMaxSuggestions( total );
 
-				// Format suggestions for FormTokenField display.
-				return posts.reduce( ( acc, post ) => {
-					acc.push( {
-						value: parseInt( post.id ),
-						label: decodeEntities( post?.title.rendered ) || __( '(no title)', 'newspack-plugin' ),
-					} );
+			// Format suggestions for FormTokenField display.
+			return posts.reduce( ( acc, post ) => {
+				acc.push( {
+					value: parseInt( post.id ),
+					label: decodeEntities( post?.title.rendered ) || __( '(no title)', 'newspack-plugin' ),
+				} );
 
-					return acc;
-				}, [] );
-		  };
+				return acc;
+			}, [] );
+		};
 
 	/**
 	 * Intercept onChange callback so we can decide whether to allow multiple selections.
@@ -176,13 +176,15 @@ const AutocompleteWithSuggestions = ( {
 		const selections = selectedPost ? [ ...selectedItems, selectedPost ] : selectedItems;
 		const selectedMessage = multiSelect
 			? sprintf(
-					// Translators: %1: the length of selections. %2: the selection leabel.
-					__( '%1$s %2$s selected', 'newspack-plugin' ),
-					selections.length,
-					selections.length > 1 ? postTypeLabelPlural : postTypeLabel
-			  )
-			: // Translators: %s: The label for the selection.
-			  sprintf( __( 'Selected %s', 'newspack-plugin' ), postTypeLabel );
+				// Translators: %1: the length of selections. %2: the selection leabel.
+				__( '%1$s %2$s selected', 'newspack-plugin' ),
+				selections.length,
+				selections.length > 1 ? postTypeLabelPlural : postTypeLabel
+			) : sprintf(
+				// Translators: %s: The label for the selection.
+				__( 'Selected %s', 'newspack-plugin' ),
+				postTypeLabel
+			);
 
 		return (
 			<div className="newspack-autocomplete-with-suggestions__selected-items">

package/src/autocomplete-with-suggestions/style.scss

@@ -2,7 +2,7 @@
 * Styles for AutocompleteWithSuggestions component.
 */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-autocomplete-with-suggestions {
 	width: 100%;
@@ -97,7 +97,7 @@
 		padding-right: 8px;
 
 		&::after {
-			content: '✕';
+			content: "✕";
 			margin-left: 8px;
 		}
 
@@ -126,10 +126,10 @@
 				text-decoration: none;
 				width: 100%;
 
-				&:active:not( :disabled ),
-				&:hover:not( :disabled ) {
+				&:active:not(:disabled),
+				&:hover:not(:disabled) {
 					background: wp-colors.$gray-900;
-					background: var( --wp-admin-theme-color );
+					background: var(--wp-admin-theme-color);
 					color: white;
 				}
 			}
@@ -149,14 +149,14 @@
 		.components-button {
 			line-height: normal;
 
-			&:focus:not( :disabled ) {
+			&:focus:not(:disabled) {
 				border-radius: 0;
 				box-shadow: inset 0 0 0 1.5px wp-colors.$gray-900;
-				box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			}
 
 			&.is-secondary {
-				width: calc( 100% - 16px );
+				width: calc(100% - 16px);
 			}
 		}
 	}

package/src/button/style.scss

@@ -4,7 +4,7 @@
 
 .components-button {
 	&.is-destructive {
-		&:hover:not( :disabled ) {
+		&:hover:not(:disabled) {
 			box-shadow: none;
 		}
 	}

package/src/button-card/style.scss

@@ -2,40 +2,44 @@
  * Button Card
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-button-card {
 	background: white;
 	border-radius: 2px;
 	border: 1px solid wp-colors.$gray-300;
-	box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) transparent;
+	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent;
 	cursor: pointer;
 	display: block;
 	margin: 32px 0;
 	padding: 32px;
 	position: relative;
 	text-decoration: none;
-	transition: background-color 125ms ease-in-out, border-color 125ms ease-in-out,
+	transition:
+		background-color 125ms ease-in-out,
+		border-color 125ms ease-in-out,
 		box-shadow 125ms ease-in-out;
 
 	&:focus,
 	&.is-pressed {
 		background: white;
-		border-color: var( --wp-admin-theme-color );
-		box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color ) !important;
+		border-color: var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color) !important;
 		outline: none !important;
 		z-index: 1;
 	}
 
 	&.is-pressed:focus-visible {
-		box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color ), 0 0 0 1px white,
-			0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color ) !important;
+		box-shadow:
+			inset 0 0 0 1px var(--wp-admin-theme-color),
+			0 0 0 1px white,
+			0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) !important;
 	}
 
 	&:active,
 	&:hover {
-		border-color: var( --wp-admin-theme-color );
-		color: var( --wp-admin-theme-color );
+		border-color: var(--wp-admin-theme-color);
+		color: var(--wp-admin-theme-color);
 		text-decoration: none;
 		z-index: 1;
 
@@ -63,7 +67,7 @@
 	&.grouped {
 		border-radius: 0;
 
-		& + &:not( .br--top ) {
+		& + &:not(.br--top) {
 			margin-top: -33px;
 		}
 
@@ -95,7 +99,7 @@
 		}
 
 		svg {
-			fill: var( --wp-admin-theme-color );
+			fill: var(--wp-admin-theme-color);
 			transition: fill 125ms ease-in-out;
 		}
 	}
@@ -161,8 +165,10 @@
 		}
 
 		&.is-pressed:focus-visible {
-			box-shadow: inset 0 0 0 1px wp-colors.$alert-red, 0 0 0 1px white,
-				0 0 0 var( --wp-admin-border-width-focus ) wp-colors.$alert-red !important;
+			box-shadow:
+				inset 0 0 0 1px wp-colors.$alert-red,
+				0 0 0 1px white,
+				0 0 0 var(--wp-admin-border-width-focus) wp-colors.$alert-red !important;
 		}
 
 		&:active,

package/src/card/style.scss

@@ -2,7 +2,7 @@
  * Card
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-card {
 	border-radius: 2px;

package/src/category-autocomplete/style.scss

@@ -19,10 +19,10 @@
 	&__suggestions-spinner {
 		position: absolute;
 		right: 1px;
-		top: calc( 1.4em + 8px );
+		top: calc(1.4em + 8px);
 		z-index: 2;
 
-		[class*='--label-hidden'] + & {
+		[class*="--label-hidden"] + & {
 			top: 0;
 		}