newspack-components 2.2.1 → 3.0.0-alpha.2

package/babel.config.js

@@ -0,0 +1,25 @@
+module.exports = api => {
+	api.cache( true );
+	return {
+		extends: 'newspack-scripts/config/babel.config.js',
+		presets: [
+			[
+				'@babel/preset-env',
+				{
+					corejs: 3.6,
+					useBuiltIns: 'entry',
+					// Exclude transforms that make all code slower, see https://github.com/facebook/create-react-app/pull/5278
+					exclude: [ 'transform-typeof-symbol' ],
+				},
+			],
+			[
+				'@babel/preset-react',
+				{
+					runtime: 'automatic',
+					importSource: process.env.IMPORT_SOURCE,
+				},
+			],
+			[ '@babel/preset-typescript', { allowDeclareFields: true } ],
+		],
+	};
+};

package/copy-styles.js

@@ -9,8 +9,7 @@ const rcopy = require( 'recursive-copy' );
 const dir = process.cwd();
 
 const inputDir = path.join( dir, 'src' );
-const outputDirEsm = path.join( dir, 'dist', 'esm' );
-const outputDirCommon = path.join( dir, 'dist', 'cjs' );
+const outputDir = path.join( dir, 'dist' );
 
 console.log( 'Copying styles %s', dir );
 
@@ -21,14 +20,7 @@ const copyOptions = {
 	debug: true,
 };
 
-rcopy( inputDir, outputDirEsm, copyOptions )
-	.then( results => {
-		console.log( 'copied %d files', results.length );
-	} )
-	.catch( err => {
-		console.error( err );
-	} );
-rcopy( inputDir, outputDirCommon, copyOptions )
+rcopy( inputDir, outputDir, copyOptions )
 	.then( results => {
 		console.log( 'copied %d files', results.length );
 	} )

package/dist/{cjs/accordion → accordion}/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
 });
@@ -9,7 +9,10 @@ var _element = require("@wordpress/element");
 var _icons = require("@wordpress/icons");
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 /**
  * WordPress dependencies
  */
@@ -22,25 +25,26 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  * Internal dependencies
  */
 
-const Accordion = _ref => {
-  let {
-    children,
-    title
-  } = _ref;
+const Accordion = ({
+  children,
+  title
+}) => {
   const [isOpen, setIsOpen] = (0, _element.useState)(false);
-  return (0, _jsxRuntime.jsxs)("details", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("details", {
     className: (0, _classnames.default)('newspack-accordion', {
       'newspack-accordion--is-open': isOpen
     }),
-    children: [(0, _jsxRuntime.jsxs)("summary", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("summary", {
       onClick: () => setIsOpen(!isOpen),
-      children: [title, (0, _jsxRuntime.jsx)(_icons.Icon, {
+      children: [title, /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
         className: "newspack-accordion__icon",
         icon: _icons.chevronRight,
         size: 24
       })]
-    }), children]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "newspack-accordion__content",
+      children: children
+    })]
   });
 };
-var _default = Accordion;
-exports.default = _default;
+var _default = exports.default = Accordion;

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

@@ -1,17 +1,17 @@
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@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 );
+		transform: rotate(90deg);
 	}
 
 	&--is-open {
 		.newspack-accordion {
 			&__icon {
-				transform: rotate( -90deg );
+				transform: rotate(-90deg);
 			}
 		}
 	}
@@ -24,4 +24,8 @@
 		font-size: 14px;
 		font-weight: bold;
 	}
+
+	&__content {
+		padding: 16px 32px;
+	}
 }

package/dist/{cjs/action-card → action-card}/index.js

@@ -1,18 +1,17 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+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 _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 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");
 /**
  * Action Card
  */
