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

package/dist/{cjs/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%;
@@ -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/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/dist/button/index.tsx

@@ -0,0 +1,48 @@
+/**
+ * Button
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { Button as BaseComponent } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Router from '../proxied-imports/router';
+import './style.scss';
+
+const { useHistory } = Router;
+
+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 as Props ).onClick = async () => {
+			setIsAwaitingOnClick( true );
+			await onClick();
+			setIsAwaitingOnClick( false );
+			history.push( ( href || '' ).replace( '#', '' ) );
+		};
+	} else {
+		( 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 } />;
+};
+
+export default Button;

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

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,7 +42,7 @@ 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
     });

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;

package/dist/{cjs/category-autocomplete → category-autocomplete}/index.js

@@ -1,11 +1,10 @@
 "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 _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
@@ -16,7 +15,7 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _find = _interopRequireDefault(require("lodash/find"));
 var _filter = _interopRequireDefault(require("lodash/filter"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Category Autocomplete
  */
@@ -36,52 +35,17 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /**
  * Category autocomplete field component.
  */class CategoryAutocomplete extends _element.Component {
+  state = {
+    suggestions: {},
+    allCategories: {},
+    isLoading: false
+  };
+
   /**
    * Class constructor.
    */
   constructor(props) {
     super(props);
-    (0, _defineProperty2.default)(this, "state", {
-      suggestions: {},
-      allCategories: {},
-      isLoading: false
-    });
-    /**
-     * Prepare categories data for the API endpoint, call the change handler.
-     *
-     * @param {Array} tokens An array of category tokens.
-     */
-    (0, _defineProperty2.default)(this, "handleOnChange", tokens => {
-      const {
-        onChange
-      } = this.props;
-      const {
-        suggestions
-      } = this.state;
-      // Categories that are already will be objects, while new additions will be strings (the name).
-      // allValues nomalizes the array so that they are all objects.
-      const allValues = tokens.filter(token => 'undefined' !== typeof token) // Ensure each token is a valid value.
-      .map(token => 'string' === typeof token ? suggestions[token] : token).filter(Boolean);
-      onChange(allValues);
-    });
-    (0, _defineProperty2.default)(this, "getAvailableSuggestions", () => {
-      const {
-        value
-      } = this.props;
-      const {
-        suggestions
-      } = this.state;
-      const selectedIds = value.reduce((acc, item) => {
-        if (item?.id) {
-          acc.push(item.id);
-        }
-        return acc;
-      }, []);
-      const availableSuggestions = (0, _filter.default)(suggestions, ({
-        id
-      }) => selectedIds.indexOf(id) === -1);
-      return availableSuggestions.map(v => v.name);
-    });
     this.debouncedUpdateSuggestions = (0, _debounce.default)(this.updateSuggestions, 100);
   }
   componentDidMount() {
@@ -135,6 +99,44 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
       isLoading: false
     }));
   }
+
+  /**
+   * Prepare categories data for the API endpoint, call the change handler.
+   *
+   * @param {Array} tokens An array of category tokens.
+   */
+  handleOnChange = tokens => {
+    const {
+      onChange
+    } = this.props;
+    const {
+      suggestions
+    } = this.state;
+    // Categories that are already will be objects, while new additions will be strings (the name).
+    // allValues nomalizes the array so that they are all objects.
+    const allValues = tokens.filter(token => 'undefined' !== typeof token) // Ensure each token is a valid value.
+    .map(token => 'string' === typeof token ? suggestions[token] : token).filter(Boolean);
+    onChange(allValues);
+  };
+  getAvailableSuggestions = () => {
+    const {
+      value
+    } = this.props;
+    const {
+      suggestions
+    } = this.state;
+    const selectedIds = value.reduce((acc, item) => {
+      if (item?.id) {
+        acc.push(item.id);
+      }
+      return acc;
+    }, []);
+    const availableSuggestions = (0, _filter.default)(suggestions, ({
+      id
+    }) => selectedIds.indexOf(id) === -1);
+    return availableSuggestions.map(v => v.name);
+  };
+
   /**
    * Render the component.
    */
@@ -153,9 +155,9 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
       isLoading
     } = this.state;
     const classes = (0, _classnames.default)('newspack-category-autocomplete', className);
-    return (0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: classes,
-      children: [(0, _jsxRuntime.jsx)(_.FormTokenField, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.FormTokenField, {
         onInputChange: input => this.debouncedUpdateSuggestions(input),
         value: value.reduce((acc, item) => {
           const categoryOrItem = typeof item === 'number' ? (0, _find.default)(allCategories, ['id', item]) : item;
@@ -174,9 +176,9 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
         description: description,
         hideHelpFromVision: hideHelpFromVision,
         hideLabelFromVision: hideLabelFromVision
-      }), isLoading ? (0, _jsxRuntime.jsx)("span", {
+      }), isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "newspack-category-autocomplete__suggestions-spinner",
-        children: (0, _jsxRuntime.jsx)(_components.Spinner, {})
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
       }) : null]
     });
   }

