newspack-components 2.2.1 → 3.0.0-alpha.2

package/dist/{cjs/autocomplete-with-suggestions → autocomplete-with-suggestions}/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
 });
@@ -13,48 +13,47 @@ var _i18n = require("@wordpress/i18n");
 var _url = require("@wordpress/url");
 var _ = require("../");
 require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
-const __ = _i18n.__,
-  _x = _i18n._x;
+
 /**
  * External dependencies.
  */
-const AutocompleteWithSuggestions = _ref => {
-  let {
-    fetchSavedPosts = false,
-    // If passed, will use this function to fetch saved data.
-    fetchSuggestions = false,
-    // If passed, will use this function to fetch suggestions data.
-    help = __('Begin typing search term, click autocomplete result to select.', 'newspack'),
-    hideHelp = false,
-    // If true, all help text will be hidden.
-    label = __('Search', 'newspack'),
-    maxItemsToSuggest = 0,
-    // If passed, will be used to determine "load more" state. Necessary if you want "load more" functionality when using a custom `fetchSuggestions` function.
-    multiSelect = false,
-    // If true, component can select multiple values at once.
-    onChange = false,
-    // Function to call when selections change.
-    onPostTypeChange = false,
-    // Funciton to call when the post type selector is changed.
-    postTypes = [{
-      slug: 'post',
-      label: 'Post'
-    }],
-    // If passed, will render a selector to change the post type queried for suggestions.
-    postTypeLabel = __('item', 'newspack'),
-    // String to describe the data being shown.
-    postTypeLabelPlural = __('items', 'newspack'),
-    // Plural string to describe the data being shown.
-    selectedItems = [],
-    // Array of saved items.
-    selectedPost = 0,
-    // Legacy prop when single-select was the only option.
-    suggestionsToFetch = 10 // Number of suggestions to fetch per query.
-  } = _ref;
+
+const AutocompleteWithSuggestions = ({
+  fetchSavedPosts = false,
+  // If passed, will use this function to fetch saved data.
+  fetchSuggestions = false,
+  // If passed, will use this function to fetch suggestions data.
+  help = (0, _i18n.__)('Begin typing search term, click autocomplete result to select.', 'newspack-plugin'),
+  hideHelp = false,
+  // If true, all help text will be hidden.
+  label = (0, _i18n.__)('Search', 'newspack-plugin'),
+  maxItemsToSuggest = 0,
+  // If passed, will be used to determine "load more" state. Necessary if you want "load more" functionality when using a custom `fetchSuggestions` function.
+  multiSelect = false,
+  // If true, component can select multiple values at once.
+  onChange = false,
+  // Function to call when selections change.
+  onPostTypeChange = false,
+  // Funciton to call when the post type selector is changed.
+  postTypes = [{
+    slug: 'post',
+    label: 'Post'
+  }],
+  // If passed, will render a selector to change the post type queried for suggestions.
+  postTypeLabel = (0, _i18n.__)('item', 'newspack-plugin'),
+  // String to describe the data being shown.
+  postTypeLabelPlural = (0, _i18n.__)('items', 'newspack-plugin'),
+  // Plural string to describe the data being shown.
+  selectedItems = [],
+  // Array of saved items.
+  selectedPost = 0,
+  // Legacy prop when single-select was the only option.
+  suggestionsToFetch = 10 // Number of suggestions to fetch per query.
+}) => {
   const [isLoading, setIsLoading] = (0, _element.useState)(true);
   const [isLoadingMore, setIsLoadingMore] = (0, _element.useState)(false);
   const [suggestions, setSuggestions] = (0, _element.useState)([]);
@@ -96,9 +95,7 @@ const AutocompleteWithSuggestions = _ref => {
   /**
    * If passed a `fetchSavedPosts` prop, use that, otherwise, build it based on the selected post type.
    */
-  const handleFetchSaved = fetchSavedPosts ? fetchSavedPosts : async function () {
-    let postIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    let searchSlug = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  const handleFetchSaved = fetchSavedPosts ? fetchSavedPosts : async (postIds = [], searchSlug = null) => {
     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.
@@ -111,17 +108,14 @@ const AutocompleteWithSuggestions = _ref => {
     });
     return posts.map(post => ({
       value: parseInt(post.id),
-      label: (0, _htmlEntities.decodeEntities)(post.title) || __('(no title)', 'newspack')
+      label: (0, _htmlEntities.decodeEntities)(post.title) || (0, _i18n.__)('(no title)', 'newspack-plugin')
     }));
   };
 
   /**
    * If passed a `fetchSuggestions` prop, use that, otherwise, build it based on the selected post type.
    */
-  const handleFetchSuggestions = fetchSuggestions ? fetchSuggestions : async function () {
-    let search = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    let offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    let searchSlug = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  const handleFetchSuggestions = fetchSuggestions ? fetchSuggestions : async (search = null, offset = 0, searchSlug = null) => {
     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.
@@ -142,7 +136,7 @@ const AutocompleteWithSuggestions = _ref => {
     return posts.reduce((acc, post) => {
       acc.push({
         value: parseInt(post.id),
-        label: (0, _htmlEntities.decodeEntities)(post?.title.rendered) || __('(no title)', 'newspack')
+        label: (0, _htmlEntities.decodeEntities)(post?.title.rendered) || (0, _i18n.__)('(no title)', 'newspack-plugin')
       });
       return acc;
     }, []);
@@ -187,20 +181,20 @@ const AutocompleteWithSuggestions = _ref => {
     const selections = selectedPost ? [...selectedItems, selectedPost] : selectedItems;
     const selectedMessage = multiSelect ? (0, _i18n.sprintf)(
     // Translators: %1: the length of selections. %2: the selection leabel.
-    __('%1$s %2$s selected', 'newspack'), selections.length, selections.length > 1 ? postTypeLabelPlural : postTypeLabel) :
+    (0, _i18n.__)('%1$s %2$s selected', 'newspack-plugin'), selections.length, selections.length > 1 ? postTypeLabelPlural : postTypeLabel) : (0, _i18n.sprintf)(
     // Translators: %s: The label for the selection.
-    (0, _i18n.sprintf)(__('Selected %s', 'newspack'), postTypeLabel);
-    return (0, _jsxRuntime.jsxs)("div", {
+    (0, _i18n.__)('Selected %s', 'newspack-plugin'), postTypeLabel);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-autocomplete-with-suggestions__selected-items",
-      children: [(0, _jsxRuntime.jsxs)("p", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
         className: "newspack-autocomplete-with-suggestions__label",
-        children: [selectedMessage, 1 < selections.length && _x(' – ', 'separator character', 'newspack'), 1 < selections.length && (0, _jsxRuntime.jsx)(_components.Button, {
+        children: [selectedMessage, 1 < selections.length && (0, _i18n._x)(' – ', 'separator character', 'newspack-plugin'), 1 < selections.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
           onClick: () => onChange([]),
           isLink: true,
           isDestructive: true,
-          children: __('Clear all', 'newspack')
+          children: (0, _i18n.__)('Clear all', 'newspack-plugin')
         })]
-      }), selections.map(selection => (0, _jsxRuntime.jsx)(_components.Button, {
+      }), selections.map(selection => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
         className: "newspack-autocomplete-with-suggestions__selected-item-button",
         isTertiary: true,
         onClick: () => onChange(selections.filter(_selection => _selection.value !== selection.value)),
@@ -213,10 +207,10 @@ const AutocompleteWithSuggestions = _ref => {
    * Render post type select dropdown.
    */
   const renderPostTypeSelect = () => {
-    return (0, _jsxRuntime.jsx)(_components.SelectControl, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
       label: (0, _i18n.sprintf)(
       // Translators: %s: The name of the type.
-      __('%s type', 'newspack'), postTypeLabel.charAt(0).toUpperCase() + postTypeLabel.slice(1)),
+      (0, _i18n.__)('%s type', 'newspack-plugin'), postTypeLabel.charAt(0).toUpperCase() + postTypeLabel.slice(1)),
       value: postTypeToSearch,
       options: postTypes.map(postTypeOption => ({
         label: postTypeOption.label,
@@ -235,13 +229,13 @@ const AutocompleteWithSuggestions = _ref => {
     if (multiSelect) {
       const selections = selectedPost ? [...selectedItems, selectedPost] : [...selectedItems];
       const isSelected = !!selections.find(_selection => parseInt(_selection.value) === parseInt(suggestion.value) && _selection.label === suggestion.label);
-      return (0, _jsxRuntime.jsx)(_components.CheckboxControl, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
         checked: isSelected,
         onChange: () => handleOnChange([suggestion]),
         label: suggestion.label
       }, suggestion.value);
     }
-    return (0, _jsxRuntime.jsx)(_components.Button, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
       isLink: true,
       onClick: () => handleOnChange([suggestion]),
       children: suggestion.label
@@ -252,43 +246,37 @@ const AutocompleteWithSuggestions = _ref => {
    * Render a list of suggestions that can be clicked to select instead of searching by title.
    */
   const renderSuggestions = () => {
-    if (isLoading) {
-      return (0, _jsxRuntime.jsx)("div", {
-        className: "newspack-autocomplete-with-suggestions__suggestions-spinner",
-        children: (0, _jsxRuntime.jsx)(_components.Spinner, {})
-      });
-    }
     if (0 === suggestions.length) {
       return null;
     }
     const className = multiSelect ? 'newspack-autocomplete-with-suggestions__search-suggestions-multiselect' : 'newspack-autocomplete-with-suggestions__search-suggestions';
-    return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [!hideHelp && (0, _jsxRuntime.jsx)("p", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [!hideHelp && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         className: "newspack-autocomplete-with-suggestions__label",
-        children: /* Translators: %s: the name of a post type. */(0, _i18n.sprintf)(__('Or, select a recent %s:', 'newspack'), postTypeLabel)
-      }), (0, _jsxRuntime.jsxs)("div", {
+        children: /* Translators: %s: the name of a post type. */(0, _i18n.sprintf)((0, _i18n.__)('Or, select a recent %s:', 'newspack-plugin'), postTypeLabel)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: className,
-        children: [suggestions.map(renderSuggestion), suggestions.length < (maxItemsToSuggest || maxSuggestions) && (0, _jsxRuntime.jsx)(_components.Button, {
+        children: [suggestions.map(renderSuggestion), suggestions.length < (maxItemsToSuggest || maxSuggestions) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
           disabled: isLoadingMore,
           isSecondary: true,
           onClick: () => setIsLoadingMore(true),
-          children: isLoadingMore ? __('Loading…', 'newspack') : __('Load more', 'newspack')
+          children: isLoadingMore ? (0, _i18n.__)('Loading…', 'newspack-plugin') : (0, _i18n.__)('Load more', 'newspack-plugin')
         })]
       })]
     });
   };
-  return (0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: classNames.join(' '),
-    children: [0 < selectedItems.length && renderSelections(), 1 < postTypes.length && renderPostTypeSelect(), (0, _jsxRuntime.jsx)(_.AutocompleteTokenField, {
+    children: [0 < selectedItems.length && renderSelections(), 1 < postTypes.length && renderPostTypeSelect(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.AutocompleteTokenField, {
       tokens: [],
       onChange: handleOnChange,
       fetchSuggestions: async search => handleFetchSuggestions(search, 0, postTypeToSearch),
       fetchSavedInfo: postIds => handleFetchSaved(postIds),
       label: label,
+      loading: isLoading,
       help: !hideHelp && help,
       returnFullObjects: true
     }), renderSuggestions()]
   });
 };
-var _default = AutocompleteWithSuggestions;
-exports.default = _default;
+var _default = exports.default = AutocompleteWithSuggestions;

package/dist/{esm/autocomplete-with-suggestions → 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%;
@@ -15,13 +15,6 @@
 			margin-top: 16px;
 		}
 	}
-
-	.components-spinner {
-		margin: 8px;
-		right: 0;
-		top: calc( 1.4em + 8px );
-	}
-
 	.components-select-control__input {
 		max-width: none;
 	}
@@ -104,7 +97,7 @@
 		padding-right: 8px;
 
 		&::after {
-			content: '✕';
+			content: "✕";
 			margin-left: 8px;
 		}
 
@@ -119,8 +112,7 @@
 		border-radius: 2px;
 		border: 1px solid wp-colors.$gray-700;
 		max-height: 178px;
-		overflow-x: visible;
-		overflow-y: auto;
+		overflow: visible auto;
 		padding: 8px 8px 0;
 
 		.components-button {
@@ -134,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;
 				}
 			}
@@ -157,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/dist/button/index.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var _interopRequireDefault = require( '@babel/runtime/helpers/interopRequireDefault' );
+Object.defineProperty( exports, '__esModule', {
+	value: true,
+} );
+exports.default = void 0;
+var _components = require( '@wordpress/components' );
+var _element = require( '@wordpress/element' );
+var _router = _interopRequireDefault( require( '../proxied-imports/router' ) );
+require( './style.scss' );
+var _jsxRuntime = require( 'react/jsx-runtime' );
+/**
+ * Button
+ */
+
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const { useHistory } = _router.default;
+const Button = ( { href, onClick, ...otherProps } ) => {
+	const history = useHistory();
+	const [ isAwaitingOnClick, setIsAwaitingOnClick ] = ( 0,
+	_element.useState )( false );
+
+	// If both onClick and href are present, await the onClick action an then redirect.
+	if ( href && onClick ) {
+		otherProps.onClick = async () => {
+			setIsAwaitingOnClick( true );
+			await onClick();
+			setIsAwaitingOnClick( false );
+			history.push( ( href || '' ).replace( '#', '' ) );
+		};
+	} else {
+		otherProps.href = href;
+		otherProps.onClick = onClick;
+	}
+	if ( isAwaitingOnClick ) {
+		otherProps.disabled = true;
+	}
+	// @ts-ignore - @wordpress/components' Button can only have either href or onClick, not both.
+	return /*#__PURE__*/ ( 0, _jsxRuntime.jsx )( _components.Button, {
+		...otherProps,
+	} );
+};
+var _default = ( exports.default = Button );

package/{src/button/index.js → dist/button/index.tsx}

@@ -16,25 +16,32 @@ import './style.scss';
 
 const { useHistory } = Router;
 
-const Button = ( { href, onClick, ...otherProps } ) => {
+type OriginalButtonProps = typeof BaseComponent.defaultProps;
+type Props = OriginalButtonProps & {
+	href?: string;
+	onClick?: () => void;
+};
+
+const Button = ( { href, onClick, ...otherProps }: Props ) => {
 	const history = useHistory();
 	const [ isAwaitingOnClick, setIsAwaitingOnClick ] = useState( false );
 
 	// If both onClick and href are present, await the onClick action an then redirect.
 	if ( href && onClick ) {
-		otherProps.onClick = async () => {
+		( otherProps as Props ).onClick = async () => {
 			setIsAwaitingOnClick( true );
 			await onClick();
 			setIsAwaitingOnClick( false );
-			history.push( href.replace( '#', '' ) );
+			history.push( ( href || '' ).replace( '#', '' ) );
 		};
 	} else {
-		otherProps.href = href;
-		otherProps.onClick = onClick;
+		( otherProps as Props ).href = href;
+		( otherProps as Props ).onClick = onClick;
 	}
 	if ( isAwaitingOnClick ) {
 		otherProps.disabled = true;
 	}
+	// @ts-ignore - @wordpress/components' Button can only have either href or onClick, not both.
 	return <BaseComponent { ...otherProps } />;
 };
 

package/dist/{cjs/button → button}/style.scss

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

package/dist/{cjs/button-card → button-card}/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
 });
@@ -10,7 +10,7 @@ var _icons = require("@wordpress/icons");
 var _ = require("../");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Button Card
  */
@@ -45,23 +45,23 @@ class ButtonCard extends _element.Component {
       ...otherProps
     } = this.props;
     const classes = (0, _classnames.default)('newspack-button-card', className, chevron && 'has-chevron', grouped && 'grouped', icon && 'has-icon', isDestructive && 'is-destructive', isPressed && 'is-pressed', isSmall && 'is-small');
-    return (0, _jsxRuntime.jsxs)("a", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
       className: classes,
       ...otherProps,
-      children: [icon && (0, _jsxRuntime.jsx)(_icons.Icon, {
+      children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
         icon: icon,
         height: 48,
         width: 48
-      }), (0, _jsxRuntime.jsxs)(_.Grid, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
         noMargin: true,
         columns: 1,
         gutter: 8,
-        children: [title && (0, _jsxRuntime.jsx)("h3", {
+        children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
           children: title
-        }), desc && (0, _jsxRuntime.jsx)("p", {
+        }), desc && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           children: desc
         })]
-      }), chevron && (0, _jsxRuntime.jsx)(_icons.Icon, {
+      }), chevron && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
         icon: _icons.chevronRight,
         height: 24,
         width: 24
@@ -69,5 +69,4 @@ class ButtonCard extends _element.Component {
     });
   }
 }
-var _default = ButtonCard;
-exports.default = _default;
+var _default = exports.default = ButtonCard;

package/dist/{cjs/button-card → 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/dist/{cjs/card → card}/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
 });
@@ -8,7 +8,7 @@ exports.default = void 0;
 var _element = require("@wordpress/element");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Card
  */
@@ -42,11 +42,10 @@ class Card extends _element.Component {
       ...otherProps
     } = this.props;
     const classes = (0, _classnames.default)('newspack-card', className, buttonsCard && 'newspack-card__buttons-card', headerActions && 'newspack-card__header-actions', isMedium && 'newspack-card__is-medium', isNarrow && 'newspack-card__is-narrow', isSmall && 'newspack-card__is-small', isWhite && 'newspack-card__is-white', noBorder && 'newspack-card__no-border');
-    return (0, _jsxRuntime.jsx)("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes,
       ...otherProps
     });
   }
 }
-var _default = Card;
-exports.default = _default;
+var _default = exports.default = Card;

package/dist/{esm/card → 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;