@@ -30,12 +29,10 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  */
 
 class ActionCard extends _element.Component {
-  constructor() {
-    super(...arguments);
-    (0, _defineProperty2.default)(this, "state", {
-      expanded: false
-    });
-  }
+  state = {
+    expanded: false
+  };
+
   /**
    * When the collapse prop is updated to true, collapse the card if already expanded.
    */
@@ -103,120 +100,120 @@ class ActionCard extends _element.Component {
     const hasInternalLink = href && href.indexOf('http') !== 0;
     const isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
     const badges = !Array.isArray(badge) && badge ? [badge] : badge;
-    return (0, _jsxRuntime.jsxs)(_.Card, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Card, {
       className: classes,
       onClick: simple && onClick,
-      children: [(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "newspack-action-card__region newspack-action-card__region-top",
-        children: [toggleOnChange && (0, _jsxRuntime.jsx)(_components.ToggleControl, {
+        children: [toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
           checked: toggleChecked,
           onChange: toggleOnChange,
           disabled: disabled
-        }), image && !toggleOnChange && (0, _jsxRuntime.jsx)("div", {
+        }), image && !toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "newspack-action-card__region newspack-action-card__region-left",
-          children: (0, _jsxRuntime.jsx)("a", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
             href: imageLink,
-            children: (0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "newspack-action-card__image",
               style: backgroundImageStyles(image)
             })
           })
-        }), checkbox && !toggleOnChange && (0, _jsxRuntime.jsx)("div", {
+        }), checkbox && !toggleOnChange && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "newspack-action-card__region newspack-action-card__region-left",
-          children: (0, _jsxRuntime.jsx)("span", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: (0, _classnames.default)('newspack-checkbox-icon', 'is-primary', 'checked' === checkbox && 'newspack-checkbox-icon--checked', isPending && 'newspack-checkbox-icon--pending'),
-            children: 'checked' === checkbox && (0, _jsxRuntime.jsx)(_icons.Icon, {
+            children: 'checked' === checkbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
               icon: _icons.check
             })
           })
-        }), (0, _jsxRuntime.jsx)("div", {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "newspack-action-card__region newspack-action-card__region-center",
-          children: (0, _jsxRuntime.jsxs)(_.Grid, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
             columns: 1,
             gutter: 8,
             noMargin: true,
-            children: [(0, _jsxRuntime.jsxs)("h2", {
-              children: [(0, _jsxRuntime.jsxs)("span", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
                 className: "newspack-action-card__title",
                 ...titleProps,
-                children: [titleLink && (0, _jsxRuntime.jsx)("a", {
+                children: [titleLink && /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
                   href: titleLink,
                   children: title
-                }), !titleLink && expandable && (0, _jsxRuntime.jsx)(_.Button, {
+                }), !titleLink && expandable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
                   isLink: true,
                   onClick: () => this.setState({
                     expanded: !expanded
                   }),
                   children: title
                 }), !titleLink && !expandable && title]
-              }), badges?.length && badges.map((badgeText, i) => (0, _jsxRuntime.jsx)("span", {
+              }), badges?.length && badges.map((badgeText, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: "newspack-action-card__badge",
                 children: badgeText
               }, `badge-${i}`))]
-            }), description && (0, _jsxRuntime.jsxs)("p", {
+            }), description && /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
               children: [typeof description === 'string' && description, typeof description === 'function' && description()]
             })]
           })
-        }), !expandable && (actionText || isDisplayingSecondaryAction || actionContent) && (0, _jsxRuntime.jsxs)("div", {
+        }), !expandable && (actionText || isDisplayingSecondaryAction || actionContent) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "newspack-action-card__region newspack-action-card__region-right",
-          children: [actionContent && actionContent, actionText && (handoff ? (0, _jsxRuntime.jsx)(_.Handoff, {
+          children: [actionContent && actionContent, actionText && (handoff ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Handoff, {
             plugin: handoff,
             editLink: editLink,
             compact: true,
             isLink: true,
             children: actionText
-          }) : onClick || hasInternalLink ? (0, _jsxRuntime.jsx)(_.Button, {
+          }) : onClick || hasInternalLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
             disabled: disabled,
             isLink: true,
             href: href,
             onClick: onClick,
             className: "newspack-action-card__primary_button",
             children: actionText
-          }) : href ? (0, _jsxRuntime.jsx)(_components.ExternalLink, {
+          }) : href ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
             href: href,
             className: "newspack-action-card__primary_button",
             children: actionText
-          }) : (0, _jsxRuntime.jsxs)("div", {
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "newspack-action-card__container",
-            children: [actionText, isWaiting && (0, _jsxRuntime.jsx)(_.Waiting, {
+            children: [actionText, isWaiting && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
               isRight: true
             })]
-          })), isDisplayingSecondaryAction && (0, _jsxRuntime.jsx)(_.Button, {
+          })), isDisplayingSecondaryAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
             isLink: true,
             onClick: onSecondaryActionClick,
             className: "newspack-action-card__secondary_button",
             isDestructive: secondaryDestructive,
             children: secondaryActionText
           })]