package/dist/{cjs/category-autocomplete → 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;
 		}
 

package/dist/{cjs/color-picker → color-picker}/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,7 +13,7 @@ var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
 var _hooks = _interopRequireDefault(require("../hooks"));
 var _utils = _interopRequireDefault(require("../utils"));
 require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies.
  */
@@ -40,12 +40,12 @@ const ColorPicker = ({
   const ref = (0, _element.useRef)();
   const colordColor = (0, _colord.colord)(color);
   _hooks.default.useOnClickOutside(ref, () => setIsExpanded(false));
-  return (0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)('newspack-color-picker', className),
-    children: [(0, _jsxRuntime.jsx)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "newspack-color-picker__label",
       children: label
-    }), (0, _jsxRuntime.jsx)(InteractiveDiv, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InteractiveDiv, {
       className: 'newspack-color-picker__expander',
       onClick: () => setIsExpanded(!isExpanded),
       style: {
@@ -53,10 +53,10 @@ const ColorPicker = ({
         color: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
       },
       children: color
-    }), (0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "newspack-color-picker__main",
       ref: ref,
-      children: isExpanded && (0, _jsxRuntime.jsx)(_components.ColorPicker, {
+      children: isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ColorPicker, {
         color: color,
         onChange: hex => onChange(hex),
         enableAlpha: false

package/dist/{cjs/color-picker → color-picker}/style.scss

@@ -10,7 +10,7 @@
 	}
 
 	&__expander {
-		box-shadow: inset 0 0 0 1px rgb( 0 0 0 / 20% );
+		box-shadow: inset 0 0 0 1px rgb(0 0 0 / 20%);
 		border-radius: 2px;
 		height: 64px;
 		padding: 12px;
@@ -18,14 +18,14 @@
 		text-transform: uppercase;
 
 		&:focus-visible {
-			box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			border-color: white;
 		}
 	}
 
 	&__main {
 		background: white;
-		box-shadow: 0 0 8px 4px rgba( black, 0.08 );
+		box-shadow: 0 0 8px 4px rgba(black, 0.08);
 		margin: 12px 0;
 		position: absolute;
 		z-index: 2;

package/dist/{cjs/custom-select-control → custom-select-control}/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,7 @@ var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Custom Select Control
  */
@@ -36,7 +36,7 @@ class CustomSelectControl extends _element.Component {
       ...otherProps
     } = this.props;
     const classes = (0, _classnames.default)('newspack-custom-select-control', className);
-    return (0, _jsxRuntime.jsx)(_components.CustomSelectControl, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CustomSelectControl, {
       className: classes,
       ...otherProps
     });

package/dist/{esm/custom-select-control → custom-select-control}/style.scss

@@ -2,7 +2,7 @@
  * Custom Select Control
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-custom-select-control {
 	label {
@@ -22,13 +22,13 @@
 		&:active,
 		&:focus,
 		&:hover,
-		&[aria-expanded='true'] {
+		&[aria-expanded="true"] {
 			color: wp-colors.$gray-900;
 		}
 
 		&:focus {
-			border-color: var( --wp-admin-theme-color );
-			box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color );
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 		}
 
 		&-icon {
@@ -36,15 +36,15 @@
 			width: 18px;
 		}
 
-		&[aria-expanded='true'] svg {
-			transform: rotate( 180deg );
+		&[aria-expanded="true"] svg {
+			transform: rotate(180deg);
 		}
 	}
 
 	.components-custom-select-control__menu {
 		border-color: wp-colors.$gray-700;
 		border-radius: 2px;
-		box-shadow: 0 4px 8px rgba( black, 0.08 );
+		box-shadow: 0 4px 8px rgba(black, 0.08);
 		margin: 8px 0 0;
 		min-width: 222px;
 	}
@@ -72,16 +72,17 @@
 
 		&.is-highlighted {
 			background: white;
-			color: var( --wp-admin-theme-color );
+			color: var(--wp-admin-theme-color);
 		}
 
 		&.is-selected {
 			margin-left: 0;
 
 			&::before {
-				background: url( 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTguMyA1LjZMOS45IDE2LjlsLTQuNi0zLjQtLjkgMS4yIDUuOCA0LjMgOS4zLTEyLjZ6IiBmaWxsPSIjMzM2NmZmIj48L3BhdGg+PC9zdmc+Cg==' )
+				background:
+					url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTguMyA1LjZMOS45IDE2LjlsLTQuNi0zLjQtLjkgMS4yIDUuOCA0LjMgOS4zLTEyLjZ6IiBmaWxsPSIjMzM2NmZmIj48L3BhdGg+PC9zdmc+Cg==")
 					0 0 no-repeat;
-				content: '';
+				content: "";
 				display: block;
 				height: 24px;
 				margin: 0 4px 0 0;