@automattic/jetpack-components 0.72.3 → 0.72.5

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

@@ -36,7 +36,7 @@
 	.container {
 		position: relative;
 		padding-top: 68px;
-		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.06);
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);
 	}
 
 	.icon-wrapper {

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

@@ -3,7 +3,7 @@
 	max-width: calc( 100% - 32px );
 	padding: 16px;
 	background-color: #fff;
-	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 4px 8px 0 rgba(0, 0, 0, 0.03);
 	border: 1px solid rgba(220, 220, 222, 1);
 	border-radius: 4px;
 	text-align: center;
@@ -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

@@ -6,7 +6,7 @@
 	max-width: 384px;
 	padding: 24px 24px 32px;
 	background:var( --jp-white );
-	box-shadow: 0px 10px 40px rgba( 0, 0, 0, 0.08 );
+	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.08 );
 	border-radius: var( --jp-border-radius );
 
 	@media screen and ( min-width: 600px ) {
@@ -53,7 +53,7 @@
 		position: absolute;
 		width: 100%;
 		height: 3px;
-		left: 0px;
+		left: 0;
 		top: 20px;
 		background: var( --jp-pink );
 		border-radius: 1.5px;
@@ -94,7 +94,7 @@
 		color: var( --jp-white ) !important;
 		border-radius: var( --jp-border-radius );
 		padding: 14px 24px;
-		margin: 24px 0px 32px;
+		margin: 24px 0 32px;
 		justify-content: center;
 		align-items: center;
 	}

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

@@ -38,7 +38,7 @@
 				right: 0;
 				bottom: 0;
 				z-index: -1;
-				box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.05);
+				box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
 			}
 		}
 	}
@@ -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';

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%;

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/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/spinner/style.scss

@@ -20,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/stat-card/style.module.scss

@@ -1,6 +1,6 @@
 .wrapper {
 	background-color: var( --jp-white );
-	box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.08);
+	box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08);
 	border-radius: calc( var( --jp-border-radius ) * 2 ); // 8px;
 	display: flex;
 

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/terms-of-service/index.tsx

@@ -1,9 +1,10 @@
+import { ExternalLink } from '@wordpress/components';
 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 > = ( {
@@ -92,14 +93,9 @@ const TermsOfServiceTextOnly = () =>
 	);
 
 const Link: React.FC< { slug: string; children?: React.ReactNode } > = ( { slug, children } ) => (
-	<a
-		className="terms-of-service__link"
-		href={ getRedirectUrl( slug ) }
-		rel="noopener noreferrer"
-		target="_blank"
-	>
+	<ExternalLink className="terms-of-service__link" href={ getRedirectUrl( slug ) }>
 		{ children }
-	</a>
+	</ExternalLink>
 );
 
 export default TermsOfService;

package/components/terms-of-service/styles.scss

@@ -5,6 +5,5 @@
 	.terms-of-service__link {
 		color: var(--jp-green-50);
 		white-space: nowrap;
-		text-decoration: underline;
 	}
 }

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/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/types.ts

@@ -1,4 +1,4 @@
-import { VARIANTS_MAPPING } from './constants.js';
+import { VARIANTS_MAPPING } from './constants.ts';
 import type React from 'react';
 
 export type SpacingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
@@ -39,6 +39,7 @@ export type TextProps = {
 	children: React.ReactNode;
 	/** Force an specific tag (span, div) or use a custom component that will receive className and children */
 	component?: React.FC< { [ prop: string ]: unknown } > | React.ElementType;
+	style?: React.CSSProperties;
 };
 
 export type H3Props = TextProps & {

package/components/theme-provider/index.tsx

@@ -1,6 +1,6 @@
 import React, { useLayoutEffect, useRef } from 'react';
 import styles from './globals.module.scss';
-import { ThemeInstance, ThemeProviderProps } from './types.js';
+import { ThemeInstance, ThemeProviderProps } from './types.ts';
 
 export const typography = {
 	// Headline

package/components/upsell-banner/index.tsx

@@ -2,7 +2,7 @@ import { Card, CardBody } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import React from 'react';
 import { Button } from '@automattic/jetpack-components';
-import { UpsellBannerProps } from './types.js';
+import { UpsellBannerProps } from './types.ts';
 
 import './style.scss';
 

package/components/upsell-banner/style.scss

@@ -75,7 +75,7 @@
 			.upsell-banner--content-cta-button {
 				white-space: nowrap;
 				box-shadow: inset 0 0 0 1.5px rgb(0, 0, 0);
-				font-weight: normal;
+				font-weight: 400;
 				padding: 8px 16px;
               
                 &.secondary {

package/components/zendesk-chat/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useCallback } from 'react';
-import { chatKey } from './constants.js';
-import type { ZendeskChatType } from './types.js';
+import { chatKey } from './constants.ts';
+import type { ZendeskChatType } from './types.ts';
 
 export const ZendeskChat: ZendeskChatType = ( { jwt_token } ) => {
 	const authenticateUser = useCallback( () => {