@automattic/jetpack-components 1.12.10 → 1.12.12

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.12.12] - 2026-06-25
+### Fixed
+- Icon tooltip: Type `iconCode` as `ReactElement` so it matches the `@wordpress/icons` Icon and `@wordpress/ui` 0.15 type definitions. [#49795]
+
+## [1.12.11] - 2026-06-24
+### Removed
+- Remove deprecated Spinner component. Use Spinner from @wordpress/components instead. [#49856]
+
 ## [1.12.10] - 2026-06-23
 ### Changed
 - Update package dependencies. [#49831]
@@ -1852,6 +1860,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.12.12]: https://github.com/Automattic/jetpack-components/compare/1.12.11...1.12.12
+[1.12.11]: https://github.com/Automattic/jetpack-components/compare/1.12.10...1.12.11
 [1.12.10]: https://github.com/Automattic/jetpack-components/compare/1.12.9...1.12.10
 [1.12.9]: https://github.com/Automattic/jetpack-components/compare/1.12.8...1.12.9
 [1.12.8]: https://github.com/Automattic/jetpack-components/compare/1.12.7...1.12.8

package/build/components/action-popover/index.js

@@ -3,10 +3,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * External dependencies
  */
 import { Popover } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
 import Button from '../button/index.js';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
 import Text from '../text/index.js';
 /**
  * Internal dependencies
@@ -14,7 +14,7 @@ import Text from '../text/index.js';
 import ThemeProvider from '../theme-provider/index.js';
 import styles from './styles.module.scss';
 const ActionPopover = ({ hideCloseButton = false, title, children, step = null, totalSteps = null, buttonContent = null, buttonDisabled = false, buttonHref = null, buttonExternalLink = false, offset = 32, onClose, onClick, ...otherPopoverProps }) => {
-    const [isSm] = useBreakpointMatch('sm');
+    const isSm = useViewportMatch('small', '<');
     if (!title || !children || !buttonContent) {
         return null;
     }

package/build/components/dialog/index.js

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useViewportMatch } from '@wordpress/compose';
 import clsx from 'clsx';
 import Col from '../layout/col/index.js';
 import Container from '../layout/container/index.js';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
 import styles from './style.module.scss';
 /**
  * Dialog component.
@@ -15,7 +15,8 @@ import styles from './style.module.scss';
  * @return {ReactNode}                 Rendered dialog
  */
 const Dialog = ({ primary, secondary, isTwoSections = false, ...containerProps }) => {
-    const [isSmall, isLowerThanLarge] = useBreakpointMatch(['sm', 'lg'], [null, '<']);
+    const isSmall = useViewportMatch('small', '<');
+    const isLowerThanLarge = useViewportMatch('large', '<');
     /*
      * By convention, secondary section is not shown when:
      * - layout is a two-sections setup

package/build/components/icon-tooltip/types.d.ts

@@ -1,5 +1,5 @@
-import type { IconType } from '@wordpress/components';
-import type { ReactNode } from 'react';
+import type { Icon } from '@wordpress/icons';
+import type { ComponentProps, ReactNode } from 'react';
 export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 export type Position = 'top left' | 'top center' | 'top right' | 'bottom left' | 'bottom center' | 'bottom right';
 export type IconTooltipProps = {
@@ -26,7 +26,7 @@ export type IconTooltipProps = {
     /**
      * The icon to display. Accepts icon components from `@wordpress/icons`.
      */
-    iconCode?: IconType;
+    iconCode?: ComponentProps<typeof Icon>['icon'];
     /**
      * The title of Popover.
      */

package/build/components/pricing-table/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useViewportMatch } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, closeSmall } from '@wordpress/icons';
 import clsx from 'clsx';
 import { createContext, useContext, Children, cloneElement, } from 'react';
 import IconTooltip from '../icon-tooltip/index.js';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
 import TermsOfService from '../terms-of-service/index.js';
 import Text from '../text/index.js';
 import styles from './styles.module.scss';
@@ -30,7 +30,7 @@ const getItemLabels = (isComingSoon, isIncluded, featureNameLabel) => {
     };
 };
 export const PricingTableItem = ({ isIncluded = false, isComingSoon = false, index = 0, label = null, tooltipInfo, tooltipTitle, tooltipClassName = '', }) => {
-    const [isLg] = useBreakpointMatch('lg');
+    const isLg = useViewportMatch('large');
     const item = useContext(PricingTableContext)[index];
     const isExplicitlyEmpty = label === '';
     const showTick = isComingSoon || isIncluded;
@@ -61,7 +61,7 @@ export const PricingTableColumn = ({ primary = false, children, className, }) =>
         }) }));
 };
 const PricingTable = ({ title, headerLogo, items, children, showIntroOfferDisclaimer = false, }) => {
-    const [isLg] = useBreakpointMatch('lg');
+    const isLg = useViewportMatch('large');
     return (_jsxs(PricingTableContext.Provider, { value: items, children: [
             _jsx("div", { className: clsx(styles.container, { [styles['is-viewport-large']]: isLg }), style: {
                     '--rows': items.length + 1,

package/build/index.d.ts

@@ -10,8 +10,6 @@ export { default as AutomatticBylineLogo } from './components/automattic-byline-
 export { default as AutomatticIconLogo } from './components/automattic-icon-logo/index.tsx';
 export { default as AutomatticForAgenciesLogo } from './components/automattic-for-agencies-logo/index.tsx';
 export { default as JetpackFooter } from './components/jetpack-footer/index.tsx';
-/** @deprecated Use `Spinner` from `@wordpress/components` instead. */
-export { default as Spinner } from './components/spinner/index.tsx';
 export { default as Gravatar } from './components/gravatar/index.tsx';
 export type { GravatarProps } from './components/gravatar/index.tsx';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';
@@ -25,7 +23,6 @@ export { default as DecorativeCard } from './components/decorative-card/index.ts
 export { default as Col } from './components/layout/col/index.tsx';
 export { default as Testimonials } from './components/testimonials/index.tsx';
 export { default as Container } from './components/layout/container/index.tsx';
-export { default as useBreakpointMatch } from './components/layout/use-breakpoint-match/index.ts';
 export { default as CopyToClipboard } from './components/copy-to-clipboard/index.tsx';
 export * from './components/icons/index.tsx';
 export { default as SplitButton } from './components/split-button/index.tsx';

package/build/index.js

@@ -24,8 +24,6 @@ export { default as AutomatticBylineLogo } from './components/automattic-byline-
 export { default as AutomatticIconLogo } from './components/automattic-icon-logo/index.js';
 export { default as AutomatticForAgenciesLogo } from './components/automattic-for-agencies-logo/index.js';
 export { default as JetpackFooter } from './components/jetpack-footer/index.js';
-/** @deprecated Use `Spinner` from `@wordpress/components` instead. */
-export { default as Spinner } from './components/spinner/index.js';
 export { default as Gravatar } from './components/gravatar/index.js';
 export { default as IconTooltip } from './components/icon-tooltip/index.js';
 export { default as ActionButton } from './components/action-button/index.js';
@@ -38,7 +36,6 @@ export { default as DecorativeCard } from './components/decorative-card/index.js
 export { default as Col } from './components/layout/col/index.js';
 export { default as Testimonials } from './components/testimonials/index.js';
 export { default as Container } from './components/layout/container/index.js';
-export { default as useBreakpointMatch } from './components/layout/use-breakpoint-match/index.js';
 export { default as CopyToClipboard } from './components/copy-to-clipboard/index.js';
 export * from './components/icons/index.js';
 export { default as SplitButton } from './components/split-button/index.js';

package/components/action-popover/index.tsx

@@ -2,10 +2,10 @@
  * External dependencies
  */
 import { Popover } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
 import Button from '../button/index.tsx';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.ts';
 import Text from '../text/index.tsx';
 /**
  * Internal dependencies
@@ -32,7 +32,7 @@ const ActionPopover = ( {
 	onClick,
 	...otherPopoverProps
 }: ActionPopoverProps ) => {
-	const [ isSm ] = useBreakpointMatch( 'sm' );
+	const isSm = useViewportMatch( 'small', '<' );
 
 	if ( ! title || ! children || ! buttonContent ) {
 		return null;

package/components/dialog/index.tsx

@@ -1,7 +1,7 @@
+import { useViewportMatch } from '@wordpress/compose';
 import clsx from 'clsx';
 import Col from '../layout/col/index.tsx';
 import Container from '../layout/container/index.tsx';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.ts';
 import styles from './style.module.scss';
 import type { ReactNode, FC } from 'react';
 
@@ -29,7 +29,8 @@ const Dialog: FC< DialogProps > = ( {
 	isTwoSections = false,
 	...containerProps
 } ) => {
-	const [ isSmall, isLowerThanLarge ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
+	const isSmall = useViewportMatch( 'small', '<' );
+	const isLowerThanLarge = useViewportMatch( 'large', '<' );
 
 	/*
 	 * By convention, secondary section is not shown when:

package/components/icon-tooltip/types.ts

@@ -1,5 +1,5 @@
-import type { IconType } from '@wordpress/components';
-import type { ReactNode } from 'react';
+import type { Icon } from '@wordpress/icons';
+import type { ComponentProps, ReactNode } from 'react';
 
 export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 
@@ -40,7 +40,7 @@ export type IconTooltipProps = {
 	/**
 	 * The icon to display. Accepts icon components from `@wordpress/icons`.
 	 */
-	iconCode?: IconType;
+	iconCode?: ComponentProps< typeof Icon >[ 'icon' ];
 
 	/**
 	 * The title of Popover.

package/components/pricing-table/index.tsx

@@ -1,3 +1,4 @@
+import { useViewportMatch } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, closeSmall } from '@wordpress/icons';
 import clsx from 'clsx';
@@ -11,7 +12,6 @@ import {
 	CSSProperties,
 } from 'react';
 import IconTooltip from '../icon-tooltip/index.tsx';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.ts';
 import TermsOfService from '../terms-of-service/index.tsx';
 import Text from '../text/index.tsx';
 import styles from './styles.module.scss';
@@ -59,7 +59,7 @@ export const PricingTableItem: FC< PricingTableItemProps > = ( {
 	tooltipTitle,
 	tooltipClassName = '',
 } ) => {
-	const [ isLg ] = useBreakpointMatch( 'lg' );
+	const isLg = useViewportMatch( 'large' );
 	const item = useContext( PricingTableContext )[ index ];
 	const isExplicitlyEmpty = label === '';
 	const showTick = isComingSoon || isIncluded;
@@ -158,7 +158,7 @@ const PricingTable: FC< PricingTableProps > = ( {
 	children,
 	showIntroOfferDisclaimer = false,
 } ) => {
-	const [ isLg ] = useBreakpointMatch( 'lg' );
+	const isLg = useViewportMatch( 'large' );
 
 	return (
 		<PricingTableContext.Provider value={ items }>

package/index.ts

@@ -25,8 +25,6 @@ export { default as AutomatticBylineLogo } from './components/automattic-byline-
 export { default as AutomatticIconLogo } from './components/automattic-icon-logo/index.tsx';
 export { default as AutomatticForAgenciesLogo } from './components/automattic-for-agencies-logo/index.tsx';
 export { default as JetpackFooter } from './components/jetpack-footer/index.tsx';
-/** @deprecated Use `Spinner` from `@wordpress/components` instead. */
-export { default as Spinner } from './components/spinner/index.tsx';
 export { default as Gravatar } from './components/gravatar/index.tsx';
 export type { GravatarProps } from './components/gravatar/index.tsx';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';
@@ -40,7 +38,6 @@ export { default as DecorativeCard } from './components/decorative-card/index.ts
 export { default as Col } from './components/layout/col/index.tsx';
 export { default as Testimonials } from './components/testimonials/index.tsx';
 export { default as Container } from './components/layout/container/index.tsx';
-export { default as useBreakpointMatch } from './components/layout/use-breakpoint-match/index.ts';
 export { default as CopyToClipboard } from './components/copy-to-clipboard/index.tsx';
 export * from './components/icons/index.tsx';
 export { default as SplitButton } from './components/split-button/index.tsx';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.12.10",
+	"version": "1.12.12",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {

package/build/components/layout/use-breakpoint-match/index.d.ts

@@ -1,17 +0,0 @@
-type Operators = '<' | '<=' | '>' | '>=';
-/**
- * Hook to match if current viewport is equal, greater or less than expected breakpoint
- *
- * @param {(Breakpoints | Array< Breakpoints >)} breakpointToMatch - An single breakpoint or list of breakpoints to match.
- * @param {(Operators | Array< Operators >)}     operatorToMatch   - An single operator or list of them. It should follow the same sequence than breakpoints.
- * @return {Array<boolean>} - List of matches, following breakpoints sequence.
- * @example
- *
- * ```es6
- * useBreakpointMatch('sm')
- * useBreakpointMatch('lg', '<')
- * useBreakpointMatch([ 'lg', 'sm' ], [ '<', null ])
- * ```
- */
-declare const useBreakpointMatch: (breakpointToMatch: "lg" | "md" | "sm" | ("lg" | "md" | "sm")[], operatorToMatch?: Operators[] | Operators) => boolean[];
-export default useBreakpointMatch;

package/build/components/layout/use-breakpoint-match/index.js

@@ -1,50 +0,0 @@
-import { useMediaQuery } from '@wordpress/compose';
-import breakpointsValues from '../breakpoints.module.scss';
-const BREAKPOINTS = ['sm', 'md', 'lg'];
-const getMediaByOperator = (breakpoint, operator, matches) => {
-    const breakpointIndex = BREAKPOINTS.indexOf(breakpoint);
-    const breakpointIndexPlusOne = breakpointIndex + 1;
-    const isEqual = operator.includes('=');
-    let allNeededBreakpoints = [];
-    if (operator.startsWith('<')) {
-        allNeededBreakpoints = BREAKPOINTS.slice(0, isEqual ? breakpointIndexPlusOne : breakpointIndex);
-    }
-    if (operator.startsWith('>')) {
-        allNeededBreakpoints = BREAKPOINTS.slice(isEqual ? breakpointIndex : breakpointIndexPlusOne);
-    }
-    return allNeededBreakpoints?.length
-        ? allNeededBreakpoints.some(brk => matches[brk])
-        : matches[breakpoint];
-};
-/**
- * Hook to match if current viewport is equal, greater or less than expected breakpoint
- *
- * @param {(Breakpoints | Array< Breakpoints >)} breakpointToMatch - An single breakpoint or list of breakpoints to match.
- * @param {(Operators | Array< Operators >)}     operatorToMatch   - An single operator or list of them. It should follow the same sequence than breakpoints.
- * @return {Array<boolean>} - List of matches, following breakpoints sequence.
- * @example
- *
- * ```es6
- * useBreakpointMatch('sm')
- * useBreakpointMatch('lg', '<')
- * useBreakpointMatch([ 'lg', 'sm' ], [ '<', null ])
- * ```
- */
-const useBreakpointMatch = (breakpointToMatch, operatorToMatch) => {
-    const breakpoints = Array.isArray(breakpointToMatch)
-        ? breakpointToMatch
-        : [breakpointToMatch];
-    const operators = Array.isArray(operatorToMatch)
-        ? operatorToMatch
-        : [operatorToMatch];
-    const [smKey, mdKey, lgKey] = BREAKPOINTS;
-    const sm = useMediaQuery(breakpointsValues[smKey]);
-    const md = useMediaQuery(breakpointsValues[mdKey]);
-    const lg = useMediaQuery(breakpointsValues[lgKey]);
-    const matches = { sm, md, lg };
-    return breakpoints.map((breakpoint, idx) => {
-        const operator = operators[idx];
-        return operator ? getMediaByOperator(breakpoint, operator, matches) : matches[breakpoint];
-    });
-};
-export default useBreakpointMatch;

package/build/components/spinner/index.d.ts

@@ -1,17 +0,0 @@
-import './style.scss';
-declare function Spinner({ color, className, size }: {
-    className?: string;
-    color?: string;
-    size?: number;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace Spinner {
-    var propTypes: {
-        /** The spinner color. */
-        color: any;
-        /** CSS class names. */
-        className: any;
-        /** The spinner size. */
-        size: any;
-    };
-}
-export default Spinner;

package/build/components/spinner/index.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import PropTypes from 'prop-types';
-import './style.scss';
-const Spinner = ({ color = '#FFFFFF', className = '', size = 20 }) => {
-    const theClassName = className + ' jp-components-spinner';
-    const styleOuter = {
-        width: size,
-        height: size,
-        fontSize: size, // allows border-width to be specified in em units
-        borderTopColor: color,
-    };
-    const styleInner = {
-        borderTopColor: color,
-        borderRightColor: color,
-    };
-    return (_jsx("div", { className: theClassName, children: _jsx("div", { className: "jp-components-spinner__outer", style: styleOuter, children: _jsx("div", { className: "jp-components-spinner__inner", style: styleInner }) }) }));
-};
-Spinner.propTypes = {
-    /** The spinner color. */
-    color: PropTypes.string,
-    /** CSS class names. */
-    className: PropTypes.string,
-    /** The spinner size. */
-    size: PropTypes.number,
-};
-export default Spinner;

package/build/components/spinner/style.scss

@@ -1,33 +0,0 @@
-@keyframes rotate-spinner {
-
-	100% {
-		transform: rotate(360deg);
-	}
-}
-
-.jp-components-spinner {
-	display: flex;
-	align-items: center;
-}
-
-.jp-components-spinner__outer,
-.jp-components-spinner__inner {
-	margin: auto;
-	box-sizing: border-box;
-	border: 0.1em solid transparent;
-	border-radius: 50%;
-	animation: 3s linear infinite;
-	animation-name: rotate-spinner;
-}
-
-.jp-components-spinner__outer {
-	border-top-color: #fff;
-}
-
-.jp-components-spinner__inner {
-	width: 100%;
-	height: 100%;
-	border-top-color: #fff;
-	border-right-color: #fff;
-	opacity: 0.4;
-}

package/components/layout/use-breakpoint-match/README.md

@@ -1,43 +0,0 @@
-# useBreakpointMatch
-
-Utility to match against breakpoints.
-
-[ Storybook Reference ](https://automattic.github.io/jetpack-storybook/?path=/story/js-packages-components-layout--breakpoint-match)
-
-## Usage
-
-```jsx
-import { useBreakpointMatch } from '@automattic/jetpack-components';
-const [ isLg ] = useBreakpointMatch('lg')
-return isLg && <Component />
-```
-
-## Parameters
-
-### breakpointToMatch
-
-Single or Array of breakpoints to match against.
-
-- Type: `String`|`Array<String>`
-- Required: `true`
-
-```javascript
-useBreakpointMatch('lg');
-useBreakpointMatch([ 'lg', 'sm' ]);
-```
-
-### operator
-
-A Single or Array of operators to match less, equal, or greater than the breakpoint.
-
-In Array, it matches against the same index from breakpoint.
-
-- Type: `String`|`Array<String>`
-- Required: `false`
-
-#### Example
-
-```javascript
-useBreakpointMatch('md', '<=');
-useBreakpointMatch([ 'lg', 'sm' ], ['<', '>']);
-```

package/components/layout/use-breakpoint-match/declaration.d.ts

@@ -1,9 +0,0 @@
-declare module '*.module.css' {
-	const classes: { [ key: string ]: string };
-	export default classes;
-}
-
-declare module '*.module.scss' {
-	const classes: { [ key: string ]: string };
-	export default classes;
-}

package/components/layout/use-breakpoint-match/index.ts

@@ -1,79 +0,0 @@
-import { useMediaQuery } from '@wordpress/compose';
-import breakpointsValues from '../breakpoints.module.scss';
-
-const BREAKPOINTS = [ 'sm', 'md', 'lg' ] as const;
-
-type Breakpoints = ( typeof BREAKPOINTS )[ number ];
-
-type Operators = '<' | '<=' | '>' | '>=';
-
-type Matches = { sm: boolean; md: boolean; lg: boolean };
-
-const getMediaByOperator = (
-	breakpoint: Breakpoints,
-	operator: Operators,
-	matches: Matches
-): boolean => {
-	const breakpointIndex = BREAKPOINTS.indexOf( breakpoint );
-	const breakpointIndexPlusOne = breakpointIndex + 1;
-	const isEqual = operator.includes( '=' );
-
-	let allNeededBreakpoints = [];
-
-	if ( operator.startsWith( '<' ) ) {
-		allNeededBreakpoints = BREAKPOINTS.slice(
-			0,
-			isEqual ? breakpointIndexPlusOne : breakpointIndex
-		);
-	}
-
-	if ( operator.startsWith( '>' ) ) {
-		allNeededBreakpoints = BREAKPOINTS.slice( isEqual ? breakpointIndex : breakpointIndexPlusOne );
-	}
-
-	return allNeededBreakpoints?.length
-		? allNeededBreakpoints.some( brk => matches[ brk ] )
-		: matches[ breakpoint ];
-};
-
-/**
- * Hook to match if current viewport is equal, greater or less than expected breakpoint
- *
- * @param {(Breakpoints | Array< Breakpoints >)} breakpointToMatch - An single breakpoint or list of breakpoints to match.
- * @param {(Operators | Array< Operators >)}     operatorToMatch   - An single operator or list of them. It should follow the same sequence than breakpoints.
- * @return {Array<boolean>} - List of matches, following breakpoints sequence.
- * @example
- *
- * ```es6
- * useBreakpointMatch('sm')
- * useBreakpointMatch('lg', '<')
- * useBreakpointMatch([ 'lg', 'sm' ], [ '<', null ])
- * ```
- */
-const useBreakpointMatch = (
-	breakpointToMatch: Breakpoints | Array< Breakpoints >,
-	operatorToMatch?: Operators | Array< Operators >
-) => {
-	const breakpoints: Array< Breakpoints > = Array.isArray( breakpointToMatch )
-		? breakpointToMatch
-		: [ breakpointToMatch ];
-
-	const operators: Array< Operators > = Array.isArray( operatorToMatch )
-		? operatorToMatch
-		: [ operatorToMatch ];
-
-	const [ smKey, mdKey, lgKey ] = BREAKPOINTS;
-
-	const sm = useMediaQuery( breakpointsValues[ smKey ] );
-	const md = useMediaQuery( breakpointsValues[ mdKey ] );
-	const lg = useMediaQuery( breakpointsValues[ lgKey ] );
-
-	const matches: Matches = { sm, md, lg };
-
-	return breakpoints.map( ( breakpoint, idx ) => {
-		const operator = operators[ idx ];
-		return operator ? getMediaByOperator( breakpoint, operator, matches ) : matches[ breakpoint ];
-	} );
-};
-
-export default useBreakpointMatch;

package/components/spinner/README.md

@@ -1,28 +0,0 @@
-# Spinner (DEPRECATED)
-
-## We encourage to use [core Spinner](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/spinner#readme) component instead
----------
-
-Spinner is a React component for rendering a loading indicator.
-
-## Usage
-
-```jsx
-import { Component } from 'react';
-import Spinner from '@automattic/jetpack-components';
-
-export default class extends Component {
-	render() {
-		return <Spinner />;
-	}
-}
-```
-
-## Props
-
-The following props can be passed to the Spinner component:
-
-| PROPERTY  | TYPE     | REQUIRED | DEFAULT   | DESCRIPTION                                     |
-| --------- | -------- | -------- | --------- | ----------------------------------------------- |
-| **size**  | _number_ | no       | `20`      | The width and height of the spinner, in pixels. |
-| **color** | _strong_ | no       | `#000000` | The color of the spinner, in hex.               |

package/components/spinner/index.tsx

@@ -1,38 +0,0 @@
-import PropTypes from 'prop-types';
-
-import './style.scss';
-
-const Spinner = ( { color = '#FFFFFF', className = '', size = 20 } ) => {
-	const theClassName = className + ' jp-components-spinner';
-
-	const styleOuter = {
-		width: size,
-		height: size,
-		fontSize: size, // allows border-width to be specified in em units
-		borderTopColor: color,
-	};
-
-	const styleInner = {
-		borderTopColor: color,
-		borderRightColor: color,
-	};
-
-	return (
-		<div className={ theClassName }>
-			<div className="jp-components-spinner__outer" style={ styleOuter }>
-				<div className="jp-components-spinner__inner" style={ styleInner } />
-			</div>
-		</div>
-	);
-};
-
-Spinner.propTypes = {
-	/** The spinner color. */
-	color: PropTypes.string,
-	/** CSS class names. */
-	className: PropTypes.string,
-	/** The spinner size. */
-	size: PropTypes.number,
-};
-
-export default Spinner;

package/components/spinner/style.scss

@@ -1,33 +0,0 @@
-@keyframes rotate-spinner {
-
-	100% {
-		transform: rotate(360deg);
-	}
-}
-
-.jp-components-spinner {
-	display: flex;
-	align-items: center;
-}
-
-.jp-components-spinner__outer,
-.jp-components-spinner__inner {
-	margin: auto;
-	box-sizing: border-box;
-	border: 0.1em solid transparent;
-	border-radius: 50%;
-	animation: 3s linear infinite;
-	animation-name: rotate-spinner;
-}
-
-.jp-components-spinner__outer {
-	border-top-color: #fff;
-}
-
-.jp-components-spinner__inner {
-	width: 100%;
-	height: 100%;
-	border-top-color: #fff;
-	border-right-color: #fff;
-	opacity: 0.4;
-}