-        }), expandable && (0, _jsxRuntime.jsx)(_.Button, {
+        }), expandable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
           onClick: () => this.setState({
             expanded: !expanded
           }),
-          children: (0, _jsxRuntime.jsx)(_icons.Icon, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
             icon: expanded ? _icons.chevronUp : _icons.chevronDown,
             height: 24,
             width: 24
           })
         })]
-      }), notification && (0, _jsxRuntime.jsxs)("div", {
+      }), notification && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "newspack-action-card__notification newspack-action-card__region-children",
-        children: ['error' === notificationLevel && (0, _jsxRuntime.jsx)(_.Notice, {
+        children: ['error' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
           noticeText: notification,
           isError: true,
           rawHTML: notificationHTML
-        }), 'info' === notificationLevel && (0, _jsxRuntime.jsx)(_.Notice, {
+        }), 'info' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
           noticeText: notification,
           rawHTML: notificationHTML
-        }), 'success' === notificationLevel && (0, _jsxRuntime.jsx)(_.Notice, {
+        }), 'success' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
           noticeText: notification,
           isSuccess: true,
           rawHTML: notificationHTML
-        }), 'warning' === notificationLevel && (0, _jsxRuntime.jsx)(_.Notice, {
+        }), 'warning' === notificationLevel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
           noticeText: notification,
           isWarning: true,
           rawHTML: notificationHTML
         })]
-      }), children && (expandable && expanded || !expandable) && (0, _jsxRuntime.jsx)("div", {
+      }), children && (expandable && expanded || !expandable) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "newspack-action-card__region-children",
         children: children
       })]
