@automattic/jetpack-components 0.72.2 → 0.72.4

package/components/jetpack-footer/style.scss

@@ -38,6 +38,7 @@
 	}
 
 	&.is-sm {
+
 		> ul {
 			flex-direction: column;
 			align-items: flex-start;
@@ -100,6 +101,7 @@
 }
 
 .jp-dashboard-footer__a8c-item {
+
 	.jp-dashboard-footer.is-lg & {
 		margin-inline-start: auto;
 	}
@@ -111,6 +113,7 @@
 
 .jp-dashboard-footer__jp-item,
 .jp-dashboard-footer__a8c-item {
+
 	> a {
 		text-decoration: none; // Logos typically have no hover effect
 	}

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/breakpoints.module.scss

@@ -14,6 +14,7 @@ $breakpoints: ("sm": "(max-width: 599px)", "md": "(min-width: 600px) and (max-wi
 }
 
 :export {
+
 	@each $breakpoint, $media in $breakpoints {
 		#{$breakpoint}: string.unquote($media);
 	}

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,8 +1,10 @@
 @use "sass:map";
-@import "../breakpoints.module.scss";
+@import "../breakpoints.module";
 
 @mixin cols($size) {
+
 	@include media($size) using ($columns) {
+
 		@for $i from 1 through $columns {
 			.col-#{$size}-#{$i} {
 				grid-column-end: span #{$i};

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/loading-placeholder/style.module.scss

@@ -1,10 +1,13 @@
 @keyframes pulse {
+
   0% {
     opacity: .6;
   }
+
   50% {
     opacity: 1;
   }
+
   100% {
     opacity: .6;
   }

package/components/notice/style.module.scss

@@ -24,6 +24,7 @@
 	border: none;
 	cursor: pointer;
 	outline: none;
+
 	svg {
 		display: block;
 	}
@@ -31,6 +32,7 @@
 
 // Mobile layout differences.
 @media screen and ( max-width: 600px ) {
+
 	.container {
 		position: relative;
 		padding-top: 68px;
@@ -71,6 +73,7 @@
 	}
 
 	a {
+
 		&, &:hover, &:active, &:focus {
 			color: var( --jp-black );
 		}

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

@@ -10,6 +10,7 @@ $track-height: 8px;
 
 // On holding thumb styling
 .jp-components-number-slider--is-holding {
+
 	.jp-components-number-slider__thumb {
 		box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(6, 158, 8, 0.25);
 	}
@@ -22,6 +23,7 @@ $track-height: 8px;
 }
 
 .jp-components-number-slider__track {
+
 	@include adjust-track-rail-styles;
 	top: calc(($thumb-height / 2) - ($track-height / 2));
 	background: var(--jp-gray);
@@ -46,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-card/style.scss

@@ -14,6 +14,7 @@
 	}
 
 	&__icon {
+
 		img {
 			height: 32px;
 			width: 32px;

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

@@ -25,6 +25,7 @@
 	}
 
 	&.is-primary {
+
 		> * {
 			background: var(--jp-white);
 			position: relative;
@@ -78,6 +79,7 @@
 			left: var(--padding);
 			right: var(--padding);
 			height: 1px;
+
 			.is-viewport-large & {
 				width: calc(100% + var(--gap));
 				left: 0;
@@ -140,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';

package/components/product-price/price.tsx

@@ -1,8 +1,8 @@
 import { getCurrencyObject } from '@automattic/format-currency';
 import clsx from 'clsx';
-import Text from '../text/index.js';
+import Text from '../text/index.tsx';
 import styles from './style.module.scss';
-import type { PriceProps } from './types.js';
+import type { PriceProps } from './types.ts';
 import type React from 'react';
 
 /**

package/components/product-price/style.module.scss

@@ -29,7 +29,7 @@
 	&.is-not-off-price {
 		color: var( --jp-gray-20);
 
-		&:after {
+		&::after {
 			content: " ";
 			display: block;
 			width: 100%;
@@ -43,6 +43,7 @@
 		}
 	}
 }
+
 .footer {
 	display: flex;
 	flex-wrap: wrap;

package/components/progress-bar/index.tsx

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

package/components/radio-control/styles.module.scss

@@ -4,9 +4,13 @@
 /// @link https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/radio-control
 
 .radio {
+
 	:global {
+
 		.components-radio-control {
+
 			&__input[type="radio"] {
+
 				&:checked {
 					background: var( --jp-green-40 );
 					border-color: var( --jp-green-40 );

package/components/record-meter-bar/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React, { useMemo } from 'react';
-import numberFormat from '../number-format/index.js';
+import numberFormat from '../number-format/index.ts';
 
 import './style.scss';
 

package/components/record-meter-bar/style.scss

@@ -11,16 +11,19 @@
 	}
 
 	&__legend {
+
 		&--items {
 			display: flex;
 			margin: 0;
 		}
+
 		&--item {
 			display: flex;
 			margin: 0;
 			margin-inline-end: 1em;
 			align-items: center;
 		}
+
 		&--item-circle {
 			width: 1rem;
 			height: 1rem;
@@ -28,9 +31,11 @@
 			margin-inline-end: 0.4em;
 			border-radius: 100%;
 		}
+
 		&--item-count {
 			margin-inline-end: 0.4em;
 		}
+
 		&--item-label-first {
 			margin-inline-end: 0.4em;
 		}

package/components/spinner/style.scss

@@ -1,4 +1,5 @@
 @keyframes rotate-spinner {
+
 	100% {
 		transform: rotate( 360deg );
 	}
@@ -19,13 +20,13 @@
 }
 
 .jp-components-spinner__outer {
-	border-top-color: white;
+	border-top-color: #fff;
 }
 
 .jp-components-spinner__inner {
 	width: 100%;
 	height: 100%;
-	border-top-color: white;
-	border-right-color: white;
+	border-top-color: #fff;
+	border-right-color: #fff;
 	opacity: 0.4;
 }

package/components/split-button/index.tsx

@@ -1,6 +1,6 @@
 import { Button, Flex, DropdownMenu } from '@wordpress/components';
 import styles from './style.module.scss';
-import { SplitButtonProps } from './types.js';
+import { SplitButtonProps } from './types.ts';
 import type React from 'react';
 
 const DownIcon = () => (

package/components/stat-card/index.tsx

@@ -6,10 +6,10 @@ import clsx from 'clsx';
 /**
  * Internal dependencies
  */
-import numberFormat from '../number-format/index.js';
-import Text from '../text/index.js';
+import numberFormat from '../number-format/index.ts';
+import Text from '../text/index.tsx';
 import styles from './style.module.scss';
-import { StatCardProps } from './types.js';
+import { StatCardProps } from './types.ts';
 import type React from 'react';
 
 /**

package/components/status/index.tsx

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import Text from '../text/index.js';
+import Text from '../text/index.tsx';
 import styles from './style.module.scss';
 
 interface StatusProps {

package/components/status/style.module.scss

@@ -21,6 +21,7 @@
     }
 
     &.is-active {
+
 		span, a {
 			color: var(--jp-green-50);
 		}
@@ -31,6 +32,7 @@
     }
 
     &.is-inactive {
+
 		span, a {
 			color: var(--jp-gray-50);
 		}
@@ -41,6 +43,7 @@
     }
 
     &.is-error {
+
 		span, a {
 			color: var(--jp-red-50);
 		}
@@ -51,6 +54,7 @@
     }
 
     &.is-action {
+
 		span, a {
 			color: var(--jp-yellow-30);
 		}
@@ -61,6 +65,7 @@
     }
 
     &.is-initializing {
+
 		span, a {
 			color: var(--jp-blue-40);
 		}

package/components/terms-of-service/index.tsx

@@ -1,9 +1,9 @@
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
-import { getRedirectUrl } from '../../../components/index.js';
-import Text from '../text/index.js';
-import type { TermsOfServiceProps } from './types.js';
+import { getRedirectUrl } from '../../index.ts';
+import Text from '../text/index.tsx';
+import type { TermsOfServiceProps } from './types.ts';
 import './styles.scss';
 
 const TermsOfService: React.FC< TermsOfServiceProps > = ( {

package/components/terms-of-service/types.ts

@@ -1,4 +1,4 @@
-import { TextProps } from '../text/types.js';
+import { TextProps } from '../text/types.ts';
 
 type MultipleButtonsProps = {
 	/**

package/components/testimonials/index.tsx

@@ -1,7 +1,7 @@
 import { useState, useCallback } from '@wordpress/element';
-import Gridicon from '../gridicon/index.js';
-import { Testimonial } from './testimonial.js';
-import { TestimonialsType } from './types.js';
+import Gridicon from '../gridicon/index.tsx';
+import { Testimonial } from './testimonial.tsx';
+import { TestimonialsType } from './types.ts';
 
 const Testimonials: TestimonialsType = ( { testimonials } ) => {
 	const [ currentTestimonialIndex, setcurrentTestimonialIndex ] = useState( 0 );

package/components/testimonials/style.scss

@@ -117,6 +117,7 @@
 }
 
 @keyframes showTestimonial {
+
     0% {
         opacity: 0;
     }

package/components/testimonials/testimonial.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import type { TestimonialType } from './types.js';
+import type { TestimonialType } from './types.ts';
 
 import './style.scss';
 

package/components/text/index.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import React, { forwardRef, useMemo } from 'react';
-import { BOX_MODEL_VALUES, VARIANTS_MAPPING } from './constants.js';
+import { BOX_MODEL_VALUES, VARIANTS_MAPPING } from './constants.ts';
 import styles from './style.module.scss';
-import type { H3Props, TextProps, TitleProps } from './types.js';
+import type { H3Props, TextProps, TitleProps } from './types.ts';
 
 /**
  * Text component.
@@ -87,4 +87,4 @@ export const Title: React.FC< TitleProps > = ( {
 	</Text>
 );
 
-export * from './constants.js';
+export * from './constants.ts';

package/components/text/style.module.scss

@@ -98,6 +98,7 @@ $sides: (
 	$sizes: ( 0, 1, 2, 3, 4, 5, 6, 7, 8 );
 
 	@each $size in $sizes {
+
 		/* m, p */
 		.#{$p}-#{$size} {
 			#{$prop}: calc( var( --spacing-base ) * #{$size} );
@@ -115,6 +116,7 @@ $sides: (
 		}
 
 		/* mt, mr, mb, ml */
+
 		/* pt, pr, pb, pl */
 		@each $side, $s in $sides {
 			.#{$p}#{$s}-#{$size} {