@automattic/jetpack-components 0.72.3 → 0.72.4

package/components/admin-page/types.ts

@@ -1,4 +1,4 @@
-import type { JetpackFooterMenuItem } from '../jetpack-footer/types.js';
+import type { JetpackFooterMenuItem } from '../jetpack-footer/types.ts';
 
 export type AdminPageProps = {
 	/**

package/components/admin-section/basic/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './style.module.scss';
-import type { AdminSectionBaseProps } from '../types.js';
+import type { AdminSectionBaseProps } from '../types.ts';
 
 /**
  * This is the wrapper component to build sections within your admin page.

package/components/admin-section/hero/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './style.module.scss';
-import type { AdminSectionBaseProps } from '../types.js';
+import type { AdminSectionBaseProps } from '../types.ts';
 
 /**
  * The wrapper component for a Hero Section to be used in admin pages.

package/components/automattic-byline-logo/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React from 'react';
-import { AutomatticBylineLogoProps } from './types.js';
+import { AutomatticBylineLogoProps } from './types.ts';
 
 /**
  * Automattic "By line" Logo component.

package/components/boost-score-bar/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import Gridicon from '../gridicon/index.js';
-import type { BoostScoreBarProps } from './types.js';
+import Gridicon from '../gridicon/index.tsx';
+import type { BoostScoreBarProps } from './types.ts';
 import type { FunctionComponent } from 'react';
 
 import './style.scss';

package/components/boost-score-graph/annotations-plugin.ts

@@ -1,5 +1,5 @@
 import uPlot from 'uplot';
-import { Annotation } from './index.js';
+import { Annotation } from './index.tsx';
 
 import './style-annotation.scss';
 

package/components/boost-score-graph/index.tsx

@@ -1,7 +1,7 @@
 import React, { type FunctionComponent } from 'react';
-import Text from '../text/index.js';
-import Background from './background.js';
-import UplotLineChart from './uplot-line-chart.js';
+import Text from '../text/index.tsx';
+import Background from './background.tsx';
+import UplotLineChart from './uplot-line-chart.tsx';
 import './style.scss';
 
 export interface Period {

package/components/boost-score-graph/style-annotation.scss

@@ -1,5 +1,5 @@
 $black: #101517;
-$white: #ffffff;
+$white: #fff;
 
 .jb-graph-annotations {
 	pointer-events: none;

package/components/boost-score-graph/style-tooltip.scss

@@ -1,6 +1,6 @@
 $grey: #8e8e8e;
 $black: #101517;
-$white: #ffffff;
+$white: #fff;
 
 .jb-score-tooltips-container {
     width: 100%;

package/components/boost-score-graph/tooltip.tsx

@@ -3,7 +3,7 @@ import { dateI18n } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
 import { type FunctionComponent } from 'react';
 import './style-tooltip.scss';
-import { Period } from './index.js';
+import { Period } from './index.tsx';
 
 export const Tooltip: FunctionComponent = ( { period }: { period: Period } ) => {
 	if ( ! period || ! period.dimensions || ! period.timestamp ) {

package/components/boost-score-graph/tooltips-plugin.ts

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom/client';
 import uPlot from 'uplot';
-import { Tooltip } from './tooltip.js';
-import { Period } from './index.js';
+import { Period } from './index.tsx';
+import { Tooltip } from './tooltip.tsx';
 
 /**
  * Custom tooltips plugin for uPlot.

package/components/boost-score-graph/uplot-line-chart.tsx

@@ -2,15 +2,15 @@ import { __ } from '@wordpress/i18n';
 import React, { useMemo, useRef, useCallback } from 'react';
 import uPlot from 'uplot';
 import UplotReact from 'uplot-react';
-import { getUserLocale } from '../../lib/locale/index.js';
-import numberFormat from '../number-format/index.js';
-import { annotationsPlugin } from './annotations-plugin.js';
-import { dayHighlightPlugin } from './day-highlight-plugin.js';
-import getDateFormat from './get-date-format.js';
-import { tooltipsPlugin } from './tooltips-plugin.js';
-import { useBoostScoreTransform } from './use-boost-score-transform.js';
-import useResize from './use-resize.js';
-import { type Annotation, Period } from './index.js';
+import { getUserLocale } from '../../lib/locale/index.ts';
+import numberFormat from '../number-format/index.ts';
+import { annotationsPlugin } from './annotations-plugin.ts';
+import { dayHighlightPlugin } from './day-highlight-plugin.ts';
+import getDateFormat from './get-date-format.ts';
+import { type Annotation, Period } from './index.tsx';
+import { tooltipsPlugin } from './tooltips-plugin.ts';
+import { useBoostScoreTransform } from './use-boost-score-transform.ts';
+import useResize from './use-resize.ts';
 import './style-uplot.scss';
 
 const DEFAULT_DIMENSIONS = {

package/components/boost-score-graph/use-boost-score-transform.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Period } from './index.js';
+import { Period } from './index.tsx';
 
 type ScoreGraphAlignedData = [
 	number[], // timestamps

package/components/button/index.tsx

@@ -10,7 +10,7 @@ import React, { forwardRef } from 'react';
  * Internal dependencies
  */
 import styles from './style.module.scss';
-import type { ButtonProps } from './types.js';
+import type { ButtonProps } from './types.ts';
 
 /**
  * Button component

package/components/contextual-upgrade-trigger/index.tsx

@@ -1,9 +1,9 @@
 import { Icon, arrowRight } from '@wordpress/icons';
 import clsx from 'clsx';
-import IconTooltip from '../icon-tooltip/index.js';
-import Text from '../text/index.js';
+import IconTooltip from '../icon-tooltip/index.tsx';
+import Text from '../text/index.tsx';
 import styles from './style.module.scss';
-import { CutBaseProps } from './types.js';
+import { CutBaseProps } from './types.ts';
 import type React from 'react';
 
 const ContextualUpgradeTrigger: React.FC< CutBaseProps > = ( {

package/components/contextual-upgrade-trigger/style.module.scss

@@ -47,12 +47,12 @@
 
 	// Overwrite styles in Text component
 	.cta {
-		font-weight: bold;
+		font-weight: 700;
 	}
 }
 
 .cta {
-	font-weight: bold;
+	font-weight: 700;
 }
 
 .icon {

package/components/copy-to-clipboard/index.tsx

@@ -1,9 +1,9 @@
 import { useCopyToClipboard } from '@wordpress/compose';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import Button from '../button/index.js';
-import { ClipboardIcon, CheckmarkIcon } from '../icons/index.js';
-import { CopyToClipboardProps } from './types.js';
+import Button from '../button/index.tsx';
+import { ClipboardIcon, CheckmarkIcon } from '../icons/index.tsx';
+import { CopyToClipboardProps } from './types.ts';
 import type React from 'react';
 
 export const CopyToClipboard: React.FC< CopyToClipboardProps > = ( {

package/components/copy-to-clipboard/types.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '../button/types.js';
+import { ButtonProps } from '../button/types.ts';
 
 export type CopyToClipboardProps = ButtonProps & {
 	buttonStyle?: 'icon' | 'text' | 'icon-text';

package/components/decorative-card/index.tsx

@@ -1,4 +1,4 @@
-import type { DecorativeCardProps } from './types.js';
+import type { DecorativeCardProps } from './types.ts';
 import type React from 'react';
 import './style.scss';
 

package/components/decorative-card/style.scss

@@ -22,7 +22,7 @@
 		background-size: cover;
 		position: relative;
 
-		&:before {
+		&::before {
 			content: '';
 			display: block;
 			position: absolute;
@@ -35,7 +35,7 @@
 	}
 
 	&__content {
-		background: #FFFFFF;
+		background: #FFF;
 		padding: 2rem;
 	}
 
@@ -85,7 +85,7 @@
 			top: calc(100% + 16px);
 		}
 
-		&:after {
+		&::after {
 			top: calc(100% + 32px);
 			width: 75%;
 		}

package/components/dialog/index.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import React from 'react';
-import Col from '../layout/col/index.js';
-import Container from '../layout/container/index.js';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
+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';
 
 type DialogProps = {

package/components/diff-viewer/index.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
-import parseFilename from './parse-filename.js';
-import parsePatch from './parse-patch.js';
+import parseFilename from './parse-filename.ts';
+import parsePatch from './parse-patch.ts';
 import styles from './styles.module.scss';
 
 const filename = ( {

package/components/dot-pager/index.tsx

@@ -2,7 +2,7 @@ import { Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React, { Children, useState, useEffect, ReactNode, useCallback, useMemo } from 'react';
-import { Swipeable } from '../swipeable/index.js';
+import { Swipeable } from '../swipeable/index.tsx';
 
 import './style.scss';
 

package/components/global-notices/global-notices.tsx

@@ -1,6 +1,6 @@
 import { SnackbarList } from '@wordpress/components';
 import styles from './styles.module.scss';
-import { useGlobalNotices } from './use-global-notices.js';
+import { useGlobalNotices } from './use-global-notices.ts';
 
 export type GlobalNoticesProps = {
 	maxVisibleNotices?: number;

package/components/global-notices/index.ts

@@ -1,3 +1,3 @@
-export * from './global-notices.js';
-export * from './use-global-notices.js';
+export * from './global-notices.tsx';
+export * from './use-global-notices.ts';
 export { store as globalNoticesStore } from '@wordpress/notices';

package/components/gridicon/index.tsx

@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { Component } from 'react';
 import './style.scss';
-import { GridiconProps } from './types.js';
+import { GridiconProps } from './types.ts';
 
 class Gridicon extends Component< GridiconProps > {
 	static defaultProps = {

package/components/icon-tooltip/index.tsx

@@ -1,9 +1,9 @@
 import { Popover } from '@wordpress/components';
 import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
-import Button from '../button/index.js';
-import Gridicon from '../gridicon/index.js';
-import { IconTooltipProps, Placement, Position } from './types.js';
+import Button from '../button/index.tsx';
+import Gridicon from '../gridicon/index.tsx';
+import { IconTooltipProps, Placement, Position } from './types.ts';
 
 import './style.scss';
 

package/components/icons/index.tsx

@@ -2,7 +2,7 @@ import { Path, SVG, G, Polygon } from '@wordpress/components';
 import clsx from 'clsx';
 import { SocialLogo } from 'social-logos';
 import styles from './style.module.scss';
-import { BaseIconProps } from './types.js';
+import { BaseIconProps } from './types.ts';
 import type React from 'react';
 
 /**

package/components/icons/style.module.scss

@@ -1,7 +1,7 @@
 @import '@automattic/jetpack-base-styles/gutenberg-base-styles';
 
 .star-icon {
-	fill: black;
+	fill: #000;
 }
 
 .jetpack,

package/components/indeterminate-progress-bar/index.tsx

@@ -7,7 +7,7 @@ import clsx from 'clsx';
  * Internal dependencies
  */
 import styles from './style.module.scss';
-import { IndeterminateProgressBarProps } from './types.js';
+import { IndeterminateProgressBarProps } from './types.ts';
 import type React from 'react';
 
 /**

package/components/jetpack-footer/index.tsx

@@ -2,13 +2,13 @@ import { __, _x } from '@wordpress/i18n';
 import { Icon, external } from '@wordpress/icons';
 import clsx from 'clsx';
 import React from 'react';
-import { getRedirectUrl } from '../../index.js';
-import getSiteAdminUrl from '../../tools/get-site-admin-url/index.js';
-import AutomatticBylineLogo from '../automattic-byline-logo/index.js';
+import { getRedirectUrl } from '../../index.ts';
+import getSiteAdminUrl from '../../tools/get-site-admin-url/index.ts';
+import AutomatticBylineLogo from '../automattic-byline-logo/index.tsx';
 import './style.scss';
-import JetpackLogo from '../jetpack-logo/index.js';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
-import type { JetpackFooterProps, JetpackFooterMenuItem } from './types.js';
+import JetpackLogo from '../jetpack-logo/index.tsx';
+import useBreakpointMatch from '../layout/use-breakpoint-match/index.ts';
+import type { JetpackFooterProps, JetpackFooterMenuItem } from './types.ts';
 
 const JetpackIcon: React.FC = () => (
 	<JetpackLogo logoColor="#000" showText={ false } height={ 16 } aria-hidden="true" />

package/components/jetpack-logo/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React from 'react';
-import { JetpackLogoProps } from './types.js';
+import { JetpackLogoProps } from './types.ts';
 
 const JetpackLogo: React.FC< JetpackLogoProps > = ( {
 	logoColor = '#069e08',

package/components/jetpack-protect-logo/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React from 'react';
-import { JetpackProtectLogoProps } from './types.js';
+import { JetpackProtectLogoProps } from './types.ts';
 
 const JetpackProtectLogo: React.FC< JetpackProtectLogoProps > = ( {
 	logoColor = '#069e08',

package/components/jetpack-search-logo/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React from 'react';
-import { JetpackSearchLogoProps } from './types.js';
+import { JetpackSearchLogoProps } from './types.ts';
 
 const JetpackSearchLogo: React.FC< JetpackSearchLogoProps > = ( {
 	logoColor = '#069e08',

package/components/jetpack-vaultpress-backup-logo/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React from 'react';
-import { JetpackLogoProps } from './types.js';
+import { JetpackLogoProps } from './types.ts';
 
 const JetpackVaultPressBackupLogo: React.FC< JetpackLogoProps > = ( {
 	showText = true,

package/components/jetpack-videopress-logo/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React from 'react';
-import { JetpackLogoProps } from './types.js';
+import { JetpackLogoProps } from './types.tsx';
 
 const JetpackVideoPressLogo: React.FC< JetpackLogoProps > = ( {
 	showText = true,

package/components/layout/col/index.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { createElement } from 'react';
-import { ColProps } from '../types.js';
+import { ColProps } from '../types.ts';
 import styles from './style.module.scss';
 import type React from 'react';
 

package/components/layout/col/style.module.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@import "../breakpoints.module.scss";
+@import "../breakpoints.module";
 
 @mixin cols($size) {
 

package/components/layout/container/index.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { createElement, forwardRef, useMemo } from 'react';
-import { ContainerProps } from '../types.js';
+import { ContainerProps } from '../types.ts';
 import styles from './style.module.scss';
 import type React from 'react';
 

package/components/layout/container/style.module.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@import "../breakpoints.module.scss";
+@import "../breakpoints.module";
 
 @mixin container($size) {
 	$paddings: ("sm": "16px", "md": "18px", "lg": "24px");

package/components/number-format/index.ts

@@ -1,4 +1,4 @@
-import { getUserLocale } from '../../lib/locale/index.js';
+import { getUserLocale } from '../../lib/locale/index.ts';
 
 /**
  * Format a number using the locale in use by the user viewing the page.

package/components/number-slider/index.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 import ReactSlider, { ReactSliderProps } from 'react-slider';
-import { NumberSliderProps } from './types.js';
+import { NumberSliderProps } from './types.ts';
 import './style.scss';
 
 /**

package/components/number-slider/style.scss

@@ -48,7 +48,7 @@ $track-height: 8px;
 	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
 	border-radius: 4px;
 	color: var(--jp-black);
-	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-style: normal;
 	font-weight: 600;
 	font-size: var(--font-body);

package/components/popover/style.scss

@@ -20,6 +20,6 @@
 	&__body p {
 		font-weight: 400;
 		line-height: 1.6em;
-		font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+		font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	}
 }

package/components/pricing-card/index.tsx

@@ -2,8 +2,8 @@ import { getCurrencyObject } from '@automattic/format-currency';
 import { Button } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 import { LoadingPlaceholder } from '@automattic/jetpack-components';
-import TermsOfService from '../terms-of-service/index.js';
-import type { PricingCardProps } from './types.js';
+import TermsOfService from '../terms-of-service/index.tsx';
+import type { PricingCardProps } from './types.ts';
 import type { CurrencyObject } from '@automattic/format-currency/src/types.js';
 import type React from 'react';
 

package/components/pricing-table/index.tsx

@@ -10,17 +10,17 @@ import React, {
 	ReactElement,
 	CSSProperties,
 } 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 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';
 import {
 	PricingTableProps,
 	PricingTableColumnProps,
 	PricingTableHeaderProps,
 	PricingTableItemProps,
-} from './types.js';
+} from './types.ts';
 
 const INCLUDED_TEXT = __( 'Included', 'jetpack-components' );
 const NOT_INCLUDED_TEXT = __( 'Not included', 'jetpack-components' );

package/components/pricing-table/styles.module.scss

@@ -142,7 +142,7 @@
 	width: fit-content;
 
 	> a {
-		color: black;
+		color: #000;
 	}
 
 	.is-viewport-large & {

package/components/pricing-table/types.ts

@@ -1,4 +1,4 @@
-import type { Placement } from '../icon-tooltip/types.js';
+import type { Placement } from '../icon-tooltip/types.ts';
 
 export type PricingTableProps = {
 	/**

package/components/product-offer/icons-card.tsx

@@ -1,8 +1,8 @@
 import { Icon, plus } from '@wordpress/icons';
 import React, { Fragment } from 'react';
-import { getIconBySlug } from '../icons/index.js';
+import { getIconBySlug } from '../icons/index.tsx';
 import styles from './style.module.scss';
-import { IconsCardProps } from './types.js';
+import { IconsCardProps } from './types.ts';
 
 /**
  * Icons composition for a bundle product,

package/components/product-offer/index.tsx

@@ -1,15 +1,15 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check } from '@wordpress/icons';
 import clsx from 'clsx';
-import Alert from '../alert/index.js';
-import Button from '../button/index.js';
-import { CheckmarkIcon } from '../icons/index.js';
-import ProductPrice from '../product-price/index.js';
-import Text, { H3, Title } from '../text/index.js';
-import { IconsCard } from './icons-card.js';
-import { ProductOfferHeader } from './product-offer-header.js';
+import Alert from '../alert/index.tsx';
+import Button from '../button/index.tsx';
+import { CheckmarkIcon } from '../icons/index.tsx';
+import ProductPrice from '../product-price/index.tsx';
+import Text, { H3, Title } from '../text/index.tsx';
+import { IconsCard } from './icons-card.tsx';
+import { ProductOfferHeader } from './product-offer-header.tsx';
 import styles from './style.module.scss';
-import { ProductOfferProps } from './types.js';
+import { ProductOfferProps } from './types.ts';
 import type React from 'react';
 
 /**
@@ -112,4 +112,4 @@ const ProductOffer: React.FC< ProductOfferProps > = ( {
 };
 
 export default ProductOffer;
-export * from './icons-card.js';
+export * from './icons-card.tsx';

package/components/product-offer/product-offer-header.tsx

@@ -1,8 +1,8 @@
 import { __ } from '@wordpress/i18n';
 import { Icon, starFilled as star } from '@wordpress/icons';
-import Text from '../text/index.js';
+import Text from '../text/index.tsx';
 import styles from './style.module.scss';
-import { ProductOfferHeaderProps } from './types.js';
+import { ProductOfferHeaderProps } from './types.ts';
 import type React from 'react';
 
 /**

package/components/product-offer/types.ts

@@ -1,5 +1,5 @@
-import { ProductPriceProps } from '../product-price/types.js';
-import type { JetpackIconSlug } from '../icons/index.js';
+import { ProductPriceProps } from '../product-price/types.ts';
+import type { JetpackIconSlug } from '../icons/index.tsx';
 
 export type ProductOfferProps = {
 	/**

package/components/product-price/index.tsx

@@ -6,10 +6,10 @@ import clsx from 'clsx';
 /*
  * Internal dependencies
  */
-import Text from '../text/index.js';
-import { Price } from './price.js';
+import Text from '../text/index.tsx';
+import { Price } from './price.tsx';
 import styles from './style.module.scss';
-import type { ProductPriceProps } from './types.js';
+import type { ProductPriceProps } from './types.ts';
 import type React from 'react';
 
 /**
@@ -87,4 +87,4 @@ const ProductPrice: React.FC< ProductPriceProps > = ( {
 };
 
 export default ProductPrice;
-export * from './price.js';
+export * from './price.tsx';