@@ -226,5 +223,4 @@ class ActionCard extends _element.Component {
 ActionCard.defaultProps = {
   toggleChecked: false
 };
-var _default = ActionCard;
-exports.default = _default;
+var _default = exports.default = ActionCard;

package/dist/{esm/action-card → 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/dist/{cjs/autocomplete-tokenfield → autocomplete-tokenfield}/index.js

@@ -1,16 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+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 _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -28,16 +27,6 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  */class AutocompleteTokenField extends _element.Component {
   constructor(props) {
     super(props);
-    /**
-     * If the component has tokens passed in props, it should fetch info after it mounts.
-     */
-    (0, _defineProperty2.default)(this, "isFetchingInfoOnLoad", () => {
-      const {
-        tokens,
-        fetchSavedInfo
-      } = this.props;
-      return Boolean(tokens.length && fetchSavedInfo);
-    });
     this.state = {
       suggestions: [],
       validValues: {},
@@ -45,6 +34,18 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
     };
     this.debouncedUpdateSuggestions = (0, _debounce.default)(this.updateSuggestions, 500);
   }
+
+  /**
+   * If the component has tokens passed in props, it should fetch info after it mounts.
+   */
+  isFetchingInfoOnLoad = () => {
+    const {
+      tokens,
+      fetchSavedInfo
+    } = this.props;
+    return Boolean(tokens.length && fetchSavedInfo);
+  };
+
   /**
    * When the component loads, fetch information about the tokens so we can populate
    * the tokens with the correct labels.
@@ -70,6 +71,31 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
     }
   }
 
+  /**
+   * When the component updates, fetch information about the tokens so we can populate
+   * the tokens with the correct labels.
+   */
+  componentDidUpdate(prevProps) {
+    const {
+      tokens,
+      fetchSavedInfo
+    } = this.props;
+    if (tokens !== prevProps.tokens && this.isFetchingInfoOnLoad()) {
+      fetchSavedInfo(tokens).then(results => {
+        const {
+          validValues
+        } = this.state;
+        results.forEach(suggestion => {
+          validValues[suggestion.value] = suggestion.label;
+        });
+        this.setState({
+          validValues,
+          loading: false
+        });
+      });
+    }
+  }
+
   /**
    * Clean up any unfinished autocomplete api call requests.
    */
@@ -116,8 +142,10 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
       return labels.reduce((acc, label) => {
         Object.keys(validValues).forEach(key => {
           if (validValues[key] === label) {
+            // Preserve numeric or string type of values. Object.keys will convert numbers to strings.
+            const value = isNaN(parseInt(key)) ? key.toString() : parseInt(key);
             acc.push({
-              value: key,
+              value,
               label
             });
           }
@@ -125,7 +153,7 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
         return acc;
       }, []);
     }
-    return labels.map(label => Object.keys(validValues).find(key => validValues[key] === label));
+    return labels.map(label => Object.keys(validValues).map(key => isNaN(parseInt(key)) ? key.toString() : parseInt(key)).find(key => validValues[key] === label));
   }
 
   /**
@@ -151,14 +179,16 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
         if (this.suggestionsRequest !== request) {
           return;
         }
+        const {
+          validValues
+        } = this.state;
         const currentSuggestions = [...suggestions];
-        const currentValidValues = {};
         suggestions.forEach(suggestion => {
-          currentValidValues[suggestion.value] = suggestion.label;
+          validValues[suggestion.value] = suggestion.label;
         });
         this.setState({
           suggestions: currentSuggestions,
-          validValues: currentValidValues,
+          validValues,
           loading: false
         });
       }).catch(() => {
@@ -203,27 +233,35 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
     const {
       help,
       label = '',
+      placeholder = '',
       maxLength
     } = this.props;
     const {
       suggestions,
       loading
     } = this.state;
-    return (0, _jsxRuntime.jsxs)("div", {
+    const classNames = ['newspack-autocomplete-tokenfield__input-container'];
+    if (label) {
+      classNames.push('has-label');
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "newspack-autocomplete-tokenfield",
-      children: [(0, _jsxRuntime.jsx)(_components.FormTokenField, {
-        value: this.getTokens(),
-        suggestions: suggestions.map(suggestion => suggestion.label),
-        onChange: tokens => this.handleOnChange(tokens),
-        onInputChange: input => this.debouncedUpdateSuggestions(input),
-        label: label,
-        maxLength: maxLength
-      }), loading && (0, _jsxRuntime.jsx)(_components.Spinner, {}), help && (0, _jsxRuntime.jsx)("p", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: classNames.join(' '),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FormTokenField, {
+          value: this.getTokens(),
+          suggestions: suggestions.map(suggestion => suggestion.label),
+          onChange: tokens => this.handleOnChange(tokens),
+          onInputChange: input => this.debouncedUpdateSuggestions(input),
+          label: label,
+          maxLength: maxLength,
+          placeholder: placeholder
+        }), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})]
+      }), help && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         className: "newspack-autocomplete-tokenfield__help",
         children: help
       })]
     });
   }
 }
-var _default = AutocompleteTokenField;
-exports.default = _default;
+var _default = exports.default = AutocompleteTokenField;

package/dist/{esm/autocomplete-tokenfield → autocomplete-tokenfield}/style.scss

@@ -2,16 +2,22 @@
  * Autocomplete Token Field
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-autocomplete-tokenfield {
-	position: relative;
-
 	.components-spinner {
-		margin: 8px;
+		margin: 0;
 		position: absolute;
-		right: 0;
-		top: calc( 1.4em + 8px );
+		right: 8px;
+		top: 8px;
+	}
+
+	&__input-container {
+		position: relative;
+
+		&.has-label .components-spinner {
+			top: 32px;
+		}
 	}
 
 	/* Workaround for hard-coded help text in FormTokenField. */
@@ -37,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);
 	}
 }